/* Einfach Unvergesslich · Webinar-Anmeldung
   Mobil zuerst. Leitidee: Markus' Bühne und die Dinge, mit denen man sich etwas merkt
   (Klebezettel, Namensschild, Eintrittskarte). Marke nach unvergesslich.de: Montserrat,
   Grün für Knöpfe und Haken, Logo-Blau als Licht. Der Knopf im eingebetteten Formular
   kommt in Markus' WebinarGeek-Farbe (--knopf), bis dort Grün eingestellt ist. */

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/montserrat-italic-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("assets/fonts/caveat-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}

:root {
  --nacht: #081633;
  --nacht-2: #0E2452;
  --nacht-tief: #050F25;
  --licht: #3B95F0;
  --licht-blass: #A9CFF7;
  --knopf: #0062A2;
  --knopf-dunkel: #004C7F;
  --gruen: #05CF45;
  --gruen-mitte: #00B043;
  --gruen-tief: #00913A;
  --logo-blau: #057AE6;
  --papier: #FFFFFF;
  --nebel: #EEF3FA;
  --tinte: #13203B;
  --tinte-leise: #46526B;
  --linie: #D6DEEA;
  --zettel: #FFE27A;
  --zettel-rosa: #FFC7D3;
  --zettel-gruen: #CDEFC4;
  --schild: #D7263D;

  --schrift: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Caveat", "Bradley Hand", cursive;

  --rand: 18px;
  --breite: 1200px;
  --radius-gross: 24px;
  --radius: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--knopf); }
:focus-visible { outline: 3px solid var(--licht); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }

.rahmen { position: relative; width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.rahmen--schmal { max-width: 840px; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 62px; padding: 16px 32px;
  background: linear-gradient(180deg, #16CC57 0%, var(--gruen-mitte) 100%); color: #fff;
  font: 800 1.12rem/1.2 var(--schrift); letter-spacing: .005em;
  text-decoration: none; text-align: center; border-radius: 999px;
  text-shadow: 0 1px 1px rgba(0, 70, 25, .35);
  box-shadow: 0 18px 34px -16px rgba(0, 176, 67, .8), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,90,30,.25);
  transition: filter .15s ease, transform .15s ease;
}
.knopf:hover { filter: brightness(.94); }
.knopf:active { transform: translateY(1px); }
.knopf--voll { width: 100%; }
@media (max-width: 719px) {
  .knopf { width: 100%; padding: 16px 12px; font-size: 1rem; }
}
.knopfgruppe { margin-top: 34px; }
.knopfgruppe__beleg { margin-top: 12px; font-size: 1rem; color: var(--tinte-leise); }
.knopfgruppe--mitte { text-align: center; }

/* ---------- Haken-Listen ---------- */
.hakenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hakenliste li { position: relative; padding-left: 34px; }
.hakenliste li::before {
  content: ""; position: absolute; left: 0; top: .3em;
  width: 23px; height: 23px; border-radius: 50%;
  background: var(--gruen-mitte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
.hakenliste--hell li::before { background-color: var(--gruen); }

/* ---------- Gegenstände: Klebezettel und Namensschild ---------- */
.notiz {
  position: relative; display: inline-block;
  margin: 8px 0 0; padding: 4px 14px 6px;
  background: var(--zettel); color: #23232B;
  font: 700 1.45em/1.05 var(--hand);
  transform: rotate(-3deg);
  box-shadow: 0 10px 18px -10px rgba(0,0,0,.6);
  white-space: nowrap;
}
.notiz::before {
  /* Klebestreifen */
  content: ""; position: absolute; left: 50%; top: -9px; width: 54px; height: 18px; margin-left: -27px;
  background: rgba(255,255,255,.55); transform: rotate(4deg);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.namensschild {
  position: absolute; z-index: 2;
  width: 112px; border-radius: 10px; overflow: hidden;
  background: #fff; transform: rotate(5deg);
  box-shadow: 0 14px 24px -12px rgba(0,0,0,.75);
  text-align: center;
}
.namensschild small {
  display: block; padding: 5px 4px 4px; white-space: nowrap;
  background: var(--schild); color: #fff;
  font: 750 .72rem/1.15 var(--schrift);
}
.namensschild b {
  display: block; padding: 2px 6px 6px;
  font: 700 1.75rem/1.05 var(--hand); color: #1B2440;
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--nacht); color: #fff; isolation: isolate; }
.hero__licht {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 42% at 82% 6%, rgba(59,149,240,.62), transparent 72%),
    radial-gradient(70% 50% at 10% 100%, rgba(59,149,240,.18), transparent 70%),
    linear-gradient(180deg, var(--nacht) 0%, var(--nacht-tief) 100%);
}
.hero__foto {
  position: absolute; z-index: 0; margin: 0;
  top: 0; right: -16%; width: 80%; height: 460px;
}
.hero__foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 6%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 40%, transparent 97%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 40%, transparent 97%);
          mask-composite: intersect;
}
.hero .namensschild { left: auto; right: 23%; top: 150px; width: 98px; }
.hero .namensschild small { font-size: .6rem; }
.hero .namensschild b { font-size: 1.38rem; }

/* Kurzer Auftritt nach dem Laden: der Zettel klebt sich an, das Namensschild schwingt aus.
   Unter einer Sekunde, das Formular wartet nicht darauf. */
@media (prefers-reduced-motion: no-preference) {
  .hero__fuerwen .notiz { animation: notiz-kleben .55s cubic-bezier(.2,.9,.3,1.35) .45s both; }
  .hero__foto .namensschild { transform-origin: 50% -14px; animation: schild-schwingen 1.5s ease-out .8s both; }
}
@keyframes notiz-kleben {
  from { opacity: 0; transform: rotate(-11deg) scale(1.35); }
  to { opacity: 1; transform: rotate(-3deg) scale(1); }
}
@keyframes schild-schwingen {
  0% { opacity: 0; transform: rotate(-16deg); }
  12% { opacity: 1; }
  38% { transform: rotate(13deg); }
  60% { transform: rotate(1deg); }
  80% { transform: rotate(7deg); }
  100% { transform: rotate(5deg); }
}

.kopfzeile { position: relative; z-index: 2; padding: 16px 0 0; }
.kopfzeile__logo { width: 178px; }

.hero__raster { z-index: 1; display: grid; gap: 26px; padding-top: 18px; padding-bottom: 36px; }
.hero__badge {
  display: inline-block; margin: 0 0 14px; padding: 6px 12px;
  border: 1px solid rgba(169,207,247,.45); border-radius: 14px;
  background: rgba(8,22,51,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: .9rem; font-weight: 700; line-height: 1.25; color: #DCE9FA;
  max-width: 64%;
}
.hero__fuerwen { margin: 0 0 18px; max-width: 60%; font-size: 1.08rem; font-weight: 700; line-height: 1.35; color: var(--licht-blass); }
.hero__titel {
  margin: 0 0 16px;
  font-size: clamp(1.92rem, 1.3rem + 2.9vw, 3.45rem);
  line-height: 1.08; font-weight: 800; letter-spacing: -.028em;
  text-wrap: balance;
  text-shadow: 0 2px 22px rgba(5,15,37,.85);
}
.hero__sub { margin-bottom: 0; font-size: 1.12rem; line-height: 1.5; color: #E2ECF9; max-width: 34em; text-shadow: 0 1px 12px rgba(5,15,37,.9); }
/* Belege: feste Spalten, damit das Hochzählen nichts verschiebt */
.beweis {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; grid-template-columns: 1.3fr .95fr 1fr; gap: 12px;
}
.beweis li { display: grid; align-content: start; gap: 4px; min-width: 0; }
.beweis li + li { padding-left: 12px; border-left: 1px solid rgba(169,207,247,.28); }
.beweis__zahl {
  font-size: clamp(1.3rem, .95rem + 1.5vw, 2.2rem); line-height: 1; font-weight: 800;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; color: #fff;
  text-shadow: 0 1px 14px rgba(5,15,37,.9);
}
.beweis__text { max-width: 9.5em; font-size: .8rem; line-height: 1.3; font-weight: 600; color: var(--licht-blass); text-wrap: balance; }
/* Bis app.js zählt, unsichtbar; lädt das Skript nicht, erscheinen die Endwerte nach 3 Sekunden */
.js .beweis__zahl { opacity: 0; animation: beweis-zeigen .3s 3s forwards; }
.js .beweis--bereit .beweis__zahl { opacity: 1; animation: none; }
@keyframes beweis-zeigen { to { opacity: 1; } }

/* ---------- Eintrittskarte ---------- */
.ticket-huelle { filter: drop-shadow(0 28px 36px rgba(2, 8, 24, .55)); }
.ticket {
  --stub-h: 78px;
  --loch-y: calc(100% - var(--stub-h));
  position: relative; overflow: hidden;
  background: var(--papier); color: var(--tinte);
  border-radius: var(--radius-gross);
  scroll-margin-top: 20px;
  -webkit-mask:
    radial-gradient(circle 15px at 0 var(--loch-y), transparent 14px, #000 15px) left / 51% 100% no-repeat,
    radial-gradient(circle 15px at 100% var(--loch-y), transparent 14px, #000 15px) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle 15px at 0 var(--loch-y), transparent 14px, #000 15px) left / 51% 100% no-repeat,
    radial-gradient(circle 15px at 100% var(--loch-y), transparent 14px, #000 15px) right / 51% 100% no-repeat;
}
.ticket::before {
  /* Farbkante oben, wie bei einer gedruckten Karte */
  content: ""; position: absolute; inset: 0 0 auto; height: 7px;
  background: linear-gradient(90deg, var(--knopf), var(--licht));
}
.ticket__kopf { padding: 22px 20px 14px; border-bottom: 1px solid var(--linie); }
.ticket__titel { margin: 0 0 4px; font-size: 1.36rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.ticket__sub, .ticket__termin { margin: 0 0 12px; color: var(--tinte-leise); font-size: 1.02rem; }
.ticket__termin { position: relative; padding-left: 28px; color: var(--tinte); }
.ticket__termin::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='3' fill='none' stroke='%230062A2' stroke-width='2.2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4' stroke='%230062A2' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ticket__termin strong { color: var(--knopf); white-space: nowrap; }
/* Countdown unter dem Termin, gleiche Einrückung, Sanduhr statt Kalender */
.ticket__countdown { position: relative; margin: -6px 0 12px; padding-left: 28px; color: var(--tinte-leise); font-size: .95rem; }
.ticket__countdown::before {
  content: ""; position: absolute; left: 1px; top: .18em; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12M6 21h12M7 3c0 5 5 6 5 9s-5 4-5 9M17 3c0 5-5 6-5 9s5 4 5 9' fill='none' stroke='%230062A2' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ticket__countdown b { color: var(--tinte); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ticket__fakten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ticket__fakten li {
  font-size: .9rem; font-weight: 700; line-height: 1.2;
  padding: 7px 12px; border-radius: 999px;
  background: var(--nebel); color: var(--tinte);
}
/* Mobil eine Zeile Chips; wer am Handy ist, braucht den Geräte-Hinweis nicht. In der oberen Karte
   steht mobil stattdessen der Countdown, das hält das Formular im ersten Bildschirm. */
.ticket__fakten li:nth-child(3) { display: none; }
.hero .ticket__fakten { display: none; }
.ticket__form { position: relative; padding: 8px 10px 14px; min-height: 236px; }
.wg__laden { position: absolute; inset: 24px 22px auto; margin: 0; color: var(--tinte-leise); font-size: 1rem; }
.wg__notfall { margin: 12px 12px 0; font-size: 1rem; }
.ticket.ist-geladen .wg__laden { display: none; }
.ticket__abriss { height: 0; border-top: 2px dashed var(--linie); margin: 0 26px; }
.ticket__stub {
  height: var(--stub-h); margin: 0; padding: 0 22px;
  font-size: 1rem; font-weight: 750; line-height: 1.35; color: var(--tinte); text-wrap: balance;
  display: flex; align-items: center; gap: 12px;
}
.ticket__stub::before {
  /* drei Köpfe = viele Teilnehmer */
  content: ""; flex: none; width: 38px; height: 24px;
  background:
    radial-gradient(circle at 8px 12px, var(--licht) 7px, transparent 7.5px),
    radial-gradient(circle at 19px 12px, var(--knopf) 7px, transparent 7.5px),
    radial-gradient(circle at 30px 12px, var(--nacht) 7px, transparent 7.5px);
}
.ticket__stub--preis::before {
  /* Auszeichnung statt Köpfe, die Teilnehmerzahl steht im Hero schon groß */
  width: 30px; height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='18' r='11' fill='none' stroke='%230062A2' stroke-width='3.4'/%3E%3Cpath d='M17 27l-4 15 11-5 11 5-4-15' fill='none' stroke='%230062A2' stroke-width='3.4' stroke-linejoin='round'/%3E%3Cpath d='M19.5 18l3 3 6-6' fill='none' stroke='%230062A2' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Presse (im Hero, weiß auf Nacht) ---------- */
.presse { position: relative; z-index: 1; padding: 22px 0 26px; border-top: 1px solid rgba(169,207,247,.16); }
.presse__titel { text-align: center; font-size: .95rem; font-weight: 700; color: rgba(220,233,250,.75); margin-bottom: 14px; }
/* Alle Logos einfarbig weiß (ZDF, RTL, Focus als eigene weiße Fassung mit ausgestanzter Schrift),
   Höhe je Logo über --h, damit breite und runde gleich schwer wirken. */
.presse__logos {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 22px;
}
.presse__logos img {
  width: auto; height: auto; max-width: 100%; max-height: calc(var(--h, 1) * 22px);
  filter: brightness(0) invert(1); opacity: .8;
}

/* ---------- Versprechen ---------- */
.versprechen { position: relative; overflow: hidden; background: var(--papier); padding: 60px 0 52px; }
.versprechen__zitat { position: relative; margin: 0 auto; max-width: 940px; }
.versprechen__zitat { padding-top: 34px; }
.versprechen__zitat::before {
  content: "„"; position: absolute; left: -4px; top: -128px; z-index: 0;
  font: 700 11rem/1 var(--hand); color: var(--zettel);
  pointer-events: none;
}
.versprechen__zitat p {
  position: relative; z-index: 1;
  font-size: clamp(1.3rem, 1rem + 1.35vw, 2rem); line-height: 1.36; font-weight: 700; letter-spacing: -.018em;
  margin: 0 0 24px; text-wrap: pretty;
}
.versprechen__zitat footer { display: flex; align-items: center; gap: 14px; }
.versprechen__zitat footer img { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--licht); }
.versprechen__zitat footer span { display: grid; line-height: 1.35; color: var(--tinte-leise); font-size: 1rem; }
.versprechen__zitat footer strong { color: var(--tinte); font-size: 1.1rem; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: 64px 0; }
.abschnitt--nebel { background: var(--nebel); }
.abschnitt--nacht { background: var(--nacht); color: #fff; }
.abschnitt__kopf { max-width: 760px; margin-bottom: 30px; }
.abschnitt__titel {
  margin: 0 0 14px;
  font-size: clamp(1.65rem, 1.15rem + 2vw, 2.6rem);
  line-height: 1.14; font-weight: 800; letter-spacing: -.024em;
  text-wrap: balance;
}
.abschnitt__intro { font-size: 1.18rem; color: var(--tinte-leise); max-width: 36em; margin: 0; }

/* ---------- Vorher / Nachher ---------- */
.kontrast { background: linear-gradient(180deg, var(--nebel), #fff 60%); }
.kontrast__raster { display: grid; gap: 22px; }
.kontrast__marke {
  display: inline-block; align-self: flex-start; margin: 0 0 12px; padding: 5px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--linie);
  font-size: .9rem; font-weight: 750; color: var(--tinte-leise);
}
.kontrast__marke--hell { background: rgba(59,149,240,.18); border-color: rgba(169,207,247,.35); color: var(--licht-blass); }
.kuehlschrank { margin: 0; }
.kuehlschrank__tuer {
  position: relative;
  min-height: 340px;
  border-radius: 28px;
  background:
    linear-gradient(105deg, rgba(255,255,255,0) 0 58%, rgba(255,255,255,.65) 64%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, #FBFCFD 0%, #E9EEF4 70%, #DCE3EB 100%);
  box-shadow: inset 0 0 0 1px rgba(19,32,59,.08), inset 0 -10px 24px rgba(19,32,59,.05), 0 30px 50px -36px rgba(19,32,59,.55);
  overflow: hidden;
}
.kuehlschrank__tuer::after {
  /* Griff */
  content: ""; position: absolute; right: 12px; top: 14%; width: 10px; height: 46%;
  border-radius: 8px; background: linear-gradient(90deg, #B9C3D0, #F2F5F8 55%, #C8D1DC);
  box-shadow: 0 2px 4px rgba(0,0,0,.18);
}
.zettel {
  position: absolute;
  width: 44%; max-width: 220px; min-height: 92px;
  padding: 16px 14px 12px;
  font: 600 1.42rem/1.1 var(--hand); color: #26262E;
  background: var(--zettel);
  box-shadow: 0 12px 16px -12px rgba(0,0,0,.5);
}
.zettel::before {
  /* Magnet */
  content: ""; position: absolute; top: -7px; left: 50%; width: 17px; height: 17px; margin-left: -8px;
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FF8E8E, #C42B36);
  box-shadow: 0 2px 3px rgba(0,0,0,.3);
}
.zettel--1 { left: 5%;  top: 6%;  rotate: -4deg; }
.zettel--2 { left: 50%; top: 4%;  rotate: 3deg; background: var(--zettel-rosa); }
.zettel--3 { left: 6%;  top: 37%; rotate: 2.5deg; }
.zettel--4 { left: 49%; top: 36%; rotate: -3deg; background: var(--zettel-gruen); }
.zettel--5 { left: 4%;  top: 68%; rotate: -2deg; background: var(--zettel-rosa); }
.zettel--6 { left: 48%; top: 67%; rotate: 4deg; }
.zettel--2::before, .zettel--5::before { background: radial-gradient(circle at 35% 35%, #8EC3FF, #1F6FD1); }
.kuehlschrank figcaption { margin-top: 14px; font-size: 1.04rem; color: var(--tinte-leise); }

.nachher {
  position: relative; overflow: hidden;
  padding: 26px 22px 28px; border-radius: 28px;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(59,149,240,.42), transparent 70%),
    var(--nacht);
  color: #fff;
  box-shadow: 0 34px 60px -40px rgba(8,22,51,.9);
}
.nachher__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.nachher__liste li {
  position: relative; padding: 15px 16px 15px 56px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.07); border: 1px solid rgba(169,207,247,.18);
  font-size: 1.12rem; line-height: 1.4; color: #E6EEF9;
}
.nachher__liste strong { color: #fff; }
.nachher__liste li::before {
  content: ""; position: absolute; left: 15px; top: 50%; margin-top: -14px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
.nachher .knopfgruppe__beleg { color: var(--licht-blass); }

/* Die eine Bewegung der Seite: Die Zettel kleben sich nacheinander an die Tür, danach erscheint
   rechts die Antwort. Endzustand ist das volle Vorher-Bild. */
.js .kontrast .zettel { opacity: 0; translate: 0 -20px; }
.js .kontrast.ist-sichtbar .zettel { opacity: 1; translate: 0 0; transition: opacity .35s ease, translate .5s cubic-bezier(.2,.9,.25,1.3); }
.js .kontrast.ist-sichtbar .zettel--1 { transition-delay: .1s; }
.js .kontrast.ist-sichtbar .zettel--2 { transition-delay: .28s; }
.js .kontrast.ist-sichtbar .zettel--3 { transition-delay: .46s; }
.js .kontrast.ist-sichtbar .zettel--4 { transition-delay: .64s; }
.js .kontrast.ist-sichtbar .zettel--5 { transition-delay: .82s; }
.js .kontrast.ist-sichtbar .zettel--6 { transition-delay: 1s; }
.js .kontrast .nachher__liste li { opacity: 0; translate: 0 10px; transition: opacity .45s ease, translate .45s ease; }
.js .kontrast.ist-sichtbar .nachher__liste li { opacity: 1; translate: 0 0; }
.js .kontrast.ist-sichtbar .nachher__liste li:nth-child(1) { transition-delay: 1.35s; }
.js .kontrast.ist-sichtbar .nachher__liste li:nth-child(2) { transition-delay: 1.55s; }
.js .kontrast.ist-sichtbar .nachher__liste li:nth-child(3) { transition-delay: 1.75s; }
.js .kontrast.ist-sichtbar .nachher__liste li:nth-child(4) { transition-delay: 1.95s; }
@media (prefers-reduced-motion: reduce) {
  .js .kontrast .zettel, .js .kontrast .nachher__liste li { opacity: 1; translate: none; transition: none !important; }
}

/* ---------- Mechanismus ---------- */
.prinzip { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 0; counter-reset: p; }
.prinzip li {
  position: relative; display: grid; grid-template-columns: 64px 1fr; column-gap: 16px;
  padding: 0 0 26px; align-items: start; align-content: start;
}
.prinzip li::after {
  /* gestrichelte Linie zum nächsten Schritt */
  content: ""; position: absolute; left: 31px; top: 66px; bottom: 4px;
  border-left: 2px dashed #B7C7DD;
}
.prinzip li:last-child { padding-bottom: 0; }
.prinzip li:last-child::after { display: none; }
.prinzip__zeichen {
  grid-row: span 2; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--knopf);
  box-shadow: 0 10px 22px -14px rgba(19,32,59,.6), inset 0 0 0 2px #CFE0F3;
}
.prinzip__zeichen svg { width: 32px; height: 32px; }
.prinzip li:last-child .prinzip__zeichen { background: var(--knopf); color: #fff; box-shadow: 0 12px 24px -12px rgba(0,98,162,.9); }
.prinzip strong { font-size: 1.18rem; font-weight: 800; line-height: 1.2; padding-top: 8px; }
.prinzip span:not(.prinzip__zeichen) { color: var(--tinte-leise); font-size: 1.05rem; line-height: 1.4; }

/* Der Weg baut sich auf, sobald er im Bild ist: Station für Station, die Linie zieht nach,
   am Ziel ein Ring um den Haken. --i ist die Station, app.js setzt .ist-sichtbar. */
.prinzip li:nth-child(2) { --i: 1; }
.prinzip li:nth-child(3) { --i: 2; }
.prinzip li:nth-child(4) { --i: 3; }
.js .prinzip__zeichen { opacity: 0; scale: .55; transition: opacity .3s ease, scale .5s cubic-bezier(.2,.9,.25,1.4); }
.js .prinzip strong, .js .prinzip span:not(.prinzip__zeichen) { opacity: 0; translate: 0 8px; transition: opacity .4s ease, translate .4s ease; }
.js .prinzip li::after { scale: 1 0; transform-origin: top; transition: scale .45s ease-in-out; }
.js .prinzip.ist-sichtbar .prinzip__zeichen,
.js .prinzip.ist-sichtbar strong,
.js .prinzip.ist-sichtbar span:not(.prinzip__zeichen) { opacity: 1; scale: 1; translate: 0 0; transition-delay: calc(var(--i, 0) * .55s); }
.js .prinzip.ist-sichtbar li::after { scale: 1 1; transition-delay: calc(var(--i, 0) * .55s + .3s); }
.js .prinzip.ist-sichtbar li:last-child .prinzip__zeichen { animation: prinzip-ring 1s ease-out 2.1s 1; }
@keyframes prinzip-ring {
  from { box-shadow: 0 12px 24px -12px rgba(0,98,162,.9), 0 0 0 0 rgba(0,98,162,.45); }
  to { box-shadow: 0 12px 24px -12px rgba(0,98,162,.9), 0 0 0 18px rgba(0,98,162,0); }
}
@media (prefers-reduced-motion: reduce) {
  .js .prinzip__zeichen, .js .prinzip strong, .js .prinzip span:not(.prinzip__zeichen), .js .prinzip li::after {
    opacity: 1; scale: none; translate: none; transition: none !important; animation: none !important;
  }
}

.programm {
  display: grid; gap: 18px;
  padding: 22px; border-radius: var(--radius-gross);
  background: #fff; box-shadow: 0 30px 60px -44px rgba(19,32,59,.7);
}
.programm img { width: 100%; max-width: 440px; margin: 0 auto; }
.programm__titel { font-size: 1.28rem; font-weight: 800; margin-bottom: 12px; }

/* ---------- Ablauf ---------- */
.ablauf__weg { list-style: none; counter-reset: schritt; margin: 26px 0 0; padding: 0; display: grid; gap: 0; }
.ablauf__weg li {
  counter-increment: schritt; position: relative;
  padding: 0 0 28px 76px;
}
.ablauf__weg li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: 0;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--nacht); color: #fff; font-weight: 850; font-size: 1.4rem;
  box-shadow: 0 0 0 6px #fff, 0 0 0 8px #CFE0F3;
}
.ablauf__weg li::after {
  content: ""; position: absolute; left: 26px; top: 64px; bottom: 6px;
  border-left: 2px dashed #B7C7DD;
}
.ablauf__weg li:last-child { padding-bottom: 0; }
.ablauf__weg li:last-child::after { display: none; }
.ablauf__name { font-size: 1.2rem; font-weight: 800; margin: 10px 0 4px; }
.ablauf__weg p:not(.ablauf__name) { color: var(--tinte-leise); }

/* ---------- Markus ---------- */
.markus { position: relative; overflow: hidden; }
.markus::before {
  content: ""; position: absolute; inset: -30% -20% auto auto; width: 80%; height: 80%;
  background: radial-gradient(closest-side, rgba(59,149,240,.34), transparent);
  pointer-events: none;
}
.markus__kopf { display: grid; gap: 6px; }
.markus__text p { font-size: 1.18rem; color: #E2ECF9; max-width: 36em; }
.markus__arena { position: relative; margin: 30px 0 0; border-radius: var(--radius-gross); overflow: hidden; }
.markus__arena img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.markus__belege { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 18px; }
.markus__belege li { display: grid; gap: 2px; padding-top: 16px; border-top: 1px solid rgba(169,207,247,.22); }
.markus__belege b { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.1rem); line-height: 1; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.markus__belege span { color: var(--licht-blass); font-size: 1.05rem; line-height: 1.4; }
.markus__belege .pfeil { display: inline-block; width: .62em; height: .62em; margin: 0 .04em; vertical-align: .08em; color: var(--licht); }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Das Arena-Foto zoomt beim Scrollen langsam auf, wo der Browser scrollgebundene Animation kann */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .markus__arena img { animation: arena-zoom linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
  }
}
@keyframes arena-zoom { from { scale: 1.14; } to { scale: 1; } }
.markus__preis {
  display: flex; align-items: center; gap: 12px; margin: 28px 0 0;
  font-weight: 750; color: #fff;
}
.markus__preis::before {
  content: ""; flex: none; width: 40px; height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='18' r='11' fill='none' stroke='%23A9CFF7' stroke-width='3'/%3E%3Cpath d='M17 27l-4 15 11-5 11 5-4-15' fill='none' stroke='%23A9CFF7' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M19.5 18l3 3 6-6' fill='none' stroke='%23A9CFF7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Stimmen ---------- */
.stimmen__wand { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.stimme {
  padding: 22px; border-radius: var(--radius);
  background: var(--papier); border: 1px solid var(--linie);
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
}
.stimme__text { margin: 0; font-size: 1.12rem; line-height: 1.45; font-weight: 700; }
.stimme--gross {
  border: 0; color: #fff;
  background: radial-gradient(90% 70% at 100% 0%, rgba(59,149,240,.38), transparent 70%), var(--nacht);
  box-shadow: 0 30px 50px -40px rgba(8,22,51,.9);
}
.stimme--gross .stimme__text { font-size: clamp(1.3rem, 1.05rem + .9vw, 1.7rem); line-height: 1.3; font-weight: 800; letter-spacing: -.02em; }
.stimme__kontext { margin: -6px 0 0; font-size: 1.02rem; line-height: 1.45; color: #C9D7EC; }
.stimme__wer { margin: 0; display: flex; align-items: center; gap: 12px; font-size: .98rem; line-height: 1.3; color: var(--tinte-leise); }
.stimme__wer img { width: 52px; height: 52px; border-radius: 50%; flex: none; }
.stimme__wer span { display: grid; }
.stimme__wer strong { color: var(--tinte); }
.stimme--gross .stimme__wer { color: #C9D7EC; }
.stimme--gross .stimme__wer strong { color: #fff; }
.stimmen__punkte { display: none; }

/* Handy: Stimmen als Reihe zum Wischen, die nächste Karte schaut an. Spart gut zwei Bildschirme. */
@media (max-width: 719px) {
  .stimmen__wand {
    grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-left: calc(-1 * var(--rand)); margin-right: calc(-1 * var(--rand));
    padding: 4px var(--rand) 20px; scroll-padding: 0 var(--rand);
    scrollbar-width: none;
  }
  .stimmen__wand::-webkit-scrollbar { display: none; }
  .stimme { scroll-snap-align: start; }
  .stimmen__punkte { display: flex; justify-content: center; gap: 8px; margin-top: 2px; }
  .stimmen__punkte span { width: 8px; height: 8px; border-radius: 999px; background: var(--linie); transition: width .25s ease, background-color .25s ease; }
  .stimmen__punkte span.ist-aktiv { width: 22px; background: var(--knopf); }
}

/* ---------- Fragen ---------- */
.fragen__liste { margin-top: 24px; display: grid; gap: 12px; }
.fragen details { background: var(--papier); border-radius: var(--radius); border: 1px solid var(--linie); }
.fragen details[open] { border-color: #B7CDE6; box-shadow: 0 16px 30px -26px rgba(19,32,59,.6); }
.fragen summary {
  list-style: none; cursor: pointer;
  padding: 19px 58px 19px 20px; position: relative;
  font-size: 1.16rem; font-weight: 750; line-height: 1.35;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 30px; height: 30px; margin-top: -15px;
  border-radius: 50%; background: var(--nebel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' fill='none' stroke='%230062A2' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat;
  transition: transform .2s ease;
}
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen details p { padding: 0 20px 20px; margin: 0; font-size: 1.1rem; color: var(--tinte-leise); }

/* ---------- Schluss ---------- */
.schluss {
  position: relative; overflow: hidden;
  background:
    radial-gradient(50% 55% at 85% 0%, rgba(59,149,240,.5), transparent 70%),
    radial-gradient(45% 50% at 0% 100%, rgba(59,149,240,.2), transparent 70%),
    var(--nacht);
  color: #fff; padding: 64px 0 76px;
}
.schluss__raster { display: grid; gap: 30px; align-items: center; }
.schluss__titel {
  margin: 0 0 14px; font-size: clamp(2rem, 1.35rem + 2.7vw, 3.3rem);
  line-height: 1.06; font-weight: 800; letter-spacing: -.03em; text-wrap: balance;
}
.schluss__text p { font-size: 1.18rem; color: #E2ECF9; margin-bottom: 20px; }

/* ---------- Fußzeile ---------- */
.fuss { background: var(--nacht-tief); color: #AFC0DA; padding: 34px 0 132px; font-size: .98rem; }
.fuss__innen { display: grid; gap: 16px; justify-items: start; }
.fuss__innen img { width: 170px; }
.fuss__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fuss__links a { color: #DCE7F7; }
.fuss__copy { margin: 0; }

/* ---------- Mobile Leiste ---------- */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 10px var(--rand) calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 -12px 30px -18px rgba(3,10,30,.6);
  transform: translateY(110%); transition: transform .25s ease;
}
.leiste.ist-an { transform: none; }
.leiste__termin { margin: 0 0 8px; text-align: center; font-size: .95rem; color: var(--tinte-leise); }
.leiste__termin strong { color: var(--knopf); }
.leiste .knopf { min-height: 56px; }
@media (prefers-reduced-motion: reduce) { .leiste { transition: none; } }

/* ---------- Danke-Seite ---------- */
.knopf--rand {
  background: transparent; color: var(--tinte); text-shadow: none;
  box-shadow: inset 0 0 0 2px var(--linie);
  font: 800 1.05rem/1.2 var(--schrift); cursor: pointer;
}
.knopf--rand:hover { filter: none; box-shadow: inset 0 0 0 2px var(--gruen-mitte); }
button.knopf { border: 0; }

.danke__raster { z-index: 1; display: grid; gap: 30px; padding-top: 26px; padding-bottom: 56px; align-items: center; }
.danke__haken {
  width: 64px; height: 64px; margin: 0 0 18px; border-radius: 50%;
  background: var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/36px no-repeat;
  box-shadow: 0 0 0 8px rgba(5,207,69,.18), 0 18px 34px -14px rgba(5,207,69,.8);
}
.danke__titel {
  margin: 0 0 14px; font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
  line-height: 1.02; font-weight: 800; letter-spacing: -.03em;
}
.danke__sub { font-size: 1.15rem; line-height: 1.55; color: #E2ECF9; max-width: 30em; margin: 0; }

.ticket--bestaetigt { --stub-h: 74px; }
.stempel {
  position: absolute; z-index: 2; top: 22px; right: 16px;
  padding: 6px 10px; border: 3px solid var(--gruen-tief); border-radius: 8px;
  color: var(--gruen-tief); font: 800 .78rem/1 var(--schrift); letter-spacing: .02em;
  transform: rotate(8deg); opacity: .9;
}
.ticket--bestaetigt .ticket__titel { padding-right: 120px; }
.termin__datum { margin: 8px 0 0; font-size: 1.3rem; font-weight: 800; line-height: 1.3; color: var(--tinte); }
.termin__ohne { margin: 8px 0 0; color: var(--tinte-leise); }

.countdown { padding: 18px 20px 4px; }
.countdown__titel { margin: 0 0 10px; font-size: .95rem; font-weight: 700; color: var(--tinte-leise); }
.countdown__felder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.countdown__felder li {
  display: grid; justify-items: center; padding: 10px 4px 8px; border-radius: 12px;
  background: var(--nacht); color: #fff;
}
.countdown__felder b { font-size: 1.7rem; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; }
.countdown__felder span { font-size: .78rem; font-weight: 600; color: var(--licht-blass); }

.kalender { padding: 18px 20px 18px; }
.kalender__titel { margin: 0 0 10px; font-weight: 800; }
.kalender__knoepfe { display: grid; gap: 10px; }
.kalender__knopf { min-height: 54px; padding: 12px 16px; font-size: 1rem; width: 100%; }
.kalender__hinweis { margin: 10px 0 0; font-size: .95rem; color: var(--tinte-leise); }

.ticket__stub--link { display: flex; align-items: center; font-weight: 600; }
.ticket__stub--link::before { display: none; }
.ticket__stub--link p { margin: 0; }
.ticket__stub--link a { font-weight: 800; color: var(--knopf); }

.danke__schritte .ablauf__weg { margin-top: 18px; }
.danke__erwartung-raster { display: grid; gap: 30px; align-items: center; }
.danke__erwartung .hakenliste { font-size: 1.12rem; }
.danke__tipp { margin: 26px 0 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--tinte); font-weight: 600; }
.danke__tipp .notiz { margin: 0; font-size: 1.5rem; }
.danke__markus { margin: 0; border-radius: var(--radius-gross); overflow: hidden; box-shadow: 0 30px 60px -40px rgba(8,22,51,.8); }
.danke__markus img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.teilen { text-align: center; }
.teilen .abschnitt__intro { margin: 0 auto; }
.teilen__knoepfe { display: grid; gap: 12px; justify-content: center; margin-top: 26px; }
.teilen__whatsapp::before {
  content: ""; width: 24px; height: 24px; margin-right: 10px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 0 0-7.8 13.5L3 21l4.6-1.2A9 9 0 1 0 12 3z' fill='none' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M9 8.5c0 3.5 2.6 6.4 6.3 6.6l1-1.6-2-1-1 .9c-1-.5-2.2-1.7-2.7-2.7l.9-1-1-2-1.5 1z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;
}
.teilen__status { margin-top: 14px; color: var(--tinte-leise); font-size: 1rem; word-break: break-all; }
.danke .fuss { padding-bottom: 40px; }

/* ---------- Kleine Handys ---------- */
@media (max-width: 360px) {
  :root { --rand: 14px; }
  .hero__badge, .hero__fuerwen { max-width: 66%; }
  .hero .namensschild { display: none; }
  .ticket__fakten li { font-size: .8rem; padding: 6px 10px; }
}

/* ---------- Ab Tablet ---------- */
@media (min-width: 720px) {
  :root { --rand: 32px; }
  body { font-size: 1.2rem; }
  .hero__foto { right: -6%; width: 62%; height: 560px; }
  .hero .namensschild { left: auto; right: 12%; top: 250px; width: 104px; }
  .hero__badge, .hero__fuerwen { max-width: 52%; }
  .hero__titel { max-width: 16em; }
  .presse__logos { flex-wrap: nowrap; justify-content: space-between; gap: 24px; }
  .presse__logos img { max-height: calc(var(--h, 1) * 30px); }
  .stimmen__wand { grid-template-columns: 1fr 1fr; }
  .stimme--gross { grid-column: span 2; }
  .markus__belege { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .beweis { gap: 22px; }
  .beweis li + li { padding-left: 22px; }
  .beweis__text { font-size: .92rem; }
  .abschnitt { padding: 92px 0; }
  .ticket__kopf { padding: 26px 28px 18px; }
  .ticket__fakten li:nth-child(3) { display: list-item; }
  .hero .ticket__fakten { display: flex; }
  .ticket__stub { padding: 0 28px; }
  .ticket__abriss { margin: 0 30px; }
  .programm { grid-template-columns: .9fr 1.1fr; align-items: center; padding: 30px; gap: 34px; }
  .prinzip { grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 44px; }
  .prinzip li { grid-template-columns: 1fr; padding: 0; justify-items: start; }
  .prinzip li::after { left: 76px; right: -10px; top: 31px; bottom: auto; border-left: 0; border-top: 2px dashed #B7C7DD; }
  .js .prinzip li::after { scale: 0 1; transform-origin: left; }
  .js .prinzip.ist-sichtbar li::after { scale: 1 1; }
  .prinzip__zeichen { grid-row: auto; margin-bottom: 12px; }
  .prinzip strong { padding-top: 0; }
  .ablauf__weg { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .ablauf__weg li { padding: 76px 0 0; }
  .ablauf__weg li::after { left: 74px; right: -14px; top: 26px; bottom: auto; border-left: 0; border-top: 2px dashed #B7C7DD; }
}

/* Danke-Seite ab Tablet */
@media (min-width: 720px) {
  .teilen__knoepfe { grid-auto-flow: column; }
  .countdown, .kalender { padding-left: 28px; padding-right: 28px; }
}

/* ---------- Desktop ---------- */
@media (min-width: 1000px) {
  .kopfzeile { padding-top: 26px; }
  .kopfzeile__logo { width: 230px; }

  .hero__foto { top: 0; bottom: 0; right: 0; width: 54%; height: auto; }
  .hero__foto img {
    object-position: 58% 4%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(180deg, #000 62%, transparent 94%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(180deg, #000 62%, transparent 94%);
  }
  .hero .namensschild { left: auto; right: 3%; top: 232px; width: 120px; }
  .hero .namensschild small { font-size: .74rem; }
  .hero .namensschild b { font-size: 1.8rem; }

  .hero__raster {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 40px;
    align-items: start; padding-top: 34px; padding-bottom: 56px;
  }
  .hero__text { padding-top: 12px; }
  .hero__badge, .hero__fuerwen { max-width: none; }
  .hero__badge { font-size: .95rem; padding: 7px 14px; margin-bottom: 18px; }
  .hero__fuerwen { font-size: 1.2rem; margin-bottom: 20px; }
  .hero__titel { max-width: 13em; }
  .hero__sub { font-size: 1.28rem; max-width: 31em; }
  .beweis { margin-top: 34px; gap: 26px; max-width: 34em; }
  .beweis li + li { padding-left: 26px; }
  .beweis__text { font-size: 1rem; }
  .hero__karte { padding-top: 250px; justify-self: end; width: 100%; max-width: 450px; }

  .kontrast__raster { grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: stretch; }
  .kuehlschrank { display: flex; flex-direction: column; }
  .kuehlschrank__tuer { flex: 1; min-height: 440px; }
  .zettel { font-size: 1.62rem; }
  .nachher { padding: 34px 32px 34px; display: flex; flex-direction: column; }
  .nachher .knopfgruppe { margin-top: auto; padding-top: 30px; }

  .markus__kopf { grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }

  .stimmen__wand { grid-template-columns: repeat(4, 1fr); }
  .stimme--gross { min-height: 260px; padding: 30px; }

  .schluss__raster { grid-template-columns: 1fr 450px; gap: 72px; }
  .fuss { padding-bottom: 40px; }
  .fuss__innen { grid-template-columns: auto 1fr auto; align-items: center; }
  .fuss__links { justify-content: center; }
  .leiste { display: none; }

  .danke__raster { grid-template-columns: 1fr 470px; gap: 64px; padding-top: 50px; padding-bottom: 84px; }
  .danke__erwartung-raster { grid-template-columns: 1fr 1fr; gap: 64px; }
}

@media (min-width: 1440px) {
  .hero__foto { width: 52%; }
}


/* ---------- Hero-Umbau Desktop (07.10.2026) ----------
   Michaels Einwand: Karte 250 px nach unten gerückt, links leeres Blau unter dem Text. Jetzt sitzt die Karte
   oben bündig, Markus steht als Freisteller zwischen Text und Karte, der Text ist zur Karte zentriert.
   Bewusst als Ergänzung ans Ende gestellt, die Regeln oben bleiben unverändert und werden hier überschrieben. */
@media (min-width: 1000px) {
  .hero__foto {
    top: 0; bottom: 0; right: auto; left: var(--kopf, calc(50% + 60px)); width: auto; height: auto;
    translate: -58% 0;
  }
  .hero__foto img {
    width: auto; height: 100%; object-fit: contain; object-position: 50% 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 30%, #000 70%, transparent 96%), linear-gradient(180deg, #000 58%, transparent 88%);
            mask-image: linear-gradient(90deg, transparent 4%, #000 30%, #000 70%, transparent 96%), linear-gradient(180deg, #000 58%, transparent 88%);
  }
  /* Namensschild sitzt wie ein echtes auf dem Revers, rechts neben dem Text, links von der Karte */
  .hero .namensschild { left: 45%; right: auto; top: 46%; width: 120px; rotate: -6deg; }
  .hero__raster {
    grid-template-columns: minmax(0, 1fr) 420px; gap: clamp(140px, 15vw, 200px);
    align-items: center;
  }
  .hero__text { padding-top: 0; }
  /* Etwas kleiner als auf Tablet-Breite, damit auch die lange Headline der Startseite in die Spalte neben Markus passt */
  .hero__titel { max-width: none; font-size: clamp(2.4rem, 1.4rem + 1.6vw, 3.1rem); }
  .hero__karte { padding-top: 0; max-width: 420px; }
}
@media (min-width: 1000px) and (max-width: 1263px) {
  .hero { --kopf: calc(50% - 10px); }  /* Kopf etwas nach links, damit er nicht hinter die Karte gerät */
}
@media (min-width: 1440px) {
  .hero__foto { width: auto; }
}

/* ---------- Rechtsseiten (Datenschutz) ---------- */
.recht .fuss { padding-bottom: 40px; }
.recht__hero { padding-bottom: 44px; }
.recht__kopf { z-index: 1; padding-top: 34px; }
.recht__titel {
  margin: 0 0 10px;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem);
  line-height: 1.1; font-weight: 800; letter-spacing: -.024em;
}
.recht__sub { margin: 0; color: var(--licht-blass); font-size: 1.05rem; }
.recht__text { font-size: 1.02rem; line-height: 1.66; }
.recht__text h2 { margin: 48px 0 14px; font-size: 1.55rem; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
.recht__text h2:first-child { margin-top: 0; }
.recht__text h3 { margin: 30px 0 8px; font-size: 1.18rem; font-weight: 750; line-height: 1.3; }
.recht__text h4 { margin: 20px 0 6px; font-size: 1.02rem; font-weight: 700; }
.recht__text p { margin: 0 0 12px; }
.recht__text ul { margin: 0 0 12px; padding-left: 22px; }
.recht__text li { margin-bottom: 6px; }
.recht__text a { color: var(--knopf); font-weight: 600; overflow-wrap: anywhere; }