/* ==========================================================
   (Stand 2026-10-22 abends: zentrierter Einheiten-Kopf, neu hochgeladen)
   Startseite – ruhiger Aufbau (seit 2026-10-22, vom Nutzer nach Vergleich übernommen), Hook body[data-start-v3] in index.html.
   Baut auf css/start2.css auf und ändert nur die Gestaltung; Schwerpunkt klare Schriftstufen (Hero 42–72 px, Stufe 24–28 px,
   Kartentitel 19 px, Text 14 px):
   ein Blickfang (große Überschrift + ein gefüllter Knopf), mehr Luft, Karten ohne Rahmen mit großem Motiv oben,
   Fach/Klasse als ruhige Textleiste direkt über den Karten, rechts nur Termine und Begleiter.
   Nur Tokens aus css/style.css; kein Anheben, keine Schatten (design.md).
   ========================================================== */

/* ---------- Bänder (2026-10-22, design-vorbilder.md §4.3): jeder Abschnitt eine eigene Fläche über die volle Breite ----------
   Hero Weiß, Einheiten Hellgrau mit weißen Karten, Termine Weiß; keine Trennlinien, 64–140 px Luft je Band (Apple 140 px) */
/* seit 2026-10-22 (Nutzerwunsch) knapper: 48–80 statt 64–140 px je Band */
[data-start-v3] .s3-band { padding-block: clamp(3rem, 6vw, 5rem); }
[data-start-v3] .s3-band--weiss { background: var(--color-surface); }
[data-start-v3] .s3-band--grau { background: var(--color-bg); }
/* unten seit 2026-10-22 rund 45 px knapper (68 statt 112 px): mit dem Verlauf ins Hellgrau bleibt keine leere Zwischenzone */
[data-start-v3] .s2-hero.s3-band { padding-block: clamp(3rem, 7vw, 6.5rem) clamp(2rem, 4vw, 3rem); }
[data-start-v3] .s3-band > .container { max-width: var(--maxw); }
/* Übergang Hero → Einheiten (2026-10-22): das Weiß läuft im unteren Drittel weich ins Hellgrau aus, keine harte Kante;
   Einheiten-Band oben rund 50 px knapper (88 statt 140 px), damit „Deine Reihen.“ näher am Hero steht */
[data-start-v3] .s2-hero.s3-band--weiss { background: linear-gradient(var(--color-surface) 60%, var(--color-bg)); }
[data-start-v3] .s2-einheiten.s3-band { padding-top: clamp(2rem, 4vw, 3.25rem); }

/* ---------- Karopapier und Hero-Szenen (2026-10-22) ----------
   Raster (.mit-karo) und Diagramm-Bausteine (.sz-bild) gemeinsam mit den Stufenseiten in css/seiten.css; hier nur die Lage im Hero.
   Raster zur Mitte hin am schwächsten (hinter Überschrift und Knöpfen), zum Rand ausgeblendet; eine Linie läuft genau durch die Mitte.
   Szenen: Markup index.html, Umschalten js/start2.js. Nur ab 1280 px: darunter fehlt neben Einleitung und Knöpfen der Platz. */
