/* =============================================================================
   FuMinGo — Design-System
   =============================================================================

   Wiederverwendbare Bausteine, alle auf tokens.css aufgebaut. Wird nach
   style.css geladen und gewinnt damit gegen die Alt-Regeln des Themes.

   Diese Klassen ersetzen die früheren Inline-Styles: events.blade.php hatte
   21 style=-Attribute plus einen <style>-Block, bahnen.blade.php einen
   <style>-Block hinter </main>, index.blade.php ein Inline-Background.
   Inline-Styles gewinnen gegen jede Stylesheet-Regel — jede spätere
   Designänderung wäre an diesen Seiten vorbeigegangen.
   ============================================================================= */

/* --- Sprungmarke ---------------------------------------------------------
   Nur bei Tastaturfokus sichtbar. Erspart Tastatur- und Screenreader-Nutzenden
   die zehn Navigationspunkte auf jeder Seite. */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 2000;
  padding: .75rem 1.25rem;
  background: var(--fg-accent);
  color: var(--fg-accent-ink);
  font-weight: 600;
  border-radius: 0 0 var(--fg-r-sm) 0;
}
.skip-link:focus {
  left: 0;
  top: 0;
  color: var(--fg-accent-ink);
}

/* --- Navigation ---------------------------------------------------------- */
#navbar .nav-link {
  text-transform: none;   /* Versalien sind bei "Fußball-Minigolf" schwer lesbar */
  font-size: .95rem;
  letter-spacing: 0;
}
.nav-item--cta {
  padding-left: 15px;
}
@media (max-width: 991.98px) {
  .nav-item--cta {
    padding-left: 0;
    margin-top: var(--fg-s-2);
  }
  .nav-item--cta .btn {
    width: 100%;
  }
}

/* --- Kicker --------------------------------------------------------------
   Kleines Icon plus Label über einer Überschrift. Ersetzt die fünf inline
   wiederholten letter-spacing-Spans aus events.blade.php, von denen einer
   abwich (1px statt 2px). */
.fg-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: var(--fg-s-1);
  font-family: var(--fg-font-heading);
  font-size: var(--fg-kicker);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-green-600);
}
.fg-kicker i { font-size: 1.1em; }
.fg-kicker--light { color: var(--fg-accent); }

/* --- Sectionkopf --------------------------------------------------------- */
.fg-head { margin-bottom: var(--fg-s-4); }
.fg-head--center { text-align: center; }
.fg-head--center .fg-lead { margin-inline: auto; }

.fg-lead {
  max-width: var(--fg-measure);
  margin-top: var(--fg-s-2);
  margin-bottom: 0;
  color: var(--fg-ink-muted);
  font-size: 1.1rem;
}

/* --- Flächen -------------------------------------------------------------
   Abwechselnde Bänder statt beliebiger Hintergrundfarben. */
.fg-band      { background: var(--fg-green-050); }
.fg-band-alt  { background: var(--fg-surface-alt); }
.fg-band-dark { background: var(--fg-green-800); color: rgba(255, 255, 255, .88); }
.fg-band-dark h1,
.fg-band-dark h2,
.fg-band-dark h3,
.fg-band-dark .h2,
.fg-band-dark .h3 { color: #fff; }
.fg-band-dark .fg-lead { color: rgba(255, 255, 255, .82); }

/* =============================================================================
   GRUNDREGEL: Jede Komponente mit eigener Hintergrundfarbe setzt auch ihre
   Textfarbe.

   Ohne das erbt eine helle Karte in einem dunklen Seitenkopf dessen weiße
   Schrift — weiß auf weiß, gemessene 1,00:1. Genau das war auf /feiern der Fall:
   Die Preiskarte und die "+5 €"-Box im .fg-pagehead waren unlesbar.
   Betrifft .fg-card, .fg-note, .fg-facts--plain, .fg-price und .form-control.
   ============================================================================= */

/* --- Karten --------------------------------------------------------------
   Ein Radius, eine Schattenstufe, gleiche Höhe im Grid. Vorher hatte jede
   Kachelsorte eigene Werte. */
.fg-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--fg-s-3);
  background: var(--fg-surface);
  color: var(--fg-ink);
  border: 1px solid var(--fg-green-200);
  border-radius: var(--fg-r-md);
  box-shadow: var(--fg-shadow-1);
  transition: transform var(--fg-transition), box-shadow var(--fg-transition);
}
/* Auch die Auszeichnungen darin: .text-muted ist eine Bootstrap-Klasse, die
   ihrerseits erben würde. */
