/* Poppins und Karla werden selbst ausgeliefert (docs/gestaltung.md §3): die
   Content-Security-Policy lässt keine fremde Herkunft zu, und ohne die echten
   Schnitte fällt das Kalenderplakat auf System-Sans zurück. Beide stehen unter
   der SIL Open Font License, siehe schriften/OFL.txt. Karla liegt als
   veränderliche Schrift vor, Poppins in den benutzten Stärken. Die
   Unicode-Bereiche sind die von Google Fonts ausgelieferten Teilmengen — der
   erweiterte Schnitt wird nur geholt, wenn ein Zeichen daraus vorkommt. */

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/static/schriften/poppins-300-latin.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: Poppins;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/static/schriften/poppins-300-latin-ext.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: Poppins;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/schriften/poppins-400-latin.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: Poppins;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/schriften/poppins-400-latin-ext.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: Poppins;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/schriften/poppins-500-latin.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: Poppins;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/schriften/poppins-500-latin-ext.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: Poppins;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/schriften/poppins-600-latin.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: Poppins;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/schriften/poppins-600-latin-ext.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: Poppins;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/schriften/poppins-700-latin.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: Poppins;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/schriften/poppins-700-latin-ext.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: Karla;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/schriften/karla-var-latin.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: Karla;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/static/schriften/karla-var-latin-ext.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;
}

/* ---------------------------------------------------------------------------
   Ein Aushang am schwarzen Brett, kein Verwaltungsprogramm: heller Papiergrund,
   dünne Linien statt Kästen, eine einzige kräftige Farbe. Verbindlich ist
   docs/gestaltung.md; wo die schweigt, gilt das abgenommene Mockup
   (.superpowers/sdd/2026-09-02-carpool-stufe1/kalender-mockup.html).
   --------------------------------------------------------------------------- */

:root {
  /* Grund und Schrift */
  --creme:       #f2ece3;
  --papier:      #fbf7f0;
  --kohle:       #3d3d3a;
  --kohle-weich: #5a5a55;
  --linie:       #dd8175;

  /* Akzent — sparsam: Handlung, aktueller Tag, Fokus */
  --terracotta:  #d2574a;

  /* Zustände */
  --frei:     #87a06d;
  --anfrage:  #cf7a35;
  --verplant: #c8483c;

  /* Ziffern im Raster */
  --zahl-vergangen: #bcb3a6;
  --zahl-zukunft:   #3d3d3a;
  --zahl-heute:     #d2574a;
  --zahl-fremd:     #dcd4c8;

  /* Masse */
  --spalte:     720px;
  --zell-hoehe: 116px;
  --bahn:       6px;
}

/* Kopfband, Navigation und Fußzeile stehen ausserhalb von <main> und müssen
   trotzdem auf derselben Spalte sitzen wie der Inhalt. Die Ansicht weist ihre
   Breite nur einmal aus — an .inhalt.breit —, alles andere liest sie von hier. */
body:has(.inhalt.breit) { --spalte: 1140px; }

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* Die Ansicht ist mit viewport-fit=cover ausgeliefert, damit der Papiergrund
     bis in die Kerbe reicht. Dann muss der Inhalt die Einbuchtungen aber selbst
     freihalten — sonst liegt die Fußzeile unter der Home-Anzeige und im
     Querformat verschwindet die linke Spalte hinter der Kerbe. */
  padding: 44px max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: var(--creme);
  color: var(--kohle);
  font-family: Karla, system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--kohle);
  text-decoration: underline;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

/* ---------- Kopfband und Navigation ---------- */

.kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 14px 20px;
  background: var(--kohle);
  color: var(--creme);
}

.kopf .marke {
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(19px, 3vw, 26px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--creme);
  text-decoration: none;
}

