/* =====================================================
   Kiko & Lilo — Website-Stylesheet
   Designsprache: warmes Papier, Kiko-Grün, Lilo-Türkis,
   Mützen-Rot, Serifentypografie (Century Schoolbook)
   ===================================================== */

:root{
  --paper:#FAF2E3;
  --paper-deep:#F2E6CF;
  --ink:#4A3B2A;
  --ink-soft:#7A6650;
  --kiko:#B8E6A0;
  --kiko-hell:#DCF8C6;
  --kiko-deep:#5E8C4A;
  --lilo:#B2DFDB;
  --lilo-hell:#E0F4F4;
  --lilo-deep:#3E7D77;
  --muetze:#D9534F;
  --sun:#F2C14E;
  --card:#FFFDF7;
  --linie:#E4D6B8;
  --radius:18px;
  --schatten:0 6px 24px rgba(74,59,42,.16);
  font-size:16px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Century Schoolbook',Georgia,'Times New Roman',serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  background-image:
    radial-gradient(rgba(74,59,42,.045) 1px, transparent 1px),
    radial-gradient(rgba(74,59,42,.03) 1px, transparent 1px);
  background-size:11px 11px, 23px 23px;
  background-position:0 0, 6px 9px;
}
img{max-width:100%;display:block}
a{color:var(--lilo-deep)}

.container{max-width:1040px;margin:0 auto;padding:0 20px}
.schmal{max-width:720px}

