/* ═══════════════════════════════════════════════════════
   BUBU KIDS CLUB v3.1
   Inspiriert von mad-band.ru: helle Pastell-Hintergründe,
   knallige Farbblöcke, null Schwarz
   ═══════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  /* Primärfarben — knallig */
  --pink:      #FF3366;
  --pink-d:    #E01F55;
  --pink-l:    #FFE8EF;

  --yellow:    #FFD600;
  --yellow-d:  #E8BF00;
  --yellow-l:  #FFFBE0;

  --teal:      #00C4A1;
  --teal-d:    #009E82;
  --teal-l:    #E0FBF6;

  --orange:    #FF6B35;
  --orange-l:  #FFF0EA;

  --purple:    #8B5CF6;
  --purple-l:  #F3EEFF;

  --mint:      #00BFA5;

  /* Hintergründe — alles hell, kein Schwarz */
  --bg:        #F5F2EE;       /* warmes Creme */
  --bg-mint:   #E8FBF7;       /* Minzgrün wie mad-band */
  --bg-lavender: #EDE8FF;     /* Lavendel */
  --bg-peach:  #FFF0E8;       /* Pfirsich */
  --bg-lemon:  #FFFCE0;       /* Zitronengelb */
  --bg-blush:  #FFE8EF;       /* Rosa */
  --surface:   #FFFFFF;

  /* Text */
  --text:      #1A1A1A;
  --text-mid:  #444444;
  --muted:     #777777;
  --faint:     #AAAAAA;
  --border:    #E0DDD6;

  /* Layout */
  --max:        1200px;
  --pad:        clamp(1.25rem, 5vw, 2.5rem);
  --section-y:  clamp(4rem, 8vw, 7rem);
  --r-sm:   .375rem;
  --r-md:   .75rem;
  --r-lg:   1.25rem;
  --r-xl:   2rem;
  --r-2xl:  3rem;
  --r-full: 9999px;

  /* Type */
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body:    'Space Grotesk', system-ui, sans-serif;

  /* Motion */
  --ease:      cubic-bezier(.16,1,.3,1);
  --t:         200ms var(--ease);
  --t-slow:    500ms var(--ease);

  /* Shadows — warm-toned */
  --sh-sm:  0 2px 8px rgba(80,40,20,.07);
  --sh-md:  0 6px 24px rgba(80,40,20,.1);
  --sh-lg:  0 16px 56px rgba(80,40,20,.13);
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { -webkit-font-smoothing:antialiased; scroll-behavior:smooth; scroll-padding-top:5rem }
body {
  font-family:var(--font-body);
  font-size:clamp(1rem,.95rem + .25vw,1.125rem);
  color:var(--text); background:var(--bg);
  line-height:1.6; overflow-x:hidden;
}
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:900; line-height:1.05; letter-spacing:-.02em; text-wrap:balance }
p,li { text-wrap:pretty; max-width:64ch }
ul { list-style:none }
img { display:block; max-width:100%; height:auto; object-fit:cover }
button { cursor:pointer; background:none; border:none; font:inherit; color:inherit }
a { color:inherit; text-decoration:none }
input,select { font:inherit; color:inherit }
::selection { background:rgba(255,51,102,.18) }
:focus-visible { outline:2.5px solid var(--pink); outline-offset:3px; border-radius:var(--r-sm) }

