/* ---------------------------------------------------------------
   TaxiChef — Website, Entwurf 3
   Weiß-first · ein Akzent (App-Grün) · mehrere Seiten statt Endlos-Scroll
   Zustand: NUR ausgeloggt (vor Anmeldung / vor Registrierung)
   --------------------------------------------------------------- */

:root {
  color-scheme: light;

  --weiss:   #ffffff;
  --flaeche: #f6f8f6;
  --gruen-hauch: #f0f7f2;
  --gruen-box:   #dcefe3;   /* die "hellgrüne Box" für Registrieren */
  --linie:   #e4eae5;
  --linie-stark: #cfd9d2;

  --tinte:        #0b1f16;
  --tinte-mittel: #3c4b43;
  --tinte-leise:  #64726a;

  --gruen:        #007840;
  --gruen-dunkel: #00602f;
  --gruen-hell:   #16a35c;

  --richtig:      #0f7a4a;
  --richtig-flur: #e9f6ee;
  --falsch:       #c0392f;
  --falsch-flur:  #fdeeec;
  --amber:        #a05f00;
  --amber-flur:   #fdf3e3;

  --schatten-klein: 0 1px 2px rgba(11,31,22,.06);
  --schatten:       0 4px 6px -2px rgba(11,31,22,.05), 0 10px 20px -6px rgba(11,31,22,.10);
  --schatten-gross: 0 12px 24px -8px rgba(11,31,22,.12), 0 30px 60px -20px rgba(0,120,64,.16);

  --r-klein: 8px;
  --r:       12px;
  --r-gross: 18px;

  --breite: 1120px;
  --kopf-hoehe: 64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--weiss);
  background-image: linear-gradient(
    to bottom,
    rgba(0, 120, 64, .075) 0%,
    rgba(0, 120, 64, .046) 25%,
    rgba(0, 120, 64, .019) 55%,
    rgba(0, 120, 64, 0)    100%
  );
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 780px;
  color: var(--tinte);
  font-family: 'Sora', system-ui, -apple-system, sans-serif;
  font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: 'Space Grotesk', system-ui, sans-serif; text-wrap: balance; margin: 0; letter-spacing: -.025em; line-height: 1.15; }
h1 { font-size: clamp(1.75rem, 4.6vw, 3.4rem); font-weight: 700; line-height: 1.08; }
h2 { font-size: clamp(1.55rem, 2.9vw, 2.25rem); font-weight: 700; }
h3 { font-size: 1.12rem; font-weight: 600; }
p { margin: 0; }
a { color: var(--gruen); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; border-radius: 6px; }

.huelle { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
@media (max-width: 560px) { .huelle { padding: 0 18px; } }
/* Die schmale Huelle traegt "Passwort vergessen".

   Die Klasse stand seit jeher im Markup, aber es gab keine Regel
   dazu. Sie tat also nichts, und das Eingabefeld war 1042 Pixel
   breit, waehrend es auf /anmelden 384 misst. Gemeldet am 10.09.2026:
   "alles tot breit bei pw vergessen".

   432 minus die 48 Pixel Innenabstand der Huelle ergibt 384, also
   genau die Breite des Feldes auf der Anmeldeseite. Dort kommt sie
   anders zustande, naemlich aus .an__innen mit 430 abzueglich des
   Kartenrandes; hier gibt es keine Karte, deshalb die Huelle. */
.huelle--schmal { max-width: 432px; }

/* Abschnittsmarken: schlicht gesetzt statt in einer Pille. Die umrandete
   Pille über jeder Überschrift ist der Standardgriff und sieht überall
   gleich aus. */
.etikett {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--gruen-dunkel);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: .79rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
}

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: 1.02rem;
  padding: 15px 30px; border-radius: var(--r);
  border: 1.5px solid transparent; text-decoration: none; cursor: pointer;
  transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.knopf--klein { font-size: .92rem; padding: 10px 20px; }
/* Der Bestätigungsknopf steht im dunkleren Grün, damit er sich von der
   grün gewählten Antwort darüber absetzt und als der Schritt lesbar ist,
   der die Antwort wirklich abschickt. */
.knopf--bestaetigen { background: var(--gruen-dunkel); color: #fff; box-shadow: var(--schatten-klein); }
.knopf--bestaetigen:hover:not(:disabled) { background: #004f27; }
.knopf--bestaetigen:disabled { background: var(--linie-stark); color: var(--tinte-leise); box-shadow: none; cursor: default; }
.knopf--haupt { background: var(--gruen); color: #fff; box-shadow: var(--schatten); }
.knopf--haupt:hover { background: var(--gruen-dunkel); transform: translateY(-1px); }
.knopf--rand { background: var(--weiss); color: var(--tinte); border-color: var(--linie-stark); box-shadow: var(--schatten-klein); }
.knopf--rand:hover { border-color: var(--gruen); color: var(--gruen-dunkel); }
/* Derselbe Ton wie der Registrieren-Knopf in der Kopfleiste, damit der Weg
   zum Konto überall gleich aussieht. */
.knopf--registrieren {
  background: var(--gruen-box); color: var(--gruen-dunkel); border-color: #c3e3d1;
  box-shadow: var(--schatten-klein);
  /* Breiter und flacher als die uebrigen Knoepfe. Ohne das lief die Seite nach
     unten spitz zu: Lernstrecke 900 px, Konto-Block 560 px, Knopf schmal. */
  width: min(430px, 100%); padding: 12px 28px;
}
.knopf--registrieren:hover { background: #cde8d8; border-color: var(--gruen); }

.hero__cta { margin-top: 30px; }

/* ============================== KOPF ==============================
   Drei Zonen: Marke ganz links am Rand · Reiter mittig · Konto ganz rechts
   ================================================================= */
.kopf {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.94);   /* deckender als zuvor: die Leiste bleibt weiß,
                                          der Grünverlauf darunter schlaegt nicht durch */
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linie);
}
.kopf__innen {
  display: flex; align-items: center; gap: 16px;
  height: var(--kopf-hoehe);
  padding: 0 18px;            /* dicht am Rand — bewusst KEINE zentrierte Hülle */
  width: 100%;
}

/* Die beiden Außenzonen bekommen denselben Breitenanteil (flex: 1 1 0).
   Dadurch liegt die Reiterleiste dazwischen exakt auf der Mitte der Leiste —
   unabhängig davon, dass "Anmelden + Registrieren" breiter baut als die Marke.
   Ohne das wandert die Mitte der Reiter zur schmaleren Seite. */
.kopf__zone { flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
.kopf__zone--rechts { justify-content: flex-end; gap: 8px; }

/* — Sprachwahl —
   Ein <details> statt eines eigenen Menüs: Auf- und Zuklappen kann der
   Browser selbst, samt Tastaturbedienung. */
/* — Begrüßungsschritt —
   Dieselbe Bühne wie Anmelden und Registrieren, damit der Schritt nicht
   wie eine fremde Seite wirkt, sondern wie der nächste Handgriff. */
.wk { padding: clamp(30px, 6vw, 64px) 0 clamp(44px, 7vw, 76px); }
.wk__innen { max-width: 440px; margin: 0 auto; }
.wk__kopf { text-align: center; }
.wk__kopf h1 { margin: 12px 0 0; font-size: clamp(1.5rem, 5vw, 1.95rem); }
.wk__kopf p { margin: 12px 0 0; color: var(--tinte-mittel); line-height: 1.6; }
.wk__karte {
  margin-top: 26px; padding: clamp(22px, 4vw, 30px);
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--r-gross); box-shadow: var(--schatten-klein);
}
.wk__karte .knopf { margin-top: 12px; }
.wk__spaeter {
  display: block; width: 100%; margin-top: 14px; padding: 6px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .88rem; color: var(--tinte-leise); text-decoration: underline;
}
.wk__spaeter:hover { color: var(--tinte); }

.sprachwahl { position: relative; flex-shrink: 0; }

/* — Der Verweis unter den Kontoformularen — */
.reg__vergessen { margin: 14px 0 0; text-align: center; font-size: .9rem; }
.reg__vergessen a { color: var(--gruen-dunkel); }
/* — Das Profilmenue oben rechts —
   Gleiches Muster wie die Sprachwahl: <details> mit eigener
   Gestaltung, damit kein Browser-Menue erscheint. Der Pfeil dreht
   sich beim Oeffnen, sonst weiss niemand, dass es aufklappt. */
.kontomenue { position: relative; flex-shrink: 0; }
.kontomenue > summary { list-style: none; cursor: pointer; }
.kontomenue > summary::-webkit-details-marker { display: none; }
.kontomenue__pfeil { width: 11px; height: 8px; flex-shrink: 0;
  color: var(--tinte-leise); transition: transform .18s ease; }
.kontomenue[open] .kontomenue__pfeil { transform: rotate(180deg); }
.kontomenue[open] > summary { border-color: var(--gruen); }
.kontomenue__liste {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 196px; padding: 6px;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--r); box-shadow: var(--schatten);
}
.kontomenue__punkt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px; border: 0; border-radius: 8px;
  background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: .9rem; color: var(--tinte); text-decoration: none;
}
.kontomenue__punkt svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--tinte-leise); }
.kontomenue__punkt:hover { background: var(--gruen-hauch); }
.kontomenue__punkt:hover svg { color: var(--gruen-dunkel); }
.kontomenue__punkt--knopf { margin-top: 4px; padding-top: 13px;
  border-top: 1px solid var(--linie); border-radius: 0 0 8px 8px; }
@media (prefers-reduced-motion: reduce) {
  .kontomenue__pfeil { transition: none; }
}

.sprachwahl__knopf {
  display: flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
  padding: 8px 12px; border: 1px solid var(--linie-stark); border-radius: 100px;
  background: var(--weiss); font-size: .88rem; color: var(--tinte);
  white-space: nowrap; transition: border-color .16s ease;
}
.sprachwahl__knopf::-webkit-details-marker { display: none; }
.sprachwahl__knopf:hover { border-color: var(--gruen); }
.sprachwahl__globus { width: 16px; height: 16px; flex-shrink: 0; color: var(--tinte-leise); }
.sprachwahl[open] .sprachwahl__knopf { border-color: var(--gruen); }
.sprachwahl__liste {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 180px; margin: 0; padding: 6px; list-style: none;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--r); box-shadow: var(--schatten);
}
.sprachwahl__liste button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 12px; border: 0; border-radius: 8px;
  background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: .9rem; color: var(--tinte);
}
.sprachwahl__liste button:hover { background: var(--flaeche); }
.sprachwahl__liste button[aria-current="true"] { background: var(--gruen-hauch); color: var(--gruen-dunkel); font-weight: 600; }
.sprachwahl__eigen { color: var(--tinte-leise); font-size: .82rem; }
.sprachwahl__liste button[aria-current="true"] .sprachwahl__eigen { color: var(--gruen-dunkel); }

/* — Rechts-nach-links —
   Nur für die Bereiche, die tatsächlich übersetzt sind. Der Werbetext
   der Seite bleibt deutsch und damit von links nach rechts; ihn zu
   spiegeln würde ihn unlesbar machen, nicht arabisch. */
.ist-rtl .reg__karte, .ist-rtl .reg__kopf,
.ist-rtl .an__karte, .ist-rtl .an__kopf,
.ist-rtl .wk__karte, .ist-rtl .wk__kopf { direction: rtl; text-align: right; }
.ist-rtl .sprachwahl__liste button { text-align: right; }
/* E-Mail und Passwort bleiben von links nach rechts: sie enthalten
   lateinische Zeichen, und ein gespiegeltes Adressfeld liest sich falsch. */
.ist-rtl input[type="email"],
.ist-rtl input[type="password"] { direction: ltr; text-align: left; }
.ist-rtl .feld__mit-knopf { flex-direction: row-reverse; }

.marke { display: flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0; }
/* Freistehendes Zeichen statt Kachel: der blaue Grund ist aus der Icon-Datei
   entfernt, die ausgesparten Stellen (Fenster, Dachschild, Radnabe) zeigen
   jetzt das Weiß der Seite. Höhe statt Breite festlegen — das Auto ist quer. */
.marke img { height: 27px; width: auto; display: block; }
.marke span {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700; font-size: 1.08rem; color: var(--tinte); letter-spacing: -.02em;
}

/* — Reiter, mittig, mit den Icons aus der App — */
.reiter { flex: 0 0 auto; display: flex; justify-content: center; align-items: center; gap: 4px; }
.reiter a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 100px;
  color: var(--tinte-mittel); text-decoration: none;
  font-size: .92rem; font-weight: 400; white-space: nowrap;
  transition: background-color .14s ease, color .14s ease;
}
.reiter a:hover { background: var(--gruen-hauch); color: var(--gruen-dunkel); }
.reiter a[aria-current="page"] { background: var(--gruen-hauch); color: var(--gruen-dunkel); font-weight: 500; }
.reiter svg { width: 19px; height: 19px; flex-shrink: 0; }


/* — Die Fusszeile steht unten, auch auf kurzen Seiten —

   Gemessen bei 1440 mal 1300: unter der Fusszeile von /anmelden
   standen 267 Pixel weisse Flaeche, bei /passwort-neu 324. Der
   Rumpf hatte keine Mindesthoehe, also folgte die Fusszeile
   einfach dem Inhalt und endete mitten im Bild.

   ACHTUNG, hier steckt ein Fallstrick, und mein erster Versuch ist
   hineingetreten: der Inhaltsblock sitzt NICHT ueberall gleich.
   Nachgezaehlt ueber alle 33 gebauten Seiten:

     12 Seiten   der Block steht INNERHALB von <main>
                 anmelden, app, index, konto, lernen, passwort-neu,
                 preise, registrieren, simulation, ueben, videokurs,
                 willkommen
     21 Seiten   der Block steht DANEBEN, weil </main> in der Quelle
                 schon vor den Rechts- und Fragenseiten geschlossen
                 wird

   Eine Regel auf <main> traefe also nur ein Drittel, eine Regel auf
   .seite nur zwei Drittel. Und beide zugleich waere falsch: auf den
   12 Seiten dehnten sich dann zwei Elemente und teilten sich den
   Platz, auf den 21 anderen dehnte sich ein leeres <main>.

   DESHALB WAECHST HIER GAR NICHTS. Stattdessen schluckt die
   Fusszeile selbst den freien Rest, mit margin-top: auto. Das
   wirkt, egal wie viele Geschwister vor ihr stehen und wo der
   Inhalt sitzt, und kommt ohne :has() aus, das die Designsprache
   wegen aelterer Geraete verbietet. */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > .fuss { margin-top: auto; }
