/* =========================================================
   Chimera — gemeinsames Stylesheet
   Designsystem: helle Pastellflächen, runde Formen,
   Fredoka als Display, Nunito als Fließtext.
   ========================================================= */

:root{
  /* Flächen */
  --creme:#FDF6E3;
  --lavendel:#F4EEFF;
  --puder:#FFF3F8;
  --karte:#FFFDF7;
  /* Artwork-Farben */
  --himmel:#C3B0EC;
  --rosa:#F7C3D8;
  /* Akzente */
  --traube:#6C3BE0;
  --traube-tief:#4E28AA;
  --koralle:#F0417A;
  --koralle-tief:#B72455;
  --gold:#FFC24B;
  --gold-tief:#C08C18;
  --jade:#12A37C;
  --jade-tief:#0B7357;
  /* Text */
  --tinte:#33235C;
  --tinte-weich:#5B4A85;
  --pflaume:#2E1F52;

  --display:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",Helvetica,Arial,sans-serif;
  --shell:min(1200px,92vw);
  --rund:26px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;background:var(--creme);color:var(--tinte);
  font-family:var(--body);font-size:17.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:var(--traube)}
:focus-visible{outline:3px solid var(--traube);outline-offset:3px;border-radius:10px}
.shell{width:var(--shell);margin-inline:auto;position:relative;z-index:2}

/* Nur für Screenreader — bleibt im Baum, verschwindet optisch */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.012em;margin:0}
h1{font-size:clamp(2.2rem,5.6vw,4rem)}
h2{font-size:clamp(1.85rem,4vw,2.9rem)}
h3{font-size:1.2rem;font-weight:600;line-height:1.25}
p{margin:0}

/* Cartoon-Headline: dicke Kontur, harter Schatten */
.pop{
  color:#fff;-webkit-text-stroke:5px var(--pflaume);paint-order:stroke fill;
  text-shadow:0 8px 0 rgba(46,31,82,.26);
}
.pop .akz{color:var(--gold)}
@media(max-width:640px){.pop{-webkit-text-stroke-width:4px;text-shadow:0 6px 0 rgba(46,31,82,.26)}}

/* Zielgruppen-Label */
.sticker{
  display:inline-block;font-family:var(--display);font-weight:600;
  font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--traube);color:#fff;padding:.44em 1.1em;border-radius:999px;
  transform:rotate(-1.8deg);box-shadow:0 4px 0 rgba(46,31,82,.28);
}
.sticker-koralle{background:var(--koralle);box-shadow:0 4px 0 var(--koralle-tief)}
.sticker-gold{background:var(--gold);color:#4A3208;box-shadow:0 4px 0 var(--gold-tief)}
.sticker-jade{background:var(--jade);box-shadow:0 4px 0 var(--jade-tief)}

/* Knöpfe */
.btn{
  display:inline-block;font-family:var(--display);font-weight:600;font-size:1.02rem;
  text-decoration:none;border:0;cursor:pointer;padding:.84rem 1.65rem;border-radius:999px;
  transition:transform .13s ease,box-shadow .13s ease;
}
.btn-haupt{background:var(--koralle);color:#fff;box-shadow:0 6px 0 var(--koralle-tief)}
.btn-haupt:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--koralle-tief)}
.btn-haupt:active{transform:translateY(4px);box-shadow:0 2px 0 var(--koralle-tief)}
.btn-traube{background:var(--traube);color:#fff;box-shadow:0 6px 0 var(--traube-tief)}
.btn-traube:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--traube-tief)}
.btn-traube:active{transform:translateY(4px);box-shadow:0 2px 0 var(--traube-tief)}
.btn-hell{background:#fff;color:var(--tinte);box-shadow:0 6px 0 rgba(46,31,82,.2)}
.btn-hell:hover{transform:translateY(-3px);box-shadow:0 9px 0 rgba(46,31,82,.2)}
.btn-hell:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(46,31,82,.2)}

/* Textlink mit Pfeil — klar von Buttons unterscheidbar */
.textlink{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--display);font-weight:600;font-size:1.02rem;
  color:var(--traube);text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:2px;
}
.textlink svg{transition:transform .18s ease}
.textlink:hover svg{transform:translateX(4px)}

