/* ============================================================
   Listing-Roast LP — Look der A-Maze-Website (Ben-Kanon app-box-v3, test.a-maze.one v18)
   Tokens 1:1 aus amaze-website/site/styles.css (Stand 05.09.2026). Keine 3D-/Scroll-
   Choreografie — nur Farben, Typo, Karten, Pills, Bögen. Eigenes Stück dieser Seite:
   der Stufen-Schieber (Paper-Cutout-Köpfe + Wölkchen / Konfetti / Flammen).
   Fonts: Nunito Sans als variable WOFF2 (latin). Archivo/Hanken in fonts/fonts.css bleiben
   NUR für die gehosteten Reports (app.py rewrite_google_fonts) — hier nicht mehr geladen.
   ============================================================ */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("/assets/fonts/NunitoSans-var.woff2") format("woff2-variations"),
       url("/assets/fonts/NunitoSans-var.woff2") format("woff2");
}

:root {
  --cyan: #00a9ff;            /* Bens Flächen-Cyan */
  --cyan-deep: #0a7fb8;       /* Text-Cyan auf Weiß (AA-fest) */
  --cyan-soft: #e3f5fe;
  --orange: #ff7c00;
  --orange-deep: #d96800;
  --ink: #262624;             /* alle Schwarztöne */
  --black: #262624;
  --yellow: #ffb400;
  --red: #e03131;
  --paper: #ffffff;
  --paper-tint: #f4f4f4;
  --kraft: #d4a782;
  --kraft-deep: #b98d63;
  --line: rgba(16, 16, 16, .14);
  --muted: rgba(38, 38, 36, .7);
  --shadow-card: 0 10px 28px rgba(16, 16, 16, .13);
  --r-pill: 999px;
  --r-card: 14px;
  --font: "Nunito Sans", system-ui, -apple-system, sans-serif;
  --wrap: 1180px;
  /* Bens Typo-System: Illustrator-pt auf 1920er-Basis, responsive */
  --h2: clamp(50px, 4.69vw, 90px);
  --h3: clamp(36px, 3.13vw, 60px);
  --h4: clamp(30px, 2.5vw, 48px);
  --h5: clamp(24px, 1.88vw, 36px);
  --h6: clamp(19px, 1.25vw, 24px);
  --p1: clamp(18px, 1.09vw, 21px);
  --p2: clamp(16px, 0.94vw, 18px);
  --ls-h: -0.02em;
  --ls-p: -0.01em;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--p2);            /* P2 SemiBold = Fließtext (Ben) */
  font-weight: 600;
  letter-spacing: var(--ls-p);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
