/* Satz der Startseite. Sie traegt seit dem 12.09.2026 den mittigen Kopf und den
   Abschnittstakt aus dem Entwurf in 03_design/website-entwurf-2026-09-08/ und laedt
   deshalb diese Datei statt stil.css. Ab dem 12.09.2026 von Hand gepflegt, wie der Rest der Seite.


   ponytail: eigener Satz nur fuer die Startseite. Die Unterseiten bleiben bei stil.css
   und damit beim alten Takt; zusammengefuehrt wird, sobald der Takt dort eingearbeitet
   ist (handoff.md, Punkt 0011). */

:root {
  --grund: #F5F3EE;
  --grund-gedaempft: #EBE8E1;
  --text: #1C1B18;
  --text-gedaempft: #716D65;
  --text-leise: #807B70;
  --linie: #CFCBC1;
  /* Haarlinien tragen keine Bedeutung, der Umriss eines Bedienelements schon. Dafuer
     verlangt WCAG 1.4.11 3:1 — --linie schafft 1,46:1. Wert aus stil.css uebernommen. */
  --linie-feld: #7E7A71;
  --linie-stark: #1C1B18;
  --faellig: #A3302B;

  --umkehr-grund: #1C1B18;
  --umkehr-text: #F5F3EE;

  /* Seit dem 17.09.2026 (Rivr-Struktur): Karten liegen einen Ton heller als der Grund,
     die Glaskarte im Kopf laesst den linierten Grund durchscheinen. */
  --karte: #FBFAF7;
  --glas: rgba(251, 250, 247, 0.6);
  --rund: 24px;
  --rund-gross: 48px;

  --serifen: ui-serif, "New York", "Iowan Old Style", Palatino, Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --schrift-auszeichnung: 13px;
  --schrift-text: 17px;
  --schrift-zwischen: clamp(21px, 2.4vw, 26px);
  --schrift-titel: clamp(30px, 5.2vw, 48px);

  --takt: clamp(56px, 8vw, 96px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #171614;
    --grund-gedaempft: #1F1E1B;
    --text: #EDEAE3;
    --text-gedaempft: #9A948A;
    --text-leise: #8A847A;
    --linie: #3A3733;
    --linie-feld: #787369;
    --linie-stark: #EDEAE3;
    --faellig: #E0705F;
    --umkehr-grund: #EDEAE3;
    --umkehr-text: #171614;
    --karte: #232220;
    --glas: rgba(35, 34, 32, 0.6);
  }
}

:root[data-theme="dark"] {
  --grund: #171614;
  --grund-gedaempft: #1F1E1B;
  --text: #EDEAE3;
  --text-gedaempft: #9A948A;
  --text-leise: #8A847A;
  --linie: #3A3733;
  --linie-feld: #787369;
  --linie-stark: #EDEAE3;
  --faellig: #E0705F;
  --umkehr-grund: #EDEAE3;
  --umkehr-text: #171614;
  --karte: #232220;
  --glas: rgba(35, 34, 32, 0.6);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--schrift-text);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: var(--serifen); text-wrap: balance; }
img { max-width: 100%; display: block; }
a { color: inherit; }

.weit {
  max-width: calc(62rem + 40px);
  margin: 0 auto;
  padding: 0 20px;
}

/* Der Textsatz bleibt schmal, auch wenn der Block breit ist: 34rem ist die Grenze,
   ab der eine Zeile nicht mehr sicher gefunden wird. */
.satz { max-width: 34rem; }

.marke, .kennzeichnung {
  font-family: var(--mono);
  font-size: var(--schrift-auszeichnung);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-gedaempft);
  margin: 0 0 10px;
}

/* ---------- Abschnittstakt ----------
   Velopits Ruhe kommt nicht aus weniger Text, sondern aus Abstand. Hier steckt sie
   in einer einzigen Zahl, damit der Takt der ganzen Seite an einer Stelle liegt. */
section { padding: var(--takt) 0; }
section + section { border-top: 1px solid var(--linie); }
.band { background: var(--grund-gedaempft); border-top: none; }
.band + section { border-top: none; }

.aussage {
  font-size: var(--schrift-zwischen);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 0 0 12px;
}

.folge { margin: 0 0 36px; color: var(--text-gedaempft); }

/* ---------- Kopf ----------
   Mittige Fassung nach dem Vorbild von velopit.app: eine Mittelachse, auf der
   Kennzeichnung, Titel, Vorspann, Knopfreihe und Aufnahme untereinander stehen. Der
   Titel darf hier größer werden als in der zweispaltigen Fassung — er teilt die Breite
   mit nichts mehr. */
.kopf { padding: 40px 0 var(--takt); border-bottom: 1px solid var(--linie-stark); text-align: center; }

/* Ohne Navigationsleiste hat die Seite sonst keinen Markennamen mehr im Kopf — bei
   Velopit trägt ihn das Logo links oben. Er steht deshalb als eigene Zeile über der
   Gattungszeile, in der Textfarbe und damit als Erstes gelesen. */
.wortmarke {
  font-family: var(--mono);
  font-size: var(--schrift-auszeichnung);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 28px;
  /* Der Sperrsatz setzt den Abstand auch hinter das letzte Zeichen; ohne Ausgleich
     stünde die Zeile sichtbar links der Mittelachse. */
  text-indent: 0.3em;
}

/* Die Wortmarke der Unterseiten verweist auf die Startseite; ein Unterstrich unter einem
   gesperrt gesetzten Namen liest sich als Fehler, nicht als Verweis. */
.wortmarke a { text-decoration: none; }

.kopf .marke { margin-bottom: 20px; }

.kopf h1 {
  font-size: clamp(34px, 6.4vw, 64px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.022em;
  margin: 0 auto 20px;
  max-width: 14ch;
}

.vorspann { margin: 0 auto 32px; max-width: 32rem; font-size: 19px; color: var(--text-gedaempft); }

/* Knopfreihe statt des dunklen Aufrufkastens: Der Kasten war an den linken Satzrand
   gebunden und hätte mittig als zweiter Block gegen den Titel gearbeitet. Was er an
   Text trug, steht jetzt eine Zeile tiefer als Standzeile. */
.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0 0 18px;
}

.knopf-voll, .knopf-umriss {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--schrift-auszeichnung);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 24px;
  border: 1px solid var(--linie-stark);
}

.knopf-voll { background: var(--umkehr-grund); color: var(--umkehr-text); }
.knopf-voll:hover { background: transparent; color: var(--text); }
.knopf-umriss { background: transparent; color: var(--text); }
.knopf-umriss:hover { background: var(--umkehr-grund); color: var(--umkehr-text); }
.knopf-voll:focus-visible, .knopf-umriss:focus-visible { outline: 2px solid var(--faellig); outline-offset: 3px; }

