/* Boxenfunk — Ebene 2: Schale (Plan 2026-10-01, Schritt 1).
   Kopfleiste + Klappmenues (base.css, nav.css), Leiste unten am Handy (bottomnav.css),
   Fusszeile. Nur unter html[data-design="boxenfunk"]. Gilt auch auf der Telemetrie-
   Seite — deshalb hier nur --bf-… / --bx-… und feste Werte, keine Seiten-Tokens.
   Bild: TV-Bauchbinde. Tasten = schraege Vollfarb-Tabs, je Bereich ein Teamfarben-
   Streifen links; aktiv = ganze Taste in Bereichsfarbe (neutral: Weiss), dunkle Schrift.
   Layoutwerte (Abstaende) nur in eigenen @media-Bloecken (mobile.css-Falle). */

html[data-design="boxenfunk"] :is(.nav-group, .bnav__i, .bnav-menu) { --bx-taste: var(--bx-neutral); }
html[data-design="boxenfunk"] [data-bereich="lizenz"] { --bx-taste: var(--bx-b-lizenz); }
html[data-design="boxenfunk"] [data-bereich="ram"] { --bx-taste: var(--bx-b-ram); }
html[data-design="boxenfunk"] [data-bereich="academy"] { --bx-taste: var(--bx-b-academy); }
html[data-design="boxenfunk"] [data-bereich="sonst"] { --bx-taste: var(--bx-b-sonst); }

/* ---------- Kopfleiste ---------- */
html[data-design="boxenfunk"] .topbar {
  /* Deckende Grundfarbe + KEIN Aussenschatten: die Kopfleiste ist sticky und bekommt eine eigene
     Ebene. Ragt ein halbtransparenter Schatten aus ihr heraus, gilt die Ebene als nicht deckend und
     Chrome zeichnet die Schrift darin unter Windows ohne ClearType — Marc 02.10.: „nicht perfekt glatt“. */
  background: #0b0e16 linear-gradient(180deg, #121722 0%, #0b0e16 100%);
  backdrop-filter: none; border-bottom: 0;
  /* Unterkante: Signalstreifen in der Farbe des Bereichs (Bauchbinden-Kante). */
  box-shadow: inset 0 -3px 0 var(--bereich, var(--bf-gelb));
}
html[data-design="boxenfunk"] .brand__logo,
html[data-design="boxenfunk"] .brand:hover .brand__logo { filter: none; transform: none; }
html[data-design="boxenfunk"] .brand__sub {
  font-family: var(--bf-display); font-weight: 700; font-style: italic; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bf-ink-dim); white-space: nowrap;
}

/* Gruppen-Tasten: schraeger Tab, Teamfarben-Streifen links. */
html[data-design="boxenfunk"] .nav-group:not(:first-child)::before { content: none; }
html[data-design="boxenfunk"] .nav-group__btn {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; font-size: 17px;
  letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
  color: var(--bf-ink); border: 0; border-radius: 0; box-shadow: none; text-shadow: none;
  background: linear-gradient(var(--bx-taste), var(--bx-taste)) left / 14px 100% no-repeat, var(--bf-knopf);
  clip-path: var(--bx-schraeg);
}
html[data-design="boxenfunk"] .nav-group__btn:hover,
html[data-design="boxenfunk"] .nav-group.open .nav-group__btn {
  color: #fff; background: linear-gradient(var(--bx-taste), var(--bx-taste)) left / 14px 100% no-repeat, var(--bf-knopf-hell);
}
html[data-design="boxenfunk"] .nav-group .nav-group__btn.active {
  color: var(--bf-dunkel); background: var(--bx-taste);
}
html[data-design="boxenfunk"] .nav-group__caret { font-size: 13px; font-style: normal; opacity: .9; }
@media (min-width: 768px) {
  html[data-design="boxenfunk"] .topnav { gap: 2px; }
  html[data-design="boxenfunk"] .nav-group__btn { padding: 9px 18px 9px 22px; gap: 7px; }
}
/* Mit Admin-Navigation (6 Gruppen) wird es unter 1680 px eng — Tasten etwas schmaler,
   Untertitel zweizeilig. Reicht es nicht, bricht _kopfleiste_eng.js die Navigation um. */
@media (min-width: 768px) and (max-width: 1679px) {
  html[data-design="boxenfunk"] .topbar { gap: 16px; }
  html[data-design="boxenfunk"] .brand__sub { white-space: normal; max-width: 160px; line-height: 1.15; }
  html[data-design="boxenfunk"] .nav-group__btn { font-size: 16px; padding: 8px 15px 8px 20px; gap: 5px; }
}