.abmelden {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.abmelden .wer {
  font-size: 13px;
  color: rgba(242, 236, 227, 0.85);
}

/* Umrissknopf auf dunklem Grund: derselbe Nebenknopf, nur in der Gegenfarbe —
   Terracotta trüge hier keine Bedeutung. */
.abmelden button {
  padding: 4px 12px;
  background: transparent;
  color: var(--creme);
  border-color: rgba(242, 236, 227, 0.6);
}

.abmelden button:hover {
  background: var(--creme);
  color: var(--kohle);
  border-color: var(--creme);
}

/* Mobile first: die Leiste scrollt waagerecht, statt umzubrechen oder Einträge
   zu verstecken — auf einem schmalen Telefon bleiben alle Ziele erreichbar,
   ohne Javascript und ohne Aufklappmenü. */
.navigation {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 10px 20px;
  border-bottom: 1px solid var(--linie);
  -webkit-overflow-scrolling: touch;
}

.navigation a {
  flex: 0 0 auto;
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kohle-weich);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}

.navigation a:hover { color: var(--kohle); }
.navigation a[aria-current="page"] {
  color: var(--kohle);
  border-bottom-color: var(--terracotta);
}

/* ---------- Inhalt, Überschriften, Fließtext ---------- */

.inhalt {
  max-width: var(--spalte);
  margin: 26px auto 0;
}

h1 {
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 3.4vw, 27px);
  letter-spacing: 0.02em;
  margin: 0 0 10px;
}

h2 {
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  margin: 26px 0 10px;
}

p { margin: 0 0 10px; }

.erklaerung {
  font-size: 14px;
  color: var(--kohle-weich);
  margin: 0 0 10px;
}

.fahrzeug-verweise {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 0 0 26px;
}

.beleg-foto {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--linie);
  margin: 0 0 26px;
}

/* ---------- Hinweis ---------- */

.hinweis {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--kohle-weich);
  padding: 14px;
  margin: 0 0 26px;
}

/* Terracotta trägt die Warnung, die Mitteilung bleibt bei der weichen Kante. */
.hinweis.warnung { border-left-color: var(--terracotta); }

.warnungen {
  list-style: none;
  display: grid;
  gap: 4px;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--terracotta);
  padding: 14px;
  margin: 0 0 26px;
}

/* ---------- Knöpfe ---------- */

/* Hauptknopf: höchstens einer je Ansicht. Alles, was daneben steht, trägt
   .knopf-neben. */
button,
.knopf-haupt {
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 10px 20px;
  border: 1px solid var(--terracotta);
  background: var(--terracotta);
  color: var(--creme);
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.knopf-haupt { display: inline-block; }

/* Nebenknopf — genau der Blätterknopf des Kalenders, deshalb dieselbe Regel
   statt einer zweiten Fassung unter neuem Namen. */
.knopf-neben,
.blaettern a,
.detail-kopf button {
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  background: transparent;
  color: var(--kohle);
  border: 1px solid var(--linie);
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.knopf-neben:hover,
.blaettern a:hover,
.detail-kopf button:hover {
  background: var(--terracotta);
  color: var(--creme);
  border-color: var(--terracotta);
}

/* ---------- Formular ---------- */

.formular {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--papier);
  border: 1px solid var(--linie);
  padding: 20px;
  margin: 0 0 26px;
}

.formular button,
.formular .knopf-neben {
  align-self: flex-start;
}

.formular label,
legend {
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kohle-weich);
}

/* Ein Label, das seine Auswahl selbst enthält, beschriftet kein Feld, sondern
   eine Option — es bleibt Fließtext und lesbar. */
.formular label:has(input) {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--kohle);
}

input,
select,
textarea {
  font: inherit;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--linie);
  background: var(--creme);
  color: var(--kohle);
}

textarea { min-height: 88px; }

/* Ankreuzfelder tragen weder Rahmen noch Innenabstand. Die Systemfarbe wäre
   sonst Blau — eine zweite Akzentfarbe; Kohle hält die Auswahl einfarbig,
   ohne Terracotta an einer Stelle zu verbrauchen, die keine Handlung ist. */