/* ================= Kopfzeile ================= */
.kopf{position:sticky;top:14px;z-index:80;padding-inline:4vw}
.kopf-in{
  display:flex;align-items:center;gap:1.6rem;
  max-width:1200px;margin-inline:auto;min-height:62px;padding:.5rem .6rem .5rem 1.2rem;
  background:rgba(255,253,247,.92);backdrop-filter:blur(16px);border-radius:999px;
  box-shadow:0 6px 0 rgba(46,31,82,.12),0 18px 34px -22px rgba(46,31,82,.5);
}
.kopf-logo{display:flex;align-items:center;flex:none}
.kopf-logo img{height:30px;width:auto}
.kopf-nav{display:flex;gap:1.4rem;margin-left:auto;font-weight:700;font-size:.94rem}
.kopf-nav a{text-decoration:none;color:var(--tinte-weich);transition:color .2s}
.kopf-nav a:hover,.kopf-nav a[aria-current="page"]{color:var(--traube)}
.kopf .btn{padding:.58rem 1.2rem;font-size:.92rem;flex:none}
.nur-schmal{display:none}
@media(max-width:1000px){
  .kopf-nav{display:none}
  .kopf-in{gap:.75rem;padding-left:1rem}
  .kopf .btn{margin-left:auto}
  .kopf-logo img{height:25px}
  .nur-breit{display:none}
  .nur-schmal{display:inline}
}

/* ================= Wolken-Artwork ================= */
.wolke{
  position:absolute;z-index:1;pointer-events:none;user-select:none;
  width:clamp(240px,32vw,460px);height:auto;
}
.wolke-hero{right:-6%;top:16%;opacity:.85}
.wolke-zugang{right:-6%;top:-30px;opacity:.75;width:clamp(300px,40vw,620px);transform:scaleX(-1)}
/* Auf schmalen Displays komplett aus, damit nichts überlagert wird */
@media(max-width:900px){
  .wolke{display:none}
}

/* ================= Hero ================= */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(3rem,7vw,5.2rem) 0 clamp(4rem,8vw,6.5rem);
  background:url(assets/sky-hero.webp) center bottom/cover no-repeat,
             linear-gradient(180deg,var(--himmel),var(--rosa) 55%,var(--creme));
}
.hero-in{display:grid;gap:1.3rem;max-width:60ch;justify-items:start}
.hero-logo{width:clamp(230px,34vw,380px);height:auto}
.hero-sub{font-size:clamp(1.03rem,1.9vw,1.22rem);max-width:48ch;font-weight:600;color:var(--tinte)}
.hero-btns{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center;margin-top:.3rem}

/* ================= Nutzen-Sektionen ================= */
.nutzen{position:relative;padding:clamp(3.6rem,7vw,6rem) 0;overflow:hidden}
.nutzen-in{
  display:grid;grid-template-columns:1.28fr .92fr;   /* ≈58 % Bild / 42 % Text */
  gap:clamp(1.8rem,3.6vw,3.4rem);align-items:center;
}
.nutzen-text{display:grid;gap:1rem;justify-items:start}
.nutzen-text h2{margin:.2rem 0 0}
.nutzen-text>p{color:var(--tinte-weich);font-weight:600;max-width:46ch}
/* Sektion 2: Text links, Bild rechts — Spalten mitspiegeln,
   sonst bekäme die Grafik dort nur den schmalen Anteil. */
@media(min-width:881px){
  .nutzen-rev .nutzen-in{grid-template-columns:.92fr 1.28fr}
  .nutzen-rev .nutzen-visual{order:2}
}
@media(max-width:880px){
  .nutzen-in{grid-template-columns:1fr;gap:1.7rem}
  .nutzen-visual{order:-1}
  /* Keine Kantenmasken auf Mobil — sie würden Gesichter und
     die Bildüberschriften anschneiden. */
  .nutzen-bild,.nutzen-bild img{-webkit-mask-image:none;mask-image:none}
  /* Lianen aus; nur die weiche Wolke bleibt, und zwar vollständig
     unterhalb der Grafik, damit sie nichts verdeckt. */
  .liane-spieler,.liane-creator{display:none}
  /* Kleiner und höher gesetzt, damit sie unter der Grafik bleibt
     und nicht in die Textspalte ragt (auf 768 px vorher 10 px Überlappung). */
  .wolke-spieler{width:72%;left:14%;bottom:-11%;opacity:.72}
  .nutzen-1 .nutzen-in{gap:3rem}
  .nutzen-1{padding:2.6rem 0 1.6rem}
  .nutzen-2,.nutzen-3{padding:1.6rem 0}
  .nutzen-3{padding-bottom:3rem}
}
@media(max-width:560px){
  .nutzen .shell{width:95vw}          /* Grafik nutzt fast die volle Breite */
}