/* ══════════════ NAV ══════════════ */
.nav {
  position:fixed; inset:0 0 auto; z-index:200;
  background:rgba(245,242,238,.92);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1.5px solid var(--border);
  transition:background var(--t), border-color var(--t);
}
.nav.nav--over-slider {
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.2);
}
.nav-inner {
  max-width:var(--max); margin:0 auto;
  padding:.875rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav-logo {
  display:flex; align-items:center; gap:.625rem;
  font-family:var(--font-display); font-weight:700; font-size:.8125rem;
  color:var(--text); flex-shrink:0; transition:color var(--t);
}

.nav-logo img {
  display: block;
  width: 76px;
  height: 76px;
  object-fit: contain;
}

.nav--over-slider .nav-logo,
.nav--over-slider .logo-text { color:white }
.nav-right { display:flex; align-items:center; gap:1.5rem }
.nav-link {
  font-size:.875rem; font-weight:600; color:var(--text-mid);
  transition:color var(--t); display:none;
}
@media(min-width:860px) { .nav-link { display:block } }
.nav-link:hover { color:var(--pink) }
.nav--over-slider .nav-link { color:rgba(255,255,255,.7) }
.nav--over-slider .nav-link:hover { color:white }
.btn-nav {
  display:inline-flex; align-items:center;
  background:var(--pink); color:white;
  font-family:var(--font-display); font-weight:700; font-size:.75rem;
  padding:.625rem 1.25rem; border-radius:var(--r-full);
  transition:var(--t); box-shadow:0 2px 12px rgba(255,51,102,.3);
}
.btn-nav:hover { background:var(--pink-d); transform:translateY(-1px) }
.nav-burger {
  display:flex; flex-direction:column; gap:5px;
  width:2.5rem; height:2.5rem; align-items:center; justify-content:center;
}
.nav-burger span {
  display:block; width:20px; height:2px; background:var(--text);
  border-radius:var(--r-full); transition:var(--t);
}
.nav--over-slider .nav-burger span { background:white }
@media(min-width:860px) { .nav-burger { display:none } }

/* ══════════════ HERO SLIDER — SCROLL-DRIVEN ══════════════ */
/*
   Jeder Slide nimmt 100vh ein.
   Der Slider-Container ist 5 × 100vh hoch.
   Ein sticky Viewport "klemmt" den sichtbaren Bereich.
   Das JS liest scrollY und berechnet, welcher Slide aktiv ist.
*/
.hero-scroll-container {
  position:relative;
  height:500vh;  /* 5 Slides × 100vh */
}
.hero-sticky {
  position:sticky; top:0;
  height:100vh; overflow:hidden;
}

/* Alle Slides übereinander */
.slide {
  position:absolute; inset:0;
  display:flex; align-items:flex-end;
  opacity:0; transition:opacity .7s var(--ease);
  pointer-events:none;
}
.slide.active { opacity:1; pointer-events:auto; z-index:1 }

/* Slide BG */
.slide-bg { position:absolute; inset:0; z-index:0 }
.slide-bg img { width:100%; height:100%; object-fit:cover; object-position:center }
.slide-overlay {
  position:absolute; inset:0;
  background:linear-gradient(170deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.88) 100%);
}

/* Slide Content */
.slide-content {
  position:relative; z-index:2;
  max-width:var(--max); margin:0 auto; width:100%;
  padding:0 var(--pad) clamp(5rem,10vw,7rem);
  padding-top:calc(5rem + 2rem);
  transform:translateY(28px); opacity:0;
  transition:transform .65s var(--ease) .1s, opacity .65s var(--ease) .1s;
}
.slide.active .slide-content { transform:translateY(0); opacity:1 }

.slide-eyebrow {
  display:inline-flex; align-items:center;
  font-size:.6875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text); background:var(--yellow);
  padding:.375rem 1rem; border-radius:var(--r-full); margin-bottom:1.5rem;
}
.slide-eyebrow--pink   { background:var(--pink);   color:white }
.slide-eyebrow--teal   { background:var(--teal);   color:white }
.slide-eyebrow--orange { background:var(--orange); color:white }
.slide-eyebrow--white  { background:rgba(255,255,255,.2); color:white; backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.3) }

.slide-title {
  font-family:var(--font-display);
  font-size:clamp(2.75rem,1rem + 7vw,6.5rem);
  color:white; font-weight:900;
  letter-spacing:-.03em; line-height:1.0; margin-bottom:1.25rem;
}
.slide-title em { font-style:normal }
.slide--1 .slide-title em { color:var(--yellow) }
.slide--2 .slide-title em { color:var(--yellow) }
.slide--3 .slide-title em { background:var(--pink); padding:0 .2em; border-radius:.25em }
.slide--4 .slide-title em { color:var(--teal) }
.slide--5 .slide-title em { background:var(--orange); color:white; padding:0 .2em; border-radius:.25em }

.slide-sub {
  font-size:clamp(.9375rem,.85rem + .4vw,1.1875rem);
  color:rgba(255,255,255,.75); max-width:46ch;
  line-height:1.65; margin-bottom:1.25rem;
}
.slide-tags { display:flex; flex-wrap:wrap; gap:.5rem }
.slide-tag {
  font-size:.75rem; font-weight:700;
  background:rgba(255,255,255,.15); color:rgba(255,255,255,.95);
  backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.2);
  padding:.375rem .875rem; border-radius:var(--r-full);
}

