/* SchutzKompass 6 in 1 – Richtung „Playful / Toy-like“: Sticker-Karten, dicke Ränder, harte Schatten. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* Farben aus dem Anzeigenmotiv: Grün dominiert, Gold ist Akzent, Navy ist Tinte, Rot nur für den Bonus */
  --paper: oklch(96.5% 0.035 88);
  --paper-2: oklch(92.5% 0.055 88);
  --card: oklch(99.2% 0.012 90);
  --ink: oklch(24% 0.075 265);
  --ink-lo: oklch(38% 0.05 265);
  --green: oklch(55% 0.15 145);
  --green-hi: oklch(63% 0.15 140);
  --green-deep: oklch(38% 0.1 150);
  --green-deep-hi: oklch(44% 0.11 150);
  --gold: oklch(82% 0.16 85);
  --gold-deep: oklch(66% 0.14 70);
  --red: oklch(44% 0.16 27);
  --red-hi: oklch(55% 0.19 27);
  --sky: oklch(88% 0.05 225);
  --t-green: oklch(92% 0.06 140);
  --t-gold: oklch(93% 0.08 90);
  --t-sky: oklch(93% 0.035 225);
  --focus: var(--ink);

  --line: 3px solid var(--ink);
  --pop-sm: 0 4px 0 var(--ink);
  --pop: 0 6px 0 var(--ink);
  --pop-lg: 0 10px 0 var(--ink);

  --font-display: "Archivo", "Arial Black", sans-serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem);
  --text-xl: clamp(1.3rem, 1.15rem + 0.8vw, 1.75rem);
  --text-2xl: clamp(1.6rem, 1.3rem + 1.5vw, 2.4rem);
  --text-3xl: clamp(2.2rem, 1.6rem + 3vw, 3.75rem);

  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --space-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --container: min(72rem, 100% - 2.5rem);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-micro: 180ms;
  --dur-ui: 350ms;
  --dur-reveal: 750ms;
}

*, *::before, *::after { box-sizing: border-box; }
/* Komponenten setzen display: grid/flex – das darf das hidden-Attribut nie überstimmen */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(oklch(86% 0.06 85 / 0.55) 1.2px, transparent 1.6px);
  background-size: 22px 22px;
}
img, svg { display: block; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 6px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 60;
  padding: 0.6rem 1rem; background: var(--gold); border: var(--line); border-radius: 999px;
  font: 800 var(--text-sm) var(--font-display); text-decoration: none;
}
.skip-link:focus { top: 1rem; }
.wrap { width: var(--container); margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  min-height: 3.4rem; padding: 0.4rem 0.45rem 0.4rem 1.4rem;
  border: var(--line); border-radius: 999px;
  background: var(--green-deep); color: #fff;
  font: 800 1.05rem/1.1 var(--font-display); letter-spacing: -0.01em; text-decoration: none;
  box-shadow: var(--pop); cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-spring), box-shadow var(--dur-micro) var(--ease-out-expo), background-color var(--dur-micro) var(--ease-out-expo);
}
.btn:hover { background: var(--green-deep-hi); transform: translateY(-2px); box-shadow: 0 8px 0 var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.btn-ico {
  flex: none; display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--gold); color: var(--ink); border: 2.5px solid var(--ink);
  transition: transform var(--dur-ui) var(--ease-spring);
}
.btn-ico svg { width: 1.2rem; height: 1.2rem; }
.btn:hover .btn-ico { transform: translate(3px, -2px) rotate(-10deg) scale(1.08); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: oklch(86% 0.15 88); }
.btn-gold .btn-ico { background: var(--card); }
.btn-sm { min-height: 2.9rem; padding-left: 1.1rem; font-size: 0.95rem; box-shadow: var(--pop-sm); }
.btn-sm .btn-ico { width: 2.1rem; height: 2.1rem; }

