/* Sandy – Website
   Dieselbe Sprache wie die App: Nunito in 800/900, flache Volltonflächen,
   harte Unterkanten statt Schatten, Orange und Himmelblau auf hellem Grund. */

@font-face {
  font-family: "Nunito";
  src: url("/schrift/Nunito.ttf") format("truetype");
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --grund: #E9EFF2;
  --flaeche: #FFFFFF;
  --tinte: #223039;
  --tinte-weich: #5C6F7A;
  --tinte-leise: #8496A0;
  --linie: #DCE8EE;
  --orange: #F59331;
  --orange-tief: #CE7420;
  --himmel: #4BB1E9;
  --himmel-tief: #2E90BF;
  --lila: #8B5CD6;
  --gruen: #4FA85F;
  --gruen-hell: #DBF2DE;
  --rot: #C74238;
  --rot-hell: #FCE5E1;
  --nacht: #2B3A48;
  --spalte: 1080px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-snap-type: y proximity; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: "Nunito", ui-rounded, system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
}
body.gesperrt { overflow: hidden; }

a { color: inherit; }
:focus-visible { outline: 3px solid var(--himmel-tief); outline-offset: 3px; border-radius: 10px; }
img { display: block; max-width: 100%; height: auto; }

.bahn { width: min(100% - 32px, var(--spalte)); margin-inline: auto; }

/* ---------- Kopf ---------- */

.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  pointer-events: none;
}
.marke {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; font-weight: 900; font-size: 22px;
  background: var(--flaeche); padding: 6px 16px 6px 6px; border-radius: 99px;
}
.marke img { width: 34px; height: 34px; border-radius: 10px; }

/* ---------- Feed ---------- */

.clip {
  min-height: 100svh;
  display: grid; place-items: center;
  padding: 72px 16px 24px;
  scroll-snap-align: start;
}
.video {
  position: relative;
  width: min(100%, 420px);
  height: min(80svh, 760px);
  border-radius: 32px;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 32px 76px 32px 28px;
  color: #fff;
}
.video h1, .video h2 {
  margin: 0; font-weight: 900; line-height: 1.02; letter-spacing: -0.02em;
  font-size: clamp(44px, 11vw, 64px);
}
.video p { margin: 16px 0 0; font-size: 20px; opacity: 0.9; }

.video.himmel { background: var(--himmel); }
.video.orange { background: var(--orange); }
.video.lila { background: var(--lila); }
.video.nacht { background: var(--nacht); }

/* Die Seitenleiste, an der man einen Feed sofort erkennt */
.leiste {
  position: absolute; right: 14px; bottom: 90px;
  display: flex; flex-direction: column; gap: 18px; align-items: center;
  font-size: 13px; font-weight: 900;
}
.leiste span { display: grid; justify-items: center; gap: 4px; }
.leiste svg { width: 34px; height: 34px; }
.unterzeile {
  position: absolute; left: 24px; bottom: 26px; right: 80px;
  font-size: 15px; font-weight: 800; opacity: 0.95;
}
.unterzeile b { display: block; font-weight: 900; font-size: 16px; }

/* Der erste Clip ist zugleich die Vorstellung */
/* Sandy im Fluss statt darübergelegt: Auf kurzen Handys rutschte der Text
   sonst unter die Figur. Die Figur nimmt, was an Höhe übrig bleibt. */
.video.start { background: var(--himmel); justify-content: flex-start; padding: 28px 28px 84px; }
.video.start .figur { flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; align-items: center; margin-bottom: 12px; }
.video.start .figur video { height: 100%; max-height: 400px; width: auto; }
.sandy-anim { display: block; background: transparent; }
.video.start h1 { font-size: clamp(40px, 10vw, 56px); }

.weiter-hinweis {
  position: absolute; left: 0; right: 0; bottom: 22px;
  text-align: center; font-size: 15px; font-weight: 900; color: #fff;
}
.weiter-hinweis svg { display: block; margin: 4px auto 0; width: 22px; height: 22px; animation: wippen 1.6s ease-in-out infinite; }
@keyframes wippen { 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .weiter-hinweis svg { animation: none; } }

/* ---------- Die Unterbrechung ---------- */

