/* ==========================================================================
   SmartReception v3 · Designsystem "Buttergelb"
   Eine Datei für alle elf Seiten. Kein Build, keine externen Anfragen.
   Regeln und Begründungen: DESIGN-V3.md

   Grundregeln (Kurzfassung)
   - Hell und großzügig. Flächen trennen sich durch Farbe (snow, elfenbein,
     buttergelb, fast schwarz), nicht durch Schatten. Keine Kartenraster mit
     Schatten, keine Verläufe als Fläche.
   - Überschriften Familjen Grotesk in normaler Stärke (400 bis 500), groß,
     Zeilenhöhe um 1.05. Fließtext Schibsted Grotesk 16 bis 18 px.
     IBM Plex Mono klein und in Kleinbuchstaben für Abschnitts-Labels
     (höchstens eins pro Abschnitt), Stempel, Datumsangaben, Platzhalter.
   - Knöpfe sind Pillen. Bilder und Kacheln haben große, weiche Radien.
   - Buttergelb-Text nur auf fast Schwarz. Pink nie als Text (höchstens
     4,3:1), nur für große Stempel und Linien.
   - Jede Seite: <html lang="de" class="no-js">, als erstes Script im <head>
     <script>document.documentElement.className='js'</script>, dann
     styles.css und <script src="app.js" defer></script>. Ohne JS ist alles
     lesbar; Bewegung nur bei prefers-reduced-motion: no-preference.
   - Direkt nach <body> den SVG-Filter für die Stempeltinte (Kopie aus
     index.html), dann Sprunglink, Ankündigungsleiste, Kopf.

   --------------------------------------------------------------------------
   KOMPONENTEN MIT BEISPIEL-HTML
   --------------------------------------------------------------------------

    1. Rahmen und Raster
       <div class="rahmen">…</div>            Inhalt max. 1280 px, Seitenrand
       <div class="rahmen raster">…</div>     12 Spalten ab 1024 px
       Spalten: Klassen .sp-1-7, .sp-8-13 usw. (Rasterlinien, 1-7 = Spalten
       1 bis 6). Unter 1024 px laufen alle Kinder einspaltig.

    2. Ankündigungsleiste (jede Seite, ganz oben, nach dem Sprunglink)
       <aside class="leiste" aria-label="Ankündigung"><div class="rahmen leiste__innen">
         <p class="leiste__text"><span class="label label--klammer leiste__label">pilot</span>
           Vier Wochen testen, mit Ihren echten Anfragen.</p>
         <a class="leiste__knopf" href="pilot.html">Zum Pilot <svg class="pfeil" …></a>
       </div></aside>

    3. Kopf: schwebende Pille, sticky (siehe index.html, <header class="kopf">)
       Links Marke als Logo-SVG mit Wortmarke aus Pfaden (kein Text daneben):
         <a class="marke" href="index.html"><picture>
           <source media="(max-width: 359px)" srcset="assets/logo/zeichen.svg" width="64" height="64">
           <img class="marke__logo" src="assets/logo/logo.svg" alt="SmartReception" width="378" height="64">
         </picture></a>
       Unter 360 px nur das Zeichen. Fußzeile ohne <picture> mit
       logo-hell.svg (auf Schwarz), Visitenkarte mit logo.svg. Favicon:
       zeichen.svg plus favicon-32.png und apple-touch-icon.png (180 px).
       Mitte .nav__liste mit Dropdown .nav__gruppe (Hover, Fokus,
       Klick, Escape), rechts .knopf--haupt.knopf--klein. Unter 1024 px:
       <details class="nav-mobil"> (geht ohne JS). Aktive Seite:
       aria-current="page" am Link; bei Beispiele/Hausverwaltung/Handwerk
       zusätzlich class="ist-aktiv" am Auslöser "Beispiele" (erster Eintrag
       im Untermenü: "Alle Beispiele"). app.js setzt .ist-gescrollt.

    4. Abschnitt mit Label
       <section class="abschnitt" aria-labelledby="x-titel"><div class="rahmen">
         <p class="label label--klammer">für wen</p>
         <h2 class="ueberschrift" id="x-titel">…</h2>
         <p class="lead">…</p></div></section>
       Label: Mono, Kleinbuchstaben. .label--klammer setzt "[ … ]" per CSS
       (für Screenreader stumm). Höchstens ein Label pro Abschnitt.
       Flächen: .flaeche-elfenbein, .flaeche-gelb (volle Breite), .flaeche-schwarz.
       .abschnitt--eng: weniger Luft. Typo: .titel (h1), .ueberschrift (h2),
       .zwischen (h3), .text-gross (28 bis 36 px, regular), .lead, .klein, .text-grau.

    5. Knöpfe (Pillen)
       <a class="knopf knopf--haupt" href="kontakt.html">Gespräch anfragen
         <svg class="pfeil" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
           <path d="M4.5 4.5l7 7m0-6v6h-6"/></svg></a>
       .knopf--haupt (fast schwarz, buttergelbe Schrift), .knopf--zweit
       (buttergelb mit Linie), .knopf--umriss (nur Linie), .knopf--hell (auf
       Schwarz), .knopf--text, .knopf--klein. Mehrere: <div class="knopfreihe">.
       Pfeil nur in Knöpfen, die woandershin führen.

    6. Verweis im Text
       <a class="verweis" href="pilot.html">Zum Pilot</a>  (unterstrichen, kleiner Pfeil)

    7. Kachel (Fläche mit großem Radius, ohne Schatten)
       <div class="kachel kachel--elfenbein">…</div>
       Varianten: --elfenbein, --gelb, --weiss, --schwarz, --linie (nur Rand).

    8. Bild (Riso-Illustration auf weißer Kachel)
       <div class="bild" aria-hidden="true"><img src="assets/riso/riso-korb.webp" alt=""
         width="900" height="900" loading="lazy" decoding="async"></div>

    9. Textmarker (nur Buttergelb, einer pro Bildschirm)
       <mark class="markiert">Sie geben frei</mark>

   10. Platzhalter: <span class="ph">[TELEFON]</span>  (gelb, auf Schwarz
       gestrichelter gelber Rahmen)

   11. Stempel (Produktbild, fast schwarz oder pink)
       <span class="stempel stempel--pink" style="--drehung:-8deg">Freigegeben</span>
       <span class="stempel stempel--schwarz stempel--eingang">
         <span class="stempel__kopf">Eingang</span><span class="stempel__datum" data-heute>27 OKT 2026</span></span>
       Größen .stempel--gross, .stempel--mini (mini immer schwarz).
       data-stempel="laden" | "scroll" | "produkt" | "demo" wie in v2.

   12. Status-Pille (Text, nicht nur Farbe)
       <span class="status-pille status-pille--pilot">Im Pilot</span>
       <span class="status-pille status-pille--geplant">Geplant</span>
       .status-pille--hell: auf Schwarz.

   13. Zeilenliste (statt Kartenraster)
       <ul class="zeilen"><li><strong>Titel.</strong> <span>Text</span></li></ul>
       .zeilen--zweispaltig: Titel links, Text rechts (ab 768 px).
       .zeilen--strich: Titel als durchgestrichenes Wort (Sicherheit).
       .zeilen--haken: runder Haken vor jeder Zeile.

   14. Große Bereiche nebeneinander (drei oder zwei Kacheln)
       <ol class="bereiche"><li class="bereich kachel kachel--elfenbein">
         <span class="bereich__nr" aria-hidden="true">1</span>
         <h3 class="bereich__name">Eingang</h3><p>…</p></li></ol>
       .bereiche--zwei für zwei Spalten.

   15. Zahlenleiste (nur echte Fakten)
       <dl class="zahlen"><div class="zahl"><dt class="zahl__text">…</dt>
         <dd class="zahl__wert">4</dd></div></dl>

   16. FAQ: <div class="faq"><details><summary>…</summary>
         <div class="faq__antwort"><p>…</p></div></details></div>

   17. Formular: <div class="feld"><label for="f">Name</label><input id="f"></div>
       <div class="feldreihe">…</div>, Auswahl als Pillen: <fieldset class="feld wahl">
       Kontaktformular (kontakt.html): <form data-kontaktformular data-endpunkt="/api/kontakt"
       action="mailto:…">, Honigtopf <div class="formular__falle" aria-hidden="true">,
       Meldungen als .hinweis.formular__meldung (role="status" bzw. role="alert").

   18. Hinweis: <div class="hinweis"><p class="hinweis__titel">…</p><p>…</p></div>

   19. Utilities: .nur-sr, .klein, .text-grau, .mono, .stapel, .mt-1, .mt-2,
       .breit-text (62ch).

   --------------------------------------------------------------------------
   SEITENTEILE
   --------------------------------------------------------------------------
   20. Hero (Startseite): .hero, .hero__fuer mit Spaltklappe .klappe,
       .status-zeile mit Pausenknopf [data-klappe-schalter].
   21. Produktfenster [data-produkt] (Endzustand im HTML, app.js spielt ab).
   22. Dienstplan .dienstplan (Zeilenliste mit Status-Pillen).
   23. Versprechen: ganze Buttergelb-Fläche mit großem Satz .versprechen.
   24. Schluss-Kachel .schluss (fast schwarz, Buttergelb-Knopf).
   25. Seitenkopf der Unterseiten .seitenkopf (+ .seitenkopf__bild).
   26. Schrittzeilen (So funktioniert's), Demo [data-demo].
   27. Sortierung, Freigabefeld, Vorschau (Hausverwaltung, Handwerk).
   28. Zollstock-Band (Handwerk, dekorativ).
   29. Wochen (Pilot), Messbogen, Gegenüberstellung, Preisfeld.
   30. Register (FAQ), Kontaktformular, Visitenkarte, Foto-Platzhalter.
   31. Rechtstext (Impressum, Datenschutz).
   32. Einblenden beim Scrollen: data-einblenden (ohne JS immer sichtbar).
   ========================================================================== */

