/* =========================================================================
   Yvonne Schönau · Website-Designsystem
   Gilt für yvonneschoenau.com. Nachschlagen: /design-guide/
   Performance-Seiten (workshop.yvonneschoenau.com) nutzen dieselben Farben
   und Schriften, dürfen zusätzlich Anton und Signalrot einsetzen.
   ========================================================================= */

:root{
  /* Farben */
  --nacht:#1C0508;        /* dunkelster Grund, Hero und dunkle Sektionen */
  --bordeaux:#4A0E16;     /* Markenfarbe, Headlines auf hell, Flächen */
  --bordeaux-tief:#36090F;
  --creme:#F7F1EA;        /* heller Grund, Text auf dunkel */
  --sand:#EAE0D3;         /* zweiter heller Grund, Linien */
  --weiss:#FFFFFF;        /* nur Karten auf Creme oder Sand */
  --gold:#C6A15A;         /* Akzent auf dunkel, Linien, Buttons */
  --gold-hell:#E6CF9A;
  --gold-tief:#8A6A2B;    /* Gold für Text auf hell */
  --rose:#C99A93;         /* leiser Akzent auf dunkel */
  --tinte:#231A1C;        /* Fließtext auf hell, Unternehmens-Band */
  --grau:#6A5E5A;         /* Nebentext auf hell */

  /* Schriften */
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Mulish',system-ui,-apple-system,sans-serif;

  /* Maße */
  --breite:1160px;
  --lesebreite:680px;
  --rand:26px;
  --abstand:128px;        /* Sektionsabstand Desktop */
  --radius:3px;           /* Bilder und Karten */
  --pille:3px;            /* Buttons und Chips: gleiche Rundung wie Bilder */
  --goldverlauf:linear-gradient(100deg,#E6CF9A 0%,#C6A15A 48%,#A9853F 100%);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-weight:400;font-size:19px;line-height:1.75;color:var(--tinte);background:var(--creme);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.schmal{max-width:var(--lesebreite)}
.mitte{margin-left:auto;margin-right:auto}

/* ---------- Typografie ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--bordeaux);text-wrap:balance}
h1,.h1{font-size:clamp(33px,4.5vw,64px);line-height:1.12;letter-spacing:.035em;text-transform:uppercase}
h2,.h2{font-size:clamp(27px,3.3vw,46px);line-height:1.16;letter-spacing:.04em;text-transform:uppercase}
h3,.h3{font-size:clamp(21px,2.1vw,27px);line-height:1.3;letter-spacing:.03em;text-transform:uppercase}
p{margin-bottom:1.15em}
p:last-child{margin-bottom:0}
strong{font-weight:800}
.label{display:block;font-family:var(--sans);font-size:12.5px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-tief);margin-bottom:22px}
.lead{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(20px,1.9vw,25px);line-height:1.55;color:var(--bordeaux)}
.frage{font-family:var(--serif);font-weight:600;font-size:clamp(25px,2.8vw,38px);line-height:1.28;color:var(--bordeaux);margin:1.2em 0}
.klein{font-size:15px;line-height:1.6;color:var(--grau)}
.gold{color:var(--gold);background:var(--goldverlauf);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.zentriert{text-align:center}

/* ---------- Sektionen ---------- */
.sec{padding:var(--abstand) 0;position:relative}
.sec-creme{background:var(--creme)}
.sec-sand{background:var(--sand)}
.sec-weiss{background:var(--weiss)}
.sec-dunkel{background:radial-gradient(70% 90% at 50% 0%,rgba(110,22,36,.55),transparent 62%),var(--nacht);color:rgba(247,241,234,.84)}
.sec-bordeaux{background:linear-gradient(165deg,var(--bordeaux) 0%,#2E070D 100%);color:rgba(247,241,234,.86)}
.sec-tinte{background:var(--tinte);color:rgba(247,241,234,.82)}
.sec-dunkel h1,.sec-dunkel h2,.sec-dunkel h3,.sec-bordeaux h1,.sec-bordeaux h2,.sec-bordeaux h3,.sec-tinte h2,.sec-tinte h3{color:var(--creme)}
.sec-dunkel .label,.sec-bordeaux .label,.sec-tinte .label{color:var(--gold)}
.sec-dunkel .lead,.sec-bordeaux .lead,.sec-tinte .lead{color:var(--creme)}
.sec-dunkel .frage,.sec-bordeaux .frage,.sec-tinte .frage{color:var(--creme)}
.sec-dunkel .klein,.sec-bordeaux .klein,.sec-tinte .klein{color:rgba(247,241,234,.6)}
.sec h2{margin-bottom:38px}
.prosa p{max-width:var(--lesebreite)}
.zentriert .prosa p,.prosa.mitte p{margin-left:auto;margin-right:auto}

/* ---------- Buttons ---------- */
.btn{display:inline-block;font-family:var(--sans);font-size:13.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;line-height:1.3;padding:19px 38px;border-radius:var(--pille);border:1px solid var(--bordeaux);background:var(--bordeaux);color:var(--creme);cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .15s}
.btn:hover{background:var(--bordeaux-tief);border-color:var(--bordeaux-tief);transform:translateY(-2px)}
.btn-linie{background:transparent;color:var(--bordeaux)}
.btn-linie:hover{background:var(--bordeaux);color:var(--creme)}
.sec-dunkel .btn,.sec-bordeaux .btn,.sec-tinte .btn,.hero .btn,.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--nacht)}
.sec-dunkel .btn:hover,.sec-bordeaux .btn:hover,.sec-tinte .btn:hover,.hero .btn:hover,.btn-gold:hover{background:var(--gold-hell);border-color:var(--gold-hell)}
.sec-dunkel .btn-linie,.sec-bordeaux .btn-linie,.sec-tinte .btn-linie,.hero .btn-linie{background:transparent;color:var(--gold)}
.sec-dunkel .btn-linie:hover,.sec-bordeaux .btn-linie:hover,.sec-tinte .btn-linie:hover,.hero .btn-linie:hover{background:var(--gold);color:var(--nacht)}
.btn-klein{padding:13px 26px;font-size:12px}
.cta{margin-top:44px}
.textlink{font-weight:800;font-size:13.5px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:4px}

/* ---------- Chip ---------- */
.chip{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;padding:8px 16px;border-radius:var(--pille);border:1px solid var(--gold);color:var(--gold-tief)}
.sec-dunkel .chip,.sec-bordeaux .chip,.karte-dunkel .chip{color:var(--gold)}

/* ---------- Header ---------- */
.kopf{position:absolute;top:0;left:0;right:0;z-index:50;padding:26px 0}
.kopf.hell{position:relative;background:var(--creme);border-bottom:1px solid var(--sand)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;max-width:1320px}
.marke{display:inline-flex;align-items:center;gap:13px;text-decoration:none;font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:.14em;text-transform:uppercase;color:var(--creme);white-space:nowrap}
.marke img{height:38px;width:auto}
.kopf.hell .marke{color:var(--bordeaux)}
.nav{display:flex;align-items:center;gap:30px}
.nav a{font-size:12.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:rgba(247,241,234,.86);transition:color .2s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--gold)}
.kopf.hell .nav a{color:var(--bordeaux)}
.kopf.hell .nav a:hover,.kopf.hell .nav a[aria-current="page"]{color:var(--gold-tief)}
.nav a.btn{color:var(--nacht);letter-spacing:.2em}
.nav a.btn:hover{color:var(--nacht)}
.nav .nur-mobil{display:none}
.burger{display:none;background:none;border:1px solid rgba(198,161,90,.7);border-radius:var(--pille);color:var(--gold);font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;padding:11px 18px;cursor:pointer}
.kopf.hell .burger{color:var(--bordeaux);border-color:var(--bordeaux)}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--nacht);color:rgba(247,241,234,.86);min-height:min(100vh,900px);display:flex;align-items:center;padding:168px 0 108px;overflow:hidden}
.hero-bild{position:absolute;top:0;bottom:0;right:0;left:36%;z-index:0;overflow:hidden}
.hero-bild img{width:100%;height:100%;object-fit:cover;object-position:56% 20%;opacity:.8}
.hero-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--nacht) 0%,rgba(28,5,8,.72) 22%,rgba(28,5,8,.16) 58%,rgba(28,5,8,.3) 100%),linear-gradient(0deg,var(--nacht) 0%,transparent 28%),linear-gradient(180deg,rgba(74,14,22,.55),transparent 42%)}
.hero .wrap{position:relative;z-index:1;width:100%}
.hero-text{max-width:600px}
.hero h1{color:var(--creme);margin-bottom:30px;font-size:clamp(31px,3.7vw,54px)}
.hero .lead{color:rgba(247,241,234,.9);max-width:31em}
.hero .label{color:var(--gold)}
.hero .cta{margin-top:40px}