/* — Konto, ganz rechts, bewusst kleiner als die Reiter-Wirkung — */
.konto { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.konto a {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: .86rem; font-weight: 500; text-decoration: none;
  padding: 8px 16px; border-radius: var(--r-klein);
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.konto__anmelden {
  background: var(--weiss); color: var(--tinte);
  border: 1px solid var(--linie-stark);
}
.konto__anmelden:hover { border-color: var(--gruen); color: var(--gruen-dunkel); }
.konto__registrieren {
  background: var(--gruen-box); color: var(--gruen-dunkel);
  border: 1px solid transparent;
}
.konto__registrieren:hover { background: #cde8d8; border-color: var(--gruen); }


/* Kein lautloses Schrumpfen.
   Vorher hatten die Punkte flex-shrink: 1. Wurde es eng, warfen sie
   ihre Beschriftung ab, ohne dass etwas darauf hinwies: bei 1140
   Pixeln stand hinter "Videokurs" nur noch ein nacktes Symbol. Mit 0
   laeuft die Leiste im Notfall sichtbar ueber. Ein sichtbarer Fehler
   ist besser als ein unsichtbarer. */
.reiter > a { flex-shrink: 0; }
.burger {
  display: none; background: var(--weiss); border: 1px solid var(--linie-stark);
  border-radius: var(--r-klein); padding: 8px 10px; cursor: pointer;
  color: var(--tinte); font-size: 1rem; line-height: 1;
}

@media (max-width: 1400px) {
  .reiter {
    display: none; position: absolute; top: var(--kopf-hoehe); left: 0; right: 0;
    background: var(--weiss); flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 18px 16px; border-bottom: 1px solid var(--linie); box-shadow: var(--schatten);
  }
  .reiter.offen { display: flex; }
  .reiter a { padding: 13px 12px; border-radius: var(--r-klein); }
  .burger { display: block; order: 3; }
  .konto { order: 2; }
  .konto__anmelden { display: none; }   /* auf dem Handy bleibt nur der Hauptweg */
  .reiter__anmelden { display: flex !important; margin-top: 8px; justify-content: center;
    border: 1px solid var(--linie-stark); border-radius: var(--r-klein); }
}
@media (min-width: 1401px) { .reiter__anmelden { display: none !important; } }

/* — Kopfzeile auf dem Telefon —
   Oben bleiben nur Marke und Menüzeichen; Sprachwahl und Konto stehen
   im aufgeklappten Menü. Die Elemente werden dorthin verschoben (siehe
   „Kopfzeile aufräumen" im Skript), nicht verdoppelt. */
@media (max-width: 700px) {
  /* Im Menü: volle Breite, untereinander, gut mit dem Daumen zu treffen. */
  /* ----- Das Menü scrollt selbst -----
     Es hängt in der Kopfleiste, und die ist sticky: sie klebt beim
     Scrollen oben fest, also bleibt auch das Menü stehen. Was unten aus
     dem Fenster ragte, war dadurch nie erreichbar — am 16.09.2026 auf
     einem iPhone gemeldet, drei von sechs Sprachen nicht anklickbar.

     100vh wäre hier falsch: auf dem iPhone ist das die Höhe MIT
     eingeklappter Adressleiste, also mehr als gerade sichtbar. 100dvh
     ist die wirklich sichtbare Höhe. Die erste Zeile bleibt für
     Browser stehen, die dvh nicht kennen.

     Nur unter 700 px: darüber schwebt die Sprachliste als absolut
     gesetzter Kasten aus dem Menü heraus, und overflow würde sie
     abschneiden. */
  .reiter {
    max-height: calc(100vh - var(--kopf-hoehe));
    max-height: calc(100dvh - var(--kopf-hoehe));
    overflow-y: auto;
    /* Ist das Menü zu Ende gescrollt, soll nicht die Seite dahinter
       weiterrutschen. */
    overscroll-behavior: contain;
  }

  .reiter .sprachwahl { width: 100%; margin-top: 10px; }
  .reiter .sprachwahl__knopf { justify-content: center; padding: 12px; }
  .reiter .sprachwahl__liste {
    position: static; width: 100%; min-width: 0; margin-top: 6px;
    box-shadow: none;
  }
  .reiter .konto {
    display: flex; flex-direction: column; gap: 8px;
    width: 100%; margin-top: 10px;
    /* Beides überschreibt die Tablet-Regel weiter oben: dort steht
       `order: 2`, damit das Konto in der Kopfzeile vor dem Menüzeichen
       liegt — im Menü schöbe es die wichtigste Handlung unter die
       Sprachwahl. Und `align-items: center` ließe die Knöpfe auf ihre
       Textbreite schrumpfen statt die Zeile zu füllen. */
    order: 0; align-items: stretch;
  }
  .reiter .konto a { justify-content: center; padding: 13px 12px; }
  /* Die echte Kontozeile steht jetzt im Menü. Der Ersatzlink von vorher
     wäre daneben ein zweites „Anmelden". */
  .reiter__anmelden { display: none !important; }
  .reiter .konto__anmelden { display: flex !important; }
}

/* ============================== SEITEN ============================== */
.seite { display: none; }
.seite.aktiv { display: block; }

/* ============================== HERO ============================== */
.hero {
  /* kein eigener Hintergrund — hier scheint der Verlauf des Seitenkörpers durch */
  /* Unten bewusst viel Luft: der Hero steht fuer sich, der naechste
     Abschnitt beginnt erst nach einem Stueck Weissraum. */
  padding: clamp(40px, 5.5vw, 68px) 0 clamp(96px, 14vw, 180px);
  text-align: center;
}
/* Uebertitel im Kopf der Startseite. Kleine gruene Versalien wie jede
   Abschnittsmarke, nur groesser gesetzt, weil hier keine Ueberschrift
   darueber steht. display:block ist Pflicht: .etikett ist inline-flex,
   und auf schmalen Schirmen stuenden die zwei Teile sonst als zwei
   Spalten nebeneinander statt als ein Satz. */
.hero__marke { display: block; margin: 0 0 14px;
  font-size: clamp(.9rem, 1.35vw, 1.06rem); }
.hero h1 { margin: 0 auto; max-width: 24ch; }
.hero h1 em { font-style: normal; color: var(--gruen); }
.hero__lead { margin: 20px auto 0; max-width: 54ch; color: var(--tinte-mittel); font-size: clamp(1.04rem, 1.6vw, 1.22rem); line-height: 1.55; }
.hero__fein { margin-top: 15px; font-size: .85rem; color: var(--tinte-leise); display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; }


/* — Die Preisseite —
   Die Tafel ist dieselbe wie auf der Startseite und erbt deren
   ganze Gestaltung unveraendert: Breite, Spalten, Polster und die
   drei nachgemessenen Handystufen.

   KEINE EIGENE BREITE. Ich hatte sie hier auf 900 Pixel gesetzt,
   "weil sie auf dieser Seite die Hauptsache ist". Das war eine
   eigene Zutat, und sie hat einen Fehler erzeugt: gemessen bei 748
   Pixeln Fensterbreite fuellte der Behaelter damit die ganze
   Huelle (700 Pixel), waehrend die Tafel ihre Mindestbreite von 738
   nicht unterschreiten kann. Ergebnis: 38 Pixel Ueberstand und eine
   Seite, die sich waagerecht schieben liess. Auf der Startseite
   passiert das nicht, weil der Behaelter dort auf 820 begrenzt ist
   und der Tafel Luft laesst.

   NICHT in Karten aufloesen. Die Tafel bleibt auf jeder Breite
   vierspaltig. Sie war bei 375 Pixeln schon einmal 381 Pixel breit
   und hat die Seite waagerecht geschoben; die Regeln dagegen
   stehen bei .preis__tafel und sind nachgemessen. */
.preise__text { display: grid; gap: 26px; margin: 52px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.preise__punkt h2 { margin: 0 0 8px; font-size: 1.02rem; }
.preise__punkt p { margin: 0; font-size: .94rem; color: var(--tinte-mittel);
  line-height: 1.6; }
.preise__schutz { margin: 34px 0 0; padding-top: 22px;
  border-top: 1px solid var(--linie); font-size: .94rem;
  color: var(--tinte-mittel); }
.preise__schutz a { color: var(--gruen-dunkel); }
/* — Die Lernstrecke: drei Stufen, darunter der Kurs als Band —
   Lernen, Üben und Simulieren bauen wirklich aufeinander auf, deshalb sind sie
   nummeriert. Der Videokurs ist keine vierte Stufe, er begleitet alle drei,
   deshalb liegt er als durchgehendes Band darunter statt daneben. */
.strecke { max-width: 900px; margin: 32px auto 0; text-align: left; }
.strecke__stufen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.strecke__stufe {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-gross);
  padding: 20px 18px 18px; box-shadow: var(--schatten-klein);
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: inherit;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.strecke__stufe:hover { border-color: var(--gruen); box-shadow: var(--schatten); transform: translateY(-2px); }
.strecke__stufe:hover .strecke__pfeil { transform: translateX(3px); color: var(--gruen); }

/* Der Pfeil sitzt am rechten Rand der Kopfzeile und zeigt, dass die Kachel
   auf ihre eigene Seite führt. */
.strecke__pfeil {
  margin-left: auto; color: var(--linie-stark); font-size: 1.05rem; line-height: 1;
  transition: transform .16s ease, color .16s ease;
}

/* Aufzählung mit Punkten. Der Punkt steht als eigenes Zeichen davor, damit
   er grün sein kann und der Einzug stimmt. */
.strecke__punkte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.strecke__punkte li {
  position: relative; padding-left: 15px;
  font-size: .89rem; color: var(--tinte-mittel); line-height: 1.5;
}
.strecke__punkte li::before {
  content: '•'; position: absolute; left: 0; top: -1px;
  color: var(--gruen); font-size: 1.05rem; line-height: 1.5;
}
.strecke__punkte b {
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700;
  color: var(--gruen); font-variant-numeric: tabular-nums;
}
.strecke__nr {
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gruen-dunkel);
}
.strecke__stufe h3 { display: flex; align-items: center; gap: 10px; font-size: 1.06rem; }
.strecke__stufe h3 svg { width: 19px; height: 19px; color: var(--gruen); flex-shrink: 0; }
.strecke__stufe > p { font-size: .89rem; color: var(--tinte-mittel); }
/* Bewusst KEINE Volltonfläche: ein durchgehend grüner Balken zieht den Blick
   von den drei Stufen ab und liest sich schlechter. Heller Grund, grüner Rand,
   normale Textfarbe. */
.strecke__band {
  display: flex; align-items: flex-start; gap: 15px; margin-top: 12px;
  background: var(--gruen-hauch); border: 1px solid #cfe6da; border-radius: var(--r-gross);
  padding: 19px 22px; text-decoration: none; color: inherit;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.strecke__band:hover { border-color: var(--gruen); box-shadow: var(--schatten); transform: translateY(-2px); }
.strecke__band:hover .strecke__pfeil { transform: translateX(3px); color: var(--gruen); }
.strecke__band-marke {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: var(--weiss); border: 1px solid #cfe6da; color: var(--gruen-dunkel);
  display: grid; place-items: center;
}
.strecke__band-marke svg { width: 21px; height: 21px; }
.strecke__band-text { min-width: 0; }
.strecke__band-text b {
  display: block; font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600; font-size: 1.06rem; letter-spacing: -.015em; color: var(--gruen-dunkel);
}
.strecke__band-text span { display: block; margin-top: 4px; font-size: .9rem; color: var(--tinte-mittel); }
.strecke__band .strecke__pfeil { align-self: center; }
@media (max-width: 820px) {
  .strecke__stufen { grid-template-columns: 1fr; }
  .strecke__band { padding: 18px 20px; }
}

/* — Die drei Wege: der Behälter IST das Gerät —
   Kein Symbol in einem neutralen Kasten, sondern die Form selbst sagt, worum
   es geht: schmal und hoch ein Handy, quer mit Kopfleiste ein Browserfenster,
   quer im Kinoformat ein Video. Die gestrichelte Linie dahinter macht aus den
   dreien eine Kette statt drei Einzelteile. */
/* Breiter als zuvor (560 px), damit die drei Umrisse Luft bekommen. Die
   Verzweigung darüber ist auf die volle Breite gestreckt und trifft die
   Spaltenmitten dadurch von allein. */
.wege { width: 100%; max-width: 880px; margin: 36px auto 0; text-align: center; }
.wege__reihe {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  position: relative; align-items: end;
}

/* Der Knoten oben und die Verzweigung darunter zeigen, wofür das Konto gut
   ist: ein Zugang, drei Wege. preserveAspectRatio="none" streckt die
   Zeichnung auf die volle Breite, vector-effect hält die Strichstärke dabei
   konstant. Ohne das würden die waagerechten Teile dicker als die senkrechten. */
.wege__knoten {
  text-align: center;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600; font-size: .95rem; letter-spacing: -.01em;
  color: var(--gruen-dunkel);
}
.wege__aeste { display: block; width: 100%; height: 42px; }
.wege__aeste path {
  fill: none; stroke: var(--linie-stark); stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
/* Anklickbar und einzeln hervorgehoben, dieselbe Machart wie bei den
   Nachbildungen im Vorschau-Abschnitt. Der Schein liegt auf dem Verweis
   selbst, damit ein schlichtes :hover reicht und kein :has() nötig ist.
   Ruhend schwächer als unten, weil die Umrisse hier klein sind und drei
   kräftige Scheine nebeneinander unruhig wirken. */
.wege__teil {
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  position: relative; z-index: 1; text-decoration: none; color: inherit;
  padding: 8px 6px; border-radius: 14px;
  transition: transform .22s cubic-bezier(.2,.7,.25,1);
}
.wege__teil > * { position: relative; z-index: 1; }
.wege__teil::before {
  content: ''; position: absolute; left: 50%; top: 46%;
  width: 132%; height: 118%; transform: translate(-50%, -50%);
  pointer-events: none; z-index: 0; opacity: .55;
  background: radial-gradient(ellipse at center,
    rgba(0,120,64,.15) 0%,
    rgba(0,120,64,.07) 38%,
    rgba(0,120,64,.018) 58%,
    rgba(0,120,64,0) 76%);
  transition: opacity .28s ease, transform .28s ease;
}
.wege__teil:hover::before,
.wege__teil:focus-visible::before {
  opacity: 1; transform: translate(-50%, -50%) scale(1.22);
}
.wege__teil:hover, .wege__teil:focus-visible { transform: translateY(-5px); }
.wege__teil:hover .wege__form,
.wege__teil:focus-visible .wege__form { border-color: var(--gruen); }
.wege__teil:focus-visible { outline: 3px solid var(--gruen); outline-offset: 4px; }
.wege__teil > span:last-child {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: .95rem; font-weight: 600; white-space: nowrap;
}
.wege__form {
  background: var(--weiss); border: 1.5px solid var(--linie); border-radius: 8px;
  transition: border-color .18s ease;
  display: grid; place-items: center; box-shadow: var(--schatten-klein);
}
.wege__form--handy   { width: 52px; height: 82px; border-radius: 12px; }
.wege__form--fenster { width: 110px; height: 76px; }
.wege__form--video   { width: 110px; height: 66px; }
.wege__form svg { height: auto; }
.wege__form--handy svg   { width: 74%; }
.wege__form--fenster svg { width: 87%; }
.wege__form--video svg   { width: 87%; }
.wege__fuss {
  margin-top: 18px; text-align: center;
  font-size: .87rem; color: var(--tinte-leise);
}
@media (max-width: 760px) {
  .wege { max-width: 600px; }
  .wege__form--handy   { width: 44px; height: 68px; }
  .wege__form--fenster { width: 92px; height: 64px; }
  .wege__form--video   { width: 92px; height: 56px; }
  .wege__aeste { height: 36px; }
}
@media (max-width: 480px) {
  .wege { margin-top: 24px; }
  .wege__teil > span:last-child { font-size: .82rem; }
  .wege__teil { padding: 6px 2px; }
  .wege__form--handy   { width: 36px; height: 56px; }
  .wege__form--fenster { width: 74px; height: 52px; }
  .wege__form--video   { width: 74px; height: 46px; }
  .wege__aeste { height: 30px; }
}

/* — Auftritt beim Herunterscrollen —
   Die Karten kommen mit leichtem Überschwingen herein, dieselbe Bewegung, die
   die App beim Abschließen einer Lerneinheit benutzt. Nach 0,74 s ist alles da,
   niemand liest je eine halbfertige Seite.
   Wichtig: der Startzustand hängt an der Klasse "js", die das Skript setzt.
   Läuft das Skript nicht, bleibt alles sichtbar statt für immer verborgen. */
[data-auftritt].js .auftritt-kopf { opacity: 0; transform: translateY(10px); }
[data-auftritt].js .auftritt-karte { opacity: 0; transform: scale(.94); }
[data-auftritt].laeuft .auftritt-kopf {
  opacity: 1; transform: none;
  transition: opacity .34s ease-out, transform .34s ease-out;
}
[data-auftritt].laeuft .auftritt-karte {
  opacity: 1; transform: none;
  transition: opacity .3s ease-out, transform .46s cubic-bezier(.34,1.46,.64,1);
}
[data-auftritt].laeuft .auftritt-karte:nth-child(1) { transition-delay: .12s; }
[data-auftritt].laeuft .auftritt-karte:nth-child(2) { transition-delay: .2s; }
[data-auftritt].laeuft .auftritt-karte:nth-child(3) { transition-delay: .28s; }
/* Zweite Gangart, nur für "Was dich drinnen erwartet": die vier Karten
   steigen von unten herein statt zu wachsen, mit größerem Versatz. Vier Karten
   vertragen mehr Abstand als drei. Nach 0,88 s steht alles. */
[data-auftritt="steigen"].js .auftritt-karte { transform: translateY(24px); }
[data-auftritt="steigen"].laeuft .auftritt-kopf,
[data-auftritt="steigen"].laeuft .auftritt-karte {
  opacity: 1; transform: none;
  transition: opacity .44s ease-out, transform .5s cubic-bezier(.2,.7,.25,1);
}
[data-auftritt="steigen"].laeuft .auftritt-karte:nth-child(1) { transition-delay: .14s; }
[data-auftritt="steigen"].laeuft .auftritt-karte:nth-child(2) { transition-delay: .22s; }
[data-auftritt="steigen"].laeuft .auftritt-karte:nth-child(3) { transition-delay: .30s; }
[data-auftritt="steigen"].laeuft .auftritt-karte:nth-child(4) { transition-delay: .38s; }

@media (prefers-reduced-motion: reduce) {
  .auftritt-kopf, .auftritt-karte { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* — Sprachen mit Globus —
   Vor dem Auftritt steht der Globus allein in der Mitte des Abschnitts, der
   Text ist unsichtbar. Kommt der Abschnitt ins Bild, wandert der Globus auf
   seinen Platz links und der Text kommt daneben herein. Die Strecke dafür
   misst das Skript und legt sie in --mitte ab; ohne Skript steht alles
   sofort an seinem Platz. */
.sprachen { overflow: hidden; }
.sprachen__innen {
  display: grid; grid-template-columns: minmax(300px, 420px) 1fr;
  gap: 52px; align-items: center;
}
.sprachen__globus { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.sprachen__kugel { position: relative; display: grid; place-items: center; }

.sprachen__globus canvas {
  /* Größer als die Kugel: der freie Rand ist der Platz für den Schein,
     der auf der Fläche selbst gemalt wird. */
  width: min(420px, 88vw); height: min(420px, 88vw);
  cursor: grab; touch-action: pan-y;   /* senkrecht scrollen bleibt möglich */
}
.sprachen__globus canvas:active { cursor: grabbing; }
.sprachen__globus canvas:focus-visible { outline: 3px solid var(--gruen); outline-offset: 6px; }
.sprachen__ziehen { font-size: .8rem; color: var(--tinte-leise); }

.sprachen__text h2 { margin: 14px 0 0; }
.sprachen__text > p { margin-top: 16px; color: var(--tinte-mittel); font-size: 1rem; max-width: 54ch; }
/* Die Sprachen stehen im Satz, nicht in Kästchen. Hervorgehoben nur durch
   Schnitt und Farbe. */
.sprachen__namen { margin-top: 18px; font-size: 1.02rem; line-height: 1.85; color: var(--tinte-mittel); }
.sprachen__namen b {
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600;
  color: var(--gruen-dunkel);
}

/* Dieselben drei Geräte wie im Hero, in jedem eine andere Schrift. Die
   Aussage wird gezeigt statt behauptet: dasselbe Produkt, andere Sprache. */
/* Kein Raster mit gleich breiten Spalten, sondern eine Reihe mit festen
   Breiten. Im Raster war das Handy schmaler als seine Spalte und saß darin
   mittig; der Leerraum links und rechts kam optisch zum Spaltenabstand hinzu.
   Sichtbar waren dadurch 49 px zwischen Handy und Fenster, aber nur 14 px
   zwischen Fenster und Video. Mit festen Breiten ist der Abstand überall
   derselbe. */
.sprachen__geraete {
  display: flex; justify-content: flex-start; align-items: flex-end;
  gap: 48px; margin-top: 24px;
}
.sprachen__teil { display: flex; flex-direction: column; align-items: center; gap: 9px; flex: 0 0 auto; }
.sprachen__teil--handy { width: 74px; }
.sprachen__teil--fenster { width: 128px; }
.sprachen__teil--video { width: 128px; }
/* nowrap, sonst bricht "Handy-App" am Bindestrich um, auch wenn der Platz reicht */
.sprachen__teil > span:last-child { font-size: .8rem; color: var(--tinte-leise); white-space: nowrap; }
.sprachen__form {
  background: var(--weiss); border: 1.5px solid var(--linie-stark); border-radius: 9px;
  padding: 9px 8px; width: 100%; display: flex; flex-direction: column; gap: 6px;
}
.sprachen__form--handy,
.sprachen__form--fenster { height: 92px; }
.sprachen__form--video { height: 92px; justify-content: center; align-items: center; gap: 8px; }

/* Auf schmalen Bildschirmen schrumpfen Breiten und Abstand gemeinsam,
   damit die Reihe nie über den Rand läuft. */
@media (max-width: 700px) {
  .sprachen__geraete { gap: 32px; }
  .sprachen__teil--handy { width: 68px; }
  .sprachen__teil--fenster, .sprachen__teil--video { width: 112px; }
  .sprachen__form--handy,
  .sprachen__form--fenster,
  .sprachen__form--video { height: 84px; }
}
@media (max-width: 460px) {
  .sprachen__geraete { gap: 22px; }
  .sprachen__teil--handy { width: 64px; }
  .sprachen__teil--fenster, .sprachen__teil--video { width: 96px; }
  .sprachen__teil > span:last-child { font-size: .74rem; }
  .sprachen__form--handy,
  .sprachen__form--fenster,
  .sprachen__form--video { height: 76px; }
}
.sprachen__leiste { display: flex; gap: 3px; margin-bottom: 2px; }
.sprachen__leiste i { width: 4px; height: 4px; border-radius: 50%; background: var(--linie-stark); }
.sprachen__wort { font-size: .8rem; font-weight: 600; color: var(--gruen-dunkel); line-height: 1.3; }
.sprachen__strich { height: 4px; border-radius: 2px; background: var(--linie); }
.sprachen__strich--kurz { width: 55%; }
.sprachen__play {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--gruen); display: grid; place-items: center;
}
.sprachen__play::after {
  content: ''; border-left: 9px solid var(--gruen);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px;
}
.sprachen__satz { margin-top: 22px; font-size: .95rem; color: var(--tinte-mittel); }
.sprachen__satz b { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; color: var(--tinte); }

.sprachen__fein { margin-top: 16px; font-size: .84rem; color: var(--tinte-leise); }

/* Startzustand nur, wenn das Skript läuft */
[data-globus].js .sprachen__globus { transform: translateX(var(--mitte, 0px)); }
[data-globus].js .sprachen__ziehen { opacity: 0; }
[data-globus].js .sprachen__text > *:not(.sprachen__geraete) { opacity: 0; transform: translateY(12px); }
[data-globus].js .sprachen__teil { opacity: 0; transform: scale(.9); }

[data-globus].laeuft .sprachen__globus {
  transform: translateX(0);
  transition: transform .95s cubic-bezier(.22,.68,.3,1);
}
[data-globus].laeuft .sprachen__ziehen { opacity: 1; transition: opacity .4s ease-out .9s; }
[data-globus].laeuft .sprachen__text > *:not(.sprachen__geraete) {
  opacity: 1; transform: none;
  transition: opacity .34s ease-out, transform .46s cubic-bezier(.34,1.46,.64,1);
}
/* 1 Marke · 2 Überschrift · 3 Absatz · 4 Sprachnamen · 5 Geräte · 6 Satz · 7 Feinzeile */
[data-globus].laeuft .sprachen__text > *:nth-child(1) { transition-delay: .50s; }
[data-globus].laeuft .sprachen__text > *:nth-child(2) { transition-delay: .57s; }
[data-globus].laeuft .sprachen__text > *:nth-child(3) { transition-delay: .64s; }
[data-globus].laeuft .sprachen__text > *:nth-child(4) { transition-delay: .71s; }
[data-globus].laeuft .sprachen__text > *:nth-child(6) { transition-delay: 1.02s; }
[data-globus].laeuft .sprachen__text > *:nth-child(7) { transition-delay: 1.08s; }
[data-globus].laeuft .sprachen__teil {
  opacity: 1; transform: none;
  transition: opacity .28s ease-out, transform .44s cubic-bezier(.34,1.46,.64,1);
}
[data-globus].laeuft .sprachen__teil:nth-child(1) { transition-delay: .82s; }
[data-globus].laeuft .sprachen__teil:nth-child(2) { transition-delay: .88s; }
[data-globus].laeuft .sprachen__teil:nth-child(3) { transition-delay: .94s; }

@media (max-width: 900px) {
  .sprachen__innen { grid-template-columns: 1fr; gap: 30px; justify-items: center; }
  .sprachen__text { text-align: center; }
  .sprachen__text > p { margin-left: auto; margin-right: auto; }
  .sprachen__geraete { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  [data-globus] .sprachen__globus,
  [data-globus] .sprachen__ziehen,
  [data-globus] .sprachen__text > *,
  [data-globus] .sprachen__teil {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ============================== BLÖCKE ============================== */
.block { padding: clamp(48px, 6.5vw, 82px) 0; }
.block--flaeche { background: var(--flaeche); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.block__kopf { max-width: 60ch; margin: 0 auto; text-align: center; }
.block__kopf h2 { margin: 14px 0 0; }
.block__kopf p { margin-top: 15px; color: var(--tinte-mittel); font-size: 1.04rem; }

/* — Das Angebot: drei Produkte — */
.angebot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.produkt {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-gross);
  padding: 26px 24px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--schatten-klein);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.produkt:hover { box-shadow: var(--schatten); transform: translateY(-2px); border-color: var(--linie-stark); }
/* Statt eines Zeichens in einem hellgrünen Kästchen trägt der Umriss selbst
   die Aussage, genau wie an der Verzweigung im Hero. Feste Höhe, damit die
   drei Überschriften trotz unterschiedlicher Formen auf einer Linie stehen. */
.produkt__form { height: 66px; display: grid; place-items: center; }
.produkt__geraet {
  background: var(--weiss); border: 1.5px solid var(--linie); border-radius: 8px;
  display: grid; place-items: center;
}
.produkt__geraet--handy   { width: 42px; height: 64px; border-radius: 10px; }
.produkt__geraet--fenster { width: 92px; height: 62px; }
.produkt__geraet--video   { width: 92px; height: 54px; }
.produkt p { font-size: .93rem; color: var(--tinte-mittel); }
.produkt ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.produkt li {
  position: relative; padding-left: 15px;
  font-size: .89rem; color: var(--tinte-mittel); line-height: 1.5;
}
.produkt li::before {
  content: '•'; position: absolute; left: 0; top: -1px;
  color: var(--gruen); font-size: 1.05rem; line-height: 1.5;
}
.produkt__fuss { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linie); font-size: .83rem; color: var(--tinte-leise); }
@media (max-width: 940px) { .angebot { grid-template-columns: 1fr; } }

/* — Preis —
   Eine echte Tabelle, damit Vorleseprogramme die Zeilen den Spalten zuordnen
   können. Die Premium-Spalte ist durchgehend hell hinterlegt, oben und unten
   abgerundet, damit sie als ein Block liest statt als elf einzelne Zellen. */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.preis { max-width: 820px; margin: 38px auto 0; }
.preis__tafel { width: 100%; border-collapse: separate; border-spacing: 0; }

/* Gleiche Hoehe fuer jede Zeile der Preistafel.

   Gemessen war es vorher ungleich: bei 1440 Pixeln waren zehn
   Zeilen 51 Pixel hoch und eine 76, weil "Aktualisierungen bei
   Gesetzesaenderungen" auf zwei Zeilen umbricht. Auf dem Handy war
   der Unterschied groesser, dort standen 43 gegen 103 Pixel.

   height auf einer Tabellenzelle wirkt als Mindesthoehe. Alle
   Zellen bekommen denselben Wert, naemlich den der hoechsten
   tatsaechlichen Zeile. Damit sind alle gleich hoch, und keine wird
   abgeschnitten. Die Werte je Bildschirmgroesse stehen hier und
   werden nach jedem Bau nachgemessen. */
.preis__tafel tbody th, .preis__tafel tbody td { height: 76px; }
@media (max-width: 720px) {
  .preis__tafel tbody th, .preis__tafel tbody td { height: 70px; }
}
@media (max-width: 430px) {
  /* 103, nicht 84: bei 375 Pixeln braucht "Aktualisierungen bei
     Gesetzesaenderungen" drei Zeilen. Mit 84 blieb genau diese eine
     Zeile hoeher als der Rest, gemessen 103 gegen 84. */
  .preis__tafel tbody th, .preis__tafel tbody td { height: 103px; }
}


.preis__tafel thead th { padding: 20px 14px 18px; vertical-align: bottom; text-align: center; }
.preis__name {
  display: block; font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600; font-size: .95rem; color: var(--tinte-mittel);
}
.preis__zahl {
  display: block; margin-top: 5px;
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700;
  font-size: 2.1rem; line-height: 1; color: var(--tinte); font-variant-numeric: tabular-nums;
}
.preis__dazu { display: block; margin-top: 6px; font-size: .78rem; color: var(--tinte-leise); font-weight: 400; }
.preis__tafel .ist-premium .preis__name,
.preis__tafel .ist-premium .preis__zahl { color: var(--gruen-dunkel); }

.preis__tafel tbody th {
  text-align: left; font-weight: 400; font-size: .92rem; color: var(--tinte-mittel);
  padding: 13px 16px 13px 0; border-top: 1px solid var(--linie);
}
.preis__tafel tbody td {
  text-align: center; font-size: .89rem; color: var(--tinte-mittel);
  padding: 13px 10px; border-top: 1px solid var(--linie); width: 21%;
}
/* Vier Spalten auf einem schmalen Telefon lassen jeder Zelle rund 60 px.
   "Einstiegsvideo" und "Gesetzesaenderungen" sind laenger als das und
   haben keine Leerstelle zum Brechen — ohne diese Regel schoeben sie die
   Tabelle ueber den Bildschirmrand. hyphens greift, weil die Seite als
   Sprache Deutsch ausweist. */
.preis__tafel tbody td,
.preis__tafel tbody th { overflow-wrap: break-word; hyphens: auto; }

/* Die Empfehlung steht als Fähnchen über dem Namen, nicht als zweite
   Farbe: die Spalte ist ohnehin schon hinterlegt, und zwei Signale für
   dieselbe Aussage heben sich gegenseitig auf. */
.preis__wink {
  display: inline-block; margin-bottom: 9px; padding: 3px 11px; border-radius: 100px;
  background: var(--gruen); color: #fff;
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600;
  font-size: .67rem; letter-spacing: .07em; text-transform: uppercase;
}

/* Senkrechte Linien: eine zwischen Merkmal und Gratis, eine kräftigere
   zwischen Gratis und Premium. Sie laufen durch Kopf, Körper und Fuß, damit
   die Spalten über die ganze Höhe getrennt bleiben. */
.preis__tafel thead th,
.preis__tafel tbody td,
.preis__tafel tfoot td { border-left: 1px solid var(--linie); }
.preis__tafel .ist-premium { border-left: 1px solid #c2ddcf; }
.preis__tafel thead td,
.preis__tafel tfoot td:first-child { border-left: 0; }
.preis__tafel tbody tr:first-child th,
.preis__tafel tbody tr:first-child td { border-top: 0; }

/* Die hinterlegte Spalte: Fläche durchgehend, Trennlinien nur zwischen den Zeilen */
.preis__tafel .ist-premium { background: var(--gruen-hauch); }
.preis__tafel tbody .ist-premium {
  color: var(--gruen-dunkel); font-weight: 500;
  border-top-color: #d8ece1;
}
.ist-oben { border-radius: var(--r-gross) var(--r-gross) 0 0; }
.ist-unten { border-radius: 0 0 var(--r-gross) var(--r-gross); }

.preis__ja { color: var(--gruen); font-weight: 700; }
.preis__nein { color: var(--linie-stark); }

.preis__tafel tfoot td { padding: 20px 14px 22px; text-align: center; }
.knopf--voll { width: 100%; }

.preis__fein {
  max-width: 820px; margin: 20px auto 0; text-align: center;
  font-size: .85rem; color: var(--tinte-leise);
}

@media (max-width: 720px) {
  .preis__tafel tbody th { font-size: .82rem; padding-right: 8px; }
  .preis__tafel tbody td { font-size: .78rem; padding: 12px 5px; width: 21%; }
  .preis__zahl { font-size: 1.45rem; }
  .preis__name { font-size: .8rem; }
  .preis__dazu { font-size: .68rem; }
  .preis__wink { font-size: .6rem; padding: 2px 7px; margin-bottom: 7px; letter-spacing: .04em; }
  .preis__tafel thead th { padding: 14px 5px 12px; }
  .preis__tafel tfoot td { padding: 14px 5px 16px; }
  .knopf--voll { padding: 11px 6px; font-size: .8rem; }
}

/* Auf dem Telefon stehen vier Spalten nebeneinander. Damit sie nicht
   umbrechen, werden die Zellentexte hier zusätzlich verkleinert — und
   die Wortzwischenräume dürfen brechen statt die Spalte zu sprengen. */
/* Unter 560 px bestimmt der Inhalt die Spaltenbreiten nicht mehr,
   sondern die Prozentangaben. Ohne table-layout: fixed dehnt der Browser
   die Spalten auf ihren laengsten Inhalt aus — gemessen wurde die Tafel
   dadurch bei 375 px Fensterbreite 381 px breit, auf Deutsch, und schob
   die ganze Seite waagerecht. Russisch lag mit 353 px ebenfalls darueber.
   Mit fester Aufteilung greift der Wortumbruch, den die Zellen ohnehin
   schon erlauben. */
/* 800 statt 560. Gemessen bei 748 Pixeln Fensterbreite: die Tafel
   braucht 738 Pixel und hat nur 700, ragt also 38 Pixel heraus und
   die Seite liess sich waagerecht schieben. Ab 786 Pixeln passt sie
   von selbst, deshalb deckt 800 den ganzen engen Bereich ab.

   Der Fehler war nicht neu. Auf der Startseite blieb er unsichtbar,
   weil die Einblendung den Block dauerhaft auf 94 Prozent haelt und
   ihn damit knapp ins Fenster zieht. Auf /preise gibt es diese
   Einblendung nicht, dort wurde er sichtbar. */
@media (max-width: 800px) {
  .preis__tafel { table-layout: fixed; }
  /* Die Knoepfe im Fuss der Tafel sind inline-flex und brechen deshalb
     nicht von selbst. Gemessen bei 375 px: "Komplettpaket holen" braucht
     70 px in einer 58 px breiten Zelle, "Зарегистрироваться бесплатно"
     sogar 84. Ohne Umbruch stehen sie ueber ihrem Knopf. */
  .preis__tafel tfoot .knopf {
    display: flex; white-space: normal; line-height: 1.25;
    /* min-width: 0 ist hier der entscheidende Teil. Ein Flex-Element
       schrumpft von sich aus nicht unter die Breite seines laengsten
       Wortes — "Komplettpaket" braucht 70 px in einer 58 px breiten
       Zelle und stand deshalb ueber den Rand, obwohl der Umbruch
       erlaubt war. anywhere statt break-word, damit auch ohne
       Trennstellen gebrochen wird. */
    min-width: 0; overflow-wrap: anywhere; hyphens: auto;
  }
  /* Dasselbe fuer die Kopfzeile: "Komplettpaket", "Empfohlen" und
     "Зарегистрироваться" passen dort ebenfalls nicht in eine Spalte. */
  .preis__tafel thead th > span { overflow-wrap: anywhere; hyphens: auto; }
  .preis__tafel tbody th,
  .preis__tafel thead td,
  .preis__tafel tfoot td:first-child { width: 37%; }
}

@media (max-width: 430px) {
  .preis__tafel tbody th { font-size: .76rem; padding: 11px 6px 11px 0; }
  .preis__tafel tbody td { font-size: .72rem; padding: 11px 3px; }
  .preis__zahl { font-size: 1.2rem; }
  .preis__name { font-size: .72rem; }
  .preis__dazu { font-size: .62rem; }
  .preis__wink { font-size: .55rem; padding: 2px 5px; }
  .knopf--voll { padding: 10px 4px; font-size: .72rem; }
}

/* — Wegweiser zu den Unterseiten — */
.wegweiser { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.weg-karte {
  display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-gross);
  padding: 22px 20px; box-shadow: var(--schatten-klein);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.weg-karte:hover { box-shadow: var(--schatten); transform: translateY(-2px); border-color: var(--gruen); }
/* Kein Kästchen um das Symbol, dasselbe Vorgehen wie im Angebots- und im
   Sprachen-Abschnitt: das Zeichen steht frei und dafür größer. */
.weg-karte__zeichen { height: 34px; display: flex; align-items: center; }
.weg-karte__zeichen svg { width: 28px; height: 28px; color: var(--gruen); }
.weg-karte p { font-size: .89rem; color: var(--tinte-mittel); }
.weg-karte__mehr { margin-top: auto; padding-top: 12px; font-size: .86rem; font-weight: 600; color: var(--gruen); font-family: 'Space Grotesk', sans-serif; }
@media (max-width: 940px) { .wegweiser { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .wegweiser { grid-template-columns: 1fr; } }

/* — Vorschau —
   NACHGEZEICHNET, keine Bildschirmfotos. Sobald App und Lernbereich laufen,
   gehören hier echte Ausschnitte hin (ausdrücklicher Wunsch des Gründers,
   27.08.2026). Auch die Laufzeiten der Videolektionen und ihre Reihenfolge
   sind Platzhalter: eine Liste der 25 Kurslektionen gibt es noch nicht,
   die Titel stammen aus echten Lerneinheiten. */
.vs { display: flex; flex-direction: column; gap: 24px; margin-top: 40px; }
.vs__streifen {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-gross);
  padding: 30px 32px;
}
.vs__streifen:nth-child(even) .vs__bild { order: -1; }
.vs__text h3 { font-size: 1.2rem; }
.vs__text > p { margin-top: 11px; font-size: .95rem; color: var(--tinte-mittel); }
.vs__wege { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.vs__weg {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  border: 1px solid var(--linie-stark); border-radius: 100px; padding: 8px 16px;
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .87rem; color: var(--tinte);
  transition: border-color .16s ease, color .16s ease;
}
.vs__weg:hover { border-color: var(--gruen); color: var(--gruen-dunkel); }
.vs__weg:hover span { display: inline-block; transform: translateX(3px); transition: transform .16s ease; }
.vs__bild { display: grid; place-items: center; min-width: 0; }
@media (max-width: 880px) {
  .vs__streifen { grid-template-columns: 1fr; gap: 26px; padding: 24px 22px; }
  .vs__streifen:nth-child(even) .vs__bild { order: 0; }
}

/* gemeinsame Bausteine der Nachbildungen */
.vs-zeile { height: 6px; border-radius: 3px; background: var(--linie); display: block; flex: 1; }
.vs-zeile--kurz { flex: 0 0 58%; }
.vs-zeile--gruen { background: #bfe0cd; }

/* Handy */
.vs-handy {
  width: 190px; border-radius: 22px; border: 1.5px solid var(--linie-stark);
  background: var(--weiss); padding: 9px; box-shadow: var(--schatten-gross);
}
.vs-handy__schirm { background: var(--flaeche); border-radius: 15px; padding: 12px 11px; display: flex; flex-direction: column; gap: 9px; }
.vs-handy__kopf { display: flex; justify-content: space-between; align-items: center; font-size: .58rem; color: var(--tinte-leise); }
.vs-handy__balken { height: 3px; border-radius: 2px; background: var(--linie); overflow: hidden; }
.vs-handy__balken i { display: block; height: 100%; width: 35%; background: var(--gruen); }
.vs-handy__frage { font-size: .63rem; line-height: 1.45; color: var(--tinte); font-weight: 500; }
.vs-antwort { background: var(--weiss); border: 1px solid var(--linie); border-radius: 7px; padding: 6px 7px; display: flex; gap: 6px; align-items: center; }
.vs-antwort i { width: 12px; height: 12px; border-radius: 4px; background: var(--flaeche); border: 1px solid var(--linie); flex-shrink: 0; }
.vs-antwort--richtig { border-color: var(--richtig); background: var(--richtig-flur); }
.vs-antwort--richtig i { background: var(--richtig); border-color: var(--richtig); }

/* Browserfenster */
.vs-fenster { width: 100%; max-width: 430px; background: var(--weiss); border: 1px solid var(--linie-stark); border-radius: 10px; overflow: hidden; box-shadow: var(--schatten-gross); }
.vs-fenster__leiste { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.vs-fenster__leiste i { width: 7px; height: 7px; border-radius: 50%; background: var(--linie-stark); flex-shrink: 0; }
.vs-fenster__adresse { margin-left: 10px; flex: 1; height: 15px; border-radius: 8px; background: var(--weiss); border: 1px solid var(--linie); display: flex; align-items: center; padding: 0 8px; font-size: .55rem; color: var(--tinte-leise); }
.vs-fenster__innen { display: grid; grid-template-columns: 122px 1fr; min-height: 230px; }
.vs-fenster__seite { border-right: 1px solid var(--linie); padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; background: #fbfdfc; }
.vs-punkt { font-size: .58rem; color: var(--tinte-mittel); display: flex; justify-content: space-between; gap: 6px; padding: 4px 6px; border-radius: 5px; }
.vs-punkt--aktiv { background: var(--gruen-hauch); color: var(--gruen-dunkel); font-weight: 600; }
.vs-punkt b { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; }
.vs-fenster__inhalt { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.vs-fenster__titel { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .72rem; line-height: 1.35; }
.vs-merk { margin: 3px 0; border-left: 2px solid var(--gruen); background: var(--gruen-hauch); border-radius: 0 6px 6px 0; padding: 7px 9px; display: flex; flex-direction: column; gap: 4px; }

/* Videokurs */
.vs-video { width: 100%; max-width: 430px; background: var(--weiss); border: 1px solid var(--linie-stark); border-radius: 10px; overflow: hidden; box-shadow: var(--schatten-gross); }
.vs-video__buehne { aspect-ratio: 16/9; background: #eef4f0; display: grid; place-items: center; position: relative; }
.vs-video__play { width: 46px; height: 46px; border-radius: 50%; background: var(--weiss); border: 1.5px solid var(--gruen); display: grid; place-items: center; box-shadow: var(--schatten); }
.vs-video__play::after { content: ''; border-left: 13px solid var(--gruen); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.vs-video__leiste { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 4px; border-radius: 2px; background: rgba(11,31,22,.12); }
.vs-video__leiste i { display: block; height: 100%; width: 28%; border-radius: 2px; background: var(--gruen); }
.vs-lektion { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--linie); font-size: .74rem; }
.vs-lektion__nr { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; color: var(--tinte-leise); font-size: .68rem; }
.vs-lektion__titel { color: var(--tinte-mittel); }
.vs-lektion__min { color: var(--tinte-leise); font-size: .68rem; font-variant-numeric: tabular-nums; }
.vs-lektion--laeuft { background: var(--gruen-hauch); }
.vs-lektion--laeuft .vs-lektion__titel { color: var(--gruen-dunkel); font-weight: 600; }

/* — Grüner Schein hinter den Nachbildungen —
   Lehre aus dem Globus: der Verlauf muss ÜBER den Rand des Elements
   hinausragen, sonst deckt das Element ihn ab und man sieht nichts. Die
   Nachbildungen sind Rechtecke, der Schein ist eine größere Ellipse und
   tritt darum ringsum hervor. Beim Überfahren wird er kräftiger und wächst
   ein Stück, damit klar ist, welcher der drei gerade gemeint ist. */
.vs__bild { position: relative; }

/* Jede Nachbildung ist selbst anklickbar. Drei Stufen: ruhend, wenn der
   Streifen überfahren wird, und am kräftigsten, wenn die Nachbildung selbst
   dran ist. */
.vs__schau {
  display: block; position: relative; text-decoration: none; color: inherit;
  border-radius: 16px; cursor: pointer;
  transition: transform .22s cubic-bezier(.2,.7,.25,1);
}
.vs__schau > * { position: relative; z-index: 1; }
.vs__schau::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 128%; height: 128%; transform: translate(-50%, -50%);
  pointer-events: none; z-index: 0; opacity: .8;
  background: radial-gradient(ellipse at center,
    rgba(0,120,64,.16) 0%,
    rgba(0,120,64,.075) 38%,
    rgba(0,120,64,.02) 58%,
    rgba(0,120,64,0) 76%);
  transition: opacity .28s ease, transform .28s ease;
}
.vs__streifen:hover .vs__schau::before {
  opacity: 1; transform: translate(-50%, -50%) scale(1.12);
}
.vs__schau:hover::before,
.vs__schau:focus-visible::before {
  opacity: 1; transform: translate(-50%, -50%) scale(1.24);
}
.vs__schau:hover, .vs__schau:focus-visible { transform: translateY(-6px); }
.vs__schau:focus-visible { outline: 3px solid var(--gruen); outline-offset: 10px; }
.vs__streifen { transition: border-color .18s ease, box-shadow .18s ease; }
.vs__streifen:hover, .vs__streifen:focus-within { border-color: #cfe6da; box-shadow: var(--schatten); }

.vs-video__liste { display: flex; flex-direction: column; }

@media (prefers-reduced-motion: reduce) {
  .wege__teil, .wege__teil::before { transition: none; }
  .wege__teil:hover, .wege__teil:focus-visible { transform: none; }
  .wege__teil:hover::before { transform: translate(-50%, -50%); }
  .vs__schau, .vs__schau::before, .vs__streifen { transition: none; }
  .vs__schau:hover, .vs__schau:focus-visible { transform: none; }
  .vs__streifen:hover .vs__schau::before,
  .vs__schau:hover::before { transform: translate(-50%, -50%); }
}

/* — Die App-Seite —
   Rechts ein schwebendes Gerät, links die Funktionsliste, die es steuert.
   Die Bildschirme sind aus den echten App-Farben gebaut: die oklch-Werte aus
   app/src/index.css wurden nach sRGB umgerechnet, nicht geschätzt.
   NACHGEZEICHNET, keine Bildschirmfotos. Vor dem Start gehören echte
   Aufnahmen hinein. */

/* Farben der App */
.appseite {
  --a-gruen: #007840; --a-gruen-leise: #dcf2e3;
  --a-papier: #f9fbf7; --a-tinte: #151712; --a-tinte-leise: #686a61; --a-linie: #e3e6de;
  --a-ueben: #005140; --a-ueben-leise: #c3f0e3;
  --a-pruefung: #563e7b; --a-pruefung-leise: #e8dffc;
  --a-video: #a75c00; --a-video-leise: #ffe4ca;
  padding: clamp(36px, 5vw, 64px) 0 clamp(48px, 7vw, 90px);
}
/* Text links, Gerät rechts. Die Funktionsliste daneben schaltet den
   Bildschirm um, dadurch stehen Lesen und Sehen nebeneinander. */
.appseite__innen { display: grid; grid-template-columns: 1fr 400px; gap: 54px; align-items: center; }
.appseite__text h1 { margin-top: 14px; font-size: clamp(1.9rem, 4vw, 2.9rem); }
.appseite__lead { margin-top: 16px; font-size: 1.06rem; color: var(--tinte-mittel); max-width: 46ch; }

.appseite__liste { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 4px; }
.appseite__liste button {
  font: inherit; width: 100%; text-align: left; background: transparent;
  border: 1px solid transparent; border-radius: var(--r); padding: 13px 15px; cursor: pointer;
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  transition: background-color .16s ease, border-color .16s ease;
}
.appseite__liste button:hover { background: var(--flaeche); }
.appseite__liste button[aria-pressed="true"] { background: var(--gruen-hauch); border-color: #cfe6da; }
.appseite__liste button:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; }
.appseite__liste svg { width: 20px; height: 20px; color: var(--gruen); margin-top: 2px; }
.appseite__liste b { display: block; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .98rem; color: var(--tinte); }
.appseite__liste span span { display: block; font-size: .87rem; color: var(--tinte-mittel); margin-top: 2px; }

/* Das schwebende Gerät */
.buehne3d { perspective: 1600px; display: grid; place-items: center; padding: 26px 0; }
.schweben { animation: schweben 7s ease-in-out infinite; }
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
/* Fester Blickwinkel. Drehen war ausprobiert und wieder entfernt: es machte
   das Gerät zu einem Bedienelement, das nichts bedient, und wirkte unsauber.
   Es steht jetzt still, schwebt aber weiter. */
.handy {
  position: relative;
  transform: rotateY(-14deg) rotateX(5deg);
  transform-style: preserve-3d;
}
/* Der Schein liegt hinter dem Gerät und ist deutlich größer, sonst deckt das
   Gerät ihn ab. Dieselbe Lehre wie beim Globus. */
.handy::before {
  content: ''; position: absolute; left: 50%; top: 52%;
  width: 190%; height: 128%; transform: translate(-50%, -50%) translateZ(-60px);
  background: radial-gradient(ellipse at center,
    rgba(0,120,64,.22) 0%, rgba(0,120,64,.1) 36%, rgba(0,120,64,.03) 58%, rgba(0,120,64,0) 76%);
  pointer-events: none;
}
.handy__rahmen {
  position: relative; width: 268px; padding: 11px;
  background: linear-gradient(150deg, #2a3630 0%, #151712 45%, #232e28 100%);
  border-radius: 40px;
  box-shadow: 0 40px 70px -30px rgba(11,31,22,.5), 0 8px 20px -8px rgba(11,31,22,.3),
              inset 0 1px 0 rgba(255,255,255,.16);
}
.handy__schirm {
  /* 246 breit zu 533 hoch: das Seitenverhältnis eines iPhone-Bildschirms,
     damit die Aufnahmen unverzerrt und ungeschnitten hineinpassen. */
  position: relative; height: 533px; border-radius: 30px; overflow: hidden;
  background: var(--a-papier);
}
.handy__glas {
  position: absolute; inset: 0; pointer-events: none; border-radius: 30px;
  background: linear-gradient(118deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.1) 22%, rgba(255,255,255,0) 42%);
}

.appseite__anleitung { margin-top: 22px; font-size: .84rem; color: var(--tinte-leise); }

/* Die beiden Store-Marken.
   ACHTUNG: PLATZHALTER in der richtigen Form und Größe. Die echten Marken sind
   geschützt und müssen bei Apple und Google in der offiziellen Fassung bezogen
   und nach deren Vorgaben eingesetzt werden. Deshalb steht hier ein neutrales
   Zeichen statt der Herstellerlogos. */
.appseite__laden { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.laden {
  display: inline-flex; align-items: center; gap: 11px;
  background: #101511; color: #fff; text-decoration: none;
  border: 1px solid #101511; border-radius: 10px; padding: 9px 18px 9px 15px;
  transition: background-color .16s ease, transform .16s ease;
}
.laden:hover { background: #1d2620; transform: translateY(-2px); }
.laden:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; }
.laden__zeichen { display: grid; place-items: center; }
.laden__zeichen svg { width: 24px; height: 24px; color: #fff; }
.laden__text { display: flex; flex-direction: column; line-height: 1.15; }
.laden__text small { font-size: .62rem; opacity: .82; letter-spacing: .02em; }
.laden__text b { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: 1.06rem; letter-spacing: -.01em; }
.appseite__fein { margin-top: 14px; font-size: .85rem; color: var(--tinte-leise); }
.appseite__fein a { color: var(--gruen); }

/* Die Bildschirme im Gerät sind ECHTE iPhone-Aufnahmen aus der laufenden
   App, vom Gründer am 27.08.2026 geliefert. Sie werden von 946 auf 492 px
   VERKLEINERT, also herunter statt hoch gerechnet, deshalb sind sie scharf.
   Quellen in web/entwurf/bilder/, Zuschnitte in bilder/zugeschnitten/.
   Für die echte Website als eigene Bilddateien ausliefern, nicht wie hier in
   der Vorschau eingebettet.
   Es ist kein Nachbau mehr übrig, deshalb steht hier nur noch diese eine
   Regel. Kommt ein Bildschirm dazu, gehört eine Aufnahme her, kein Nachbau. */
.app__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.app__bild[hidden] { display: none; }

@media (max-width: 940px) {
  /* Untereinander: Gerät zuerst, damit man beim Antippen der Funktionen
     darunter sieht, was sich oben ändert. */
  .appseite__innen { grid-template-columns: 1fr; gap: 22px; }
  .buehne3d { order: -1; padding: 10px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .schweben { animation: none; }
  .handy { transition: none; }
}

/* ===================== ÜBEN-SEITE =====================
   Die Probe läuft mit 15 ECHTEN Fragen aus
   app/src/content/taxi/fragen.json, gezogen über ihre IDs, nicht abgetippt.
   Erklärung und Fundstelle stehen genau so da wie in der App.
   Der Aufbau kommt aus _probefrage.html, das im Hero geparkt wurde. */

.ueb-kopf { padding: clamp(34px, 4.5vw, 54px) 0 0; }
.ueb-kopf__innen { max-width: 60ch; }
.ueb-probe { padding: 0 0 clamp(40px, 5.5vw, 66px); }
.ueb-kopf h1 { margin: 16px 0 0; }
.ueb-kopf p { margin-top: 15px; color: var(--tinte-mittel); font-size: 1.05rem; }

.probe {
  max-width: 760px; margin: 30px auto 0; text-align: left;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--r-gross); box-shadow: var(--schatten-gross); overflow: hidden;
}
.probe__kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--linie); background: var(--flaeche); }
.probe__zaehler { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .84rem; font-variant-numeric: tabular-nums; }
.probe__sg { font-size: .81rem; color: var(--tinte-leise); }
.probe__punkte { margin-left: auto; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: .77rem; font-weight: 600; color: var(--gruen-dunkel); background: var(--gruen-hauch); padding: 4px 11px; border-radius: 100px; font-variant-numeric: tabular-nums; }
.probe__gleis { height: 3px; background: var(--linie); }
.probe__fortschritt { height: 100%; background: var(--gruen); width: 6.6%; transition: width .4s cubic-bezier(.2,.7,.25,1); }
.probe__koerper { padding: 24px 22px 22px; }
.probe__frage { font-size: 1.09rem; font-weight: 500; line-height: 1.45; }
.probe__optionen { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }

/* Wahr/Falsch bekommt zwei breite Knöpfe nebeneinander, damit die Form
   sichtbar anders ist als beim Ankreuzen. */
.probe__optionen--wf { flex-direction: row; gap: 11px; }
.probe__optionen--wf .opt { flex: 1; justify-content: center; text-align: center; padding: 15px 12px; }

.opt {
  display: flex; align-items: flex-start; gap: 13px; width: 100%; text-align: left;
  background: var(--weiss); border: 1.5px solid var(--linie); border-radius: var(--r);
  padding: 13px 15px; cursor: pointer; font: inherit; font-size: .95rem;
  color: var(--tinte); line-height: 1.45;
  transition: border-color .14s ease, background-color .14s ease;
}
.opt:hover:not(:disabled) { border-color: var(--gruen); background: var(--gruen-hauch); }
.opt:disabled { cursor: default; }

/* Gewählt, aber noch nicht abgeschickt. Kräftiger als das Überfahren, damit
   man sieht, worauf man steht, und deutlich anders als die Auswertung
   darunter, die erst nach dem Bestätigen kommt. */
.opt--gewaehlt { border-color: var(--gruen); background: var(--gruen-box); border-width: 2px; padding: 12.5px 14.5px; }
.opt--gewaehlt .opt__key { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.probe__optionen--wf .opt--gewaehlt { padding: 14.5px 11.5px; }
.opt__key {
  flex-shrink: 0; width: 25px; height: 25px; border-radius: 7px; display: grid; place-items: center;
  background: var(--flaeche); border: 1px solid var(--linie);
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .8rem;
}
.opt--richtig { border-color: var(--richtig); background: var(--richtig-flur); }
.opt--richtig .opt__key { background: var(--richtig); border-color: var(--richtig); color: #fff; }
.opt--falsch { border-color: var(--falsch); background: var(--falsch-flur); }
.opt--falsch .opt__key { background: var(--falsch); border-color: var(--falsch); color: #fff; }
.opt--blass { opacity: .55; }

.probe__auswertung { margin-top: 16px; border-radius: var(--r); padding: 16px 17px; background: var(--flaeche); border: 1px solid var(--linie); }
.probe__urteil { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: .94rem; display: flex; align-items: center; gap: 8px; }
.probe__urteil--ja { color: var(--richtig); }
.probe__urteil--nein { color: var(--falsch); }
.probe__erklaerung { margin-top: 9px; font-size: .93rem; color: var(--tinte-mittel); line-height: 1.6; }
.probe__fundstelle { margin-top: 12px; font-size: .79rem; color: var(--tinte-leise); display: inline-block; background: var(--weiss); border: 1px solid var(--linie); border-radius: 100px; padding: 4px 12px; }
.probe__fuss { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--linie); }

/* — Das Ergebnis nach der fünfzehnten Frage — */
.erg { max-width: 760px; margin: 30px auto 0; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-gross); box-shadow: var(--schatten-gross); overflow: hidden; }
.erg__kopf { padding: 30px 24px 26px; text-align: center; border-bottom: 1px solid var(--linie); }
.erg__zahl { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: clamp(2.6rem, 6vw, 3.4rem); line-height: 1; color: var(--gruen); font-variant-numeric: tabular-nums; }
.erg__von { font-size: .95rem; color: var(--tinte-leise); margin-top: 8px; }
.erg__quote { margin-top: 16px; font-size: 1.02rem; color: var(--tinte-mittel); }
.erg__quote b { font-family: 'Space Grotesk', system-ui, sans-serif; color: var(--tinte); }
.erg__koerper { padding: 22px 24px 26px; }
.erg__ueber { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--tinte-leise); }
.erg__bereiche { margin-top: 14px; display: flex; flex-direction: column; gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--r); overflow: hidden; }
.erg__bereich { display: flex; align-items: center; gap: 12px; background: var(--weiss); padding: 11px 14px; font-size: .93rem; }
.erg__bereich-name { flex: 1; }
.erg__bereich-gleis { width: 84px; height: 5px; border-radius: 3px; background: var(--linie); overflow: hidden; flex-shrink: 0; }
.erg__bereich-gleis i { display: block; height: 100%; background: var(--gruen); }
.erg__bereich-zahl { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .87rem; font-variant-numeric: tabular-nums; width: 62px; text-align: right; flex-shrink: 0; color: var(--tinte-mittel); }
.erg__hinweis { margin-top: 16px; font-size: .9rem; color: var(--tinte-leise); line-height: 1.6; }
.erg__ruf { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--linie); text-align: center; }
.erg__ruf h3 { font-size: 1.22rem; margin: 0; }
.erg__ruf p { margin-top: 10px; color: var(--tinte-mittel); font-size: .97rem; max-width: 46ch; margin-left: auto; margin-right: auto; }
.erg__knoepfe { margin-top: 18px; display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; }

/* — Was der volle Übungsbereich kann — */
.werkzeuge { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 14px; margin-top: 26px; }
.werkzeug { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-gross); padding: 20px 20px 22px; }
.werkzeug h3 { font-size: 1.04rem; margin: 0; display: flex; align-items: center; gap: 9px; }
.werkzeug h3 svg { width: 17px; height: 17px; color: var(--gruen); flex-shrink: 0; }
.werkzeug p { margin-top: 9px; font-size: .93rem; color: var(--tinte-mittel); line-height: 1.6; }
.werkzeug__zahl { display: block; margin-top: 12px; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 1.3rem; color: var(--gruen); font-variant-numeric: tabular-nums; }

.verborgen { display: none !important; }

@media (max-width: 560px) {
  .probe__kopf { gap: 8px; }
  .probe__punkte { margin-left: 0; }
  .probe__optionen--wf { flex-direction: column; }
  .erg__bereich { flex-wrap: wrap; gap: 7px 12px; }
  .erg__bereich-name { flex-basis: 100%; }
  .erg__bereich-gleis { flex: 1; width: auto; }
}

/* ===================== KARTEIKARTEN =====================
   15 ECHTE Karten aus app/src/content/taxi/lernplan/le/, über ihre IDs
   gezogen. Vorder- und Rückseite stehen unverändert so da wie in der App.
   Der Stapel dahinter ist Variante B aus karteikarten-varianten.html. */

.kk-block { background: var(--flaeche); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: clamp(44px, 6vw, 72px) 0; }
.kk { max-width: 620px; margin: 26px auto 0; }
.kk__leiste { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.kk__zaehler { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .85rem; font-variant-numeric: tabular-nums; }
.kk__bereich { font-size: .81rem; color: var(--tinte-leise); }
.kk__rest { margin-left: auto; font-size: .79rem; color: var(--tinte-leise); font-variant-numeric: tabular-nums; }
.kk__gleis { height: 3px; background: var(--linie-stark); border-radius: 2px; overflow: hidden; margin-bottom: 18px; }
.kk__gleis i { display: block; height: 100%; width: 0; background: var(--gruen); transition: width .4s cubic-bezier(.2,.7,.25,1); }
.kk__fuss { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

/* Der Stapel. Die Rücken sind genauso hoch wie die Karte, der Versatz ragt
   in den Außenabstand, deshalb margin statt padding. */
.stapel { position: relative; margin-bottom: 22px; }
.stapel__rueck {
  position: absolute; left: 0; right: 0; top: 0; height: 100%;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-gross);
}
.stapel__rueck--1 { transform: translateY(9px) scale(.972); opacity: .75; }
.stapel__rueck--2 { transform: translateY(18px) scale(.944); opacity: .45; }
.stapel .dreh { position: relative; z-index: 2; }

/* Beide Seiten liegen in derselben Rasterzelle, damit die Karte so hoch wird
   wie die höhere von beiden. Mit absoluten Seiten würde eine lange Antwort
   unten abgeschnitten. */
.dreh { perspective: 1600px; }
.dreh__karte {
  display: grid; transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.3,.85,.35,1);
  cursor: pointer;
}
.dreh__karte.ist-gedreht { transform: rotateY(180deg); }
.dreh__seite {
  grid-area: 1 / 1; min-height: 250px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-gross);
  box-shadow: var(--schatten-gross); padding: 30px 28px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
}
.dreh__hinten { transform: rotateY(180deg); background: var(--gruen-hauch); border-color: #cfe6da; }
.dreh__marke { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--tinte-leise); margin-bottom: 14px; }
.dreh__hinten .dreh__marke { color: var(--gruen-dunkel); }
.dreh__frage { font-size: 1.16rem; font-weight: 500; line-height: 1.45; margin: 0; }
.dreh__antwort { font-size: 1.04rem; line-height: 1.6; margin: 0; }
.dreh__wink { margin-top: 18px; font-size: .8rem; color: var(--tinte-leise); }

.knopf--wusste { background: var(--richtig-flur); color: var(--richtig); border-color: #bfe3cf; }
.knopf--wusste:hover { background: #d9efe2; border-color: var(--richtig); }
.knopf--wusstenicht { background: var(--falsch-flur); color: var(--falsch); border-color: #f3d3ce; }
.knopf--wusstenicht:hover { background: #fbe0dc; border-color: var(--falsch); }

/* Der stärkste Bereich wird oben in der Auswertung benannt. */
.erg__stark { margin-top: 14px; font-size: .95rem; color: var(--tinte-mittel); }
.erg__stark b { font-family: 'Space Grotesk', system-ui, sans-serif; color: var(--gruen-dunkel); }
.erg__bereich-zahl--null { color: var(--tinte-leise); }

@media (max-width: 560px) {
  .kk__fuss { flex-direction: column-reverse; }
  .kk__fuss .knopf { width: 100%; }
  .dreh__seite { padding: 26px 20px; min-height: 270px; }
}

/* ===================== LERNEN-SEITE =====================
   Aufgebaut wie der LerneinheitScreen der App: Blatt 0 ist der Einstieg,
   danach ein Blatt je Abschnitt mitsamt seinem Merksatz, zuletzt die
   Merksatz-Übersicht zum Aufdecken. Kein langer Fließtext.

   Links läuft ein Lernpfad: nummerierte Ringe an einer Linie, erledigte
   gefüllt, der aktuelle mit grünem Hof. Nach dem letzten Blatt einer Einheit
   steht ausgegraut, was im Kurs als Nächstes käme, damit man sieht, dass das
   Buch weitergeht.

   Alle Blätter stehen VOLLSTÄNDIG im Markup. Ohne JavaScript liest man sie
   untereinander, Pfad und Blätter-Knöpfe bleiben dann verborgen. So findet
   auch eine Suchmaschine echten Lernstoff statt einer leeren Hülle.
   Quelle: app/src/content/taxi/lernplan/le/, wortgleich übernommen. */

.ln-kopf { padding: clamp(34px, 4.5vw, 54px) 0 0; }
.ln-kopf__innen { max-width: 62ch; }
.ln-kopf h1 { margin: 16px 0 0; }
.ln-kopf p { margin-top: 15px; color: var(--tinte-mittel); font-size: 1.05rem; }
.ln-lesen { padding: 0 0 clamp(40px, 5vw, 62px); }

.lz { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 28px; }
.lz__buehne { min-width: 0; }

/* — Der Lernpfad links — */
.lz__leiste { position: sticky; top: 92px; max-height: calc(100vh - 116px); overflow-y: auto; padding-right: 6px; }
.lz__leiste[hidden] { display: none; }
.lz__wo {
  margin: 0 0 16px; font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600; font-size: .73rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinte-leise); font-variant-numeric: tabular-nums;
}
.lz__gruppe { margin-bottom: 26px; }
.lz__gruppe:last-child { margin-bottom: 0; }
.lz__gruppe[hidden] { display: none; }
.lz__gruppe-kopf { font-size: .86rem; color: var(--tinte-mittel); font-weight: 500; line-height: 1.4; margin-bottom: 10px; }
.lz__gruppe-nr { display: block; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .73rem; letter-spacing: .04em; color: var(--gruen); margin-bottom: 2px; }

.lz__pfad { list-style: none; margin: 0; padding: 0; position: relative; }
/* Die durchgehende Linie hinter den Ringen. Sie endet vor dem letzten Ring,
   damit sie nicht ins Leere läuft. */
.lz__pfad::before { content: ''; position: absolute; left: 13px; top: 16px; bottom: 16px; width: 2px; background: var(--linie); }
.lz__pfad-punkt {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  background: none; border: 0; padding: 6px 0; font: inherit; font-size: .87rem;
  color: var(--tinte-leise); cursor: pointer; line-height: 1.35; position: relative;
}
.lz__ring {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--linie-stark);
  background: var(--weiss); display: grid; place-items: center; flex-shrink: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .78rem;
  color: var(--tinte-leise); position: relative; z-index: 1;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.lz__pfad-punkt:hover .lz__pfad-text { color: var(--tinte); }
.lz__pfad-punkt:hover .lz__ring { border-color: var(--gruen); }
.lz__pfad-punkt.ist-durch .lz__ring { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.lz__pfad-punkt[aria-current="true"] .lz__ring { border-color: var(--gruen); color: var(--gruen-dunkel); box-shadow: 0 0 0 4px var(--gruen-hauch); }
.lz__pfad-punkt[aria-current="true"] .lz__pfad-text { color: var(--gruen-dunkel); font-weight: 600; }

/* Der Ausblick: was als Nächstes drankommt. Kein Ring und keine Linie
   daneben, nur klein der Titel, darunter die ersten zwei Punkte in derselben
   Form wie oben, aber nach unten ausgeblendet. Angedeutet, nicht angeboten. */
.lz__ausblick { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linie); }
.lz__ausblick-marke { margin: 0; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .69rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-leise); }
.lz__ausblick-titel { margin: 7px 0 0; font-size: .87rem; font-weight: 500; color: var(--tinte-mittel); line-height: 1.35; }
.lz__ausblick-gebiet { margin: 3px 0 0; font-size: .76rem; color: var(--tinte-leise); }
.lz__ausblick-liste {
  list-style: none; margin: 12px 0 0; padding: 0;
  /* Der Verlauf blendet die zwei Punkte nach unten aus. Wo Masken fehlen,
     bleibt die Grundtransparenz, dann ist es immer noch gedämpft. */
  opacity: .55;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 22%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 22%, transparent 96%);
}
.lz__ausblick-punkt { display: flex; align-items: center; gap: 13px; padding: 6px 0; font-size: .87rem; color: var(--tinte-mittel); line-height: 1.35; }
.lz__ring--blass { border-color: var(--linie); color: var(--tinte-leise); }
.lz__ausblick-fein { margin: 2px 0 0; font-size: .78rem; color: var(--tinte-leise); }

/* — Die Bühne rechts — */
.lz__einheit { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-gross); box-shadow: var(--schatten-gross); overflow: hidden; }
.lz__einheit + .lz__einheit { margin-top: 26px; }
.lz__einheit[hidden] { display: none; }
.lz__kopf { padding: 22px 30px 20px; border-bottom: 1px solid var(--linie); background: var(--flaeche); }
.lz__pfad-zeile { margin: 0; font-size: .81rem; color: var(--tinte-leise); }
.lz__pfad-zeile b { font-weight: 600; color: var(--tinte-mittel); }
.lz__titel { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: clamp(1.22rem, 2.4vw, 1.45rem); letter-spacing: -.02em; line-height: 1.25; margin: 8px 0 0; }

.lz__blatt { padding: 26px 30px 28px; min-height: 300px; }
.lz__blatt[hidden] { display: none; }
.lz__blatt + .lz__blatt { border-top: 1px solid var(--linie); }
.lz--geblaettert .lz__blatt + .lz__blatt { border-top: 0; }
.lz__blatt-titel { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 1.14rem; letter-spacing: -.015em; margin: 0 0 14px; }
.lz__einstieg { font-size: 1.06rem; line-height: 1.7; color: var(--tinte-mittel); margin: 0; }
.lz__absatz { margin: 0 0 13px; line-height: 1.7; }
.lz__absatz:last-child { margin-bottom: 0; }
.lz__liste { margin: 0 0 13px; padding: 0; list-style: none; }
.lz__liste li { position: relative; padding-left: 21px; margin-bottom: 10px; line-height: 1.65; }
.lz__liste li::before { content: ''; position: absolute; left: 3px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--gruen); }
.lz__liste li:last-child { margin-bottom: 0; }

/* Formel und Merksatz: neutrale Fläche mit schmalem Randstreifen, NICHT
   vollflächig getönt. Die getönte Fassung hat der Gründer am 20.08.2026 in
   der App verworfen, sie wirkte wie eine generische KI-Antwortbox.
   Siehe Hinweiskarte in LerneinheitScreen.tsx. */
.lz__formel, .lz__merksatz { background: var(--flaeche); border: 1px solid var(--linie); border-left: 3px solid var(--gruen); border-radius: 0 var(--r) var(--r) 0; padding: 15px 18px; }
.lz__formel { margin: 0 0 13px; }
.lz__merksatz { margin: 20px 0 0; }
.lz__formel-name, .lz__merksatz-marke { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--gruen-dunkel); }
.lz__formel-satz { margin: 9px 0 0; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: 1.01rem; line-height: 1.5; }
.lz__formel-bsp { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--linie); font-size: .92rem; line-height: 1.65; color: var(--tinte-mittel); }
.lz__merksatz-frage { margin: 8px 0 0; font-weight: 500; font-size: .97rem; }
.lz__merksatz-antwort { margin: 6px 0 0; font-size: .93rem; color: var(--tinte-mittel); line-height: 1.6; }

.lz__karten { display: flex; flex-direction: column; gap: 9px; }
.lz__karte { width: 100%; text-align: left; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r); padding: 14px 16px; font: inherit; cursor: pointer; transition: border-color .14s ease; }
.lz__karte:hover { border-color: var(--gruen); }
.lz__karte-frage { margin: 0; font-weight: 500; font-size: .97rem; }
.lz__karte-wink { margin: 8px 0 0; font-size: .82rem; font-weight: 500; color: var(--gruen); }
.lz__karte-antwort { margin: 9px 0 0; padding-top: 9px; border-top: 1px solid var(--linie); font-size: .93rem; color: var(--tinte-mittel); line-height: 1.6; }
.lz__karte-antwort[hidden] { display: none; }
.lz__fund { margin: 20px 0 0; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; font-size: .81rem; color: var(--tinte-leise); }
.lz__fund-norm { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 100px; padding: 4px 12px; color: var(--tinte-mittel); font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .77rem; }

/* Blättern */
.lz__steuer { display: flex; align-items: center; gap: 14px; padding: 16px 30px; border-top: 1px solid var(--linie); background: var(--flaeche); }
.lz__steuer[hidden] { display: none; }
.lz__stand { font-size: .83rem; color: var(--tinte-leise); font-variant-numeric: tabular-nums; }
.lz__steuer-rechts { margin-left: auto; display: flex; gap: 10px; }
/* Gesperrt heißt blass, aber nicht unsichtbar: mit --linie-stark stand der
   Knopf bei 1,36:1 und war praktisch nicht mehr zu erkennen. */
/* .knopf setzt display: inline-flex, und das schlaegt das hidden-Attribut.
   Ohne diese Regel bleibt ein versteckter Knopf sichtbar und tut nichts. */
.knopf[hidden] { display: none; }
.knopf--blatt { background: var(--weiss); color: var(--tinte); border-color: var(--linie-stark); }
.knopf--blatt:hover:not(:disabled) { border-color: var(--gruen); color: var(--gruen-dunkel); }
.knopf--blatt:disabled { color: #7f8d85; border-color: var(--linie); background: var(--flaeche); cursor: default; }

/* Der Ruf zum Registrieren, direkt unter dem Lesebereich */
.ln-ruf { background: var(--flaeche); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: clamp(40px, 5.5vw, 64px) 0; }
.ln-ruf__innen { max-width: 620px; margin: 0 auto; text-align: center; }
.ln-ruf h2 { margin: 0; font-size: clamp(1.35rem, 2.8vw, 1.7rem); }
.ln-ruf p { margin: 13px 0 0; color: var(--tinte-mittel); }
.ln-ruf__knoepfe { margin-top: 22px; display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; }
.ln-ruf__zahlen { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--linie); display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }
.ln-ruf__zahl b { display: block; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 1.45rem; line-height: 1; color: var(--gruen); font-variant-numeric: tabular-nums; }
.ln-ruf__zahl span { font-size: .82rem; color: var(--tinte-leise); }

@media (max-width: 900px) {
  .lz { grid-template-columns: 1fr; gap: 18px; }
  .lz__leiste { position: static; max-height: 260px; border: 1px solid var(--linie); border-radius: var(--r); padding: 16px; background: var(--weiss); }
  .lz__kopf { padding: 20px 20px 18px; }
  .lz__blatt { padding: 22px 20px 24px; min-height: 0; }
  .lz__steuer { padding: 14px 20px; flex-wrap: wrap; }
  .lz__steuer-rechts { margin-left: 0; width: 100%; }
  .lz__steuer-rechts .knopf { flex: 1; }
  .ln-ruf__zahlen { gap: 22px; }
}

/* ===================== PRÜFUNGSSIMULATION =====================
   Ausdrückliche Ansage: ohne Registrierung klappt hier NICHTS. Keine Fragen,
   keine Probe, kein Start. Zu sehen ist nur, wie die Auswahl aussieht.

   Aufgebaut wie der SimulationScreen der App: je Teil EINE Zeile aus
   Buchstabenfeld links, Titel und darunter eine graue Feinzeile, rechts das
   Statuszeichen. Die Punktzahl steht MIT in der Feinzeile, nicht in einer
   eigenen Spalte rechts. Der erste Versuch hatte drei verschiedene
   Ausrichtungen in einer Zeile und wirkte dadurch unruhig.
   Alle Zahlen und Bezeichnungen aus pruefung.config.json und ui.json. */

.sim-kopf { padding: clamp(34px, 4.5vw, 54px) 0 0; }
.sim-kopf__innen { max-width: 62ch; }
.sim-kopf h1 { margin: 16px 0 0; }
.sim-kopf p { margin-top: 15px; color: var(--tinte-mittel); font-size: 1.05rem; }

/* Die Karte soll allein den ersten Bildschirm füllen, alles Weitere kommt
   erst beim Herunterscrollen. Mindesthöhe, nicht feste Höhe: auf flachen
   Fenstern wächst der Abschnitt lieber, als die Karte zu quetschen. */
.sim-schau { padding: 26px 0 40px; min-height: calc(100vh - 340px); display: flex; align-items: center; }
.sim-schau > .huelle { width: 100%; }

/* Der grüne Schein hinter der Karte. Er ragt über alle vier Kanten hinaus,
   sonst deckt die weiße Karte ihn vollständig ab (Lehre vom Globus). */
.simbuehne { position: relative; }
.simbuehne::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: min(1000px, 150%); height: 152%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse 60% 54% at 50% 46%, rgba(0,120,64,.20) 0%, rgba(0,120,64,.10) 42%, rgba(0,120,64,0) 70%),
    radial-gradient(ellipse 44% 38% at 50% 62%, rgba(22,163,92,.13) 0%, rgba(22,163,92,0) 68%);
  pointer-events: none; z-index: 0;
}
.simbuehne > .simkarte { position: relative; z-index: 1; }

.simkarte {
  max-width: 640px; margin: 0 auto;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--r-gross); box-shadow: var(--schatten-gross); overflow: hidden;
}
.simkarte__kopf { padding: 26px 28px 24px; border-bottom: 1px solid var(--linie); background: var(--flaeche); }
.simkarte__ober { font-size: .84rem; color: var(--tinte-leise); margin: 0; }
.simkarte__titel { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.6rem); letter-spacing: -.02em; margin: 5px 0 0; }
.simkarte__koerper { padding: 24px 28px 28px; }

/* Eine Zeile je Teil. Zwei Textzeilen, beide linksbündig, mehr nicht. */
.simteile { display: flex; flex-direction: column; gap: 11px; }
.simteil {
  display: flex; align-items: center; gap: 15px;
  background: var(--flaeche); border-radius: var(--r); padding: 16px 18px;
}
.simteil__feld {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  background: var(--weiss); border: 1px solid var(--linie); display: grid; place-items: center;
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 1rem;
  color: var(--tinte-leise);
}
/* Die mündliche Prüfung trägt in der App ihren eigenen Farbton */
.simteil__feld--c { background: #e8dffc; border-color: #dccdf7; color: #563e7b; }
.simteil__text { min-width: 0; }
.simteil__name { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: 1.02rem; color: var(--tinte); }
.simteil__fein { margin: 3px 0 0; font-size: .89rem; color: var(--tinte-leise); font-variant-numeric: tabular-nums; }
.simteil__stand {
  flex-shrink: 0; margin-left: auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--weiss); border: 1px solid var(--linie-stark);
  display: grid; place-items: center; color: var(--tinte-leise);
}
.simteil__stand::before { content: ''; width: 10px; height: 1.5px; border-radius: 1px; background: currentColor; }

/* Der Knopf sitzt wie in der App unten in der Karte, mit Titel und Zeile
   darunter, und trägt sein Zeichen rechts. */
.simstart {
  display: flex; align-items: center; gap: 16px; width: 100%;
  margin-top: 20px; padding: 19px 22px; border-radius: var(--r);
  background: var(--gruen); color: #fff; text-decoration: none;
  transition: background-color .16s ease;
}
.simstart:hover { background: var(--gruen-dunkel); }
.simstart__text { min-width: 0; }
.simstart__titel { display: block; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 1.04rem; }
.simstart__fein { display: block; margin-top: 3px; font-size: .87rem; opacity: .9; }
.simstart__zeichen {
  flex-shrink: 0; margin-left: auto; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.22); display: grid; place-items: center;
  font-size: .9rem; line-height: 1;
}

.simkarte__fein { margin: 14px 0 0; font-size: .87rem; color: var(--tinte-leise); text-align: center; }

/* Die Wertung als vier Kacheln nebeneinander, direkt unter der Karte.
   Sie füllen den Raum, der darunter sonst leer bliebe. Alle vier gleich
   aufgebaut: Zahl, Bezeichnung, kurzer Zusatz, alles linksbündig. */
.wkacheln { max-width: 880px; margin: 26px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* Sie reagieren auf das Ueberfahren, sind aber KEINE Knoepfe: kein href,
   kein cursor: pointer. Die Bewegung sagt nur "hier steht etwas", sie
   verspricht kein Ziel. */
.wkachel {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r);
  padding: 18px 18px 19px; display: flex; flex-direction: column;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.wkachel:hover { border-color: var(--gruen); box-shadow: var(--schatten); transform: translateY(-2px); }
.wkachel__wert {
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700;
  font-size: 1.5rem; line-height: 1; color: var(--gruen); font-variant-numeric: tabular-nums;
}
.wkachel__was { margin-top: 9px; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .84rem; line-height: 1.3; }
.wkachel__zusatz { margin: 7px 0 0; font-size: .82rem; color: var(--tinte-leise); line-height: 1.45; }

.sim-ruf { background: var(--flaeche); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: clamp(40px, 5.5vw, 64px) 0; }
.sim-ruf__innen { max-width: 600px; margin: 0 auto; text-align: center; }
.sim-ruf h2 { margin: 0; font-size: clamp(1.35rem, 2.8vw, 1.7rem); }
.sim-ruf p { margin: 13px 0 0; color: var(--tinte-mittel); }
.sim-ruf__knoepfe { margin-top: 22px; display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; }

@media (max-height: 820px), (max-width: 560px) {
  .sim-schau { min-height: 0; display: block; }
}
@media (max-width: 700px) {
  .wkacheln { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .simkarte__kopf, .simkarte__koerper { padding-left: 18px; padding-right: 18px; }
  .simteil { gap: 12px; padding: 12px 13px; }
  .simteil__feld { width: 38px; height: 38px; }
  .wertung__zeile { padding: 14px 18px; gap: 14px; }
  .wertung__wert { width: 58px; font-size: 1.08rem; }
}

/* ===================== VIDEOKURS =====================
   Aufgebaut wie die Lernen-Seite: links die Gliederung, rechts der Inhalt.
   Frei zugänglich ist NUR die Einleitung, und die in allen Sprachen. Die
   25 Kurslektionen stehen als Themen da, ohne Titel: einen Videokatalog
   gibt es noch nicht (`videoKatalogUrl: null`), also wird hier auch keiner
   erfunden. Die fünf Themen und ihre Gewichtung sind echt.

   Die Einleitung liegt fertig vor: sechs Dateien in videos/, eine je
   Sprache, zusammen 82 MB. Sie laeuft in .vk-buehne. */

.vk-kopf { padding: clamp(34px, 4.5vw, 54px) 0 0; }
.vk-kopf__innen { max-width: 62ch; }
.vk-kopf h1 { margin: 16px 0 0; }
.vk-kopf p { margin-top: 15px; color: var(--tinte-mittel); font-size: 1.05rem; }
.vk-schau { padding: 0; }

.vk { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 32px; align-items: start; margin: 28px 0 clamp(44px, 6vw, 70px); }

/* — Die Gliederung links, wie im Lernbereich — */
.vk__leiste { position: sticky; top: 92px; }
.vk__ueber { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .73rem; letter-spacing: .07em; text-transform: uppercase; color: var(--tinte-leise); margin: 0 0 14px; }

.vk__frei {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--gruen-hauch); border: 1px solid #cfe6da; border-radius: var(--r);
  padding: 13px 14px; margin-bottom: 18px;
}
.vk__frei-zeichen {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--gruen); display: grid; place-items: center;
}
.vk__frei-zeichen::after { content: ''; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.vk__frei-name { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .93rem; color: var(--gruen-dunkel); }
.vk__frei-fein { display: block; font-family: 'Inter', system-ui, sans-serif; font-weight: 400; font-size: .78rem; color: var(--tinte-mittel); margin-top: 2px; }

/* Die fünf Themen. Sichtbar, aber nicht erreichbar: gestrichelte Nummer,
   kein Verweis, wie die Fortsetzung im Lernbereich. */
.vk__themen { list-style: none; margin: 0; padding: 0; }
.vk__thema { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.vk__thema-nr {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 2px dashed var(--linie-stark); background: var(--weiss);
  display: grid; place-items: center;
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .78rem; color: #7f8d85;
}
.vk__thema-text { min-width: 0; font-size: .87rem; color: #6a7870; line-height: 1.35; }
.vk__thema-gewicht { display: block; font-size: .76rem; color: #7f8d85; margin-top: 1px; font-variant-numeric: tabular-nums; }
.vk__summe { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--linie); font-size: .8rem; color: var(--tinte-leise); }

/* — Der Videobereich rechts — */
.vk__bereich { min-width: 0; }
.vk-buehne {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-gross); overflow: hidden;
  background: linear-gradient(150deg, #12261c 0%, #0b1f16 55%, #16341f 100%);
  display: grid; place-items: center; text-align: center; padding: 24px;
}
/* — Das Vorschaubild vor dem ersten Klick —
   Die Bühne zeigt zuerst das Titelbild der gewählten Sprachfassung: dort
   steht der Titel schon so, wie er auch im Video erscheint. Darüber liegt
   ein Abspielknopf, und die Bedienleiste des Browsers bleibt so lange
   weg. Ohne das sieht die Bühne aus wie ein Bild mit einem grauen Streifen
   darunter, und niemand erkennt, dass ein Video darauf wartet.

   Der Knopf sitzt bei 72 Prozent Höhe, nicht in der Mitte: dort steht der
   Titel des Videos, und den soll er nicht zudecken. */
.vk-vorschau {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; border: 0; padding: 0; background: transparent;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
/* Ohne diese Zeile bliebe der Knopf sichtbar: das display der Regel
   darüber schlägt das hidden-Attribut. Derselbe Stolperstein wie bei
   .knopf[hidden] weiter oben. */
.vk-vorschau[hidden] { display: none; }
.vk-vorschau__play {
  position: absolute; left: 50%; top: 72%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--gruen); box-shadow: 0 6px 20px rgba(11, 31, 22, .3);
  display: grid; place-items: center;
  transition: transform .16s ease, background-color .16s ease;
}
.vk-vorschau__play::after {
  content: ''; border-left: 19px solid #fff;
  border-top: 12px solid transparent; border-bottom: 12px solid transparent;
  margin-left: 5px;
}
.vk-vorschau:hover .vk-vorschau__play { transform: translate(-50%, -50%) scale(1.06); background: var(--gruen-dunkel); }
.vk-vorschau:focus-visible { outline: 3px solid var(--gruen-dunkel); outline-offset: -3px; border-radius: var(--r-gross); }
@media (prefers-reduced-motion: reduce) {
  .vk-vorschau__play { transition: background-color .16s ease; }
  .vk-vorschau:hover .vk-vorschau__play { transform: translate(-50%, -50%); }
}
@media (max-width: 560px) {
  .vk-vorschau__play { width: 54px; height: 54px; }
  .vk-vorschau__play::after { border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; }
}

.vk__unter { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.vk__titel { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 1.16rem; margin: 0; }
/* Kein grün gefuellter Pillen-Hintergrund. Die Schrift selbst traegt die
   Aussage, so wie ueberall sonst auf der Seite. */
.vk__marke { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; color: var(--gruen-dunkel); }
.vk__beschreibung { margin: 10px 0 0; color: var(--tinte-mittel); font-size: .97rem; max-width: 62ch; }

/* Die Sprachwahl. Sie tauscht die Quelle des Videos, das Standbild, die
   angezeigte Dauer und die Beschriftung der zwei Knoepfe darunter. */
.vk-sprachen { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--linie); }
.vk-sprachen__ueber { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .73rem; letter-spacing: .07em; text-transform: uppercase; color: var(--tinte-leise); }
.vk-sprachen__reihe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.vk-sprache {
  background: var(--weiss); border: 1px solid var(--linie-stark); border-radius: 100px;
  padding: 8px 15px; font: inherit; font-size: .88rem; color: var(--tinte-mittel); cursor: pointer;
  display: flex; align-items: baseline; gap: 7px;
  transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}
.vk-sprache:hover { border-color: var(--gruen); color: var(--gruen-dunkel); }
.vk-sprache[aria-pressed="true"] { background: var(--gruen-hauch); border-color: var(--gruen); color: var(--gruen-dunkel); font-weight: 500; }
.vk-sprache__eigen { font-size: .82rem; color: var(--tinte-leise); }
.vk-sprache[aria-pressed="true"] .vk-sprache__eigen { color: var(--gruen); }
.vk-sprachen__fein { margin: 12px 0 0; font-size: .84rem; color: var(--tinte-leise); }

/* — Die Bühne trägt jetzt eine echte Videodatei —
   Ein einziges <video>, dessen Quelle beim Sprachwechsel getauscht wird.
   Der dunkle Verlauf bleibt darunter: er ist das, was man in der halben
   Sekunde sieht, bevor das Standbild da ist. */
.vk-buehne__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; border: 0; background: #0b1f16;
}

/* Fehlt die Datei — etwa in einer Vorschau, die nur das HTML kennt —,
   sagt die Bühne das, statt schwarz zu bleiben und nichts zu tun. */
.vk-buehne__fehlt {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  background: rgba(9, 26, 19, .93); color: #fff;
  padding: 13px 18px; font-size: .87rem; line-height: 1.45; text-align: left;
}
.vk-buehne__fehlt b { font-weight: 600; }
.vk-buehne__fehlt code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .93em; color: #b9e3cd; }

/* — Die zwei Wege unter dem Video —
   Genau diese beiden führt das Video selbst vor (Szene 11, ab etwa 2:55).
   Ihre Beschriftung wechselt deshalb mit der Sprache des Videos: was der
   Zuschauer gehört und gesehen hat, muss er hier wörtlich wiederfinden. */
.vk-wege { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 18px; }
.vk-weg {
  display: flex; align-items: center; gap: 11px;
  background: var(--weiss); border: 1px solid var(--linie-stark); border-radius: var(--r);
  padding: 14px 16px; text-decoration: none; color: var(--tinte);
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .95rem;
  transition: border-color .14s ease, background-color .14s ease, transform .14s ease;
}
.vk-weg:hover { border-color: var(--gruen); background: var(--gruen-hauch); color: var(--gruen-dunkel); transform: translateY(-1px); }
.vk-weg:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }
.vk-weg__zeichen { flex-shrink: 0; width: 19px; height: 19px; color: var(--gruen); }
.vk-weg__marke { min-width: 0; }
.vk-weg__pfeil { margin-left: auto; color: var(--tinte-leise); flex-shrink: 0; }
.vk-weg:hover .vk-weg__pfeil { color: var(--gruen); }
/* Arabisch und Persisch laufen von rechts nach links. Der Pfeil dreht mit,
   sonst zeigt er aus dem Satz heraus statt in ihn hinein. */
.vk-weg[dir="rtl"] .vk-weg__pfeil { margin-left: 0; margin-right: auto; transform: scaleX(-1); }

.vk__dauer { font-size: .85rem; color: var(--tinte-leise); font-variant-numeric: tabular-nums; margin-left: auto; }

.vk-ruf { background: var(--flaeche); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: clamp(40px, 5.5vw, 64px) 0; }
.vk-ruf__innen { max-width: 600px; margin: 0 auto; text-align: center; }
.vk-ruf h2 { margin: 0; font-size: clamp(1.35rem, 2.8vw, 1.7rem); }
.vk-ruf p { margin: 13px 0 0; color: var(--tinte-mittel); }
.vk-ruf__knoepfe { margin-top: 22px; display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 900px) {
  .vk { grid-template-columns: 1fr; gap: 22px; }
  .vk__leiste { position: static; }
}
@media (max-width: 560px) {
  /* Zwei Spalten sind hier zu eng: die laengeren Beschriftungen brechen
     um und die Knoepfe stehen verschieden hoch. Untereinander bekommt
     jede Sprache ihre eigene Zeile. */
  .vk-wege { grid-template-columns: 1fr; }
}

/* ===================== REGISTRIEREN =====================
   Zuerst fürs Handy gebaut, nicht nachträglich dafür angepasst. Der Weg,
   der zählt: jemand lädt die App im Store, tippt auf „Konto anlegen" und
   landet hier — auf einem Telefon, oft unterwegs, oft mit einer Hand.

   Drei Regeln, die auf dem Handy den Unterschied machen:
   1. Eingabefelder mindestens 16px Schrift. Darunter zoomt iOS beim
      Antippen hinein, und der Nutzer sieht plötzlich nur noch die Hälfte.
   2. Jedes Tippziel mindestens 46px hoch.
   3. `autocomplete` und `inputmode` gesetzt, damit die richtige Tastatur
      erscheint und der Passwortspeicher greift. */

.reg { padding: clamp(26px, 5vw, 54px) 0 clamp(44px, 7vw, 72px); }
.reg__innen { max-width: 430px; margin: 0 auto; }
.reg__kopf { text-align: center; }
.reg__kopf h1 { margin: 14px 0 0; font-size: clamp(1.5rem, 5vw, 1.9rem); }
.reg__kopf p { margin: 12px 0 0; color: var(--tinte-mittel); font-size: 1rem; }

.reg__karte {
  margin-top: 24px; background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--r-gross); box-shadow: var(--schatten-gross); padding: 24px 22px 26px;
}

.feld { margin-bottom: 17px; }
.feld:last-of-type { margin-bottom: 0; }
.feld__marke { display: block; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .89rem; margin-bottom: 7px; }
.feld__eingabe {
  width: 100%; border: 1.5px solid #84958b; border-radius: var(--r);
  padding: 13px 15px; background: var(--weiss); color: var(--tinte);
  font-family: inherit;
  /* 16px, nicht weniger: sonst zoomt iOS beim Antippen hinein. */
  font-size: 16px; line-height: 1.4; min-height: 48px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.feld__eingabe::placeholder { color: #6e7c74; }
.feld__eingabe:focus {
  outline: none; border-color: var(--gruen);
  box-shadow: 0 0 0 3px var(--gruen-hauch);
}
.feld__eingabe[aria-invalid="true"] { border-color: var(--falsch); }
.feld__eingabe[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--falsch-flur); }

/* Das Passwortfeld trägt rechts den Umschalter. Er liegt im Feld, damit
   die Zeile auf schmalen Schirmen nicht umbricht. */
.feld__mit-knopf { position: relative; }
.feld__mit-knopf .feld__eingabe { padding-right: 58px; }
.feld__zeigen {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  min-width: 46px; min-height: 40px; border: 0; background: none;
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .82rem;
  color: var(--gruen-dunkel); cursor: pointer; border-radius: 9px;
}
.feld__zeigen:hover { background: var(--gruen-hauch); }

.feld__fein { margin: 6px 0 0; font-size: .82rem; color: var(--tinte-leise); font-weight: 400; }
.feld__marke .feld__fein { display: inline; margin: 0; }
/* Die Rückfrage bei einem vermuteten Vertipper. Ruhig, nicht rot: es
   ist kein Fehler, sondern eine Frage — die Adresse kann stimmen. */
.feld__tipp {
  margin: 6px 0 0; font-size: .86rem; line-height: 1.5; color: var(--tinte-mittel);
}
.feld__tipp[hidden] { display: none; }
.feld__tipp button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--gruen-dunkel);
  text-decoration: underline; text-underline-offset: 3px;
}
.feld__tipp button:hover { color: var(--gruen); }

.feld__fehler { margin: 7px 0 0; font-size: .86rem; color: var(--falsch); font-weight: 500; }

/* — Fragen und Antworten —
   Elf kleine Seiten, jede mit drei bis sechs Fragen, alle Antworten
   offen. Aufbau wie jeder andere Abschnitt der Seite: .block fuer den
   Rahmen, .block__kopf fuer den zentrierten Kopf. Dazu kommt hier nur
   die Textspalte und der Abstand zwischen den Fragen.

   Kein Aufklappen, keine Seitenleiste, keine Kacheln. Wer hier landet,
   kommt aus der Suche mit einer Frage und soll die Antwort sehen,
   nicht ein Menue. */
.fr__spalte { max-width: 720px; margin: clamp(30px, 4vw, 44px) auto 0; }
.fr__frage { padding: 30px 0 0; margin: 30px 0 0; border-top: 1px solid var(--linie);
  position: relative; }
.fr__frage:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
/* Der Kopf klebt oben und ist 64 Pixel hoch. Ohne diesen Abstand
   landet die angesprungene Frage genau darunter und ist unsichtbar. */
.fr__frage { scroll-margin-top: 84px; }

/* Wer aus der Uebersicht auf eine Frage klickt, soll sehen, wo die
   Antwort steht. Kein Kasten, keine Pille, kein Strich: nur die
   Flaeche leuchtet auf. Der dunkelgruene Balken links war die erste
   Fassung und ist auf Ansage des Gruenders wieder raus.

   Die Flaeche liegt in einem eigenen Element HINTER dem Text, damit
   sich am Aufbau der Seite nichts verschiebt. Der Ton ist der helle
   gruen-hauch. Zwischendurch stand hier das kraeftigere gruen-box,
   das war dem Gruender zu viel. Sichtbar ist der helle Ton hier,
   weil alle Fragenseiten auf weissem Grund stehen (.block, nicht
   .block--flaeche). */
.fr__frage::before { content: ""; position: absolute; z-index: -1;
  inset: -12px -18px -8px; border-radius: var(--r);
  background: var(--gruen-hauch);
  opacity: 0; pointer-events: none; }

/* EINMAL aufleuchten, dann langsam ausblenden. Vorher war es zweimal,
   das hat der Gruender verworfen. Aufgeteilt auf 2,4 Sekunden:
     0,00 bis 0,12 s   kommen        schnell, damit man es mitbekommt
     0,12 bis 0,72 s   stehen        gut eine halbe Sekunde
     0,72 bis 2,40 s   gehen         die restlichen zwei Drittel der
                                     Zeit, also sehr langsam
   Das Ausblenden macht den groessten Teil aus, deshalb ease-out:
   es faellt zuerst deutlich ab und laeuft dann sanft aus. */
.fr__frage.ist-ziel::before { animation: fr-ziel 2.4s ease-out forwards; }
@keyframes fr-ziel {
    0% { opacity: 0; }
    5% { opacity: 1; }
   30% { opacity: 1; }
  100% { opacity: 0; } }
/* Wer Bewegung abgestellt hat, braucht die Markierung trotzdem: sie
   steht dann einfach da, ohne Animation, und wird vom Skript wieder
   entfernt. */
@media (prefers-reduced-motion: reduce) {
  .fr__frage.ist-ziel::before { animation: none; opacity: 1; } }
.fr__frage h2 { font-size: 1.22rem; line-height: 1.35; }
.fr__frage p { margin: 13px 0 0; color: var(--tinte-mittel); line-height: 1.72; }
/* Der erste Absatz IST die Antwort und steht dunkler da. Wer nur ihn
   liest, hat die Frage beantwortet. */
.fr__frage p.fr__erst { color: var(--tinte); font-size: 1.06rem; }
.fr__quelle { margin: 15px 0 0; font-size: .8rem; color: var(--tinte-leise); line-height: 1.55; }
.fr__quelle b { color: var(--tinte-leise); font-weight: 600; }

.fr__fuss { margin: 44px 0 0; padding-top: 26px; border-top: 1px solid var(--linie-stark); }
.fr__fuss h2 { font-size: 1.02rem; }
.fr__fuss p { margin: 12px 0 0; color: var(--tinte-mittel); line-height: 1.65; }
.fr__stand { margin: 0 0 22px; font-size: .84rem; color: var(--tinte-leise); }
/* Nachgemessen: zwischen dem Hinweis und "Passt dazu" standen 0 statt
   22 Pixel. Grund ist eine Kollision im Kaskadenverlauf: ".fr__fuss p"
   ist eine Klasse plus ein Element und damit spezifischer als
   ".fr__stand" allein, also gewann sein margin und hat den unteren
   Abstand geloescht. Diese Regel ist wieder spezifischer und stellt
   ihn her. */
.fr__fuss .fr__stand { margin: 0 0 22px; }
.fr__nachbarn { list-style: none; margin: 12px 0 0; padding: 0; }
.fr__nachbarn li { position: relative; padding-left: 15px; margin: 0 0 8px;
  font-size: .95rem; line-height: 1.5; }
/* Gruener Punkt als eigenes Zeichen, wie ueberall auf der Seite. */
.fr__nachbarn li::before { content: "\2022"; position: absolute; left: 0; top: -1px;
  color: var(--gruen); font-size: 1.05rem; line-height: 1.5; }
.fr__nachbarn a { color: var(--gruen-dunkel); }

/* Die Uebersicht. Sie ist kein Menue zum Blaettern, sondern der
   Knotenpunkt fuer den Verweis im Fussbereich und fuer die
   Suchmaschinen. Deshalb schlicht: Ueberschrift, Liste, fertig. */
.fr__gruppe { padding: 26px 0 0; margin: 26px 0 0; border-top: 1px solid var(--linie); }
.fr__gruppe:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.fr__gruppe h2 { font-size: 1.08rem; }
.fr__gruppe h2 a { color: var(--tinte); text-decoration: none; }
.fr__gruppe h2 a:hover { color: var(--gruen-dunkel); }
.fr__gruppe > p { margin: 6px 0 0; font-size: .88rem; color: var(--tinte-leise); }

@media (max-width: 560px) { .fr__frage h2 { font-size: 1.1rem; } }
/* — Fragen zum Produkt, Startseite —
   Aufklappbar und ueber die volle Breite der Huelle, nicht als
   schmale Spalte in der Mitte. <details> statt eigenem Javascript,
   genau wie bei der Sprachwahl: Auf- und Zuklappen kann der Browser
   selbst, samt Tastaturbedienung. Zugeklappt heisst dabei NICHT
   unsichtbar fuer Google, der Text steht im Quelltext. */
.qna__liste { margin: clamp(28px, 3.4vw, 40px) 0 0;
  border-top: 1px solid var(--linie); }
.qna__f { border-bottom: 1px solid var(--linie); }

/* Die ganze Zeile ist der Schalter, nicht nur das Wort. */
.qna__f > summary { list-style: none; cursor: pointer; position: relative;
  display: block; padding: 19px 40px 19px 0; color: var(--tinte); }
.qna__f > summary h3 { font-size: 1.06rem; line-height: 1.45; font-weight: 600; }
.qna__f > summary::-webkit-details-marker { display: none; }
.qna__f > summary:hover h3 { color: var(--gruen-dunkel); }
.qna__f > summary:focus-visible { outline: 2px solid var(--gruen);
  outline-offset: 3px; border-radius: 3px; }

/* Der Winkel rechts: zwei Kanten eines Quadrats, gedreht.
   Gedreht sitzt er nicht von selbst mittig. Zeigt er nach unten,
   haengt seine Spitze unter der Mitte, zeigt er nach oben, darueber.
   Beide Lagen bekommen ihren eigenen Ausgleich, sonst liest sich
   der aufgeklappte Winkel wie ein L. */
.qna__f > summary::after { content: ""; position: absolute; right: 6px;
  top: 25px; width: 9px; height: 9px; border-right: 2px solid var(--gruen);
  border-bottom: 2px solid var(--gruen); transform-origin: center;
  transform: translateY(-3px) rotate(45deg);
  transition: transform .18s ease; }
.qna__f[open] > summary::after { transform: translateY(2px) rotate(225deg); }
@media (prefers-reduced-motion: reduce) {
  .qna__f > summary::after { transition: none; } }

/* Die Antwort. Volle Breite wie gewuenscht, aber nicht endlos: ab
   etwa 90 Zeichen je Zeile verliert das Auge den Zeilenanfang. */
.qna__antwort { padding: 0 40px 22px 0; max-width: 90ch; }
.qna__antwort p { margin: 0; color: var(--tinte-mittel); line-height: 1.72;
  font-size: 1.02rem; }
.fr__mehr { margin: 26px 0 0; font-size: .92rem; color: var(--tinte-mittel); }
.fr__mehr a { color: var(--gruen-dunkel); }

/* Auf den Verkaufsseiten steht nur diese eine Zeile. Der Block
   gehoert dort nicht hin: auf /lernen standen 77 eigene Woerter und
   183 Woerter Fragenblock, er war mehr als doppelt so lang wie die
   Seite, die er begleiten sollte. */
.qna-zeile { padding: clamp(26px, 3vw, 38px) 0; }
.qna-zeile p { margin: 0; text-align: center; color: var(--tinte-mittel);
  font-size: .96rem; }
.qna-zeile a { color: var(--gruen-dunkel); }

@media (max-width: 560px) {
  .qna__f > summary { padding: 16px 34px 16px 0; }
  .qna__f > summary h3 { font-size: .98rem; }
  .qna__f > summary::after { top: 21px; } }
/* — Rechtsseiten —
   Lange Fließtexte. Das Maß ist bewusst schmaler als der Rest der Seite:
   über 720 px verliert das Auge beim Zeilenwechsel die Spur, und genau
   diese Texte werden am ehesten wirklich gelesen. */
.recht { padding: clamp(26px, 5vw, 54px) 0 clamp(48px, 7vw, 84px); }
.recht__innen { max-width: 720px; margin: 0 auto; }
.recht__innen--schmal { max-width: 560px; }
.recht h1 { margin: 14px 0 0; font-size: clamp(1.6rem, 5vw, 2.1rem); }
.recht h2 { margin: 40px 0 0; font-size: 1.2rem; }
.recht h3 { margin: 26px 0 0; font-size: 1rem; }
.recht p { margin: 13px 0 0; line-height: 1.72; color: var(--tinte-mittel); }
.recht ul,
.recht ol { margin: 13px 0 0; padding-left: 22px; line-height: 1.72; color: var(--tinte-mittel); }
.recht li { margin-top: 7px; }
.recht li > ul { margin-top: 7px; }
/* Für die eine Aussage, auf die es ankommt: die Zusage selbst, das
   Widerrufsformular. Abgesetzt, damit man sie beim Überfliegen findet. */
.recht__kasten {
  margin: 18px 0 0; padding: 16px 18px;
  background: var(--sand, #f6f5f2); border-radius: 10px;
  border-left: 3px solid var(--gruen, #2f7d4f);
  line-height: 1.72;
}
.recht__kasten p { margin: 0 0 10px; }
.recht__kasten p:last-child { margin-bottom: 0; }
.recht a { color: var(--gruen-dunkel); }
.recht b, .recht strong { color: var(--tinte); font-weight: 600; }
.recht__stand { margin: 10px 0 0; color: var(--tinte-leise); font-size: .9rem; }
.recht__fein { margin: 12px 0 0; font-size: .86rem; color: var(--tinte-leise); line-height: 1.6; }
.recht__zurueck { margin: 46px 0 0; padding-top: 22px; border-top: 1px solid var(--linie); }
/* Anschriften stehen als gewoehnlicher Absatz mit Zeilenumbruechen, nicht
   in einem hervorgehobenen Kasten: in einem Impressum ist die Anschrift
   der Normalfall und nicht die Ausnahme. Ein Rahmen darum liest sich wie
   ein Hinweis, den man beachten muss. */
.recht__anschrift { margin: 16px 0 0; line-height: 1.8; color: var(--tinte-mittel); }


/* — Kontaktformular — */
.ko__karte { margin-top: 26px; padding: clamp(22px, 4vw, 32px); background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-gross); box-shadow: var(--schatten-klein); }
.ko__text { min-height: 150px; resize: vertical; font-family: inherit; line-height: 1.6; }
select.feld__eingabe { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tinte-leise) 50%), linear-gradient(135deg, var(--tinte-leise) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; cursor: pointer; }

/* Der Köder wird aus dem Sichtfeld geschoben, nicht auf display:none
   gesetzt: manche Programme überspringen unsichtbare Felder, und dann
   liefe die Falle leer. */
.ko__koeder { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ko__hinweis { margin: 16px 0 0; font-size: .84rem; color: var(--tinte-leise); line-height: 1.6; text-align: center; }
.ko__fertig { text-align: center; padding: 12px 0 6px; }
.ko__haken { width: 54px; height: 54px; margin: 0 auto; border-radius: 50%; background: var(--gruen-hauch); color: var(--gruen-dunkel); display: grid; place-items: center; font-size: 1.7rem; }
.ko__fertig h3 { margin: 16px 0 0; font-size: 1.2rem; }
.ko__fertig p { margin: 10px 0 0; color: var(--tinte-mittel); line-height: 1.6; }
.ko__fertig .knopf { margin-top: 22px; }

.feld__fehler:empty { display: none; }

/* Passwortstärke: drei Streifen, keine Note und kein Zahlenwert. Es geht
   nur darum zu zeigen, dass es reicht, nicht um eine Bewertung. */
.staerke { display: flex; gap: 5px; margin-top: 9px; }
.staerke__teil { flex: 1; height: 4px; border-radius: 2px; background: var(--linie); transition: background-color .2s ease; }
.staerke__teil.ist-an { background: var(--gruen); }
.staerke__teil.ist-schwach { background: #d9a441; }

.reg__knopf {
  width: 100%; margin-top: 22px; min-height: 52px;
  font-size: 1.02rem; justify-content: center;
}
.reg__knopf:disabled { background: var(--linie-stark); color: #455049; cursor: default; box-shadow: none; }
.reg__knopf:disabled:hover { background: var(--linie-stark); transform: none; }

.reg__recht { margin: 15px 0 0; font-size: .82rem; color: var(--tinte-leise); line-height: 1.55; text-align: center; }
.reg__recht a { color: var(--gruen-dunkel); }


/* ----- Anmeldung über Google -----
   Aufbau wie .reg__knopf, damit beide Knöpfe übereinander gleich breit
   und gleich hoch sind. Ein Knopf, der einen Tick schmaler ist als der
   darunter, sieht nach Versehen aus. */
.knopf--google {
  width: 100%; min-height: 52px; margin-top: 2px;
  justify-content: center; gap: 11px;
  font-size: 1rem; font-weight: 600;
}
/* Das G bleibt vierfarbig: Googles Markenrichtlinien lassen kein
   Umfärben zu. Es ist der einzige Ort auf der Seite, an dem eine fremde
   Farbe steht, deshalb klein und ohne Behälter. */
.knopf__g { width: 18px; height: 18px; flex-shrink: 0; display: block; }

/* ----- Anmeldung über Apple -----
   Gleich groß wie der Google-Knopf. Apple verlangt, dass sein Knopf
   nicht kleiner oder unauffälliger ist als andere Anmeldeknöpfe, und
   dass Logo und Schrift dieselbe Farbe haben. Das Logo ist Apples
   eigenes Zeichen und wird nicht umgezeichnet. */
.knopf--apple {
  width: 100%; min-height: 52px; margin-top: 10px;
  justify-content: center; gap: 11px;
  font-size: 1rem; font-weight: 600;
}
.knopf__apple { width: 18px; height: 18px; flex-shrink: 0; display: block; fill: currentColor; }

/* Der Rücksprung von Google. Solange die Marke geprüft wird, hat das
   Formular nichts zu suchen: wer es sieht, tippt womöglich noch seine
   E-Mail ein, während die Anmeldung schon läuft. */
.googlewarten { display: none; text-align: center; padding: 26px 0 8px; }
body.google-kommt-zurueck .googlewarten { display: block; }
body.google-kommt-zurueck .an__karte > form,
body.google-kommt-zurueck .an__karte > .reg__trenner,
body.google-kommt-zurueck .an__karte > .reg__anmelden,
body.google-kommt-zurueck .an__karte > .knopf--google,
body.google-kommt-zurueck .an__karte > .knopf--apple { display: none; }
.googlewarten__text {
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600;
  color: var(--tinte-mittel); font-size: .96rem;
}

/* Die Fehlermeldung steht ÜBER dem Knopf und im normalen Fluss, nicht
   im Wartezustand.
   Beim ersten Versuch stand sie drin, und das Ergebnis war eine Falle:
   wer die Anmeldung bei Google abbricht, landete auf einer leeren Karte
   mit einer roten Zeile und ohne jeden Weg zurück. Das Anmeldeformular
   war ausgeblendet und kam nicht wieder. So bleibt es stehen, und wer
   mit Google nicht weiterkommt, nimmt einfach seine E-Mail. */
.googlefehler {
  margin: 0 0 14px; font-size: .88rem; line-height: 1.5;
  color: var(--falsch); text-align: center;
}
.googlefehler:empty { display: none; }

.reg__trenner { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--tinte-leise); font-size: .84rem; }
.reg__trenner::before, .reg__trenner::after { content: ''; flex: 1; height: 1px; background: var(--linie); }

.reg__anmelden { text-align: center; font-size: .93rem; color: var(--tinte-mittel); }
.reg__anmelden a { color: var(--gruen-dunkel); font-weight: 500; }

/* Was das Konto bringt. Steht bewusst UNTER dem Formular: wer aus der App
   kommt, will sich anmelden, nicht erst überzeugt werden. */
.reg__nutzen { margin-top: 28px; }
.reg__nutzen-ueber { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--tinte-leise); text-align: center; }
.reg__punkte { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.reg__punkt { display: flex; gap: 12px; align-items: flex-start; font-size: .93rem; color: var(--tinte-mittel); line-height: 1.5; }
.reg__haken { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--gruen-hauch); display: grid; place-items: center; margin-top: 1px; }
.reg__haken svg { width: 11px; height: 11px; color: var(--gruen-dunkel); }
.reg__punkt b { color: var(--tinte); font-weight: 600; }

/* Auf dem Telefon steht die Karte ohne eigenen Rahmen, damit sie die
   ganze Breite nutzt und nicht wie ein Kästchen im Kästchen wirkt. */
@media (max-width: 520px) {
  .reg { padding-top: 18px; }
  .reg__karte { border: 0; box-shadow: none; padding: 20px 0 0; margin-top: 18px; }
  .reg__innen { max-width: none; }
}

.reg__fertig { text-align: center; padding: 8px 0 4px; }
.reg__fertig[hidden] { display: none; }
.reg__fertig-zeichen {
  width: 52px; height: 52px; margin: 0 auto; border-radius: 50%;
  background: var(--gruen-hauch); display: grid; place-items: center; color: var(--gruen-dunkel);
}
.reg__fertig-zeichen svg { width: 24px; height: 24px; }
.reg__fertig-titel { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 1.2rem; margin: 14px 0 0; }
.reg__fertig-text { margin: 10px auto 0; max-width: 40ch; color: var(--tinte-mittel); font-size: .96rem; }
.reg__fertig-text b { color: var(--tinte); word-break: break-word; }
.reg__fertig-fein { margin: 12px 0 0; font-size: .86rem; color: var(--tinte-leise); }

/* ===================== ANGEMELDETER BEREICH =====================
   Alles, was es erst nach der Anmeldung gibt. Die Seite kennt zwei
   Zustände, und sie schaltet zwischen ihnen um, statt sie zu doppeln:
   `body.ist-angemeldet` blendet Werbendes aus und Persönliches ein.

   Die Zahlen im Konto kommen aus der Datenbank, nicht aus dem Browser.
   Ein frisches Konto steht überall auf null — das ist der Normalfall und
   muss so aussehen, als gehöre es dazu. */

/* — Der Kopf wechselt mit dem Zustand — */
/* Diese Regeln sagten früher auch, WIE etwas sichtbar ist — sie setzten
   selbst ein display. Damit stritten sie mit den Bauteilregeln darunter:
   .konto__knopf steht später in der Datei und hat dieselbe Spezifität,
   also gewann er. Der Knopf „Mein Konto" stand deshalb auch ausgeloggt da.
   Jetzt verbergen sie nur noch. Wie ein sichtbares Element aussieht,
   entscheidet allein sein eigenes Bauteil. */
body:not(.ist-angemeldet) .nur-angemeldet { display: none; }
body.ist-angemeldet .nur-abgemeldet { display: none; }

.konto__knopf {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--weiss); border: 1px solid var(--linie-stark); border-radius: 100px;
  padding: 6px 14px 6px 7px; font: inherit; font-size: .88rem; color: var(--tinte);
  cursor: pointer; min-height: 40px;
  transition: border-color .14s ease;
}
.konto__knopf:hover { border-color: var(--gruen); }
.konto__zeichen {
  width: 26px; height: 26px; border-radius: 50%; background: var(--gruen); color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: .82rem;
}
.konto__name { max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* — Anmelden: dasselbe Formular wie beim Registrieren, ein Feld weniger — */
.an { padding: clamp(26px, 5vw, 54px) 0 clamp(44px, 7vw, 72px); }
.an__innen { max-width: 430px; margin: 0 auto; }
.an__kopf { text-align: center; }
.an__kopf h1 { margin: 14px 0 0; font-size: clamp(1.5rem, 5vw, 1.9rem); }
.an__kopf p { margin: 12px 0 0; color: var(--tinte-mittel); }
.an__karte {
  margin-top: 24px; background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--r-gross); box-shadow: var(--schatten-gross); padding: 24px 22px 26px;
}
@media (max-width: 520px) {
  .an__karte { border: 0; box-shadow: none; padding: 20px 0 0; margin-top: 18px; }
  .an__innen { max-width: none; }
}

/* — Der Konto-Bereich — */
.kb { padding: clamp(24px, 4vw, 44px) 0 clamp(44px, 6vw, 70px); }
.kb__gruss { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.kb__gruss h1 { margin: 0; font-size: clamp(1.5rem, 4.5vw, 2rem); }
.kb__gruss-fein { margin: 7px 0 0; color: var(--tinte-mittel); }
.kb__stand {
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .8rem;
  color: var(--tinte-leise); font-variant-numeric: tabular-nums;
}

/* Die vier Zahlen oben. Bei einem frischen Konto stehen sie auf null,
   und die Zeile darunter sagt, was zu tun ist. */
.kb__zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; }
.kbz {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-gross);
  padding: 18px 18px 20px;
}
.kbz__wert {
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700;
  font-size: 1.7rem; line-height: 1; color: var(--gruen); font-variant-numeric: tabular-nums;
}
.kbz__wert.ist-leer { color: var(--linie-stark); }
.kbz__was { margin-top: 8px; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .87rem; }
.kbz__fein { margin: 5px 0 0; font-size: .8rem; color: var(--tinte-leise); line-height: 1.45; }

/* Der Weg weiter. Vier Bereiche, gesperrte erkennbar. */
.kb__wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 26px; }
.kbw {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-gross);
  padding: 20px 20px 22px;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.kbw:hover { border-color: var(--gruen); box-shadow: var(--schatten); transform: translateY(-2px); }
.kbw__kopf { display: flex; align-items: center; gap: 10px; }
.kbw__kopf svg { width: 18px; height: 18px; color: var(--gruen); flex-shrink: 0; }
.kbw__titel { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: 1.02rem; }
.kbw__text { font-size: .91rem; color: var(--tinte-mittel); line-height: 1.55; }
.kbw__stand { margin-top: auto; padding-top: 10px; font-size: .84rem; color: var(--tinte-leise); font-variant-numeric: tabular-nums; }

/* Gesperrt heißt: sichtbar, aber ohne Ziel. Wer nur den App-Zugang hat,
   sieht den Videokurs trotzdem und weiß, was ihm fehlt. */
.kbw--zu { cursor: default; }
.kbw--zu:hover { border-color: var(--linie); box-shadow: none; transform: none; }
.kbw--zu .kbw__titel, .kbw--zu .kbw__text { color: var(--tinte-leise); }
.kbw--zu .kbw__kopf svg { color: var(--linie-stark); }
.kbw__schloss {
  margin-left: auto; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600;
  font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--tinte-leise);
}

