/* Coach Miller — Startseite v3 (24.09.2026, 8 Wochen 1:1 für junge Männer)
   + Innenseiten. Lädt nach basis.css. Richtung B „Kraft": Asphalt zuerst,
   Kreide-Flächen als Notizbuch/Bruch. Signature: Alberts Kreide — Striche
   zählen die 8 Wochen, Kreis zeigt den Kreislauf, Kringel/Haken/Striche
   markieren, Handschrift nur für kurze Notizen. Gremium: v3/gremium-design.md. */

section { padding: var(--s-6) 0; }
@media (min-width: 860px) { section { padding: var(--s-7) 0; } }
section + section { border-top: var(--hairline); }
[data-flaeche="hell"] { background: var(--bg-hell); color: var(--text-auf-hell); }
[data-flaeche="hell"] + section, section + [data-flaeche="hell"] { border-top: none; }
[data-flaeche="hell"] h1, [data-flaeche="hell"] h2, [data-flaeche="hell"] h3 { color: var(--text-auf-hell); }

h2.cm-h2 { font-size: var(--fs-h2); max-width: 20ch; }
.cm-h3 { font-size: var(--fs-h3); }
.cm-lead {
  font-size: var(--fs-lead); color: var(--text-dim); line-height: var(--lh-body);
  max-width: var(--maxw-text); margin-top: var(--s-3);
}
[data-flaeche="hell"] .cm-lead { color: var(--text-dim-auf-hell); }

/* Alberts Handschrift — nur kurze Notizen, nie Fließtext. */
.hand {
  font-family: var(--font-hand); font-weight: 400; text-transform: none;
  letter-spacing: 0; line-height: 1.05; font-size: var(--fs-hand);
}

/* Kreide-Zeichen: inline-SVG, Farbe aus currentColor. */
.kreide { display: inline-block; line-height: 0; }
.kreide svg { display: block; width: 100%; height: 100%; overflow: visible; }

.cm-platzhalter { color: var(--text-dim); font-style: italic; text-transform: none; font-family: var(--font-text); font-weight: var(--fw-text); margin-right: .2em; }
[data-flaeche="hell"] .cm-platzhalter { color: var(--text-dim-auf-hell); }
.cm-bildunterschrift {
  font-family: var(--font-text); font-weight: var(--fw-text); text-transform: none;
  font-size: var(--fs-small); color: var(--text-dim); margin-top: var(--s-2);
}
[data-flaeche="hell"] .cm-bildunterschrift { color: var(--text-dim-auf-hell); }

.cm-aktion { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }
.cm-notiz { font-family: var(--font-text); font-weight: var(--fw-text); text-transform: none; font-size: var(--fs-small); color: var(--text-dim); }

/* ---- 1 · Hero ------------------------------------------------------------
   Vollbild-Foto + überlappender Asphalt-Block (Signature seit v2). Kein
   Verlauf, kein Scrim auf dem Foto. Neu: Kreide-Strichliste „8 Wochen" oben
   im Block — zeichnet sich beim Laden. */
.cm-hero { padding: 0 0 var(--s-6); border-top: 0; }
.cm-hero__media { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--eisen); }
.cm-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 40%; }
.cm-hero__block-wrap { position: relative; z-index: 2; margin-top: -72px; }
.cm-hero__block {
  background: var(--asphalt);
  border: 1px solid var(--line);
  padding: var(--s-4) var(--s-3) var(--s-4);
}
.cm-hero__zaehler { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); color: var(--kreide); }
.kreide--hero { height: 40px; width: auto; }
.kreide--hero svg { width: auto; height: 100%; }
.cm-hero__zaehler .hand { font-size: var(--fs-hand); transform: rotate(-3deg) translateY(2px); color: var(--kreide); }
.cm-hero h1 { font-size: clamp(42px, 4.4vw + 22px, 92px); max-width: 13ch; }
.cm-hero__lead {
  font-family: var(--font-text); font-weight: var(--fw-text); text-transform: none;
  font-size: var(--fs-lead); color: var(--text-dim); line-height: var(--lh-body);
  max-width: 44ch; margin-top: var(--s-3);
}
.cm-hero .cm-aktion { margin-top: var(--s-4); }