[data-start-v3] .s2-hero { --karo-maske: radial-gradient(ellipse 70% 55% at 50% 50%, rgb(0 0 0 / 0.45) 0%, #000 50%, transparent 100%); }
[data-start-v3] .s2-szene { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; display: none; }
@media (min-width: 1280px) { [data-start-v3] .s2-szene { display: block; } }
@media print { [data-start-v3] .s2-szene { display: none; } }
[data-start-v3] .s2-szene__bild { position: absolute; }
/* Lage auf dem Raster: Ursprung jedes Bilds auf einer Kreuzung (Vielfache von 24 px ab der Mitte), links/rechts der Inhalte.
   Seit 2026-10-22 alle unterhalb der Überschrift (oberer Rand höchstens 24 px über der Mitte): neben Einleitung und Knöpfen (≤ ±353 px)
   ist Platz, die Überschrift („Weiter mit /Informatik.“, bis 72 px) wird je nach Bildschirm über ±500 px breit */
[data-start-v3] .s2-szene__bild--parabel { left: calc(50% - 648px); top: calc(50% - 24px); }
[data-start-v3] .s2-szene__bild--kreis   { left: calc(50% + 456px); top: 50%; }
[data-start-v3] .s2-szene__bild--graph   { left: calc(50% - 624px); top: calc(50% - 24px); }
[data-start-v3] .s2-szene__bild--ablauf  { left: calc(50% + 432px); top: calc(50% - 24px); }
[data-start-v3] .s2-szene__bild--sinus   { left: calc(50% - 648px); top: 50%; }
[data-start-v3] .s2-szene__bild--baum    { left: calc(50% + 456px); top: 50%; }
/* iPad quer und kleine Laptops (960–1279 px, Nutzerwunsch 2026-10-22): Bilder näher an die Mitte, links und rechts neben den
   Weiterlernen-Knopf (±168 px) und unter die Einleitung; weiter auf Rasterkreuzungen (−432 / +216 px = 18 / 9 Kacheln) */
@media (min-width: 960px) and (max-width: 1279px) {
  [data-start-v3] .s2-szene { display: block; }
  [data-start-v3] :is(.s2-szene__bild--parabel, .s2-szene__bild--graph, .s2-szene__bild--sinus) { left: calc(50% - 432px); }
  [data-start-v3] :is(.s2-szene__bild--kreis, .s2-szene__bild--ablauf, .s2-szene__bild--baum) { left: calc(50% + 216px); }
}

/* ---------- Hero: groß, eine Aussage, eine Aktion ---------- */
[data-start-v3] .s2-hero__titel { font-size: clamp(2.6rem, 1.2rem + 4.2vw, 4.5rem); font-weight: var(--fw-titel); letter-spacing: -0.035em; line-height: 1.02; margin-bottom: 1.1rem; }
[data-start-v3] .s2-hero__lead { font-size: clamp(1.2rem, 1rem + 0.55vw, 1.375rem);   /* Einleitung 19–22 px wie Apple */ line-height: 1.45; color: var(--text-secondary); max-width: 44ch; }
/* Textmarker (2026-10-22, .marker in style.css): das getippte Wort schwarz auf Leuchtstift statt grüner Schrift –
   Mathematik gelb, Informatik blau, die übrigen Wörter violett; der Marker wächst beim Tippen mit */
[data-start-v3] .s2-tipp { color: var(--text); }
/* Zwei Schriften abgestimmt (2026-10-22): gemessen haben Inter und IBM Plex Mono dieselbe x-Höhe (0,52 em); mit 0,92 em war das
   getippte Wort 8 % (Versalien 12 %) kleiner als „Lerne“. 0,96 em gleicht das aus, ohne dass die breiteren Mono-Buchstaben größer
   wirken. Plex Mono liegt nur als Medium (500) vor, Inter steht halbfett (600): eine Kontur von 0,016 em gleicht die Strichstärke an
   (gleichmäßig, kein künstlicher Fettschnitt). Laufweite bleibt (Mono nie enger stellen, start2.css). */
[data-start-v3] .s2-tipp { font-size: 0.96em; -webkit-text-stroke: 0.016em currentColor; }
[data-start-v3] .s2-tipp__cursor { -webkit-text-stroke: 0; }
[data-start-v3] .s2-tipp .marker { --mk: var(--marker-botschaft); padding: 0 0.06em; }
[data-start-v3] .s2-tipp[data-fach="mathe"] .marker { --mk: var(--marker-mathe); }
[data-start-v3] .s2-tipp[data-fach="informatik"] .marker { --mk: var(--marker-informatik); }
[data-start-v3] .s2-hero__lead .unterstrich { --ul: var(--unterstrich-botschaft); color: var(--text); }
[data-start-v3] .s2-weiterlernen { margin-top: 2rem; }
[data-start-v3] .s2-weiterlernen .welt-kacheln__liste { gap: 0.75rem 1.25rem; }
/* Hero zentriert wie der Einheiten-Kopf (2026-10-22): eine Mittelachse für die ganze Seite. Das getippte Wort hat seit jeher
   eine Mindestbreite (13ch, start2.css), dadurch steht „Lerne“ beim Tippen still; Weiter-Knopf und Zweitlink mittig nebeneinander */
[data-start-v3] .s2-hero__text { display: flex; flex-direction: column; align-items: center; text-align: center; }
[data-start-v3] .s2-hero__lead { margin-inline: auto; max-width: 40ch; }
[data-start-v3] .s2-weiterlernen { align-self: stretch; }
[data-start-v3] .s2-weiterlernen .welt-kacheln__liste { justify-content: center; }
[data-start-v3] .s2-weiterlernen .welt-kachel { text-align: left; }
[data-start-v3] .s2-weiterlernen li:first-child { flex: 0 1 auto; min-width: 0; }
/* Hauptaktion als gefüllter Knopf; das Symbol entfällt, der Text trägt */
[data-start-v3] .s2-weiterlernen li:first-child .welt-kachel {
  gap: 1rem; padding: 0.95rem 1.25rem 0.95rem 1.4rem; border: 0; border-radius: var(--radius-md);
  background: var(--interactive-primary); color: var(--on-primary);
}
[data-start-v3] .s2-weiterlernen li:first-child .welt-kachel:hover { background: color-mix(in srgb, var(--interactive-primary) 92%, var(--text)); color: var(--on-primary); }
/* Pfeil rückt beim Überfahren/Fokus 3 px nach rechts (2026-10-22), beide Fortsetzen-Karten gleich; reduzierte Bewegung: steht still */
[data-start-v3] .s2-weiterlernen .welt-kachel { transition: background var(--transition-fast), border-color var(--transition-fast); }
[data-start-v3] .s2-weiterlernen .welt-kachel__pfeil { transition: transform var(--transition-normal); }
[data-start-v3] .s2-weiterlernen .welt-kachel:is(:hover, :focus-visible) .welt-kachel__pfeil { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { [data-start-v3] .s2-weiterlernen .welt-kachel__pfeil { transition: none; transform: none !important; } }
[data-start-v3] .s2-weiterlernen li:first-child .welt-kachel > .icon { display: none; }
[data-start-v3] .s2-weiterlernen li:first-child .welt-kachel strong { font-size: var(--fs-lern); }
[data-start-v3] .s2-weiterlernen li:first-child .welt-kachel small { color: inherit; opacity: 0.82; font-size: var(--fs-hilfe); }
[data-start-v3] .s2-weiterlernen li:first-child .welt-kachel__pfeil,
[data-start-v3] .s2-weiterlernen li:first-child .welt-kachel:hover .welt-kachel__pfeil { color: inherit; font-size: 1.15rem; }
[data-start-v3] .s2-weiterlernen li:not(:first-child) .welt-kachel > .icon { display: none; }
/* Zweite Fortsetzung als Geschwister des Hauptknopfs (2026-10-22): gleiche Form, Höhe und Schrift, aber weiße Fläche mit
   feiner Kontur statt Füllung – primär/sekundär nur über die Fläche, nicht über eine andere Bauart */
[data-start-v3] .s2-weiterlernen .welt-kacheln__liste { align-items: stretch; }
[data-start-v3] .s2-weiterlernen li:not(:first-child) { flex: 0 1 auto; min-width: 0; }
/* Beide Fortsetzen-Karten gleich breit (21rem, 2026-10-22): genug Platz für Reihentitel wie „Objektorientierung mit PAKO“,
   die Zeile bleibt trotzdem schmal genug für die Hero-Szenen (≤ 346 px ab Mitte). Aufbau in drei Zeilen (js/start-leiste.js):
   kleine Kennzeile („Weiterlernen“ bzw. Fach), Titel (höchstens zwei Zeilen), Stand (genau eine Zeile); Pfeil rechts mittig */
[data-start-v3] .s2-weiterlernen li,
[data-start-v3] .s2-weiterlernen li:first-child,
[data-start-v3] .s2-weiterlernen li:not(:first-child) { flex: 0 1 21rem; min-width: 0; max-width: 100%; }
[data-start-v3] .s2-weiterlernen .welt-kachel { height: 100%; align-items: center; }
[data-start-v3] .s2-weiterlernen .welt-kachel > span:not(.welt-kachel__pfeil) { gap: 0.15rem; }
[data-start-v3] .s2-weiterlernen .welt-kachel__kennung { font-size: var(--fs-meta); font-weight: var(--fw-mittel); line-height: 1.3; color: var(--text-secondary); }
[data-start-v3] .s2-weiterlernen li:first-child .welt-kachel__kennung { color: inherit; opacity: 0.82; }
[data-start-v3] .s2-weiterlernen .welt-kachel strong {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25;
}
[data-start-v3] .s2-weiterlernen li:not(:first-child) .welt-kachel {
  gap: 1rem; padding: 0.95rem 1.25rem 0.95rem 1.4rem; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--text);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
[data-start-v3] .s2-weiterlernen li:not(:first-child) .welt-kachel:hover { border-color: var(--hover-rand); background: var(--color-surface); }
[data-start-v3] .s2-weiterlernen li:not(:first-child) .welt-kachel strong { font-size: var(--fs-lern); }
[data-start-v3] .s2-weiterlernen li:not(:first-child) .welt-kachel small { color: var(--text-secondary); font-size: var(--fs-hilfe); }
[data-start-v3] .s2-weiterlernen li:not(:first-child) .welt-kachel__pfeil { color: var(--text-secondary); font-size: 1.15rem; }

/* ---------- Kopf der Einheiten: Stufe groß, Fach/Klasse als Textleiste darunter ---------- */
/* Kopf zentriert wie Apple (2026-10-22): Fach-Hinweis grau, Stufe 36–56 px mit Marker, ein Satz, Fach/Klasse darunter mittig */
[data-start-v3] .s2-einheiten__kopf { display: block; max-width: 980px; margin: 0 auto clamp(1.75rem, 3vw, 2.5rem); text-align: center; }
[data-start-v3] .s3-eyebrow { margin: 0 0 0.6rem; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); font-weight: var(--fw-halbfett); color: var(--text-secondary); }
[data-start-v3] .s2-einheiten__kopf h2 { margin: 0; font-size: clamp(2.25rem, 1.2rem + 3.4vw, 3.5rem); font-weight: var(--fw-titel); letter-spacing: -0.03em; line-height: 1.07; }
[data-start-v3] .s3-intro { max-width: 40ch; margin: 1rem auto 0; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.5rem); line-height: 1.35; color: var(--text); }
[data-start-v3] .s3-intro:empty { display: none; }
[data-start-v3] .s2-wahl {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.75rem;
  margin: 0 0 clamp(2rem, 4vw, 3rem); padding: 0; border: 0;
}
[data-start-v3] .s3-alle { margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; text-align: center; font-size: var(--fs-lern); }

/* Stil „Do-matik“ (2026-10-22, Nutzer-Entscheidung nach Vergleich mit „Apple-nah“): eigene Handschrift statt Apple-Kopie.
   Schrägstrich als Erkennungszeichen (wie „Lerne /…“, Regel zentral in style.css bei .eyebrow): „/ Informatik“, Text in Inter,
   nur der Strich in Code-Schrift (CLAUDE.md: Labels in Inter); Einheiten-Kopf seit 2026-10-22 (Nutzerwunsch) wieder zentriert
   auf derselben Mittelachse wie der Hero: Fach-Hinweis, „Q2. Deine Reihen.“, Satz, Fach-/Klassenleiste und „Alle Einheiten“ mittig */
[data-start-v3] .s3-eyebrow { font-weight: var(--fw-mittel); font-size: clamp(1rem, 0.92rem + 0.35vw, 1.2rem); letter-spacing: 0; color: var(--nav-aktiv); }
[data-start-v3] .s2-wahl__kopf { margin: 0; }
/* Fach: Segment-Schalter (eine Fläche, Auswahl hebt sich hell ab) */
[data-start-v3] .s2-fach { gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--surface-sunken); }
[data-start-v3] .s2-fach button { min-height: 36px; padding: 0.35rem 0.9rem; border: 0; background: transparent; color: var(--text-secondary); }
[data-start-v3] .s2-fach button[aria-selected="true"] { background: var(--surface); color: var(--text); }
[data-start-v3] .s2-fach button:not([aria-selected="true"]):hover { color: var(--text); }
/* Klassen: nur Ziffern, Auswahl = Akzentfarbe + Strich darunter; Gruppen durch eine feine Linie getrennt */
[data-start-v3] .s2-klassen { gap: 0; align-items: center; }
[data-start-v3] .s2-klassen__gruppe { display: flex; align-items: center; }
[data-start-v3] .s2-klassen__gruppe + .s2-klassen__gruppe { margin-left: 0.6rem; padding-left: 0.6rem; border-left: 1px solid var(--border-divider); }
[data-start-v3] .s2-klassen__titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[data-start-v3] .s2-klassen__reihe { gap: 0; }
[data-start-v3] .s2-klasse { min-width: 40px; min-height: 40px; padding: 0.3rem 0.55rem; border: 0; background: transparent; color: var(--text-secondary); border-radius: var(--radius-sm); }
[data-start-v3] .s2-klasse:hover { background: var(--surface-sunken); color: var(--text); }
[data-start-v3] .s2-klasse[aria-pressed="true"] { background: var(--linie-unten); box-shadow: none; }
[data-start-v3] .s2-klasse[aria-pressed="true"] strong { color: var(--nav-aktiv); }

