/* friendlyHelper · Website, Richtung B „eigene Website-Richtung"
   (Entscheidung des PO vom 01.10.2026, Nachtrag zu ADR-0006). Die App
   bleibt bei der Blaupause; die Website darf in Schrift und Farbfläche
   abweichen, damit sie sich für Nachbarn ohne Technikbezug leicht liest.

   Inter liegt lokal in assets/fonts/ (aus fonts/Inter-*.ttf im Repo, auf
   die lateinische Zeichenmenge reduziert, Lizenz SIL OFL 1.1 in den
   Metadaten der Dateien). Bewusst nicht von Google Fonts oder einem CDN:
   Das Einbinden von Google Fonts ohne Einwilligung gilt in Deutschland
   als Datenschutzverstoss (LG Muenchen I, 20.01.2022, 3 O 17493/20). Die
   Datenschutzerklaerung verspricht genau das, und das Versprechen bleibt
   gueltig.

   IBM Plex Mono bleibt nur fuer die Startanimation (Bondruck der App).
   Der Browser laedt eine Schrift erst, wenn sie gebraucht wird; wer die
   Animation nicht sieht, laedt Plex Mono nicht. */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Kontrast jeweils gegen --grund, gerechnet nach WCAG 2.x. */
  --grund: #fbf7f1;
  --karte: #ffffff;
  --tinte: #1e2a2f; /* 14,1 : 1 */
  --text-zweit: #3f4a50; /* 8,9 : 1 */
  --text-still: #5b6670; /* 5,6 : 1 */
  --linie: #e4dcd0; /* Dekor */

  /* Die eine Aktionsfarbe. Weisser Text darauf: 6,4 : 1. */
  --gruen: #2f6b4f;
  --gruen-hover: #255840;
  --gruen-flaeche: #e3ede6;
  --gruen-text: #234f3b;

  /* Warmer Akzent fuer Hinweise, nie fuer Aktionen. */
  --sand: #f3e3d3;
  --sand-text: #7a3a1c; /* 7,1 : 1 auf --sand */

  --fehler: #a5321e;
  --fehler-flaeche: #f7eae7;

  --schatten: 0 1px 2px rgba(30, 42, 47, 0.06), 0 8px 24px rgba(30, 42, 47, 0.06);
  --schatten-telefon: 0 28px 56px rgba(30, 42, 47, 0.22);

  --lesebreite: 44rem;
  --seitenbreite: 1120px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
}

/* Lesespalte der Rechtsseiten. */
.huelle {
  max-width: var(--lesebreite);
  margin: 0 auto;
  padding: 0 20px;
}

/* Seitenbreite der Startseite, Kopf und Fuss. */
.breit {
  max-width: calc(var(--seitenbreite) + 40px);
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 768px) {
  .huelle,
  .breit {
    padding: 0 40px;
  }

  .breit {
    max-width: calc(var(--seitenbreite) + 80px);
  }
}

/* ---------------------------------------------------------------- Kopf */

header {
  padding: 14px 0;
}

header > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 32px;
}

.wortmarke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
  color: var(--tinte);
}

/* Das Zeichen: ein Quadrat in der Aktionsfarbe, rein dekorativ. */
.wortmarke::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--gruen);
  flex: none;
}

