@charset "UTF-8";

/* =====================================================================
   ABSCHNITTE – youngstudy
   =====================================================================
   Zuständig (Agent B3): Leistungen mit Belegen (5.4, 6.3, 6.4),
   Ablauf (5.5), Klartext (5.6), Mail mit Checkliste und Sticker
   (5.7, 6.5), FAQ (5.8) sowie deren Zeichen-Animationen (6.7) und
   der Bogenpfeil im Hero («Linie, dann Spitze»).

   Nutzt die Tokens aus style.css (Farben, Raster, Abstände, Radien,
   Striche, Bewegung) und window.YS aus script.js.
   Schriften nur über Klassen bzw.  --schriftrolle  (schriftsatz.css).
   Schnittstellen: scratchpad/build-schnittstellen.md

   Aufbau
     1. Gemeinsam (Köpfe, Beleg-Blatt)
     2. Leistungen und Belege 01–04
     3. Ablauf
     4. Klartext
     5. Mail
     6. FAQ
     7. Zeichen-Animationen (nur html.js + keine Reduced-Motion-Vorgabe)
     8. Forced Colors, Druck
   ===================================================================== */


/* =====================================================================
   1. GEMEINSAM
   ===================================================================== */
.leistungen__kopf,
.ablauf__kopf { max-width: 52rem; }

/* style.css begrenzt svg auf max-width: 100 % – absolut gesetzte Zeichen
   sind bewusst grösser als ihr Bezugselement (Ellipse, Kringel, Keil …) */
.korr__zeichen, .kringel__form, .klartext__ellipse, .beleg__masslinie,
.beleg__notizpfeil, .schritt__verbinder, .ablauf__linie, .checkliste__haken,
.gliederung__klammer, .mail__bogen { max-width: none; }


/* =====================================================================
   2. LEISTUNGEN (5.4)
   ===================================================================== */
.leistungen__liste {
  display: grid;
  row-gap: var(--abstand-72);
  margin-top: var(--abstand-48);
}

.leistung { align-items: start; row-gap: var(--abstand-32); }
.leistung__nr { margin-bottom: var(--abstand-8); color: var(--rot-tief); }
.leistung__unterzeile {
  margin-top: var(--abstand-8);
  font-weight: var(--text-gewicht-fett);
}
.leistung__unterzeile + p { margin-top: var(--abstand-8); }

/* ---------- Beleg: weisses Blatt mit einem Klebeband ---------------- */
.beleg { position: relative; min-width: 0; }
.beleg__blatt {
  position: relative;
  padding: 20px;
  background: var(--weiss);
  border: 1px solid var(--haarlinie);
  color: var(--navy);
}
.beleg .klebeband { top: -11px; left: 28px; }
.beleg--02 .klebeband { left: auto; right: 32px; }
.beleg--03 .klebeband { left: 42%; }
.beleg--04 .klebeband { left: 18px; }
.beleg .dokument p,
.beleg p.dokument { max-width: none; hyphens: manual; -webkit-hyphens: manual; }

