/* ============================================================
   Kopfleiste und Sprachblock — DIE EINE Quelle.
   Bis zum 10.10.2026 standen diese Regeln zweimal da: in stil.css fuer die
   Unterseiten und hier fuer die handgepflegte Startseite, mit verschiedenen
   Variablennamen. Der Sprachschalter stand dabei NUR in stil.css — die
   Startseite lud ihn gar nicht, und genau dort klebte "DEEN" zusammen.
   Jetzt liegt alles hier und jede Seite laedt diese Datei. Die Farbwerte
   kommen ueber eine Ersatzkette: stil.css nennt sie --tinte/--linie/--bedienung,
   die Startseite --ink/--line/--acc. Was da ist, gewinnt.
   ============================================================ */
.kopf{position:sticky;top:0;z-index:40;background:rgba(10,13,17,.82);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--linie,var(--line))}
.kopf-innen{position:relative;max-width:1160px;margin:0 auto;padding:0 24px;
  height:67px;display:flex;align-items:center;gap:24px}
.marke{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px;
  color:var(--tinte,var(--ink));border:0;letter-spacing:-.01em;text-decoration:none}
.marke .satz{width:26px;height:26px;border-radius:6px;
  background:linear-gradient(140deg,var(--bedienung,var(--acc)),#0f7f7c);
  display:grid;place-items:center;font:700 13px/1 "Figtree",sans-serif;color:#04211f}

/* Navigation.
   Zwei Formen, jede EINMAL aufgeschrieben. Die Voreinstellung ist das Menue
   hinter dem Knopf; die eine Zeile gilt nur, wenn beides zutrifft: der Schirm
   ist breiter als 1180 Pixel UND die Kopfleiste traegt data-menue="zeile".
   Welche Form gilt, entscheidet der Bau anhand der Zahl der sichtbaren
   Sprachen — ab drei passt die Leiste in der 1160 Pixel breiten Inhaltsspalte
   bei keiner Fensterbreite mehr in eine Zeile (Auftrag 10.10.2026, Punkt 2).
   Frueher stand die Knopfform in einem @media-Block und die Zeilenform
   darueber; eine zweite Bedingung haette beide Rumpfe verdoppelt. */

/* ---- Form 1: Menue hinter dem Knopf (Voreinstellung) ---- */
.nav{position:absolute;left:0;right:0;top:100%;margin:0;display:none;
  flex-direction:column;gap:2px;padding:10px 16px 14px;z-index:1;
  background:#0a0d11;box-shadow:0 14px 28px rgba(0,0,0,.45);
  border-bottom:1px solid var(--linie,var(--line))}
.menu-schalter:checked ~ .nav{display:flex}
.nav a{position:relative;padding:11px 12px;border:0;border-radius:8px;
  font:500 15px/1.5 "Figtree",system-ui,sans-serif;
  color:var(--tinte-2,var(--ink-2));white-space:nowrap;text-decoration:none;
  transition:color .15s ease}
.nav a:hover{color:var(--tinte,var(--ink));background:transparent;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.nav a[aria-current="page"]{color:var(--bedienung,var(--acc));background:transparent}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:12px;width:16px;
  bottom:6px;height:2px;border-radius:2px;background:var(--bedienung,var(--acc))}

/* Der Menueknopf IST das Kontrollkaestchen — ohne eine Zeile JavaScript
   bedienbar, mit der Tastatur erreichbar, und sein Zustand steht im HTML statt
   in einem Skript, das ausfallen kann. */
.menu-schalter{-webkit-appearance:none;appearance:none;margin:0 0 0 auto;
  width:40px;height:40px;flex:0 0 auto;cursor:pointer;position:relative;display:block;
  border:1px solid var(--linie-2,var(--line-2));border-radius:8px;
  background:var(--flaeche,var(--surface));
  transition:border-color .15s ease,background .15s ease}
.menu-schalter:hover{background:var(--flaeche-2,var(--surface-2))}
.menu-schalter::before{content:"";position:absolute;left:11px;right:11px;top:13px;
  height:2px;border-radius:2px;background:var(--tinte-2,var(--ink-2));
  box-shadow:0 5px 0 var(--tinte-2,var(--ink-2)),0 10px 0 var(--tinte-2,var(--ink-2))}
.menu-schalter:checked{border-color:var(--bedienung,var(--acc));
  background:rgba(20,182,177,.12)}
.menu-schalter:checked::before{background:var(--bedienung,var(--acc));
  box-shadow:0 5px 0 var(--bedienung,var(--acc)),0 10px 0 var(--bedienung,var(--acc))}

/* ---- Form 2: alles in EINER Zeile ----
   Nur ab 1181 Pixeln und nur bei hoechstens zwei sichtbaren Sprachen. Die
   Abstaende zwischen den Punkten sind null und die Schrift 13 statt 14 Pixel —
   genau das eine Pixel, das erlaubt ist, und ohne beides passt es nicht. */
@media (min-width:1181px){
  .kopf[data-menue="zeile"] .menu-schalter{display:none}
  .kopf[data-menue="zeile"] .nav{position:static;display:flex;flex-direction:row;
    gap:0;margin-left:auto;padding:0;background:none;box-shadow:none;border:0;
    flex-wrap:nowrap}
  .kopf[data-menue="zeile"] .nav a{padding:8px 9px;border-radius:0;font-size:13px}
  .kopf[data-menue="zeile"] .nav a[aria-current="page"]::after{left:9px;right:9px;
    width:auto;bottom:0}
}

/* ---------- Sprachblock ----------
   Ein eigener Block rechts im Kopf, mit feiner senkrechter Trennlinie und 24
   Pixel Abstand zum letzten Menuepunkt. Je Sprache eine Kachel: Flagge oben,
   Name darunter, genau so breit wie die Flagge und mittig. Alle Flaggen stehen
   im Seitenverhaeltnis 4:3, damit keine neben der anderen gestaucht wirkt.
   Der tuerkise Rahmen der aktiven Sprache liegt als Schlagschatten AUSSEN auf
   der Flagge, nicht als Rand: so bleibt die Kachel 48 mal 36 Pixel gross und
   der Block springt beim Sprachwechsel nicht um zwei Pixel. */
.sprachwahl{position:relative;display:flex;align-items:center;gap:12px;
  margin-left:24px;padding-left:25px;flex:0 0 auto}
.sprachwahl::before{content:"";position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:1px;height:34px;
  background:var(--linie-2,var(--line-2))}
.sw-kachel{display:flex;flex-direction:column;align-items:center;gap:6px;
  border:0;text-decoration:none;opacity:.6;
  transition:opacity .15s ease,transform .15s ease}
a.sw-kachel:hover{opacity:1;transform:translateY(-1px)}
.sw-kachel.sw-an{opacity:1}
.sw-kachel:focus-visible{outline:2px solid var(--bedienung-hell,var(--acc-2));
  outline-offset:3px;border-radius:5px}
.sw-bild{display:block;width:48px;height:36px;border-radius:3px;overflow:hidden;
  background:var(--flaeche,var(--surface));box-shadow:0 0 0 1px #ffffff2e}
.sw-an .sw-bild{box-shadow:0 0 0 2px var(--bedienung,var(--acc))}
.sw-bild .fl{display:block;width:100%;height:100%}
.sw-name{display:block;width:48px;text-align:center;letter-spacing:.03em;
  font:600 11px/1.1 "Figtree",system-ui,sans-serif;color:var(--tinte-2,var(--ink-2))}
.sw-an .sw-name{color:var(--bedienung,var(--acc))}
.sw-kurz{display:none}

/* Die Kopfleiste rueckt auf schmalen Schirmen enger zusammen. Die
   Menueknopf-Regeln stehen weiter oben — hier nur, was sich mit der
   Breite aendert. */
@media (max-width:1180px){ .kopf-innen{gap:16px} }
/* Telefon: nur das Zeichen "gb" in der Marke; Flaggen 32 mal 24 mit Kurzform
   darunter. Die Tippflaeche ist mindestens 44 mal 44 Pixel gross. */
@media (max-width:640px){
  .kopf-innen{padding:0 16px;gap:12px;height:59px}
  .marke{font-size:0;gap:0}
  .sprachwahl{gap:4px;margin-left:0;padding-left:13px}
  .sprachwahl::before{height:30px}
  .sw-kachel{min-width:44px;min-height:44px;justify-content:center;gap:4px}
  .sw-bild{width:32px;height:24px}
  .sw-name{display:none}
  .sw-kurz{display:block;width:32px;text-align:center;letter-spacing:.04em;
    font:600 10px/1.1 "Figtree",system-ui,sans-serif;color:var(--tinte-2,var(--ink-2))}
  .sw-an .sw-kurz{color:var(--bedienung,var(--acc))}
}

/* Kachel, die auf die deutsche Fassung ausweicht, weil es die fremdsprachige
   Seite noch nicht gibt (12.10.2026). Der Zusatz steht klein unter dem Kuerzel
   und ist gedaempft, damit die Kachel nicht wie die aktive aussieht. */
.sw-ersatz-kachel{opacity:.72}
.sw-ersatz{display:block;font-size:10px;line-height:1.1;margin-top:1px;
  color:var(--tinte-3,var(--ink-3));letter-spacing:.01em}

/* Der Sprachumschalter steht ZWEIMAL im Markup, aus EINEM Aufruf von
   sprachblock(): einmal in der Kopfleiste, einmal im Menue. CSS kann ein
   Element nicht umhaengen, und auf dem Telefon gehoert der Umschalter hinter
   die Menuetaste (Ergaenzung 11, Punkt 7). Immer genau eine der beiden Kopien
   ist sichtbar; die andere ist display:none und damit auch fuer Vorleseprogramme
   fort. */
.sw-im-menue{display:none}
@media (max-width:640px){
  .kopf-innen > .sprachwahl{display:none}
  .sw-im-menue{display:block;border-top:1px solid var(--linie,#2a2f3a);
    margin-top:6px;padding-top:10px}
  .sw-im-menue .sprachwahl{padding-left:0;justify-content:center;gap:16px}
  .sw-im-menue .sprachwahl::before{display:none}
  .sw-im-menue .sw-bild{width:48px;height:36px}
  .sw-im-menue .sw-name{display:block}
}

/* Alle Knoepfe gleich breit (Ergaenzung 11, Punkt 7). Ohne feste Breite
   bestimmt der laengste Sprachname die Kachel: gemessen am 12.10.2026 mit einer
   erfundenen Sprache standen 48 und 72 Pixel nebeneinander. Der Name bricht
   lieber um, als die Kachel zu dehnen — sonst wandert die Leiste, sobald eine
   Sprache mit langem Namen dazukommt (Espanol, Francais, Italiano). */
.sw-kachel{width:48px}
.sw-name{width:100%;overflow-wrap:anywhere;hyphens:auto}
@media (max-width:640px){
  .kopf-innen > .sprachwahl .sw-kachel{width:32px}
  .sw-im-menue .sw-kachel{width:48px}
}