/* Was der Zugang umfasst */
.kb__zugang { margin-top: 28px; border: 1px solid var(--linie); border-radius: var(--r-gross); overflow: hidden; }
.kb__zugang-kopf {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 16px 20px; background: var(--flaeche); border-bottom: 1px solid var(--linie);
}
.kb__zugang-titel { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: 1rem; }
.kb__zugang-art { font-size: .86rem; color: var(--tinte-leise); }
.kb__zugang-liste { list-style: none; margin: 0; padding: 0; }
.kb__zugang-zeile { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--linie); font-size: .94rem; }
.kb__zugang-zeile:last-child { border-bottom: 0; }
.kb__haken { flex-shrink: 0; width: 20px; height: 20px; display: grid; place-items: center; }
.kb__haken svg { width: 13px; height: 13px; }
.kb__haken--ja { color: var(--gruen); }
.kb__haken--nein { color: var(--linie-stark); }
.kb__zugang-zeile.ist-zu { color: var(--tinte-leise); }
.kb__zugang-fuss { padding: 15px 20px; background: var(--flaeche); font-size: .88rem; color: var(--tinte-mittel); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Konto und Abmelden */
.kb__fuss { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linie); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: .89rem; color: var(--tinte-leise); }
.kb__abmelden { margin-left: auto; background: none; border: 0; font: inherit; font-size: .89rem; color: var(--falsch); cursor: pointer; padding: 8px 2px; min-height: 40px; }
.kb__abmelden:hover { text-decoration: underline; }