/* Slider UI Elemente */
.slide-number {
  position:absolute; bottom:clamp(3rem,6vw,5rem); right:var(--pad); z-index:2;
  font-family:var(--font-display); font-size:.6875rem; font-weight:700;
  letter-spacing:.1em; color:rgba(255,255,255,.4);
}
.slider-controls {
  position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%);
  z-index:10; display:flex; align-items:center; gap:1rem;
}
.slider-btn {
  width:2.5rem; height:2.5rem; border-radius:50%;
  background:rgba(255,255,255,.15); border:1.5px solid rgba(255,255,255,.3);
  color:white; display:grid; place-items:center;
  transition:var(--t); backdrop-filter:blur(8px);
}
.slider-btn:hover { background:rgba(255,255,255,.3); transform:scale(1.1) }
.slider-dots { display:flex; gap:.5rem; align-items:center }
.dot {
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.3); border:none; transition:var(--t);
}
.dot--active { background:var(--yellow); transform:scale(1.3); box-shadow:0 0 8px rgba(255,214,0,.6) }

/* Skip */
.skip-btn {
  position:absolute; top:calc(5rem + 1.25rem); right:var(--pad); z-index:10;
  display:inline-flex; align-items:center; gap:.375rem;
  font-family:var(--font-display); font-size:.6875rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.7); background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  padding:.5rem 1rem; border-radius:var(--r-full);
  backdrop-filter:blur(8px); transition:var(--t);
}
.skip-btn:hover { background:rgba(255,255,255,.25); color:white }

/* Scroll-Progress-Bar (unten) */
.scroll-progress-bar {
  position:absolute; bottom:0; left:0; height:3px;
  background:var(--yellow); z-index:20;
  transition:width .1s linear;
  width:0%;
}

/* ══════════════ SECTIONS ══════════════ */
.section { padding-block:var(--section-y) }
.section-inner { max-width:var(--max); margin:0 auto; padding-inline:var(--pad) }
.section-label {
  display:inline-block; font-size:.6875rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--pink); margin-bottom:1rem;
}
.section-label--deal   { color:var(--orange) }
.section-label--teal   { color:var(--teal-d) }
.section-label--muted  { color:var(--muted) }
.section-title {
  font-family:var(--font-display);
  font-size:clamp(2rem,.5rem + 4.5vw,4rem);
  letter-spacing:-.03em; line-height:1.05; margin-bottom:2rem;
}

/* Highlights — Farbblöcke à la mad-band */
.hl { position:relative; display:inline }
.hl--pink   { background:var(--pink);   color:white; padding:0 .2em; border-radius:.2em }
.hl--yellow { background:var(--yellow); color:var(--text); padding:0 .2em; border-radius:.2em }
.hl--teal   { background:var(--teal);   color:white; padding:0 .2em; border-radius:.2em }
.hl--orange { background:var(--orange); color:white; padding:0 .2em; border-radius:.2em }

/* ══════════════ INTRO STATEMENT ══════════════ */
.intro-statement {
  background:var(--bg-mint);
  padding:clamp(4rem,8vw,8rem) var(--pad);
  border-top:2px solid var(--teal-l);
  border-bottom:2px solid var(--teal-l);
}
.intro-inner { max-width:var(--max); margin:0 auto }
.intro-inner .section-label { color:var(--teal-d) }
.intro-headline {
  font-family:var(--font-display);
  font-size:clamp(2rem,.5rem + 5vw,4.5rem);
  color:var(--text); letter-spacing:-.03em; line-height:1.1; margin-bottom:2rem;
}
.intro-body {
  font-size:clamp(1rem,.9rem + .4vw,1.25rem);
  color:var(--text-mid); max-width:56ch; line-height:1.75;
}

/* ══════════════ DEALRAD ══════════════ */
.dealrad-section { background:var(--bg-lemon) }
.dealrad-layout {
  display:grid; gap:3rem; grid-template-columns:1fr;
}
@media(min-width:900px) { .dealrad-layout { grid-template-columns:1fr 1.2fr; align-items:start } }
.dealrad-text p { font-size:1rem; color:var(--text-mid); line-height:1.75; margin-bottom:1.25rem }
.dealrad-text strong { color:var(--text) }
.dealrad-badges { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2rem }
.dealrad-badge {
  background:white; border:1.5px solid var(--border);
  border-radius:var(--r-md); padding:.875rem 1.25rem;
  display:flex; flex-direction:column; gap:.25rem;
  box-shadow:var(--sh-sm);
}
.badge-platform { font-family:var(--font-display); font-size:.875rem; font-weight:700; color:var(--text) }
.badge-label { font-size:.6875rem; color:var(--muted); font-weight:600 }

