/* Landingpage Marcel Koslowski. Farben und Schriften aus dem Design System (designsystem/tokens.json),
   Gestaltungsvertrag in DESIGN.md. */

@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/schriften/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/schriften/space-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/schriften/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/schriften/inter-latin-600-normal.woff2") format("woff2"); }
/* Highlight-Wörter (Marcel, 23.10.2026): Instrument Serif kursiv, SIL Open Font License (schriften/OFL-instrument-serif.txt) */
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/schriften/instrument-serif-latin-400-italic.woff2") format("woff2"); }
/* Ersatz, bis Instrument Serif da ist: Georgia kursiv auf deren Breite verkleinert (gemessen: „gefunden“ 168 statt 136 px
   bei 40 px), damit beim Umschalten kein Wort in die nächste Zeile springt */
@font-face { font-family: "Instrument Serif Ersatz"; font-style: italic; font-weight: 400;
  src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 81%; }

:root {
  --papier: #ffffff;
  --tinte: #1b1d21;
  --leise-hell: #b9bdc4;
  --karte-dunkel: #26292e;
  --leise: #5f646c;
  --akzent: #e0660a;
  --linie: #e6e1da;
  --schrift-titel: "Space Grotesk", system-ui, sans-serif;
  --schrift-text: "Inter", system-ui, sans-serif;
  --schrift-betont: "Instrument Serif", "Instrument Serif Ersatz", Georgia, serif;
  --rand: clamp(20px, 4vw, 64px);
  --leiste-hoehe: 64px;
  --feldrand: color-mix(in srgb, var(--leise-hell) 50%, var(--karte-dunkel));   /* 3:1 gegen die Formularkarte */
  /* dunkle Töne der Abschnittsverläufe, alle dunkler als --karte-dunkel und mit mindestens 4,5:1 zu --leise-hell */
  /* Akzent für kleine Schrift auf karte-dunkel: 5,4:1 statt 4,2:1 (WCAG 1.4.3, Abschlussprüfung 25.10.2026) */
  --akzent-klein: color-mix(in srgb, var(--akzent) 80%, var(--papier));
  --ton-grund: var(--tinte);
  --ton-tief: #111214;
  --ton-kuehl: #172533;      /* Schiefer mit einem Hauch Petrol, Gegenpol zum Orange */
  --ton-glut: #2d221b;       /* Grundton, ins Glühende gezogen */
  color-scheme: dark;
}
/* Heller Modus der ganzen Website (Marcel 04.11.2026: „den hellmodus bitte auf alle seiten anpassen“). Dieselben Rollen mit
   getauschten Werten: papier ist hier die dunkle Schrift, tinte der helle Grund (wie der helle Hafen-Kopf), akzent das
   dunklere Orange, das als Schrift und als Fläche mit tinte darauf 4,98:1 erreicht. Das Skript im Kopf jeder Seite setzt
   data-modus vor dem ersten Bild, gewählt per Schalter oder nach der Systemeinstellung. */
:root[data-modus="hell"] {
  --papier: #1b1d21;
  --tinte: #f7f3ee;
  --leise-hell: #464a51;
  --karte-dunkel: #ffffff;
  --leise: #7a7f87;
  --akzent: #ad4c09;
  --linie: #e2dbd2;
  --ton-tief: #efe9e1;
  --ton-kuehl: #e6ebee;
  --ton-glut: #f5e8dc;
  --feldrand: color-mix(in srgb, var(--leise-hell) 75%, var(--karte-dunkel));   /* 3:1 gegen weiße Karten */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; scroll-padding-bottom: calc(var(--leiste-hoehe) + 48px); }
body { margin: 0; background: var(--tinte); color: var(--papier); font: 400 1.0625rem/1.6 var(--schrift-text); }
h1, h2, h3 { font-family: var(--schrift-titel); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }

html, body { overflow-x: hidden; overflow-x: clip; }
body { padding-bottom: calc(var(--leiste-hoehe) + 40px); }

.sprung { position: absolute; left: 12px; top: -80px; z-index: 40; padding: 10px 16px; border-radius: 8px;
  background: var(--papier); color: var(--tinte); font-weight: 600; text-decoration: none; }
.sprung:focus { top: 12px; }

/* Kopf „Gegenlicht“ (Marcel 03.11.2026, nach seiner Vorlage: „so einem stil würde ich besser finden“). Der Kopf ist eine dunkle
   Tafel mit runden Ecken, die auf der Seite liegt. Rechts in der Tafel steht Marcel freigestellt (KI-Porträt marcel-ki-12.jpg, werkzeuge/portraet.py) mit der
   Hüfte auf ihrer Unterkante, hinter ihm ein kräftiges, dunstiges Gegenlicht aus akzent. Links liegt ein dunkler Verlauf über
   dem Licht, darauf Vorzeile, Angebot, Satz, drei Fakten mit Zeichen und die Knöpfe. Oben in der Tafel steht „Bundesweit“
   mit einem orangen Punkt (das Wortbudget des Kopfs, 40 Wörter, lässt nicht mehr zu). Das Bild trägt „KI-generiert“, nie über dem Gesicht. Am Handy steht zuerst die Schrift, Marcel folgt kleiner in
   seinem Licht darunter. Beim Scrollen bewegt sich im Kopf nichts. Seitenverhältnis des Freistellers 909 : 1212 = 0,75; 0,92 · 0,75 = 0,69 steht so auch in sizes. */
.buehne { --verhaeltnis: 0.75; --tafel-hoehe: clamp(360px, calc(100svh - 132px), 780px);
  --bild-breite: min(36vw, 500px, calc(var(--tafel-hoehe) * 0.92 * var(--verhaeltnis)));
  padding: clamp(12px, 2.4vh, 28px) max(var(--rand), (100% - 80rem) / 2) clamp(28px, 5vh, 48px); background: var(--tinte); }
.buehne-tafel { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) var(--bild-breite);
  column-gap: clamp(24px, 4vw, 72px); min-height: var(--tafel-hoehe);
  padding: 0 clamp(28px, 5vw, 80px) 0 clamp(24px, 4.4vw, 64px); border-radius: 28px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--papier) 9%, transparent); background: linear-gradient(180deg, var(--tinte), var(--ton-tief));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--papier) 7%, transparent), 0 40px 120px -48px rgb(224 102 10 / 0.3); }
/* Das Gegenlicht liegt als eigene Ebene hinter Schrift und Bild: links ein dunkler Verlauf aus ton-tief, der bis kurz vor Marcel
   reicht und die Schrift deckt (gemessen am gerenderten Bild in tests/test_buehne.py), dahinter der Lichtkegel um seinen Kopf. */
.buehne-tafel::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--ton-tief) 0%, rgb(17 18 20 / 0.9) calc(100% - var(--bild-breite) - clamp(28px, 5vw, 80px) - 6rem),
      rgb(17 18 20 / 0) calc(100% - var(--bild-breite) - clamp(28px, 5vw, 80px) + 2rem)),
    radial-gradient(circle calc(var(--bild-breite) * 1.15) at calc(100% - var(--bild-breite) / 2 - clamp(28px, 5vw, 80px)) 34%,
      color-mix(in srgb, var(--akzent) 82%, transparent), rgb(224 102 10 / 0.42) 26%, rgb(224 102 10 / 0.12) 52%, transparent 78%),
    radial-gradient(ellipse 90% 70% at 80% 10%, rgb(224 102 10 / 0.12), transparent 70%); }
.buehne-oben { position: absolute; z-index: 3; top: 22px; left: clamp(24px, 4.4vw, 64px); right: clamp(28px, 5vw, 80px);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  color: var(--leise-hell); font: 500 0.875rem/1.3 var(--schrift-titel); }
.buehne-oben p { display: flex; align-items: center; gap: 10px; }
.buehne-oben .licht-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 0 4px rgb(224 102 10 / 0.2); }
.buehne-text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; align-self: center;
  min-width: 0; max-width: 42rem; padding: 64px 0 clamp(28px, 6vh, 64px); }
.buehne-name { margin: 0 0 14px; color: var(--akzent); font: 500 1.0625rem/1.2 var(--schrift-titel); }
.buehne-name span { color: inherit; }
.angebot { margin: 0 0 clamp(14px, 2.4vh, 22px); font-size: clamp(1.75rem, min(4.6vw, 8.4svh), 4.4rem); line-height: 1.0;
  letter-spacing: -0.035em; text-wrap: balance; }
.buehne-text .angebot-satz { max-width: 32rem; }
.fakten-zeilen { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0 0 1.5rem; padding: 0; list-style: none;
  color: var(--papier); font: 500 0.9375rem/1.3 var(--schrift-titel); }
.buehne-text .fakten-zeilen li { display: flex; align-items: center; gap: 9px; padding: 0; border: 0; }
.fakten-zeilen svg { flex: none; width: 18px; height: 18px; color: var(--akzent); }
.buehne-bild { position: relative; z-index: 1; grid-column: 2; align-self: end; margin-top: 56px; width: var(--bild-breite); }
.buehne-bild img { width: 100%; height: auto; filter: brightness(0.9) contrast(1.04); }
.buehne-bild .ki-label { bottom: 18px; right: 0; }
/* hochkant ab 700 px (Tablet): die Tafel ist so hoch wie Marcel */
@media (orientation: portrait) and (min-width: 700px) {
  .buehne { --tafel-hoehe: auto; --bild-breite: min(30vw, 260px); }
  .buehne-tafel { min-height: 0; }
}
@media (max-width: 759px) {
  .buehne-name { display: none; }
}
.ohne-umbruch { white-space: nowrap; }
/* Auftritt beim Laden ohne Bibliothek: die Leiste taucht auf, der Strich unter dem Highlight-Wort zeichnet sich. */
@media (prefers-reduced-motion: no-preference) {
  .kopf-bereit .leiste { animation: auftauchen 0.9s cubic-bezier(0.16, 1, 0.3, 1) 850ms backwards; }
  /* Wer per Tastatur schon in der Leiste ist, bevor sie aufgetaucht ist, sieht sie sofort. */
  .kopf-bereit .leiste:focus-within { animation: none; }
  .kopf-bereit #buehne .betont { animation: strich 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.6s backwards; }
}
@keyframes auftauchen { from { opacity: 0; translate: -50% 24px; } }
@keyframes strich { from { background-size: 0 2px; } }
.angebot-satz { margin: 0 0 1rem; color: var(--leise-hell); font-size: 1.0625rem; line-height: 1.55; text-wrap: pretty; }
/* Fakten als einzelne Marken: sie dürfen umbrechen, ohne dass ein Trennpunkt am Zeilenanfang steht */
.angebot-fakten { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.3rem; padding: 0; list-style: none;
  color: var(--papier); font: 500 0.875rem/1.3 var(--schrift-titel); }
.angebot-fakten li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--feldrand); }
.angebot-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.angebot-knoepfe .knopf, .knopf-leise { padding: 13px 22px; font-size: 1.0625rem; }
.knopf-leise { display: inline-block; border-radius: 999px; border: 1px solid var(--feldrand); color: var(--papier);
  font: 700 1.0625rem/1 var(--schrift-titel); text-decoration: none; }
.knopf-leise:hover { border-color: var(--akzent); }
.knopf-leise:active { transform: scale(0.97); }


/* Navigationsleiste: schwebt unten, ab 760 px (darunter die Kopfleiste mit Menü, siehe unten). */
.leiste { position: fixed; z-index: 20; left: 50%; bottom: 16px; translate: -50% 0; display: flex; align-items: center; gap: 4px;
  width: max-content; max-width: calc(100% - 24px); padding: 6px; border-radius: 999px;
  /* Glas nach Apple: durchscheinende Schicht, Inhalt läuft darunter, helle Oberkante fängt Licht */
  background: color-mix(in srgb, var(--karte-dunkel) 72%, transparent); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid color-mix(in srgb, var(--leise) 70%, transparent); border-top-color: color-mix(in srgb, var(--papier) 22%, transparent); }
@media (prefers-reduced-transparency: reduce) { .leiste { background: var(--karte-dunkel); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* Startseite (Marcel 04.11.2026): solange die Navigation oben im Kopf steht, ist die Leiste weg; weiter unten gleitet sie in
   der Mitte unten herein (held.js setzt data-zustand). Ohne Bewegung erscheint sie ohne Übergang. */
.leiste[data-zustand] { transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), opacity 240ms ease, visibility 0s linear 0s; }
.leiste[data-zustand="weg"] { transform: translateY(calc(100% + 28px)); opacity: 0; visibility: hidden;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), opacity 240ms ease, visibility 0s linear 420ms; }
@media (prefers-reduced-motion: reduce) { .leiste[data-zustand], .leiste[data-zustand="weg"] { transition: none; } }
/* Hell-Dunkel-Schalter in der Leiste (alle Seiten) und im Menü der Unterseiten: Sonne im dunklen, Mond im hellen Modus */
.leiste-modus { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--leise-hell); cursor: pointer; }
.leiste-modus:hover { color: var(--papier); background: color-mix(in srgb, var(--papier) 9%, transparent); }
.leiste-modus:focus-visible { outline-offset: -3px; }
:is(.leiste-modus, .kopf-modus, .menue-modus) svg { width: 18px; height: 18px; flex: none; }
:is(.leiste-modus, .kopf-modus, .menue-modus) .hv2-mond, .modus-wort-dunkel { display: none; }
:root[data-modus="hell"] :is(.leiste-modus, .kopf-modus, .menue-modus) .hv2-sonne, :root[data-modus="hell"] .modus-wort-hell { display: none; }
:root[data-modus="hell"] :is(.leiste-modus, .kopf-modus, .menue-modus) .hv2-mond { display: block; }
:root[data-modus="hell"] .modus-wort-dunkel { display: inline; }
.menue-modus { display: none; }
.fuss-modus { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--feldrand); background: transparent; color: var(--papier); cursor: pointer; font: 500 0.9375rem/1 var(--schrift-titel); }
.fuss-modus:hover { border-color: var(--akzent); }
.fuss-modus svg { width: 16px; height: 16px; flex: none; }
.fuss-modus .hv2-mond { display: none; }
:root[data-modus="hell"] .fuss-modus .hv2-sonne { display: none; }
:root[data-modus="hell"] .fuss-modus .hv2-mond { display: block; }
/* Schatten im hellen Modus: dieselbe Tiefe, aber weich; die schwarzen Schatten der dunklen Flächen wirkten auf Papier schmutzig */
:root[data-modus="hell"] :is(.leistungen-box, .browser, .workflow, .diagramm, .programm, .fragen details, .ich-foto) {
  box-shadow: 0 22px 48px -30px rgb(0 0 0 / 0.22); }
