/* TMSnat red — Landing Page. Schlicht und zentriert, Farben und Schriften wie
   in der App (Papiergrund, Tinte, Markenrot). Keine externen Schriften.
   Gestaltungsregeln und Bausteine: landing/DESIGN.md. */

@font-face { font-family: "Caveat"; font-weight: 600; font-display: swap; src: url("/schriften/caveat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url("/schriften/manrope-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-display: swap; src: url("/schriften/manrope-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 800; font-display: swap; src: url("/schriften/manrope-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-weight: 400; font-display: swap; src: url("/schriften/work-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-weight: 500; font-display: swap; src: url("/schriften/work-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-weight: 600; font-display: swap; src: url("/schriften/work-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  --grund: #f9f2e9;
  --grund-tief: #f2e8d9;
  --flaeche: #fdfbf7;
  --tinte: #2c251f;
  --tinte-leise: #605243;
  --tinte-blass: rgba(44, 37, 31, 0.68);
  --linie: rgba(44, 37, 31, 0.1);
  --marke: #74222b;
  --marke-tief: #62191f;
  --marke-hauch: #f3e4e3;
  --verlauf-eins: linear-gradient(160deg, #f31b1f 0%, #ab1926 45%, #63131c 100%);
  --passer-eins: rgb(111 18 29 / 0.3);
  --schatten: rgba(64, 40, 28, 0.22);
  --geraet: #1b1816;
  --auf-akzent: #fff;
  /* Bänder, Karten und Text (DESIGN.md): gelten auf allen Seiten, auch auf der Startseite. */
  --r-weiss: #fdfbf8;
  --r-hell: #f8f2ea;
  --r-text: #3e342b;
  --r-kopf: #1d1916;
  --r-leise: #6d6359;
  --r-linie: #ece2d3;
  --r-marker: rgba(124, 26, 37, 0.13);
  --r-ok: #368347;
  --r-ok-hauch: #e6f3e6;
  --r-nein: #cf2d1c;
  --r-nein-hauch: #fce6e2;
  --karte-schatten: 0 1px 2px rgba(67, 45, 23, 0.05);
  --akzent: var(--marke); --akzent-tief: var(--marke-tief);
  --akzent-hauch: color-mix(in srgb, var(--akzent) 12%, transparent);
  color-scheme: light;
}
/* Die Website ist immer hell, wie der helle Modus der App. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--grund); color: var(--tinte); font: 400 16px/1.6 "Work Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
.innen { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 24px; }

.nur-dunkel { display: none !important; }

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

.kopf { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--grund) 85%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--linie); }
.kopf .innen { display: flex; align-items: center; gap: 24px; height: 60px; }
.marke { display: flex; align-items: center; gap: 0.3em; min-height: 44px; text-decoration: none; }
.marke img { width: 1.33em; height: 1.33em; }
.wortmarke { font: 600 1em/1 "Manrope", sans-serif; letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 0.3em; }
.wortmarke b { font-weight: 800; letter-spacing: 0; background: var(--verlauf-eins); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0.5px -0.3px 0 var(--passer-eins); }
.namenshinweis { display: inline-block; margin: 0 0 18px; padding: 7px 12px; border-radius: 12px; background: color-mix(in srgb, var(--tinte) 7%, transparent); font-size: 13px; font-weight: 500; color: var(--tinte-leise); }
.kopf nav { margin-left: auto; display: flex; gap: 22px; font-size: 14px; font-weight: 500; }
.kopf nav a { display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; text-decoration: none; color: var(--tinte-leise); }
.kopf nav a:hover { color: var(--tinte); }
/* Menü-Knopf (drei Striche) — nur am Handy und nur mit JS (zeigen.js nimmt hidden weg). */
.menue-knopf { display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--tinte); cursor: pointer; }
.menue-knopf span, .menue-knopf span::before, .menue-knopf span::after { position: absolute; left: 12px; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.2s, opacity 0.2s; }
.menue-knopf span { top: 21px; }
.menue-knopf span::before, .menue-knopf span::after { content: ""; left: 0; }
.menue-knopf span::before { top: -6px; }
.menue-knopf span::after { top: 6px; }
.kopf.offen .menue-knopf span { background: transparent; }
.kopf.offen .menue-knopf span::before { transform: translateY(6px) rotate(45deg); background: var(--tinte); }
.kopf.offen .menue-knopf span::after { transform: translateY(-6px) rotate(-45deg); background: var(--tinte); }
.menue-knopf:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }

/* --------------------------------------------------------------- Knopf */

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 24px; border-radius: 12px;
  background: var(--marke); color: var(--auf-akzent); text-decoration: none;
  font: 600 15px/1 "Work Sans", sans-serif;
}
.knopf:hover { background: var(--marke-tief); }
.knopf[aria-disabled="true"] { cursor: default; }
.knopf-klein { height: 44px; padding: 0 16px; font-size: 14px; border-radius: 10px; }

/* ------------------------------------------------------------- Abschnitte */

section { padding: 88px 0; text-align: center; }
/* Bänder im Wechsel weiß/hell; zwei gleiche hintereinander teilen sich den Abstand. */
section.weiss { background: var(--r-weiss); }
section.grau { background: var(--r-hell); }
section.weiss + section.weiss, section.grau + section.grau, .r-kopf + section.grau { padding-top: 0; }
h1, h2, h3 { font-family: "Manrope", sans-serif; letter-spacing: -0.03em; margin: 0; }
h1 { font-weight: 800; font-size: clamp(38px, 6vw, 60px); line-height: 1.05; }
h1 em { font-style: normal; background: var(--verlauf-eins); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { font-weight: 800; font-size: clamp(28px, 4vw, 40px); line-height: 1.12; letter-spacing: -0.035em; color: var(--r-kopf); margin-bottom: 30px; }
h3 { font-weight: 700; font-size: 18px; line-height: 1.3; letter-spacing: -0.015em; }
.schmal .innen { max-width: 760px; }
.fussnote { margin: 20px 0 0; font-size: 14px; color: var(--tinte-blass); }

/* Bühne */
.buehne {
  padding: 64px 0 80px; text-align: left; overflow-x: clip;
  background:
    radial-gradient(ellipse 820px 600px at 85% 10%, rgba(197, 71, 86, 0.16), transparent 70%),
    radial-gradient(ellipse 600px 480px at 0% 90%, rgba(124, 26, 37, 0.07), transparent 70%);
}
.buehne .innen { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 48px; }
.buehne h1 { font-size: clamp(38px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -0.035em; }
.slogan { margin: 18px 0 0; font: 600 clamp(17px, 1.8vw, 20px)/1.4 "Manrope", sans-serif; color: var(--tinte-leise); }
.slogan span { white-space: nowrap; }
/* Die Eins aus dem App-Symbol mitten im Titel, wie im ersten App-Store-Bild.
   Das SVG hat Rand für den Schatten (viewBox -20 -14 148 200, Glyphe 108 × 172). */

.knopf-leise { background: transparent; color: var(--tinte); border: 1px solid var(--linie); }
.knopf-leise:hover { background: var(--flaeche); }

.kennzahlen { display: flex; margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--linie); }
.kennzahlen div { display: flex; flex-direction: column; padding-right: 22px; }
.kennzahlen div + div { padding-left: 22px; border-left: 1px solid var(--linie); }
.kennzahlen dd { margin: 0; font: 800 22px/1.15 "Manrope", sans-serif; letter-spacing: -0.02em; }
.kennzahlen dt { font-size: 13px; color: var(--tinte-blass); }

.buehne-bild { position: relative; height: 600px; }
.buehne-bild .geraet {
  position: absolute; aspect-ratio: 440 / 956; padding: 9px; border-radius: 44px; background: var(--geraet);
  box-shadow: 0 0 0 1px #4a4440, 0 44px 70px -26px var(--schatten);
}
.buehne-bild .geraet img { width: 100%; height: 100%; object-fit: cover; border-radius: 36px; }
.buehne-bild .geraet::after { content: ""; position: absolute; top: 18px; left: 50%; width: 30%; height: 21px; margin-left: -15%; border-radius: 999px; background: #000; }
.geraet-vorne { left: 74%; top: 96px; width: 240px; margin-left: -120px; z-index: 2; }
/* Bildschirm im Gerät: der Rahmen hat das Seitenverhältnis des Screenshots
   (660 × 1434) und ist mittig angeschnitten wie vorher mit object-fit: cover.
   Farben wie im Screenshot gemessen. Die Tageszahl liegt darin in cqw — so sitzt sie bei jeder Gerätegröße genau
   dort, wo sie in der App steht (Werte aus der App: 52 px / 19 px, Rand 24 px,
   Lücke 8 px, auf 440 pt Breite). */
.schirm { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; }
.schirm-bild { position: absolute; top: 0; bottom: 0; left: 50%; aspect-ratio: 660 / 1434; transform: translateX(-50%); container-type: inline-size; }
.buehne-bild .schirm-bild img { border-radius: 0; object-fit: fill; }
/* Lage, Größe und Farbe wie die Zahl in der App (StartScreen, .aura-zahl in src/styles/app.css). */
.schirm-tage {
  position: absolute; left: 5.4545cqw; top: 37.56cqw; margin: 0;
  display: flex; align-items: baseline; gap: 1.818cqw;
}
.schirm-zahl {
  padding-right: 0.06em;
  font: 800 23.5cqw/1 "Manrope", sans-serif; letter-spacing: -0.06em; font-variant-numeric: tabular-nums;
  color: transparent; background-color: #500a1a;
  background-image: radial-gradient(circle at 25% 30%, rgb(196 50 69) 0%, rgb(196 50 69 / 0) 34%), radial-gradient(circle at 72% 68%, rgb(228 117 64) 0%, rgb(228 117 64 / 0) 30%);
  background-size: 220% 220%; background-position: 35% 35%;
  -webkit-background-clip: text; background-clip: text;
}
.schirm-tage small { font: 600 4.318cqw/1 "Work Sans", sans-serif; color: #605243; }
/* iPad hinter dem iPhone: echter Bildschirm aus der App, leicht gedreht. */
.tablet {
  position: absolute; left: 0; top: 34px; width: 360px; aspect-ratio: 840 / 1120; box-sizing: content-box;
  padding: 12px; border-radius: 34px; background: var(--geraet); transform: rotate(-5deg);
  box-shadow: 0 0 0 1px #4a4440, 0 50px 80px -30px var(--schatten);
}
.tablet img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 22px; }
.plakette {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px;
  padding: 11px 15px; border-radius: 16px; background: var(--flaeche);
  box-shadow: 0 18px 40px -16px var(--schatten), inset 0 0 0 1px var(--linie);
  font: 600 13px/1.2 "Work Sans", sans-serif;
}
.plakette-unten { bottom: 64px; left: 4%; }
.punkt { width: 9px; height: 9px; border-radius: 50%; background: #6e9844; box-shadow: 0 0 0 4px rgba(110, 152, 68, 0.2); }

/* Echte App-Store-Bewertung (nur ab 5 Bewertungen, siehe landing-bauen.mjs) */
.bewertung { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 14px; color: var(--tinte-leise); }
.bewertung strong { color: var(--tinte); }
.sterne { --wert: 5; position: relative; display: inline-block; font-size: 17px; line-height: 1; letter-spacing: 2px; }
.sterne::before { content: "★★★★★"; color: var(--linie); }
.sterne::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: calc(var(--wert) / 5 * 100%); overflow: hidden; white-space: nowrap; color: #f4a72a; }

/* Download-Abzeichen */
.download { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 30px; }
.schluss .download { justify-content: center; margin-top: 24px; }
.abzeichen { position: relative; display: inline-flex; align-items: center; height: 48px; text-decoration: none; }
.abzeichen img { height: 48px; width: auto; }
/* Das Bild hat oben und unten Rand (29 von 250 px), seitlich keinen: so steht
   das Abzeichen genau 48 px hoch wie das von Apple und bündig am linken Rand. */
.abzeichen .play { height: 62.5px; margin: -7.25px 0; }
.abzeichen-bald { cursor: default; }
.abzeichen-bald img { opacity: 0.8; }
.abzeichen-bald small {
  position: absolute; top: -9px; right: -8px; padding: 3px 7px; border-radius: 999px;
  background: var(--marke); color: var(--auf-akzent); font: 700 11px/1 "Work Sans", sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
}

/* Preis */
/* Einleitung unter der H2: mehr als zwei Zeilen, daher linksbündig in der Lesespalte. */
.warum-einleitung, .abschnitt-einleitung { max-width: 760px; margin: -6px auto 36px; text-align: left; font: 400 17.5px/1.7 "Work Sans", sans-serif; color: var(--r-text); text-wrap: pretty; }
.warum-einleitung strong { font-weight: 600; color: var(--r-kopf); }
.warum { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; text-align: left; }
.warum li { padding: 24px; }
.warum-sym { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--marke); background: var(--akzent-hauch); margin-bottom: 16px; }
.warum-titel { display: block; font: 700 18px/1.3 "Manrope", sans-serif; letter-spacing: -0.015em; color: var(--r-kopf); }
.warum p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--tinte-leise); }
.warum p strong { color: var(--r-kopf); font-weight: 600; }
@media (max-width: 900px) { .warum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .warum { grid-template-columns: 1fr; } }
.preis-abschnitt h2 { margin-bottom: 36px; }
.preise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 980px; margin: 0 auto; text-align: left; align-items: stretch; }
.tarif { position: relative; padding: 28px; display: flex; flex-direction: column; }
.preise .tarif-premium {
  border: 1.5px solid color-mix(in srgb, var(--marke) 50%, transparent);
  background: radial-gradient(ellipse 420px 260px at 100% 0%, rgba(212, 170, 94, 0.18), transparent 70%), var(--r-hell);
}
.tarif-kachel { position: absolute; top: 26px; right: 26px; width: 44px; height: 44px; }
.tarif-name { margin: 0 0 10px; font: 700 18px/1.2 "Manrope", sans-serif; letter-spacing: -0.015em; color: var(--r-kopf); }
.tarif-premium .tarif-name { color: var(--marke); }
.betrag { font: 800 46px/1.05 "Manrope", sans-serif; letter-spacing: -0.035em; }
.betrag small { font: 500 15px/1 "Work Sans", sans-serif; letter-spacing: 0; color: var(--tinte-blass); margin-left: 6px; }
.tarif-zusatz { margin: 8px 0 0; font-size: 14px; color: var(--tinte-leise); }
.liste { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 15px; flex: 1; align-content: start; }
.liste li { display: flex; gap: 10px; }
.liste li::before { content: "✓"; color: var(--marke); font-weight: 700; }
.tarif .knopf { margin-top: 26px; align-self: flex-start; }

/* --------------------------------------------------------------- Fuß */

.fuss { padding: 48px 0 40px; border-top: 1px solid var(--linie); font-size: 13px; color: var(--tinte-blass); }
.fuss .innen { display: grid; gap: 36px; }
.fuss-raster { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 28px; }
.fuss-marke .marke { display: inline-flex; }
.fuss-marke p { margin: 2px 0 0; font-size: 14px; color: var(--tinte-leise); }
.fuss-titel { margin: 0 0 12px; font: 600 11.5px/1.2 "Work Sans", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinte-blass); }
.fuss ul { list-style: none; margin: -12px 0; padding: 0; display: grid; }
.fuss li a, .fuss li span { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; color: var(--tinte-leise); font-size: 14px; font-weight: 500; }
.fuss li a:hover { color: var(--tinte); }
.fuss-unten { display: grid; gap: 8px; padding-top: 22px; border-top: 1px solid var(--linie); }
.fuss-unten p { margin: 0; max-width: 64em; }
@media (max-width: 900px) {
  .fuss-raster { grid-template-columns: repeat(2, 1fr); }
  .fuss-marke { grid-column: 1 / -1; }
}