b, strong { font-weight: 800; }
img { max-width: 100%; height: auto; }
p { margin: 0 0 1em; }
a { color: var(--cyan-deep); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
::selection { background: var(--cyan); color: #fff; }
.band--dark ::selection, .faq-band ::selection { background: #fff; color: var(--ink); }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 99;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: var(--r-pill);
  transition: top .2s ease-out; text-decoration: none; font-weight: 700;
}
.skip-link:focus { top: 10px; }

/* ---------- Buttons: Pills (Ben). Hover = invertieren, Haupt-CTA auf Ink + Orange-Schrift ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: 800 var(--p1)/1.1 var(--font); letter-spacing: var(--ls-p);
  padding: 10px 40px; min-height: 44px; border-radius: var(--r-pill);
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: background-color .15s ease-out, color .15s ease-out, transform .15s ease-out;
}
.btn:active { transform: scale(.98); }
.btn--primary, .btn--roast { background: var(--orange); color: #fff; }
.btn--primary:hover, .btn--roast:hover { background: var(--ink); color: var(--orange); }
/* auf DUNKLEM Grund (Header/Footer) invertiert der orange Button zu Weiß + Orange-Schrift */
.site-header .btn--roast:hover, .site-footer .btn--primary:hover { background: #fff; color: var(--orange); }
.btn--sm { font-size: .9rem; padding: 10px 20px; }
.btn--lg { font-size: var(--p1); padding: 14px 40px; }
.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }
.btn--primary[disabled]:hover { background: var(--orange); color: #fff; }

/* ---------- Header (schwarz, sticky) ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--black); color: #fff; }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 20px; min-height: 64px;
}
.brandmark { display: inline-flex; padding: 6px 0; border-radius: 4px; }
.brandlogo { display: block; overflow: visible; }
/* Smile-Strich lächelt on hover breiter (wie auf der Website) */
.brandlogo__smile { transform-box: fill-box; transform-origin: 50% 12%; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.brandmark:hover .brandlogo__smile, .brandmark:focus-visible .brandlogo__smile { transform: scaleY(1.3); }
.mainnav { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }
.mainnav__link {
  color: #fff; text-decoration: none; font-weight: 700; font-size: 16px; line-height: 1;
  padding: 14px 0 12px; border-bottom: 2px solid transparent;
}
.mainnav__link:hover { border-bottom-color: var(--cyan); }

/* ---------- Sektionen + Bögen ---------- */
.band { position: relative; padding-block: clamp(56px, 8vw, 112px); }
.band--paper { background: var(--paper); }
.band--tint { background: var(--paper-tint); }
.band--dark { background: var(--ink); color: #fff; }
/* Cyan-Kreis wie auf der Roast-LP (Walter 19.09.: nicht schwarz/anthrazit) */
.band--cyan { background: var(--cyan); color: var(--ink); }
.band--cyan .section-h2 { color: var(--ink); }
.band--cyan ::selection { background: var(--ink); color: #fff; }
.band--cyan .drin__head { color: var(--ink); }
.band--cyan .drin__head span { color: rgba(38, 38, 36, .7); }
.band--cyan .drin li { color: var(--ink); }
.band--cyan .drin__note { color: rgba(38, 38, 36, .78); }
.arc.arc--cyan path { fill: var(--cyan); }
/* Gelb ist die Leck-Farbe (Walter 19.09.: Roast = Cyan, Leck = Gelb; Cyan nur Akzent) */
.band--yellow { background: var(--yellow); color: var(--ink); }
.band--yellow .section-h2 { color: var(--ink); }
.band--yellow ::selection { background: var(--ink); color: #fff; }
.arc.arc--yellow path { fill: var(--yellow); }
.arc--on-ink { background: var(--ink); }
.arc--on-kraft { background: var(--kraft) url("/assets/img/cardboard-1400.webp") center top / 100% auto repeat-y; }
/* Schwarz-gelbes Absperrband, 1:1 die Report-Optik (leckbilanz_v8 .sperrband) */
.sperrband { background: repeating-linear-gradient(45deg, var(--yellow) 0 16px, #1b1b1a 16px 32px); }
.sperrband--trenner { height: 22px; }
.arc--cyan { margin-top: -1px; }
/* Karton-Textur wie die FAQ der Website (feste Breite, Kachelung nach unten) */
.band--kraft { background: var(--kraft) url("/assets/img/cardboard-1400.webp") center top / 100% auto repeat-y; }
/* Kreisbögen (Bens Bogensprache): die dunkle Fläche wölbt sich in Vorgänger/Nachfolger.
   Zwickel = Farbe der Nachbarsektion; 1 px Überlappung gegen Haarlinien. */
.arc { line-height: 0; font-size: 0; position: relative; margin-bottom: -1px; }
.arc svg { display: block; width: 100%; height: auto; }
.arc path { fill: var(--ink); }
.arc--from-paper { background: var(--paper); }
.arc--to-tint { background: var(--paper-tint); }

.ix { font-size: var(--h5); font-weight: 900; letter-spacing: 0; margin: 0 0 .5em; }
.section-h2 {
  font-size: var(--h4); font-weight: 900; line-height: 1.04; letter-spacing: var(--ls-h);
  margin: 0 0 .7em; max-width: 21ch;
}
.lead { font-size: var(--p1); max-width: 56ch; }

/* ---------- Hero: Copy links, Sticker + Roast-Zitat rechts ---------- */
/* Unten knapp: die leere Kartonfläche unter Buddy und Zitat war zu groß (Walter 12.09.). */
.hero { padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(16px, 2.5vw, 36px); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero__h1 { font-size: var(--h3); font-weight: 900; line-height: 1.02; letter-spacing: var(--ls-h); margin: 0 0 .5em; }
.nowrap { white-space: nowrap; }   /* „Amazon-Listing." bricht auf dem Handy sonst am Bindestrich (Einzelwort-Zeile) */
.hero__cta { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); flex-wrap: wrap; margin-top: 1.4em; }
.hero__more { font-weight: 800; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--cyan); padding: 10px 0; }
.hero__more:hover { color: var(--cyan-deep); }
.hero__visual { position: relative; padding-bottom: 12%; }
/* Cyanes Oval hinter Buddy (Walter 12.09.): Karton auf Karton hat keinen Kontrast, und die ganze
   Figur samt Kopf soll drin stehen. Der Smile bleibt lesbar, er sitzt auf dem Kopfkarton, nicht
   auf dem Hintergrund. Das Oval ist der Inset-Kasten der Figur mit Rand, rund gerechnet: oben
   und seitlich Luft für Kopf und Arme, unten läuft es unter Zitat und Füße. */
.hero__visual::before {
  content: ""; position: absolute; z-index: 0; inset: -7% -9% -2% -9%;
  border-radius: 50%; background: var(--cyan);
}
/* Buddy als Freisteller direkt auf dem Karton: keine Karte, keine Rundung, die Figur ist
   die Form. Kontaktschatten unter den Füßen aus CSS, damit er auf dem Boden steht. */
.buddy { position: relative; z-index: 1; margin: 0 0 0 auto; width: 100%; }
/* Gespiegelt (Walter 12.09.): Zigarre zeigt zur Copy, der Mikroständer steht außen rechts. */
.buddy img { display: block; width: 100%; height: auto; transform: scaleX(-1); }
/* Hero auf Karton wie der Website-Kopf: Ink-Typo statt Muted, sonst säuft der Lead ab. */
.hero.band--kraft .ix, .hero.band--kraft .lead { color: var(--ink); }
.buddy::after {
  content: ""; position: absolute; z-index: -1; left: 20%; right: 10%; bottom: -1.2%; height: 5%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(16, 16, 16, .16) 0%, rgba(16, 16, 16, .05) 55%, rgba(16, 16, 16, 0) 72%);
}
/* Das Zitat hängt weiter in die Lücke unter der Copy, damit der Mikroständer frei bleibt. */
.roastquote {
  position: absolute; left: -14%; bottom: 0; z-index: 2; width: min(78%, 420px); margin: 0;
  background: var(--ink); color: #fff; border-radius: 20px;
  padding: clamp(20px, 2.2vw, 30px) clamp(22px, 2.4vw, 32px);
  box-shadow: 0 24px 60px rgba(16, 16, 16, .28);
  transform: rotate(-2deg);
}
.roastquote__setup { margin: 0 0 .45em; color: var(--cyan); font-weight: 800; font-size: .95rem; }
.roastquote__punch { margin: 0; font-size: clamp(18px, 1.35vw, 24px); font-weight: 900; line-height: 1.25; letter-spacing: var(--ls-h); }

/* ---------- Schritte (3 Spalten, Cyan-Titel wie der Website-Workflow) ---------- */
/* Der Karton-Hero endet mit einer sichtbaren Kante; „So funktioniert's" braucht Luft davor (Walter 12.09.). */
.steps-band { padding-top: clamp(64px, 8vw, 120px); }
.steps {
  list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; counter-reset: s;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.5vw, 56px);
}
.steps li { counter-increment: s; position: relative; padding-top: 60px; max-width: 40ch; }
.steps li::before {
  content: counter(s); position: absolute; top: 0; left: 0;
  width: 44px; height: 44px; border-radius: 50%; background: var(--cyan); color: #fff;
  font-weight: 900; font-size: 1.15rem; display: grid; place-items: center;
}
.steps b { display: block; font-size: var(--h6); font-weight: 900; line-height: 1.15; letter-spacing: var(--ls-h); color: var(--cyan-deep); margin-bottom: .45em; }

/* ---------- Befund-Beispiel (dunkle Sektion, weiße Befund-Karte mit Terminal-Zitat) ---------- */
.befund-band { padding-top: clamp(20px, 2.5vw, 40px); }
.befund-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.band--dark .section-h2 { color: #fff; }
.befund-note { color: rgba(255, 255, 255, .88); max-width: 46ch; }
.befund { background: #fff; color: var(--ink); border-radius: var(--r-card); overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.befund__bar {
  display: flex; align-items: center; gap: .6em; padding: .7em 1.1em;
  background: var(--paper-tint); border-bottom: 1px solid var(--line); font-size: .85rem; font-weight: 700;
}
.befund__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); flex: none; }
.befund__tag {
  margin-left: auto; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--ink); color: #fff; padding: .25em .75em; border-radius: 4px;
}
.befund__quote {
  margin: 0; padding: 16px 18px 16px 16px; background: #1b1b1a; color: #fff; border-left: 4px solid var(--cyan);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .86rem; line-height: 1.7; font-weight: 400;
}
.befund__body { padding: 20px 22px 22px; }
.befund__punch { margin: 0 0 .6em; font-size: var(--h6); font-weight: 900; line-height: 1.25; letter-spacing: var(--ls-h); }
.befund__tagline { margin: 0 0 1em; font-style: italic; color: var(--muted); }
.befund__body p:last-child { margin-bottom: 0; }

/* ---------- Formular (weiße Karte flach auf Grau) ---------- */
.form-band { padding-top: clamp(28px, 3.5vw, 56px); }
.card { background: #fff; border-radius: 16px; }
.roast { padding: clamp(24px, 3vw, 44px); display: grid; gap: clamp(22px, 2.6vw, 34px); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field label, .lvl__legend { display: block; font-weight: 800; font-size: .95rem; margin: 0 0 8px; padding: 0; }
.field input {
  width: 100%; min-height: 52px; padding: 12px 16px;
  font: 600 var(--p2)/1.3 var(--font); letter-spacing: var(--ls-p); color: var(--ink);
  background: #fff; border: 2px solid rgba(38, 38, 36, .22); border-radius: 12px;
  transition: border-color .15s ease-out;
}
.field input::placeholder { color: rgba(38, 38, 36, .5); }
.field input:hover { border-color: rgba(38, 38, 36, .45); }
.field input:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-color: var(--cyan); }
.checks { display: grid; gap: 6px; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
.check input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--cyan); cursor: pointer; }
.check label { margin: 0; font-weight: 600; font-size: .95rem; cursor: pointer; }
.check.optional label { color: var(--muted); }
.turnstile-slot { min-height: 66px; }
.submit-btn { display: flex; width: 100%; }
.form-note { margin: 14px 0 0; font-size: .85rem; color: var(--muted); }
.form-note a { color: var(--cyan-deep); font-weight: 700; }
.hp { position: absolute; left: -9999px; top: -9999px; }

/* ---------- Stufen-Schieber ----------
   Die Radios (name=roast_level, Werte mild/normal/vollbrand) bleiben das echte Formularfeld —
   Tastatur, Screenreader und No-JS laufen darüber. Optik: Track + Thumb + drei Stops, dazu
   der Paper-Cutout-Kopf zur Stufe. Zustand über :has() (ohne JS) UND data-level (JS setzt es
   für Browser ohne :has). Deko am Thumb: Wölkchen (mild) · Konfetti (normal) · Flammen (vollbrand). */
.lvl { border: 0; padding: 0; margin: 0; min-width: 0; }
.lvl__grid { display: grid; grid-template-columns: minmax(200px, 320px) 1fr; gap: clamp(20px, 3vw, 44px); align-items: center; }
.lvl__figure {
  position: relative; margin: 0; aspect-ratio: 1; border-radius: var(--r-card); overflow: hidden;
  background: #f3ead8; box-shadow: var(--shadow-card);
}
.lvl__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04);
  transition: opacity .45s ease-out, transform .45s ease-out;
}
.lvl__ctl { --lc: var(--orange); --pos: 50%; --k: .5; min-width: 0; }
.lvl__slider { position: relative; padding-top: 116px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.lvl__track { position: relative; height: 8px; margin: 0 calc(100% / 6); border-radius: var(--r-pill); background: rgba(38, 38, 36, .12); }
/* Füllung skaliert per transform (kein Layout-Property in der Animation) */
.lvl__fill {
  position: absolute; inset: 0; border-radius: inherit; background: var(--lc);
  transform-origin: 0 50%; transform: scaleX(var(--k));
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), background-color .3s ease-out;
}
/* Tastatur-Fokus liegt auf der gewählten Radio — deren Punkt sitzt unterm Thumb, also Ring auf den Thumb */
.lvl__ctl.is-focus .lvl__thumb, .lvl:has(input:focus-visible) .lvl__thumb { outline: 3px solid var(--cyan); outline-offset: 3px; }
.lvl__thumb {
  position: absolute; top: 50%; left: var(--pos); z-index: 3;
  width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: #fff; border: 4px solid var(--lc); box-shadow: 0 6px 16px rgba(16, 16, 16, .22);
  cursor: grab;
  transition: left .4s cubic-bezier(.2, .8, .2, 1), border-color .3s ease-out;
}
.lvl__slider.is-dragging .lvl__thumb { cursor: grabbing; transition: border-color .3s ease-out; }
.lvl__slider.is-dragging .lvl__fill { transition: background-color .3s ease-out; }
.lvl__stops { display: flex; margin-top: -13px; position: relative; z-index: 2; }
.lvl__stop { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; padding-bottom: 6px; min-width: 0; }
.lvl__dot { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid rgba(38, 38, 36, .3); transition: border-color .2s ease-out, transform .2s ease-out; }
.lvl__stop:hover .lvl__dot { border-color: var(--ink); transform: scale(1.12); }
.lvl__stop input:checked + .lvl__dot { border-color: var(--lc); background: var(--lc); }
.lvl__stop input:focus-visible + .lvl__dot { outline: 3px solid var(--cyan); outline-offset: 3px; }
.lvl__stoplabel { font-size: .82rem; font-weight: 800; color: var(--muted); text-align: center; }
.lvl__stop input:checked ~ .lvl__stoplabel { color: var(--ink); }
.lvl__meta { margin-top: 14px; min-height: 4.4em; }
.lvl__meta > div { display: none; }
.lvl__name { margin: 0; font-size: var(--h6); font-weight: 900; letter-spacing: var(--ls-h); line-height: 1.15; }
.lvl__desc { margin: .3em 0 0; }

/* Zustand per data-level (JS) */
.lvl[data-level="mild"] .lvl__ctl { --lc: var(--cyan); --pos: 0%; --k: 0; }
.lvl[data-level="normal"] .lvl__ctl { --lc: var(--orange); --pos: 50%; --k: .5; }
.lvl[data-level="vollbrand"] .lvl__ctl { --lc: var(--red); --pos: 100%; --k: 1; }
.lvl[data-level="mild"] .lvl__img[data-lvl="mild"],
.lvl[data-level="normal"] .lvl__img[data-lvl="normal"],
.lvl[data-level="vollbrand"] .lvl__img[data-lvl="vollbrand"] { opacity: 1; transform: none; }
.lvl[data-level="mild"] .lvl__meta [data-lvl="mild"],
.lvl[data-level="normal"] .lvl__meta [data-lvl="normal"],
.lvl[data-level="vollbrand"] .lvl__meta [data-lvl="vollbrand"] { display: block; }
.lvl[data-level="mild"] .deco[data-lvl="mild"],
.lvl[data-level="normal"] .deco[data-lvl="normal"],
.lvl[data-level="vollbrand"] .deco[data-lvl="vollbrand"] { display: block; }
/* Zustand per :has() (ohne JS) — eigene Regeln, damit Browser ohne :has die data-level-Regeln behalten */
.lvl:has(#lvl-mild:checked) .lvl__ctl { --lc: var(--cyan); --pos: 0%; --k: 0; }
.lvl:has(#lvl-normal:checked) .lvl__ctl { --lc: var(--orange); --pos: 50%; --k: .5; }
.lvl:has(#lvl-vollbrand:checked) .lvl__ctl { --lc: var(--red); --pos: 100%; --k: 1; }
/* Reset schlägt die data-level-Regeln (Spezifität über [data-lvl]) — sonst zeigt ein Browser ohne JS
   den hart gesetzten Startwert UND die per Radio gewählte Stufe gleichzeitig */
.lvl:has(input:checked) .lvl__img[data-lvl] { opacity: 0; transform: scale(1.04); }
.lvl:has(input:checked) .lvl__meta > div[data-lvl], .lvl:has(input:checked) .deco[data-lvl] { display: none; }
.lvl:has(#lvl-mild:checked) .lvl__img[data-lvl="mild"],
.lvl:has(#lvl-normal:checked) .lvl__img[data-lvl="normal"],
.lvl:has(#lvl-vollbrand:checked) .lvl__img[data-lvl="vollbrand"] { opacity: 1; transform: none; }
.lvl:has(#lvl-mild:checked) .lvl__meta [data-lvl="mild"],
.lvl:has(#lvl-normal:checked) .lvl__meta [data-lvl="normal"],
.lvl:has(#lvl-vollbrand:checked) .lvl__meta [data-lvl="vollbrand"] { display: block; opacity: 1; }
.lvl:has(#lvl-mild:checked) .deco[data-lvl="mild"],
.lvl:has(#lvl-normal:checked) .deco[data-lvl="normal"],
.lvl:has(#lvl-vollbrand:checked) .deco[data-lvl="vollbrand"] { display: block; opacity: 1; }

/* Deko am Thumb — Papier-Formen: flache Flächen, versetzte Schattenlage, keine Verläufe */
.deco { position: absolute; display: none; pointer-events: none; left: 50%; }
.deco--cloud { bottom: calc(100% + 4px); width: 98px; transform: translateX(-50%); animation: deco-in .45s ease-out both; }
.deco--cloud svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .14)); animation: cloud-drift 6s ease-in-out .45s infinite; }
@keyframes deco-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.7); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes cloud-drift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(5px, -4px); }
}
.deco--confetti { top: 50%; width: 0; height: 0; }
.confetti {
  position: absolute; left: 0; top: 0; width: 10px; height: 14px; margin: -7px 0 0 -5px; border-radius: 2px;
  background: var(--c, var(--cyan)); filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .16));
  transform: translate(var(--x), var(--y)) rotate(var(--r));
  animation: pop .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both;
}
.confetti--dot { width: 9px; height: 9px; border-radius: 50%; margin: -4px 0 0 -4px; }
.confetti--tri {
  width: 0; height: 0; background: none; border-radius: 0; margin: -6px 0 0 -6px;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid var(--c, var(--yellow));
}
@keyframes pop {
  from { transform: translate(0, 0) rotate(0deg) scale(.2); opacity: 0; }
  35%  { opacity: 1; }
  to   { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); opacity: 1; }
}
.deco--flames { bottom: 46%; width: 84px; transform: translateX(-50%); animation: deco-in .35s ease-out both; }
.deco--flames svg { display: block; width: 100%; height: auto; overflow: visible; }
.flame { transform-box: fill-box; transform-origin: 50% 100%; filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .2)); animation: flick var(--t, 1s) ease-in-out infinite alternate; }
@keyframes flick {
  from { transform: scaleY(1) skewX(0deg); }
  to   { transform: scaleY(1.1) scaleX(.96) skewX(-3deg); }
}
.ember { transform-box: fill-box; transform-origin: 50% 50%; animation: ember 2.2s ease-out var(--d, 0s) infinite; }
@keyframes ember {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateY(-38px) scale(.4); opacity: 0; }
}

/* ---------- FAQ (Karton-Textur, schwarze Reiter, cyanes Plus — wie die Website) ---------- */
.faq-band .section-h2 { color: var(--cyan); }
.faq { display: grid; gap: 12px; max-width: 760px; }
.faq details { background: var(--ink); color: #fff; border-radius: 12px; box-shadow: var(--shadow-card); }
.faq summary {
  cursor: pointer; font-size: var(--h6); font-weight: 900; letter-spacing: var(--ls-h); line-height: 1.2;
  padding: 16px 52px 16px 20px; border-radius: 12px; list-style: none; position: relative; color: var(--cyan);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: #fff; }
.faq summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
/* Plus aus zwei Strichen — beim Öffnen dreht der vertikale zum Minus */
.faq summary::before, .faq summary::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 14px; height: 2.5px; border-radius: 2px;
  background: var(--cyan); transform: translateY(-50%);
}
.faq summary::after { transform: translateY(-50%) rotate(90deg); transition: transform .3s ease-out; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(0deg); }
.faq__body { padding: 0 20px 18px; }
.faq__body p { margin: 0; color: #fff; }

/* ---------- Zustandsseiten + Rechtstexte ---------- */
.state-band { min-height: 60vh; display: flex; align-items: center; }
.state-box { background: #fff; border-radius: 16px; padding: clamp(28px, 3.4vw, 48px); max-width: 720px; box-shadow: var(--shadow-card); }
.state-box h1 { font-size: var(--h4); font-weight: 900; line-height: 1.05; letter-spacing: var(--ls-h); margin: 0 0 .5em; }
.state-box p { font-size: var(--p1); }
.state-box p:last-child { margin-bottom: 0; }
.state-box .btn { margin-top: .6em; }
.legal h1 { font-size: var(--h3); font-weight: 900; line-height: 1.05; letter-spacing: var(--ls-h); margin: 0 0 .6em; }
.legal-body { max-width: 72ch; }
.legal-body h2 { font-size: var(--h6); font-weight: 900; letter-spacing: var(--ls-h); margin: 1.8em 0 .5em; }
.legal-body p, .legal-body li { font-weight: 500; }
.legal-body ul { padding-left: 1.2em; }
.legal-body a { color: var(--cyan-deep); font-weight: 700; }

/* ---------- Danke-Seite (Ziel nach dem Absenden; Hero-Aufbau der LP, Schritte als Fortschritt) ---------- */
.danke__hint { color: var(--muted); max-width: 56ch; margin-top: 1.2em; }
.danke__hint a { font-weight: 700; }
/* erledigt = Haken auf Ink (gedämpft), jetzt = Orange-Kreis, offen = Ring */
.steps--progress .is-done, .steps--progress .is-done b { color: var(--muted); }
.steps--progress .is-done::before { content: "✓"; background: var(--ink); }
.steps--progress .is-now::before { background: var(--orange); }
.steps--progress .is-now b { color: var(--ink); }
.steps--progress li:not(.is-done):not(.is-now)::before { background: #fff; color: var(--ink); border: 3px solid rgba(38, 38, 36, .3); }

/* ---------- Leck-Bilanz (LP, Danke, Upload) — Stufe 2 = Gelb (Website-Progression Cyan→Gelb→Orange) ---------- */
.btn--pillyellow { background: var(--yellow); color: var(--ink); }
.btn--pillyellow:hover { background: #e0a000; color: var(--ink); }
.site-header .btn--pillyellow:hover { background: #fff; color: var(--ink); }
.btn--pillyellow[disabled]:hover { background: var(--yellow); color: var(--ink); }
.testflag {
  position: fixed; top: 72px; right: 0; z-index: 41; margin: 0;
  background: var(--orange); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .02em;
  padding: .45em 1em; border-radius: 12px 0 0 12px;
}
.hero__fine { margin: 1.3em 0 0; font-size: .9rem; font-weight: 700; color: var(--muted); max-width: 56ch; }
/* Hero-Visual: Karton-Karte (Textur der Website-FAQ) mit Paketband, darüber die Beleg-Karte */
.kraftcard {
  position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 1;
  background: var(--kraft) url("/assets/img/cardboard-1400.webp") center / cover;
  box-shadow: var(--shadow-card);
  /* Inhalt im oberen Drittel — die Beleg-/Ink-Karte überlappt unten links (wie der Roast-Sticker) */
  display: grid; place-items: center; align-content: start; gap: 12px; padding: 19% 24px 28px;
}
.tape {
  position: absolute; top: 22px; left: -6%; right: -6%; height: 34px;
  background: var(--ink) url("/assets/img/parcel_tape_background.svg") center / auto 100% repeat-x;
  transform: rotate(-2deg); box-shadow: 0 4px 10px rgba(16, 16, 16, .22);
}
.leakicon { width: clamp(96px, 12vw, 150px); height: auto; }
.kraftcard__label { margin: 0; font-size: var(--h6); font-weight: 900; letter-spacing: var(--ls-h); color: var(--ink); text-align: center; }
.beleg {
  position: absolute; left: -6%; bottom: 0; z-index: 2; width: min(86%, 460px);
  background: #fff; color: var(--ink); border-radius: var(--r-card); overflow: hidden;
  box-shadow: 0 24px 60px rgba(16, 16, 16, .28); transform: rotate(-2deg);
}
.beleg__bar {
  display: flex; align-items: center; gap: .6em; padding: .7em 1.1em;
  background: var(--paper-tint); border-bottom: 1px solid var(--line); font-size: .85rem; font-weight: 700;
}
.beleg__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); flex: none; }
.beleg__tag {
  margin-left: auto; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--ink); color: #fff; padding: .25em .75em; border-radius: 4px;
}
.beleg__line {
  margin: 0; padding: 14px 16px; background: #1b1b1a; color: #fff; border-left: 4px solid var(--yellow);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .84rem; line-height: 1.6; font-weight: 400;
}
.beleg__body { padding: 18px 20px 20px; }
.beleg__punch { margin: 0 0 .5em; font-size: var(--h6); font-weight: 900; line-height: 1.25; letter-spacing: var(--ls-h); }
.beleg__formula { margin: 0; font-size: .85rem; color: var(--muted); }
/* Was drinsteht: zwei Spalten auf Ink, Garantie-Karte weiß */
.drin-band { padding-top: clamp(20px, 2.5vw, 40px); }
.drin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.drin__head { margin: 0 0 .6em; font-size: var(--h6); font-weight: 900; letter-spacing: var(--ls-h); color: var(--cyan); }
.drin__head span { display: block; margin-top: .2em; font-size: .9rem; font-weight: 700; letter-spacing: 0; color: rgba(255, 255, 255, .7); }
.drin ul { margin: 0; padding-left: 1.1em; display: grid; gap: .55em; }
.drin li { color: #fff; max-width: 48ch; }
.drin__note { margin: 1.1em 0 0; color: rgba(255, 255, 255, .75); font-size: .95rem; max-width: 48ch; }
.garantie {
  position: relative; margin-top: clamp(32px, 4vw, 56px); max-width: 780px;
  background: #fff; color: var(--ink); border-radius: var(--r-card); padding: clamp(24px, 3vw, 36px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.garantie__flag, .summary__flag {
  position: absolute; top: 0; right: 0; margin: 0;
  background: var(--yellow); color: var(--ink); font-size: .72rem; font-weight: 800; letter-spacing: .02em;
  padding: .45em 1.1em; border-radius: 0 var(--r-card) 0 12px;
}
.garantie__title { margin: .4em 0 .5em; font-size: var(--h6); font-weight: 900; line-height: 1.2; letter-spacing: var(--ls-h); max-width: 24ch; }
.garantie p:last-child { margin: 0; font-size: var(--p2); max-width: 62ch; }
/* Bestellen: Formular links, Übersicht rechts */
.order { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(20px, 3vw, 36px); align-items: start; }
.orderform { padding: clamp(24px, 3vw, 44px); display: grid; gap: 18px; }
.orderform__group { margin: 6px 0 -6px; font-size: .76rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.field-row--plz { grid-template-columns: minmax(110px, .4fr) 1fr; }
.field label small { display: block; font-weight: 600; color: var(--muted); font-size: .82rem; margin-top: 2px; }
.field select {
  width: 100%; min-height: 52px; padding: 12px 40px 12px 16px;
  font: 600 var(--p2)/1.3 var(--font); letter-spacing: var(--ls-p); color: var(--ink);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%23262624' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") right 16px center / 16px 10px no-repeat;
  border: 2px solid rgba(38, 38, 36, .22); border-radius: 12px; appearance: none; -webkit-appearance: none; cursor: pointer;
  transition: border-color .15s ease-out;
}
.field select:hover { border-color: rgba(38, 38, 36, .45); }
.field select:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-color: var(--cyan); }
.check label a { color: var(--cyan-deep); font-weight: 700; }
.summary { position: relative; overflow: hidden; padding: clamp(22px, 3vw, 32px); display: grid; gap: 14px; }
.summary__title { margin: .5em 0 0; font-size: var(--h6); font-weight: 900; letter-spacing: var(--ls-h); }
.summary__rows { margin: 0; display: grid; gap: .45em; }
.summary__row { display: flex; justify-content: space-between; gap: 16px; }
.summary__row dt { margin: 0; font-weight: 600; }
.summary__row dd { margin: 0; font-weight: 800; white-space: nowrap; }
.summary__total { border-top: 1px solid var(--line); padding-top: .6em; font-size: var(--p1); }
.summary__total dt, .summary__total dd { font-weight: 900; }
.summary__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; font-size: .92rem; }
.summary__facts li { padding-left: 1.5em; position: relative; }
.summary__facts li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--cyan-deep); font-weight: 900; }
.summary__note { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
@media (max-width: 900px) {
  .drin-grid, .order { grid-template-columns: 1fr; }
  .beleg { position: relative; left: 0; width: auto; margin: -28px 6% 0; transform: rotate(-1deg); }
  .testflag { top: 64px; }
}
@media (max-width: 599px) {
  .orderform { padding: 20px 16px; }
  .field-row--plz { grid-template-columns: 1fr; }
}

/* ---------- Footer (schwarz, Aufbau wie die Website) ---------- */
.site-footer { background: var(--black); color: #fff; padding-block: clamp(48px, 6vw, 80px); }
.site-footer__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px, 5vw, 90px); align-items: start; }
.site-footer__col { display: grid; gap: 14px; justify-items: start; }
.site-footer__logo { display: block; }
.site-footer__line { margin: 0; font-weight: 700; }
.site-footer__address { margin: -6px 0 0; color: rgba(255, 255, 255, .72); font-weight: 600; font-size: .92rem; }
.site-footer__note { margin: 0; color: rgba(255, 255, 255, .72); font-size: .92rem; max-width: 46ch; }
.site-footer__copy { margin: 0; color: rgba(255, 255, 255, .6); font-size: .85rem; }
.site-footer__col--right { display: grid; grid-template-columns: repeat(2, max-content); gap: 0 clamp(40px, 6vw, 100px); align-content: start; }
.site-footer__navcol { display: grid; gap: 4px; align-content: start; }
.site-footer__head { margin: 0 0 4px; font-size: var(--p2); font-weight: 900; line-height: 1.2; }
.site-footer__navcol .site-footer__head:not(:first-child) { margin-top: 20px; }
.site-footer__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.site-footer__nav a { display: inline-flex; align-items: center; min-height: 40px; color: #fff; text-decoration: none; font-weight: 600; border-bottom: 2px solid transparent; }
.site-footer__nav a:hover { border-bottom-color: var(--cyan); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { max-width: 520px; margin-top: 20px; padding-bottom: 7%; }   /* Luft fürs Oval über dem Kopf und unter den Füßen */
  .roastquote { position: relative; left: 0; width: auto; margin: -28px 6% 0; transform: rotate(-1deg); }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .befund-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .lvl__grid { grid-template-columns: 1fr; }
  .lvl__figure { max-width: 320px; }
  .site-footer__grid { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .mainnav__link { display: none; }
  .site-footer__col--right { grid-template-columns: 1fr; gap: 24px; }
  .roast { padding: 20px 16px; }
  .lvl__track { margin: 0 calc(100% / 6); }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .deco, .deco svg, .flame, .ember, .confetti { animation: none !important; }
  .ember { opacity: 0; }
  .lvl__thumb, .lvl__fill, .lvl__img, .lvl__dot, .brandlogo__smile { transition: none !important; }
}