/* Die Standzeile trägt, was vorher im Aufrufkasten stand. Getrennt wird mit Mittelpunkten
   wie im Vorbild, die Trenner selbst sind für Vorleseprogramme unsichtbar. */
.standzeile {
  font-family: var(--mono);
  font-size: var(--schrift-auszeichnung);
  letter-spacing: 0.06em;
  color: var(--text-gedaempft);
  margin: 0;
}

.standzeile span[aria-hidden] { padding: 0 8px; }

.knopf {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--schrift-auszeichnung);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--umkehr-text);
  text-decoration: none;
  border: 1px solid currentColor;
  padding: 12px 20px;
}

.knopf:hover { background: var(--umkehr-text); color: var(--umkehr-grund); }
.knopf:focus-visible { outline: 2px solid var(--faellig); outline-offset: 3px; }

.geraet {
  margin: 0;
  border: 1px solid var(--linie);
  border-radius: 26px;
  overflow: hidden;
  background: var(--grund-gedaempft);
}

.geraet img { width: 100%; height: auto; }

/* Die Aufnahme steht mittig unter der Knopfreihe und ist auf ihre obere Hälfte
   beschnitten: Sie soll den Kopf abschließen, nicht ihn zum Bildschirmfoto machen. */
.kopf .geraet {
  max-width: 320px;
  margin: 52px auto 0;
  max-height: 520px;
  border-bottom: none;
  border-radius: 26px 26px 0 0;
}

/* ---------- Merkmalszeile ---------- */
.merkmale {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: center;
  font-family: var(--mono);
  font-size: var(--schrift-auszeichnung);
  letter-spacing: 0.06em;
  color: var(--text-gedaempft);
}

/* ---------- Tafel: sechs Ansichten, eine Aufnahme ----------
   Sechs Telefonaufnahmen nebeneinander waren bei 1.440 px Fensterbreite 2.256 px hoch —
   ein knappes Drittel der ganzen Seite, und der Grund, warum sie sich endlos anfuehlte.
   Sie stehen jetzt hintereinander: sechs Reiter, eine sichtbare Aufnahme. Geschaltet wird
   ueber Radioknoepfe, damit die Seite ohne JavaScript auskommt; die Knoepfe sind versteckt,
   aber nicht abgeschaltet, sonst verloeren sie die Tastaturbedienung (Pfeiltasten). */
.tafel input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.reiter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 36px;
}

.reiter label {
  font-family: var(--mono);
  font-size: var(--schrift-auszeichnung);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 11px 16px;
  border: 1px solid var(--linie-feld);
  color: var(--text-gedaempft);
}

.reiter label:hover { color: var(--text); border-color: var(--linie-stark); }

.blaetter > article {
  display: none;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

/* Wie im Kopf unten beschnitten: Die Aufnahme soll den Abschnitt tragen, nicht ihn fuellen. */
.blaetter .geraet {
  max-width: 260px;
  max-height: 470px;
  border-bottom: none;
  border-radius: 26px 26px 0 0;
}

.blaetter h3 { font-size: var(--schrift-zwischen); font-weight: 600; margin: 0 0 10px; }
.blaetter p:last-child { margin: 0; color: var(--text-gedaempft); }

/* Ein Regelsatz je Reiter, ausgeschrieben statt errechnet: sechs Zeilen sind kuerzer
   gelesen als jede Abkuerzung, die man sich dafuer merken muesste. */
#ansicht1:checked ~ .reiter label[for="ansicht1"],
#ansicht2:checked ~ .reiter label[for="ansicht2"],
#ansicht3:checked ~ .reiter label[for="ansicht3"],
#ansicht4:checked ~ .reiter label[for="ansicht4"],
#ansicht5:checked ~ .reiter label[for="ansicht5"],
#ansicht6:checked ~ .reiter label[for="ansicht6"] {
  background: var(--umkehr-grund);
  color: var(--umkehr-text);
  border-color: var(--umkehr-grund);
}

#ansicht1:checked ~ .blaetter #blatt1,
#ansicht2:checked ~ .blaetter #blatt2,
#ansicht3:checked ~ .blaetter #blatt3,
#ansicht4:checked ~ .blaetter #blatt4,
#ansicht5:checked ~ .blaetter #blatt5,
#ansicht6:checked ~ .blaetter #blatt6 { display: grid; }

#ansicht1:focus-visible ~ .reiter label[for="ansicht1"],
#ansicht2:focus-visible ~ .reiter label[for="ansicht2"],
#ansicht3:focus-visible ~ .reiter label[for="ansicht3"],
#ansicht4:focus-visible ~ .reiter label[for="ansicht4"],
#ansicht5:focus-visible ~ .reiter label[for="ansicht5"],
#ansicht6:focus-visible ~ .reiter label[for="ansicht6"] {
  outline: 2px solid var(--faellig);
  outline-offset: 2px;
}

/* ---------- Weg der Kilometer ----------
   Die Nummern stehen hier, weil die vier Schritte wirklich nacheinander laufen:
   ohne Fahrt kein Radstand, ohne Radstand kein Teilestand. */
.weg { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

.weg li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0 20px;
  padding: 22px 0;
  border-top: 1px solid var(--linie);
}

.weg li:last-child { border-bottom: 1px solid var(--linie); }

.weg .zahl {
  font-family: var(--mono);
  font-size: var(--schrift-auszeichnung);
  color: var(--text-gedaempft);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}

.weg h3 { font-size: var(--schrift-text); font-weight: 600; margin: 0 0 4px; }
.weg p { margin: 0; color: var(--text-gedaempft); max-width: 42rem; }

/* ---------- Scheckheft ---------- */
.scheck-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 56px;
  align-items: start;
}

.punkte { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 20px; }
.punkte h3 { font-size: var(--schrift-text); font-weight: 600; margin: 0 0 4px; }
.punkte p { margin: 0; color: var(--text-gedaempft); }

.verweis {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--schrift-auszeichnung);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--linie-stark);
  padding-bottom: 3px;
}

.verweis + .verweis { margin-left: 26px; }