.stopp {
  position: fixed; inset: 0; z-index: 50;
  display: grid; align-items: end; justify-items: center;
  background: rgba(34, 48, 57, 0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.25s ease;
}
.stopp[hidden] { display: none; }
.stopp.offen { opacity: 1; }

.blatt {
  position: relative;
  width: min(100%, 520px);
  background: var(--grund);
  border-radius: 32px 32px 0 0;
  padding: 26px 20px calc(22px + env(safe-area-inset-bottom));
  transform: translateY(105%);
  transition: transform 0.55s cubic-bezier(0.2, 1.3, 0.35, 1);
}
.stopp.offen .blatt { transform: none; }
@media (prefers-reduced-motion: reduce) { .blatt { transition: none; } }

.balken { height: 16px; background: var(--linie); border-radius: 99px; overflow: hidden; margin: 0 4px 18px; }
.balken i { display: block; height: 100%; width: 12%; background: var(--gruen); border-radius: 99px; transition: width 0.5s ease; }

.frage-kopf { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 16px; }
.frage-kopf video { flex: none; width: 96px; height: auto; margin-bottom: -6px; }
.blase {
  position: relative; background: var(--flaeche); border-radius: 20px;
  padding: 14px 16px; font-size: 20px; font-weight: 900; line-height: 1.25;
  border: 2px solid var(--linie);
}
.blase small { display: block; font-size: 14px; font-weight: 800; color: var(--tinte-weich); margin-bottom: 4px; }

.antworten { display: grid; gap: 10px; }
.antwort {
  display: flex; align-items: center; gap: 12px; width: 100%;
  font: inherit; font-weight: 900; font-size: 18px; text-align: left; color: var(--tinte);
  background: var(--flaeche); border: 2px solid var(--linie); border-radius: 18px;
  padding: 12px 14px; box-shadow: 0 4px 0 var(--linie); cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.antwort:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--linie); }
.antwort kbd {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  border: 2px solid var(--linie); border-radius: 10px; font: inherit; font-size: 15px; color: var(--tinte-weich);
}
.antwort.richtig { background: var(--gruen-hell); border-color: var(--gruen); box-shadow: 0 4px 0 var(--gruen); }
.antwort.falsch { background: var(--rot-hell); border-color: var(--rot); box-shadow: 0 4px 0 var(--rot); }
.antwort:disabled { cursor: default; }

