/* Klimpo — Gestaltung.
   Eine Datei, keine Abhaengigkeiten, keine externen Aufrufe.
   Die Schriften liegen unter /assets/fonts/ auf demselben Server:
   Es soll kein Zeichen an ein fremdes Rechenzentrum gehen, wenn eine
   Familie die Seite oeffnet. */

/* ------------------------------------------------------------- Schriften
   Aufgeteilt nach Zeichenbereich, damit ein Browser nur laedt, was er
   wirklich braucht. Die Dateien liegen unter /assets/fonts/ auf demselben
   Server wie die Seite. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/bricolage-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: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/bricolage-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: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/instrument-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: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/instrument-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;
}

/* --------------------------------------------------------------- Farben
   Die Namen sagen, wofuer eine Farbe da ist, nicht wonach sie aussieht.
   Ein Wechsel der Palette ist deshalb dieser eine Block und sonst nichts.

   Flieder und Pflaume statt Petrol: warm, freundlich, und vor allem in
   keiner Bezahl-App zu Hause. Genau das ist der Punkt, denn Klimpo
   verwaltet kein Geld, es fuehrt Buch.

   Gold bleibt und bedeutet genau eine Sache: die Muenze, also die Marke.
   Nie ein Zustand, nie ein Knopf. Sonst sieht es wieder nach Sparkasse aus. */
:root {
  --marke-tief: #33203A;
  --marke: #5C3566;
  --marke-hell: #7E5088;

  --flieder: #C9A6D4;          /* der lebhafte Akzent: Sticker, Bögen, Deko */
  --flieder-flaeche: #F3EAF6;
  --flieder-tief: #9B6FA8;

  --akzent: #E0A64B;           /* die Münze. Identität, nie Status */
  --akzent-tief: #A9721E;      /* dunkel genug für Text auf Papier */
  --akzent-hell: #EFC271;

  --salbei: #7FA98C;
  --salbei-hell: #A8C9B2;      /* der Ring auf dunklem Grund */
  --salbei-flaeche: #EDF4EF;
  --salbei-tief: #3F6B4E;      /* Schrift und Symbole auf salbei-flaeche */

  --papier: #FBF7F5;
  --papier-2: #F4EDF3;
  --weiss: #FFFFFF;
  --linie: #E8DCE7;
  --tinte: #2C1B31;
  --gedaempft: #77687C;
  --gedaempft-hell: #9A8B9E;

  /* Text auf dunklem Pflaumengrund */
  --auf-dunkel-leise: #CBB2D3;
  --auf-dunkel-warn: #F0B9A8;

  --gruen: #4E8C68;
  --gruen-flaeche: #EDF5F0;
  --orange: #C2683A;
  --orange-flaeche: #FBF0E8;
  --rot: #B4372E;
  --rot-flaeche: #FDF1EF;

  --radius: 14px;
  --radius-gross: 18px;
  --schatten: 0 1px 2px rgba(44, 27, 49, .06);
  /* Harter Versatz statt weichem Schein: der Aufkleber-Griff */
  --schatten-kleber: 0 5px 0 rgba(44, 27, 49, .13);

  --anzeige: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --text: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ------------------------------------------------------------ Grundlagen */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--anzeige);
  margin: 0;
  letter-spacing: -0.02em;
  text-wrap: balance;
  font-weight: 800;
}
h1 { font-size: clamp(26px, 5vw, 34px); line-height: 1.15; }
h2 { font-size: clamp(20px, 3.6vw, 24px); line-height: 1.2; }
h3 { font-size: 17px; line-height: 1.3; font-weight: 600; }
p { margin: 0; }

a { color: var(--marke); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--akzent-tief); }

:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 6px;
}

img, svg { max-width: 100%; }

/* Zahlen laufen in Spalten sauber untereinander */
.zahl, .betrag, td.zahl { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Aufbau */
.huelle {
  --rand-huelle: 16px;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 var(--rand-huelle);
}
.huelle-breit { max-width: 1100px; }

.stapel { display: flex; flex-direction: column; gap: 16px; }
.stapel-eng { display: flex; flex-direction: column; gap: 8px; }
.stapel-weit { display: flex; flex-direction: column; gap: 28px; }
.reihe { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.reihe-eng { display: flex; gap: 6px; align-items: center; }
.zwischen { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.wachsen { flex-grow: 1; min-width: 0; }
.rechts { margin-left: auto; }

.raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.raster-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 700px) {
  .raster-2, .raster-3 { grid-template-columns: minmax(0, 1fr); }
}

.abstand-oben { margin-top: 24px; }
.abstand-unten { margin-bottom: 24px; }

/* --------------------------------------------------------------- Kopfzeile */
.kopf {
  background: var(--marke-tief);
  color: var(--papier);
  padding: 14px 0;
}
.kopf a { color: var(--papier); text-decoration: none; }
.kopf .wortmarke {
  font-family: var(--anzeige);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.04em;
}
.kopf-nav { display: flex; gap: 14px; align-items: center; font-size: 14px; }
.kopf-nav a:hover { color: var(--akzent); }

/* Die Seitennavigation steht zwischen Marke und Konto und ist bewusst
   leiser gesetzt als die beiden Handlungen rechts. Sie fuellt den Platz,
   ohne mit "Klasse anlegen" zu konkurrieren. Unter 900 Pixeln faellt sie
   weg: dort steht dieselbe Reihenfolge ohnehin im Seiteninhalt. */
/* Marke und Navigation stehen zusammen links. Verteilt man beide plus
   die Konto-Aktionen ueber die volle Breite, schwebt die Navigation mit
   zwei gleich grossen Loechern in der Mitte. */
.kopf-links { display: flex; align-items: center; gap: 38px; }
.kopf-seiten { display: flex; gap: 24px; align-items: center; font-size: 14px; }
.kopf .kopf-seiten a { color: var(--auf-dunkel-leise); }
.kopf .kopf-seiten a:hover { color: var(--papier); }
@media (max-width: 900px) { .kopf-seiten { display: none; } }

/* Beim Springen soll die Ueberschrift nicht unter der Kopfzeile kleben. */
#ablauf, #tueren, #daten, #kalender { scroll-margin-top: 18px; }

.klassenband {
  background: var(--marke);
  color: var(--auf-dunkel-leise);
  font-size: 13px;
  padding: 8px 0;
}
.klassenband a { color: var(--auf-dunkel-leise); }
/* Der Klassenname ist ein Weg in die Übersicht, sieht aber nicht wie ein
   Knopf aus: Das Band ist ein Schild, kein Bedienelement. Die gepunktete
   Linie ist der einzige Hinweis, und sie wird beim Zeigen deutlicher. */
.klassenband-wechsel {
  text-decoration: none;
  border-bottom: 1px dotted var(--auf-dunkel-leise);
  padding-bottom: 1px;
}
.klassenband-wechsel:hover,
.klassenband-wechsel:focus-visible {
  color: var(--papier);
  border-bottom-color: var(--papier);
}

/* ------------------------------------------------------------------ Karten */
.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 18px 20px;
  box-shadow: var(--schatten);
}
.karte-still { background: var(--papier-2); border-color: transparent; }
.karte-dunkel {
  background: var(--marke);
  border-color: transparent;
  color: var(--papier);
}
.karte-dunkel h1, .karte-dunkel h2, .karte-dunkel h3 { color: var(--papier); }
.karte-dunkel .leise { color: var(--auf-dunkel-leise); }
.karte-eng { padding: 14px 16px; }

/* ------------------------------------------------------------------ Texte */
.leise { color: var(--gedaempft); font-size: 14px; }
.winzig { color: var(--gedaempft-hell); font-size: 12.5px; }
.marke {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gedaempft-hell);
  font-weight: 600;
}
.gross {
  font-family: var(--anzeige);
  font-size: clamp(30px, 8vw, 40px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.mittel { font-family: var(--anzeige); font-size: 21px; font-weight: 700; }

/* ------------------------------------------------------------------ Knoepfe */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--marke);
  color: var(--papier);
  font-family: var(--text);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s ease;
}
.knopf:hover { background: var(--marke-tief); color: var(--papier); }
.knopf:disabled, .knopf[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.knopf-rand {
  background: transparent;
  border-color: var(--marke);
  color: var(--marke);
}
.knopf-rand:hover { background: var(--papier-2); color: var(--marke-tief); }

.knopf-still {
  background: var(--papier-2);
  color: var(--tinte);
}
.knopf-still:hover { background: var(--linie); color: var(--tinte); }

.knopf-gefahr { background: var(--rot); }
.knopf-gefahr:hover { background: #93281F; }

.knopf-klein { min-height: 38px; padding: 8px 14px; font-size: 14px; }
.knopf-breit { width: 100%; }

.knopf-text {
  background: none; border: none; padding: 6px 2px;
  color: var(--marke); font-family: var(--text); font-size: 14px;
  font-weight: 600; text-decoration: underline; cursor: pointer;
}

/* ----------------------------------------------------------------- Formular */
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld > label { font-size: 14px; font-weight: 600; }
.feld .hinweis { font-size: 13px; color: var(--gedaempft); }

input[type="text"], input[type="email"], input[type="number"],
input[type="date"], input[type="password"], input[type="search"],
select, textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--weiss);
  color: var(--tinte);
  font-family: var(--text);
  font-size: 16px; /* nie kleiner: sonst zoomt iOS beim Antippen */
  line-height: 1.4;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--marke); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--rot); }

.feldfehler { color: var(--rot); font-size: 13.5px; }

fieldset { border: none; margin: 0; padding: 0; }
legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 8px; }

.wahl {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border: 1px solid var(--linie);
  border-radius: 12px; background: var(--weiss); cursor: pointer;
}
.wahl input { margin-top: 3px; width: 20px; height: 20px; min-height: 0; flex-shrink: 0; }
.wahl:hover { border-color: var(--marke-hell); }