/* ---------- Beleg 01: Zitierstil-Umschalter (6.3) -------------------- */
.zitierstil { margin-bottom: var(--abstand-24); }
.zitierstil legend { margin-bottom: var(--abstand-8); color: var(--navy); }
.zitierstil__optionen { display: flex; }
.zitierstil__option {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 12px;
  border: var(--strich-knopf) solid var(--navy);
  background: var(--papier);
  color: var(--navy);
  font-weight: var(--text-gewicht-fett);
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 160ms linear, color 160ms linear;
}
.zitierstil__option + .zitierstil__option { margin-left: calc(-1 * var(--strich-knopf)); }
.zitierstil__option:first-child { border-radius: var(--radius-knopf) 0 0 var(--radius-knopf); }
.zitierstil__option:last-child  { border-radius: 0 var(--radius-knopf) var(--radius-knopf) 0; }
/* Das echte Radio liegt unsichtbar über dem ganzen Segment (Tippfläche = Segment) */
.zitierstil__option input {
  position: absolute;
  inset: calc(-1 * var(--strich-knopf));
  width: auto;
  height: auto;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.zitierstil__option:has(input:checked) { background: var(--navy); color: var(--papier); }
.zitierstil__option:has(input:focus-visible) {
  z-index: 1;
  outline: var(--strich-fokus) solid var(--rot);
  outline-offset: 3px;
}
@media (hover: hover) {
  .zitierstil__option:hover:not(:has(input:checked)) { background: var(--papier-tief); }
}

/* Seitenausschnitt: linker Rand 2,5 cm mit Masslinie */
.beleg__seite {
  --seitenrand: 52px;
  padding: 18px 20px 24px var(--seitenrand);
}
.beleg__notiz {
  position: relative;
  display: inline-block;
  margin: 0 0 10px 34px;
  font-size: var(--groesse-notiz);
  line-height: 1;
  color: var(--rot);
  rotate: -3deg;
  transform-origin: 0 100%;
  max-width: calc(100% - 34px);   /* Ersatzschrift ist breiter: dann umbrechen statt überlaufen */
}
.beleg__notizpfeil {
  position: absolute;
  left: -72px;
  top: 10px;
  width: 26px;
  height: 35px;
  color: var(--rot);
  rotate: 8deg;
}
.beleg__varianten {
  position: relative;
  display: grid;
  font-size: var(--groesse-dokument);
  line-height: var(--dokument-zeilenhoehe);
}
.beleg__masslinie {
  position: absolute;
  top: calc(.725em - 6.5px);
  left: calc(-1 * var(--seitenrand));
  width: calc(var(--seitenrand) - 8px);
  height: 13px;
  color: var(--navy);
  stroke-width: 1px;
}
/* Varianten liegen übereinander: Die Höhe richtet sich nach der längsten
   (Fussnoten), beim Umschalten springt nichts. Ohne JS per :has(). */
.beleg__variante {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms linear, visibility 0s linear 160ms;
}
.beleg--01:has(input[value="apa"]:checked) .beleg__variante[data-stil="apa"],
.beleg--01:has(input[value="harvard"]:checked) .beleg__variante[data-stil="harvard"],
.beleg--01:has(input[value="fussnoten"]:checked) .beleg__variante[data-stil="fussnoten"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 160ms linear, visibility 0s linear 0s;
}
@supports not selector(:has(*)) {
  .beleg__variante[data-stil="apa"] { opacity: 1; visibility: visible; }
}
.beleg__fussnote {
  position: relative;
  margin-top: var(--abstand-16);
  padding-top: 6px;
  font-size: .9375rem;
  line-height: 1.4;
}
.beleg__fussnote::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  border-top: 1px solid var(--navy);
}
.beleg__fussnote sup { font-size: .75em; }

/* ---------- Beleg 02: Korrekturfahne (6.4) --------------------------- */
.fahne { padding: 26px 20px 22px; cursor: pointer; }
.fahne__satz {
  font-size: clamp(1.0625rem, .98rem + .35vw, 1.1875rem);
  line-height: 2.2;
  animation: fahne-ein 160ms linear;
}
@keyframes fahne-ein { from { opacity: 0; } }
/* Einfügestelle: Nullbreite, Grundlinie = Unterkante */
.korr {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: .14em;       /* etwas Luft: der Keil steht in der Lücke, nicht auf dem Buchstaben */
}
.korr__zeichen {
  position: absolute;
  left: -.36em;
  top: -.2em;
  width: .72em;
  height: .8em;
  color: var(--rot);
  stroke-width: var(--strich-icon);
  overflow: visible;
}
/* Einfügung über der Zeile, mittig über dem Keil (wie im Korrekturabzug) */
.korr__text {
  position: absolute;
  left: 0;
  translate: -50% 0;
  bottom: .5em;
  font-weight: 700;
  font-size: 1.45em;
  line-height: 1;
  color: var(--rot);
}
.korr-streich { position: relative; }
.korr__zeichen--streich {
  left: -.2em;
  top: auto;
  bottom: 0;
  width: .92em;
  height: 1em;
}
.fahne__umschalten { margin-top: var(--abstand-16); --knopf-hoehe: 44px; }
/* Ohne JavaScript: kein toter Umschalter – beide Fassungen stehen
   untereinander, mit sichtbarem «Vorher:» / «Nachher:» */