/* Solange die Daten laden */
.kb__laedt { padding: 40px 0; text-align: center; color: var(--tinte-leise); }
.kb__laedt[hidden], .kb__inhalt[hidden] { display: none; }

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

/* ===================== REGISTRIERUNG ALS ÜBERBLENDUNG =====================
   Dasselbe Formular wie auf der eigenen Seite, nur schwebend über dem,
   was man gerade liest. Wer mitten in einer Übungsrunde steckt, verliert
   sie nicht, nur weil er ein Konto anlegt.

   Gebaut auf <dialog>: das bringt Fokusfalle, Escape und den abgedunkelten
   Hintergrund von Haus aus mit, ohne dass man es nachbauen muss.
   Auf Geräten, die das nicht können, führt derselbe Verweis wie bisher auf
   die Seite #/registrieren. Deshalb bleibt sie bestehen.

   Auf dem Telefon fährt das Formular von UNTEN herein und klebt am
   unteren Rand: dort ist der Daumen. Auf dem Rechner steht es mittig. */

.uebermodal {
  padding: 0; border: 0; background: transparent;
  max-width: 100%; max-height: 100%; width: 100%; height: 100%;
  overflow: hidden;
}
.uebermodal::backdrop { background: rgba(11, 31, 22, .55); }

.uebermodal__huelle {
  height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow-y: auto;
}
.uebermodal__karte {
  position: relative; width: 100%; max-width: 430px;
  background: var(--weiss); border-radius: var(--r-gross);
  box-shadow: 0 24px 60px -12px rgba(11,31,22,.4);
  padding: 26px 24px 28px;
}

