/* ==========================================================================
   verwalt — gemeinsame Grundlage aller Seiten (Skyline)
   --------------------------------------------------------------------------
   Hier stehen die Dinge, die auf JEDER Seite gleich sind: Schriften,
   Farbwerte, Kopf und Fuß. Die einzelnen Seiten bringen darüber hinaus nur
   noch ihr eigenes Innenleben mit.

   SKYLINE-FASSUNG: Diese Datei ist strukturgleich mit der alten
   verwalt.css - nur die Farbtokens sind auf die Skyline-Palette der neuen
   Startseite (index.html) umgestellt. Alle Klassennamen sind unverändert,
   damit die Unterseiten ohne Umbau nur das Stylesheet tauschen mussten.

   Die Rollen wurden übertragen, nicht die Werte:
     - warmes Creme  -> Weiß / helles Blaugrau
     - Petrol        -> dunkles Tinten-Blau (Fußzeile, Rahmen)
     - Orange (CTA)  -> Blau (Haupt-Aktion, Links, Fokus)
     - Mint          -> Blau
     - Gelb-Marker   -> hellblauer Marker mit blauer Schrift

   Wer eine Farbe ändern will, ändert sie hier - und zwar zweimal, hell und
   dunkel. Die Startseite bringt ihre Farben eigenständig mit (inline).
   ========================================================================== */

/* ---------- Schriften ----------
   Vom eigenen Server, nicht von Google. Die Datenschutzerklärung sagt genau
   das zu. Beide Dateien sind variabel, ein Schnitt deckt 400 bis 700 ab.
   Die Pfade stehen relativ zu DIESER Datei, also ohne "assets/". */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/outfit-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/outfit-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/mulish-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/mulish-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Farbwerte ---------- */
:root,
[data-theme="light"] {
  --bg: #ffffff;
  --bg2: #f5f8fd;
  --surf: #ffffff;
  --text: #16202e;
  --muted: #5b6779;
  --line: rgba(22, 32, 46, 0.11);
  --teal: #16202e;
  --mint: #2f6fe0;
  --mint-ink: #ffffff;
  --orange: #2f6fe0;
  --orange-2: #1f56c2;
  --shadow: 0 40px 70px -30px rgba(22, 32, 46, 0.35);
  --frame: #16202e;
  /* Hellblau markiert, was in den Rechtstexten noch einzutragen ist */
  --mark: #dfebff;
  --mark-ink: #1f56c2;
  /* Hervorgehobene Schrift auf normalem Grund. Kräftiges Blau im
     Hellmodus, ein helleres Blau im Dunkelmodus. */
  --ink-accent: #1f56c2;
  /* Die hervorgehobene Fläche - dieselben Werte wie .stat-card--hero im
     App-Dashboard (hb-stat-hero-bg und hb-accent-soft). Bis hierher war
     dafür --teal im Einsatz, ein dunkles Navy; in der App ist das längst
     durch dieses helle Blau ersetzt.
     --hero-line ist die zarte Tönung für Zierkreise, --hero-edge die
     deutlich kräftigere Kante: auf weißem Grund braucht die Fläche einen
     sichtbaren Rand, sonst verschwindet sie im Untergrund. */
  --hero-bg: #e9f1fd;
  --hero-line: rgba(47, 111, 224, 0.12);
  --hero-edge: rgba(47, 111, 224, 0.35);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #0c1320;
  --bg2: #141f31;
  --surf: #131d2c;
  --text: #e9eefb;
  --muted: #97a4b8;
  --line: rgba(255, 255, 255, 0.12);
  --teal: #0a1220;
  --mint: #7aa8ff;
  --mint-ink: #05090f;
  --orange: #5b8def;
  --orange-2: #7aa8ff;
  --shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.8);
  --frame: #05090f;
  --mark: #1c2c46;
  --mark-ink: #9cc0ff;
  --ink-accent: #9cc0ff;
  --hero-bg: #16233a;
  --hero-line: rgba(122, 168, 255, 0.16);
  --hero-edge: rgba(122, 168, 255, 0.32);
  color-scheme: dark;
}