/* Tablet: Foto quer, Block darunter überlappend (wie Handy). */
@media (min-width: 720px) {
  .cm-hero__media { aspect-ratio: 16 / 10; }
  .cm-hero__media img { object-position: 60% 40%; }
  .cm-hero__block { max-width: 640px; padding: var(--s-5); }
  .kreide--hero { height: 52px; }
}
/* Desktop: Block sitzt links IM Foto. Schmal genug, dass er das Gesicht
   (rechts der Bildmitte) nie verdeckt — Sicht-Check 24.09.2026. */
/* Desktop: Foto als rechte Bildfläche (62 %), der Asphalt-Block überlappt nur
   ihre linke Kante — so bleibt das Gesicht (Bildmitte) immer frei, egal wie
   breit der Bildschirm ist (Sicht-Check 24.09.2026, Critic-Runde 1). */
/* Block im Fluss statt absolut (Nikita 20.10.): auf niedrigen Laptop-Bildschirmen
   klebte die Strichliste sonst an der Kopflinie. Jetzt hält padding-top immer
   Luft nach oben, der Hero wächst bei Bedarf mit. */
@media (min-width: 1100px) {
  .cm-hero {
    position: relative; min-height: min(90vh, 900px);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: var(--s-7) 0 16px;
  }
  .cm-hero__media { position: absolute; top: 0; bottom: 64px; left: 38%; right: 0; width: auto; aspect-ratio: auto; }
  .cm-hero__media img { object-position: 70% 40%; }
  .cm-hero__block-wrap { position: relative; margin-top: 0; padding-left: var(--s-5); max-width: none; }
  .cm-hero__block { max-width: 560px; padding: var(--s-5) var(--s-5) var(--s-5); }
}

/* ---- 2 · Kennst du das? ---------------------------------------------------
   Hierarchie per Rollentausch (Gremium §2): die Frage ist Alberts leise
   Handschrift, die Aussagen sind die lauteste Stufe der Seite nach der H1.
   Jede Aussage bekommt beim Scrollen einen Kreide-Haken („ja, kenn ich"). */
.cm-kennst__frage {
  font-size: var(--fs-hand-gross); color: var(--text-dim-auf-hell);
  transform: rotate(-3deg); transform-origin: left center; display: inline-block;
}
@media (min-width: 1000px) {
  .cm-kennst .rahmen { display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 8.8fr); gap: var(--s-5); align-items: start; }
  .cm-kennst__kopf { position: sticky; top: 120px; padding-top: var(--s-3); }
  .cm-kennst__liste { margin-top: 0; }
}
.cm-kennst__liste { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.cm-kennst__liste li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-2);
  align-items: start; padding: var(--s-3) 0; border-bottom: 1px solid var(--line-hell);
}
.cm-kennst__liste li:first-child { border-top: 1px solid var(--line-hell); }
.cm-kennst__liste p {
  font-family: var(--font-titel); font-weight: var(--fw-titel); letter-spacing: var(--ls-titel);
  text-transform: uppercase; line-height: 1.02; font-size: var(--fs-aussage);
  max-width: 26ch; color: var(--text-auf-hell); text-wrap: balance;
}
.kreide--haken { width: 36px; height: 32px; color: var(--asphalt); margin-top: .1em; }
.cm-kennst__bruecke {
  margin-top: var(--s-4); font-size: var(--fs-lead); color: var(--text-dim-auf-hell); max-width: var(--maxw-text);
}
.cm-kennst__bruecke strong { color: var(--text-auf-hell); font-weight: var(--fw-text-stark); }
@media (min-width: 860px) {
  .cm-kennst__liste li { grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-3); }
  .kreide--haken { width: 48px; height: 43px; }
}