/* Deal Cards */
.dealrad-deals { display:grid; gap:.875rem; grid-template-columns:repeat(2,1fr) }
@media(max-width:599px) { .dealrad-deals { grid-template-columns:1fr } }
.deal-card {
  background:white; border:1.5px solid var(--border);
  border-radius:var(--r-xl); padding:1.25rem;
  transition:var(--t-slow);
}
.deal-card:hover { transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--orange) }
.deal-card--featured {
  grid-column:1/-1;
  background:var(--bg-peach); border-color:rgba(255,107,53,.3);
  position:relative;
}
.deal-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:.625rem }
.deal-brand { font-family:var(--font-display); font-size:.75rem; font-weight:700; color:var(--text) }
.deal-discount {
  font-family:var(--font-display); font-size:.875rem; font-weight:900; color:white;
  background:var(--orange); padding:.25rem .75rem; border-radius:var(--r-full);
  box-shadow:0 2px 8px rgba(255,107,53,.35);
}
.deal-item-name { font-size:.9375rem; font-weight:600; color:var(--text); margin-bottom:.5rem }
.deal-prices { display:flex; align-items:baseline; gap:.625rem; margin-bottom:.375rem }
.deal-price-new { font-family:var(--font-display); font-size:1.375rem; font-weight:900; color:var(--orange) }
.deal-card--featured .deal-price-new { font-size:1.75rem }
.deal-price-old { font-size:.875rem; color:var(--muted); text-decoration:line-through }
.deal-source { font-size:.75rem; color:var(--muted); font-weight:500 }
.deal-status {
  margin-top:.875rem; display:inline-flex; align-items:center; gap:.375rem;
  font-size:.6875rem; font-weight:800; letter-spacing:.05em;
  background:var(--orange); color:white;
  padding:.375rem .875rem; border-radius:var(--r-full);
  box-shadow:0 2px 10px rgba(255,107,53,.35);
}
.deal-card--mini {
  background:var(--pink); border-color:transparent;
  display:flex; align-items:center; justify-content:center;
}
.deal-card--mini:hover { border-color:transparent }
.deal-mini-inner { display:flex; align-items:center; gap:.875rem }
.deal-mini-icon { font-size:1.75rem }
.deal-mini-count { font-family:var(--font-display); font-size:1.375rem; font-weight:900; color:white; line-height:1 }
.deal-mini-sub { font-size:.6875rem; color:rgba(255,255,255,.75); font-weight:600 }