/* ---------- Karten: ohne Rahmen, Motiv groß als Bildfläche oben ---------- */
/* 3er-Raster (2026-10-22): drei Karten je Reihe, Rinne 24 px, Rundung --radius-kachel; Motiv als „Fenster“ mit 8 px Innenrand */
[data-start-v3] .s2-karten--kompakt { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 24px; }
[data-start-v3] .s2-karten--kompakt .s2-karte {
  /* Stil „Do-matik“ (2026-10-22): straffer (14 px), feiner Rand + zarter Schatten (Microsoft-Ebene 1) statt flacher Apple-Kachel */
  gap: 0; padding: 0; min-height: 0; border: 1px solid var(--border); border-radius: var(--radius-flaeche);
  background: var(--color-surface); transition: background var(--transition-fast), border-color var(--transition-fast);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent), 0 2px 6px color-mix(in srgb, var(--text) 5%, transparent);
}
:root[data-theme="dark"] [data-start-v3] .s2-karten--kompakt .s2-karte { box-shadow: none; }
[data-start-v3] .s2-karten--kompakt a.s2-karte:hover { border-color: var(--hover-rand); background: var(--color-surface); }
[data-start-v3] .s2-karten--kompakt .s2-karte__motiv {
  order: -1; position: static; align-self: auto; display: grid; place-items: center; width: calc(100% - 12px); aspect-ratio: 16 / 9; margin: 6px 6px 0;
  border-radius: calc(var(--radius-flaeche) - 6px); background: color-mix(in srgb, var(--k) 9%, var(--color-surface));
}
[data-start-v3] .s2-karten--kompakt .s2-karte__motiv svg { width: 62%; height: auto; transform-origin: 50% 50%; }
[data-start-v3] .s2-karten--kompakt .s2-karte__oben { padding: 1.1rem 1.25rem 0.35rem; border: 0; }
[data-start-v3] .s2-karten--kompakt .s2-karte__nr { font-family: var(--font); font-size: var(--fs-hilfe); font-weight: var(--fw-halbfett); letter-spacing: 0; }
[data-start-v3] .s2-karten--kompakt .s2-karte__text { padding: 0 1.25rem; gap: 0.35rem; }
[data-start-v3] .s2-karten--kompakt .s2-karte__text strong { font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.01em; }
[data-start-v3] .s2-karten--kompakt .s2-karte__kurz { font-size: var(--fs-hilfe); line-height: 1.45; color: var(--text-secondary); -webkit-line-clamp: 2; line-clamp: 2; }
[data-start-v3] .s2-karten--kompakt .s2-karte__unten,
[data-start-v3] .s2-karten--kompakt .s2-karte:has(.s2-karte__motiv) .s2-karte__unten { margin-top: auto; padding: 1rem 1.25rem 1.15rem; }
[data-start-v3] .s2-karten--kompakt .s2-karte.ist-bald { border: 1px dashed var(--border); background: transparent; }
[data-start-v3] .s2-karten--kompakt .s2-karte.ist-bald .s2-karte__motiv { background: transparent; }