/* ---- 3 · Der Kreislauf (Tafel) ---------------------------------------------
   Kreide-Kreis mit vier Stationen, ein kräftiger Strich bricht oben aus.
   Handy: Kreis nur mit Tagesnamen, Zitate als Liste darunter (Gremium §6). */
.cm-kreis .rahmen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: center; }
.cm-kreis__bild { margin: 0; }
.cm-kreis__tafel {
  position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; container-type: inline-size;
  margin: var(--s-4) auto 0; color: var(--kreide);
}
.kreide--kreis { position: absolute; inset: 7%; }
.cm-kreis__raus {
  position: absolute; right: 0; top: -13%; color: var(--kreide);
  transform: rotate(-8deg); white-space: nowrap;
}
@media (min-width: 720px) { .cm-kreis__raus { right: -4%; } }
/* Station = Haltestellen-Punkt AUF der Kreislinie (Kreis bleibt ganz), die
   Beschriftung liegt innen. Punkt-Koordinaten = Winkel -40°/40°/140°/220°
   auf dem Kreis aus kreide.py (Radius ≈ 39,3 % der Tafel). */
.station { position: absolute; width: 0; height: 0; }
.station i {
  position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--kreide); box-shadow: 0 0 0 5px var(--asphalt);
}
.station > div {
  position: absolute; display: flex; flex-direction: column; gap: 4px;
  width: max-content; max-width: 26cqw;
}
.station--mo > div, .station--mi > div { right: 22px; text-align: right; align-items: flex-end; }
.station--sa > div, .station--so > div { left: 22px; text-align: left; align-items: flex-start; }
.station--mo > div, .station--so > div { top: 14px; }
.station--mi > div, .station--sa > div { bottom: 14px; }
.station b {
  font-family: var(--font-titel); font-weight: var(--fw-titel); letter-spacing: var(--ls-titel);
  text-transform: uppercase; font-size: clamp(18px, 1vw + 12px, 24px); line-height: 1;
}
.station span { display: none; font-size: 15px; line-height: 1.45; color: var(--text-dim); }
.station--mo { left: 80.1%; top: 24.8%; }
.station--mi { left: 80.1%; top: 75.2%; }
.station--sa { left: 19.9%; top: 75.2%; }
.station--so { left: 19.9%; top: 24.8%; }
.cm-kreis__liste { list-style: none; margin: var(--s-5) 0 0; padding: 0; counter-reset: station; }
.cm-kreis__liste li {
  display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--s-2);
  padding: var(--s-2) 0; border-top: var(--hairline);
}
.cm-kreis__liste li:last-child { border-bottom: var(--hairline); }
.cm-kreis__liste b {
  font-family: var(--font-titel); font-weight: var(--fw-titel); text-transform: uppercase;
  letter-spacing: var(--ls-titel); font-size: 20px;
}
.cm-kreis__liste span { color: var(--text-dim); }
@media (min-width: 860px) {
  .cm-kreis .rahmen { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-6); }
  .cm-kreis__tafel { margin: var(--s-5) 0 0 auto; }
  .station span { display: block; }
  .cm-kreis__liste { display: none; }
}

/* ---- 4 · Dein Tag, angeschaut (Notizbuch) -----------------------------------
   Kreide-Fläche, darauf ein helleres Blatt mit der Tages-Zeitleiste und
   Alberts Notizen in Handschrift. Die 21:30-Zeile ist eingekringelt. */