.text-link, .link-btn {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 800 var(--text-sm) var(--font-display); color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: 5px;
  text-decoration-color: var(--gold-deep);
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: text-underline-offset var(--dur-micro) var(--ease-out-expo), text-decoration-color var(--dur-micro) var(--ease-out-expo);
}
.text-link:hover, .link-btn:hover { text-underline-offset: 8px; text-decoration-color: var(--ink); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.9rem; background: var(--card);
  border: 2.5px solid var(--ink); border-radius: 999px;
  font: 800 0.72rem/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--green); border: 2px solid var(--ink); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0.75rem; z-index: 40; padding-top: 0.75rem; }
.nav-pill {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.45rem 0.45rem 0.45rem 0.9rem;
  background: oklch(99% 0.012 90 / 0.88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: var(--line); border-radius: 999px; box-shadow: var(--pop-sm);
}
.brand { display: inline-flex; align-items: center; gap: 0.55rem; font: 900 1.15rem/1 var(--font-display); letter-spacing: -0.02em; text-decoration: none; color: var(--ink); }
.brand svg { width: 2.1rem; height: 2.1rem; transition: transform var(--dur-ui) var(--ease-spring); }
.brand:hover svg { transform: rotate(-25deg); }
.nav-links { display: none; gap: 0.25rem; }
.nav-links a { padding: 0.55rem 0.8rem; border-radius: 999px; font: 700 0.92rem var(--font-body); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out-expo); }
.nav-links a:hover { background: var(--paper-2); }
@media (min-width: 860px) { .nav-links { display: flex; } }
@media (max-width: 420px) { .brand span { display: none; } }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) var(--space-section); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(3rem, 2rem + 3vw, 4rem); }
.hero-grid > * { min-width: 0; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: 0.95fr 1.05fr; align-items: center; } }

.hero-title { margin-top: 1.4rem; font-family: var(--font-display); font-weight: 900; line-height: 0.82; letter-spacing: -0.045em; }
.big { display: inline-block; font-size: clamp(6rem, 3rem + 11vw, 10.5rem); animation: pop 700ms var(--ease-spring) both; }
.big-6 { color: var(--green); text-shadow: 0 0.035em 0 var(--green-deep), 0 0.07em 0 var(--ink); rotate: -5deg; }
.big-in { color: var(--ink); font-size: clamp(3.6rem, 2rem + 6vw, 6.5rem); margin-inline: 0.12em 0.08em; animation-delay: 120ms; }
.big-1 { color: var(--gold); text-shadow: 0 0.035em 0 var(--gold-deep), 0 0.07em 0 var(--ink); rotate: 6deg; animation-delay: 240ms; }
.hero-sub { display: block; margin-top: 0.3em; font-size: clamp(2.3rem, 1.4rem + 3.6vw, 3.9rem); line-height: 1; letter-spacing: -0.035em; }
.hl { background: linear-gradient(transparent 58%, var(--gold) 58% 92%, transparent 92%); padding-inline: 0.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero-lead { max-width: 34rem; margin-top: 1.5rem; font-size: var(--text-lg); color: var(--ink-lo); }

.sb-sticker {
  display: inline-flex; align-items: center; gap: 0.8rem; margin-top: 1.6rem;
  padding: 0.55rem 1.2rem 0.55rem 0.6rem;
  background: var(--card); border: var(--line); border-radius: 1.25rem; box-shadow: var(--pop-sm);
  rotate: -2deg;
}
.sb-sticker svg { width: 2.8rem; height: 2.8rem; }
.sb-sticker strong { display: block; font: 900 var(--text-lg)/1.1 var(--font-display); letter-spacing: -0.01em; }
.sb-sticker span { font-size: var(--text-sm); color: var(--ink-lo); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 2rem; }
.micro { margin-top: 0.9rem; font-size: var(--text-sm); color: var(--ink-lo); }

/* ---------- Spiel: Pack deinen SchutzKompass ---------- */
.pack {
  position: relative;
  width: 100%; max-width: 38rem; justify-self: center; /* einspaltig (Tablet) sonst riesige Kacheln */
  padding: clamp(1rem, 0.6rem + 1.5vw, 1.75rem);
  background: var(--card); border: var(--line); border-radius: 2rem; box-shadow: var(--pop-lg);
}
.pack-tag {
  position: absolute; top: -1.05rem; left: 1.5rem; rotate: -5deg;
  padding: 0.35rem 0.9rem; background: var(--gold); border: var(--line); border-radius: 999px;
  font: 900 0.85rem/1 var(--font-display); box-shadow: var(--pop-sm);
}
.pack-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block: 0.4rem 1rem; }
.pack-head h2 { font: 900 var(--text-xl)/1.05 var(--font-display); letter-spacing: -0.025em; }
.counter { flex: none; padding: 0.4rem 0.85rem; background: var(--paper-2); border: 2.5px solid var(--ink); border-radius: 999px; font: 800 var(--text-sm)/1 var(--font-display); white-space: nowrap; }
.counter b { font-size: 1.2em; color: var(--green-deep); }
.pack-label { margin-bottom: 0.55rem; font: 800 0.7rem/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-lo); }