.rueckmeldung {
  margin: 16px -20px calc(-22px - env(safe-area-inset-bottom));
  padding: 18px 20px calc(22px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
}
.rueckmeldung[hidden] { display: none; }
.rueckmeldung.gut { background: var(--gruen-hell); color: #1F6B31; }
.rueckmeldung.schlecht { background: var(--rot-hell); color: #8E2A22; }
.rueckmeldung strong { display: block; font-size: 22px; font-weight: 900; }
.rueckmeldung p { margin: 4px 0 14px; font-size: 16px; }

.knopf {
  display: block; width: 100%; border: 0; cursor: pointer;
  font: inherit; font-size: 18px; font-weight: 900; color: #fff;
  background: var(--orange); border-radius: 18px; padding: 15px;
  box-shadow: 0 5px 0 var(--orange-tief);
  text-align: center; text-decoration: none;
}
.knopf:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--orange-tief); }
.gut .knopf { background: var(--gruen); box-shadow: 0 5px 0 #37803F; }
.schlecht .knopf { background: var(--rot); box-shadow: 0 5px 0 #943028; }

.ueberspringen {
  display: block; margin: 14px auto 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 800; color: var(--tinte-leise);
}

/* ---------- Inhalt nach der Unterbrechung ---------- */

.abschnitt { padding: 96px 0; }
.abschnitt + .abschnitt { padding-top: 24px; }

.gross {
  font-size: clamp(38px, 7vw, 76px); font-weight: 900; line-height: 1.02;
  letter-spacing: -0.025em; margin: 0 0 24px; max-width: 16ch;
}
.text { font-size: 20px; color: var(--tinte-weich); max-width: 36em; margin: 0; }

.danach { padding-top: 120px; }
.danach .gross { max-width: 14ch; }

.ablauf { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.ablauf li { background: var(--flaeche); border-radius: 28px; padding: 26px 24px 28px; display: grid; align-content: start; gap: 10px; }
.ablauf .nr {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  font-weight: 900; font-size: 20px; color: #fff; background: var(--himmel);
}
.ablauf li:nth-child(2) .nr { background: var(--lila); }
.ablauf li:nth-child(3) .nr { background: var(--orange); }
.ablauf h3 { margin: 6px 0 0; font-size: 24px; font-weight: 900; line-height: 1.15; }
.ablauf p { margin: 0; color: var(--tinte-weich); font-size: 17px; }

.zweispaltig { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.zweispaltig img { width: min(100%, 300px); justify-self: center; }

.stoff { background: var(--nacht); color: #fff; border-radius: 40px; padding: 64px 48px; }
.stoff .text { color: rgba(255, 255, 255, 0.78); }
.wege { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.wege span { padding: 10px 16px; border-radius: 99px; font-weight: 900; font-size: 16px; }
.wege span:nth-child(1) { background: #00958A; }
.wege span:nth-child(2) { background: var(--orange); }
.wege span:nth-child(3) { background: var(--lila); }

.eltern-liste { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; max-width: 34em; }
.eltern-liste li { display: flex; gap: 12px; align-items: flex-start; font-size: 18px; }
.eltern-liste svg { flex: none; width: 26px; height: 26px; color: var(--lila); margin-top: 1px; }

.preise { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.tarif { background: var(--flaeche); border-radius: 28px; padding: 30px 28px; border: 3px solid transparent; }
.tarif.plus { border-color: var(--orange); }
.tarif h3 { margin: 0; font-size: 26px; font-weight: 900; }
.tarif .preis { font-size: 40px; font-weight: 900; line-height: 1.1; margin: 10px 0 2px; }
.tarif .preis small { font-size: 18px; color: var(--tinte-weich); }
.tarif .zusatz { color: var(--tinte-weich); font-size: 16px; margin: 0 0 18px; }
.tarif ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.tarif li { display: flex; gap: 10px; font-size: 17px; }
.tarif li svg { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--gruen); }
.tarif.plus li svg { color: var(--orange); }

.daten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.daten div { border-top: 4px solid var(--himmel); padding-top: 16px; }
.daten h3 { margin: 0 0 6px; font-size: 21px; font-weight: 900; }
.daten p { margin: 0; color: var(--tinte-weich); font-size: 17px; }
.daten-link { display: inline-block; margin-top: 28px; font-weight: 900; color: var(--himmel-tief); }

.schluss { text-align: center; padding: 120px 0 80px; }
.schluss img { width: 150px; margin: 0 auto 20px; }
.schluss .gross { margin-inline: auto; }
.bald {
  display: inline-block; margin-top: 12px; padding: 16px 28px; border-radius: 18px;
  background: var(--tinte); color: #fff; font-weight: 900; font-size: 18px;
}

.fuss { padding: 28px 0 44px; color: var(--tinte-leise); font-size: 15px; }
.fuss .bahn { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.fuss nav { display: flex; gap: 20px; flex-wrap: wrap; }
.fuss a { color: var(--tinte-weich); font-weight: 800; }

@media (max-width: 820px) {
  .ablauf, .preise, .daten { grid-template-columns: 1fr; }
  .zweispaltig { grid-template-columns: 1fr; gap: 24px; }
  .zweispaltig img { width: 200px; }
  .stoff { padding: 44px 24px; border-radius: 32px; }
  .abschnitt { padding: 72px 0; }
  .video { padding-right: 70px; }
}

/* ---------- Rechtstexte ---------- */

.recht { padding: 110px 0 40px; }
.recht .bahn { max-width: 720px; }
.recht h1 { font-size: clamp(34px, 6vw, 52px); font-weight: 900; line-height: 1.05; margin: 0 0 8px; }
.recht .stand { color: var(--tinte-leise); margin-bottom: 36px; }
.recht h2 { font-size: 24px; font-weight: 900; margin: 40px 0 8px; }
.recht p, .recht li { color: var(--tinte-weich); font-weight: 600; font-size: 17px; line-height: 1.6; }
.recht p strong, .recht li strong { color: var(--tinte); font-weight: 800; }
.recht .kurz { background: var(--flaeche); border-radius: 24px; padding: 20px 24px; }
.recht .kurz p { margin: 6px 0; }
.recht address { font-style: normal; color: var(--tinte-weich); font-weight: 600; line-height: 1.6; }