@charset "UTF-8";

/* =====================================================================
   STYLE – youngstudy
   =====================================================================
   Tokens (Farben, Raster, Abstände, Radien, Striche, Bewegung),
   Grundstil, Typografie-Rollen, gemeinsame Bausteine (Knöpfe, Label,
   Klebeband, Etikett, Adresszeile, Zeichen-Animation), Header, Hero,
   Abschnitts-Hintergründe, Footer und Sticky-Leiste.

   Schriften: nur über  --schriftrolle: var(--schrift-…);  –
   die Schriftfamilie selbst steht nur in schriftsatz.css.
   Galerie-Stile stehen in galerie.css, Abschnitts-Stile (Leistungen,
   Ablauf, Klartext, Mail, FAQ) in abschnitte.css.

   Breakpoints (mobil zuerst):
     < 760 px   4 Spalten   (Referenz 390)
     ≥ 760 px   8 Spalten   (Referenz 820)
     ≥ 1024 px  12 Spalten  (Referenz 1440), Header sticky
     ≥ 1280 px  Rand 64 px
   ===================================================================== */


/* =====================================================================
   1. TOKENS
   ===================================================================== */
:root {
  color-scheme: light;

  /* Farben (aus dem Sticker gemessen, siehe Spezifikation 2) */
  --papier: #F9F7F5;
  --papier-tief: #F2EEEA;
  --karton: #EBE2DD;
  --weiss: #FFFFFF;
  --navy: #001021;
  --navy-hover: #0A213D;
  --nacht: #0B1018;
  --rot: #CF1A1B;          /* Striche, Häkchen, Fokus, rote Schrift ab 24 px */
  --rot-tief: #AA181C;     /* roter Text unter 24 px */
  --rot-hell: #F0605A;     /* roter Text auf Navy/Nacht */
  --grau: #505A65;
  --grau-hell: #A3A8AE;    /* Sekundärtext auf Navy/Nacht */
  --linie: #898F96;
  --haarlinie: #D6D7D7;
  --buch-blau: #112C50;
  --buch-rot: #D53133;
  --buch-gruen: #1A2C2E;
  --buch-beige: #D1BCB0;
  --klebeband: rgb(209 188 176 / .72);
  --linie-kopf: rgb(0 16 33 / .12);
  --linie-leiste: rgb(0 16 33 / .16);
  --linie-hell: rgb(249 247 245 / .16);
  --schatten-etikett: 0 0 0 1.5px rgb(0 16 33 / .14), 0 1px 1px rgb(0 16 33 / .18);

  /* Raster */
  --spalten: 4;
  --rand: 20px;
  --gap: 12px;
  --satz-max: 1280px;

  /* Abstände – nur diese Werte */
  --abstand-4: 4px;
  --abstand-8: 8px;
  --abstand-12: 12px;
  --abstand-16: 16px;
  --abstand-24: 24px;
  --abstand-32: 32px;
  --abstand-48: 48px;
  --abstand-72: 72px;
  --abstand-104: 104px;
  --abstand-144: 144px;
  --abstand-h2: 24px;      /* H2 → Inhalt: 24 / 32 / 48 */

  /* Formen */
  --radius-rahmen: 18px;   /* Galerie-Rahmen (QR-Rahmen) */
  --radius-box: 7px;       /* Checkbox im QR-Rahmen-Stil */
  --radius-knopf: 12px;
  --radius-ruecken: 3px;
  --strich-rahmen: 5px;
  --strich-knopf: 2px;
  --strich-fokus: 3px;
  --strich-icon: 2.25px;

  /* Bewegung */
  --dauer-kurz: 180ms;
  --dauer-mittel: 280ms;
  --dauer-zeichnen: 500ms;
  --kurve-aus: cubic-bezier(.2, .7, .2, 1);
  --kurve-slap: cubic-bezier(.2, .9, .3, 1.3);

  /* Ebenen */
  --z-kopf: 40;
  --z-leiste: 50;
  --z-etikett: 60;

  /* Masse von Header und Leiste */
  --kopf-hoehe: 56px;
  --leiste-hoehe: 64px;
  --scroll-oben: 16px;
}

@media (max-width: 359.98px) {
  :root { --rand: 16px; }
}
@media (min-width: 760px) {
  :root { --spalten: 8; --rand: 40px; --gap: 20px; --abstand-h2: 32px; }
}
@media (min-width: 1024px) {
  :root {
    --spalten: 12; --gap: 24px; --abstand-h2: 48px;
    --radius-rahmen: 22px; --strich-rahmen: 7px;
    --kopf-hoehe: 64px; --scroll-oben: 80px;
  }
}
@media (min-width: 1280px) {
  :root { --rand: 64px; }
}