:root[data-modus="hell"] .knoten { box-shadow: 0 8px 18px -12px rgb(0 0 0 / 0.25); }
:root[data-modus="hell"] .problem { box-shadow: 0 -12px 32px -24px rgb(0 0 0 / 0.18); }
@media (hover: hover) {
  :root[data-modus="hell"] .fragen details:hover { box-shadow: 0 22px 44px -26px rgb(0 0 0 / 0.25), 0 14px 32px -26px color-mix(in srgb, var(--akzent) 50%, transparent); }
}
/* Laptop unter dem großen Satz: die Balken brauchen im hellen Modus einen dunkleren Ton, sonst verschwinden sie */
:root[data-modus="hell"] .laptop-balken { background: color-mix(in srgb, var(--leise-hell) 55%, var(--tinte)); }
/* mit dem Tastaturfokus darin steht sie sofort ganz da */
.leiste[data-zustand]:focus-within { transform: none; opacity: 1; visibility: visible; transition: none; }
.leiste-fortschritt { position: absolute; left: 22px; right: 22px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--akzent);
  transform-origin: left center; transform: scaleX(0); opacity: 0; pointer-events: none; }
.bewegt .leiste-fortschritt { opacity: 0.9; }
.leiste .leiste-ziele { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.leiste .leiste-ziele a { display: block; padding: 10px 14px; border-radius: 999px; color: var(--leise-hell);
  font-size: 0.9375rem; text-decoration: none; white-space: nowrap; }
.leiste .leiste-ziele a:focus-visible { outline-offset: -3px; }
.leiste .leiste-ziele a:hover, .leiste .leiste-ziele a[aria-current] { color: var(--papier);
  background: color-mix(in srgb, var(--papier) 9%, transparent); }
.leiste .anfrage { flex: none; padding: 11px 18px; border-radius: 999px; background: var(--akzent); color: var(--tinte);
  font: 700 1.1875rem/1 var(--schrift-titel); text-decoration: none; }

.abschnitt { padding: clamp(56px, 9vh, 104px) var(--rand) 0; }
/* Naht vor jedem Abschnitt der Startseite (Marcel, 03.11.2026: „dazwischen irgendwie immer etwas platz“): überall
   derselbe Abstand, darin eine Linie, die sich beim Scrollen nach unten zeichnet (--naht-zug), und ein Fundpunkt, der am
   Ende einen Ring aussendet (--naht-ring), nach dem Versprechen „gefunden werden“. Ohne Bewegung steht beides fertig,
   der Ring bleibt aus. Rein schmückend, aria-hidden. */
:root { --naht-hoehe: clamp(96px, 14vh, 144px); }
@media (max-width: 759px) {
  :root { --naht-hoehe: clamp(72px, 11vh, 104px); }
}
main > .abschnitt:has(> .naht) { padding-top: 0; }
/* Unter dem Kopf trägt die erste Naht den Abstand allein, sonst stünde dort mehr Luft als zwischen allen anderen Abschnitten. */
#buehne.buehne { padding-bottom: 0; }
.naht { --naht-zug: 1; --naht-ring: 0; position: relative; display: block; height: var(--naht-hoehe); pointer-events: none; }
.naht-linie { position: absolute; left: 50%; top: 10%; width: 1px; height: 54%; margin-left: -0.5px; transform-origin: 50% 0;
  transform: scaleY(var(--naht-zug)); background: linear-gradient(transparent, color-mix(in srgb, var(--akzent) 90%, transparent)); }
.naht-punkt { position: absolute; left: 50%; top: 64%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--akzent); box-shadow: 0 0 14px color-mix(in srgb, var(--akzent) 65%, transparent);
  opacity: clamp(0.2, calc(var(--naht-zug) * 5 - 4), 1); }
.naht-ring { position: absolute; inset: -4px; border: 1px solid var(--akzent); border-radius: 50%;
  opacity: calc((1 - var(--naht-ring)) * min(1, var(--naht-ring) * 6)); scale: calc(1 + var(--naht-ring) * 5); }
/* Dunkle Verläufe zwischen den Abschnitten (Marcel, 25.10.2026). Jeder Abschnitt läuft von seinem Ton in den nächsten,
   der folgende beginnt mit genau diesem Ton, also ohne Kante. Fünf Stufen im Wechsel: Grund nach tief, tief nach kühl,
   kühl nach Grund, Grund nach warm, warm nach Grund; der letzte Abschnitt endet im Grundton des Fußes. Zwei weiche
   Lichtflecken (warm hinter dem großen Satz, kühl links) verblassen, bevor sie eine Kante erreichen. */
main > :is(section, article, .satz-buehne) { --ton-von: var(--ton-grund); --ton-bis: var(--ton-grund); --fleck: none;
  background: var(--fleck), linear-gradient(to bottom, var(--ton-von), var(--ton-bis)); }
/* flow-root hält die Außenabstände der Kinder im Abschnitt; sonst ragen sie heraus und dort scheint der Grund durch */
main > :is(section, article) { display: flow-root; }
main > :nth-child(5n + 1 of section, article, .satz-buehne) { --ton-von: var(--ton-grund); --ton-bis: var(--ton-tief); }
main > :nth-child(5n + 2 of section, article, .satz-buehne) { --ton-von: var(--ton-tief); --ton-bis: var(--ton-kuehl);
  --fleck: radial-gradient(ellipse 46% 32% at 50% 50%, rgb(224 102 10 / 0.09), transparent); }
main > :nth-child(5n + 3 of section, article, .satz-buehne) { --ton-von: var(--ton-kuehl); --ton-bis: var(--ton-grund); }
main > :nth-child(5n + 4 of section, article, .satz-buehne) { --ton-von: var(--ton-grund); --ton-bis: var(--ton-glut);
  --fleck: radial-gradient(ellipse 24% 30% at 26% 42%, var(--ton-kuehl), transparent); }          /* Halbachsen: 2 bis 50 % breit, 12 bis 72 % hoch */
main > :nth-child(5n + 5 of section, article, .satz-buehne) { --ton-von: var(--ton-glut); --ton-bis: var(--ton-grund); }
main > :is(section, article, .satz-buehne):last-child { --ton-bis: var(--ton-grund); }
.abschnitt h2 { font-size: clamp(1.8rem, 3.2vw, 2.9rem); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
/* Vorzeile: kleines Etikett in Orange über jeder Abschnittsüberschrift (auch auf den Unterseiten). */
.vorzeile { margin: 0 0 12px; color: var(--akzent); font: 600 0.8125rem/1 var(--schrift-titel); letter-spacing: 0.08em; text-transform: uppercase; }
#fragen .vorzeile { text-align: center; }

@media (max-width: 699px) {
  .leiste { width: calc(100% - 24px); }
  .leiste .leiste-ziele { flex: 1; min-width: 0;
    -webkit-mask-image: linear-gradient(to right, black 82%, transparent); mask-image: linear-gradient(to right, black 82%, transparent); }
}
/* Am Handy im Hochformat steht zuerst die Schrift, Marcel folgt kleiner und mittig in seinem Gegenlicht darunter, mit der Hüfte
   auf der Unterkante der Tafel. Die Kennzeichnung steht über seinem Kopf. Die Knöpfe rücken vor die Fakten, damit „Kostenlose
   Einschätzung anfordern“ auch bei 320 × 568 im ersten Bildschirm steht. */
@media (max-width: 699px) and (orientation: portrait) {
  .buehne { --bild-breite: min(72vw, 300px); padding: 8px 8px 24px; }
  .buehne-tafel { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 0 18px; border-radius: 22px; }
  .buehne-tafel::before { background:
      radial-gradient(circle calc(var(--bild-breite) * 0.95) at 50% calc(100% - var(--bild-breite) * 1.02), color-mix(in srgb, var(--akzent) 82%, transparent), rgb(224 102 10 / 0.38) 30%, rgb(224 102 10 / 0.1) 56%, transparent 80%); }
  .buehne-oben { position: static; padding-top: 16px; font-size: 0.8125rem; }
  .buehne-text { padding: 14px 0 0; }
  .buehne-text .fakten-zeilen li { border: 0; padding: 0; }
  .angebot { font-size: clamp(1.75rem, 8.6vw, 2.5rem); }
  .buehne-text .angebot-satz { margin-bottom: 0.8rem; }
  .buehne-text .angebot-knoepfe { order: 1; margin-bottom: 1rem; }
  .buehne-text .angebot-knoepfe .knopf { font-size: min(1.0625rem, 4.4vw); padding-inline: min(22px, 4.4vw); white-space: nowrap; }
  .buehne-text .fakten-zeilen { order: 2; flex-direction: column; gap: 8px; margin-bottom: 0; }
  .buehne-bild { grid-column: 1; justify-self: center; margin-top: 18px; padding-top: 34px; }
  .buehne-bild .ki-label { top: 0; bottom: auto; left: 0; right: 0; width: fit-content; margin-inline: auto; white-space: nowrap; }
}
/* Niedriges Querformat (Handy quer, 200 % Zoom am Rechner, niedrige breite Fenster bis 620 px Höhe): zwei Spalten wie am
   Rechner, die Tafel so hoch wie der Bildschirm, die Schrift oben, die Knöpfe vor den Fakten; das Etikett rückt an die Schulter,
   weil unten die Leiste liegt. */
@media (orientation: landscape) and (max-height: 620px) {
  .buehne { --tafel-hoehe: calc(100svh - 24px); --bild-breite: min(24vw, calc((100svh - 40px) * var(--verhaeltnis))); padding-block: 8px 16px; }
  .buehne-oben { display: none; }
  .buehne-text { align-self: start; padding: 14px 0 16px; }
  .buehne-bild { margin-top: 12px; }
  .buehne-name { margin-bottom: 6px; }
  .angebot { margin-bottom: 10px; font-size: clamp(1.5rem, 7svh, 2.4rem); }
  .buehne-text .angebot-satz { margin-bottom: 0.75rem; font-size: 0.9375rem; }
  .buehne-text .angebot-knoepfe { order: 1; margin-bottom: 10px; }
  .buehne-text .angebot-knoepfe .knopf, .buehne-text .knopf-leise { padding: 11px 20px; }
  .buehne-text .fakten-zeilen { order: 2; margin-bottom: 0; }
  .buehne-bild .ki-label { top: 40%; bottom: auto; }
}
@media (orientation: landscape) and (max-height: 320px) {
  .buehne-text { padding-top: 10px; }
  .buehne-name { display: none; }
  .angebot { margin-bottom: 8px; font-size: 1.375rem; }
  .buehne-text .angebot-knoepfe { order: 1; margin-bottom: 8px; }
  .buehne-text .angebot-knoepfe .knopf, .buehne-text .knopf-leise { padding: 10px 16px; font-size: 0.9375rem; }
  .buehne-text .angebot-satz { order: 2; font-size: 0.875rem; line-height: 1.45; }
  .buehne-text .fakten-zeilen { order: 3; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 599px) {
  .buehne { --tafel-hoehe: auto; --bild-breite: min(30vw, 140px); }
  .buehne-tafel { grid-template-columns: minmax(0, 1fr); padding: 0 16px; }
  .buehne-text { padding-bottom: 0; }
  .angebot { margin-bottom: 8px; font-size: 1.375rem; }
  .buehne-text .angebot-satz { margin-bottom: 0.5rem; font-size: 0.875rem; line-height: 1.45; }
  .buehne-text .angebot-knoepfe .knopf, .buehne-text .knopf-leise { padding: 10px 16px; font-size: 0.9375rem; }
  .buehne-bild { grid-column: 1; justify-self: center; margin-top: 12px; padding-top: 34px; }
  /* Marcel steht hier unter der Schrift: sein Licht kommt von unten wie am Handy, die Kennzeichnung steht über seinem Kopf */
  .buehne-tafel::before { background:
      radial-gradient(circle calc(var(--bild-breite) * 0.95) at 50% calc(100% - var(--bild-breite) * 1.02), color-mix(in srgb, var(--akzent) 82%, transparent), rgb(224 102 10 / 0.38) 30%, rgb(224 102 10 / 0.1) 56%, transparent 80%); }
  .buehne-bild .ki-label { top: 0; bottom: auto; left: 0; right: 0; width: fit-content; margin-inline: auto; white-space: nowrap; }
}

/* Was ich mache: eine Box, in der die vier Leistungen nacheinander auftreten (gepinnt per seite.js, Marcel 22.10.2026).
   Ohne Bewegung und am Handy stehen alle vier untereinander, jede mit ihrem Bild. */
.einleitung { max-width: 38rem; margin-top: 1rem; color: var(--leise-hell); font-size: 1.0625rem; line-height: 1.55; text-wrap: pretty; }
.leistungen-buehne { margin-top: clamp(36px, 5vh, 64px); }
.leistungen-box { position: relative; border-radius: 28px; padding: clamp(22px, 3.5vw, 56px);
  background: linear-gradient(160deg, color-mix(in srgb, var(--akzent) 9%, var(--karte-dunkel)), var(--karte-dunkel) 55%);
  border: 1px solid color-mix(in srgb, var(--leise) 70%, transparent); box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.75); }
.leistungen-reiter { display: none; }
.leistungen { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(56px, 8vh, 96px); }
.leistung { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.leistung h3 { position: relative; font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 0.95; letter-spacing: -0.045em; }
/* Mit Bewegung leuchten die Wörter von links auf (--licht von 0 bis 1, seite.js). Ohne Bewegung sind sie hell. */
.bewegt .leistung h3 { color: color-mix(in srgb, var(--papier) 18%, transparent); }
.bewegt .leistung h3::after { content: attr(data-wort); content: attr(data-wort) / ""; /* leerer Alternativtext: Screenreader lesen das Wort nur einmal */
  position: absolute; inset: 0; color: var(--papier);
  clip-path: inset(-0.2em calc((1 - var(--licht, 1)) * 100%) -0.3em 0); }
.leistung-text p { max-width: 30rem; margin-top: 1.1rem; color: var(--leise-hell); text-wrap: pretty; }
/* Gepinnt: alle vier liegen übereinander, die Reiter zeigen, wo man steht. */
.leistungen-buehne.gepinnt { height: 100svh; margin-top: 0; display: grid; align-items: center;
  padding: 3vh 0 calc(var(--leiste-hoehe) + 28px); }
.gepinnt .leistungen-box { height: min(78svh, 760px); display: grid; grid-template-rows: auto minmax(0, 1fr); }
.gepinnt .leistungen-reiter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(14px, 2vh, 28px); padding: 0; list-style: none; }
.gepinnt .leistungen-reiter li { border-radius: 999px; border: 1px solid color-mix(in srgb, var(--leise) 70%, transparent); color: var(--leise-hell);
  font: 500 0.875rem/1.2 var(--schrift-titel); transition: color 200ms, background-color 200ms, border-color 200ms; }
.gepinnt .leistungen-reiter li[data-aktiv] { color: var(--tinte); background: var(--akzent); border-color: var(--akzent); }
/* Sprungknöpfe zur Leistung (seite.js): die ganze Pille ist die Klickfläche */
.leistungen-reiter button { display: block; padding: 7px 14px; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; cursor: pointer; }
.leistungen-reiter button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.gepinnt .leistungen { gap: 0; min-height: 0; }
.gepinnt .leistung { grid-area: 1 / 1; min-height: 0; }
/* Die Leistungen liegen übereinander; verdeckte (opacity 0) dürfen keine Klicks der sichtbaren abfangen. */
.gepinnt .leistung:not([data-aktiv]) { pointer-events: none; }

/* Die Bilder der Leistungen: Browser, Workflow, Diagramm, Programm. Alles reine Darstellung, aria-hidden. */
.browser, .workflow, .diagramm, .programm { border-radius: 16px; border: 1px solid color-mix(in srgb, var(--leise) 70%, transparent); background: var(--tinte); overflow: hidden;
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.85); }
.browser-leiste, .programm-leiste { display: flex; align-items: center; gap: 6px; padding: 10px 14px;
  background: color-mix(in srgb, var(--karte-dunkel) 70%, var(--tinte)); border-bottom: 1px solid color-mix(in srgb, var(--leise) 70%, transparent);
  color: var(--leise-hell); font: 500 0.75rem/1 var(--schrift-titel); }