input[type="checkbox"],
input[type="radio"] {
  flex: none;
  width: auto;
  padding: 0;
  border: none;
  background: none;
  accent-color: var(--kohle);
}

fieldset {
  display: grid;
  gap: 6px;
  border: 1px solid var(--linie);
  padding: 10px 14px;
  margin: 0;
}

/* Ein Formular ohne Feld ist keine abgesetzte Fläche, sondern nur eine
   Handlung — es trägt seinen Knopf und sonst nichts. */
.inline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.inline + .inline { margin-left: 6px; }

/* ---------- Listen als Zeilen ---------- */

.fahrzeug-liste,
.mitglieder-liste,
.vorschlaege-liste,
.beleg-liste,
.ausnahmen-liste,
.zugriffs-liste,
.kosten-art-liste,
.kosten-traeger-liste,
.kosten-km-liste,
.kosten-einzelposten-liste,
.vorschlag-liste {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
}

/* Spalten nach Inhalt, jede darf schrumpfen und umbrechen — sonst schiebt eine
   lange Nebenangabe die Zeile über den Rand hinaus. */
.fahrzeug-liste > li,
.mitglieder-liste > li,
.vorschlaege-liste > li,
.beleg-liste > li,
.ausnahmen-liste > li,
.zugriffs-liste > li,
.kosten-art-liste > li,
.kosten-traeger-liste > li,
.kosten-km-liste > li,
.kosten-einzelposten-liste > li,
.vorschlag-liste > li {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, max-content);
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(221, 129, 117, 0.35);
  font-variant-numeric: tabular-nums;
}

.fahrzeug-liste > li:last-child,
.mitglieder-liste > li:last-child,
.vorschlaege-liste > li:last-child,
.beleg-liste > li:last-child,
.ausnahmen-liste > li:last-child,
.zugriffs-liste > li:last-child,
.kosten-art-liste > li:last-child,
.kosten-traeger-liste > li:last-child,
.kosten-km-liste > li:last-child,
.kosten-einzelposten-liste > li:last-child,
.vorschlag-liste > li:last-child {
  border-bottom: none;
}

/* Nebenangaben in der kleinen Beschriftungsrolle. Der Erkennungsstand ist ein
   ganzer Satz und bleibt Beitext — Versalien mit weitem Buchstabenabstand
   wären über vierzig Zeichen unlesbar. */
.kennzeichen,
.beleg-liste > li > span:not(.erkennung) {
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kohle-weich);
}

.erkennung {
  font-size: 14px;
  color: var(--kohle-weich);
}

/* Der tragende Wert einer Zeile steht in Karla 500, nicht im Fettschnitt des
   Browsers — genutzt werden 400 und 500. */
.vorschlaege-liste > li strong { font-weight: 500; }

/* Der Kilometersatz-Vorschlag. Drei feste Bahnen statt "space-between" der
   übrigen Zeilenlisten: Betrag und Satz stehen sonst je nach Wortlänge an
   anderer Stelle und lassen sich nicht mehr untereinander lesen. */
.vorschlag {
  display: grid;
  gap: 10px;
}

.vorschlag .erklaerung,
.vorschlag-liste {
  margin: 0;
}

.vorschlag-liste > li {
  grid-auto-flow: row;
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  justify-content: stretch;
}

.vorschlag-liste .betrag,
.vorschlag-liste .satz {
  text-align: right;
}

/* Schmales Gerät: die Bezeichnung bricht um, die beiden Zahlenspalten bleiben
   stehen. Fielen auch sie untereinander (wie bei den übrigen Zeilenlisten),
   liesse sich die Aufschlüsselung nicht mehr als Rechnung lesen. */
@media (max-width: 760px) {
  .vorschlag-liste > li { gap: 4px 10px; }
}

/* Die Summenzeile trägt den Vorschlag: Karla 500, wie der tragende Wert jeder
   Zeile — kein Fettdruck, keine zweite Farbe. */