.no-js .fahne { cursor: auto; }
.no-js .fahne__umschalten { display: none; }
.no-js .fahne__satz--nachher[hidden] { display: block !important; }
.no-js .fahne__satz > .visuell-versteckt {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  font-weight: 600;
}

/* ---------- Beleg 03: Absatz → Folie --------------------------------- */
.beleg--03 .beleg__absatz { font-size: var(--groesse-dokument); line-height: var(--dokument-zeilenhoehe); }
.beleg__pfeil {
  width: 34px;
  height: 46px;
  margin: 10px 0 12px 38%;
  rotate: -12deg;
}
.folie {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--haarlinie);
  background: var(--weiss);
}
.folie__titel {
  max-width: none;
  padding: 4.2cqi 5.5cqi 3.8cqi;
  background: var(--navy);
  color: var(--papier);
  font-size: max(.8125rem, 5.4cqi);   /* Schrift: Klasse .titel-h3 im Markup */
  line-height: 1.12;
  letter-spacing: 0;
  text-transform: none;
}
.folie .folie__punkte {
  display: grid;
  gap: 2.2cqi;
  padding: 5cqi 5.5cqi;
  font-size: max(.75rem, 4.2cqi);
  line-height: 1.3;
}
.folie__punkte li { display: flex; gap: 2.6cqi; }
.folie__punkte li::before {
  content: "";
  flex: none;
  width: 1.5cqi;
  height: 1.5cqi;
  min-width: 5px;
  min-height: 5px;
  margin-top: .5em;
  background: var(--navy);
}
.folie__nr {
  position: absolute;
  right: 4.5cqi;
  bottom: 3.5cqi;
  font-size: max(.6875rem, 3.1cqi);
  line-height: 1;
  color: var(--grau);
}

/* ---------- Beleg 04: Gliederung mit Anmerkungen --------------------- */
.beleg--04 .beleg__blatt { padding: 8px; }
.beleg__screenshot { display: block; width: 100%; height: auto; }
.gliederung__titel {
  margin-bottom: var(--abstand-8);
  font-weight: 600;
  font-size: var(--groesse-dokument);
}
.gliederung {
  display: grid;
  font-size: var(--groesse-dokument);
  line-height: 1.95;
}
.gliederung li { display: flex; flex-wrap: wrap; align-items: center; min-height: 1.95em; }
.gliederung li:not(.gliederung__unter) { font-weight: 600; }
.gliederung__unter { padding-left: 1.6em; }
.gliederung__nr { flex: none; min-width: 2.4em; font-variant-numeric: tabular-nums; }
.gliederung__unter .gliederung__nr { min-width: 2.6em; }
.gliederung__anmerkung {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  color: var(--rot);
}
.gliederung__klammer {
  flex: none;
  width: 8px;
  height: 1.6em;
  stroke-width: var(--strich-icon);
}
.gliederung__anmerkung .notiz {
  font-size: var(--groesse-notiz);
  line-height: 1;
  rotate: -4deg;
  white-space: nowrap;
}
.gliederung__verschieben {
  flex: none;
  width: 18px;
  height: 18px;
  margin-left: 10px;
  color: var(--rot);
  stroke-width: var(--strich-icon);
  rotate: -18deg;
}

/* ---------- 760–1023: gestapelt, Belege in Spalten 2–8 --------------- */
@media (min-width: 760px) {
  .leistungen__liste { row-gap: var(--abstand-104); margin-top: var(--abstand-72); }
  .leistung__text { grid-column: 1 / span 6; }
  .beleg { grid-column: 2 / -1; }
  .beleg--02 { width: 86%; justify-self: end; }
  .beleg--03 { width: 92%; }
  .beleg--04 { width: 78%; }
  .beleg__blatt { padding: 24px; }
  .beleg__seite { --seitenrand: 72px; padding: 22px 28px 28px var(--seitenrand); }
  .fahne { padding: 30px 28px 26px; }
}