/* ---------- Schriften (lokal, OFL) ---------- */
@font-face {
  font-family: "Familjen Grotesk";
  src: url("assets/fonts/familjen-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("assets/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --snow: #fcfcfc;          /* Hauptfläche */
  --elfenbein: #f1f1ee;     /* zweite Fläche (ivory) */
  --fastschwarz: #171717;   /* Text, Knöpfe, dunkle Flächen */
  --charcoal: #51505a;      /* Nebentext, Linien (7,7:1 auf snow) */
  --buttergelb: #fdfec3;    /* Hauptakzent: Fläche, Pille, Text auf Schwarz */
  --fokus: #2d62ff;         /* Fokusring, mind. 3,6:1 auf allen Flächen */
  --pink: #dd23bb;          /* Zweitakzent: nur Stempel und Linien, nie Text */
  --grau-444: #444444;
  --grau-666: #666666;
  --grau-aaa: #aaaaaa;
  --grau-ccc: #cccccc;
  --grau-eee: #eeeeee;
  --weiss: #ffffff;

  --schrift-titel: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --schrift-text: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --schrift-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --radius-gross: clamp(20px, 2.4vw, 32px);
  --radius: 24px;
  --radius-klein: 14px;

  --rahmen: 1280px;
  --rand: clamp(1rem, 4vw, 3rem);
  --spalt: 1.5rem;
  --luft: clamp(4.5rem, 9vw, 8rem);
  --kopf-abstand: .75rem;

  color-scheme: light;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6.5rem; }
html, body { background: var(--snow); }
body {
  margin: 0;
  color: var(--fastschwarz);
  font-family: var(--schrift-text);
  font-size: 1rem;
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
a { color: var(--fastschwarz); }
strong { font-weight: 600; }
button { font: inherit; color: inherit; }
::selection { background: var(--buttergelb); color: var(--fastschwarz); }

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 4px;
}

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.sprung {
  position: absolute; left: var(--rand); top: -4rem; z-index: 60;
  background: var(--fastschwarz); color: var(--buttergelb);
  padding: .6rem 1.1rem; border-radius: 999px; text-decoration: none; font-weight: 600;
}
.sprung:focus { top: .75rem; }

.nur-sr {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Typografie ---------- */
.titel, .ueberschrift, .zwischen, .text-gross, .hero__titel {
  font-family: var(--schrift-titel);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.titel { font-size: clamp(2.6rem, 1.3rem + 4.4vw, 5.5rem); line-height: 1.02; }
.ueberschrift { font-size: clamp(2.1rem, 1.3rem + 2.7vw, 4rem); line-height: 1.05; }
.zwischen { font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); line-height: 1.1; letter-spacing: -0.01em; }
.text-gross { font-size: clamp(1.5rem, 1.05rem + 1.45vw, 2.25rem); line-height: 1.22; letter-spacing: -0.012em; text-wrap: pretty; }
.lead { font-size: clamp(1.125rem, 1rem + .35vw, 1.3125rem); line-height: 1.5; }
.klein { font-size: .875rem; line-height: 1.5; }
.text-grau { color: var(--charcoal); }
.mono { font-family: var(--schrift-mono); font-weight: 400; }
.breit-text { max-width: 62ch; }
/* Lange Wörter (Handwerksbetrieb, Auftragsverarbeitungsvertrag) auf sehr
   schmalen Bildschirmen trennen statt seitlich überlaufen lassen */
@media (max-width: 379px) {
  .titel, .ueberschrift, .zwischen, .zeilen > li > strong { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
}

.label {
  display: block;
  font-family: var(--schrift-mono);
  font-weight: 400;
  font-size: .8125rem;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: lowercase;
  color: var(--charcoal);
  margin-bottom: 1.5rem;
}
.label--klammer::before { content: "[\00a0"; content: "[\00a0" / ""; }
.label--klammer::after { content: "\00a0]"; content: "\00a0]" / ""; }

.stapel > * + * { margin-top: 1em; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }

/* ---------- Rahmen und Raster ---------- */
.rahmen {
  width: 100%;
  max-width: calc(var(--rahmen) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}
.raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spalt); }
@media (min-width: 1024px) {
  .raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); }
  .raster > * { grid-column: var(--von, 1) / var(--bis, -1); }
  .sp-1-5 { --von: 1; --bis: 5; } .sp-1-6 { --von: 1; --bis: 6; } .sp-1-7 { --von: 1; --bis: 7; }
  .sp-1-8 { --von: 1; --bis: 8; } .sp-1-9 { --von: 1; --bis: 9; } .sp-1-10 { --von: 1; --bis: 10; }
  .sp-1-13 { --von: 1; --bis: 13; } .sp-5-13 { --von: 5; --bis: 13; } .sp-6-13 { --von: 6; --bis: 13; }
  .sp-7-13 { --von: 7; --bis: 13; } .sp-8-13 { --von: 8; --bis: 13; } .sp-9-13 { --von: 9; --bis: 13; }
  .sp-1-4 { --von: 1; --bis: 4; } .sp-4-13 { --von: 4; --bis: 13; }
}

.abschnitt { padding-block: var(--luft); position: relative; }
.abschnitt--eng { padding-block: calc(var(--luft) * .6); }
.abschnitt + .abschnitt:not([class*="flaeche-"]) { padding-top: calc(var(--luft) * .5); }
.hero + .abschnitt { padding-top: calc(var(--luft) * .35); }
.flaeche-elfenbein { background: var(--elfenbein); }
.flaeche-gelb { background: var(--buttergelb); }
.flaeche-schwarz { background: var(--fastschwarz); color: var(--buttergelb); }
.flaeche-schwarz .label, .flaeche-schwarz .text-grau { color: var(--buttergelb); }
.flaeche-schwarz a:not(.knopf) { color: var(--buttergelb); }

/* ---------- Ankündigungsleiste ---------- */
.leiste { background: var(--fastschwarz); color: var(--buttergelb); }
.leiste__innen {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .4rem 1rem;
  min-height: 2.75rem; padding-block: .45rem;
}
.leiste__text { font-size: .875rem; line-height: 1.35; display: flex; align-items: baseline; gap: .25rem .9rem; flex-wrap: wrap; }
.leiste__label { display: inline; margin: 0; color: var(--buttergelb); font-size: .75rem; }
.leiste__knopf {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2rem; padding: .25rem .85rem;
  border-radius: 999px;
  background: var(--buttergelb); color: var(--fastschwarz);
  font-size: .8125rem; font-weight: 500; text-decoration: none;
}
.leiste__knopf:hover { background: var(--weiss); }
.leiste :focus-visible { outline-color: var(--buttergelb); }
@media (max-width: 559px) { .leiste__label { display: none; } }

/* ---------- Kopf: schwebende Pille ---------- */
.kopf {
  position: sticky; top: var(--kopf-abstand); z-index: 40;
  margin-top: var(--kopf-abstand);
}
.kopf__pille {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.75rem;
  padding: .45rem .5rem .45rem 1.25rem;
  background: rgb(241 241 238 / .9);
  border: 1px solid rgb(23 23 23 / .12);
  border-radius: 999px;
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  transition: background-color .2s, border-color .2s;
}
.kopf.ist-gescrollt .kopf__pille { background: rgb(241 241 238 / .97); border-color: rgb(23 23 23 / .2); }
.marke {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--fastschwarz); text-decoration: none; flex-shrink: 0;
}
/* Logo als SVG mit Wortmarke aus Pfaden (assets/logo/logo.svg). Höhe
   bestimmt die Größe, die Breite folgt dem Seitenverhältnis. Unter 360 px
   tauscht <picture> auf das quadratische Zeichen. */
.marke picture { display: block; }
.marke__logo { display: block; width: auto; height: 2rem; flex-shrink: 0; }

.nav-desktop { display: none; align-items: center; gap: 1.5rem; flex: 1; justify-content: flex-end; }
.nav__liste { display: flex; align-items: center; gap: .25rem; margin-inline: auto; }
.nav__liste a, .nav__ausloeser {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--schrift-text);
  font-size: .9375rem;
  font-weight: 400;
  color: var(--fastschwarz);
  text-decoration: none;
  padding: .5rem .85rem;
  border-radius: 999px;
  background: none; border: 0; cursor: pointer;
}
.nav__liste > li > a:hover, .nav__ausloeser:hover { background: rgb(23 23 23 / .06); }
.nav__liste a[aria-current="page"], .nav__ausloeser.ist-aktiv { background: var(--buttergelb); box-shadow: inset 0 0 0 1px rgb(23 23 23 / .18); }
.nav__ausloeser::after { /* Plus wie ein kleines Kreuz */
  content: "+"; font-family: var(--schrift-mono); font-size: 1rem; line-height: 1;
}
.nav__ausloeser[aria-expanded="true"]::after { content: "\2013"; }
.nav__gruppe { position: relative; }
.nav__unter {
  display: none;
  position: absolute; top: calc(100% + .6rem); left: 50%; translate: -50% 0;
  min-width: 15rem;
  background: var(--snow);
  border: 1px solid rgb(23 23 23 / .14);
  border-radius: 20px;
  padding: .4rem;
}
.nav__unter::before { content: ""; position: absolute; left: 0; right: 0; top: -.7rem; height: .7rem; }
.nav__unter a { display: flex; padding: .7rem 1rem; font-size: 1rem; border-radius: 14px; }
.nav__unter a:hover { background: var(--elfenbein); }
.nav__gruppe:hover .nav__unter,
.nav__gruppe:focus-within .nav__unter,
.nav__gruppe.ist-offen .nav__unter { display: block; }
.nav__gruppe.ist-zu .nav__unter { display: none; }