.browser-leiste i, .programm-leiste i { width: 9px; height: 9px; border-radius: 50%; background: var(--leise); }
.browser-leiste span { flex: 0 1 220px; margin-left: 10px; padding: 5px 12px; border-radius: 999px; background: var(--tinte); }
.programm-leiste span { margin-left: 10px; color: var(--papier); }
.browser-fenster { aspect-ratio: 16 / 10; overflow: hidden; }
.browser-fenster img { width: 100%; height: auto; }
.workflow { position: relative; aspect-ratio: 5 / 3;
  background: var(--tinte) radial-gradient(circle, color-mix(in srgb, var(--leise) 60%, transparent) 1px, transparent 1.6px) 0 0 / 18px 18px; }
.verbindungen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.verbindungen path { fill: none; stroke: var(--akzent); stroke-width: 0.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.knoten { position: absolute; width: 12%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 22%; color: var(--papier);
  background: var(--karte-dunkel); border: 1px solid color-mix(in srgb, var(--leise) 90%, transparent); box-shadow: 0 10px 24px -12px rgb(0 0 0 / 0.8); }
.knoten svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.knoten-name { position: absolute; top: calc(100% + 6px); left: -40%; right: -40%; text-align: center; white-space: nowrap;
  color: var(--leise-hell); font: 500 clamp(0.62rem, 0.9vw, 0.8125rem)/1 var(--schrift-titel); }
.knoten.ziel { color: var(--akzent); border-color: var(--akzent);
  box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--akzent) calc(var(--glanz, 1) * 70%), transparent); }
.diagramm { display: grid; gap: 14px; padding: clamp(16px, 2vw, 26px); }
.diagramm-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 500 0.9375rem/1 var(--schrift-titel); }
.bild-hinweis { color: var(--leise-hell); font-size: 0.75rem; }
.diagramm svg { width: 100%; height: auto; aspect-ratio: 400 / 220; overflow: visible; }
.diagramm .raster { fill: none; stroke: color-mix(in srgb, var(--leise) 50%, transparent); stroke-width: 1; }
.diagramm .balken rect { fill: color-mix(in srgb, var(--leise) 45%, transparent); rx: 4px; }
.diagramm .flaeche { fill: color-mix(in srgb, var(--akzent) 16%, transparent); }
.diagramm .kurve { fill: none; stroke: var(--akzent); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.quellen { display: flex; flex-wrap: wrap; gap: 8px; }
.quellen span { padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--leise) 70%, transparent); color: var(--leise-hell); font: 500 0.8125rem/1 var(--schrift-titel); }
.programm-inhalt { display: grid; grid-template-columns: 0.7fr 1.3fr 1.1fr; min-height: clamp(220px, 26vw, 360px); }
.programm-menue { display: grid; align-content: start; gap: 4px; margin: 0; padding: 14px 10px; list-style: none; border-right: 1px solid color-mix(in srgb, var(--leise) 70%, transparent);
  color: var(--leise-hell); font: 500 0.8125rem/1 var(--schrift-titel); }
.programm-menue li { padding: 8px 10px; border-radius: 8px; }
.programm-menue .aktiv { color: var(--papier); background: color-mix(in srgb, var(--akzent) 22%, transparent); }
.programm-liste { display: grid; align-content: start; gap: 6px; margin: 0; padding: 10px; list-style: none; }
.programm-liste li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px;
  background: var(--karte-dunkel); font-size: 0.8125rem; }
.programm-liste li.aktiv { box-shadow: inset 0 0 0 1px var(--akzent); }
.programm-liste span { padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--leise) 45%, transparent);
  color: var(--leise-hell); font-size: 0.6875rem; }
.programm-liste .fertig { color: var(--tinte); background: var(--leise-hell); }
.programm-liste .neu { color: var(--tinte); background: var(--akzent); }
.programm-karte { display: grid; align-content: start; gap: 8px; margin: 10px; padding: 14px; border-radius: 12px; background: var(--karte-dunkel);
  color: var(--leise-hell); font-size: 0.8125rem; }
.programm-karte b { color: var(--papier); font: 700 1rem/1.2 var(--schrift-titel); }
.programm-knopf { justify-self: start; margin-top: 6px; padding: 7px 12px; border-radius: 999px; background: var(--akzent); color: var(--tinte); font-weight: 600; }

/* So arbeite ich: sechs Schritte untereinander, links bleibt die Überschrift stehen, eine Linie verbindet die Schritte. */
.ablauf { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ablauf-kopf { position: sticky; top: 14vh; }
.leitsatz { max-width: 34rem; margin-top: 1rem; font: 500 clamp(1.15rem, 1.6vw, 1.45rem)/1.3 var(--schrift-titel);
  letter-spacing: -0.02em; text-wrap: balance; }
.leitsatz span { display: block; margin-top: 0.7rem; color: var(--leise-hell); font: 400 1rem/1.55 var(--schrift-text); letter-spacing: 0; }
.schritte-buehne { position: relative; padding-left: 40px; }
.schritte-buehne::before, .schritt-linie { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; }
.schritte-buehne::before { background: color-mix(in srgb, var(--leise) 70%, transparent); }
.schritt-linie { z-index: 1; background: var(--akzent); transform-origin: center top; }
.schritte { display: grid; gap: clamp(16px, 2.6vh, 26px); margin: 0; padding: 0; list-style: none; }
.schritt { position: relative; }
/* Noch nicht erreichte Schritte: die Überschrift steht im leisen Ton und leuchtet beim Erreichen in voller Schriftfarbe auf.
   Ohne Deckkraft, damit Nummern und orange Wörter in beiden Modi über 4,5:1 bleiben (vorher 0,7 Deckkraft, darunter 2,9:1). */
.bewegt .schritt h3 { color: color-mix(in srgb, var(--papier) calc(var(--punkt, 1) * 100%), var(--leise-hell)); }
.schritt::before { content: ""; position: absolute; z-index: 2; top: 3px; left: -40px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--akzent); box-shadow: 0 0 0 5px var(--tinte); scale: var(--punkt, 1); }
.schritt .nr { font: 500 0.8125rem/1 var(--schrift-titel); color: var(--akzent); margin-bottom: 6px; }
.schritt h3 { font-size: clamp(1.1rem, 1.4vw, 1.3rem); margin-bottom: 4px; }
.schritt p:last-child { color: var(--leise-hell); max-width: 34rem; font-size: 0.9375rem; line-height: 1.5; text-wrap: pretty; }

/* Über mich: Foto und Text nebeneinander, Zitat als ruhiger Schlusspunkt. */
.ich { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ich-foto { margin: 0; }
.ich img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 62% 50%; border-radius: 8px; }
/* Das Foto zoomt beim Scrollen hinein und wieder heraus (--zoom, seite.js); ein warmer Schatten liegt dahinter. */
.ich-foto { border-radius: 8px; scale: var(--zoom, 1);
  box-shadow: 0 34px 70px -30px rgb(0 0 0 / 0.85), 0 26px 60px -36px color-mix(in srgb, var(--akzent) 60%, transparent); }
.ich-text p:not(.vorzeile) { max-width: 34rem; color: var(--leise-hell); margin-top: 1.1rem; text-wrap: pretty; }
.ich-text h2 + p { color: var(--papier); font-size: 1.0625rem; }
.zitat { margin: 2rem 0 0; padding: 0; }
.zitat p { margin: 0; color: var(--papier); font: 500 clamp(1.5rem, 2.4vw, 2.1rem)/1.2 var(--schrift-titel); letter-spacing: -0.02em; }
.zitat cite { display: block; margin-top: 0.6rem; color: var(--leise-hell); font: 500 0.9375rem/1 var(--schrift-titel); font-style: normal; }

@media (max-width: 899px) {
  .leistung, .ich, .ablauf { grid-template-columns: 1fr; }
  .ablauf-kopf { position: static; }
  .ich img { aspect-ratio: 16 / 10; }
}
@media (max-width: 699px) {
  .programm-inhalt { grid-template-columns: 1fr 1fr; }
  .programm-menue { display: none; }
}

/* Aus meiner Werkstatt als Box zum Anklicken (Marcel, 23.10.2026): links die Arbeiten, rechts Bild und Text der gewählten.
   Auswahlfelder mit :has, auch ohne JavaScript und per Pfeiltasten; am Handy klappt jede Arbeit unter ihrem Eintrag auf. */
/* Werkstatt (Erlebnis, 23.10.2026): fünf Reiter in einer Reihe, darunter die gewählte Arbeit mit Bild in ganzer Breite */
.werkstatt { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 4px 6px;
  align-content: start; min-width: 0; margin: clamp(24px, 4vh, 36px) 0 0; padding: clamp(14px, 1.6vw, 20px); border: 1px solid color-mix(in srgb, var(--leise) 60%, transparent);
  border-radius: 24px; background: linear-gradient(160deg, color-mix(in srgb, var(--akzent) 7%, var(--karte-dunkel)), var(--karte-dunkel) 55%); }
