/* Die Einstiegsseite (index.html, 07.09.2026 — docs/EINSTIEGSSEITE.md).
   Nutzt die --pp-Tokens aus prepp.css (hell und dunkel), wie legal.css.
   Eigene Klassen mit Präfix es-; der Video-Kasten kommt aus prepp.css
   (.pp-video, dieselbe Bauart wie in der App). */
.es-body { margin: 0; background: var(--pp-bg); color: var(--pp-text); font-family: var(--pp-sans); }
.es-top { border-bottom: 1px solid var(--pp-line); background: var(--pp-bg-2); position: sticky; top: 0; z-index: 2; }
.es-top-in, .es-wrap, .es-foot { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.es-top-in { display: flex; align-items: center; gap: 12px; height: 64px; }
.es-marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--pp-text);
  font-family: "Lora", Georgia, serif; font-weight: 600; font-size: var(--pp-fs-h2); }
.es-logo { width: 28px; height: 28px; display: none; }
.es-logo.dark { display: block; }
body[data-theme="light"] .es-logo.dark { display: none; }
body[data-theme="light"] .es-logo.light { display: block; }
.es-nav { margin-left: auto; display: flex; gap: 10px; }
/* Der Sprachschalter (wa1009-r4 K, docs/WA1009-R4-TEXTE-2026-10-10.md 2):
   zwei Links in einem Segment, wie DE/EN in der Seitenleiste der App
   (.pp-segment) — als Links, weil sie ohne Skript wenigstens eine Adresse
   tragen. Er schiebt sich zwischen Marke und Knöpfe; solange er verborgen
   ist (ohne JavaScript), behält die Knopfleiste ihren margin-left: auto.
   Die inaktive Sprache steht in --pp-text-2, nicht -3: Sie ist Schrift,
   die man lesen soll (Kontrast ≥ 4,5:1 in beiden Themes). */
.es-lang { margin-left: auto; display: inline-flex; border: 1px solid var(--pp-line-2); border-radius: 6px; overflow: hidden; }
.es-lang:not([hidden]) + .es-nav { margin-left: 0; }
.es-lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 38px;
  padding: 0 6px; box-sizing: border-box; font: 500 var(--pp-fs-mini)/1 var(--pp-mono); letter-spacing: .08em;
  color: var(--pp-text-2); text-decoration: none; }
.es-lang a + a { border-left: 1px solid var(--pp-line-2); }
.es-lang a[aria-current="true"] { background: var(--pp-accent-tint); color: var(--pp-accent-2); }
.es-lang a:hover { color: var(--pp-text); }
.es-lang a:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: -2px; }
/* border-box (10.10.2026): Mit content-box kamen Polster und Rand ZU der
   min-height hinzu — 40 + 2 × 8 + 2 = 58 px, auf dem Telefon höher als die
   56 px der Kopfleiste. Die Knöpfe standen oben und unten über und nicht
   mittig neben dem Sprachschalter. */
.es-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
  border: 1px solid var(--pp-line-2); border-radius: 6px; padding: 9px 16px; min-height: 40px;
  background: var(--pp-surface); color: var(--pp-text); font-weight: 600; font-size: var(--pp-fs-klein);
  text-decoration: none; cursor: pointer; }
.es-btn:hover { border-color: var(--pp-text-3); }
.es-btn.primary { background: var(--pp-accent); border-color: var(--pp-accent); color: var(--pp-accent-contrast); }
.es-btn.primary:hover { filter: brightness(1.08); }
.es-btn.breit { width: 100%; box-sizing: border-box; min-height: 48px; font-size: var(--pp-fs-text); }
.es-btn:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 2px; }

.es-wrap { padding-top: 56px; padding-bottom: 40px; }
.es-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 48px; align-items: start; }
.es-eyebrow { font: 500 var(--pp-fs-mini)/1.4 var(--pp-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--pp-text-3); }
.es-h1 { margin: 14px 0 22px; font-family: "Lora", Georgia, serif; font-weight: 600;
  font-size: clamp(2.1rem, 3.6vw, 3rem); line-height: 1.12; letter-spacing: -.01em; color: var(--pp-text); text-wrap: balance; }