/* ---------- Grenzen ---------- */
.grenzen { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

.grenzen li {
  padding: 18px 0;
  border-top: 1px solid var(--linie);
  color: var(--text-gedaempft);
  max-width: 44rem;
}

.grenzen li:last-child { border-bottom: 1px solid var(--linie); }
.grenzen b { color: var(--text); font-weight: 600; }

/* ---------- Presse ---------- */
.presse { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.presse li { border-top: 1px solid var(--linie-stark); padding-top: 14px; }
.presse .quelle { font-family: var(--mono); font-size: var(--schrift-auszeichnung); letter-spacing: 0.06em; color: var(--text-gedaempft); margin: 0 0 8px; }
.presse blockquote { margin: 0; font-family: var(--serifen); font-size: 19px; line-height: 1.35; }

/* ---------- Fragen ---------- */
.fragen { display: grid; }
.fragen details { border-top: 1px solid var(--linie); }
.fragen details:last-of-type { border-bottom: 1px solid var(--linie); }

.fragen summary {
  cursor: pointer;
  padding: 18px 0;
  font-family: var(--serifen);
  font-size: var(--schrift-text);
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; font-family: var(--mono); color: var(--text-gedaempft); }
.fragen details[open] summary::after { content: "\2212"; }
.fragen summary:focus-visible { outline: 2px solid var(--faellig); outline-offset: 2px; }
.fragen details p { margin: 0 0 18px; color: var(--text-gedaempft); max-width: 42rem; }

/* ---------- Schluss ---------- */
.schluss { background: var(--umkehr-grund); color: var(--umkehr-text); border-top: none; }
.schluss h2 { font-size: var(--schrift-zwischen); font-weight: 600; line-height: 1.25; margin: 0 0 12px; max-width: 22ch; }
.schluss p { margin: 0 0 26px; opacity: 0.8; max-width: 34rem; }
.schluss .kennzeichnung { color: var(--umkehr-text); opacity: 0.6; }
.schluss .knopf { color: var(--umkehr-text); }
/* Die Standzeile faerbt in --text-gedaempft und stuende auf dem umgekehrten Grund bei
   rund 2,5:1. Im Schlussblock nimmt sie dessen eigene Textfarbe. */
.schluss .standzeile { color: var(--umkehr-text); opacity: 0.7; margin-top: 18px; }
/* Der Fokusring nimmt sonst --faellig und steht im umgekehrten Block bei 2,47:1. */
.schluss .knopf:focus-visible { outline-color: var(--umkehr-text); }

.fuss { padding: 32px 0 48px; font-family: var(--mono); font-size: var(--schrift-auszeichnung); letter-spacing: 0.06em; color: var(--text-gedaempft); }
.fuss a { text-decoration: none; border-bottom: 1px solid var(--linie); }

/* ---------- Schmale Fenster ---------- */
@media (max-width: 900px) {
  .scheck-raster { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .geraet { max-width: 260px; }
  .kopf .geraet { max-width: 260px; max-height: 300px; }
  .blaetter > article { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .presse { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 560px) {
  .geraet { max-width: 220px; }
  .blaetter .geraet { max-width: 220px; max-height: 400px; }
  .kopf .geraet { max-width: 220px; max-height: 260px; }
  /* Nebeneinander sind die beiden Knöpfe auf einem Telefon je unter 150 px breit und
     brechen ihre Beschriftung um. Untereinander mit voller Breite bleiben sie lesbar. */
  .knopfreihe { flex-direction: column; align-items: stretch; }
  .weg li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ==================== Rivr-Struktur (seit 17.09.2026) ====================
   Die Startseite folgt der Vorlage „Rivr" von Mohammad Shehadeh (hirael.com, MIT):
   Kopf als abgerundete Karte mit Leiste, Abzeichen, Glaskarte und eingeschnittener Ecke,
   darunter Kennzahlenband, Kachelraster, Aufrufkarte und Fusszeile mit Spalten. Uebernommen
   ist nur die Struktur; Farben, Schriften und Haarlinien bleiben die von oben. Die
   Unterseiten ziehen nach und nach mit; solange nutzen sie die aelteren Regeln darueber.
   Entwurf und Begruendung: 03_design/startseite-entwurf-rivr-2026-09-17.html. */

.rahmen { max-width: 1536px; margin: 0 auto; padding: 0 12px; }
@media (min-width: 768px) { .rahmen { padding: 0 20px; } }

/* Die Abschnittsregeln von oben (Takt, Haarlinie zwischen Abschnitten) gelten hier nicht:
   Der Abstand kommt aus dem Rahmen der Karten selbst. */
.kennzahlen, .kacheln, .aufruf, .blatt { padding: 12px 0; border-top: 0; }
@media (min-width: 768px) { .kennzahlen, .kacheln, .aufruf, .blatt { padding: 28px 0; } }

/* ---------- Pillen ----------
   Die Knopfform der Vorlage: Text links, Pfeil im Kreis rechts. */
.pille {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 6px 6px 6px 20px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.pille .pfeil {
  display: flex;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pille .pfeil svg { width: 16px; height: 16px; display: block; transition: transform 0.2s; }
.pille:hover .pfeil svg { transform: translate(1px, -1px); }
.pille:focus-visible { outline: 2px solid var(--faellig); outline-offset: 3px; }

.pille-voll { background: var(--umkehr-grund); color: var(--umkehr-text); }
.pille-voll .pfeil { background: color-mix(in srgb, var(--umkehr-text) 20%, transparent); }
.pille-voll:hover { background: color-mix(in srgb, var(--umkehr-grund) 85%, var(--grund)); }

.pille-umriss { background: transparent; color: var(--text); border-color: var(--linie-feld); }
.pille-umriss .pfeil { background: color-mix(in srgb, var(--text) 10%, transparent); }
.pille-umriss:hover { background: var(--grund-gedaempft); }

.pille-hell { background: var(--karte); color: var(--text); border-color: var(--linie); }
.pille-hell .pfeil { background: color-mix(in srgb, var(--text) 10%, transparent); }
.pille-hell:hover { border-color: var(--linie-feld); }

/* Eine Pille ohne Pfeil (z. B. „Fragen vorab") braucht rechts denselben Innenabstand wie links. */
.pille-schlicht { padding: 12px 20px; }

/* ---------- Kopf: die Karte ----------
   Die Vorlage legt ein Video unter den Kopf. BikeTally hat keine Fotografie; die Karte
   traegt stattdessen ein liniertes Blatt — der Scheckheft-Gedanke als Grund — und die
   Aufnahme der App waechst von unten in die Karte. */
.held { padding: 12px 0; }

.held-karte {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: max(640px, calc(100svh - 24px));
  border-radius: var(--rund);
  border: 1px solid var(--linie);
  background-color: var(--grund-gedaempft);
  background-image:
    linear-gradient(180deg, var(--grund-gedaempft) 0%, transparent 28%, transparent 72%, var(--grund-gedaempft) 100%),
    repeating-linear-gradient(180deg, transparent 0 35px, color-mix(in srgb, var(--linie) 65%, transparent) 35px 36px);
}

@media (min-width: 768px) { .held-karte { border-radius: var(--rund-gross); } }

/* Unterseiten: dieselbe Karte, aber flach — sie traegt nur Leiste, Kennzeichnung, Titel
   und Vorspann, keine Aufnahme. */
.held-karte.flach { min-height: 0; padding-bottom: clamp(40px, 6vh, 72px); }

/* ---------- Leiste ---------- */
.leiste {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
}

@media (min-width: 768px) { .leiste { padding: 20px 32px; } }

.wortmarke-leiste {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.wortmarke-leiste img { width: 30px; height: 24px; }

.leiste ul {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 32px;
  font-size: 15px;
  color: color-mix(in srgb, var(--text) 80%, transparent);
}

@media (min-width: 1024px) { .leiste ul { display: flex; } }

.leiste ul a { text-decoration: none; }
.leiste ul a:hover, .leiste ul a[aria-current] { color: var(--text); }

/* Auf dem Telefon teilen sich Wortmarke und Knopf 350 px; der Knopf traegt dort die
   kurze Beschriftung. */
.leiste .kurz { display: none; }
@media (max-width: 479px) {
  .leiste .lang { display: none; }
  .leiste .kurz { display: inline; }
  .leiste .wortmarke-leiste { letter-spacing: 0.2em; }
}

/* ---------- Kopf: die Mitte ---------- */
.held-mitte {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  margin: clamp(16px, 6vh, 72px) 0 40px;
}

.flach .held-mitte { margin-bottom: 0; }

.abzeichen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: var(--glas);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 8px 16px;
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}

.abzeichen img { width: 20px; height: 16px; }

.held h1 {
  font-size: clamp(40px, 6.6vw, 80px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.022em;
  max-width: 24ch;
  margin: 0 0 20px;
}

/* Unterseiten tragen laengere Titel; sie bleiben eine Stufe kleiner. */
.flach h1 { font-size: clamp(32px, 4.6vw, 56px); max-width: 22ch; }

/* Der Umbruch nach dem ersten Satz gilt erst, wenn der zweite in eine Zeile passt. */
.umbruch { display: none; }
@media (min-width: 640px) { .umbruch { display: inline; } }

.held .vorspann {
  max-width: 40rem;
  margin: 0;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--text-gedaempft);
}

.held .knopfreihe { margin: 28px 0 0; }
.held .standzeile { margin-top: 18px; }

/* Die Aufnahme sitzt am unteren Rand der Karte und wird von ihr beschnitten. */
.held-geraet {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin: auto auto 0;
  width: min(340px, 72vw);
  max-height: min(380px, 36svh);
  overflow: hidden;
  border: 1px solid var(--linie-feld);
  border-bottom: 0;
  border-radius: 44px 44px 0 0;
  background: var(--grund);
  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.06);
}

.held-geraet img, .karte-bild img { width: 100%; height: auto; }

/* ---------- Glaskarte unten links ----------
   In der Vorlage steht hier eine Nutzerzahl. BikeTally nennt keine; die Karte zeigt
   stattdessen, was die App zeigt: eine Faelligkeit mit ihrer Begruendung. Sie haengt an
   der Kopfkarte, nicht an der Mitte, damit sie dem Titel nicht in die Zeile faehrt. */
.glas {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: fit-content;
  min-width: 200px;
  margin: 0 auto 40px;
  padding: 20px;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  background: var(--glas);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  text-align: left;
}

@media (min-width: 768px) {
  .glas { position: absolute; left: 40px; bottom: 40px; margin: 0; border-radius: 32px; padding: 22px; }
}

.glas .wert {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.glas .wert small { font-size: 14px; font-weight: 500; color: var(--text-gedaempft); }

.glas .etikett {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-gedaempft);
}

.punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--faellig); display: inline-block; }

/* ---------- Eingeschnittene Ecke unten rechts ----------
   Der Block traegt die Seitenfarbe und zwei nach innen gewoelbte Viertel, damit die
   Karte an dieser Stelle „ausgeschnitten" wirkt. -1px, damit er die Haarlinie der Karte
   ueberdeckt und der Ausschnitt wirklich bis an den Rand geht. */
.ecke {
  position: absolute;
  right: -1px;
  bottom: -1px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 14px 28px;
  border-top-left-radius: 24px;
  background: var(--grund);
  text-decoration: none;
  color: var(--text);
}

@media (min-width: 768px) {
  .ecke { gap: 20px; padding: 28px 28px 24px 52px; border-top-left-radius: 56px; }
}

.ecke .rund { position: absolute; width: 24px; height: 24px; color: var(--grund); pointer-events: none; display: block; }
.ecke .rund.oben { top: -24px; right: 0; }
.ecke .rund.links { bottom: 0; left: -24px; }

@media (min-width: 768px) {
  .ecke .rund { width: 56px; height: 56px; }
  .ecke .rund.oben { top: -56px; }
  .ecke .rund.links { left: -56px; }
}

.ecke .kreis {
  display: flex;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--linie);
  background: color-mix(in srgb, var(--text) 5%, transparent);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ecke .kreis svg { width: 20px; height: 20px; display: block; transition: transform 0.2s; }
.ecke:hover .kreis svg { transform: translate(1px, -1px); }

@media (min-width: 768px) { .ecke .kreis { width: 56px; height: 56px; } .ecke .kreis svg { width: 24px; height: 24px; } }

.ecke .titel { font-family: var(--serifen); font-size: 17px; font-weight: 600; line-height: 1.2; }
.ecke .unter { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-gedaempft); }
.ecke .unter svg { width: 14px; height: 14px; display: block; }

@media (min-width: 768px) { .ecke .titel { font-size: 21px; } .ecke .unter { font-size: 15px; } }

/* ---------- Kennzahlenband ----------
   Keine Nutzerzahlen (die App zaehlt Konten, keine Nutzer). Stattdessen die vier Angaben,
   die auf der Seite ohnehin stehen: Preis, Plattform, die 90-Prozent-Regel, die
   Fachmagazine. */
.kennzahlen-karte {
  border-radius: var(--rund);
  border: 1px solid var(--linie);
  background: color-mix(in srgb, var(--grund-gedaempft) 55%, var(--grund));
  padding: 16px 8px;
}

@media (min-width: 768px) { .kennzahlen-karte { border-radius: var(--rund-gross); padding: 48px 40px; } }

.kennzahlen dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.kennzahlen dl > div { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.kennzahlen dl > div:nth-child(2) { border-left: 1px solid var(--linie); }
.kennzahlen dl > div:nth-child(3) { border-top: 1px solid var(--linie); }
.kennzahlen dl > div:nth-child(4) { border-top: 1px solid var(--linie); border-left: 1px solid var(--linie); }

@media (min-width: 768px) {
  .kennzahlen dl { grid-template-columns: repeat(4, 1fr); }
  .kennzahlen dl > div { padding: 24px 28px; }
  .kennzahlen dl > div:nth-child(n+2) { border-top: 0; border-left: 1px solid var(--linie); }
}

.kennzahlen dt {
  font-family: var(--serifen);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.kennzahlen dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-gedaempft); max-width: 24ch; }

/* ---------- Kachelraster ---------- */
.kacheln-kopf { display: flex; flex-direction: column; gap: 20px; margin: 16px 4px 28px; }

@media (min-width: 640px) {
  .kacheln-kopf { flex-direction: row; align-items: flex-end; justify-content: space-between; margin: 24px 8px 40px; }
}

.kacheln h2 { font-size: clamp(30px, 4vw, 52px); font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; max-width: 20ch; margin: 0; }

.raster { display: grid; gap: 12px; grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .raster { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: 20px; }
}

.karte {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: var(--rund);
  border: 1px solid var(--linie);
  background: var(--karte);
  color: var(--text);
  padding: 28px;
  transition: box-shadow 0.3s, border-color 0.3s;
}

.karte:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05); border-color: var(--linie-feld); }

@media (min-width: 768px) {
  .karte { border-radius: 32px; }
  .karte-hoch { grid-row: span 2; padding: 36px; min-height: 30rem; }
  .karte-breit { grid-column: span 2; padding: 36px; min-height: 15rem; }
}

.karte h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.2; margin: 0; }
.karte-hoch h3 { font-size: clamp(24px, 2.4vw, 34px); }
.karte p { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: var(--text-gedaempft); max-width: 28rem; }
.karte .pille { margin-top: 22px; align-self: flex-start; }

.symbol {
  display: flex;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--grund-gedaempft);
  color: var(--text);
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.symbol svg { width: 24px; height: 24px; display: block; }

.karte-hoch .karte-text { margin-bottom: 28px; }

/* Aufnahmen in den Karten: unten beschnitten wie im Kopf. */
.karte-bild {
  overflow: hidden;
  border: 1px solid var(--linie-feld);
  border-bottom: 0;
  border-radius: 36px 36px 0 0;
  background: var(--grund);
  transition: transform 0.4s;
}

.karte:hover .karte-bild { transform: translateY(-6px); }

.karte-hoch .karte-bild { width: min(280px, 100%); max-height: 320px; margin: auto auto -37px; }
.karte-breit .karte-bild { width: 200px; max-height: 220px; margin: 24px auto -37px; }

@media (min-width: 768px) {
  .karte-breit .karte-text { max-width: 26rem; }
  .karte-breit .karte-bild { position: absolute; right: 40px; top: 36px; margin: 0; max-height: none; }
}

.karte-verweis {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  text-decoration: none;
  min-height: 16rem;
}

.karte-verweis .kreis {
  display: flex;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--grund-gedaempft);
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}

