/* =========================================================
   Panedodo – umgesetzt aus Figma «Panedodo UI Design» / Page «Code»
   Basisbreite im Design: 1728px. Alle Collage-Masse skalieren
   mit --u (1 Design-Pixel), darunter greifen Mobile-Regeln.
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "panedodo Display";
  src: url("../fonts/panedodoDisplay-SemiBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Unica Pro";
  src: local("Neue Haas Unica Pro Medium"), local("NeueHaasUnicaPro-Medium"),
       url("../fonts/neue-haas-unica-pro-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Unica Pro";
  src: local("Neue Haas Unica Pro Black"), local("NeueHaasUnicaPro-Black"),
       url("../fonts/neue-haas-unica-pro-black.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --u: min(1px, calc(100vw / 1728));

  --c-black: #000;
  --c-white: #fff;
  --c-green: #86c4ad;
  --c-yellow: #f0c172;
  --c-pink: #ffa0a3;
  --c-blue: #6b8cd3;
  --c-lavender: #b9bce0;
  --c-progress: #9cb0c9;
  --c-progress-active: #486284;

  --f-display: "panedodo Display", Impact, "Arial Narrow", "Arial Black", sans-serif;
  --f-body: "Neue Haas Unica Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Typo-Skala (Figma: 300 / 100 / 56 / 22 / 14 / 12) */
  --fs-display: max(calc(300 * var(--u)), 3.6rem);
  --fs-eyebrow: max(calc(56 * var(--u)), 1.5rem);
  --fs-body: clamp(1rem, calc(22 * var(--u)), 1.375rem);
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;

  --gutter: max(calc(30 * var(--u)), 16px);
  --section-gap: calc(256 * var(--u));
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2, h3, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }
button, input, textarea { font: inherit; color: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; }

.page {
  position: relative;
  max-width: 1728px;
  margin: 0 auto;
  overflow-x: visible;
  overflow-y: visible;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

/* ---------- Typo-Komponenten ---------- */
.title-unit {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-inline: var(--gutter);
}
.display[data-title-parallax-range] { transform: translateY(var(--title-parallax-y, 0px)) rotate(-4deg); }
.eyebrow {
  font-size: var(--fs-eyebrow);
  line-height: 0.9;
  text-transform: uppercase;
  margin-bottom: calc(48 * var(--u));
}
.display {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
  transform: rotate(-4deg);
}
.display--sm {
  font-size: max(calc(200 * var(--u)), 2.5rem);
  line-height: 0.95;
  color: var(--c-black);
}
@media (min-width: 801px) { .display { white-space: nowrap; } }
.title-unit--yellow { color: var(--c-yellow); }
.title-unit--pink { color: var(--c-pink); }
.title-unit--green { color: var(--c-green); }

.body-unit { display: flex; flex-direction: column; align-items: flex-start; gap: calc(32 * var(--u)); gap: max(calc(32 * var(--u)), 16px); }
.body-unit .lead { font-size: var(--fs-eyebrow); line-height: 0.9; text-transform: uppercase; }
.body-unit p:not(.lead) { font-size: var(--fs-body); line-height: 1.2; }

.legal-page {
  min-height: 100vh;
  padding: max(180px, calc(220 * var(--u))) var(--gutter) 120px;
  display: flex; flex-direction: column; align-items: center; gap: 64px;
}
.legal-page .title-unit { width: 100%; }
.legal-page .display { white-space: normal; }
.legal-page__content { width: min(900px, 100%); }
.legal-page__section + .legal-page__section { margin-top: 32px; }
.legal-page__section h2 { font-size: var(--fs-body); font-weight: 900; margin-bottom: 16px; }
.legal-page__section p { line-height: 1.45; }
.legal-page__section p + p { margin-top: 16px; }
.legal-page__list { display: flex; flex-direction: column; gap: 24px; padding-left: 1.5em; }
.legal-page__list li { padding-left: 8px; }
.legal-page__list li::marker { font-weight: 900; }
.legal-page__list h2 { font-size: var(--fs-body); font-weight: 900; margin-bottom: 8px; }
.legal-page__list li > p + p { margin-top: 12px; }
.legal-page__list p, .legal-page__note { line-height: 1.45; }
.legal-page__intro { margin-bottom: 24px; line-height: 1.45; }
.legal-page__note { margin-top: 32px; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--c-black); --btn-fg: var(--c-white);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 22px 52px;
  border: 0; border-radius: 0; background: none; color: var(--btn-fg);
  font-size: var(--fs-body); line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: transform .2s cubic-bezier(.3,.8,.3,1), opacity .15s ease;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-bg);
  -webkit-mask: url("../assets/btn-blob.svg") center / 100% 100% no-repeat;
  mask: url("../assets/btn-blob.svg") center / 100% 100% no-repeat;
  transition: transform .35s cubic-bezier(.3,.8,.3,1), filter .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::before { transform: rotate(-2.5deg) scale(1.05, 1.08); filter: brightness(1.06); }