.uebermodal__zu {
  position: absolute; top: 10px; right: 10px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--tinte-leise);
  font-size: 1.3rem; line-height: 1;
}
.uebermodal__zu:hover { background: var(--flaeche); color: var(--tinte); }

.uebermodal__kopf { text-align: center; padding: 0 40px; }
.uebermodal__kopf h2 { margin: 0; font-size: 1.34rem; }
.uebermodal__kopf p { margin: 9px 0 0; color: var(--tinte-mittel); font-size: .95rem; }
.uebermodal__form { margin-top: 20px; }

.uebermodal__fein {
  margin: 16px 0 0; padding-top: 15px; border-top: 1px solid var(--linie);
  text-align: center; font-size: .88rem; color: var(--tinte-mittel);
}
.uebermodal__fein a { color: var(--gruen-dunkel); font-weight: 500; }

/* Sanft hereinfahren. Wer Bewegung abgestellt hat, bekommt sie sofort. */
@media (prefers-reduced-motion: no-preference) {
  .uebermodal[open] .uebermodal__karte { animation: modalHerein .22s cubic-bezier(.2,.7,.3,1); }
  .uebermodal[open]::backdrop { animation: modalDunkel .22s ease; }
}
@keyframes modalHerein { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes modalDunkel { from { opacity: 0; } }

/* Auf dem Telefon: von unten, volle Breite, oben abgerundet.
   Der Daumen erreicht die untere Bildschirmhälfte, nicht die Mitte. */
@media (max-width: 560px) {
  .uebermodal__huelle { align-items: flex-end; padding: 0; }
  .uebermodal__karte {
    max-width: none; border-radius: var(--r-gross) var(--r-gross) 0 0;
    padding: 24px 20px calc(26px + env(safe-area-inset-bottom, 0px));
    max-height: 92vh; overflow-y: auto;
  }
  .uebermodal__kopf { padding: 0 30px; }
  @media (prefers-reduced-motion: no-preference) {
    .uebermodal[open] .uebermodal__karte { animation: modalHochfahren .26s cubic-bezier(.2,.7,.3,1); }
  }
}
@keyframes modalHochfahren { from { transform: translateY(100%); } }

/* Solange die Überblendung offen ist, soll die Seite dahinter nicht
   mitscrollen. Ohne das rutscht auf dem Telefon der Hintergrund weg. */
body.hat-modal { overflow: hidden; }

/* — Fuß — */
.fuss { background: var(--flaeche); border-top: 1px solid var(--linie); padding: 44px 0 34px; font-size: .89rem; color: var(--tinte-leise); }
.fuss__oben { display: flex; flex-wrap: wrap; gap: 26px; justify-content: space-between; align-items: flex-start; }
.fuss__links { display: flex; flex-wrap: wrap; gap: 9px 26px; }
.fuss a { color: var(--tinte-mittel); text-decoration: none; }
.fuss a:hover { color: var(--gruen-dunkel); text-decoration: underline; }
.fuss__unten { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: space-between; }
.fuss__warnung { max-width: 64ch; font-size: .84rem; }

/* ----- Sozialsymbole im Fuß -----
   Eigene Zeile ganz unten, linksbündig. Sie hängt NICHT in
   .fuss__unten: das ist ein space-between mit zwei Kindern, ein drittes
   würde in die Mitte rutschen.

   Der Grauton ist ausgerechnet, nicht gegriffen: #7e8b84 ergibt auf dem
   Fußgrund #f6f8f6 einen Kontrast von 3,33:1. Für ein anklickbares
   Symbol verlangt WCAG 1.4.11 mindestens 3:1. Die helleren Töne der
   Palette — #cfd9d2 mit 1,36 und #a8b3ac mit 2,03 — reißen das, das
   Zeichen verschwindet dann auf dem Telefon bei Tageslicht. */
.fuss__sozial {
  display: flex; align-items: center;
  /* Kanäle links, Stores rechts. Auf schmalen Schirmen bricht die
     zweite Gruppe um und steht dann links darunter — besser, als die
     Zeichen zu quetschen. */
  justify-content: space-between; flex-wrap: wrap;
  gap: 14px 18px;
  margin-top: 20px;
}
.fuss__sozial__gruppe { display: flex; align-items: center; gap: 18px; }
.fuss__sozial a,
.fuss__sozial span {
  display: inline-flex; color: #7e8b84;
  /* Kein Kästchen, kein Kreis, keine Fläche dahinter. DESIGN § 5. */
  background: none; border: 0; padding: 0;
}
.fuss__sozial svg { width: 20px; height: 20px; display: block; }

/* Nur das Verlinkte reagiert. Die drei ohne Ziel bleiben, wie sie sind
   — sonst sähe es aus, als ließe sich dort etwas anklicken. */
.fuss__sozial a { transition: color .14s ease; }
.fuss__sozial a:hover { color: var(--gruen); }
.fuss__sozial a:focus-visible {
  outline: 2px solid var(--gruen); outline-offset: 3px; border-radius: 3px;
}



/* Hier stand die Entwurfsfahne unten rechts („Entwurf 3 · ausgeloggt").
   Sie war eine Hilfe beim Bauen und hatte auf der veröffentlichten Seite
   nichts verloren — am 03.09.2026 beim ersten Blick auf taxichef.de
   aufgefallen und samt Aussehen entfernt. */

/* =====================================================================
   NUR FUERS TELEFON — und deshalb ganz am Ende

   Diese Regeln nehmen Kacheln, Rahmen und Schatten zurueck. Bei
   gleicher Genauigkeit gewinnt die spaetere Regel; stuenden sie weiter
   oben, holte die Grundregel von .strecke__stufe den Kasten zurueck.
   Das ist genau einmal passiert.
   ===================================================================== */
/* — Die drei Schritte auf dem Telefon: der Pfad —
   Drei gleich aussehende Kästen sagen nicht, dass es eine Reihenfolge
   ist — eine Linie mit Haltepunkten sagt es. Und sie spart die Hälfte
   der Höhe: gemessen 662 px vorher, 474 px nachher.

   Ohne neuen Text: Die Ziffern kommen aus einem Zähler, „Schritt 1"
   fällt weg, weil die Ziffer im Punkt dasselbe sagt. So gilt die
   Fassung sofort in allen sechs Sprachen. */
@media (max-width: 700px) {
  .strecke { margin-top: 26px; }

  .strecke__stufen {
    display: block; position: relative;
    padding-left: 36px; counter-reset: stufe;
  }
  /* Die Linie. Oben satt, unten auslaufend — sie führt irgendwohin. */
  .strecke__stufen::before {
    content: ''; position: absolute; left: 12px; top: 10px; bottom: 14px;
    width: 2px; border-radius: 2px;
    background: linear-gradient(var(--gruen), var(--linie-stark));
  }

  .strecke__stufe {
    counter-increment: stufe;
    position: relative;
    background: none; border: 0; border-radius: 0;
    padding: 0 0 22px; box-shadow: none;
  }
  .strecke__stufe:last-child { padding-bottom: 0; }
  .strecke__stufe:hover { transform: none; box-shadow: none; border: 0; }

  .strecke__stufe::before {
    content: counter(stufe);
    position: absolute; left: -36px; top: 0;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--gruen); color: #fff;
    display: grid; place-items: center;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: .84rem; font-weight: 700; line-height: 1;
  }

  /* „Schritt 1" fällt weg — die Ziffer im Punkt sagt dasselbe. */
  .strecke__nr { display: none; }

  .strecke__stufe h3 { margin: 1px 0 0; font-size: 1.1rem; }
  .strecke__punkte { margin-top: 7px; gap: 5px; }
  .strecke__punkte li { font-size: .88rem; line-height: 1.45; }
  .strecke__pfeil { display: none; }
  /* Der Pfeil bleibt auch auf dem Telefon: ohne Kachel und ohne Maus
     sah niemand, dass man die drei Schritte und den Videokurs antippen
     kann. Ein runder grüner Grund macht ihn zum Tippziel. */
  .strecke__pfeil {
    display: grid; place-items: center; flex-shrink: 0;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--gruen-hauch); border: 1px solid #cfe6da;
    color: var(--gruen-dunkel); font-size: .95rem; font-weight: 600;
  }
  .strecke__stufe:active .strecke__pfeil,
  .strecke__band:active .strecke__pfeil { background: var(--gruen); border-color: var(--gruen); color: #fff; }
  /* Der Pfeil steht mittig neben dem ganzen Schritt, wie beim Videokurs,
     nicht oben an der Überschrift. Rechts bleibt dafür Platz frei. Der
     Schritt hat unten 22px Abstand zum nächsten; die Mitte des Inhalts
     liegt deshalb 11px über der Mitte des Kastens. */
  .strecke__stufe { padding-right: 44px; }
  .strecke__stufe .strecke__pfeil {
    position: absolute; right: 0; top: calc(50% - 11px); transform: translateY(-50%);
  }
  .strecke__stufe:last-child .strecke__pfeil { top: 50%; }
  .strecke__band { margin-top: 18px; }

  /* — Weniger Luft über dem Globus —
     Gemessen waren es 144 px zwischen dem Knopf und dem Globus: 96 px
     Unterrand des Einstiegs plus 48 px Oberrand des Sprachen-
     Abschnitts. Auf einem Telefon ist das ein Viertel Bildschirm ohne
     Inhalt. */
  .hero { padding-bottom: 44px; }
  #s-start > .sprachen { padding-top: 28px; }

  /* — Zwei Schimmer, die die Seite verbreitert haben —
     Beide sind reine Deko und liegen hinter ihrem Gerät. Mit 150 %
     bzw. 190 % Breite ragten sie über den Behälter hinaus und machten
     die Seite 442 statt 375 Punkt breit — sichtbar als weißer Streifen
     rechts, den man wegschieben konnte. */
  .simbuehne::before { width: 100%; }
  .handy::before { width: 120%; }

  /* — Die Fußzeile —
     Neun Links in einer umbrechenden Reihe enden an wechselnden
     Stellen; das sieht aus wie hingefallen. Zwei feste Spalten geben
     ihnen eine Kante, und die Marke setzt sich darüber statt daneben. */
  .fuss__oben { display: block; }
  .fuss__links {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0 18px; margin-top: 16px;
  }
  .fuss__links a { padding: 9px 0; }
  .fuss__unten { display: block; }
  .fuss__unten > * + * { margin-top: 12px; }

  /* Der Sprachen-Abschnitt wandert auf dem Telefon vor „Das komplette
     Angebot" (siehe Skript). Er bleibt dabei ein eigener Abschnitt
     zwischen zwei anderen und behält seine eigenen Abstände — hier ist
     also nichts auszugleichen. */
}