/* Mobil-Menü */
.nav-mobil > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 2.75rem; padding: .4rem 1.1rem;
  border-radius: 999px;
  background: var(--fastschwarz); color: var(--buttergelb);
  font-size: .9375rem; font-weight: 500;
}
.nav-mobil > summary::-webkit-details-marker { display: none; }
.nav-mobil > summary::before {
  content: ""; width: 1rem; height: .6rem;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat;
}
.nav-mobil[open] > summary::before {
  background:
    linear-gradient(currentColor, currentColor) 50% 50% / 100% 1.5px no-repeat;
}
.nav-mobil__panel {
  position: absolute; left: 0; right: 0; top: calc(100% + .5rem);
  background: var(--snow);
  border: 1px solid rgb(23 23 23 / .14);
  border-radius: var(--radius);
  padding: .75rem 1.25rem 1.25rem;
  max-height: calc(100vh - 7rem); overflow-y: auto;
}
.nav-mobil__liste > li { border-bottom: 1px solid var(--grau-eee); }
.nav-mobil__liste a, .nav-mobil__liste summary {
  display: block; padding: .8rem 0;
  font-family: var(--schrift-titel); font-weight: 400; font-size: 1.5rem; letter-spacing: -0.01em;
  color: var(--fastschwarz); text-decoration: none; cursor: pointer;
}
.nav-mobil__liste a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; text-decoration-color: var(--pink); }
.nav-mobil__liste summary { list-style: none; display: flex; justify-content: space-between; align-items: center; }
.nav-mobil__liste summary::-webkit-details-marker { display: none; }
.nav-mobil__liste summary::after { content: "+"; font-family: var(--schrift-mono); font-size: 1.25rem; }
.nav-mobil__liste details[open] > summary::after { content: "\2013"; }
.nav-mobil__liste details ul { list-style: none; margin: 0; padding: 0 0 .75rem 1rem; }
.nav-mobil__liste details a { font-size: 1.1875rem; padding: .45rem 0; }
.nav-mobil__panel .knopf { margin-top: 1.25rem; width: 100%; }

@media (min-width: 1024px) {
  .nav-desktop { display: flex; }
  .nav-mobil { display: none; }
}
@media (max-width: 399px) {
  .kopf__pille { padding-left: .9rem; }
  .marke__logo { height: 1.75rem; }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
  min-height: 3rem;
  padding: .7rem 1.4rem;
  font-family: var(--schrift-text);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s, color .15s, transform .1s;
}
.knopf:active { transform: translateY(1px); }
.pfeil { width: 1rem; height: 1rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.knopf:hover .pfeil, .leiste__knopf:hover .pfeil { transform: translate(1px, 1px); }
.knopf--haupt { background: var(--fastschwarz); color: var(--buttergelb); border-color: var(--fastschwarz); }
.knopf--haupt:hover { background: var(--grau-444); border-color: var(--grau-444); }
.knopf--zweit { background: var(--buttergelb); color: var(--fastschwarz); border-color: var(--fastschwarz); }
.knopf--zweit:hover { background: var(--weiss); }
.knopf--umriss { background: transparent; color: var(--fastschwarz); border-color: var(--fastschwarz); }
.knopf--umriss:hover { background: var(--fastschwarz); color: var(--buttergelb); }
.knopf--hell { background: var(--buttergelb); color: var(--fastschwarz); border-color: var(--buttergelb); }
.knopf--hell:hover { background: var(--weiss); border-color: var(--weiss); }
.knopf--text {
  background: none; border: 0; min-height: 2.75rem; padding-inline: .35rem;
  color: var(--fastschwarz);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;
  text-decoration-color: var(--grau-aaa);
}
.knopf--text:hover { text-decoration-color: var(--fastschwarz); }
.knopf--klein { min-height: 2.75rem; padding: .5rem 1.1rem; font-size: .9375rem; }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: .4; cursor: not-allowed; transform: none; }
.knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }

.verweis {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--fastschwarz);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}
.verweis::after { /* kleiner Pfeil nach rechts, gezeichnet */
  content: ""; flex-shrink: 0;
  width: .45em; height: .45em;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.verweis:hover { text-decoration-thickness: 2px; }
p .verweis, li .verweis { display: inline; }
p .verweis::after, li .verweis::after { display: inline-block; margin-left: .35em; vertical-align: .1em; }

/* ---------- Kachel und Bild ---------- */
.kachel {
  position: relative;
  border-radius: var(--radius-gross);
  padding: clamp(1.5rem, 3.5vw, 3rem);
}
.kachel--elfenbein { background: var(--elfenbein); }
.kachel--gelb { background: var(--buttergelb); }
.kachel--weiss { background: var(--weiss); border: 1px solid var(--grau-eee); }
.kachel--schwarz { background: var(--fastschwarz); color: var(--buttergelb); }
.kachel--schwarz a:not(.knopf) { color: var(--buttergelb); }
.kachel--schwarz .label, .kachel--schwarz .text-grau { color: var(--buttergelb); }
.kachel--linie { border: 1px solid var(--grau-ccc); }

.bild {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-gross);
  background: var(--elfenbein);
  aspect-ratio: 1 / 1;
}
.bild img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }

/* ---------- Textmarker und Platzhalter ---------- */
mark { background: none; color: inherit; }
.markiert {
  background: var(--buttergelb);
  padding: 0 .1em;
  margin: 0 -.04em;
  border-radius: .12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.flaeche-gelb .markiert, .kachel--gelb .markiert { background: var(--weiss); }
.ph {
  font-family: var(--schrift-mono);
  font-weight: 400;
  font-size: .9em;
  background: #fff6a8;
  border-bottom: 1.5px dashed #7a6a00;
  color: var(--fastschwarz);
  padding: 0 .2em;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  overflow-wrap: anywhere;
}
.flaeche-schwarz .ph, .kachel--schwarz .ph, .fuss .ph {
  background: transparent;
  color: var(--buttergelb);
  border: 1.5px dashed var(--buttergelb);
  border-radius: 4px;
}

/* ---------- Stempel ---------- */
.stempel {
  --drehung: -6deg;
  --farbe: var(--fastschwarz);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1em;
  position: relative;
  padding: .32em .7em .3em;
  font-family: var(--schrift-mono);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.05;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-indent: .14em;
  color: var(--farbe);
  border: .14em solid currentColor;
  border-radius: .28em;
  transform: rotate(var(--drehung));
  filter: url("#stempel-tinte");
  mix-blend-mode: multiply;
  opacity: .95;
  white-space: nowrap;
  pointer-events: none;
}
.stempel::after { content: ""; position: absolute; inset: .14em; border: 1.5px solid currentColor; border-radius: .14em; }
.stempel--schwarz { --farbe: var(--fastschwarz); }
.stempel--pink { --farbe: var(--pink); }
.stempel--gross { font-size: clamp(1.5rem, 1rem + 1.8vw, 2.25rem); }
.stempel--mini { --farbe: var(--fastschwarz); font-size: .6875rem; border-width: 2px; padding: .3em .55em; letter-spacing: .1em; filter: none; }
.stempel--mini::after { display: none; }
.stempel--eingang { padding: .35em .8em .45em; }
.stempel--eingang .stempel__kopf { font-size: .7em; letter-spacing: .28em; text-indent: .32em; padding-bottom: .22em; border-bottom: 1.5px solid currentColor; width: 100%; text-align: center; }
.stempel__datum { font-size: 1em; letter-spacing: .06em; text-indent: 0; padding-top: .12em; }
.flaeche-schwarz .stempel, .kachel--schwarz .stempel { mix-blend-mode: normal; }

@keyframes stempelschlag {
  0%   { opacity: 0; transform: rotate(calc(var(--drehung) + 7deg)) scale(1.85); }
  55%  { opacity: 1; transform: rotate(calc(var(--drehung) - 1.5deg)) scale(.93); }
  78%  { transform: rotate(calc(var(--drehung) + .5deg)) scale(1.025); }
  100% { opacity: .95; transform: rotate(var(--drehung)) scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .stempel-bereit [data-stempel]:not(.ist-geschlagen) { opacity: 0; }
  .stempel-bereit [data-stempel].ist-geschlagen,
  [data-stempel="demo"].ist-geschlagen { animation: stempelschlag .5s cubic-bezier(.25, .9, .35, 1.15) both; }
  [data-stempel].ist-still { animation: none; }
}

/* ---------- Status-Pille ---------- */
.status-pille {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .3em .8em;
  border-radius: 999px;
  font-family: var(--schrift-mono);
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}
.status-pille::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.status-pille--pilot { background: var(--fastschwarz); color: var(--buttergelb); }
.status-pille--geplant { background: transparent; color: var(--charcoal); border: 1px dashed var(--charcoal); }
.status-pille--geplant::before { background: transparent; border: 1px solid currentColor; }
.status-pille--hell { background: var(--buttergelb); color: var(--fastschwarz); }

/* ---------- Zeilenliste ---------- */
.zeilen { border-top: 1px solid var(--fastschwarz); }
.zeilen > li {
  padding: 1.15rem 0 1.25rem;
  border-bottom: 1px solid var(--grau-ccc);
}
/* Titelzeile nur in den Varianten mit Titel; in einfachen Listen bleibt <strong> im Satz */
.zeilen--zweispaltig > li > strong, .zeilen--feld > li > strong {
  display: block;
  font-family: var(--schrift-titel); font-weight: 500; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em;
}
.zeilen--zweispaltig > li > span, .zeilen--feld > li > p { display: block; margin-top: .25rem; }
@media (min-width: 768px) {
  .zeilen--zweispaltig > li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; align-items: baseline; }
  .zeilen--zweispaltig > li > span { margin-top: 0; }
}
.kachel .zeilen { border-top-color: var(--fastschwarz); }
.kachel--elfenbein .zeilen > li, .kachel--gelb .zeilen > li { border-bottom-color: rgb(23 23 23 / .16); }
.zeilen > li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Feld: kleine Mono-Beschriftung über dem Titel (Handwerk) */
.zeilen__feld { font-family: var(--schrift-mono); font-size: .75rem; color: var(--charcoal); text-transform: lowercase; letter-spacing: .04em; }
.zeilen > li > p { max-width: 40em; }
.zeilen--zweispaltig > li > strong { font-size: 1.1875rem; }
/* Kopfzeile einer Kachel: Titel links, Stempel/Vermerk rechts */
.kachel__kopf { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1.25rem; }

/* Haken: runder Haken vor jeder Zeile */
.zeilen--haken > li { position: relative; padding-left: 2.75rem; }
.zeilen--haken > li::before {
  content: ""; position: absolute; left: 0; top: 1.2rem;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--fastschwarz);
}
.zeilen--haken > li::after {
  content: ""; position: absolute; left: .62rem; top: 1.55rem;
  width: .45rem; height: .8rem;
  border-right: 2px solid var(--buttergelb); border-bottom: 2px solid var(--buttergelb);
  transform: rotate(40deg);
}
/* Strich: Tätigkeit durchgestrichen (dekorativ) */
.zeilen--strich > li { display: grid; gap: .35rem; align-items: center; }
.strich-wort {
  position: relative; justify-self: start;
  font-family: var(--schrift-titel); font-weight: 400;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1; color: var(--charcoal);
  padding: 0 .1em;
}
.strich-wort::after {
  content: ""; position: absolute; left: -.15em; right: -.2em; top: 54%;
  height: .09em; background: var(--pink); border-radius: .1em; transform: rotate(-3deg);
}
.zeilen--strich > li:nth-child(even) .strich-wort::after { transform: rotate(2.5deg); }
@media (min-width: 640px) { .zeilen--strich > li { grid-template-columns: 11rem minmax(0, 1fr); gap: 2rem; } }

