/* Erklärwerk v2. Handgeschrieben, kein Framework, keine externe Anfrage.
   Bauplan: redesign/SPEC.md. Texte: redesign/copy_v2.json.
   Gilt für index.html, impressum.html und datenschutz.html. */

/* ---------- Schriften (alle lokal) ---------- */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(../fonts/inter-v12-latin-regular.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(../fonts/inter-v12-latin-500.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(../fonts/inter-v12-latin-600.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url(../fonts/inter-v12-latin-700.woff2) format("woff2"); }
@font-face { font-family: "Shantell Sans"; font-weight: 300 800; font-display: swap; src: url(../fonts/ShantellSans.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-display: swap; src: url(../fonts/GeistMono-Regular.woff) format("woff"); }
@font-face { font-family: "Geist Mono"; font-weight: 700; font-display: swap; src: url(../fonts/GeistMono-Bold.woff) format("woff"); }

/* ---------- Tokens ---------- */
:root {
  --ink: #030F2E;
  --ink-2: #1B2238;
  --ink-soft: #3A4157;
  --paper: #F1F2F4;
  --cream: #FBF8F1;
  --water: #529DFF;
  --fokus: #1B5FC1; /* Fokusring: mindestens 3:1 auf Papier, Creme und Babyblau. --water bleibt für Tropfen, Marker und Klebeband */
  --fokus-dunkel: #FBF8F1; /* Fokusring auf dem dunklen Schlamm und in der durchsichtigen Navigation darüber */
  --tape: rgba(82, 157, 255, .55);
  --green: #1C7D4E;
  --yellow: #F8F47C; /* nur noch für [UNBELEGT]-Markierungen */
  /* Palette A "Schlamm → Wasser" (Alex 15.10.2026): Gerade im OKLab-Farbraum vom Schlamm-Oliv zum Wasserblau,
     helle Kartentöne (L 0,87). Herleitung: redesign/farbpaletten.html, redesign/research/farbpaletten_bau.py */
  --pal-1: #E2D5A0;
  --pal-2: #D8D6B9;
  --pal-3: #CFD7D0;
  --pal-4: #C5D7E6;
  --pal-5: #BBD7FC;
  --pal-akzent: #66A0EE;
  --fehler: #8A2A19; /* 26.10.2026: dunkler, 4,5 zu 1 auch auf dem hellblauen Abschluss-Band */
  --line: rgba(3, 15, 46, .14);
  --line-faq: rgba(3, 15, 46, .22);
  --schatten-papier: 0 1px 0 rgba(0, 0, 0, .05), 0 14px 22px -14px rgba(20, 30, 60, .5);
  --schatten-papier-hoch: 0 1px 0 rgba(0, 0, 0, .05), 0 20px 26px -14px rgba(20, 30, 60, .5);

  /* Sieben Schriftgrößen je Ansicht, mehr nicht (SPEC 3.3) */
  --fs-1: 96px;
  --fs-2: 64px;
  --fs-3: 44px;
  --fs-4: 28px;
  --fs-5: 20px;
  --fs-6: 16px;
  --fs-7: 14px;
  --fs-preis: var(--fs-4);
  --fs-fach: var(--fs-5);
  --fs-hand: var(--fs-4);
 
  --fs-etikett-zeile: var(--fs-5);
  --fs-etikett-wort: var(--fs-2);

  --ease: cubic-bezier(.4, 0, .6, 1);

  --wrap: 1200px;
  --rand: 24px;
  --abstand: clamp(88px, 10.5vw, 152px); /* 15.10.2026: vorher bis 200 px, die Seite war zu lang */
  --kopf-inhalt: 56px;
  --nav-h: 64px;
  --knopf-h: 52px;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  background: var(--paper);
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper) url(../img/paper.jpg) 0 0 / 900px repeat;
  font: 400 var(--fs-6)/1.45 "Inter", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main, .footer { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
h1, h2 { overflow-wrap: anywhere; } /* Textabstand nach WCAG 1.4.12: lange Wörter brechen, statt abgeschnitten zu werden */
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.skip {
  --fokus: var(--fokus-dunkel); /* Creme-Ring, sichtbar auf dem Schlamm (Prüfung 26.10.2026) */
  position: absolute; left: 12px; top: -80px; z-index: 60;
  padding: 12px 16px; border-radius: 10px;
  background: var(--ink); color: #fff; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { width: min(100% - 2 * var(--rand), var(--wrap)); margin-inline: auto; }

.unbelegt {
  font: 400 var(--fs-7)/1.45 "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0;
  color: var(--ink);
  background: var(--yellow);
  padding: 1px 5px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Knöpfe (SPEC 15.1) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--knopf-h); padding: 0 24px;
  font: 600 var(--fs-6)/1 "Inter", sans-serif; letter-spacing: -.003em;
  text-decoration: none; white-space: nowrap;
  border: 2px solid var(--ink); border-radius: 10px;
  cursor: pointer;
  transition: transform 240ms var(--ease), background-color 240ms var(--ease), border-color 240ms var(--ease);
}
.btn--ink { background: var(--ink); color: #fff; }
.btn--linie { background: transparent; color: var(--ink); }
.btn--klein { min-height: 44px; padding: 0 18px; }
@media (hover: hover) {
  .btn--ink:hover { background: var(--ink-2); border-color: var(--ink-2); transform: translateY(-2px); }
  .btn--linie:hover { background: rgba(3, 15, 46, .06); transform: translateY(-2px); }
}
.btn:active { transform: translateY(0); }

/* ---------- Navigation (SPEC 4) ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--nav-h);
  border-bottom: 1px solid var(--line);
  transition: border-color 200ms var(--ease);
}
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--paper) url(../img/paper.jpg) 0 0 / 900px repeat;
  transition: opacity 200ms var(--ease);
}
.nav-oben .nav { border-bottom-color: transparent; }
.nav-oben .nav::before { opacity: 0; }
.nav-oben .nav { --fokus: var(--fokus-dunkel); }
.nav__in { display: flex; align-items: center; gap: 28px; height: 100%; }
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 var(--fs-5)/1 "Inter", sans-serif; letter-spacing: -.02em;
  text-decoration: none; color: var(--ink);
  min-height: 44px;
}
.logo__drop { width: 22px; height: 30px; flex: none; }
.nav__links { display: flex; gap: 28px; margin-left: auto; }
.nav__links a {
  font: 500 var(--fs-6)/1 "Inter", sans-serif;
  text-decoration: none;
  padding: 14px 0 12px;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 6px) / 0 2px no-repeat;
  transition: background-size 240ms var(--ease);
}
@media (hover: hover) { .nav__links a:hover { background-size: 100% 2px; } }
.nav__cta { margin-left: 8px; }
/* Sprachumschalter DE und EN (26.10.2026): die aktuelle Sprache fett, die andere als Link */
.sprache { display: flex; align-items: center; gap: 2px; margin-left: 4px; }
.sprache a {
  display: inline-grid; place-items: center; min-width: 32px; min-height: 44px; padding: 0 4px;
  font: 500 var(--fs-7)/1 "Inter", sans-serif; letter-spacing: .02em; color: var(--ink-soft); text-decoration: none;
}
.sprache a[aria-current] { font-weight: 800; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
@media (hover: hover) { .sprache a:not([aria-current]):hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; } }
.nav__zurueck + .sprache { margin-left: 12px; }
/* Am Handy wird die Kopfleiste mit dem Umschalter eng (26.10.2026): nur die andere Sprache als Link, kleinerer Knopf.
   Das Logo bleibt ganz, nur unter 360 px steht es als Tropfen (der Name bleibt für Vorlesehilfen) */
@media (max-width: 519px) {
  .nav .nav__in { gap: 8px; }
  .sprache a[aria-current] { display: none; }
  .nav .nav__cta { padding: 0 12px; font-size: 13px; }
  .nav__zurueck { font-size: 13px; }
}
/* "Erstgespräch vereinbaren" ist länger als "buchen" (27.10.2026): bis 389 px rückt die Kopfleiste enger zusammen */
@media (max-width: 389px) {
  .nav .nav__in { gap: 6px; }
  .nav .nav__cta { padding: 0 8px; font-size: 12px; }
  .nav .sprache a { min-width: 26px; padding: 0 2px; }
}
@media (max-width: 359px) { .nav .logo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* Umfrage: Umschalter rechts neben "Zurück zur Startseite" */
/* Hinweis auf die andere Sprache, nur wenn der Browser eine andere Sprache spricht (assets/js/sprache.js) */
.sprachhinweis {
  /* unten rechts als kleine Karte: verdeckt keine Überschrift, schließbar */
  position: fixed; z-index: 39; right: 12px; bottom: 12px; max-width: min(420px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 12px;
  background: var(--ink); color: #fff; font: 500 var(--fs-7)/1.4 "Inter", sans-serif;
  box-shadow: 0 10px 24px -10px rgba(3, 15, 46, .6);
}
.sprachhinweis p { margin: 0; }
.sprachhinweis a { color: #fff; font-weight: 700; text-underline-offset: 3px; }
.sprachhinweis__zu { display: grid; place-items: center; width: 40px; height: 40px; padding: 11px; border: 0; background: none; cursor: pointer; }
.sprachhinweis__zu svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; }
.sprachhinweis :focus-visible { outline-color: var(--fokus-dunkel); }

/* ---------- Papierbänder mit Reißkante ---------- */
.riss { position: relative; margin-bottom: -26px; filter: drop-shadow(0 6px 5px rgba(45, 35, 15, .24)); }
.riss--1 { z-index: 3; }
.riss--2 { z-index: 2; }
.riss--3 { z-index: 1; filter: drop-shadow(0 5px 4px rgba(45, 35, 15, .14)); }
.band { position: relative; overflow-x: clip; padding-bottom: 26px; }
.riss--1 .band { clip-path: polygon(0 0, 100% 0, 100.00% calc(100% - 11.5px), 96.86% calc(100% - 15.1px), 94.05% calc(100% - 22.2px), 85.27% calc(100% - 22.9px), 82.16% calc(100% - 2.7px), 81.11% calc(100% - 15.8px), 78.97% calc(100% - 17.8px), 69.58% calc(100% - 14.5px), 67.75% calc(100% - 12.4px), 64.85% calc(100% - 17.1px), 63.67% calc(100% - 10.5px), 62.54% calc(100% - 3.1px), 58.42% calc(100% - 13.6px), 58.03% calc(100% - 16.8px), 57.59% calc(100% - 8.9px), 57.32% calc(100% - 2.4px), 54.70% calc(100% - 18.6px), 53.53% calc(100% - 20.5px), 50.73% calc(100% - 9.0px), 45.39% calc(100% - 3.5px), 43.47% calc(100% - 11.9px), 42.88% calc(100% - 16.7px), 42.57% calc(100% - 7.0px), 39.83% calc(100% - 8.5px), 37.44% calc(100% - 19.8px), 36.78% calc(100% - 6.2px), 32.67% calc(100% - 10.7px), 31.71% calc(100% - 22.2px), 31.15% calc(100% - 8.6px), 30.30% calc(100% - 19.2px), 29.30% calc(100% - 11.3px), 24.82% calc(100% - 25.0px), 22.77% calc(100% - 16.0px), 21.07% calc(100% - 16.4px), 18.58% calc(100% - 24.3px), 15.64% calc(100% - 20.1px), 14.99% calc(100% - 4.9px), 12.98% calc(100% - 19.5px), 12.39% calc(100% - 3.8px), 9.73% calc(100% - 2.5px), 7.93% calc(100% - 20.5px), 7.67% calc(100% - 8.3px), 6.98% calc(100% - 4.2px), 6.66% calc(100% - 19.9px), 5.38% calc(100% - 8.2px), 4.49% calc(100% - 18.2px), 0.00% calc(100% - 19.1px)); }
.riss--2 .band { clip-path: polygon(0 0, 100% 0, 100.00% calc(100% - 4.2px), 98.89% calc(100% - 11.0px), 94.67% calc(100% - 18.1px), 90.83% calc(100% - 18.0px), 82.85% calc(100% - 2.5px), 79.82% calc(100% - 4.0px), 79.67% calc(100% - 20.8px), 78.73% calc(100% - 9.3px), 78.04% calc(100% - 10.3px), 75.16% calc(100% - 20.1px), 72.97% calc(100% - 14.4px), 72.77% calc(100% - 23.1px), 70.21% calc(100% - 19.7px), 67.43% calc(100% - 7.1px), 65.58% calc(100% - 4.0px), 62.43% calc(100% - 17.8px), 56.81% calc(100% - 3.2px), 54.45% calc(100% - 21.8px), 54.18% calc(100% - 13.7px), 52.01% calc(100% - 18.7px), 51.13% calc(100% - 12.6px), 48.01% calc(100% - 5.8px), 45.52% calc(100% - 3.1px), 41.58% calc(100% - 13.8px), 39.77% calc(100% - 5.5px), 39.52% calc(100% - 21.2px), 39.20% calc(100% - 11.2px), 33.01% calc(100% - 19.2px), 32.83% calc(100% - 14.3px), 31.41% calc(100% - 11.1px), 30.23% calc(100% - 24.5px), 29.27% calc(100% - 4.8px), 27.16% calc(100% - 18.7px), 26.43% calc(100% - 10.4px), 23.71% calc(100% - 7.8px), 20.73% calc(100% - 10.0px), 20.64% calc(100% - 24.7px), 15.39% calc(100% - 11.5px), 14.43% calc(100% - 2.7px), 11.39% calc(100% - 7.7px), 10.58% calc(100% - 7.3px), 7.77% calc(100% - 19.6px), 1.48% calc(100% - 24.6px), 0.00% calc(100% - 12.0px)); }
.riss--3 .band { clip-path: polygon(0 0, 100% 0, 100.00% calc(100% - 12.0px), 98.52% calc(100% - 24.6px), 92.23% calc(100% - 19.6px), 89.42% calc(100% - 7.3px), 88.61% calc(100% - 7.7px), 85.57% calc(100% - 2.7px), 84.61% calc(100% - 11.5px), 79.36% calc(100% - 24.7px), 79.27% calc(100% - 10.0px), 76.29% calc(100% - 7.8px), 73.57% calc(100% - 10.4px), 72.84% calc(100% - 18.7px), 70.73% calc(100% - 4.8px), 69.77% calc(100% - 24.5px), 68.59% calc(100% - 11.1px), 67.17% calc(100% - 14.3px), 66.99% calc(100% - 19.2px), 60.80% calc(100% - 11.2px), 60.48% calc(100% - 21.2px), 60.23% calc(100% - 5.5px), 58.42% calc(100% - 13.8px), 54.48% calc(100% - 3.1px), 51.99% calc(100% - 5.8px), 48.87% calc(100% - 12.6px), 47.99% calc(100% - 18.7px), 45.82% calc(100% - 13.7px), 45.55% calc(100% - 21.8px), 43.19% calc(100% - 3.2px), 37.57% calc(100% - 17.8px), 34.42% calc(100% - 4.0px), 32.57% calc(100% - 7.1px), 29.79% calc(100% - 19.7px), 27.23% calc(100% - 23.1px), 27.03% calc(100% - 14.4px), 24.84% calc(100% - 20.1px), 21.96% calc(100% - 10.3px), 21.27% calc(100% - 9.3px), 20.33% calc(100% - 20.8px), 20.18% calc(100% - 4.0px), 17.15% calc(100% - 2.5px), 9.17% calc(100% - 18.0px), 5.33% calc(100% - 18.1px), 1.11% calc(100% - 11.0px), 0.00% calc(100% - 4.2px)); }
/* Drei Farben für die drei Stufen (Alex 14.10.2026): Schlamm dunkel und dreckig, Filter bleibt hell und leicht trüb, Video klares Babyblau.
   Die Farbe liegt per multiply auf dem Papier, die Körnung bleibt. Oben, wo Überschrift, Zeile und Knöpfe stehen, bleibt der Schlamm so hell,
   dass Tinte mindestens 4,5 zu 1 hat (tests/runde3_test.cjs misst es). Nach unten wird er dunkler, Flecken liegen nur unter den Bildern. */
.band--schlamm {
  background-color: #7E7759;
  background-image:
    radial-gradient(34% 22% at 90% 94%, rgba(48, 40, 20, .55), transparent 72%),
    radial-gradient(28% 20% at 8% 97%, rgba(54, 46, 24, .5), transparent 72%),
    radial-gradient(24% 16% at 56% 86%, rgba(62, 54, 28, .38), transparent 70%),
    radial-gradient(18% 14% at 74% 52%, rgba(76, 66, 36, .22), transparent 70%),
    radial-gradient(16% 12% at 97% 30%, rgba(60, 50, 26, .3), transparent 70%),
    linear-gradient(180deg, #AAA487 0, #AAA487 540px, #847C5C 100%),
    url(../img/paper-schlamm.jpg);
  background-size: auto, auto, auto, auto, auto, auto, cover;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 50% 0;
  background-repeat: no-repeat;
  background-blend-mode: multiply, multiply, multiply, multiply, multiply, multiply, normal;
  --fokus: var(--fokus-dunkel);
}
.band--mitte   { background: #EEEADF url(../img/paper-mitte.jpg) 50% 50% / cover; }
.band--klar {
  background-color: #C4E1FF;
  background-image:
    radial-gradient(42% 46% at 80% 26%, rgba(255, 255, 255, .55), transparent 72%),
    radial-gradient(30% 36% at 10% 82%, rgba(255, 255, 255, .4), transparent 72%),
    linear-gradient(180deg, #D2EAFF 0, #B4D9FF 100%),
    url(../img/paper-klar.jpg);
  background-size: auto, auto, auto, cover;
  background-position: 0 0, 0 0, 0 0, 50% 50%;
  background-repeat: no-repeat;
  background-blend-mode: normal, normal, multiply, normal;
}

/* ---------- Hero ---------- */
.hero__kopf { padding-top: 76px; position: relative; z-index: 2; }
h1 {
  font: 700 var(--fs-1)/.92 "Inter", sans-serif; /* 14.10.2026: fetter, wie die große Zeile bei Lofty Lab; .92 seit "Kläranlage:" als dritte Zeile (25.10.2026) */
  letter-spacing: -.025em;
}
.h1__zeile { display: block; }
.marker { position: relative; display: inline-block; }
.marker__strich { position: absolute; left: -1.5%; bottom: -.16em; width: 103%; height: .2em; max-width: none; overflow: visible; pointer-events: none; }
.marker__strich path { fill: none; stroke: var(--water); stroke-width: .075em; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.marker__strich .marker__2 { stroke-width: .045em; opacity: .8; }
.hero__zeile { margin-top: 28px; font-size: var(--fs-5); line-height: 1.4; }
.hero__knoepfe { display: flex; align-items: center; gap: 28px; margin-top: 32px; }
.preislink {
  font-size: var(--fs-5); font-weight: 600; line-height: 1.4; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
  padding: 10px 0;
  transition: color 240ms var(--ease);
}
@media (hover: hover) { .preislink:hover { color: var(--ink-soft); } }

/* ---------- Die drei Blöcke: Raster ---------- */
.werk {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  grid-template-areas: "etikett buehne" "cta buehne";
  grid-template-rows: auto 1fr;
  column-gap: 80px;
}
.werk > .etikett { grid-area: etikett; }
.werk > .buehne { grid-area: buehne; }
.werk > .werk__cta { grid-area: cta; }
.werk--schlamm { margin-top: -290px; } /* 25.10.2026: Bühne näher an den Kopf, das Rohr bleibt rechts der H1 */
.werk--schlamm .etikett { margin-top: 354px; } /* 15.10.2026: Mitte des Etiketts auf Höhe der Bühnenmitte, nichts ragt in den Riss (25.10.: Bühne 64 px höher, Etikett bleibt) */
.werk--filter, .werk--video { padding-top: 48px; padding-bottom: 30px; }
.werk--filter .etikett { margin-top: 118px; }
.werk--video .etikett { margin-top: 86px; }
.werk__cta { align-self: start; padding-top: 32px; }

/* Etikett (SPEC 5.4) */
.etikett {
  position: relative; justify-self: start; align-self: start;
  width: max-content; max-width: 420px;
  padding: 14px 20px 16px;
  background: var(--cream) url(../img/paper.jpg) 0 0 / 600px;
  background-blend-mode: multiply;
  box-shadow: var(--schatten-papier);
  transform: rotate(var(--dreh, -1.4deg));
}
.etikett--2 { --dreh: .9deg; }
.etikett--3 { --dreh: -.8deg; }
.etikett::before {
  content: ""; position: absolute; left: -18px; top: -2px; width: 56px; height: 20px;
  background: var(--tape); mix-blend-mode: multiply;
  transform: rotate(-38deg);
}
.etikett__wort { font: 700 var(--fs-etikett-wort)/1 "Inter", sans-serif; letter-spacing: -.02em; white-space: nowrap; }
.etikett__zeile { margin-top: 10px; font-size: var(--fs-etikett-zeile); line-height: 1.35; color: var(--ink-soft); }
/* 14.10.2026 (Alex: "die Sticker Notes sind zu klein"): neben der Bühne steht das Wort groß in zwei Zeilen ("Dein / Schlamm") */
/* 15.10.2026 (Alex): "Dein", "Unser" klein darüber, das wichtige Wort groß: Schlamm, Filter, Video. Beim ersten Lesen sofort klar */
.etikett__klein { display: block; margin-bottom: 2px; font: 600 var(--fs-5)/1.2 "Inter", sans-serif; letter-spacing: -.005em; color: var(--ink-soft); }
@media (min-width: 900px) {
  .etikett { padding: 18px 28px 22px; max-width: none; }
  .etikett__klein { font-size: var(--fs-4); }
  .etikett__zeile { max-width: 15em; }
  .etikett::before { width: 72px; height: 24px; left: -22px; top: 2px; }
}

/* ---------- Bühnen: Positionen in Entwurfseinheiten ---------- */
.buehne { --bn: 780; position: relative; container-type: inline-size; }
.buehne--schlamm { aspect-ratio: 780 / 560; }
.buehne--filter  { aspect-ratio: 780 / 440; }
.buehne--video   { aspect-ratio: 780 / 450; }
.buehne > * { --u: calc(100cqw / var(--bn)); }
.it {
  --rot: var(--r, 0);
  position: absolute;
  left: calc(var(--l) * var(--u));
  top: calc(var(--t) * var(--u));
  width: calc(var(--w) * var(--u));
  height: auto;
  max-width: none;
  transform: translateX(var(--tx, 0%)) rotate(calc(var(--rot) * 1deg));
}
.leitung, .flansch { position: absolute; left: calc(var(--l) * var(--u)); top: calc(var(--t) * var(--u)); }
/* Leitung und Flansche gezeichnet (Antigravity 25.10.2026, Vorlage rohr_lang.webp; vorher CSS-Streifen, Alex: "wie Low Poly").
   Das Rohrstück wiederholt sich senkrecht, der Flansch sitzt mittig auf der Leitung. */
.leitung {
  width: calc(48 * var(--u)); height: calc(var(--h) * var(--u));
  background: url(../img/werk/leitung.webp) 50% 0 / 100% auto repeat-y;
}
.flansch {
  width: calc(70 * var(--u)); aspect-ratio: 150 / 60; margin: calc(-8 * var(--u)) 0 0 calc(-9 * var(--u));
  background: url(../img/werk/flansch.webp) 50% 50% / 100% 100% no-repeat;
}
.flansch--ende { width: calc(76 * var(--u)); margin-left: calc(-10 * var(--u)); }

/* Block 1 */
.rohr { transform-origin: 100% 0; }
.klecks { transform-origin: 50% 40%; }
.mund { width: 0; height: 0; }
.schlammtropfen {
  aspect-ratio: 3 / 4;
  background: #7C7150;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  box-shadow: 0 0 0 1.5px #F2EEE4;
  opacity: 0;
  transform-origin: 50% 0;
}
.fach { --tx: -50%; width: auto; filter: drop-shadow(0 3px 3px rgba(40, 30, 10, .32)); }
.fach__papier {
  display: block;
  padding: .3em .8em .38em;
  font: 600 var(--fs-fach)/1.1 "Shantell Sans", "Inter", sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--ink);
  background: #F7F3E8 url(../img/paper.jpg) 30% 40% / 500px;
  background-blend-mode: multiply;
}
.fach--a .fach__papier { clip-path: polygon(3px 0, 22% 2px, 48% 0, 76% 2px, 100% 0, calc(100% - 4px) 26%, 100% 48%, calc(100% - 3px) 71%, 100% 100%, 70% calc(100% - 2px), 41% 100%, 14% calc(100% - 1px), 1px 100%, 4px 74%, 0 51%, 5px 27%); }
.fach--b .fach__papier { clip-path: polygon(0 2px, 31% 0, 58% 2px, 84% 0, calc(100% - 2px) 1px, 100% 31%, calc(100% - 5px) 57%, 100% 83%, calc(100% - 3px) 100%, 62% calc(100% - 1px), 33% 100%, 3px calc(100% - 2px), 0 79%, 4px 55%, 1px 30%); }
.fach--c .fach__papier { clip-path: polygon(4px 1px, 27% 0, 55% 2px, 80% 0, 100% 2px, calc(100% - 3px) 36%, 100% 64%, calc(100% - 4px) 100%, 74% calc(100% - 2px), 46% 100%, 19% calc(100% - 1px), 0 100%, 3px 66%, 0 38%); }
.mann { z-index: 1; }

/* Block 2 */
.zahnrad--gross { rotate: calc(var(--gross, 0) * 1deg); }
.zahnrad--klein { rotate: calc(var(--klein, 12) * 1deg); }
.zeiger { transform-origin: 36% 77%; transform: rotate(calc(var(--zeiger, 85) * 1deg)); }
.hand {
  width: auto;
  font: 700 var(--fs-hand)/1 "Shantell Sans", "Inter", sans-serif;
  letter-spacing: 0;
  color: var(--ink-soft);
}
.hand--klar { color: #17693F; } /* 5,6 zu 1 auf dem Papier der Messuhr; --green (4,2 zu 1) bleibt für die Häkchen */
.tropfen { aspect-ratio: 92 / 124; overflow: visible; }
.tropfen--sieb, .tropfen--faellt { opacity: 0; }
.tropfen--faellt { z-index: 3; transform-origin: 50% 100%; }
.tropfen--haengt { transform-origin: 50% 0; z-index: 2; }
/* Feedback 25.10.2026: Der Tropfen am Rohrende hängt am Scrollen. Runter: er wächst und fällt in den Film, rauf: zurück.
   Mit Bewegung ersetzt er den hängenden und den einmal fallenden Tropfen; ohne Bewegung bleibt der hängende stehen. */
.tropfen--scroll { z-index: 3; transform-origin: 50% 0; opacity: 0; }
.motion .tropfen--scroll { opacity: var(--tr-o, 0); }
.motion .tropfen--faellt { visibility: hidden; }
/* Ist der Scroll-Tropfen im Film gelandet, hängt am Rohrende schon der nächste (Alex: der Tropfen darf nicht einfach verschwinden) */
.motion .tropfen--haengt { opacity: var(--haengt-o, 0) !important; transition: opacity 300ms var(--ease); }
/* Dampf am Sieb: erscheint nur, während das Sieb beim Scrollen rüttelt (v2.js) */
.dampf { z-index: 3; opacity: 0; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(20, 30, 60, .2)); }
.dampf svg { display: block; width: 100%; height: auto; overflow: visible; }
.motion .dampf--3 { --dampf: var(--dampf-uhr, 0); }
.motion .dampf { opacity: var(--dampf, 0); translate: 0 calc(var(--dampf-y, 0) * -1px); scale: calc(.7 + .3 * var(--dampf, 0)); }
.motion .buehne--filter .sieb { translate: calc(var(--rx, 0) * 1px) calc(var(--ry, 0) * 1px); }
.motion .buehne--filter .zahnrad, .motion .buehne--filter .messuhr { translate: calc(var(--rx, 0) * -.5px) calc(var(--ry, 0) * .5px); }

/* Block 3: das Standbild im Rahmen */
.rahmen {
  --r: -.6;
  z-index: 1;
  padding: calc(9 * var(--u));
  background: var(--cream);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 18px 30px -18px rgba(20, 30, 60, .45);
}
.rahmen::before, .rahmen::after {
  content: ""; position: absolute; z-index: 3; top: calc(-12 * var(--u));
  width: calc(92 * var(--u)); height: calc(26 * var(--u));
  background: var(--tape); mix-blend-mode: multiply;
  pointer-events: none;
}
.rahmen::before { left: calc(-22 * var(--u)); transform: rotate(-24deg); }
.rahmen::after  { right: calc(-22 * var(--u)); transform: rotate(21deg); }
.rahmen__bild { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #DCE6F3; }
.rahmen__bild > img, .rahmen__bild > video, .rahmen__bild > iframe, .rahmen__schlamm { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rahmen__schlamm { background: #6F6547; mix-blend-mode: multiply; opacity: 0; }
.rahmen__bild video, .rahmen__bild iframe { z-index: 4; border: 0; background: #000; }
.play { position: absolute; inset: 0; z-index: 2; display: block; cursor: pointer; }
.play:focus-visible { outline-offset: -6px; }
.play__knopf {
  position: absolute; left: 86%; top: 24%;
  width: calc(96 * var(--u)); min-width: 56px; height: auto; aspect-ratio: 1;
  translate: -50% -50%;
  filter: drop-shadow(0 3px 0 rgba(3, 15, 46, .35));
  transition: transform 240ms var(--ease);
}
@media (hover: hover) { .play:hover .play__knopf { transform: scale(1.06) rotate(-4deg); } }
.zeit {
  position: absolute; right: 3%; bottom: 5%; z-index: 2;
  font: 700 var(--fs-7)/1 "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0;
  background: var(--cream); padding: 5px 7px; border-radius: 4px;
  pointer-events: none;
}
.rahmen__hinweis {
  position: absolute; left: 3%; bottom: 5%; z-index: 3;
  max-width: 70%; margin: 0; padding: 5px 8px; border-radius: 4px;
  background: var(--cream); font: 500 var(--fs-7)/1.25 "Inter", sans-serif; color: var(--ink);
}
.rahmen__hinweis a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; pointer-events: auto; }
.rahmen__hinweis { pointer-events: none; } /* Klick auf den Hinweis startet den Film wie das übrige Bild, nur der Link führt zum Datenschutz */
/* Teaser unter dem Film (25.10.2026, ersetzt das Etikett "Mit KI erstellt"; KI-Hinweis steht in der FAQ und im Impressum) */
.film-teaser {
  position: absolute; left: 0; right: 0; top: calc(100% + 12px);
  font: 600 var(--fs-6)/1.35 "Inter", sans-serif; text-align: center; color: var(--ink);
}
/* Player nach dem Klick (v2.js filmGross): eigener Kasten im body. Klein über dem Rahmen, groß fest in der Mitte */
.film-schwebe { position: absolute; z-index: 30; transform-origin: 0 0; background: #000; }
.film-schwebe.ist-gross { position: fixed; z-index: 1001; box-shadow: 0 30px 80px rgba(3, 15, 46, .55); }
.film-schwebe iframe { display: block; width: 100%; height: 100%; border: 0; }
.film-hinten { position: fixed; inset: 0; z-index: 1000; background: rgba(3, 15, 46, .78); opacity: 0; transition: opacity 400ms var(--ease); }
.film-zu {
  position: fixed; z-index: 1002; top: calc(var(--nav-h) + 12px); right: 12px; width: 48px; height: 48px; padding: 12px; /* unter der Kopfleiste, nicht auf deren Knopf (P8) */
  border: 2px solid #fff; border-radius: 50%; background: var(--ink); cursor: pointer; opacity: 0; transition: opacity 400ms var(--ease);
}
.film-zu svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.film-hinten.ist-da, .film-zu.ist-da { opacity: 1; }
.film-offen, .film-offen body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .film-hinten, .film-zu { transition: none; } }
.spielt .play, .spielt .zeit, .spielt .rahmen__hinweis { display: none; }

/* ---------- Bewegung: Ausgangslage nur mit JavaScript und ohne reduzierte Bewegung ---------- */
.motion [data-block="schlamm"]:not(.fertig) .marker__strich path { stroke-dashoffset: 100; }
.motion [data-block="schlamm"]:not(.fertig) .faellt,
.motion [data-block="schlamm"]:not(.fertig) .klecks { opacity: 0; }
.motion [data-block="filter"]:not(.fertig) .steckt { opacity: 0; }
.motion [data-block="video"]:not(.fertig) .rahmen__trueb { filter: grayscale(.85) sepia(.55) brightness(.86) contrast(.85); }
.motion [data-block="video"]:not(.fertig) .rahmen__schlamm { opacity: .55; }
.motion [data-block="video"]:not(.fertig) .rahmen__klar { clip-path: circle(0% at 50% 0%); }
.motion [data-block="video"]:not(.fertig) .play__knopf,
.motion [data-block="video"]:not(.fertig) .zeit,
.motion [data-block="video"]:not(.fertig) .rahmen__hinweis,
.motion [data-block="video"]:not(.fertig) .tropfen--haengt { opacity: 0; }
.laeuft .it, .laeuft .marker__strich path { will-change: transform, opacity; }

/* ---------- Abschnitte ab den Stilen ---------- */
.abschnitt { padding-top: var(--abstand); }
.stile { padding-top: calc(var(--abstand) + 26px); }
.kontakt { padding-bottom: var(--abstand); }
.h2 { font: 600 var(--fs-2)/1.04 "Inter", sans-serif; letter-spacing: -.009em; }
.notiz { margin-top: 16px; font-size: var(--fs-6); line-height: 1.45; color: var(--ink-soft); }

/* Stile (3 Kern-Stilistiken) */
/* Stile am Desktop wie vorher: drei nebeneinander, Collage, Modern, 3D (Alex 25.10.2026: dort kein Karussell, keine Pfeile).
   Im HTML steht 3D vorne, damit das Karussell am Handy mit Collage in der Mitte startet; hier rückt 3D per order nach hinten. */
.karussell { margin-top: 56px; }
.stile__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
.stile__raster > .stil:first-child { order: 3; }
.karussell__pfeil { display: none; }
.stil { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* 14.10.2026: Stilnamen als Aussage, groß und mittig; darunter ein Satz, den jede und jeder versteht */
.stil__name { font: 700 var(--fs-3)/1.05 "Inter", sans-serif; letter-spacing: -.025em; margin-bottom: 24px; }
.stil__text { max-width: 19em; margin: 22px 0 24px; font-size: var(--fs-5); line-height: 1.4; color: var(--ink); }
.stil .abzug { align-self: stretch; }
.abzug {
  position: relative;
  padding: 8px;
  background: var(--cream);
  box-shadow: var(--schatten-papier);
  transform: rotate(calc(var(--r) * 1deg));
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.abzug::before {
  content: ""; position: absolute; left: 50%; top: -11px; width: 76px; height: 22px;
  background: var(--tape); mix-blend-mode: multiply;
  transform: translateX(-50%) rotate(calc(var(--r) * -2.4deg));
}
.abzug img { width: 100%; aspect-ratio: 16 / 9; }
@media (hover: hover) {
  .stil:hover .abzug { transform: rotate(0deg) translateY(-4px); box-shadow: var(--schatten-papier-hoch); }
}
.stil .btn { margin-top: auto; align-self: center; min-width: 200px; }

/* Preise (SPEC 10) */
.tickets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 72px; align-items: stretch; }
.ticket { display: flex; filter: drop-shadow(0 12px 14px rgba(20, 30, 60, .16)); }
.ticket--empfohlen { transform: translateY(-16px); }
.ticket__papier {
  --cut: 14px;
  --cut-y: 173px;
  position: relative; flex: 1;
  display: flex; flex-direction: column;
  padding: 32px;
  background: var(--cream);
  -webkit-mask: radial-gradient(circle at 0 var(--cut-y), #0000 var(--cut), #000 calc(var(--cut) + .5px)) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% var(--cut-y), #0000 var(--cut), #000 calc(var(--cut) + .5px)) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 var(--cut-y), #0000 var(--cut), #000 calc(var(--cut) + .5px)) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% var(--cut-y), #0000 var(--cut), #000 calc(var(--cut) + .5px)) right / 51% 100% no-repeat;
}
.ticket--empfohlen .ticket__papier { box-shadow: inset 0 0 0 2px var(--ink); }
.ticket__kopf { min-height: 142px; border-bottom: 2px dashed rgba(3, 15, 46, .28); }
.ticket__code { font: 700 var(--fs-6)/1 "Geist Mono", ui-monospace, monospace; letter-spacing: 0; color: var(--ink-soft); }
.ticket__name { margin-top: 10px; font: 600 var(--fs-4)/1.15 "Inter", sans-serif; letter-spacing: -.003em; }
.ticket__preis { margin-top: 12px; font: 700 var(--fs-preis)/1 "Geist Mono", ui-monospace, monospace; letter-spacing: -.02em; }
.ticket__preis .euro { font-size: var(--fs-5); }
.ticket__band {
  position: absolute; top: 14px; right: 18px;
  padding: 4px 14px 6px;
  font: 700 var(--fs-4)/1 "Shantell Sans", "Inter", sans-serif;
  letter-spacing: 0;
  background: var(--tape); mix-blend-mode: multiply;
  transform: rotate(4deg);
}
.ticket__liste { margin: 24px 0 32px; display: grid; gap: 12px; font-size: var(--fs-6); line-height: 1.45; }
.ticket__liste li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
.ticket__liste svg { width: 20px; height: 20px; margin-top: 1px; color: var(--green); }
.ticket .btn { margin-top: auto; align-self: stretch; }
.preise__fuss { margin-top: 40px; font-size: var(--fs-6); line-height: 1.45; color: var(--ink-soft); }

/* ---------- Runde 4 (14./15.10.2026): mehr Lofty Lab, in Papier übersetzt ----------
   Ideen von loftylab.framer.website (gekaufte Framer-Vorlage: nur Ideen, keine Grafiken oder Layouts übernommen).
   Alles Bewegte hängt an .motion (fehlt bei weniger Bewegung und ohne JavaScript). Ohne .motion steht alles in der Endlage. */
.mittig { text-align: center; margin-inline: auto; }
.notiz.mittig { max-width: 36em; }
.stile .notiz { font-size: var(--fs-5); color: var(--ink); } /* "Jeder Stil kostet gleich viel." ist ein Kaufgrund, kein Kleingedrucktes */
.h2.mittig { max-width: 22em; text-wrap: balance; }

/* Markerstrich unter einem Wort der Überschrift: zieht sich, sobald die Überschrift ins Bild kommt (v2.js) */
.motion .marker--h2:not(.gezogen) .marker__strich path { stroke-dashoffset: 100; }
.marker--h2 .marker__strich path { transition: stroke-dashoffset 700ms cubic-bezier(.5, 0, .2, 1); }
.marker--h2 .marker__strich .marker__2 { transition-delay: 260ms; }

/* Einflug beim Scrollen (Lofty "Our works": von außen nach innen). v2.js setzt --ein von 0 bis 1 */
.motion [data-einflug] {
  translate: calc((1 - var(--ein, 1)) * var(--ein-x, 0px)) calc((1 - var(--ein, 1)) * var(--ein-y, 0px));
  rotate: calc((1 - var(--ein, 1)) * var(--ein-r, 0deg) + var(--dreh-karte, 0deg));
  scale: calc(.92 + .08 * var(--ein, 1)); /* "plustert sich auf" */
}
[data-einflug="links"]  { --ein-x: -20vw; --ein-y: 50px; --ein-r: -5deg; }
[data-einflug="rechts"] { --ein-x: 20vw;  --ein-y: 50px; --ein-r: 5deg; }
[data-einflug="unten"]  { --ein-y: 100px; --ein-r: 2deg; }

/* Laufband mit farbigen Pillen (Lofty "Our Superpowers"): v2.js schiebt es beim Scrollen seitlich (--lauf) */
.laufband {
  overflow: hidden; padding: 56px 0 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.laufband__inhalt { display: flex; width: max-content; translate: var(--lauf, 0px) 0; }
.laufband__spur { display: flex; gap: 14px; padding: 10px 14px 10px 0; list-style: none; }
.pille {
  padding: 14px 26px 15px; border: 2px solid var(--ink); border-radius: 999px;
  font: 600 var(--fs-5)/1 "Inter", sans-serif; letter-spacing: -.01em; white-space: nowrap;
  background: var(--pille, var(--cream)); rotate: -1.6deg;
}
.pille:nth-child(even) { rotate: 1.4deg; }
.pille--1 { --pille: var(--pal-1); }
.pille--2 { --pille: var(--pal-2); }
.pille--3 { --pille: var(--pal-3); }
.pille--4 { --pille: var(--pal-4); }
.pille--5 { --pille: var(--pal-5); }

/* Ablauf als drei farbige Karten mit Sticker (Lofty "Our Process", Alex: "am allergeilsten") */
.ablauf { padding-top: calc(var(--abstand) * .8); }
.ablauf__karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px; margin-top: 72px; padding: 0; list-style: none; align-items: stretch; }
.ablauf-karte {
  --dreh-karte: -1.2deg;
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 30px 26px 34px;
  border: 2px solid var(--ink); border-radius: 22px;
  background: var(--karte) url(../img/paper.jpg) 0 0 / 600px;
  background-blend-mode: multiply;
  box-shadow: var(--schatten-papier);
  rotate: var(--dreh-karte);
}
.ablauf-karte--1 { --karte: var(--pal-1); }
.ablauf-karte--2 { --karte: var(--pal-3); --dreh-karte: 1deg; margin-top: -18px; margin-bottom: 18px; }
.ablauf-karte--3 { --karte: var(--pal-5); --dreh-karte: -.6deg; }
/* Feedback 24./25.10.2026: nur Nummer und Titel, keine Details mehr */
.ablauf-karte__nr {
  display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; margin-right: .3em; vertical-align: .3em;
  border: 2px solid var(--ink); border-radius: 50%; background: #fff;
  font: 800 var(--fs-6)/1 "Inter", sans-serif; letter-spacing: 0;
}
.ablauf-karte__sticker { width: 104px; height: 104px; margin: 14px 0 10px; rotate: -7deg; filter: drop-shadow(0 6px 5px rgba(20, 30, 60, .28)); }
.ablauf-karte--2 .ablauf-karte__sticker { rotate: 6deg; }
.ablauf-karte__name { font: 700 var(--fs-4)/1.15 "Inter", sans-serif; letter-spacing: -.02em; }
/* Versprechen "Erst Skript ansehen, dann entscheiden" über den Karten, zwei Spalten: gratis gegen verbindlich
   (Alex 23.10.2026, Recherche redesign/akquise_2026-10/recherche_risikoumkehr_darstellung_2026-10-23.md). Grün steht fürs Geld, das nichts kostet */
.garantie {
  max-width: 980px; margin: 64px auto 0;
  padding: 30px 34px 34px;
  border: 2px solid var(--ink); border-radius: 22px;
  background: var(--pal-akzent) url(../img/paper.jpg) 0 0 / 600px;
  background-blend-mode: multiply;
  box-shadow: var(--schatten-papier);
  rotate: -.6deg;
}
.garantie__titel { text-align: center; font: 800 var(--fs-3)/1.05 "Inter", sans-serif; letter-spacing: -.03em; }
.garantie__spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.garantie__spalte { padding: 18px 22px 20px; border: 2px solid var(--ink); border-radius: 16px; background: rgba(255, 255, 255, .82); }
.garantie__spalte--gratis { background: #E4F3E2; }
.garantie__kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 700 var(--fs-5)/1.2 "Shantell Sans", "Inter", sans-serif; letter-spacing: 0; }
.garantie__preis { flex: none; padding: 4px 12px 5px; border: 1.5px solid var(--ink); border-radius: 999px; background: #A9CEFB; font: 800 var(--fs-6)/1.2 "Inter", sans-serif; white-space: nowrap; } /* Wasserblau statt Sand: "Fixpreis vorab" soll klar wirken, nicht schlammig (Alex 25.10.2026) */
.garantie__spalte--gratis .garantie__preis { background: #8FD19E; }
.garantie__liste { margin-top: 12px; padding: 0; list-style: none; font: 500 var(--fs-6)/1.5 "Inter", sans-serif; }
.garantie__liste li { position: relative; padding-left: 26px; }
.garantie__liste li::before { content: "→"; position: absolute; left: 2px; font-weight: 800; }
.garantie__spalte--gratis .garantie__liste li::before { content: "✓"; color: #1F6B36; }
.hero__versprechen { margin-top: 18px; font: 600 var(--fs-5)/1.4 "Inter", sans-serif; }
/* Feedback 25.10.2026 (zweite Runde): Erklärsatz direkt unter der H1, prominent */
.hero__satz { max-width: 34em; margin-top: 18px; font: 600 var(--fs-5)/1.35 "Inter", sans-serif; letter-spacing: -.005em; } /* 20 px: bleibt am Desktop links vom Rohr */
/* Wörter der H1 (Alex 25.10.2026): "Fachwort" schlammdunkel mit Papier-Körnung; "Klartext" weiß mit dem blauen Markerstrich.
   Echte Schrift statt Bild (die gezeichneten Wort-Bilder wirkten billig). Beide Wörter halten auf dem Schlamm-Band mehr als 3 zu 1 */
.wortbild { display: inline-block; position: relative; }
.wortbild--fach {
  color: #3A3322;
  background: linear-gradient(176deg, #4D4430 0%, #3A3322 55%, #2C2619 100%), url(../img/paper.jpg) 0 0 / 240px; background-blend-mode: multiply;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding-bottom: .2em; margin-bottom: -.2em; /* background-clip füllt nur die Box: ohne Polster fehlt die Unterlänge ("g" in "Jargon", englische Seite, Alex 26.10.2026) */
}
.wortbild--klar { color: #fff; text-shadow: 0 2px 0 rgba(3, 15, 46, .14); }

/* Kette über der H1 (Feedback 24.10.2026): Handbuch, Filter, Video als drei Schritte auf einen Blick */
.kette { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; max-width: 560px; margin: 18px 0 0; padding: 0; list-style: none; }
.kette__schritt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.kette__schritt + .kette__schritt::before {
  content: ""; position: absolute; left: -34px; top: 33px; width: 28px; height: 18px;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 18'%3E%3Cpath d='M2 9.5c7-.6 14-.8 22-.4M17 2.5l7 6.6-7 6.4' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 18'%3E%3Cpath d='M2 9.5c7-.6 14-.8 22-.4M17 2.5l7 6.6-7 6.4' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kette__bild { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 84px; }
.kette__bild img { max-width: 100%; max-height: 100%; width: auto; height: auto; min-width: 0; object-fit: contain; }
.kette__bild--video img { border: 2px solid var(--ink); border-radius: 10px; background: #fff; }
.kette__play { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; translate: -50% -50%; }
.kette__wort { display: inline-flex; align-items: center; gap: 8px; font: 700 var(--fs-6)/1.2 "Inter", sans-serif; white-space: nowrap; }
.kette__nr { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border: 2px solid var(--ink); border-radius: 50%; background: var(--water); color: var(--ink); font: 800 14px/1 "Inter", sans-serif; }
@media (hover: hover) {
  .ablauf-karte__sticker { transition: rotate 320ms cubic-bezier(.3, 1.6, .5, 1), scale 320ms cubic-bezier(.3, 1.6, .5, 1); }
  .ablauf-karte:hover .ablauf-karte__sticker { rotate: 0deg; scale: 1.1; }
  .pille { transition: rotate 240ms var(--ease), scale 240ms var(--ease); }
  .pille:hover { rotate: 0deg; scale: 1.05; }
  .nav__links a { padding-inline: 12px; margin-inline: -12px; border-radius: 999px; background-image: none; transition: background-color 200ms var(--ease); }
  .nav__links a:nth-child(1):hover { background-color: var(--pal-1); }
  .nav__links a:nth-child(2):hover { background-color: var(--pal-3); }
  .nav__links a:nth-child(3):hover { background-color: var(--pal-5); }
}
/* Sticker am Abschluss (Lofty "Ready to be famous?": Aufkleber an der großen Frage) */
.schluss__sticker { display: inline-block; width: .82em; height: 1em; margin-left: .08em; vertical-align: -.02em; rotate: 12deg; filter: drop-shadow(0 6px 5px rgba(20, 30, 60, .28)); }
/* Gezeichnete Pfeile zwischen den Karten */
.ablauf-karte--1::after, .ablauf-karte--2::after {
  content: ""; position: absolute; right: -60px; top: 44%; width: 56px; height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 30'%3E%3Cpath d='M3 18C14 8 30 7 46 13' fill='none' stroke='%23030F2E' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M37 5l11 8.5-12 6' fill='none' stroke='%23030F2E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50% / contain no-repeat;
}
.ablauf-karte--2::after { rotate: 8deg; top: 52%; }
.ablauf__fuss { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 64px; text-align: center; }
.ablauf__fuss .preise__fuss { margin-top: 0; }
/* Knopf unter den drei Karten im Verlauf der Karten: Sand -> Grau-Grün -> Blau (Alex 15.10.2026). Beim Draufzeigen
   schiebt sich der Verlauf weiter zum Blau, die Schrift rollt wie bei den anderen Knöpfen */
.btn--verlauf {
  min-height: 60px; padding: 0 34px; font-size: var(--fs-5); color: var(--ink);
  background: linear-gradient(90deg, var(--pal-1), var(--pal-3) 45%, var(--pal-5) 70%, var(--pal-5)) 0 0 / 160% 100%;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform 240ms var(--ease), background-position 500ms var(--ease), box-shadow 240ms var(--ease);
}
@media (hover: hover) {
  .btn--verlauf:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); }
}
.btn--verlauf:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--ink); }

/* Aus Fachwort wird Klartext: drei kleine Maschinen (15.10.2026). Oben eine Schlamm-Platte mit dem Fachwort,
   in der Mitte das Sieb, ein Tropfen fällt, unten klares Wasser mit dem Klartext. Farben aus Schlamm und Video-Band */
.maschinen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; max-width: 960px; margin: 48px auto 0; padding: 0; list-style: none; }
/* Beim Scrollen rumpeln die Maschinen, als würden sie arbeiten (v2.js setzt --mx, --my aus der Scroll-Bewegung) */
/* Alex 25.10.2026: das Gerät oben rumpelt kräftig, das Becken unten nur leicht (dort fällt das Wasser hinein) */
.motion .maschine__platte { translate: calc(var(--mx, 0) * 1.6px) calc(var(--my, 0) * 1.6px); rotate: calc(var(--mx, 0) * .35deg); }
.motion .maschine__werk { translate: calc(var(--mx, 0) * -1.2px) calc(var(--my, 0) * .6px); }
.motion .maschine__wasser { translate: calc(var(--mx, 0) * .2px) 0; }
.motion .maschine--2 { --mx: var(--mx2, 0); --my: var(--my2, 0); }
.motion .maschine--3 { --mx: var(--mx3, 0); --my: var(--my3, 0); }
.maschine { display: flex; flex-direction: column; align-items: stretch; text-align: center; }
/* Platte und Becken sind gezeichnet (15.10.2026, über Antigravity im Stil der Werk-Teile). Wort und Klartext liegen
   auf den glatten Vorderflächen. Das Rohr verbindet den Stutzen unter der Platte mit dem Stutzen über dem Becken */
.maschine__platte, .maschine__wasser { position: relative; display: block; }
.maschine__bild { display: block; width: 100%; height: auto; }
.maschine__fach {
  position: absolute; left: 50%; top: 56%; translate: -50% -50%; max-width: 88%; /* 88 %: "Leistungsbeschreibung" passt auch bei 320 px */
  padding: 6px 14px 7px; background: var(--cream); box-shadow: 0 2px 3px rgba(20, 30, 60, .3);
  font: 700 var(--fs-6)/1.15 "Inter", sans-serif; letter-spacing: -.005em; rotate: -2deg; white-space: nowrap;
}
.maschine--3 .maschine__fach { white-space: normal; text-wrap: balance; text-align: center; width: 12.5em; } /* "Allgemeine Geschäftsbedingungen" darf umbrechen */
.maschine__werk { position: relative; z-index: 2; display: block; height: 104px; margin: -6px 0 -4px; }
.maschine__werk::before { content: ""; position: absolute; left: 50%; top: 0; width: 11%; height: 100%; translate: -50% 0;
  background: linear-gradient(90deg, #7F8389, #C9CDD2 42%, #8D9299); border-inline: 2px solid var(--ink); }
.maschine__sieb { position: absolute; left: 50%; top: 10px; width: 84px; height: auto; translate: -50% 0; filter: drop-shadow(0 4px 4px rgba(20, 30, 60, .25));
  rotate: calc(var(--sieb-dreh, 0deg) - 8deg); } /* dreht beim Scrollen mit (v2.js setzt --sieb-dreh, Alex 15.10.2026) */
.maschine__tropfen { position: absolute; left: 50%; bottom: -26px; width: 20px; height: 27px; translate: -50% 0; z-index: 1; }
.motion .maschine:not(.tropft) .maschine__tropfen { opacity: 0; translate: -50% -40px; }
.motion .maschine.tropft .maschine__tropfen { animation: tropfen-fallen 800ms cubic-bezier(.5, 0, .9, .6) both; }
.maschine--2 .maschine__sieb { rotate: calc(6deg - var(--sieb-dreh, 0deg)); }
.maschine--2 .maschine__fach { rotate: 1.6deg; }
.maschine--2.tropft .maschine__tropfen { animation-delay: 180ms; }
.maschine--3.tropft .maschine__tropfen { animation-delay: 360ms; }
@keyframes tropfen-fallen { from { opacity: 0; translate: -50% -40px; } 30% { opacity: 1; } to { opacity: 1; translate: -50% 0; } }
.maschine__klar {
  position: absolute; left: 14%; right: 14%; top: 62%; translate: 0 -50%;
  font: 700 var(--fs-6)/1.25 "Inter", sans-serif; letter-spacing: -.01em; text-align: center; text-wrap: balance;
}

/* Abschluss: Klick auf den Mann (oder das Glas) lässt ihn wackeln, dann leert sich das Glas. Noch ein Klick füllt nach.
   Die leere Fläche ist dasselbe Glas ohne Farbe, über dem Wasser von oben nach unten aufgedeckt (clip-path) */
.trinken { padding: 0; border: 0; background: none; font: inherit; color: inherit; border-radius: 12px; }
.trinken .kontakt__mann { transform-origin: 50% 100%; }
.kontakt__glas--leer { filter: saturate(0) brightness(1.12) contrast(.92); clip-path: inset(43% 0 57% 0); transition: clip-path 600ms ease-in; }
.trinken.ist-leer .kontakt__glas--leer { clip-path: inset(43% 0 6% 0); transition: clip-path 1800ms cubic-bezier(.4, 0, .5, 1) 250ms; }
.motion .trinken.wackelt .kontakt__mann { animation: mann-wackeln 700ms cubic-bezier(.3, .6, .4, 1); }
@keyframes mann-wackeln { 0%, 100% { rotate: 0deg; } 20% { rotate: -4deg; } 45% { rotate: 3deg; } 70% { rotate: -1.5deg; } }
@media (hover: hover) { .trinken:hover .kontakt__mann { rotate: -1.5deg; transition: rotate 200ms var(--ease); } }

/* Abschluss: zwei Wege nebeneinander (Alex 15.10.2026). Rechts ein Brief im Umschlag für alle, die noch nicht so weit sind
   (Vorbild social-input-290705.framer.app, nur die Idee). Nach dem Absenden rutscht der Brief in den Umschlag,
   die Klappe geht zu, ein Tropfen-Stempel kommt drauf. Ohne JavaScript ist der Brief ausgeblendet. */
.schluss__wege { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 40px; }
@media (min-width: 1280px) {
  /* Beide Wege nebeneinander: dafür wird das Bild links etwas schmaler */
  .schluss .schluss__raster { grid-template-columns: 300px minmax(0, 1fr); }
  .schluss .kontakt__bild { --k: .78px; }
}
/* "Erstgespräch vereinbaren" ist länger als "buchen" (27.10.2026): Knopf und Brief nebeneinander erst ab 1440 px,
   der Knopf mit weniger Innenabstand, damit der Brief ganz im Bild bleibt. Schriftgröße bleibt in der Skala (höchstens 7 Größen) */
@media (min-width: 1440px) {
  .schluss__wege { flex-direction: row; align-items: center; gap: 18px; }
  .schluss__wege .btn--gross { gap: 12px; padding: 0 24px 0 28px; }
  .schluss__wege .btn--gross .pfeil { width: 44px; height: 33px; }
}
.schluss__wege .btn--gross { margin-top: 0; flex: none; }
/* Unter dem großen Knopf: Dauer, Preis und dass Alex den Termin bestätigt (Alex 27.10.2026) */
.schluss__knopf { display: flex; flex: none; flex-direction: column; align-items: flex-start; gap: 10px; }
.schluss__hinweis { font-size: var(--fs-6); line-height: 1.4; color: var(--ink-soft); }
.schluss__oder { font: 700 var(--fs-5)/1 "Shantell Sans", "Inter", sans-serif; letter-spacing: 0; color: var(--ink-soft); }
html:not(.js) .schluss__oder, html:not(.js) .brief, html:not(.js) .brief__klein { display: none; }
.brief { --tasche: 124px; position: relative; flex: none; width: 340px; overflow: hidden; border-radius: 0 0 10px 10px; }
.brief__rueck, .brief__tasche { position: absolute; left: 0; right: 0; bottom: 0; height: var(--tasche); pointer-events: none; }
.brief__klappe, .brief__stempel { pointer-events: none; }
.brief__rueck { z-index: 1; border-radius: 10px; background: #C9A26A url(../img/paper.jpg) 0 0 / 500px; background-blend-mode: multiply; }
.brief__tasche { z-index: 3; width: 100%; filter: drop-shadow(0 -1px 0 rgba(3, 15, 46, .08)); }
.brief__klappe {
  position: absolute; left: 0; right: 0; bottom: var(--tasche); z-index: 0; height: 96px;
  background: #CFA86F url(../img/paper.jpg) 0 0 / 500px; background-blend-mode: multiply;
  clip-path: polygon(0 100%, 50% 6%, 100% 100%); transform-origin: 50% 100%;
  transition: scale 450ms cubic-bezier(.5, 0, .3, 1) 600ms, z-index 0s 820ms;
}
.brief__blatt {
  position: relative; z-index: 2; display: grid; gap: 10px; margin: 0 20px; padding: 20px 20px calc(var(--tasche) + 14px);
  background: var(--cream) url(../img/paper.jpg) 0 0 / 600px; background-blend-mode: multiply;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 10px 18px -12px rgba(20, 30, 60, .45); rotate: -1deg;
  transition: translate 650ms cubic-bezier(.55, 0, .35, 1), rotate 650ms;
}
.brief__titel { font: 700 var(--fs-5)/1.2 "Inter", sans-serif; letter-spacing: -.01em; margin-bottom: 2px; }
/* Foto von Alex im Brief (Recherche: Foto am Kontakt, rund, ohne Bildunterschrift; Alex 23.10.2026) */
.brief__kopf { display: flex; align-items: center; gap: 14px; }
.brief__foto { flex: none; width: 76px; height: 76px; object-fit: cover; border: 2px solid var(--ink); border-radius: 50%; background: #fff; } /* 25.10.2026: fertig zugeschnitten in 1x, 2x, 3x, keine Verkleinerung im Browser (Alex: Artefakte) */
.brief__feld input {
  width: 100%; min-height: 44px; padding: 8px 2px; border: 0; border-bottom: 2px dotted rgba(3, 15, 46, .62);
  background: transparent; font: 500 var(--fs-6)/1.3 "Inter", sans-serif; color: var(--ink);
}
.brief__feld input::placeholder { color: #5A6075; }
.brief__feld input:focus { outline: none; border-bottom: 2px solid var(--fokus); }
.brief__feld input[aria-invalid="true"] { border-bottom: 2px dashed var(--fehler); }
/* Fokus bleibt sichtbar, auch wenn das Feld einen Fehler hat (Prüfung 26.10.2026, WCAG 2.4.7) */
.brief__feld input:focus-visible, .brief__feld input[aria-invalid="true"]:focus { outline: 3px solid var(--fokus); outline-offset: 2px; }
@media (forced-colors: active) { .brief__feld input:focus { outline: 3px solid Highlight; } .brief__feld input { border-bottom-color: CanvasText; } }
.brief__feld { display: grid; gap: 0; }
.brief__label { font: 600 var(--fs-7)/1.3 "Inter", sans-serif; color: var(--ink); }
.brief__knopf {
  justify-self: start; min-height: 44px; margin-top: 4px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 10px;
  background: var(--pal-5); font: 700 var(--fs-6)/1 "Inter", sans-serif; color: var(--ink);
}
@media (hover: hover) { .brief__knopf:hover { background: var(--pal-4); } }
.brief__stempel { position: absolute; z-index: 5; right: 22px; bottom: 14px; width: 34px; height: 46px; opacity: 0; scale: 1.6; rotate: 14deg;
  transition: opacity 200ms 1050ms, scale 260ms cubic-bezier(.3, 1.6, .5, 1) 1050ms; }
.brief__stempel svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 2px rgba(20, 30, 60, .3)); }
.brief.ist-unterwegs .brief__blatt { translate: 0 calc(100% - 40px); rotate: 0deg; }
.brief.ist-unterwegs .brief__klappe { scale: 1 -1; z-index: 4; } /* klappt um die Oberkante des Umschlags nach unten */
.brief.ist-unterwegs .brief__stempel { opacity: 1; scale: 1; }
.brief__klein { margin-top: 14px; font-size: var(--fs-7); line-height: 1.45; color: var(--ink-soft); }
.brief__klein a { color: var(--ink); text-underline-offset: 3px; }
.brief__status { margin-top: 6px; min-height: 1.4em; font: 600 var(--fs-6)/1.4 "Inter", sans-serif; }
.brief__status.ist-fehler { color: var(--fehler); }
@media (max-width: 760px) {
  .schluss__wege { align-items: stretch; }
  .schluss__knopf { align-items: stretch; }
  .schluss__hinweis { text-align: center; }
  .brief { width: 100%; max-width: 360px; }
}

/* Augen neben der Überschrift (Lofty: Augen neben dem Text). Die Pupillen schauen zur Maus (v2.js, nur mit Maus und .motion) */
.augen { display: inline-block; width: 1.12em; height: .68em; margin-left: .14em; vertical-align: -.02em; rotate: -6deg; }
.augen svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 3px rgba(20, 30, 60, .25)); }
.augen .pupille { transform: translate(5px, 7px); transition: transform 120ms linear; } /* in Ruhe: Blick nach rechts unten zum Rohr ("Was kommt da raus?") */
/* Blinzeln nur als Antwort auf die Maus (v2.js setzt .blinzelt kurz), nie in Dauerschleife (WCAG 2.2.2) */
.augen .auge { transform-box: fill-box; transform-origin: 50% 50%; }
.motion .augen.blinzelt .auge { animation: blinzeln 260ms ease-in-out; }
@keyframes blinzeln { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.1); } }

/* Wölkchen im klaren Wasser (Lofty: Wolken, die der Maus folgen). v2.js setzt --mx und --my zwischen -1 und 1 */
.wolke { position: absolute; z-index: 0; width: var(--w); pointer-events: none; translate: calc(var(--mx, 0) * var(--tief) * 1px) calc(var(--my, 0) * var(--tief) * .6px); transition: translate 600ms cubic-bezier(.2, .7, .3, 1); }
.wolke svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 8px rgba(40, 90, 160, .18)); }
.wolke--1 { --w: 150px; --tief: 10; left: 3%; top: 7%; }
.wolke--2 { --w: 104px; --tief: 16; left: 40%; top: 8%; }
.wolke--3 { --w: 128px; --tief: 8; right: 3%; bottom: 13%; }
.band--klar > .wrap { position: relative; z-index: 1; }

/* Knöpfe wackeln kurz, wenn die Maus kommt (Lofty: "der Button wackelt so ein bisschen") */
@keyframes knopf-wackeln {
  0% { rotate: 0deg; } 20% { rotate: -2.4deg; } 45% { rotate: 1.8deg; } 70% { rotate: -1deg; } 100% { rotate: 0deg; }
}
@media (hover: hover) {
  .motion .btn:hover { animation: knopf-wackeln 520ms cubic-bezier(.3, .6, .4, 1); }
}
/* Wischer wie bei Lofty "Book a Strategy Call": beim Draufzeigen rollt die Schrift nach oben weg, dieselbe Schrift kommt von unten.
   Die zweite Zeile ist CSS-Inhalt mit leerem Alternativtext, Screenreader lesen den Knopf einmal */
.btn__rolle { display: inline-block; height: 1.2em; height: 1lh; overflow: hidden; line-height: 1.2; } /* 1lh folgt einer vergrößerten Zeilenhöhe (WCAG 1.4.12) */
.btn__rolle > span { display: block; transition: translate 380ms cubic-bezier(.6, 0, .2, 1); }
.btn__rolle > span::after { content: attr(data-t); content: attr(data-t) / ""; display: block; }
@media (hover: hover) {
  .motion .btn:hover .btn__rolle > span { translate: 0 -50%; }
}


/* Fragen (SPEC 11) */
.fragen__raster { display: grid; grid-template-columns: 420px minmax(0, 1fr); column-gap: 80px; align-items: start; }
@media (min-width: 900px) { .fragen__raster > .h2 { position: sticky; top: calc(var(--nav-h) + 48px); } } /* Überschrift begleitet die Liste */
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line-faq); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0;
  font: 500 var(--fs-5)/1.3 "Inter", sans-serif; letter-spacing: -.003em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 22px; height: 22px;
  background:
    linear-gradient(var(--ink), var(--ink)) 50% 50% / 100% 2.4px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 50% 50% / 2.4px 100% no-repeat;
  transform: rotate(-3deg);
  transition: transform 240ms var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline-offset: 2px; }
.faq__antwort { padding: 0 48px 26px 0; max-width: 38em; font-size: var(--fs-6); line-height: 1.5; }
.faq { interpolate-size: allow-keywords; }
@supports selector(::details-content) {
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size 380ms cubic-bezier(.22, .8, .24, 1), content-visibility 380ms allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
  .faq .faq__antwort { opacity: 0; transform: translateY(-6px); transition: opacity 300ms var(--ease) 60ms, transform 380ms cubic-bezier(.22, .8, .24, 1); }
  .faq details[open] .faq__antwort { opacity: 1; transform: none; }
}

/* Kontakt (SPEC 12) */
.kontakt__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); column-gap: 80px; align-items: start; }
.kontakt__zeile { margin-top: 18px; font-size: var(--fs-5); line-height: 1.4; }
.kontakt__bild { --k: 1px; position: relative; margin-top: 40px; width: calc(380 * var(--k)); height: calc(380 * var(--k)); }
.kontakt__mann { position: absolute; left: calc(26 * var(--k)); bottom: 0; width: calc(155 * var(--k)); }
.kontakt__glas { position: absolute; left: calc(150 * var(--k)); bottom: 0; width: calc(131 * var(--k)); transform: scaleX(-1); }
/* Anhänger am Glas (Alex 2.11.2026: Schrift lief über die Karte). Karte etwas größer und mindestens 136 px breit, damit
   14 px Schrift hineinpasst (16 px bei voller Größe), das Textfeld liegt im Kartenkörper: der sitzt im Bild zwischen 11 und 89 Prozent der Breite. Der Text
   dreht sich mit der Karte, weil er in .anhaenger steckt. */
.anhaenger { --aw: max(calc(152 * var(--k)), 136px); position: absolute; left: calc(260 * var(--k) - var(--aw) / 2); top: calc(124 * var(--k)); width: var(--aw); transform: rotate(7deg); transform-origin: 50% 0; }
.anhaenger img { width: 100%; }
.anhaenger__text {
  position: absolute; left: 16%; right: 16%; top: 46%;
  display: flex; flex-direction: column; align-items: center;
  font: 600 max(var(--fs-7), calc(16 * var(--k)))/1.2 "Shantell Sans", "Inter", sans-serif; /* 14 oder 16 px, keine neue Größe */
  letter-spacing: 0; text-align: center; hyphens: manual; overflow-wrap: normal;
}
/* Abschluss der Startseite: ein großer, klarer Knopf zur Umfrage (SPEC 22) */
.schluss { padding-bottom: var(--abstand); }
/* 15.10.2026: Das Finale steht im klaren Wasser (babyblau wie "Dein Video"), oben gerissen. Die Geschichte endet, wo der Film endet */
.schluss--wasser {
  margin-top: var(--abstand); padding-top: calc(var(--abstand) * .8);
  background-color: #C4E1FF;
  background-image:
    radial-gradient(40% 50% at 82% 30%, rgba(255, 255, 255, .5), transparent 72%),
    linear-gradient(180deg, #D2EAFF 0, #B4D9FF 100%),
    url(../img/paper-klar.jpg);
  background-size: auto, auto, cover;
  background-repeat: no-repeat;
  background-blend-mode: normal, multiply, normal;
  clip-path: polygon(0.00% 8.5px, 1.70% 15.0px, 3.14% 12.7px, 5.54% 3.2px, 8.42% 2.7px, 11.05% 3.4px, 12.55% 10.5px, 16.48% 4.5px, 18.41% 14.5px, 22.74% 13.5px, 25.25% 21.5px, 26.60% 19.2px, 28.76% 4.9px, 30.35% 8.2px, 34.24% 5.6px, 37.36% 14.8px, 39.79% 13.0px, 41.20% 3.2px, 43.08% 15.6px, 45.69% 8.3px, 48.82% 11.1px, 51.01% 17.9px, 54.52% 6.9px, 57.61% 12.5px, 61.70% 16.6px, 63.85% 21.6px, 65.44% 10.4px, 69.14% 5.0px, 71.95% 2.8px, 75.36% 17.3px, 78.45% 19.5px, 80.68% 15.9px, 83.84% 13.6px, 86.55% 18.8px, 90.87% 11.5px, 94.26% 3.2px, 97.77% 14.9px, 100% 6px, 100% 100%, 0 100%);
}
.schluss--wasser .marker__strich path { stroke: var(--fokus); }
.schluss__raster { display: grid; grid-template-columns: 420px minmax(0, 1fr); column-gap: 80px; align-items: center; } /* 15.10.2026: Text beginnt auf derselben Linie wie die FAQ-Liste */
.schluss__text .kontakt__zeile { max-width: 24em; }
.btn--gross { gap: 18px; min-height: 88px; margin-top: 40px; padding: 0 44px 0 48px; font-size: var(--fs-4); border-radius: 14px; }
.pfeil { flex: none; width: 58px; height: 44px; overflow: visible; transition: transform 240ms var(--ease); }
@media (hover: hover) { .btn--gross:hover .pfeil { transform: translateX(6px); } }
/* Wasser im Pfeil (Alex 14.10.2026): Mit JavaScript wartet der Pfeil leer (.pfeil-wartet) und füllt sich, wenn die Maus darauf geht
   oder der Knopf den Fokus hat. Ohne Maus füllt er sich einmal, sobald der Knopf ins Bild kommt (v2.js). Ohne JavaScript ist er gefüllt.
   Die Welle läuft nur während des Füllens, sonst steht sie (kein Dauerneuzeichnen). */
.pfeil__wasser { transform: translateY(0); transition: transform 1000ms cubic-bezier(.45, .05, .3, 1); }
.pfeil-wartet .pfeil__wasser { transform: translateY(27px); transition-duration: 420ms; }
.pfeil__welle { animation: pfeil-welle 1100ms linear infinite paused; }
.btn--gross:focus-visible .pfeil__welle, .pfeil-fuellt .pfeil__welle { animation-play-state: running; }
.pfeil-wartet:focus-visible .pfeil__wasser { transform: translateY(0); transition-duration: 1000ms; }
@media (hover: hover) {
  .pfeil-wartet:hover .pfeil__wasser { transform: translateY(0); transition-duration: 1000ms; }
  .btn--gross:hover .pfeil__welle { animation-play-state: running; }
}
@keyframes pfeil-welle { to { transform: translateX(17.5px); } }
.schluss .kontakt__bild { margin-top: 0; }

/* Seite anfrage.html: nur die Umfrage, im Kopf nichts außer dem Weg zurück */
.nav__zurueck {
  margin-left: auto; padding: 14px 0 12px;
  font: 500 var(--fs-6)/1 "Inter", sans-serif; text-decoration: none; white-space: nowrap;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 6px) / 0 2px no-repeat;
  transition: background-size 240ms var(--ease);
}
@media (hover: hover) { .nav__zurueck:hover { background-size: 100% 2px; } }
.anfrage-seite { padding: calc(var(--nav-h) + 32px) 0 var(--abstand); }
.anfrage-seite .kontakt__raster { grid-template-columns: minmax(0, 560px); justify-content: center; row-gap: 40px; }
.anfrage-seite .kontakt__text { text-align: center; }
@media (min-width: 900px) {
  .anfrage-seite .kontakt__raster { grid-template-columns: minmax(0, 760px); }
}

/* Kontakt: Klick-Umfrage in drei Schritten (SPEC 22).
   Ohne JavaScript stehen die drei Schritte als langes Formular untereinander.
   v2.js setzt .ist-umfrage, erst dann liegt immer nur ein Schritt im Bild. */
.formular {
  position: relative;
  padding: 36px 40px 24px;
  background: var(--cream) url(../img/paper.jpg) 0 0 / 600px; background-blend-mode: multiply; /* Papier wie die Etiketten */
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 22px 36px -22px rgba(20, 30, 60, .5);
  transform: rotate(.5deg);
}
/* Feedback 25.10.2026: Klebeband quer über die Ecke oben links (unten rechts auf Alex' Wunsch wieder weg) */
.formular::before {
  content: ""; position: absolute; z-index: 1; width: 128px; height: 28px;
  background: var(--tape); mix-blend-mode: multiply; pointer-events: none;
}
.formular::before { left: -34px; top: 12px; transform: rotate(-42deg); }
.anfrage-seite { overflow-x: clip; }

/* Kopfzeile: zurück links, Schritte rechts */
.anfrage__kopf { display: none; }
.ist-umfrage .anfrage__kopf { display: flex; align-items: center; min-height: 44px; margin: -8px 0 12px; }
.zurueck {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 8px 0 2px; margin-left: -2px;
  font: 500 var(--fs-6)/1 "Inter", sans-serif; color: var(--ink-soft);
  background: none; border: 0; cursor: pointer;
  transition: color 240ms var(--ease);
}
.zurueck::before {
  content: ""; width: 8px; height: 8px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
@media (hover: hover) { .zurueck:hover { color: var(--ink); } }
.fortschritt { display: flex; align-items: center; margin-left: auto; }
.fortschritt li {
  position: relative; display: grid; place-items: center;
  width: 30px; height: 30px;
  font: 700 var(--fs-7)/1 "Geist Mono", ui-monospace, monospace; letter-spacing: 0;
  color: var(--ink-soft);
  border: 2px solid var(--line-faq); border-radius: 4px;
  transition: background-color 240ms var(--ease), border-color 240ms var(--ease), color 240ms var(--ease);
}
.fortschritt li + li { margin-left: 30px; }
.fortschritt li + li::before {
  content: ""; position: absolute; right: calc(100% + 2px); top: 50%;
  width: 30px; height: 2px; margin-top: -1px;
  background: var(--line-faq);
  transition: background 240ms var(--ease);
}
.fortschritt .ist-erreicht { color: var(--ink); border-color: var(--ink); background: var(--water); }
.fortschritt .ist-erreicht::before { background: var(--water); }
.fortschritt .ist-jetzt { color: #fff; background: var(--ink); }
.fortschritt .ist-jetzt + li::before { background: linear-gradient(90deg, var(--water) 50%, var(--line-faq) 50%); }

/* Schritte */
.schritt { min-width: 0; margin: 0; padding: 0; border: 0; }
.schritt + .schritt { margin-top: 44px; }
.schritt legend {
  float: left; width: 100%; margin: 0 0 20px; padding: 0;
  font: 600 var(--fs-4)/1.15 "Inter", sans-serif; letter-spacing: -.003em;
}
.schritt legend ~ * { clear: both; }
.schritt legend:focus { outline: none; }
/* Zeile unter der Frage im Stilschritt (Beispielfirma): sitzt an der Frage, der Abstand zu den Antworten bleibt */
.schritt[data-schritt="stil"] legend { margin-bottom: 6px; }
.schritt .notiz { margin: 0 0 16px; }
.formular > noscript .notiz { margin: 0 0 20px; } /* Hinweis ohne JavaScript, steht über der ersten Frage */
.ist-umfrage .schritte { display: grid; }
.ist-umfrage .schritt {
  grid-area: 1 / 1;
  visibility: hidden; opacity: 0; transform: translateX(16px);
  transition: opacity 200ms var(--ease), transform 240ms var(--ease), visibility 0s linear 240ms;
}
.ist-umfrage .schritt + .schritt { margin-top: 0; }
.ist-umfrage .schritt[data-lage="vor"] { transform: translateX(-16px); }
.ist-umfrage .schritt.ist-aktiv { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
/* Navigation unten: Zurück links, Weiter rechts, auf jedem Schritt an derselben Stelle (Feedback 25.10.2026) */
.anfrage__nav { display: none; }
.ist-umfrage .anfrage__nav { display: flex; align-items: center; gap: 16px; min-height: 52px; margin-top: 28px; }
.anfrage__nav .weiter { margin-left: auto; gap: 10px; }
.anfrage__nav .weiter::after { content: "→" / ""; font-weight: 700; transition: translate 200ms var(--ease); }
@media (hover: hover) { .anfrage__nav .weiter:not(:disabled):hover::after { translate: 3px 0; } }
.anfrage__nav .weiter:disabled { opacity: .35; cursor: default; }

/* Antworten: ein Klick auf die ganze Karte. Der Radioknopf liegt unsichtbar darüber. */
.wahl { position: relative; display: block; }
.wahl__input {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.wahl__karte {
  position: relative; display: block;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.wahl__input:focus-visible + .wahl__karte { outline: 3px solid var(--fokus); outline-offset: 4px; }
.wahl__haken {
  position: absolute; z-index: 1; right: -9px; top: -9px;
  width: 26px; height: 26px; padding: 4px;
  color: #fff; background: var(--ink); border-radius: 50%;
  opacity: 0; transform: scale(.5);
  transition: opacity 160ms var(--ease), transform 240ms var(--ease);
}
.wahl__input:checked + .wahl__karte .wahl__haken { opacity: 1; transform: none; }
.wahl-raster { display: grid; gap: 12px; }
.wahl-raster--bilder { grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 600px) { .wahl-raster--bilder { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; } }
.wahl-raster--offen { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 22px; } /* untereinander wie Frage 2 und 3 (Alex 25.10.2026) */
.wahl-liste { display: grid; gap: 16px; }
/* Call zuerst (24.10.2026): Zeile unter der Budgetfrage, danach das Ergebnis mit dem Knopf zum Termin */
.schritt[data-schritt="thema"] .wahl-raster--offen { margin-top: 0; }
.schritt__klein { margin-top: 16px; font-size: var(--fs-7); line-height: 1.45; color: var(--ink-soft); }
.ergebnis__titel { font: 600 var(--fs-4)/1.15 "Inter", sans-serif; letter-spacing: -.003em; }
.ergebnis__titel:focus { outline: none; }
.ergebnis__text { margin-top: 12px; font-size: var(--fs-6); line-height: 1.45; }
.ergebnis__fuss { margin-top: 24px; }
.ergebnis__klein { margin-top: 14px; font-size: var(--fs-7); line-height: 1.45; }
.ergebnis__klein a { color: var(--ink); text-underline-offset: 3px; }

/* Stil: aufgeklebter Abzug wie bei den Stilen */
.wahl--bild .wahl__karte {
  padding: 6px 6px 9px;
  background: var(--cream);
  box-shadow: var(--schatten-papier);
  transform: rotate(calc(var(--r) * 1deg));
}
.wahl--bild img { width: 100%; aspect-ratio: 16 / 9; }
.wahl--bild .wahl__name { display: block; margin-top: 8px; padding: 0 2px; font: 600 var(--fs-6)/1.25 "Inter", sans-serif; }
@media (max-width: 599px) {
  .wahl--bild .wahl__karte {
    display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 14px;
    padding: 6px 12px 6px 6px;
  }
  .wahl--bild .wahl__name { margin-top: 0; }
}
@media (hover: hover) {
  .wahl--bild:hover .wahl__karte { transform: rotate(0deg) translateY(-3px); box-shadow: var(--schatten-papier-hoch); }
}
.wahl--bild .wahl__input:checked + .wahl__karte { transform: rotate(0deg); box-shadow: 0 0 0 3px var(--ink), var(--schatten-papier); }

/* Paket, "Weiß ich noch nicht" und "Sonstiges": Zeilen mit Rahmen */
.wahl--zeile .wahl__karte { min-height: 52px; padding: 10px 16px; border: 2px solid var(--ink); border-radius: 10px; }
@media (hover: hover) { .wahl--zeile:hover .wahl__karte { background: rgba(3, 15, 46, .05); } }
.wahl--zeile .wahl__input:checked + .wahl__karte { background: rgba(82, 157, 255, .22); box-shadow: inset 0 0 0 1px var(--ink); }
.wahl--paket .wahl__karte {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  column-gap: 12px; row-gap: 3px; padding: 12px 16px 13px;
}
.wahl--paket .wahl__name { font: 600 var(--fs-5)/1.25 "Inter", sans-serif; letter-spacing: -.003em; }
.wahl__preis { font: 700 var(--fs-5)/1.25 "Geist Mono", ui-monospace, monospace; letter-spacing: -.02em; white-space: nowrap; }
.wahl__zeile { grid-column: 1 / -1; font-size: var(--fs-7); line-height: 1.4; color: var(--ink-soft); }
/* 15.10.2026: Was man fürs Geld bekommt, auf einen Blick (Alex: "warum zahle ich 1000 Euro mehr") */
.wahl--paket .wahl__zeile { font-size: var(--fs-6); color: var(--ink); }
.wahl__stueck { white-space: nowrap; } /* "QR-Code-Funnel-Anbindung" bricht am Handy nicht mitten im Wort */
.wahl__tag {
  position: absolute; left: 14px; top: -16px; z-index: 1;
  padding: 3px 10px 4px;
  font: 700 var(--fs-7)/1 "Shantell Sans", "Inter", sans-serif; letter-spacing: 0;
  background: #9EC6F9; /* Klebeband auf Creme, deckend: der Rahmen der Zeile scheint nicht durch */
  transform: rotate(-3deg); pointer-events: none;
}
.wahl--offen .wahl__karte { display: grid; place-items: center; text-align: center; border-color: rgba(3, 15, 46, .55); }
.wahl--offen .wahl__name { font: 600 var(--fs-6)/1.25 "Inter", sans-serif; }
.wahl--offen .wahl__input:checked + .wahl__karte { border-color: var(--ink); }

/* Felder */
.feld { display: grid; margin-top: 16px; }
.auswahl + .feld { margin-top: 0; }
.feld label { font: 600 var(--fs-6)/1.3 "Inter", sans-serif; }
.feld__frei { margin-left: 6px; font-weight: 400; color: var(--ink-soft); }
.feld input, .feld textarea {
  width: 100%; padding: 8px 2px 10px;
  font-size: var(--fs-5); line-height: 1.4;
  background: transparent; border: 0; border-radius: 0;
  border-bottom: 2px solid rgba(3, 15, 46, .45);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.feld textarea { resize: vertical; min-height: 96px; }
.feld input:focus, .feld textarea:focus { outline: none; border-bottom-color: var(--fokus); box-shadow: 0 1px 0 var(--fokus); }
/* Fehlerfeld: gestrichelte 3-px-Linie, auch im Fokus. Die Information liegt in der Form, nicht nur in der Farbe.
   Die Polsterung unten schrumpft um den einen Pixel, den die Linie dicker ist: Das Feld wird nicht höher. */
.feld [aria-invalid="true"],
.feld [aria-invalid="true"]:focus { padding-bottom: 9px; border-bottom: 3px dashed var(--fehler); }
/* Windows-Kontrastmodus: Farbe und Schatten der Unterlinie entfallen, der Fokus braucht einen Rahmen */
@media (forced-colors: active) {
  .feld input:focus, .feld textarea:focus { outline: 3px solid Highlight; outline-offset: 2px; }
}
.ist-umfrage .frei:not(.ist-offen) { display: none; }

/* Gewählte Antworten im letzten Schritt: Klebeband-Etiketten, ein Klick führt zurück */
.auswahl { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.auswahl:empty { display: none; }
.ist-umfrage .auswahl { display: flex; min-height: 34px; } /* Platz von Anfang an: die Karte bleibt in allen Schritten gleich hoch */
.ist-umfrage .auswahl--stil { min-height: 0; margin: -6px 0 16px; } /* Budgetfrage: nur der gewählte Stil, kleiner Abstand */
.ist-umfrage .auswahl--stil:empty { display: none; }
.auswahl li { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.auswahl button {
  display: block; max-width: 100%; padding: 7px 12px 8px;
  font: 600 var(--fs-7)/1.2 "Inter", sans-serif; color: var(--ink);
  background: var(--tape); border: 0; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transform: rotate(calc(var(--r, 0) * 1deg));
}
.auswahl li:nth-child(1) button { --r: -1.4; }
.auswahl li:nth-child(2) button { --r: 1.1; }
@media (hover: hover) { .auswahl button:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* Senden: versteckte Falle für Bots, Wartezustand, Danke-Ansicht */
.honig { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.formular [aria-disabled="true"] { cursor: progress; opacity: .7; }
.ist-gesendet .anfrage__kopf, .ist-gesendet .schritte, .ist-gesendet .formular__klein { display: none; }
.danke { padding: 4px 0 8px; }
.danke__tropfen { width: 34px; height: 46px; margin-bottom: 16px; }
.danke__titel { font: 600 var(--fs-4)/1.15 "Inter", sans-serif; letter-spacing: -.003em; }
.danke__titel:focus { outline: none; }
.danke__text { margin-top: 12px; font-size: var(--fs-6); line-height: 1.45; }
.danke__mail { font-weight: 600; overflow-wrap: anywhere; }
.danke__auswahl { display: flex; flex-wrap: wrap; gap: 10px 8px; margin-top: 22px; }
.danke__auswahl li {
  max-width: 100%; padding: 7px 12px 8px;
  font: 600 var(--fs-7)/1.2 "Inter", sans-serif;
  background: var(--tape);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transform: rotate(calc(var(--r, 0) * 1deg));
}
.danke__auswahl li:nth-child(1) { --r: -1.4; }
.danke__auswahl li:nth-child(2) { --r: 1.1; }

/* Meldung und Kleingedrucktes unter allen Schritten */
.formular__status { margin-top: 16px; font-size: var(--fs-6); font-weight: 600; line-height: 1.45; scroll-margin-bottom: 24px; }
.formular__status:empty { margin-top: 0; } /* bleibt im Dokument (kein display:none), sonst sagt eine Vorlesehilfe die Meldung nicht an */
.formular__status.ist-fehler { color: var(--fehler); }
.formular__klein { margin-top: 18px; font-size: var(--fs-7); line-height: 1.45; color: var(--ink-soft); }
.formular__klein a { color: var(--ink); text-underline-offset: 3px; }
.formular__luecke { margin-top: 6px; line-height: 1.6; }

/* ---------- Footer (SPEC 13) ---------- */
.footer { border-top: 1px solid var(--line); padding: 40px 0 44px; }
.footer__in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px 40px; font-size: var(--fs-7); line-height: 1.45; color: var(--ink-soft); }
.logo--klein { font-size: var(--fs-6); gap: 8px; }
.logo--klein .logo__drop { width: 16px; height: 22px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.footer__links a { color: var(--ink); text-underline-offset: 3px; padding: 12px 0; }

/* ---------- Rechtsseiten ---------- */
.legal { padding: calc(var(--nav-h) + 72px) 0 var(--abstand); }
.legal__blatt {
  position: relative;
  max-width: 800px; margin-inline: auto;
  padding: 56px 64px 48px;
  background: var(--cream);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 22px 36px -22px rgba(20, 30, 60, .45);
}
.legal__blatt::before {
  content: ""; position: absolute; left: 50%; top: -13px; width: 110px; height: 26px;
  background: var(--tape); mix-blend-mode: multiply;
  transform: translateX(-50%) rotate(-3deg);
}
.legal h1 { font: 600 var(--fs-2)/1.04 "Inter", sans-serif; letter-spacing: -.009em; }
.legal h2 { margin-top: 44px; font: 600 var(--fs-4)/1.15 "Inter", sans-serif; letter-spacing: -.003em; scroll-margin-top: 96px; }
.legal p { margin-top: 12px; max-width: 42em; font-size: var(--fs-6); line-height: 1.6; }
.legal__intro { color: var(--ink-soft); }
.legal__liste { margin-top: 28px; border-top: 1px solid var(--line); }
.legal__liste > div { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 4px 24px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-6); line-height: 1.5; }
.legal__liste dt { font-weight: 600; }
.legal a { text-underline-offset: 3px; }
.legal .legal__stand { color: var(--ink-soft); margin-top: 44px; }
.legal .legal__zurueck { margin-top: 28px; }
/* AGB-Entwurf (26.10.2026): unübersehbar oben, solange die Bedingungen nicht gelten */
.legal .legal__entwurf { margin-top: 20px; padding: 14px 18px; border: 2px solid var(--ink); border-radius: 12px; background: #FFF3C4; }
/* Cookie-Tabelle in der Datenschutzerklärung: am Handy waagrecht scrollbar statt abgeschnitten */
.legal__tabelle { max-width: 42em; margin-top: 16px; overflow-x: auto; }
.legal__tabelle table { width: 100%; border-collapse: collapse; font-size: var(--fs-7); line-height: 1.45; }
.legal__tabelle caption { text-align: left; font-weight: 600; padding-bottom: 6px; }
.legal__tabelle th, .legal__tabelle td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal__tabelle th { font-weight: 600; }

/* ---------- Umbruch 900 bis 1119 px: schmaleres Blockraster ---------- */
@media (max-width: 1119px) {
  .werk, .fragen__raster { grid-template-columns: 280px minmax(0, 1fr); column-gap: 48px; }
  .werk--schlamm { margin-top: -40px; }
  .werk--schlamm .etikett { margin-top: 150px; }
  .werk--filter .etikett { margin-top: 80px; }
  .werk--video .etikett { margin-top: 64px; }
  .etikett { max-width: 340px; }
  h1 { font-size: min(var(--fs-1), calc((100vw - 48px) / 9.2)); }
  /* Die Bühne ist hier nur 520 bis 740 px breit: Schrift im Bild eine Stufe kleiner, damit nichts überlappt */
  :root { --fs-fach: var(--fs-7); --fs-hand: var(--fs-6); }
  .kontakt__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); column-gap: 48px; }
  .tickets { gap: 20px; }
  .ticket__papier { padding: 28px 22px; --cut-y: 169px; }
}

/* ---------- 1120 bis 1247 px: die Bühne schrumpft auf 652 bis 779 px, das Rohr rückt an die Überschrift.
   H1 etwas kleiner (96 px ab 1213 px), Schrift im Bild auf die bestehende Stufe 16 px (D4, D5) ---------- */
@media (min-width: 1120px) and (max-width: 1247px) {
  h1 { font-size: min(var(--fs-1), calc(21px + 6.18vw)); }
  :root { --fs-fach: var(--fs-6); }
}

/* ---------- Unter 900 px: eine Spalte, Beschriftung vor dem Bild ---------- */
@media (max-width: 899px) {
  .werk {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "etikett" "buehne" "cta";
    grid-template-rows: auto;
    row-gap: 20px;
  }
  :root { --fs-fach: var(--fs-5); --fs-hand: var(--fs-4); }
  .etikett { max-width: 100%; }
  .werk > .buehne { width: 100%; max-width: 780px; }
  .buehne--filter .leitung, .buehne--video .leitung { top: calc(var(--t1) * var(--u)); height: calc(var(--h1) * var(--u)); }
  .werk--schlamm { margin-top: 32px; }
  .werk--schlamm .etikett, .werk--filter .etikett, .werk--video .etikett { margin-top: 0; }
  .werk--filter, .werk--video { padding-top: 40px; padding-bottom: 36px; }
  .werk__cta { padding-top: 12px; }
  .tickets { grid-template-columns: minmax(0, 1fr); max-width: 520px; gap: 36px; }
  .ticket--empfohlen { transform: none; }
  .ticket__papier { padding: 32px; --cut-y: 173px; }
  .fragen__raster, .kontakt__raster { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .kontakt__raster { row-gap: 40px; }
  .schluss__raster { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .schluss .kontakt__bild { justify-self: end; }
  .schluss__text { order: -1; }
}

/* ---------- Handy bis 760 px (SPEC 3.3, 5.3) ---------- */
@media (max-width: 760px) {
  :root {
    --fs-1: 48px; --fs-2: 36px; --fs-3: 28px; --fs-4: 24px; --fs-5: 18px; --fs-6: 16px; --fs-7: 14px;
    --fs-preis: var(--fs-3);
    --fs-fach: var(--fs-7);
    --fs-hand: var(--fs-6);
    --fs-etikett-zeile: var(--fs-6);
    --rand: 16px;
    --kopf-inhalt: 32px;
    --nav-h: 56px;
    --knopf-h: 48px;
  }
  html { scroll-padding-top: 72px; }
  .nav__in { gap: 16px; }
  .nav__links { display: none; }
  .sprache { margin-left: auto; }
  .nav__cta { margin-left: 4px; }
  .logo { font-size: 18px; }
  .logo__drop { width: 19px; height: 26px; }

  .hero__kopf { padding-top: 80px; }
  .rahmen__hinweis { top: 4%; bottom: auto; max-width: 70%; padding: 3px 6px; }
  .kette { gap: 22px; margin-bottom: 24px; }
  .kette__schritt + .kette__schritt::before { left: -21px; top: 30px; width: 20px; height: 14px; }
  .kette__bild { height: 76px; }
  .kette__play { width: 30px; height: 30px; }
  .kette__wort { flex-direction: column; gap: 4px; font-size: var(--fs-7); white-space: normal; }
  h1 { font-size: min(var(--fs-1), calc((100vw - 34px) / 8.5)); line-height: 1; letter-spacing: -.003em; } /* 8,5: "Schlamm rein." mit Augen und "Klartext raus." je eine Zeile (25.10.2026) */
  .h1__zeile { display: inline; }
  .hero__zeile { margin-top: 16px; }
  .hero__knoepfe { margin-top: 20px; gap: 20px; }
  .preislink { font-size: var(--fs-5); }

  .werk { row-gap: 12px; }
  .werk--schlamm { margin-top: 20px; }
  .etikett { padding: 10px 16px 12px; }
  .etikett::before { width: 44px; height: 16px; left: -14px; top: -1px; }
  .werk--filter, .werk--video { padding-top: 32px; padding-bottom: 40px; }

  .buehne { --bn: 600; }
  .buehne--schlamm { aspect-ratio: 600 / 560; }
  .buehne--filter  { aspect-ratio: 600 / 420; }
  .buehne--video   { aspect-ratio: 600 / 410; }
  .it, .leitung, .flansch { left: calc(var(--ml, var(--l)) * var(--u)); top: calc(var(--mt, var(--t)) * var(--u)); }
  .it { --rot: var(--mr, var(--r, 0)); width: calc(var(--mw, var(--w)) * var(--u)); }
  .leitung { height: calc(var(--mh, var(--h)) * var(--u)); }
  .fach, .hand { width: auto; }
  .play__knopf { width: 52px; min-width: 0; }

  .abzug { padding: 6px; }
  .abzug::before { width: 52px; height: 16px; top: -8px; }
  .stil__name { margin-bottom: 12px; }
  .stil__text { margin: 12px 0 16px; }
  .stil .btn { align-self: stretch; padding: 0 8px; margin-top: 0; }
  .tickets { margin-top: var(--kopf-inhalt); gap: 24px; }
  .ticket__papier { padding: 24px; --cut-y: 151px; }
  .ticket__kopf { min-height: 128px; }
  .ticket__band { top: 10px; right: 14px; }
  .faq summary { padding: 20px 0; }
  .faq__antwort { padding-right: 32px; }
  .fragen__raster { row-gap: var(--kopf-inhalt); }
  .kontakt__raster { row-gap: 28px; }
  .kontakt__text { display: contents; }
  .kontakt__text .h2 { order: 1; }
  .kontakt__text .kontakt__zeile { order: 2; margin-top: -10px; }
  .btn--gross { width: 100%; min-height: 76px; margin-top: 28px; padding: 0 24px; }
  .pfeil { width: 48px; height: 36px; }
  .anfrage-seite { padding-top: calc(var(--nav-h) + 32px); }
  .nav__zurueck { font-size: var(--fs-7); }
  .formular { order: 3; transform: none; padding: 24px 20px 28px; }
  .wahl-raster--bilder { gap: 14px 14px; }
  .wahl-raster--offen { margin-top: 16px; }
  .schritt .notiz { margin-bottom: 10px; }
  .fortschritt li + li { margin-left: 24px; }
  .fortschritt li + li::before { width: 24px; }
  .schritt legend { margin-bottom: 18px; }
  .kontakt__bild { --k: .8px; order: 4; justify-self: end; margin-top: 0; }
  .footer { padding: 32px 0 36px; }
  /* Alex 25.10.2026: Links mittig, das Logo zum Schluss groß über die ganze Breite */
  .footer__in { grid-template-columns: minmax(0, 1fr); gap: 8px; justify-items: center; text-align: center; }
  .footer__links { justify-content: center; order: 1; }
  .footer__anbieter { order: 2; }
  .footer .logo--klein { order: 3; width: 100%; justify-content: center; gap: .14em; margin-top: 18px; font-size: min(15.5vw, 74px); letter-spacing: -.035em; line-height: 1; }
  .footer .logo--klein .logo__drop { width: .62em; height: .84em; }
  .legal { padding-top: calc(var(--nav-h) + 40px); }
  .legal__blatt { padding: 40px 20px 32px; }
  .legal__liste > div { grid-template-columns: minmax(0, 1fr); }
}

/* Sehr schmal: ein Stil pro Zeile, Überschrift passt in 288 px */
@media (max-width: 389px) {
  .ist-umfrage .auswahl { min-height: 76px; } /* zwei Etiketten liegen hier untereinander */
  .ist-umfrage .auswahl--stil { min-height: 0; }
}
@media (max-width: 359px) {
  .hand { top: calc(397 * var(--u)); } /* "trüb" und "klar" ragen sonst 9 px unter die Bühne (Messuhr D15) */
  /* 320 px = 400 % Zoom: Knopftexte dürfen nicht abgeschnitten werden (WCAG 1.4.10, Prüfung 26.10.2026) */
  .nav__in { gap: 6px; }
  .nav__cta { padding: 0 8px; font-size: 13px; }
  .sprache a { min-width: 26px; padding: 0 2px; }
  .logo { font-size: 16px; }
  .btn--gross { gap: 10px; padding: 0 14px; font-size: var(--fs-6); } /* 16 px: "Erstgespräch vereinbaren" passt ganz (27.10.2026) */
  .btn--gross .pfeil { width: 34px; height: 26px; }
}
/* "Erstgespräch vereinbaren" ist länger als "buchen": der große Knopf wird am Handy kleiner, damit der Text ganz bleibt (27.10.2026). Steht nach der Grundregel, unter 360 px gilt der Block darüber. */
@media (min-width: 360px) and (max-width: 560px) {
  .btn--gross { gap: 12px; padding: 0 20px; font-size: var(--fs-5); }
  .btn--gross .pfeil { width: 38px; height: 28px; }
}

/* Flache Laptop-Bildschirme (z. B. 1440x650): Schlamm-Pointe und Umfrage-Karte rücken höher ins Bild */
@media (min-width: 1120px) and (max-height: 700px) {
  .hero__kopf { padding-top: 84px; }
  .kette { margin-bottom: 20px; }
  .kette__bild { height: 84px; }
  .hero__zeile { margin-top: 16px; }
  .hero__knoepfe { margin-top: 20px; }
  .werk--schlamm { margin-top: -216px; }
  .werk--schlamm .etikett { margin-top: 260px; }
}
@media (min-width: 900px) and (max-height: 700px) {
  .anfrage-seite { padding-top: calc(var(--nav-h) + 8px); }
  .anfrage-seite .kontakt__raster { row-gap: 14px; }
  .anfrage-seite .kontakt__zeile { margin-top: 6px; }
  .anfrage-seite .formular { padding-top: 22px; padding-bottom: 18px; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media print {
  [data-einflug] { translate: none !important; scale: none !important; rotate: var(--dreh-karte, 0deg) !important; }
  .laufband__inhalt { translate: none !important; }
  .wolke { display: none; }
}

/* ---------- Runde 4: Breiten ---------- */
@media (max-width: 1119px) {
  :root { --fs-etikett-zeile: var(--fs-5); }
  .ablauf__karten { gap: 44px; }
  .ablauf-karte { padding-inline: 18px; }
  .ablauf-karte--1::after, .ablauf-karte--2::after { right: -44px; width: 42px; }
  .werk, .fragen__raster { grid-template-columns: 300px minmax(0, 1fr); column-gap: 40px; }
  .schluss__raster { grid-template-columns: auto minmax(0, 1fr); column-gap: 48px; }
}
@media (max-width: 899px) {
  .werk, .fragen__raster, .schluss__raster { grid-template-columns: minmax(0, 1fr); }
  .stile__raster { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; gap: 36px; }
  .ablauf__karten { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; gap: 76px; }
  .ablauf-karte--2 { margin: 0; }
  .ablauf-karte--1::after, .ablauf-karte--2::after { right: auto; left: 50%; top: auto; bottom: -60px; width: 50px; height: 30px; translate: -50% 0; rotate: 90deg; }
  .garantie { padding: 24px 18px 22px; }
  .garantie__spalten { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 760px) {
  :root { --fs-etikett-zeile: var(--fs-5); }
  .stil__name { font-size: var(--fs-2); margin-bottom: 18px; }
  .stil__text { margin: 18px 0 20px; }
  .stil .btn { align-self: center; padding: 0 24px; }
  .laufband { padding-top: 48px; }
  .pille { font-size: var(--fs-6); padding: 11px 18px 12px; }
  .ablauf { padding-top: var(--abstand); }
  .ablauf__karten { margin-top: 48px; }
  .ablauf-karte { padding: 26px 20px 30px; }
  /* Alex 25.10.2026: am Desktop drei Beispiele, am Handy nur das erste, mittig */
  .maschinen { grid-template-columns: minmax(0, 1fr); margin-top: 32px; max-width: 280px; }
  .maschine--breit { display: none; }
  .maschine__werk { height: 80px; }
  .maschine__sieb { width: 60px; }
  /* 25.10.2026: am Handy drei kleine Karten nebeneinander */
  .ablauf__karten { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 10px; margin-top: 32px; }
  .ablauf-karte, .ablauf-karte--2 { margin: 0; padding: 14px 6px 14px; border-radius: 16px; }
  .ablauf-karte__sticker { width: 44px; height: 44px; margin: 0 0 6px; }
  .ablauf-karte__name { font-size: var(--fs-7); line-height: 1.2; letter-spacing: 0; }
  .ablauf-karte__nr { display: grid; width: 26px; height: 26px; margin: 0 auto 4px; vertical-align: 0; font-size: var(--fs-7); }
  .ablauf-karte--1::after, .ablauf-karte--2::after { display: none; }
  .ablauf__fuss { margin-top: 56px; }
  .wolke { display: none; } /* am Handy lagen Reste an der Reißkante, und ohne Maus haben sie keine Aufgabe */
  /* Stile am Handy (Feedback 25.10.2026): Karussell über die ganze Breite, Collage in der Mitte, 3D links und Modern rechts
     angeschnitten und blass. Wischen, Winkel-Pfeile "<" ">", Tastatur, kein automatisches Laufen. */
  .karussell { --karte: 72cqw; position: relative; container-type: inline-size; margin: 32px calc(-1 * var(--rand)) 0; }
  .stile__raster {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: var(--karte); gap: 14px;
    padding: 14px calc((100cqw - var(--karte)) / 2) 24px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  .stile__raster::-webkit-scrollbar { display: none; }
  .stile__raster > .stil:first-child { order: 0; }
  .stil { scroll-snap-align: center; }
  /* Nur das Bild der Nachbarkarten abblenden, der Text bleibt deckend (Kontrast, Prüfung 26.10.2026) */
  .ist-bereit .stil .abzug { opacity: .55; transition: opacity 240ms var(--ease); }
  .ist-bereit .stil.ist-mitte .abzug, .ist-bereit .stil:focus-within .abzug { opacity: 1; }
  .karussell__pfeil {
    display: block; position: absolute; z-index: 2; top: 33%; width: 56px; height: 56px; padding: 4px;
    border: 0; background: none; cursor: pointer; translate: 0 -50%;
    filter: drop-shadow(0 5px 4px rgba(20, 30, 60, .28));
  }
  .karussell__pfeil[hidden] { display: none; }
  .karussell__pfeil svg { width: 100%; height: 100%; }
  .karussell__pfeil--links { left: 4px; }
  .karussell__pfeil--links svg { scale: -1 1; }
  .karussell__pfeil--rechts { right: 4px; }
  .karussell__pfeil[aria-disabled="true"] { opacity: .3; cursor: default; }
  .karussell__pfeil:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; box-shadow: 0 0 0 6px #fff; border-radius: 50%; } /* zweifarbig, sichtbar auf jedem Bild */
  /* Alex 25.10.2026: Winkel wie die Tasten "<" und ">" */
}
/* Umfrage am Handy (Feedback 24.10.2026): jede Frage füllt den Bildschirm, mittig und groß, Antworten untereinander,
   groß und fett. Kein seitliches Verrutschen beim Wechsel, nur Ein- und Ausblenden. Überschrift und Zeile bleiben für
   Vorlesehilfen da, sichtbar führt die Kopfzeile 1, 2, 3. */
@media (max-width: 760px) {
  .anfrage-seite:has(.ist-umfrage) { padding: var(--nav-h) 0 0; }
  .anfrage-seite:has(.ist-umfrage) .kontakt__text > * {
    position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .anfrage-seite .formular.ist-umfrage {
    display: flex; flex-direction: column;
    min-height: calc(100vh - var(--nav-h)); min-height: calc(100dvh - var(--nav-h));
    margin-inline: calc(-1 * var(--rand)); padding: 12px 20px 18px; box-shadow: none;
  }
  .formular.ist-umfrage::before { width: 96px; height: 22px; left: -26px; top: 8px; }
  .ist-umfrage .anfrage__kopf { margin: 0; }
  .ist-umfrage .schritte { flex: 1; align-items: center; padding: 8px 0 16px; }
  .ist-umfrage .schritt, .ist-umfrage .schritt[data-lage="vor"] { transform: none; }
  .ist-umfrage .schritt legend { margin-bottom: 28px; text-align: center; font: 700 var(--fs-3)/1.15 "Inter", sans-serif; letter-spacing: -.01em; }
  .ist-umfrage .wahl-raster--offen { gap: 14px; }
  .ist-umfrage .wahl-liste { gap: 14px; }
  .ist-umfrage .wahl--zeile .wahl__karte { min-height: 68px; padding: 12px 18px; border: 3px solid var(--ink); border-radius: 14px; }
  .ist-umfrage .wahl--offen .wahl__name { font: 700 var(--fs-5)/1.25 "Inter", sans-serif; }
  .ist-umfrage .anfrage__nav { margin-top: 0; padding-bottom: 6px; }
  .ist-umfrage .schritt--ergebnis { text-align: center; }
  .ist-umfrage .schritt--ergebnis .auswahl { justify-content: center; }
  .ist-umfrage .ergebnis__titel { font: 700 var(--fs-3)/1.15 "Inter", sans-serif; }
  .ist-umfrage .formular__klein { margin-top: 0; text-align: center; }
}

/* Eigener Mauszeiger: ein Tropfen (Lofty: "die Maus ist eine andere Maus"). Über Links ist er voll Wasser.
   Nur mit echter Maus. Eingabefelder behalten den Textcursor. */
@media (hover: hover) and (pointer: fine) {
  html { cursor: url(../img/zeiger-tropfen.svg) 4 3, url(../img/zeiger-tropfen.png) 4 3, auto; }
  /* Über allem Klickbaren der volle Tropfen. Die Adresse steht direkt hier, nicht in einer CSS-Variable:
     Über Knöpfen fiel der Zeiger sonst auf die Hand zurück (Alex 15.10.2026). Klassen stehen mit drin, damit sie
     ihr eigenes "cursor: pointer" überschreiben */
  a, button, summary, label, [role="button"], input[type="radio"], input[type="checkbox"],
  .btn, .play, .faq summary, .zurueck, .wahl__input, .auswahl button, .trinken {
    cursor: url(../img/zeiger-tropfen-voll.svg) 4 3, url(../img/zeiger-tropfen-voll.png) 4 3, pointer;
  }
  input:not([type="radio"]):not([type="checkbox"]), textarea, select { cursor: text; }
  :where(p, h1, h2, h3, dd, dt) { cursor: auto; } /* über Text der gewohnte Textcursor. Nicht auf li: die Karten mit Fotos sind li, dort verschwand der Tropfen (Alex 15.10.2026) */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .faq details::details-content { transition: none !important; }
}

/* ---------- Feedback 25.10.2026 am Handy: Headline zuerst, dann die drei Stationen ----------
   Zweite Runde (25.10.): Beschriftung immer links und groß ("1. Dein Handbuch"), Bühne rechts. Alle Bühnen gleich breit,
   so läuft das Rohr wieder durch alle drei. Im Filter der Drehregler links vom Sieb, die Anzeige trüb und klar rechts.
   Die kleine Kette im Hero entfällt hier, die Stationen sind die Kette. */
@media (max-width: 760px) {
  .kette { display: none; }
  .werk {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "etikett buehne" "cta cta";
    grid-template-rows: auto; column-gap: 8px; row-gap: 14px; align-items: center;
  }
  /* Alex 25.10.2026: Kärtchen wieder da, Text groß (28 px bei 390 px), kein mickriger Zettel */
  .werk > .etikett { align-self: center; justify-self: start; width: auto; max-width: 100%; padding: 10px 10px 12px; }
  .werk > .etikett::before { width: 52px; height: 18px; left: -12px; top: -5px; }
  .etikett__wort { overflow-wrap: anywhere; } /* bei vergrößertem Textabstand (WCAG 1.4.12) bricht das Wort, statt aus dem Zettel zu laufen */
  .etikett__wort { font-size: min(var(--fs-3), 7.2vw); white-space: normal; } /* Alex 25.10.2026: größer, 28 px bei 390 px */
  .etikett__klein { margin-bottom: 2px; font-size: var(--fs-5); }
  .etikett__zeile { display: none; }
  .werk--schlamm { margin-top: 20px; }
  .werk--filter, .werk--video { padding-top: 22px; padding-bottom: 30px; }
  .werk__cta { padding-top: 4px; }
  .werk--video .werk__cta { padding-top: 44px; } /* Platz für den Teaser unter dem Film */
  :root { --fs-hand: var(--fs-7); --fs-fach: var(--fs-7); } /* kleine Bühnen: Schrift im Bild auf 14 px */
  /* Filter gespiegelt: Zahnräder links, Sieb auf der Rohrachse, Messuhr mit trüb und klar rechts (Einheiten von 600) */
  .buehne--filter .sieb { left: calc(135 * var(--u)); top: calc(40 * var(--u)); width: calc(230 * var(--u)); }
  .buehne--filter .zahnrad--gross { left: 0; top: calc(24 * var(--u)); width: calc(118 * var(--u)); }
  .buehne--filter .zahnrad--klein { left: calc(28 * var(--u)); top: calc(156 * var(--u)); width: calc(78 * var(--u)); }
  .buehne--filter .messuhr { left: calc(392 * var(--u)); top: calc(70 * var(--u)); width: calc(150 * var(--u)); }
  .buehne--filter .zeiger { left: calc(459 * var(--u)); top: calc(94 * var(--u)); width: calc(22 * var(--u)); }
  .buehne--filter .hand--trueb { left: calc(372 * var(--u)); top: calc(236 * var(--u)); }
  .buehne--filter .hand--klar { left: calc(492 * var(--u)); top: calc(236 * var(--u)); }
  /* Film am Handy über die ganze Breite, Beschriftung darüber. Das Rohr trifft trotzdem auf die Achse der Bühnen darüber:
     kleine Bühne = 56 % von (Breite minus Spalt), Achse bei 250 von 600 Einheiten */
  /* Etikett "3. Dein Video" liegt oben links in der Film-Bühne, der Rahmen rückt darunter: spart eine ganze Zeile */
  .werk--video { grid-template-areas: "buehne buehne" "cta cta"; }
  .werk--video > .etikett { grid-area: buehne; align-self: start; z-index: 3; margin-top: 4px; }
  .buehne--video { aspect-ratio: 600 / 500; }
  .buehne--video .rahmen { top: calc(150 * var(--u) + 10px); }
  .buehne--video > * { --uk: calc(.5 * (100cqw - 8px) / 600); --achse: calc(.5 * (100cqw - 8px) + 8px + 250 * var(--uk)); } /* gleiche Spalten wie oben: halbe-halbe */
  .buehne--video .leitung { left: calc(var(--achse) - 24 * var(--uk)); width: calc(48 * var(--uk)); top: -150px; height: calc(150px + 34 * var(--u)); }
  .buehne--video .flansch--ende { left: calc(var(--achse) - 38 * var(--uk)); width: calc(76 * var(--uk)); margin-left: 0; }
  .buehne--video .tropfen { left: calc(var(--achse) - 11 * var(--uk)); width: calc(22 * var(--uk)); }
  .buehne--filter .fach { left: calc(250 * var(--u)); top: calc(150 * var(--u)); }
  /* Dampf am Handy mindestens 50 px breit, sonst sieht man ihn auf der kleinen Bühne kaum */
  .buehne--filter .dampf--1 { left: calc(40 * var(--u)); top: calc(-70 * var(--u)); width: max(72px, calc(150 * var(--u))); }
  .buehne--filter .dampf--2 { left: calc(330 * var(--u)); top: calc(-80 * var(--u)); width: max(62px, calc(130 * var(--u))); }
  .buehne--filter .dampf--3 { left: calc(420 * var(--u)); top: calc(10 * var(--u)); width: max(58px, calc(120 * var(--u))); }
}
/* Sehr schmal: trüb und klar untereinander rechts der Messuhr, sonst stoßen sie aneinander */
@media (max-width: 379px) {
  .buehne--filter .hand--trueb { left: calc(392 * var(--u)); top: calc(226 * var(--u)); }
  .buehne--filter .hand--klar { left: calc(392 * var(--u)); top: calc(292 * var(--u)); }
}

/* ---------- Feedback 25.10.2026 (zweite Runde) am Handy: Kopf füllt den ersten Bildschirm, Headline und Knopf in der Mitte ---------- */
@media (max-width: 760px) {
  .hero__kopf {
    display: flex; flex-direction: column; justify-content: center;
    min-height: calc(100svh - 124px); padding-top: calc(var(--nav-h) + 24px); padding-bottom: 8px;
  }
  .hero__satz { margin-top: 18px; font-size: var(--fs-5); }
  h1 .h1__zeile { display: block; }
  .hero__knoepfe { margin-top: 26px; }
  .hero__knoepfe .btn { width: 100%; justify-content: center; }
  .hero__versprechen { margin-top: 14px; }
  .werk--schlamm { margin-top: 0; }
}