/* Klappmenue: Vollflaeche, Teamfarben-Kante oben, kein Rahmen, eckig. */
html[data-design="boxenfunk"] .nav-menu {
  background: var(--bf-panel); border: 0; border-radius: 0;
  box-shadow: inset 0 4px 0 var(--bx-taste), 0 18px 40px rgba(0, 0, 0, .75);
}
html[data-design="boxenfunk"] .nav-menu a {
  font-family: var(--bf-text); font-weight: 600; font-size: 15px; letter-spacing: .01em;
  color: var(--bf-ink-dim); border-radius: 0;
}
html[data-design="boxenfunk"] .nav-menu a:hover { color: #fff; background: var(--bf-knopf); }
html[data-design="boxenfunk"] .nav-group .nav-menu a.active {
  color: #fff; background: color-mix(in srgb, var(--bx-taste) 16%, transparent);
  box-shadow: inset 5px 0 0 var(--bx-taste);
}

/* Join-Knopf: schraeger Tab, gruene Status-Lampe (gehoert zum Lizenzserver). */
html[data-design="boxenfunk"] .server-badge {
  font-family: var(--bf-display); color: var(--bf-ink);
  border: 0; border-radius: 0; box-shadow: none;
  background: linear-gradient(var(--bx-b-lizenz), var(--bx-b-lizenz)) left / 14px 100% no-repeat, var(--bf-knopf);
  clip-path: var(--bx-schraeg);
}
html[data-design="boxenfunk"] a.server-badge:hover {
  color: var(--bf-dunkel); background: var(--bx-b-lizenz); border-color: transparent;
  box-shadow: none; transform: none;
}
html[data-design="boxenfunk"] .server-badge__label {
  font-family: var(--bf-display); font-weight: 800; font-style: italic; letter-spacing: .05em;
}
html[data-design="boxenfunk"] .server-badge__go { font-size: 13px; color: var(--bx-b-lizenz); opacity: 1; }
html[data-design="boxenfunk"] a.server-badge:hover .server-badge__go { color: var(--bf-dunkel); }
html[data-design="boxenfunk"] .server-badge__dot {
  border-radius: 0; background: var(--bx-b-lizenz); box-shadow: none; animation: none;
}
@media (min-width: 768px) {
  html[data-design="boxenfunk"] .server-badge { padding: 8px 18px 8px 22px; font-size: 14px; }
  html[data-design="boxenfunk"] .server-badge__label { font-size: 16px; }
}
@media (max-width: 767px) {
  html[data-design="boxenfunk"] .server-badge { padding-left: 20px; padding-right: 16px; font-size: 13px; }
  html[data-design="boxenfunk"] .server-badge__label { font-size: 15px; }
}

/* ---------- Leiste unten (Handy) ---------- */
@media (max-width: 767px) {
  html[data-design="boxenfunk"] .bnav {
    background: #0b0e16; backdrop-filter: none;
    border-top: 0; box-shadow: inset 0 3px 0 var(--bf-knopf), 0 -8px 20px rgba(0, 0, 0, .7);
  }
  html[data-design="boxenfunk"] .bnav__i {
    font-family: var(--bf-display); font-weight: 700; font-style: italic; font-size: 14px;
    letter-spacing: .02em; text-transform: uppercase; color: var(--bf-ink-dim);
  }
  html[data-design="boxenfunk"] .bnav__i[data-bereich] svg { stroke: color-mix(in srgb, var(--bx-taste) 70%, #8f9ab0); }
  html[data-design="boxenfunk"] .bnav__i.is-on { color: var(--bx-taste); }
  html[data-design="boxenfunk"] .bnav__i.is-on svg { stroke: var(--bx-taste); }
  /* Anzeiger = Vollbalken in Bereichsfarbe, kein Leuchten. */
  html[data-design="boxenfunk"] .bnav__ind { height: 4px; background: var(--bf-gelb); box-shadow: none; }
  html[data-design="boxenfunk"] .bnav__ind::after { background: none; }
  html[data-design="boxenfunk"] .bnav:has(> .bnav__i.is-on[data-bereich="lizenz"]) .bnav__ind { background: var(--bx-b-lizenz); }
  html[data-design="boxenfunk"] .bnav:has(> .bnav__i.is-on[data-bereich="ram"]) .bnav__ind { background: var(--bx-b-ram); }
  html[data-design="boxenfunk"] .bnav:has(> .bnav__i.is-on[data-bereich="academy"]) .bnav__ind { background: var(--bx-b-academy); }
  html[data-design="boxenfunk"] .bnav:has(> .bnav__i.is-on[data-bereich="sonst"]) .bnav__ind { background: var(--bx-b-sonst); }

  html[data-design="boxenfunk"] .bnav-back { background: rgba(7, 9, 14, .78); }
  html[data-design="boxenfunk"] .bnav-menu {
    background: var(--bf-panel); border-top: 0; border-radius: 0;
    box-shadow: inset 0 4px 0 var(--bx-taste), 0 -14px 44px rgba(0, 0, 0, .8);
  }
  html[data-design="boxenfunk"] .bnav-menu__grip { border-radius: 0; background: var(--bf-knopf-hell); }
  html[data-design="boxenfunk"] .bnav-menu__t {
    font-family: var(--bf-display); font-weight: 800; font-style: italic; font-size: 16px;
    letter-spacing: .04em; color: var(--bx-taste);
  }
  html[data-design="boxenfunk"] .bnav-menu__a {
    font-family: var(--bf-text); font-size: 16px; color: var(--bf-ink-dim); border-radius: 0;
  }
  html[data-design="boxenfunk"] .bnav-menu .bnav-menu__a.is-on {
    color: var(--bf-dunkel); background: var(--bx-taste); box-shadow: none;
  }
  html[data-design="boxenfunk"] .bnav-menu__a:active { background: var(--bf-knopf); }
}

/* ---------- Fusszeile ---------- */
html[data-design="boxenfunk"] .site-foot {
  font-family: var(--bf-display); font-weight: 700; font-size: 14px; letter-spacing: .06em;
  text-transform: uppercase; color: #8f9ab0;
  border-top: 3px solid var(--bf-knopf);
}
html[data-design="boxenfunk"] .site-foot__legal a { color: var(--bf-ink-dim); letter-spacing: .06em; }
html[data-design="boxenfunk"] .site-foot__legal a:hover { color: var(--bf-gelb); border-bottom-color: var(--bf-gelb); }
html[data-design="boxenfunk"] .site-foot__demo { font-family: var(--bf-display); color: var(--bf-gelb); }