/* Buttons */
.btn-primary {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-weight:700; font-size:.875rem;
  padding:.875rem 1.875rem; border-radius:var(--r-full); transition:var(--t);
}
.btn-primary--deal { background:var(--orange); color:white; box-shadow:0 4px 18px rgba(255,107,53,.35) }
.btn-primary--deal:hover { background:#E55A2B; transform:translateY(-2px) }
.btn-primary--pink { background:var(--pink); color:white; box-shadow:0 4px 18px rgba(255,51,102,.3) }
.btn-primary--pink:hover { background:var(--pink-d); transform:translateY(-2px) }

/* ══════════════ EDITORIAL GRID ══════════════ */
.editorial-section { background:var(--bg) }
.editorial-header { margin-bottom:2.5rem }
.editorial-grid { display:grid; gap:1.25rem; grid-template-columns:1fr }
@media(min-width:640px) {
  .editorial-grid { grid-template-columns:repeat(2,1fr) }
  .ed-card--large { grid-column:1/3 }
  .ed-card--wide { grid-column:1/3 }
}
@media(min-width:900px) {
  .editorial-grid { grid-template-columns:repeat(3,1fr) }
  .ed-card--large { grid-column:1/2; grid-row:1/3 }
  .ed-card--wide { grid-column:2/4 }
}
.ed-card { border-radius:var(--r-2xl); overflow:hidden; transition:var(--t-slow); border:1.5px solid transparent }
.ed-card:hover { transform:translateY(-4px); box-shadow:var(--sh-lg) }
.ed-card--large { background:var(--bg-blush);   border-color:rgba(255,51,102,.1) }
.ed-card--yellow{ background:var(--bg-lemon);   border-color:rgba(255,214,0,.2) }
.ed-card--teal  { background:var(--bg-mint);    border-color:rgba(0,196,161,.15) }
.ed-card--white { background:var(--surface);    border-color:var(--border) }
.ed-card--orange{ background:var(--bg-peach);   border-color:rgba(255,107,53,.12) }

.ed-card-img { position:relative; overflow:hidden; flex-shrink:0 }
.ed-card--large .ed-card-img { height:clamp(180px,25vw,300px) }
.ed-card--teal  .ed-card-img { height:180px }
.ed-card--orange .ed-card-img { height:clamp(180px,22vw,260px) }
@media(min-width:900px) { .ed-card--large .ed-card-img { height:clamp(220px,22vw,320px) } }
.ed-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease) }
.ed-card:hover .ed-card-img img { transform:scale(1.04) }
.ed-card-img--overlay { position:relative }
.ed-img-label {
  position:absolute; bottom:.875rem; left:.875rem; background:white; color:var(--text);
  font-size:.6875rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:.375rem .875rem; border-radius:var(--r-full); box-shadow:var(--sh-sm);
}
.ed-card-body { padding:1.5rem }
.ed-cat { display:block; font-size:.6875rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--pink); margin-bottom:.625rem }
.ed-card--yellow .ed-cat { color:var(--orange) }
.ed-card--teal   .ed-cat { color:var(--teal-d) }
.ed-card--orange .ed-cat { color:var(--orange) }
.ed-title { font-family:var(--font-display); font-size:clamp(1.125rem,.9rem + 1vw,1.5rem); letter-spacing:-.02em; line-height:1.2; margin-bottom:.75rem }
.ed-excerpt { font-size:.875rem; color:var(--text-mid); line-height:1.65; margin-bottom:1rem }
.ed-link { font-family:var(--font-display); font-size:.75rem; font-weight:700; color:var(--pink); transition:opacity var(--t) }
.ed-card--yellow .ed-link { color:var(--orange) }
.ed-card--teal   .ed-link { color:var(--teal-d) }
.ed-card--orange .ed-link { color:var(--orange) }
.ed-link:hover { opacity:.65 }