.vorschlag-summe { font-weight: 500; }

/* Mehrere Schaltflächen nebeneinander, auf schmalen Geräten untereinander.
   Ohne align-items zöge die zweite Fläche sich auf die Höhe der ersten. */
.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}

.begruendung {
  list-style: none;
  display: grid;
  gap: 4px;
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: var(--kohle-weich);
}

.datenschutz-liste {
  padding-left: 20px;
  margin: 0 0 26px;
}

/* ---------- Zustandsabzeichen ---------- */

/* Die Probe der Kalenderlegende, nur höher: sie trägt den Zustand als
   Schraffur, das Wort daneben trägt ihn als Wort. Die Farbe steht nie allein. */
.abzeichen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.probe {
  flex: none;
  width: 26px;
  height: 10px;
  background-color: rgba(206, 186, 74, 0.6);
  background-image: repeating-linear-gradient(45deg,
    var(--ton) 0 3px, transparent 3px 6px);
}

.probe.frei     { background-image: none; }
.probe.anfrage  { --ton: var(--anfrage); }
.probe.verplant { --ton: var(--verplant); }

/* ---------- Fußzeile ---------- */

.fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  max-width: var(--spalte);
  margin: 44px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--linie);
}

.fuss a {
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kohle-weich);
  text-decoration: none;
  transition: color 120ms ease;
}

.fuss a:hover { color: var(--kohle); }

/* ---------------------------------------------------------------------------
   Belegungskalender (Wochenliste, Monatsraster, Detailansicht, Legende)

   Übernommen aus dem vom Kunden abgenommenen Mockup
   (.superpowers/sdd/2026-09-02-carpool-stufe1/kalender-mockup.html). Dort stand
   das CSS im Dokument; hier steht es, weil die Content-Security-Policy kein
   'unsafe-inline' für style-src erlaubt. Die Schriftfamilien sind wie im Mockup
   benannt; geladen werden sie aus /static/schriften (siehe oben), nicht von
   Google.
   --------------------------------------------------------------------------- */

/* ---------- Wochenliste ---------- */

.kalender-scroll { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
.kalender-woche { display: flex; gap: 14px; width: max-content; }

.kalender-tag {
  flex: 0 0 168px;
  background: var(--papier);
  border: 1px solid var(--linie);
  padding: 14px;
}

.kalender-tag h2 { margin: 0 0 4px; }

/* Eigene und fremde Fahrt unterscheidet die Schriftstärke, nicht die Farbe:
   die Zustandsfarben sind für Zustände reserviert. */
.kalender-buchung {
  padding: 10px 0;
  border-bottom: 1px solid rgba(221, 129, 117, 0.35);
  font-size: 14px;
}
.kalender-buchung:last-child { border-bottom: none; }
.kalender-buchung.eigene { font-weight: 500; }
.kalender-buchung .zeit {
  display: block;
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--kohle-weich);
  font-variant-numeric: tabular-nums;
}

/* ---------- Kopf des Plakats ---------- */

.titelblock { text-align: center; margin-bottom: 26px; }
.titelblock .band {
  display: inline-block; background: var(--kohle); color: var(--creme);
  font-family: Poppins, system-ui, sans-serif; font-weight: 700;
  font-size: clamp(26px, 4.4vw, 42px); letter-spacing: 0.14em;
  text-transform: uppercase; padding: 10px 34px 12px; margin: 0;
}
.titelblock .ort {
  display: block; margin-top: 12px;
  font-family: Poppins, sans-serif; font-weight: 500;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--kohle-weich);
}

.steuer {
  display: flex; flex-wrap: wrap; gap: 14px 24px;
  align-items: center; justify-content: space-between; margin-bottom: 20px;
}
.blaettern { display: flex; gap: 6px; }
.blaettern a {
  width: 32px; height: 32px; padding: 0;
  font-size: 15px; line-height: 1;
  display: grid; place-items: center;
}

.filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filter .aufschrift {
  font-family: Poppins, sans-serif; font-weight: 500;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--kohle-weich); margin-right: 6px;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border: 1px solid transparent;
  background: transparent; color: #a49c90; cursor: pointer;
  font: inherit; font-size: 13.5px; opacity: 0.55;
  transition: color 120ms ease, border-color 120ms ease, opacity 120ms ease;
}
.chip .rang {
  font-family: Poppins, sans-serif; font-weight: 600; font-size: 10px;
  width: 15px; height: 15px; display: grid; place-items: center;
  border: 1px solid currentColor;
}
.chip[aria-pressed="true"] { color: var(--kohle); border-color: var(--linie); opacity: 1; }

/* ---------- Raster ---------- */

.kalender { border: 1px solid var(--linie); border-bottom: none; }

.wochentage {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--linie);
}
.wochentage span {
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--kohle); text-align: center; padding: 11px 4px;
}

.woche { position: relative; }

/* Volle Kacheln liegen ganz unten, dann die Bahnen, das Gitter überlagert alles. */
.fuellungen {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(7, 1fr);
  z-index: 0; pointer-events: none;
}
.fuellung.voll { background: var(--terracotta); }

.bahnen {
  position: absolute; left: 0; right: 0; bottom: 1px;
  height: var(--stapel, 66%);
  display: flex; flex-direction: column; gap: 0;
  z-index: 1; pointer-events: none;
}
.bahn { position: relative; flex: 1 1 0; min-height: 0; z-index: 0; }

/* Das Band liegt als eigene Ebene über der Schraffur, damit die Beschriftung
   auch auf belegten Zeiten lesbar bleibt. */
.band-huelle {
  position: absolute; left: 0; right: 0; z-index: 2;
  overflow: hidden; container-type: size; container-name: bahn; pointer-events: none;
}

/* Endlosband aus echtem Text, damit die feine Schnittstärke wirklich greift.
   Der Abstand ist an die Schriftgröße gekoppelt und damit überall gleich. */
.band {
  display: flex; align-items: center; gap: 6.5em;
  height: 100%; white-space: nowrap; padding-left: 0.6em;
  font-family: Poppins, Helvetica, Arial, sans-serif;
  font-weight: 300; font-size: 58cqh; letter-spacing: 0.02em;
  color: rgba(48, 48, 45, 0.68);
}

/* Die Schrift des Bandes misst sich an der Bahnhöhe. Auf dem Handy sind die
   Kacheln halb so hoch, und bei fünf gewählten Fahrzeugen bleiben je Bahn
   zwölf Pixel — das Band stünde dann in sieben Pixeln und wäre nicht mehr zu
   lesen, sondern nur noch Schmutz auf der Fläche. Unterhalb einer lesbaren
   Höhe tragen Farbe und Schraffur die Bahn allein; wer weniger Fahrzeuge
   wählt, bekommt die Namen zurück. */
@container bahn (max-height: 15px) {
  .band { display: none; }
}
.band .posten { display: inline-flex; align-items: center; gap: 0.45em; }

/* Die 45°-Schraffur trägt den Zustand. Jede Zustandsfläche spannt den ganzen
   Bahnenblock und wird nur zugeschnitten — dadurch haben alle Schraffuren
   denselben Ursprung und laufen über Balkengrenzen hinweg nahtlos durch. */
.zustand {
  position: absolute; inset: 0; z-index: 1; pointer-events: auto;
  background-image: repeating-linear-gradient(45deg,
    var(--ton) 0 3px, transparent 3px 6px);
}
.zustand.frei     { --ton: var(--frei); }
.zustand.anfrage  { --ton: var(--anfrage); }
.zustand.verplant { --ton: var(--verplant); }

.zellen {
  display: grid; grid-template-columns: repeat(7, 1fr);
  position: relative; z-index: 2;
}

