/* 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: #A3321E;
  --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-blase: var(--fs-5);
  --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 {
  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; }

/* ---------- 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: 120px; position: relative; z-index: 2; }
h1 {
  font: 700 var(--fs-1)/.98 "Inter", sans-serif; /* 14.10.2026: fetter, wie die große Zeile bei Lofty Lab */
  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: -172px; }
.werk--schlamm .etikett { margin-top: 230px; } /* 15.10.2026: Mitte des Etiketts auf Höhe der Bühnenmitte, nichts ragt in den Riss */
.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; }
.ki { margin-top: 20px; max-width: 22em; font-size: var(--fs-6); line-height: 1.45; color: var(--ink-soft); }

/* 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)); filter: url(#rau); }
.leitung {
  width: calc(48 * var(--u)); height: calc(var(--h) * var(--u));
  background: linear-gradient(90deg, #F2EEE4 0 8.33%, #5E6468 8.33% 16.67%, #A6ABAC 16.67% 31.25%, #CACDCB 31.25% 41.67%, #A6ABAC 41.67% 83.33%, #5E6468 83.33% 91.67%, #F2EEE4 91.67%);
}
.flansch {
  width: calc(52 * var(--u)); height: calc(12 * var(--u));
  background: #8E9497; border: 2px solid #5E6468; border-radius: 2px;
  box-shadow: 0 0 0 2px #F2EEE4;
}
.flansch--ende { width: calc(56 * var(--u)); height: calc(14 * 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; }
.blase { height: calc(124 * var(--u)); transform-origin: 85% 100%; z-index: 2; }
.blase svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.blase__text {
  position: absolute; inset: 12% 6% 26% 8%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  font: 700 var(--fs-blase)/1.15 "Shantell Sans", "Inter", sans-serif;
  letter-spacing: 0;
  transform: rotate(-2deg);
}

/* 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; }

/* 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__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 { z-index: 4; 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;
}
.spielt .play, .spielt .zeit { 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,
.motion [data-block="schlamm"]:not(.fertig) .blase { 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) .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__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; margin-top: 56px; }
.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: 80px; 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; }
.ablauf-karte__nr { font: 700 var(--fs-6)/1 "Geist Mono", ui-monospace, monospace; 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; }
.ablauf-karte__meta { margin-top: 10px; font: 700 var(--fs-5)/1.2 "Shantell Sans", "Inter", sans-serif; letter-spacing: 0; }
.ablauf-karte__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; padding: 0; list-style: none; }
.ablauf-karte__liste li {
  padding: 8px 14px 9px; border: 1.5px solid var(--ink); border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  font: 500 var(--fs-6)/1.2 "Inter", sans-serif;
}
.ablauf-karte__band {
  position: absolute; top: -20px; right: -14px; z-index: 1;
  padding: 6px 14px 8px; border: 2px solid var(--ink); border-radius: 8px;
  font: 700 var(--fs-5)/1.1 "Shantell Sans", "Inter", sans-serif; letter-spacing: 0;
  background: var(--pal-akzent); rotate: 5deg;
  box-shadow: 0 6px 10px -6px rgba(20, 30, 60, .5);
}
@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: 40px; margin-top: 64px; padding: 0; list-style: none; }
.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: 70%;
  padding: 6px 14px 7px; background: var(--cream); box-shadow: 0 2px 3px rgba(20, 30, 60, .3);
  font: 700 var(--fs-5)/1.15 "Shantell Sans", "Inter", sans-serif; letter-spacing: 0; rotate: -2deg; white-space: nowrap;
}
.maschine--2 .maschine__fach { rotate: 1.6deg; }
.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--2 .maschine__sieb { rotate: calc(6deg - var(--sieb-dreh, 0deg)); }
.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.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-5)/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; }
  .schluss__wege { flex-direction: row; align-items: center; gap: 24px; }
}
.schluss__wege .btn--gross { margin-top: 0; flex: none; }
.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; }
.brief__feld input {
  width: 100%; min-height: 44px; padding: 8px 2px; border: 0; border-bottom: 2px dotted rgba(3, 15, 46, .45);
  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); }
.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; }
  .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; overflow: hidden; line-height: 1.2; }
.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); }
.anhaenger { position: absolute; left: calc(196 * var(--k)); top: calc(124 * var(--k)); width: calc(128 * var(--k)); transform: rotate(7deg); transform-origin: 50% 0; }
.anhaenger img { width: 100%; }
.anhaenger__text {
  position: absolute; left: 4%; right: 4%; top: 45%;
  display: flex; flex-direction: column; align-items: center;
  font: 600 var(--fs-6)/1.2 "Shantell Sans", "Inter", sans-serif;
  letter-spacing: 0; text-align: center;
}
/* 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);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 22px 36px -22px rgba(20, 30, 60, .5);
  transform: rotate(.5deg);
}
.formular::before {
  content: ""; position: absolute; left: 50%; top: -13px; width: 110px; height: 26px;
  background: var(--tape); mix-blend-mode: multiply;
  transform: translateX(-50%) rotate(-3deg);
}

/* 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; }
.schritt__fuss { display: flex; align-items: center; gap: 20px; margin-top: 26px; }
.schritt__fuss:empty { display: none; }

/* 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: repeat(2, minmax(0, 1fr)); margin-top: 22px; }
.wahl-liste { display: grid; gap: 16px; }

/* 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; }

/* ---------- 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-blase: var(--fs-7); --fs-hand: var(--fs-6); }
  .kontakt__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); column-gap: 48px; }
  .stile__raster { gap: 36px 24px; }
  .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); --fs-blase: 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-blase: 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; }
  .stile__raster, .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-blase: var(--fs-7);
    --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; }
  .nav__cta { margin-left: auto; }
  .logo { font-size: 18px; }
  .logo__drop { width: 19px; height: 26px; }

  .hero__kopf { padding-top: 80px; }
  h1 { font-size: var(--fs-1); line-height: 1; letter-spacing: -.003em; }
  .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; }

  .stile__raster { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: var(--kopf-inhalt); }
  .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; }
  .anhaenger__text { font-size: var(--fs-7); }
  .footer { padding: 32px 0 36px; }
  .footer__in { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .legal { padding-top: calc(var(--nav-h) + 40px); }
  .legal__blatt { padding: 40px 20px 32px; }
  .legal__liste > div { grid-template-columns: minmax(0, 1fr); }
}

/* Schmale Handys bis 429 px: die Sprechblase ist breiter, "Synergiepotenziale" liegt sonst auf der Kontur (D6).
   Werte --sl, --st, --sw stehen am Element in index.html. Rechte Kante bleibt bis 429 px im Bild. */