.cm-tag .rahmen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.cm-tag__blatt {
  background: var(--papier); border: 1px solid var(--line-hell);
  padding: var(--s-4) var(--s-3);
}
.cm-tag__titel {
  font-family: var(--font-titel); font-weight: var(--fw-titel); text-transform: uppercase;
  letter-spacing: var(--ls-titel); font-size: 22px; padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--asphalt);
}
.cm-tag__titel span { font-family: var(--font-text); font-weight: var(--fw-text); text-transform: none; font-size: 16px; color: var(--text-dim-auf-hell); letter-spacing: 0; }
.cm-tag__liste { list-style: none; margin: 0; padding: 0; }
.cm-tag__liste li {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); column-gap: var(--s-2); row-gap: 6px;
  padding: var(--s-2) 0; border-bottom: 1px solid var(--line-hell); align-items: baseline;
}
.cm-tag__liste li:last-child { border-bottom: 0; padding-bottom: 0; }
.cm-tag__liste time {
  font-family: var(--font-titel); font-weight: var(--fw-titel); font-size: 22px; letter-spacing: .02em;
}
.cm-tag__liste p { font-size: 17px; line-height: 1.45; color: var(--text-auf-hell); }
.cm-tag__liste .notiz {
  grid-column: 2; justify-self: start; color: var(--asphalt);
  transform: rotate(-2deg); transform-origin: left center; font-size: clamp(24px, .8vw + 19px, 30px);
}
.cm-tag__liste .hebel p { font-weight: var(--fw-text-stark); }
.cm-tag__foto { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin-top: var(--s-4); background: var(--eisen); }
.notiz--kringel { position: relative; padding: 2px 4px; white-space: nowrap; margin-top: 10px; }
.kreide--kringel { position: absolute; left: -20px; right: -22px; top: -16px; bottom: -18px; color: var(--asphalt); }
@media (min-width: 720px) {
  .cm-tag__blatt { padding: var(--s-5) var(--s-5); }
  .cm-tag__liste li { grid-template-columns: 72px minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--s-3); }
  .cm-tag__liste .notiz { grid-column: 3; }
}
@media (min-width: 1100px) {
  .cm-tag .rahmen { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-6); }
  .cm-tag__text { position: sticky; top: 120px; }
}

/* ---- 5 · Das bekommst du ------------------------------------------------------
   Foto links (steht beim Scrollen), sechs Bausteine rechts. Über jedem
   Baustein der Einwand in Handschrift, den ein Kreidestrich durchstreicht. */
.cm-stack .rahmen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.cm-stack__bild img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--eisen); object-position: 50% 45%; }
.cm-stack__liste { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4) var(--s-5); }
.cm-stack__liste li { border-top: var(--hairline); padding-top: var(--s-3); }
.cm-stack__liste .einwand {
  color: var(--text-dim); margin-bottom: var(--s-2);
  font-family: var(--font-titel); font-weight: var(--fw-titel); letter-spacing: .02em;
  text-transform: uppercase; font-size: clamp(18px, .5vw + 15px, 22px); line-height: 1.3; text-wrap: balance;
}
/* Kreidestrich durch den Einwand — als Hintergrund der Textzeilen, damit er
   bei Umbruch jede Zeile einzeln trifft (box-decoration-break: clone) und sich
   von links nach rechts „zieht" (kreide.js setzt kreide-wartet/-fertig). */
.cm-stack__liste .einwand span {
  background: url("../kreide/durchstreich-kreide.svg") no-repeat 0 56% / 100% .3em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 2px; transition: background-size .75s cubic-bezier(.6,.05,.3,1) .2s;
}
.cm-stack__liste .kreide-wartet .einwand span { background-size: 0% .3em; }
.cm-stack__liste h3 { font-size: clamp(24px, 1vw + 18px, 30px); }
.cm-stack__liste p:not(.einwand) { margin-top: var(--s-1); color: var(--text-dim); }
@media (min-width: 640px) {
  .cm-stack__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .cm-stack .rahmen { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-6); }
  .cm-stack__bild { position: sticky; top: 104px; }
  .cm-stack__liste { margin-top: var(--s-5); }
}