/* ══════════════ CATEGORIES ══════════════ */
.categories-section { background:var(--bg-lavender) }
.cat-grid { display:grid; gap:1rem; grid-template-columns:1fr }
@media(min-width:500px) { .cat-grid { grid-template-columns:repeat(2,1fr) } }
@media(min-width:900px) { .cat-grid { grid-template-columns:repeat(3,1fr) } }
.cat-tile {
  display:flex; align-items:flex-start; gap:1rem;
  padding:1.5rem; border-radius:var(--r-xl); border:1.5px solid transparent;
  transition:var(--t-slow); cursor:pointer;
}
.cat-tile:hover { transform:translateY(-3px); box-shadow:var(--sh-md) }
.cat-tile--mode    { background:var(--bg-blush) } .cat-tile--mode:hover    { border-color:var(--pink) }
.cat-tile--wohnen  { background:white }           .cat-tile--wohnen:hover  { border-color:var(--purple) }
.cat-tile--bio     { background:var(--bg-mint) }  .cat-tile--bio:hover     { border-color:var(--teal) }
.cat-tile--ausfluge{ background:var(--bg-lemon) } .cat-tile--ausfluge:hover{ border-color:var(--yellow-d) }
.cat-tile--deals   { background:var(--bg-peach) } .cat-tile--deals:hover   { border-color:var(--orange) }
.cat-tile--musik   { background:white }           .cat-tile--musik:hover   { border-color:var(--muted) }
.cat-tile--featured {
  background:linear-gradient(135deg,var(--orange),#FF8C42) !important;
  border-color:transparent !important; color:white;
  box-shadow:0 6px 24px rgba(255,107,53,.3);
}
.cat-tile--featured:hover { box-shadow:0 10px 36px rgba(255,107,53,.45) }
.cat-tile--featured h3,.cat-tile--featured p,.cat-tile--featured .cat-tile-arrow { color:white }
.cat-tile--featured p { color:rgba(255,255,255,.8) }
.cat-tile-icon { font-size:2rem; flex-shrink:0; width:3rem; height:3rem; display:grid; place-items:center }
.cat-tile-body { flex:1 }
.cat-tile-body h3 { font-family:var(--font-display); font-size:1rem; font-weight:700; margin-bottom:.375rem; line-height:1.2 }
.cat-tile-body p { font-size:.8125rem; color:var(--muted); line-height:1.5 }
.cat-tile-arrow { font-size:1.25rem; color:var(--faint); margin-left:auto; flex-shrink:0; align-self:center; transition:transform var(--t) }
.cat-tile:hover .cat-tile-arrow { transform:translateX(3px); color:var(--text-mid) }

/* ══════════════ AUSFLÜGE ══════════════ */
.ausfluge-section { background:var(--bg) }
.ausfluge-grid { display:grid; gap:1.25rem; grid-template-columns:1fr }
@media(min-width:640px) {
  .ausfluge-grid { grid-template-columns:repeat(2,1fr) }
  .ausflug-card--big { grid-column:1/3 }
}
@media(min-width:900px) {
  .ausfluge-grid { grid-template-columns:1.5fr 1fr 1fr }
  .ausflug-card--big { grid-column:1/2; grid-row:1/3 }
}
.ausflug-card { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-xl); overflow:hidden; transition:var(--t-slow) }
.ausflug-card:hover { transform:translateY(-4px); box-shadow:var(--sh-md) }
.ausflug-img { position:relative; overflow:hidden }
.ausflug-card--big .ausflug-img { height:clamp(240px,30vw,380px) }
.ausflug-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease) }
.ausflug-card:hover .ausflug-img img { transform:scale(1.04) }
.ausflug-badge {
  position:absolute; top:.875rem; left:.875rem;
  background:var(--yellow); color:var(--text);
  font-family:var(--font-display); font-size:.625rem; font-weight:900;
  letter-spacing:.08em; text-transform:uppercase;
  padding:.3125rem .875rem; border-radius:var(--r-full);
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.ausflug-body { padding:1.25rem }
.ausflug-cat { display:block; font-size:.625rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); margin-bottom:.625rem }
.ausflug-body h3 { font-family:var(--font-display); font-size:clamp(1rem,.9rem + .5vw,1.375rem); letter-spacing:-.02em; line-height:1.25; margin-bottom:.75rem }
.ausflug-body p { font-size:.875rem; color:var(--text-mid); line-height:1.6; margin-bottom:.875rem }

/* ══════════════ MANIFESTO STRIPE ══════════════ */
.manifesto-stripe {
  background:var(--yellow); overflow:hidden;
  padding:.875rem 0; border-top:3px solid var(--text); border-bottom:3px solid var(--text);
}
.manifesto-inner { overflow:hidden }
.manifesto-text {
  display:flex; align-items:center; gap:1.5rem; white-space:nowrap;
  font-family:var(--font-display); font-size:.875rem; font-weight:700;
  color:var(--text); letter-spacing:.02em;
  animation:marquee 22s linear infinite;
  max-width:none;
}
.manifesto-dot { color:var(--text); opacity:.3; font-size:.5rem }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ══════════════ REGISTRATION WIZARD ══════════════ */
.wizard-section {
  background:var(--bg-lavender);
  padding-block:var(--section-y);
}
.wizard-inner {
  max-width:680px; margin:0 auto; padding-inline:var(--pad);
}
.wizard-header { text-align:center; margin-bottom:2.5rem }
.wizard-header .section-label { color:var(--purple) }
.wizard-header .section-title { margin-bottom:.75rem; font-size:clamp(1.75rem,.5rem + 4vw,3rem) }
.wizard-header p { color:var(--text-mid); font-size:1rem; max-width:40ch; margin-inline:auto }

/* Progress Steps */
.wizard-progress {
  display:flex; align-items:center; justify-content:center;
  gap:0; margin-bottom:2.5rem;
}
.wp-step {
  display:flex; flex-direction:column; align-items:center; gap:.375rem;
  flex:1; max-width:120px;
}
.wp-circle {
  width:2.5rem; height:2.5rem; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-display); font-size:.875rem; font-weight:900;
  background:white; color:var(--faint); border:2px solid var(--border);
  transition:var(--t-slow);
}
.wp-step.active  .wp-circle { background:var(--pink);   color:white; border-color:var(--pink);   box-shadow:0 4px 16px rgba(255,51,102,.35) }
.wp-step.done    .wp-circle { background:var(--teal);   color:white; border-color:var(--teal) }
.wp-label { font-size:.625rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); transition:color var(--t-slow) }
.wp-step.active .wp-label { color:var(--pink) }
.wp-step.done   .wp-label { color:var(--teal-d) }
.wp-bar {
  flex:1; height:2px; background:var(--border); margin-top:-1.25rem;
  transition:background .5s var(--ease);
}
.wp-bar.filled { background:var(--teal) }

