/* Web-App friends4horses.de/stall (src/routes/horsesWeb.js liefert diese
   Datei unter /stall/stil.css). Sie ergaenzt den Stil der statischen Seite
   (/stil.css, Friends4horses/website/stil.css) und nutzt dessen Farben -
   eine zweite Palette waere eine zweite Marke. Waldgruen fuer Flaechen und
   Knoepfe, Gold nur als Linie und Etikett-Rand, nie als Flaeche.
   Liegt NICHT in website/: sonst kopierte das Deploy sie mit, und nginx
   lieferte sie unter einer zweiten Adresse statisch aus. */
.web { background: var(--papier); }
.web-seite { padding: 28px 0 72px; }
.web h1 { margin: 0; max-width: none; font-size: clamp(2rem, 6vw, 3.2rem); letter-spacing: -.045em; line-height: 1.05; }
.web .h1-zusatz { font-size: clamp(1.3rem, 3.6vw, 2rem); }
.web h2 { margin: 0 0 12px; font-size: 1.35rem; letter-spacing: -.025em; line-height: 1.2; }
.web h3 { margin: 22px 0 8px; font-size: 1.05rem; }
.web-kopf { padding: 12px 0 24px; }
.web-mitte { max-width: 640px; margin: 0 auto; padding-top: clamp(32px, 7vw, 80px); text-align: center; }
.kern-text { margin: 10px 0 0; color: var(--leise); font-size: clamp(1.05rem, 2vw, 1.25rem); }
.web-abschnitt { margin-top: 28px; }

.web-knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border-radius: 999px; background: var(--wald); color: var(--papier); font-weight: 600; text-decoration: none; }
.web-knopf:hover { background: #17301f; }
.web-knopf-gross { margin-top: 18px; font-size: 1.05rem; }
button:focus-visible, .web-knopf:focus-visible { outline: 3px solid var(--wald); outline-offset: 3px; }
.web-meldung { margin: 16px 0; padding: 12px 16px; border-left: 3px solid var(--gold); border-radius: 12px; background: var(--karte); color: var(--tinte); }

.plus-karte, .konto-karte, .daten-karte, .web-leer { margin: 18px 0; padding: 22px 24px; border: 1px solid var(--linie); border-radius: 22px; background: var(--karte); }
.plus-karte { border-top: 3px solid var(--gold); }
.plus-karte p, .konto-karte p { margin: 4px 0 0; }
.emoji-code { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie); }
.emoji-code .code-text { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.05em; letter-spacing: .04em; overflow-wrap: anywhere; user-select: all; }
.web-leer p { margin: 0; color: var(--leise); }