/* ---- 6 · Foto-Bruch ---------------------------------------------------------
   Ein Satz. Gleiches Bauprinzip wie der Hero (Foto + überlappender Block),
   „drei Sachen" eingekringelt. */
.cm-bruch { padding: 0 0 var(--s-6); position: relative; }
.cm-bruch + section { border-top: 0; }
.cm-bruch__media { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--eisen); }
.cm-bruch__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; }
.cm-bruch__wrap { position: relative; z-index: 2; margin-top: -72px; }
.cm-bruch__satz {
  background: var(--asphalt); border: 1px solid var(--line);
  padding: var(--s-4) var(--s-3);
  font-family: var(--font-titel); font-weight: var(--fw-titel); letter-spacing: var(--ls-titel);
  text-transform: uppercase; line-height: 1.1; font-size: var(--fs-satz);
}
.markiert { position: relative; display: inline-block; white-space: nowrap; }
.kreide--unterstrich { position: absolute; left: -.08em; right: -.1em; bottom: -.18em; height: .22em; color: var(--kreide); }
@media (min-width: 720px) {
  .cm-bruch { padding-bottom: 64px; }
  .cm-bruch__media { aspect-ratio: 16 / 9; max-height: 820px; min-height: 60vh; }
  .cm-bruch__wrap { position: absolute; left: 0; right: 0; bottom: 16px; margin: 0; padding-left: var(--s-5); }
  .cm-bruch__satz { max-width: 900px; padding: var(--s-5); }
}

/* ---- 7 · So laufen deine 8 Wochen (Strichliste) -------------------------------
   Jede Etappe zeigt den Zählstand bis dahin; schon gezählte Wochen in
   gedämpfter Kreide, die neuen zwei Wochen in voller Kreide. */
.cm-plan__etappen { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.etappe {
  border-top: var(--hairline); padding-top: var(--s-3);
  display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--s-3); align-items: start;
}
.etappe > :not(.kreide) { grid-column: 2; }
.kreide--plan { grid-column: 1; grid-row: 1 / span 3; height: 48px; width: auto; color: var(--kreide); justify-self: start; }
.kreide--plan svg { width: auto; height: 100%; }
.etappe--2 .kreide--plan path:nth-child(-n+2),
.etappe--3 .kreide--plan path:nth-child(-n+4),
.etappe--4 .kreide--plan path:nth-child(-n+6) { stroke: var(--kreide-gedaempft); }
.etappe .woche { font-size: var(--fs-small); color: var(--text-dim); font-weight: var(--fw-text-stark); letter-spacing: .04em; }
.etappe h3 { font-size: clamp(26px, 1.4vw + 18px, 36px); margin-top: 4px; }
.etappe p:not(.woche) { margin-top: var(--s-1); color: var(--text-dim); }
@media (min-width: 900px) {
  .cm-plan__etappen { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
  .etappe { display: block; }
  .kreide--plan { display: block; height: 64px; margin-bottom: var(--s-3); }
}

/* ---- 8 · Wer ist Albert ------------------------------------------------------*/
.cm-wer .rahmen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.cm-wer__platzhalter { aspect-ratio: 4 / 5; background: var(--eisen); display: flex; align-items: center; justify-content: center; }
.cm-wer__platzhalter img { width: 72px; height: 72px; opacity: .9; }
/* Objekt-Platzhalter statt Signet-Fläche (Nikita 20.10.: Objekte statt Personen) — bis Albert ein Foto schickt. */
.cm-wer__foto { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--eisen); }
.cm-wer__gruss { font-size: var(--fs-hand-gross); margin-top: var(--s-3); transform: rotate(-3deg); transform-origin: left center; display: inline-block; }
@media (min-width: 860px) {
  .cm-wer .rahmen { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-6); align-items: center; }
  .cm-wer__bild { max-width: 420px; }
}