/* ---------- Konto löschen ----------
   Google Play verlangt eine öffentliche Seite dafür, die auch OHNE
   Anmeldung etwas zeigt. Deshalb ist sie eine eigene Seite und kein
   Fenster im Lernbereich.

   Gestaltet ist sie bewusst ruhig: kein Rot als Grundton, keine
   Warndreiecke. Rot steht genau an einer Stelle — auf dem Knopf, der
   wirklich löscht. Alles davor ist Erklärung, und Erklärung schreit
   nicht. */
.kl { padding: 56px 0 96px; }
.kl__innen { max-width: 620px; margin: 0 auto; }

.kl__kopf { margin-bottom: 26px; }
.kl__kopf h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); margin: 10px 0 8px; }
.kl__fein { color: var(--tinte-leise); font-size: 1.02rem; line-height: 1.6; margin: 0; }

.kl__karte {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--r-gross);
  padding: 26px 28px; margin-bottom: 18px; box-shadow: var(--schatten-klein);
}
/* Die Karte, in der es ernst wird: eine Kante, kein Farbbad. */
.kl__karte--ernst { border-color: var(--linie-stark); }

.kl__titel {
  font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gruen-dunkel); margin: 0 0 12px;
}
.kl__titel + .kl__liste { margin-bottom: 22px; }
.kl__karte > .kl__titel:not(:first-child) { margin-top: 26px; }