/* ---------- Grundlage ---------- */
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: "Mulish", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition:
    background 0.45s ease,
    color 0.45s ease;
}
a {
  text-decoration: none;
  color: var(--orange);
}
a:hover {
  color: var(--orange-2);
}
h1,
h2,
h3 {
  font-family: "Outfit", sans-serif;
  letter-spacing: -0.03em;
  margin: 0;
}
button,
input,
textarea {
  font-family: inherit;
}
img {
  max-width: 100%;
}
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
/* Sprungmarken kommen UNTER der klebenden Kopfleiste hervor. Ohne das
   scrollt der Browser die Überschrift exakt an den oberen Rand - und dort
   liegt die Leiste darüber. Auf dem Handy ist sie niedriger als am
   Schreibtisch, deshalb die gemessene Variable statt einer festen Zahl. */
[id] {
  scroll-margin-top: calc(var(--header-h, 74px) + 18px);
}
/* Lange Adressen (E-Mail, URL) sprengen auf 320 px sonst die Spalte. */
a,
address,
p {
  overflow-wrap: break-word;
}
/* Deutsche Wortungetüme in Überschriften: "Auftragsverarbeitung",
   "Datenschutzerklärung", "Geschäftsbedingungen". In 34 px passt keines
   davon in 280 px Textbreite - die Seite ließ sich deshalb auf einem
   320-px-Gerät seitlich schieben. Die Silbentrennung dazu steht unten im
   Abschnitt für schmale Geräte: am Schreibtisch ist die Spalte breit
   genug, und dort soll keine Überschrift getrennt werden. */
h1,
h2,
h3 {
  overflow-wrap: break-word;
}
.kicker {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.kicker--orange {
  color: var(--orange);
}
.kicker--mint {
  color: var(--mint);
}
.lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}
/* Platzhalter in den Rechtstexten: "[Firmenname]" und ähnliches */
.mark {
  background: var(--mark);
  color: var(--mark-ink);
  padding: 1px 7px;
  border-radius: 6px;
  font-weight: 600;
}

/* ---------- Knöpfe ----------
   Wie auf der Startseite: abgerundete Rechtecke (12px), keine Pillen. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 15px 27px;
  font-weight: 700;
  font-size: 16.5px;
  font-family: "Mulish", sans-serif;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
.btn--primary {
  background: var(--orange);
  color: #fff;
}
.btn--primary:hover {
  background: var(--orange-2);
  color: #fff;
  transform: translateY(-1px);
}
.btn--ghost {
  background: var(--surf);
  border-color: var(--line);
  color: var(--text);
}
.btn--ghost:hover {
  border-color: var(--orange);
  color: var(--orange);
}
.btn--sm {
  padding: 12px 20px;
  font-size: 15px;
}
.btn--wide {
  display: flex;
  text-align: center;
}

/* ---------- Marke ----------
   Das Logo liegt zweimal fertig eingefärbt vor: dunkelgrün für helle
   Seiten, cremefarben für dunkle. Eine CSS-Maske mit nur einer Datei
   wäre eleganter, wird aber bei file:// blockiert und ist in älteren
   Browsern unzuverlässig - beim Logo ist Verlässlichkeit wichtiger als
   Eleganz. Sichtbar ist immer genau eines der beiden Bilder. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}
.brand:hover {
  color: var(--text);
}
.brand__mark {
  width: 27px;
  height: 29px;
  flex: none;
  display: block;
  object-fit: contain;
}
.brand__mark--dark {
  display: none;
}
[data-theme="dark"] .brand__mark--light {
  display: none;
}
[data-theme="dark"] .brand__mark--dark {
  display: block;
}
.brand__name {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 21px;
}
/* Die Adresse ist die Marke: "verwalt" in der Textfarbe, ".app" im Blau
   der Seite - genau wie auf der Startseite. */
.brand__tld {
  color: var(--orange);
}

/* ---------- Pilotphase ----------
   BEFRISTET. Ein kleines Wort am Ende der Marke, kein Abzeichen: es
   steht INNERHALB von .brand__name und sitzt damit von selbst auf
   derselben Grundlinie wie ".app" - keine eigene Fläche, keine
   Versalien, keine Farbe, die es sonst nirgends gibt.

   ENTFERNEN, sobald die Buchung offen ist: diese Regel und das
   <span class="brand__pilot"> in der Kopfzeile jeder Seite. */