/* ----------------------------------------------------------------- Listen */
.liste { display: flex; flex-direction: column; gap: 8px; }
.eintrag {
  display: flex; align-items: center; gap: 12px;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 12px 14px;
}
.eintrag-gut { background: var(--gruen-flaeche); border-color: #CFE0D6; }
.eintrag-warn { background: var(--orange-flaeche); border-color: #EBD3C1; }

.trennlinie { height: 1px; background: var(--linie); border: 0; margin: 0; }

/* ----------------------------------------------------------------- Zustand */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  padding: 4px 9px; border-radius: 999px;
  background: var(--papier-2); color: var(--gedaempft);
  white-space: nowrap;
}
.chip-gut { background: var(--gruen-flaeche); color: var(--gruen); }
.chip-warn { background: var(--orange-flaeche); color: var(--orange); }
.chip-schlecht { background: var(--rot-flaeche); color: var(--rot); }
.chip-gold { background: #F6EEDA; color: var(--akzent-tief); }


/* --------------------------------------------------------------- Meldungen */
.meldung {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 15px; border-radius: var(--radius); font-size: 14.5px;
  border: 1px solid transparent;
}
.meldung-gut { background: var(--gruen-flaeche); border-color: #CFE0D6; color: #1F5C3E; }
.meldung-hinweis { background: var(--papier-2); border-color: var(--linie); color: var(--tinte); }
.meldung-fehler { background: var(--rot-flaeche); border-color: #E3B7B1; color: #8E2C24; }

/* ------------------------------------------------------------------ Leere */
.leer {
  text-align: center; padding: 40px 20px;
  background: var(--papier-2); border-radius: var(--radius-gross);
}
.leer h3 { margin-bottom: 6px; }

/* ----------------------------------------------------------------- Tabelle */
.tabellenrahmen { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius-gross); background: var(--weiss); }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--linie); vertical-align: top; }
thead th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gedaempft-hell); font-weight: 600; }
tbody tr:last-child td { border-bottom: none; }
td.rechtsbuendig, th.rechtsbuendig { text-align: right; }

/* --------------------------------------------------------------- Fusszeile */
.fuss {
  margin-top: 56px;
  padding: 28px 0 40px;
  border-top: 1px solid var(--linie);
  font-size: 14px;
  color: var(--gedaempft);
}
.fuss a { color: var(--gedaempft); }
.fuss-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* Die Seiten der Mappe im Fuss. Sie stehen ueber den Rechtslinks und in
   eigener Zeile, damit der Fuss nicht zu einer einzigen Linkwolke wird,
   in der Impressum und Kassenwart gleich aussehen. */
.fuss-mappe {
  display: flex; flex-wrap: wrap; gap: 7px 16px; align-items: baseline;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--linie);
}
.fuss-mappe .marke { flex: 0 0 100%; margin: 0 0 2px; }
.fuss-mappe a { font-size: 13.5px; }

/* ------------------------------------------------------------ Hinweisleiste */
.cookieleiste {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40;
  background: var(--marke-tief); color: var(--papier);
  border-radius: 999px; padding: 9px 10px 9px 20px;
  box-shadow: 0 8px 24px rgba(44, 27, 49, .26);
  display: flex; gap: 12px; align-items: center; flex-wrap: nowrap;
  max-width: 660px; margin: 0 auto;
  font-size: 13.5px; line-height: 1.4;
}
.cookieleiste a { color: var(--akzent); }
.cookieleiste .knopf { min-height: 36px; padding: 7px 16px; font-size: 14px; white-space: nowrap; background: var(--akzent); color: var(--marke-tief); }
.cookieleiste .knopf:hover { background: var(--akzent-hell); color: var(--marke-tief); }

/* Der Held stand frueher auf dunklem Grund. Jetzt steht er auf Papier,
   damit die Sticker und die farbigen Wolken wirken koennen. Die alten
   Regeln sind entfernt statt ueberschrieben: zwei Regeln fuer dieselbe
   Sache sind der Anfang davon, dass eine davon irgendwann vergessen wird. */

.schmerzliste { counter-reset: schmerz; display: flex; flex-direction: column; gap: 2px; }
.schmerz {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px;
  padding: 18px 0; border-top: 1px solid var(--linie); align-items: start;
}
.schmerz::before {
  counter-increment: schmerz;
  content: counter(schmerz, decimal-leading-zero);
  font-family: var(--anzeige); font-size: 15px; font-weight: 800; color: var(--akzent-tief);
  padding-top: 2px;
}
.schmerz h3 { margin-bottom: 4px; }

/* Die frueher hier stehende Flex-Regel fuer .haken ist entfallen: sie
   kollidierte mit der Liste weiter unten und zerriss Saetze mit <strong>. */
.haken svg { flex-shrink: 0; margin-top: 3px; }

/* ------------------------------------------------------------------ Sperre */
.sperre-seite {
  min-height: 100svh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--marke-tief);
}
.sperre-karte {
  background: var(--papier); border-radius: 24px; padding: 34px 30px;
  width: 100%; max-width: 420px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

/* ------------------------------------------------------------- Bewegung aus */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------------------------ Drucken */
@media print {
  /* „nicht-drucken" ist fuer Bedienelemente, die auf Papier nichts verloren
     haben: eine Auswahl, die man auf einem Ausdruck nicht mehr treffen kann.
     Die Auskunft, wofuer sie stand, gehoert dann an die Stelle, die sie
     betrifft, und nicht hierher. */
  .kopf, .fuss, .cookieleiste, .knopf, .klassenband, .nicht-drucken { display: none !important; }
  body { background: #fff; }
  .karte { break-inside: avoid; box-shadow: none; }
}

/* --------------------------------------------------------- Nur fuer Screenreader */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprungmarke {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--akzent); color: var(--marke-tief);
  padding: 10px 16px; border-radius: 0 0 10px 0; font-weight: 600;
}
.sprungmarke:focus { left: 0; }

/* ======================================================================
   Auflockerung
   Sticker, handgezeichnete Bögen und schiefe Kleinigkeiten. Alles davon
   ist Dekoration: Wer es nicht sieht, verliert keine Information. Deshalb
   tragen die Elemente aria-hidden und stehen nie allein für eine Aussage.
   ====================================================================== */

/* -------------------------------------------------------------- Sticker */
.kleber {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--flieder);
  color: var(--marke-tief);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  box-shadow: var(--schatten-kleber);
  border: 2px solid var(--weiss);
  white-space: nowrap;
}
.kleber-akzent { background: var(--akzent); }
.kleber-salbei { background: var(--salbei); color: #1F3527; }
.kleber-papier { background: var(--weiss); color: var(--marke); }
.kleber-tief   { background: var(--marke); color: var(--papier); border-color: var(--marke-tief); }

/* Aus der Reihe: bewusst leicht verdreht, damit es aufgeklebt wirkt.
   Immer nur ein paar Grad. Mehr sieht nach Versehen aus. */
.schief-a { transform: rotate(-2.5deg); }
.schief-b { transform: rotate(1.8deg); }
.schief-c { transform: rotate(-1.2deg); }
.schief-d { transform: rotate(3deg); }

.kleber-frei { position: absolute; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .schief-a, .schief-b, .schief-c, .schief-d { transform: none; }
}

/* --------------------------------------------------------------- Bögen */
.bogen { display: block; overflow: visible; pointer-events: none; }
.bogen path, .bogen line { fill: none; stroke: var(--flieder-tief); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; }
.bogen-akzent path, .bogen-akzent line { stroke: var(--akzent-tief); }

.bogen-halter { position: relative; }
.bogen-frei { position: absolute; z-index: 1; }

/* ------------------------------------------------------------- Startseite */
.held {
  position: relative;
  background: var(--papier);
  color: var(--tinte);
  padding: 46px 0 34px;
  overflow: hidden;
}

/* Das Erklaervideo unter dem Kopf der Startseite. Quer auf breiten
   Bildschirmen, hochkant auf Handys. Die verborgene Fassung laedt nie,
   weil beide mit preload="none" stehen. */
.erklaervideo video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  background: var(--marke-tief);
  box-shadow: 0 30px 60px -34px rgba(44, 27, 49, .45);
}
.video-rahmen { position: relative; }
.erklaervideo .video-quer { max-width: 1040px; margin-inline: auto; }
.erklaervideo .video-hoch { display: none; }
@media (max-width: 720px) {
  .erklaervideo .video-quer { display: none; }
  /* Hochkant nie hoeher als der Bildschirm: Sonst muesste man scrollen,
     um die Steuerleiste unter dem Video zu erreichen. */
  .erklaervideo .video-hoch {
    display: block;
    width: min(100%, calc(82vh * 9 / 16));
    margin-inline: auto;
  }
}
/* Abspielknopf ueber dem Vorschaubild. color ausdruecklich gesetzt: Ein
   button ohne Textfarbe faerbt sich auf iOS systemblau. */
.video-start {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--akzent);
  color: var(--marke-tief);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* drop-shadow statt box-shadow: Ueber dem Video zeichnete Chrome auf
     Touchgeraeten den box-shadow als schwarzen Bogen. */
  filter: drop-shadow(0 8px 12px rgba(44, 27, 49, .35));
  transition: transform .15s ease;
}
.video-start svg { margin-left: 4px; }
.video-start:hover { transform: scale(1.06); }
.video-start:focus-visible { outline: 4px solid var(--marke); outline-offset: 4px; }
.video-start[hidden] { display: none; }
/* Der eigene Mittelknopf von Chrome (Android) und Safari (iOS) laege sonst
   halb verdeckt unter unserem. Die Steuerleiste bleibt. */
.video-rahmen video::-webkit-media-controls-overlay-play-button { display: none; }
.video-rahmen video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
/* Auf dem Handy kleiner, sonst nimmt der Knopf ein Drittel der Videobreite
   ein. 72 Pixel sind fuer einen Daumen immer noch reichlich. Steht hinter
   der Grundregel, sonst gewinnt diese. */
@media (max-width: 720px) {
  .video-start { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
}
.held-wolke {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .55;
  z-index: 0;
  pointer-events: none;
}
/* Die Wolken sind ausgenommen: sonst überschreibt diese Regel ihr
   position:absolute, sie nehmen Platz im Fluss ein und schieben den
   gesamten Inhalt nach unten. Gleiche Spezifität, spätere Regel gewinnt. */
.held > *:not(.held-wolke) { position: relative; z-index: 1; }

.wortmarke-gross {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--anzeige);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--marke-tief);
}

.held-satz {
  font-family: var(--anzeige);
  font-size: clamp(30px, 6.2vw, 46px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
  max-width: 18ch;
}
.held-satz em { font-style: normal; color: var(--marke); }

/* --------------------------------------------------------- Die drei Türen */
.tueren { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 780px) { .tueren { grid-template-columns: minmax(0, 1fr); } }

.tuer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 22px 20px 20px;
  text-decoration: none;
  color: inherit;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tuer:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 rgba(44, 27, 49, .08);
  border-color: var(--flieder);
  color: inherit;
}
.tuer-kopf { display: flex; align-items: center; gap: 10px; }
.tuer h3 { font-family: var(--anzeige); font-size: 19px; font-weight: 800; }
.tuer .fuehrt { margin-top: auto; padding-top: 8px; color: var(--marke); font-weight: 600; font-size: 14.5px; }