.werk-wahl { position: relative; grid-row: 1; display: grid; gap: 4px; padding: 14px 16px 14px 20px; border-radius: 14px; cursor: pointer; }
.werk-wahl input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.werk-wahl::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: transparent; }
.werk-art { color: var(--leise-hell); font: 600 0.75rem/1.2 var(--schrift-titel); letter-spacing: 0.08em; text-transform: uppercase; }
.werk-name { color: var(--leise-hell); font: 700 1.125rem/1.25 var(--schrift-titel); }
.werk-wahl:has(input:checked) { background: color-mix(in srgb, var(--akzent) 13%, transparent); }
.werk-wahl:has(input:checked)::before { background: var(--akzent); }
.werk-wahl:has(input:checked) .werk-name { color: var(--papier); }
.werk-wahl:has(input:focus-visible) { outline: 3px solid var(--akzent); outline-offset: 2px; }
.werk-zahlen { grid-column: 1 / -1; grid-row: 3; align-self: end; margin: 0; padding: 14px 20px; color: var(--leise-hell); font-size: 0.875rem; }
.werk-zahlen b { color: var(--papier); font: 700 1.125rem/1 var(--schrift-titel); }
/* die Tafel: großes Bild links (16:9, höchstens 889 × 500 px), Text rechts daneben */
.werk-tafel { display: none; grid-column: 1 / -1; grid-row: 2; grid-template-columns: minmax(0, 889px) minmax(240px, 1fr); align-items: start; gap: 16px clamp(20px, 2.5vw, 36px); min-width: 0; padding-top: 10px; }
.werkstatt .werk-tafel img { aspect-ratio: 16 / 9; }          /* schlägt .karte img, das später steht */
.werk-text { padding-top: 6px; }
.werk-wahl:has(input:checked) + .werk-tafel { display: grid; }
.karte-bild { overflow: hidden; border-radius: 14px; background: var(--tinte); border: 1px solid color-mix(in srgb, var(--leise) 70%, transparent); }
.karte img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }
.werk-text h3 { margin: 0 0 6px; font-size: 1.375rem; }
.werk-text p { max-width: 40rem; margin: 0; color: var(--leise-hell); text-wrap: pretty; }
.werk-text .hinweis { margin-top: 8px; font-size: 0.8125rem; }
@media (max-width: 899px) {
  .werkstatt { grid-template-columns: 1fr; grid-template-rows: none; padding: 8px; }
  .werk-wahl { grid-row: auto; }
  .werk-tafel { grid-template-columns: minmax(0, 1fr); }
  .werkstatt .werk-tafel img { aspect-ratio: 16 / 10; }
  .werk-text { padding-top: 0; }
  .werk-zahlen { grid-row: auto; order: 99; padding: 12px; }
  .werk-tafel { grid-column: 1; grid-row: auto; padding: 4px 8px 16px; }
  /* der Name steht schon im Eintrag darüber; die Überschrift bleibt für Bildschirmleser */
  .werk-text h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Häufige Fragen: mittig, jede Frage eine Karte mit leichtem Schatten. */
#fragen h2 { text-align: center; }
.fragen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px 14px; max-width: 76rem; margin: clamp(24px, 4vh, 36px) auto 0; }
@media (max-width: 899px) { .fragen { grid-template-columns: 1fr; } }
.fragen details { padding: 0 clamp(18px, 2.4vw, 28px); border-radius: 16px; background: var(--karte-dunkel);
  border: 1px solid color-mix(in srgb, var(--leise) 60%, transparent); box-shadow: 0 18px 40px -26px rgb(0 0 0 / 0.85); }
.fragen details[open] { border-color: color-mix(in srgb, var(--akzent) 55%, transparent); }
.fragen summary { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 20px 0; cursor: pointer;
  list-style: none; font: 500 clamp(1.1rem, 1.7vw, 1.35rem)/1.3 var(--schrift-titel); letter-spacing: -0.01em; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; flex: none; color: var(--akzent); font: 500 1.6rem/1 var(--schrift-titel); }
@media (prefers-reduced-motion: no-preference) { .fragen summary::after { transition: rotate 0.3s ease; } }
.fragen details[open] summary::after { rotate: 45deg; }
.fragen .antwort p { max-width: 44rem; padding: 0 0 22px; color: var(--leise-hell); text-wrap: pretty; }

/* Kontakt: das Formular steht im Mittelpunkt. */
.kontakt { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.kontakt h2 { text-wrap: balance; }
form.anfrage { display: grid; gap: 22px; padding: clamp(24px, 3vw, 40px); border-radius: 10px; background: var(--karte-dunkel);
  border: 1px solid color-mix(in srgb, var(--leise) 70%, transparent); }
form.anfrage fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 10px; }
form.anfrage legend { width: 100%; margin-bottom: 12px; font: 500 1.125rem/1.3 var(--schrift-titel); }
form.anfrage .wahl { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--feldrand); color: var(--leise-hell); }
form.anfrage .wahl:has(input:checked) { border-color: var(--akzent); color: var(--papier); }
form.anfrage .wahl input { accent-color: var(--akzent); margin: 0; }
form.anfrage .felder { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
form.anfrage .felder label { display: grid; gap: 6px; color: var(--leise-hell); font-size: 0.9375rem; }
form.anfrage .felder .breit { grid-column: 1 / -1; }
form.anfrage input:not([type="radio"]), form.anfrage textarea { width: 100%; padding: 12px 14px; border-radius: 8px; font: inherit; font-size: 1rem;
  color: var(--papier); background: var(--tinte); border: 1px solid var(--feldrand); }
form.anfrage textarea { resize: vertical; min-height: 8rem; }
/* Eigene Fehlermeldungen (seite.js), auch im Website-Check: Rand und Text im kleinen Akzent, der auf dunklen Karten 4,5:1 hält */
.feld-fehler { display: block; margin: 2px 0 0; color: var(--akzent-klein); font: 500 0.875rem/1.4 var(--schrift-text); }
.feld-fehler[hidden] { display: none; }
fieldset .feld-fehler { width: 100%; margin-top: 2px; }
:is(form.anfrage, form.check) :is(input, textarea)[aria-invalid="true"][name] { border-color: var(--akzent-klein); }
form.anfrage .falle, form.check .falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
form.anfrage .datenschutz { color: var(--leise-hell); font-size: 0.9375rem; }
.senden, .knopf { justify-self: start; display: inline-block; padding: 14px 26px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--akzent); color: var(--tinte); font: 700 1.1875rem/1 var(--schrift-titel); text-decoration: none; }

/* Fuß */
.fuss { margin-top: clamp(80px, 12vh, 140px); padding: 32px var(--rand) 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  border-top: 1px solid color-mix(in srgb, var(--leise) 70%, transparent); color: var(--leise-hell); font-size: 0.9375rem; }
.fuss > p:first-of-type { display: flex; flex-wrap: wrap; gap: 8px 24px; }
/* Weitere Seiten über dem Rechtlichen: Leistungen und Mehr erfahren. */
.fuss-ziele { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 16px clamp(40px, 6vw, 96px); padding-bottom: 12px; }
.fuss-titel { color: var(--papier); font: 500 0.9375rem/1.2 var(--schrift-titel); }
.fuss-ziele ul { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 4px 0 0; padding: 0; list-style: none; }

/* Danke, Fehler und Rechtstexte */
.kopf-einfach { padding: 28px var(--rand); }
.wortmarke { font: 700 1.5rem/1 var(--schrift-titel); letter-spacing: -0.02em; text-decoration: none; }
.wortmarke span { color: var(--akzent); }
.rueckmeldung { max-width: 44rem; padding: clamp(40px, 10vh, 120px) var(--rand) 0; display: grid; gap: 18px; }
.rueckmeldung h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.035em; text-wrap: balance; }
.rueckmeldung p { color: var(--leise-hell); }
body.einfach { padding-bottom: 0; }

@media (max-width: 899px) {
  .kontakt { grid-template-columns: 1fr; }
  .anfrage .felder { grid-template-columns: 1fr; }
}


/* Kennzeichnung der KI-Fotos direkt am Bild (KI-Verordnung Art. 50, docs/recht-pruefung.md). Nie über dem Gesicht. Auch das
   KI-Porträt im Kopf trägt es (Kopf „Gegenlicht“, 03.11.2026). */
figure { margin: 0; }
.ki-foto { position: relative; }
.ki-label { position: absolute; z-index: 2; right: 12px; bottom: 12px; padding: 5px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--tinte) 82%, transparent); border: 1px solid color-mix(in srgb, var(--leise) 80%, transparent);
  color: var(--leise-hell); font: 500 0.75rem/1.2 var(--schrift-titel); letter-spacing: 0.02em; }
.rechtstext h2 { margin-top: 1.4rem; font-size: 1.35rem; letter-spacing: -0.01em; }
.rechtstext address { font-style: normal; color: var(--papier); line-height: 1.7; }
.rechtstext .hervorgehoben { padding-left: 16px; border-left: 2px solid var(--akzent); color: var(--papier); }
.rechtstext .stand { font-size: 0.875rem; }

/* Fußlinks mit ausreichender Fläche zum Tippen */
.fuss a { display: inline-block; padding-block: 10px; }
.ich-foto .ki-label { top: 12px; bottom: auto; }

/* Grußblock am Ende: Marcel steht neben dem Formular (Design System, Komponente Grussblock). */
.zielgruppe { margin-top: 1rem; color: var(--leise-hell); font-size: 0.9375rem; }
.gruss { display: flex; align-items: center; gap: 20px; margin-top: clamp(28px, 4vh, 44px); padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--leise) 70%, transparent); }
.gruss-foto { flex: none; display: grid; justify-items: center; gap: 8px; }
.gruss-foto { position: relative; }
.gruss-foto img { width: 120px; height: 120px; object-fit: cover; object-position: 50% 22%; border-radius: 50%; }
/* Ring in akzent um das runde Foto (Design System, Grußblock); mit Bewegung zeichnet er sich beim Eintreten,
   dahinter pulsiert ein zweiter Ring sanft nach außen (Marcel, 22.10.2026). */
.gruss-foto .puls { position: absolute; top: -6px; left: 50%; width: 132px; height: 132px; margin-left: -66px; border-radius: 50%;
  border: 2px solid var(--akzent); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .gruss-foto .puls { animation: pulsieren 2.6s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
}
@keyframes pulsieren { 0% { opacity: 0.7; scale: 1; } 100% { opacity: 0; scale: 1.35; } }
.gruss-foto .ring { position: absolute; top: -6px; left: 50%; width: 132px; height: 132px; translate: -50% 0; rotate: -90deg; pointer-events: none; overflow: visible; }
.gruss-foto .ring circle { fill: none; stroke: var(--akzent); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0; }
.gruss-foto .ki-label { position: static; }
.gruss-name { font: 500 1.6rem/1.1 var(--schrift-titel); letter-spacing: -0.02em; }
.gruss-name span { color: var(--akzent); }
.gruss-rolle { margin-top: 6px; color: var(--akzent); font: 700 1.1875rem/1.3 var(--schrift-titel); }
.gruss-ort { margin-top: 4px; color: var(--leise-hell); }

/* Rückmeldung sofort beim Drücken, nicht erst beim Loslassen (apple-design, Response). */
.leiste a:active, .senden:active, .knopf:active { transform: scale(0.97); }
@media (prefers-reduced-motion: no-preference) {
  .leiste a, .senden, .knopf { transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1); }
  .leiste a:active, .senden:active, .knopf:active { transition-duration: 100ms; }
}

/* Über mich: das Foto bewegt sich mit Bewegung leicht gegen den Text (Parallaxe, seite.js). */
.bewegt .ich-foto { overflow: hidden; }
.bewegt .ich-foto img { scale: 1.14; translate: 0 var(--parallaxe, 0%); }
/* Einblenden und Karten gleiten über CSS-Variablen (seite.js): GSAP fasst ihr transform nie an, die Hover-Effekte
   unten behalten es für sich. */
.bewegt .einblenden { translate: 0 var(--hub, 0px); }
/* Eingeblendetes, das den Tastaturfokus bekommt, steht sofort da, statt erst einzugleiten. */
.bewegt .einblenden:focus-within { opacity: 1 !important; translate: none !important; }

/* Betonte Wörter: Orange in Instrument Serif kursiv (Marcel, 23.10.2026), darunter ein Strich, der sich mit Bewegung beim
   Erreichen zieht (--strich). Die Serife hat eine kleinere x-Höhe, deshalb steht sie ein Stück größer. Der Strich sitzt
   dicht unter der Grundlinie, um --strich-hoch über dem unteren Rand der Schriftbox; dort berührte er die nächste Zeile
   (Marcel, 03.11.2026). */
.betont { --strich-hoch: 0.27em; font-family: var(--schrift-betont); font-style: italic; font-weight: 400; font-size: 1.08em;
  letter-spacing: 0; color: var(--akzent); padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - var(--strich-hoch)) / calc(var(--strich, 1) * 100%) 2px no-repeat; }
:is(h1, h2, h3) .betont { --strich-hoch: 0.22em; font-size: 1.1em; padding-right: 0.04em; }
/* kleine Zwischenüberschriften haben relativ mehr Unterlänge unter der Grundlinie */
h3 .betont { --strich-hoch: 0.25em; }
.gratis-hinweis { margin-top: 1rem; color: var(--papier); max-width: 34rem; }
#kontakt-titel .wort { display: inline-block; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Pakete und Preise als drei Karten (Marcel 25.10.2026): links SEO und GEO, in der Mitte die Website als Schwerpunkt,
   rechts Apps und Tools. Die Mitte ist breiter und höher. Die Seiten strecken sich auf die Höhe der Reihe abzüglich
   desselben Abstands oben und unten, so sind beide gleich groß. Unter 900 px untereinander, die Website zuerst. */
.preiskarten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr) minmax(0, 1fr); align-items: stretch;
  gap: clamp(12px, 1.6vw, 20px); width: min(100%, 70rem); margin: clamp(28px, 4vh, 40px) auto 0; }
.preiskarte { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin-block: clamp(20px, 2.6vw, 32px);
  padding: clamp(20px, 2vw, 26px); border-radius: 20px; border: 1px solid color-mix(in srgb, var(--leise) 60%, transparent);
  background: var(--karte-dunkel); }
.preiskarte.schwerpunkt { margin-block: 0; padding: clamp(24px, 2.6vw, 34px); border-color: var(--akzent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--akzent) 14%, var(--karte-dunkel)), var(--karte-dunkel) 55%);
  box-shadow: 0 30px 70px -40px color-mix(in srgb, var(--akzent) 75%, transparent); }
.preiskarte-etikett { align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: var(--akzent); color: var(--tinte);
  font: 700 0.75rem/1 var(--schrift-titel); letter-spacing: 0.06em; text-transform: uppercase; }