.wortmarke strong {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.wortmarke span {
  color: var(--text-still);
  font-size: 14px;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
}

nav a {
  color: var(--tinte);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  /* Trefferflaeche mindestens 44 px. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

nav a:hover {
  color: var(--gruen);
  text-decoration: underline;
  text-underline-offset: 4px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gruen);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------- Grundtypografie (Rechtsseiten) */

main.huelle {
  padding-top: 24px;
  padding-bottom: 48px;
}

h1,
h2,
h3 {
  color: var(--tinte);
  font-weight: 600;
}

h1 {
  font-size: clamp(26px, 7vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
}

h2 {
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 40px 0 12px;
}

h3 {
  font-size: 18px;
  line-height: 1.35;
  margin: 28px 0 8px;
}

p {
  margin: 0 0 14px;
}

main.huelle p,
main.huelle li {
  max-width: 40rem;
}

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

a:hover {
  color: var(--tinte);
}

strong {
  font-weight: 600;
}

main.huelle ol,
main.huelle ul {
  padding-left: 0;
  list-style: none;
  counter-reset: absatz;
}

main.huelle ol > li {
  counter-increment: absatz;
  position: relative;
  padding: 6px 0 6px 34px;
}

main.huelle ol > li::before {
  content: counter(absatz) ".";
  position: absolute;
  left: 0;
  top: 6px;
  font-weight: 600;
  color: var(--text-still);
  font-variant-numeric: tabular-nums;
}

main.huelle ul > li {
  padding: 4px 0 4px 22px;
  position: relative;
}

main.huelle ul > li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.95em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gruen);
}

/* Lange deutsche Woerter (Geschaeftsbedingungen,
   Verbraucherstreitbeilegung) laufen auf dem Handy sonst ueber den Rand.
   Silbentrennung zuerst, Umbruch an beliebiger Stelle als Rueckfall. */
h1,
h2,
h3,
p,
li,
td,
th,
dd,
dt,
summary {
  overflow-wrap: anywhere;
  hyphens: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 16px 0 14px;
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

th,
td {
  text-align: left;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}

th {
  color: var(--text-zweit);
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--text-still);
}

/* Die Empfaengermatrix ist eine breite Texttabelle. Auf kleinen
   Bildschirmen scrollt sie waagerecht in ihrem eigenen Kasten. */
.tabellen-scroll {
  overflow-x: auto;
}

.empfaenger-tabelle {
  min-width: 900px;
}

.anschrift {
  margin-left: 16px;
  padding-left: 14px;
  border-left: 3px solid var(--linie);
}

/* Platzhalter, die vor dem Veroeffentlichen ersetzt werden muessen.
   Absichtlich unuebersehbar. */
.luecke {
  background: var(--fehler-flaeche);
  color: var(--fehler);
  border: 1px dashed var(--fehler);
  padding: 2px 6px;
  font-weight: 600;
  font-size: 14px;
}

.stand {
  color: var(--text-still);
  font-size: 14px;
}

.musterformular {
  max-width: 40rem;
  margin-top: 16px;
  padding: 20px;
  border-radius: 16px;
  background: var(--karte);
  box-shadow: var(--schatten);
}

.musterformular > :last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------ Startseite */

.abschnitt {
  padding: 56px 0;
}

.abschnitt--hell {
  background: var(--karte);
}

@media (min-width: 900px) {
  .abschnitt {
    padding: 96px 0;
  }
}

.abschnitt h2 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
}

.unterzeile {
  color: var(--text-still);
  font-size: 18px;
  margin: 0 0 32px;
}

.marke {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  padding: 6px 14px;
  border-radius: 14px;
  background: var(--sand);
  color: var(--sand-text);
  margin-bottom: 18px;
}

.marke--gruen {
  background: var(--gruen-flaeche);
  color: var(--gruen-text);
}

/* Einstieg: Text links, App-Ansicht im Telefonrahmen rechts. */
.einstieg {
  /* Nur oben und unten: den seitlichen Rand liefert .breit. */
  padding-top: 24px;
  padding-bottom: 56px;
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 900px) {
  .einstieg {
    grid-template-columns: 1fr 400px;
    gap: 72px;
    padding-top: 56px;
    padding-bottom: 96px;
  }
}

.einstieg h1 {
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: 0 0 22px;
}

.vorspann {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  color: var(--text-zweit);
  max-width: 36rem;
  margin: 0 0 28px;
}

.aufrufe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

/* Der eine Aufruf der Seite: Teilnahme am Pilotbetrieb anfragen. */
.aktion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 26px;
  border-radius: 12px;
  background: var(--gruen);
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.aktion:hover {
  background: var(--gruen-hover);
  color: #ffffff;
}

.nebenaktion {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 8px;
  color: var(--tinte);
  font-weight: 600;
}