/* ------------------------------------------------------------- Schritte */
.schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
@media (max-width: 820px) { .schritte { grid-template-columns: minmax(0, 1fr); gap: 22px; } }

.schritt { position: relative; display: flex; flex-direction: column; gap: 10px; }
.schritt-zahl {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--marke); color: var(--papier);
  font-family: var(--anzeige); font-weight: 800; font-size: 18px;
}

/* ---------------------------------------------------------------- Bänder */
.streifen { background: var(--marke-tief); color: var(--papier); padding: 40px 0; }
.streifen h2, .streifen h3 { color: var(--papier); }
.streifen .leise { color: var(--auf-dunkel-leise); }
.streifen-flieder { background: var(--flieder-flaeche); color: var(--tinte); }
.streifen-flieder h2 { color: var(--tinte); }

/* --------------------------------------------------------------- Zitate */
.zettel {
  position: relative;
  background: var(--weiss);
  border-radius: 4px 14px 6px 12px;
  padding: 18px 20px;
  box-shadow: var(--schatten-kleber);
  border: 1px solid var(--linie);
}
.zettel-flieder { background: var(--flieder-flaeche); border-color: transparent; }
.zettel-akzent  { background: #FBF1DF; border-color: transparent; }

/* ------------------------------------------------------------ Hakenliste
   Das Häkchen ist ein SVG als data-URI: keine Bibliothek, kein Zeichensatz,
   und es sieht auf jedem Betriebssystem gleich aus. Dingbats wie ✓ tun das
   nicht. Die CSP erlaubt data: fuer Bilder, deshalb geht das ohne Ausnahme. */
ul.haken { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
/* Der Haken wird absolut gesetzt, der Text bleibt Fliesstext.
   Mit display:grid oder flex wird jedes <strong> im Satz zu einem eigenen
   Element und der Satz zerfaellt in Bruchstuecke. Derselbe Fehler steckte
   schon einmal in den Schritten der Handy-Anleitung. */
ul.haken li {
  position: relative;
  padding-left: 30px;
  font-size: 14.5px;
  color: var(--gedaempft);
  line-height: 1.5;
}
ul.haken li::before {
  content: "";
  position: absolute; left: 0; top: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background-color: var(--salbei-flaeche);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5 L8.5 13.5 L14.5 6.5' fill='none' stroke='%234E8C68' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

/* Auf dunklem Grund braucht das Häkchen mehr Kontrast */
.streifen ul.haken li, .karte-dunkel ul.haken li { color: var(--auf-dunkel-leise); }
.streifen ul.haken li::before, .karte-dunkel ul.haken li::before {
  background-color: rgba(255, 255, 255, .12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5 L8.5 13.5 L14.5 6.5' fill='none' stroke='%23C9A6D4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Auf schmalen Anzeigen sind freistehende Bögen und Sticker mehr Störung
   als Schmuck: dort verschwinden sie. */
@media (max-width: 820px) {
  .bogen-frei { display: none; }
}
@media (max-width: 560px) {
  .kleber-frei { position: static; display: inline-flex; margin-top: 12px; }
}

/* Auf schmalen Anzeigen darf der Hinweis umbrechen, sonst wird die Pille
   breiter als das Fenster. */
@media (max-width: 620px) {
  .cookieleiste {
    flex-wrap: wrap;
    border-radius: var(--radius-gross);
    padding: 14px 16px;
    justify-content: flex-start;
  }
}

/* ---------------------------------------------------- Handzeichnung, Feinbau
   Die zweite Linie liegt leicht versetzt unter der ersten, duenner und
   blasser. Zusammen mit dem Rauschfilter im SVG ergibt das den Eindruck
   wechselnden Stiftdrucks. */
.bogen-zweitlinie path { stroke-width: 1.3; opacity: .42; }

/* Die Schrittpfeile gehoeren IN die Luecke zwischen den Spalten und auf die
   Hoehe der Ziffer. Vorher lagen sie auf den Ueberschriften. */
.schritte { gap: 64px; }
.schritt > .bogen-frei { right: -52px; top: 9px; left: auto; }
@media (max-width: 820px) { .schritte { gap: 22px; } }

/* Der Kringel gehoert HINTER den Knopf, nicht darauf. */
.knopf-umkringelt { position: relative; display: inline-flex; }
.knopf-umkringelt > .bogen {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0; pointer-events: none;
  /* Der Kringel waechst mit dem Knopf: er ist immer eine Handbreit groesser
     als das, was er einkringelt. Mit einer festen Breite lag er bei jeder
     anderen Beschriftung entweder hinter dem Knopf oder weit daneben.
     max-width, weil die allgemeine Regel svg { max-width: 100% } ihn sonst
     auf die Knopfbreite staucht. */
  width: calc(100% + 56px);
  height: calc(100% + 40px);
  max-width: none;
}
.knopf-umkringelt > .knopf { position: relative; z-index: 1; }

/* Ein freistehender Sticker in einem Flex-Behaelter wird sonst auf volle
   Hoehe gestreckt und wird zum weissen Klotz. */
.kleber-frei { align-self: flex-start; }

/* -------------------------------------------------------------- Logo-Block
   Die Marke im Held: gross genug, dass man sie als Logo liest, nicht als
   Kleingedrucktes in der Kopfzeile. */
/* Die Wortmarke im Held. Sie ist selbst schon Schriftzug und Claim,
   deshalb steht hier nur noch die Groesse. */
.logo-block { display: flex; margin-bottom: 4px; }
.logo-block svg { max-width: 100%; height: auto; }
@media (max-width: 560px) {
  .logo-block svg { width: 230px; }
}

/* Die Boegen dürfen kräftiger sein, sonst gehen sie neben Ueberschriften
   in Bricolage 800 unter. */
.bogen path, .bogen line { stroke-width: 3; }
.bogen-zweitlinie path { stroke-width: 1.5; opacity: .3; }

/* ================================================================ Kalender
   Termine als Karten mit Datumsplaettchen. Kein Monatsraster: eine Klasse
   hat im Jahr zwanzig Termine, und dreissig leere Kaesten zeigen vor allem,
   wie wenig los ist. */
.termine { display: flex; flex-direction: column; gap: 10px; }
.termine-still { opacity: .62; }

.termin {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.termin-ab .termin-tag { filter: grayscale(1); }
.termin-ab strong { text-decoration: line-through; }

/* Das Plaettchen ist das, was man zuerst sieht. Es traegt die Farbe der Art,
   damit sich Ausflug und Elternabend auf einen Blick unterscheiden. Farbe
   allein trennt sie nicht: der Name steht als Chip daneben. */
.termin-tag {
  flex: 0 0 auto; width: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 0; border-radius: 14px;
  line-height: 1.05;
}
.termin-zahl { font-family: var(--anzeige); font-size: 22px; font-weight: 800; }
.termin-monat { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }

.termin-ausflug   { background: var(--flieder); color: var(--marke-tief); }
.termin-fahrt     { background: var(--marke); color: var(--papier); }
.termin-fest      { background: var(--akzent); color: var(--marke-tief); }
.termin-eltern    { background: var(--salbei-flaeche); color: var(--marke-tief); }
.termin-schulfrei { background: var(--papier-2); color: var(--gedaempft); }
.termin-sonstiges { background: var(--tinte); color: var(--papier); }

.chip-termin-ausflug   { background: var(--flieder-flaeche); color: var(--marke); }
.chip-termin-fahrt     { background: var(--flieder-flaeche); color: var(--marke); }
.chip-termin-fest      { background: #FBEFD8; color: #8A5D12; }
.chip-termin-eltern    { background: var(--salbei-flaeche); color: var(--salbei-tief); }
.chip-termin-schulfrei { background: var(--papier-2); color: var(--gedaempft); }
.chip-termin-sonstiges { background: var(--salbei-flaeche); color: var(--salbei-tief); }

/* Der Geldhinweis am Termin fuehrt zur Umlage. Er sieht bewusst nicht aus
   wie ein Knopf: er ist eine Angabe, die man antippen kann. */
.termin-geld {
  align-self: flex-start;
  display: inline-flex; align-items: baseline; gap: 6px;
  background: var(--flieder-flaeche);
  color: var(--marke); text-decoration: none;
  font-weight: 600; font-size: 14px;
  padding: 4px 10px; border-radius: 999px;
}
.termin-geld:hover { background: var(--flieder); color: var(--marke-tief); }

/* Die Art als Kachelreihe statt Klappliste: sechs Werte sieht man schneller,
   als man ein Auswahlfeld oeffnet. */
.artwahl { display: flex; flex-wrap: wrap; gap: 8px; }
.artkachel {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--linie); border-radius: 999px;
  padding: 7px 14px 7px 11px;
  font-size: 14px; cursor: pointer;
  /* Hintergrund UND Schriftfarbe stehen hier ausdruecklich. Die Kachel trug
     frueher die Farbklasse der Art, und deren Schriftfarbe ist fuer das
     dunkle Datumsplaettchen gedacht: auf weissem Grund war "Klassenfahrt"
     blass und "Sonstiges" gar nicht zu lesen. Die Farbe der Art sitzt jetzt
     im Punkt daneben, wo sie nichts ueberschreiben kann. */
  background: var(--weiss);
  color: var(--tinte);
}
.artkachel input { position: absolute; opacity: 0; width: 0; height: 0; }
.artsymbol { font-size: 16px; line-height: 1; }
/* Der Farbpunkt verbindet die Kachel mit dem Datumsplaettchen im Kalender.
   Er erbt dessen Hintergrund. Wo das Plaettchen blass ist, weil dort dunkle
   Schrift daraufsteht, nimmt der Punkt stattdessen dessen Schriftfarbe: ein
   elf Pixel grosser Punkt in Pastell ist kein Punkt, sondern ein Loch. */
.artpunkt {
  width: 11px; height: 11px; border-radius: 50%;
  flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.artpunkt.termin-eltern    { background: var(--salbei); }
.artpunkt.termin-schulfrei { background: var(--gedaempft); }
.artkachel:has(input:checked) {
  border-color: var(--marke); box-shadow: inset 0 0 0 1px var(--marke); font-weight: 600;
}
/* Fuer Browser ohne :has bleibt die Tastaturbedienung sichtbar. */
.artkachel:focus-within { outline: 2px solid var(--marke); outline-offset: 2px; }

@media (max-width: 560px) {
  .termin { padding: 12px; gap: 10px; }
  .termin-tag { width: 46px; }
}

/* ============================================================= Vorschläge
   Kleine Knoepfe unter einem Textfeld, die es fuellen. Sie ersetzen keine
   Eingabe, sie sparen das Tippen: was drinsteht, laesst sich danach
   weiterschreiben. Deshalb sehen sie bewusst nicht aus wie eine Auswahl,
   sondern wie ein Vorschlag. */
.vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vorschlag {
  font: inherit; font-size: 13px; line-height: 1;
  color: var(--gedaempft);
  background: var(--papier-2);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}
.vorschlag:hover { background: var(--flieder-flaeche); color: var(--marke); }
.vorschlag:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }

/* ============================================================== Aufs Handy
   Eine Anleitung, die man einmal braucht. Deshalb <details>: auf der
   Startseite offen, im angemeldeten Bereich als eine Zeile, die man
   aufklappen kann. Ein Dauerhinweis wird zu Tapete. */
.handy {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 14px 18px;
}
.handy > summary {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; list-style: none;
  font-size: 15px;
}
.handy > summary::-webkit-details-marker { display: none; }
/* Eigener Pfeil, damit er in beiden Zustaenden gleich aussieht. */
.handy > summary::after {
  content: ""; margin-left: auto; flex: 0 0 auto;
  width: 9px; height: 9px;
  border-right: 2px solid var(--gedaempft);
  border-bottom: 2px solid var(--gedaempft);
  transform: rotate(45deg); transition: transform .15s;
}
.handy[open] > summary::after { transform: rotate(-135deg); }
.handy > summary:focus-visible { outline: 2px solid var(--marke); outline-offset: 3px; border-radius: 6px; }
.handy-symbol { display: inline-flex; flex: 0 0 auto; }

.handy-spalten {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  margin-top: 16px;
}
.handy-weg { display: flex; gap: 14px; align-items: flex-start; }
.handy-weg .telefon { flex: 0 0 auto; }

.handy-schritte {
  margin: 6px 0 0; padding: 0; list-style: none;
  counter-reset: schritt;
  font-size: 14px; color: var(--gedaempft);
}
/* Die Ziffer wird absolut gesetzt, der Text bleibt normaler Fliesstext.
   Weder Flex noch Grid taugen hier: beide machen aus jedem Textabschnitt ein
   eigenes Element, und der Satz "Unten auf <strong>Teilen</strong> tippen"
   zerfaellt dann in drei Stuecke mit Luecken oder gar Zeilenumbruechen. */
.handy-schritte li {
  counter-increment: schritt;
  position: relative;
  padding: 3px 0 3px 27px;
  line-height: 1.45;
}
.handy-schritte li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: 4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--flieder-flaeche); color: var(--marke);
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.handy-schritte strong { color: var(--tinte); font-weight: 600; }
.handy-fuss { margin: 14px 0 0; }

@media (max-width: 620px) {
  .handy-spalten { grid-template-columns: 1fr; gap: 18px; }
  .handy { padding: 12px 14px; }
  /* Der Zusatz in der Zeile darf sie nicht umbrechen lassen. */
  .handy > summary .leise { display: none; }
}

/* ================================================================= V2
   Der angemeldete Bereich sah aus wie ein Formularsatz, während die
   Startseite spielte. Das ist die falsche Reihenfolge: mit der Startseite
   verbringt man zwei Minuten, mit dem Rest ein Schuljahr.

   Die Mittel sind dieselben wie draußen: Farbflächen statt weißer Kästen,
   große Zahlen, Aufkleber leicht außer Reihe, weiche Schatten.

   Eine Grenze bleibt: wo ein Betrag steht, den jemand schuldet, wird nicht
   gespielt. Kein Gesicht, keine Schräglage, keine Farbe, die feiert. */

/* ------------------------------------------------------- Die große Zahl */
.zahlkachel {
  position: relative;
  border-radius: var(--radius-gross);
  padding: 20px 22px 18px;
  /* Kein overflow:hidden. Es wuerde den Aufkleber abschneiden, der oben aus
     der Kachel herausragen soll. Deshalb ist der Zierkreis ein Verlauf im
     Hintergrund und keine Form, die beschnitten werden muesste. */
}
.zahlkachel .marke { margin: 0 0 2px; }
.zahlkachel .betrag {
  font-family: var(--anzeige);
  font-size: clamp(30px, 7vw, 42px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.zahlkachel .fussnote { margin: 6px 0 0; }

/* Ein blasser Kreis in der rechten oberen Ecke. Er bricht das Rechteck auf,
   ohne dass irgendwo ein Bild geladen werden muss. Als Verlauf statt als
   Form, damit er nicht beschnitten werden muss. */
.zahlkachel-flieder {
  color: var(--marke-tief);
  background: radial-gradient(circle 92px at calc(100% - 14px) 8px,
              rgba(92, 53, 102, .07), rgba(92, 53, 102, 0) 100%),
              var(--flieder-flaeche);
}
.zahlkachel-dunkel {
  color: var(--papier);
  background: radial-gradient(circle 92px at calc(100% - 14px) 8px,
              rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 100%),
              var(--marke-tief);
}
.zahlkachel-dunkel .marke, .zahlkachel-dunkel .fussnote { color: var(--auf-dunkel-leise); }
.zahlkachel-salbei {
  color: var(--marke-tief);
  background: radial-gradient(circle 92px at calc(100% - 14px) 8px,
              rgba(63, 107, 78, .09), rgba(63, 107, 78, 0) 100%),
              var(--salbei-flaeche);
}

/* --------------------------------------------- Begrüßung mit dem Zeichen */
.gruss { display: flex; align-items: center; gap: 14px; margin-bottom: 2px; }
.gruss h1 { margin: 0; font-size: clamp(21px, 4.4vw, 27px); }
.gruss .leise { margin: 2px 0 0; }

/* ------------------------------------------------- Aufkleber außer Reihe
   Sie hängen an einer Karte und ragen oben heraus. Deshalb braucht die
   Karte position:relative und oben etwas mehr Luft. */
.karte-mit-kleber { position: relative; padding-top: 26px; }
.kleber-ecke {
  position: absolute; top: -11px; right: 18px;
  z-index: 1;
}

/* --------------------------------------------------------- Fortschritt
   Wie viel einer Umlage schon eingesammelt ist. Die Zahl daneben bleibt
   führend: der Balken ist die Illustration, nicht die Aussage. */
.balken {
  height: 10px; border-radius: 999px;
  background: var(--papier-2);
  overflow: hidden;
}
.balken > span {
  display: block; height: 100%;
  border-radius: 999px;
  background: var(--salbei);
  transition: width .4s;
}
/* Ueberfaellig und noch nicht voll. Es gab dafuer zwei Klassennamen, einen
   alten und einen neuen. Zwei Namen fuer dieselbe Sache heisst, dass eine
   Stelle irgendwann den falschen benutzt. Es bleibt dieser. */
.balken-warn > span { background: var(--orange); }

/* ------------------------------------------------------- Leere Zustände
   Ein leerer Bildschirm ist die häufigste Ansicht am Anfang. Er soll nicht
   nach Fehler aussehen, sondern nach Anfang. */
.leerbild {
  text-align: center;
  padding: 30px 22px;
  border-radius: var(--radius-gross);
  background: var(--weiss);
  border: 1px dashed var(--linie);
}
.leerbild .klimpo-zeichen { margin-bottom: 10px; }
.leerbild h3 { margin: 0 0 4px; font-family: var(--anzeige); font-size: 18px; font-weight: 800; }
.leerbild p { margin: 0 auto; max-width: 40ch; }

/* ------------------------------------------------------------ Kachelreihe
   Für die Aktionen unten auf der Kassenwartseite: nicht sechs gleiche
   Knöpfe, sondern Kacheln mit Symbol und einer Zeile Erklärung. */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.kachel {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 13px 15px;
  text-decoration: none;
  color: inherit;
}
.kachel:hover { border-color: var(--flieder); background: var(--flieder-flaeche); }
.kachel-text { display: flex; flex-direction: column; gap: 1px; }
.kachel-text strong { font-size: 15px; }
.kachel-text span { font-size: 13px; color: var(--gedaempft); line-height: 1.35; }
.kachel-symbol { flex: 0 0 auto; margin-top: 1px; }

/* --------------------------------------------------------- Klassenkarten
   Für die meisten steht hier genau eine Karte. Dann darf sie etwas
   hermachen, statt eine Zeile in einer Liste zu sein. */
.klassenkarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.klassenkarte { display: block; text-decoration: none; }
.klassenkarte:hover { filter: brightness(.98); }
.klassenkarte .betrag { margin: 0; }
.klassenkarte-neu {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-align: center;
  border: 1px dashed var(--linie); border-radius: var(--radius-gross);
  padding: 24px 18px; color: var(--gedaempft);
  background: none;
}
.klassenkarte-neu:hover { border-color: var(--marke); color: var(--marke); background: var(--flieder-flaeche); }
.klassenkarte-neu .plus {
  font-family: var(--anzeige); font-size: 26px; font-weight: 800; line-height: 1;
  margin-bottom: 4px;
}
.klassenkarte-neu strong { font-size: 15px; color: inherit; }

/* ------------------------------------------------------- Zahlung melden
   Zugeklappt, weil die meisten Eltern hier nur nachsehen wollen, was offen
   ist. Wer gezahlt hat, klappt auf. */
.melden > summary {
  display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
  cursor: pointer; list-style: none;
}
.melden > summary::-webkit-details-marker { display: none; }
.melden > summary::after {
  content: ""; margin-left: auto; flex: 0 0 auto;
  width: 9px; height: 9px;
  border-right: 2px solid var(--gedaempft);
  border-bottom: 2px solid var(--gedaempft);
  transform: rotate(45deg); transition: transform .15s;
}
.melden[open] > summary::after { transform: rotate(-135deg); }
.melden > summary:focus-visible { outline: 2px solid var(--marke); outline-offset: 3px; border-radius: 6px; }

/* ---------------------------------------------------- Eigene Vorschlagsliste
   Eine <datalist> wäre weniger Arbeit, sieht aber in jedem Browser anders aus:
   Chrome zeichnet eine dunkle Liste, die mit nichts auf der Seite zu tun hat.
   Diese hier gehört zur Seite. */
.mit-vorschlaegen { position: relative; }
.vorschlagsliste {
  position: absolute; z-index: 30;
  top: calc(100% + 6px); left: 0; right: 0;
  margin: 0; padding: 6px;
  list-style: none;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(44, 27, 49, .14);
  max-height: 300px; overflow-y: auto;
}
.vorschlagsliste[hidden] { display: none; }
.vorschlagsliste li {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
}
.vorschlagsliste li strong { font-size: 15px; font-weight: 600; }
.vorschlagsliste li span { font-size: 13px; color: var(--gedaempft); }
.vorschlagsliste li:hover,
.vorschlagsliste li.aktiv { background: var(--flieder-flaeche); }
.vorschlagsliste li.aktiv strong { color: var(--marke); }

/* ============================================================== Ratgeber
   Acht lange Seiten. Was sie lesbar hält: eine Antwort ganz oben, eine
   klebende Leiste zum Springen, viel Luft, und Kästen, die Arten von Inhalt
   unterscheidbar machen. */

.mappe-kopf { display: flex; flex-direction: column; gap: 14px; }
.mappe-kopf h1 { font-size: clamp(25px, 5vw, 38px); margin: 0 0 6px; line-height: 1.12; }
.mappe-kopf .leise { font-size: 17px; max-width: 58ch; margin: 0; }

.brotkrumen { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--gedaempft); }
.brotkrumen a { color: var(--gedaempft); }
.brotkrumen a:hover { color: var(--marke); }

/* Die Antwort zuerst. */
.kurzfassung {
  position: relative;
  background: var(--salbei-flaeche);
  border-radius: var(--radius-gross);
  padding: 26px 24px 22px;
}
.kurzfassung .marke { margin: 0 0 10px; }
.kurzfassung .haken { font-size: 16px; }
.kurzfassung .haken li { padding: 5px 0 5px 28px; }

/* Klebende Sprungmarken. Auf schmalen Geräten waagerecht scrollbar statt
   dreizeilig: eine Navigation, die den halben Bildschirm nimmt, hilft nicht. */
.sprungmarken {
  position: sticky; top: 0; z-index: 20;
  background: rgba(251, 247, 245, .93);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
  margin: 0 calc(-1 * var(--rand-huelle, 20px));
  padding: 0 var(--rand-huelle, 20px);
}
.sprungmarken-innen {
  display: flex; gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 9px 0;
}
.sprungmarken-innen::-webkit-scrollbar { display: none; }
.sprungmarken a {
  flex: 0 0 auto;
  padding: 6px 12px; border-radius: 999px;
  font-size: 14px; color: var(--gedaempft); text-decoration: none;
  white-space: nowrap;
}
.sprungmarken a:hover { background: var(--flieder-flaeche); color: var(--marke); }

/* Abschnitte springen nicht unter die klebende Leiste. */
.mappe h2[id], .mappe section[id] { scroll-margin-top: 62px; }
.mappe h2 { font-size: clamp(21px, 3.6vw, 27px); margin: 6px 0 2px; }
.mappe h3 { font-family: var(--anzeige); font-size: 18px; font-weight: 800; margin: 4px 0 0; }
.mappe p { font-size: 16px; line-height: 1.62; max-width: 68ch; }
.mappe .karte p:last-child { margin-bottom: 0; }

/* Merksatz: der eine Satz, den man behält. */
.merksatz {
  border-left: 4px solid var(--akzent);
  background: var(--papier-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 18px;
  font-family: var(--anzeige); font-weight: 600; font-size: 17px;
  color: var(--marke-tief);
  max-width: 62ch;
}
.warnung { border-left-color: var(--orange); background: var(--orange-flaeche); }

/* Vergleichstabellen. Auf dem Handy scrollen sie, statt zu zerbrechen. */
.tabellenrahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mappe table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.mappe th, .mappe td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.mappe th { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--gedaempft); font-weight: 700; }
.mappe tbody tr:hover { background: var(--papier-2); }
.mappe td strong { font-family: var(--anzeige); }

/* Häufige Fragen */
.fragen { display: flex; flex-direction: column; gap: 8px; }
.frage {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.frage > summary {
  display: flex; align-items: flex-start; gap: 12px;
  cursor: pointer; list-style: none;
  font-family: var(--anzeige); font-weight: 700; font-size: 16px;
}
.frage > summary::-webkit-details-marker { display: none; }
.frage > summary::after {
  content: ""; margin-left: auto; flex: 0 0 auto; margin-top: 5px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--gedaempft); border-bottom: 2px solid var(--gedaempft);
  transform: rotate(45deg); transition: transform .15s;
}
.frage[open] > summary::after { transform: rotate(-135deg); }
.frage-antwort { margin-top: 10px; color: var(--gedaempft); font-size: 15px; line-height: 1.6; }
.frage-antwort p { margin: 0 0 8px; font-size: 15px; }
.frage-antwort p:last-child { margin-bottom: 0; }

/* Download eines Musters */
.downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.download {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 16px;
  text-decoration: none; color: inherit;
}
.download:hover { border-color: var(--marke); background: var(--flieder-flaeche); }
.download-art {
  flex: 0 0 auto;
  font-family: var(--anzeige); font-size: 11px; font-weight: 800; letter-spacing: .06em;
  padding: 5px 8px; border-radius: 7px;
  background: var(--marke); color: var(--papier);
}
.download-xlsx { background: #1D6F42; }
.download-docx { background: #2B579A; }
.download-pdf  { background: #B4362F; }
.download-text { display: flex; flex-direction: column; gap: 2px; }
.download-text strong { font-size: 15px; }
.download-text span { font-size: 13px; color: var(--gedaempft); }

/* Quellen */
.quellen { margin: 0; padding-left: 18px; font-size: 14px; color: var(--gedaempft); }
.quellen li { padding: 3px 0; }

/* Ablauf als Zeitstrahl */
.zeitstrahl { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.zeitstrahl li { position: relative; padding: 0 0 22px 34px; }
.zeitstrahl li::before {
  content: ""; position: absolute; left: 8px; top: 6px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--flieder); box-shadow: 0 0 0 3px var(--papier);
}
.zeitstrahl li::after {
  content: ""; position: absolute; left: 13px; top: 17px; bottom: 0;
  width: 1px; background: var(--linie);
}
.zeitstrahl li:last-child { padding-bottom: 0; }
.zeitstrahl li:last-child::after { display: none; }
.zeitstrahl strong { display: block; font-family: var(--anzeige); font-size: 16px; }
.zeitstrahl .wann { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--marke); font-weight: 700; }

@media (max-width: 620px) {
  .kurzfassung { padding: 22px 18px 18px; }
  .mappe h2[id], .mappe section[id] { scroll-margin-top: 56px; }
}

/* Ergebnisfeld der interaktiven Helfer */
.ergebnis {
  background: var(--flieder-flaeche);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.ergebnis .marke { margin: 0 0 4px; }
.ergebnis-titel {
  font-family: var(--anzeige); font-size: 19px; font-weight: 800;
  color: var(--marke-tief); margin: 0 0 6px;
}
.ergebnis-text { margin: 0; font-size: 15px; }

/* Liste ohne Haken, für das, was dagegen spricht */
.ohne-haken { margin: 0; padding-left: 18px; font-size: 15px; color: var(--gedaempft); }
.ohne-haken li { padding: 3px 0; }

/* ------------------------------------------------------------ Checkliste
   Abhakbare Liste auf den Seiten der Mappe. Der Stand liegt im Browser des
   Lesers, nicht bei uns: eine Uebergabe-Checkliste ist niemandes Geschaeft
   ausser dem des Kassenwarts.

   Anders als bei .haken sitzt hier ein echtes Kaestchen davor, deshalb
   duerfen input und label zwei Flex-Kinder sein. Bei .haken war genau das
   der Fehler: dort zerlegte ein <strong> den Satz in Bruchstuecke. */
.checkliste { list-style: none; margin: 0; padding: 0; }
.checkliste li {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 9px 10px;
  border-radius: 10px;
  transition: background .15s;
}
.checkliste li:hover { background: var(--papier-2); }
.checkliste input[type="checkbox"] {
  flex: 0 0 auto;
  width: 19px; height: 19px; margin: 1px 0 0;
  accent-color: var(--salbei);
  cursor: pointer;
}
.checkliste label { cursor: pointer; font-size: 15px; line-height: 1.5; }
.checkliste input:checked + label { color: var(--gedaempft); text-decoration: line-through; }
.checkliste input:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }

.checkliste-kopf { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.checkliste-stand {
  margin: 0; font-family: var(--anzeige); font-size: 17px; font-weight: 800;
  color: var(--marke-tief);
}

@media print {
  .checkliste li:hover { background: none; }
  .checkliste input:checked + label { text-decoration: none; }
  .sprungmarken, .checkliste-kopf button { display: none; }
}

/* ------------------------------------------------------ Schuljahr-Fahrplan
   Zwoelf Monate als Reiter, dahinter je ein Blatt. Auf schmalen Geraeten
   scrollt die Leiste waagerecht, statt auf drei Zeilen umzubrechen: eine
   Monatsleiste, die den halben Bildschirm einnimmt, hilft niemandem. */
.monatsleiste {
  display: flex; gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.monat {
  flex: 1 0 auto;
  min-width: 58px;
  border: 1px solid var(--linie);
  background: var(--weiss);
  border-radius: 10px;
  padding: 9px 4px;
  font-family: var(--anzeige); font-size: 14px; font-weight: 700;
  color: var(--gedaempft);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.monat:hover { border-color: var(--flieder); color: var(--marke); }
.monat.ist-aktiv {
  background: var(--marke); border-color: var(--marke); color: var(--papier);
}
.monat:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }

.fahrplan-blatt { display: flex; flex-direction: column; gap: 10px; }
.fahrplan-blatt h3 { margin: 0; font-family: var(--anzeige); font-size: 20px; }
.fahrplan-blatt .marke { margin: 0; }
.fahrplan-blatt .merksatz { margin-bottom: 0; }

/* ----------------------------------------------------- Entscheidungsbaum
   Vier Fragen, sieben Ergebnisse, immer nur eines sichtbar. Ohne Javascript
   stehen alle Knoten untereinander: die Seite bleibt lesbar, und die
   Suchmaschine sieht den vollstaendigen Text. */
.baum-knoten { display: flex; flex-direction: column; gap: 12px; }
.baum-knoten h3 { margin: 0; font-family: var(--anzeige); font-size: 20px; }
.baum-wege { display: flex; flex-direction: column; gap: 8px; }
.baum-weg {
  text-align: left;
  border: 1px solid var(--linie);
  background: var(--weiss);
  border-radius: 12px;
  padding: 13px 44px 13px 15px;
  font: inherit; font-size: 15px;
  color: var(--tinte);
  cursor: pointer;
  position: relative;
  transition: border-color .15s, background .15s;
}
.baum-weg::after {
  content: "›";
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 20px; line-height: 1; color: var(--flieder);
}
.baum-weg:hover { border-color: var(--marke); background: var(--flieder-flaeche); }
.baum-weg:hover::after { color: var(--marke); }
.baum-weg:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }
.baum-grund p { margin: 0 0 10px; font-size: 15px; }
.baum-grund p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- Textbausteine
   Ein Satz, ein Knopf. Der Knopf steht rechts daneben und nicht darunter,
   damit die Liste nicht doppelt so lang wird wie ihr Inhalt. */
.baustein {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  padding: 11px 0;
  border-top: 1px solid var(--linie);
}
.baustein:first-of-type { border-top: 0; padding-top: 2px; }
.baustein p { margin: 0; font-size: 15px; }
.baustein button { flex: 0 0 auto; }

@media (max-width: 560px) {
  .baustein { flex-direction: column; gap: 8px; }
  .baustein button { align-self: flex-start; }
}

/* ------------------------------------------------------------- Schaubilder
   Erklaerende Zeichnungen als SVG, nicht als Bilddatei. Die Beschriftung
   traegt hier die Aussage: ein erzeugtes Bild setzt Text unzuverlaessig,
   ein PNG wird auf guten Bildschirmen unscharf, und vorlesen laesst sich
   beides nicht. So bleibt der Text scharf, waehlbar und zugaenglich.

   Alle Farben kommen aus den Marken-Variablen. Das Schaubild sieht damit
   aus wie die Seite und nicht wie ein eingekauftes Diagramm. */
.schaubild { margin: 0; }
.schaubild svg {
  display: block; width: 100%; height: auto;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 8px 4px;
}
.schaubild figcaption {
  margin-top: 10px;
  font-size: 14px; color: var(--gedaempft); text-align: center;
}

/* Flaechen */
.sb-feld { fill: var(--papier-2); stroke: var(--linie); stroke-width: 1; }
.sb-feld-salbei  { fill: var(--salbei-flaeche); stroke: none; }
.sb-feld-flieder { fill: var(--flieder-flaeche); stroke: none; }
.sb-feld-still   { fill: var(--papier-2); stroke: none; }

/* Figuren und Formen darin */
.sb-figuren { fill: var(--salbei-tief); }
.sb-figuren-marke { fill: var(--marke); }
.sb-figuren-still { fill: var(--gedaempft); }

/* Verbindungen */
.sb-pfeil { fill: none; stroke: var(--marke); stroke-width: 2; }
.sb-pfeil-warn { stroke: var(--orange); }
.sb-spitze { fill: var(--marke); }
.sb-spitze-warn { fill: var(--orange); }
.sb-klammer { fill: none; stroke: var(--flieder); stroke-width: 2; }
.sb-klammer-warn { stroke: var(--orange); opacity: .55; }
.sb-trenner { stroke: var(--linie); stroke-width: 1; stroke-dasharray: 4 5; }

/* Schrift im Schaubild. Groessen bewusst gross: ein Schaubild, dessen
   Beschriftung man auf dem Handy nicht lesen kann, ist Dekoration. */
.schaubild text { font-family: var(--anzeige); }
.sb-band  { font-size: 13px; font-weight: 800; letter-spacing: .06em;
            text-transform: uppercase; fill: var(--marke); }
.sb-band-warn { fill: var(--orange); }
.sb-name  { font-size: 15px; font-weight: 800; fill: var(--tinte); }
.sb-kante { font-size: 12.5px; font-weight: 700; fill: var(--marke); }
.sb-kante-warn { fill: var(--orange); }
.sb-satz  { font-size: 14.5px; font-weight: 800; fill: var(--tinte); }
.sb-satz-warn { fill: var(--orange); }
.sb-satz-leise { font-size: 13.5px; font-weight: 400; fill: var(--gedaempft); }
.sb-fuss  { font-size: 13.5px; font-weight: 700; fill: var(--marke); }

/* Ergaenzungen fuer die Schaubilder zwei und drei */
.sb-feld-warn { fill: var(--orange-flaeche); stroke: none; }
.sb-rechen { font-size: 26px; font-weight: 800; fill: var(--flieder); }
.sb-zahl { font-size: 13.5px; font-weight: 700; fill: var(--marke-tief); }
.sb-zahl-gross { font-size: 18px; font-weight: 800; }
.sb-zahl-leise { font-weight: 400; fill: var(--gedaempft); }
.sb-band-gruen { fill: var(--salbei-tief); }
.sb-blatt { fill: var(--papier-2); stroke: var(--linie); stroke-width: 1; }
.sb-blatt-gruen { fill: var(--salbei-flaeche); stroke: none; }
.sb-pfeil-still { stroke: var(--flieder); }

/* ------------------------------------------------------------ Mappen-Kopf
   Eine Flaeche statt einer Textwand. Acht Seiten der Mappe, die alle mit
   derselben grauen Ueberschrift beginnen, sehen aus wie acht Ausdrucke
   desselben Dokuments.

   Das grosse Symbol rechts ist Zierde: es traegt keine Aussage, wird
   angeschnitten und ist fuer Vorlesehilfen ausgeblendet. */
.mappe-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-gross);
  background:
    radial-gradient(120% 150% at 88% 15%, var(--flieder-flaeche) 0%, transparent 62%),
    var(--papier-2);
  padding: 26px 28px;
}
.mappe-hero-text { position: relative; z-index: 1; max-width: 46rem; }
.mappe-hero .gruss { align-items: flex-start; }
.mappe-hero-zier {
  position: absolute; right: -34px; bottom: -52px;
  opacity: .13;
  transform: rotate(-9deg);
  pointer-events: none;
}
.mappe-hero-zier svg { display: block; }

@media (max-width: 720px) {
  .mappe-hero { padding: 20px 18px; }
  .mappe-hero-zier { right: -46px; bottom: -60px; opacity: .09; }
}

/* --------------------------------------------------------- Ablaufplaner
   Die Bausteine liegen in einer .checkliste. Das Label bleibt ein Block mit
   Fliesstext: Name und Dauer stehen in einer Zeile, der erklaerende Satz
   darunter. Kein Flex im Label, sonst wird jedes <strong> zu einem eigenen
   Element und die Zeile zerfaellt. Diesen Fehler gab es hier schon zweimal. */
.baustein-zeit {
  margin-left: 8px;
  font-size: 12.5px; font-weight: 700;
  color: var(--marke);
  background: var(--flieder-flaeche);
  padding: 2px 7px; border-radius: 999px;
  white-space: nowrap;
}
.baustein-satz {
  display: block;
  margin-top: 2px;
  font-size: 13.5px; color: var(--gedaempft); line-height: 1.45;
}

.tagesordnung { margin: 10px 0 8px; padding-left: 0; list-style: none; counter-reset: topunkt; }
.tagesordnung li {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed var(--linie);
  font-size: 15px;
}
.tagesordnung li:last-child { border-bottom: 0; }
.tagesordnung .to-zeit {
  flex: 0 0 auto; min-width: 52px;
  font-family: var(--anzeige); font-weight: 800; color: var(--marke-tief);
}
.tagesordnung .to-name { flex: 1 1 auto; }
.tagesordnung .to-dauer { flex: 0 0 auto; font-size: 13px; color: var(--gedaempft); }

/* Ein Feld, das nur zum Kopieren da ist: unsichtbar, aber markierbar.
   display:none waere einfacher und macht select() unbrauchbar. */
.ausserhalb {
  position: absolute; left: -9999px; top: 0;
  width: 1px; height: 1px; opacity: 0;
}

/* Ein Ergebnisfeld, das eine Grenze reisst. Nicht rot: es ist kein Fehler,
   sondern eine Auskunft, die man vorher haben will. */
.ergebnis-warn { background: #FBF0DE; }
.ergebnis-warn .ergebnis-titel { color: #8A5A12; }

/* --------------------------------------------------------- Titelbilder
   Breite Flaeche, weiche Ecken, kein Rahmen. Das Bild traegt die Stimmung,
   nicht die Information: alles, was verstanden werden muss, steht als Text
   oder als SVG daneben. */
.seitenbild {
  margin: 4px 0 2px;
  border-radius: var(--radius-gross);
  overflow: hidden;
  background: var(--papier-2);
}
.seitenbild img { display: block; width: 100%; height: auto; }

@media (max-width: 620px) {
  /* Auf schmalen Geraeten ist ein 16:9-Streifen ueber die volle Breite zu
     flach, um etwas zu erkennen. Deshalb wird er hoeher beschnitten, und
     zwar am linken Rand: dort steht bei allen Motiven das Hauptmotiv. */
  .seitenbild img { aspect-ratio: 3 / 2; object-fit: cover; object-position: left center; }
}

/* ------------------------------------------------------ Bereiche der Mappe
   Jeder Bereich hat eine Farbe. Sie faerbt das Symbol, den Aufkleber und
   die Kachel beim Ueberfahren. Gesetzt wird sie einmal als Variable auf dem
   Abschnitt, damit die Kacheln darunter sie erben, statt sie zwanzigmal
   einzeln mitgeteilt zu bekommen. */
.bereich {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  padding: 26px 20px 24px;
  border-radius: var(--radius-gross);
  background: var(--bereich-grund);
}
.bereich-flieder { --bereich-flaeche: var(--flieder-flaeche); --bereich-tief: var(--marke);
                   --bereich-grund: #F7F1F8; --bereich-rand: var(--flieder); }
.bereich-salbei  { --bereich-flaeche: var(--salbei-flaeche);  --bereich-tief: var(--salbei-tief);
                   --bereich-grund: #F0F6F2; --bereich-rand: var(--salbei); }
.bereich-akzent  { --bereich-flaeche: #FBF0DE;                --bereich-tief: #8A5A12;
                   --bereich-grund: #FDF6EA; --bereich-rand: var(--akzent); }
/* Deutlich tiefer als bereich-flieder. Beide lagen anfangs bei einem fast
   gleichen Hellviolett und waren beim Scrollen nicht zu unterscheiden. */
.bereich-tief    { --bereich-flaeche: #E4D6EA;                --bereich-tief: var(--marke-tief);
                   --bereich-grund: #EDE3F1; --bereich-rand: var(--marke); }

.bereich-kopf { display: flex; align-items: center; gap: 12px; }
.bereich-titel { flex: 1 1 auto; min-width: 0; }
.bereich-titel h2 { margin: 0; font-size: clamp(19px, 2.6vw, 23px); }
.bereich-titel p { margin: 0; font-size: 15px; }

/* Der Aufkleber sitzt auf der oberen Kante des Abschnitts, halb darueber.
   Im Textfluss brach er in die naechste Zeile um und wurde angeschnitten:
   ein Aufkleber, der umbricht, sieht nach Fehler aus und nicht nach Absicht. */
.bereich-kleber {
  position: absolute; top: -11px; right: 22px;
  z-index: 2;
  white-space: nowrap;
}

@media (max-width: 620px) {
  /* Auf schmalen Geraeten ist rechts oben kein Platz mehr neben der
     Ueberschrift. Dann laeuft der Aufkleber wieder mit. */
  .bereich-kleber { position: static; align-self: flex-start; order: -1; }
  .bereich-kopf { flex-wrap: wrap; }
}

/* Der Aufkleber in der Bereichsfarbe. .kleber-tief gibt es schon, die
   uebrigen drei sind hier, weil sie nur die Mappe braucht. */
.kleber-flieder { background: var(--flieder); color: var(--marke-tief); }

/* Die Kacheln erben die Farbe des Bereichs. */
.bereich .kachel:hover { border-color: var(--bereich-rand); background: var(--weiss); }
.bereich .kachel-symbol { margin-top: 0; }

/* Ein Knopf fuer das, was sich nicht zurueckholen laesst. Rot, aber nicht
   schreiend: Die Sicherung liegt im Abtippen des Namens, nicht in der Farbe. */
.knopf-warn {
  background: var(--rot);
  color: var(--weiss);
  border-color: var(--rot);
}
.knopf-warn:hover { filter: brightness(0.92); }

/* ------------------------------------------------------------ Uebungsklasse
   Das Band steht unter dem Klassenband auf jeder Seite einer Uebungsklasse.
   Warmes Akzentgelb statt Warnrot: es ist kein Fehler, sondern eine
   Einladung zum Ausprobieren. Es muss nur unuebersehbar sein, damit niemand
   echte Daten in eine Klasse tippt, die nach 14 Tagen verschwindet. */
.uebungsband {
  background: var(--akzent-hell);
  color: var(--marke-tief);
  border-bottom: 1px solid var(--akzent);
  padding: 10px 0;
  font-size: 14px;
}
.uebungsband-innen {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px 18px;
}
.uebungsband-innen p { margin: 0; }
.uebungsband-frist { white-space: nowrap; }
.uebungsband-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.uebungsband-knoepfe form { margin: 0; }

.uebung-einstieg {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 14px 20px;
  border-style: dashed; border-color: var(--akzent);
  background: #FDF6EA;
}
.uebung-einstieg .stapel-eng { flex: 1 1 320px; }
.uebung-einstieg form { margin: 0; }

/* ---------------------------------------------------------- Erste Schritte
   Die Liste oben auf der Kassenwartseite, bis die Klasse laeuft. Der
   naechste offene Schritt hebt sich ab, erledigte treten zurueck. */
.schrittliste { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.schrittliste li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius);
  background: var(--papier);
}
.schritt-marke {
  flex: 0 0 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--anzeige); font-weight: 800; font-size: 15px;
  background: var(--weiss); border: 1px solid var(--linie); color: var(--marke);
}
.schritt-jetzt { background: #FDF6EA; outline: 2px solid var(--akzent); }
.schritt-jetzt .schritt-marke { background: var(--akzent); border-color: var(--akzent); color: var(--marke-tief); }
.schritt-erledigt { opacity: .6; }
.schritt-erledigt .schritt-marke { background: var(--salbei-flaeche); border-color: var(--salbei); color: var(--salbei-tief); }

/* ------------------------------------------------------- Bezahlt-Knopf
   Zahlungsart direkt am Knopf. Vorher buchte er immer als Ueberweisung,
   Bargeld ging nur ueber die Familienseite. */
.bezahlt-form { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.art-auswahl {
  min-height: 38px; padding: 6px 8px; font-size: 13.5px;
  border-radius: 10px; border: 1px solid var(--linie);
  background: var(--weiss); color: var(--tinte);
  max-width: 118px;
}
.eintrag[id] { scroll-margin-top: 90px; }

/* Erlassen steht als leiser Textlink unter der Zeile, nicht als zweiter
   Knopf daneben: Es ist die Ausnahme, „Bezahlt" die Regel. */
.erlassen-zeile { margin: -4px 0 4px; padding-left: 14px; }
.erlassen-zeile .knopf-text { font-size: 13px; font-weight: 500; }

/* ------------------------------------------------------------ Rueckfrage
   Das eigene Fenster vor Schritten, die sich nicht zuruecknehmen lassen.
   window.confirm setzte „Auf www.klimpo.de wird Folgendes angezeigt" darueber
   und sah aus wie eine Warnung des Browsers vor der Seite. */
.rueckfrage {
  width: min(420px, calc(100vw - 32px));
  padding: 22px 22px 18px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  background: var(--weiss);
  color: var(--tinte);
  box-shadow: 0 18px 44px rgba(44, 27, 49, .22);
}
.rueckfrage::backdrop {
  background: rgba(44, 27, 49, .45);
}
.rueckfrage-titel {
  font-family: var(--anzeige);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
}
.rueckfrage-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}
.rueckfrage-knoepfe {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 6px;
}
/* Am Handy nebeneinander zu eng: dort der Reihe nach, der Rueckzieher unten. */
@media (max-width: 420px) {
  .rueckfrage-knoepfe { flex-direction: column-reverse; }
  .rueckfrage-knoepfe .knopf { width: 100%; }
}

/* ------------------------------------------------------- Rueckmeldung
   Der Knopf unten rechts. Er trägt das Klimpo-Zeichen und das Wort, damit
   niemand raten muss, was ihn erwartet: Ein blankes Symbol wird für „Hilfe"
   oder „Chat" gehalten. Das Zeichen wippt alle paar Sekunden kurz, sonst
   steht es still. Eine Dauerschleife am Bildrand ist auf Dauer Zappeln. */
.rueckmeldung-ecke {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;                 /* nur die Kinder fangen Klicks */
}
.rueckmeldung-ecke > * { pointer-events: auto; }

.rueckmeldung-knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  border-radius: 999px;
  background: var(--marke);
  color: var(--papier);
  border: 2px solid var(--papier);
  box-shadow: 0 10px 26px rgba(44, 27, 49, .3);
  font-family: var(--anzeige);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
}
.rueckmeldung-knopf:hover {
  background: var(--marke-hell);
  transform: translateY(-2px) rotate(-1.5deg);
  box-shadow: 0 14px 30px rgba(44, 27, 49, .34);
}
.rueckmeldung-knopf:active { transform: translateY(0) scale(.97); }
.rueckmeldung-knopf:focus-visible { outline: 3px solid var(--flieder); outline-offset: 3px; }
.rueckmeldung-zeichen {
  display: inline-flex;
  animation: klimpo-wippen 9s ease-in-out infinite;
  transform-origin: 50% 70%;
}
.rueckmeldung-knopf:hover .rueckmeldung-zeichen { animation-duration: 1.6s; }

/* Neun Sekunden Runde, gewippt wird nur in der ersten. */
@keyframes klimpo-wippen {
  0%, 82%, 100% { transform: translateY(0) rotate(0deg); }
  86%  { transform: translateY(-3px) rotate(-8deg); }
  90%  { transform: translateY(0) rotate(7deg); }
  94%  { transform: translateY(-2px) rotate(-5deg); }
  97%  { transform: translateY(0) rotate(2deg); }
}

/* Die Blase beim ersten Besuch. Sie zeigt mit der Ecke auf den Knopf. */
.rueckmeldung-blase {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 250px;
  padding: 12px 12px 12px 14px;
  border-radius: 16px 16px 4px 16px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  box-shadow: 0 12px 26px rgba(44, 27, 49, .18);
  font-size: 14px;
  line-height: 1.4;
  color: var(--tinte);
  animation: klimpo-blase-auf .28s ease-out;
}
.rueckmeldung-blase[hidden] { display: none; }
.rueckmeldung-blase-zu {
  border: 0;
  background: none;
  padding: 0 2px;
  font-size: 18px;
  line-height: 1;
  color: var(--gedaempft);
  cursor: pointer;
}
@keyframes klimpo-blase-auf {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .rueckmeldung-zeichen,
  .rueckmeldung-blase { animation: none; }
  .rueckmeldung-knopf:hover { transform: none; }
}

/* Am Handy zaehlt jeder Daumenbreite: dort nur das Zeichen, das Wort steht
   in der Blase und im Fenster. */
@media (max-width: 460px) {
  .rueckmeldung-wort { display: none; }
  .rueckmeldung-knopf { padding: 12px; }
}

.rueckmeldung-fenster { width: min(460px, calc(100vw - 32px)); }
.rueckmeldung-fenster textarea { width: 100%; }
@media print { .rueckmeldung-ecke { display: none; } }
/* Mit Cookieleiste am unteren Rand rueckt der Knopf hoch, sonst liegt er drauf. */
body:has(.cookieleiste) .rueckmeldung-ecke { bottom: 92px; }

/* ------------------------------------------------------------- Was ist neu
   Der Punkt an „Neu" in der Kopfzeile. Er ist klein und gelb, nicht rot:
   Hier wartet nichts Dringendes, hier gibt es etwas zu entdecken. */
.kopf-neu { position: relative; }
.kopf-neu-punkt::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -9px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--akzent);
  box-shadow: 0 0 0 2px var(--marke-tief);
}

/* --------------------------------------------------------- Menü am Handy
   Die Seitennavigation fiel unter 900 Pixeln weg, und auf Seiten mit
   Sprungmarken kam man dann nirgends hin. Das Menü hängt an <details>,
   funktioniert also auch ohne Javascript. */
.kopfmenue { display: none; position: relative; }
.kopfmenue > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--marke-hell);
  color: var(--papier);
  font-family: var(--anzeige);
  font-size: 14px;
  font-weight: 700;
}
.kopfmenue > summary::-webkit-details-marker { display: none; }
.kopfmenue-striche {
  position: relative;
  width: 16px;
  height: 2px;
  background: var(--akzent);
  border-radius: 2px;
}
.kopfmenue-striche::before,
.kopfmenue-striche::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: var(--akzent);
  border-radius: 2px;
}
.kopfmenue-striche::before { top: -5px; }
.kopfmenue-striche::after { top: 5px; }
.kopfmenue[open] > summary { background: rgba(255, 255, 255, .08); }

.kopfmenue-inhalt {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 232px;
  padding: 12px;
  border-radius: 16px;
  background: var(--marke-tief);
  border: 1px solid var(--marke-hell);
  box-shadow: 0 18px 40px rgba(20, 10, 24, .45);
}
.kopfmenue-inhalt a {
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--papier);
  text-decoration: none;
  font-size: 15px;
}
.kopfmenue-inhalt a:hover { background: rgba(255, 255, 255, .08); }
.kopfmenue-inhalt .trennlinie { background: var(--marke-hell); margin: 6px 0; }

@media (max-width: 900px) {
  .kopfmenue { display: block; }
  /* „Anmelden" und „Klasse anlegen" bleiben sichtbar: Das sind die beiden
     Handlungen, für die jemand herkommt, und sie gehören nicht hinter einen
     Knopf. Was im Menü ohnehin steht, verschwindet hier. */
  .kopf-nav .nur-breit { display: none; }
  .kopf-nav { gap: 10px; }
}

/* Ganz schmale Geräte: das Wort weg, die drei Striche genügen. „Klasse
   anlegen" bleibt einzeilig, sonst wächst die Kopfzeile auf zwei Reihen. */
@media (max-width: 460px) {
  .kopfmenue-wort { display: none; }
  .kopfmenue > summary { padding: 9px 11px; }
  .kopf-nav { gap: 8px; font-size: 13px; }
  .kopf-nav .knopf {
    white-space: nowrap;
    padding: 9px 13px;
    min-height: 0;
    font-size: 13px;
  }
}

/* Kacheln, die wirklich Knöpfe sind. Eine Kassenwartin hat die Kachel mit
   dem Kassenstand täglich gedrückt, weil sie aussieht wie einer. Sie hatte
   recht: Dahinter gehört das Kassenbuch. */
.zahlkachel-klickbar {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .12s ease, box-shadow .12s ease;
}
.zahlkachel-klickbar:hover {
  transform: translateY(-2px);
  box-shadow: var(--schatten-kleber);
}
.zahlkachel-klickbar .fussnote { color: var(--marke); font-weight: 600; }

/* ------------------------------------------------------------- Kassenbuch
   Eine Zeitleiste statt einer Tabelle: Die Spur läuft links mit, jede
   Bewegung sitzt als Karte daran, und der Monat hängt als Kleber darüber.
   Die erste Fassung war eine Tabelle, korrekt und langweilig. */
.buchspur {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 30px;
}
.buchspur::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--flieder), var(--salbei-hell));
  opacity: .5;
}
.buchmonat { margin: 14px 0 2px -22px; }
.buchmonat:first-child { margin-top: 0; }

.buchzeile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-gross);
  background: var(--weiss);
  border: 1px solid var(--linie);
  box-shadow: var(--schatten);
  transition: transform .1s ease;
}
.buchzeile:hover { transform: translateX(2px); }
.buchzeile-still { opacity: .62; }