/* ---------- Desktop: Text Spalten 1–5, Beleg 7–12 --------------------- */
@media (min-width: 1024px) {
  .leistungen__liste { margin-top: var(--abstand-104); }
  .leistung { row-gap: 0; }
  .leistung__text { grid-column: 1 / span 5; grid-row: 1; }
  .beleg { grid-column: 7 / -1; grid-row: 1; }
  .beleg__blatt { padding: 28px; }
  .beleg .klebeband { top: -14px; }
  .beleg__seite { --seitenrand: 84px; padding: 24px 32px 32px var(--seitenrand); }
  .fahne { padding: 34px 32px 28px; }

  /* bewusst unterschiedlich (Tabelle 5.4) – gedreht wird nur das Blatt */
  .beleg--01 .beleg__blatt { rotate: -1deg; }
  .beleg--02 { width: 86%; justify-self: end; margin-top: 24px; }
  .beleg--02 .beleg__blatt { rotate: .8deg; }
  .beleg--03 { width: 92%; margin-top: -16px; }
  .beleg--03 .beleg__blatt { rotate: -.5deg; }
  .beleg--04 { width: 78%; margin-top: 32px; }
  .beleg--04 .beleg__blatt { rotate: 1deg; }
}


/* =====================================================================
   3. ABLAUF (5.5)
   ===================================================================== */
.ablauf { z-index: 1; }   /* Pinselkanten liegen über den Nachbarn */
.ablauf__kante {
  position: absolute;
  left: 0;
  width: 100%;
  height: 24px;
  color: var(--navy);
  pointer-events: none;
}
.ablauf__kante--oben  { top: -23px; }
.ablauf__kante--unten { bottom: -23px; scale: 1 -1; }
.ablauf .titel-h2 { color: var(--papier); }

.ablauf__weg { position: relative; margin-top: var(--abstand-48); }

/* Mobil: Ziffern-Spalte 56 px, Inhalt rechts */
.schritte { display: grid; row-gap: var(--abstand-32); }
.schritt {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: var(--abstand-8);
  align-content: start;
}
.schritt > * { grid-column: 2; }
.schritt__ziffer {
  grid-column: 1;
  grid-row: 1 / span 3;
  position: relative;
  z-index: 1;
  justify-self: center;
  align-self: start;
  min-width: 40px;
  padding-block: 0 6px;
  background: var(--navy);     /* unterbricht die gestrichelte Linie */
  font-size: 3.5rem;
  line-height: 1;
  text-align: center;
  color: var(--rot-hell);
}
.schritt .titel-h3 { padding-top: 14px; color: var(--papier); }
.schritt p { margin-top: var(--abstand-8); color: var(--grau-hell); }
.schritt__verbinder { display: none; }

.kringel { position: relative; }
.kringel__form {
  position: absolute;
  left: -.34em;
  top: -.12em;
  width: calc(100% + .62em);
  height: 1.5em;
  color: var(--rot);
  stroke-width: 2.5px;
}
.schritt__etiketten { display: flex; gap: var(--abstand-12); margin-top: var(--abstand-16); }
.schritt__etiketten .etikett { rotate: -3deg; }
.schritt__etiketten .etikett + .etikett { rotate: 2deg; }

/* gestrichelte Handlinie (mobil senkrecht) */
.ablauf__linie {
  position: absolute;
  z-index: 0;
  left: 22px;
  top: 58px;
  width: 12px;
  height: calc(100% - 58px - 64px);
  color: var(--grau-hell);
  stroke-width: 2px;
  stroke-dasharray: 2 9;
}
.ablauf__ziel {
  display: flex;
  align-items: flex-end;
  gap: var(--abstand-12);
  margin-top: var(--abstand-32);
  margin-left: -8px;
}
.ablauf__berg { flex: none; width: 72px; height: 66px; color: var(--papier); }
.ablauf__abgabe {
  margin-bottom: 6px;
  font-size: 1.625rem;
  line-height: 1;
  color: var(--rot-hell);
  rotate: -4deg;
}

