/* Layout: Header und Footer. Nutzt ausschliesslich die Tokens aus basis.css —
   hier wird keine Farbe und keine Groesse neu als Rohwert definiert.
   Grundzustand ist die schmale Ansicht (Burger), Desktop ab 1200px — der
   Umschaltpunkt ist weiter unten ausfuehrlich begruendet und haengt mit der
   matchMedia-Zeile in nav.js und dem Feld navOffen in
   pruefung/layout-pruefung.mjs zusammen. */

/* 1. Header -------------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
}

.kopf__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.75rem;
}

/* ponytail: min() statt zweiter Media-Query — 200px, auf sehr schmalen
   Geraeten automatisch kleiner, damit neben dem Burger Platz bleibt. */
.kopf__logo img {
  width: min(200px, 45vw);
  height: auto;
}

.kopf__burger {
  display: block;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}

.kopf__burger:focus-visible {
  outline: 3px solid var(--primaer);
  outline-offset: 2px;
}

.kopf__balken {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
}

.kopf__balken + .kopf__balken {
  margin-top: 5px;
}

.nav {
  display: none;
  flex-basis: 100%;
}

.kopf--offen .nav {
  display: block;
}

.nav ul {
  list-style: none;
  padding: 0;
}

.nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--schrift-headline);
  font-weight: 600;
  text-decoration: none;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--primaer);
}

.nav a:focus-visible {
  outline: 3px solid var(--primaer);
  outline-offset: 2px;
}

.nav .knopf {
  display: inline-flex;
  margin-block: 0.5rem;
  color: var(--weiss);
}

.nav .knopf:hover,
.nav .knopf:focus-visible {
  color: var(--weiss);
}

/* Der Ring darf nicht die Farbe der Flaeche haben, die er umgibt: .nav
   a:focus-visible (0,2,1) schlaegt .knopf:focus-visible aus basis.css (0,1,1) und
   legte damit den Primaerton um den Knopf, der selbst in diesem Ton gefuellt ist —
   zu erkennen war der Ring nur an der 2px breiten Luecke des outline-offset. Der
   dunklere Ton setzt sich von beidem ab. Betrifft genau den Punkt, den ein
   Tastaturnutzer auf /versicherungsfinder/ als aktiven anspringt. */
.nav .knopf:focus-visible {
  outline-color: var(--primaer-dunkel);
}

/* Aktive Seite hervorheben. Das Merkmal setzt der Build als aria-current="page" —
   damit traegt es zugleich die Ansage fuer Screenreader und muss beim Anlegen einer
   neuen Seite nicht mehr hier nachgepflegt werden. */