/* =====================================================================
   2. GRUNDSTIL
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;               /* nur Sicherheitsnetz (gilt für den Viewport). Nicht zusätzlich
                                     auf body: html + body mit clip meldet Chrome beim Scroll-Anchoring
                                     falsche Layout-Verschiebungen (CLS) */
  scroll-padding-top: var(--scroll-oben);
}
@media (max-width: 1023.98px) {
  html { scroll-padding-bottom: 88px; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--navy);
  --schriftrolle: var(--schrift-text);
  font-weight: var(--text-gewicht);
  font-size: var(--groesse-text);
  line-height: var(--text-zeilenhoehe);
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset, legend { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
svg { overflow: visible; }
button, input, select, textarea {
  --schriftrolle: var(--schrift-text);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  letter-spacing: inherit;
}
button { cursor: pointer; }
[hidden] { display: none !important; }
/* Anker-Abstand oben (16 / 80 px) nur über scroll-padding-top auf html –
   ein zusätzliches scroll-margin auf [id] würde sich dazu addieren */

p { max-width: 62ch; text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; }
strong, b { font-weight: var(--text-gewicht-fett); }
em, i { font-style: normal; font-weight: var(--text-gewicht-fett); }
sup { line-height: 0; }

::selection { background: var(--rot); color: var(--weiss); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

main:focus { outline: none; }

/* Fokus */
:focus-visible {
  outline: var(--strich-fokus) solid var(--rot);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
.ablauf :focus-visible,
.fuss :focus-visible,
.vollbild :focus-visible { outline-color: var(--papier); }

/* Links im Fliesstext */
a { color: inherit; }
p a:not(.knopf),
li a:not(.knopf),
dd a:not(.knopf) {
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
p a:not(.knopf):hover,
li a:not(.knopf):hover { color: var(--rot-tief); }
.ablauf p a:not(.knopf):hover,
.fuss a:not(.knopf):hover { color: var(--rot-hell); }

/* Unsichtbar, aber für Screenreader lesbar */
.visuell-versteckt {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.markierbar { -webkit-user-select: all; user-select: all; }

/* Wortgruppe nicht umbrechen (z. B. «Mail-App») */
.ohne-umbruch { white-space: nowrap; }


/* =====================================================================
   3. TYPOGRAFIE-ROLLEN
   ===================================================================== */

/* Titel H2 – Abschnittstitel */
.titel-h2 {
  --schriftrolle: var(--schrift-titel);
  font-stretch: var(--titel-breite);
  font-weight: var(--titel-gewicht);
  font-size: var(--groesse-h1);
  line-height: var(--titel-zeilenhoehe);
  letter-spacing: var(--titel-laufweite);
  text-transform: uppercase;
  text-wrap: balance;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Titel H3 – Leistungen, Ablauf-Schritte, Checkliste */
.titel-h3 {
  --schriftrolle: var(--schrift-titel);
  font-stretch: var(--titel-breite-h3);
  font-weight: var(--h3-gewicht);
  font-size: var(--groesse-h3);
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Label – Kicker über H2, Meta, Etiketten */
.label,
.kicker {
  --schriftrolle: var(--schrift-titel);
  font-stretch: var(--titel-breite-label);
  font-weight: var(--label-gewicht);
  font-size: var(--groesse-mini);
  line-height: 1.2;
  letter-spacing: var(--label-laufweite);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.kicker {
  display: block;
  margin-bottom: var(--abstand-12);
  color: var(--rot-tief);
}
.kicker + .titel-h2 { margin-top: 0; }

/* Ziffern – Zähler, Seitenzahlen */
.ziffern {
  --schriftrolle: var(--schrift-titel);
  font-stretch: var(--ziffern-breite);
  font-weight: var(--ziffern-gewicht);
  font-size: var(--groesse-klein);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Wortmarke «youngstudy» */
.wortmarke {
  --schriftrolle: var(--schrift-titel);
  font-stretch: var(--titel-breite-wortmarke);
  font-weight: var(--wortmarke-gewicht);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  text-decoration: none;
  white-space: nowrap;
  color: inherit;
}
.wortmarke__study { position: relative; display: inline-block; }
.wortmarke__strich {
  position: absolute;
  left: -3%;
  top: calc(0.83em + 3px);   /* ≈ 4 px unter der Grundlinie */
  width: 106%;
  max-width: none;           /* sonst deckelt img/svg { max-width: 100% } auf 100 % */
  height: max(4px, .15em);
  color: var(--rot);
  rotate: -2.2deg;            /* steigt um rund 2 px an */
  pointer-events: none;
}

/* Lead – Subline, Intro unter H2 */
.lead {
  --schriftrolle: var(--schrift-text);
  font-weight: var(--text-gewicht);
  font-size: var(--groesse-gross);
  line-height: 1.45;
  max-width: 48ch;
}

/* Klein – Mikrotexte, Footer */
.klein {
  font-size: var(--groesse-klein);
  line-height: 1.45;
}
.grau { color: var(--grau); }

/* Marker (Permanent Marker) – nur die Stellen aus Spezifikation 8.3 */
.marker {
  --schriftrolle: var(--schrift-marker);
  font-weight: 400;
  font-size: var(--groesse-marker);
  line-height: var(--marker-zeilenhoehe);
  letter-spacing: 0;
  text-transform: none;
}

/* Notiz (Caveat) – Korrektur-Akzente */
.notiz {
  --schriftrolle: var(--schrift-notiz);
  font-weight: var(--notiz-gewicht);
  font-size: var(--groesse-notiz);
  line-height: 1.1;
  color: var(--rot);
}

/* Dokument (Source Serif 4) – nur in Belegen und Deckblatt-Angaben */
.dokument {
  --schriftrolle: var(--schrift-dokument);
  font-weight: var(--dokument-gewicht);
  font-size: var(--groesse-dokument);
  line-height: var(--dokument-zeilenhoehe);
  font-style: normal;
}


/* =====================================================================
   4. SATZ UND RASTER
   ===================================================================== */
.satz {
  width: min(100% - 2 * var(--rand), var(--satz-max));
  margin-inline: auto;
}
.raster {
  display: grid;
  grid-template-columns: repeat(var(--spalten), minmax(0, 1fr));
  column-gap: var(--gap);
}
.raster > * { grid-column: 1 / -1; }


/* =====================================================================
   5. BAUSTEINE
   ===================================================================== */

/* ---------- 5.1 Knöpfe ------------------------------------------------
   .knopf                Grundform (48 px hoch)
   .knopf--primaer       Navy gefüllt, Text Papier
   .knopf--rahmen        Outline 2 px Navy (auf hellem Grund)
   .knopf--hell          Outline 2 px Papier (auf Navy/Nacht)
   .knopf--pinsel        Text auf Pinselbalken (Mail-CTA, B3)
   .knopf--klein         40 px sichtbar, Tippfläche 44 px
   .knopf--gross         56 px     .knopf--xl  64 px
   .knopf--icon          quadratisch, nur Icon (aria-label!)
   Farben laufen über --knopf-grund / --knopf-rand / --knopf-farbe.
   ---------------------------------------------------------------------- */
.knopf {
  --knopf-hoehe: 48px;
  --knopf-grund: transparent;
  --knopf-rand: transparent;
  --knopf-farbe: var(--navy);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--knopf-hoehe);
  padding: 0 20px;
  border: var(--strich-knopf) solid var(--knopf-rand);
  border-radius: var(--radius-knopf);
  background: var(--knopf-grund);
  color: var(--knopf-farbe);
  --schriftrolle: var(--schrift-text);
  font-weight: var(--text-gewicht-fett);
  font-size: var(--groesse-text);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color var(--dauer-kurz) var(--kurve-aus),
              border-color var(--dauer-kurz) var(--kurve-aus),
              color var(--dauer-kurz) var(--kurve-aus);
}
.knopf:active { transform: translateY(1px); }
.knopf .icon { color: inherit; }

.knopf--primaer { --knopf-grund: var(--navy); --knopf-rand: var(--navy); --knopf-farbe: var(--papier); }
.knopf--primaer:hover { --knopf-grund: var(--navy-hover); --knopf-rand: var(--navy-hover); }

.knopf--rahmen { --knopf-rand: var(--navy); --knopf-farbe: var(--navy); }
.knopf--rahmen:hover { --knopf-grund: var(--papier-tief); }

.knopf--hell { --knopf-rand: var(--papier); --knopf-farbe: var(--papier); }
.knopf--hell:hover { --knopf-grund: var(--navy-hover); }

.knopf--gross { --knopf-hoehe: 56px; }
.knopf--xl { --knopf-hoehe: 64px; font-size: 1.1875rem; }

.knopf--icon { width: var(--knopf-hoehe); padding: 0; }

/* Klein: sichtbar 40 px, Tippfläche 44 px (Fläche liegt im ::before) */
.knopf--klein {
  --knopf-hoehe: 44px;
  padding: 0 14px;
  border-color: transparent;
  background: none;
  font-size: 1rem;
  isolation: isolate;
}
.knopf--klein::before {
  content: "";
  position: absolute;
  inset: 2px 0;
  z-index: -1;
  border: var(--strich-knopf) solid var(--knopf-rand);
  border-radius: var(--radius-knopf);
  background: var(--knopf-grund);
  transition: background-color var(--dauer-kurz) var(--kurve-aus);
}

/* Pinsel-Knopf: Navy-Pinselform hinter dem Text (Mail-CTA) */
.knopf--pinsel {
  --knopf-farbe: var(--papier);
  isolation: isolate;
  border-color: transparent;
}
.knopf__pinsel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  color: var(--navy);
  pointer-events: none;
}
.knopf--pinsel:hover .knopf__pinsel { color: var(--navy-hover); }

/* ---------- 5.2 Icons (selbst gezeichnete Symbole «i-…») ------------- */
.icon {
  width: 20px;
  height: 20px;
  flex: none;
  stroke-width: var(--strich-icon);
  overflow: visible;
}
.icon--gross { width: 22px; height: 22px; }

/* Symbole vom Sticker (#pinsel-a, #striche, #berg …): nur Farbe setzen,
   Füllung/Kontur ist im Symbol festgelegt */
.strich-svg { overflow: visible; color: var(--navy); pointer-events: none; }

/* ---------- 5.3 Aufmerksamkeitsstriche --------------------------------
   #striche zeigt im Symbol nach LINKS (wie links am QR-Feld).
   Drehung über das Custom Property --striche-drehung:
     links 0° · oben-links 45° · oben 90° · oben-rechts 135°
     rechts 180° · unten-rechts 225° · unten-links -45°
   ---------------------------------------------------------------------- */
.striche {
  position: absolute;
  width: 28px;
  height: 28px;
  rotate: var(--striche-drehung, 0deg);
  transition: translate var(--dauer-kurz) var(--kurve-aus);
}

/* ---------- 5.4 Klebeband (höchstens 8 auf der Seite) ---------------- */
.klebeband {
  position: absolute;
  z-index: 2;
  width: 72px;
  height: 22px;
  background: var(--klebeband);
  clip-path: polygon(0 10%, 3% 0, 97% 8%, 100% 0, 97% 50%, 100% 100%, 3% 92%, 0 100%, 3% 50%);
  rotate: var(--drehung, -4deg);
  pointer-events: none;
}
@media (min-width: 1024px) {
  .klebeband { width: 96px; height: 28px; }
}
/* Feste Drehungen in der Reihenfolge der Spezifikation:
   1 Hero-Fächer · 2–5 Leistungs-Belege · 6–7 Klartext-Blatt · 8 Sticker */
.klebeband--1 { --drehung: -4deg; }
.klebeband--2 { --drehung: 3deg; }
.klebeband--3 { --drehung: -2deg; }
.klebeband--4 { --drehung: 5deg; }
.klebeband--5 { --drehung: -3deg; }
.klebeband--6 { --drehung: -4deg; }  /* Klartext links (5.6) */
.klebeband--7 { --drehung: 5deg; }   /* Klartext rechts (5.6) */
.klebeband--8 { --drehung: 2deg; }

/* ---------- 5.5 Etiketten («Kopiert!», PDF, DOCX, vorher/nachher …) --- */
.etikett {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--weiss);
  color: var(--navy);
  box-shadow: var(--schatten-etikett);
  line-height: 1.25;
  white-space: nowrap;
}
.etikett--marker { --schriftrolle: var(--schrift-marker); font-weight: 400; font-size: 1rem; }
.etikett--label {
  --schriftrolle: var(--schrift-titel);
  font-stretch: var(--titel-breite-label);
  font-weight: var(--label-gewicht);
  font-size: var(--groesse-mini);
  letter-spacing: var(--label-laufweite);
  text-transform: uppercase;
}
.etikett--notiz {
  --schriftrolle: var(--schrift-notiz);
  font-weight: var(--notiz-gewicht);
  font-size: 1.25rem;
  color: var(--rot-tief);
}

/* «Kopiert!» – klebt oben rechts am Kopier-Knopf (script.js) */
.etikett--kopiert {
  position: absolute;
  top: -14px;
  right: -6px;
  z-index: var(--z-etikett);
  pointer-events: none;
  rotate: -4deg;
  animation: etikett-slap 220ms var(--kurve-slap) both;
  transition: opacity var(--dauer-kurz) linear;
}
.etikett--kopiert.ist-weg { opacity: 0; }
@keyframes etikett-slap {
  from { scale: 1.25; rotate: -8deg; }
  to   { scale: 1;    rotate: -4deg; }
}
[data-kopieren].ist-kopiert .icon { color: var(--rot); }
.fuss [data-kopieren].ist-kopiert .icon { color: var(--rot-hell); }

/* Meldung, wenn Kopieren nicht klappt (script.js) */
.kopier-meldung {
  margin-top: var(--abstand-8);
  padding: 8px 12px;
  border-left: 4px solid var(--rot);
  background: var(--weiss);
  color: var(--navy);
  font-size: var(--groesse-klein);
  line-height: 1.4;
  white-space: normal;
}
.leiste .kopier-meldung {
  position: absolute;
  left: var(--rand);
  right: var(--rand);
  bottom: calc(100% + 8px);
  margin: 0;
  max-width: none;
}

/* ---------- 5.6 Adresszeile -------------------------------------------
   <div class="adresse" data-adressbereich>
     <div class="adresse__zeile">
       <span class="adresse__text markierbar" data-mail="text">…</span>
       <button class="adresse__kopieren" data-kopieren>…</button>
   Container-Abfragen statt Viewport: Die Adresse hat 22 Zeichen.
     ≥ 350 px Breite: Adresse | Kopier-Knopf mit Icon (Handy 390, Desktop)
     < 350 px:        Kopier-Knopf mit Icon rutscht unter die Adresse
   Das Icon bleibt immer sichtbar: beim Kopieren wird es zum roten Häkchen.
   ---------------------------------------------------------------------- */
.adresse { container-type: inline-size; min-width: 0; }
.adresse__zeile {
  display: flex;
  align-items: stretch;
  min-height: 48px;
  border: var(--strich-knopf) solid var(--navy);
  border-radius: var(--radius-knopf);
  background: var(--papier);
}
.adresse__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 10px 0 14px;
  --schriftrolle: var(--schrift-text);
  font-weight: var(--text-gewicht-fett);
  font-size: 1.0625rem;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--navy);
}
.adresse__kopieren {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-left: var(--strich-knopf) solid var(--navy);
  border-radius: 0 calc(var(--radius-knopf) - 2px) calc(var(--radius-knopf) - 2px) 0;
  background: transparent;
  color: var(--navy);
  --schriftrolle: var(--schrift-text);
  font-weight: var(--text-gewicht-fett);
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  touch-action: manipulation;
  transition: background-color var(--dauer-kurz) var(--kurve-aus);
}
.adresse__kopieren:hover { background: var(--papier-tief); }
.adresse__kopieren:active { transform: translateY(1px); }
.adresse__kopieren:focus-visible { outline-offset: 2px; }
.adresse__kopieren .icon { width: 18px; height: 18px; }

@container (max-width: 349.98px) {
  .adresse__zeile { flex-direction: column; }
  .adresse__text { min-height: 46px; padding: 0 14px; font-size: 1rem; }
  .adresse__kopieren {
    min-height: 46px;
    border-left: 0;
    border-top: var(--strich-knopf) solid var(--navy);
    border-radius: 0 0 calc(var(--radius-knopf) - 2px) calc(var(--radius-knopf) - 2px);
  }
}

/* Grosse Adresse (Mail-Abschnitt, B3 ordnet sie an) */
.adresse--gross { display: grid; justify-items: start; gap: var(--abstand-12); }
.adresse__gross {
  max-width: none;
  --schriftrolle: var(--schrift-titel);
  font-stretch: var(--titel-breite);
  font-weight: 800;
  /* 22 Zeichen ≈ 9,9 em breit → nie breiter als der Container */
  font-size: min(var(--groesse-adresse), calc(100cqi / 10.3));
  line-height: 1.05;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: var(--navy);
  hyphens: none;
}

/* Ohne JavaScript kann nichts kopiert werden: Kopier-Knöpfe ausblenden
   (die Adresse bleibt als markierbarer Text und als mailto-Link) */
.no-js [data-kopieren] { display: none; }

/* ---------- 5.7 Sprunglink -------------------------------------------- */
.sprunglink {
  position: absolute;
  top: 6px;
  left: 12px;
  z-index: 100;
  translate: 0 -150%;
}
.sprunglink:focus-visible,
.sprunglink:focus { translate: 0 0; }


/* =====================================================================
   6. EINMALIGE ZEICHEN-ANIMATIONEN (Spezifikation 6.7)
   ---------------------------------------------------------------------
   Markup: data-zeichnen="strich | flaeche | flaeche-runter | flaeche-hoch | pop"
   script.js setzt .ist-gezeichnet (Zeitpunkt über data-schwelle,
   data-ausloeser, data-nach, data-verzoegerung; Dauer über data-dauer
   → --zeichnen-dauer).
   Startzustände NUR unter html.js UND prefers-reduced-motion: no-preference.
   «strich» braucht pathLength="1" auf den Pfaden des Symbols.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* 1 2 / 1.2 statt 1 1 / 1: sonst bleibt die runde Kappe des nächsten
     Strichs als Punkt am Pfadende sichtbar */
  html.js [data-zeichnen="strich"] {
    stroke-dasharray: 1 2;
    stroke-dashoffset: 1.2;
    transition: stroke-dashoffset var(--zeichnen-dauer, var(--dauer-zeichnen)) var(--kurve-aus);
  }
  html.js [data-zeichnen^="flaeche"] {
    transition: clip-path var(--zeichnen-dauer, var(--dauer-zeichnen)) var(--kurve-aus);
  }
  html.js [data-zeichnen="flaeche"]        { clip-path: inset(-30% 100% -30% -30%); }
  html.js [data-zeichnen="flaeche-runter"] { clip-path: inset(-30% -30% 100% -30%); }
  html.js [data-zeichnen="flaeche-hoch"]   { clip-path: inset(100% -30% -30% -30%); }
  html.js [data-zeichnen="pop"] {
    scale: .6;
    opacity: 0;
    transition: scale var(--zeichnen-dauer, var(--dauer-kurz)) var(--kurve-slap),
                opacity 120ms linear,
                translate var(--dauer-kurz) var(--kurve-aus);
  }

  html.js [data-zeichnen="strich"].ist-gezeichnet { stroke-dashoffset: 0; }
  html.js [data-zeichnen^="flaeche"].ist-gezeichnet { clip-path: inset(-30% -30% -30% -30%); }
  html.js [data-zeichnen="pop"].ist-gezeichnet { scale: 1; opacity: 1; }
}


/* =====================================================================
   7. HEADER (5.1)
   ===================================================================== */
.kopf {
  position: relative;
  z-index: var(--z-kopf);
  height: var(--kopf-hoehe);
  background: var(--papier);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dauer-kurz) linear;
}
.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-12);
  height: 100%;
}
.kopf__wortmarke {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: -2px;
  padding-bottom: 4px;
  font-size: 1.5rem;
}
.kopf__kontakt {
  display: flex;
  align-items: center;
  gap: var(--abstand-12);
}
.kopf__adresse,
.kopf__kopieren { display: none; }
.kopf__mail { margin-right: -2px; }

@media (min-width: 1024px) {
  .kopf {
    position: sticky;
    top: 0;
  }
  .kopf.ist-gescrollt { border-bottom-color: var(--linie-kopf); }
  .kopf__wortmarke { font-size: 1.75rem; }
  .kopf__adresse {
    display: block;
    margin-right: var(--abstand-4);
    font-weight: var(--text-gewicht-fett);
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap;
  }
  .kopf__kopieren { display: inline-flex; }
  .kopf__kontakt { gap: var(--abstand-8); }
}


/* =====================================================================
   8. HERO (5.2)
   ===================================================================== */
.hero {
  background: var(--papier);
  padding-block: 16px 48px;
}
@media (min-width: 760px)  { .hero { padding-block: 32px 72px; } }
@media (min-width: 1024px) { .hero { padding-block: 48px 104px; } }

.hero__raster {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(var(--spalten), minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
  /* H1-Grösse (Formel 3.4): füllt die Satzbreite, gedeckelt durch Variable und Höhe */
  --h1: max(2.5rem, min(var(--groesse-mega), calc(100cqi / 6.1), 20svh));
}
.hero__raster > * { grid-column: 1 / -1; }

/* Kicker (Marker) mit rotem Unterstrich */
.hero__kicker {
  position: relative;
  justify-self: start;
  max-width: 100%;
  padding-bottom: .5em;
  font-size: min(var(--groesse-marker), calc(100cqi / 15.6));
  line-height: 1.1;
  white-space: nowrap;
  color: var(--navy);
}
.hero__kicker-text { display: block; }
.hero__unterstrich {
  position: absolute;
  left: -4%;                /* 8 % breiter als der Text, mittig (5.2) */
  bottom: .06em;
  width: 108%;
  max-width: none;          /* sonst deckelt img/svg { max-width: 100% } auf 100 % */
  height: .42em;
  color: var(--rot);
  rotate: -.7deg;           /* steigt um rund 4 px an */
  transform-origin: 0 50%;
}

/* H1 in drei festen Zeilen */
.hero__titel {
  margin-top: var(--abstand-12);
  --schriftrolle: var(--schrift-titel);
  font-stretch: var(--titel-breite);
  font-weight: var(--titel-gewicht);
  font-size: var(--h1);
  line-height: var(--titel-zeilenhoehe);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--navy);
}
.hero__titel > span { white-space: nowrap; }
/* Zeilen 1 und 2 als Text mit festem Umbruch statt als Blöcke: So ist die
   Headline EIN Textblock und das grösste Element im ersten Bild (LCP).
   Als drei Blöcke gewann am Handy die Subline. Darstellung identisch. */
.hero__titel > span:not(.pinsel)::after { content: "\A"; white-space: pre; }
/* Zeile 1 ist fast doppelt so lang wie die anderen und passt unter 1024 px
   (H1-Grösse 100cqi / 6.1) nicht in die Breite: dort zweizeilig umbrechen. */
@media (max-width: 1023.98px) {
  .hero__umbruch::before { content: "\A"; white-space: pre; }
}
/* Zeile 3 auf dem Pinselbalken (#pinsel-a).
   Werte gegenüber Spezifikation 5.2 nachgemessen (scratchpad pinsel2.py):
   Die Pinselform ist oben links abgerundet und rechts oben eingekerbt –
   mit .08em/.22em ragten die oberen Ecken von «I» und «M» über den Rand.
   Jetzt liegt die Schrift bei 320–1920 px vollständig auf dem Balken
   (mind. 2,7 px Abstand zum Rand) und der Balken bleibt ≥ 8 px unter Zeile 2. */
.hero__titel > .pinsel {
  display: inline-block;
  position: relative;
  isolation: isolate;
  margin-top: .14em;
  padding: .14em .46em .04em .26em;
  color: var(--papier);
}
.pinsel__balken {
  position: absolute;
  top: -9%;
  left: -3%;
  width: 105%;
  height: 113%;
  z-index: -1;
  color: var(--navy);
  pointer-events: none;
}

/* Linke Spalte: Subline, CTA, Versprechen, Zweit-CTA.
   Eigener Container: Zweit-CTA (6cqi) richtet sich nach der Spaltenbreite */
.hero__links { container-type: inline-size; min-width: 0; }
.hero__sub {
  margin-top: var(--abstand-16);
  max-width: 34ch;
}

.cta {
  position: relative;
  margin-top: var(--abstand-24);
  container-type: inline-size;
}
.cta__reihe {
  display: grid;
  gap: var(--abstand-8);
}
.cta__mail { width: 100%; }
.cta__hinweis {
  margin-top: var(--abstand-8);
  max-width: none;       /* nicht 62ch: ch hängt an der Schrift, beim Schrifttausch brach der Text sonst um (CLS) */
  color: var(--grau);
}
.cta__striche--a {
  /* mobil: über dem Mail-Knopf, rechts aussen, Fächer nach oben-rechts */
  --striche-drehung: 135deg;
  top: -25px;
  right: 2px;
  width: 24px;
  height: 24px;
}
.cta__striche--b { display: none; }
@media (hover: hover) {
  .cta:hover .cta__striche--a { translate: 3px -3px; }
}

/* CTA als Reihe, sobald der Block breit genug ist (Desktop) */
@container (min-width: 600px) {
  .cta__reihe {
    grid-template-columns: minmax(240px, auto) minmax(0, 1fr);
    gap: var(--abstand-12);
  }
  .cta__reihe .knopf { --knopf-hoehe: 60px; padding: 0 28px; }
  .cta__reihe .adresse__zeile { min-height: 60px; }
  .cta__mail { width: auto; }
}

/* Versprechen */
.versprechen {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: var(--abstand-16);
  font-weight: var(--text-gewicht-fett);
  font-size: var(--groesse-klein);
  line-height: 1.4;
}
.versprechen li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.versprechen__haken.icon {
  width: 14px;
  height: 14px;
  color: var(--rot);
}

/* Zweit-CTA mit Bogenpfeil */
.hero__zweit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 20px;
  font-size: min(var(--groesse-marker), 6cqi);
  color: var(--navy);
  text-decoration: none;
}
.hero__zweit:hover { color: var(--navy-hover); }
.hero__zweit-text { min-width: 0; }
.hero__bogenpfeil {
  flex: none;
  width: 28px;
  height: 36px;
  margin-top: .35em;
  transition: translate var(--dauer-kurz) var(--kurve-aus);
}
.hero__zweit:hover .hero__bogenpfeil,
.hero__zweit:focus-visible .hero__bogenpfeil { translate: 0 3px; }