.karte-verweis .kreis svg { width: 28px; height: 28px; display: block; }
.karte-verweis:hover .kreis { transform: scale(1.1); }
.karte-verweis p { margin-top: 6px; }

/* ---------- Blatt: ein Abschnitt als Karte ----------
   Fuer Unterseiten mit laengeren Texten: jeder Abschnitt der alten Fassung wird eine Karte
   mit demselben Rahmen wie die Kacheln, innen der gewohnte Satz (kennzeichnung, aussage,
   folge, satz). Die Varianten unterscheiden nur den Grund. */
.blatt-karte {
  border-radius: var(--rund);
  border: 1px solid var(--linie);
  background: var(--karte);
  padding: 28px 24px;
}

@media (min-width: 768px) { .blatt-karte { border-radius: var(--rund-gross); padding: 56px 64px; } }

.blatt-karte.gedaempft { background: color-mix(in srgb, var(--grund-gedaempft) 55%, var(--grund)); }
.blatt-karte .kennzeichnung { margin-bottom: 10px; }
.blatt-karte .aussage { max-width: 26ch; }
.blatt-karte .folge:last-child { margin-bottom: 0; }

/* Knopfreihen auf Blaettern stehen linksbuendig unter dem Satz, nicht mittig wie im Kopf. */
.blatt-karte .knopfreihe { justify-content: flex-start; margin: 0; }