/* ---------- Große Bereiche nebeneinander ---------- */
.bereiche { display: grid; gap: var(--spalt); margin-top: clamp(2.5rem, 5vw, 4rem); }
.bereich { display: flex; flex-direction: column; min-height: 100%; }
.bereich__nr {
  display: block;
  font-family: var(--schrift-titel); font-weight: 400;
  font-size: clamp(4.5rem, 3rem + 5vw, 8rem); line-height: .85; letter-spacing: -0.04em;
}
.bereich__name { margin-top: auto; padding-top: clamp(2.5rem, 6vw, 5rem); font-family: var(--schrift-titel); font-weight: 400; font-size: clamp(1.625rem, 1.3rem + .9vw, 2.125rem); line-height: 1.1; letter-spacing: -0.01em; }
.bereich p { margin-top: .6rem; max-width: 30em; }
.bereich .verweis { margin-top: 1.25rem; align-self: flex-start; }
.bereich .bild { margin: calc(-1 * clamp(1.5rem, 3.5vw, 3rem)) calc(-1 * clamp(1.5rem, 3.5vw, 3rem)) 0; border-radius: var(--radius-gross) var(--radius-gross) 0 0; aspect-ratio: 16 / 10; }
.bereich .bild img { object-fit: contain; }
.bereich .bild + .bereich__name { padding-top: 1.75rem; }
@media (min-width: 768px) {
  .bereiche { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bereiche--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Zahlenleiste ---------- */
.zahlen { display: grid; gap: 0; margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--fastschwarz); }
.zahl { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .75rem; padding: 1.5rem 0 1.75rem; border-bottom: 1px solid var(--grau-ccc); }
.zahl__wert {
  font-family: var(--schrift-titel); font-weight: 400;
  font-size: clamp(3.5rem, 2.4rem + 4vw, 6.5rem); line-height: .9; letter-spacing: -0.04em;
  white-space: nowrap;
}
.zahl__text { max-width: 18em; font-size: 1rem; line-height: 1.45; }
@media (min-width: 640px) { .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spalt); } }
@media (min-width: 1024px) {
  .zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .zahl { border-bottom: 0; padding-right: 1rem; }
  .zahl + .zahl { border-left: 1px solid var(--grau-ccc); padding-left: 1.5rem; }
}

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--fastschwarz); }
.faq details { border-bottom: 1px solid var(--grau-ccc); }
.faq summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center;
  padding: 1.25rem 0;
  font-family: var(--schrift-titel); font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + .6vw, 1.625rem); line-height: 1.2; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid var(--fastschwarz);
  font-family: var(--schrift-mono); font-size: 1.125rem; line-height: 1;
  transition: background-color .15s;
}
.faq details[open] > summary::after { content: "\2013"; background: var(--fastschwarz); color: var(--buttergelb); }
.faq summary:hover::after { background: var(--buttergelb); }
.faq details[open] > summary:hover::after { background: var(--grau-444); }
.faq__antwort { padding: 0 3.25rem 1.6rem 0; max-width: 64ch; }
.faq__antwort > * + * { margin-top: .8em; }