/* ------------------------------------------------- Kontakt & Rechtsseiten */

.kontakt-raster { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: start; padding-top: 56px; padding-bottom: 80px; }
.kontakt-raster h1 { font-size: clamp(32px, 4.4vw, 46px); margin-bottom: 14px; }
.ueberzeile { margin: 0 0 12px; font: 600 12px/1.2 "Work Sans", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--marke-tief); }
.einleitung { margin: 0; color: var(--tinte-leise); }
.kontakt-wege { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.kontakt-wege li { padding: 14px 16px; border-radius: 14px; background: var(--flaeche); border: 1px solid var(--linie); }
.kontakt-wege strong { display: block; font: 700 15px/1.3 "Manrope", sans-serif; margin-bottom: 2px; }
.kontakt-wege span { color: var(--tinte-leise); font-size: 14px; }
.formular { padding: 26px; border-radius: 20px; background: var(--flaeche); border: 1px solid var(--linie); display: grid; gap: 16px; }
.feld { display: grid; gap: 6px; }
.feld label { font: 600 14px/1.2 "Work Sans", sans-serif; }
.feld input, .feld select, .feld textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linie); background: var(--grund); color: var(--tinte); font: 400 16px/1.4 "Work Sans", sans-serif; }
.feld textarea { min-height: 150px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--marke); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marke) 18%, transparent); }
.feld small { color: var(--tinte-blass); font-size: 13px; }
.honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formular .knopf { justify-self: start; border: 0; cursor: pointer; }
.formular-meldung { margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; }
.formular-meldung[data-art="ok"] { background: color-mix(in srgb, #6e9844 16%, transparent); }
.formular-meldung[data-art="fehler"] { background: var(--marke-hauch); }
.formular-meldung:empty { display: none; }
.formular .klein { margin: 0; font-size: 13px; color: var(--tinte-blass); }

.rechtstext { max-width: 860px; padding: 48px 24px 72px; }
.fehlerseite { max-width: 860px; padding: 64px 24px 88px; }
.fehlerseite h1 { font-size: clamp(34px, 5vw, 52px); letter-spacing: -0.03em; margin: 0 0 14px; }
.fehlerseite .einleitung { margin: 0 0 28px; color: var(--tinte-leise); }
.fehlerseite .fussnote { margin: 24px 0 0; }
.rechtstext h1 { font-size: clamp(30px, 4vw, 42px); margin-bottom: 24px; }
.rechtstext h3 { margin-top: 32px; }
.rechtstext p, .rechtstext li { color: var(--tinte-leise); }
.rechtstext strong { color: var(--tinte); }
.rechtstext { overflow-wrap: break-word; hyphens: auto; }
.rechtstext a { overflow-wrap: anywhere; }
.rechtstext table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 14px 0; }
.rechtstext th, .rechtstext td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.rechtstext th { color: var(--tinte); font-weight: 600; }
.tabelle { overflow-x: auto; }
.zurueck { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 8px; color: var(--marke); text-decoration: none; font-weight: 600; }

/* ---------------------------------------------------------------- Ratgeber */

/* Akzentfarbe je Testteil — dieselben wie in der App (app.css: md-teal, md-secondary …) */
.ton-marke { --akzent: var(--marke); --akzent-tief: var(--marke-tief); }
.ton-bms { --akzent: #637e41; --akzent-tief: #4e6b2f; }
.ton-kff { --akzent: #af572b; --akzent-tief: #99481e; }
.ton-sek { --akzent: #b74a3e; --akzent-tief: #97362b; }
.ton-tv { --akzent: #926c25; --akzent-tief: #865f15; }
[class*="ton-"] { --akzent-hauch: color-mix(in srgb, var(--akzent) 13%, transparent); --akzent-rand: color-mix(in srgb, var(--akzent) 35%, transparent); }

/* Symbole mit Tiefe wie in der App (.icon-glanz): Kachel matt mit leichtem
   Verlauf, Glanzkante oben und farbigem Schatten; der Strich im Verlauf der
   Testteil-Farbe (Verläufe aus VERLAEUFE in landing-bauen.mjs). */
.verlaeufe { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.vl-a-marke { stop-color: #b42537; } .vl-b-marke { stop-color: #63131c; }
.vl-a-bms { stop-color: #89aa5e; } .vl-b-bms { stop-color: #4e6b2f; }
.vl-a-kff { stop-color: #de7945; } .vl-b-kff { stop-color: #99481e; }
.vl-a-sek { stop-color: #d25f53; } .vl-b-sek { stop-color: #8f3128; }
.vl-a-tv { stop-color: #d69d3f; } .vl-b-tv { stop-color: #865f15; }
.ton-marke { --vl: url(#vl-marke); }
.ton-bms { --vl: url(#vl-bms); }
.ton-kff { --vl: url(#vl-kff); }
.ton-sek { --vl: url(#vl-sek); }
.ton-tv { --vl: url(#vl-tv); }
.r-kopf-sym .sym,
.r3 :is(.mv-drei-sym, .erg-u-sym, .na-g-sym, .mw-ksym, .vmb-teil-sym) .sym { stroke: var(--vl, url(#vl-marke)) currentColor; }
.r-kopf-sym .sym-text {
  background: linear-gradient(135deg, color-mix(in srgb, var(--akzent) 75%, #fff), var(--akzent-tief));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.r3 :is(.mv-drei-sym, .erg-u-sym, .na-g-sym, .mw-ksym, .vmb-teil-sym) {
  --g: var(--akzent, var(--marke));
  background: linear-gradient(160deg, color-mix(in srgb, var(--g) 5%, transparent), color-mix(in srgb, var(--g) 20%, transparent)), #fffaf6;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 -1px 0 color-mix(in srgb, var(--g) 10%, transparent), 0 6px 14px -8px color-mix(in srgb, var(--g) 50%, transparent);
}
/* Volle Kacheln (weißes Symbol auf Farbe): Verlauf und Tiefe wie die kräftigen Knöpfe der App. */
.r3 :is(.sw-iv-sym, .kf-k-sym, .sk-k-sym, .erg-n-sym, .na-m-sym) {
  background: linear-gradient(160deg, color-mix(in srgb, var(--akzent) 82%, #fff), var(--akzent-tief));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 6px 14px -8px color-mix(in srgb, var(--akzent) 70%, transparent);
}
.sym { display: block; flex: none; }
.sym-text { font: 800 15px/1 "Manrope", sans-serif; letter-spacing: -0.04em; }

/* Kopfbereich */

/* Raster: Inhaltsverzeichnis links, Text rechts */

.quelle { font-size: 13px; color: var(--tinte-blass) !important; }

/* Faktenkacheln */

/* Schritte */

/* App-Bildschirm neben dem Text */

/* Zeitleiste */

.zeit { display: block; font: 600 12px/1.2 "Work Sans", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akzent, var(--marke)); margin-bottom: 4px; }

/* Karten mit Titel und Text */

/* Städte */

/* Gewichtungsbalken */

/* Fächer */

/* Diagramme */

/* Allergieausweis */

/* Figuren */

.figuren { max-width: 300px; margin: 4px auto 22px; }

/* Wortflüssigkeit groß */

/* SEK */

   

/* Selbst testen */

.frage { margin: 0 0 12px !important; color: var(--tinte) !important; font-weight: 500; line-height: 1.55; }

.wahl { display: flex; gap: 4px; }
.wahl button { padding: 7px 10px; border-radius: 9px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte-leise); font: 500 12.5px/1.2 "Work Sans", sans-serif; cursor: pointer; }
.wahl button.gewaehlt { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }

.loesung { margin-top: 14px; }
.loesung summary { cursor: pointer; font-weight: 600; color: var(--akzent-tief, var(--marke)); }
.loesung[open] summary { margin-bottom: 8px; }
.loesung p, .loesung li { font-size: 15px; }
.loesung ul, .loesung ol { padding-left: 0; list-style: none; display: grid; gap: 6px; }

/* App-Kasten */



@media (max-width: 640px) {
  
  
  
  
  
  
  
  
  
  .aufgabe { padding: 16px; }
  
  .wahl { grid-column: 1 / -1; }
  .wahl button { flex: 1; }
  
  
  
  
  
}

/* ======================================================= Ratgeber (redaktionell)
   Vollbreite Bänder im Wechsel weiß/hell, zentrierte H2, Fließtext 400 mit
   wenigen Fettungen (600), große Zahlen, Textmarker, wenige Rahmen.
   Bausteine und Maße: landing/DESIGN.md. */

@font-face { font-family: "Work Sans"; font-weight: 700; font-display: swap; src: url("/schriften/work-sans-latin-700-normal.woff2") format("woff2"); }

.r3 { background: var(--r-weiss); }
.r3 .ton-kff, .r3.ton-kff { --akzent: #af572b; --akzent-tief: #99481e; }
.r3 .ton-bms, .r3.ton-bms { --akzent: #637e41; --akzent-tief: #4e6b2f; }
.r3 .ton-sek, .r3.ton-sek { --akzent: #b74a3e; --akzent-tief: #97362b; }
.r3 .ton-tv, .r3.ton-tv { --akzent: #926c25; --akzent-tief: #865f15; }
.r3 .ton-marke, .r3.ton-marke { --akzent: var(--marke); --akzent-tief: var(--marke-tief); }
.r3 .sym-text { font: 800 15px/1 "Manrope", sans-serif; letter-spacing: -0.04em; }

/* Mitlaufende Leiste unter dem Seitenkopf */
.r-leiste { position: sticky; top: 60px; z-index: 15; background: var(--r-weiss); border-bottom: 1px solid var(--r-linie); transform: translateY(-110%); opacity: 0; transition: transform 0.25s, opacity 0.25s; margin-bottom: -53px; }
.r-leiste.sichtbar { transform: none; opacity: 1; }
.r-leiste .innen { display: flex; align-items: center; justify-content: space-between; height: 52px; gap: 16px; }
.r-leiste strong { font: 700 15px/1.2 "Manrope", sans-serif; color: var(--r-kopf); }
.r-leiste a { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--akzent); color: var(--auf-akzent); text-decoration: none; font: 600 14px/1 "Work Sans", sans-serif; }

/* Kopf */
.r-kopf { background: var(--r-hell); padding: 64px 0 72px; text-align: center; }
.r-innen { max-width: 860px; margin: 0 auto; padding: 0 24px; }
.r-kopf-sym { color: var(--akzent); display: grid; place-items: center; margin-bottom: 14px; }
.r-kopf-sym .sym-text { font-size: 26px; }
/* Kicker: einmal pro Abschnitt (Startseite: .ueberzeile, gleich gesetzt). */
.r-ueber, .r-band .r-ueber { margin: 0 0 12px; font: 600 12px/1.2 "Work Sans", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--akzent); }
.r-kopf h1 { font: 800 clamp(36px, 5vw, 56px)/1.05 "Manrope", sans-serif; letter-spacing: -0.035em; color: var(--r-kopf); hyphens: auto; overflow-wrap: break-word; }
.r-unter { margin: 18px auto 0; max-width: 620px; font: 400 20px/1.6 "Work Sans", sans-serif; color: var(--r-text); }
.r-unter strong { font-weight: 600; color: var(--r-kopf); }
/* Eckdaten: höchstens vier, in Normalschrift; vier stehen am Handy als 2 × 2. */
.r-eck { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
.r-eck li { display: inline-flex; align-items: center; gap: 7px; font: 600 14px/1.35 "Work Sans", sans-serif; color: var(--r-kopf); text-align: left; }
.r-eck .sym { flex: none; color: var(--akzent); }
.r-aktionen { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.r-knopf { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 26px; border-radius: 999px; background: var(--akzent); color: var(--auf-akzent); text-decoration: none; font: 600 16px/1 "Work Sans", sans-serif; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--akzent) 70%, transparent); }
.r-knopf:hover { background: var(--akzent-tief); }
.r-knopf.leise { background: transparent; color: var(--r-kopf); box-shadow: inset 0 0 0 1.5px var(--r-kopf); }
.r-knopf.leise:hover { background: var(--r-kopf); color: var(--r-weiss); }

/* Bänder */
.r-band { padding: 88px 0; text-align: left; }
.r-band.weiss { background: var(--r-weiss); }
.r-band.grau { background: var(--r-hell); }
.r-band.dunkel { background: #1f1b18; color: #ece1d4; overflow: hidden; }
/* Bordeaux: das eine farbige Band einer Seite (App-Band, Schluss der Startseite). */
.r-band.bordeaux { position: relative; overflow: hidden; color: #fdecec;
  background: radial-gradient(ellipse 760px 460px at 85% 20%, rgba(215, 119, 125, 0.32), transparent 70%), linear-gradient(165deg, #861c29, #54131c); }
.r-spalte { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.r-spalte.breit { max-width: 1040px; }
.r-band h2 { text-align: center; font: 800 clamp(28px, 4vw, 40px)/1.12 "Manrope", sans-serif; letter-spacing: -0.035em; color: var(--r-kopf); margin: 0 0 30px; }
.r-band > .r-spalte > .r-ueber { text-align: center; }
.r-band p, .r-band li { font: 400 17.5px/1.7 "Work Sans", sans-serif; color: var(--r-text); }
.r-band p { margin: 0 0 20px; }
.r-band strong, .r-band b { font-weight: 600; color: var(--r-kopf); }
.r-band a:not([class]) { color: var(--akzent-tief); font-weight: 500; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.r-band mark { background: linear-gradient(transparent 38%, var(--r-marker) 38%, var(--r-marker) 92%, transparent 92%); color: var(--r-kopf); font-weight: 600; padding: 0 3px; border-radius: 3px; }
.r-band h3 { font: 800 20px/1.3 "Manrope", sans-serif; letter-spacing: -0.02em; color: var(--r-kopf); margin: 36px 0 12px; }
.r-lead { font-size: 20px !important; line-height: 1.6 !important; }
.r-band.dunkel h2, .r-band.dunkel strong, .r-band.bordeaux h2, .r-band.bordeaux strong { color: #fff; }
.r-band.dunkel p, .r-band.dunkel li { color: #decfbf; }
.r-band.bordeaux p, .r-band.bordeaux li { color: #f7d6d6; }
.r-band.bordeaux .r-ueber { color: #f9b3b0 !important; }
.r-band.bordeaux .r-haken li::before { color: #f9b3b0; }
.r-band.bordeaux .abzeichen-bald small { background: #fff; color: var(--marke); }
.r-band.bordeaux .r-handy { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 40px 70px -30px rgba(20, 0, 5, 0.75); }

/* Große Zahlen */
.r-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; margin: 40px 0; text-align: center; }
.r-zahlen > div { padding: 28px 16px 24px; }
.r-zahlen b { display: block; font: 800 64px/1 "Manrope", sans-serif; letter-spacing: -0.05em; color: var(--akzent); }
.r-zahlen strong { display: block; margin-top: 10px; font: 700 17px/1.3 "Manrope", sans-serif; }
.r-zahlen span { display: block; margin-top: 4px; font: 400 14.5px/1.5 "Work Sans", sans-serif; color: var(--r-leise); }

/* Infokasten */
/* Hinweis: linksbündig, Symbol als Linie, kompakt (DESIGN.md 2.1). */
.r-info { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start; margin: 28px 0; padding: 18px 22px; border-radius: 16px; background: var(--r-hell); text-align: left; }
.grau .r-info { background: var(--r-weiss); }
.r-info-sym { display: grid; place-items: center; width: 24px; height: 26px; color: var(--akzent); }
.r-info.achtung .r-info-sym { color: var(--r-nein); }
.r-info p { margin: 0 !important; font: 400 16.5px/1.6 "Work Sans", sans-serif !important; color: var(--r-text); }

/* Aufzählung mit Markenzeichen */
.r-punkte { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.r-punkte li { position: relative; padding-left: 26px; }
.r-punkte li::before { content: ""; position: absolute; left: 6px; top: 0.78em; width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); }

/* Schritte */
.r-schritte { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 26px; }
.r-schritte li { display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: start; }
.r-nr { font: 800 46px/0.9 "Manrope", sans-serif; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.6px var(--akzent); }
.r-schritte li > div > strong { display: block; font: 800 20px/1.3 "Manrope", sans-serif; letter-spacing: -0.015em; margin-bottom: 4px; }
.r-schritte p { margin: 0 !important; }

/* Tabelle */
.r-tabelle { overflow-x: auto; margin: 28px 0; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--r-linie); }
.r-tabelle table { width: 100%; border-collapse: collapse; font: 400 16.5px/1.5 "Work Sans", sans-serif; }
.r-tabelle th { text-align: left; padding: 14px 18px; font: 700 12.5px/1.2 "Work Sans", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--r-kopf); background: var(--r-hell); border-bottom: 2px solid var(--akzent); }
.r-tabelle td { padding: 13px 18px; border-top: 1px solid var(--r-linie); color: var(--r-text); vertical-align: top; }
.r-tabelle td:first-child { font-weight: 600; color: var(--r-kopf); }
.r-tabelle tfoot td { font-weight: 700; color: var(--r-kopf); background: var(--r-hell); }
/* Handy: Tabellen ab drei Spalten als gestapelte Karten (tabelle() setzt .stapeln und data-label). */
@media (max-width: 640px) {
  .r-tabelle.stapeln { overflow: visible; border-radius: 0; box-shadow: none; }
  .r-tabelle.stapeln :is(table, tbody, tfoot, tr, td) { display: block; }
  .r-tabelle.stapeln thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .r-tabelle.stapeln tr { padding: 14px 16px; border: 1px solid var(--r-linie); border-radius: 16px; background: var(--r-hell); }
  .grau .r-tabelle.stapeln tr { background: var(--r-weiss); }
  .r-tabelle.stapeln tr + tr, .r-tabelle.stapeln tfoot tr { margin-top: 10px; }
  /* Zeile als Karte: Titel oben, darunter die Werte als „Bezeichnung: Wert“ im Fluss — kurze nebeneinander, lange Texte umbrechen. */
  .r-tabelle.stapeln tr { display: flex; flex-wrap: wrap; gap: 2px 18px; }
  .r-tabelle.stapeln td, .r-tabelle.stapeln tfoot td { display: block; flex: 0 1 auto; max-width: 100%; padding: 0; border: 0; background: none; font-size: 16px; line-height: 1.55; font-weight: 400; color: var(--r-text); }
  .r-tabelle.stapeln td::before { content: attr(data-label) ": "; font: 400 14.5px/1.55 "Work Sans", sans-serif; color: var(--r-leise); }
  .r-tabelle.stapeln td:first-child, .r-tabelle.stapeln tfoot td:first-child { display: block; flex: 0 0 100%; padding: 0 0 4px; font: 700 17px/1.35 "Manrope", sans-serif; letter-spacing: -0.01em; color: var(--r-kopf); }
  .r-tabelle.stapeln td:first-child::before { content: none; }
  .r-tabelle.stapeln td:first-child small, .r-tabelle.stapeln td:first-child .rx-t-lang { display: block; margin-top: 2px; font: 400 14px/1.4 "Work Sans", sans-serif; letter-spacing: 0; color: var(--r-leise); }
  .r-tabelle.stapeln td:first-child br { display: none; }
  .r-tabelle.stapeln td:empty { display: none; }
  .r-tabelle.stapeln tfoot tr { background: color-mix(in srgb, var(--akzent) 7%, var(--r-weiss)); }
  .r-tabelle.stapeln tfoot td:not(:first-child) { font-weight: 600; color: var(--r-kopf); }
}


/* Beispiel wie im Testheft */
.r-testblatt { margin: 30px 0; padding: 30px 28px; border-radius: 6px; background: #fff; color: #1d1916; box-shadow: 0 1px 0 #e8dccb, 0 22px 50px -30px rgba(67, 45, 23, 0.45); font-family: "Work Sans", sans-serif; }
.r-testblatt .tb-anw { margin: 0 0 18px !important; font: 400 14.5px/1.5 "Work Sans", sans-serif !important; color: #4e4237 !important; }
.r-testblatt .tb-folge { display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center; font: 600 26px/1.2 "Work Sans", sans-serif; letter-spacing: 0.02em; margin: 6px 0 22px; font-variant-numeric: tabular-nums; }
.r-testblatt .tb-opt { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; text-align: center; }
.r-testblatt .tb-opt li { font: 400 15px/1.4 "Work Sans", sans-serif !important; color: #1d1916 !important; padding: 8px 4px; border: 1px solid #ded1bf; border-radius: 4px; }
.r-testblatt .tb-opt b { display: block; font-weight: 700; font-size: 13px; color: #776c61; }
.r-loesung-box { margin: 18px 0 0; padding: 24px 24px 18px; }

/* Musterkarten */
.r-muster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 10px 0 0; }
.r-muster > div { padding: 24px; }
.r-muster > div > strong { font: 700 18px/1.3 "Manrope", sans-serif; letter-spacing: -0.015em; }
.r-muster p { margin: 8px 0 0 !important; font-size: 16px !important; line-height: 1.6 !important; }

/* Karte (DESIGN.md 2.2): eine Fläche für alle Inhaltskarten — hell auf weißem
   Band, weiß auf hellem Band, feiner Rand, kein farbiger Oberrand, kein großer Schatten. */
:is(.r-muster > div, .r-zahlen > div, .r-loesung-box, .warum li, .blick a, .tarif, .r-kachel) {
  border-radius: 20px; background: var(--r-hell); border: 1px solid var(--r-linie); box-shadow: var(--karte-schatten);
}
.grau :is(.r-muster > div, .r-zahlen > div, .r-loesung-box, .warum li, .blick a, .tarif, .r-kachel) { background: var(--r-weiss); }

/* App-Band */
.r-app { padding: 72px 0; }
.r-app-raster { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: center; }
.r-app h2 { text-align: left !important; }
.r-app .r-ueber { text-align: left; color: #e99b93; }
.r-haken { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.r-haken li { position: relative; padding-left: 30px; }
.r-haken li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 700; color: #e99b93; }
/* Bildschirm im Handyrahmen, oben zugeschnitten: fester Rahmen, damit der Inhalt lesbar groß bleibt. */
.r-handy { height: 560px; margin: 0; padding: 8px; border-radius: 40px; background: #0b0a09; box-shadow: 0 0 0 1px #4a4440, 0 40px 70px -30px rgba(0, 0, 0, 0.7); }
.r-handy img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 32px; }
.r-app .download { margin-top: 0; }

/* FAQ */
.r-faq { border-top: 1px solid var(--r-linie); text-align: left; }
.r-faq details { border-bottom: 1px solid var(--r-linie); }
.r-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 4px; font: 700 18px/1.4 "Manrope", sans-serif; letter-spacing: -0.01em; color: var(--r-kopf); }
.r-faq summary::-webkit-details-marker { display: none; }
.r-faq summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--akzent-hauch) center / 14px no-repeat; background-image: linear-gradient(var(--akzent), var(--akzent)), linear-gradient(var(--akzent), var(--akzent)); background-size: 13px 2px, 2px 13px; background-position: center; transition: transform 0.2s; }
.r-faq details[open] summary::after { transform: rotate(45deg); }
.r-faq details p { margin: -6px 4px 22px !important; font: 400 17.5px/1.7 "Work Sans", sans-serif; color: var(--r-text); }

/* Quellen und Autoren */
.r-quellen { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.r-quellen li { display: grid; gap: 0; padding: 4px 0 12px; border-bottom: 1px solid var(--r-linie); }
.r-quellen a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 600 17px/1.4 "Work Sans", sans-serif; color: var(--r-kopf); text-decoration: none; }
.r-quellen a:hover { color: var(--akzent-tief); text-decoration: underline; }
.r-quellen a .sym { transform: rotate(-45deg); color: var(--akzent); }
.r-quellen span { font: 400 15.5px/1.5 "Work Sans", sans-serif; color: var(--r-leise); }
.r-abgrenzung { font-weight: 400 !important; margin: 24px 0 0 !important; font-size: 14.5px !important; line-height: 1.6 !important; color: var(--r-leise) !important; }

/* ---------------------------------------------------------- Trainer (App-Optik) */
.trainer { margin: 34px 0 0; padding: 0; border-radius: 28px; background: #fcf8f2; color: #2c251f; box-shadow: 0 2px 6px rgba(82, 60, 36, 0.07), 0 26px 52px -24px rgba(82, 60, 36, 0.28); overflow: hidden; overflow: clip; scroll-margin-top: calc(var(--r-oben, 113px) + 12px); font-family: "Work Sans", sans-serif; --t-flaeche: #fffdfa; --t-flaeche2: #f6f0e5; --t-ink: #2c251f; --t-soft: #605243; --t-muted: #746a60; --t-linie: #eae0d0; }
.t-modus { display: flex; gap: 6px; padding: 14px 14px 0; }
.t-modus button { flex: 1; height: 40px; border-radius: 12px; border: 0; background: var(--t-flaeche2); color: var(--t-soft); font: 600 14px/1 "Work Sans", sans-serif; cursor: pointer; }
.t-modus button[aria-pressed="true"] { background: var(--akzent); color: var(--auf-akzent); }
.t-kopf { display: flex; align-items: center; gap: 12px; padding: 16px 20px 6px; font-size: 13px; }
.t-titel { font: 700 12px/1 "Work Sans", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--akzent); }
.t-stand { color: var(--t-muted); }
.t-zaehler { margin-left: auto; font-weight: 600; color: var(--t-soft); font-variant-numeric: tabular-nums; }
.t-uhr { padding: 6px 10px; border-radius: 9px; background: var(--t-flaeche2); font: 700 15px/1 "Work Sans", sans-serif; font-variant-numeric: tabular-nums; color: var(--t-ink); }
.t-uhr.knapp { background: var(--t-gold); color: #fff; }
.t-hinweis { margin: 8px 20px 0 !important; padding: 10px 14px; border-radius: 12px; background: var(--t-gold); color: #fff !important; font: 600 14px/1.4 "Work Sans", sans-serif !important; }
.t-aufgaben { list-style: none; margin: 0; padding: 0 0 6px; }
.trainer:not(.aktiv) .t-modus, .trainer:not(.aktiv) .t-leiste, .trainer:not(.aktiv) .t-kopf .t-zaehler { display: none; }
.aufgabe { padding: 14px 20px 20px; }
.trainer:not(.aktiv) .aufgabe + .aufgabe, .trainer.fertig .aufgabe + .aufgabe { border-top: 1px solid var(--t-linie); }
.a-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.a-nr { font: 600 12px/1 "Work Sans", sans-serif; color: var(--t-muted); }
.trainer.aktiv:not(.fertig) .a-nr { display: none; }
.a-frage { display: block; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: 600 14px/1.4 "Work Sans", sans-serif; color: var(--akzent-tief); }
.a-regel { margin: 6px 0 0 !important; font: 400 14px/1.5 "Work Sans", sans-serif !important; color: var(--t-soft) !important; }
.trainer:not(.aktiv) .a-regel { display: block; }
.zahlenfeld { display: flex; justify-content: center; flex-wrap: nowrap; gap: clamp(8px, 2vw, 16px); margin: 14px 0 0; padding: 20px 12px; border-radius: 20px; background: var(--t-flaeche); box-shadow: 0 1px 2px rgba(82, 60, 36, 0.05), 0 10px 26px -16px rgba(82, 60, 36, 0.18); font: 700 clamp(17px, 3.2vw, 28px)/1 "Work Sans", sans-serif; font-variant-numeric: tabular-nums; color: var(--t-ink); white-space: nowrap; overflow-x: auto; }
.zahlenfeld .frag { color: var(--t-muted); }
.a-optionen { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.a-option { width: 100%; display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 20px; border: 2px solid transparent; background: var(--t-flaeche); box-shadow: 0 1px 2px rgba(82, 60, 36, 0.05), 0 10px 26px -16px rgba(82, 60, 36, 0.18); text-align: left; cursor: pointer; font: 400 17px/1.4 "Work Sans", sans-serif; color: var(--t-ink); transition: transform 0.15s, opacity 0.2s; }
.a-option:active { transform: scale(0.99); }
.a-option:disabled { cursor: default; }
.a-buchstabe { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--t-flaeche2); color: var(--t-soft); font: 700 13px/1 "Work Sans", sans-serif; }
.a-text { padding-top: 3px; }
.a-option.gewaehlt { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 9%, var(--t-flaeche)); }
.a-option.gewaehlt .a-buchstabe { background: var(--akzent); color: var(--auf-akzent); }
.a-option.richtig { border-color: var(--r-ok, #409952); background: color-mix(in srgb, #409952 14%, var(--t-flaeche)); }
.a-option.richtig .a-buchstabe { background: #409952; color: #fff; font-size: 0; }
.a-option.richtig .a-buchstabe::after { content: "✓"; font-size: 15px; }
.a-option.falsch { border-color: #cf2d1c; background: color-mix(in srgb, #cf2d1c 12%, var(--t-flaeche)); }
.a-option.falsch .a-buchstabe { background: #cf2d1c; color: #fff; font-size: 0; }
.a-option.falsch .a-buchstabe::after { content: "✕"; font-size: 14px; }
.a-option.blass { opacity: 0.55; }
.a-aufloesung { margin-top: 14px; padding: 16px; border-radius: 20px; background: var(--t-flaeche); box-shadow: 0 1px 2px rgba(82, 60, 36, 0.05), 0 10px 26px -16px rgba(82, 60, 36, 0.18); }
.trainer.aktiv .aufgabe:not(.aufgeloest) .a-aufloesung { display: none; }
.a-urteil { display: flex; align-items: center; gap: 8px; margin: 0 !important; font: 700 17px/1.3 "Work Sans", sans-serif !important; color: var(--t-ink) !important; }
.a-urteil strong { color: var(--t-ink) !important; font-weight: 700 !important; }
.a-marke { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 13px; }
.a-marke.ok { background: #409952; } .a-marke.ok::after { content: "✓"; }
.a-marke.nein { background: #cf2d1c; } .a-marke.nein::after { content: "✕"; }
.a-zeit { margin: 6px 0 0 !important; font: 400 13px/1.4 "Work Sans", sans-serif !important; color: var(--t-muted) !important; font-variant-numeric: tabular-nums; }
.a-zeit:empty { display: none; }
.a-weg summary { margin-top: 10px; cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; font: 600 14px/1 "Work Sans", sans-serif; color: var(--akzent-tief); }
.a-weg summary::-webkit-details-marker { display: none; }
.a-weg summary::after { content: "⌄"; font-size: 16px; transform: translateY(-3px); }
.a-weg[open] summary::after { transform: rotate(180deg) translateY(-2px); }
.a-weg-inhalt { margin-top: 14px; }
.a-erklaerung { margin: 14px 0 0 !important; font: 400 15px/1.55 "Work Sans", sans-serif !important; color: var(--t-soft) !important; }
.t-leiste { position: sticky; bottom: 0; padding: 12px 16px 16px; background: color-mix(in srgb, var(--t-flaeche) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 -1px 0 var(--t-linie); }
.trainer.fertig .t-leiste { display: none; }
.t-navi { list-style: none; margin: 0 0 10px; padding: 0; display: none; gap: 6px; overflow-x: auto; }
.trainer.im-test .t-navi { display: flex; }
.t-navi button { width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--t-flaeche2); color: var(--t-soft); font: 600 13px/1 "Work Sans", sans-serif; cursor: pointer; }
.t-navi button.beantwortet { background: color-mix(in srgb, var(--akzent) 22%, var(--t-flaeche)); color: var(--t-ink); }
.t-navi button.aktuell { box-shadow: inset 0 0 0 2px var(--akzent); }
.t-knoepfe { display: flex; gap: 8px; }
.t-zurueck { display: none; height: 52px; padding: 0 18px; border-radius: 16px; border: 0; background: var(--t-flaeche2); color: var(--t-ink); font: 600 16px/1 "Work Sans", sans-serif; cursor: pointer; }
.trainer.im-test .t-zurueck { display: block; }
.t-zurueck:disabled { opacity: 0.45; }
.t-knopf { flex: 1; height: 52px !important; border: 0; border-radius: 16px !important; background: var(--akzent) !important; color: var(--auf-akzent); font: 600 16px/1 "Work Sans", sans-serif !important; cursor: pointer; }
.t-knopf:disabled { background: color-mix(in srgb, var(--akzent) 35%, var(--t-flaeche)) !important; cursor: default; }
.t-ergebnis { margin: 12px 16px 6px; padding: 24px; border-radius: 22px; background: var(--t-flaeche); text-align: center; }
.e-kopf { margin: 0 !important; font: 700 12px/1 "Work Sans", sans-serif !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--akzent) !important; }
.e-wert { margin: 10px 0 0 !important; font: 600 20px/1.2 "Work Sans", sans-serif !important; color: var(--t-ink) !important; }
.e-wert b { font: 800 54px/1 "Manrope", sans-serif; color: var(--t-ink) !important; }
.e-zeit, .e-text { margin: 8px 0 0 !important; font: 400 14.5px/1.5 "Work Sans", sans-serif !important; color: var(--t-muted) !important; }
.e-liste { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.trainer .e-liste a, .e-liste a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #fff; text-decoration: none; font: 700 13px/1 "Work Sans", sans-serif; }
.e-liste .ok a { background: #409952; } .e-liste .nein a { background: #cf2d1c; }
.r-band .trainer .e-liste a.e-nr { color: #fff; text-decoration: none; font-weight: 700; }
.e-knoepfe { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.e-knoepfe .knopf { border: 0; cursor: pointer; }
.e-knoepfe .knopf-leise { border: 1px solid var(--t-linie); color: var(--t-ink); }

/* Zahlenfolgen-Diagramm (wie in der App) */
.zfd { display: block; width: 100%; height: auto; }
.zfd-muster { margin: 0 0 10px !important; text-align: center; font: 700 13px/1.3 "Work Sans", sans-serif !important; color: var(--akzent-tief) !important; }
.zfd .zfd-ak { color: var(--akzent); }

.zfd .zfd-grund { fill: var(--t-flaeche, var(--r-weiss)); stroke: var(--t-flaeche, var(--r-weiss)); }

.zfd .zfd-zahl { fill: var(--t-ink, var(--r-kopf)); font-variant-numeric: tabular-nums; }
.zfd .zfd-gesucht { fill: var(--akzent-tief); font-variant-numeric: tabular-nums; }
.zfs { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.zfs li { display: flex; align-items: baseline; gap: 12px; padding: 7px 12px; border-radius: 12px; background: var(--t-flaeche2, var(--r-hell)); font: 400 13.5px/1.4 "Work Sans", sans-serif !important; }
.zfs li.gesucht { background: color-mix(in srgb, var(--akzent) 14%, var(--t-flaeche, var(--r-weiss))); }
.zfs span { width: 56px; flex: none; font-size: 11.5px; font-weight: 600; color: var(--t-muted, var(--r-leise)); }
.zfs b { font-weight: 600; color: var(--t-ink, var(--r-kopf)); font-variant-numeric: tabular-nums; }
.zfs em { font-style: normal; font-size: 12px; color: var(--t-muted, var(--r-leise)); }

@media (max-width: 760px) {
  .r-kopf { padding: 40px 0 48px; }
  .r-band, section { padding: 60px 0; }
  .r-kopf h1 { font-size: 36px; }
  .r-band h2, h2 { font-size: 29px; margin-bottom: 24px; }
  .r-band h3 { font-size: 18px; }
  .r-band p, .r-band li, .r-faq details p, .warum-einleitung, .abschnitt-einleitung { font-size: 17px; line-height: 1.65; }
  .r-lead, .r-unter { font-size: 18px !important; line-height: 1.55 !important; }
  .r-eck { gap: 8px 16px; }
  .r-eck:has(> li:nth-child(4)) { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: center; gap: 10px 18px; }
  .r-eck li { font-size: 13.5px; }
  .r-zahlen { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
  .r-zahlen > div { padding: 18px 6px; border-radius: 16px; }
  .r-zahlen b { font-size: 40px; }
  .r-zahlen strong { font-size: 13px; }
  .r-info { gap: 12px; padding: 16px 18px; }
  .r-muster { grid-template-columns: 1fr; }
  .r-muster > div { padding: 20px; }
  .r-app { padding: 60px 0; }
  .r-app-raster { grid-template-columns: 1fr; gap: 36px; }
  .r-handy { order: -1; width: 240px; height: 420px; margin: 0 auto; border-radius: 34px; }
  .r-handy img { border-radius: 27px; }
  .r-schritte li { grid-template-columns: 52px 1fr; gap: 12px; }
  .r-nr { font-size: 36px; }
  .r-testblatt { padding: 22px 14px; }
  .r-testblatt .tb-folge { font-size: 20px; gap: 4px 14px; }
  .r-testblatt .tb-opt { grid-template-columns: repeat(2, 1fr); }
  .r-leiste strong { font-size: 14px; }
  .trainer { margin-left: -12px; margin-right: -12px; border-radius: 22px; }
  .aufgabe { padding: 12px 14px 16px; }
}

/* ------------------------------------------------------- Trefferflächen
   Apple verlangt mindestens 44 × 44 pt zum Tippen. Kleine, frei stehende Links
   und Knöpfe bekommen eine unsichtbar vergrößerte Fläche (::before), das
   Aussehen bleibt gleich. Links mitten im Fließtext sind ausgenommen. */
:is(.r-krumen a, .r-leiste a, .gruppe h3 a, .fussnote a, .kontakt-wege a, .r-tabelle a, .a-frage, .sw-punkt, .sw-oben a,
  .ma-link, .tt-teil a, .tt-ort-link, .bf-f-name a, .kf-f-text a, .kf-kachel a, .sk-kachel a, .m27-links a, .erg-ort a,
  .mst-bname, .gw-uni a, .na-uni-links a, .gmr-g-link, .wfl-k-legende a, .bch-l-name a, .bmm-legende a, .emr-sek-link,
  .rx-weg summary, .wf-mischen, .r-punkte a) { position: relative; }
:is(.r-krumen a, .r-leiste a, .gruppe h3 a, .fussnote a, .kontakt-wege a, .r-tabelle a, .a-frage, .sw-punkt, .sw-oben a,
  .ma-link, .tt-teil a, .tt-ort-link, .bf-f-name a, .kf-f-text a, .kf-kachel a, .sk-kachel a, .m27-links a, .erg-ort a,
  .mst-bname, .gw-uni a, .na-uni-links a, .gmr-g-link, .wfl-k-legende a, .bch-l-name a, .bmm-legende a, .emr-sek-link,
  .rx-weg summary, .wf-mischen, .r-punkte a)::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
}

/* -------------------------------------------------------------- Kleiner */

@media (max-width: 900px) {
  .buehne .innen { grid-template-columns: 1fr; gap: 36px; }
  .buehne-bild { max-width: 520px; width: 100%; margin: 0 auto; }
  .kontakt-raster { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .kopf .knopf, .kopf nav a:not(.immer) { display: none; }
  .kopf nav { gap: 16px; }
  .buehne { padding: 36px 0 52px; }
  
  .kennzahlen div { padding-right: 12px; }
  .kennzahlen div + div { padding-left: 12px; }
  .kennzahlen dd { font-size: 17px; }
  .buehne-bild { height: 500px; }
  .sonne { width: min(420px, 100%); }
  .geraet-vorne { width: 190px; margin-left: -95px; top: 70px; left: 72%; }
  .tablet { width: 250px; top: 30px; left: 2%; padding: 9px; border-radius: 26px; }
  .tablet img { border-radius: 17px; }
  .plakette-unten { bottom: 40px; left: 6px; }
  .preise { grid-template-columns: 1fr; }
  .preise .tarif-premium { order: -1; }
  .tarif { padding: 24px; }
  .tarif .knopf { align-self: stretch; }
  .formular { padding: 20px; }
  .formular .knopf { justify-self: stretch; }
}

/* Brotkrumen im neuen Aufbau */
.r-krumen { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding-top: 18px; padding-bottom: 0; font: 400 13px/1.4 "Work Sans", sans-serif; color: var(--r-leise); background: var(--r-hell); max-width: none; }
.r-krumen a { color: var(--r-leise); text-decoration: none; }
.r-krumen a:hover { color: var(--r-kopf); text-decoration: underline; }
.r-krumen i { font-style: normal; opacity: 0.6; }
.r-stand::before { content: "·"; margin: 0 8px 0 4px; opacity: 0.6; }
@media (max-width: 640px) {
  .r-stand { flex-basis: 100%; text-align: center; }
  .r-stand::before { content: none; }
}
.r3 .r-krumen + main .r-kopf { padding-top: 40px; }

/* Trainer: BMS-Fragen (Fragetext groß wie in der App) */
.a-thema { margin: 0 0 6px !important; font: 600 11.5px/1.2 "Work Sans", sans-serif !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--akzent-tief) !important; }
.a-stamm { margin: 0 !important; font: 700 19px/1.4 "Work Sans", sans-serif !important; color: var(--t-ink) !important; }

.trainer .aufgabe > .a-erklaerung, .a-weg-inhalt .a-erklaerung:first-child { margin-top: 0 !important; }

/* Beispielaufgabe wie in der App: Blatt (Text, Tabelle, Abbildung), Frage frei darunter, gleich groß */
.blatt-beispiel .aufgabe { padding: 18px 20px 20px; }
.b-gruppe { margin: 0 0 12px !important; font: 600 11.5px/1.2 "Work Sans", sans-serif !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-muted) !important; }
.b-blatt { padding: 16px; border-radius: 20px; background: var(--t-flaeche); box-shadow: 0 0 0 1px var(--t-linie), 0 10px 26px -18px rgba(82, 60, 36, 0.22); }
.b-titel { margin: 0 0 8px !important; font: 700 17px/1.4 "Work Sans", sans-serif !important; color: var(--t-ink) !important; }
.b-text { margin: 0 !important; font: 400 17px/1.55 "Work Sans", sans-serif !important; color: var(--t-ink) !important; }
.b-text + .b-text { margin-top: 12px !important; }
.b-frage { margin: 18px 0 0 !important; font: 600 17px/1.45 "Work Sans", sans-serif !important; color: var(--t-ink) !important; }
.b-frage u { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.b-aussagen { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.b-aussagen li { display: grid; grid-template-columns: 2.2rem 1fr; font: 400 17px/1.45 "Work Sans", sans-serif; color: var(--t-ink); }
.b-aussagen li span:first-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.b-abbildung { margin: 14px 0 0; padding: 8px; border-radius: 12px; background: #fff; }
.b-blatt > .b-abbildung:first-child { margin-top: 0; }
.b-abbildung svg { display: block; width: 100%; height: auto; }
.b-tabelle { margin: 14px 0 0; overflow-x: auto; }
.b-tabelle table { width: 100%; border-collapse: collapse; font: 400 15px/1.4 "Work Sans", sans-serif; font-variant-numeric: tabular-nums; color: var(--t-ink); }
.b-tabelle th { padding: 0 8px 8px; font: 600 12.5px/1.25 "Work Sans", sans-serif; color: var(--t-muted); text-align: right; vertical-align: bottom; }
.b-tabelle th:first-child, .b-tabelle td:first-child { text-align: left; padding-left: 0; }
.b-tabelle td { padding: 9px 8px; border-top: 1px solid var(--t-linie); text-align: right; }
.b-tabelle td:first-child { font-weight: 600; white-space: nowrap; }
.b-werte th { padding: 10px 12px 10px 0; text-align: left; vertical-align: middle; border-top: 1px solid var(--t-linie); }
.b-werte tr:first-child th, .b-werte tr:first-child td { border-top: 0; }
.b-werte td { font-weight: 600; font-size: 17px; }
.b-werte td:first-child { text-align: right; padding-left: 8px; }
.b-alter { margin: 0 0 8px !important; font: 600 13px/1.2 "Work Sans", sans-serif !important; color: var(--t-muted) !important; }
.b-faelle { padding: 0; }
.b-fall { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0 10px; padding: 11px 16px; border-top: 1px solid var(--t-linie); font: 400 17px/1.4 "Work Sans", sans-serif; color: var(--t-ink); }
.b-fall:first-child { border-top: 0; }
.b-fall strong { font-weight: 700; overflow-wrap: anywhere; }
.b-ganz { white-space: nowrap; }
.blatt-beispiel + p { margin-top: 22px; }

/* Illustrationen (Open Doodles, CC0): im Seitenkopf statt des Symbols und über Abschnitten der Startseite */
.r-kopf-bild { display: block; height: 210px; width: auto; max-width: 82%; margin: -12px auto 20px; }
.abschnitt-bild { display: block; height: 190px; width: auto; max-width: 82%; margin: 0 auto 22px; }
@media (max-width: 640px) {
  .r-kopf-bild { height: 150px; margin-top: -8px; }
  .abschnitt-bild { height: 140px; }
}
@media (max-width: 640px) {
  .blatt-beispiel .aufgabe { padding: 14px 12px 16px; }
  .b-blatt { padding: 14px; }
  .b-faelle { padding: 0; }
  .b-fall { grid-template-columns: 5.75rem 1fr; padding: 10px 14px; }
}

/* Ratgeber-Übersicht */
/* Zwischenüberschrift über einem Kachel-Raster (Ratgeber-Übersicht, Startseite) */
.r-gruppe, .r-band .r-gruppe { margin: 56px 0 18px; font: 800 20px/1.3 "Manrope", sans-serif; letter-spacing: -0.02em; color: var(--r-kopf); text-align: left; }
h2 + .r-gruppe, .r-band h2 + .r-gruppe { margin-top: 0; }

/* -------------------------------------------- Trainer-Kern: Ergänzungen (Widget-Wünsche)
   Gemeinsame Variablen auch außerhalb von .trainer (z. B. Rechner: class="t-vars"),
   Richtig/Falsch als Variablen mit hellerem Ton im Dunkelmodus, Höhe der klebenden
   Leisten, Handy-Kopfzeile, Kontrast der Akzentknöpfe im Dunkelmodus. */
.r3 { --r-oben: 113px; }

.trainer { --t-ok: #368347; --t-nein: #cf2d1c; --t-auf-akzent: #fff; --t-gold: #926c25; }
.r3 .ton-mf, .r3.ton-mf { --akzent: #926c25; --akzent-tief: #865f15; }
.a-option.richtig { border-color: var(--t-ok); background: color-mix(in srgb, var(--t-ok) 14%, var(--t-flaeche)); }
.a-option.richtig .a-buchstabe { background: var(--t-ok); }
.a-option.falsch { border-color: var(--t-nein); background: color-mix(in srgb, var(--t-nein) 12%, var(--t-flaeche)); }
.a-option.falsch .a-buchstabe { background: var(--t-nein); }
.a-marke.ok { background: var(--t-ok); } .a-marke.nein { background: var(--t-nein); }
/* Die globale section-Regel der Startseite gilt nicht in Widgets */
.r3 .trainer section, .r3 [data-widget] section { padding: 0; text-align: inherit; }
/* Auflösung: ohne JS steht die Lösung nur im <details> */
.a-urteil:empty { display: none; }
.trainer.aktiv .a-loesung-kopf { display: none; }
.a-loesung-kopf { margin: 0 0 10px !important; font: 400 15px/1.5 "Work Sans", sans-serif !important; color: var(--t-ink) !important; }
.a-zeit { margin-top: 8px !important; }
.a-weg .w-auf { display: none; }
.a-weg[open] .w-zu { display: none; }
.a-weg[open] .w-auf { display: inline; }

.trainer.aktiv:not(.fertig) .a-kopf:not(:has(.a-badge)) { display: none; }
/* Kopfzeile am Handy: Titel eigene Zeile, Stand/Zähler/Uhr ohne Umbruch */
.t-stand, .t-zaehler, .t-uhr { white-space: nowrap; }
@media (max-width: 560px) {
  .t-kopf { flex-wrap: wrap; row-gap: 4px; padding: 14px 16px 6px; }
  .t-titel { flex-basis: 100%; }
  .t-navi { flex-wrap: wrap; overflow: visible; }
  .t-navi button { width: 32px; height: 32px; }
}

/* ------------------------------------------- Druckzustand und Bewegung
   Apple: Jeder eigene Knopf braucht einen sichtbaren Druckzustand, und
   Bewegung muss sich abschalten lassen („Bewegung reduzieren“). */
.knopf, .r-knopf, .r-leiste a, .abzeichen { transition: transform 0.12s, background-color 0.15s; }
.knopf:not([aria-disabled="true"]):active, .r-knopf:active, .r-leiste a:active, .abzeichen:not(.abzeichen-bald):active { transform: scale(0.97); }
.r-kachel:active, .blick a:active { transform: scale(0.98); }
.r-faq summary:active, .kopf nav a:active, .fuss li a:active { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ------------------------------------------------------ Startseite, neu */

/* Vorteile unter den Abzeichen: drei kurze Zusagen mit Haken. */
.vorteile { list-style: none; margin: 32px 0 0; padding: 22px 0 0; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14.5px; font-weight: 500; color: var(--tinte-leise); }
.vorteile li { display: flex; align-items: center; gap: 8px; }
.vorteile li::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--marke-hauch) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%2374222b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }


/* Auf einen Blick als Steckbrief: Kalenderblatt links, Liste mit Haarlinien rechts. */
.steckbrief { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0; max-width: 960px; margin: 0 auto; text-align: left;
  background: var(--r-weiss, #fdfbf8); border: 1px solid var(--linie); border-radius: 24px; overflow: hidden; box-shadow: 0 1px 2px rgba(67, 45, 23, 0.05); }
.sb-blatt { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 40px 34px; text-decoration: none; color: #fff;
  background: radial-gradient(circle at 30% 20%, #b42537 0%, transparent 60%), linear-gradient(160deg, #94202e, #63131c); }
/* Zwei Ringe oben wie an einem Abreißkalender. */
.sb-blatt::before, .sb-blatt::after { content: ""; position: absolute; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--r-weiss, #fdfbf8); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.25); }
.sb-blatt::before { left: 34px; } .sb-blatt::after { left: 56px; }
.sb-monat { font: 600 13px/1 "Work Sans", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #fbc7c0; }
.sb-tag { display: block; margin: 10px 0 6px; font: 800 clamp(64px, 8vw, 88px)/0.95 "Manrope", sans-serif; letter-spacing: -0.05em; color: #fff; }
.sb-geplant { font-size: 14px; color: #fbd7d7; }
.sb-noch { align-self: flex-start; margin-top: 22px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font: 600 13.5px/1 "Work Sans", sans-serif; color: #fff; }
.sb-liste { margin: 0; padding: 8px 32px; }
.sb-liste > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: baseline; gap: 16px; border-bottom: 1px solid var(--linie); }
.sb-liste > div:last-child { border-bottom: 0; }
.sb-liste dt { padding: 20px 0; font: 600 11.5px/1.2 "Work Sans", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinte-blass); }
.sb-liste dd { margin: 0; }
.sb-liste a { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 17px 28px 17px 0; text-decoration: none; }
.sb-liste strong { font: 800 21px/1.2 "Manrope", sans-serif; letter-spacing: -0.02em; color: var(--tinte); }
.sb-liste span { font-size: 14.5px; line-height: 1.45; color: var(--tinte-leise); }
.sb-liste i { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font: 400 22px/1 "Work Sans", sans-serif; font-style: normal; color: var(--tinte-blass); transition: transform 0.15s, color 0.15s; }
.sb-liste a:hover strong, .sb-liste a:hover i { color: var(--marke); }
.sb-liste a:hover i { transform: translate(3px, -50%); }
.sb-kurve { width: 92px; height: 26px; color: var(--marke); overflow: visible; }
.sb-kurve text { font: 600 8px "Work Sans", sans-serif; fill: var(--tinte-blass); }
.blick-abschnitt .fussnote { max-width: 960px; margin-left: auto; margin-right: auto; }
.blick-abschnitt .fussnote a { color: var(--tinte-leise); }
@media (max-width: 760px) {
  .steckbrief { grid-template-columns: 1fr; }
  .sb-blatt { padding: 40px 24px 26px; }
  .sb-liste { padding: 4px 20px; }
  .sb-liste > div { grid-template-columns: 1fr; gap: 0; }
  .sb-liste dt { padding: 16px 0 0; }
  .sb-liste a { padding: 4px 26px 14px 0; }
  .sb-kurve { display: none; }
}

/* Ablauf des Testtags: eine Zeile je Aufgabengruppe, Zeit als Balken. */
.ablauf { list-style: none; margin: 0 auto; padding: 0; max-width: 860px; text-align: left; border-top: 1px solid var(--linie); }
.ablauf li { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(120px, 0.6fr) 92px; align-items: center; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--linie); }
.ablauf-nr { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--marke-hauch); color: var(--marke); font: 800 14px/1 "Manrope", sans-serif; }
.ablauf-pause .ablauf-nr { background: none; }
.ablauf-name { font: 700 16px/1.3 "Manrope", sans-serif; letter-spacing: -0.01em; text-decoration: none; }
a.ablauf-name:hover { color: var(--marke); }
.ablauf-name small { display: block; margin-top: 2px; font: 500 13px/1.3 "Work Sans", sans-serif; letter-spacing: 0; color: var(--tinte-blass); }
.ablauf-pause .ablauf-name { color: var(--tinte-blass); font-weight: 600; }
.ablauf-zeit { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--tinte-leise); font-variant-numeric: tabular-nums; }
.ablauf-balken { flex: 1; height: 8px; border-radius: 99px; background: var(--grund-tief); position: relative; overflow: hidden; }
.ablauf-balken::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--anteil) * 100%); border-radius: inherit; background: linear-gradient(90deg, #ce3749, var(--marke)); }
.ablauf-pause .ablauf-balken::after { background: repeating-linear-gradient(90deg, var(--linie) 0 6px, transparent 6px 10px); }
.ablauf-zeit > span:last-child { min-width: 48px; text-align: right; }
.ablauf-status { justify-self: end; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #3d661f; background: rgba(110, 152, 68, 0.16); }
.ablauf-status svg { width: 14px; height: 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) {
  .ablauf li { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "nr name status" ". zeit zeit"; gap: 8px 12px; }
  .ablauf-nr { grid-area: nr; }
  .ablauf-name { grid-area: name; font-size: 15px; }
  .ablauf-zeit { grid-area: zeit; }
  .ablauf-status { grid-area: status; }
  .ablauf-pause { grid-template-areas: "nr name name" ". zeit zeit"; }
}

/* Nachgerechnet: Text links, Beispielaufgabe rechts. */
.beispiel-abschnitt { text-align: left; }
.beispiel-abschnitt .innen { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.beispiel-text h2 { margin-bottom: 18px; }
.beispiel-text p { margin: 0 0 14px; color: var(--tinte-leise); }
.beispiel-text a { color: var(--marke); }
.beispiel-abschnitt .trainer { box-shadow: 0 24px 60px -32px var(--schatten); }
@media (max-width: 860px) { .beispiel-abschnitt .innen { grid-template-columns: 1fr; gap: 28px; } }

/* ------------------------------------------------------------ Linkkacheln
   Ein Baustein für alle Raster mit Links (DESIGN.md 2.3, kacheln() in
   komponenten.mjs). Flex-Raster mit fester Kachelbreite: volle Reihen sehen
   aus wie ein Raster, eine kürzere letzte Reihe steht zentriert. --spalten
   setzt kacheln() je nach Anzahl (spalten()). */
.r-kacheln { --sp: var(--spalten, 3); --luecke: 14px; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--luecke); text-align: left; }
.r-kacheln > li, .r-band .r-kacheln > li { display: flex; flex: 0 0 calc((100% - (var(--sp) - 1) * var(--luecke)) / var(--sp)); min-width: 0; margin: 0; padding: 0; }
.r-kachel { position: relative; flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 16px 18px; text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s; }
.r-kachel:hover { border-color: color-mix(in srgb, var(--akzent) 35%, transparent); }
.r-kachel-sym { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--akzent); background: color-mix(in srgb, var(--akzent) 12%, transparent); }
.r-kachel-sym .sym-text { font-size: 14px; }
.r-kachel-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.r-kachel-text strong, .r-band .r-kachel-text strong { font: 700 17px/1.3 "Manrope", sans-serif; letter-spacing: -0.01em; color: var(--r-kopf); overflow-wrap: break-word; }
.r-kachel-text span { font: 400 14px/1.45 "Work Sans", sans-serif; color: var(--tinte-leise); }
.r-kachel-text small { font: 500 13px/1.3 "Work Sans", sans-serif; color: var(--r-leise); }
.r-kachel-plakette { position: absolute; top: 16px; right: 16px; padding: 4px 9px; border-radius: 99px; font: 600 12px/1.2 "Work Sans", sans-serif; font-style: normal; color: var(--tinte-leise); background: color-mix(in srgb, var(--tinte) 6%, transparent); white-space: nowrap; }
.r-kachel-plakette.ist-an { color: #3d661f; background: rgba(110, 152, 68, 0.16); }
/* Mit Untertext: Symbol oben, Text darunter. */
.r-kacheln.mit-text .r-kachel { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 20px 20px; }
.r-kacheln.mit-text .r-kachel-text strong { font-size: 16.5px; }
.r-kacheln.mit-text .r-kachel-plakette { top: 30px; right: 22px; }
@media (max-width: 960px) {
  .r-kacheln { --sp: var(--spalten-m, 2); }
}
@media (max-width: 760px) {
  .r-kacheln { --sp: 1; --luecke: 10px; }
  .r-kacheln .r-kachel, .r-kacheln.mit-text .r-kachel { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 14px 16px; }
  .r-kachel-text { flex: 1 1 calc(100% - 54px); }
  .r-kacheln .r-kachel-plakette { position: static; margin: 4px 0 0 54px; }
}

/* Drei Pläne: die Empfehlung als Marke auf der Kante, gemeinsame Leistungen darunter. */
.tarif-empfehlung { position: absolute; top: -12px; left: 24px; margin: 0; padding: 5px 11px; border-radius: 99px; background: var(--marke); color: var(--auf-akzent); font: 600 12px/1.2 "Work Sans", sans-serif; }
.preise .betrag { font-size: clamp(34px, 3.6vw, 42px); }
.preise-alle { max-width: 760px; margin: 28px auto 0; grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; }
@media (max-width: 560px) { .preise-alle { grid-template-columns: 1fr; } }

/* Zusatz unter dem Hochschulnamen in den Tabellen der Rechner-Seite */
.r-tabelle .rx-t-lang { display: block; margin-top: 2px; font: 400 12.5px/1.35 "Work Sans", sans-serif; color: var(--r-leise); }

/* Umbrüche: keine einzelnen Wörter in der letzten Zeile */
.r-kopf h1, .r-unter, .r-band h2, .r-lead, section h2 { text-wrap: balance; }
.r-band p, .r-band li, .r-info p { text-wrap: pretty; }

/* ------------------------------------------------------ Kopfzeile Handy
   Marke links, rechts „App laden“ (klein) und der Menü-Knopf. Das Menü
   klappt in voller Breite unter der Kopfzeile auf (zeigen.js). Ohne JS
   bleibt es bei „Ratgeber“ als einzigem Link. */
@media (max-width: 760px) {
  .kopf .innen { gap: 12px; }
  .kopf.mit-menue .knopf { position: relative; display: inline-flex; margin-left: auto; height: 36px; padding: 0 14px; font-size: 13.5px; border-radius: 10px; }
  .kopf.mit-menue .knopf::before { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
  .kopf.mit-menue nav { display: none; }
  .kopf.mit-menue .menue-knopf { display: block; }
  .kopf.mit-menue.offen nav {
    display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0;
    padding: 6px 24px 14px; background: var(--grund); border-bottom: 1px solid var(--linie); box-shadow: 0 18px 30px -24px var(--schatten);
  }
  .kopf.mit-menue.offen nav a { display: flex; justify-content: flex-start; min-height: 48px; border-bottom: 1px solid var(--linie); font-size: 16px; font-weight: 500; color: var(--tinte); }
  .kopf.mit-menue.offen nav a:last-child { border-bottom: 0; }
}

/* ------------------------------------------- Startseite, Abwechslung (09.11.2026) */

/* Was TMSnat red nicht ist: Figur links, drei ehrliche Punkte rechts. */
.nicht-abschnitt .innen { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: center; max-width: 960px; text-align: left; }
.nicht-bild { width: 100%; height: auto; }
.nicht-abschnitt h2 { margin-bottom: 22px; }
.nicht-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.nicht-liste li { position: relative; padding-left: 34px; font-size: 16.5px; line-height: 1.6; color: var(--tinte-leise); }
.nicht-liste li::before { content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--marke-hauch) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M8 11h6' stroke='%2374222b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 22px no-repeat; }
.nicht-liste strong { color: var(--tinte); font-weight: 600; }
@media (max-width: 760px) {
  .nicht-abschnitt .innen { grid-template-columns: 1fr; gap: 24px; }
  .nicht-bild { width: 200px; margin: 0 auto; }
}

/* Bordeaux-Band: einmal pro Seite, mit heller Figur. */
.schluss.bordeaux { position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(ellipse 700px 420px at 50% 0%, rgba(215, 119, 125, 0.35), transparent 70%), linear-gradient(170deg, #861c29, #5b141e); }
.schluss.bordeaux h2 { color: #fff; margin-bottom: 10px; }
.schluss-bild { display: block; width: 260px; height: auto; margin: 0 auto 18px; }
.schluss-text { margin: 0; color: #fbd7d7; font-size: 17px; }
.schluss.bordeaux .abzeichen-bald small { background: #fff; color: var(--marke); }


/* ------------------------------------------- Ratgeber, Abwechslung (09.11.2026) */

/* Farbton je Aufgabengruppe, wie die Bereiche in der App (app.css: md-teal, md-amber, md-secondary, md-pink). */
.r3.ton-wissen, .ton-wissen { --akzent: #709049; --akzent-tief: #4e6b2f;  --akzent-hell: #9fce65; }
.r3.ton-verstehen, .ton-verstehen { --akzent: #b08f2b; --akzent-tief: #725e1d;  --akzent-hell: #f2c464; }
.r3.ton-rechnen, .ton-rechnen { --akzent: #587081; --akzent-tief: #3f5260;  --akzent-hell: #88b8df; }
.r3.ton-merken, .ton-merken { --akzent: #aa3e50; --akzent-tief: #8a2a3a;  --akzent-hell: #e792ce; }
.vl-a-wissen { stop-color: #91ad68; } .vl-b-wissen { stop-color: #4e6b2f; }
.vl-a-verstehen { stop-color: #d0ad47; } .vl-b-verstehen { stop-color: #725e1d; }
.vl-a-rechnen { stop-color: #7890a1; } .vl-b-rechnen { stop-color: #3f5260; }
.vl-a-merken { stop-color: #ca5e70; } .vl-b-merken { stop-color: #8a2a3a; }
.ton-wissen { --vl: url(#vl-wissen); } .ton-verstehen { --vl: url(#vl-verstehen); }
.ton-rechnen { --vl: url(#vl-rechnen); } .ton-merken { --vl: url(#vl-merken); }
/* Kopf der Gruppenseiten im Farbton der Gruppe, ganz leicht. */
/* Die Farbe der Gruppe trägt die weiche Fläche hinter der Figur (.b-kopf), kein Schimmer im ganzen Kopf. */
.r3:is(.ton-wissen, .ton-verstehen, .ton-rechnen, .ton-merken) .b-kopf path { fill: color-mix(in srgb, var(--akzent-hell) 38%, transparent); }

/* Abschnittsnummer über der H2 (Seiten mit Ablauf). */
.r-band-nr { display: block; text-align: center; margin: 0 0 6px; font: 800 44px/1 "Manrope", sans-serif; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--akzent) 60%, transparent); }

/* „Hier bist du“: der Testtag als Balken, jede Gruppe so breit wie ihre Minuten. */
.r-tag { max-width: 680px; margin: 30px auto 0; }
.r-tag-leiste { display: flex; gap: 3px; height: 30px; }
.r-tag-seg { position: relative; display: grid; place-items: center; min-width: 6px; border-radius: 6px;
  background: color-mix(in srgb, var(--r-kopf) 9%, transparent); font: 700 12px/1 "Manrope", sans-serif; color: var(--tinte-blass); }
.r-tag-seg.pause { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--r-kopf) 12%, transparent) 0 4px, transparent 4px 8px); }
.r-tag-seg.hier { background: linear-gradient(160deg, color-mix(in srgb, var(--akzent) 80%, #fff), var(--akzent-tief)); color: #fff;
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--akzent) 80%, transparent); }
.r-tag-seg.hier::after { content: ""; position: absolute; top: -9px; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--akzent-tief); }
.r-tag figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font: 500 13px/1.4 "Work Sans", sans-serif; color: var(--tinte-blass); }
.r-tag figcaption strong { color: var(--akzent-tief); font-weight: 600; }

/* Beispielaufgabe als Blatt, ganz leicht schräg wie hingelegt. */
.r3:is(.ton-wissen, .ton-verstehen, .ton-rechnen, .ton-merken) #beispiel .blatt-beispiel { transform: rotate(-0.6deg); }
@media (prefers-reduced-motion: no-preference) {
  .r3:is(.ton-wissen, .ton-verstehen, .ton-rechnen, .ton-merken) #beispiel .blatt-beispiel { transition: transform 0.3s; }
  .r3:is(.ton-wissen, .ton-verstehen, .ton-rechnen, .ton-merken) #beispiel .blatt-beispiel:hover { transform: none; }
}
@media (max-width: 640px) {
  .r-tag-leiste { height: 24px; }
  .r-tag-seg { font-size: 10.5px; }
  .r-tag figcaption { flex-direction: column; gap: 2px; text-align: left; }
}

/* Steht fest / noch offen */
.r-festoffen { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.r-festoffen > div { padding: 24px; border-radius: 20px; border: 1px solid var(--r-linie); background: var(--r-weiss); }
.r-band.weiss .r-festoffen > div { background: var(--r-hell); }
.r-offen { background: transparent !important; border-style: dashed !important; }
.r-fo-titel { display: flex; align-items: center; gap: 10px; margin: 0 0 12px !important; font: 800 18px/1.2 "Manrope", sans-serif !important; color: var(--r-kopf) !important; }
.r-fest .r-fo-titel .sym { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: rgba(110, 152, 68, 0.16); color: #3d661f; box-sizing: border-box; }
.r-fo-frage { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px dashed var(--tinte-blass); font: 800 14px/1 "Manrope", sans-serif; color: var(--tinte-blass); }
.r-festoffen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.r-festoffen li { font-size: 16px !important; line-height: 1.55 !important; padding-left: 14px; position: relative; }
.r-festoffen li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--akzent); }
.r-offen li::before { background: var(--tinte-blass); }
@media (max-width: 700px) { .r-festoffen { grid-template-columns: 1fr; } }

/* Tagesplan: senkrechte Linie mit Punkten */
.r-plan { list-style: none; margin: 0; padding: 0; position: relative; }
.r-plan::before { content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(var(--akzent), color-mix(in srgb, var(--akzent) 30%, transparent)); }
.r-plan li { position: relative; display: grid; grid-template-columns: 20px 1fr; gap: 18px; padding: 0 0 26px; }
.r-plan li:last-child { padding-bottom: 0; }
.r-plan-punkt { position: relative; z-index: 1; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 0 5px var(--r-weiss); }
.r-band.grau .r-plan-punkt { box-shadow: 0 0 0 5px var(--r-hell); }
.r-plan li.start .r-plan-punkt { background: var(--r-weiss); border: 2px solid var(--akzent); box-sizing: border-box; }
.r-plan li.pause .r-plan-punkt { background: var(--r-weiss); border: 2px dashed var(--tinte-blass); box-sizing: border-box; }
.r-plan-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 4px !important; }
.r-plan-kopf strong { font: 800 18px/1.3 "Manrope", sans-serif; color: var(--r-kopf); }
.r-plan-kopf span { font: 600 14px/1.3 "Work Sans", sans-serif; color: var(--akzent-tief); font-variant-numeric: tabular-nums; }
.r-plan li.pause .r-plan-kopf span { color: var(--tinte-blass); }
.r-plan li > div > p:not(.r-plan-kopf) { margin: 0 !important; font-size: 16px !important; line-height: 1.6 !important; }

/* Glockenkurve beim Ergebnis */
.r-glocke { margin: 6px auto 30px; max-width: 560px; color: var(--akzent); }
.r-glocke svg { display: block; width: 100%; height: auto; overflow: visible; }
.r-glocke text { font: 600 12px "Work Sans", sans-serif; fill: var(--tinte-blass); }
.r-glocke .mitte { fill: var(--r-kopf); font-weight: 700; }
.r-glocke figcaption { margin-top: 8px; text-align: center; font-size: 14px; color: var(--tinte-blass); }

/* TMS gegen TMSnat: was wegfällt (durchgestrichen), was neu ist */
.r-wegneu { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 760px; margin: 0 auto 30px; }
.r-wegneu > div { padding: 22px 24px; border-radius: 20px; border: 1px solid var(--r-linie); }
.r-weg { background: transparent; border-style: dashed !important; }
.r-neu { background: var(--r-hell); }
.r-band.grau .r-neu { background: var(--r-weiss); }
.r-wn-titel { display: flex; align-items: center; gap: 10px; margin: 0 0 10px !important; font: 800 17px/1.2 "Manrope", sans-serif !important; color: var(--r-kopf) !important; }
.r-wn-titel span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 800 17px/1 "Manrope", sans-serif; }
.r-weg .r-wn-titel span { color: var(--tinte-blass); border: 1.5px dashed var(--tinte-blass); }
.r-neu .r-wn-titel span { color: #fff; background: var(--akzent); }
.r-wegneu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.r-wegneu li { font: 600 16px/1.5 "Work Sans", sans-serif !important; }
.r-weg li { color: var(--tinte-blass) !important; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--akzent) 60%, transparent); text-decoration-thickness: 1.5px; }
.r-neu li { color: var(--r-kopf) !important; }
.r-band .r-spalte.breit > .r-punkte { max-width: 712px; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) { .r-wegneu { grid-template-columns: 1fr; } }


/* ======================================================= Handgemacht (09.11.2026)
   Handschrift (Caveat, OFL) und handgezeichnete Markierungen aus hand.mjs.
   Sparsam: höchstens ein, zwei Markierungen pro Abschnitt. */

:root { --hand: #b32e42; --hand-hell: #fbc7c0; }
.h-kreis, .h-strich { position: relative; display: inline-block; white-space: nowrap; }
.h-form { position: absolute; overflow: visible; pointer-events: none; fill: none; stroke: var(--hand); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.h-form path { vector-effect: non-scaling-stroke; }
.h-kreis-svg { left: -14%; top: -30%; width: 128%; height: 160%; }
.h-strich-svg { left: -3%; bottom: -0.32em; width: 106%; height: 0.42em; stroke-width: 2.6; }
.h-pfeil-svg { position: relative; display: inline-block; width: 46px; height: 32px; stroke-width: 1.8; vertical-align: middle; }
.h-klammer-svg { stroke-width: 2; }
.h-notiz { display: inline-flex; align-items: flex-end; gap: 4px; font: 600 23px/1.05 "Caveat", "Comic Sans MS", cursive; color: var(--hand); letter-spacing: 0.01em; }
.h-notiz-text { display: inline-block; transform: rotate(-3deg); }
/* Auf dunklen Flächen hell */
.bordeaux .h-form, .sb-blatt .h-form, .r-band.bordeaux .h-form { stroke: var(--hand-hell); }
.bordeaux .h-notiz, .r-band.bordeaux .h-notiz { color: var(--hand-hell); }

/* Zeichnen beim Hereinscrollen (nur mit JS und ohne „weniger Bewegung“). */
@media (prefers-reduced-motion: no-preference) {
  .hand-an .h-form path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s cubic-bezier(0.6, 0.1, 0.3, 1); }
  .hand-an .h-form path + path { transition-delay: 0.75s; transition-duration: 0.35s; }
  .hand-an .da .h-form path, .hand-an .h-form.da path { stroke-dashoffset: 0; }
  .hand-an .h-notiz-text { opacity: 0; transition: opacity 0.6s 0.4s; }
  .hand-an .da .h-notiz-text, .hand-an .h-notiz.da .h-notiz-text { opacity: 1; }
}

/* Inhaltsverzeichnis statt Kacheln: Titel, gepunktete Linie, Angabe rechts. */
.r-inhalt { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; text-align: left; counter-reset: inhalt; }
.r-inhalt.zwei { max-width: 960px; columns: 2; column-gap: 56px; }
.r-inhalt li { break-inside: avoid; border-bottom: 1px solid var(--r-linie, var(--linie)); }
.r-inhalt a { display: block; padding: 14px 2px 13px; text-decoration: none; color: inherit; }
.r-inhalt-zeile { display: flex; align-items: baseline; gap: 10px; }
.r-inhalt strong { font: 700 17px/1.35 "Manrope", sans-serif; letter-spacing: -0.01em; color: var(--r-kopf, var(--tinte)); }
.r-inhalt-punkte { flex: 1; min-width: 24px; border-bottom: 2px dotted color-mix(in srgb, var(--tinte) 22%, transparent); transform: translateY(-4px); }
.r-inhalt small { flex: none; font: 600 13px/1.2 "Work Sans", sans-serif; color: var(--akzent-tief, var(--marke)); white-space: nowrap; }
.r-inhalt-text { display: block; margin-top: 4px; max-width: 46ch; font-size: 15px; line-height: 1.5; color: var(--tinte-leise); }
.r-inhalt a:hover strong { color: var(--akzent-tief, var(--marke)); }
.r-inhalt a:hover .r-inhalt-punkte { border-bottom-color: var(--akzent, var(--marke)); }
@media (max-width: 760px) { .r-inhalt.zwei { columns: 1; } }

/* ---------------------------------------------- Startseite, handgemacht */

/* Kopf: Notiz mit Pfeil zum iPad */
.n-ipad { position: absolute; z-index: 4; left: -6%; top: -6px; }
.n-ipad .h-pfeil-svg { width: 54px; height: 38px; margin-left: -4px; transform: translateY(14px) rotate(8deg); }
@media (max-width: 900px) { .n-ipad { left: 2%; top: -26px; } }

/* Kalenderblatt: der Kreis um das Datum ist hell */
.sb-tag .h-kreis-svg { stroke: #fbd7d7; stroke-width: 2.4; left: -10%; width: 120%; top: -20%; height: 140%; }

/* Testtag: Klammer um Einprägen und Abruf von Fakten lernen */
.ablauf li.mit-klammer { position: relative; }
.ablauf-klammer { position: absolute; left: calc(100% + 14px); top: 10px; height: calc(300% - 6px); display: flex; align-items: center; gap: 6px; pointer-events: none; }
.ablauf-klammer .h-klammer { position: relative; display: block; width: 22px; height: 100%; }
.ablauf-klammer .h-klammer-svg { left: 0; top: 0; width: 100%; height: 100%; }
.n-klammer { font-size: 22px; white-space: nowrap; }
@media (max-width: 1180px) { .ablauf-klammer { display: none; } }

/* Warum: Kopf links, Figur rechts; vier Notizen statt Kacheln, versetzt */
.warum-abschnitt { text-align: left; }
.warum-kopf { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; align-items: end; max-width: 1000px; margin: 0 auto 44px; }
.warum-kopf h2 { text-align: left; margin-bottom: 18px; }
.warum-kopf .warum-einleitung { margin: 0; max-width: 620px; }
.warum-bild { width: 100%; height: auto; transform: rotate(2deg); }
.warum-notizen { list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 72px; }
.warum-notizen li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 26px 0; border-top: 1px solid var(--linie); }
.warum-notizen li:nth-child(even) { transform: translateY(38px); }
.warum-nr { font: 600 46px/0.8 "Caveat", cursive; color: var(--hand); transform: rotate(-6deg); }
.warum-notizen .warum-titel { display: block; font: 800 20px/1.3 "Manrope", sans-serif; letter-spacing: -0.02em; color: var(--r-kopf); }
.warum-notizen p { margin: 6px 0 0; font-size: 16px; line-height: 1.6; color: var(--tinte-leise); }
.warum-notizen p strong { color: var(--r-kopf); font-weight: 600; }
.warum-abschnitt .fussnote { margin-top: 64px; text-align: left; max-width: 1000px; margin-left: auto; margin-right: auto; }
@media (max-width: 760px) {
  .warum-kopf { grid-template-columns: 1fr; gap: 12px; }
  .warum-bild { width: 190px; order: -1; }
  .warum-notizen { grid-template-columns: 1fr; }
  .warum-notizen li:nth-child(even) { transform: none; }
}

/* Preis: Handschrift statt Pille, Kreis um den Preis */
.n-empfehlung { position: absolute; top: -40px; right: -18px; flex-direction: row-reverse; }
.n-empfehlung .h-pfeil-svg { transform: scaleX(-1) rotate(10deg) translateY(10px); width: 40px; }
.tarif-premium .betrag .h-kreis-svg { left: -8%; width: 116%; top: -18%; height: 136%; }
@media (max-width: 640px) { .n-empfehlung { right: 8px; top: -34px; } }

/* Ratgeber: Kopf links, Figur rechts */
.ratgeber-abschnitt { text-align: left; }
.ratgeber-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; max-width: 960px; margin: 0 auto 28px; }
.ratgeber-kopf h2 { margin: 0; text-align: left; max-width: 520px; }
.ratgeber-bild { width: 150px; height: auto; transform: rotate(-3deg); }
.ratgeber-abschnitt .r-gruppe { display: none; }
.ratgeber-abschnitt .fussnote { max-width: 960px; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) { .ratgeber-bild { width: 96px; } }

/* Beispielaufgabe: Kringel um den richtigen Buchstaben, sobald die Lösung offen ist */
.a-buchstabe { position: relative; }
.ist-richtig .h-kreis-svg { left: -55%; top: -45%; width: 210%; height: 190%; stroke-width: 2.4; }
.ist-richtig .h-form path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.7s cubic-bezier(0.6, 0.1, 0.3, 1); }
.aufgabe:has(.a-weg[open]) .ist-richtig .h-form path { stroke-dashoffset: 0; }

/* Von Hand statt Symbol im Kreis: Haken, Strich, Plus */
.vorteile li::before { width: 20px; height: 20px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.5 C6 14 7.6 16.4 9 19.2 C11.6 12.6 15.8 6.8 21.5 3' fill='none' stroke='%23b32e42' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.ablauf-status { width: 24px; height: 24px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.5 C6 14 7.6 16.4 9 19.2 C11.6 12.6 15.8 6.8 21.5 3' fill='none' stroke='%23488930' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; }
.ablauf-status svg { display: none; }
.nicht-liste li::before { width: 24px; height: 24px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.6 C8 11.4 13 12.8 20.5 11' fill='none' stroke='%23b32e42' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 24px no-repeat; top: 2px; }
.r-haken li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.5 C6 14 7.6 16.4 9 19.2 C11.6 12.6 15.8 6.8 21.5 3' fill='none' stroke='%23b32e42' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.liste li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.5 C6 14 7.6 16.4 9 19.2 C11.6 12.6 15.8 6.8 21.5 3' fill='none' stroke='%23b32e42' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.r-band.bordeaux .r-haken li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.5 C6 14 7.6 16.4 9 19.2 C11.6 12.6 15.8 6.8 21.5 3' fill='none' stroke='%23f9b3b0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.r-faq summary::after { content: "+"; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 0; background: none;
  font: 600 34px/1 "Caveat", cursive; color: var(--hand); transform: rotate(-4deg); }
.r-faq details[open] summary::after { transform: rotate(41deg); }
/* Hinweise als Randnotiz: Linie am Rand statt Kasten mit Symbol */
.r-info { display: block; margin: 28px 0; padding: 2px 0 2px 20px; border-radius: 0; background: none !important;
  border-left: 3px solid color-mix(in srgb, var(--akzent) 55%, transparent); }
.r-info-sym { display: none; }
.r-info p { font-size: 16px !important; color: var(--tinte-leise) !important; }
.r-info.achtung { border-left-color: color-mix(in srgb, var(--r-nein, #c13d2e) 60%, transparent); }
/* Preise: nur der Saisonpass als Blatt, die anderen ohne Kasten */
.preise .tarif:not(.tarif-premium) { background: none !important; border-color: transparent !important; box-shadow: none !important; }
.preise .tarif-premium { transform: rotate(-1.2deg); background: #fffdfa !important; box-shadow: 0 1px 0 rgba(67, 45, 23, 0.05), 0 22px 40px -24px rgba(96, 36, 24, 0.35) !important; }
.ablauf-nr { background: none; width: auto; height: auto; font: 800 18px/1 "Manrope", sans-serif; color: var(--marke); justify-content: start; }

/* Nicht alles mittig: „Was dich erwartet“ und die Fragen stehen zweispaltig,
   die Überschrift links oben, der Inhalt rechts daneben. */
@media (min-width: 900px) {
  .r-band:is(#erwartet, #fragen) > .r-spalte { max-width: 1040px; display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 64px; align-items: start; }
  .r-band:is(#erwartet, #fragen) > .r-spalte > h2 { grid-column: 1; grid-row: 1 / span 20; text-align: left; position: sticky; top: 100px; margin: 4px 0 0; font-size: 34px; }
  .r-band:is(#erwartet, #fragen) > .r-spalte > :not(h2) { grid-column: 2; }
  .r-band:is(#erwartet, #fragen) > .r-spalte > :first-child:not(h2) { margin-top: 0; }
}


/* ---------------------------------------------- Noch mehr von Hand (09.11.2026) */

/* Papierstruktur: ganz leichtes Korn über der ganzen Seite */
body::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0 0.18 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)'/%3E%3C/svg%3E"); opacity: 0.35; mix-blend-mode: multiply; }

/* Testtag in zwei Hälften: Vormittag | Pause | Nachmittag */
.tag { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0 34px; max-width: 1000px; margin: 0 auto; text-align: left; }
.tag-teil h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; font: 800 21px/1.2 "Manrope", sans-serif; letter-spacing: -0.02em; }
.tag-teil h3 span { font: 600 14px/1 "Work Sans", sans-serif; letter-spacing: 0; color: var(--tinte-blass); }
.tag .ablauf { max-width: none; }
.tag .ablauf li { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "nr name status" ". zeit zeit"; gap: 6px 12px; }
.tag .ablauf-nr { grid-area: nr; }
.tag .ablauf-name { grid-area: name; }
.tag .ablauf-zeit { grid-area: zeit; }
.tag .ablauf-status { grid-area: status; }
.tag-pause { position: relative; display: flex; justify-content: center; width: 30px; }
.tag-pause::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 50%; border-left: 2px dashed var(--linie); }
.tag-pause span { position: sticky; top: 40%; align-self: center; padding: 10px 0; background: var(--grund); writing-mode: vertical-rl; transform: rotate(180deg); font: 600 13px/1 "Work Sans", sans-serif; color: var(--tinte-blass); white-space: nowrap; }
@media (max-width: 760px) {
  .tag { grid-template-columns: 1fr; gap: 0; }
  .tag-pause { width: auto; margin: 22px 0; }
  .tag-pause::before { top: 50%; bottom: auto; left: 0; right: 0; border-left: 0; border-top: 2px dashed var(--linie); }
  .tag-pause span { position: relative; writing-mode: horizontal-tb; transform: none; padding: 0 12px; }
}

/* Steckbrief als Karte mit zwei Klebestreifen */
.sb-rahmen { position: relative; max-width: 960px; margin: 0 auto; transform: rotate(-0.4deg); }
.klebestreifen { position: absolute; z-index: 3; top: -14px; width: 110px; height: 30px; background: rgba(241, 228, 200, 0.78);
  box-shadow: 0 1px 2px rgba(67, 45, 23, 0.12); clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 48%); }
.klebestreifen.links { left: 34px; transform: rotate(-6deg); }
.klebestreifen.rechts { right: 40px; transform: rotate(5deg); }

/* Textmarker, drei leicht verschiedene Striche */
.h-marker { background: none; color: inherit; padding: 0 2px; margin: 0 -2px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-repeat: no-repeat; background-size: 100% 78%; background-position: 0 70%; }
.h-marker.m0 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C40 5 90 8 140 6 C170 5 190 7 197 8 L196 33 C150 36 100 31 50 34 C30 35 12 33 5 31 Z' fill='%23ffe167' opacity='0.55'/%3E%3C/svg%3E"); }
.h-marker.m1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M1 12 C50 7 110 10 160 7 L199 9 L197 30 C160 35 90 30 40 33 L3 34 Z' fill='%23ffe167' opacity='0.55'/%3E%3C/svg%3E"); }
.h-marker.m2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4 7 C60 9 120 4 196 10 L194 31 C140 28 80 35 6 30 C2 22 3 14 4 7 Z' fill='%23ffe167' opacity='0.55'/%3E%3C/svg%3E"); }

/* Post-it */
.postit { position: relative; width: max-content; max-width: 300px; margin: 36px auto 0; padding: 18px 20px 20px; transform: rotate(2deg);
  background: #ffeb9e; color: #423427; font: 600 23px/1.15 "Caveat", cursive; text-align: left;
  box-shadow: 0 2px 2px rgba(67, 45, 23, 0.08), 0 16px 26px -16px rgba(67, 45, 23, 0.45); }
.postit::before { content: ""; position: absolute; top: -10px; left: 50%; width: 70px; height: 22px; margin-left: -35px; transform: rotate(-3deg);
  background: rgba(241, 228, 200, 0.8); clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 48%); }

/* Gruß im Fuß */
.fuss-gruss { margin: 14px 0 0 !important; font: 600 24px/1.1 "Caveat", cursive !important; color: var(--hand) !important; transform: rotate(-2deg); transform-origin: left; }

/* Notiz neben der Figur im Kopf der Gruppenseiten */
.r-kopf .r-innen { position: relative; }
.n-gruppe { position: absolute; top: 70px; left: calc(50% + 150px); max-width: 230px; text-align: left; }
.n-gruppe .h-pfeil-svg { width: 42px; transform: translateY(18px) rotate(-10deg); }
@media (max-width: 760px) { .n-gruppe { position: static; display: flex; justify-content: center; margin: 14px auto 12px; } .n-gruppe .h-pfeil-svg { display: none; } }
@media (max-width: 760px) { body::after { display: none; } }

/* ------------------------------ Weiche Flächen und Funkeln (wie bear.app) */
.h-blob { position: absolute; pointer-events: none; z-index: 0; overflow: visible; }
.h-blob path { fill: var(--blob, color-mix(in srgb, var(--akzent-hell, #e99da0) 28%, transparent)); }
.h-funkeln { position: absolute; pointer-events: none; z-index: 1; width: 22px; height: 22px; }
.h-funkeln path { fill: color-mix(in srgb, var(--r-kopf, #2c251f) 16%, transparent); }

/* Kopf: Figur auf einer Fläche, zwei Sterne daneben */
.r-kopf-figur { position: relative; width: max-content; margin: 0 auto; isolation: isolate; }
.r-kopf-figur .r-kopf-bild { position: relative; z-index: 1; }
.b-kopf { left: -18%; top: 6%; width: 136%; height: 96%; }
.r3.ton-marke .b-kopf path, .r3:not([class*="ton-"]) .b-kopf path { fill: rgba(233, 157, 160, 0.22); }
.f-1 { left: -26%; top: 14%; width: 18px; height: 18px; }
.f-2 { right: -22%; top: 58%; width: 26px; height: 26px; }

/* Startseite */
.blick-abschnitt .innen { position: relative; isolation: isolate; }
.blick-abschnitt h2, .blick-abschnitt .sb-rahmen, .blick-abschnitt .fussnote { position: relative; z-index: 1; }
.b-blick { left: -6%; top: 36px; width: 46%; height: 112%; --blob: rgba(233, 157, 160, 0.16); }
.f-blick-1 { left: 3%; top: 4px; width: 24px; height: 24px; }
.f-blick-2 { right: 6%; top: 18px; width: 16px; height: 16px; }
.warum-kopf { position: relative; }
.warum-kopf .warum-bild { position: relative; z-index: 1; }
.b-warum { right: -30px; bottom: -20px; width: 320px; height: 240px; --blob: rgba(233, 157, 160, 0.22); }
@media (max-width: 760px) { .b-blick, .f-blick-1, .f-blick-2 { display: none; } .b-warum { right: auto; left: -20px; top: -10px; width: 240px; height: 200px; } }

/* Fußzeile: kleines Herz von Hand */
.fuss-liebe { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fuss-herz { width: 15px; height: 14px; flex: none; transform: rotate(-8deg); }
.fuss-herz path { fill: var(--hand); stroke: var(--hand); stroke-width: 1; stroke-linejoin: round; }

/* Kopf: iPad quer hinten, iPhone vorn, dahinter eine weiche Fläche statt der Sonne */
.buehne-bild .h-blob.b-buehne { position: absolute; left: -6%; top: 14%; width: 112%; height: 78%; z-index: 0; }
.b-buehne path { fill: color-mix(in srgb, var(--hand-hell, #f8c9c3) 42%, transparent); }
.f-buehne-1 { position: absolute; left: 4%; top: 2%; width: 20px; height: 20px; z-index: 1; }
.f-buehne-2 { position: absolute; right: 3%; bottom: 14%; width: 13px; height: 13px; z-index: 1; }
.buehne-bild .h-funkeln path { fill: var(--hand); opacity: 0.55; }
.tablet.tablet-quer { left: auto; right: -2%; top: 70px; width: 480px; aspect-ratio: 1376 / 1032; transform: rotate(-3deg); z-index: 1; padding: 11px; border-radius: 30px; }
.tablet-bild { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 20px; container-type: inline-size; }
.tablet-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Tageszahl live über dem Bild, Lage aus der App (iPad quer, 1376 pt): links 25,58 %, oben 9,25 %, Höhe 7,56 % der Breite. */
.tablet-tage { position: absolute; left: 25.58cqw; top: 9.25cqw; margin: 0; display: flex; align-items: baseline; gap: 0.58cqw; }
.tablet-tage .schirm-zahl { font-size: 7.558cqw; }
.tablet-tage small { font: 600 1.45cqw/1 "Work Sans", sans-serif; color: #605243; }
.buehne-bild .geraet-vorne { left: -2%; right: auto; top: 214px; width: 190px; margin-left: 0; z-index: 2; transform: rotate(-3deg); }
.n-ipad { left: auto; right: 4%; top: 16px; }
.n-ipad .h-pfeil-svg { transform: translateY(14px) rotate(10deg); }
@media (max-width: 900px) {
  .tablet.tablet-quer { width: 330px; top: 70px; padding: 8px; border-radius: 22px; }
  .tablet-bild { border-radius: 15px; }
  .buehne-bild .geraet-vorne { width: 150px; top: 170px; left: 0; padding: 7px; border-radius: 32px; }
  .n-ipad { left: auto; right: 2%; top: 12px; }
}
@media (max-width: 640px) {
  .buehne-bild { height: 420px; }
  .tablet.tablet-quer { width: 80%; left: auto; right: 0; top: 60px; }
  .buehne-bild .geraet-vorne { width: 38%; top: 150px; left: 0; }
}
/* Lange Wörter in Überschriften brechen statt in die Nachbarspalte zu laufen */
h2, h3 { overflow-wrap: break-word; }

/* Schnellrechner auf der Startseite */
.schnell { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; max-width: 920px; margin: 26px auto 0; text-align: left; }
.schnell-eingabe { display: grid; gap: 20px; align-content: start; }
.schnell-feld { display: grid; gap: 8px; font: 600 15px/1.2 "Work Sans", sans-serif; color: var(--tinte-leise); }
.schnell-feld > span { display: flex; justify-content: space-between; align-items: baseline; }
.schnell-feld b { font: 800 26px/1 "Manrope", sans-serif; letter-spacing: -0.03em; color: var(--tinte); }
.schnell-feld input[type="range"] { width: 100%; accent-color: var(--marke); height: 28px; }
.schnell-land select { height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--linie); background: var(--r-weiss, #fdfbf8); font: 600 15px "Work Sans", sans-serif; color: var(--tinte); }
.schnell-hinweis { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tinte-blass); }
.schnell-ergebnis { padding: 22px 22px 20px; border-radius: 24px; background: var(--r-weiss, #fdfbf8); box-shadow: 0 1px 2px rgba(60, 45, 30, 0.05), 0 22px 44px -26px rgba(60, 45, 30, 0.35); }
.schnell-kopf { display: flex; justify-content: space-between; margin: 0 0 6px; font: 700 13px/1 "Work Sans", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinte-blass); }
.schnell-liste { list-style: none; margin: 0 0 18px; padding: 0; }
.schnell-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linie); }
.schnell-liste .sr-name { font: 700 16px/1.25 "Manrope", sans-serif; color: var(--tinte); }
.schnell-liste small { display: block; margin-top: 2px; font: 500 13px/1.3 "Work Sans", sans-serif; color: var(--tinte-blass); }
.schnell-liste b { font: 800 24px/1 "Manrope", sans-serif; letter-spacing: -0.03em; color: var(--marke); font-variant-numeric: tabular-nums; }
.schnell-knopf { width: 100%; justify-content: center; }
@media (max-width: 760px) { .schnell { grid-template-columns: 1fr; } }