.es-lead { margin: 0 0 30px; max-width: 62ch; font-size: var(--pp-fs-gross); line-height: var(--pp-lh-weit); color: var(--pp-text-2); }
/* Die drei Punkte unter dem Titel (23.09.2026) — dieselbe Schrift wie der Vorspann. */
.es-punkte { margin: 0 0 30px; padding-left: 1.2em; max-width: 62ch; font-size: var(--pp-fs-gross); line-height: var(--pp-lh-weit); color: var(--pp-text-2); }
.es-punkte li { margin: 0 0 8px; }
/* E17-Entwurf (QA1013-Q16): Semester- und Endspurt-Zeile über den Punkten. */
.es-selbstbild { margin: 0 0 20px; max-width: 62ch; }
.es-selbstbild .es-sub { margin: 0 0 8px; font-size: var(--pp-fs-gross); }
.es-zeilen { margin: 0; border-top: 1px solid var(--pp-line); }
.es-zeile { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--pp-line); }
.es-zeile dt { font: 500 var(--pp-fs-mini)/1.5 var(--pp-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pp-text-3); }
.es-zeile dd { margin: 0; font-size: var(--pp-fs-text); line-height: var(--pp-lh-text); color: var(--pp-text); }

.es-card { border: 1px solid var(--pp-line); border-radius: 10px; background: var(--pp-surface); box-shadow: var(--pp-shadow); padding: 24px; }
.es-card + .es-card { margin-top: 18px; }
.es-gast { background: var(--pp-surface-2); }
/* Der Gastmodus ganz unten (17.10.2026, Jonas' Auftrag): die Karte von
   rechts oben ans Seitenende, vor den Fuß — schmal genug, dass sie wie
   ein Schlusspunkt aussieht und nicht wie ein weiterer Abschnitt. */
.es-gast-ende { margin-top: 48px; max-width: 560px; }
.es-h2 { margin: 0 0 8px; font-size: var(--pp-fs-h3); font-weight: 600; color: var(--pp-text); }
.es-gast p { margin: 0 0 16px; font-size: var(--pp-fs-klein); line-height: var(--pp-lh-text); color: var(--pp-text-2); }
.es-sub { margin-top: 8px; font-size: var(--pp-fs-klein); line-height: var(--pp-lh-text); color: var(--pp-text-2); }
.es-sub strong { color: var(--pp-text); }
/* [hidden] gewinnt gegen jede display-Regel dieser Seite. Ohne die Zeile
   malte WebKit „Zur App", Anmelden und Konto anlegen alle drei nebeneinander:
   .es-btn { display: inline-flex } schlägt die Browserregel [hidden] — die
   .pp-inreq-Falle vom 13.08.2026 (CLAUDE.md), gemessen am 07.09. abends. */
.es-body [hidden] { display: none !important; }

/* Die Bildschirmfotos: ein Raster gleich großer Figuren, das Bild ist
   der Link. Die Großansicht ist ein <dialog> über dem ganzen Fenster;
   sein eigener Kasten ist durchsichtig, damit ein Klick DANEBEN das Dialog-
   Element selbst trifft (index.html schließt darauf). Feste dunkle Farben
   im Dialog sind Absicht — die Großansicht ist in beiden Themes ein
   abgedunkeltes Fenster über der Seite, kein Teil ihrer Fläche. */
/* Die Vitrine (17.10.2026, Jonas: „direkt auf der rechten Seite die
   wichtigsten Screenshots"): rechts im ersten Bildschirm ein großes Bild
   über zwei kleinen. Unter dem Bild steht dort nur der fette Titel — die
   Beschreibung (.es-mehr) zeigt die Großansicht, die die ganze figcaption
   übernimmt. Gemessen in WebKit: bei 1440 × 900 und 1280 × 800 endet die
   Vitrine über der Falz. */