.buchzeile-punkt {
  position: absolute;
  left: -30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  font-family: var(--anzeige);
  font-weight: 800;
  font-size: 15px;
  border: 2px solid var(--papier);
}
.buchzeile-rein { background: var(--salbei-flaeche); color: var(--salbei-tief); }
.buchzeile-raus { background: var(--flieder-flaeche); color: var(--marke); }

.buchzeile-betrag { font-size: 16px; font-weight: 600; white-space: nowrap; color: var(--salbei-tief); }
.buchzeile-betrag-raus { color: var(--marke); }

@media (max-width: 520px) {
  .buchspur { padding-left: 24px; }
  .buchspur::before { left: 10px; }
  .buchzeile { padding: 11px 13px; gap: 10px; }
  .buchzeile-punkt { left: -24px; width: 22px; height: 22px; font-size: 13px; }
  .buchmonat { margin-left: -18px; }
}

/* ------------------------------------------------------ Klimpo in Zahlen
   Die private Seite für den Startbildschirm. Dunkel, große Ziffern, eine
   Spalte: Sie wird im Stehen mit einer Hand gelesen. */
.zahlenseite {
  min-height: 100vh;
  padding: 18px 16px 28px;
  background: var(--marke-tief);
  color: var(--papier);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.zahlenkopf { display: flex; align-items: center; gap: 12px; }
.zahlenkopf strong { display: block; font-family: var(--anzeige); font-size: 18px; }
.zahlenseite .winzig { color: var(--auf-dunkel-leise); }
.zahlenseite .marke { color: var(--flieder); margin: 0; }

.zahlenpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.zahlenkachel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 16px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--marke-hell);
}
.zahlenkachel-hell { background: var(--flieder-flaeche); border-color: transparent; }
.zahlenkachel-hell .marke { color: var(--marke); }
.zahlenkachel-hell .zahlenwert { color: var(--marke-tief); }
.zahlenkachel-hell .winzig { color: var(--gedaempft); }