/* ---- 9 · Für dich / Nicht für dich -------------------------------------------*/
.cm-fuer .rahmen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
@media (min-width: 720px) { .cm-fuer .rahmen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); } }
.cm-fuer ul { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.cm-fuer li { padding-left: 40px; position: relative; color: var(--text-dim); line-height: var(--lh-body); }
.cm-fuer .ja li::before {
  content: ""; position: absolute; left: 0; top: .15em; width: 24px; height: 22px;
  background: var(--kreide);
  -webkit-mask: url("../kreide/haken.svg") no-repeat center / contain; mask: url("../kreide/haken.svg") no-repeat center / contain;
}
.cm-fuer__offen { grid-column: 1 / -1; margin: 0; border-top: var(--hairline); padding-top: var(--s-3); color: var(--text); line-height: var(--lh-body); }
@media (min-width: 720px) { .cm-fuer__offen { padding-right: calc(50% + var(--s-6) / 2); } }
.cm-fuer .nein li::before { content: "–"; position: absolute; left: 4px; top: -.05em; color: var(--text); font-family: var(--font-hand); font-size: 28px; line-height: 1; }

/* ---- 10 · So startest du (I · II · III) ---------------------------------------*/
.cm-schritte__bild { margin: var(--s-4) 0 0; }
.cm-schritte__bild img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 50%; background: var(--eisen); }
@media (min-width: 720px) { .cm-schritte__bild img { aspect-ratio: 21 / 9; } }
.cm-schritte__liste { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.cm-schritt { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.kreide--schritt { height: 60px; width: auto; color: var(--kreide); }
.kreide--schritt svg { width: auto; height: 100%; }
.cm-schritt h3 { font-size: clamp(24px, 1vw + 18px, 30px); }
.cm-schritt p { margin-top: 6px; color: var(--text-dim); }
@media (min-width: 900px) {
  .cm-schritte__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
  .cm-schritt { display: block; }
  .kreide--schritt { display: block; height: 72px; margin-bottom: var(--s-3); }
}

/* ---- 11 · Fragen (Kreide-Fläche) ----------------------------------------------*/
.cm-faq__liste { margin-top: var(--s-4); max-width: 900px; }
.cm-faq details { border-top: 1px solid var(--line-hell); }
.cm-faq details:last-child { border-bottom: 1px solid var(--line-hell); }
.cm-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) 0; cursor: pointer; min-height: 44px; list-style: none;
  font-family: var(--font-titel); font-weight: var(--fw-titel); letter-spacing: var(--ls-titel);
  text-transform: uppercase; font-size: clamp(19px, .6vw + 16px, 23px); line-height: 1.1;
}
.cm-faq summary::-webkit-details-marker { display: none; }
.cm-faq summary .zeichen { flex: none; font-family: var(--font-text); font-weight: 400; font-size: 24px; color: var(--text-dim-auf-hell); display: inline-block; transition: transform .15s ease; }
.cm-faq details[open] summary .zeichen { transform: rotate(45deg); }
.cm-faq .antwort { padding: 0 0 var(--s-4); max-width: var(--maxw-text); color: var(--text-dim-auf-hell); }
@media (prefers-reduced-motion: reduce) { .cm-faq summary .zeichen { transition: none; } }

/* ---- 12 · Schluss: „Mach den ersten Strich." ------------------------------------
   Seit 20.10.: Kreide-Staub-Foto. Handy oben über dem Text, Desktop als rechte
   Bildfläche hinter dem Raster (Foto ist fast schwarz, läuft in den Asphalt aus). */