/* Eine Aufnahme auf einem Blatt waechst wie im Kopf von unten in die Karte: unten beschnitten,
   bis an den Kartenrand gezogen (der negative Rand gleicht den Innenabstand der Karte aus). */
.blatt-karte .geraet {
  max-height: 440px;
  align-self: end;
  margin-bottom: -29px;
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
}

@media (min-width: 768px) { .blatt-karte .geraet { margin-bottom: -57px; } }

/* ---------- Aufrufkarte ----------
   Die Vorlage legt hier ein zweites Video unter; BikeTally nimmt den umgekehrten Grund
   des frueheren Schlussblocks. */
.aufruf-karte {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 520px;
  padding: 48px 24px;
  border-radius: var(--rund);
  background-color: var(--umkehr-grund);
  background-image:
    linear-gradient(180deg, var(--umkehr-grund) 0%, transparent 30%, transparent 70%, var(--umkehr-grund) 100%),
    repeating-linear-gradient(180deg, transparent 0 35px, color-mix(in srgb, var(--umkehr-text) 9%, transparent) 35px 36px);
  color: var(--umkehr-text);
  text-align: center;
}

@media (min-width: 768px) { .aufruf-karte { border-radius: var(--rund-gross); min-height: 640px; } }

/* Unterseiten schliessen mit einer niedrigeren Aufrufkarte. */
.aufruf-karte.flach { min-height: 0; }
@media (min-width: 768px) { .aufruf-karte.flach { min-height: 0; padding: 80px 24px; } }