.btn:active::before { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--c-black); outline-offset: 4px; border-radius: 40px; }
.btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.btn:disabled::before { transform: none; }
.btn--black  { --btn-bg: var(--c-black); --btn-fg: var(--c-white); }
.quiz__actions .btn,
.env__letter .btn {
  --btn-size: min(calc(1100 * var(--u)), 92vw, 96svh);
  padding: calc(var(--btn-size) * .016) calc(var(--btn-size) * .055);
  font-size: var(--fs-body);
}

/* ---------- Logo + To-Top ---------- */
.logo {
  position: fixed; z-index: 20;
  top: max(calc(30 * var(--u)), 12px); left: max(calc(30 * var(--u)), 12px);
  width: max(calc(81 * var(--u)), 52px);
}
.to-top {
  position: fixed; z-index: 30; isolation: isolate;
  right: var(--gutter); bottom: var(--gutter);
  width: 72px; height: 54px; border-radius: 0;
  display: grid; place-items: center;
  background: none; color: var(--c-white);
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
}
.to-top::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-pink);
  --to-top-arrow-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='white'%20d='M11%2020V7.83l-5.59%205.59L4%2012l8-8%208%208-1.41%201.41L13%207.83V20h-2Z'/%3E%3C/svg%3E");
  -webkit-mask: url("../assets/btn-blob-round.svg") center / 100% 100% no-repeat;
  mask: url("../assets/btn-blob-round.svg") center / 100% 100% no-repeat;
  transition: transform .35s cubic-bezier(.3,.8,.3,1);
}
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  .to-top::before {
    -webkit-mask:
      url("../assets/btn-blob-round.svg") center / 100% 100% no-repeat,
      var(--to-top-arrow-mask) center / 28px 28px no-repeat;
    -webkit-mask-composite: xor;
    mask:
      url("../assets/btn-blob-round.svg") center / 100% 100% no-repeat,
      var(--to-top-arrow-mask) center / 28px 28px no-repeat;
    mask-composite: exclude;
  }
  .to-top svg { opacity: 0; }
}
.to-top:hover::before { transform: rotate(-4deg) scale(1.08, 1.12); }
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: calc(1240 * var(--u));
  padding: max(calc(210 * var(--u)), 90px) 0 calc(72 * var(--u));
}
.hero__star {
  position: absolute; left: calc(30 * var(--u)); top: calc(100 * var(--u));
  width: calc(1668 * var(--u));
  transform: translateY(var(--hero-star-parallax-y, 0px));
}
.hero__star-mobile { display: none; }
.hero .display { line-height: 0.95;
position: relative; z-index: 1;
}
.hero__baguette {
  position: absolute; z-index: 2;
  left: calc(342 * var(--u)); top: calc(249 * var(--u));
  width: calc(1044 * var(--u));
  transform: translateY(var(--parallax-y, 0px)) scaleX(-1);
  pointer-events: none;
}

/* ---------- Panedodo-Weg ---------- */
.weg { position: relative; }

.tabs {
  --tabs-padding-top: max(calc(124 * var(--u)), 40px);
  --logo-top: max(calc(30 * var(--u)), 12px);
  --logo-size: max(calc(81 * var(--u)), 52px);
  position: sticky; z-index: 20;
  top: calc(var(--logo-top) + var(--logo-size) - var(--tabs-padding-top));
  margin: 0 var(--gutter);
  padding: var(--tabs-padding-top) 0 0;
  background: transparent;
}
.tabs__list {
  display: flex; justify-content: space-between; gap: 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-black);
  font-size: var(--fs-small); line-height: 1.5;
  overflow-x: auto; scrollbar-width: none;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__link { text-decoration: none; white-space: nowrap; font-weight: 500; }