.fg-card .text-muted,
.fg-card small { color: var(--fg-ink-muted) !important; }
.fg-card h1, .fg-card h2, .fg-card h3, .fg-card h4,
.fg-card .h1, .fg-card .h2, .fg-card .h3, .fg-card .h4 { color: var(--fg-ink); }
.fg-card a:not(.btn) { color: var(--fg-green-600); }
.fg-card--flush { padding: 0; overflow: hidden; }
.fg-card--flush .fg-card__body { padding: var(--fg-s-3); }
.fg-card--link:hover,
.fg-card--link:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--fg-shadow-2);
}
.fg-card--accent {
  border-color: var(--fg-accent);
  box-shadow: var(--fg-shadow-2);
}
.fg-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--fg-s-2);
  border-radius: var(--fg-r-md);
  background: var(--fg-green-050);
  color: var(--fg-green-600);
  font-size: 1.4rem;
}
.fg-card__icon--sm {
  width: 44px;
  height: 44px;
  margin-bottom: 0;
  font-size: 1.1rem;
}
.fg-card__title { margin-bottom: .5rem; }
.fg-card__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.fg-card p:last-child { margin-bottom: 0; }
.fg-card__foot {
  margin-top: auto;
  padding-top: var(--fg-s-2);
}

/* --- Icon-Listen --------------------------------------------------------- */
.fg-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fg-list li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: .65rem;
  line-height: 1.6;
}
.fg-list li > i:first-child {
  position: absolute;
  left: 0;
  top: .28em;
  width: 1.2rem;
  text-align: center;
  color: var(--fg-green-600);
}

/* --- Fakten-Leiste ------------------------------------------------------- */
/* minmax(210px) statt 155px: Bei 155px brachen Beschriftungen wie
   "in drei Spielvarianten" oder "direkt an der Anlage" mitten im Begriff um. */
.fg-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--fg-s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fg-facts li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: var(--fg-s-2) var(--fg-s-3);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--fg-r-md);
}
.fg-facts b + span { margin-top: .15rem; display: block; }
.fg-facts > li > i {
  flex: 0 0 auto;
  margin-top: .15em;
  font-size: 1.35rem;
  color: var(--fg-accent);
}
.fg-facts b {
  display: block;
  font-family: var(--fg-font-heading);
  font-size: 1.02rem;
  line-height: 1.15;
  color: #fff;
}
.fg-facts span {
  font-size: .84rem;
  color: rgba(255, 255, 255, .8);
}
/* Auf hellem Grund */
.fg-facts--plain li {
  background: var(--fg-surface);
  color: var(--fg-ink);
  border-color: var(--fg-green-200);
}
.fg-facts--plain > li > i { color: var(--fg-green-600); }
.fg-facts--plain b { color: var(--fg-ink); }
.fg-facts--plain span { color: var(--fg-ink-muted); }

/* --- Bildflächen ---------------------------------------------------------
   Ein Seitenverhältnis je Kontext statt fester Pixelhöhen.

   WICHTIG: <img> bleibt direktes Kind seines Containers. Das Hero-Karussell
   staffelt seine neun Bilder über :nth-child(1..9) — ein Wrapper um jedes
   einzelne Bild würde alle gleichzeitig einblenden. Siehe SeoTest. */
.fg-figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--fg-r-md);
  background: var(--fg-green-050);
}
.fg-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fg-figure--wide   { aspect-ratio: 16 / 9; }
.fg-figure--square { aspect-ratio: 1 / 1; }
.fg-figure--tall   { aspect-ratio: 3 / 4; }

/* Bahnbilder werden nicht beschnitten — das Hindernis muss ganz zu sehen sein. */
.fg-figure--contain {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
}
.fg-figure--contain img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

a.fg-figure img,
.fg-card--link .fg-figure img {
  transition: transform 400ms ease;
}
a.fg-figure:hover img,
.fg-card--link:hover .fg-figure img {
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  a.fg-figure:hover img,
  .fg-card--link:hover .fg-figure img { transform: none; }
}