/* ---------- Formular ---------- */
.feld { display: grid; gap: .4rem; }
.feld label, .feld .feld__name { font-size: .875rem; font-weight: 500; color: var(--fastschwarz); }
.feld input, .feld select, .feld textarea {
  width: 100%;
  font-family: var(--schrift-text);
  font-size: 1rem;
  color: var(--fastschwarz);
  background: var(--weiss);
  border: 1px solid var(--grau-aaa);
  border-radius: var(--radius-klein);
  padding: .8rem 1rem;
}
.feld textarea { resize: vertical; min-height: 7rem; line-height: 1.5; }
.feld input:hover, .feld textarea:hover { border-color: var(--fastschwarz); }
.feld input:focus-visible, .feld textarea:focus-visible, .feld select:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-color: var(--fastschwarz); }
.feldreihe { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .feldreihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wahl { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.wahl legend { padding: 0; margin-bottom: .5rem; width: 100%; }
.wahl label {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.75rem; padding: .4rem 1.1rem .4rem .8rem;
  border: 1px solid var(--grau-aaa); border-radius: 999px; background: var(--weiss);
  font-size: 1rem; font-weight: 400; cursor: pointer;
}
.wahl label:has(input:checked) { background: var(--buttergelb); border-color: var(--fastschwarz); }
.wahl input { width: 1.05rem; height: 1.05rem; accent-color: var(--fastschwarz); margin: 0; }

/* ---------- Hinweis ---------- */
.hinweis {
  background: var(--weiss);
  border: 1px solid var(--grau-ccc);
  border-left: 6px solid var(--pink);
  border-radius: var(--radius-klein);
  padding: 1rem 1.25rem;
}
.hinweis__titel { font-weight: 600; }

/* ==========================================================================
   STARTSEITE
   ========================================================================== */

/* ---------- Hero ---------- */
.hero__raster {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 4rem);
  padding-block: clamp(2.25rem, 4.5vw, 4rem) clamp(4rem, 8vw, 7rem);
}
.hero__text { container-type: inline-size; }
.hero__fuer {
  display: flex; align-items: center; gap: .55em;
  font-size: 1.125rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.hero__titel {
  font-size: clamp(2.5rem, 1.35rem + 4.2vw, 5.25rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
}
/* ab 1024 px: höchstens drei Zeilen in der Textspalte */
@media (min-width: 1024px) { .hero__titel { font-size: min(5.25rem, calc(100cqi / 8.6)); } }
.hero__unter { margin-top: clamp(1.5rem, 3vw, 2rem); max-width: 34em; }
.hero .knopfreihe { margin-top: clamp(2rem, 3.5vw, 2.5rem); }
.status-zeile {
  margin-top: 1.25rem; font-size: .875rem; color: var(--charcoal);
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem;
}
.status-zeile p { display: inline-flex; align-items: center; gap: .55rem; }
.status-zeile p::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--pink); flex-shrink: 0; }
.klappe-schalter {
  background: none; border: 0; padding: .3rem 0; min-height: 2rem;
  font-size: .875rem; color: var(--charcoal); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em;
  text-decoration-color: var(--grau-aaa);
}
.klappe-schalter:hover { color: var(--fastschwarz); text-decoration-color: var(--fastschwarz); }
.klappe-schalter[hidden] { display: none; }

/* ---------- Spaltklappe ---------- */
.klappe {
  /* --k: Grundmaß. "Für" plus 16 Zeichen müssen in die Textspalte passen. */
  --k: min(1.6rem, calc((100cqi - 3.25rem) / 11.6));
  --zelle-b: calc(var(--k) * .66);
  --zelle-h: calc(var(--k) * 1.28);
  --zelle-luecke: calc(var(--k) * .038);
  --tafel: #171717;
  --tafel-oben: #2a2a2a;
  display: inline-flex;
  padding: calc(var(--k) * .09);
  background: #0b0b0b;
  border-radius: calc(var(--k) * .16);
  font-family: var(--schrift-titel);
  font-weight: 500;
  letter-spacing: 0;
  font-size: calc(var(--k) * 1.02);
  line-height: 1;
  color: var(--buttergelb);
  flex-shrink: 0;
}
.klappe__zelle {
  position: relative; display: block;
  width: var(--zelle-b); height: var(--zelle-h); line-height: var(--zelle-h);
  text-align: center;
  border-radius: calc(var(--k) * .07);
  background: linear-gradient(var(--tafel-oben) 50%, var(--tafel) 50%);
  perspective: calc(var(--k) * 4);
  overflow: hidden; flex-shrink: 0;
}
.klappe__zelle + .klappe__zelle { margin-left: var(--zelle-luecke); }
.klappe__zelle::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: #000; z-index: 5; }
.klappe--aktiv .klappe__zelle { overflow: visible; color: transparent; }
.kz {
  position: absolute; left: 0; right: 0; height: 50%; overflow: hidden;
  color: var(--buttergelb);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.kz > span { display: block; height: var(--zelle-h); line-height: var(--zelle-h); text-align: center; }
.kz--oben, .kz--klappe-oben { top: 0; background: var(--tafel-oben); border-radius: calc(var(--k) * .07) calc(var(--k) * .07) 0 0; }
.kz--unten, .kz--klappe-unten { bottom: 0; background: var(--tafel); border-radius: 0 0 calc(var(--k) * .07) calc(var(--k) * .07); }
.kz--unten > span, .kz--klappe-unten > span { transform: translateY(-50%); }
.kz--klappe-oben { transform-origin: 50% 100%; z-index: 3; }
.kz--klappe-unten { transform-origin: 50% 0; transform: rotateX(90deg); z-index: 4; visibility: hidden; }

/* ---------- Produktfenster ---------- */
.produkt { position: relative; margin: 0; }
.produkt__unterlage {
  background: var(--buttergelb);
  border-radius: var(--radius-gross);
  padding: clamp(1rem, 3vw, 2.25rem);
}
.produkt__fenster {
  position: relative;
  background: var(--weiss);
  border: 1px solid rgb(23 23 23 / .14);
  border-radius: 20px;
  overflow: hidden;
  font-size: .9375rem;
}
.produkt__leiste {
  display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .75rem;
  padding: .7rem 1rem .7rem 1.2rem;
  border-bottom: 1px solid var(--grau-eee);
  background: var(--elfenbein);
  font-size: .8125rem;
}
.produkt__name { font-family: var(--schrift-titel); font-weight: 500; font-size: 1.0625rem; line-height: 1; }
.produkt__ort { color: var(--charcoal); }
.produkt__beispiel {
  margin-left: auto;
  font-family: var(--schrift-mono); font-size: .75rem;
  background: var(--buttergelb); border: 1px solid rgb(23 23 23 / .3);
  border-radius: 999px; padding: .15rem .65rem;
}
.produkt__schritte {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--grau-eee);
  font-size: .8125rem;
}
.produkt__schritte > li {
  display: flex; align-items: center; gap: .45rem;
  padding: .65rem 1.1rem .6rem;
  color: var(--grau-666);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .3s, border-color .3s;
}
.produkt__nr {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  border: 1px solid currentColor;
  font-family: var(--schrift-mono); font-size: .75rem; line-height: 1;
  transition: background-color .3s, color .3s;
}
.produkt__schritte > li.ist-erreicht { color: var(--fastschwarz); }
.produkt__schritte > li.ist-erreicht .produkt__nr { background: var(--fastschwarz); border-color: var(--fastschwarz); color: var(--buttergelb); }
.produkt__schritte > li.ist-aktiv { border-bottom-color: var(--fastschwarz); }
.produkt__inhalt { display: grid; gap: 1.1rem; padding: 1.35rem 1.4rem 1.4rem; }
.produkt__mail { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: start; }
.produkt__felder { display: grid; gap: .3rem; }
.produkt__felder > div { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: .5rem; align-items: baseline; }
.produkt__felder dt { font-size: .8125rem; color: var(--charcoal); }
.produkt__betreff { font-family: var(--schrift-titel); font-weight: 500; font-size: 1.375rem; line-height: 1.12; letter-spacing: -0.01em; }
.produkt__eingang { font-size: .78rem; --drehung: 6deg; margin: -.2rem -.3rem 0 0; }
.produkt__nachricht { grid-column: 1 / -1; margin-top: .8rem; padding: .8rem 1rem; background: var(--elfenbein); border-radius: var(--radius-klein); line-height: 1.55; }
.produkt__einordnung {
  display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: .5rem; align-items: baseline;
  padding: .6rem 0; border-block: 1px solid var(--grau-eee);
}
.produkt__einordnung .feldname, .produkt__entwurf .feldname { font-size: .8125rem; }
.produkt__entwurf { position: relative; padding: .1rem 0 3.1rem 1rem; border-left: 3px solid var(--fastschwarz); }
.produkt__text { margin-top: .35rem; display: grid; gap: .5rem; line-height: 1.55; }
.produkt__frei { position: absolute; right: .25rem; bottom: .15rem; font-size: clamp(1.15rem, .9rem + .6vw, 1.5rem); --drehung: -8deg; }
.produkt__aktion {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem;
  padding-top: .9rem; border-top: 1px solid var(--grau-eee);
}
.produkt__status { font-size: .875rem; font-weight: 600; color: var(--fastschwarz); }
.produkt__status.ist-wartend { font-weight: 400; color: var(--charcoal); }
.produkt__knopf {
  display: inline-flex; align-items: center; min-height: 2.5rem;
  padding: .45rem 1.2rem;
  border: 1px solid var(--fastschwarz); border-radius: 999px;
  background: var(--fastschwarz); color: var(--buttergelb);
  font-weight: 500; font-size: .9375rem; line-height: 1.2;
  cursor: default; user-select: none;
  transition: background-color .12s, color .12s, transform .12s;
}
.produkt__knopf.ist-gedrueckt { background: var(--grau-444); transform: translateY(2px); }
.produkt__knopf.ist-erledigt { background: transparent; color: var(--fastschwarz); }
.produkt__fuss {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1.25rem;
  margin-top: 1rem;
  font-size: .8125rem; color: var(--charcoal);
}
@media (prefers-reduced-motion: no-preference) {
  .produkt.laeuft [data-teil] { opacity: 0; transform: translateY(.6rem); transition: opacity .45s ease, transform .45s ease; }
  .produkt.laeuft.ist-1 [data-teil="mail"],
  .produkt.laeuft.ist-2 [data-teil="einordnung"],
  .produkt.laeuft.ist-3 [data-teil="entwurf"],
  .produkt.laeuft.ist-4 [data-teil="aktion"] { opacity: 1; transform: none; }
  .produkt.laeuft .produkt__zeile { opacity: 0; transition: opacity .35s ease; }
  .produkt.laeuft.ist-3 .produkt__zeile { opacity: 1; transition-delay: calc(var(--i) * .5s + .25s); }
}
@media (max-width: 479px) {
  .produkt__leiste, .produkt__inhalt { padding-inline: 1rem; }
  .produkt__schritte > li { padding: .55rem .5rem .5rem; gap: .3rem; font-size: .75rem; line-height: 1.2; }
  .produkt__felder > div, .produkt__einordnung { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .produkt__betreff { font-size: 1.25rem; }
}
@media (min-width: 1024px) {
  .hero__raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: start; }
  .hero__text { padding-top: clamp(1rem, 3vw, 3rem); }
  .hero__text { grid-column: 1 / 8; }
  .produkt { grid-column: 8 / 13; }
  .produkt__schritte > li { padding-inline: .7rem; }
}
/* Schmales Produktfenster (Spalten 8 bis 12 bei 1024 bis 1279 px):
   Schritte dürfen umbrechen. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .produkt__schritte > li { padding-inline: .6rem; gap: .35rem; line-height: 1.2; }
}
/* Bis 1439 px bekommt der Eingangsstempel eine eigene, rechtsbündige Zeile,
   damit Von und Betreff die volle Breite haben (sonst bricht die Hausnummer
   in "Beispielweg 4" zwischen 1280 und etwa 1400 px allein um). */
@media (min-width: 1024px) and (max-width: 1439px) {
  .produkt__mail { grid-template-columns: minmax(0, 1fr); }
  .produkt__eingang { justify-self: end; margin: .5rem -.3rem 0 0; }
}
@media (min-width: 1280px) {
  .hero__text { grid-column: 1 / 8; padding-right: 1rem; }
  .produkt__schritte > li { padding-inline: 1rem; white-space: nowrap; }
}

/* Mails im Produktfenster und in Vorschauen */
.dringlich { font-weight: 600; background: var(--buttergelb); border-radius: .25em; padding: 0 .3em; box-shadow: inset 0 0 0 1px rgb(23 23 23 / .25); }
.dringlich--normal, .dringlich--mittel { font-weight: 500; background: none; box-shadow: none; padding: 0; }
.feldname { font-size: .78em; color: var(--charcoal); font-style: normal; }

/* ---------- Was ist SmartReception (großer Fließtext) ---------- */
.wer__text { max-width: 30em; }
.wer__text strong { font-weight: 400; background: var(--buttergelb); border-radius: .12em; padding: 0 .08em; }

/* ---------- Alltag: großes Thema mit großem Bild ---------- */
.alltag__raster { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.alltag__text p + p { margin-top: 1em; }
.alltag__text .lead { margin-top: 1.75rem; }
@media (min-width: 1024px) { .alltag__raster { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }

/* ---------- Dienstplan ---------- */
.dienstplan { container-type: inline-size; }
.dienstplan__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; padding-bottom: 1rem; }
.dienstplan__titel { font-family: var(--schrift-titel); font-weight: 400; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.125rem); line-height: 1; letter-spacing: -0.02em; }
.dienstplan__vermerk { font-family: var(--schrift-mono); font-size: .8125rem; color: var(--charcoal); }
.dienstplan__spalten { display: none; font-family: var(--schrift-mono); font-size: .75rem; color: var(--charcoal); padding: .5rem 0; border-top: 1px solid var(--fastschwarz); }
.dienstplan__liste { border-top: 1px solid var(--fastschwarz); }
.dienstplan__zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "rolle stand" "text text";
  gap: .4rem 1rem; align-items: center;
  padding: 1.15rem 0 1.25rem;
  border-bottom: 1px solid rgb(23 23 23 / .16);
}
.dienstplan__zeile:last-child { border-bottom: 0; padding-bottom: .25rem; }
.dienstplan__rolle { grid-area: rolle; font-family: var(--schrift-titel); font-weight: 500; font-size: 1.375rem; line-height: 1.15; letter-spacing: -0.01em; }
.dienstplan__text { grid-area: text; line-height: 1.5; max-width: 36em; }
.dienstplan__stand { grid-area: stand; justify-self: end; }
.dienstplan__zeile--geplant .dienstplan__rolle, .dienstplan__zeile--geplant .dienstplan__text { color: var(--grau-444); }
/* Drei Spalten mit Kopfzeile, sobald die Kachel breit genug ist (Startseite ab etwa 1200 px).
   Darunter bleibt die Kopfzeile aus und Stand steht neben der Aufgabe. */