.tabs__link.is-active { font-weight: 900; }
.tabs__indicator {
  position: absolute; left: 0; bottom: -1px;
  width: 170px; height: 3px; background: var(--c-black);
  transition: transform .3s ease, width .3s ease;
}

/* Story steps */
.story-step {
  position: relative;
  margin-top: max(calc(32 * var(--u)), 8px);
  margin-bottom: -1px;
  /* Titel weiter oben (vorher 510), der Abstand liegt jetzt zwischen Titel und Inhalt */
  padding: calc(150 * var(--u)) 0 calc(510 * var(--u));
}
.story-step + .story-step { margin-top: 0; }
#anfang .story-step__content { margin-top: 50px; }
#panedodo .story-step__content { margin-top: 150px; }
.story-step__background {
  position: absolute; inset: 0;
  background: url("../assets/bg-anfang.webp") center / 100% 100% no-repeat;
  z-index: 0;
}
.story-step__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: max(calc(48 * var(--u)), 32px);
}
.story-step__header {
  text-align: center;
}
.story-step__title {
  display: inline-block;
  color: var(--c-black);
  padding-bottom: max(calc(300 * var(--u)), 8px);

}
.story-step__title--light { color: var(--c-white); }
.story-step__title--blue { color: var(--c-blue); }
.story-step__title--green { color: var(--c-green); }
.story-step__title--pink { color: var(--c-lavender); }

#gf-brot .story-step__title {
  transform: rotate(3deg);
}

#pause .story-step__title {
  transform: rotate(3deg);
}

/* Story layout grid */
.story-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: max(calc(15 * var(--u)), 15px);
  row-gap: max(calc(32 * var(--u)), 24px);
  align-items: start;
  width: 100%;
  padding-inline: var(--gutter);
}
.story-layout > * { grid-column: auto / span 6; }
.story-layout { margin-top: -40px; margin-bottom: 150px; }

/* ---------- Scroll-Ablauf (Stories + Quiz) ----------
   Titel bleibt stehen, Inhalt scrollt bis zur Mitte, stoppt kurz, dann gehen beide zusammen weg.
   Höhen und Positionen berechnet js/main.js (--pin-head-h, --pin-head-mb, --pin-content-top, --pin-pause). */
[data-pin]::after { content: ""; display: block; height: var(--pin-pause, 0px); }
[data-pin-head] {
  position: relative; pointer-events: none;
  height: var(--pin-head-h, auto);
  margin-bottom: var(--pin-head-mb, 0px);
}
[data-pin-head] > * { pointer-events: auto; }
[data-pin-content] { position: sticky; top: var(--pin-content-top, 0px); }

/* Kurzer Stopp ohne eigenes Layout (Selbst ist die Frau): ganzer Inhalt hält in der Mitte */
[data-pin-hold]::after { content: ""; display: block; height: var(--pin-pause, 0px); }
[data-pin-hold-item] { position: sticky; top: var(--pin-hold-top, 0px); }

/* Weiches Abbremsen/Anfahren (Wert kommt aus js/main.js) */
[data-pin-title],
[data-pin-content],
[data-pin-hold-item] { translate: 0 var(--pin-ease-y, 0px); }

.story-step__head { z-index: 2; }
.story-step [data-pin-title] { position: sticky; top: var(--pin-title-top, var(--story-title-top, 180px)); }
.story-step [data-pin-title] .story-step__title { padding-bottom: 0; }
/* Abstand Titel → Inhalt (vorher 300 im Titel + 360 aus dem oberen Abstand) */
.story-step .story-layout[data-pin-content] { margin-top: calc(660 * var(--u) - 40px); }
@media (max-width: 800px) {
  .story-step [data-pin-title],
  .story-step [data-pin-content],
  .story-step [data-pin-hold-item] { position: relative; top: auto; }
  .story-step [data-pin-title] .story-step__title { padding-bottom: 0; }
  .story-step .story-layout[data-pin-content] { margin-top: -50px; }
}
#selbst .story-layout { margin-bottom: 0; }
#anfang .story-layout__media,
#panedodo .story-layout__media,
#zukunft .story-layout__media { grid-column: 1 / span 8; }
#gf-brot .story-layout__media,
#pause .story-layout__media { grid-column: 5 / span 8; }
#anfang .story-layout__text,
#panedodo .story-layout__text,
#zukunft .story-layout__text { grid-column: 9 / span 5; }
#gf-brot .story-layout__text,
#pause .story-layout__text { grid-column: 1 / span 4; }
/* Pause: grosses Bild (pd-weg-pause-gross) links breit, kleines Bild rechts schmal */
#pause .story-layout__landscape-wrap { grid-column: 1 / span 4; }
#pause .story-layout__portrait-wrap { grid-column: 5 / span 2; }
#panedodo .story-layout__landscape-wrap { grid-column: 1 / span 3; }
#panedodo .story-layout__portrait-wrap { grid-column: 4 / span 4; }