/* ---------- Zweispalter ---------- */
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:84px;align-items:center}
.zwei.oben{align-items:start}
.zwei.text-breit{grid-template-columns:1.15fr .85fr}
.zwei.bild-links{grid-template-columns:.85fr 1.15fr}
.bild{margin:0;border-radius:var(--radius);overflow:hidden;position:relative}
.bild img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
.bild.hoch{aspect-ratio:4/5}
.bild.quer{aspect-ratio:3/2}
.bild.rahmen::before{content:"";position:absolute;inset:14px;border:1px solid rgba(198,161,90,.55);border-radius:2px;z-index:1;pointer-events:none}
.haftend{position:sticky;top:40px}

/* ---------- Dialogzeile (wörtliche Rede im Fließtext) ---------- */
.rede{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.3vw,30px);line-height:1.4;color:var(--bordeaux);padding-left:28px;border-left:1px solid var(--gold);margin:1.4em 0;max-width:var(--lesebreite)}
.sec-dunkel .rede,.sec-bordeaux .rede,.sec-tinte .rede{color:var(--creme)}

/* ---------- Programmkarten ---------- */
.karten{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:stretch}
.karte{background:var(--weiss);border:1px solid var(--sand);border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden}
.karte-bild{aspect-ratio:16/9;overflow:hidden;position:relative}
.karte-bild img{width:100%;height:100%;object-fit:cover}
.karte-bild .chip{position:absolute;left:22px;top:22px;background:rgba(28,5,8,.72);color:var(--gold);backdrop-filter:blur(3px)}
.karte-inhalt{padding:44px 42px 46px;display:flex;flex-direction:column;flex:1}
.karte .name{font-size:12.5px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-tief);margin-bottom:16px}
.karte h3{margin-bottom:24px}
.karte p{font-size:17.5px;line-height:1.7}
.karte .eck{margin-top:28px;font-size:12.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--bordeaux)}
.karte .cta{margin-top:auto;padding-top:34px}
.karte-dunkel{background:var(--nacht);border-color:rgba(198,161,90,.35);color:rgba(247,241,234,.84)}
.karte-dunkel h3{color:var(--creme)}
.karte-dunkel .name{color:var(--gold)}
.karte-dunkel .eck{color:var(--gold)}
.karte-dunkel .btn{background:var(--gold);border-color:var(--gold);color:var(--nacht)}
.karte-kurz .karte-inhalt{padding:38px 36px 40px}