.nav a[aria-current="page"] {
  color: var(--primaer);
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Seit Ticket d14bd1fa fuehrt der Knopf auf eine eigene Seite — er kann also selbst
   der aktive Punkt sein. Die Regel darueber wuerde ihm dort den Primaerton geben,
   und der steht auf der Primaerflaeche des Knopfes praktisch unsichtbar. Deshalb
   bleibt die Schrift weiss; das Aktivmerkmal traegt allein die Unterstreichung, die
   auf der Flaeche gut zu sehen ist. Die hoehere Spezifitaet ist der ganze Zweck der
   Regel. */
.nav .knopf[aria-current="page"] {
  color: var(--weiss);
}

/* Umschaltpunkt zwischen Burger und offener Navigation. Er stand bis Phase 4 auf
   768px und bis Phase 9 auf 1024px; mit dem sechsten Punkt („Ratgeber") misst die
   Reihe 865px — neben dem 200px breiten Logo und den 40px Seitenrand braucht sie
   damit 1105px. Bei 1024px brach sie in eine zweite Kopfzeile um (gemessen: der
   Kopf wurde 107 statt der damaligen 77px hoch). Ein Umbruch in eine zweite Zeile
   ist kein gewollter Zustand, und Schrumpfen von Schrift oder Abstaenden brachte die
   fehlenden 85px nicht zusammen — der Burger ist dort der ehrlichere Zustand.
   Mit dem siebten Punkt („Blog", Ticket bcd59018) mass die Reihe 928px, also 1168px
   mit Logo und Seitenrand — einzeilig bei 1200px, aber nur noch mit rund 32px
   Reserve. Seit Ticket d14bd1fa sind es wieder sechs Punkte; der letzte ist dafuer
   ein Knopf mit eigener Beschriftung. Gemessen bei 1200x800 (Stand 2026-08-20):
   Reihe 764px, davon 227px der Knopf; mit dem 200px breiten Logo und 40px
   Seitenrand 1004px, Kopfhoehe 77,8px — einzeilig, Reserve rund 196px. Die
   Beschriftung des Knopfes bleibt trotzdem der Engpass: Die Fassung „… – Jetzt
   Direktabschluss" mass 971px Reihe und brach in eine zweite Kopfzeile um (gemessen:
   Kopfhoehe 108px). Wer die Beschriftung verlaengert oder einen Punkt ergaenzt, misst
   neu.
   Die Reserve haengt an der geladenen Webschrift (Open Sans). Deshalb einmal
   gegengemessen, was ohne sie passiert (Schriftdateien im Browser geblockt, es
   greift der Rueckfall system-ui, sans-serif — auf diesem Arbeitsplatz Segoe UI):
   Reihe 722px, mit Logo und Seitenrand 962px, Kopfhoehe unveraendert 77,8px,
   einzeilig. Der Rueckfall laeuft also SCHMALER als die Webschrift, die Reserve
   waechst dort auf rund 238px. Ein fehlendes Schriftpaket oder das
   font-display-Fenster bricht die Kopfzeile damit nicht — die Messung deckt
   allerdings nur diesen einen Rueckfall ab, ein Schirm mit anderer Systemschrift
   ist damit nicht vermessen.
   ACHTUNG: Diese Zahl gehoert mit der matchMedia-Zeile in nav.js und dem Feld
   `navOffen` in pruefung/layout-pruefung.mjs zusammen — wer sie hier aendert,
   aendert sie dort. */
@media (min-width: 1200px) {
  .kopf__burger {
    display: none;
  }

  .nav {
    display: block;
    flex-basis: auto;
  }

  .nav ul {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  .nav a {
    min-height: 0;
  }

  .nav .knopf {
    margin-block: 0;
  }
}

/* 2. Inhaltsbereich ------------------------------------------------------- */

/* Der Header klebt oben. Ohne diesen Abstand landet der Skip-Link genau darunter,
   also auf verdecktem Text — und trifft damit die Nutzergruppe, fuer die er da ist. */
#inhalt {
  scroll-margin-top: 5rem;
}

/* 3. Footer -------------------------------------------------------------- */

.fuss {
  background: var(--flaeche-fuss);
  border-top: 1px solid var(--linie);
  padding-block: 2.5rem;
}

.fuss__innen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.fuss__innen img {
  width: 200px;
  height: auto;
}

/* Die Bereichszeile sieht aus wie die Rechtszeile darunter — beide sind schlichte
   Linkreihen mit Trennstrich. Deshalb eine gemeinsame Regel statt einer zweiten
   Kopie derselben drei Zustaende; seit dem 2026-08-20 teilen sie auch die Farbe. */
.fuss__bereiche a,
.fuss__kontakt a,
.fuss__recht a {
  text-decoration: none;
}

/* Alle Fusslinks — die drei Hubs, die Telefonnummer und die Rechtszeile — tragen
   denselben kontrastfesten Ton. Gerechnet auf der halbtransparenten Fussflaeche,
   also 20 % --primaer ueber dem Seitengrund: --primaer kommt dort auf 3,40:1
   (ueber #e6f7ff) bzw. 3,67:1 (ueber Weiss auf der Terminseite) und verfehlt WCAG
   AA fuer Normaltext deutlich, --primaer-dunkel haelt 7,13:1 bzw. 7,70:1.
   Die Rechtszeile lief bis 2026-08-20 als Vorbestand auf --primaer und ist jetzt
   mitgezogen: Zwei unmittelbar benachbarte Linkzeilen in zwei Farben, deren
   einziger Unterschied ein bekannter AA-Verstoss ist, sind weder gestalterisch
   noch fachlich zu halten. */
.fuss__bereiche a,
.fuss__kontakt a,
.fuss__recht a {
  color: var(--primaer-dunkel);
}

.fuss__bereiche a:hover,
.fuss__kontakt a:hover,
.fuss__recht a:hover {
  text-decoration: underline;
}

.fuss__bereiche a:focus-visible,
.fuss__kontakt a:focus-visible,
.fuss__recht a:focus-visible {
  outline: 3px solid var(--primaer);
  outline-offset: 2px;
}

/* Die Fussflaeche ist halbtransparent, der Kontrast haengt also am Seitengrund:
   #666 kaeme auf 4,02:1 (ueber #e6f7ff) bzw. 4,35:1 (ueber Weiss auf der
   Terminseite) und verfehlt WCAG AA fuer Normaltext auf jeder Seite. Der
   dunklere Grauton haelt 6,18:1 bzw. 6,72:1. */
.fuss__copy {
  color: var(--text-gedaempft-stark);
  font-size: 0.9rem;
}