#gf-brot .story-layout > *,
#pause .story-layout > * { grid-row: 1; }

/* Bilder-Grid: Teilt die 6 Spalten in 2 Spalten (Quer) + 4 Spalten (Hoch) */
.story-layout__media {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: max(calc(15 * var(--u)), 15px);
  align-items: start;
  width: 100%;
}
.weg .story-layout__media,
.weg .story-layout__text {
  transform: translateY(var(--weg-parallax-y, 0px));
}
.story-layout__landscape-wrap {
  grid-column: 1 / span 2;
  width: 100%;
}
/* Zukunft: Bilder oben bündig, kleines Bild 3 Spalten, grosses Bild 3 Spalten (vorher 2 + 4) */
#zukunft .story-layout__landscape-wrap { align-self: start; grid-column: 1 / span 3; }
#zukunft .story-layout__portrait-wrap { grid-column: 4 / span 3; }
.story-layout__portrait-wrap {
  grid-column: 3 / span 4;
  width: 100%;
}
.story-layout__image {
  width: 100%;
  height: auto;
  display: block;
}
[data-fade-in] {
  transition: opacity 1s ease-out, transform 1s cubic-bezier(.16, 1, .3, 1);
}
[data-fade-in].is-fade-pending { opacity: 0; transform: translateY(12px) scale(.36); }
[data-fade-in].is-fade-visible { opacity: 1; transform: none; }
.story-layout__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: max(calc(32 * var(--u)), 20px);
}
.story-layout__mobile-copy { display: none; }
.story-layout__title {
  font-family: var(--f-body);
  font-size: max(calc(72 * var(--u)), 1.75rem);
  font-weight: 500;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--c-black);
  margin: 0;
}
.story-layout__description {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.2;
  color: var(--c-black);
  margin: 0;
}

.gf__bg {
  position: absolute; inset: 0;
  background: url("../assets/bg-kein-gf-brot.webp") center / 100% 100% no-repeat;
  z-index: 0;
  margin-top: -2px;
}

.selbst__bg {
  position: absolute; inset: 0;
  background: url("../assets/bg-selbst.webp") center / 100% 100% no-repeat;
  z-index: 0;
  margin-top: -2px;
}

.panedodo__bg {
  position: absolute; inset: 0;
  background: url("../assets/bg-panedodo.webp") center / 100% 100% no-repeat;
  z-index: 0;
  margin-top: -2px;
}

.pause__bg {
  position: absolute; inset: 0;
  background: url("../assets/bg_pause.webp") center / 100% 100% no-repeat;
  z-index: 0;
  margin-top: -2px;
}

.zukunft__bg {
  position: absolute; inset: 0;
  background: url("../assets/bg_zukunft.webp") center / 100% 100% no-repeat;
  z-index: 0;
  margin-top: -2px;
}




/* Sprechblase */
.bubble {
  --bw: max(calc(436 * var(--u)), 150px);
  width: var(--bw); height: calc(var(--bw) * 347 / 436);
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--bw) * .069) calc(var(--bw) * .069) calc(var(--bw) * .275);
  position: relative;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.08));
}
.bubble::before {
  content: "";
  position: absolute;
  inset: 0;
  background: center / 100% 100% no-repeat;
  transform: scaleY(-1);
}
.bubble--yellow::before { background-image: url("../assets/bubble_yellow.svg"); }
.bubble--pink::before   { background-image: url("../assets/bubble_pink.svg"); }
.bubble__text {
  position: relative;
  margin-bottom: calc(var(--bw) * -0.400);
  z-index: 1;
  font-family: var(--f-body); font-weight: 500;
  font-size: var(--fs-body); line-height: 1.2;
  color: var(--c-white); text-align: center;
}
#zukunft .bubble__text {
  font-family: var(--f-display); font-weight: 800;
  font-size: calc(var(--bw) * .200); line-height: 0.9;
  text-transform: uppercase;
}
.zukunft__mobile-title { display: none; }