.aufruf-inhalt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; max-width: 46rem; }
.aufruf .kennzeichnung { color: var(--umkehr-text); opacity: 0.6; margin: 0; }
.aufruf h2 { font-size: clamp(34px, 5vw, 64px); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
.aufruf-karte.flach h2 { font-size: clamp(28px, 3.6vw, 44px); }
.aufruf p { margin: 0; opacity: 0.8; max-width: 34rem; }
.aufruf p a { color: inherit; }
.aufruf .knopfreihe { margin: 0; }
.aufruf .standzeile { color: var(--umkehr-text); opacity: 0.7; }
.aufruf .pille-hell { background: var(--umkehr-text); color: var(--umkehr-grund); border-color: transparent; }
.aufruf .pille-hell .pfeil { background: color-mix(in srgb, var(--umkehr-grund) 10%, transparent); }
.aufruf .pille-umriss {
  color: var(--umkehr-text);
  border-color: color-mix(in srgb, var(--umkehr-text) 25%, transparent);
  background: color-mix(in srgb, var(--umkehr-text) 10%, transparent);
}
.aufruf .pille-umriss:hover { background: color-mix(in srgb, var(--umkehr-text) 18%, transparent); }
.aufruf .pille:focus-visible { outline-color: var(--umkehr-text); }

/* ---------- Fusszeile mit Spalten ---------- */
.fusszeile { margin-top: 24px; border-top: 1px solid var(--linie); }
.fusszeile-inhalt { padding: 56px 12px 40px; }
@media (min-width: 768px) { .fusszeile-inhalt { padding: 72px 20px 48px; } }

.fusszeile-oben { display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 768px) { .fusszeile-oben { flex-direction: row; justify-content: space-between; } }

.fusszeile .beschreibung { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-gedaempft); max-width: 20rem; }

.fusszeile nav { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (min-width: 640px) { .fusszeile nav { grid-template-columns: repeat(3, 1fr); gap: 64px; } }

.fusszeile h3 { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 16px; }
.fusszeile ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.fusszeile ul a { color: var(--text-gedaempft); text-decoration: none; }
.fusszeile ul a:hover { color: var(--text); }

.fusszeile-unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--linie);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-gedaempft);
}

.fusszeile-unten a { text-decoration: none; border-bottom: 1px solid var(--linie); }

/* ---------- Werkstattseite und Formulare (seit 17.09.2026) ----------
   Bausteine aus 03_design/werkstatt-entwurf-rivr-2026-09-17.html: Felder in Karten, das
   Tablet im Kopf, zwei Spalten in einem Blatt, die vier Handgriffe, der Vermerk, das
   Browserfenster mit der Kaeuferansicht. */

/* Der Titel der Werkstattseite ist doppelt so lang wie der der Startseite. */
.betrieb h1 { font-size: clamp(34px, 5vw, 64px); max-width: 26ch; }

button.pille { font-family: inherit; appearance: none; -webkit-appearance: none; }
button.pille:disabled { opacity: 0.4; cursor: default; }

/* Felder: gerundet wie die Karten. Nie unter 16px Schrift, sonst zoomt Mobile-Safari beim
   Fokussieren in die Seite. */
.feld label, .feldblock label, .feldblock legend {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-gedaempft);
  margin: 0 0 6px;
  padding: 0;
}

.feld .wert, .feldblock input[type="text"], .feldblock input[type="email"], .feldblock input[type="tel"],
.feldblock input[type="number"], .feldblock input[type="date"], .feldblock input[type="password"],
.feldblock select, .feldblock textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--schrift-text);
  line-height: 1.5;
  color: var(--text);
  background: var(--grund);
  border: 1px solid var(--linie-feld);
  border-radius: 14px;
  padding: 11px 14px;
}

.feld .wert { font-family: var(--mono); font-size: 15px; }
.feld .wert.leer { color: var(--text-leise); }
.feldblock textarea { min-height: 8rem; resize: vertical; }
.feldblock fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.feldblock label + input, .feldblock label + select, .feldblock label + textarea { margin-bottom: 18px; }
.feldblock input:focus, .feldblock select:focus, .feldblock textarea:focus { outline: 2px solid var(--faellig); outline-offset: 2px; }
.feldblock .knopfreihe { margin-top: 24px; justify-content: flex-start; }
.hilfe { font-size: 14px; line-height: 1.5; color: var(--text-gedaempft); margin: -10px 0 18px; }
.mono { font-family: var(--mono); }

/* Anklickbare Zeilen: die ganze Zeile ist Trefferflaeche. */
.auswahl { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--linie); }
.auswahl li { border-bottom: 1px solid var(--linie); }
.auswahl label {
  display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 10px 0; margin: 0;
  font-family: var(--sans); font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--text);
  cursor: pointer;
}
.auswahl input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--text); }

/* Ein Formular in einem Blatt bekommt einen eigenen Rahmen. */
.formkarte { border: 1px solid var(--linie); border-radius: 24px; background: var(--karte); padding: 24px; }
@media (min-width: 768px) { .formkarte { padding: 32px; } }

/* Zwei Spalten in einem Blatt: Satz links, Formular oder Fenster rechts. */
.zwei { display: grid; gap: 36px; align-items: start; }
@media (min-width: 900px) { .zwei { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; } }
.zwei.gleich { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .zwei.gleich { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.zwischentitel { font-family: var(--serifen); font-size: var(--schrift-text); font-weight: 600; margin: 0 0 12px; }
.klein { font-size: 14px; line-height: 1.55; color: var(--text-gedaempft); }
.klein a { color: inherit; }

/* Das Tablet: die Maske waechst wie das Telefon von unten in die Kopfkarte. */
.tablet {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin: auto auto 0;
  width: min(580px, 92vw);
  max-height: min(380px, 36svh);
  overflow: hidden;
  padding: 22px 28px;
  border: 1px solid var(--linie-feld);
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
  background: var(--karte);
  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.06);
  text-align: left;
}

.tablet-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--linie);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-gedaempft);
}

.tablet-kopf b { color: var(--text); font-weight: 600; }
.tablet-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.tablet .auswahl { grid-column: 1 / -1; margin: 4px 0 0; }
.tablet .auswahl label { min-height: 40px; padding: 8px 0; font-size: 15px; }
@media (max-width: 560px) { .tablet-felder { grid-template-columns: 1fr; } .tablet { padding: 18px 20px; } }

/* Die vier Handgriffe in der breiten Kachel: nebeneinander, mit Nummer wie im Weg. */
.schritte { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 900px) { .schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.schritte li { border-top: 1px solid var(--linie); padding-top: 14px; }
.schritte .zahl { font-family: var(--mono); font-size: 12px; color: var(--text-gedaempft); font-variant-numeric: tabular-nums; }
.schritte h4 { font-family: var(--serifen); font-size: var(--schrift-text); font-weight: 600; margin: 6px 0 4px; }
.schritte p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-gedaempft); }