/* Kennzeichnung KI-generierter Bilder. */
.fg-figcaption {
  margin-top: .5rem;
  font-size: .8rem;
  color: var(--fg-ink-muted);
}

/* --- Hinweisboxen -------------------------------------------------------- */
.fg-note {
  display: flex;
  gap: var(--fg-s-2);
  padding: var(--fg-s-2) var(--fg-s-3);
  background: var(--fg-green-050);
  color: var(--fg-ink);           /* nicht erben — siehe Grundregel oben */
  border: 1px solid var(--fg-green-200);
  border-left: 4px solid var(--fg-green-600);
  border-radius: var(--fg-r-sm);
}
.fg-note > i {
  flex: 0 0 auto;
  margin-top: .2em;
  color: var(--fg-green-600);
  font-size: 1.2rem;
}
.fg-note p:last-child { margin-bottom: 0; }
.fg-note a { color: var(--fg-green-600); }
.fg-note .text-muted { color: var(--fg-ink-muted) !important; }

.fg-note--warn {
  background: var(--fg-warn-surface);
  color: var(--fg-ink);
  border-color: #F0DDB0;
  border-left-color: var(--fg-warn);
}
/* Varianten für die Bespielbarkeits-Stufen - dieselben Farben wie die Ampel
   auf /wetter, damit ein Zustand überall gleich aussieht. */
.fg-note--teal {
  background: var(--fg-teal-050);
  color: var(--fg-ink);
  border-color: #CDE6E9;
  border-left-color: var(--fg-teal-700);
}
.fg-note--teal > i { color: var(--fg-teal-700); }
.fg-note--blue {
  background: var(--fg-blue-050);
  color: var(--fg-ink);
  border-color: #C9DCEC;
  border-left-color: var(--fg-blue-700);
}
.fg-note--blue > i { color: var(--fg-blue-700); }
.fg-note--danger {
  background: #FBEFEF;
  color: var(--fg-ink);
  border-color: #EBCFCF;
  border-left-color: var(--fg-danger);
}
.fg-note--danger > i { color: var(--fg-danger); }

.fg-note p { margin-bottom: .35rem; }
.fg-note__stand {
  margin-top: .6rem;
  margin-bottom: 0 !important;
  font-size: .85rem;
  color: var(--fg-ink-muted);
}
/* Bernstein statt des früheren hellen Goldtons: der lag auf dieser Fläche
   bei 1,97:1 und war als Icon kaum zu erkennen. Jetzt 5,07:1. */
.fg-note--warn > i { color: var(--fg-warn); }

/* --- Preis-Auszeichnung -------------------------------------------------- */
.fg-price {
  font-family: var(--fg-font-heading);
  font-size: clamp(2.4rem, 6vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--fg-green-800);
}
.fg-price small {
  display: block;
  margin-top: .35rem;
  font-family: var(--fg-font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--fg-ink-muted);
}

