/* ---------- Lokale Schriften (DSGVO: kein Google-Fonts-CDN) ---------- */
@font-face{font-family:'Fraunces';font-style:normal;font-display:swap;font-weight:100 900;src:url('fonts/fraunces-latin-standard-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';font-style:italic;font-display:swap;font-weight:100 900;src:url('fonts/fraunces-latin-standard-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-display:swap;font-weight:400 700;src:url('fonts/instrument-sans-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:italic;font-display:swap;font-weight:400 700;src:url('fonts/instrument-sans-latin-wght-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* TODO DSGVO: Google Fonts vor Livegang LOKAL einbinden (siehe LIESMICH.md) */
/* =========================================================
   LIVAPE v2 – Mobile Ape-Bar · Leverkusen
   Farben & Schrift direkt aus Livs Welt:
   Vanillelack, Nussholz-Theke, Aperol-Spritz, Blattgrün
   ========================================================= */
:root{
  --vanille:  #EFE7D3;
  --creme:    #FBF7ED;
  --nussholz: #7A5738;
  --espresso: #2C2318;
  --spritz:   #D4732F;
  --spritz-d: #B85E20;
  --blatt:    #74815F;
  --linie:    rgba(122, 87, 56, .22);

  --disp: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1120px;
  --pad: clamp(20px, 5vw, 48px);
  --sect: clamp(64px, 10vw, 124px);
  --r: 26px;
  --federn: cubic-bezier(.34, 1.45, .5, 1);   /* leichter Überschwinger */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--espresso);
  background:var(--vanille);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a, button{ -webkit-tap-highlight-color:transparent; }
a{ color:inherit; }
::selection{ background:var(--spritz); color:var(--creme); }
section[id]{ scroll-margin-top:84px; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- Typo-Bausteine ---------- */
.eyebrow{
  font-size:.78rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--nussholz);
  display:flex; align-items:center; gap:.7rem; margin:0 0 1rem;
}
.eyebrow::before{
  content:""; width:34px; height:1px; background:var(--spritz);
  transform:scaleX(0); transform-origin:left;
  transition:transform .7s ease .2s;
}
.in .eyebrow::before, .hero .eyebrow::before{ transform:scaleX(1); }

h1,h2,h3{ font-family:var(--disp); font-weight:560; line-height:1.08; margin:0; }
.h1{ font-size:clamp(2.7rem, 7.5vw, 4.6rem); letter-spacing:-.01em; }
.h2{ font-size:clamp(2rem, 4.6vw, 3rem); margin-bottom:.6em; }
.liv{ font-style:italic; color:var(--spritz); }
.lead{ font-size:clamp(1.1rem, 2.2vw, 1.3rem); max-width:56ch; }
p{ margin:0 0 1.1em; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--sans); font-weight:600; font-size:1rem;
  padding:.9rem 1.6rem; border-radius:999px; border:1px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn:active{ transform:scale(.96); }
.btn svg{ width:1.15em; height:1.15em; flex:none; }
.btn--primary{ background:var(--spritz); color:var(--creme); box-shadow:0 10px 24px -12px rgba(212,115,47,.7); }
.btn--primary:hover{ background:var(--spritz-d); transform:translateY(-2px); }
.btn--ghost{ border-color:var(--espresso); color:var(--espresso); background:transparent; }
.btn--ghost:hover{ background:var(--espresso); color:var(--creme); }
:focus-visible{ outline:3px solid var(--spritz); outline-offset:3px; border-radius:6px; }

.skip{
  position:absolute; left:-999px; top:0; background:var(--espresso); color:var(--creme);
  padding:.7rem 1.2rem; z-index:100; border-radius:0 0 12px 0;
}
.skip:focus{ left:0; }

/* ---------- Navigation ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:rgba(239,231,211,.88);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linie);
  transition:box-shadow .3s ease;
}
.nav.fest{ box-shadow:0 8px 30px -18px rgba(44,35,24,.5); }
.nav__inner{
  max-width:var(--wrap); margin-inline:auto; padding:.7rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.wordmark{
  font-family:var(--disp); font-style:italic; font-weight:560;
  font-size:1.55rem; text-decoration:none; line-height:1;
}
.wordmark small{
  display:block; font-family:var(--sans); font-style:normal; font-weight:600;
  font-size:.58rem; letter-spacing:.28em; text-transform:uppercase; color:var(--nussholz);
  margin-top:.28rem;
}
.nav__links{ display:flex; gap:1.7rem; align-items:center; }
.nav__links a{
  text-decoration:none; font-weight:500; font-size:.95rem; position:relative; padding:.2rem 0;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--spritz); transition:width .2s ease;
}
.nav__links a:hover::after{ width:100%; }
.nav .btn{ padding:.6rem 1.15rem; font-size:.92rem; }
.burger{ display:none; background:none; border:none; cursor:pointer; padding:.6rem; }
.burger span{ display:block; width:24px; height:2px; background:var(--espresso); margin:5px 0; transition:.25s; }
.nav.open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.open .burger span:nth-child(2){ opacity:0; }
.nav.open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 900px){
  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    background:var(--vanille); border-bottom:1px solid var(--linie);
    flex-direction:column; align-items:flex-start; gap:0; padding:.5rem var(--pad) 1.2rem;
    display:none;
  }
  .nav.open .nav__links{ display:flex; }
  .nav__links a{ padding:.9rem 0; width:100%; border-bottom:1px dashed var(--linie); font-size:1.05rem; }
  .nav__links a:last-of-type{ border-bottom:none; }
  .burger{ display:block; }
  .nav .btn{ margin-left:auto; }
}

/* ---------- Hero + Einstiegs-Choreografie ---------- */
.hero{ padding-top:74px; }
.hero__media{ position:relative; overflow:hidden; }
.hero__media img{
  width:100%; height:clamp(400px, 60vh, 660px);
  object-fit:cover; object-position:center 62%;
  animation:kenburns 9s ease-out forwards;
}
@keyframes kenburns{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
.hero__media::after{
  content:""; position:absolute; inset:auto 0 0 0; height:46%;
  background:linear-gradient(to bottom, transparent, var(--vanille));
}
.hero__card{
  position:relative; z-index:2;
  max-width:720px; margin:clamp(-130px,-15vw,-84px) var(--pad) 0;
  background:var(--creme); border:1px solid var(--linie); border-radius:var(--r);
  padding:clamp(1.7rem,4.5vw,3rem);
  box-shadow:0 24px 60px -30px rgba(44,35,24,.35);
  text-align:center;
}
@media (min-width: 800px){ .hero__card{ margin-inline:auto; } }
.hero__card .eyebrow{ justify-content:center; }
.hero__card .eyebrow::after{
  content:""; width:34px; height:1px; background:var(--spritz);
  transform:scaleX(0); transform-origin:right; transition:transform .7s ease .2s;
}
.hero .eyebrow::after{ transform:scaleX(1); }
.hero__cta{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-top:1.6rem; }
.hero__hint{ margin:1.2rem 0 0; font-size:.9rem; color:var(--nussholz); }

.auf{ opacity:0; transform:translateY(22px); animation:auf .85s var(--federn) forwards; animation-delay:var(--d, 0s); }
@keyframes auf{ to{ opacity:1; transform:none; } }

/* ---------- Laufband ---------- */
.marquee{
  background:var(--espresso); color:var(--vanille);
  overflow:hidden; margin-top:var(--sect);
}
.marquee__track{ display:flex; width:max-content; animation:mq 30s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__group{
  display:flex; align-items:center; gap:2.4rem; padding:.95rem 1.2rem;
  font-family:var(--disp); font-style:italic; font-size:1.2rem; white-space:nowrap;
}
.marquee__group i{ font-style:normal; color:var(--spritz); font-size:.8em; }
@keyframes mq{ to{ transform:translateX(-50%); } }

/* ---------- Lichterketten-Trenner ---------- */
.lights{ display:block; width:min(560px, 74%); margin:var(--sect) auto calc(var(--sect) * -0.5); }
.lights .bulb{ animation:twinkle 3.2s ease-in-out infinite alternate; animation-delay:var(--d, 0s); }
@keyframes twinkle{ from{ opacity:.3; } to{ opacity:1; } }

/* ---------- Sektionen ---------- */
.section{ padding-block:var(--sect); }
.section--tight{ padding-block:calc(var(--sect) * .7); }

/* Über / Steckbrief */
.ueber{ display:grid; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (min-width: 880px){ .ueber{ grid-template-columns: 5fr 6fr; } }
.bogen{
  border:1px solid var(--linie); border-radius:999px 999px var(--r) var(--r);
  padding:12px; background:var(--creme); max-width:440px; margin-inline:auto;
}
.bogen img{ border-radius:988px 988px calc(var(--r) - 8px) calc(var(--r) - 8px); width:100%; }
.bogen figcaption{ text-align:center; font-size:.85rem; color:var(--nussholz); padding:.7rem .5rem .2rem; font-style:italic; }
.steckbrief{
  background:var(--creme); border:1px solid var(--linie); border-radius:var(--r);
  padding:1.4rem 1.6rem; margin-top:1.6rem;
}
.steckbrief h3{
  font-size:.78rem; font-family:var(--sans); font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--spritz); margin-bottom:.9rem;
}
.steckbrief dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.45rem 1.2rem; font-size:.98rem; }
.steckbrief dt{ font-weight:600; color:var(--nussholz); }
.steckbrief dd{ margin:0; }
.steckbrief .zeile{ display:contents; }
.reveal.in .steckbrief .zeile > *{ opacity:1; transform:none; }
.steckbrief .zeile > *{ opacity:0; transform:translateX(-8px); transition:.5s ease calc(var(--i,0)*70ms + .25s); }

/* Bars */
.karten{ display:grid; gap:1.2rem; margin-top:2.4rem; }
@media (min-width: 640px){ .karten{ grid-template-columns:1fr 1fr; } }
@media (min-width: 1020px){ .karten{ grid-template-columns:repeat(4,1fr); } }
.karte{
  background:var(--creme); border:1px solid var(--linie); border-radius:var(--r);
  padding:1.7rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.7rem;
  transition:transform .25s ease, box-shadow .25s ease;
}
.karte:hover{ transform:translateY(-6px) rotate(-.4deg); box-shadow:0 22px 44px -26px rgba(44,35,24,.45); }
.karte svg{
  width:38px; height:38px; color:var(--spritz);
  opacity:0; transform:scale(.4) rotate(-12deg);
  transition:.6s var(--federn) calc(var(--i,0)*90ms + .1s);
}
.karte.in svg{ opacity:1; transform:none; }
.karte h3{ font-size:1.35rem; }
.karte p{ margin:0; font-size:.97rem; color:#4c3f30; }
.karten-fuss{ margin-top:1.6rem; font-style:italic; color:var(--nussholz); }

/* ---------- Nachts (dunkle Bühne) ---------- */
.nacht{ background:var(--espresso); color:var(--creme); position:relative; overflow:hidden; }
.nacht .eyebrow{ color:var(--spritz); }
.nacht .eyebrow::before{ background:var(--spritz); }
.nacht .lead{ color:rgba(251,247,237,.82); }
.nacht-grid{ display:grid; gap:clamp(2rem,5vw,4rem); align-items:center; position:relative; z-index:2; }
@media (min-width: 860px){ .nacht-grid{ grid-template-columns:6fr 5fr; } }
.nacht-foto{
  margin:0; border-radius:var(--r); overflow:hidden; position:relative;
  border:1px solid rgba(251,247,237,.18);
  box-shadow:0 0 0 0 rgba(212,115,47,0);
  animation:gluehen 4.5s ease-in-out infinite alternate;
  max-width:480px; justify-self:center;
}
@keyframes gluehen{
  from{ box-shadow:0 0 26px -12px rgba(212,115,47,.25); }
  to{   box-shadow:0 0 46px -8px  rgba(212,115,47,.55); }
}
.nacht-foto img{ width:100%; }
.nacht-foto::before{
  content:""; position:absolute; inset:0 0 auto 0; height:34%;
  background:linear-gradient(to bottom, var(--espresso), transparent);
  z-index:1;
}
.nacht-foto figcaption{
  position:absolute; inset:auto 0 0 0; z-index:1; padding:1.4rem 1.1rem .8rem;
  font-size:.85rem; font-style:italic; color:rgba(251,247,237,.85);
  background:linear-gradient(to top, rgba(44,35,24,.85), transparent);
}
.funkel{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:var(--spritz); opacity:.25; z-index:1;
  animation:twinkle 3s ease-in-out infinite alternate; animation-delay:var(--d);
}

/* ---------- Foto-Karussell (Swipe) ---------- */
.karussell-huelle{ margin-top:2.2rem; }
.karussell{
  display:flex; gap:14px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-inline:max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)));
  padding-bottom:.5rem;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.karussell::-webkit-scrollbar{ display:none; }
.dia{
  flex:0 0 min(78%, 340px); scroll-snap-align:center; margin:0;
}
@media (min-width: 700px){ .dia{ flex-basis:44%; scroll-snap-align:start; } }
@media (min-width: 1020px){ .dia{ flex-basis:340px; } }
.dia img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--r); border:1px solid var(--linie);
}
.dia figcaption{ font-size:.88rem; color:var(--nussholz); padding:.6rem .2rem 0; font-style:italic; }
.punkte{ display:flex; gap:.55rem; justify-content:center; margin-top:1.2rem; }
.punkte button{
  width:12px; height:12px; padding:0; border-radius:50%;
  border:1px solid var(--nussholz); background:transparent; cursor:pointer;
  transition:background .25s ease, transform .25s ease;
}
.punkte button.aktiv{ background:var(--spritz); border-color:var(--spritz); transform:scale(1.25); }
.wisch-tipp{ text-align:center; font-size:.85rem; color:var(--nussholz); font-style:italic; margin-top:.9rem; }
@media (min-width: 1020px){ .wisch-tipp{ display:none; } }
.ig-link{ margin-top:1.8rem; text-align:center; }
.ig-link a{ font-weight:600; text-decoration:none; border-bottom:2px solid var(--spritz); padding-bottom:2px; }
.ig-link a:hover{ color:var(--spritz); }

/* Ablauf */
.schritte{ display:grid; gap:1.2rem; margin-top:2.4rem; counter-reset:s; }
@media (min-width: 820px){ .schritte{ grid-template-columns:repeat(3,1fr); } }
.schritt{
  counter-increment:s; background:var(--creme); border:1px solid var(--linie);
  border-radius:var(--r); padding:1.7rem 1.5rem;
}
.schritt::before{
  content:counter(s);
  font-family:var(--disp); font-style:italic; font-size:2.4rem; color:var(--spritz);
  display:block; line-height:1; margin-bottom:.7rem;
  opacity:0; transform:scale(.4);
  transition:.6s var(--federn) calc(var(--i,0)*100ms + .1s);
}
.schritt.in::before{ opacity:1; transform:none; }
.schritt h3{ font-size:1.3rem; margin-bottom:.4rem; }
.schritt p{ margin:0; font-size:.97rem; color:#4c3f30; }

/* Gebiet */
.gebiet{ text-align:center; }
.gebiet .lead{ margin-inline:auto; }
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:1.8rem; padding:0; list-style:none; }
.chips li{
  border:1px solid var(--blatt); color:var(--blatt);
  padding:.42rem 1rem; border-radius:999px; font-size:.92rem; font-weight:500;
  background:var(--creme);
  opacity:0; transform:scale(.55);
  transition:.45s var(--federn) calc(var(--i,0)*55ms);
}
.reveal.in .chips li{ opacity:1; transform:none; }
.chips li.zuhause{ background:var(--blatt); color:var(--creme); border-color:var(--blatt); }
.gebiet .nachsatz{ margin-top:1.4rem; font-style:italic; color:var(--nussholz); }

/* ---------- Fahrende Mini-Ape ---------- */
.fahrt{ position:relative; height:92px; margin-top:calc(var(--sect) * .4); overflow:hidden; }
.fahrt::after{
  content:""; position:absolute; left:0; right:0; bottom:16px;
  border-bottom:3px dashed var(--linie);
}
.mini-ape{
  position:absolute; bottom:14px; left:-150px; width:126px; z-index:1;
  animation:fahren 14s linear infinite;
}
@keyframes fahren{ from{ left:-150px; } to{ left:100%; } }
.ape-body{ animation:huepf .5s ease-in-out infinite alternate; }
@keyframes huepf{ to{ transform:translateY(-1.6px); } }
.rad{ transform-box:fill-box; transform-origin:center; animation:drehen .65s linear infinite; }
@keyframes drehen{ to{ transform:rotate(360deg); } }
.herz{ opacity:0; animation:herzflug 2.6s ease-out infinite; animation-delay:var(--d, 0s); transform-box:fill-box; transform-origin:center; }
@keyframes herzflug{
  0%{ opacity:0; transform:translate(0,0) scale(.5); }
  15%{ opacity:.9; }
  100%{ opacity:0; transform:translate(16px,-22px) scale(1.1) rotate(14deg); }
}

/* FAQ */
.faq{ max-width:780px; margin-inline:auto; }
.faq details{
  background:var(--creme); border:1px solid var(--linie); border-radius:18px;
  margin-top:.8rem; overflow:hidden;
}
.faq summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:1rem;
  align-items:center; padding:1.05rem 1.3rem; font-weight:600; font-size:1.02rem; min-height:44px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-family:var(--disp); font-size:1.5rem; color:var(--spritz);
  line-height:1; transition:transform .25s ease; flex:none;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq-inhalt{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.3,.7,.3,1); }
.faq details[open] .faq-inhalt{ grid-template-rows:1fr; }
.faq-inhalt > div{ overflow:hidden; }
.faq-inhalt p{ padding:0 1.3rem 1.2rem; margin:0; color:#4c3f30; }

/* ---------- Kontakt (dunkel) ---------- */
.kontakt{ background:var(--espresso); color:var(--creme); }
.kontakt .eyebrow{ color:var(--spritz); }
.kontakt .eyebrow::before{ background:var(--spritz); }
.kontakt .lead{ color:rgba(251,247,237,.82); }
.kontakt-grid{ display:grid; gap:clamp(2rem,5vw,4rem); margin-top:2.6rem; }
@media (min-width: 940px){ .kontakt-grid{ grid-template-columns:6fr 5fr; align-items:start; } }

.formular{
  background:rgba(251,247,237,.06); border:1px solid rgba(251,247,237,.16);
  border-radius:var(--r); padding:clamp(1.4rem,3.5vw,2.2rem);
}
.feld{ margin-bottom:1.05rem; }
.feld label{ display:block; font-size:.82rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.4rem; color:rgba(251,247,237,.75); }
.feld input, .feld select, .feld textarea{
  width:100%; font:inherit; color:var(--espresso);
  background:var(--creme); border:1px solid transparent; border-radius:14px;
  padding:.9rem 1rem; min-height:48px;
}
.feld textarea{ min-height:110px; resize:vertical; }
.feld select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%232C2318' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center;
}
.feld input:focus, .feld select:focus, .feld textarea:focus{ outline:3px solid var(--spritz); outline-offset:0; }
.feld--reihe{ display:grid; gap:1.05rem; }
@media (min-width: 560px){ .feld--reihe{ grid-template-columns:1fr 1fr; } }
.formular .btn{ width:100%; justify-content:center; margin-top:.4rem; }
.form-hinweis{ font-size:.85rem; color:rgba(251,247,237,.6); margin:.9rem 0 0; text-align:center; }
.form-hinweis a{ color:var(--creme); }

.direkt{ display:grid; gap:1rem; }
.direkt a{
  display:flex; align-items:center; gap:1rem; text-decoration:none;
  background:rgba(251,247,237,.06); border:1px solid rgba(251,247,237,.16);
  border-radius:20px; padding:1.1rem 1.3rem; min-height:56px;
  transition:background .2s ease, transform .2s ease;
}
.direkt a:hover{ background:rgba(251,247,237,.12); transform:translateY(-3px); }
.direkt svg{ width:26px; height:26px; color:var(--spritz); flex:none; }
.direkt b{ display:block; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(251,247,237,.65); font-weight:600; }
.direkt span{ font-size:1.05rem; }
.direkt .antwort{ font-size:.9rem; color:rgba(251,247,237,.6); font-style:italic; margin-top:.4rem; }

/* ---------- Footer ---------- */
footer{ background:#221A11; color:rgba(251,247,237,.72); }
.foot{
  max-width:var(--wrap); margin-inline:auto; padding:2.6rem var(--pad) calc(2.6rem + 74px);
  display:flex; flex-wrap:wrap; gap:1.6rem 3rem; align-items:center; justify-content:space-between;
}
@media (min-width: 861px){ .foot{ padding-bottom:2.6rem; } }
.foot .wordmark{ color:var(--creme); }
.foot .wordmark small{ color:var(--spritz); }
.foot nav{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.foot a{ text-decoration:none; font-size:.92rem; }
.foot a:hover{ color:var(--creme); }
.foot .legal{ width:100%; font-size:.82rem; border-top:1px solid rgba(251,247,237,.12); padding-top:1.3rem; display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; justify-content:space-between; }

/* ---------- Sticky-CTA fürs Handy ---------- */
.cta-mobil{
  position:fixed; z-index:60; left:14px; right:14px;
  bottom:calc(12px + env(safe-area-inset-bottom));
  display:none; align-items:center; justify-content:center; gap:.6rem;
  background:var(--spritz); color:var(--creme); text-decoration:none;
  font-weight:600; font-size:1.02rem; padding:1rem 1.4rem; border-radius:999px;
  box-shadow:0 14px 34px -12px rgba(44,35,24,.6);
  transform:translateY(140%); transition:transform .45s var(--federn);
}
.cta-mobil svg{ width:1.2em; height:1.2em; }
.cta-mobil.zeig{ transform:translateY(0); }
@media (max-width: 860px){ .cta-mobil{ display:flex; } }

/* ---------- Scroll-Reveal ---------- */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s ease calc(var(--i,0)*80ms), transform .7s ease calc(var(--i,0)*80ms);
}
.reveal.in{ opacity:1; transform:none; }

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .auf, .hero__media img, .marquee__track, .lights .bulb, .funkel,
  .nacht-foto, .mini-ape, .ape-body, .rad, .herz{ animation:none !important; }
  .auf{ opacity:1; transform:none; }
  .herz{ display:none; }
  .mini-ape{ left:50%; transform:translateX(-50%); }
  .reveal, .chips li, .karte svg, .schritt::before, .steckbrief .zeile > *{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .eyebrow::before, .hero__card .eyebrow::after{ transform:scaleX(1); transition:none; }
  .faq-inhalt{ transition:none; }
  .cta-mobil{ transition:none; }
}

/* =========================================================
   UNTERSEITEN-KOMPONENTEN (Dummy-Struktur)
   ========================================================= */
.seite{ padding-top:74px; }
.seiten-kopf{ padding:calc(var(--sect)*.55) 0 calc(var(--sect)*.25); }

.brotkrumen{ list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; margin:0 0 1.3rem; padding:0; font-size:.85rem; color:var(--nussholz); }
.brotkrumen a{ text-decoration:none; }
.brotkrumen a:hover{ color:var(--spritz); }
.brotkrumen li + li::before{ content:"›"; margin-right:.45rem; opacity:.5; }
.brotkrumen [aria-current]{ font-weight:600; }

.inhalt{ max-width:780px; }
.inhalt h2{ margin-top:2.1em; }
.inhalt h3{ margin-top:1.6em; margin-bottom:.4em; font-size:1.25rem; }

.bild-slot{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem;
  background:var(--creme); border:2px dashed var(--linie); border-radius:var(--r);
  color:var(--nussholz); font-size:.92rem; font-style:italic; text-align:center;
  padding:1.4rem; min-height:230px; margin:1.8rem 0;
}
.bild-slot svg{ width:36px; height:36px; opacity:.55; }

.todo{
  background:rgba(212,115,47,.09); border:1.5px dashed rgba(212,115,47,.5);
  border-radius:14px; padding:.95rem 1.15rem; margin:1.1rem 0;
  color:#8a5326; font-size:.95rem;
}
.todo b{ letter-spacing:.08em; text-transform:uppercase; font-size:.75rem; display:block; margin-bottom:.25rem; }

.phase-badge{
  display:inline-block; background:var(--blatt); color:var(--creme);
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding:.3rem .85rem; border-radius:999px; margin-bottom:1rem;
}

.link-karten{ display:grid; gap:.9rem; margin:1.4rem 0 0; }
@media (min-width:640px){ .link-karten{ grid-template-columns:1fr 1fr; } }
@media (min-width:1020px){ .link-karten{ grid-template-columns:repeat(3,1fr); } }
.link-karte{
  display:block; background:var(--creme); border:1px solid var(--linie); border-radius:18px;
  padding:1.15rem 1.25rem; text-decoration:none;
  transition:transform .22s ease, box-shadow .22s ease;
}
.link-karte:hover{ transform:translateY(-4px); box-shadow:0 18px 36px -24px rgba(44,35,24,.45); }
.link-karte b{ font-family:var(--disp); font-weight:560; font-size:1.18rem; display:block; margin-bottom:.2rem; }
.link-karte span{ font-size:.9rem; color:#4c3f30; }
.link-karte i{ color:var(--spritz); font-style:normal; }

.cta-band{
  background:var(--espresso); color:var(--creme); border-radius:var(--r);
  padding:clamp(1.6rem,4vw,2.4rem); margin-block:calc(var(--sect)*.55);
  display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; justify-content:space-between;
}
.cta-band h2{ font-size:clamp(1.5rem,3.4vw,2.1rem); margin:0; }
.cta-band p{ margin:.35rem 0 0; color:rgba(251,247,237,.8); font-size:.98rem; }
.cta-band .knoepfe{ display:flex; gap:.8rem; flex-wrap:wrap; }

.karten-link{ margin-top:auto; padding-top:.6rem; }
.karten-link a{ font-weight:600; font-size:.93rem; text-decoration:none; color:var(--spritz); }
.karten-link a:hover{ text-decoration:underline; }
.chips a{ color:inherit; text-decoration:none; }
.chips a:hover{ text-decoration:underline; }

/* Footer-Sitemap */
.foot-grid{
  max-width:var(--wrap); margin-inline:auto; padding:2.8rem var(--pad) 1.4rem;
  display:grid; gap:2.2rem; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}
.foot-grid h4{
  font:600 .72rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase;
  color:var(--spritz); margin:0 0 .95rem;
}
.foot-grid a{ display:block; padding:.3rem 0; text-decoration:none; font-size:.92rem; }
.foot-grid a:hover{ color:var(--creme); }
.foot-marke p{ font-size:.88rem; margin:.8rem 0 0; color:rgba(251,247,237,.55); max-width:26ch; }
.foot-legal{
  max-width:var(--wrap); margin-inline:auto; padding:1.3rem var(--pad) calc(2.4rem + 74px);
  font-size:.82rem; border-top:1px solid rgba(251,247,237,.12);
  display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; justify-content:space-between;
}
@media (min-width:861px){ .foot-legal{ padding-bottom:2.4rem; } }
.foot-legal a{ text-decoration:none; }
.foot-legal a:hover{ color:var(--creme); }

/* ---------- v3: Kundenstimmen ---------- */
.stimmen{ display:grid; gap:1.2rem; margin-top:2.4rem; }
@media (min-width:820px){ .stimmen{ grid-template-columns:repeat(3,1fr); align-items:start; } }
.stimme{
  background:var(--creme); border:1px solid var(--linie); border-radius:var(--r);
  padding:2rem 1.5rem 1.5rem; margin:0; font-style:italic; position:relative;
}
.stimme::before{
  content:"\201E"; font-family:var(--disp); font-size:3.4rem; color:var(--spritz);
  position:absolute; top:.2rem; left:1.1rem; opacity:.4; line-height:1;
}
.stimme p{ margin:0 0 .9rem; }
.stimme footer{ font-style:normal; font-size:.88rem; color:var(--nussholz); font-weight:600; }
.stimme--inline{ margin:2.2rem 0; }

/* ---------- v3: Preis-Karten ---------- */
.preis-karten{ display:grid; gap:1rem; margin:1.5rem 0; }
@media (min-width:560px){ .preis-karten{ grid-template-columns:1fr 1fr; } }
.fakten{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--linie,#d8cdb8); border:1px solid var(--linie,#d8cdb8); border-radius:14px; overflow:hidden; margin:1.4rem 0 2rem; }
.fakten>div{ background:var(--vanille,#EFE7D3); padding:.85rem 1rem; }
.fakten dt{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--nussholz,#7A5738); margin:0 0 .25rem; }
.fakten dd{ margin:0; font-weight:600; color:var(--espresso,#2C2318); font-size:.95rem; line-height:1.35; }
.preis-karte{
  background:var(--creme); border:1px solid var(--linie); border-radius:18px;
  padding:1.3rem 1.4rem; display:flex; flex-direction:column; gap:.3rem;
}
.preis-karte b{ font-family:var(--disp); font-weight:560; font-size:1.15rem; }
.preis{ font-family:var(--disp); font-style:italic; font-size:2rem; color:var(--spritz); line-height:1.1; }
.preis-karte span:last-child{ font-size:.9rem; color:#4c3f30; }

/* ---------- v3: Referenz-Liste & Inhaltsfotos ---------- */
.ref-liste{ list-style:none; padding:0; margin:1rem 0 1.4rem; }
.ref-liste li{ padding:.4rem 0 .4rem 1.6rem; position:relative; }
.ref-liste li::before{ content:"\2726"; position:absolute; left:0; color:var(--spritz); }
.inhalt-foto{ margin:1.9rem 0; }
.inhalt-foto img{ width:100%; border-radius:var(--r); border:1px solid var(--linie); }
.inhalt-foto figcaption{ font-size:.85rem; color:var(--nussholz); font-style:italic; padding:.6rem .2rem 0; }