/* =========================================================================
   Black Fox World – gemeinsame Navigation & Footer
   Wird von JEDER Seite als letztes Stylesheet geladen und überschreibt
   damit die seiteneigenen Header-/Footer-Regeln.
   ========================================================================= */

/* Deko-Blobs dürfen die Seite nicht horizontal scrollbar machen.
   clip statt hidden, damit position:sticky im Header funktioniert. */
html,body{overflow-x:clip}

/* Handys im System-Dunkelmodus (v.a. Android Chrome/Samsung Internet) wenden
   ohne dieses Signal einen automatischen Nachdunkel-Filter auf die ganze
   Seite an, weil die Seite nicht erklärt, dass sie ein festes (nur helles)
   Farbschema hat. Genau das lässt Gelb bräunlich und Orange sehr dunkel
   wirken. color-scheme:light schaltet diesen Auto-Filter aus – die Website
   bleibt auf allen Geräten in den eigenen Marken-Farben, unabhängig vom
   Geräte-Modus des Nutzers. */
:root{color-scheme:light}

:root{
  /* Neon-Redesign 2026-08-27: gleicher Abgleich wie auf index.html – Namen
     bleiben, Werte wandern auf das Navy/Signal-System, damit Header, Footer,
     Nav und CTA ueberall (auch auf noch nicht umgebauten Unterseiten)
     zum neuen Look passen. */
  --bfx-line:#0C1230; --bfx-yellow:#FFCC00; --bfx-blue:#1D2857;
  --bfx-blue2:#3F5BB8; --bfx-blued:#161F47;
}


/* ---------------------------------------------------------- SCHRIFTGEWICHTE
   Drei Regler für die ganze Website. Nunito ist eine variable Schrift und
   kennt jeden Wert zwischen 200 und 1000 – auch Zwischenschritte wie 650.
   Höher = fetter, niedriger = luftiger. Ruhigere Variante: 800 / 700 / 500. */
:root{
  --w-black:900;   /* Überschriften, Buttons, Preise */
  --w-bold:800;    /* Navigation, Labels, Hervorhebungen */
  --w-med:600;     /* Fließtext, Listen, Hinweise */
}

/* ---------------------------------------------------------------- HEADER */
/* Höhere Leiste mit prominentem Logo (Six-Flags-Proportionen), aber in den
   eigenen Markenfarben: Blauverlauf bleibt. */
header.bfx-header{
  position:sticky; top:0; z-index:900;
  background:linear-gradient(90deg,var(--bfx-blue) 0%,var(--bfx-blue2) 100%);
  border-bottom:0;
  box-shadow:0 8px 18px rgba(0,0,0,.4);
  /* Archivo zuerst, Nunito als Rückfall: Seiten, die schon auf das neue
     Schriftsystem umgestellt sind, laden Archivo und bekommen es; die noch
     nicht migrierten Seiten laden es nicht und bleiben sauber bei Nunito.
     Dadurch zieht der Header pro Seite automatisch nach, sobald sie umgestellt
     wird – ohne Bruch auf den übrigen Seiten. */
  font-family:"Archivo","Nunito",system-ui,sans-serif;
}
/* Schmale Signallinie direkt unter der Navileiste, sitzt fest an der Kante
   (auch bei sticky Header), damit sie beim Scrollen nicht mitwandert. */
/* Durchgehende Linie an der Unterkante, über die volle Breite gezeichnet.
   Sie liegt HINTER dem Logo (z-index 1 < 2), damit das Logo davor steht
   und die Linie nicht über das Logo läuft. */
header.bfx-header::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:5px;
  background:var(--bfx-yellow); z-index:1;
}
.bfx-header *{box-sizing:border-box}
/* Desktop: kompakte Leiste wie zuvor – Logo sitzt INNERHALB der Leiste,
   ragt nicht über die gelbe Linie hinaus. Der Überhang-Look bleibt den
   Mobil-/Tablet-Breakpoints weiter unten vorbehalten. */
.bfx-bar{
  max-width:1240px; margin:0 auto; padding:8px 24px;
  display:flex; align-items:center; gap:22px;
}
.bfx-logo{display:inline-flex; align-items:center; flex-shrink:0;
  position:relative; z-index:2; margin:0}