/* ---------- Stimmen ---------- */
.stimmen{display:grid;grid-template-columns:1fr 1fr;gap:0 72px}
.stimme{padding:26px 0}
.sec-weiss .karte{background:var(--creme)}
.stimme blockquote{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(20px,2vw,26px);line-height:1.5;color:var(--bordeaux)}
.stimme cite{display:block;margin-top:18px;font-style:normal;font-size:12.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--grau)}
.sec-dunkel .stimme blockquote,.sec-bordeaux .stimme blockquote{color:var(--creme)}
.sec-dunkel .stimme cite,.sec-bordeaux .stimme cite{color:var(--gold)}

/* ---------- Zahlen und Logos ---------- */
.zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:84px}
.zahl b{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(34px,3.6vw,50px);line-height:1;color:var(--bordeaux);letter-spacing:.02em}
.zahl span{display:block;margin-top:12px;font-size:14px;line-height:1.5;color:var(--grau)}
.sec-dunkel .zahl b,.sec-bordeaux .zahl b{color:var(--gold)}
.sec-dunkel .zahl span,.sec-bordeaux .zahl span{color:rgba(247,241,234,.66)}
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:34px 56px;margin-top:70px}
.logos img{height:34px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.6}

/* ---------- Abschluss-CTA und Footer ---------- */
.schluss{text-align:center}
.schluss h2{margin-bottom:18px}
.fuss{background:var(--nacht);color:rgba(247,241,234,.62);padding:84px 0 44px;font-size:15px;line-height:1.7}
.fuss .raster{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr;gap:44px}
.fuss .marke{font-size:17px}
.fuss .claim{margin-top:16px;font-size:12px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.fuss h4{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.fuss ul{list-style:none}
.fuss li{margin-bottom:9px}
.fuss a{text-decoration:none;color:rgba(247,241,234,.78)}
.fuss a:hover{color:var(--creme)}
.fuss .unten{margin-top:64px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px}
.fuss .unten a{text-decoration:underline}

/* ---------- Mobil ---------- */
@media (max-width:1080px){
  .nav{gap:20px}
  .nav a{font-size:11.5px;letter-spacing:.14em}
}
@media (max-width:940px){
  :root{--abstand:78px;--rand:22px}
  body{font-size:17.5px}
  .burger{display:inline-block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;gap:0;background:var(--nacht);padding:10px var(--rand) 30px;border-top:1px solid rgba(198,161,90,.25)}
  .nav.offen{display:flex}
  .nav a,.kopf.hell .nav a{display:block;width:100%;padding:15px 0;font-size:13px;letter-spacing:.2em;color:rgba(247,241,234,.9);border-bottom:1px solid rgba(198,161,90,.16)}
  .nav a.btn{margin-top:22px;text-align:center;border-bottom:0;padding:17px 20px}
  .nav .nur-mobil{display:block}
  .kopf{padding:18px 0}
  .marke{font-size:15px;letter-spacing:.1em}
  .marke img{height:32px}
  .hero{min-height:0;padding:128px 0 74px}
  .hero-bild{left:0}
  .hero-bild img{object-position:60% 12%;opacity:.5}
  .hero-text{max-width:none}
  .hero-bild::after{background:linear-gradient(180deg,rgba(28,5,8,.72) 0%,rgba(28,5,8,.82) 55%,var(--nacht) 100%)}
  .zwei,.zwei.text-breit,.zwei.bild-links{grid-template-columns:1fr;gap:38px}
  .haftend{position:static}
  .bild.hoch{aspect-ratio:4/3}
  .karten{grid-template-columns:1fr;gap:22px}
  .karte-inhalt,.karte-kurz .karte-inhalt{padding:32px 26px 34px}
  .stimmen{grid-template-columns:1fr}
  .stimme{padding:28px 0}
  .zahlen{grid-template-columns:1fr 1fr;gap:30px 22px;margin-top:54px}
  .logos{gap:24px 34px;margin-top:48px}
  .logos img{height:26px}
  .btn{padding:17px 28px;font-size:12.5px;letter-spacing:.16em}
  .fuss{padding:60px 0 36px}
  .fuss .raster{grid-template-columns:1fr 1fr;gap:36px 24px}
  .fuss .raster > div:first-child{grid-column:1/-1}
  .rede{padding-left:20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}

/* =========================================================================
   Bewegung und Führung
   Alles hier ist Zugabe: Ohne JavaScript und bei "Bewegung reduzieren"
   steht die Seite vollständig und ruhig da.
   ========================================================================= */

/* Lesefortschritt oben */
.faden{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--goldverlauf);transform:scaleX(0);transform-origin:0 50%;z-index:80;pointer-events:none}

/* Auftauchen beim Scrollen (Klassen setzt das Skript) */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.an{opacity:1;transform:none}
.rv-bild img{clip-path:inset(0 0 100% 0);transform:scale(1.1);transition:clip-path 1.2s cubic-bezier(.2,.7,.2,1),transform 1.8s cubic-bezier(.2,.7,.2,1)}
.rv-bild.rahmen::before{opacity:0;transition:opacity .8s .7s}
.rv-bild.an img{clip-path:inset(0 0 0 0);transform:none}
.rv-bild.an.rahmen::before{opacity:1}

/* Hero: Bild atmet, Headline kommt zeilenweise */
@media (prefers-reduced-motion:no-preference){
  .hero-bild img{animation:atmen 26s ease-in-out infinite alternate}
  .hero h1 .z{display:block;opacity:0;transform:translateY(22px);animation:hoch .95s cubic-bezier(.2,.7,.2,1) forwards}
  .hero h1 .z2{animation-delay:.28s}
  .hero .lead{opacity:0;animation:hoch .95s cubic-bezier(.2,.7,.2,1) .62s forwards}
  .hero .cta{opacity:0;animation:hoch .95s cubic-bezier(.2,.7,.2,1) .86s forwards}
}
.hero h1 .z{display:block}
@keyframes atmen{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes hoch{to{opacity:1;transform:none}}
.hero .weiter{position:absolute;left:50%;bottom:30px;z-index:2;width:1px;height:54px;background:rgba(198,161,90,.35);overflow:hidden}
.hero .weiter::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--gold);animation:tropfen 2.4s ease-in-out infinite}
@keyframes tropfen{to{top:100%}}

/* Laufband mit Yvonnes Sätzen */
.laufband{background:var(--bordeaux);overflow:hidden;padding:22px 0}
.laufband .spur{display:flex;width:max-content;animation:laufen 56s linear infinite}
.laufband:hover .spur{animation-play-state:paused}
.laufband span{font-family:var(--serif);font-weight:600;font-size:clamp(17px,1.7vw,23px);letter-spacing:.14em;text-transform:uppercase;color:var(--creme);white-space:nowrap;padding:0 34px;position:relative}
.laufband span::after{content:"";position:absolute;right:-4px;top:50%;width:7px;height:7px;border-radius:50%;background:var(--gold);transform:translateY(-50%)}
.laufband span:nth-child(even){color:var(--gold)}
@keyframes laufen{to{transform:translateX(-50%)}}

/* Momente: vier Kacheln aus einem Absatz */
.momente{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:56px 0}
.moment{background:var(--creme);border-top:2px solid var(--gold);border-radius:0 0 var(--radius) var(--radius);padding:30px 30px 32px;font-family:var(--serif);font-size:clamp(19px,1.75vw,23px);line-height:1.45;color:var(--bordeaux);transition:transform .3s,box-shadow .3s}
.moment:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(74,14,22,.45)}
.sec-creme .moment{background:var(--weiss)}