.preiskarte-zeichen { flex: none; width: 30px; height: 30px; fill: none; stroke: var(--akzent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.preiskarte h3 { font-size: 1.375rem; line-height: 1.15; }
.preiskarte.schwerpunkt h3 { font-size: 1.625rem; }
.preiskarte-satz { color: var(--leise-hell); font-size: 0.9375rem; line-height: 1.5; text-wrap: pretty; }
.preiskarte-preis { margin-top: 4px; color: var(--papier); font: 500 clamp(1.6rem, 2.4vw, 2rem)/1.05 var(--schrift-titel);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.preiskarte.schwerpunkt .preiskarte-preis { font-size: clamp(2rem, 3vw, 2.6rem); }
.preiskarte-meta { margin-top: -6px; color: var(--leise-hell); font-size: 0.875rem; }
.preiskarte-knopf { width: 100%; margin-top: 6px; padding: 13px 18px; font-size: 0.9375rem; line-height: 1.2; text-align: center; }
.preiskarte-liste { display: grid; gap: 8px; margin: 8px 0 0; padding: 16px 0 0; list-style: none; color: var(--papier); font-size: 0.875rem;
  border-top: 1px solid color-mix(in srgb, var(--leise) 50%, transparent); }
.preiskarte-liste li { position: relative; padding-left: 24px; line-height: 1.4; }
.preiskarte-liste li::before { content: ""; position: absolute; left: 3px; top: 0.4em; width: 10px; height: 5px; rotate: -45deg;
  border-left: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .preiskarte { transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms; }
  .preiskarte:hover { transform: translateY(-4px); border-color: var(--akzent); }
}
/* Im HTML steht die Website zuerst (Lese- und Tab-Reihenfolge wie am Handy), am Rechner rückt sie in die Mitte. */
.preiskarte[data-paket="seo_ki"] { grid-area: 1 / 1; }
.preiskarte.schwerpunkt { grid-area: 1 / 2; }
.preiskarte[data-paket="apps"] { grid-area: 1 / 3; }
/* Untereinander unter 900 px und bei großer Schrift: die Abfrage in em wächst mit der Schrift im Abschnitt. */
#pakete { container-type: inline-size; }
@media (max-width: 899px) {
  .preiskarten { grid-template-columns: minmax(0, 1fr); width: min(100%, 34rem); }
  .preiskarte[data-paket] { grid-area: auto; margin-block: 0; }
}
@container (max-width: 48em) {
  .preiskarten { grid-template-columns: minmax(0, 1fr); width: min(100%, 34rem); }
  .preiskarte[data-paket] { grid-area: auto; margin-block: 0; }
}
/* Darunter, kurz: Extras mit Express, laufende Posten und was nicht enthalten ist; ein Satz zu Festpreis und Steuer. */
.preis-zusaetze { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; column-gap: 28px;
  width: min(100%, 70rem); margin: clamp(24px, 3vh, 32px) auto 0; }
@media (max-width: 899px) { .preis-zusaetze { grid-template-columns: minmax(0, 1fr); width: min(100%, 34rem); } }
@container (max-width: 48em) { .preis-zusaetze { grid-template-columns: minmax(0, 1fr); width: min(100%, 34rem); } }
.preis-posten { display: grid; gap: 7px; margin: 0; padding: 0 0 14px; list-style: none; color: var(--leise-hell); font-size: 0.875rem; }
.preis-posten li { display: flex; justify-content: space-between; gap: 12px; line-height: 1.4; }
.preis-posten b { color: var(--papier); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.preis-hinweis { width: min(100%, 40rem); margin: 18px auto 0; color: var(--leise-hell); font-size: 0.8125rem; line-height: 1.45; text-align: center; }
/* Extras, Laufend und Nicht enthalten: aufklappbare Zeilen unter den Preiskarten (Marcel, 23.10.2026: weniger Text).
   Zugeklappt zeigt jede Zeile rechts die Zahl ihrer Punkte. */
.zusatz { border-top: 1px solid color-mix(in srgb, var(--leise) 55%, transparent); }
.zusatz summary { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 10px 2px; cursor: pointer; list-style: none;
  color: var(--papier); font: 600 0.9375rem/1.2 var(--schrift-titel); }
.zusatz summary::-webkit-details-marker { display: none; }
.zusatz summary::after { content: "+"; flex: none; color: var(--akzent); font: 500 1.35rem/1 var(--schrift-titel); }
.zusatz[open] summary::after { rotate: 45deg; }
.zusatz summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 6px; }
.zusatz-stand { margin-left: auto; color: var(--leise-hell); font: 500 0.8125rem/1 var(--schrift-text); }
.zusatz-liste { padding: 0 0 14px; }
.zusatz-liste { display: grid; gap: 7px; margin: 0; list-style: none; color: var(--leise-hell); font-size: 0.875rem; }
.zusatz-liste li { position: relative; padding-left: 22px; line-height: 1.4; }
.zusatz-liste.nicht li::before { content: "–"; position: absolute; left: 4px; color: var(--leise-hell); }
@media (prefers-reduced-motion: no-preference) { .zusatz summary::after { transition: rotate 0.3s ease; } }
.zusatz-liste:not(.nicht) li::before { content: ""; position: absolute; left: 3px; top: 0.42em; width: 10px; height: 5px; rotate: -45deg;
  border-left: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent); }
/* Hover: nur mit Maus, Rückmeldung ohne Überschwingen. */
@media (hover: hover) {
  .werk-wahl:hover:not(:has(input:checked)) { background: color-mix(in srgb, var(--leise) 28%, transparent); }
  .werk-wahl:hover .werk-name { color: var(--papier); }
  .fragen details:hover { transform: translateY(-3px); border-color: var(--akzent);
    box-shadow: 0 26px 50px -26px rgb(0 0 0 / 0.9), 0 16px 36px -26px color-mix(in srgb, var(--akzent) 70%, transparent); }
  .fragen summary:hover { color: var(--papier); }
  .leiste .anfrage:hover { background: color-mix(in srgb, var(--akzent) 86%, var(--papier)); }
  .senden:hover, .knopf:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--akzent) 80%, transparent); }
  form.anfrage .wahl:hover { border-color: var(--akzent); color: var(--papier); }
  form.anfrage input:not([type="radio"]):hover, form.anfrage textarea:hover { border-color: var(--leise-hell); }
  .fuss a:hover, .datenschutz a:hover { color: var(--akzent); }
  .leistungen-reiter li:hover { color: var(--papier); }
}
.leiste a:active, .senden:active, .knopf:active { transform: scale(0.97); }
@media (prefers-reduced-motion: no-preference) {
  .fragen details { transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms, box-shadow 320ms; }
  .werk-name, .fuss a, .datenschutz a, form.anfrage .wahl { transition: color 200ms, border-color 200ms; }
  .senden, .knopf { transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms; }
}

/* Wo der Schuh drückt: fünf Sätze, die Betriebe sagen. Mit Bewegung wird jeder Satz durchgestrichen und die Lösung
   erscheint (--geloest, seite.js); ohne Bewegung stehen Satz und Lösung einfach da. */
/* Wo der Schuh drückt (Erlebnis, 23.10.2026): fünf Karten, die beim Scrollen übereinander zum Stapel werden. Jede klebt
   knapp unter dem oberen Rand, leicht versetzt, die nächste schiebt sich darüber. Reines CSS, ohne JavaScript und bei
   reduzierter Bewegung dasselbe Bild. */
.probleme { --stapel-oben: 88px; display: grid; gap: 14px; max-width: 64rem; margin: clamp(24px, 4vh, 36px) auto 0; padding: 0 0 6vh; list-style: none; }
.problem { position: sticky; top: calc(var(--stapel-oben) + (var(--nr) - 1) * 12px); display: grid; align-content: start; gap: 10px; min-height: 24vh;
  padding: clamp(20px, 2.4vw, 30px); border-radius: 22px; background: var(--karte-dunkel); border: 1px solid color-mix(in srgb, var(--leise) 55%, transparent);
  box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, 0.7); }
/* passt eine Karte nicht unter die Oberkante ins Bild, klebt sie nicht: sonst verdeckte die nächste ihre Lösung.
   Die Grenze steht in rem, damit sie mit einer größer eingestellten Schrift mitwächst (Codex, 23.10.2026). */
@media (max-height: 39.9rem) { .problem { position: relative; top: auto; } }
.problem:nth-child(1) { --nr: 1; } .problem:nth-child(2) { --nr: 2; } .problem:nth-child(3) { --nr: 3; } .problem:nth-child(4) { --nr: 4; } .problem:nth-child(5) { --nr: 5; }
.problem .nr { margin: 0; color: var(--akzent-klein); font: 700 0.875rem/1 var(--schrift-titel); letter-spacing: 0.06em; }
.problem .nr span { color: var(--leise-hell); font-weight: 500; letter-spacing: 0; }
.problem h3 { max-width: 20ch; margin: 0; font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
.problem > p:not(.nr):not(.loesung) { max-width: 46rem; margin: 0; color: var(--leise-hell); font-size: 1.0625rem; line-height: 1.5; text-wrap: pretty; }
.problem .loesung { max-width: 46rem; margin: auto 0 0; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--leise) 50%, transparent); color: var(--papier); font-size: 1.0625rem; line-height: 1.5; }
.problem .loesung span { display: block; margin-bottom: 6px; font: 600 0.75rem/1 var(--schrift-titel); letter-spacing: 0.08em; text-transform: uppercase; }
.loesung span { color: var(--akzent-klein); font-weight: 600; }
/* Highlight-Wörter in Textgröße auf Karten: dieselbe hellere Stufe, sonst 3,8 bis 4,2:1 (Abschlussprüfung 25.10.2026) */
:is(.leistungen-box, .artikel-karte) .betont { color: var(--akzent-klein); }
.bewegt .problem h3 span { -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(color-mix(in srgb, var(--akzent) 85%, transparent), color-mix(in srgb, var(--akzent) 85%, transparent))
    0 58% / calc(var(--geloest, 1) * 100%) 0.09em no-repeat; }
.bewegt .problem .loesung { opacity: var(--geloest, 1); translate: 0 calc((1 - var(--geloest, 1)) * 10px); }


/* Großer Satz als Atempause: die Wörter leuchten beim Scrollen nacheinander auf (seite.js). */
/* Großer Satz nach Marcels Vorlage (23.10.2026): eine dunkle Bühne, der Satz in Versalien mittig, ein kleiner Laptop
   davor. Mit Bewegung sind die Buchstaben dunkel (3:1, große Schrift) und ein oranges Leuchten wandert als Schleife
   hindurch (--licht je Buchstabe aus seite.js); der Knopf unten rechts hält es an. Ohne Bewegung steht der Satz hell da. */
/* die Ränder dunkeln ab wie ein Schatten (Schwarz nur mit Deckkraft, keine Fläche); --satz-dunkel hält 3:1 gegen --tinte */
.satz-buehne { --satz-dunkel: color-mix(in srgb, var(--leise) 85%, var(--leise-hell)); position: relative; display: grid; place-items: center;
  align-content: center; gap: clamp(28px, 5vh, 56px); min-height: 100vh; min-height: 100svh; overflow: hidden;
  /* oben und unten mindestens so viel Luft wie eine Naht zwischen den Abschnitten */
  padding: max(var(--naht-hoehe), clamp(56px, 10vh, 120px)) var(--rand);
  background: linear-gradient(var(--tinte), transparent 14%, transparent 86%, var(--tinte)),
    radial-gradient(ellipse 75% 65% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.55)), var(--tinte); }
.grosser-satz { max-width: 18ch; margin: 0; text-align: center; text-transform: uppercase; text-wrap: balance;
  font: 500 clamp(2.1rem, 6.6vw, 6.8rem)/0.98 var(--schrift-titel); letter-spacing: -0.035em; }
.satz-wort { white-space: nowrap; }
/* nur mit Bewegung: wird sie abgeschaltet (Klasse bewegt fällt weg), steht der Satz wieder hell da */
.bewegt .grosser-satz .satz-buchstabe { color: color-mix(in srgb, var(--akzent) calc(var(--licht, 0) * 100%), var(--satz-dunkel));
  text-shadow: 0 0 calc(var(--licht, 0) * 18px) color-mix(in srgb, var(--akzent) calc(var(--licht, 0) * 75%), transparent),
    0 0 calc(var(--licht, 0) * 42px) color-mix(in srgb, var(--akzent) calc(var(--licht, 0) * 40%), transparent); }
.satz-pause { position: absolute; right: var(--rand); bottom: clamp(20px, 4vh, 40px); z-index: 2; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--feldrand); background: color-mix(in srgb, var(--tinte) 70%, transparent);
  color: var(--leise-hell); cursor: pointer; }
.satz-pause[hidden] { display: none; }
.satz-pause:hover { color: var(--papier); }
/* zwei Balken heißt anhalten, das Dreieck heißt weiter */
.satz-pause::before { content: ""; width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.satz-pause[aria-pressed="true"]::before { width: 0; height: 0; margin-left: 3px; border-block: 7px solid transparent;
  border-inline: 11px solid currentColor; border-inline-end-width: 0; }
/* Der Laptop steht unter dem Satz (UX-Prüfung 02.11.2026: mittig darauf verdeckte er „Design“). */
.satz-laptop { width: clamp(130px, 12vw, 200px); pointer-events: none;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.7)); }
.laptop-schirm { display: grid; gap: 6%; align-content: start; aspect-ratio: 16 / 10.5; padding: 7% 7% 0; border-radius: 8px 8px 2px 2px;
  border: 3px solid var(--karte-dunkel); background: var(--tinte); overflow: hidden; }