.kl__liste { list-style: none; margin: 0; padding: 0; }
.kl__liste li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 9px 0; font-size: .98rem; line-height: 1.55; color: var(--tinte-mittel);
}
.kl__liste li + li { border-top: 1px solid var(--linie); }
/* Das Zeichen sagt, worum es geht: ein Strich für „weg", ein Haken für
   „bleibt". Nicht zweimal derselbe Haken — die beiden Listen sagen
   Gegenteiliges. */
.kl__liste li::before {
  flex: none; width: 1.1em; font-weight: 700; color: var(--tinte-leise);
}
.kl__liste--weg li::before { content: '—'; color: var(--falsch); }
.kl__liste--bleibt li::before { content: '✓'; color: var(--gruen); }

.kl__note {
  font-size: .88rem; line-height: 1.6; color: var(--tinte-leise); margin: 14px 0 0;
}
.kl__note a { color: var(--gruen-dunkel); }

/* Wessen Konto gemeint ist. Die Adresse gross genug, um sie vor dem
   Klicken wirklich zu lesen — der häufigste Unfall an dieser Stelle ist
   das falsche Konto. */
.kl__konto {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 14px 16px; margin-bottom: 20px;
}
.kl__konto span {
  display: block; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tinte-leise); margin-bottom: 4px;
}
.kl__konto strong {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.06rem; color: var(--tinte); word-break: break-all;
}

.kl__warnung {
  background: var(--amber-flur); border: 1px solid rgba(160, 95, 0, .22);
  border-radius: var(--r); padding: 13px 15px; margin: 0 0 20px;
  font-size: .92rem; line-height: 1.6; color: var(--amber);
}

.kl__haken {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  font-size: .96rem; line-height: 1.55; color: var(--tinte-mittel); margin-bottom: 20px;
}
.kl__haken input { flex: none; width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--falsch); }

/* Der einzige rote Knopf der ganzen Seite. Grau, solange die beiden
   Hürden nicht genommen sind — ein Knopf, der nichts tut, soll auch
   nicht aussehen, als täte er etwas. */
.kl__knopf {
  width: 100%; background: var(--falsch); color: #fff; border-color: var(--falsch);
}
.kl__knopf:hover:not(:disabled) { background: #a52f26; border-color: #a52f26; }
.kl__knopf:disabled {
  background: var(--linie); border-color: var(--linie);
  color: var(--tinte-leise); cursor: not-allowed;
}

.kl__fertig { text-align: center; }
.kl__zeichen {
  width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--richtig-flur); color: var(--richtig); font-size: 1.6rem; font-weight: 700;
}
.kl__fertig h2 { font-size: 1.5rem; margin: 0 0 10px; }
.kl__fertig p { color: var(--tinte-mittel); line-height: 1.65; margin: 0 0 18px; }

@media (max-width: 700px) {
  .kl { padding: 34px 0 64px; }
  .kl__karte { padding: 22px 18px; border-radius: var(--r); }
  .kl__innen { max-width: none; }
}

/* =====================================================================
   EIGENE BAUSTEINE STATT DER BROWSER-EIGENEN

   Vier Stellen, an denen bisher der Browser selbst das Aussehen
   bestimmte — und an denen jeder Browser etwas anderes zeigt: die
   Rückfrage beim Zurücksetzen, das Kalenderblatt am Datumsfeld, die
   Auswahllisten und die Bildlaufleiste.

   GRUNDSATZ: Das echte Feld bleibt stehen und behält seinen Wert. Die
   eigene Oberfläche steht nur davor und schreibt in das echte Feld
   zurück. So funktioniert jeder Code weiter, der heute `.value` liest —
   und wenn ein Baustein einmal nicht lädt, bleibt ein bedienbares
   Formular übrig statt einer toten Seite.
   ===================================================================== */

/* ---------- Bildlaufleiste ----------
   Kein Grün: Sie soll ruhig sein und nicht mitreden. Ein schmaler
   Streifen in der Linienfarbe, der beim Zeigen etwas dunkler wird.
   Der durchsichtige Rand mit `background-clip` erzeugt den Abstand zum
   Rand, ohne dass eine Hintergrundfarbe festgelegt werden muss — so
   passt sie auf jede Fläche. */
* { scrollbar-width: thin; scrollbar-color: var(--linie-stark) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--linie-stark);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--tinte-leise); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--tinte-mittel); background-clip: padding-box; }

/* ---------- Rückfrage ---------- */
.bs-blende {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(11, 31, 22, .38);
  display: grid; place-items: center; padding: 20px;
  animation: bsBlende 180ms ease-out;
}
@keyframes bsBlende { from { opacity: 0; } }

.bs-frage {
  background: var(--weiss); border-radius: var(--r-gross);
  box-shadow: var(--schatten-gross);
  width: min(420px, 100%); padding: 26px 26px 20px;
  animation: bsHerein 180ms ease-out;
}
@keyframes bsHerein { from { opacity: 0; transform: translateY(10px) scale(.985); } }