/* ============================================================
   Durchgehende Bildwelt hinter den drei Zielgruppen-Sektionen:
   ein einziger Verlauf statt drei harter Farbblöcke.
   ============================================================ */
.welt{
  position:relative;
  overflow-x:clip;                       /* Deko darf oben/unten raus, seitlich nicht */
  background:
    radial-gradient(58% 32% at 14% 8%,  rgba(255,194,75,.15), transparent 62%),
    radial-gradient(52% 30% at 88% 34%, rgba(124,77,240,.12), transparent 64%),
    radial-gradient(56% 32% at 10% 68%, rgba(240,65,122,.10), transparent 62%),
    radial-gradient(44% 28% at 84% 92%, rgba(18,163,124,.07), transparent 62%),
    linear-gradient(180deg,var(--creme) 0%,#F7F2FF 32%,#FCF1F7 66%,var(--creme) 100%);
}
.nutzen{background:transparent;overflow:visible}

/* Unterschiedliche Innenabstände und Ausrichtungen — kein Blockraster */
.nutzen-1{padding:clamp(3.2rem,6.2vw,5rem) 0 clamp(1.5rem,3.2vw,2.4rem)}
.nutzen-2{padding:clamp(1.3rem,2.8vw,2.2rem) 0 clamp(1.7rem,3.4vw,2.6rem)}
.nutzen-3{padding:clamp(1.1rem,2.4vw,1.9rem) 0 clamp(3.4rem,6.6vw,5.2rem)}
@media(min-width:881px){
  .nutzen-1 .nutzen-in{align-items:center}
  .nutzen-2 .nutzen-in{align-items:start}
  .nutzen-2 .nutzen-text{padding-top:clamp(.5rem,3.2vw,2.4rem)}
  .nutzen-3 .nutzen-in{align-items:end}
  .nutzen-3 .nutzen-text{padding-bottom:clamp(.4rem,2.4vw,1.8rem)}
}

/* Bild ohne Karte: kein Rahmen, kein Schatten, keine Fläche */
.nutzen-visual{position:relative}
.nutzen-bild{
  border-radius:clamp(24px,3vw,48px);
  overflow:hidden;border:0;box-shadow:none;background:none;
}
.nutzen-bild img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.nutzen-text{position:relative;z-index:5}

/* Weiche Kanten — je Sektion andere Seiten, nie dort wo die
   Bildüberschrift sitzt (Sektion 1 und 3 oben, Sektion 2 unten). */
.visual-1 .nutzen-bild{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 85%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 85%,transparent 100%);
}
.visual-1 .nutzen-bild img{
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 90%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 90%,transparent 100%);
}
.visual-2 .nutzen-bild{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 100%);
}
.visual-2 .nutzen-bild img{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 100%);
}
.visual-3 .nutzen-bild{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 87%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 87%,transparent 100%);
}
.visual-3 .nutzen-bild img{
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 93%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 93%,transparent 100%);
}

/* Freigestelltes Artwork über und neben den Grafiken */
.deko{
  position:absolute;height:auto;z-index:3;
  pointer-events:none;user-select:none;-webkit-user-drag:none;
}
.wolke-spieler{width:78%;left:-12%;bottom:-15%;opacity:.92}
.liane-spieler{width:34%;left:-14%;top:44%;transform:rotate(-9deg);opacity:.85}
.liane-creator{width:44%;right:-8%;top:-15%;transform:scaleX(-1) rotate(5deg);opacity:.78}