.laptop-schirm i, .laptop-schirm b { display: block; border-radius: 2px; }
.laptop-kopf { display: flex; align-items: center; gap: 5%; }
.laptop-kopf i { width: 9%; height: 3px; background: color-mix(in srgb, var(--leise) 60%, var(--tinte)); }
.laptop-kopf .laptop-logo { width: 7%; height: auto; aspect-ratio: 1; background: var(--akzent); }
.laptop-kopf b { width: 16%; height: 5px; margin-left: auto; background: var(--akzent); }
.laptop-balken { width: 62%; height: 5px; background: var(--linie); }
.laptop-balken.kurz { width: 44%; }
.laptop-zeile { width: 74%; height: 3px; background: color-mix(in srgb, var(--leise) 60%, var(--tinte)); }
.laptop-zeile.kurz { width: 60%; }
.laptop-knoepfe { display: flex; gap: 4%; }
.laptop-knoepfe b { width: 20%; height: 7px; background: var(--akzent); }
.laptop-knoepfe i { width: 15%; height: 7px; border: 1px solid color-mix(in srgb, var(--leise) 60%, var(--tinte)); }
.laptop-kurve { width: 100%; height: 22%; overflow: visible; }
.laptop-kurve path { fill: none; stroke: var(--akzent); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.bewegt .laptop-kurve path { stroke-dashoffset: calc(1 - var(--kurve, 1)); }
.laptop-fuss { height: 7px; margin: 0 -7%; border-radius: 0 0 6px 6px; background: linear-gradient(var(--karte-dunkel), var(--tinte)); }
@media (max-width: 759px) {
  .satz-buehne { min-height: auto; gap: 32px; }
  .satz-laptop { width: 150px; }
}

/* Kennzahl-Zeile in der Leistungsbox: Preis aus der Preisdatei und ein, zwei kurze Fakten als Chips. */
.kennzahl-zeile, .leistung-text .kennzahl-zeile { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.kennzahl-zeile > span { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--feldrand); color: var(--leise-hell); font-size: 0.8125rem; line-height: 1.3; }
.kennzahl-zeile > span:first-child { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 14%, transparent); color: var(--papier);
  font: 700 0.875rem/1.3 var(--schrift-titel); font-variant-numeric: tabular-nums; }
.ablauf-kopf .kennzahlen, .pruefung-kopf .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pruefung-kopf .kennzahlen.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pruefung-kopf .kennzahl, .ablauf-kopf .kennzahl { padding: 12px 14px; }
.pruefung-kopf .kennzahl-wert, .ablauf-kopf .kennzahl-wert { font-size: clamp(1.2rem, 1.7vw, 1.5rem); }
/* Kennzahlen: Wert, kurzer Text, eine Linie, die sich beim Erreichen einzeichnet (Zeichnung, kein Messwert). */
.kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: clamp(20px, 3vh, 28px) 0 0; padding: 0; list-style: none;
  border-radius: 16px; overflow: hidden; background: color-mix(in srgb, var(--leise) 45%, transparent); }
/* Wert, Text und die Linie am Boden: die letzte Zeile nimmt den Rest der Kachel, so stehen die Linien einer Reihe bündig,
   auch wenn ein Text kürzer ist (Marcel, 25.10.2026) */
.kennzahl { display: grid; grid-template-rows: auto auto 1fr; gap: 5px; padding: 14px 18px; background: var(--karte-dunkel); }
.kennzahl-wert { margin: 0; color: var(--papier); font: 500 clamp(1.4rem, 2.2vw, 1.9rem)/1.05 var(--schrift-titel); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kennzahl-wert small { color: var(--leise-hell); font-size: 0.6em; font-weight: 600; letter-spacing: 0; }
.kennzahl-text { margin: 0; color: var(--leise-hell); font-size: 0.8125rem; line-height: 1.4; }
.kennzahl-linie { display: block; grid-row: -2 / -1; align-self: end; height: 3px; margin-top: 4px; border-radius: 2px; background: var(--akzent); transform-origin: 0 50%; transform: scaleX(var(--zug, 1)); }
@media (max-width: 899px) {
  .kennzahlen { grid-template-columns: 1fr 1fr; }
}
/* Handy: dichter. */
@media (max-width: 599px) {
  .einleitung { font-size: 1rem; }
  .kennzahl { padding: 12px 14px; }
  .kennzahl-wert { font-size: 1.3rem; }
}

/* Die Hauptuntersuchung: links bleibt die Prüfplakette stehen und füllt sich, rechts die fünf Mängel. */
.pruefung { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.pruefung-kopf { position: sticky; top: 10vh; }
.plakette { position: relative; display: grid; place-items: center; width: min(100%, 200px); aspect-ratio: 1; margin-top: clamp(20px, 3vh, 32px); text-align: center; container-type: inline-size; }
.plakette svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; rotate: -90deg; }
.plakette-grund { fill: var(--karte-dunkel); stroke: color-mix(in srgb, var(--leise) 70%, transparent); stroke-width: 1; }
.plakette-takt { fill: none; stroke: color-mix(in srgb, var(--leise) 80%, transparent); stroke-width: 10; stroke-dasharray: 0.9 0.1; }
.plakette-fuellung { fill: none; stroke: var(--akzent); stroke-width: 10; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--fortschritt, 1)); }
.plakette-kopf { position: absolute; top: 27%; color: var(--leise-hell); font: 500 0.75rem/1 var(--schrift-titel); letter-spacing: 0.12em; text-transform: uppercase; }
/* Die Schrift wächst mit der Plakette (cqi), damit jede Stufe in den inneren Kreis passt; lange Wörter trennt
   ein weiches Trennzeichen in data-stufe (Verkehrs-unsicher). */
.plakette-stufe { position: relative; max-width: 66%; color: var(--papier); font: 500 min(1.45rem, 10.5cqi)/1.15 var(--schrift-titel); hyphens: manual; }
/* Bündig (Marcel, 25.10.2026: „angleichen“): eine gemeinsame Spalte für die Etiketten, so breit wie das breiteste;
   jede Zeile übernimmt sie per subgrid, alle Etiketten sind gleich breit und alle Titel beginnen an derselben Stelle.
   Etikett und Titel stehen auf einer Mittellinie. Ohne subgrid gilt die feste Spalte davor. */
.maengel { container: maengel / inline-size; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 16px; margin: 0; padding: 0; list-style: none; }
.mangel { grid-column: 1 / -1; display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); grid-template-columns: subgrid;
  column-gap: 16px; align-items: center; padding: 12px 16px; border-radius: 14px; background: var(--karte-dunkel);
  border: 1px solid color-mix(in srgb, var(--leise) 70%, transparent); }
.mangel .stufe { justify-self: stretch; }
.mangel h3 { grid-column: 2; }
/* Weiße Schrift mit orangem Rahmen und Punkt: Orange auf der Karte bliebe bei kleiner Schrift unter 4,5:1. */
.mangel .stufe { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--akzent); color: var(--papier); font: 600 0.8125rem/1 var(--schrift-titel); }
.mangel .stufe::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); }
.mangel[data-stufe="Verkehrsunsicher"] .stufe { background: var(--akzent); color: var(--tinte); }
.mangel[data-stufe="Verkehrsunsicher"] .stufe::before { background: var(--tinte); }
.mangel h3 { margin: 0; font-size: 1.0625rem; line-height: 1.3; text-wrap: balance; }
/* Ist die Liste schmal (Handy) oder die Schrift groß, steht das Etikett über dem Titel, beide bündig links. Die Grenze
   steht in rem und wächst deshalb mit der eingestellten Schriftgröße; jede Zeile wird dann ein eigenes einspaltiges
   Raster über die ganze Breite, auch in Browsern ohne subgrid. */
@container maengel (max-width: 26rem) {
  .mangel { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .mangel .stufe { justify-self: start; }
  .mangel h3 { grid-column: 1; }
}
.bewegt .mangel.aktiv { opacity: 1; border-color: var(--akzent); box-shadow: 0 24px 48px -30px color-mix(in srgb, var(--akzent) 60%, transparent); }
/* Anfragekarte nach Marcels Vorlage (23.10.2026): alles mittig, Etikett, zweizeilige Überschrift mit oranger Zeile,
   die fünf Prüfpunkte als Chips, darunter eine schmale Formularkarte vor einem schwachen orangen Schein. */
.check-karte { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; margin-top: clamp(28px, 4vh, 48px); text-align: center; }
.check-karte::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: 0; width: min(900px, 120%); height: 70%; translate: -50% 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--akzent) 12%, transparent), transparent); pointer-events: none; }
.check-marke { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--akzent) 55%, transparent); background: color-mix(in srgb, var(--akzent) 12%, transparent);
  color: color-mix(in srgb, var(--akzent) 65%, var(--papier)); font: 700 0.75rem/1 var(--schrift-titel); letter-spacing: 0.08em; text-transform: uppercase; }
.check-marke svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.check-karte h3 { max-width: 24ch; margin: 0 0 14px; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.zeile-akzent { display: block; background: linear-gradient(90deg, var(--akzent), color-mix(in srgb, var(--akzent) 55%, var(--papier)));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.check-einleitung { max-width: 56ch; margin: 0 0 20px; color: var(--leise-hell); font-size: 1.0625rem; line-height: 1.6; }
.check-punkte { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; margin: 0 0 26px; padding: 0; list-style: none; }
.check-punkte li { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px; background: var(--karte-dunkel);
  border: 1px solid color-mix(in srgb, var(--leise) 55%, transparent); color: var(--leise-hell); font-size: 0.875rem; }
.check-punkte li::before { content: ""; flex: none; width: 9px; height: 5px; margin-top: -3px; rotate: -45deg;
  border-left: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent); }
form.check { display: grid; gap: 18px; width: min(100%, 520px); padding: clamp(22px, 3vw, 36px); border-radius: 20px; text-align: left;
  background: color-mix(in srgb, var(--tinte) 55%, var(--karte-dunkel)); border: 1px solid color-mix(in srgb, var(--leise) 55%, transparent);
  box-shadow: 0 40px 80px -48px color-mix(in srgb, var(--akzent) 45%, transparent); }
form.check label { display: grid; gap: 8px; color: var(--papier); font: 600 0.875rem/1.3 var(--schrift-titel); }
form.check .feld-name { display: block; }
form.check .pflicht { color: var(--akzent); }
form.check .freiwillig { color: var(--leise-hell); font-weight: 500; }
form.check :is(input:not([type="hidden"]), select) { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 10px; font: 400 1rem/1.2 var(--schrift-text);
  color: var(--papier); background: var(--tinte); border: 1px solid var(--feldrand); }
form.check :is(input, select):focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: var(--akzent); }
form.check ::placeholder { color: var(--leise-hell); opacity: 0.8; }
form.check select { appearance: none; padding-right: 40px; cursor: pointer; }
/* Pfeil der Auswahl als reines CSS (keine eingebettete Grafik) */
.feld-auswahl { position: relative; display: block; }
.feld-auswahl::after { content: ""; position: absolute; right: 17px; top: 50%; width: 7px; height: 7px; translate: 0 -70%; rotate: 45deg;
  border-right: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent); pointer-events: none; }
.feld-symbol { position: relative; display: block; }
.feld-symbol svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; translate: 0 -50%; fill: none; stroke: var(--leise-hell);
  stroke-width: 1.4; pointer-events: none; }
form.check .feld-symbol input { padding-left: 42px; }
form.check .senden { justify-self: stretch; margin-top: 4px; padding: 16px 20px; border-radius: 12px; font-size: 1.0625rem; text-align: center; }
form.check .datenschutz { margin: 0; color: var(--leise-hell); font-size: 0.8125rem; line-height: 1.5; text-align: center; }
/* Schnellcheck (Marcel, 25.10.2026): Eingabe als Pille, darunter Plakette mit Stufe und die zwölf Punkte, offene zuerst.
   Ohne JavaScript bleibt alles verborgen (hidden), das Anfrageformular steht wie gehabt. */
.schnellcheck[hidden], .schnellcheck-fehler[hidden], .schnellcheck-ergebnis[hidden], .schnellcheck-js-hinweis[hidden] { display: none; }
.schnellcheck { width: min(100%, 560px); margin: 0; }
.schnellcheck-feld { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: var(--karte-dunkel);
  border: 1px solid var(--feldrand); }
.schnellcheck-feld:focus-within { outline: 2px solid var(--akzent); outline-offset: 2px; }
.schnellcheck-feld input { flex: 1; min-width: 0; min-height: 44px; padding: 10px 14px; border: 0; background: transparent; color: var(--papier);
  font: 400 1rem/1.2 var(--schrift-text); }
.schnellcheck-feld input:focus { outline: none; }
.schnellcheck-feld input::placeholder { color: var(--leise-hell); opacity: 0.85; }
.schnellcheck-knopf { flex: none; min-height: 44px; padding: 10px 20px; border: 0; border-radius: 999px; cursor: pointer; background: var(--akzent);
  color: var(--tinte); font: 700 1rem/1 var(--schrift-titel); }
.schnellcheck-knopf:focus-visible { outline: 2px solid var(--papier); outline-offset: 2px; }
.schnellcheck[aria-busy="true"] .schnellcheck-knopf { opacity: 0.75; cursor: progress; }
.schnellcheck-hinweis { margin: 10px 0 0; color: var(--leise-hell); font-size: 0.8125rem; line-height: 1.5; }
.schnellcheck-fehler { display: grid; justify-items: center; gap: 10px; width: min(100%, 560px); margin: 16px 0 0; padding: 14px 18px; border-radius: 14px;
  background: var(--karte-dunkel); border: 1px solid color-mix(in srgb, var(--akzent) 60%, transparent); }