.es-vitrine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; margin-top: 6px; }
.es-vitrine .es-shot-gross { grid-column: 1 / -1; }
.es-vitrine .es-mehr { display: none; }
.es-vitrine .es-shot figcaption { margin-top: 7px; }
.es-vitrine-hinweis { grid-column: 1 / -1; margin: -4px 0 0; font-size: var(--pp-fs-mini); color: var(--pp-text-3); }
.es-schau { margin-top: 56px; }
.es-schau .es-sub { margin: 0 0 16px; }
/* Acht Bilder seit a1014 E1 (15.10.2026): zwei Spalten statt drei — acht
   gehen in vier Reihen auf, und ein Bild der Arbeitsumgebung braucht mehr
   als 340 px Breite, damit man in der Reihe überhaupt erkennt, was es zeigt. */
.es-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
/* Fünf Bilder seit der Vitrine: das erste als breite Zeile, Bild links,
   Beschreibung rechts daneben — dann gehen die übrigen vier in zwei Reihen auf. */
.es-shot-breit { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.es-shot-breit figcaption { margin-top: 0; font-size: var(--pp-fs-text); }
.es-shot { margin: 0; min-width: 0; }
.es-shot-a { display: block; border: 1px solid var(--pp-line); border-radius: 8px; overflow: hidden;
  background: var(--pp-surface); box-shadow: var(--pp-shadow); }
.es-shot-a img { display: block; width: 100%; height: auto; }
.es-shot-a:hover { border-color: var(--pp-text-3); }
.es-shot-a:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 2px; }
.es-shot figcaption { margin-top: 10px; font-size: var(--pp-fs-klein); line-height: var(--pp-lh-text); color: var(--pp-text-2); }
.es-shot figcaption strong { color: var(--pp-text); }
.es-licht { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none;
  background: transparent; color: #fff; }
/* .94, nicht .86: Bei 390 px liegt die Beschreibung der Großansicht über
   dem Fließtext der Seite, und durch .86 schien er hindurch (WebKit gemessen). */
.es-licht::backdrop { background: rgba(6, 8, 12, .94); }
.es-licht[open] { display: grid; place-items: center; }
.es-licht-in { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 12px; width: min(96vw, 1680px); padding-top: 56px; box-sizing: border-box; }
.es-licht-bild { display: block; max-width: 100%; max-height: 78vh; width: auto; height: auto; margin: 0 auto;
  border-radius: 6px; background: #111; box-shadow: 0 24px 64px rgba(0, 0, 0, .6); }
.es-licht-text { grid-column: 1 / -1; margin: 14px auto 0; max-width: 72ch; text-align: center;
  font-size: var(--pp-fs-klein); line-height: var(--pp-lh-text); color: rgba(255, 255, 255, .82); }
.es-licht-text strong { color: #fff; }
.es-licht-knopf { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(20, 24, 32, .72); color: #fff; font: 400 26px/1 var(--pp-sans); cursor: pointer; }
.es-licht-knopf:hover { background: rgba(70, 76, 92, .92); }
.es-licht-knopf:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.es-licht-zu { position: absolute; top: 4px; right: 0; font-size: 20px; }

/* Sprechen & Hören (wa1009-r2 D, 10.10.2026, docs/WA1009-R2-KAUFGRUND-2026-10-10.md):
   dieselben Zeilen wie im Kopf der Seite (.es-zeilen) — der Abschnitt soll
   wie ein Teil der Seite aussehen, nicht wie ein Werbekasten. Die Spalte der
   Marken ist hier breiter (200 statt 160 px), damit „Mit dem Tutor
   sprechen" in der Mono-Versalschrift auf EINER Zeile steht; unter 860 px
   stehen Marke und Text ohnehin untereinander (Regel unten). */
.es-hoeren { margin-top: 56px; max-width: 900px; }
.es-hoeren .es-sub { margin: 0 0 14px; }
.es-hoeren .es-zeile { grid-template-columns: 200px minmax(0, 1fr); }
.es-hoeren-geld { margin: 14px 0 0; font-size: var(--pp-fs-klein); line-height: var(--pp-lh-text); color: var(--pp-text-2); }
.es-kosten { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--pp-line); max-width: 72ch; }
.es-kosten p { margin: 8px 0 0; font-size: var(--pp-fs-text); line-height: var(--pp-lh-weit); color: var(--pp-text-2); }
.es-kosten a, .es-foot a, .es-hoeren-geld a { color: var(--pp-accent-2); text-decoration: none; }
.es-kosten a:hover, .es-foot a:hover, .es-hoeren-geld a:hover { text-decoration: underline; }
.es-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 20px; padding-bottom: 40px;
  border-top: 1px solid var(--pp-line); font-size: var(--pp-fs-klein); color: var(--pp-text-3); }

@media (max-width: 860px) {
  .es-wrap { padding-top: 32px; }
  /* Schmal (17.10.2026): die Vitrine direkt unter das Versprechen, nicht
     hinter die drei Punkte und die Zeilen — sonst stünden die Bilder auf dem
     Telefon erst im zweiten Bildschirm darunter. display: contents hebt
     .es-links als Kasten auf, damit sich die Vitrine per order zwischen
     dessen Kinder schieben kann; die Reihenfolge im DOM bleibt (Vorlesen,
     Tabulator: erst Text, dann Bilder). */
  .es-hero { display: flex; flex-direction: column; gap: 0; }
  .es-links { display: contents; }
  .es-vitrine { order: 1; margin: 4px 0 32px; }
  .es-punkte, .es-zeilen { order: 2; }
  .es-zeile, .es-hoeren .es-zeile { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .es-top-in { height: 56px; }
  .es-nav .es-btn { padding: 8px 12px; }
  .es-shots { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .es-shot-breit { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .es-shot-breit figcaption { margin-top: 10px; font-size: var(--pp-fs-klein); }
  /* Schmal: die Pfeile liegen auf dem Bild statt daneben, sonst bliebe für
     das Bild zu wenig Breite. */
  .es-licht-in { grid-template-columns: minmax(0, 1fr); width: 100vw; padding: 56px 8px 0; }
  .es-licht-vor, .es-licht-nach { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; }
  .es-licht-vor { left: 12px; }
  .es-licht-nach { right: 12px; }
  .es-licht-zu { right: 8px; }
}

/* Telefon (wa1009-r4 K, in WebKit gemessen bei 390 px): Mit dem vollen
   Segment DE|EN brach „Konto anlegen" bzw. „Create account" auf zwei
   Zeilen um (Knopf 72 statt 109 px breit). Schmal steht deshalb nur die
   ANDERE Sprache da — ein Knopf, der dorthin führt (aria-label „English"
   bzw. „Deutsch") —, und die Abstände rücken etwas zusammen. */
@media (max-width: 520px) {
  .es-lang a[aria-current="true"] { display: none; }
  .es-lang a + a { border-left: 0; }
  .es-top-in { gap: 8px; }
  .es-nav { gap: 6px; }
  .es-nav .es-btn { padding: 8px 10px; }
}
/* Unter 400 px (iPhone SE, 375 px) reichte auch das nicht: „Konto anlegen"
   brach um (96 px). Dort ist der Seitenrand 16 statt 24 px — für Kopf,
   Inhalt und Fuß gleich, damit Marke und Text bündig bleiben. */
@media (max-width: 400px) {
  .es-top-in, .es-wrap, .es-foot { padding-left: 16px; padding-right: 16px; }
}

/* ns0929-p6 (29.09.2026, Befund p1 #20): Die Fußlinks waren auf dem
   Telefon 16 px hoch — fünf Links in umbrechenden Zeilen, 8 px Zeilen-
   abstand. Auf dem Finger 44 px in der HÖHE (Hausvorgabe R3); ein
   unsichtbarer Vorsatz statt der Höhe überlappte die Nachbarzeile. Der
   Anker braucht dafür inline-flex (min-height bewegt an einem Inline-Kasten
   nichts — dieselbe Begründung wie a.pp-btn in css/prepp.css). Nur ohne
   Zeiger, der Mac bleibt pixelgleich. */
@media (hover: none) {
  .es-foot a { display: inline-flex; align-items: center; min-height: 44px; }
  .es-lang a { min-width: 44px; min-height: 44px; }   /* wa1009-r4 K: auch der Sprachschalter */
  /* Die Kopfknöpfe so hoch wie das Segment daneben (44 px + 2 × 1 px Rand),
     sonst stünden EN, Anmelden und Konto anlegen auf drei Höhen. */
  .es-nav .es-btn { min-height: 46px; }
}