/* Fächer-Platz (Inhalt: B2) – unter 760 px aus, damit nichts lädt */
.hero__faecher { display: none; position: relative; }

/* ---------- 820 ---------- */
@media (min-width: 760px) {
  .hero__links { grid-column: 1 / span 5; }
  .hero__sub { margin-top: var(--abstand-24); }
  .hero__faecher {
    display: block;
    grid-column: 6 / -1;
    grid-row: 3;
    margin-top: var(--abstand-24);
  }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  .hero__raster {
    grid-template-rows: auto auto 1fr;
    --h1: min(var(--groesse-mega), calc(74.5cqi / 6.1), 15.5svh);
  }
  /* Desktop etwas knapper, damit bei 1440 × 800 H1, CTA-Block und
     Versprechen ohne Scrollen sichtbar sind (5.2 «Höhe Desktop») */
  .hero__kicker { grid-column: 1 / span 7; padding-bottom: .42em; }
  .hero__titel { grid-column: 1 / span 9; grid-row: 2; }
  .hero__links {
    grid-column: 1 / span 7;
    grid-row: 3;
  }
  .hero__sub {
    margin-top: var(--abstand-16);
    /* Spalten 1–6 innerhalb der 7 Spalten der linken Seite */
    max-width: calc((600% - var(--gap)) / 7);
  }
  .cta {
    margin-top: var(--abstand-24);
    /* Spalten 1–6 (5.2). Knopf (240) + Adresszeile brauchen mind. 620 px
       nebeneinander – darunter bleibt die volle linke Spalte (1024–1279). */
    max-width: max(calc((600% - var(--gap)) / 7), 620px);
  }
  .cta__striche--a {
    --striche-drehung: 45deg;          /* oben-links, diagonal wie am QR-Rahmen */
    top: -26px;
    left: -26px;
    right: auto;
    width: 26px;
    height: 26px;
  }
  .cta__striche--b {
    --striche-drehung: 225deg;         /* unten-rechts */
    display: block;
    top: 62px;
    right: -26px;
    width: 26px;
    height: 26px;
  }
  .cta:hover .cta__striche--a { translate: -3px -3px; }
  .cta:hover .cta__striche--b { translate: 3px 3px; }
  .versprechen { margin-top: var(--abstand-12); }
  .hero__zweit { margin-top: var(--abstand-12); }
  .hero__bogenpfeil { rotate: 180deg; margin-top: -.4em; }
  .hero__zweit:hover .hero__bogenpfeil,
  .hero__zweit:focus-visible .hero__bogenpfeil { translate: 3px -3px; }
  .hero__faecher {
    grid-column: 8 / -1;
    grid-row: 2 / span 2;
    /* Oberkante bündig mit der Oberkante von «IN FORM.» */
    margin-top: calc(var(--h1) * (2 * 0.9 + 0.14));
  }
}
/* 1024–1279: Knopf und Adresszeile stehen untereinander (56 + 8 + 48 px) –
   Striche b gehören dann unter die rechte untere Ecke der Adresszeile */