/* ---------- Navigation ---------- */
.top-nav{
  position:sticky;top:0;z-index:60;
  background:rgba(250,242,227,.92);
  backdrop-filter:blur(6px);
  border-bottom:1.5px solid var(--linie);
}
.nav-innen{
  max-width:1040px;margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.marke{
  font-weight:700;font-size:1.15rem;text-decoration:none;color:var(--ink);
  display:flex;align-items:center;gap:8px;
}
.marke .und{color:var(--muetze);font-style:italic}
.nav-toggle{display:none}
.nav-knopf{display:none;cursor:pointer;font-size:1.6rem;color:var(--ink);
  background:none;border:none;line-height:1}
.nav-links{display:flex;gap:6px;list-style:none;align-items:center}
.nav-links a{
  text-decoration:none;color:var(--ink);font-size:.95rem;
  padding:7px 13px;border-radius:999px;transition:background .15s;
}
.nav-links a:hover{background:var(--kiko-hell)}
.nav-links a.aktiv{background:var(--kiko);color:var(--kiko-deep);font-weight:700}
.nav-links a.cta{background:var(--muetze);color:#fff;font-weight:700}
.nav-links a.cta:hover{background:#c34440}

@media(max-width:760px){
  .nav-knopf{display:block}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--card);border-bottom:1.5px solid var(--linie);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .nav-links a{display:block;width:100%;border-radius:0;padding:14px 24px;border-top:1px solid var(--linie)}
  .nav-toggle:checked ~ .nav-links{max-height:400px}
}

/* ---------- Typografie ---------- */
h1{font-size:clamp(2rem,6.5vw,3rem);line-height:1.12;font-weight:700}
h2{font-size:clamp(1.5rem,4.5vw,2.1rem);line-height:1.2;margin-bottom:14px}
h3{font-size:1.15rem;margin-bottom:8px}
.und{color:var(--muetze);font-style:italic}
.vorzeile{
  display:inline-block;
  border:2px solid var(--muetze);color:var(--muetze);
  border-radius:999px;padding:4px 14px;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  transform:rotate(-1.5deg);margin-bottom:16px;
  background:rgba(217,83,79,.06);
}
.blei{font-size:1.12rem;color:var(--ink-soft)}
.kursiv{font-style:italic}

/* ---------- Abschnitte ---------- */
section{padding:56px 0}
section.hell{background:var(--card);border-top:1.5px solid var(--linie);
  border-bottom:1.5px solid var(--linie)}
section.tuerkis{background:var(--lilo-hell)}
.abschnitts-kopf{text-align:center;max-width:640px;margin:0 auto 34px}
.abschnitts-kopf h2::after{
  content:"";display:block;width:64px;height:3px;border-radius:99px;
  background:var(--muetze);margin:12px auto 0;
}

/* ---------- Hero ---------- */
.hero{padding:60px 0 56px}
.hero-innen{
  display:grid;gap:40px;align-items:center;
  grid-template-columns:1fr;
}
@media(min-width:820px){.hero-innen{grid-template-columns:1.15fr .85fr}}
.hero-text .blei{margin:16px 0 24px;max-width:480px}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:12px}
.knopf{
  display:inline-block;text-decoration:none;font-family:inherit;
  font-size:1rem;font-weight:700;border-radius:999px;
  padding:13px 26px;cursor:pointer;transition:transform .15s, background .15s;
  border:2px solid transparent;
}
.knopf:hover{transform:translateY(-2px)}
.knopf.primaer{background:var(--muetze);color:#fff}
.knopf.primaer:hover{background:#c34440}
.knopf.sekundaer{background:none;border-color:var(--ink-soft);color:var(--ink)}
.knopf.sekundaer:hover{border-color:var(--kiko-deep);background:var(--kiko-hell)}
.knopf-hinweis{font-size:.8rem;color:var(--ink-soft);margin-top:10px;font-style:italic}

/* ---------- Platzhalter ---------- */
.platzhalter{
  border:2px dashed var(--ink-soft);
  border-radius:var(--radius);
  background:repeating-linear-gradient(45deg,
    rgba(122,102,80,.05) 0 12px, transparent 12px 24px), var(--paper-deep);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;color:var(--ink-soft);text-align:center;padding:20px;
}
.platzhalter .ph-emoji{font-size:2.4rem}
.platzhalter .ph-label{font-size:.85rem;font-style:italic}
.platzhalter .ph-mass{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.cover-ph{
  aspect-ratio:176/246;max-width:340px;width:100%;margin:0 auto;
  box-shadow:var(--schatten);transform:rotate(1.5deg);
}
.portrait-ph{aspect-ratio:1/1;max-width:280px;width:100%}
.breit-ph{aspect-ratio:16/7;width:100%}

/* ---------- Karten & Raster ---------- */
.karten-raster{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:620px){.karten-raster{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.karten-raster.dreier{grid-template-columns:repeat(3,1fr)}}
.karte{
  background:var(--card);border:1.5px solid var(--linie);
  border-radius:var(--radius);padding:22px;
  box-shadow:0 3px 12px rgba(74,59,42,.07);
}
.karte .k-emoji{font-size:2rem;margin-bottom:8px}
.karte p{font-size:.95rem;color:var(--ink-soft)}

/* ---------- Zitate ---------- */
.zitat{
  background:var(--paper);
  border-left:4px solid var(--kiko-deep);
  border-radius:0 14px 14px 0;
  padding:16px 20px;font-style:italic;font-size:1.05rem;
  position:relative;margin:20px 0;
}
.zitat::before{
  content:"\201E";position:absolute;top:-16px;left:8px;
  font-size:3rem;color:var(--kiko-deep);opacity:.3;font-style:normal;
}
.zitat-quelle{font-size:.78rem;color:var(--ink-soft);margin-top:8px;font-style:normal}

/* ---------- Routen-Band ---------- */
.route-band{
  display:flex;gap:10px;overflow-x:auto;padding:10px 4px 18px;
  scroll-snap-type:x mandatory;
}
.route-halt{
  scroll-snap-align:start;flex:0 0 auto;
  background:var(--card);border:1.5px solid var(--linie);
  border-radius:14px;padding:12px 16px;text-align:center;min-width:118px;
}
.route-halt .r-nr{
  display:inline-flex;width:26px;height:26px;border-radius:50%;
  background:var(--kiko);color:var(--kiko-deep);font-weight:700;
  align-items:center;justify-content:center;font-size:.85rem;margin-bottom:6px;
}
.route-halt .r-emoji{font-size:1.4rem}
.route-halt .r-ort{font-size:.82rem;font-weight:700;margin-top:4px}
.route-pfeil{align-self:center;color:var(--muetze);flex:0 0 auto;font-size:1.1rem}

/* ---------- Figuren ---------- */
.figuren-raster{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:560px){.figuren-raster{grid-template-columns:repeat(2,1fr)}}
@media(min-width:880px){.figuren-raster{grid-template-columns:repeat(3,1fr)}}
.figur-karte{
  border-radius:var(--radius);padding:22px;
  border:1.5px solid rgba(74,59,42,.12);
  box-shadow:0 3px 12px rgba(74,59,42,.07);
  display:flex;flex-direction:column;gap:8px;
}
.figur-kopf{display:flex;align-items:center;gap:12px}
.figur-avatar{
  width:52px;height:52px;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;flex:0 0 auto;
  border:2px solid rgba(74,59,42,.15);
}
.figur-name{font-weight:700;font-size:1.1rem}
.figur-meta{font-size:.78rem;color:var(--ink-soft);font-style:italic}
.figur-karte p{font-size:.92rem}
.figur-ort{
  align-self:flex-start;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;background:rgba(255,255,255,.65);
  border-radius:999px;padding:3px 11px;color:var(--ink-soft);
}
.gruppen-titel{
  margin:38px 0 16px;display:flex;align-items:center;gap:12px;
  font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
.gruppen-titel::after{content:"";flex:1;height:1.5px;background:var(--linie)}

/* ---------- Info-Boxen ---------- */
.info-box{
  background:var(--lilo-hell);border:1.5px solid #C6E0DC;
  border-radius:var(--radius);padding:22px;
}
.info-box.gruen{background:var(--kiko-hell);border-color:#BBDCA8}
.info-box.rot{background:#FBEAE9;border-color:#EFC9C7}
.hinweis-marker{
  background:#FFF3CD;border:1.5px dashed #D9B84A;border-radius:8px;
  padding:2px 8px;font-size:.85em;font-style:italic;color:#8a6d1a;
}

.daten-tabelle{width:100%;border-collapse:collapse;font-size:.95rem}
.daten-tabelle td{padding:9px 6px;border-bottom:1px solid var(--linie);vertical-align:top}
.daten-tabelle td:first-child{font-weight:700;width:38%;color:var(--ink-soft)}

ul.punkte{list-style:none;display:grid;gap:10px;margin-top:10px}
ul.punkte li{padding-left:26px;position:relative;font-size:.97rem}
ul.punkte li::before{content:"🐸";position:absolute;left:0;top:1px;font-size:.85rem}
ul.punkte.storch li::before{content:"🦢"}

/* ---------- CTA-Streifen ---------- */
.cta-streifen{
  background:linear-gradient(135deg,var(--kiko-hell),var(--lilo-hell));
  border-top:1.5px solid var(--linie);border-bottom:1.5px solid var(--linie);
  text-align:center;padding:52px 20px;
}
.cta-streifen h2{margin-bottom:10px}
.cta-streifen p{color:var(--ink-soft);max-width:520px;margin:0 auto 22px}

/* ---------- Fußzeile ---------- */
footer{
  background:var(--paper-deep);border-top:1.5px solid var(--linie);
  padding:36px 20px;text-align:center;font-size:.88rem;color:var(--ink-soft);
}
footer .fuss-links{margin:12px 0;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
footer a{color:var(--ink-soft)}
footer .buchtitel{color:var(--ink);font-weight:700}

/* ---------- Mitreise-Karte: Kopfbereich ---------- */
.stempel{
  display:inline-block;border:2px solid var(--muetze);color:var(--muetze);
  border-radius:999px;padding:4px 14px;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;transform:rotate(-2deg);margin-bottom:14px;
  background:rgba(217,83,79,.06);
}
.untertitel{margin-top:10px;color:var(--ink-soft);font-style:italic;font-size:1.02rem}
.anleitung{
  margin:16px auto 0;font-size:.88rem;color:var(--ink-soft);
  background:var(--card);border:1px dashed var(--ink-soft);
  border-radius:var(--radius);padding:10px 16px;max-width:420px;
}
.anleitung b{color:var(--kiko-deep)}

/* ---------- Mitreise-Karte: die Foto-Karte mit Klick-Stationen ---------- */
.karten-rahmen{max-width:600px;margin:22px auto 8px;padding:0 14px}
.karten-blatt-foto{
  background:var(--paper-deep);border:1.5px solid #D8C6A4;border-radius:22px;
  box-shadow:var(--schatten);padding:0;position:relative;overflow:hidden;
}
.reisefoto{display:block;width:100%;height:auto}
#marker-ebene{position:absolute;inset:0}

.marker{
  position:absolute;transform:translate(-50%,-50%);
  width:8%;aspect-ratio:1/1;min-width:26px;
  border-radius:50%;background:rgba(255,253,247,.001);border:3px solid rgba(217,83,79,.001);
  cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;
  transition:background .18s,border-color .18s,transform .18s;
  animation:kk-aufpoppen .5s cubic-bezier(.34,1.56,.64,1) both;
}
.marker .nr{
  width:60%;aspect-ratio:1/1;border-radius:50%;
  background:var(--muetze);color:#fff;font-family:Georgia,serif;font-weight:bold;
  display:flex;align-items:center;justify-content:center;font-size:.8rem;
  box-shadow:0 2px 8px rgba(74,59,42,.35);opacity:.9;transition:transform .18s,opacity .18s;
}
.marker:hover,.marker:focus-visible{
  background:rgba(255,253,247,.4);border-color:rgba(217,83,79,.6);
  transform:translate(-50%,-50%) scale(1.1);outline:none;
}
.marker:hover .nr,.marker:focus-visible .nr{opacity:1}
.marker.aktiv .nr{background:var(--kiko-deep)}
@keyframes kk-aufpoppen{from{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}

.legende{text-align:center;font-size:.8rem;color:var(--ink-soft);margin:10px auto 4px;font-style:italic}

/* ---------- Mitreise-Karte: Stationsliste (Fallback/Übersicht) ---------- */
.stations-liste{max-width:520px;margin:14px auto 40px;padding:0 14px;display:grid;gap:8px}
.stations-liste button{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--card);border:1.5px solid #E4D6B8;border-radius:14px;
  padding:11px 14px;font-family:inherit;font-size:.98rem;color:var(--ink);
  cursor:pointer;transition:transform .15s, border-color .15s;
}
.stations-liste button:hover{transform:translateX(4px);border-color:var(--kiko-deep)}
.stations-liste .nr-chip{
  flex:0 0 30px;height:30px;border-radius:50%;background:var(--kiko);color:var(--kiko-deep);
  display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:.9rem;
}
.stations-liste .l-emo{font-size:1.2rem}
.stations-liste .l-ort{font-weight:700}
.stations-liste .l-kap{display:block;font-size:.78rem;color:var(--ink-soft);font-style:italic}

/* ---------- Mitreise-Karte: Bottom-Sheet ---------- */
.schleier{
  position:fixed;inset:0;background:rgba(58,45,30,.45);
  opacity:0;pointer-events:none;transition:opacity .3s;z-index:70;
}
.schleier.offen{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:75;max-height:88vh;overflow-y:auto;
  background:var(--card);border-radius:26px 26px 0 0;box-shadow:0 -8px 40px rgba(74,59,42,.35);
  transform:translateY(105%);transition:transform .38s cubic-bezier(.32,.9,.35,1);
  padding:0 0 max(20px, env(safe-area-inset-bottom));
}
.sheet.offen{transform:translateY(0)}
@media(min-width:640px){
  .sheet{max-width:560px;left:50%;transform:translate(-50%,105%)}
  .sheet.offen{transform:translate(-50%,0)}
}
.sheet-griff{
  position:sticky;top:0;background:var(--card);padding:10px 0 4px;
  text-align:center;border-radius:26px 26px 0 0;z-index:2;
}
.sheet-griff::before{
  content:"";display:block;width:44px;height:5px;border-radius:99px;
  background:#D9CBAD;margin:0 auto;
}
.sheet-kopf{padding:10px 22px 14px;border-bottom:1.5px dashed #E4D6B8}
.sheet-kopf .kapitel-chip{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lilo-deep)}
.sheet-kopf h2{font-size:1.45rem;line-height:1.2;margin-top:4px}
.sheet-kopf .emo-gross{font-size:1.5rem;margin-right:6px}
.figuren{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.figur{background:var(--lilo-hell);color:var(--lilo-deep);border-radius:999px;padding:3px 12px;font-size:.8rem}
.sheet-inhalt{padding:6px 22px 26px;display:grid;gap:18px}
.sheet-inhalt h3{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
}
.sheet-inhalt h3::after{content:"";flex:1;height:1px;background:#E4D6B8}

.wissen{background:#FDF9EE;border:1.5px solid #EFE3C4;border-radius:14px;padding:14px 16px}
.impuls{background:var(--lilo-hell);border-radius:14px;padding:14px 16px;border:1.5px solid #C6E0DC}
.impuls .rolle{font-size:.75rem;color:var(--lilo-deep);font-weight:bold;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}

.raetsel{background:#FFF;border:2px solid var(--kiko);border-radius:16px;padding:16px}
.raetsel p.frage{font-weight:700;margin-bottom:12px}
.antworten{display:grid;gap:8px}
.antworten button{
  font-family:inherit;font-size:.95rem;color:var(--ink);background:var(--paper);
  border:1.5px solid #E0D2B2;border-radius:12px;padding:10px 14px;text-align:left;
  cursor:pointer;transition:background .15s, border-color .15s, transform .1s;
}
.antworten button:hover:not(:disabled){border-color:var(--kiko-deep)}
.antworten button:disabled{cursor:default;opacity:.85}
.antworten button.richtig{background:var(--kiko);border-color:var(--kiko-deep);font-weight:700;
  animation:kk-huepfer .45s cubic-bezier(.34,1.56,.64,1)}
.antworten button.falsch{background:#F8E1E0;border-color:var(--muetze);animation:kk-wackeln .35s}
@keyframes kk-huepfer{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes kk-wackeln{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.feedback{margin-top:10px;font-size:.9rem;display:none}
.feedback.zeigen{display:block;animation:kk-huepfer .4s}
.feedback.gut{color:var(--kiko-deep);font-weight:700}
.feedback.nochmal{color:var(--muetze)}

.sheet-nav{display:flex;justify-content:space-between;align-items:center;padding:4px 22px 8px;gap:10px}
.sheet-nav button{
  font-family:inherit;font-size:.9rem;background:none;border:1.5px solid #E0D2B2;
  border-radius:999px;padding:8px 16px;color:var(--ink);cursor:pointer;
  transition:border-color .15s, background .15s;
}
.sheet-nav button:hover{border-color:var(--kiko-deep);background:var(--paper)}
.sheet-nav .fortschritt{font-size:.8rem;color:var(--ink-soft);font-style:italic}
.schliessen{
  position:absolute;top:14px;right:16px;z-index:3;width:34px;height:34px;border-radius:50%;
  background:var(--paper);border:1.5px solid #E0D2B2;font-size:1rem;color:var(--ink-soft);cursor:pointer;
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ==================================================================
   PREMIUM-HERO (Startseite): Begegnungsszene, Chat-Animation, Route
   Eigener Namensraum .hero-premium* — kollidiert bewusst nicht mit
   der sitweiten .hero-Klasse (siehe andere Seiten-Header).
   ================================================================== */
  :root {
    --kiko-gruen-hell: #B8E6A0;
    --kiko-gruen: #5E8C4A;
    --lilo-tuerkis-hell: #B2DFDB;
    --lilo-tuerkis: #3E7D77;
    --muetzen-rot: #D9534F;
    --papier-creme: #FAF2E3;
    --tinte: #3A3630;
    --font-erzaehl: 'Century Schoolbook', Georgia, 'Times New Roman', serif;
    --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: var(--font-erzaehl);
    color: var(--tinte);
    background: var(--papier-creme);
  }

  /* ============ HERO ============ */
  .hero-premium {
    position: relative;
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(340px, 46fr) 54fr;
    align-items: center;
    overflow: hidden;
    background:
      radial-gradient(120% 90% at 85% 30%, #ffffff 0%, rgba(255,255,255,0) 55%),
      linear-gradient(170deg, #E4F1F7 0%, #F4F2E9 46%, var(--papier-creme) 100%);
  }

  /* Treibende Aquarell-Wolken */
  .wolke {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255,255,255,1), rgba(255,255,255,0));
    filter: blur(1px);
    pointer-events: none;
    animation: treiben 46s linear infinite;
  }
  .wolke::after {
    content: '';
    position: absolute;
    inset: 22% -28% auto auto;
    width: 72%; height: 72%;
    border-radius: 50%;
    background: inherit;
  }
  .wolke--1 { width: 320px; height: 110px; top: 11%; left: -340px; }
  .wolke--2 { width: 220px; height: 80px;  top: 32%; left: -240px; animation-duration: 62s; animation-delay: -24s; }
  .wolke--3 { width: 380px; height: 124px; top: 4%;  left: -400px; animation-duration: 78s; animation-delay: -48s; opacity: .8; }

  @keyframes treiben {
    to { transform: translateX(calc(100vw + 440px)); }
  }

  /* ---------- Textseite ---------- */
  .hero__text {
    position: relative;
    z-index: 2;
    padding: clamp(2rem, 6vw, 5.5rem);
    max-width: 640px;
    justify-self: end;
  }

  .hero__dachzeile {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lilo-tuerkis);
    margin-bottom: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  .hero__dachzeile::before {
    content: '';
    width: 34px; height: 2px;
    background: var(--lilo-tuerkis);
    border-radius: 2px;
  }

  .hero__titel {
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    font-weight: 700;
    line-height: 1.05;
    margin-bottom: 0.65rem;
  }
  .hero__titel .und {
    font-style: italic;
    font-weight: 400;
    color: var(--kiko-gruen);
    font-size: 0.6em;
    vertical-align: 12%;
    padding: 0 0.1em;
  }
  .hero__titel .kiko { color: var(--kiko-gruen); }
  .hero__titel .lilo { color: var(--lilo-tuerkis); }

  .hero__untertitel {
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    font-style: italic;
    color: #6B655B;
    margin-bottom: 1.6rem;
  }

  .hero__route {
    position: relative;
    font-family: var(--font-ui);
    font-size: 0.92rem;
    color: var(--tinte);
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(94,140,74,0.25);
    border-radius: 999px;
    padding: 0.45rem 1.1rem 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.9rem;
    backdrop-filter: blur(4px);
    overflow: hidden;
  }
  .hero__route .punkt { color: var(--muetzen-rot); font-weight: 600; }
  /* Flugroute zeichnet sich als gestrichelte Linie unter dem Text */
  .hero__route::after {
    content: '';
    position: absolute;
    left: 1.1rem; right: 1.1rem; bottom: 0.34rem;
    height: 0;
    border-bottom: 2px dashed var(--lilo-tuerkis);
    opacity: 0.55;
    clip-path: inset(0 100% 0 0);
    animation: routeZeichnen 1.6s ease-out 1.1s forwards;
  }
  @keyframes routeZeichnen {
    to { clip-path: inset(0 0 0 0); }
  }

  .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-bottom: 2rem;
  }
  .btn {
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 999px;
    padding: 0.85rem 1.9rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .btn--primaer {
    background: var(--muetzen-rot);
    color: #fff;
    box-shadow: 0 6px 18px rgba(217,83,79,0.35);
  }
  .btn--primaer:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(217,83,79,0.42); }
  .btn--sekundaer {
    background: transparent;
    color: var(--lilo-tuerkis);
    border: 2px solid var(--lilo-tuerkis);
  }
  .btn--sekundaer:hover { background: rgba(178,223,219,0.35); transform: translateY(-2px); }

  .hero__fakten {
    font-family: var(--font-ui);
    font-size: 0.82rem;
    color: #837c70;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
  }
  .hero__fakten span::before {
    content: '·';
    margin-right: 1rem;
    color: var(--kiko-gruen);
  }
  .hero__fakten span:first-child::before { content: none; margin: 0; }

  /* ---------- Bildseite ---------- */
  .hero__bild {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .hero__bild img {
    display: block;
    width: min(100%, 92svh);
    height: auto;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%);
            mask-image: linear-gradient(to right, transparent 0%, #000 14%);
    animation: schweben 7s ease-in-out infinite;
  }

  @keyframes schweben {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
  }

  /* ---------- WhatsApp-Karte: Pillis Nachricht ---------- */
  .chat-schub { margin-top: 1.7rem; }
  @media (min-width: 1200px) {
    .chat-schub { transform: translateX(16%); }
  }
  .chat {
    position: relative;
    z-index: 3;
    width: min(340px, 100%);
    background: rgba(253, 251, 246, 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(94,140,74,0.18);
    border-radius: 18px;
    box-shadow: 0 14px 40px rgba(58,54,48,0.18);
    padding: 0.9rem 1rem 1rem;
    font-family: var(--font-ui);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .chat.sichtbar { opacity: 1; transform: translateY(0); }

  .chat__kopf {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.6rem;
    margin-bottom: 0.7rem;
    border-bottom: 1px solid rgba(94,140,74,0.15);
  }
  .chat__avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--lilo-tuerkis-hell);
    display: grid;
    place-items: center;
    font-size: 1.05rem;
  }
  .chat__name { font-size: 0.88rem; font-weight: 600; color: var(--tinte); line-height: 1.15; }
  .chat__ort  { font-size: 0.72rem; color: #8a8375; font-weight: 400; }

  .chat__blase {
    background: #fff;
    border: 1px solid rgba(94,140,74,0.14);
    border-radius: 4px 14px 14px 14px;
    padding: 0.55rem 0.75rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #3f3a33;
    margin-bottom: 0.55rem;
    max-width: 95%;
    box-shadow: 0 2px 6px rgba(58,54,48,0.06);
    display: none;
  }
  .chat__blase.da { display: block; animation: blaseAuf 0.35s ease; }
  @keyframes blaseAuf {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  .chat__tippen {
    display: none;
    background: #fff;
    border: 1px solid rgba(94,140,74,0.14);
    border-radius: 4px 14px 14px 14px;
    padding: 0.6rem 0.85rem;
    width: max-content;
    margin-bottom: 0.55rem;
  }
  .chat__tippen.da { display: flex; gap: 4px; }

  .chat__status {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-style: italic;
    color: var(--kiko-gruen);
    margin-top: 0.2rem;
  }
  .chat__status.da { display: flex; }

  .punkt-anim {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #b3ab9c;
    animation: tippen 1.2s ease-in-out infinite;
  }
  .chat__status .punkt-anim { width: 4px; height: 4px; background: var(--kiko-gruen); }
  .punkt-anim:nth-child(2) { animation-delay: 0.15s; }
  .punkt-anim:nth-child(3) { animation-delay: 0.3s; }
  @keyframes tippen {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30%           { transform: translateY(-4px); opacity: 1; }
  }

  /* ---------- Sanfter Seitenaufbau ---------- */
  .auftritt { opacity: 0; transform: translateY(18px); animation: auftritt 0.7s ease forwards; }
  .auftritt--2 { animation-delay: 0.12s; }
  .auftritt--3 { animation-delay: 0.24s; }
  .auftritt--4 { animation-delay: 0.36s; }
  .auftritt--5 { animation-delay: 0.48s; }
  @keyframes auftritt { to { opacity: 1; transform: translateY(0); } }

  /* ---------- Mobil ---------- */
  @media (max-width: 860px) {
    .hero-premium {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto auto;
      padding-top: 1rem;
    }
    .hero__text {
      width: 100%;
      min-width: 0;
      justify-self: stretch;
      margin: 0 auto;
      text-align: center;
      padding-bottom: 0.5rem;
    }
    .hero__dachzeile { justify-content: center; }
    .hero__dachzeile::before { display: none; }
    .hero__cta { justify-content: center; }
    .hero__fakten { justify-content: center; }
    .hero__bild { justify-content: center; padding: 0 1rem 0.5rem; min-width: 0; }
    .hero__bild img {
      width: min(100%, 480px);
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%);
              mask-image: linear-gradient(to bottom, transparent 0%, #000 10%);
    }
    .chat-schub { transform: none; display: flex; justify-content: center; }
    .chat { width: min(420px, 92vw); text-align: left; }
  }

  /* ---------- Reduzierte Bewegung ---------- */
  @media (prefers-reduced-motion: reduce) {
    .wolke, .hero__bild img, .auftritt, .hero__route::after,
    .chat__blase.da, .punkt-anim { animation: none; }
    .auftritt { opacity: 1; transform: none; }
    .hero__route::after { clip-path: inset(0 0 0 0); }
    .chat { transition: none; }
  }

/* ---------- Bonusmaterial: Audio-/Medien-Karten ---------- */
.lieder-raster{display:grid;gap:22px;grid-template-columns:1fr;margin-top:26px}
@media(min-width:720px){.lieder-raster{grid-template-columns:repeat(2,1fr)}}

.lied-karte{
  background:var(--card);border:1.5px solid var(--linie);border-radius:var(--radius);
  padding:26px;box-shadow:0 3px 12px rgba(74,59,42,.07);display:flex;flex-direction:column;gap:14px;
}
.lied-kopf{display:flex;align-items:center;gap:14px}
.lied-icon{
  width:52px;height:52px;border-radius:50%;background:var(--kiko-hell);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex:0 0 auto;
}
.lied-titel{font-weight:700;font-size:1.1rem}
.lied-kontext{font-size:.82rem;color:var(--ink-soft);font-style:italic;margin-top:2px}
.lied-karte p.lied-text{font-size:.92rem;color:var(--ink-soft)}

.lied-player{width:100%}
.lied-player audio{width:100%;display:block}
.lied-platzhalter{
  border:2px dashed var(--ink-soft);border-radius:12px;
  background:repeating-linear-gradient(45deg,rgba(122,102,80,.05) 0 10px,transparent 10px 20px),var(--paper-deep);
  padding:16px;text-align:center;color:var(--ink-soft);font-size:.85rem;font-style:italic;
}
.lied-platzhalter b{color:var(--kiko-deep);font-style:normal}

.bonus-raster{display:grid;gap:18px;grid-template-columns:1fr;margin-top:16px}
@media(min-width:720px){.bonus-raster{grid-template-columns:repeat(3,1fr)}}
.bonus-karte{
  background:var(--paper-deep);border:1.5px dashed #D8C6A4;border-radius:var(--radius);
  padding:22px;text-align:center;color:var(--ink-soft);
}
.bonus-karte .b-icon{font-size:1.8rem;margin-bottom:8px;opacity:.7}
.bonus-karte h3{font-size:.98rem;color:var(--ink);margin-bottom:4px}
.bonus-karte .b-status{
  display:inline-block;margin-top:8px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--lilo-hell);color:var(--lilo-deep);border-radius:999px;padding:3px 12px;
}