/* Leitkarte (2026-10-22, Microsoft-Muster): aktuelle bzw. nächste Einheit über die volle Breite, Text links, Motiv rechts */
[data-start-v3] .s2-karten--kompakt .s2-karte--leit {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto auto 1fr;
  grid-template-areas: "oben motiv" "text motiv" "unten motiv";
}
[data-start-v3] .s2-karte--leit .s2-karte__oben { grid-area: oben; flex-wrap: wrap; justify-content: flex-start; gap: 0.3rem 0.75rem; padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) 0.5rem; }
[data-start-v3] .s2-karte__leit { flex: 0 0 100%; font-size: var(--fs-meta); font-weight: var(--fw-mittel); color: var(--nav-aktiv); }
[data-start-v3] .s2-karte--leit .s2-karte__text { grid-area: text; padding: 0 clamp(1.5rem, 3vw, 2.5rem); gap: 0.6rem; }
[data-start-v3] .s2-karte--leit .s2-karte__text strong { font-size: clamp(1.6rem, 1.15rem + 1.3vw, 2.25rem); line-height: 1.12; letter-spacing: -0.02em; }
[data-start-v3] .s2-karte--leit .s2-karte__kurz { font-size: var(--fs-lern); -webkit-line-clamp: 3; line-clamp: 3; }
[data-start-v3] .s2-karten--kompakt .s2-karte--leit .s2-karte__unten { grid-area: unten; align-self: end; margin-top: 0; padding: 1.5rem clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem); }
[data-start-v3] .s2-karten--kompakt .s2-karte--leit .s2-karte__motiv { grid-area: motiv; order: 0; margin: 6px; aspect-ratio: auto; min-height: clamp(220px, 26vw, 340px); }
[data-start-v3] .s2-karten--kompakt .s2-karte--leit .s2-karte__motiv svg { width: 52%; }
@media (max-width: 900px) {
  [data-start-v3] .s2-karten--kompakt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  [data-start-v3] .s2-karten--kompakt .s2-karte--leit { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "motiv" "oben" "text" "unten"; }
  [data-start-v3] .s2-karten--kompakt .s2-karte--leit .s2-karte__motiv { margin: 6px 6px 0; min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  [data-start-v3] .s2-karten--kompakt { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* Einmaliges ruhiges Einblenden, wenn Karten erscheinen (Laden, Wechsel von Fach/Klasse) */
@keyframes s3-ein { from { opacity: 0; transform: translateY(8px); } }
[data-start-v3] .s2-karten > .s2-karte { animation: s3-ein 340ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
[data-start-v3] .s2-karten > .s2-karte:nth-child(2) { animation-delay: 40ms; }
[data-start-v3] .s2-karten > .s2-karte:nth-child(3) { animation-delay: 80ms; }
[data-start-v3] .s2-karten > .s2-karte:nth-child(4) { animation-delay: 120ms; }
[data-start-v3] .s2-karten > .s2-karte:nth-child(n+5) { animation-delay: 160ms; }
@media (prefers-reduced-motion: reduce) {
  [data-start-v3] .s2-karten > .s2-karte { animation: none; }
  [data-start-v3] a.s2-karte:hover .s2-karte__motiv svg { transform: none; }
}

/* ---------- Seitenspalte: nur Termine und Begleiter, etwas größer ---------- */
[data-start-v3] .s2-begleiter__link { grid-template-columns: 96px minmax(0, 1fr); }
[data-start-v3] .s2-begleiter__buehne { width: 96px; height: 96px; }
[data-start-v3] .s2-begleiter__buehne img { max-height: 96px; }

@media (max-width: 1100px) {
  [data-start-v3] .s2-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  [data-start-v3] .s2-wahl { flex-direction: column; align-items: stretch; }
  [data-start-v3] .s2-klassen { flex-wrap: nowrap; overflow-x: auto; }
}

/* ---------- Termine unter den Einheiten (2026-10-22, vorher rechte Spalte) ----------
   eigener Abschnitt mit Überschrift wie „Klasse 5“, Termine als Reihe von Kalenderblättern */
[data-start-v3] .s2-termine.s3-band { border-top: 0; }
[data-start-v3] .s2-termine h2 { margin: 0 0 1.25rem !important; font-family: var(--font); font-size: var(--fs-h3) !important; font-weight: var(--fw-titel) !important; color: var(--text); letter-spacing: -0.015em; }
[data-start-v3] .s2-termine h2 .icon { width: 1.1em; height: 1.1em; color: var(--text-secondary); }
[data-start-v3] .s2-termine__liste { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 0.75rem 2rem; }
[data-start-v3] .s2-termine__liste li.s2-termine__knopf { grid-column: 1 / -1; }
/* Schmale Handys (2026-10-22): Fach-Umschalter über die volle Breite, getipptes Wort ohne feste Mindestbreite */
@media (max-width: 600px) {
  [data-start-v3] .s2-wahl__kopf, [data-start-v3] .s2-fach { width: 100%; }
  [data-start-v3] .s2-fach button { flex: 1 1 0; justify-content: center; padding-inline: 0.5rem; }
}
@media (max-width: 380px) {
  [data-start-v3] .s2-tipp { min-width: 0; }
  [data-start-v3] .s2-hero__titel { font-size: 2.35rem; }
}

/* Link zur Einführungsseite unter dem Hero, nur für nicht angemeldete Besucher (2026-10-22) */
[data-start-v3] .s2-hero__mehr { margin: 1.25rem 0 0; font-size: var(--fs-ui); }
[data-start-v3] .s2-hero__mehr[hidden] { display: none; }