@container (max-width: 599.98px) {
  .cta__striche--b { top: 114px; }
}


/* =====================================================================
   9. ABSCHNITTE: HINTERGRUND UND RHYTHMUS (4.2)
   Layout im Inneren: galerie.css (Beispiele), abschnitte.css (Rest)
   ===================================================================== */
.beispiele  { background: var(--papier);      padding-block: 72px 88px; }
.leistungen { background: var(--papier);      padding-block: 72px 104px; }
.ablauf     { background: var(--navy);        padding-block: 88px 104px; color: var(--papier); position: relative; }
.klartext   { background: var(--karton);      padding-block: 0 88px; }
.mail       { background: var(--papier);      padding-block: 88px 88px; }
.fragen     { background: var(--papier-tief); padding-block: 72px 72px; }

@media (min-width: 760px) {
  .beispiele  { padding-block: 104px 104px; }
  .leistungen { padding-block: 104px 144px; }
  .ablauf     { padding-block: 104px 144px; }
  .klartext   { padding-block: 0 104px; }
  .mail       { padding-block: 104px 104px; }
  .fragen     { padding-block: 104px 104px; }
}
@media (min-width: 1024px) {
  .beispiele  { padding-block: 144px 144px; }
  .leistungen { padding-block: 144px 144px; }
  .ablauf     { padding-block: 144px 176px; }
  .klartext   { padding-block: 0 144px; }
  .mail       { padding-block: 144px 144px; }
  .fragen     { padding-block: 128px 128px; }
}