.brand__pilot {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
}
/* Die Fußzeile ist immer dunkel - dort wäre --muted zu schwach. */
.site-footer .brand__pilot {
  color: rgba(238, 243, 251, 0.55);
}

.site-footer .brand__tld {
  color: #93b8ff;
}

/* ---------- Kopfzeile ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  /* Erst deckend, dann durchscheinend: kennt ein Browser color-mix
     nicht, bleibt die Kopfzeile lesbar statt durchsichtig. Wie Startseite. */
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: background 0.45s ease;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
/* Farbschalter und Hauptknopf sitzen in einer eigenen Hülle. Am Schreib-
   tisch ist sie unsichtbar: "contents" lässt ihre Kinder direkt in der
   Leiste stehen, als gäbe es sie nicht. Erst im aufgeklappten Menü wird
   sie zur eigenen Zeile — siehe ganz unten. */
.nav__tools {
  display: contents;
}
/* Der Knopf, der das Menü aufklappt. Auf breiten Fenstern gibt es ihn
   nicht; dort steht die Navigation ohnehin offen da. */
.nav__burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surf);
  cursor: pointer;
}
.nav__burger span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition:
    transform 0.25s ease,
    opacity 0.15s ease;
}
.nav__burger span:nth-child(1) {
  top: 14px;
}
.nav__burger span:nth-child(2) {
  top: 21px;
}
.nav__burger span:nth-child(3) {
  top: 28px;
}
/* Offen: aus den drei Strichen wird ein Kreuz. */
.site-header.is-open .nav__burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header.is-open .nav__burger span:nth-child(2) {
  opacity: 0;
}
.site-header.is-open .nav__burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.nav a.nav__link {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--muted);
  font-family: "Mulish", sans-serif;
}
.nav a.nav__link:hover {
  color: var(--text);
}
.theme-toggle {
  position: relative;
  width: 58px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg2);
  cursor: pointer;
  flex: none;
  transition: background 0.4s ease;
}
.theme-toggle__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1.35);
}
[data-theme="dark"] .theme-toggle__knob {
  transform: translateX(30px);
}

/* ---------- Store-Abzeichen ----------
   Zwei Marken nebeneinander, die verschiedene Seitenverhältnisse haben
   (Google ist breiter als Apple). Ausgerichtet wird deshalb über die
   HÖHE - so wirken sie gleich schwer, ohne dass eines verzerrt wird.
   Beide Hersteller verlangen, dass ihr Abzeichen unverändert bleibt.

   Zustände:
     .stores__badge            verfügbar, ist ein <a>
     .stores__badge--bald      noch nicht da, ist ein <span>
     .stores__platzhalter      Datei fehlt noch (siehe stores/README.md)
   ========================================================================= */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.stores__badge {
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  transition:
    transform 0.15s ease,
    opacity 0.2s ease;
}
.stores__badge img {
  display: block;
  height: 52px;
  width: auto;
}
a.stores__badge:hover {
  transform: translateY(-2px);
}
/* Noch nicht verfügbar: kein href, also auch kein Klick ins Leere.
   Bewusst NICHT abgeschwächt - ein halb entfärbtes Abzeichen sieht aus
   wie ein Ladefehler, nicht wie "kommt bald". Dass die App noch nicht im
   Store ist, sagt die Zeile darunter. */
.stores__badge--bald {
  cursor: default;
}
/* Platzhalter, solange die Bilddatei fehlt. Grau umrandet in der Größe
   des späteren Abzeichens - so springt das Layout beim Einsetzen nicht. */
.stores__platzhalter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  min-width: 168px;
  padding: 0 18px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.stores__hinweis {
  margin: 14px 0 0;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}
@media (max-width: 400px) {
  .stores__badge img,
  .stores__platzhalter {
    height: 46px;
  }
}