/* Die Kachel ist ein echter Knopf; sie muss deshalb den Grund des Hauptknopfes
   ablegen und ihre Ränder selbst setzen. */
.zelle {
  position: relative;
  width: 100%;
  height: var(--zell-hoehe);
  container-type: size;
  border: none;
  border-right: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  display: grid; place-items: center;
  padding: 20px 0;
  background: transparent; color: inherit;
  font: inherit; letter-spacing: normal;
  text-decoration: none;
  cursor: pointer;
}
.zelle:last-child { border-right: none; }
.zelle:focus-visible { outline-offset: -3px; }

/* Die Ziffer füllt die Kachel, oben und unten bleibt Luft. */
.zelle .zahl {
  font-family: Poppins, system-ui, sans-serif;
  font-size: min(134cqh, 46cqw); line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--zahl-zukunft);
}
.zelle.vergangen .zahl { color: var(--zahl-vergangen); }
.zelle.heute     .zahl { color: var(--zahl-heute); }
.zelle.fremd     .zahl { color: var(--zahl-fremd); }

/* Auf der roten Kachel muss die Ziffer die Farbe wechseln, sonst verschwindet sie. */
.zelle.aufVoll .zahl        { color: var(--kohle); }
.zelle.aufVoll.heute .zahl  { color: var(--creme); }

.zelle .marke {
  position: absolute; left: 0; right: 0; bottom: 4px;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  text-align: center; color: var(--kohle);
}

/* Je mehr Bahnen, desto dünner die Ziffer. Der Grundwert trägt alles jenseits
   der benannten Stufen — sonst würden die Ziffern ab sieben Fahrzeugen wieder
   fett. */
.kalender .zahl { font-weight: 300; }
.kalender[data-bahnen="0"] .zahl,
.kalender[data-bahnen="1"] .zahl,
.kalender[data-bahnen="2"] .zahl { font-weight: 700; }
.kalender[data-bahnen="3"] .zahl,
.kalender[data-bahnen="4"] .zahl { font-weight: 500; }
.kalender[data-bahnen="5"] .zahl,
.kalender[data-bahnen="6"] .zahl { font-weight: 400; }

/* ---------- Detailansicht: waagerecht scrollbar ---------- */

.detail {
  margin-top: 20px; border: 1px solid var(--linie);
  background: var(--papier);
}
.detail[hidden] { display: none; }

.detail-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; padding: 14px; border-bottom: 1px solid var(--linie);
}
.detail-kopf h2 {
  font-family: Poppins, sans-serif; font-weight: 600; font-size: 15px;
  letter-spacing: 0.04em; margin: 0;
}
/* Hier ist der Hinweis eine Zeile im Kopf, keine Sprechblase — die Kastenregel
   von .hinweis wird deshalb zurückgenommen. */
.detail-kopf .hinweis {
  font-size: 12px; color: var(--kohle-weich);
  background: transparent; border: none; padding: 0; margin: 0;
}

.detail-rollen {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}
.detail-tage .tag-kopf { scroll-snap-align: start; }
.detail-spur { width: max-content; min-width: 100%; }

.detail-tage, .detail-stunden {
  display: flex; border-bottom: 1px solid var(--linie);
}
.detail-tage .tag-kopf {
  border-right: 1px solid var(--linie);
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 7px 10px; color: var(--kohle);
}
.detail-tage .tag-kopf.heute { color: var(--terracotta); }
.detail-tage .tag-kopf.aktiv { background: rgba(210, 87, 74, 0.10); }
.detail-stunden .stunde {
  font-family: Poppins, sans-serif; font-weight: 400;
  font-size: 9.5px; color: var(--kohle-weich);
  padding: 4px 0 5px 3px;
  border-right: 1px solid rgba(221,129,117,0.35);
}

/* Die Reihe ist die Bahn aus dem Kalender, nur aufgezogen: beide
   Beschriftungen darin sind wie das Fahrzeugband gesetzt und messen sich
   an der Reihenhöhe. */