/* Performance: Blöcke weit unter dem ersten Bildschirm rechnet der Browser
   erst, wenn sie in die Nähe kommen – so laden auch Caveat und Source Serif
   erst dann (Lighthouse, 12 E). contain-intrinsic-size ist die geschätzte
   Höhe; «auto» merkt sich danach die echte. Nur auf Blöcken ohne Überstand:
   content-visibility schneidet alles ab, was über den Block hinausragt
   (darum nicht auf .ablauf/.klartext/.mail selbst: Pinselkanten, Blatt, Sticker). */
.leistungen     { content-visibility: auto; contain-intrinsic-size: auto 2600px; }
.ablauf > .satz { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.fragen         { content-visibility: auto; contain-intrinsic-size: auto 680px; }
.fuss           { content-visibility: auto; contain-intrinsic-size: auto 860px; }
@media (min-width: 1024px) {
  .leistungen     { contain-intrinsic-size: auto 2250px; }
  .ablauf > .satz { contain-intrinsic-size: auto 700px; }
  .fuss           { contain-intrinsic-size: auto 640px; }
}

/* Abstand H2 → Inhalt */
.titel-h2 + .lead { margin-top: var(--abstand-16); }

/* Auf dunklem Grund */
.ablauf .kicker { color: var(--rot-hell); }
.ablauf .lead { color: var(--grau-hell); }


/* =====================================================================
   10. FOOTER (5.9)
   ===================================================================== */
.fuss {
  background: var(--nacht);
  color: var(--papier);
  padding-block: 56px calc(56px + 72px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 760px) {
  .fuss { padding-block: 72px calc(72px + 72px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 1024px) {
  .fuss { padding-block: 96px 72px; }
}

.fuss__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--abstand-48);
}

/* Slogan + Berg (Berg direkt rechts neben dem Slogan) */
.fuss__slogan {
  container-type: inline-size;
  display: flex;
  align-items: flex-end;
  gap: var(--abstand-24);
}
.fuss__spruch {
  /* immer zwei Zeilen wie auf dem Sticker: «Ziele erreichen.» misst ca. 7,8 em,
     daneben Berg + Abstand (88 px) – wichtig in der halben Spalte bei 760–1023 */
  font-size: min(clamp(1.75rem, 1.34rem + 1.7vw, 2.5rem), calc((100cqi - 88px) / 8));
  line-height: 1.15;
  color: var(--papier);
}
.fuss__leichter { position: relative; display: inline-block; }
.fuss__leichter-strich {
  position: absolute;
  left: -4%;
  top: 100%;
  width: 108%;
  max-width: none;          /* sonst deckelt img/svg { max-width: 100% } auf 100 % */
  height: .2em;
  color: var(--rot);
  rotate: -2deg;
}
.fuss__berg {
  flex: none;
  width: 64px;
  height: 59px;
  margin-bottom: 4px;
  color: var(--papier);
}

/* Wortmarke, Zeile, Kontakt */
.fuss__wortmarke {
  font-size: clamp(2.5rem, 1.94rem + 2.3vw, 4rem);
  color: var(--papier);
}
.fuss__wortmarke .wortmarke__strich { height: max(5px, .12em); top: calc(.83em + 4px); }
.fuss__zeile {
  margin-top: var(--abstand-24);
  max-width: 44ch;
  color: var(--grau-hell);
  font-size: var(--groesse-klein);
  line-height: 1.5;
}
.fuss__kontakt {
  container-type: inline-size;
  margin-top: var(--abstand-24);
}
.fuss__adresszeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  max-width: none;
}
.fuss__mail-label {
  font-size: var(--groesse-klein);
  color: var(--grau-hell);
}
.fuss__adresse {
  padding-block: 9px;             /* Tippfläche ≥ 44 px (27,6 + 18), ohne das Layout zu verschieben */
  margin-block: -9px;
  --schriftrolle: var(--schrift-titel);
  font-stretch: var(--titel-breite);
  font-weight: 800;
  font-size: min(var(--groesse-h3), calc(100cqi / 10.3));
  line-height: 1.2;
  white-space: nowrap;
  color: var(--papier);
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-color: var(--linie);
}
.fuss__adresse:hover { color: var(--rot-hell); text-decoration-color: currentColor; }
.fuss__kopieren { --knopf-hoehe: 44px; margin-top: var(--abstand-12); padding: 0 16px; font-size: 1rem; }

/* Impressum / Datenschutz */
.fuss__rechtliches { border-top: 1px solid var(--linie-hell); }
.fuss__details { border-bottom: 1px solid var(--linie-hell); }
.fuss__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-16);
  min-height: 56px;
  padding: 12px 0;
  list-style: none;
  cursor: pointer;
  font-weight: var(--text-gewicht-fett);
  color: var(--papier);
}
.fuss__summary::-webkit-details-marker { display: none; }
.fuss__summary::marker { content: ""; }
.fuss__summary:hover { color: var(--rot-hell); }
.fuss__chevron { color: var(--papier); transition: rotate var(--dauer-kurz) var(--kurve-aus); }
.fuss__details[open] .fuss__chevron { rotate: 180deg; }
.fuss__text {
  display: grid;
  gap: var(--abstand-12);
  padding: 4px 0 24px;
  font-size: var(--groesse-klein);
  line-height: 1.5;
  color: var(--grau-hell);
  overflow-wrap: anywhere;
}
.fuss__text strong { color: var(--papier); }