@media (max-width: 520px) {
  .aktion {
    width: 100%;
  }
}

/* Zwei Wegweiser direkt unter dem Einstieg: eine Seite, zwei Zielgruppen. */
.wegweiser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 28px;
  max-width: 38rem;
}

.wegweiser a {
  display: block;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--karte);
  box-shadow: var(--schatten);
  color: var(--tinte);
  text-decoration: none;
}

.wegweiser a:hover {
  box-shadow: 0 0 0 2px var(--gruen), var(--schatten);
}

.wegweiser strong {
  display: block;
  margin-bottom: 2px;
}

.wegweiser span {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-still);
}

@media (max-width: 520px) {
  .wegweiser {
    gap: 10px;
  }

  .wegweiser a {
    padding: 14px;
  }
}

@media (max-width: 359px) {
  .wegweiser {
    grid-template-columns: 1fr;
  }
}

/* App-Ansicht im Telefonrahmen, auf einer warmen Flaeche. */
.buehne {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.buehne::before {
  content: "";
  position: absolute;
  inset: 36px 0 16px;
  border-radius: 36px;
  background: var(--sand);
}

.buehne--gruen::before {
  background: var(--gruen-flaeche);
}

.telefon {
  position: relative;
  width: min(300px, 76vw);
  padding: 10px;
  border-radius: 42px;
  background: var(--tinte);
  box-shadow: var(--schatten-telefon);
}

.telefon img {
  display: block;
  width: 100%;
  border-radius: 32px;
}

/* Der Feed endet nach zwei Auftraegen; darunter waere nur leeres Raster. */
.telefon--kurz img {
  aspect-ratio: 390 / 600;
  object-fit: cover;
  object-position: top;
}

/* Ablauf in vier Karten. */
.schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  counter-reset: schritt;
}