.zahlenwert {
  font-family: var(--anzeige);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.zahlenwert.klein { font-size: 24px; }

.zahlenblock {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--marke-hell);
}
.zahlenreihe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.zahlenreihe > div { display: flex; flex-direction: column; }

/* Der Verlauf: vierzehn Säulen, die von unten wachsen. */
.zahlenverlauf {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 120px;
}
.zahlensaeule {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  height: 100%;
}
.zahlenbalken {
  position: relative;
  width: 100%;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(var(--flieder), var(--marke-hell));
  min-height: 4px;
}
.zahlenpunkt {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--akzent);
  color: var(--marke-tief);
  font-family: var(--anzeige);
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}
.zahlenfuss { margin: 4px 0 0; }

@media (min-width: 640px) {
  .zahlenseite { max-width: 560px; margin: 0 auto; }
  .zahlenreihe { grid-template-columns: repeat(4, 1fr); }
}

/* Der Aktualisieren-Knopf auf der Zahlenseite. Als App auf dem
   Startbildschirm gibt es kein Herunterziehen zum Neuladen. */
.zahlenknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid var(--marke-hell);
  color: var(--papier);
  font-family: var(--anzeige);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
.zahlenknopf:hover { background: rgba(255, 255, 255, .18); }
.zahlenknopf:active { transform: scale(.97); }
.zahlenknopf-breit { background: var(--akzent); color: var(--marke-tief); border-color: transparent; font-size: 15px; }