.cm-schluss__media img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 60% 50%; }
.cm-schluss__media { margin-bottom: var(--s-5); }
@media (max-width: 1099px) { .cm-schluss { padding-top: 0; } }
@media (min-width: 1100px) {
  .cm-schluss { position: relative; overflow: hidden; }
  .cm-schluss__media { position: absolute; top: 0; bottom: 0; right: 0; width: 40%; margin: 0; }
  .cm-schluss__media img { height: 100%; aspect-ratio: auto; }
  .cm-schluss .rahmen { position: relative; z-index: 1; }
  /* Text endet eine Rasterstufe vor dem Foto (Foto beginnt bei 60 vw). */
  .cm-schluss .rahmen > :not(.kreide) { max-width: min(560px, calc(60vw - max(48px, (100vw - var(--maxw)) / 2 + 48px) - 216px)); }
}
.cm-schluss .rahmen { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--s-3); align-items: start; }
.cm-schluss .rahmen > :not(.kreide) { grid-column: 2; }
.kreide--erster { grid-column: 1; grid-row: 1 / span 4; height: 120px; width: auto; color: var(--kreide); }
.kreide--erster svg { width: auto; height: 100%; }
.cm-schluss__titel { font-size: var(--fs-h1); max-width: 14ch; }
.cm-schluss__zusagen { margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); max-width: var(--maxw-text); color: var(--text-dim); }
.cm-schluss .btn { margin-top: var(--s-4); justify-self: start; }
@media (min-width: 860px) {
  .cm-schluss .rahmen { grid-template-columns: 120px minmax(0, 1fr); column-gap: var(--s-5); }
  .kreide--erster { height: 220px; }
}

/* Kreide-Zeichnung: ohne JS bzw. bei reduced-motion steht alles fertig da
   (kreide.js setzt die Dash-Werte nur, wenn es animieren darf). */
@media (prefers-reduced-motion: reduce) {
  .kreide path { transition: none !important; stroke-dashoffset: 0 !important; }
  .cm-stack__liste .einwand span { transition: none; background-size: 100% .3em; }
}

/* ---- Innenseiten (Impressum/Datenschutz/Danke) — schlichte Textseiten -----*/
.cm-textseite { padding: var(--s-6) 0 var(--s-7); }
.cm-textseite .rahmen { max-width: 760px; }
.cm-textseite h1 { font-size: clamp(34px, 5vw, 56px); }
.cm-textseite h2 { font-size: 22px; margin-top: var(--s-6); }
.cm-textseite p, .cm-textseite li {
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-dim);
  font-family: var(--font-text); font-weight: var(--fw-text); text-transform: none;
}
.cm-textseite p + p, .cm-textseite ul + p { margin-top: var(--s-2); }
.cm-textseite section:first-of-type { padding-top: 0; }
.cm-textseite ul { margin: var(--s-2) 0; padding-left: 20px; }
.cm-textseite a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Danke-Seite -----------------------------------------------------------*/
.cm-danke .rahmen { max-width: 640px; }
.cm-danke h1 { font-size: clamp(38px, 5.6vw, 64px); line-height: 1; }
.kreide--danke { display: block; height: 72px; width: auto; color: var(--kreide); margin-bottom: var(--s-4); }
.kreide--danke svg { width: auto; height: 100%; }
.cm-danke .rahmen > p {
  margin-top: var(--s-3); font-size: var(--fs-lead); color: var(--text-dim); max-width: var(--maxw-text);
  font-family: var(--font-text); font-weight: var(--fw-text); text-transform: none;
}
.cm-danke__aufgabe {
  margin-top: var(--s-5);
  background: var(--bg-karte);
  border: var(--hairline);
  padding: var(--s-4);
}
.cm-danke__aufgabe h2 { font-size: 22px; margin-top: 0; }
.cm-danke__aufgabe .cm-platzhalter { color: var(--text-dim-auf-karte); }
.cm-danke__aufgabe p {
  margin-top: var(--s-2); color: var(--text-dim-auf-karte); line-height: var(--lh-body);
  font-family: var(--font-text); font-weight: var(--fw-text); text-transform: none;
}
.cm-danke .zurueck {
  display: inline-block; margin-top: var(--s-5); font-size: var(--fs-small);
  text-decoration: underline; text-underline-offset: 2px; min-height: 44px;
  font-family: var(--font-text); font-weight: var(--fw-text);
}