.grid6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.5rem, 0.25rem + 1vw, 0.85rem); }
.home, .slot { position: relative; aspect-ratio: 1 / 0.8; border-radius: 1.1rem; }
.home:empty { outline: 2.5px dashed oklch(72% 0.05 85); outline-offset: -2.5px; }
.box { position: relative; margin-top: 1rem; padding: 0.85rem; background: var(--ink); border: var(--line); border-radius: 1.5rem; }
.box .pack-label { color: oklch(86% 0.07 88); }
.slot { display: grid; place-items: center; border: 2.5px dashed oklch(82% 0.13 85 / 0.6); }
.slot::before { content: attr(data-num); font: 900 1.7rem/1 var(--font-display); color: oklch(82% 0.13 85 / 0.55); }

.tile {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  padding: 0.5rem 0.3rem 0.35rem;
  background: var(--card); color: var(--ink);
  border: var(--line); border-radius: 1.1rem; box-shadow: 0 5px 0 var(--ink);
  font: 800 clamp(0.66rem, 0.52rem + 0.45vw, 0.88rem)/1.1 var(--font-display);
  text-align: center; hyphens: manual; cursor: pointer;
  rotate: var(--r, 0deg);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-micro) var(--ease-spring), box-shadow var(--dur-micro) var(--ease-out-expo), rotate var(--dur-ui) var(--ease-spring);
}
.tile svg { width: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); height: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); }
.tile:hover { transform: translateY(-3px) scale(1.04); }
.tile:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.tile.is-flying { z-index: 10; }
.slot .tile { rotate: 0deg; box-shadow: 0 4px 0 oklch(14% 0.05 265); }
.t-green { background: var(--t-green); }
.t-gold { background: var(--t-gold); }
.t-sky { background: var(--t-sky); }
.tile-num {
  position: absolute; top: 0.3rem; left: 0.35rem;
  display: grid; place-items: center; width: 1.3rem; height: 1.3rem;
  background: var(--green-deep); color: #fff; border: 2px solid var(--ink); border-radius: 50%;
  font: 900 0.68rem/1 var(--font-display);
}

.stamp {
  position: absolute; right: -1.1rem; top: -1.6rem; z-index: 5;
  display: grid; place-content: center; width: 6.4rem; height: 6.4rem; text-align: center;
  background: var(--gold); border: var(--line); border-radius: 50%; box-shadow: var(--pop-sm);
  font: 900 1.3rem/0.95 var(--font-display); letter-spacing: -0.03em;
  scale: 0; rotate: -40deg;
  transition: scale 560ms var(--ease-spring), rotate 560ms var(--ease-spring);
}
.stamp small { font-size: 0.72rem; letter-spacing: 0.02em; }
.box.is-full .stamp { scale: 1; rotate: 12deg; }

.pack-info { min-height: 3.3em; margin-top: 1rem; font-size: var(--text-sm); }
.pack-info strong { font-family: var(--font-display); font-weight: 900; }
.pack-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }

.confetti { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.confetti i {
  position: absolute; left: 50%; top: 45%; width: 0.6rem; height: 0.9rem;
  border: 2px solid var(--ink); border-radius: 2px;
  animation: confetti 1100ms var(--ease-out-expo) forwards;
}

/* ---------- Sektionen allgemein ---------- */
.section { padding-block: var(--space-section); }
.section-tight { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) var(--space-section); }
.section-head { display: grid; gap: 1.2rem; margin-bottom: var(--space-block); }
@media (min-width: 860px) { .section-head { grid-template-columns: 1.15fr 0.85fr; align-items: end; } }
.title { margin-top: 0.9rem; font: 900 var(--text-3xl)/0.98 var(--font-display); letter-spacing: -0.04em; }
.lead { max-width: 36rem; font-size: var(--text-lg); color: var(--ink-lo); }
.fineprint { margin-top: 1rem; font-size: var(--text-xs); color: var(--ink-lo); max-width: 70ch; }
.center-cta { display: flex; justify-content: center; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }

/* ---------- Quiz ---------- */
.quiz {
  --focus: var(--gold);
  background-color: var(--green-deep);
  background-image: radial-gradient(oklch(100% 0 0 / 0.09) 1.5px, transparent 2px);
  background-size: 26px 26px;
  border-block: var(--line);
  color: #fff;
}
.quiz .lead { color: oklch(93% 0.03 140); }
.quiz .eyebrow { color: var(--ink); background: var(--gold); }
/* Auf dunklen Flächen wird die Markierung zur Goldschrift – dunkle Schrift auf halber Markierung wäre unlesbar */
.quiz .hl, .contact-card .hl { color: var(--gold); background: none; padding-inline: 0; }
.quiz-card {
  --focus: var(--ink);
  position: relative; max-width: 62rem; margin-inline: auto;
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  background: var(--card); color: var(--ink);
  border: var(--line); border-radius: 2rem; box-shadow: var(--pop-lg);
}
.quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.quiz-step { font: 900 var(--text-sm)/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.quiz-dots { display: flex; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.quiz-dots li { width: 0.9rem; height: 0.9rem; border: 2.5px solid var(--ink); border-radius: 50%; transition: background-color var(--dur-ui) var(--ease-out-expo), scale var(--dur-ui) var(--ease-spring); }
.quiz-dots .is-now { background: var(--gold); scale: 1.25; }
.quiz-dots .is-right { background: var(--green); }
.quiz-dots .is-wrong { background: var(--red-hi); }
.quiz-body { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 860px) { .quiz-body { grid-template-columns: 0.85fr 1.15fr; gap: 2.5rem; } }
.scenario-label { margin-bottom: 0.6rem; font: 800 0.72rem/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-lo); }
.scenario { font: 900 var(--text-2xl)/1.1 var(--font-display); letter-spacing: -0.025em; }
.choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.65rem; margin: 0; padding: 0; list-style: none; }
.choice {
  display: flex; align-items: center; gap: 0.55rem; width: 100%; min-height: 3.6rem;
  padding: 0.45rem 0.7rem; background: var(--paper); color: var(--ink);
  border: var(--line); border-radius: 1rem; box-shadow: var(--pop-sm);
  font: 800 var(--text-sm)/1.12 var(--font-display); text-align: left; cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-spring), background-color var(--dur-micro) var(--ease-out-expo), opacity var(--dur-ui) var(--ease-out-expo);
}
.choice svg { flex: none; width: 2rem; height: 2rem; }
.choice:hover:not(:disabled) { transform: translateY(-2px) rotate(-1deg); background: var(--t-gold); }
.choice:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.choice:disabled { cursor: default; }
.choice:disabled:not(.is-right):not(.is-wrong) { opacity: 0.45; }
.choice.is-right { background: oklch(86% 0.11 145); }
.choice.is-wrong { background: oklch(87% 0.08 25); }
.choice.is-right::after, .choice.is-wrong::after { margin-left: auto; font-size: 1.1rem; }
.choice.is-right::after { content: "✓"; }
.choice.is-wrong::after { content: "✗"; }

.feedback {
  display: grid; gap: 0.5rem; justify-items: start; margin-top: 1.5rem;
  padding: 1.1rem 1.25rem; background: var(--paper-2); border: var(--line); border-radius: 1.25rem;
  animation: pop 500ms var(--ease-spring) both;
}
.feedback-title { font: 900 var(--text-xl)/1.1 var(--font-display); }
.feedback .btn { margin-top: 0.4rem; }