/* Der Vermerk: „heisst dreierlei" als nummerierte Reihe. */
.dreierlei { list-style: none; margin: 0; padding: 0; counter-reset: punkt; }
.dreierlei li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0 12px; padding: 16px 0; border-top: 1px solid var(--linie); color: var(--text-gedaempft); }
.dreierlei li::before { counter-increment: punkt; content: "0" counter(punkt); font-family: var(--mono); font-size: 12px; color: var(--text-gedaempft); padding-top: 4px; }
.dreierlei li:last-child { border-bottom: 1px solid var(--linie); }

/* Das Browserfenster: so sieht der Kaeufer das geteilte Scheckheft. Dieselben Bausteine
   (eintrag, vermerk, legende) setzt die Kaeuferansicht selbst (scheckheftAnzeigen). */
.fenster { border: 1px solid var(--linie-feld); border-radius: 20px; overflow: hidden; background: var(--karte); }
.fenster-leiste {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--linie);
  background: var(--grund-gedaempft);
  font-family: var(--mono); font-size: 12px; color: var(--text-gedaempft);
}
.fenster-leiste i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--linie-feld); display: inline-block; }
.fenster-leiste span { margin-left: 8px; }
.fenster-inhalt { padding: 22px 24px 8px; }
.fenster-inhalt .kennzeichnung { margin-bottom: 4px; }
.eintrag { padding: 16px 0; border-top: 1px solid var(--linie); }
.eintrag h3 { font-size: var(--schrift-text); font-weight: 600; margin: 0 0 6px; line-height: 1.3; }
.eintrag p { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; color: var(--text-gedaempft); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.vermerk {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text);
  background: var(--grund-gedaempft);
  border: 1px solid var(--linie);
}
.vermerk.betrieb { background: var(--umkehr-grund); color: var(--umkehr-text); border-color: var(--umkehr-grund); }
.legende { font-size: 14px; line-height: 1.5; color: var(--text-gedaempft); padding: 14px 0 12px; border-top: 1px solid var(--linie); margin: 0; }

/* Die Glaskarte kann statt einer Faelligkeit einen Eintrag tragen. */
.glas .eintrag { padding: 0; border: 0; max-width: 17rem; }
.glas .eintrag h3 { font-size: 18px; margin-top: 10px; }
.glas .eintrag p { margin-top: 8px; }

/* Fragen in zwei Spalten, wenn Platz ist. */
@media (min-width: 900px) {
  .fragen.zweispaltig { grid-template-columns: 1fr 1fr; gap: 0 48px; }
  .fragen.zweispaltig details:nth-last-of-type(2) { border-bottom: 1px solid var(--linie); }
}

/* ---------- Kaeuferansicht des geteilten Scheckhefts (seit 17.09.2026) ----------
   Gesetzt von scheckheftAnzeigen in functions/index.js; Entwurf in
   03_design/scheckheft-entwurf-rivr-2026-09-17.html. Die Seite wird meist auf dem Telefon
   geoeffnet (Link aus der App). */
.scheck h1 { font-size: clamp(30px, 4.6vw, 52px); max-width: 24ch; }
.scheck .standzeile { margin-top: 14px; }
.scheck .vorspann { margin-top: 22px; max-width: 42rem; }

.zeilen { display: grid; gap: 0 48px; margin-top: 20px; }
@media (min-width: 768px) { .zeilen.zweispaltig { grid-template-columns: 1fr 1fr; } }
.blatt-karte .eintrag h3 { font-family: var(--serifen); }
.blatt-karte .eintrag:first-of-type { border-top: 0; padding-top: 4px; }
@media (min-width: 768px) { .zeilen.zweispaltig .eintrag:nth-of-type(2) { border-top: 0; padding-top: 4px; } }
.eintrag ul { margin: 8px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.5; color: var(--text-gedaempft); }
.eintrag .hinweis { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-gedaempft); }

/* Faelligkeit in der Ampelfarbe: die einzige Farbe, die etwas bedeutet. */
.vermerk.bald { color: var(--faellig); border-color: var(--faellig); background: transparent; }
.vermerk.faellig { color: var(--umkehr-text); background: var(--faellig); border-color: var(--faellig); }

/* Legende: je Vermerk ein Absatz, die Marke steht davor. */
.legenden { margin-top: 20px; }
.legende-absatz { display: grid; gap: 10px; padding: 18px 0; border-top: 1px solid var(--linie); }
.legende-absatz:first-of-type { border-top: 0; padding-top: 4px; }
.legende-absatz p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-gedaempft); }
.legende-absatz .vermerk { justify-self: start; }

/* ---------- Funktionen: die sechs Ansichten als Blatt (seit 17.09.2026) ----------
   Dieselbe Radioknopf-Bauform wie oben (tafel, reiter, blaetter), nur die Reiter sind
   Pillen und die Aufnahme waechst rechts von unten in die Karte. */
.ansichten .reiter { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 28px; }
.ansichten .reiter label {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--linie-feld); background: transparent; color: var(--text);
  font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none;
  cursor: pointer; transition: background-color 0.2s, color 0.2s;
}
.ansichten .reiter label:hover { background: var(--grund-gedaempft); color: var(--text); border-color: var(--linie-feld); }
.ansichten .blaetter > article { grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
@media (min-width: 900px) { .ansichten .blaetter > article { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; } }
.ansichten .blaetter h3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; margin: 0 0 12px; line-height: 1.2; }
.ansichten .blaetter p { margin: 0; color: var(--text-gedaempft); }
.ansichten .blaetter p a { color: inherit; }
.ansichten .blaetter .geraet {
  order: -1; width: min(280px, 100%); max-width: none; max-height: 360px; margin: 0 auto -29px;
  border: 1px solid var(--linie-feld); border-bottom: 0; border-radius: 36px 36px 0 0; background: var(--grund);
  overflow: hidden; align-self: end;
}
@media (min-width: 900px) { .ansichten .blaetter .geraet { order: 0; margin: 0 0 -57px auto; max-height: 420px; } }
.ansichten .blaetter .geraet img { width: 100%; height: auto; }

/* Vier Handgriffe mit laengerem Text (Weg der Kilometer). */
.schritte.lang p { font-size: 15px; }

/* Kacheln in gleicher Hoehe, drei je Zeile: die Faelligkeit auf /funktionen, die
   Nachbarseiten auf /fragen, die sechs Ratgeber und das Weiterlesen. */
.raster.drei, .raster.gleich { grid-template-rows: auto; }
.raster.drei .karte p, .raster.gleich .karte p { max-width: none; }
.raster.drei .karte-verweis { min-height: 14rem; }
.raster.gleich .karte { justify-content: flex-start; text-decoration: none; }
.raster.gleich .karte .kennzeichnung { margin-bottom: 14px; }
.raster.gleich .karte h3 { font-size: clamp(20px, 1.8vw, 24px); }
.raster.gleich .karte .karte-text { display: flex; flex-direction: column; flex: 1; }
.raster.gleich .karte .karte-text .pille { margin-top: auto; }
.raster.gleich .karte .karte-text .pille { padding-top: 6px; padding-bottom: 6px; margin-top: 22px; }