.story-step__bubble {
  position: absolute; z-index: 2; left: calc(99 * var(--u)); top: calc(219 * var(--u));
  transform: translateY(var(--bubble-parallax-y, 0px));
}

/* ---------- Quiz ---------- */
.quiz { position: relative; margin-top: 200px; padding-bottom: calc(40 * var(--u)); }
.quiz__bg {
  position: absolute; left: 0; right: 0; top: calc(328 * var(--u));
  /* Unterkante ca. 250px unter dem Papier (statt fester Höhe), damit der Hintergrund nicht zu weit nach unten reicht */
  bottom: calc(40 * var(--u) + var(--pin-pause, 0px) - 250px);
  background: url("../assets/bg_quiz.svg") center / 100% 100% no-repeat;
  transform: translateY(var(--quiz-bg-parallax-y, 0px));
  /* bewegt sich mit dem Quiz-Papier mit (Wert aus js/main.js), damit er hinter dem Papier stehen bleibt */
  translate: 0 var(--pin-follow-y, 0px);
}
.story-step__background,
.gf__bg,
.panedodo__bg,
.pause__bg,
.zukunft__bg,
.quiz__bg {
  left: 50%; right: auto; width: 100vw; margin-left: -50vw;
}
.quiz__head { z-index: 3; }
.quiz .title-unit { position: sticky; top: clamp(16px, 1.736vw, 25px); z-index: 3; padding-top: calc(2 * var(--gutter)); }
.quiz__paper {
  position: sticky; z-index: 4;
  margin-top: calc(450px - 77 * var(--u)); /* Abstand Titel → Papier (vorher 750px) */
  min-height: calc(502 * var(--u));
  margin-left: calc(300 * var(--u)); margin-right: calc(300 * var(--u));
  padding: calc(77 * var(--u)) var(--gutter) calc(60 * var(--u));
  background: url("../assets/paper.webp") center top / 100% 100% no-repeat;
  transform: translateY(var(--quiz-paper-parallax-y, 0px));
  display: flex; justify-content: center;
}
.quiz__frame {
  width: min(calc(916 * var(--u)), 100%);
  display: flex; flex-direction: column; gap: max(calc(54 * var(--u)), 20px);
}
.progress { position: relative; height: 2px; }
.progress::before {
  content: ""; position: absolute; inset: 0.5px 0 auto 0; height: 1px; background: var(--c-progress);
}
.progress__bar {
  position: absolute; left: 0; top: 0; height: 2px; width: 33.33%;
  background: var(--c-progress-active); transition: width .3s ease;
}
.quiz__step { border: 0; margin: 0; padding: 0; min-width: 0; }
.quiz__question {
  display: block; width: 100%; padding: 0;
  text-align: center; font-size: var(--fs-body); margin-bottom: max(calc(54 * var(--u)), 20px);
}
.quiz__answers { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.answer {
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: center;
  width: min(100%, 700px); aspect-ratio: 4075.26 / 465.5;
  min-height: 48px; padding: 8px 24px;
  border: 0; border-radius: 0; background: transparent;
  font-size: var(--fs-tiny); line-height: 1.5; cursor: pointer;
  transition: color .15s ease;
}
.answer::before,
.answer::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--c-black);
}
.answer::before {
  -webkit-mask: url("../assets/btn-blob-lang-outline.svg") center / 100% 100% no-repeat;
  mask: url("../assets/btn-blob-lang-outline.svg") center / 100% 100% no-repeat;
}
.answer::after {
  opacity: 0;
  -webkit-mask: url("../assets/btn-blob-lang.svg") center / 100% 100% no-repeat;
  mask: url("../assets/btn-blob-lang.svg") center / 100% 100% no-repeat;
  transition: opacity .15s ease;
}
.answer input { position: absolute; opacity: 0; pointer-events: none; }
.answer:hover::after { opacity: .08; }
.answer:has(input:checked) { color: var(--c-white); }
.answer:has(input:checked)::after { opacity: 1; }
.answer:has(input:focus-visible) { outline: 2px solid var(--c-blue); outline-offset: 3px; }
.quiz__result { text-align: center; font-size: var(--fs-body); }
.quiz__result strong { display: block; font-family: var(--f-display); font-weight: 800; font-size: var(--fs-eyebrow); line-height: .9; text-transform: uppercase; margin-top: 12px; }
.quiz__actions { display: flex; justify-content: flex-end; }