/* ============================================================
   Drei Zielgruppen, drei Rhythmen. Jede Sektion baut ihre
   Argumente anders auf — gleiche Marke, andere Dramaturgie.
   ============================================================ */

/* ---- 1 · Spieler: erzählerisch, viel Luft ---- */
.spieler-text{gap:1.1rem;max-width:44ch}
.eyebrow{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--display);font-weight:600;font-size:.84rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--traube);
}
.spieler-absatz{color:var(--tinte-weich);font-weight:600;max-width:40ch}
.kernaussage{
  font-family:var(--display);font-weight:600;color:var(--tinte);
  font-size:clamp(1.34rem,2.5vw,1.95rem);line-height:1.22;
  max-width:19ch;margin-top:.5rem;
}
.schwung{
  color:var(--koralle);width:clamp(120px,17vw,180px);height:auto;
  margin:-.5rem 0 .1rem;
}
.marker{font-size:.9rem;font-weight:700;color:var(--tinte-weich)}

/* ---- 2 · Content Creator: kompakter Produktionsablauf ---- */
.creator-text{gap:.9rem;max-width:47ch}
.creator-label{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--display);font-weight:600;font-size:.84rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--koralle-tief);
}
.creator-label .balken{width:30px;height:4px;border-radius:2px;background:var(--koralle);flex:none}
.creator-absatz{color:var(--tinte-weich);font-weight:600;max-width:43ch}
.prozess{
  list-style:none;margin:.55rem 0 0;padding:0;width:100%;position:relative;
  display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;
}
.prozess::before{                       /* gestrichelte Verbindungsspur */
  content:"";position:absolute;left:16px;right:16px;top:15px;height:2px;
  background:repeating-linear-gradient(90deg,rgba(240,65,122,.45) 0 7px,transparent 7px 15px);
}
.prozess li{position:relative;display:grid;gap:.5rem;justify-items:start}
.prozess .nr{
  position:relative;z-index:1;
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:.8rem;color:#fff;
  background:var(--koralle);
}
.prozess .was{
  font-family:var(--display);font-weight:600;font-size:.95rem;
  color:var(--tinte);line-height:1.22;
}
.prozess-tags{font-size:.85rem;font-weight:700;color:var(--tinte-weich);margin-top:.25rem}