.detail-reihe {
  position: relative; height: 34px; container-type: size;
  border-bottom: 1px solid rgba(221,129,117,0.35);
}
.detail-reihe:last-child { border-bottom: none; }
.detail-reihe .grund { position: absolute; inset: 0; }
.detail-reihe .block {
  position: absolute; top: 0; bottom: 0;
  background-image: repeating-linear-gradient(45deg,
    var(--ton) 0 3px, transparent 3px 6px);
}
.detail-reihe .block.anfrage  { --ton: var(--anfrage); }
.detail-reihe .block.verplant { --ton: var(--verplant); }
.detail-reihe .block .zeit {
  position: absolute; left: 8px; right: 8px; top: 50%;
  transform: translateY(-50%);
  font-family: Poppins, Helvetica, Arial, sans-serif;
  font-weight: 300; font-size: 58cqh;
  letter-spacing: 0.02em; color: rgba(48, 48, 45, 0.68);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: right;
}

.detail-reihe .schild {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  font-family: Poppins, Helvetica, Arial, sans-serif;
  font-weight: 300; font-size: 58cqh; letter-spacing: 0.02em;
  color: rgba(48,48,45,0.68); white-space: nowrap; pointer-events: none;
}

/* ---------- Legende ---------- */

.legende {
  display: flex; flex-wrap: wrap; gap: 9px 24px;
  margin-top: 20px; font-size: 13px; color: var(--kohle-weich);
}
.legende .posten { display: inline-flex; align-items: center; gap: 9px; }
.legende .probe { height: var(--bahn); }
.legende .probe.kachel {
  background-color: var(--terracotta); background-image: none;
  width: 18px; height: 14px;
}

@media (max-width: 760px) {
  :root { --zell-hoehe: 62px; --bahn: 4px; }
  .zelle { padding: 6px 0; }
  .detail-reihe { height: 30px; }

  /* Schmales Gerät: die Spalten einer Zeile fallen untereinander. */
  .fahrzeug-liste > li,
  .mitglieder-liste > li,
  .vorschlaege-liste > li,
  .beleg-liste > li,
  .ausnahmen-liste > li,
  .zugriffs-liste > li,
  .kosten-art-liste > li,
  .kosten-traeger-liste > li,
  .kosten-km-liste > li,
  .kosten-einzelposten-liste > li {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
}
/* ---------- Bedienung mit dem Finger ---------- */

/* Ein Zeigegerät ohne Feinauflösung ist ein Finger. Die Anwendung ist für das
   Handy gedacht, und dort scheitert eine 28 Pixel hohe Schaltfläche an der
   Fingerkuppe: die Empfehlung liegt bei 44 Pixeln in beide Richtungen. Das
   Aussehen bleibt gleich — es wächst nur die Fläche, die auf den Druck
   antwortet. */
@media (pointer: coarse) {
  button,
  .knopf-haupt,
  .knopf-neben,
  .blaettern a,
  .detail-kopf button,
  .chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .blaettern a { width: 44px; height: 44px; }

  .navigation a,
  .fuss a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Ein Ankreuzfeld ist selbst zu klein; getroffen wird die ganze Zeile. */
  .formular label:has(input[type="checkbox"]),
  .formular label:has(input[type="radio"]) {
    min-height: 44px;
  }

  /* Safari vergrössert die Seite beim Hineintippen in jedes Feld, dessen
     Schrift unter 16 Pixeln liegt — und zoomt danach nicht von selbst zurück.
     Ein Pixel mehr als der Fließtext kostet nichts und erspart den Sprung. */
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Der Einladungslink, wenn die Mail nicht hinausging: zum Herauskopieren, also
   umbrechend statt abgeschnitten und in einer Schrift, in der sich l, 1 und I
   unterscheiden lassen. */
.einladungslink {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  background: var(--papier);
  border: 1px solid var(--linie);
  padding: 14px;
  margin: 0 0 26px;
  user-select: all;
}