/* Wizard Card */
.wizard-card {
  background:white; border-radius:var(--r-2xl);
  padding:clamp(1.75rem,5vw,2.5rem);
  box-shadow:var(--sh-lg); border:1.5px solid var(--border);
}

/* Steps */
.wz-step { display:none }
.wz-step.active { display:flex; flex-direction:column; gap:1.25rem }

.wz-title {
  font-family:var(--font-display); font-size:clamp(1.375rem,1rem + 1.5vw,2rem);
  letter-spacing:-.025em; line-height:1.15; color:var(--text);
  margin-bottom:.25rem;
}
.wz-title em { font-style:normal; background:var(--yellow); padding:0 .2em; border-radius:.2em }
.wz-sub { font-size:.9375rem; color:var(--muted); margin-top:-.75rem; margin-bottom:.25rem }

/* Fields */
.field { display:flex; flex-direction:column; gap:.375rem }
.flabel { font-size:.6875rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-mid) }
.flabel em { font-style:normal; font-weight:400; color:var(--faint); text-transform:none; letter-spacing:0 }
.field input, .field select {
  background:var(--bg); border:1.5px solid var(--border);
  border-radius:var(--r-md); padding:.75rem 1rem;
  font-size:1rem; color:var(--text);
  transition:var(--t); -webkit-appearance:none;
}
.field input::placeholder { color:var(--faint) }
.field input:focus, .field select:focus { outline:none; border-color:var(--pink); background:white; box-shadow:0 0 0 3px rgba(255,51,102,.1) }
.field-err { font-size:.75rem; color:var(--pink); font-weight:600; display:none }
.field-err.show { display:block }

/* Interesse-Chips */
.chips-grid { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.25rem }
.chip {
  font-size:.8125rem; font-weight:600;
  background:var(--bg); border:1.5px solid var(--border);
  color:var(--text-mid); border-radius:var(--r-full);
  padding:.4375rem 1rem; transition:var(--t); cursor:pointer;
}
.chip.sel {
  background:var(--pink-l); border-color:var(--pink); color:var(--pink-d);
  box-shadow:0 2px 8px rgba(255,51,102,.15);
}

/* Consent */
.check-row {
  display:flex; align-items:flex-start; gap:.75rem;
  padding:1rem; background:var(--bg); border-radius:var(--r-md);
  border:1.5px solid var(--border);
}
.check-row input[type=checkbox] { width:1.125rem; height:1.125rem; flex-shrink:0; margin-top:.175rem; accent-color:var(--pink) }
.check-row label { font-size:.8125rem; color:var(--text-mid); line-height:1.55; cursor:pointer }
.check-row label a { color:var(--pink); text-decoration:underline }

/* Wizard Buttons */
.wz-actions { display:flex; gap:.875rem; margin-top:.25rem }
.btn-wz-primary {
  flex:1; display:flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--pink); color:white;
  font-family:var(--font-display); font-weight:700; font-size:.9375rem;
  padding:1rem 1.5rem; border-radius:var(--r-full);
  transition:var(--t); box-shadow:0 4px 18px rgba(255,51,102,.3); border:none; cursor:pointer;
}
.btn-wz-primary:hover { background:var(--pink-d); transform:translateY(-2px); box-shadow:0 8px 28px rgba(255,51,102,.4) }
.btn-wz-ghost {
  display:flex; align-items:center; gap:.375rem;
  background:transparent; color:var(--muted);
  font-family:var(--font-display); font-weight:700; font-size:.875rem;
  padding:1rem 1.25rem; border-radius:var(--r-full);
  border:1.5px solid var(--border); transition:var(--t); cursor:pointer;
}
.btn-wz-ghost:hover { border-color:var(--text-mid); color:var(--text) }