/* --- Seitenkopf für Unterseiten ------------------------------------------ */
.fg-pagehead {
  padding: calc(var(--fg-section-y) * .75) 0 calc(var(--fg-section-y) * .55);
  background: var(--fg-green-800);
  color: rgba(255, 255, 255, .85);
}
.fg-pagehead h1 { color: #fff; }
.fg-pagehead .fg-lead { color: rgba(255, 255, 255, .82); }
.fg-pagehead .fg-kicker { color: var(--fg-accent); }
.fg-pagehead a { color: #fff; }

/* --- Brotkrumen ---------------------------------------------------------- */
.fg-breadcrumb { font-size: .9rem; }
.fg-breadcrumb a { color: inherit; text-decoration: underline; }

/* =============================================================================
   Seitenfuß
   ============================================================================= */
.site-footer {
  padding: var(--fg-section-y) 0 var(--fg-s-3);
  background: var(--fg-green-900);
  color: rgba(255, 255, 255, .78);
}
.site-footer a {
  color: rgba(255, 255, 255, .78);
  transition: color var(--fg-transition);
}
.site-footer a:hover,
.site-footer a:focus { color: var(--fg-accent); }

.site-footer__brand {
  font-family: var(--fg-font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
}
.site-footer__brand span { color: var(--fg-green-600); }

.site-footer__claim {
  max-width: 34ch;
  margin: var(--fg-s-1) 0 var(--fg-s-3);
  font-size: .95rem;
}
.site-footer__title {
  margin-bottom: var(--fg-s-2);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-accent);
}
.site-footer__menu li,
.site-footer__contact li {
  margin-bottom: .6rem;
  line-height: 1.5;
}
.site-footer__contact li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: .2rem .6rem;
  align-items: start;
}
.site-footer__contact i {
  margin-top: .25em;
  color: var(--fg-green-600);
}
.site-footer__hint {
  grid-column: 2;
  font-size: .8rem;
  color: rgba(255, 255, 255, .55);
}
.site-footer__hours li {
  display: flex;
  justify-content: space-between;
  gap: var(--fg-s-2);
  padding: .35rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.site-footer__hours strong { color: #fff; }
.site-footer__btm {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--fg-s-1);
  margin-top: var(--fg-s-5);
  padding-top: var(--fg-s-3);
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .85rem;
}

/* --- Zurück nach oben ----------------------------------------------------
   Skript und Styles gab es schon, nur der Button fehlte im Markup. */
.scroll-to-top {
  display: none;
  place-items: center;
  border: 0;
  line-height: 1;
}
.scroll-to-top:hover { background: var(--fg-green-600); }

/* --- Weiterführender Textlink -----------------------------------------------
   Für Verweise auf eine andere Seite, die im Fließtext leicht übersehen werden.
   Der Pfeil sagt "hier geht es weiter" und wandert beim Darüberfahren ein Stück
   nach rechts - eine Bewegung, die niemand mit normalem Text verwechselt. */
.fg-textlink {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--fg-font-heading);
  font-weight: 600;
  color: var(--fg-green-600);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.fg-textlink:hover,
.fg-textlink:focus {
  color: var(--fg-green-800);
  text-decoration-thickness: 2px;
}
.fg-textlink__arrow {
  transition: transform var(--fg-transition);
}
.fg-textlink:hover .fg-textlink__arrow,
.fg-textlink:focus .fg-textlink__arrow {
  transform: translateX(4px);
}
/* Auf dunklem Grund, etwa im Seitenkopf. */
.fg-pagehead .fg-textlink,
.fg-band-dark .fg-textlink {
  color: var(--fg-accent);
}
.fg-pagehead .fg-textlink:hover,
.fg-band-dark .fg-textlink:hover { color: #fff; }

/* --- Schwierigkeitsstufen ---------------------------------------------------
   Fünf Punkte, gefüllt bis zur erreichten Stufe, daneben das Wort.

   Bewusst KEINE Icons: Sterne lesen sich als Bewertung ("wie gut ist die
   Bahn?"), gemeint ist aber der Aufwand. Und fünf Piktogramme nebeneinander -
   ob Schuhe, Bälle oder Zielscheiben - lösen sich bei dieser Größe in unruhige
   Krümel auf, weil jedes Glyph eigene Binnenzeichnung hat. Schlichte Kreise
   aus CSS bleiben auch auf zwölf Karten nebeneinander ruhig und hängen von
   keiner Icon-Variante ab.

   Das Wort steht daneben, weil fünf Punkte nur "mehr" oder "weniger" sagen -
   erst "knifflig" sagt, worauf man sich einstellt. */
.fg-level {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin: 0;
}
.fg-level__dot {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--fg-green-600);
  flex: 0 0 auto;
}
.fg-level__dot.is-off {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--fg-green-200);
}
/* Ab Stufe 4 färben sich die Punkte in die Warnfarbe - dieselbe Logik wie
   bei der Bespielbarkeits-Ampel, damit "knifflig" überall gleich aussieht. */
.fg-level--hard .fg-level__dot { background: var(--fg-warn); }
.fg-level--hard .fg-level__dot.is-off {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--fg-green-200);
}
.fg-level__word {
  margin-left: .45rem;
  font-family: var(--fg-font-body);
  font-size: .9rem;
  font-weight: 400;
  color: var(--fg-ink-muted);
}

/* Fakten-Eintrag ohne fuehrendes Icon - der Inhalt nutzt die volle Breite. */
.fg-facts__item--wide > div { width: 100%; }