.quiz-end { display: grid; justify-items: center; gap: 1rem; padding-block: 1rem; text-align: center; }
.quiz-score { font: 900 clamp(3rem, 2rem + 5vw, 5.5rem)/0.95 var(--font-display); letter-spacing: -0.04em; color: var(--green); text-shadow: 0 0.05em 0 var(--ink); }
.quiz-score:focus { outline: none; }
.quiz-end-text { max-width: 34rem; font-size: var(--text-lg); }
.quiz-end-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.5rem; margin-top: 0.5rem; }
.fineprint-light { margin-inline: auto; margin-top: 1.75rem; text-align: center; color: oklch(90% 0.03 140); }

/* ---------- Bausteine ---------- */
.stickers { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .stickers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .stickers { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.75rem; } }
.sticker {
  --r: -1.2deg;
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: 0.2rem 1rem;
  padding: 1.4rem 1.4rem 1.3rem;
  background: var(--card); border: var(--line); border-radius: 1.75rem; box-shadow: 0 7px 0 var(--ink);
  rotate: var(--r);
  transition: rotate var(--dur-ui) var(--ease-spring), transform var(--dur-ui) var(--ease-spring), box-shadow var(--dur-ui) var(--ease-out-expo);
}
.sticker:nth-child(2n) { --r: 1.3deg; }
.sticker:nth-child(3n) { --r: -0.5deg; }
.sticker:hover { rotate: 0deg; transform: translateY(-5px); box-shadow: 0 12px 0 var(--ink); }
.sticker-num {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  background: var(--green); color: #fff; border: var(--line); border-radius: 50%;
  font: 900 1.25rem/1 var(--font-display); text-shadow: 0 2px 0 var(--ink);
}
.sticker h3 { grid-column: 1; margin-top: 0.75rem; font: 900 var(--text-xl)/1.05 var(--font-display); letter-spacing: -0.025em; }
.sticker-ico { grid-column: 2; grid-row: 1 / span 2; align-self: start; padding: 0.45rem; border: var(--line); border-radius: 1.2rem; rotate: 6deg; }
.sticker-ico svg { width: 3.8rem; height: 3.8rem; }
.sticker p { grid-column: 1 / -1; color: var(--ink-lo); }
.sticker p:not(.eg) { margin-top: 0.35rem; font-size: var(--text-lg); font-weight: 700; color: var(--ink); }
.sticker .eg { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 2.5px dashed oklch(80% 0.04 85); font-size: var(--text-sm); }
.sticker .eg strong { color: var(--ink); }

/* ---------- 0 € ---------- */
.zero { padding-block: 0 var(--space-section); }
.zero-card {
  position: relative; overflow: hidden;
  display: grid; gap: 1rem 3rem; align-items: center;
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  background: var(--gold); border: var(--line); border-radius: 2.25rem; box-shadow: var(--pop-lg);
}
.zero-card { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .zero-card { grid-template-columns: auto minmax(0, 1fr); } }
.zero-big { font: 900 clamp(5.5rem, 3rem + 10vw, 11rem)/0.85 var(--font-display); letter-spacing: -0.06em; color: var(--card); text-shadow: 0 0.045em 0 var(--ink); rotate: -5deg; white-space: nowrap; }
.zero-card .title { margin-top: 0; font-size: clamp(1.9rem, 1rem + 4vw, 3.75rem); hyphens: manual; }
.zero-text { position: relative; max-width: 34rem; margin-top: 0.9rem; font-size: var(--text-lg); font-weight: 700; }
.zero-card .fineprint { position: relative; color: var(--ink); }
.zero-deco { position: absolute; right: -2.5rem; bottom: -3rem; width: 14rem; height: 14rem; rotate: 18deg; opacity: 0.16; pointer-events: none; }