.stall-liste { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 12px 0; padding: 0; }
.pferd-karte { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "bild bild bild" "foto text rolle"; align-items: center; gap: 0 12px; padding: 8px 8px 16px; border: 1px solid var(--linie); border-radius: 22px; background: var(--karte); color: var(--tinte); text-decoration: none; }
.pferd-karte:hover { border-color: var(--wald); }
.pferd-karte:focus-visible, .weiter-zeile:focus-visible { outline: 3px solid var(--wald); outline-offset: 3px; }
.pferd-titelbild { grid-area: bild; display: block; overflow: hidden; height: 120px; border-radius: 16px; background: linear-gradient(135deg, rgba(31, 61, 43, .16), rgba(176, 141, 87, .18)); }
.pferd-titelbild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pferd-titelbild.gross { height: clamp(140px, 28vw, 300px); border-radius: 22px; }
.pferd-foto { grid-area: foto; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; width: 64px; height: 64px; margin: -28px 0 0 8px; border: 3px solid var(--karte); border-radius: 50%; background: var(--papier); }
.pferd-foto img { width: 100%; height: 100%; object-fit: cover; }
.pferd-foto.gross { flex: none; width: 96px; height: 96px; margin: 0; }
.pferd-initiale { color: var(--wald); font-size: 1.6rem; font-weight: 700; }
.pferd-text { grid-area: text; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 10px; }
.pferd-name { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.pferd-unter { margin: 0; color: var(--leise); font-size: .95rem; }
.pferd-karte > .etikett { grid-area: rolle; margin: 10px 8px 0 0; }
.etikett { display: inline-block; padding: 3px 10px; border: 1px solid var(--linie); border-radius: 999px; background: var(--papier); color: var(--tinte); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.etikett-gold { border-color: var(--gold); white-space: normal; }
.pferd-kopf { margin-bottom: 8px; }
.pferd-kopf-zeile { display: flex; align-items: center; gap: 18px; margin: -36px 0 0 18px; }
.pferd-kopf-zeile h1 { margin-top: 30px; }
.pferd-kopf-zeile p { margin: 6px 0 0; }

.daten { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 24px; margin: 0; }
.daten div { padding-bottom: 8px; border-bottom: 1px solid var(--linie); }
.daten dt { color: var(--leise); font-size: .85rem; }
.daten dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.weiter-zeile { display: flex; flex-direction: column; gap: 2px; min-height: 64px; padding: 16px 22px; border: 1px solid var(--linie); border-radius: 20px; background: var(--karte); color: var(--tinte); font-weight: 600; text-decoration: none; }
.weiter-zeile:hover { border-color: var(--wald); }

.wert-kacheln { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 0; padding: 0; }
.wert-kachel { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--linie); border-radius: 16px; background: var(--papier); }
.wert-kachel.auffaellig { border-color: #cf4d5b; }
.wert-name { color: var(--leise); font-size: .85rem; }
.wert-zahl { font-size: 1.3rem; font-weight: 700; }
/* Rot nur als Schrift auf Papier mit 4,6:1 - dunkler als die Markenfarbe #CF4D5B (3,9:1). */
.wert-hinweis { color: #a8333f; font-size: .85rem; font-weight: 600; }
.angabe { display: block; }
.einfach { margin: 6px 0 0; padding-left: 20px; }
.web table { margin-top: 4px; }
@media (max-width: 720px) {
  .plus-karte, .konto-karte, .daten-karte, .web-leer { padding: 18px 16px; border-radius: 18px; }
  .pferd-kopf-zeile { flex-direction: column; align-items: flex-start; gap: 4px; margin: -40px 0 0 12px; }
  .pferd-kopf-zeile h1 { margin-top: 8px; }
  .web th, .web td { padding: 8px 6px; font-size: .9rem; }
}

/* ------------------------------------------------------------ Komplett */

/* Sprung zum Inhalt: erst sichtbar, wenn er den Fokus hat (Tastatur). */
.sprung { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 10px 16px; border-radius: 12px; background: var(--wald); color: var(--papier); font-weight: 600; }
.sprung:focus { top: 8px; }

/* Leiste: die Hauptbereiche wie die Reiter der App. Auf dem Handy eine eigene
   Zeile mit fuenf gleich breiten Feldern - kein seitliches Scrollen. */
.web .leiste-innen { flex-wrap: wrap; height: auto; min-height: 52px; row-gap: 0; }
.reiter { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.reiter-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; border-radius: 999px; color: var(--leise); font-size: .9rem; font-weight: 600; text-decoration: none; }
.reiter-link:hover { color: var(--tinte); }
.reiter-link.aktiv { background: var(--wald); color: var(--papier); }
.reiter-link:focus-visible, .weiter-zeile:focus-visible, .wahl-link:focus-visible, .beitrag-karte:focus-visible, .uebung-karte:focus-visible, .umschalter a:focus-visible, .pfeil:focus-visible, .monat a:focus-visible, .eintrag-link:focus-visible { outline: 3px solid var(--wald); outline-offset: 2px; }
@media (max-width: 720px) {
  .web .leiste-innen { padding-top: 6px; }
  /* Die Website blendet den Namen auf schmalen Handys aus (stil.css); hier
     steht in der ersten Zeile nur die Marke, Platz ist genug. */
  .web .marke { min-height: 40px; font-size: 1rem; gap: 8px; }
  .reiter { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; width: 100%; padding-bottom: 6px; }
  .reiter li { display: flex; }
  .reiter-link { flex: 1; padding: 0 2px; font-size: .8rem; }
}

.web-meldung.ok { border-left-color: var(--wald); }
.web-meldung.fehler { border-left-color: #a8333f; color: #8a2632; font-weight: 600; }
/* Nach dem Loeschen: Satz links, Rueckgaengig rechts - auf dem Telefon untereinander statt gequetscht. */
.web-rueckgaengig { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.schmal { max-width: 760px; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0; }
.knopf-form { display: inline-block; margin: 0; }
button.web-knopf { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
abbr[title] { text-decoration: none; }
.web-knopf.web-knopf-leise { border: 1px solid var(--wald); background: var(--karte); color: var(--wald); }
.web-knopf.web-knopf-leise:hover { background: var(--papier); }
/* Rot nur als Schrift und Rand (4,6:1 auf Papier) - eine rote Flaeche waere eine zweite Primaerfarbe. */
.web-knopf.web-knopf-gefahr { border: 1px solid #a8333f; background: var(--karte); color: #8a2632; }
.web-knopf.web-knopf-gefahr:hover { background: #fbeef0; }
.web-knopf-klein { min-height: 40px; padding: 6px 14px; font-size: .9rem; }
.gefahr-karte { border-color: #e3b8bf; }
.karte-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 8px; }
.karte-kopf h2 { margin: 0; }
.pfeil { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--linie); border-radius: 999px; color: var(--wald); font-size: 1.4rem; text-decoration: none; }

/* Formulare: Label ueber dem Feld, ganze Breite, 44 px Zielgroesse. */
.formular fieldset, fieldset.daten-karte { min-width: 0; }
fieldset.daten-karte legend, .eingabe-gruppe legend { padding: 0 4px; font-size: 1.1rem; font-weight: 700; }
.eingabe { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; }
.eingabe label { font-weight: 600; }
.eingabe input, .eingabe select, .eingabe textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #6f7a74; border-radius: 12px; background: #fff; color: var(--tinte); font: inherit; }
.eingabe textarea { min-height: 88px; resize: vertical; }
.eingabe input:focus-visible, .eingabe select:focus-visible, .eingabe textarea:focus-visible, .eingabe-wahl input:focus-visible, .eingabe-haken input:focus-visible { outline: 3px solid var(--wald); outline-offset: 1px; }
.eingabe-haken { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
.eingabe-haken input, .eingabe-wahl input { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--wald); }
.eingabe-haken .eingabe-hinweis { flex-basis: 100%; }
.eingabe-gruppe { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--linie); border-radius: 14px; }
.eingabe-wahl { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 16px 0 0; }
.eingabe-wahl label { font-weight: 500; }
.eingabe-hinweis { margin: 2px 0 0; color: var(--leise); font-size: .88rem; }
.filter-leiste { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 12px; margin: 8px 0; }
.filter-leiste .eingabe { flex: 1 1 180px; margin-bottom: 10px; }
.filter-leiste button { margin-bottom: 10px; }
.umschalter { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.umschalter a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--linie); border-radius: 999px; background: var(--karte); color: var(--tinte); font-weight: 600; text-decoration: none; }
.umschalter a.aktiv { border-color: var(--wald); background: var(--wald); color: var(--papier); }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.aufklapp { margin: 10px 0; }
.aufklapp summary { min-height: 44px; display: flex; align-items: center; color: var(--wald); font-weight: 600; cursor: pointer; }
.aufklapp summary:focus-visible { outline: 3px solid var(--wald); outline-offset: 2px; }

/* Listen von Eintraegen: Foto (falls da), Text, Knoepfe - auf dem Handy untereinander. */
.eintrag-liste, .aufgaben-liste { list-style: none; margin: 0; padding: 0; }
.eintrag, .aufgabe { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.eintrag:last-child, .aufgabe:last-child { border-bottom: 0; }
.eintrag-text { flex: 1 1 220px; min-width: 0; }
.eintrag-text p { margin: 2px 0; }
.eintrag-titel { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.eintrag-foto img { display: block; width: 96px; height: 96px; border-radius: 12px; object-fit: cover; }
.aufgabe .eintrag-foto img { width: 64px; height: 64px; }
.eintrag-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--wald); font-weight: 600; }
.aufgabe-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aufgabe.status-erledigt .eintrag-titel { color: var(--leise); text-decoration: line-through; }
.aufgabe-status { margin: 4px 0; }
.ration { font-size: .9rem; }
.frist { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--gold); background: var(--papier); border-radius: 8px; }
.vorschau { display: block; max-width: 100%; height: auto; margin: 8px 0; border-radius: 14px; }
.vorschau.rund { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.bild-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.bild-wahl h3 { margin-top: 0; }
.stall-liste.kompakt { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.wahl-liste { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.wahl-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--linie); border-radius: 999px; background: var(--papier); color: var(--tinte); font-weight: 600; text-decoration: none; }
.wahl-link:hover { border-color: var(--wald); }
.status-karte.gut, .status-zeile.gut { border-left: 4px solid var(--wald); }
.status-karte.achtung, .status-zeile.achtung { border-left: 4px solid var(--gold); }
.status-zeile { margin: 8px 0; padding: 6px 12px; }
.summen dd { font-size: 1.2rem; }
.tabelle-rollen { overflow-x: auto; }
.absatz { white-space: pre-line; }
.zusammenfassung { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--schrift); font-size: .95rem; margin: 0; padding: 12px; background: var(--papier); border-radius: 12px; }
.code-karte { margin: 0 0 14px; padding: 14px 16px; border: 2px solid var(--wald); border-radius: 16px; background: var(--papier); }
.code { margin: 4px 0; font-family: var(--mono); font-size: 1.8rem; font-weight: 700; letter-spacing: .12em; overflow-wrap: anywhere; }
.link-zeile code { overflow-wrap: anywhere; }
.muster.hervorgehoben { border-color: var(--gold); }
.stufen dt { font-weight: 700; margin-top: 8px; }
.stufen dd { margin: 2px 0 0; }

/* Kalender */
table.monat { width: 100%; table-layout: fixed; border-collapse: collapse; }
.monat th { padding: 6px 0; text-align: center; font-size: .85rem; color: var(--leise); }
.monat td { padding: 2px; text-align: center; vertical-align: top; }
.monat a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; border-radius: 12px; color: var(--tinte); text-decoration: none; }
.monat a:hover { background: var(--papier); }
.monat td.heute a { border: 2px solid var(--wald); }
.monat td.gewaehlt a { background: var(--wald); color: var(--papier); }
.tag-zahl { font-weight: 600; }
.tag-punkt { min-width: 20px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: var(--tinte); font-size: .72rem; font-weight: 700; line-height: 18px; }
.tag-punkt.fertig { background: var(--linie); }
.woche-liste { list-style: none; margin: 0; padding: 0; }
.woche-liste > li { padding: 10px 0; border-bottom: 1px solid var(--linie); }
.woche-liste > li.heute h3 a { color: var(--wald); }
.woche-liste h3 { margin: 4px 0; }

/* Ritte: Gangarten wie in der App - Schritt Waldgruen, Trab Gold, Galopp
   Rot, Stehen grau. Das sind Linien und Balken, keine Knoepfe. */
.gangart-leiste { display: block; width: 100%; height: 18px; border-radius: 9px; overflow: hidden; }
.gangart-stehen { fill: #9aa29e; stroke: #9aa29e; background: #9aa29e; }
.gangart-schritt { fill: #1f3d2b; stroke: #1f3d2b; background: #1f3d2b; }
.gangart-trab { fill: #b08d57; stroke: #b08d57; background: #b08d57; }
.gangart-galopp { fill: #cf4d5b; stroke: #cf4d5b; background: #cf4d5b; }
.gangart-einfarbig { stroke: #1f3d2b; }
/* Trainingsverlauf: Aktivitaeten in denselben Farben wie Aktivitaet.farbe
   der App (TrainingEinheitAnsichten.swift) - keine neue Farbe neben der Marke. */
.aktivitaet-ritt { fill: #1f3d2b; background: #1f3d2b; }
.aktivitaet-longieren { fill: #b08d57; background: #b08d57; }
.aktivitaet-bodenarbeit { fill: #cf4d5b; background: #cf4d5b; }
.aktivitaet-regeneration { fill: #3f4542; background: #3f4542; }
.verlauf-balken { display: block; width: 100%; height: 160px; }
.strecke { display: block; width: 100%; height: auto; max-height: 460px; background: var(--papier); border-radius: 14px; }
.strecke .linie { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.strecke .start { fill: var(--wald); stroke: #fff; stroke-width: 2; }
.strecke .ziel { fill: #cf4d5b; stroke: #fff; stroke-width: 2; }
.punkt { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }
.punkt.start { background: var(--wald); }
.punkt.ziel { background: #cf4d5b; }
.punkt.jahr { background: var(--wald); }
.punkt.vorjahr { background: var(--linie); }
.legende { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.balken { display: block; width: 100%; height: auto; }
.balken-jahr { fill: var(--wald); }
.balken-vorjahr { fill: var(--linie); }
.balken-text { fill: var(--leise); font-size: 9px; }
.stufe-hoch { color: #8a2632; font-weight: 700; }
.stufe-mittel { color: #6b4f20; font-weight: 600; }
.warnung { margin: 10px 0; padding: 10px 14px; border-left: 4px solid var(--gold); background: var(--papier); border-radius: 10px; }
.warnung.stufe-severe, .warnung.stufe-extreme { border-left-color: #a8333f; }

/* Akademie und Reituebungen */
.beitrag-raster, .uebung-raster { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 12px 0; padding: 0; }
.beitrag-karte, .uebung-karte { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 10px; border: 1px solid var(--linie); border-radius: 18px; background: var(--karte); color: var(--tinte); text-decoration: none; }
.beitrag-karte:hover, .uebung-karte:hover { border-color: var(--wald); }
.beitrag-karte img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
.beitrag-bild { margin: 12px 0; }
.beitrag-bild img { width: 100%; height: auto; border-radius: 18px; }
.text-bloecke { margin: 12px 0; }
.skizze { display: block; width: 100%; max-height: 220px; }
.skizze-gross .skizze { max-height: 420px; }
.skizze-bahn { fill: #efe7d6; stroke: var(--leise); stroke-width: .2; }
.skizze-weg { fill: none; stroke: var(--wald); stroke-width: .35; stroke-dasharray: .8 .5; }
.skizze-pfeil { fill: var(--wald); }
.skizze-stange, .skizze-cavaletti, .skizze-kreuz, .skizze-hindernis { stroke: #8a2632; stroke-width: .5; stroke-linecap: round; }
.skizze-cavaletti { stroke-width: .8; }
.skizze-hindernis { stroke: var(--tinte); stroke-width: .8; }
.skizze-pylone { fill: #b08d57; }

/* Equidenpass */
.pass-seiten { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 10px 0; padding: 0; }
.pass-seite img { display: block; width: 100%; height: auto; border: 1px solid var(--linie); border-radius: 10px; }
.pdf-seite { display: flex; align-items: center; min-height: 120px; padding: 12px; border: 1px dashed var(--leise); border-radius: 10px; color: var(--wald); font-weight: 600; }

/* Foto melden: leise unter dem Foto, nicht als Knopfflaeche - wie "Melden"
   im Vollbild der App ein Weg fuer den seltenen Fall, kein Aufruf. 44 px
   hoch, damit er auf dem Telefon trotzdem zu treffen ist. */
.foto-melden { display: inline-flex; align-items: center; min-height: 44px; color: var(--leise); font-size: .92rem; text-decoration: underline; text-underline-offset: 3px; }
.foto-melden:hover { color: var(--tinte); }
.foto-melden:focus-visible { outline: 3px solid var(--wald); outline-offset: 2px; }
.foto-melden-zeile { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 4px 0 0 18px; }
.foto-melden-vorschau { max-height: 240px; width: auto; }
.foto-melden-formular .eingabe-wahl { display: flex; margin-right: 0; }

/* Anmelden und Registrieren (zugang-*.ejs): schmal wie ein Formular der App. */
.zugang { max-width: 560px; }
.zugang-mitte { justify-content: center; }
.umbruch { overflow-wrap: anywhere; }
/* Falle fuer Bots (isLikelyBotRegistrationSubmission): fuer Menschen
   unsichtbar und nie per Tab erreichbar - ein Bot fuellt sie trotzdem aus.
   Als Klasse, nicht als style-Attribut: die CSP erlaubt keinen Inline-Stil. */
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Registrieren in Schritten (zugang-registrieren.ejs): oben "Schritt n von 5"
   in Gold - Beschriftung, die eine Rolle, die Gold in der Marke hat -, aber
   abgedunkelt: #B08D57 hat auf Papier nur 2,8:1, #806230 hat 5,1:1. Darunter
   der Balken in Waldgruen wie das ProgressView der App. */
.schritt-kopf h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.schritt-zahl { margin: 14px 0 6px; color: #806230; font-size: .9rem; font-weight: 700; letter-spacing: .02em; }
.schritt-balken { display: block; width: 100%; height: 8px; border: 0; border-radius: 999px; background: var(--linie); overflow: hidden; -webkit-appearance: none; appearance: none; }
.schritt-balken::-webkit-progress-bar { border-radius: 999px; background: var(--linie); }
.schritt-balken::-webkit-progress-value { border-radius: 999px; background: var(--wald); }
.schritt-balken::-moz-progress-bar { border-radius: 999px; background: var(--wald); }
.web .schritt-titel { margin: 20px 0 0; }
/* "Weiter" steht im Quelltext zuerst (Eingabetaste), angezeigt rechts von "Zurück". */
.schritt-knoepfe { flex-direction: row-reverse; justify-content: flex-end; }
.schritt-knoepfe .web-knopf { flex: 1 1 160px; }
.schritt-abbrechen { margin: 0 0 12px; }
/* Haken und Satz in einer Zeile, auch auf dem Telefon - sonst stuende der
   Kasten allein ueber seinem Satz. */
.schritt-zustimmungen .eingabe-haken { flex-wrap: nowrap; align-items: flex-start; }
.schritt-zustimmungen .eingabe-haken input { flex: 0 0 22px; margin-top: 2px; }
.schritt-zustimmungen .eingabe-haken label { flex: 1 1 auto; min-width: 0; font-weight: 500; }
.eingabe input[readonly] { border-style: dashed; background: var(--papier); color: var(--leise); }

/* Sprachwahl unter dem Fuss: dieselben Tap-Ziele wie die Fusslinks (stil.css
   "footer a", 44 px), die aktive Sprache dunkler und fett - nicht nur
   farbig, sonst saehe sie fuer Farbenblinde aus wie die andere. */
footer .sprachwahl { border-top: 1px solid rgba(27, 31, 29, .08); margin-top: 4px; }
footer .sprachwahl a[aria-current="true"] { color: var(--tinte); font-weight: 700; }