@media (min-width: 760px) {
  .schritte { max-width: 44rem; }
}

/* Desktop: Treppe nach rechts oben */
@media (min-width: 1024px) {
  .ablauf__kopf { max-width: calc((100% - 11 * var(--gap)) / 12 * 8 + 7 * var(--gap)); }
  .ablauf__weg { margin-top: var(--abstand-48); }
  .schritte {
    max-width: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .schritt { display: block; }
  .schritt--1 { margin-top: 144px; }
  .schritt--2 { margin-top: 96px; }
  .schritt--3 { margin-top: 48px; }
  .schritt__ziffer {
    display: block;
    justify-self: start;
    width: 64px;
    min-width: 0;
    padding: 0;
    background: none;
    font-size: 4.5rem;
    text-align: left;
  }
  .schritt .titel-h3 { padding-top: 0; margin-top: var(--abstand-16); }
  .schritt p { max-width: 30ch; }
  .ablauf__linie { display: none; }

  /* Verbinder: von Ziffer i (rechts, Mitte) zu Ziffer i+1 (links, 48 px höher) */
  .schritt__verbinder {
    display: block;
    position: absolute;
    top: -10px;
    left: 64px;
    width: calc(100% + var(--gap) - 64px - 10px);
    height: 48px;
    color: var(--grau-hell);
    stroke-width: 2px;
    stroke-dasharray: 2 9;
  }
  /* Schritt 4 → Berg (rechtsbündig in Spalte 12, über Schritt 4) */
  .schritt--4 .schritt__verbinder {
    top: -46px;
    left: 58px;
    width: calc(100% - 58px - 118px);
    height: 58px;
  }
  .ablauf__ziel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 4px);
    margin: 0;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 4px;
  }
  .ablauf__berg { width: 120px; height: 110px; }
  .ablauf__abgabe { margin: 6px 0 0; font-size: 2rem; }
}


/* =====================================================================
   4. KLARTEXT (5.6)
   ===================================================================== */
.blatt {
  position: relative;
  z-index: 2;                  /* ragt über die Pinselkante ins Ablauf-Band */
  margin-top: -32px;
  padding: 24px;
  background: var(--weiss);
  color: var(--navy);
}
.blatt .klebeband--6 { top: -9px; left: -12px; }
.blatt .klebeband--7 { top: -9px; right: -12px; }

/* margin-right + knapperer rechter Überstand: Die Ellipse endet in der
   Wortlücke und berührt das «F» von «FÜR» nicht */
.klartext__nicht { position: relative; display: inline-block; margin-right: .08em; }
.klartext__ellipse {
  position: absolute;
  left: -.2em;
  top: -.2em;
  width: calc(100% + .29em);
  height: 1.28em;
  color: var(--rot);
  stroke-width: 3px;
}
.blatt .lead { margin-top: var(--abstand-16); }

.deckblatt {
  max-width: 420px;
  margin-top: var(--abstand-32);
  border-top: 1px solid var(--haarlinie);
  content-visibility: auto;          /* Source Serif erst in der Nähe laden */
  contain-intrinsic-size: auto 120px;
}
.deckblatt__zeile {
  display: grid;
  grid-template-columns: 8.5em minmax(0, 1fr);
  gap: var(--abstand-12);
  padding: 7px 0;
  border-bottom: 1px solid var(--haarlinie);
}
.deckblatt dt { color: var(--grau); }
.deckblatt dd { margin: 0; font-weight: 600; }

.klartext__listen {
  display: grid;
  gap: var(--abstand-32);
  margin-top: var(--abstand-48);
}
.klartext__listentitel {
  padding-bottom: var(--abstand-8);
  border-bottom: 2px solid var(--navy);
  font-size: .9375rem;                /* Schrift: Klasse .label im Markup */
  color: var(--navy);
}
.klartext__liste ul { list-style: none; margin: 0; padding: 0; }
.klartext__liste li {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-12);
  padding: 10px 0;
  border-bottom: 1px solid var(--haarlinie);
  line-height: 1.4;
}
.klartext__liste .icon { margin-top: .08em; }
.klartext__liste--ja .icon { color: var(--rot); }
.klartext__liste--nein .icon { color: var(--navy); }