/* ---- 3 · Story Creator: leichte Studio-Oberfläche ---- */
.studio-text{gap:.95rem;max-width:48ch}
.studio-tab{
  font-family:var(--display);font-weight:600;font-size:.82rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--jade-tief);
  padding-bottom:.45rem;border-bottom:2px solid rgba(18,163,124,.38);
}
.studio-absatz{color:var(--tinte-weich);font-weight:600;max-width:45ch}
.studio-bloecke{
  margin:.35rem 0 0;width:100%;
  display:grid;grid-template-columns:1.06fr .94fr;gap:1.1rem;align-items:start;
}
.studio-bloecke .block{margin:0}
.studio-bloecke dt{
  display:flex;align-items:center;gap:.45rem;color:var(--tinte);
  font-family:var(--display);font-weight:600;font-size:1rem;margin-bottom:.32rem;
}
.studio-bloecke dd{margin:0;font-size:.89rem;font-weight:600;color:var(--tinte-weich);line-height:1.5}
.block-offen{padding-top:.15rem}
.block-flaeche{                          /* leicht versetzt, sehr leichte Fläche */
  margin-top:1.05rem;padding:.85rem .95rem;
  background:rgba(255,255,255,.55);border:1px solid rgba(18,163,124,.22);
  border-radius:16px;
}
.provision{
  display:flex;align-items:center;gap:.5rem;width:100%;max-width:36ch;
  margin-top:.35rem;padding-top:.75rem;
  border-top:1px dashed rgba(18,163,124,.4);
  font-size:.86rem;font-weight:700;color:var(--jade-tief);
}
.btn-outline{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:.3rem;
  font-family:var(--display);font-weight:600;font-size:1rem;
  color:var(--traube);text-decoration:none;background:transparent;
  padding:.7rem 1.4rem;border-radius:999px;border:2.5px solid var(--traube);
  transition:background .18s ease,color .18s ease,transform .15s ease;
}
.btn-outline:hover{background:var(--traube);color:#fff;transform:translateY(-2px)}
.btn-outline svg{transition:transform .18s ease}
.btn-outline:hover svg{transform:translateX(3px)}

@media(max-width:880px){
  .spieler-text,.creator-text,.studio-text{max-width:none}
  .kernaussage{max-width:24ch}
  /* Prozess vertikal — keine waagerechte Spur auf schmalen Displays */
  .prozess{grid-template-columns:1fr;gap:.8rem}
  .prozess::before{
    left:15px;right:auto;top:18px;bottom:18px;width:2px;height:auto;
    background:repeating-linear-gradient(180deg,rgba(240,65,122,.45) 0 7px,transparent 7px 15px);
  }
  .prozess li{grid-template-columns:auto 1fr;align-items:center;gap:.75rem}
  .studio-bloecke{grid-template-columns:1fr;gap:.8rem}
  .block-flaeche{margin-top:0}
  .provision{max-width:none}
}

/* ================= Pre-Access ================= */
.zugang{
  position:relative;overflow:hidden;
  padding:clamp(4rem,8vw,6.5rem) 0 clamp(4.5rem,9vw,7rem);
  background:url(assets/sky-cta.webp) center bottom/cover no-repeat,
             linear-gradient(180deg,var(--himmel),var(--rosa) 60%,var(--creme));
}
.zugang-in{max-width:720px;margin-inline:auto;text-align:center;display:grid;gap:1.1rem;justify-items:center}
.zugang-in>p{max-width:48ch;font-weight:600}
.formular{
  width:100%;margin-top:1.2rem;background:rgba(255,253,247,.94);backdrop-filter:blur(10px);
  border-radius:var(--rund);padding:clamp(1.4rem,3vw,2.2rem);text-align:left;
  box-shadow:0 10px 0 rgba(46,31,82,.14),0 30px 55px -32px rgba(46,31,82,.6);
}
.formular fieldset{border:0;padding:0;margin:0 0 1.35rem}
.formular legend{
  font-family:var(--display);font-weight:600;font-size:1rem;color:var(--tinte);
  padding:0;margin-bottom:.7rem;
}
.pillen{display:flex;flex-wrap:wrap;gap:.55rem;position:relative}
.pillen input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pillen label{
  display:inline-block;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:.92rem;
  padding:.5em 1.05em;border-radius:999px;
  background:#F0EAFF;color:var(--tinte-weich);
  border:2px solid transparent;transition:background .18s,color .18s,border-color .18s;
}
.pillen label:hover{background:#E4D9FF}
.pillen input:checked+label{background:var(--traube);color:#fff;box-shadow:0 4px 0 var(--traube-tief)}
.pillen input:focus-visible+label{outline:3px solid var(--traube);outline-offset:3px}
.feld{display:grid;gap:.4rem;margin-bottom:1.15rem}
.feld label{font-weight:700;font-size:.95rem}
.feld input[type=email]{
  font-family:var(--body);font-weight:600;font-size:1rem;color:var(--tinte);
  background:#fff;border:2px solid #E0D6F5;border-radius:16px;padding:.8rem 1.1rem;width:100%;
}
.feld input[type=email]::placeholder{color:#A192C4}
.einwilligung{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;margin-bottom:1.2rem}
.einwilligung input{width:22px;height:22px;margin:.2rem 0 0;accent-color:var(--traube);flex:none}
.einwilligung label{font-size:.92rem;color:var(--tinte-weich);font-weight:600;line-height:1.5}
.hinweis{font-size:.85rem;color:var(--tinte-weich);margin-top:.9rem;line-height:1.5}
.prototyp{
  display:flex;gap:.6rem;align-items:flex-start;
  background:#FFF3D6;border:2px solid var(--gold);border-radius:16px;
  padding:.75rem .95rem;margin-bottom:1.3rem;
  font-size:.88rem;font-weight:700;color:#5C4308;line-height:1.45;
}
.prototyp svg{flex:none;margin-top:.15rem}
.rueckmeldung{
  font-family:var(--display);font-weight:600;font-size:.98rem;margin-top:.9rem;
  color:var(--koralle-tief);
}
.rueckmeldung.ok{color:var(--jade-tief)}

/* ================= Ablauf-Seite ================= */
.seiten-kopf{
  position:relative;overflow:hidden;
  padding:clamp(2.6rem,5vw,4rem) 0 clamp(2.6rem,5vw,4rem);
  background:linear-gradient(180deg,var(--lavendel),var(--creme));
}
.zurueck{
  display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.95rem;
  color:var(--tinte-weich);text-decoration:none;margin-bottom:1.1rem;
}
.zurueck:hover{color:var(--traube)}
.seiten-kopf h1{max-width:18ch}
.seiten-kopf p{max-width:56ch;margin-top:1rem;font-weight:600;color:var(--tinte-weich)}

.schritte{padding:clamp(3rem,6vw,4.6rem) 0;background:var(--creme)}
.schritt{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,2.4vw,1.8rem);
  padding:1.6rem clamp(1.2rem,2.4vw,2rem);
  background:var(--karte);border-radius:var(--rund);
  box-shadow:0 8px 0 rgba(46,31,82,.11);margin-bottom:1rem;
}
.schritt-nr{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:1.25rem;color:#fff;
  background:var(--traube);box-shadow:0 4px 0 var(--traube-tief);
}
.schritt:nth-of-type(2) .schritt-nr{background:var(--koralle);box-shadow:0 4px 0 var(--koralle-tief)}
.schritt:nth-of-type(3) .schritt-nr{background:var(--gold);color:#4A3208;box-shadow:0 4px 0 var(--gold-tief)}
.schritt:nth-of-type(4) .schritt-nr{background:var(--jade);box-shadow:0 4px 0 var(--jade-tief)}
.schritt:nth-of-type(5) .schritt-nr{background:var(--pflaume);box-shadow:0 4px 0 #1B1133}
.schritt-txt h2{font-size:clamp(1.35rem,2.6vw,1.75rem);margin-bottom:.4rem}
.schritt-txt p{color:var(--tinte-weich);font-weight:600;max-width:62ch}

.kategorien{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem;margin-top:1.3rem;
}
.kategorie{
  position:relative;border-radius:20px;overflow:hidden;background:var(--pflaume);
  border:4px solid #fff;box-shadow:0 8px 0 rgba(46,31,82,.16);
}
.kategorie img{width:100%;aspect-ratio:1;object-fit:cover}
.kategorie span{
  position:absolute;left:0;right:0;bottom:0;padding:1.4rem .9rem .8rem;
  font-family:var(--display);font-weight:700;font-size:1.02rem;color:#fff;
  background:linear-gradient(transparent,rgba(24,12,48,.9));
}
.beitreten{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3.5vw,3rem);
  align-items:center;margin-top:1rem;
}
.beitreten img{border-radius:20px;border:5px solid #fff;box-shadow:0 10px 0 rgba(46,31,82,.14)}
.beitreten p{color:var(--tinte-weich);font-weight:600}
@media(max-width:880px){.beitreten{grid-template-columns:1fr}}

.abschluss{
  text-align:center;padding:clamp(3.4rem,7vw,5.4rem) 0;
  background:linear-gradient(180deg,var(--creme),var(--puder));
}
.abschluss h2{max-width:20ch;margin:0 auto 1rem}
.abschluss p{max-width:46ch;margin:0 auto 1.7rem;font-weight:600;color:var(--tinte-weich)}

/* ================= Fußzeile ================= */
.fuss{background:var(--pflaume);color:rgba(255,253,247,.62);padding:2.6rem 0 2.2rem}
.fuss-in{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;justify-content:space-between}
.fuss-logo img{height:34px;width:auto}
.fuss-nav{display:flex;flex-wrap:wrap;gap:1.2rem;font-weight:600;font-size:.92rem}
.fuss-nav a{color:rgba(255,253,247,.72);text-decoration:none}
.fuss-nav a:hover{color:#fff}
.fuss-recht{width:100%;font-size:.85rem;opacity:.6;margin-top:.4rem}

/* ================= Einblenden ================= */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}

/* ================= Bestätigt-Seite ================= */
.danke-kopf .sticker{margin-bottom:1rem}
.danke-btns{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center;margin-top:1.4rem}
.danke-kopf .hinweis{margin-top:1.6rem;max-width:54ch}