@container (min-width: 28rem) {
  .dienstplan__spalten, .dienstplan__zeile { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) 5.5rem; gap: 1rem; }
  .dienstplan__spalten + .dienstplan__liste { border-top-color: var(--grau-ccc); }
  .dienstplan__zeile { grid-template-areas: "rolle text stand"; align-items: baseline; }
  .dienstplan__spalten > :last-child { text-align: right; }
}
@container (min-width: 36rem) {
  .dienstplan__spalten, .dienstplan__zeile { grid-template-columns: minmax(0, 3.5fr) minmax(0, 7fr) 7.5rem; gap: 1.5rem; }
}

/* ---------- Versprechen: ganze Buttergelb-Fläche ---------- */
.versprechen__satz {
  font-family: var(--schrift-titel); font-weight: 400;
  font-size: clamp(2.75rem, 1.2rem + 6vw, 7.5rem); line-height: .98; letter-spacing: -0.04em;
  max-width: 11em; text-wrap: balance;
}
.versprechen__raster { display: grid; gap: 2rem; margin-top: clamp(2.5rem, 5vw, 4.5rem); align-items: end; }
.versprechen__raster .lead { max-width: 34em; }
.versprechen .stempel { justify-self: start; --drehung: -9deg; }
@media (min-width: 1024px) {
  .versprechen__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .versprechen .stempel { justify-self: end; margin-right: 2rem; }
}

/* ---------- Stand ---------- */
.stand__raster { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1024px) { .stand__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--spalt) 4rem; } }