@media (min-width: 640px) {
  .schritte {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1040px) {
  .schritte {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

.schritte li {
  counter-increment: schritt;
  background: var(--grund);
  border-radius: 18px;
  padding: 22px 22px 24px;
}

.schritte li::before {
  content: counter(schritt);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gruen);
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 14px;
}

.schritte strong {
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
}

.schritte span {
  color: var(--text-zweit);
}

/* Fuer Helfer: App-Ansicht links, Text rechts. */
.zweispaltig {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 900px) {
  .zweispaltig {
    grid-template-columns: 360px 1fr;
    gap: 80px;
  }

  .zweispaltig--rechts {
    grid-template-columns: 1fr 440px;
    align-items: start;
  }
}

.punkte {
  display: grid;
  gap: 18px;
  margin: 8px 0 24px;
}

@media (min-width: 640px) {
  .punkte {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

.punkte p {
  margin: 0;
  color: var(--text-zweit);
}

.punkte strong {
  display: block;
  color: var(--tinte);
  font-size: 17px;
  margin-bottom: 2px;
}

.karte {
  background: var(--karte);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: var(--schatten);
}

.karte--zusage {
  border-left: 5px solid var(--gruen);
  margin-bottom: 18px;
}

.karte h3 {
  margin: 0 0 6px;
  font-size: 17px;
}

.karte p:last-child {
  margin-bottom: 0;
}

.klein {
  font-size: 15px;
  color: var(--text-still);
}

/* Kosten: drei Posten und ein gerechnetes Beispiel. */
.posten {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
}

.posten > div {
  background: var(--grund);
  border-radius: 14px;
  padding: 16px 20px;
}

@media (min-width: 640px) {
  .posten > div {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 2px 16px;
  }

  .posten dd {
    grid-column: 2;
  }
}

.posten dt {
  font-weight: 600;
}

.posten dd {
  margin: 0;
}

.posten dd + dd {
  font-size: 15px;
  color: var(--text-still);
}

.beispiel {
  background: var(--grund);
  border-radius: 22px;
  padding: 26px 24px;
}

@media (min-width: 640px) {
  .beispiel {
    padding: 30px 32px;
  }
}

.beispiel-titel {
  font-size: 14px;
  font-weight: 600;
  color: var(--sand-text);
  margin: 0 0 6px;
}

.rechnung {
  margin: 0 0 18px;
  font-size: 16px;
}

.rechnung caption {
  text-align: left;
  font-weight: 600;
  padding: 0 0 4px;
}

.rechnung th,
.rechnung td {
  border: 0;
  padding: 3px 0;
  color: var(--text-zweit);
  font-size: 16px;
  font-weight: 400;
}

.rechnung td {
  text-align: right;
  white-space: nowrap;
  padding-left: 12px;
}

.rechnung tfoot th,
.rechnung tfoot td {
  color: var(--tinte);
  font-weight: 600;
  border-top: 1px solid var(--linie);
  padding-top: 8px;
}

.rechnung--ergebnis tfoot th,
.rechnung--ergebnis tfoot td {
  font-size: 24px;
  letter-spacing: -0.01em;
}

.beispiel-bild {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: top;
  border-radius: 14px;
  margin-top: 16px;
}

/* Fragen und Antworten. */
.fragen {
  display: grid;
  gap: 12px;
}

.fragen details {
  background: var(--karte);
  border-radius: 16px;
  box-shadow: var(--schatten);
}

.fragen summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 14px 20px;
  font-size: 17px;
  font-weight: 600;
}

.fragen summary::-webkit-details-marker {
  display: none;
}

.fragen summary::after {
  content: "+";
  flex: none;
  font-size: 22px;
  line-height: 1;
  color: var(--gruen);
}

.fragen details[open] summary::after {
  content: "–";
}

.fragen details p {
  margin: 0;
  padding: 0 20px 18px;
  color: var(--text-zweit);
}

.fragen details p + p {
  padding-top: 0;
  margin-top: -6px;
}

@media (min-width: 900px) {
  .fragen-raster {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 72px;
  }
}

/* ----------------------------------------------------------------- Fuss */

footer {
  color: var(--text-still);
  font-size: 15px;
}

footer > div {
  position: relative;
  padding-top: 24px;
  padding-bottom: 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
}

footer nav {
  gap: 0 22px;
}

footer nav a {
  color: var(--text-zweit);
  font-size: 15px;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}

footer p {
  margin: 0;
}

/* Die Linie des Fusses steht in der Lesespalte bzw. Seitenbreite, nicht
   ueber die volle Fensterbreite. */
footer > .huelle::before,
footer > .breit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  border-top: 1px solid var(--linie);
}

@media (min-width: 768px) {
  footer > .huelle::before,
  footer > .breit::before {
    left: 40px;
    right: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ------------------------------------------------------- Start-Overlay
   Bewegungsspec „FriendlyHelper Bewegung.dc.html", Blatt D „Bondruck mit
   Übergabe": dieselbe Geste wie der Kaltstart-Launch-Screen der App, fürs
   Web auf eine einzige Wiedergabe verkürzt und auf Wunsch des PO
   (01.10.2026) halb so schnell wie in der App. Der Bon ist ein Stück App und
   traegt deshalb die Blaupause (Plex Mono, Tinte, Papier, ein Neonstrich),
   die Flaeche dahinter schon den warmen Grund der Website. Nur auf
   index.html, nur beim ersten Aufruf einer Sitzung (sessionStorage, kein
   Cookie, siehe Datenschutzerklärung).

   Sichtbar per Voreinstellung: Das kleine Kopf-Skript in index.html
   entscheidet *vor* dem ersten Bild, ob sie von vornherein wegbleibt.
   Ohne JavaScript bleibt sie über <noscript> ganz weg. */
html.keine-einfuehrung .start-overlay,
.start-overlay.start-verlassen {
  display: none;
}

.start-overlay {
  --bp-tinte: #11273b;
  --bp-papier: #eff2f3;
  --bp-linie: #b9c4ca;
  --bp-text-zweit: #3f5361;
  --bp-aktion: #e9ff3a;

  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grund);
  cursor: pointer;
  font-family: "IBM Plex Mono", "SF Mono", Menlo, "Roboto Mono", monospace;
}

.start-bon {
  width: 240px;
  padding: 22px 18px 20px;
  background: var(--bp-papier);
  border: 1px solid var(--bp-tinte);
  clip-path: inset(100% 0 0 0);
  animation: fh-feed 920ms linear both;
}

.start-wortmarke {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bp-tinte);
  opacity: 0;
  animation: fh-rise 400ms ease-out 300ms both;
}

.start-uebergabe {
  position: relative;
  height: 46px;
  margin-top: 18px;
}

.start-linie {
  position: absolute;
  left: 32px;
  right: 32px;
  top: 15px;
  height: 0;
  border-top: 2px dashed var(--bp-linie);
  transform: scaleX(0);
  transform-origin: left;
  animation: fh-sweep 500ms ease-out 500ms both;
}

.start-feld {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--bp-text-zweit);
  opacity: 0;
  animation: fh-rise 300ms ease-out both;
}

.start-feld::before {
  content: "";
  width: 26px;
  height: 26px;
  background: var(--bp-papier);
  border: 1px solid var(--bp-tinte);
}

.start-feld--du {
  left: 0;
  animation-delay: 500ms;
}

.start-feld--helferin {
  right: 0;
  animation-delay: 640ms;
}

.start-marke {
  position: absolute;
  left: 26px;
  top: 11px;
  width: 8px;
  height: 8px;
  background: var(--bp-tinte);
  border-radius: 50%;
  opacity: 0;
  /* Ein einziges Keyframe statt dreier kombinierter: mehrere Animationen
     auf derselben Eigenschaft (hier transform) ueberschreiben sich sonst
     browserabhaengig statt sich zu ergaenzen. */
  animation: fh-marke 600ms cubic-bezier(0.4, 0, 0.2, 1) 760ms both;
}

.start-haekchen {
  position: absolute;
  right: 10px;
  top: 2px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  color: var(--bp-tinte);
  opacity: 0;
  animation: fh-stempel 440ms cubic-bezier(0.2, 0.7, 0.2, 1) 1300ms both;
}

.start-neon {
  height: 3px;
  margin-top: 16px;
  background: var(--bp-aktion);
  transform: scaleX(0);
  transform-origin: left;
  animation: fh-sweep 440ms ease-out 1560ms both;
}

.start-trenner {
  margin-top: 16px;
  border-top: 1px dashed var(--bp-linie);
  opacity: 0;
  animation: fh-rise 320ms linear 1700ms both;
}

.start-slogan {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  line-height: 18px;
  color: var(--bp-text-zweit);
  opacity: 0;
  animation: fh-rise 400ms ease-out 1800ms both;
}

.start-ueberspringen {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  color: var(--text-still);
  background: none;
  border: none;
  cursor: pointer;
  min-height: 44px;
  padding: 0 12px;
}

.start-ueberspringen:hover,
.start-ueberspringen:focus-visible {
  color: var(--tinte);
}

@keyframes fh-feed {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes fh-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fh-sweep {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes fh-marke {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  8% {
    opacity: 1;
  }
  80% {
    opacity: 1;
    transform: translateX(158px);
  }
  100% {
    opacity: 0;
    transform: translateX(158px);
  }
}

@keyframes fh-stempel {
  0% {
    opacity: 0;
    transform: scale(1.35) rotate(-7deg);
  }
  60% {
    opacity: 1;
    transform: scale(0.97) rotate(-2.5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(-2deg);
  }
}

/* Sanftes Verlassen, wenn das Skript die Klasse setzt. */
.start-overlay {
  transition: opacity 520ms ease-in;
}

.start-overlay.start-schliesst {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .start-overlay {
    display: none !important;
  }
}

/* Scrollbare Tabellenrahmen sind per Tastatur erreichbar (tabindex) und
   zeigen den Fokus wie jedes andere Bedienelement. */
.tabellen-scroll:focus-visible {
  outline: 2px solid var(--gruen);
  outline-offset: 3px;
  border-radius: 4px;
}