/* Schluss: Nach oben | © und Kolophon */
.fuss__schluss {
  display: grid;
  justify-items: start;
  gap: var(--abstand-8);
  font-size: var(--groesse-klein);
  color: var(--grau-hell);
}
.fuss__nachoben {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: var(--text-gewicht-fett);
  color: var(--papier);
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.fuss__nachoben .icon { rotate: 180deg; width: 18px; height: 18px; }
.fuss__vermerk { display: grid; gap: 4px; line-height: 1.5; }
.fuss__vermerk p { max-width: 52ch; }

/* Ab 760: zwei Hälften – bei 8 Spalten 1–4 | 5–8, bei 12 Spalten 1–6 | 7–12
   (zwei gleiche Spuren mit --gap teilen genau auf der Rasterlinie) */
@media (min-width: 760px) {
  .fuss__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .fuss__slogan { align-self: start; }
  .fuss__rechtliches,
  .fuss__schluss {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .fuss__rechtliches { border-top: 0; }
  .fuss__details { border-bottom: 0; border-top: 1px solid var(--linie-hell); }
  .fuss__vermerk { padding-top: 10px; }   /* erste Zeile auf Höhe von «Nach oben» */
}
@media (min-width: 1024px) {
  .fuss__raster { row-gap: var(--abstand-72); }
  .fuss__slogan { gap: var(--abstand-32); }
  .fuss__berg { width: 96px; height: 88px; margin-bottom: 6px; }
  .fuss__kontakt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
  .fuss__kopieren { margin-top: 0; }
  .fuss__schluss { margin-top: calc(-1 * var(--abstand-32)); }
}


/* =====================================================================
   11. STICKY-LEISTE (5.10, nur < 1024 px)
   ===================================================================== */
.leiste {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-leiste);
  display: flex;
  align-items: center;
  gap: var(--abstand-12);
  height: calc(var(--leiste-hoehe) + env(safe-area-inset-bottom, 0px));
  padding: 8px var(--rand) calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--papier-tief);
  border-top: 1px solid var(--linie-leiste);
  translate: 0 100%;
  visibility: hidden;
  transition: translate var(--dauer-kurz) var(--kurve-aus),
              visibility 0s linear var(--dauer-kurz);
}
.leiste.ist-sichtbar {
  translate: 0 0;
  visibility: visible;
  transition: translate var(--dauer-kurz) var(--kurve-aus),
              visibility 0s linear 0s;
}
.leiste__text {
  flex: none;
  max-width: 7.2em;
  font-weight: var(--text-gewicht-fett);
  font-size: .8125rem;
  line-height: 1.2;
  color: var(--grau);
  hyphens: none;
}
.leiste__mail { flex: 1 1 auto; min-width: 0; padding: 0 16px; }
.leiste__kopieren { flex: none; }
@media (max-width: 359.98px) {
  .leiste__text { display: none; }
}
@media (min-width: 1024px) {
  .leiste { display: none !important; }
}


/* =====================================================================
   12. REDUCED MOTION (6.8)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}


/* =====================================================================
   13. FORCED COLORS (Windows-Kontrastmodus)
   ===================================================================== */
@media (forced-colors: active) {
  .pinsel__balken,
  .knopf__pinsel { display: none; }
  .hero__titel > .pinsel,
  .knopf--pinsel {
    color: ButtonText;
    border: 2px solid ButtonText;
  }
  .knopf--klein::before { border-color: ButtonText; }
  .etikett { border: 1px solid CanvasText; }
}


/* =====================================================================
   14. DRUCK
   ===================================================================== */
@media print {
  .kopf__kontakt,
  .leiste,
  .sprunglink,
  .hero__faecher,
  .cta__striche,
  dialog,
  [data-druck-aus] { display: none !important; }
  html, body { background: #fff; }
  .kopf { position: static; }
  .ablauf, .fuss { background: #fff; color: var(--navy); }
  .ablauf .lead, .fuss__zeile, .fuss__text, .fuss__schluss { color: var(--navy); }
  .fuss__adresse, .fuss__wortmarke, .fuss__spruch, .fuss__summary { color: var(--navy); }
  details > summary .icon { display: none; }
  a[href^="mailto:"] { text-decoration: none; }
}