/* ---------- Schluss-Kachel ---------- */
.schluss { display: grid; gap: 2.5rem; align-items: center; overflow: hidden; padding: clamp(2rem, 6vw, 5rem); }
.schluss__titel { font-family: var(--schrift-titel); font-weight: 400; font-size: clamp(2.75rem, 1.3rem + 5.6vw, 7rem); line-height: .98; letter-spacing: -0.04em; color: var(--buttergelb); }
.schluss .lead { margin-top: 1.5rem; max-width: 32em; }
.schluss .bild { max-width: 22rem; justify-self: end; width: 100%; }
@media (min-width: 1024px) { .schluss { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }

/* ==========================================================================
   UNTERSEITEN
   ========================================================================== */
.seitenkopf { padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); }
.seitenkopf__raster { display: grid; gap: clamp(2rem, 5vw, 3rem); align-items: end; }
.seitenkopf .lead { margin-top: 1.75rem; max-width: 36em; }
.seitenkopf__bild { width: min(100%, 26rem); }
.seitenkopf__bild .stempel { position: absolute; left: 8%; bottom: 9%; font-size: clamp(1.1rem, .8rem + 1vw, 1.6rem); }
@media (min-width: 1024px) {
  .seitenkopf__raster { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .seitenkopf__bild { justify-self: end; }
}
@media (max-width: 1023px) { .seitenkopf__bild { width: min(70%, 20rem); margin-left: auto; } }

/* ---------- So funktioniert's: Schrittzeilen ---------- */
.schrittzeilen { border-top: 1px solid var(--fastschwarz); }
.schrittzeile { display: grid; gap: .5rem 2rem; grid-template-columns: minmax(0, 1fr); padding: 2rem 0 2.25rem; border-bottom: 1px solid var(--grau-ccc); }
.schrittzeile__nr { font-family: var(--schrift-titel); font-weight: 400; font-size: clamp(4rem, 3rem + 4vw, 7rem); line-height: .8; letter-spacing: -0.04em; }
.schrittzeile__titel { font-family: var(--schrift-titel); font-weight: 400; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.05; letter-spacing: -0.02em; }
@media (min-width: 900px) { .schrittzeile { grid-template-columns: 8rem minmax(0, 4fr) minmax(0, 7fr); align-items: start; } }

/* ---------- Demo ---------- */
.demo__tisch { margin-top: 2.5rem; border-radius: var(--radius-gross); background: var(--elfenbein); overflow: hidden; }
.demo__hinweis { padding: .9rem clamp(1.25rem, 3vw, 2rem); background: var(--buttergelb); display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.demo__raster { display: grid; grid-template-columns: minmax(0, 1fr); }
.demo__korb { padding: 1.5rem clamp(1.25rem, 3vw, 2rem); border-bottom: 1px solid rgb(23 23 23 / .12); }
.demo__korb-titel { font-family: var(--schrift-titel); font-weight: 500; font-size: 1.375rem; line-height: 1.1; letter-spacing: -0.01em; }
.demo__auswahl-label { margin-top: .25rem; }
.demo__liste { margin-top: .9rem; display: grid; gap: .6rem; }
.demo__mail {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; align-items: start;
  padding: .9rem 1rem 1rem;
  background: var(--weiss);
  border: 1px solid var(--grau-eee);
  border-radius: 16px;
  color: var(--fastschwarz);
  text-decoration: none;
}
.demo__mail:hover { border-color: var(--fastschwarz); }
.demo__mail[aria-current="true"] { background: var(--buttergelb); border-color: var(--fastschwarz); box-shadow: inset 0 0 0 1px var(--fastschwarz); }
.demo__mail > * { grid-column: 1 / -1; }
.demo__mail > .stempel { grid-column: 2; grid-row: 1; justify-self: end; --drehung: 4deg; margin: -.1rem -.2rem .1rem 0; }
.demo__mail-von { grid-column: 1 !important; grid-row: 1; display: block; font-size: .8125rem; color: var(--charcoal); padding-top: .2rem; }
.demo__mail-betreff { display: block; font-family: var(--schrift-titel); font-weight: 500; font-size: 1.125rem; line-height: 1.25; margin-top: .3rem; }
.demo__mail-status { display: block; font-size: .8125rem; margin-top: .35rem; color: var(--charcoal); }
.demo__ausgang { margin-top: 1.5rem; display: none; }
.js .demo__ausgang:not([hidden]) { display: block; }
.demo__ausgang .label { margin-bottom: .6rem; }
.demo__ausgang-liste { display: grid; gap: .6rem; }
.demo__ausgang .demo__mail { background: transparent; border-style: dashed; border-color: var(--grau-aaa); }
.demo__faelle { padding: 1.5rem clamp(1.25rem, 3vw, 2rem) 2rem; display: grid; gap: 2.5rem; }
.demo__fall { display: grid; gap: 1.25rem; scroll-margin-top: 6.5rem; }
.js .demo__fall:not(.ist-gewaehlt) { display: none; }
.demo__fall-titel { font-family: var(--schrift-mono); font-weight: 400; font-size: .8125rem; color: var(--charcoal); text-transform: lowercase; letter-spacing: .03em; }
.mail, .entwurf { background: var(--weiss); border-radius: 20px; padding: clamp(1.1rem, 2.5vw, 1.75rem); position: relative; }
.mail__kopf { display: grid; gap: .75rem 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--grau-eee); }
.mail__kopf dt, .einordnung dt { font-size: .8125rem; color: var(--charcoal); }
.mail__kopf dd { font-weight: 600; }
.mail__nachricht { margin-top: 1rem; }
.mail__nachricht > * + * { margin-top: .75em; }
.einordnung { padding: .25rem .25rem; }
.einordnung dl { display: grid; gap: .6rem; margin-top: .5rem; }
.einordnung dl > div { display: grid; gap: .15rem; }
.einordnung dd { font-weight: 500; }
.entwurf { border: 1px solid var(--fastschwarz); }
.entwurf__text { margin-top: .5rem; font-size: 1.0625rem; line-height: 1.65; border-radius: 8px; }
.entwurf__text > * + * { margin-top: .8em; }
.entwurf__text[contenteditable="true"] { outline: 2px dashed var(--fastschwarz); outline-offset: 8px; background: var(--weiss); cursor: text; }
.entwurf__text[contenteditable="true"]:focus-visible { outline: 3px solid var(--fokus); }
.entwurf__hinweis { margin-top: 1.25rem; font-size: .875rem; color: var(--charcoal); border-top: 1px solid var(--grau-eee); padding-top: .6rem; }
/* Im Fluss unter dem Entwurfstext, rechtsbündig: verdeckt weder Text noch Hinweiszeile. */
.demo__stempel { display: flex; width: max-content; max-width: 100%; margin: 2rem 0 2rem auto; font-size: clamp(1.4rem, 1rem + 1.5vw, 2.1rem); --drehung: -10deg; }
.demo__stempel[hidden] { display: none; }
.demo__aktionen { display: none; }
.js .demo__aktionen { display: grid; gap: 1rem; }
.demo__status { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; padding: .8rem 0; border-top: 1px solid rgb(23 23 23 / .16); border-bottom: 1px solid rgb(23 23 23 / .16); }
.demo__status-text { font-weight: 600; }
.demo__status.ist-frei .demo__status-text { background: var(--buttergelb); border-radius: 999px; padding: .1rem .7rem; box-shadow: inset 0 0 0 1px var(--fastschwarz); }
.demo__nachher { display: grid; gap: .75rem; justify-items: start; }
.demo__nachher[hidden] { display: none; }
.demo__protokoll { font-family: var(--schrift-mono); font-size: .875rem; }
.demo__ohne-js { padding: 1rem clamp(1.25rem, 3vw, 2rem) 0; }
.js .demo__ohne-js { display: none; }
.demo__fuss { padding: .9rem clamp(1.25rem, 3vw, 2rem); border-top: 1px solid rgb(23 23 23 / .12); font-size: .875rem; color: var(--charcoal); }
@keyframes abflug {
  0% { transform: translateX(0) rotate(0); opacity: 1; }
  100% { transform: translateX(140%) rotate(8deg); opacity: 0; }
}
.demo__mail.fliegt { animation: abflug .55s cubic-bezier(.5, 0, .75, .3) forwards; pointer-events: none; }
@media (min-width: 900px) {
  .demo__raster { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .demo__korb { border-bottom: 0; border-right: 1px solid rgb(23 23 23 / .12); padding: 1.75rem 1.5rem; }
  .demo__faelle { padding: 1.75rem 2rem 2.25rem; }
  .mail__kopf { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* ---------- Hausverwaltung und Handwerk ---------- */
.sortierung { margin: 0; }
.sortierung__liste { display: grid; gap: .5rem; }
.sortierung__zeile {
  display: grid; gap: .15rem;
  background: var(--weiss);
  border: 1px solid var(--grau-eee);
  border-radius: 16px;
  padding: .8rem 1rem .85rem;
}
.sortierung__zeile:nth-child(2) { margin-left: 1rem; }
.sortierung__zeile:nth-child(3) { margin-left: 2rem; }
.sortierung__zeile--hoch { border-color: var(--fastschwarz); box-shadow: inset 4px 0 0 var(--pink); }
.sortierung__betreff { font-family: var(--schrift-titel); font-weight: 500; font-size: 1.125rem; line-height: 1.25; }
.sortierung__art { font-size: .875rem; color: var(--charcoal); }
.sortierung__text { margin-top: 1rem; font-size: .8125rem; color: var(--charcoal); }

/* Freigabefeld: Text links, Unterschriftslinien mit Stempel rechts */
.freigabe { display: grid; gap: 2.5rem; }
.freigabe__feld { position: relative; display: grid; gap: 1.1rem; align-content: end; max-width: 26rem; }
.freigabe__zeile { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: end; gap: .75rem; font-family: var(--schrift-mono); font-size: .8125rem; color: var(--charcoal); }
.freigabe__linie { display: block; min-height: 1.6rem; border-bottom: 1px solid var(--fastschwarz); color: var(--fastschwarz); font-size: .9375rem; }
.freigabe__stempel { position: absolute; right: 0; bottom: -1.5rem; --drehung: -9deg; }
@media (min-width: 900px) { .freigabe { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; align-items: center; } }

.vorschau { margin: 0; }
.vorschau__blatt { background: var(--weiss); border: 1px solid var(--grau-eee); border-radius: 20px; padding: 1.4rem 1.6rem 1.6rem; }
.mailfelder { display: grid; gap: .55em; }
.mailfelder > div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: .6em; align-items: baseline; }
.mailfelder dt { font-size: .8125rem; color: var(--charcoal); }
.korb__titel { font-family: var(--schrift-titel); font-weight: 500; font-size: 1.45em; line-height: 1.1; letter-spacing: -0.01em; hyphens: auto; overflow-wrap: break-word; }
.korb__einordnung { margin-top: .9em; padding: .6em 0; border-block: 1px solid var(--grau-eee); display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: .6em; align-items: baseline; }
.korb__entwurf { margin-top: .8em; display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: .6em; }
.korb__entwurf p { line-height: 1.5; }
.vorschau__text { margin-top: 1rem; font-size: .8125rem; color: var(--charcoal); }
@media (max-width: 559px) {
  .vorschau__blatt { padding: 1.1rem 1.1rem 1.3rem; }
  .mailfelder > div, .korb__einordnung, .korb__entwurf { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
}

/* Kennzeichnung "Beispiel" direkt am Beispiel (Pille wie im Produktfenster) */
.beispiel-pille {
  display: inline-block;
  font-family: var(--schrift-mono); font-size: .75rem; line-height: 1.4;
  background: var(--buttergelb); border: 1px solid rgb(23 23 23 / .3);
  border-radius: 999px; padding: .15rem .65rem;
}

/* ---------- Beispiele (Übersicht) ---------- */
.bereichsliste { margin-top: 2rem; }
.bereichsliste ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.bereichsliste a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: .35rem 1rem;
  background: var(--elfenbein); border-radius: 999px;
  color: var(--fastschwarz); text-decoration: none; font-size: .9375rem;
}
.bereichsliste a:hover { background: var(--buttergelb); }
.beispielkarten { display: grid; gap: var(--spalt); }
.beispielkarte { display: grid; gap: 2rem; scroll-margin-top: 6.5rem; }
.beispielkarte__text { display: grid; gap: 1.5rem; align-content: start; }
.beispielkarte__kopf { display: grid; gap: .75rem; justify-items: start; }
.beispielkarte__name { font-family: var(--schrift-titel); font-weight: 400; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); line-height: 1.05; letter-spacing: -0.02em; }
.beispielkarte__zwischen { font-weight: 600; font-size: 1rem; margin-bottom: .5rem; }
.beispielkarte__frei { background: var(--buttergelb); border-radius: var(--radius-klein); padding: 1rem 1.2rem; }
.beispielkarte .verweis { justify-self: start; }
.korb__entwurf div > * + * { margin-top: .6em; }
@media (min-width: 1024px) {
  .beispielkarte { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; align-items: start; }
}

/* Zollstock-Band (Handwerk, dekorativ) */
.zollstock {
  --cm: .5rem;
  display: flex; height: 3rem; overflow: hidden;
  background-color: var(--buttergelb);
  border-radius: 999px;
  border: 1px solid var(--fastschwarz);
  background-image:
    linear-gradient(to right, var(--fastschwarz) 1.5px, transparent 1.5px),
    linear-gradient(to right, var(--fastschwarz) 1px, transparent 1px),
    linear-gradient(to right, rgb(23 23 23 / .7) 1px, transparent 1px);
  background-size: calc(var(--cm) * 10) 55%, calc(var(--cm) * 5) 38%, var(--cm) 22%;
  background-repeat: repeat-x;
  background-position: 1.25rem 0, 1.25rem 0, 1.25rem 0;
}
.zollstock > span {
  flex: 0 0 calc(var(--cm) * 10);
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 0 .3rem .35rem 0;
  font-family: var(--schrift-mono); font-size: .75rem; line-height: 1;
}
.zollstock > span:first-child { margin-left: 1.25rem; }

/* Ansage: ein großer Satz, Stempel daneben */
.ansage__stempel { display: flex; align-items: center; justify-content: center; min-height: 8rem; }
.schriftlich__bild { width: min(70%, 18rem); margin-left: auto; }
@media (min-width: 1024px) { .schriftlich__bild { width: auto; } }
.pilot-kopf__titel { max-width: 12em; }
.pilot-kopf__stempel { --drehung: -6deg; margin-bottom: 2rem; }
.grundsaetze__stempel { --drehung: -8deg; margin-top: 2.5rem; }
.kontakt-direkt .visitenkarte { margin-top: 0; }
@media (min-width: 1024px) { .kontakt-direkt { padding-left: 1rem; } }
.ansage__satz { font-family: var(--schrift-titel); font-weight: 400; font-size: clamp(2.5rem, 1.3rem + 4.4vw, 5.5rem); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; max-width: 12em; }

/* ---------- Pilot ---------- */
.wochen { display: grid; gap: var(--spalt); margin-top: clamp(2.5rem, 5vw, 4rem); }
.wochen__blatt { display: flex; flex-direction: column; gap: 1rem; border-radius: var(--radius-gross); padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--elfenbein); }
.wochen__blatt--vorher { background: transparent; border: 1px dashed var(--charcoal); }
.wochen__blatt--ende { background: var(--buttergelb); }
.wochen__kopf { display: flex; flex-direction: column; gap: .5rem; }
.wochen__zahl { font-family: var(--schrift-titel); font-weight: 400; font-size: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); line-height: .85; letter-spacing: -0.04em; }
.wochen__zahl--text { font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem); }
.wochen__name { font-family: var(--schrift-mono); font-size: .8125rem; color: var(--charcoal); text-transform: lowercase; }
.wochen__blatt > p:last-child { margin-top: auto; }
@media (min-width: 640px) { .wochen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .wochen { grid-template-columns: repeat(4, minmax(0, 1fr)); } .wochen__blatt { min-height: 20rem; } }

