/* Landingpage der Aktion (sonderangebot.larision.de). Farben und Schrift wie
   auf der Paketseite, nur ganzseitig statt im iframe. */
:root {
  --bg: #faf7f2;
  --surface: #ffffff;
  --ink: #161412;
  --muted: #8a8178;
  --line: #e7ddd0;
  --sand: #c9b6a4;
  --error: #9c4a3c;
  --radius: 16px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0; background: var(--bg); color: var(--ink);
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 16px; line-height: 1.6;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

.kopf { text-align: center; padding: 26px 20px 18px; }
.logo { width: min(260px, 62vw); height: auto; margin: 0 auto; }

.hero { position: relative; max-width: 940px; margin: 0 auto; padding: 0 16px; }
.hero img { width: 100%; height: auto; aspect-ratio: 1999 / 1096; object-fit: contain; border-radius: var(--radius); }
.badge {
  position: absolute; left: 32px; top: 20px; margin: 0;
  background: rgba(250, 247, 242, .92); color: var(--ink);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px;
}

.block { max-width: 940px; margin: 0 auto; padding: 44px 20px; }
.block--hero { padding-top: 28px; }
.block--eng { max-width: 620px; text-align: center; }
h1 { font-size: clamp(27px, 6.4vw, 40px); font-weight: 500; line-height: 1.22; margin: 0 0 18px; }
h1 em { font-style: normal; display: block; }
h2 { font-size: clamp(21px, 4.4vw, 27px); font-weight: 500; margin: 0 0 16px; }
h3 { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.lead { font-size: 18px; margin: 0 0 26px; }
.mini { font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.frist { font-size: 15px; margin: 18px 0 0; color: var(--ink); }
.frist strong { border-bottom: 2px solid var(--sand); }
.warum p { color: #423d38; margin: 0; }

.cta, .sticky-cta {
  display: inline-block; background: var(--ink); color: #fff; text-decoration: none;
  font-size: 16px; font-weight: 500; letter-spacing: .02em;
  padding: 16px 34px; border-radius: 999px; border: 0; cursor: pointer;
}
.cta:active, .sticky-cta:active { transform: translateY(1px); }
.cta { transition: transform .15s ease, box-shadow .2s ease; }
.cta:hover { box-shadow: 0 8px 24px rgba(22,20,18,.18); }
.sticky-cta {
  position: fixed; left: 50%; bottom: 16px;
  box-shadow: 0 10px 30px rgba(22,20,18,.22); z-index: 20;
  transform: translateX(-50%) translateY(0);
  opacity: 1; transition: opacity .3s ease, transform .3s ease;
}
/* Solange der CTA im Hero sichtbar ist, bleibt der feste Knopf unten weg,
   sonst stehen beide uebereinander und das sieht nach Fehler aus. */
.sticky-cta.weg { opacity: 0; transform: translateX(-50%) translateY(140%); pointer-events: none; }

.galerie {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  max-width: 940px; margin: 0 auto; padding: 0 16px;
}
.galerie img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; border-radius: 10px; }
@media (max-width: 560px) { .galerie { grid-template-columns: repeat(2, 1fr); } }

.ablauf ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.ablauf li { display: flex; gap: 16px; align-items: flex-start; }
.num {
  flex: 0 0 34px; height: 34px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--line); display: grid; place-items: center; font-size: 14px;
}
.ablauf p { margin: 0; color: #423d38; }

/* --- Kundenstimmen: Laufband ---------------------------------------------
   Zwei identische Spuren laufen nahtlos durch. Beruehrung oder Mauszeiger
   haelt an, damit man in Ruhe lesen kann. */
.stimmen { padding: 44px 0; overflow: hidden; }
.stimmen h2 { text-align: center; padding: 0 20px; }
.laufband { display: flex; align-items: center; gap: 14px; width: max-content; animation: laufen 90s linear infinite; }
.laufband:hover, .laufband:focus-within, .stimmen.angehalten .laufband { animation-play-state: paused; }
@keyframes laufen { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .laufband { animation: none; overflow-x: auto; width: auto; padding: 0 20px; scroll-snap-type: x mandatory; }
  .stimmen { overflow-x: auto; }
}
.stimme {
  margin: 0; flex: 0 0 auto; width: 340px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; scroll-snap-align: center;
}
@media (max-width: 420px) { .stimme { width: 82vw; max-width: 340px; } }
.stimme img { width: 100%; height: auto; display: block; }
/* Nachgebaute Chatblase, falls kein Screenshot vorliegt */
.stimme--chat { background: #e7ded3; padding: 14px; }
.blase {
  background: #fff; border-radius: 14px 14px 14px 4px; padding: 12px 14px;
  font-size: 14px; line-height: 1.5; box-shadow: 0 1px 1px rgba(22,20,18,.12);
}
.blase + .blase { margin-top: 8px; }
.blase--eigen { background: #dcf8c6; border-radius: 14px 14px 4px 14px; margin-left: 22px; }
.blase .zeit { display: block; text-align: right; font-size: 10px; color: var(--muted); margin-top: 4px; }
.stimme .name { display: block; padding: 10px 14px; font-size: 12px; color: var(--muted); background: var(--surface); }

/* --- Quiz ---------------------------------------------------------------- */
.fortschritt { height: 3px; background: var(--line); border-radius: 999px; overflow: hidden; margin: 0 0 24px; }
.fortschritt span { display: block; height: 100%; width: 0; background: var(--sand); transition: width .3s ease; }
#quizbox { min-height: 230px; overflow: hidden; }
.schritt { animation: einblenden .32s ease both; }
@keyframes einblenden { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.frage { font-size: 20px; font-weight: 500; margin: 0 0 20px; }
.optionen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.optionen--breit { grid-template-columns: 1fr; }
.option {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 0; overflow: hidden; cursor: pointer; text-align: left; font: inherit; color: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.option:active { transform: scale(.985); }
.option:hover { border-color: var(--sand); }
.option[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.option { display: flex; flex-direction: column; }
.option img { width: 100%; height: 190px; flex: 1 1 auto; min-height: 0; object-fit: cover; }
.option span { margin-top: auto; }
.option span { display: block; padding: 12px 14px; font-size: 14px; }

.feld { text-align: left; margin: 0 0 16px; }
.feld label { display: block; font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.feld input, .feld select {
  width: 100%; font: inherit; color: inherit; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px;
}
.feld input:focus, .feld select:focus { outline: 2px solid var(--sand); outline-offset: 1px; }
.tel { display: grid; grid-template-columns: 120px 1fr; gap: 8px; }
.hinweis { font-size: 12px; color: var(--muted); text-align: left; margin: 0 0 18px; }
.fehler { color: var(--error); font-size: 14px; }
.zurueck { background: none; border: 0; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; margin-top: 16px; }

.danke h2 { margin-bottom: 10px; }
.danke p { color: #423d38; }

.faq { text-align: left; }
.faq h2 { text-align: center; }
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; overflow: hidden; }
.faq .antwort { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq details[open] .antwort { grid-template-rows: 1fr; }
.faq details.schliesst .antwort { grid-template-rows: 0fr; }
.faq .antwort > div { overflow: hidden; }
.faq summary::after { transition: transform .25s ease; display: inline-block; }
.faq summary { cursor: pointer; font-weight: 500; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; color: var(--muted); }
.faq details[open] summary::after { content: '-'; }
.faq details p { margin: 12px 0 0; color: #423d38; }

/* Abschnitte sanft einblenden, sobald sie ins Bild kommen */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.reveal.da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .schritt, .sticky-cta, .faq .antwort { transition: none; animation: none; }
  .reveal { opacity: 1; transform: none; }
}

.fuss { text-align: center; padding: 36px 20px 110px; color: var(--muted); font-size: 13px; }
.fuss p { margin: 4px 0; }