.bfx-logo img{height:68px; width:auto; display:block;
  /* Weiße Kontur entlang der Logo-Silhouette: mehrere versetzte
     drop-shadows in Weiß ergeben eine gleichmäßige Outline. outline/border
     würde nur das Bildrechteck umranden, nicht die Form. */
  filter:drop-shadow(.5px 0 0 #fff) drop-shadow(-.5px 0 0 #fff)
         drop-shadow(0 .5px 0 #fff) drop-shadow(0 -.5px 0 #fff)
         drop-shadow(0 3px 6px rgba(0,0,0,.28))}

/* ---- Desktop-Navigation ---- */
.bfx-nav{display:flex; align-items:center; gap:2px; margin-left:auto}
.bfx-item{position:relative}
/* Die Icons vor den Hauptpunkten gehoeren nur in den mobilen Drawer – die
   Desktop-Leiste bleibt wie bisher rein textlich. */
.bfx-micon{display:none}
.bfx-link{
  display:inline-flex; align-items:center; gap:5px;
  padding:9px 13px; border-radius:9999px;
  background:transparent; border:0; margin:0; cursor:pointer;
  font-family:inherit; appearance:none; -webkit-appearance:none;
  font-weight:var(--w-bold,800); font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  color:#fff; text-decoration:none; white-space:nowrap;
  transition:background .15s;
}
.bfx-link:hover,.bfx-link:focus-visible{background:rgba(255,255,255,.2); color:#fff}
.bfx-item.is-active > .bfx-link{background:rgba(255,255,255,.26)}
.bfx-caret{width:9px; height:9px; flex-shrink:0; transition:transform .18s}
@media(min-width:941px){.bfx-item:hover .bfx-caret,.bfx-item:focus-within .bfx-caret{transform:rotate(180deg)}}

.bfx-drop{
  position:absolute; top:100%; left:50%; transform:translate(-50%,8px);
  min-width:296px; padding:8px;
  background:var(--bfx-blue); border:3px solid var(--bfx-line); border-radius:16px;
  box-shadow:0 10px 0 -2px rgba(12,18,48,.28), 0 18px 34px rgba(0,0,0,.22);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .16s, transform .16s;
  z-index:950;
}
@media(min-width:941px){
  .bfx-item:hover .bfx-drop,.bfx-item:focus-within .bfx-drop{
    opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
  }
}
.bfx-drop::before{content:""; position:absolute; top:-14px; left:0; right:0; height:14px}
.bfx-drop a{
  display:flex; align-items:center; gap:10px; padding:9px 13px; white-space:nowrap; border-radius:10px;
  font-weight:var(--w-bold,800); font-size:14px; color:var(--bfx-line); text-decoration:none;
  transition:background .12s, color .12s;
}
.bfx-drop a img{width:22px !important; height:22px !important; flex:none; object-fit:contain; filter:brightness(0) invert(1) !important}
.bfx-drop a .bfx-ext{opacity:.5; font-weight:var(--w-med,600); font-size:12px; margin-left:4px}

/* Dropdown-Einträge: Stufenfarben von Dunkelblau zu Orange, pro Menüpunkt eine
   eigene Farbe (kein Verlauf) – „Erlebnisse" hat 9 Einträge (Gutscheine ist
   seit dem Nav-Umbau ein eigener Punkt und zählt hier nicht mehr mit),
   „Geburtstage & Events" 7, „Infos" 7. nth-of-type statt nth-child, weil
   .bfx-close (Button) das erste Kind von .bfx-nav ist und sonst die Zählung
   der .bfx-item-Divs verschiebt. */
/* Diese Farben haengen an festen Klassen (bfx-men-erlebnisse / bfx-men-geburtstage),
   NICHT an der Position in der Leiste - :nth-of-type(2)/(3)/(4) sah frueher hier
   die Reihenfolge Startseite/Erlebnisse/Geburtstage/Infos vor. Sobald sich die
   Reihenfolge aendert (z.B. weil "Gutscheine" eingefuegt wird), faerbte das
   falsche Menue mit dem falschen Farbverlauf. Mit Klassen bleibt es stabil,
   egal an welcher Stelle das jeweilige Menue steht.
   "Infos" hat kein eigenes Farbschema und nutzt daher weiterhin einfach das
   von Geburtstage & Events (gleiche Anzahl Eintraege, passt farblich). */
/* Der Verlauf startet in einem dunklen Violett (#6B4BB0, das Karaoke-Violett
   auf Textgrund abgedunkelt) und laeuft ins Orange. Weisse Schrift liegt
   damit zwischen 6,44:1 am Anfang und 3,39:1 am orangen Ende – Letzteres wie
   bisher schon, ausgeglichen durch den dunklen Textschatten unten. */
.bfx-men-erlebnisse .bfx-drop a{color:#fff}
.bfx-men-erlebnisse .bfx-drop a:nth-child(1){background:#6B4BB0}
.bfx-men-erlebnisse .bfx-drop a:nth-child(2){background:#7B4E9D}
.bfx-men-erlebnisse .bfx-drop a:nth-child(3){background:#8A518A}
.bfx-men-erlebnisse .bfx-drop a:nth-child(4){background:#9A5478}
.bfx-men-erlebnisse .bfx-drop a:nth-child(5){background:#AA5665}
.bfx-men-erlebnisse .bfx-drop a:nth-child(6){background:#B95952}
.bfx-men-erlebnisse .bfx-drop a:nth-child(7){background:#C95C40}
.bfx-men-erlebnisse .bfx-drop a:nth-child(8){background:#D85F2D}
.bfx-men-erlebnisse .bfx-drop a:nth-child(9){background:#E8621A}
/* Zehnter Eintrag: After Dark laeuft nicht im Verlauf mit, sondern im
   eigenen Look der Seite – Navy-Nacht mit Neon Signal (#FF4D00 auf
   #0C1230 = 5,3:1). Setzt den Abend sichtbar vom Tagesprogramm ab. */
.bfx-men-erlebnisse .bfx-drop a.night{background:#0C1230;color:#FF4D00}
.bfx-men-erlebnisse .bfx-drop a.night img{filter:brightness(0) saturate(100%) invert(41%) sepia(93%) saturate(4000%) hue-rotate(8deg) brightness(102%)}
/* Acht Stufen: das Menue hat acht Eintraege. Derselbe Verlauf wie oben,
   nur auf acht statt neun Schritte verteilt. */
.bfx-men-geburtstage .bfx-drop a,
.bfx-item:not(.bfx-men-erlebnisse):not(.bfx-men-geburtstage) .bfx-drop a{color:#fff}
.bfx-men-geburtstage .bfx-drop a:nth-child(1),
.bfx-item:not(.bfx-men-erlebnisse):not(.bfx-men-geburtstage) .bfx-drop a:nth-child(1){background:#6B4BB0}
.bfx-men-geburtstage .bfx-drop a:nth-child(2),
.bfx-item:not(.bfx-men-erlebnisse):not(.bfx-men-geburtstage) .bfx-drop a:nth-child(2){background:#7D4E9B}
.bfx-men-geburtstage .bfx-drop a:nth-child(3),
.bfx-item:not(.bfx-men-erlebnisse):not(.bfx-men-geburtstage) .bfx-drop a:nth-child(3){background:#8F5285}
.bfx-men-geburtstage .bfx-drop a:nth-child(4),
.bfx-item:not(.bfx-men-erlebnisse):not(.bfx-men-geburtstage) .bfx-drop a:nth-child(4){background:#A15570}
.bfx-men-geburtstage .bfx-drop a:nth-child(5),
.bfx-item:not(.bfx-men-erlebnisse):not(.bfx-men-geburtstage) .bfx-drop a:nth-child(5){background:#B2585A}
.bfx-men-geburtstage .bfx-drop a:nth-child(6),
.bfx-item:not(.bfx-men-erlebnisse):not(.bfx-men-geburtstage) .bfx-drop a:nth-child(6){background:#C45B45}
.bfx-men-geburtstage .bfx-drop a:nth-child(7),
.bfx-item:not(.bfx-men-erlebnisse):not(.bfx-men-geburtstage) .bfx-drop a:nth-child(7){background:#D65F2F}
.bfx-men-geburtstage .bfx-drop a:nth-child(8),
.bfx-item:not(.bfx-men-erlebnisse):not(.bfx-men-geburtstage) .bfx-drop a:nth-child(8){background:#E8621A}
/* Die waermsten Stufen liegen mit Weiss unter 4,5:1 – derselbe dunkle
   Textschatten wie an den anderen Weiss-auf-Orange-Stellen der Seite. */
.bfx-drop a{text-shadow:0 1px 2px rgba(0,0,0,.4)}

.bfx-drop a:hover{background:var(--bfx-yellow); color:var(--bfx-line); text-shadow:none}
.bfx-drop a:hover img{filter:brightness(0) invert(0)}
.bfx-drop a.is-active{background:var(--bfx-blue); color:#fff}

/* ---- rechte Seite ---- */
.bfx-right{display:flex; align-items:center; gap:10px; flex-shrink:0}
.bfx-phone{
  display:inline-flex; align-items:center; gap:6px;
  color:#fff; font-weight:var(--w-bold,800); font-size:14px; text-decoration:none; white-space:nowrap;
}
.bfx-phone svg{flex-shrink:0; stroke:var(--bfx-yellow)}
.bfx-phone:hover{color:var(--bfx-yellow)}
.bfx-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 20px; border-radius:9999px;
  background:var(--bfx-yellow); color:var(--bfx-line);
  border:3px solid var(--bfx-line); box-shadow:0 4px 0 var(--bfx-line);
  font-weight:var(--w-black,900); font-size:13px; letter-spacing:.03em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap; transition:transform .1s, box-shadow .1s;
}
.bfx-cta:hover{transform:translateY(-2px); box-shadow:0 6px 0 var(--bfx-line); color:var(--bfx-line)}
.bfx-cta:active{transform:translateY(2px); box-shadow:0 2px 0 var(--bfx-line)}
.bfx-burger{display:none}

/* ---- Mobil ---- */
@media(max-width:1080px){
  .bfx-link{padding:9px 10px; font-size:12px}
  .bfx-phone{display:none}
}
@media(max-width:940px){
  .bfx-bar{padding:8px 16px; gap:10px}
  .bfx-logo img{height:106px;width:auto;
    filter:drop-shadow(.5px 0 0 #fff) drop-shadow(-.5px 0 0 #fff)
           drop-shadow(0 .5px 0 #fff) drop-shadow(0 -.5px 0 #fff)
           drop-shadow(0 3px 6px rgba(0,0,0,.28))}
  .bfx-logo{margin:-2px 0 -26px}
  .bfx-burger{
    display:inline-flex; align-items:center; justify-content:center;
    width:46px; height:46px; border-radius:12px; cursor:pointer;
    border:3px solid var(--bfx-line); background:var(--bfx-yellow); color:var(--bfx-line);
    font-size:22px; line-height:1; order:3;
  }
  .bfx-right{margin-left:auto; order:2}
  .bfx-cta{padding:9px 14px; font-size:12px}

  .bfx-nav{
    order:9; position:fixed; top:0; right:0; bottom:0; width:min(88vw,380px); z-index:960;
    margin:0; display:block; overflow-y:auto;
    background:var(--bfx-blued); border-left:3px solid var(--bfx-line);
    padding:74px 16px 40px; transform:translateX(102%); transition:transform .26s ease;
    box-shadow:-14px 0 40px rgba(0,0,0,.4);
  }
  .bfx-nav.open{transform:translateX(0)}
  .bfx-close{
    position:absolute; top:16px; right:16px; width:42px; height:42px; border-radius:50%;
    border:3px solid var(--bfx-line); background:var(--bfx-yellow); color:var(--bfx-line);
    font-size:22px; font-weight:var(--w-black,900); line-height:1; cursor:pointer; display:block;
  }
  /* Der Abstand zwischen den Punkten haengt ausschliesslich hier – nicht an
     .bfx-link und nicht an .bfx-drop. Sonst summieren sich beide bei den drei
     Punkten mit Untermenue (6+6px), waehrend "Gutscheine" ohne Dropdown nur
     auf 6px kaeme: ungleiche Abstaende. */
  .bfx-item{position:static; margin-bottom:6px}
  /* Icon vor dem Label, wie in den Dropdown-Eintraegen. Statt
     justify-content:space-between (das den Text zwischen Icon und Pfeil
     zentriert haette) laeuft die Zeile jetzt linksbuendig und nur der Pfeil
     wird per auto-Rand nach rechts geschoben. */
  .bfx-micon{display:block; width:27px; height:27px; flex:none; object-fit:contain;
             filter:brightness(0) invert(1)}
  .bfx-caret{margin-left:auto}
  .bfx-link{
    width:100%; justify-content:flex-start; gap:10px; border-radius:12px;
    padding:14px 14px; font-size:14px; margin-bottom:0;
    color:#fff; /* Drawer ist navy – hier gilt weiter helle Schrift, auch
                   wenn die Desktop-Leiste jetzt weiß mit dunkler Schrift ist */
    /* Weiss auf der waermsten Stufe liegt bei 3,39:1 – derselbe dunkle
       Textschatten wie bei den anderen Weiss-auf-Orange-Stellen der Seite
       gleicht das in der Praxis aus. */
    text-shadow:0 1px 2px rgba(0,0,0,.4);
  }
  /* Alle vier Hauptpunkte in einem ruhigen Dunkelblau – die Farbstufen
     gehoeren allein den Dropdown-Eintraegen. Vorher trugen Haupt- und
     Unterpunkte denselben Verlauf, dadurch war beim Aufklappen nicht mehr
     ablesbar, was Ebene und was Eintrag ist.
     #253575 hebt sich mit 1,4:1 sichtbar vom Drawer-Grund (#161F47) ab, ohne
     als eigene Buntfarbe aufzutreten; weisse Schrift darauf 11,4:1. */
  .bfx-nav .bfx-item > .bfx-link{background:#253575}
  /* Aktuelle Seite einen Tick heller statt ueber eine eigene Farbe. */
  .bfx-nav .bfx-item.is-active > .bfx-link{background:#31418C}
  .bfx-link:hover,.bfx-link:focus-visible{filter:brightness(1.14); color:#fff}
  /* Die Untermenues bekommen dieselben Stufenfarben wie am Desktop (Regeln
     oben bei .bfx-men-erlebnisse / .bfx-men-geburtstage - die gelten ohne
     eigene @media-Abfrage, also automatisch auch hier). Frueher stand hier
     nur ein heller Strich links (border-left) ohne Farbe - der ist jetzt weg,
     die farbigen Kacheln uebernehmen die optische Gliederung. */
  .bfx-drop{
    position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    display:flex; flex-direction:column; gap:5px;
    min-width:0; margin:0; padding:0;
    background:transparent; border:0; border-radius:0; box-shadow:none;
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  /* Luft zwischen Kachel und aufgeklappter Liste als Innenabstand, nicht als
     Rand: bei geschlossenem Menue (max-height:0, overflow:hidden) wird sie
     mitgeschnitten und verfaelscht den Abstand der Kacheln nicht. */
  .bfx-item.open .bfx-drop{max-height:640px; padding-top:6px}
  .bfx-item.open .bfx-caret{transform:rotate(180deg)}
  .bfx-drop a{font-size:14px; padding:12px 14px; white-space:normal}
  .bfx-drop a:hover,.bfx-drop a.is-active{filter:brightness(1.14)}
  .bfx-mob-phone{
    display:flex !important; align-items:center; gap:8px; justify-content:center;
    margin-top:18px; padding:14px; border-radius:12px;
    background:var(--bfx-yellow); color:var(--bfx-line);
    font-weight:var(--w-black,900); text-decoration:none;
  }
  .bfx-scrim{
    position:fixed; inset:0; background:rgba(10,12,26,.55);
    opacity:0; visibility:hidden; transition:opacity .26s; z-index:890;
  }
  .bfx-scrim.open{opacity:1; visibility:visible}
}
@media(min-width:941px){ .bfx-close,.bfx-mob-phone,.bfx-scrim{display:none} }
@media(max-width:420px){
  .bfx-cta{padding:8px 11px; font-size:11px}
  .bfx-logo img{height:88px;width:auto;
    filter:drop-shadow(.5px 0 0 #fff) drop-shadow(-.5px 0 0 #fff)
           drop-shadow(0 .5px 0 #fff) drop-shadow(0 -.5px 0 #fff)
           drop-shadow(0 3px 6px rgba(0,0,0,.28))}
  .bfx-logo{margin:-2px 0 -22px}
}

/* ---------------------------------------------------------------- FOOTER
   Variante B (Sebastian, 2026-09-12): gelbes Kontaktband über dem Footer,
   Icon-Kreise in den Spaltentiteln, Kontakt als Zeilen mit Cyan-Kreisen,
   Öffnungszeiten als Karte mit Status-Punkt, diagonales Streifenmuster
   im unteren Bereich, Copyright links / Rechtliches rechts. */
.bfx-band{
  position:relative; z-index:2;
  background:var(--bfx-yellow); color:var(--bfx-line);
  border-top:4px solid var(--bfx-line);
  font-family:"Archivo","Nunito",system-ui,sans-serif;
}
.bfx-band *{box-sizing:border-box}
.bfx-band-in{
  max-width:1200px; margin:0 auto; padding:18px 20px;
  display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between;
}
.bfx-band-t b{
  display:block; font-family:"Clash Display","Nunito",system-ui,sans-serif;
  font-size:19px; font-weight:700; letter-spacing:.005em; line-height:1.2;
}
.bfx-band-t span{font-size:13.5px; font-weight:var(--w-med,600); color:#3D3300}
.bfx-band-b{display:flex; flex-wrap:wrap; gap:12px}
.bfx-band .bfx-bbtn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:999px;
  font-family:"Clash Display","Nunito",system-ui,sans-serif;
  font-weight:700; font-size:14px; letter-spacing:.03em; text-transform:uppercase; text-decoration:none;
  background:var(--bfx-blued); color:#fff; border:3px solid var(--bfx-line); box-shadow:0 4px 0 var(--bfx-line);
  transition:transform .12s, box-shadow .12s;
}
.bfx-band .bfx-bbtn:hover{transform:translateY(-2px); box-shadow:0 6px 0 var(--bfx-line); color:#fff}
.bfx-band .bfx-bbtn.ghost{background:#fff; color:var(--bfx-line); font-variant-numeric:tabular-nums}

footer.bfx-footer{
  position:relative; overflow:hidden;
  background:linear-gradient(90deg,var(--bfx-blued) 0%,#3F5BB8 100%);
  color:#fff; border-top:4px solid var(--bfx-line);
  box-shadow:0 -8px 18px rgba(0,0,0,.4);
  font-family:"Archivo","Nunito",system-ui,sans-serif;
  padding:48px 0 0; margin-top:0;
}
/* Schmale Signallinie direkt über dem Footer (nur ohne Band sichtbar). */
footer.bfx-footer::before{
  content:""; position:absolute; left:0; right:0; top:-5px; height:5px;
  background:var(--bfx-yellow); z-index:1;
}
/* Diagonales Streifenmuster, nach unten hin eingeblendet. */
footer.bfx-footer::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.035) 0 12px,transparent 12px 30px);
  -webkit-mask:linear-gradient(180deg,transparent 40%,#000); mask:linear-gradient(180deg,transparent 40%,#000);
}
.bfx-footer *{box-sizing:border-box}
.bfx-footer a{color:inherit; text-decoration:none}
.bfx-footer a:hover{color:var(--bfx-yellow)}
.bfx-fwrap{max-width:1200px; margin:0 auto; padding:0 20px; position:relative; z-index:1}
.bfx-fgrid{
  display:grid; grid-template-columns:1.35fr .9fr .9fr .7fr 1.1fr; gap:34px 28px; align-items:start;
}
.bfx-footer h4{
  display:flex; align-items:center; gap:10px; min-height:36px;
  font-family:"Clash Display","Nunito",system-ui,sans-serif;
  font-size:13.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--bfx-yellow); margin:0 0 16px;
}
/* Icon-Kreis in der Überschrift: gelber Kreis mit dunkler Kante, das Symbol
   sitzt als <i> mit inline mask-image darin (Pfad relativ zur Seite). */
.bfx-footer h4 .ficon{
  width:34px; height:34px; flex:none; position:relative; border-radius:50%; display:inline-block;
  background:var(--bfx-yellow); border:2.5px solid var(--bfx-line); box-shadow:0 3px 0 var(--bfx-line);
}
.bfx-footer h4 .ficon i{
  position:absolute; inset:6px; display:block; background:var(--bfx-line);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
.bfx-flogo img{height:70px; width:auto; display:block; margin-bottom:14px}
.bfx-fabout{font-weight:var(--w-med,600); color:#c8cde0; font-size:14px; line-height:1.55; max-width:36ch; margin:0 0 20px}
.bfx-flist{list-style:none; margin:0; padding:0}
.bfx-flist li{margin:0; font-weight:var(--w-med,600); font-size:14px; color:#dfe4f5}
.bfx-flist a{
  display:block; padding:5px 0 5px 14px; position:relative;
  transition:color .15s, transform .15s;
}
.bfx-flist a::before{
  content:""; position:absolute; left:0; top:50%; width:6px; height:6px; margin-top:-3px;
  border-radius:50%; background:var(--bfx-acc,#29D4F0); opacity:.55; transition:opacity .15s, background .15s;
}
.bfx-flist a:hover{color:var(--bfx-yellow); transform:translateX(3px)}
.bfx-flist a:hover::before{opacity:1; background:var(--bfx-yellow)}
.bfx-contact{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.bfx-contact li{display:flex; gap:12px; align-items:center}
.bfx-contact a{color:#fff; font-weight:var(--w-bold,800); font-size:14px; line-height:1.3; display:block}
.bfx-contact a:hover{color:var(--bfx-yellow)}
.bfx-contact small{display:block; font-weight:var(--w-med,600); font-size:12.5px; color:#a9b2cd}
.bfx-cic{
  flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--bfx-blue); border:2.5px solid #29D4F0; color:#29D4F0;
}
.bfx-cic svg{width:18px; height:18px; stroke:currentColor}
.bfx-socials{display:flex; gap:10px; margin-top:20px}
.bfx-socials a{
  width:42px; height:42px; border-radius:50%; display:inline-flex; overflow:hidden;
  align-items:center; justify-content:center;
  border:3px solid var(--bfx-line); box-shadow:0 3px 0 var(--bfx-line);
  font-weight:var(--w-black,900); font-size:13px; color:#fff; transition:transform .15s;
}
.bfx-socials a:hover{transform:translateY(-2px); color:#fff}
.bfx-hcard{background:rgba(12,18,48,.45); border:2.5px solid rgba(41,212,240,.55); border-radius:18px; padding:16px 18px 14px}
.bfx-open-big{
  display:flex; gap:12px; align-items:center; margin:-4px 0 14px; padding:0 0 12px;
  border-bottom:1.5px solid rgba(255,255,255,.14);
}
.bfx-open-big .bfx-dot{
  flex:none; width:10px; height:10px; border-radius:50%;
  background:#3DDC84; box-shadow:0 0 0 4px rgba(61,220,132,.22);
}
.bfx-open-big.is-closed .bfx-dot{background:#8A93B3; box-shadow:0 0 0 4px rgba(138,147,179,.22)}
.bfx-open-big b{
  display:block; font-family:"Clash Display","Nunito",system-ui,sans-serif;
  font-size:15.5px; font-weight:700; color:var(--bfx-yellow); letter-spacing:.01em; line-height:1.2;
}
.bfx-open-big span{font-size:12.5px; color:#dfe4f5; font-weight:var(--w-med,600)}
.bfx-hours{display:grid; grid-template-columns:auto 1fr; gap:5px 12px; font-weight:var(--w-med,600); font-size:13px; color:#dfe4f5; font-variant-numeric:tabular-nums}
.bfx-hours b{font-weight:var(--w-bold,800); color:#fff; white-space:nowrap}
.bfx-hours span{white-space:nowrap; text-align:right}
.bfx-note{font-size:12px; color:#a9b2cd; font-weight:var(--w-med,600); margin:12px 0 0; line-height:1.5}
.bfx-copy{
  margin-top:40px; border-top:2px solid rgba(255,255,255,.14);
  padding:18px 0 22px; font-size:13px; font-weight:var(--w-med,600); color:#c2c9e2;
  display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; justify-content:space-between;
}
.bfx-copy nav{display:flex; flex-wrap:wrap; gap:4px 20px}
.bfx-copy a{text-decoration:none}
.bfx-copy a:hover{color:var(--bfx-yellow)}
@media(max-width:940px){
  .bfx-fgrid{grid-template-columns:1fr 1fr; gap:28px}
  .bfx-fgrid > div:first-child{grid-column:1/-1}
}
@media(max-width:620px){
  .bfx-fgrid{grid-template-columns:1fr; gap:26px}
  footer.bfx-footer{padding-top:34px}
  .bfx-copy{justify-content:center; text-align:center}
  .bfx-copy nav{justify-content:center}
  .bfx-band-in{justify-content:center; text-align:center}
  .bfx-band-b{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .bfx-flist a,.bfx-socials a,.bfx-band .bfx-bbtn{transition:none}
}

/* Skip-Link (Barrierefreiheit) */
.bfx-skip{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--bfx-yellow); color:var(--bfx-line);
  padding:12px 18px; font-weight:var(--w-black,900); border:3px solid var(--bfx-line); border-radius:0 0 12px 0;
}
.bfx-skip:focus{left:0}