.schnellcheck-fehler p { margin: 0; color: var(--papier); line-height: 1.5; }
.schnellcheck-ergebnis { display: grid; justify-items: center; gap: 14px; width: min(100%, 640px); margin: 24px 0 4px; }
.schnellcheck-plakette { width: 170px; margin: 0; }
/* das Etikett passt in den inneren Kreis und steht auch am Handy (dort blendet die Abschnittsplakette ihres aus) */
.check-karte .schnellcheck-plakette .plakette-kopf { display: block; top: 25%; font-size: 0.625rem; letter-spacing: 0.08em; }
.schnellcheck-plakette .plakette-fuellung { transition: stroke-dashoffset 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.plakette-haken { display: none; position: absolute; bottom: 20%; width: 22px; height: 22px; fill: none; stroke: var(--akzent);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.schnellcheck-plakette[data-stufe="Ohne Mängel"] .plakette-haken { display: block; }
@keyframes plakette-drehen { to { rotate: 360deg; } }
@media (prefers-reduced-motion: no-preference) {
  .schnellcheck-plakette.prueft .plakette-takt { transform-box: fill-box; transform-origin: center; animation: plakette-drehen 1.4s linear infinite; }
}
.schnellcheck-ergebnis[data-zustand="prueft"] > :not(.schnellcheck-plakette) { display: none; }
.schnellcheck-geprueft, .schnellcheck-grenze { margin: 0; color: var(--leise-hell); font-size: 0.875rem; line-height: 1.5; }
.schnellcheck-js-hinweis { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--karte-dunkel); color: var(--papier); line-height: 1.5; text-align: left; }
/* offene und nicht prüfbare Punkte als volle Zeilen mit Satz, bestandene als kompakte Kacheln nebeneinander */
.schnellcheck-punkte { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; width: 100%; margin: 0;
  padding: 0; list-style: none; text-align: left; }
.schnellcheck-punkte li:is([data-zustand="offen"], [data-zustand="nicht_pruefbar"]) { grid-column: 1 / -1; }
.schnellcheck-punkte li[data-zustand="in_ordnung"] { padding: 10px 14px; }
.schnellcheck-punkte li[data-zustand="in_ordnung"] .satz { display: none; }
.schnellcheck-punkte li[data-zustand="in_ordnung"] strong { font-size: 0.9375rem; }
.schnellcheck-punkte li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 16px; border-radius: 12px; background: var(--karte-dunkel);
  border: 1px solid color-mix(in srgb, var(--leise) 70%, transparent); }
.schnellcheck-punkte li[data-zustand="offen"] { border-color: color-mix(in srgb, var(--akzent) 70%, transparent); }
.schnellcheck-punkte .zustand { display: inline-flex; align-items: center; gap: 7px; justify-self: start; color: var(--papier);
  font: 600 0.75rem/1 var(--schrift-titel); letter-spacing: 0.02em; }
.schnellcheck-punkte .zustand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--leise-hell); }
.schnellcheck-punkte li[data-zustand="in_ordnung"] .zustand::before { width: 9px; height: 5px; margin-top: -3px; border-radius: 0; rotate: -45deg;
  background: none; border-left: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent); }
.schnellcheck-punkte li[data-zustand="offen"] .zustand::before { background: var(--akzent); }
.schnellcheck-punkte li[data-zustand="nicht_pruefbar"] .zustand::before { background: transparent; border: 1.5px dashed var(--leise-hell); }
.schnellcheck-punkte strong { color: var(--papier); font: 600 1rem/1.3 var(--schrift-titel); }
.schnellcheck-punkte .satz { color: var(--leise-hell); font-size: 0.875rem; line-height: 1.45; }
.check-formular-titel { margin: clamp(30px, 4vh, 44px) 0 14px; color: var(--papier); font: 600 1.25rem/1.2 var(--schrift-titel); letter-spacing: -0.01em; }
@media (max-width: 899px) {
  /* Einspaltig steht die Plakette über der Liste und füllt sich erst mit ihr (Marcel, 23.10.2026: sie scrollte weg,
     bevor sie voll war). Deshalb bleibt sie verkleinert oben rechts stehen, solange die Mängel laufen: Der Kopf löst
     sich auf (display: contents), damit die Plakette in der ganzen Hauptuntersuchung kleben kann, nicht nur im Kopf. */
  .pruefung { grid-template-columns: 1fr; row-gap: 0; }
  .pruefung-kopf { display: contents; }
  .pruefung .plakette { justify-self: end; width: 116px; }
  /* mitlaufen nur mit Bewegung: ohne sie füllt sich nichts, dann bleibt sie an ihrem Platz und verdeckt keine Mängel */
  .bewegt .pruefung .plakette { position: sticky; top: 24px; z-index: 3; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.55)); }
  /* so klein passt das Etikett „Prüfplakette“ nicht in den Ring; die Stufe allein reicht dort */
  .plakette-kopf { display: none; }
  .maengel { margin-top: clamp(32px, 6vw, 96px); }          /* wie zuvor der Rasterabstand */
}
@media (max-width: 759px) { .bewegt .pruefung .plakette { top: 72px; } }          /* unter der Kopfleiste (60 px) */

/* Über mich: fünf Zusagen mit Haken. */
.zusagen-titel { margin-top: 2.2rem; font-size: 1.35rem; }
.zusagen { display: grid; gap: 10px; max-width: 34rem; margin: 14px 0 0; padding: 0; list-style: none; }
.ich .zusagen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; max-width: none; font-size: 0.9375rem; }
@media (max-width: 599px) { .ich .zusagen { grid-template-columns: 1fr; } }
.zusagen li { position: relative; padding-left: 30px; color: var(--leise-hell); }
.zusagen li::before { content: "✓"; position: absolute; left: 4px; top: 0; color: var(--akzent); font-weight: 700; }
.zusagen b { color: var(--papier); font-weight: 600; }

/* Checkliste fürs Angebot: acht Fragen in zwei Spalten, jede mit der eigenen Antwort. */
/* Bevor Sie sich entscheiden (Erlebnis, 23.10.2026): acht Punkte als nummerierte Liste in zwei Spalten, ohne Karten,
   am Rechner und am Handy gleich. */
.checkliste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(32px, 5vw, 72px); max-width: 64rem; margin: clamp(24px, 4vh, 36px) 0 0;
  padding: 0; list-style: none; counter-reset: punkt; }
.punkt { position: relative; padding: 0 0 0 48px; counter-increment: punkt; }
.punkt::before { content: counter(punkt, decimal-leading-zero); position: absolute; left: 0; top: 0.05em; color: var(--akzent); font: 500 1.35rem/1 var(--schrift-titel); letter-spacing: -0.02em; }
.punkt h3 { margin-bottom: 6px; font-size: 1.125rem; line-height: 1.3; }
.punkt p { color: var(--leise-hell); font-size: 0.9375rem; line-height: 1.5; text-wrap: pretty; }
.punkt .bei-mir { margin-top: 8px; color: var(--papier); font-weight: 600; }
.punkt .bei-mir a { text-decoration-color: var(--akzent); text-underline-offset: 4px; text-decoration-thickness: 2px; }
/* Haken vor „Bei mir“: zeichnet sich ein, wenn der Punkt ankommt (seite.js, --haken); ohne Bewegung fertig. */
.haken { width: 1.05em; height: 1.05em; margin-right: 6px; vertical-align: -0.17em; }
.haken path { fill: none; stroke: var(--akzent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--haken, 1)); }

@media (hover: hover) {
  .mangel:hover { border-color: color-mix(in srgb, var(--akzent) 70%, transparent); }
}

/* Weiche Übergänge zwischen den Seiten (View Transitions), bei reduzierter Bewegung aus. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* Link von der Startseite auf die Unterseiten („Mehr über mich“, „Mehr zu …“). */
.mehr-link { margin: 1.6rem 0 0; }
.mehr-link a { display: inline-flex; align-items: center; gap: 8px; color: var(--papier); font: 600 1rem/1.2 var(--schrift-titel);
  text-decoration: underline; text-decoration-color: var(--akzent); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.mehr-link a::after { content: "→"; color: var(--akzent); transition: translate 0.25s ease; }
.mehr-link a:hover::after, .mehr-link a:focus-visible::after { translate: 4px 0; }

/* Handy */
@media (max-width: 599px) {
  .probleme { --stapel-oben: 76px; }
  .problem { min-height: 0; }
  .checkliste { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .leistung { grid-template-columns: minmax(0, 1fr); }
  /* Mockup ordnet sich wie in rund 440 px Breite und wird maßstäblich kleiner, statt rechts beschnitten zu werden */
  .leistung-bild { width: 80%; margin-inline: auto; zoom: 0.6; }
  .abschnitt { padding-top: 56px; }
  .leistung h3 { font-size: 2rem; }
  .check-marke { gap: 6px; padding: 7px 12px; font-size: 0.6875rem; letter-spacing: 0.05em; }
  .ablauf-kopf .kennzahl, .pruefung-kopf .kennzahl { padding: 10px 12px; }
  .ablauf-kopf .kennzahl-text, .pruefung-kopf .kennzahl-text { font-size: 0.75rem; }
  .schritte { gap: 14px; }
}
/* Rechner ohne Bewegung (oder ohne JavaScript): die vier Leistungen stehen im Raster statt untereinander. */
@media (min-width: 900px) {
  .leistungen-buehne:not(.gepinnt) .leistungen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
  .leistungen-buehne:not(.gepinnt) .leistung { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 20px; }
  .leistungen-buehne:not(.gepinnt) .leistung h3 { font-size: clamp(2rem, 2.8vw, 2.6rem); }
  /* das Mockup ordnet sich wie in einer breiteren Fläche und wird maßstäblich kleiner, statt beschnitten zu werden */
  .leistungen-buehne:not(.gepinnt) .leistung-bild { zoom: 0.72; }
}

/* Navigation am Handy (bis 759 px, Marcel 23.10.2026): Kopfleiste mit Wortmarke und Menü-Knopf statt der schwebenden
   Leiste. Das Menü (details) klappt als Tafel über die ganze Seite auf; seite.js schließt es nach einem Sprung und mit
   Escape und hält die Seite dahinter still. Am Rechner bleibt die Leiste unten, die Kopfleiste ist aus. */
.kopfleiste, .kopf-anfrage { display: none; }
@media (max-width: 759px) {
  /* „Anfragen“ rechts neben dem Menü-Knopf; im offenen Menü steht „Kostenlos anfragen“ groß, dort weicht er */
  .kopf-anfrage { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; padding: 0 16px; font-size: 0.9375rem; }
  /* am Zustand des details selbst, damit er auch ohne JavaScript weicht; visibility nimmt ihn aus der Tab-Folge */
  .kopfleiste:has(.menue[open]) .kopf-anfrage { visibility: hidden; }
  /* unter der Kopfleiste, auch wenn sie bei großer Schrift umbricht (--kopf-hoehe misst seite.js) */
  html { scroll-padding-top: calc(var(--kopf-hoehe, 60px) + 12px); }
  .leiste { display: none; }
  .unterseite .kopf { display: none; }
  .kopfleiste { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    height: 60px; padding: 0 var(--rand); border-bottom: 1px solid color-mix(in srgb, var(--leise) 45%, transparent); isolation: isolate; }
  /* Glas als eigene Ebene: ein backdrop-filter an der Kopfleiste selbst würde die fixierte Menü-Tafel an sie binden */
  .kopfleiste::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--tinte) 82%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
  .kopfleiste .wortmarke { font-size: 1.125rem; transition: opacity 220ms, visibility 0s; }
  /* auf der Startseite steht der große Name direkt darunter: die kleine Wortmarke kommt erst, wenn er aus dem Bild ist */
  /* visibility nimmt sie auch aus der Tab-Folge: unsichtbar und fokussierbar wäre ein Fokus ohne Rahmen */
  .menue summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 999px; cursor: pointer;
    list-style: none; border: 1px solid var(--feldrand); color: var(--papier); font: 600 0.9375rem/1 var(--schrift-titel); }
  .menue summary::-webkit-details-marker { display: none; }
  .menue summary:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
  .menue[open] summary { border-color: var(--akzent); }
  .menue-zeichen { position: relative; width: 16px; height: 2px; border-radius: 1px; background: currentColor; transition: background-color 0s 120ms; }
  .menue-zeichen::before, .menue-zeichen::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; border-radius: 1px; background: currentColor;
    transition: translate 220ms cubic-bezier(0.16, 1, 0.3, 1), rotate 220ms cubic-bezier(0.16, 1, 0.3, 1); }
  .menue-zeichen::before { translate: 0 -5px; }
  .menue-zeichen::after { translate: 0 5px; }
  .menue[open] .menue-zeichen { background: transparent; transition-delay: 0s; }
  .menue[open] .menue-zeichen::before { translate: 0 0; rotate: 45deg; }
  .menue[open] .menue-zeichen::after { translate: 0 0; rotate: -45deg; }
  .menue-tafel { position: fixed; inset: 60px 0 0; z-index: 29; display: grid; align-content: start; gap: 28px; padding: 28px var(--rand) 40px;
    overflow-y: auto; background: var(--tinte); }
  .menue-tafel ul { display: grid; margin: 0; padding: 0; list-style: none; }
  .menue-tafel li a { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--leise) 55%, transparent);
    color: var(--papier); font: 700 1.5rem/1.1 var(--schrift-titel); letter-spacing: -0.02em; text-decoration: none; }
  .menue-tafel li a::after { content: "→"; color: var(--akzent); font-size: 1.125rem; }
  .menue-tafel li a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; }
  .menue-tafel li a[aria-current="page"] { color: var(--akzent); }          /* die Seite, auf der man gerade ist */
  .menue-anfrage { justify-self: stretch; text-align: center; }
  .menue-modus { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 18px;
    border-radius: 999px; border: 1px solid var(--feldrand); background: transparent; color: var(--papier); cursor: pointer;
    font: 600 1rem/1 var(--schrift-titel); }
  .menue-modus:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
  .kopfleiste { gap: 8px; }
  /* nur am Wurzelelement: overflow am body machte ihn zum Scrollbehälter, die Kopfleiste verlöre ihr sticky */
  html.menue-offen { overflow: hidden; }
  /* ohne JavaScript: die Tafel liegt oben auf der Seite statt fixiert; ein Sprung scrollt an ihr vorbei zum Ziel */
  .ohne-js .kopfleiste { position: relative; }
  .ohne-js .menue-tafel { position: absolute; inset: 60px 0 auto; min-height: calc(100svh - 60px); }
}
@media (max-width: 759px) and (prefers-reduced-motion: no-preference) {
  .menue[open] .menue-tafel li { animation: menue-ein 360ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }
  .menue[open] .menue-tafel li:nth-child(2) { animation-delay: 30ms; }
  .menue[open] .menue-tafel li:nth-child(3) { animation-delay: 60ms; }
  .menue[open] .menue-tafel li:nth-child(4) { animation-delay: 90ms; }
  .menue[open] .menue-tafel li:nth-child(5) { animation-delay: 120ms; }
}
@keyframes menue-ein { from { opacity: 0; translate: 0 10px; } }
/* Unter 420 px passen Wortmarke, „Anfragen“ und „Menü“ nicht nebeneinander: der Menü-Knopf zeigt nur das Zeichen,
   das Wort bleibt für Bildschirmleser (wie .nur-vorlesen). */