.bs-frage__titel {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.16rem; font-weight: 700; color: var(--tinte);
  margin: 0 0 10px; letter-spacing: -.01em;
}
.bs-frage__text { margin: 0 0 22px; color: var(--tinte-mittel); font-size: .96rem; line-height: 1.6; }
.bs-frage__knoepfe { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.bs-frage__knopf {
  font: inherit; font-weight: 600; font-size: .95rem;
  padding: 11px 20px; border-radius: var(--r); cursor: pointer;
  border: 1.5px solid var(--linie-stark); background: var(--weiss); color: var(--tinte-mittel);
  transition: background-color 120ms ease, border-color 120ms ease;
}
.bs-frage__knopf:hover { border-color: var(--tinte-leise); }
.bs-frage__knopf--ernst { background: var(--falsch); border-color: var(--falsch); color: #fff; }
.bs-frage__knopf--ernst:hover { background: #a52f26; border-color: #a52f26; }
.bs-frage__knopf:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }

/* ---------- Auswahlliste ---------- */
.bs-wahl { position: relative; display: inline-block; max-width: 100%; }
.bs-wahl__knopf {
  font: inherit; font-size: .9rem; color: var(--tinte); text-align: left;
  background: var(--weiss); border: 1px solid var(--linie-stark); border-radius: var(--r);
  padding: 9px 34px 9px 12px; min-height: 42px; cursor: pointer; width: 100%;
  display: flex; align-items: center;
  transition: border-color 120ms ease;
}
.bs-wahl__knopf:hover { border-color: var(--gruen); }
.bs-wahl__knopf:focus-visible { outline: 2px solid var(--gruen); outline-offset: 1px; }
.bs-wahl__knopf::after {
  content: ''; position: absolute; right: 13px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 1.7px solid var(--tinte-leise); border-bottom: 1.7px solid var(--tinte-leise);
  transform: rotate(45deg); transition: transform 180ms ease;
}
.bs-wahl[data-offen] .bs-wahl__knopf::after { transform: rotate(225deg); margin-top: -2px; }
.bs-wahl__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bs-wahl__liste {
  position: absolute; z-index: 8000; left: 0; right: 0; top: calc(100% + 5px);
  background: var(--weiss); border: 1px solid var(--linie-stark); border-radius: var(--r);
  box-shadow: var(--schatten); padding: 5px; margin: 0;
  max-height: 264px; overflow-y: auto; list-style: none;
  animation: bsListe 120ms ease-out;
}
@keyframes bsListe { from { opacity: 0; transform: translateY(-4px); } }
.bs-wahl__liste[hidden] { display: none; }
.bs-wahl__eintrag {
  padding: 9px 11px; border-radius: var(--r-klein); cursor: pointer;
  font-size: .9rem; color: var(--tinte-mittel); line-height: 1.4;
}
.bs-wahl__eintrag[aria-selected="true"] { color: var(--gruen-dunkel); font-weight: 600; }
.bs-wahl__eintrag:hover,
.bs-wahl__eintrag[data-hier] { background: var(--gruen-hauch); color: var(--tinte); }

/* ---------- Datum ---------- */
.bs-datum { position: relative; display: inline-block; max-width: 100%; }
.bs-datum__feld {
  font: inherit; font-size: .9rem; color: var(--tinte);
  background: var(--weiss); border: 1px solid var(--linie-stark); border-radius: var(--r);
  padding: 9px 40px 9px 12px; min-height: 42px; width: 100%;
  font-variant-numeric: tabular-nums;
}
.bs-datum__feld:hover { border-color: var(--gruen); }
.bs-datum__feld:focus-visible { outline: 2px solid var(--gruen); outline-offset: 1px; }
.bs-datum__knopf {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r-klein); cursor: pointer;
  color: var(--tinte-leise);
}
.bs-datum__knopf:hover { background: var(--gruen-hauch); color: var(--gruen-dunkel); }
.bs-datum__knopf:focus-visible { outline: 2px solid var(--gruen); outline-offset: 1px; }
.bs-datum__knopf svg { width: 17px; height: 17px; }

.bs-kal {
  position: absolute; z-index: 8000; right: 0; top: calc(100% + 5px);
  background: var(--weiss); border: 1px solid var(--linie-stark); border-radius: var(--r);
  box-shadow: var(--schatten); padding: 12px; width: 268px;
  animation: bsListe 120ms ease-out;
}
.bs-kal[hidden] { display: none; }
.bs-kal__kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bs-kal__monat {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600; font-size: .94rem; color: var(--tinte);
}
.bs-kal__pfeil {
  width: 28px; height: 28px; display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r-klein); cursor: pointer;
  color: var(--tinte-mittel); font-size: 1.1rem; line-height: 1;
}
.bs-kal__pfeil:hover { background: var(--gruen-hauch); color: var(--gruen-dunkel); }
.bs-kal__pfeil:focus-visible { outline: 2px solid var(--gruen); outline-offset: 1px; }
.bs-kal__gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.bs-kal__wochentag {
  text-align: center; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinte-leise); padding: 4px 0 6px;
}
.bs-kal__tag {
  aspect-ratio: 1; border: 0; background: none; border-radius: var(--r-klein);
  font: inherit; font-size: .84rem; color: var(--tinte-mittel); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.bs-kal__tag:hover { background: var(--gruen-hauch); color: var(--tinte); }
.bs-kal__tag:focus-visible { outline: 2px solid var(--gruen); outline-offset: -1px; }
.bs-kal__tag[data-leer] { visibility: hidden; }
.bs-kal__tag[data-heute] { box-shadow: inset 0 0 0 1px var(--linie-stark); font-weight: 600; }
.bs-kal__tag[aria-pressed="true"] { background: var(--gruen); color: #fff; font-weight: 600; }
.bs-kal__tag[aria-pressed="true"]:hover { background: var(--gruen-dunkel); color: #fff; }
.bs-kal__fuss { margin-top: 8px; display: flex; justify-content: space-between; gap: 8px; }
.bs-kal__klein {
  font: inherit; font-size: .82rem; color: var(--gruen-dunkel);
  background: none; border: 0; padding: 5px 7px; border-radius: var(--r-klein); cursor: pointer;
}
.bs-kal__klein:hover { background: var(--gruen-hauch); }
.bs-kal__klein:focus-visible { outline: 2px solid var(--gruen); outline-offset: 1px; }

/* Auf schmalen Geräten geht das Kalenderblatt über die ganze Breite. */
@media (max-width: 480px) {
  .bs-kal { left: 0; right: 0; width: auto; }
}

/* Wer weniger Bewegung eingestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .bs-blende, .bs-frage, .bs-wahl__liste, .bs-kal { animation: none; }
  .bs-wahl__knopf::after { transition: none; }
}

/* =====================================================================
   NEUE BAUSTEINE, Auftrag Sichtbarkeit Teil 1 (04.10.2026)
   Startseite "Antworten zur Pruefung", /kalkulation, /kurs,
   /apps-im-vergleich, /presse. Nur Farben und Masse aus :root.
   ===================================================================== */

/* --- Startseite: sechs Antworten als Verweise --- */
.antworten__liste { list-style: none; max-width: 880px; margin: clamp(26px, 3.5vw, 38px) auto 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.antworten__liste a { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 100%;
  padding: 16px 18px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r);
  box-shadow: var(--schatten-klein); color: var(--tinte); font-weight: 500; line-height: 1.45; text-decoration: none; }
.antworten__liste a::after { content: "\2192"; flex: none; color: var(--gruen); }
.antworten__liste a:hover { border-color: var(--gruen); color: var(--gruen-dunkel); }
.antworten__alle { margin: 20px 0 0; text-align: center; }
.antworten__alle a { color: var(--gruen-dunkel); }
@media (max-width: 700px) { .antworten__liste { grid-template-columns: 1fr; } }

/* --- /kalkulation: Formeln und Rechenbeispiel --- */
.fr__frage p.kalk__formel { margin: 14px 0 0; padding: 12px 16px; background: var(--gruen-hauch);
  border-radius: var(--r-klein); color: var(--tinte); font-family: 'Space Grotesk', system-ui, sans-serif;
  font-variant-numeric: tabular-nums; line-height: 1.5; }
.fr__frage p.kalk__formel + p.kalk__formel { margin-top: 8px; }
.kalk__tafel { width: 100%; margin: 18px 0 4px; border-collapse: collapse; font-size: .95rem; }
.kalk__tafel td { padding: 9px 0; border-bottom: 1px solid var(--linie); color: var(--tinte-mittel); vertical-align: top; }
.kalk__tafel td:last-child { padding-left: 16px; text-align: right; white-space: nowrap; color: var(--tinte);
  font-variant-numeric: tabular-nums; }
.kalk__schritt th { padding: 18px 0 6px; border-bottom: 1px solid var(--linie-stark); text-align: left;
  color: var(--gruen-dunkel); font-family: 'Space Grotesk', system-ui, sans-serif; font-size: .8rem;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.kalk__summe td { color: var(--tinte); font-weight: 600; }

/* --- Tabellen auf /kurs und /apps-im-vergleich --- */
.tafel-rahmen { overflow-x: auto; margin: 18px 0 0; }
.kurs__tafel { width: 100%; border-collapse: collapse; font-size: .86rem; line-height: 1.45; }
.kurs__tafel th, .kurs__tafel td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--linie);
  text-align: left; vertical-align: top; color: var(--tinte-mittel); }
.kurs__tafel thead th { color: var(--tinte); font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: .76rem; font-weight: 600; }
.kurs__tafel tbody th { color: var(--tinte); font-weight: 600; }
.kurs__tafel a { color: var(--gruen-dunkel); }
.kurs__tafel tr.kurs__wir th { color: var(--gruen-dunkel); }
/* Am Handy: jede Zeile als Karte, die Spaltennamen stehen davor (Wunsch 05.10.2026: kein Seitwaertsscrollen) */
@media (max-width: 640px) {
  .kurs__tafel thead { display: none; }
  .kurs__tafel, .kurs__tafel tbody, .kurs__tafel tr, .kurs__tafel th, .kurs__tafel td { display: block; width: auto; }
  .kurs__tafel tr { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--linie); border-radius: var(--r); }
  .kurs__tafel tr.kurs__wir { border-color: #cfe6da; background: var(--gruen-hauch); }
  .kurs__tafel th, .kurs__tafel td { padding: 3px 0; border: 0; }
  .kurs__tafel tbody th { font-size: .95rem; margin-bottom: 4px; }
  .kurs__tafel td::before { content: attr(data-spalte) ": "; font-weight: 600; color: var(--tinte); }
}
.tafel-hinweis { margin: 12px 0 0; font-size: .84rem; line-height: 1.55; color: var(--tinte-leise); }
.fr__frage p.tafel-hinweis { font-size: .84rem; color: var(--tinte-leise); }

/* --- /apps-im-vergleich: Ueberblick statt Tabelle (Wunsch 05.10.2026) --- */
.ueberblick { max-width: 720px; margin: clamp(26px, 4vw, 38px) auto 0; padding: 18px 20px;
  border: 1px solid #cfe6da; border-radius: var(--r); background: var(--gruen-hauch); }
.ueberblick__titel { margin: 0; font-size: 1rem; }
/* Zwei frei fliessende Spalten statt eines Rasters: Im Raster machte ein
   zweizeiliger Punkt die ganze Reihe hoch, daneben entstand eine Luecke. */
.ueberblick__liste { list-style: none; margin: 12px 0 0; padding: 0; columns: 2; column-gap: 24px; }
.ueberblick__liste li { break-inside: avoid; padding-bottom: 9px; }
.ueberblick__liste a { display: flex; align-items: flex-start; gap: 9px; color: var(--tinte); text-decoration: none;
  font-size: .95rem; line-height: 1.4; }
.ueberblick__liste a::before { content: ''; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.ueberblick__liste a:hover { color: var(--gruen-dunkel); text-decoration: underline; }
@media (max-width: 560px) { .ueberblick { padding: 16px; } .ueberblick__liste { columns: 1; } }

/* --- /presse --- */
.presse__teil { margin: 0 0 40px; }
.presse__teil h2, h2.presse__fragen { font-size: 1.1rem; }
h2.presse__fragen { margin: 0 0 22px; }
.presse__satz { margin: 12px 0 0; padding: 16px 18px; background: var(--gruen-hauch); border-radius: var(--r-klein);
  color: var(--tinte); line-height: 1.65; }
.presse__dateien { list-style: none; margin: 14px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.presse__dateien li { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--weiss);
  border: 1px solid var(--linie); border-radius: var(--r); }
.presse__dateien img { flex: none; width: 72px; height: 72px; object-fit: contain; background: var(--flaeche);
  border-radius: var(--r-klein); }
.presse__dateien b { display: block; color: var(--tinte); font-weight: 600; line-height: 1.35; }
.presse__dateien span { display: block; margin: 3px 0 6px; font-size: .8rem; color: var(--tinte-leise); }
.presse__laden { color: var(--gruen-dunkel); font-size: .9rem; font-weight: 600; }
@media (max-width: 640px) { .presse__dateien { grid-template-columns: 1fr; } }
.presse__fakten { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); margin: 12px 0 0; }
.presse__fakten dt, .presse__fakten dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--linie); line-height: 1.5; }
.presse__fakten dt { color: var(--tinte-leise); font-size: .86rem; }
.presse__fakten dd { color: var(--tinte); }
.presse__fakten a, .presse__teil p a { color: var(--gruen-dunkel); }
.presse__teil > p { margin: 12px 0 0; color: var(--tinte-mittel); line-height: 1.65; }
@media (max-width: 520px) {
  .presse__fakten { grid-template-columns: 1fr; }
  .presse__fakten dt { padding-bottom: 0; border-bottom: 0; }
}

/* --- Sprachseiten (Sichtbarkeit Teil 1, Punkt 13) --- */
.sprachhinweis { background: var(--gruen-hauch); border-bottom: 1px solid var(--linie); }
.sprachhinweis p { margin: 0; padding: 10px 0; text-align: center; font-size: .88rem; line-height: 1.5; color: var(--gruen-dunkel); }
/* Leserichtung von rechts: Aufzaehlungspunkte und Pfeile auf die
   andere Seite, sonst haengen sie am Zeilenende. */
[dir="rtl"] .fr__nachbarn li { padding-left: 0; padding-right: 15px; }
[dir="rtl"] .fr__nachbarn li::before { left: auto; right: 0; }
[dir="rtl"] .antworten__liste a::after { content: "\2190"; }

/* --- Startknopf und /kennenlernen (Sichtbarkeit Teil 1, Punkt 2) --- */
.hero__los { margin-top: 22px; }
/* Flach und breit (Wunsch des Gruenders 05.10.2026): weniger Hoehe, mehr Laenge. */
.hero__start { padding: 10px 56px; line-height: 1.5; }
/* Satz unter der Ueberschrift etwas kraeftiger (Wunsch 05.10.2026); Sora 500 ist geladen. */
.hero__lead { font-weight: 500; }
/* Kopfzeile am Handy nur mit dem Schriftzug TaxiChef, ohne das gruene
   Taxi (Wunsch 05.10.2026). Die Fusszeile behaelt das Zeichen. */
@media (max-width: 700px) { .kopf .marke img { display: none; } }
/* Kopfzeile am Handy: Knopf "App" links neben dem Menuezeichen (Vorschlag A, 05.10.2026). */
.kopf__app { display: none; }
@media (max-width: 700px) {
  .kopf__app { display: inline-flex; order: 2; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
    border: 1px solid var(--gruen); border-radius: var(--r-klein); background: var(--weiss);
    color: var(--gruen-dunkel); text-decoration: none; white-space: nowrap;
    font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: .95rem; }
  .kopf__app svg { width: 18px; height: 18px; flex: none; }
}
/* Hinweis unter dem Startknopf */
.hero__los { display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* Zwei Punkte nebeneinander, Punktzeichen wie in den drei Schritten darunter */
.hero__ohne { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px;
  list-style: none; margin: 0; padding: 0; color: var(--tinte-mittel); font-size: .92rem; }
.hero__ohne li { display: inline-flex; align-items: center; gap: 7px; }
.hero__ohne li::before { content: '•'; color: var(--gruen); font-size: 1.05rem; line-height: 1; }
/* Am Handy auch nebeneinander (Wunsch 05.10.2026): nie umbrechen, etwas
   kleiner; laengere Sprachen brechen innerhalb des Punkts um. */
@media (max-width: 700px) {
  .hero__ohne { flex-wrap: nowrap; gap: 14px; font-size: .86rem; }
  .hero__ohne li { min-width: 0; text-align: start; }
}
/* Schmale Android-Geraete (360 px): sonst brach das Deutsche um. */
@media (max-width: 380px) { .hero__ohne { gap: 10px; font-size: .82rem; } }
@media (max-width: 700px) { .hero__los { margin-top: 18px; } .hero__start { width: 100%; max-width: 340px; justify-content: center; } }
.kn__vorher { display: none; }
.kn__erg { max-width: 760px; margin-left: auto; margin-right: auto; }
/* Bei fuenf Fragen sagt die Aufteilung nach Bereichen wenig und schob
   auf dem Handy den Knopf zum Konto unter den ersten Bildschirm. */
.kn__erg .erg__ueber, .kn__erg .erg__bereiche { display: none; }
/* Knopf zum Konto: flach, lang und mittig wie der Startknopf (Wunsch 05.10.2026) */
.kn__weiter { margin-top: 18px; padding: 10px 56px; line-height: 1.5; }
@media (max-width: 700px) { .kn__weiter { width: 100%; max-width: 340px; justify-content: center; padding-left: 16px; padding-right: 16px; } }
/* Kopf vor und nach den fuenf Fragen: hidden muss gegen die Kopf-Regeln gewinnen */
.kn__vor[hidden], .kn__nach[hidden] { display: none !important; }
/* Am Rechner breiter (Wunsch 05.10.2026) */
.kn__erg { max-width: 960px; }
/* Hinweis unter der Punktzahl: kurz, eine Zeile, etwas kraeftiger (Wunsch 05.10.2026) */
.kn__erg .erg__hinweis { font-weight: 500; text-align: center; }
/* Schmale Handys (360 px): Hinweis und App-Punkte bleiben einzeilig */
@media (max-width: 380px) {
  .kn__erg .erg__hinweis { font-size: .84rem; }
  .kn__app .kn__punkte { font-size: .82rem; }
  .kn__erg .kn__weiter { font-size: .96rem; padding-left: 10px; padding-right: 10px; }
  .kn__app .kn__hell { padding-left: 14px; padding-right: 14px; }
}
/* Die App als dunkle Kachel im Stil der App-Store-Bilder (Vorschlag C) */
.kn__app { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--linie); }
.kn__app-ueber { margin: 0; text-align: center; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600;
  font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--tinte-leise); }
.kn__app-reihe { display: flex; align-items: center; justify-content: center; gap: 30px; max-width: 680px;
  margin: 16px auto 0; padding: 22px 8px 22px 26px; border-radius: var(--r-gross);
  background: radial-gradient(ellipse at 78% 45%, #13623c 0%, #0b2c1d 55%, #071a11 100%); }
.kn__app-text { flex: 1 1 auto; min-width: 0; text-align: start; }
.kn__eintrag { display: flex; align-items: center; gap: 14px; }
.kn__symbol { flex: none; width: 64px; height: 64px; border-radius: 15px; border: 1px solid rgba(255,255,255,.18); }
.kn__eintrag-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kn__name { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 1.15rem; color: #fff; }
.kn__unter { font-size: .86rem; font-weight: 600; color: #c6ef3a; }
.kn__beschr { margin: 12px 0 0; font-size: .93rem; line-height: 1.5; color: rgba(255,255,255,.82); }
.kn__punkte { display: none; }
.kn__hell { margin-top: 16px; background: #fff; color: #0b1f16; border-color: #fff; white-space: nowrap; }
.kn__hell:hover { background: #e9f6ee; color: #0b1f16; }
/* Das schwebende Handy aus /app, viel kleiner */
.kn__mini { flex: none; perspective: 1200px; padding: 12px 16px 12px 4px; }
.kn__schweben { animation: kn-schweben 6s ease-in-out infinite; }
@keyframes kn-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .kn__schweben { animation: none; } }
.kn__handy::before { background: radial-gradient(ellipse at center, rgba(198,239,58,.22) 0%, rgba(198,239,58,.06) 45%, rgba(198,239,58,0) 72%); }
.kn__handy .handy__rahmen { width: 128px; padding: 5px; border-radius: 22px;
  box-shadow: 0 22px 40px -18px rgba(0,0,0,.6), 0 6px 12px -6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.16); }
.kn__handy .handy__schirm { height: 256px; border-radius: 17px; }
.kn__handy .handy__glas { border-radius: 17px; }
@media (max-width: 700px) {
  .kn__app-reihe { gap: 10px; padding: 16px 4px 16px 14px; }
  .kn__symbol { width: 48px; height: 48px; border-radius: 12px; }
  .kn__eintrag { gap: 10px; }
  .kn__name { font-size: 1.04rem; }
  .kn__unter { font-size: .84rem; }
  /* Am Handy kein Fliesstext, sondern kurze Punkte, jeder in einer Zeile (Wunsch 05.10.2026) */
  .kn__beschr { display: none; }
  .kn__punkte { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 0; padding: 0; list-style: none;
    font-size: .86rem; color: rgba(255,255,255,.88); }
  .kn__punkte li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
  .kn__punkte li::before { content: '•'; color: #c6ef3a; font-size: 1.05rem; line-height: 1; }
  .kn__mini { padding: 8px 6px 8px 0; }
  .kn__handy .handy__rahmen { width: 92px; padding: 4px; border-radius: 16px; }
  .kn__handy .handy__schirm { height: 182px; border-radius: 12px; }
  .kn__handy .handy__glas { border-radius: 12px; }
}
@media (max-width: 700px) { .kn__probe .opt { min-height: 54px; } }
/* Am Handy: "Warum?" und "Naechste Frage" nebeneinander an der Stelle des
   Bestaetigen-Knopfs, gleich breit, Weiter als Hauptknopf. */
@media (max-width: 700px) {
  .kn__probe .probe__fuss .knopf { flex: 1 1 0; justify-content: center; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
  .kn__probe #u-weiter { background: var(--gruen-dunkel); border-color: var(--gruen-dunkel); color: #fff; }
}
/* PC: Frage links, Erklaerung mit Fundstelle rechts. */
@media (min-width: 900px) {
  .kn__probe { max-width: 1000px; }
  .kn__probe .probe__koerper { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    grid-template-areas: "frage rechts" "optionen rechts" "fuss rechts"; column-gap: 32px; align-items: start; }
  .kn__probe .probe__frage { grid-area: frage; }
  .kn__probe .probe__optionen { grid-area: optionen; }
  .kn__probe .probe__fuss { grid-area: fuss; }
  .kn__probe .probe__auswertung, .kn__probe .kn__vorher { grid-area: rechts; margin-top: 0; }
  .kn__probe .kn__vorher { display: block; padding: 16px 18px; border: 1px dashed var(--linie-stark);
    border-radius: var(--r); color: var(--tinte-leise); font-size: .92rem; line-height: 1.55; }
  .kn__probe .probe__auswertung:not(.verborgen) ~ .kn__vorher { display: none; }
}

/* --- /app am Handy: Kopf wie ein Store-Eintrag (Vorschlag C, 05.10.2026) --- */
.app__kopf, .app__zahlen, .app__pfeil { display: none; }
@media (max-width: 940px) {
  .appseite__innen { grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 0; align-items: center;
    grid-template-areas: "kopf handy" "laden handy" "zahlen zahlen" "etikett etikett" "h1 h1" "lead lead" "liste liste" "fein fein"; }
  .appseite__text { display: contents; }
  .app__kopf { grid-area: kopf; align-self: end; display: flex; align-items: center; gap: 10px; }
  .app__symbol { flex: none; width: 52px; height: 52px; border-radius: 12px; border: 1px solid var(--linie); }
  .app__titel { display: flex; flex-direction: column; min-width: 0; }
  .app__titel b { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 1.22rem; line-height: 1.2; color: var(--tinte); }
  .app__titel span { font-size: .9rem; font-weight: 600; color: var(--gruen-dunkel); }
  .appseite__laden { grid-area: laden; align-self: start; margin-top: 14px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .appseite__laden .laden { padding: 7px 14px 7px 11px; gap: 9px; min-width: 158px; }
  .appseite__laden .laden__zeichen svg { width: 20px; height: 20px; }
  .appseite__laden .laden__text b { font-size: .96rem; }
  /* Das Handy, viel kleiner, mit den Pfeilen links und rechts */
  .appseite .buehne3d { grid-area: handy; order: 0; padding: 4px 0; perspective: 1200px; }
  .appseite .buehne3d > div { display: flex; align-items: center; gap: 3px; }
  .appseite .schweben { animation: app-schweben 6s ease-in-out infinite; }
  @keyframes app-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
  .appseite .handy::before { width: 150%; }
  .appseite .handy__rahmen { width: 112px; padding: 4px; border-radius: 18px;
    box-shadow: 0 20px 34px -16px rgba(11,31,22,.5), 0 6px 12px -6px rgba(11,31,22,.3), inset 0 1px 0 rgba(255,255,255,.16); }
  .appseite .handy__schirm, .appseite .handy__glas { border-radius: 14px; }
  .appseite .handy__schirm { height: 225px; }
  .app__pfeil { display: grid; place-items: center; flex: none; width: 26px; height: 26px; padding: 0;
    border: 0; border-radius: 50%; background: #eceeea; color: #7d847e; cursor: pointer; }
  .app__pfeil svg { width: 14px; height: 14px; }
  [dir="rtl"] .app__pfeil svg { transform: scaleX(-1); }
  /* Zahlenleiste wie im Store */
  .app__zahlen { grid-area: zahlen; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px;
    padding: 10px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); text-align: center; }
  .app__zahlen div + div { border-inline-start: 1px solid var(--linie); }
  .app__zahlen b { display: block; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--gruen-dunkel); }
  .app__zahlen span { display: block; font-size: .66rem; color: var(--tinte-leise); }
  /* Darunter: was die App kann */
  .appseite__text > .etikett { grid-area: etikett; justify-self: start; margin-top: 22px; }
  .appseite__text > h1 { grid-area: h1; }
  .appseite__lead { grid-area: lead; }
  .appseite__anleitung { display: none; }
  .appseite__liste { grid-area: liste; margin-top: 16px; gap: 0; }
  .appseite__fein { grid-area: fein; }
  /* Die Liste schaltet am Handy nichts mehr um, sie ist nur Information */
  .appseite__liste button { pointer-events: none; cursor: default; padding: 12px 2px;
    background: transparent !important; border-color: transparent !important; }
  .appseite__liste li + li button { border-top: 1px solid var(--linie) !important; border-radius: 0; }
}
@media (max-width: 940px) and (prefers-reduced-motion: reduce) { .appseite .schweben { animation: none; } }