.messbogen__liste { counter-reset: frage; border-top: 1px solid var(--fastschwarz); }
.messbogen__liste > li {
  counter-increment: frage;
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .6rem .5rem;
  padding: 1.1rem 0 1.2rem;
  border-bottom: 1px solid rgb(23 23 23 / .16);
}
.messbogen__liste > li::before { content: counter(frage); font-family: var(--schrift-titel); font-size: 1.5rem; line-height: 1; }
.messbogen__feld { grid-column: 2; display: block; height: 1.5rem; border-bottom: 1px dashed var(--fastschwarz); max-width: 14rem; }
.messbogen__feld--doppelt { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; border: 0; max-width: 22rem; height: auto; }
.messbogen__feld--doppelt span { font-family: var(--schrift-mono); font-size: .75rem; color: var(--charcoal); border-bottom: 1px dashed var(--fastschwarz); padding-top: .6rem; }
.messbogen__kopf { font-family: var(--schrift-mono); font-size: .8125rem; color: var(--charcoal); margin-bottom: 1rem; }
.messbogen__fuss { padding-top: 1.1rem; font-weight: 600; }

.gegenueber { display: grid; gap: var(--spalt); }
@media (min-width: 900px) { .gegenueber { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.gegenueber .zwischen { margin-bottom: 1.25rem; }
.nicht-dabei { margin-top: var(--spalt); }
.nicht-dabei__liste { display: grid; gap: 0 2.5rem; border-top: 1px solid var(--fastschwarz); margin-top: 1.25rem; }
.nicht-dabei__liste > li { position: relative; padding: .8rem 0 .85rem 2rem; border-bottom: 1px solid rgb(23 23 23 / .14); }
.nicht-dabei__liste > li::before { content: ""; position: absolute; left: .1rem; top: 1.45rem; width: 1.1rem; height: 2px; background: var(--pink); }
@media (min-width: 768px) { .nicht-dabei__liste { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.preisfeld { display: grid; gap: 1rem; align-content: center; }
.preisfeld__zeile { display: grid; gap: .4rem; padding-bottom: 1rem; border-bottom: 1px solid rgb(23 23 23 / .2); }
.preisfeld__zeile:last-child { border-bottom: 0; padding-bottom: 0; }
.preisfeld__name { font-family: var(--schrift-mono); font-size: .8125rem; color: var(--charcoal); }
.preisfeld__wert { font-family: var(--schrift-titel); font-weight: 400; font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem); line-height: 1; letter-spacing: -0.03em; }
.preisfeld__wert--leer { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); color: var(--grau-444); }

/* ---------- FAQ: Register ---------- */
.register { display: grid; gap: 2.5rem; }
.register__reiter ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.register__reiter a {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 2.75rem; padding: .35rem 1rem .35rem .4rem;
  background: var(--elfenbein); border-radius: 999px;
  color: var(--fastschwarz); text-decoration: none; font-size: .9375rem;
}
.register__reiter a:hover { background: var(--buttergelb); }
.register__buchstabe {
  display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 50%;
  background: var(--fastschwarz); color: var(--buttergelb);
  font-family: var(--schrift-mono); font-size: .875rem; line-height: 1;
}
.register__gruppe { scroll-margin-top: 6.5rem; }
.register__gruppe + .register__gruppe { margin-top: clamp(3rem, 6vw, 4.5rem); }
.register__titel { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; font-family: var(--schrift-titel); font-weight: 400; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); line-height: 1.05; letter-spacing: -0.02em; }
.register__titel .register__buchstabe { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
@media (min-width: 1024px) {
  .register { grid-template-columns: minmax(0, 3.5fr) minmax(0, 8.5fr); gap: var(--spalt) 4rem; }
  .register__reiter { align-self: start; position: sticky; top: 6.5rem; }
  .register__reiter ul { flex-direction: column; align-items: flex-start; }
}

/* ---------- Kontakt ---------- */
.formular { display: grid; gap: 1.5rem; }
.formular__kopf { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; }
.formular__fuss { display: grid; gap: .75rem; justify-items: start; padding-top: .5rem; }
.formular__fuss p { max-width: 34em; }
/* Honigtopf: aus dem Layout genommen, nicht display:none (aria-hidden im HTML) */
.formular__falle { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.formular__meldung:focus-visible { outline-offset: 2px; }
.formular__meldung a { overflow-wrap: anywhere; }
.knopf[disabled][data-sendet] { opacity: .75; cursor: progress; }
.visitenkarte { display: flex; flex-direction: column; gap: .25rem; max-width: 26rem; aspect-ratio: 85 / 55; padding: 1.4rem 1.5rem 1.25rem; border-radius: var(--radius); }
.visitenkarte__marke { display: flex; align-items: center; }
.visitenkarte__marke .marke__logo { height: 1.75rem; }
.visitenkarte__name { margin-top: auto; font-family: var(--schrift-titel); font-weight: 500; font-size: 1.375rem; }
.visitenkarte__rolle { font-size: .875rem; color: var(--grau-444); }
.visitenkarte__daten { margin-top: .6rem; padding-top: .55rem; border-top: 1px solid var(--fastschwarz); display: grid; gap: .15rem; font-size: .875rem; }
.visitenkarte__daten > div { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: .5rem; }
.visitenkarte__daten dt { color: var(--grau-444); }
@media (max-width: 459px) {
  .visitenkarte { aspect-ratio: auto; }
  .visitenkarte__name { margin-top: 1.25rem; }
  .visitenkarte__daten > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .visitenkarte__daten > div + div { margin-top: .35rem; }
}
.foto { margin: 0; max-width: 22rem; }
.foto__flaeche { aspect-ratio: 4 / 5; border-radius: var(--radius-gross); background: var(--elfenbein); display: grid; place-items: center; }
.foto__unterschrift { margin-top: .9rem; font-family: var(--schrift-mono); font-size: .8125rem; color: var(--charcoal); }

/* ---------- Rechtstext ---------- */
.recht { max-width: 46rem; }
.recht h2 { font-family: var(--schrift-titel); font-weight: 500; font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.01em; margin: 2.5rem 0 .6rem; padding-top: 1rem; border-top: 1px solid var(--grau-ccc); scroll-margin-top: 6.5rem; }
.recht h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.recht p, .recht address, .recht ul { margin-top: .6rem; font-style: normal; }
.recht ul { padding-left: 1.25rem; }
.recht li + li { margin-top: .2rem; }
.recht a { overflow-wrap: anywhere; }
.recht__kopf .titel { hyphens: manual; overflow-wrap: break-word; font-size: clamp(2.4rem, 1.4rem + 3vw, 4rem); }
.recht__inhalt ol { margin: 0; padding-left: 1.4rem; font-size: .9375rem; }
.recht__inhalt li + li { margin-top: .3rem; }
.recht__inhalt a { text-underline-offset: .2em; text-decoration-color: var(--grau-aaa); }
@media (min-width: 1024px) { .recht__kopf { position: sticky; top: 6.5rem; align-self: start; } }

/* ---------- Fußzeile ---------- */
.fuss {
  background: var(--fastschwarz);
  color: var(--buttergelb);
  padding-block: clamp(4rem, 8vw, 6rem) 2rem;
  margin-top: calc(var(--luft) * .25);
  clip-path: polygon(3.5rem 0, 100% 0, 100% 100%, 0 100%, 0 3.5rem);
}
.fuss :focus-visible { outline-color: var(--buttergelb); }
.fuss__raster { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
.fuss .marke { color: var(--buttergelb); }
.fuss .marke__logo { height: 2.5rem; }
.fuss__marke p { margin-top: 1.25rem; max-width: 28em; font-size: .9375rem; }
.fuss .label { color: var(--buttergelb); margin-bottom: 1rem; }
.fuss__spalte ul { list-style: none; padding: 0; margin: 0; }
.fuss__spalte li + li { margin-top: .4rem; }
.fuss__spalte a { color: var(--buttergelb); text-decoration: none; font-size: .9375rem; }
.fuss__spalte a:hover { text-decoration: underline; text-underline-offset: .25em; }
.fuss__spalte a[aria-current="page"] { text-decoration: underline; text-underline-offset: .25em; }
.fuss__wort {
  display: block; margin-top: 2.5rem;
  font-family: var(--schrift-titel); font-weight: 400;
  font-size: clamp(3rem, 1rem + 10.5vw, 11rem); line-height: .85; letter-spacing: -0.05em;
  color: var(--buttergelb); white-space: nowrap; overflow: hidden;
}
@media (min-width: 768px) {
  .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss__marke { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .fuss__raster { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); }
  .fuss__marke { grid-column: auto; }
}

/* ---------- Einblenden beim Scrollen ---------- */
/* Nur wenn app.js .einblenden-bereit setzt und Bewegung erlaubt ist.
   Ohne JS und ohne Beobachter ist alles sofort sichtbar. */
@media (prefers-reduced-motion: no-preference) {
  .einblenden-bereit [data-einblenden]:not(.ist-sichtbar) { opacity: 0; transform: translateY(1.25rem); }
  .einblenden-bereit [data-einblenden] { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1); }
}

/* ---------- Bewegung aus ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Druck ---------- */
@media print {
  .leiste, .kopf, .demo__aktionen { display: none; }
  .fuss { clip-path: none; }
  body { background: #fff; }
  [data-einblenden] { opacity: 1 !important; transform: none !important; }
}