/* bis 479 px nur das Menü-Symbol (das Wort bleibt für Bildschirmleser), sonst reicht der Platz neben „Einschätzung“ nicht */
@media (max-width: 479px) {
  .menue summary { justify-content: center; width: 44px; padding: 0; }
  .menue-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .kopfleiste .wortmarke { white-space: nowrap; }
}
/* die schmalsten Handys (bis 359 px): Wortmarke und Knopf etwas kleiner, damit der Name auf einer Zeile bleibt */
@media (max-width: 359px) {
  .kopfleiste .wortmarke { font-size: 1rem; }
  .kopf-anfrage { padding: 0 10px; font-size: 0.875rem; }          /* „Einschätzung“ ist länger als das frühere „Anfragen“ */
}
@media (prefers-reduced-transparency: reduce) { .kopfleiste::before { background: var(--tinte); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* Kopfleiste der Startseite am Handy (Marcel 04.11.2026, nach seinen Bildern): Name mit orangem Punkt, Hell-Dunkel-Schalter
   des Kopfs und „Menü“. Sie liegt fest oben; über dem Kopf ist sie durchsichtig, danach mit Glas, ohne Übergang. */
.kopf-modus { display: none; }
@media (max-width: 759px) {
  .kopfleiste-start { position: fixed; left: 0; right: 0; }
  .kopfleiste-start .wortmarke span { color: inherit; }
  .kopfleiste-start .wortmarke::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 4px; border-radius: 50%;
    background: var(--akzent); }
  .kopfleiste-start .kopf-modus { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px;
    margin-left: auto; padding: 0; border-radius: 50%; border: 1px solid var(--feldrand); cursor: pointer; color: var(--papier);
    background: color-mix(in srgb, var(--tinte) 55%, transparent); }
  .kopfleiste-start .kopf-modus:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
  .kopfleiste-start .menue summary { background: color-mix(in srgb, var(--tinte) 55%, transparent); }
  .kopfleiste-start .menue-text { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .kopfleiste-start .menue summary { width: auto; padding: 0 16px; }
  .kopfleiste-start.ueber-kopf { border-bottom-color: transparent; }
  .kopfleiste-start.ueber-kopf::before { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* über dem hellen Kopf: Grund wie das Papier des Kopfs, Schrift und Knöpfe aus den Tokens des hellen Modus */
  :root[data-modus="hell"] .kopfleiste-start.ueber-kopf { background: var(--tinte); }
  /* im hellen Modus weiße Pillen wie auf Marcels Bildern */
  :root[data-modus="hell"] .kopfleiste-start :is(.kopf-modus, .menue summary) { background: var(--karte-dunkel); }
  .ohne-js .kopfleiste-start { position: relative; }
}

/* Mittelachse (25.10.2026, Marcel: „alles auf der seite zentrieren … zu viel hin und her“).
   Köpfe, Einleitungen und einzelne Knöpfe stehen mittig; Fließtext in Karten, Schritten und Formularen bleibt linksbündig. */
.abschnitt > h2, .abschnitt > .einleitung, .ablauf-kopf, .pruefung-kopf > h2, .pruefung-kopf > .einleitung, .kontakt-text { text-align: center; }
.einleitung, .leitsatz, .gratis-hinweis { margin-inline: auto; }
.ablauf { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: clamp(32px, 5vh, 56px); }
.ablauf-kopf { position: static; width: min(100%, 60rem); }
.ablauf-kopf .kennzahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: left; }
.schritte-buehne { width: min(100%, 40rem); }
.pruefung { grid-template-columns: 200px minmax(0, 40rem); justify-content: center; gap: 0 clamp(32px, 5vw, 72px); }
.pruefung-kopf { display: contents; }
.pruefung-kopf > h2, .pruefung-kopf > .einleitung { grid-column: 1 / -1; justify-self: center; }
.pruefung-kopf > .einleitung { margin-bottom: clamp(28px, 4vh, 44px); }
.pruefung .plakette { grid-column: 1; align-self: start; margin-top: 0; }
@media (min-width: 900px) { .pruefung .plakette { position: sticky; top: 14vh; } }   /* nebeneinander verdeckt sie nichts; am Handy klebt sie nur mit Bewegung */
.pruefung .maengel { grid-column: 2; }
.kontakt { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.kontakt-text { width: min(100%, 40rem); }
.gruss { flex-direction: column; justify-content: center; text-align: center; }
.schnellcheck-ergebnis > .schnellcheck-anfordern { justify-self: center; }
@media (max-width: 899px) {
  .ablauf-kopf .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pruefung { grid-template-columns: minmax(0, 1fr); }
  .pruefung .plakette, .pruefung .maengel { grid-column: 1; }
}
.kontakt form .senden { display: block; margin-inline: auto; }
.kontakt form .datenschutz { text-align: center; }

/* Bevor Sie sich entscheiden (Marcel 25.10.2026: „zu viel auf einmal und nicht zentriert“): eine mittige Spalte, je Frage
   eine Zeile. Mit JavaScript ein Akkordeon nach WAI-ARIA (h3 mit Knopf, aria-expanded), immer nur eine Antwort offen, beim
   Laden die erste; ohne JavaScript stehen alle Antworten offen. */
.checkliste { grid-template-columns: minmax(0, 1fr); gap: 0; width: min(100%, 44rem); margin-inline: auto;
  border-top: 1px solid color-mix(in srgb, var(--leise) 45%, transparent); }
.punkt { border-bottom: 1px solid color-mix(in srgb, var(--leise) 45%, transparent); }
.punkt::before { top: calc(18px + 0.05em); }
.punkt h3 { margin: 0; padding: 18px 0 6px; }
.punkt-frage { font: 500 1.125rem/1.3 var(--schrift-titel); letter-spacing: -0.02em; transition: color 0.2s ease; }
.punkt .punkt-text { padding: 0 32px 18px 0; }
.punkt .bei-mir { margin-top: 0; }
.klappbar .punkt h3 { padding: 0; }
.punkt-knopf { display: grid; grid-template-columns: minmax(0, 1fr) 14px; align-items: center; gap: 16px; width: 100%;
  padding: 18px 4px 18px 0; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.punkt-knopf::after { content: ""; width: 9px; height: 9px; margin-top: -4px; border-right: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent);
  rotate: 45deg; transition: rotate 0.25s cubic-bezier(0.16, 1, 0.3, 1), margin 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.punkt-knopf[aria-expanded="true"]::after { rotate: -135deg; margin-top: 4px; }
.punkt-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; }
.punkt .bei-mir a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 0; border-radius: 2px; }   /* passt in die Zeile, auch zugeschnitten */
@media (hover: hover) { .punkt-knopf:hover .punkt-frage { color: var(--akzent-klein); } }
/* Zuklappen: die Zeile schrumpft über das Raster auf 0 (0fr), danach wird die Antwort unsichtbar, also auch nicht
   mehr per Tab erreichbar und nicht vorgelesen. */
.klappbar .punkt-text { display: grid; grid-template-rows: 0fr; padding-bottom: 0; visibility: hidden;
  transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.3s; }
.klappbar .punkt-text > * { min-height: 0; overflow: hidden; }
.klappbar .punkt.ruht .punkt-text > * { overflow: visible; }
.klappbar.ohne-inert .punkt-text { transition: none; }
.klappbar.ohne-uebergang .punkt .punkt-text { transition: none; }
.klappbar .punkt.offen .punkt-text { grid-template-rows: 1fr; padding-bottom: 18px; visibility: visible;
  transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; }
@media (prefers-reduced-motion: reduce) {
  .punkt-knopf::after, .punkt-frage, .klappbar .punkt-text, .klappbar .punkt.offen .punkt-text { transition: none; }
}

/* Bausteine nach der Prüfung gegen Hero, Nutzen, Vertrauen, Entscheidung, CTA und Formular (Übergabe 25.10.2026):
   Nutzenblock nach dem Kopf, Werkstatt-Ausschnitt vor den Paketen, Schritte nach dem Absenden am Formular. */
.nutzen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2.5vw, 32px); width: min(100%, 64rem);
  margin: clamp(24px, 4vh, 36px) auto 0; padding: 0; list-style: none; text-align: center; }
.nutzen li { padding: 18px 16px 4px; border-top: 2px solid var(--akzent); }
.nutzen h3 { margin-bottom: 6px; font-size: 1.125rem; line-height: 1.3; }
.nutzen p { color: var(--leise-hell); font-size: 0.9375rem; line-height: 1.5; text-wrap: pretty; }
/* drei nebeneinander; auf schmalen Handys zwei nebeneinander und die dritte mittig darunter, jedes Bild mindestens 130 px */
.werke { --luecke: clamp(10px, 2vw, 24px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--luecke);
  width: min(100%, 64rem); margin: clamp(24px, 4vh, 36px) auto 0; }
.werk-auszug { flex: 0 1 calc((100% - 2 * var(--luecke)) / 3); min-width: 130px; margin: 0; text-align: center; }
.werk-auszug img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--leise) 45%, transparent); }
.werk-auszug h3 { margin-top: 10px; font-size: clamp(0.875rem, 1.4vw, 1.0625rem); line-height: 1.25; }
.werk-auszug .hinweis { margin-top: 4px; color: var(--leise-hell); font-size: 0.75rem; line-height: 1.35; }
#arbeiten .mehr-link { text-align: center; }
.nach-dem-absenden { width: min(100%, 40rem); margin: clamp(24px, 4vh, 36px) auto 0; text-align: center; }
.nach-dem-absenden h3 { margin-bottom: 12px; font-size: 1.125rem; }
.nach-dem-absenden ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.nach-dem-absenden li { counter-increment: schritt; color: var(--leise-hell); line-height: 1.45; }
.nach-dem-absenden li::before { content: counter(schritt); display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; margin-right: 8px;
  border: 1px solid var(--akzent); border-radius: 50%; color: var(--akzent); font: 600 0.8125rem/1 var(--schrift-titel); vertical-align: 0.05em; }
@media (max-width: 699px) {
  .nutzen { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .werk-auszug .hinweis { font-size: 0.6875rem; }
  .werk-auszug { flex-basis: calc((100% - var(--luecke)) / 2); }      /* zwei je Reihe, die Breite ganz genutzt */
}

/* Navigation mit „Kostenlose Einschätzung anfordern“ (Marcel 25.10.2026: „ja navigation auch anpassen“): unter 1100 px ohne
   „Kostenlose“, damit die Links ab 760 px in eine Zeile passen. Bei großer Schrift brechen Leiste und Kopfleiste um, statt
   etwas abzuschneiden oder Links nur durch verstecktes Scrollen erreichbar zu lassen. */
@media (max-width: 1099px) { .leiste .lang-nur { display: none; } }
@media (max-width: 899px) { .leiste .leiste-ziele a { padding-inline: 8px; } .leiste .anfrage { padding-inline: 12px; } }   /* eine Zeile ab 760 px, auch mit dem Hell-Dunkel-Schalter */
.leiste { flex-wrap: wrap; justify-content: center; }
.leiste .leiste-ziele { flex-wrap: wrap; justify-content: center; min-width: 0; }
.leiste .anfrage, .kopf-anfrage, .kopfleiste .wortmarke { white-space: nowrap; }
.kopfleiste { flex-wrap: wrap; row-gap: 6px; height: auto; min-height: 60px; padding-block: 8px; }   /* wächst mit, wenn sie umbricht */
@media (max-width: 399px) { .kopfleiste { padding-inline: 12px; column-gap: 6px; } }   /* Wortmarke, „Einschätzung“ und Menü in einer Zeile */
/* die Menütafel beginnt unter der tatsächlichen Kopfleiste (seite.js misst ihre Höhe), ohne JavaScript direkt unter ihr */
@media (max-width: 759px) {
  .menue-tafel { inset: var(--kopf-hoehe, 60px) 0 0; }
  .ohne-js .menue-tafel { inset: 100% 0 auto; }
}