/* ---------- Ratgeber-Artikel (seit 17.09.2026, vorher stil.css) ----------
   Kopfkarte mit Rubrik, Lesezeit und Stand; das Blatt mit dem Inhaltsverzeichnis links
   (auf dem Desktop mitlaufend) und dem Text rechts im gewohnten Satzspiegel von 44rem. */
.artikel-kopf h1 { font-size: clamp(30px, 4.4vw, 52px); max-width: 26ch; }

.artikel-raster { display: grid; gap: 32px; }
@media (min-width: 900px) { .artikel-raster { grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; } }

.inhalt { border: 1px solid var(--linie); border-radius: 20px; padding: 20px 22px; background: var(--grund); }
@media (min-width: 900px) { .inhalt { position: sticky; top: 24px; } }
.inhalt .kennzeichnung { margin-bottom: 10px; }
.inhalt ol { margin: 0; padding: 0; list-style: none; counter-reset: punkt; display: grid; gap: 8px; }
.inhalt li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0 6px; font-size: 14px; line-height: 1.45; }
.inhalt li::before { counter-increment: punkt; content: "0" counter(punkt); font-family: var(--mono); font-size: 11px; color: var(--text-gedaempft); padding-top: 3px; }
.inhalt a { text-decoration: none; color: var(--text-gedaempft); border-bottom: 1px solid var(--linie); }
.inhalt a:hover { color: var(--text); border-color: var(--linie-stark); }

.artikel { max-width: 44rem; }
.artikel h2 { font-size: var(--schrift-zwischen); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; margin: 44px 0 12px; padding-top: 22px; border-top: 1px solid var(--linie); }
.artikel h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.artikel h3 { font-size: var(--schrift-text); font-weight: 600; margin: 22px 0 6px; }
.artikel p { margin: 0 0 14px; }
.artikel ul { margin: 0 0 14px; padding-left: 20px; }
.artikel li { margin: 0 0 8px; }
.artikel a { color: inherit; }
.artikel .hinweis { border-left: 2px solid var(--linie-stark); padding: 2px 0 2px 16px; margin: 0 0 20px; color: var(--text-gedaempft); }
.artikel .hinweis p:last-child { margin-bottom: 0; }

/* Tabellen lesen sich wie Fliesstext; gegen zu breite hilft das Scrollen, nicht kleinere Schrift. */
.artikel table { width: 100%; border-collapse: collapse; margin: 0 0 16px; display: block; overflow-x: auto; }
.artikel th { text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-gedaempft); font-weight: 500; padding: 0 12px 8px 0; border-bottom: 1px solid var(--linie-stark); }
.artikel td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.artikel td.wert { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Haeufige Fragen am Artikelende, statisch (die Auszeichnung traegt der Kopf). */
.artikel .fragen-statisch > div { padding: 14px 0; border-top: 1px solid var(--linie); }
.artikel .fragen-statisch > div:first-child { border-top: 0; padding-top: 0; }
.artikel .fragen-statisch h3 { margin: 0 0 6px; }
.artikel .fragen-statisch p { margin: 0; color: var(--text-gedaempft); }

/* Schrittfolge im Artikel (in stil.css hiess sie `schritte`; der Name ist hier vergeben). */
.artikel .ablauf { list-style: none; counter-reset: schritt; margin: 22px 0; padding: 0; }
.artikel .ablauf > li { counter-increment: schritt; display: grid; grid-template-columns: 2.4rem 1fr; gap: 0 14px; padding: 14px 0; margin: 0; border-top: 1px solid var(--linie); }
.artikel .ablauf > li:last-child { border-bottom: 1px solid var(--linie); }
.artikel .ablauf > li::before { content: counter(schritt, decimal-leading-zero); font-family: var(--mono); font-size: var(--schrift-auszeichnung); color: var(--text-gedaempft); font-variant-numeric: tabular-nums; padding-top: 3px; }
.artikel .ablauf b { display: block; margin-bottom: 2px; }
.artikel .ablauf p:last-child { margin-bottom: 0; }

/* Gegenueberstellung: Farbe traegt nur die Problemspalte, in der Ampelfarbe. */
.artikel .gegenueber { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 26px 0; }
.artikel .spalte { border-top: 3px solid var(--linie-stark); padding-top: 14px; }
.artikel .spalte.ohne { border-top-color: var(--faellig); }
.artikel .spalte h3 { font-family: var(--mono); font-size: var(--schrift-auszeichnung); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--text-gedaempft); margin: 0 0 10px; }
.artikel .spalte.ohne h3 { color: var(--faellig); }
.artikel .spalte ul { list-style: none; padding: 0; margin: 0; }
.artikel .spalte li { display: flex; gap: 9px; margin-bottom: 7px; }
.artikel .spalte li::before { content: "–"; font-family: var(--mono); color: var(--text-leise); flex: none; }
.artikel .spalte.ohne li::before { content: "×"; color: var(--faellig); }
@media (max-width: 560px) { .artikel .gegenueber { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- Grenzen: je Grenze ein Blatt, Aussage links, Punkte rechts ---------- */
.grenze .zwei { margin-top: 6px; }
.grenze .grenzen li { max-width: none; }
.grenze .grenzen li:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 899px) { .grenze .grenzen li:first-child { border-top: 1px solid var(--linie); padding-top: 18px; } }
.grenze .folge:last-child { margin-bottom: 0; }

/* ---------- Bewegung ----------
   Einblenden beim Laden per Keyframes, beim Scrollen ueber die View-Timeline — ohne
   JavaScript. Browser ohne animation-timeline zeigen alles sofort. */
@keyframes auftauchen {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

.abzeichen, .held h1, .held .vorspann, .held .knopfreihe, .held .standzeile, .glas, .ecke, .held-geraet, .tablet {
  animation: auftauchen 0.7s ease-out both;
}
.held h1 { animation-delay: 0.1s; }
.held .vorspann { animation-delay: 0.2s; }
.held .knopfreihe, .held .standzeile { animation-delay: 0.3s; }
.held-geraet, .tablet { animation-delay: 0.3s; }
.glas { animation-delay: 0.35s; }
.ecke { animation-delay: 0.45s; }

@supports (animation-timeline: view()) {
  .auftauchen {
    animation: auftauchen linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
}

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