/* Heute gegen gestern, an den großen Zahlen. Die Farbe zeigt die Richtung,
   nicht ein Urteil: Ein ruhiger Tag ist kein schlechter Tag. */
.vergleich {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  margin-top: 2px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}
.vergleich-hoch { background: var(--salbei-flaeche); color: var(--salbei-tief); }
.vergleich-runter { background: rgba(255, 255, 255, .12); color: var(--auf-dunkel-leise); }
.vergleich-gleich { background: rgba(255, 255, 255, .1); color: var(--auf-dunkel-leise); }
.zahlenkachel-hell .vergleich-runter,
.zahlenkachel-hell .vergleich-gleich { background: var(--papier-2); color: var(--gedaempft); }


/* --------------------------------------------------- Kacheln mit Bild
   Die Uebersicht der Klassenmappe. Vierzig gleich aussehende Textkaesten
   sind eine Wand, in der niemand etwas wiederfindet — mit Titelbild wird
   daraus eine Seite, auf der das Auge Halt findet.

   Die Bilder liegen ohnehin vor (800er WebP, rund 14 KB) und laden
   verzoegert. Das Seitenverhaeltnis steht im CSS, damit beim Laden kein
   Sprung entsteht. */
.kacheln-bild {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.kachel-bild {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.kachel-foto {
  display: block;
  width: 100%;
  /* height: auto ist hier keine Kosmetik: Ohne die Zeile gilt das
     height-Attribut aus dem HTML als feste Hoehe, und aspect-ratio wird
     wirkungslos, weil dann beide Masse gesetzt sind. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--flieder-flaeche);
}
.kachel-bild .kachel-text {
  padding: 12px 14px 14px;
  gap: 3px;
}
.kachel-kopf {
  display: flex;
  align-items: center;
  gap: 9px;
}
.kachel-kopf strong {
  font-size: 15px;
  line-height: 1.25;
}
/* Beim Ueberfahren hebt sich die Karte leicht. Kein Schatten-Feuerwerk:
   Die Bilder tragen die Seite schon, die Bewegung bestaetigt nur. */
.kachel-bild:hover .kachel-foto { filter: saturate(1.06); }

@media (prefers-reduced-motion: reduce) {
  .kachel-bild:hover .kachel-foto { filter: none; }
}

/* Auf dem Handy steht eine Kachel je Reihe. Ein 16:9-Bild waere dort
   ueber zweihundert Pixel hoch, und bei vierzig Kacheln scrollt man sich
   durch einen Bildband. Flacher geschnitten bleibt das Motiv erkennbar
   und die Liste ueberschaubar. */
@media (max-width: 560px) {
  .kachel-foto { aspect-ratio: 3 / 1; }
  .kacheln-bild { gap: 10px; }
  .kachel-bild .kachel-text { padding: 10px 13px 12px; }
}


/* ------------------------------------------- Klebender Kopf am Handy
   Auf schmalen Geraeten bleibt der Kopf oben stehen. Am Rechner nicht:
   Dort ist die Seite ohnehin ueberschaubar, und eine feste Leiste nimmt
   nur Platz.

   Die feste Hoehe ist kein Schoenheitswert, sondern noetig: Angemeldet
   ist der Kopf 58 Pixel hoch, abgemeldet 68, weil dort der Knopf „Klasse
   anlegen" steht. Ohne feste Hoehe haetten die Sprungmarken darunter
   keinen verlaesslichen Anker und lägen mal zu hoch, mal zu tief.

   Der z-index liegt ueber dem der Sprungmarken (20), damit der Kopf beim
   Scrollen vorne bleibt und das aufgeklappte Menue nicht darunter rutscht. */
@media (max-width: 900px) {
  :root { --kopf-hoehe: 56px; }

  .kopf {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--kopf-hoehe);
    padding: 0;
    display: flex;
    align-items: center;
  }
  .kopf > div { width: 100%; }

  /* Die Sprungmarken der Klassenmappe kleben unter dem Kopf statt unter
     dem Fensterrand. Vorher lagen beide bei 0 und ueberdeckten sich. */
  .sprungmarken { top: var(--kopf-hoehe); }

  /* Ein Sprungziel, das unter dem klebenden Kopf verschwindet, ist kein
     Ziel. Zu jedem vorhandenen Abstand kommt deshalb die Kopfhoehe dazu.

     Bewusst mit denselben Selektoren wie weiter oben und nicht mit einem
     kuerzeren: `.mappe section[id]` ist spezifischer als `.mappe [id]`,
     eine allgemeinere Regel bliebe hier wirkungslos — was sie eine Weile
     auch war. */
  #ablauf, #tueren, #daten, #kalender {
    scroll-margin-top: calc(var(--kopf-hoehe) + 18px);
  }
  .mappe h2[id], .mappe section[id] {
    scroll-margin-top: calc(var(--kopf-hoehe) + 62px);
  }
  .eintrag[id] { scroll-margin-top: calc(var(--kopf-hoehe) + 90px); }
}