/* =========================================================================
   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}

:root{
  --bfx-line:#3A1E0E; --bfx-yellow:#F5C800; --bfx-blue:#2B3B7A;
  --bfx-blue2:#3F5BB8; --bfx-blued:#161f44;
}


/* ---------------------------------------------------------- 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 */
header.bfx-header{
  position:sticky; top:0; z-index:900;
  background:linear-gradient(90deg,#2B3B7A 0%,#3F5BB8 100%);
  border-bottom:3px solid var(--bfx-line);
  font-family:"Nunito",system-ui,sans-serif;
}
.bfx-header *{box-sizing:border-box}
.bfx-bar{
  max-width:1200px; margin:0 auto; padding:9px 20px;
  display:flex; align-items:center; gap:16px;
}
.bfx-logo{display:inline-flex; align-items:center; flex-shrink:0}
.bfx-logo img{height:52px; width:auto; display:block}

/* ---- Desktop-Navigation ---- */
.bfx-nav{display:flex; align-items:center; gap:2px; margin-left:auto}
.bfx-item{position:relative}
.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:#fff; border:3px solid var(--bfx-line); border-radius:16px;
  box-shadow:0 10px 0 -2px rgba(58,30,14,.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:block; 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:hover{background:var(--bfx-yellow); color:var(--bfx-line)}
.bfx-drop a.is-active{background:var(--bfx-blue); color:#fff}
.bfx-drop a .bfx-ext{opacity:.5; font-weight:var(--w-med,600); font-size:12px; margin-left:4px}

/* ---- 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:44px}
  .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;
  }
  .bfx-item{position:static}
  .bfx-link{
    width:100%; justify-content:space-between; border-radius:12px;
    padding:14px 14px; font-size:14px; margin-bottom:4px;
    background:rgba(255,255,255,.07);
  }
  .bfx-drop{
    position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    min-width:0; margin:0 0 8px; padding:4px 0 4px 10px;
    background:transparent; border:0; border-left:3px solid rgba(255,255,255,.22);
    border-radius:0; box-shadow:none;
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .bfx-item.open .bfx-drop{max-height:640px}
  .bfx-item.open .bfx-caret{transform:rotate(180deg)}
  .bfx-drop a{color:#e8ecff; font-size:14px; padding:11px 12px; white-space:normal}
  .bfx-drop a:hover,.bfx-drop a.is-active{background:rgba(255,255,255,.16); color:#fff}
  .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:38px}
}

/* ---------------------------------------------------------------- FOOTER */
footer.bfx-footer{
  background:linear-gradient(90deg,var(--bfx-blued) 0%,#3F5BB8 100%);
  color:#fff; border-top:3px solid var(--bfx-line);
  font-family:"Nunito",system-ui,sans-serif;
  padding:44px 0 0; margin-top:0;
}
.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}
.bfx-fgrid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:34px; align-items:start;
}
.bfx-footer h4{
  font-size:13px; font-weight:var(--w-black,900); letter-spacing:.09em; text-transform:uppercase;
  color:var(--bfx-yellow); margin:0 0 14px;
}
.bfx-flogo img{height:66px; 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:340px; margin:0}
.bfx-flist{list-style:none; margin:0; padding:0}
.bfx-flist li{margin-bottom:9px; font-weight:var(--w-med,600); font-size:14px; color:#dfe4f5}
.bfx-frow{display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; font-weight:var(--w-med,600); font-size:14px; color:#dfe4f5; line-height:1.5}
.bfx-frow svg{flex-shrink:0; margin-top:2px; stroke:var(--bfx-yellow)}
.bfx-hours{display:grid; grid-template-columns:auto 1fr; gap:3px 14px; font-weight:var(--w-med,600); font-size:14px; color:#dfe4f5}
.bfx-hours b{font-weight:var(--w-bold,800); color:#fff}
.bfx-open{font-weight:var(--w-black,900); color:var(--bfx-yellow); margin:12px 0 4px; font-size:14px}
.bfx-note{font-size:12.5px; color:#a9b2cd; font-weight:var(--w-med,600); margin:0; line-height:1.5}
.bfx-socials{display:flex; gap:10px; margin-top:16px}
.bfx-socials a{
  width:40px; height:40px; border-radius:50%; display:inline-flex;
  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;
}
.bfx-socials a:hover{transform:translateY(-2px); color:#fff}
.bfx-copy{
  margin-top:36px; border-top:2px solid rgba(255,255,255,.16);
  padding:16px 0 20px; font-size:13px; font-weight:var(--w-med,600); color:#c2c9e2;
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; justify-content:center;
  text-align:center;
}
.bfx-copy a{text-decoration:underline; text-underline-offset:3px}
@media(max-width:900px){
  .bfx-fgrid{grid-template-columns:1fr 1fr; gap:28px}
}
@media(max-width:620px){
  .bfx-fgrid{grid-template-columns:1fr; gap:26px}
  footer.bfx-footer{padding-top:34px}
}

/* 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}