/* ---------- Fußzeile ---------- */
.site-footer {
  margin-top: 96px;
  background: var(--teal);
  color: #eef3fb;
  padding: 60px 0 26px;
  transition: background 0.45s ease;
}
.site-footer__cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 36px;
}
.site-footer p {
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(233, 238, 251, 0.72);
  max-width: 320px;
  margin: 16px 0 0;
}
.site-footer h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(233, 238, 251, 0.5);
  margin: 0;
}
.site-footer nav {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 16px;
  font-size: 15.5px;
}
.site-footer nav a {
  color: #eef3fb;
}
.site-footer nav a:hover {
  color: var(--orange);
}
.site-footer .brand,
.site-footer .brand:hover {
  color: #eef3fb;
}
/* Die Fußzeile ist immer dunkelgrün, also gilt dort immer die helle
   Fassung der Marke - unabhängig vom Farbmodus der Seite. */
.site-footer .brand__mark--light {
  display: none;
}
.site-footer .brand__mark--dark {
  display: block;
}
/* Anbieter und Anschrift unter dem Beschreibungstext. Nicht rechtlich
   nötig - das Impressum steht daneben -, aber es beantwortet die Frage
   "wer steht dahinter" da, wo sie gestellt wird, ohne einen Klick.
   <address> ist dafür das richtige Element; die Kursivstellung, die
   Browser ihm geben, wird zurückgenommen. */