/* Step 3 — Success */
.success-wrap { text-align:center; padding:.5rem 0 }
.success-icon {
  width:4.5rem; height:4.5rem; border-radius:50%;
  background:var(--teal); color:white;
  display:grid; place-items:center; font-size:1.875rem;
  margin:0 auto 1.25rem;
  box-shadow:0 6px 24px rgba(0,196,161,.35);
  animation:popIn .5s var(--ease) both;
}
@keyframes popIn { from{transform:scale(0.6);opacity:0} to{transform:scale(1);opacity:1} }
.success-title { font-family:var(--font-display); font-size:clamp(1.5rem,1rem + 2vw,2.25rem); letter-spacing:-.025em; margin-bottom:.5rem }
.success-sub { font-size:.9375rem; color:var(--muted); max-width:36ch; margin:0 auto 1.75rem }
.perks-list { display:flex; flex-direction:column; gap:1rem; margin-bottom:2rem }
.perk {
  display:flex; align-items:center; gap:1rem;
  background:var(--bg); border-radius:var(--r-lg); padding:1rem;
  border:1.5px solid var(--border);
}
.perk-icon-wrap {
  width:3rem; height:3rem; border-radius:var(--r-md); font-size:1.375rem;
  display:grid; place-items:center; flex-shrink:0;
}
.perk:nth-child(1) .perk-icon-wrap { background:var(--bg-blush) }
.perk:nth-child(2) .perk-icon-wrap { background:var(--bg-peach) }
.perk:nth-child(3) .perk-icon-wrap { background:var(--bg-mint) }
.perk strong { display:block; font-size:.9375rem; font-weight:700; margin-bottom:.125rem }
.perk span   { font-size:.8125rem; color:var(--muted) }
.btn-wa {
  display:flex; align-items:center; justify-content:center; gap:.625rem;
  background:#25D366; color:white;
  font-family:var(--font-display); font-weight:700; font-size:.9375rem;
  padding:1rem 1.5rem; border-radius:var(--r-full);
  transition:var(--t); box-shadow:0 4px 18px rgba(37,211,102,.35);
}
.btn-wa:hover { background:#1ebe5c; transform:translateY(-2px) }

/* ══════════════ FOOTER ══════════════ */
.footer {
  background:var(--bg-mint);
  border-top:2px solid rgba(0,196,161,.2);
}
.footer-inner {
  max-width:var(--max); margin:0 auto;
  padding:3rem var(--pad) 2.5rem;
  display:flex; flex-direction:column; gap:2.5rem;
}
@media(min-width:640px) { .footer-inner { flex-direction:row; align-items:flex-start; gap:4rem } }
.footer-brand { max-width:200px }
.footer-tagline { font-size:.875rem; color:var(--text-mid); margin-top:.75rem; line-height:1.6 }
.footer-links { display:flex; gap:3rem; flex-wrap:wrap }
.fl-col { display:flex; flex-direction:column; gap:.75rem }
.fl-head { font-size:.6875rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-mid); margin-bottom:.25rem }
.fl-col a { font-size:.875rem; color:var(--muted); transition:color var(--t) }
.fl-col a:hover { color:var(--text) }
.footer-bottom {
  max-width:var(--max); margin:0 auto; padding:1.25rem var(--pad);
  border-top:1px solid rgba(0,196,161,.15);
  display:flex; flex-direction:column; gap:.375rem;
  font-size:.75rem; color:var(--muted);
}
@media(min-width:640px) { .footer-bottom { flex-direction:row; justify-content:space-between } }

/* ══════════════ MOBILE MENU ══════════════ */
.mobile-menu {
  position:fixed; inset:0; z-index:190;
  background:var(--bg-lavender);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.mobile-menu.open { opacity:1; pointer-events:auto }
.mobile-menu a {
  font-family:var(--font-display); font-size:2rem; font-weight:900; color:var(--text);
  transition:color var(--t);
}
.mobile-menu a:hover { color:var(--pink) }

/* ══════════════ SCROLL REVEAL ══════════════ */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease),transform .6s var(--ease) }
.reveal.visible { opacity:1; transform:translateY(0) }

/* ══════════════ RESPONSIVE ══════════════ */
@media(max-width:639px) {
  .slide-title { font-size:clamp(2.25rem,8vw,3.5rem) }
  .section-title { font-size:clamp(1.75rem,6vw,2.75rem) }
  .intro-headline { font-size:clamp(1.75rem,6vw,2.75rem) }
}