.hinweis {
  margin-top: var(--abstand-48);
  padding: 16px 20px;
  border-left: 4px solid var(--rot);
  background: var(--papier-tief);
}
.hinweis__titel { font-weight: var(--text-gewicht-fett); }
.hinweis p + p { margin-top: var(--abstand-4); }

@media (min-width: 760px) {
  .blatt { margin-top: -48px; padding: 40px; }
  .klartext__listen { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
}
@media (min-width: 1024px) {
  .blatt {
    grid-column: 2 / span 10;
    margin-top: -72px;
    padding: 64px;
    rotate: -.6deg;
  }
  .blatt .klebeband--6 { top: -12px; left: -18px; }
  .blatt .klebeband--7 { top: -12px; right: -18px; }
  .klartext__listen { column-gap: var(--abstand-48); }
}


/* =====================================================================
   5. MAIL (5.7)
   ===================================================================== */
.mail__raster { align-items: start; }

/* Mobil: Sticker oben rechts neben der H2 */
.mail__kopf { grid-column: 1 / -1; grid-row: 1; padding-right: 140px; }
.mail__kopf .lead { max-width: 20ch; }
.mail__sticker {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: end;
  position: relative;
  z-index: 1;
  width: 128px;
  margin-top: -12px;
  rotate: 7deg;
}
.mail__sticker img { width: 100%; height: auto; }
.mail__sticker .klebeband { top: -8px; left: 50%; translate: -50% 0; }
.mail__etikett {
  position: absolute;
  left: -28px;
  bottom: -16px;              /* unten am Sticker, ohne den QR-Code zu verdecken */
  z-index: 3;
  width: min-content;
  min-width: 7.5em;
  white-space: normal;
  font-size: 1.125rem;
  line-height: 1.1;
  rotate: -11deg;             /* sichtbar −4° (Sticker +7°) */
}
@media not (pointer: coarse) {
  .mail__etikett { display: none; }
}

/* Checkliste (6.5): echte Checkboxen, Kästchen im QR-Rahmen-Stil */
/* content-visibility: erst in der Nähe rechnen (Caveat-Akzent lädt dann).
   Padding + negativer Rand gleich gross: Layout unverändert, aber die
   Fokusringe der Kästchen liegen innerhalb und werden nicht abgeschnitten. */
.checkliste {
  grid-column: 1 / -1;
  position: relative;
  margin-top: var(--abstand-48);
  margin-inline: -10px;
  padding-inline: 10px;
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}
.checkliste .titel-h3 { margin-bottom: var(--abstand-12); }
.checkliste__liste { display: grid; }
.checkliste__liste li + li { border-top: 1px solid var(--haarlinie); }
.checkliste__punkt {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--abstand-16);
  min-height: 56px;
  padding: 8px 0;
  cursor: pointer;
  line-height: 1.35;
}
/* Das echte Kästchen liegt unsichtbar über der ganzen Zeile (Tippfläche) */
.checkliste__box {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.checkliste__kasten {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border: 3px solid var(--navy);
  border-radius: var(--radius-box);
  background: var(--weiss);
  transition: background-color var(--dauer-kurz) linear;
}
.checkliste__haken {
  position: absolute;
  left: 2px;
  top: -10px;
  width: 30px;
  height: 30px;
  color: var(--rot);
  stroke-width: 3px;
  /* 1 2 / 1.2 statt 1 1 / 1: sonst setzt der nächste Strich genau am
     Pfadende an und seine runde Kappe bleibt als Punkt sichtbar */
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.2;
  transition: stroke-dashoffset 250ms var(--kurve-aus);
}
.checkliste__box:checked + .checkliste__kasten .checkliste__haken { stroke-dashoffset: 0; }
.checkliste__box:focus-visible + .checkliste__kasten {
  outline: var(--strich-fokus) solid var(--rot);
  outline-offset: 3px;
}
@media (hover: hover) {
  .checkliste__punkt:hover .checkliste__kasten { background: var(--papier-tief); }
}

/* «Mehr braucht’s nicht.» – mobil rechts unter der Liste */
.checkliste__akzent {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 4px 4px 0 auto;
}
.checkliste__akzent .notiz {
  min-width: 0;
  padding-top: 18px;
  font-size: 1.625rem;
  line-height: 1;
  rotate: -3deg;
}
.checkliste__pfeil {
  flex: none;
  width: 24px;
  height: 32px;
  color: var(--rot);
  scale: 1 -1;               /* zeigt nach links oben auf die Liste */
}

/* Mail-CTA mit Pinselbalken */
.mail__aktion { grid-column: 1 / -1; margin-top: var(--abstand-48); }
.mail__cta-block { position: relative; padding-block: 12px; }
.mail__cta {
  width: 100%;
  gap: 12px;
  padding: 0 32px;
  font-size: 1.1875rem;
}
.mail__striche--a { --striche-drehung: 45deg;  top: -16px; left: 0; }
.mail__striche--b { --striche-drehung: 225deg; bottom: -16px; right: 0; }
@media (hover: hover) {
  .mail__cta-block:hover .mail__striche--a { translate: -3px -3px; }
  .mail__cta-block:hover .mail__striche--b { translate: 3px 3px; }
}

.mail__aktion .adresse--gross { margin-top: var(--abstand-24); gap: var(--abstand-12); }
.mail__hinweis { margin-top: var(--abstand-16); }
.mail__hinweis-touch { display: none; margin-top: var(--abstand-8); }
@media (pointer: coarse) {
  .mail__hinweis-touch { display: block; }
}
.mail__bogen { display: none; }

@media (max-width: 359.98px) {
  .mail__kopf { padding-right: 112px; }
  .mail__sticker { width: 104px; }
}

@media (min-width: 760px) {
  .mail__kopf { grid-column: 1 / span 5; padding-right: 0; }
  .mail__kopf .lead { max-width: 30ch; }
  .mail__sticker { grid-column: 6 / -1; width: 208px; margin-top: -24px; }
  .mail__etikett { left: -40px; bottom: 10px; font-size: 1.125rem; min-width: 0; width: max-content; }
  .checkliste { grid-column: 1 / span 6; }
  .mail__aktion { grid-column: 1 / span 6; }
  .mail__cta-block { width: fit-content; }
  .mail__cta { width: auto; min-width: 360px; }
}

@media (min-width: 1024px) {
  .mail__raster { grid-template-rows: auto auto auto; }
  .mail__kopf { grid-column: 1 / span 6; }
  .mail__sticker {
    grid-column: 9 / -1;
    grid-row: 1 / span 2;
    justify-self: start;
    width: 300px;
    margin-top: calc(-144px - 48px);   /* ragt 48 px über die Abschnitts-Oberkante */
    rotate: 5deg;
  }
  .mail__sticker .klebeband { top: -12px; }
  .checkliste { grid-column: 1 / span 6; grid-row: 2; }
  .mail__aktion { grid-column: 1 / span 7; grid-row: 3; margin-top: var(--abstand-72); }
  .mail__cta { min-width: 400px; }
  /* Bogenpfeil vom Sticker zum Mail-CTA (5.7): abschnitte.js berechnet
     Lage und Form aus Sticker und CTA; Strich wie #bogenpfeil im Hero */
  .mail__raster { position: relative; }
  html.js .mail__bogen.ist-bereit {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    overflow: visible;
    color: var(--navy);
    pointer-events: none;
  }
  .mail__bogen path {
    fill: none;
    stroke: currentColor;
    stroke-width: 3.2px;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}
/* rechts neben dem letzten Punkt, Pfeil zeigt nach links auf die Liste –
   erst, wenn die Checkliste breit genug ist (bei 1280 px überlappte der
   Akzent den letzten Punkt; darum Container statt Viewport) */
.checkliste { container-type: inline-size; }
@container (min-width: 620px) {
  .checkliste__akzent {
    position: absolute;
    right: 10px;                /* = padding-inline der Checkliste */
    bottom: 12px;
    margin: 0;
  }
  .checkliste__akzent .notiz { padding-top: 0; }
  .checkliste__pfeil { scale: 1 1; rotate: 62deg; margin: 6px 6px 0 0; }
}


/* =====================================================================
   6. FAQ (5.8)
   ===================================================================== */
.fragen__kopf { grid-column: 1 / -1; container-type: inline-size; }
.fragen__liste {
  grid-column: 1 / -1;
  margin-top: var(--abstand-h2);
  border-top: 2px solid var(--navy);
}
.frage { border-bottom: 1px solid var(--linie); }
.frage[open] { background: var(--weiss); }
.frage__frage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-16);
  min-height: 56px;
  padding: 16px;
  list-style: none;
  cursor: pointer;
  font-weight: var(--text-gewicht-fett);
  font-size: var(--groesse-gross);
  line-height: 1.3;
  color: var(--navy);
}
.frage__frage::-webkit-details-marker { display: none; }
.frage__frage::marker { content: ""; }
.frage__frage:focus-visible { outline-offset: -3px; }
.frage__chevron {
  color: var(--navy);
  transition: rotate var(--dauer-kurz) var(--kurve-aus);
}
.frage[open] .frage__chevron { rotate: 180deg; }
@media (hover: hover) {
  .frage:not([open]) .frage__frage:hover { background: var(--papier); }
}
.frage__antwort { padding: 0 16px 24px; }
.frage__antwort p { max-width: 60ch; font-size: 1.0625rem; line-height: var(--text-zeilenhoehe); }
.frage[open] .frage__antwort { animation: fahne-ein var(--dauer-kurz) linear; }