/* Große Frage als Zwischenruf */
.grossfrage{text-align:center;margin:84px auto;max-width:900px}
.grossfrage p{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4.6vw,62px);line-height:1.14;letter-spacing:.03em;text-transform:uppercase;color:var(--bordeaux);margin:0;text-wrap:balance}

/* Ablauf: Szene in Schritten mit durchlaufender Linie */
.ablauf{position:relative;max-width:820px;margin:0 auto;padding-left:64px}
.ablauf::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:1px;background:var(--sand)}
.ablauf .fuellung{position:absolute;left:15px;top:8px;width:1px;height:0;background:var(--gold);transition:height .15s linear}
.schritt{position:relative;padding-bottom:54px}
.schritt:last-child{padding-bottom:0}
.schritt::before{content:"";position:absolute;left:-55px;top:9px;width:13px;height:13px;border-radius:50%;background:var(--creme);border:1px solid var(--gold);transition:background .4s .2s}
.sec-weiss .schritt::before{background:var(--weiss)}
.schritt.an::before{background:var(--gold)}
.schritt .wann{display:block;font-size:12.5px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-tief);margin-bottom:14px}
.schritt .rede{border-left:0;padding-left:0;font-size:clamp(25px,2.9vw,38px);margin:0 0 22px}

/* Stimmen-Slider */
.slider{position:relative;margin-top:20px}
.slider .bahn{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.slider .bahn::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;padding:26px 8% 10px;text-align:center}
.slide blockquote{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(25px,3.3vw,44px);line-height:1.34;color:var(--creme);text-wrap:balance}
.slide cite{display:block;margin-top:30px;font-style:normal;font-size:12.5px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.slider .steuer{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:44px}
.slider .pfeil{width:50px;height:50px;border-radius:var(--radius);border:1px solid rgba(198,161,90,.6);background:transparent;color:var(--gold);font-size:19px;cursor:pointer;transition:background .2s,color .2s}
.slider .pfeil:hover{background:var(--gold);color:var(--nacht)}
.slider .punkte{display:flex;gap:10px}
.slider .punkte button{width:30px;height:2px;border:0;padding:0;background:rgba(198,161,90,.3);cursor:pointer;transition:background .3s}
.slider .punkte button[aria-current="true"]{background:var(--gold)}
.anf{display:block;font-family:var(--serif);font-size:110px;line-height:.6;color:var(--gold);opacity:.5;margin-bottom:6px;text-align:center}

/* Belege: Bewertungsleiste, Video- und Screenshot-Plätze */
.bewertung{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 28px;margin-top:70px;padding:26px 30px;border:1px solid rgba(198,161,90,.3);border-radius:var(--radius)}
.bewertung .sterne{color:var(--gold);letter-spacing:.2em;font-size:18px}
.bewertung b{font-family:var(--serif);font-weight:600;font-size:26px;color:var(--creme);letter-spacing:.02em}
.bewertung span{font-size:14px;color:rgba(247,241,234,.7)}
.belege{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.beleg{position:relative;aspect-ratio:4/5;border:1px dashed rgba(198,161,90,.45);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:20px;font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,241,234,.6);overflow:hidden}
.beleg.quer{aspect-ratio:16/10}
.beleg .spiel{width:58px;height:58px;border-radius:50%;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:18px;padding-left:4px}
.beleg small{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:none;color:rgba(247,241,234,.45);max-width:22em}

/* Logos als ruhiges Laufband */
.logoband{overflow:hidden;margin-top:64px;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.logoband .spur{display:flex;align-items:center;width:max-content;animation:laufen 48s linear infinite}
.logoband img{height:34px;width:auto;margin:0 34px;filter:grayscale(1);opacity:.6}

/* Karten reagieren */
.karte{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.karte:hover{transform:translateY(-6px);box-shadow:0 34px 60px -40px rgba(28,5,8,.6)}
.karte-bild img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.karte:hover .karte-bild img{transform:scale(1.06)}
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);transform:skewX(-18deg);transition:left .7s}
.btn:hover::after{left:130%}

@media (max-width:940px){
  .momente{grid-template-columns:1fr;gap:12px;margin:38px 0}
  .moment{padding:22px 22px 24px}
  .grossfrage{margin:54px auto}
  .ablauf{padding-left:40px}
  .ablauf::before,.ablauf .fuellung{left:7px}
  .schritt::before{left:-39px}
  .schritt{padding-bottom:40px}
  .slide{padding:14px 2px 6px}
  .anf{font-size:80px}
  .belege{grid-template-columns:1fr 1fr}
  .beleg{aspect-ratio:1/1}
  .logoband img{height:26px;margin:0 22px}
  .hero .weiter{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rv,.rv-bild img{opacity:1;transform:none;clip-path:none;transition:none}
  .rv-bild.rahmen::before{opacity:1}
  .laufband .spur,.logoband .spur{animation:none}
  .laufband .spur{flex-wrap:wrap;width:auto;justify-content:center;row-gap:8px}
  .logoband .spur{flex-wrap:wrap;width:auto;justify-content:center;row-gap:22px}
  .laufband .doppel,.logoband .doppel{display:none}
  .hero .weiter::after{animation:none}
  .faden{display:none}
  .karte,.karte-bild img,.moment{transition:none}
}

/* Schema: Was passiert und was der Kopf daraus macht */
.schema{display:grid;gap:14px}
.schema .kopfzeile{display:grid;grid-template-columns:1fr 34px 1fr;gap:0 12px;font-size:12px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-tief);padding:0 4px 4px}
.schema .kopfzeile span:last-child{grid-column:3}
.schema .zeile{display:grid;grid-template-columns:1fr 34px 1fr;gap:0 12px;align-items:stretch}
.schema .fakt,.schema .gesch{border-radius:var(--radius);padding:22px 22px;font-size:17px;line-height:1.45;display:flex;align-items:center}
.schema .fakt{background:var(--creme);color:var(--tinte)}
.schema .gesch{background:var(--bordeaux);color:var(--creme);font-family:var(--serif);font-style:italic;font-size:19px}
.schema .pfeil{display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:22px}
.schema .fazit{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.schema .fazit div{border:1px solid var(--gold);border-radius:var(--radius);padding:18px 20px;font-size:12.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--bordeaux);text-align:center}
.unterzeile{max-width:44em;margin:-14px auto 0;font-size:clamp(19px,1.7vw,22px);line-height:1.6}
@media (max-width:940px){
  .schema .kopfzeile{display:none}
  .schema .zeile{grid-template-columns:1fr;gap:0}
  .schema .pfeil{transform:rotate(90deg);padding:4px 0}
  .schema .fakt,.schema .gesch{padding:18px 18px}
  .schema .fazit{grid-template-columns:1fr}
  .unterzeile{margin-top:-6px}
}