/* ===========================================================================
   kopf.css - Die Kopfleiste, einmal fuer alle Bereiche.

   WARUM EINE EIGENE DATEI

   Jede Seite hat ihre Kopfleiste selbst gestaltet, und sie liefen immer
   wieder auseinander: drei Arten von Wegknoepfen (nav.wechsel button,
   nav.wechsel a.heim, #wechseloben .btn), zwei Arten von Abmelden (.ausknopf
   violett, .schalter grau umrandet), unterschiedliche Schriften, Groessen
   und Abstaende. Dazu Hover-Faelle, in denen allgemeine Knopfregeln der
   Seite im dunklen Balken mitgriffen und helle Schrift auf hellem Kasten
   stand.

   Diese Datei wird von jeder Seite ALS LETZTE geladen und legt fuer alle
   Varianten dasselbe fest. Die !important stehen hier absichtlich und nur
   hier: Sie setzen sich gegen die aelteren Seitenregeln durch, ohne dass
   jede einzelne Seite aufgeraeumt werden muss. Wer eine Kopfleiste aendern
   will, aendert sie hier - fuer alle.

   Der Balken ist immer dunkel, auch in der hellen Darstellung. Deshalb
   stehen die Farben fest und nicht in den Variablen der Seiten.
   =========================================================================== */

@font-face{font-family:"FengSans";font-weight:400;font-style:normal;font-display:swap;
  src:url("/schrift/inter-400.woff2") format("woff2")}
@font-face{font-family:"FengSans";font-weight:500;font-style:normal;font-display:swap;
  src:url("/schrift/inter-500.woff2") format("woff2")}
@font-face{font-family:"FengSans";font-weight:600 700;font-style:normal;font-display:swap;
  src:url("/schrift/inter-600.woff2") format("woff2")}

:root{
  --kl-grund:#141414;       /* Balken */
  --kl-text:#C9C2B6;        /* Wegknoepfe, ruhend */
  --kl-hell:#F5F3EF;        /* Wegknoepfe, beim Darueberfahren */
  --kl-rand:#3A3833;        /* Rand beim Darueberfahren */
  --kl-violett:#806991;     /* Abmelden - das Feng-IT-Violett */
  --kl-violett-tief:#6C5880;
}

/* Versteckt heisst versteckt - auch wenn unten display gesetzt wird. */
header [hidden]{display:none !important}

/* --- Wegknoepfe zu den anderen Bereichen --------------------------------- */

header nav.wechsel,
header #wechseloben{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px;
}

header nav.wechsel > button,
header nav.wechsel > a,
header #wechseloben > button,
header #wechseloben > a{
  display:inline-flex !important;align-items:center;gap:7px;
  font-family:"FengSans",system-ui,-apple-system,"Segoe UI",sans-serif !important;
  font-size:13px !important;font-weight:500 !important;
  letter-spacing:0 !important;text-transform:none !important;line-height:1.2 !important;
  padding:0 12px !important;height:36px !important;min-height:0 !important;
  box-sizing:border-box !important;align-self:center !important;
  margin-top:0 !important;margin-bottom:0 !important;
  border:1px solid transparent !important;border-radius:3px !important;
  background:transparent !important;color:var(--kl-text) !important;
  box-shadow:none !important;text-decoration:none !important;
  white-space:nowrap;cursor:pointer;
}
header nav.wechsel > button::before,
header #wechseloben > button::before{content:none !important}

header nav.wechsel > button:hover,
header nav.wechsel > a:hover,
header #wechseloben > button:hover,
header #wechseloben > a:hover,
header nav.wechsel > button:focus-visible,
header nav.wechsel > a:focus-visible,
header #wechseloben > button:focus-visible{
  background:transparent !important;border-color:var(--kl-rand) !important;
  color:var(--kl-hell) !important;outline:none;
}

header nav.wechsel .sym,
header #wechseloben .sym{width:15px !important;height:15px !important;flex:none;opacity:.85}
header nav.wechsel > *:hover .sym,
header #wechseloben > *:hover .sym{opacity:1}

/* --- Abmelden: immer violett, immer gleich gross --------------------------
   FESTE Hoehe statt Mindesthoehe, und align-self:center. Die meisten Balken
   legen keine Ausrichtung fest, dann gilt "strecken": Der Knopf wurde so hoch
   wie die Zeile - und die ist je nach Seite verschieden hoch, im Turnier mit
   dem dreizeiligen Titelblock deutlich hoeher als in der Reservierung. */

header .ausknopf,
header #abmelden,
header #ausoben{
  display:inline-flex !important;align-items:center;gap:8px;
  font-family:"FengSans",system-ui,-apple-system,"Segoe UI",sans-serif !important;
  font-size:13px !important;font-weight:600 !important;
  letter-spacing:.02em !important;text-transform:none !important;line-height:1.2 !important;
  padding:0 16px !important;height:36px !important;min-height:0 !important;
  box-sizing:border-box !important;align-self:center !important;
  flex:0 0 auto !important;width:auto !important;
  margin-top:0 !important;margin-bottom:0 !important;
  border:1px solid var(--kl-violett) !important;border-radius:3px !important;
  background:var(--kl-violett) !important;color:#fff !important;
  box-shadow:none !important;cursor:pointer;white-space:nowrap;
}
header .ausknopf:hover,
header #abmelden:hover,
header #ausoben:hover,
header .ausknopf:focus-visible,
header #abmelden:focus-visible,
header #ausoben:focus-visible{
  background:var(--kl-violett-tief) !important;border-color:var(--kl-violett-tief) !important;
  color:#fff !important;outline:none;
}
header .ausknopf .sym,
header #abmelden .sym,
header #ausoben .sym{width:15px !important;height:15px !important;opacity:1}

/* Wer die Kopfleiste als hellen Kasten im Dunkelmodus der Seite ueberschrieb
   (body.dunkel button{...}), trifft hier nicht mehr: die Regeln oben stehen
   spaeter und tragen !important. */

@media (max-width:640px){
  header nav.wechsel > button,
  header nav.wechsel > a,
  header #wechseloben > button{padding:0 9px !important;font-size:12.5px !important}
  header .ausknopf,header #abmelden,header #ausoben{padding:0 12px !important}
}