/* ---------- Kontakt + Footer (grüne Fläche) ---------- */
.green-zone {
  position: relative;
  display: flex; flex-direction: column; gap: var(--section-gap);
  width: 100vw; margin-inline: calc(50% - 50vw);
  margin-top: 580px; /* Abstand Quiz → Kontakt */
  background:
    url("../assets/bg_kontakt.svg") left top calc(208 * var(--u)) / 100% auto no-repeat,
    linear-gradient(transparent calc(208 * var(--u) + 26vw), var(--c-green) calc(208 * var(--u) + 26vw));
  background-position: 0 calc(208 * var(--u) + var(--green-bg-parallax-y, 0px)), 0 0;
}
.kontakt {
  display: block; position: relative; gap: 0;
  height: auto; min-height: 0; scroll-snap-align: none;
  --W: min(calc(1100 * var(--u)), 92vw, 96svh);
  --H: calc(var(--W) * .66);
  --flap: 1; --rise: 1; --form: 1; --drop: 0;
  --env-offset: 0px; --env-drop: 0;
}
.js .kontakt {
  /* Scrollstrecke Kontakt (vorher 340vh + 1500px). 700px = ENV_DELAY in js/main.js */
  height: calc(260vh + 700px); height: calc(260svh + 700px);
  --flap: 0; --rise: 0; --form: 0; --env-offset: 700px;
}
.kontakt__pin {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; flex-direction: column; align-items: center;
}
html:not(.js) .kontakt__pin { position: relative; }
.kontakt .title-unit { width: 100%; }
.kontakt__title {
  position: absolute; z-index: 1; top: calc(var(--logo-top, 30px) + 4svh); left: 0; right: 0;
  transform: translateY(calc(var(--drop) * -4svh));
}
.env {
  position: absolute; left: 50%; bottom: calc(3svh - var(--env-offset)); z-index: 2;
  width: var(--W); height: var(--H);
  transform: translateX(-50%) translateY(calc(var(--env-drop) * 4svh));
  perspective: 1800px;
}
.env > * { position: absolute; }
.env__back {
  inset: 0; border-radius: 6px;
  background: linear-gradient(rgb(0 0 0 / .18), rgb(0 0 0 / .05)), #c9a26e url("../assets/kraft.webp") center / cover;
  box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) rgb(0 0 0 / .28);
}
.env__flap {
  left: 0; top: 0; width: 100%; height: calc(var(--H) * .54);
  transform-origin: 50% 0; transform-style: preserve-3d;
  transform: rotateX(calc(var(--flap) * 180deg));
  z-index: 6;
}
.env__flap[data-side="back"] { z-index: 2; }
.env__face {
  position: absolute; inset: 0; backface-visibility: hidden;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.env__face--out {
  background: linear-gradient(160deg, rgb(255 255 255 / .12), rgb(0 0 0 / .12)), #c9a26e url("../assets/kraft.webp") center / cover;
}
.env__face--in {
  transform: rotateY(180deg);
  background: linear-gradient(rgb(0 0 0 / .32), rgb(0 0 0 / .12)), #b88d58 url("../assets/kraft.webp") center / cover;
}
.env__letter {
  left: 7%; width: 86%; height: calc(var(--W) * .6 + var(--W) * var(--grow, 0) * var(--rise)); bottom: calc(var(--H) * .06); z-index: 3;
  transform: translateY(calc(var(--rise) * var(--H) * -.45)) rotate(calc((1 - var(--rise)) * -1.5deg));
  background: #fbf7ee url("../assets/paper.webp") center / cover;
  border-radius: 3px; box-shadow: 0 -6px 18px rgb(0 0 0 / .12);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: calc(var(--W) * .045) calc(var(--W) * .12) 0; margin: 0; gap: calc(var(--W) * .006);
}
.env__letter > * { opacity: var(--form); transform: translateY(calc((1 - var(--form)) * 18px)); }
.env__letter .field-row { display: flex; width: 100%; gap: 15px; margin-bottom: 0; }
.env__letter .field { width: 100%; }
.env__letter > .field, .env__letter .field-row { margin-bottom: 0; }
.env__letter .field input, .env__letter .field textarea { height: calc(var(--W) * .068); min-height: 40px; padding: 10px 0; font-size: var(--fs-body); }
.env__letter .field textarea { height: calc(var(--W) * .085); resize: none; }
.env__letter .btn { margin-top: calc(var(--W) * .012); }
.env__front { inset: 0; z-index: 4; pointer-events: none; filter: drop-shadow(0 -3px 5px rgb(0 0 0 / .28)); }
.env__front-shape {
  position: absolute; inset: 0; border-radius: 0 0 6px 6px;
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(to bottom right, rgb(255 255 255 / .1), rgb(0 0 0 / .1)), #c9a26e url("../assets/kraft.webp") center / cover;
}
@media (max-width: 800px) {
  .kontakt { --W: min(94vw, 56svh); --grow: .35; }
  .env__letter { padding-inline: 9%; }
  .env__letter .field-row { flex-direction: column; gap: 0; }
  .env__letter .field input { height: 40px; }
  .env__letter .field textarea { height: 56px; }
  .kontakt__title { top: calc(80px + 2svh); }
  /* Umschlag höher, damit kein Leerraum unter dem Titel bleibt */
  .env { bottom: calc(3svh + max(0px, 45svh - 260px) - var(--env-offset)); }
}
@media (prefers-reduced-motion: reduce) {
  [data-fade-in] { opacity: 1; transform: none; transition: none; }
  .js .kontakt { height: auto; --flap: 1; --rise: 1; --form: 1; --drop: 0; --env-offset: 0px; --env-drop: 0; }
  .js .kontakt__pin { position: relative; }
}
.field { display: block; width: 100%; }
.field input, .field textarea {
  display: block; width: 100%;
  height: 48px; padding: 15px 0;
  border: 0; border-bottom: 1px solid var(--c-black); border-radius: 0;
  background: transparent; font-size: var(--fs-body); line-height: 1.2;
  resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: var(--c-black); opacity: 1; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-width: 2px; }
.footer {
  position: relative; z-index: 2;
  margin: 0 var(--gutter);
  padding-top: calc(500 * var(--u));
}
.footer__main {
  display: flex; justify-content: space-between; gap: 32px;
  padding: 24px 0;
  border-top: 1px solid var(--c-black);
  border-bottom: 1px solid var(--c-black);
}
.footer__cols { display: flex; gap: 16px; }
.footer__col { width: 265px; }
.footer__title { font-size: var(--fs-body); margin-bottom: 1.2em; }
.footer__small, .footer__address { font-size: var(--fs-tiny); line-height: 1.5; font-style: normal; }
.footer__address { font-size: var(--fs-small); }
.footer__small a, .footer__legal a, .footer__link { text-decoration: none; }
.footer__small a:hover, .footer__legal a:hover, .footer__link:hover { text-decoration: underline; }
.footer__social { display: flex; gap: 20px; align-items: flex-start; }
.footer__legal {
  display: flex; justify-content: space-between; align-items: center; gap: 36px;
  min-height: 50px; font-size: var(--fs-tiny); line-height: 1.5;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 800px) {
  :root { --section-gap: 96gg 12px 24px; }
  .answer { font-size: var(--fs-body); }
  /* "Next" (Quiz) und "Senden" (Kontakt) mobil: mehr Luft um den Text */
  .quiz__actions .btn,
  .env__letter .btn { padding: 16px 25px; }

  .hero { min-height: 0; padding-top: 250px; padding-bottom: 38vw; }
  .hero__star { display: none; }
  .hero__star-mobile {
    display: block; position: absolute; z-index: 0;
    left: 5%; width: 90%; top: 150px; bottom: 0;
    background: url("../assets/star_mobile.webp") center / 100% 100% no-repeat;
    transform: translateY(var(--hero-star-parallax-y, 0px)) rotate(90deg);
  }
  .hero__baguette { left: 12%; width: 76%; top: 230px; }

  .tabs { --tabs-padding-top: 24px; }
  .tabs__list { justify-content: flex-start; gap: 24px; }

  /* Als alles begann Mobile */
  /* Einheitliche Abstände: oben 64px bis zum Titel, 32px Titel → Bild → Text, unten 96px */
  .story-step { height: auto; margin-top: 0; padding: 64px 0 96px; }
  #anfang .story-step__content,
  #panedodo .story-step__content { margin-top: 0; }
  .story-step .story-layout { margin-top: 0; margin-bottom: 0; }
  .story-step .story-layout__text { margin-bottom: 0 !important; }
  .body-unit p.story-layout__description { font-size: 1.25rem; line-height: 1.3; };

  /* Selbst ist die Frau: Titel mittig im Stern, Text darunter */
  #selbst { padding-top: 40px; }
  /* Panedodo: Titel unter der weissen Welle oben */
  #panedodo { padding-top: 140px; }
  #selbst .selbst__bg { display: none; }
  #selbst .story-step__header { isolation: isolate; padding-block: 56px; }
  #selbst .story-step__title { margin-top: 0 !important; padding-bottom: 0; }
  #selbst .story-step__header::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 -4%;
    background: url("../assets/star_mobile.webp") center / 100% 100% no-repeat;
    pointer-events: none;
  }
  #selbst .story-layout__mobile-copy { padding-inline: var(--gutter); }
  #selbst .story-layout { margin-top: 0 !important; }
  #anfang .story-layout__landscape-wrap { grid-column: 1 / -1 !important; }
  #anfang .story-layout__portrait-wrap { display: none; }
  #anfang .story-layout__text { margin-bottom: 50px; }
  #selbst .bubble { display: none; }
  #selbst .story-layout__mobile-copy { display: flex; grid-column: 1 / -1 !important; margin-top: 0; }
  #gf-brot .story-layout__landscape-wrap { display: none; }
  #gf-brot .story-layout__portrait-wrap { grid-column: 1 / -1 !important; }
  #gf-brot .story-layout__text { margin-bottom: 50px; }
  #panedodo .story-layout__landscape-wrap { grid-column: 1 / -1 !important; }
  #panedodo .story-layout__portrait-wrap { display: none; }
  #panedodo .story-layout__text { margin-bottom: 50px; }
  #pause .story-layout__landscape-wrap { grid-column: 1 / -1 !important; }
  #pause .story-layout__portrait-wrap { display: none; }
  #pause .story-layout__text { margin-bottom: 50px; }
  #zukunft .story-layout__landscape-wrap { grid-column: 1 / -1 !important; }
  #zukunft .story-layout__portrait-wrap { display: none; }
  #zukunft .story-layout__text { margin-bottom: 50px; }
  /* Mobile Zusatz im Titel aus, weil die Sprechblase "der Traum bleibt!" jetzt auch mobil sichtbar ist */
  #zukunft .zukunft__mobile-title { display: none; }
  .story-step__background { background-color: var(--c-lavender); }
  /* Story-Titel mobil gleich gross wie die normale Display-Schrift (vorher clamp(2.2rem, 9vw, 3.2rem)) */
  .display--sm { font-size: var(--fs-display); white-space: normal; }
  .story-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .story-layout > * {
    grid-column: 1 / -1 !important;
  }
  #gf-brot .story-layout > *,
  #pause .story-layout > * { grid-row: auto; }
  .story-layout__title {
    font-size: clamp(1.5rem, 5.5vw, 2.2rem);
  }

  .story-step__bubble { --bw: 104px; left: 1%; top: 8px; }
  /* Sprechblase "der Traum bleibt!" mobil: rechts unten am Titel, leicht überlappend */
  #zukunft .story-step__bubble { --bw: 200px; left: auto; right: 3%; top: auto; bottom: -150px; }

  .quiz__bg { top: 18%; }
  .quiz__paper {
    margin: 480px 15px 0; padding: 48px 30px; min-height: 0; /* Abstand Titel → Papier mobil (vorher 1480px) */
    background-image: url("../assets/paper.webp");
    background-size: 100% 100%;
  }
  .quiz__frame { width: 100%; }

  .footer { padding-top: 40vw; }
  .footer__main { flex-direction: column; }
  .footer__cols { flex-wrap: wrap; gap: 32px; }
  .footer__col { width: auto; min-width: 140px; }
  .footer__col:last-child { margin-left: auto; text-align: left; }
  .footer__legal { flex-wrap: wrap; justify-content: flex-start; gap: 8px 20px; padding: 16px 0; }
}

@media (max-width: 560px) {
  .field input, .field textarea { height: 40px; padding: 10px 0; font-size: 0.9rem; }
}