@media (max-width: 429px) {
  .blase { left: calc(var(--sl, var(--ml)) * var(--u)); top: calc(var(--st, var(--mt)) * var(--u)); width: calc(var(--sw, var(--mw)) * var(--u)); }
}
/* Unter 356 px reicht auch die breite Blase nicht: das Wort bricht an der Silbe (Synergie-potenziale), die Blase wird höher */
@media (max-width: 355px) {
  .blase { top: calc(116 * var(--u)); height: calc(146 * var(--u)); }
  .blase__text > span:first-child { max-width: 5.2em; }
}

/* Sehr schmal: ein Stil pro Zeile, Überschrift passt in 288 px */
@media (max-width: 389px) {
  h1 { font-size: min(48px, calc((100vw - 34px) / 7.1)); } /* 7,1 seit der fetteren H1 (15.10.2026), sonst bricht "Kauderwelsch" bei 320 bis 360 px */
  .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) */
  .stile__raster { grid-template-columns: minmax(0, 1fr); }
  .nav__cta { padding: 0 12px; }
}

/* 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; }
  .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); }
  .maschinen { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin-inline: auto; gap: 48px; }
  .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; }
  .stile__raster { margin-inline: auto; }
}
@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; }
  .maschinen { margin-top: 40px; }
  .maschine__werk { height: 92px; }
  .maschine__sieb { width: 68px; }
  .ablauf-karte__sticker { width: 84px; height: 84px; }
  .ablauf-karte__band { right: -6px; }
  .ablauf__fuss { margin-top: 56px; }
  .wolke { display: none; } /* am Handy lagen Reste an der Reißkante, und ohne Maus haben sie keine Aufgabe */
}

/* 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; }
}