@media (min-width: 760px) {
  .fragen__liste { grid-column: 1 / span 7; }
}
@media (min-width: 1024px) {
  .fragen__kopf {
    grid-column: 1 / span 4;
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: 96px;
  }
  /* «BEANTWORTET.» (≈ 6,1 em) muss in 4 Spalten passen */
  .fragen__kopf .titel-h2 { font-size: min(var(--groesse-h1), 100cqi / 6.4); }
  .fragen__liste { grid-column: 6 / -1; grid-row: 1; margin-top: 0; }
}


/* =====================================================================
   7. ZEICHEN-ANIMATIONEN (6.7)
   Startzustände nur mit JS und ohne Reduced-Motion-Vorgabe.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Hero-Bogenpfeil: Linie 500 ms, dann Spitze 150 ms
     (abschnitte.js holt die zwei Pfade aus dem Symbol ins <svg>) */
  html.js [data-pfade-einzeln] path {
    stroke-dasharray: 1 2;
    stroke-dashoffset: 1.2;
    transition: stroke-dashoffset 500ms var(--kurve-aus);
  }
  html.js [data-pfade-einzeln] path + path { transition-duration: 150ms; transition-delay: 500ms; }
  html.js [data-pfade-einzeln].ist-gezeichnet path { stroke-dashoffset: 0; }

  /* Korrekturfahne: Zeichen erscheint, sobald sein Strich gezeichnet ist */
  html.js .korr__text { opacity: 0; transition: opacity 120ms linear 180ms; }
  html.js .korr__zeichen.ist-gezeichnet + .korr__text { opacity: 1; }
}


/* =====================================================================
   8. FORCED COLORS UND DRUCK
   ===================================================================== */
@media (forced-colors: active) {
  .zitierstil__option:has(input:checked) { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .checkliste__kasten { border-color: CanvasText; }
  .ablauf__kante { display: none; }
}

@media print {
  .fahne__umschalten,
  .zitierstil__optionen,
  .mail__cta-block,
  .adresse__kopieren-gross,
  .mail__sticker,
  .mail__bogen,
  .ablauf__kante,
  .ablauf__linie,
  .schritt__verbinder { display: none !important; }
  .ablauf .titel-h2, .schritt .titel-h3 { color: var(--navy); }
  .schritt p, .schritt__ziffer { color: var(--navy); background: none; }
  .blatt { rotate: none; margin-top: 0; }
  .beleg__blatt { rotate: none !important; }
}