.site-footer address {
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.65;
  /* Derselbe Grauton wie der Beschreibungstext darüber. Der Firmenname
     stand vorher heller und halbfett und zog den Blick als Erstes an -
     er ist aber eine Pflichtangabe, keine Aussage. */
  color: rgba(233, 238, 251, 0.72);
  margin-top: 30px;
}
.site-footer__bar {
  margin: 44px auto 0;
  padding: 20px 24px 0;
  border-top: 1px solid rgba(233, 238, 251, 0.16);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  color: rgba(233, 238, 251, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ---------- Rechtstexte auf schmalen Geräten ----------
   Die Seiten Impressum, AGB, AVV und Datenschutz sind mit Auszeichnungen
   direkt im HTML gebaut und greifen über data-r auf ihre wenigen
   beweglichen Teile zu. Was auf ALLEN vieren gleich ist, steht hier -
   sonst müsste jede Datei dieselbe Zeile mitbringen.

   Der Kern: die breiten Tabellen (Anbieterlisten, Tarifvergleich) tragen
   eine Mindestbreite von 560 bis 720 px. Als Inhalt einer Rasterzelle
   zieht diese Zahl die ganze Spalte auf - und damit die Seite. Das ist
   der Grund, warum sich Datenschutz und AVV auf dem Handy seitlich
   schieben ließen. min-width:0 nimmt der Zelle die eingebaute
   Mindestbreite; die Tabelle rollt dann in ihrem eigenen Kasten. */
@media (max-width: 1080px) {
  [data-r="legal"] > * {
    min-width: 0;
  }
  [data-r="scroll"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* Der Hinweis über einer Tabelle, die breiter ist als der Schirm. Ein
   abgeschnittenes "unbegrenz…" am rechten Rand sieht nach Fehler aus,
   wenn niemand sagt, dass man dort wischen kann. Eingesetzt wird der
   Satz von assets/site.js - und nur dann, wenn die Tabelle tatsächlich
   nicht hineinpasst. Auf einem Tablet, wo sie ganz zu sehen ist, wäre er
   eine Unwahrheit. */
.tabellen-hinweis {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--muted);
}
/* display: flex überstimmt sonst das display: none, das der Browser dem
   hidden-Attribut mitgibt - der Hinweis stünde immer da. */
.tabellen-hinweis[hidden] {
  display: none;
}
.tabellen-hinweis span {
  color: var(--orange);
  font-weight: 700;
}

/* ---------- Schmale Geräte ---------- */
@media (max-width: 1020px) {
  .site-footer__cols {
    grid-template-columns: 1fr 1fr;
  }

  /* ---- Kopfzeile wird zum Menü ----
     Die Punkte standen hier früher auf display:none, und es kam nichts an
     ihre Stelle - auf dem Handy war die Seite ohne Navigation. Jetzt
     bleibt in der Leiste nur Marke und Knopf; die Punkte hängen als Blatt
     darunter und klappen auf Tippen auf. */
  .site-header__inner {
    position: relative;
  }
  .nav__burger {
    display: block;
  }
  .nav {
    position: absolute;
    top: calc(100% + 10px);
    left: auto;
    right: 0;
    /* Verankert am rechten Seitenrand, direkt unter dem Knopf. Auf einem
       Handy im Hochformat ist das die volle Textbreite, auf einem quer
       gehaltenen deckelt max-width bei 420 px - sonst stünden sechs
       Punkte einzeln in einer 800 px breiten Fläche. Die 48 px sind die
       zwei Seitenränder aus .wrap. */
    margin-right: 24px;
    width: calc(100% - 48px);
    max-width: 420px;
    z-index: 5;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surf);
    box-shadow: var(--shadow);
    /* Zugeklappt unsichtbar UND nicht antippbar: nur opacity würde ein
       unsichtbares Blatt über der Seite liegen lassen. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0.2s;
    /* Passt die Liste nicht auf den Schirm, rollt sie in sich - nicht die
       Seite darunter. */
    max-height: calc(100svh - var(--header-h, 66px) - 30px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-header.is-open .nav {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  /* Ausnahme: eine Leiste ohne Navigationspunkte (die Dankeseite trägt
     nur den Farbschalter und einen Knopf). Ohne diese Rücknahme wäre ihr
     Inhalt in einem Blatt versteckt, für das es gar keinen Knopf gibt. */
  .nav.nav--einfach {
    position: static;
    flex-direction: row;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: none;
    overflow: visible;
  }
  /* Ganz oben ist die Leiste auf der Startseite durchsichtig. Steht das
     Menü offen, braucht sie einen Grund - sonst schimmert der Hero
     zwischen Leiste und Blatt durch. */
  .site-header.is-open {
    background: var(--bg);
    border-bottom-color: var(--line);
  }
  .nav a.nav__link {
    display: block;
    padding: 13px 14px;
    border-radius: 12px;
    font-size: 17px;
    color: var(--text);
  }
  .nav a.nav__link:hover {
    background: var(--bg2);
  }
  /* Farbschalter und Hauptknopf bilden die Fußzeile des Menüs. */
  .nav__tools {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .nav__tools .btn {
    flex: 1;
    padding: 13px 18px;
  }
}
@media (max-width: 640px) {
  .wrap {
    padding-left: 18px;
    padding-right: 18px;
  }
  .nav {
    margin-right: 18px;
    width: calc(100% - 36px);
  }
  /* Die Leiste darf schmaler werden als am Schreibtisch - auf einem Handy
     ist jede Zeile Höhe, die sie klebend belegt, dem Inhalt genommen.
     Derselbe Wert wie auf der Startseite, damit beide gleich hoch sind. */
  .site-header__inner {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* Silbentrennung erst hier: ein hartes Umbrechen mitten im Wort sieht
     schlecht aus, ein abgeschnittenes Wort ist aber schlechter. Der
     Browser wertet dafür das lang="de" des Dokuments aus. */
  h1,
  h2,
  h3 {
    hyphens: auto;
  }
  .btn {
    padding: 15px 24px;
    font-size: 16px;
  }
  .btn--sm {
    padding: 11px 18px;
    font-size: 15px;
  }
  /* In der Leiste ohne Menü stehen Marke, Schalter und Knopf nebeneinander.
     In voller Größe blieb für den Knopf zu wenig übrig und seine
     Beschriftung brach auf zwei Zeilen um — die Leiste wurde dadurch 80 px
     hoch. Enger gesetzt passt alles in eine Zeile. */
  .nav--einfach .btn {
    padding: 10px 12px;
    font-size: 14.5px;
    /* Lieber eine zweite Zeile in der Leiste als ein Knopf, dessen
       Beschriftung in sich umbricht. */
    white-space: nowrap;
  }
  /* Greift nur dort: auf allen anderen Seiten hängt die Navigation als
     Blatt unter der Leiste und ist aus dem Fluss genommen — dort stehen
     nur Marke und Menüknopf, und die passen immer nebeneinander. */
  .site-header__inner {
    flex-wrap: wrap;
    gap: 10px 12px;
  }
  .site-footer {
    margin-top: 64px;
    padding-top: 48px;
  }
  .site-footer__cols {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .site-footer__bar {
    margin-top: 32px;
  }
}