/* ---------- Ablauf ---------- */
.steps { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 2.25rem; }
  .step:nth-child(2) { margin-top: 2.5rem; }
  .step:nth-child(3) { margin-top: 5rem; }
  .step:not(:last-child)::after {
    content: "→"; position: absolute; right: -1.95rem; top: 2.2rem; z-index: 2;
    display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
    background: var(--gold); border: var(--line); border-radius: 50%;
    font: 900 1.1rem/1 var(--font-display);
  }
}
.step { position: relative; padding: 1.5rem 1.5rem 1.6rem; background: var(--card); border: var(--line); border-radius: 1.75rem; box-shadow: var(--pop); }
.step-num { display: block; font: 900 3.8rem/0.9 var(--font-display); color: var(--green); text-shadow: 0 4px 0 var(--ink); }
.step h3 { margin-top: 0.9rem; font: 900 var(--text-xl)/1.1 var(--font-display); letter-spacing: -0.02em; }
.step p { margin-top: 0.5rem; color: var(--ink-lo); }

/* ---------- Bonus ---------- */
.bonus-card {
  position: relative;
  display: grid; gap: 1.25rem 2.25rem; align-items: center;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  background-color: var(--red);
  background-image: repeating-linear-gradient(-45deg, oklch(100% 0 0 / 0.05) 0 14px, transparent 14px 28px);
  color: #fff; border: var(--line); border-radius: 2rem; box-shadow: var(--pop-lg);
}
@media (min-width: 760px) { .bonus-card { grid-template-columns: auto 1fr; } }
.gift { width: clamp(5rem, 3rem + 6vw, 8rem); height: clamp(5rem, 3rem + 6vw, 8rem); rotate: -8deg; animation: wiggle 3.6s var(--ease-spring) infinite; }
.bonus h2 { font: 900 var(--text-2xl)/1.05 var(--font-display); letter-spacing: -0.02em; color: var(--gold); }
.bonus-card p { margin-top: 0.4rem; font-size: var(--text-lg); font-weight: 700; max-width: 44rem; }
.amount { font-family: var(--font-display); font-weight: 900; font-size: 1.2em; color: var(--gold); white-space: nowrap; }
.bonus-card .bonus-small { font-size: var(--text-sm); font-weight: 500; color: oklch(92% 0.03 40); }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: 1rem; }
@media (min-width: 1000px) {
  .faq-grid { grid-template-columns: 0.8fr 1.2fr; gap: 3rem; align-items: start; }
  .faq-head { position: sticky; top: 7rem; grid-template-columns: 1fr; }
}
.faq-list { display: grid; gap: 1rem; }
.faq { background: var(--card); border: var(--line); border-radius: 1.4rem; box-shadow: var(--pop); transition: box-shadow var(--dur-micro) var(--ease-out-expo); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 44px; padding: 1.1rem 1.25rem; cursor: pointer; list-style: none;
  font: 800 var(--text-lg)/1.25 var(--font-display); letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq-plus {
  flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
  background: var(--gold); border: 2.5px solid var(--ink); border-radius: 50%;
  font: 900 1.4rem/1 var(--font-display);
  transition: rotate var(--dur-ui) var(--ease-spring), background-color var(--dur-micro) var(--ease-out-expo);
}
.faq summary:hover .faq-plus { background: var(--green-hi); }
.faq[open] .faq-plus { rotate: 45deg; }
.faq p { max-width: 65ch; padding: 0 1.25rem 1.25rem; color: var(--ink-lo); }

/* ---------- Kontakt ---------- */
.contact { padding-block: 0 var(--space-section); }
.contact-card {
  --focus: var(--gold);
  display: grid; gap: 2rem; align-items: center;
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  background: var(--ink); color: #fff;
  border: var(--line); border-radius: 2.25rem; box-shadow: 0 10px 0 var(--green-deep);
}
@media (min-width: 860px) { .contact-card { grid-template-columns: 1fr auto; } }
.eyebrow-dark { color: var(--ink); background: var(--gold); }
.person { display: flex; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.avatar {
  flex: none; display: grid; place-items: center; width: 4.2rem; height: 4.2rem;
  background: var(--gold); color: var(--ink); border: 3px solid var(--card); border-radius: 50%;
  font: 900 1.3rem/1 var(--font-display); rotate: -8deg;
}
.person p { display: grid; gap: 0.1rem; }
.person strong { font: 900 var(--text-xl)/1.1 var(--font-display); }
.person p span { color: oklch(85% 0.03 265); font-size: var(--text-sm); }
.person a { width: fit-content; font-weight: 700; text-underline-offset: 3px; text-decoration-color: var(--gold); }
.person a:hover { text-decoration-thickness: 2.5px; }

/* ---------- Footer & Mobilleiste ---------- */
.site-footer { padding-block: 2.5rem 7rem; border-top: 3px dashed oklch(78% 0.05 85); }
@media (min-width: 860px) { .site-footer { padding-bottom: 3rem; } }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.brand-small { font-size: 1rem; }
.brand-small svg { width: 1.7rem; height: 1.7rem; }
.footer-inner nav { display: flex; gap: 1.5rem; }
.footer-inner nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-underline-offset: 4px; }
.footer-inner .fineprint { flex-basis: 100%; margin-top: 0; }

.mbar { position: fixed; left: 0.75rem; right: 0.75rem; bottom: 0.9rem; z-index: 40; translate: 0 160%; transition: translate var(--dur-ui) var(--ease-out-expo); }
.mbar.is-on { translate: 0 0; }
.mbar .btn { width: 100%; }
@media (min-width: 860px) { .mbar { display: none; } }

/* ---------- Scroll-Einblendungen (nur mit JS) ---------- */
.js [data-reveal], .js [data-stagger] > * {
  opacity: 0; translate: 0 28px;
  transition-property: opacity, translate, rotate, transform, box-shadow;
  transition-duration: var(--dur-reveal), var(--dur-reveal), var(--dur-ui), var(--dur-ui), var(--dur-ui);
  transition-timing-function: var(--ease-out-expo), var(--ease-spring), var(--ease-spring), var(--ease-spring), var(--ease-out-expo);
}
.js [data-stagger] > * { transition-delay: calc(var(--i, 0) * 85ms), calc(var(--i, 0) * 85ms), 0ms, 0ms, 0ms; }
.js [data-reveal].is-in, .js [data-stagger].is-in > * { opacity: 1; translate: 0 0; }

/* ---------- Mobil ---------- */
@media (max-width: 639px) {
  .sticker, .sticker:nth-child(2n), .sticker:nth-child(3n) { --r: 0deg; }
  .choices { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .choice { flex-direction: column; justify-content: center; text-align: center; gap: 0.3rem; min-height: 5.2rem; font-size: 0.8rem; }
  .choice.is-right::after, .choice.is-wrong::after { margin-left: 0; }
  .stamp { right: -0.5rem; width: 5.2rem; height: 5.2rem; font-size: 1.05rem; }
  .pack-head { align-items: flex-start; flex-wrap: wrap; }
  .sticker { min-width: 0; }
  .sticker h3 { overflow-wrap: anywhere; }
  .tile-num { width: 1.1rem; height: 1.1rem; font-size: 0.6rem; }
}

/* Nur Skalierung, keine Deckkraft: Laufen Animationen nicht (Hintergrund-Tab, Stromsparen), bleibt „6 in 1“ trotzdem lesbar */
@keyframes pop {
  0% { scale: 0.55; }
  60% { scale: 1.08; }
  100% { scale: 1; }
}
@keyframes wiggle {
  0%, 82%, 100% { transform: rotate(0deg); }
  86% { transform: rotate(-9deg) scale(1.05); }
  91% { transform: rotate(8deg) scale(1.05); }
  95% { transform: rotate(-4deg); }
}
@keyframes confetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
}

/* Ergänzungen für Kontaktbereich und mobile Darstellung. */
.pack-note { margin-top: .65rem; font-size: var(--text-xs); color: var(--ink-lo); }
.person p { min-width: 0; }
.person a { overflow-wrap: anywhere; max-width: 100%; }
.contact-card > .btn { white-space: normal; }
.mbar { bottom: max(.9rem, env(safe-area-inset-bottom)); }
@media (min-width: 860px) and (max-width: 1100px) { .nav-links a { padding-inline: .45rem; font-size: .8rem; } }
@media (max-width: 420px) { .person { align-items: flex-start; gap: .6rem; } .person .avatar { width: 2.6rem; height: 2.6rem; font-size: 1rem; } .contact-card { padding: 1.25rem; } .btn { font-size: .95rem; } }