/* =========================================================================
   Flauschfarm — gemeinsames Design für alle Seiten
   Pink #FF0082 und Schwarz stammen unverändert aus der bestehenden Website
   (--global_main_color / --home_background_color).
   Schrift: Zilla Slab (greift den Logo-Schriftzug auf) + Open Sans.
   ====================================================================== */
:root{
  --bg:#000000;
  --surface:#121215;
  --surface-2:#1B1B20;
  --pink:#FF0082;
  --pink-bright:#FF4DA6;
  --pink-wash:rgba(255,0,130,.12);
  --white:#FFFFFF;
  --text:#E9E9EC;
  --muted:#9C9CA6;
  --faint:#6E6E78;
  --line:#2A2A30;
  --line-bright:#3D3D46;

  --f-display:"Zilla Slab",Georgia,"Times New Roman",serif;
  --f-body:"Open Sans","Helvetica Neue",Arial,sans-serif;

  --step--1:clamp(.8rem,.78rem + .1vw,.86rem);
  --step-0:clamp(1rem,.97rem + .16vw,1.08rem);
  --step-1:clamp(1.15rem,1.09rem + .3vw,1.35rem);
  --step-2:clamp(1.45rem,1.3rem + .7vw,1.95rem);
  --step-3:clamp(1.9rem,1.55rem + 1.6vw,3rem);
  --step-4:clamp(2.5rem,1.6rem + 4vw,5.2rem);

  --gutter:clamp(1.15rem,4vw,2.5rem);
  --measure:62ch;
  --wrap:74rem;
  --kopfhoehe:4.5rem;
}

*,*::before,*::after{box-sizing:border-box}
/* Ein per JavaScript gesetztes hidden muss auch dann greifen, wenn die
   Regel darunter dem Element ein display gibt (grid, flex, block). */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--kopfhoehe)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-body);
     font-size:var(--step-0);line-height:1.65;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.08;margin:0;
            text-wrap:balance;color:var(--white)}
p{margin:0}
a{color:inherit}
img,video{max-width:100%}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.prose{max-width:var(--measure)}
.eyebrow{font-size:var(--step--1);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
         color:var(--pink-bright);display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}
.eyebrow::after{content:"";width:3.5rem;height:3px;background:var(--pink)}
.eyebrow.mitte{align-items:center;text-align:center}
.h-sec{font-size:var(--step-3);margin-top:1.1rem;max-width:22ch;text-transform:uppercase;letter-spacing:-.02em}
.lede{color:var(--muted);margin-top:1.1rem}
section{padding-block:clamp(3.2rem,7vw,6rem);border-top:1px solid var(--line)}
section:first-of-type{border-top:none}

/* ---------- Knöpfe ---------- */
.btn{display:inline-block;font-weight:700;font-size:var(--step-0);letter-spacing:.03em;
     text-decoration:none;cursor:pointer;padding:.85rem 1.7rem;border:2px solid var(--pink);
     background:var(--pink);color:#fff;transition:background .15s ease,color .15s ease,transform .15s ease}
.btn:hover{background:transparent;color:var(--pink-bright);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--white);border-color:var(--line-bright)}
.btn-ghost:hover{border-color:var(--pink);color:var(--pink-bright)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:2rem}

/* ---------- Kopfleiste ---------- */
.kopf{position:sticky;top:0;z-index:40;background:rgba(0,0,0,.92);
      backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.kopf-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
         min-height:var(--kopfhoehe)}
.marke{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.marke img{width:2.6rem;height:2.6rem;display:block}
.marke span{font-family:var(--f-display);font-weight:700;font-size:var(--step-1);color:var(--white)}
.nav{display:flex;gap:1.15rem;font-size:.92rem;font-weight:600;letter-spacing:.03em}
.nav a{color:var(--muted);text-decoration:none;padding-block:.3rem}
.nav a:hover,.nav a[aria-current="page"]{color:var(--pink-bright)}
.nav-btn{display:none;background:transparent;border:1px solid var(--line-bright);color:var(--white);
         width:2.6rem;height:2.6rem;cursor:pointer;font-size:1.1rem;line-height:1}
/* 75rem statt 60rem: Seit die Navigation "Preisrechner" enthält, ist sie
   breiter. Darunter bricht sie um und überlagert das Logo, deshalb kommt
   dort das Menü zum Aufklappen. */
@media (max-width:75rem){
  .nav-btn{display:block}
  .nav{position:fixed;inset:var(--kopfhoehe) 0 auto 0;background:#000;border-bottom:1px solid var(--line);
       flex-direction:column;gap:0;padding:1rem var(--gutter) 1.6rem;display:none}
  .nav.offen{display:flex}
  .nav a{padding-block:.7rem;border-bottom:1px solid var(--line);font-size:1.05rem}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(86vh,44rem);display:flex;align-items:flex-end;
      padding-block:6rem 3.5rem;border-top:none;overflow:hidden}
.hero-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 55%;background:#000}
/* Keine Blende nötig: Das Standbild ist das erste Bild des Videos, der
   Übergang ist deshalb von selbst unsichtbar. Wird das Video nicht geladen,
   bleibt das Standbild einfach stehen. */
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.6) 45%,rgba(0,0,0,.35) 100%)}
.hero-in{position:relative;z-index:1;width:100%}
.hero h1{font-size:var(--step-4);letter-spacing:-.025em;max-width:15ch;text-transform:uppercase}
.hero h1 em{font-style:normal;color:var(--pink)}
.hero .sub{font-size:var(--step-1);color:var(--text);max-width:44ch;margin-top:1.4rem}

/* ---------- Zweispalter ---------- */
.zwei{display:grid;gap:clamp(1.6rem,4vw,3.5rem);align-items:center;
      grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));margin-top:2.5rem}
/* height:auto ist Pflicht, sobald die Bilder width/height im Text tragen:
   sonst gilt die Höhe aus dem Attribut, max-height greift und der
   Ausschnitt wird quadratisch. Das Seitenverhältnis kommt weiter aus den
   Maßangaben, der Platz wird also trotzdem vorab reserviert. */
.zwei img,.zwei video{width:100%;height:auto;display:block;
  background:var(--surface-2);max-height:34rem;object-fit:cover}
/* Hochformate würden an der Deckelung oben hängenbleiben und dadurch fast
   quadratisch beschnitten. Hier ist der Ausschnitt bewusst gesetzt. */
.zwei img.hoch{aspect-ratio:4/5;max-height:none;object-position:center 28%}
.zwei p+p{margin-top:1rem}
.medien-rahmen{border:1px solid var(--line);border-bottom:3px solid var(--pink)}

/* ---------- Karten ---------- */
.karten{display:grid;gap:1.2rem;margin-top:2.6rem;grid-template-columns:1fr}
@media (min-width:34rem){.karten{grid-template-columns:repeat(2,1fr)}}
@media (min-width:60rem){.karten{grid-template-columns:repeat(3,1fr)}}
.karte{background:var(--surface);border:1px solid var(--line);border-bottom:3px solid var(--line);
       display:flex;flex-direction:column;overflow:hidden;transition:border-color .15s ease,transform .15s ease}
a.karte{text-decoration:none;color:inherit}
.karte:hover{border-bottom-color:var(--pink);transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.karte:hover{transform:none}}
.karte img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
/* Bilder mit Schrift darin dürfen nicht beschnitten werden. Beim Gutschein
   stand am Handy die Kopfzeile halb im Bild: Die breite Kachel zwingt das
   4:3-Motiv dort in 16:9. contain zeigt es ganz, und weil das Motiv rundum
   schwarz ist, sieht man die Ränder nicht. */
.karte img.ganz{object-fit:contain;background:#000}
.karte-text{padding:1.2rem 1.3rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.karte h3{font-size:var(--step-1);letter-spacing:-.005em;overflow-wrap:break-word;hyphens:auto}
.karte p{color:var(--muted);font-size:var(--step--1);line-height:1.65}
.karte .preis{margin-top:auto;padding-top:.9rem;font-family:var(--f-display);font-weight:700;
              font-size:var(--step-1);color:var(--pink-bright);font-variant-numeric:tabular-nums}

/* ---------- Preisliste ---------- */
.preisliste{margin-top:2.8rem;border-top:1px solid var(--line-bright)}
.pkg{display:grid;gap:.4rem 2rem;padding-block:1.9rem;border-bottom:1px solid var(--line);
     grid-template-columns:1fr auto;align-items:baseline}
.pkg-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:.7rem}
.pkg h3{font-size:var(--step-2);text-transform:uppercase;letter-spacing:-.01em;overflow-wrap:break-word;hyphens:auto}
.pkg .fuer{grid-column:1/-1;color:var(--muted);font-family:var(--f-display);font-style:italic;font-size:var(--step-1)}
.pkg .preis{font-family:var(--f-display);font-weight:700;font-size:var(--step-2);
            font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--pink)}
.pkg .preis small{display:block;font-family:var(--f-body);font-weight:600;font-size:.42em;
                  color:var(--faint);letter-spacing:.12em;text-transform:uppercase}
.pkg ul{grid-column:1/-1;margin:.8rem 0 0;padding:0;list-style:none;display:grid;gap:.45rem;max-width:var(--measure)}
.pkg li{padding-left:1.4rem;position:relative;color:var(--muted);font-size:var(--step--1);line-height:1.65}
.pkg li::before{content:"";position:absolute;left:0;top:.66em;width:.6rem;height:2px;background:var(--pink)}
.pkg .hinweis{grid-column:1/-1;margin-top:.9rem;font-size:var(--step--1);color:var(--faint);
              font-style:italic;max-width:var(--measure)}
.marke-tag{font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
           color:#fff;background:var(--pink);padding:.22rem .6rem;white-space:nowrap}

/* ---------- Hinweiskacheln ---------- */
.regeln{display:grid;gap:1rem;margin-top:2.6rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.regel{background:var(--surface);border-left:3px solid var(--pink);padding:1.2rem 1.3rem}
.regel h3{font-size:var(--step-1);margin-bottom:.4rem}
.regel p{color:var(--muted);font-size:var(--step--1);line-height:1.65}

/* ---------- Aufklappen ---------- */
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding-block:1.1rem;display:flex;justify-content:space-between;
        gap:1rem;align-items:center;font-family:var(--f-display);font-weight:700;font-size:var(--step-1);color:var(--white)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--pink);font-family:var(--f-body);font-size:1.3rem;line-height:1}
details[open] summary::after{content:"–"}
details .inhalt{padding-bottom:1.3rem;color:var(--muted);font-size:var(--step--1);
                line-height:1.7;max-width:var(--measure);display:grid;gap:.7rem}

/* ---------- Hervorgehobener Block ---------- */
.block{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--pink);
       padding:clamp(1.6rem,4vw,2.6rem);display:grid;gap:1rem;margin-top:2.5rem}
.block h2,.block h3{font-size:var(--step-2);text-transform:uppercase}
.block p{color:var(--muted);max-width:var(--measure)}

/* ---------- Bilderstreifen ---------- */
.streifen{display:grid;gap:.7rem;margin-top:2.6rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:44rem){.streifen{grid-template-columns:repeat(4,1fr)}}
.streifen img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
              filter:grayscale(.15);transition:filter .2s ease,transform .2s ease}
.streifen img:hover{filter:none;transform:scale(1.02)}
@media (prefers-reduced-motion:reduce){.streifen img:hover{transform:none}}

/* ---------- Kontakt ---------- */
.kontakt-grid{display:grid;gap:clamp(1.6rem,4vw,3.5rem);margin-top:2.6rem;
              grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.kontakt-liste{display:grid;gap:1.2rem;align-content:start}
.kontakt-liste div{display:grid;gap:.2rem}
.kontakt-liste dt{font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.kontakt-liste dd{margin:0;font-size:var(--step-1);font-family:var(--f-display);color:var(--white)}
.kontakt-liste a{color:var(--pink-bright);text-decoration:none}
.kontakt-liste a:hover{text-decoration:underline}
.form{display:grid;gap:1.2rem}
.feld{display:flex;flex-direction:column;gap:.4rem}
.feld label{font-size:var(--step--1);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
input[type=text],input[type=email],input[type=tel],select,textarea{
  font-family:var(--f-body);font-size:var(--step-0);color:var(--white);background:var(--surface);
  border:1px solid var(--line-bright);padding:.7rem .8rem;width:100%}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{border-color:var(--pink);outline:none}
textarea{min-height:7rem;resize:vertical}
input[type=checkbox],input[type=radio]{accent-color:var(--pink)}
.zustimmung{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--step--1);color:var(--muted);line-height:1.5}
.hinweis-klein{font-size:var(--step--1);color:var(--faint)}

/* ---------- Fuß ---------- */
.fuss{border-top:1px solid var(--line);padding-block:3rem 3.5rem;color:var(--muted);font-size:var(--step--1)}
.fuss-grid{display:grid;gap:2rem 3rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
/* Die Fußzeilen-Überschriften sind h2, damit die Gliederung keine Stufe überspringt. */
.fuss .fuss-titel{font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;
         color:var(--faint);font-family:var(--f-body);font-weight:700;margin-bottom:.8rem}
.fuss ul{margin:0;padding:0;list-style:none;display:grid;gap:.45rem}
.fuss a{color:var(--muted);text-decoration:none}
.fuss a:hover{color:var(--pink-bright)}
.fuss .unten{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line);
             display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;color:var(--faint)}

/* ---------- Entwurfsleiste ---------- */

/* ---------- Kontaktformular: Spamschutz und Rückmeldung ---------- */
.honigtopf{display:none}
.formstatus{display:none;margin-top:1.2rem;padding:.85rem 1rem;font-size:var(--step--1);
            font-weight:600;scroll-margin:6rem;
            border-left:3px solid var(--pink);background:var(--pink-wash);color:var(--pink-bright)}
.formstatus.sichtbar{display:block}
.formstatus.fehler{border-left-color:#FF6B4D;background:rgba(255,107,77,.12);color:#FF9B85}
.formstatus:focus{outline:none}

/* Die Bestätigung nach dem Absenden. Sie steht unter dem Knopf, wo der Blick
   nach dem Tippen ohnehin ist, und fällt deutlich stärker auf als eine
   Fehlermeldung: Wer abgeschickt hat, soll es auf einen Blick sehen. */
.formstatus.erfolg{display:flex;gap:.8rem;align-items:flex-start;
                   padding:1.15rem 1.2rem;font-size:var(--step-0);line-height:1.45;
                   border:2px solid var(--pink);border-left-width:2px;border-radius:.5rem;
                   background:var(--pink-wash);color:#fff;
                   animation:statusAuf .35s ease-out}
.formstatus.erfolg::before{content:"✓";flex:none;display:grid;place-items:center;
                           width:1.7em;height:1.7em;border-radius:50%;
                           background:var(--pink);color:#fff;font-size:.9em;font-weight:700}
@keyframes statusAuf{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.formstatus.erfolg{animation:none}}
.form button[disabled]{opacity:.55;cursor:progress}

/* ======================= Bewertungen ======================= */
.bewertung-demo{
  margin-top:1.6rem;padding:.8rem 1rem;font-size:var(--step--1);
  border-left:3px solid var(--line-bright);background:var(--surface);color:var(--faint);
}

.bewertung-kopf{
  display:grid;gap:clamp(1.5rem,4vw,3rem);margin-top:2.4rem;align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--pink);
  padding:clamp(1.4rem,3.5vw,2.2rem);
}
.schnitt{display:flex;flex-direction:column;gap:.35rem;align-items:flex-start}
.schnitt .zahl{
  font-family:var(--f-display);font-weight:700;font-size:clamp(3rem,8vw,4.5rem);
  line-height:1;color:var(--white);font-variant-numeric:tabular-nums;
}
.schnitt .anzahl{font-size:var(--step--1);color:var(--faint);letter-spacing:.04em}

.sterne{display:inline-flex;gap:.12em;color:var(--pink);line-height:1}
.sterne.gross{font-size:1.5rem}
.sterne .leer{color:var(--line-bright)}

.verteilung{display:grid;gap:.4rem}
.verteilung .zeile{display:grid;grid-template-columns:2.4rem 1fr 2.2rem;gap:.7rem;align-items:center;
                   font-size:var(--step--1);color:var(--faint)}
.verteilung .balken{height:.5rem;background:var(--surface-2);overflow:hidden}
.verteilung .fuellung{display:block;height:100%;background:var(--pink);width:0;
                      transition:width .6s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){.verteilung .fuellung{transition:none}}
.verteilung .wert{text-align:right;font-variant-numeric:tabular-nums}

/* Gekachelt wie die Bilder: feste Spaltenbreite, Hoehe nach Inhalt. Spalten
   statt Raster, damit unter einer kurzen Bewertung nicht die Hoehe der
   laengsten leer bleibt. Die Reihenfolge laeuft spaltenweise von oben. */
.bewertungsliste{columns:19rem;column-gap:1rem;margin-top:1.8rem}
.bewertung{background:var(--surface);border:1px solid var(--line);padding:1.3rem 1.4rem 1.5rem;
           display:flex;flex-direction:column;gap:.7rem;
           break-inside:avoid;margin-bottom:1rem}
.bewertungsliste > .bewertung-demo{column-span:all}
.bewertung-oben{display:flex;gap:.9rem;align-items:center}
.kuerzel{
  width:2.6rem;height:2.6rem;flex:none;display:grid;place-content:center;border-radius:50%;
  background:var(--pink);color:#fff;font-family:var(--f-display);font-weight:700;font-size:1.1rem;
}
.bewertung-wer{display:grid;gap:.1rem;min-width:0}
.bewertung-wer strong{font-family:var(--f-display);font-size:var(--step-1);color:var(--white);font-weight:700}
.bewertung-wann{font-size:.78rem;color:var(--faint);letter-spacing:.03em}
.bewertung p{color:var(--muted);font-size:var(--step--1);line-height:1.7}
.bewertung .anlass{
  align-self:flex-start;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pink-bright);border:1px solid var(--accent-rand,var(--line-bright));padding:.18rem .55rem;
}
.antwort{
  margin-top:.4rem;padding:.9rem 1rem;background:var(--bg);border-left:3px solid var(--pink);
  display:grid;gap:.45rem;
}
.antwort-kopf{display:flex;align-items:center;gap:.55rem;font-size:.72rem;font-weight:700;
              letter-spacing:.1em;text-transform:uppercase;color:var(--pink-bright)}
.antwort-kopf img{width:1.4rem;height:1.4rem;display:block}
.antwort p{font-size:var(--step--1);color:var(--muted);line-height:1.65}

/* Sterne auswählen: von rechts nach links, damit das Anleuchten funktioniert */
.sternwahl{border:1px solid var(--line);padding:1rem 1.1rem 1.2rem}
.sternfeld{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:.15rem;margin-top:.3rem}
.sternfeld input{position:absolute;opacity:0;width:1px;height:1px}
.sternfeld label{
  font-size:2rem;line-height:1;color:var(--line-bright);cursor:pointer;
  transition:color .12s ease,transform .12s ease;text-transform:none;letter-spacing:0;
}
.sternfeld label:hover,.sternfeld label:hover ~ label,
.sternfeld input:checked,.sternfeld input:checked ~ label{color:var(--pink)}
.sternfeld label:hover{transform:scale(1.12)}
.sternfeld input:focus-visible + label{outline:2px solid var(--pink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.sternfeld label:hover{transform:none}}

.bewertungsform{margin-top:2rem;border-top:3px solid var(--pink);padding-top:1.8rem;max-width:44rem}
.bewertungsform[hidden]{display:none}

/* ---------- Hinweis auf die Google-Bewertungen ---------- */
.google-block{
  display:flex;align-items:center;gap:clamp(1rem,3vw,2rem);margin-top:2.2rem;
  padding:clamp(1.1rem,3vw,1.6rem) clamp(1.2rem,3vw,1.8rem);text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--pink);
  transition:border-color .15s ease,transform .15s ease;
}
.google-block:hover{border-color:var(--line-bright);border-left-color:var(--pink);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.google-block:hover{transform:none}}
.google-zahl{
  font-family:var(--f-display);font-weight:700;font-size:clamp(2.4rem,6vw,3.4rem);line-height:1;
  color:var(--white);font-variant-numeric:tabular-nums;
}
.google-mitte{display:grid;gap:.25rem;min-width:0}
.google-mitte strong{font-family:var(--f-display);font-size:var(--step-1);color:var(--white);font-weight:700}
.google-klein{font-size:var(--step--1);color:var(--faint)}
.google-pfeil{margin-left:auto;font-size:1.6rem;color:var(--pink);flex:none}

/* ======================= Erlebnis-Detailfenster ======================= */
button.karte{font:inherit;color:inherit;text-align:left;padding:0;cursor:pointer;width:100%}
.karte::after{
  content:"Mehr erfahren";
  display:block;padding:0 1.3rem 1.2rem;font-size:var(--step--1);font-weight:700;
  letter-spacing:.06em;color:var(--faint);transition:color .15s ease;
}
.karte:hover::after,.karte:focus-visible::after{color:var(--pink-bright)}

.e-bild{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;flex:none;border-bottom:1px solid var(--line)}
.e-lead{color:var(--pink-bright);font-family:var(--f-display);font-size:var(--step-1);line-height:1.35;margin-top:.6rem}

.e-fakten{display:grid;gap:0;margin:1.4rem 0 0}
.e-fakten>div{display:grid;grid-template-columns:9rem 1fr;gap:.75rem;padding-block:.6rem;border-top:1px solid var(--line)}
.e-fakten dt{font-size:var(--step--1);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.e-fakten dd{margin:0;font-size:var(--step--1);color:var(--text)}

.e-block{margin-top:1.6rem}
.e-block:empty{display:none}
.e-block h3{
  font-family:var(--f-body);font-size:var(--step--1);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pink-bright);margin-bottom:.7rem;
}
.e-block ol,.e-block ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
.e-block li{padding-left:1.5rem;position:relative;color:var(--muted);font-size:var(--step--1);line-height:1.65}
.e-block ul li::before{content:"";position:absolute;left:0;top:.66em;width:.6rem;height:2px;background:var(--pink)}
.e-block ol{counter-reset:schritt}
.e-block ol li{counter-increment:schritt;padding-left:1.9rem}
.e-block ol li::before{
  content:counter(schritt);position:absolute;left:0;top:0;
  font-family:var(--f-display);font-weight:700;color:var(--pink);font-size:.95em;
}
.e-hinweis{margin-top:1.4rem;font-size:var(--step--1);color:var(--faint);font-style:italic}
.e-hinweis:empty{display:none}


/* ---------- Erlebnis im Detail, direkt in der Seite ---------- */
.detailblock{
  margin-top:1.2rem;background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--pink);padding:clamp(1.4rem,4vw,2.2rem);
  scroll-margin-top:calc(var(--kopfhoehe) + 1rem);
}
.detailblock[hidden]{display:none}
.detail-kopf{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;justify-content:space-between}
.detail-kopf h3{font-size:var(--step-3);text-transform:uppercase;letter-spacing:-.02em;overflow-wrap:break-word;hyphens:auto}
.detail-zu{
  flex:none;background:transparent;border:1px solid var(--line-bright);color:var(--muted);
  width:2.2rem;height:2.2rem;font-size:1.1rem;line-height:1;cursor:pointer;
}
.detail-zu:hover{border-color:var(--pink);color:var(--pink-bright)}
.detail-lead{color:var(--pink-bright);font-family:var(--f-display);font-size:var(--step-1);line-height:1.35;margin-top:.5rem;max-width:var(--measure)}
.detail-grid{display:grid;gap:clamp(1.4rem,4vw,2.5rem);margin-top:1.6rem;grid-template-columns:1fr}
@media (min-width:52rem){.detail-grid{grid-template-columns:18rem 1fr}}
.detail-grid img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line)}
.detail-spalten{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.e-fakten{display:grid;gap:0;margin:0}
.e-fakten>div{display:grid;grid-template-columns:9rem 1fr;gap:.75rem;padding-block:.55rem;border-top:1px solid var(--line)}
.e-fakten dt{font-size:var(--step--1);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.e-fakten dd{margin:0;font-size:var(--step--1);color:var(--text)}
.e-block h3{font-family:var(--f-body);font-size:var(--step--1);font-weight:700;letter-spacing:.14em;
            text-transform:uppercase;color:var(--pink-bright);margin-bottom:.7rem}
.e-block ol,.e-block ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
.e-block li{padding-left:1.5rem;position:relative;color:var(--muted);font-size:var(--step--1);line-height:1.65}
.e-block ul li::before{content:"";position:absolute;left:0;top:.66em;width:.6rem;height:2px;background:var(--pink)}
.e-block ol{counter-reset:schritt}
.e-block ol li{counter-increment:schritt;padding-left:1.9rem}
.e-block ol li::before{content:counter(schritt);position:absolute;left:0;top:0;
  font-family:var(--f-display);font-weight:700;color:var(--pink);font-size:.95em}
.e-hinweis{margin-top:1.4rem;font-size:var(--step--1);color:var(--faint);font-style:italic;max-width:var(--measure)}

/* ---------- Dazubuchbare Optionen ---------- */
.zusatz{
  display:grid;gap:clamp(1.4rem,4vw,3rem);margin-top:2.6rem;
  grid-template-columns:1fr;background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--pink);padding:clamp(1.4rem,4vw,2.2rem);
}
@media (min-width:52rem){.zusatz{grid-template-columns:18rem 1fr}}
.zusatz h2,.zusatz h3{font-size:var(--step-2);text-transform:uppercase;margin-top:1rem}
.zusatz>div>p{color:var(--muted);font-size:var(--step--1);margin-top:.8rem;line-height:1.65}
.zusatz-liste{margin:0;padding:0;list-style:none;display:grid;gap:0}
.zusatz-liste li{
  display:grid;grid-template-columns:1fr auto;gap:.2rem 1.5rem;align-items:baseline;
  padding-block:.9rem;border-top:1px solid var(--line);
}
.zusatz-liste li:first-child{border-top:none;padding-top:0}
.zusatz-liste .was{color:var(--text);font-size:var(--step-0);line-height:1.4}
.zusatz-liste .was strong{font-weight:700}
.zusatz-liste .preis{
  font-family:var(--f-display);font-weight:700;color:var(--pink);white-space:nowrap;
  font-variant-numeric:tabular-nums;text-align:right;
}
.zusatz-liste em{grid-column:1/-1;font-style:normal;font-size:var(--step--1);color:var(--faint)}
.saison{
  margin-top:.6rem;font-size:var(--step--1);font-weight:600;color:var(--pink-bright);
  border-left:3px solid var(--pink);padding-left:.7rem;
}
.gutschein-zeile{
  margin-top:1rem;font-size:var(--step--1);font-weight:700;color:var(--pink-bright);
}
.karte.breit{grid-column:1/-1;display:grid;grid-template-columns:1fr;align-items:stretch}
@media (min-width:52rem){.karte.breit{grid-template-columns:20rem 1fr}}
.karte.breit img{aspect-ratio:16/9;height:100%}
@media (min-width:52rem){.karte.breit img{aspect-ratio:auto}}
.karte.breit .karte-text{justify-content:center}
.karte.breit h3{font-size:var(--step-2)}

.hero-gutschein{margin-top:1.2rem}
.hero-gutschein a{
  color:var(--pink-bright);font-weight:700;font-size:var(--step--1);letter-spacing:.04em;
  text-decoration:none;border-bottom:1px solid var(--accent-soft,rgba(255,0,130,.5));padding-bottom:2px;
}
.hero-gutschein a:hover{color:#fff;border-color:#fff}
@media (min-width:52rem){
  .karte.breit::after{grid-column:2;padding:0 1.3rem 1.4rem}
  .karte.breit .karte-text{padding-bottom:.4rem}
}

/* ---------- Alpaka-Gold: eigener Farbakzent aus dem Flyer ---------- */
#alpakagold,.gold-seite{--pink:#fcc840;--pink-bright:#ffd870;--pink-wash:rgba(252,200,64,.12)}
.gold-seite section:first-of-type{padding-top:clamp(2.4rem,5vw,4rem)}
.gold-seite h1{font-size:var(--step-3);text-transform:uppercase;letter-spacing:-.02em;
  max-width:26ch;margin-top:1.1rem;text-wrap:balance}
.gold-seite .regel h3{color:#ffd870}
.gold-seite details summary::marker{color:#fcc840}
.gold-seite .btn{background:#fcc840;border-color:#fcc840;color:#101010}
.gold-seite .btn:hover{background:transparent;color:#ffd870}
.gold-seite .btn-ghost{background:transparent;color:var(--text);border-color:var(--line-bright)}
.gold-seite .btn-ghost:hover{border-color:#fcc840;color:#ffd870}
.gold-seite .prose a{color:#ffd870}
.gold-seite .prose p+p{margin-top:1rem}
.gold-seite .prose strong{color:var(--white)}
.eyebrow.gold::after{background:#fcc840}
.eyebrow.gold{color:#ffd870}
.medien-rahmen.gold{border-bottom-color:#fcc840}
.gold-claim{
  margin-top:1.2rem;font-family:var(--f-display);font-weight:700;font-size:var(--step-1);
  color:#ffd870;letter-spacing:-.01em;
}
.gold-preise{
  margin-top:1.1rem;padding:.85rem 1rem;border-left:3px solid #fcc840;
  background:rgba(252,200,64,.08);color:var(--text);font-size:var(--step--1);
}
.gold-preise strong{color:#ffd870;font-family:var(--f-display);font-size:var(--step-0)}
.detailblock.gold{border-left-color:#fcc840}
.detailblock.gold .detail-lead{color:#ffd870}
.detailblock.gold .e-block h3{color:#ffd870}
.detailblock.gold .e-block li::before{background:#fcc840}
.detailblock.gold .e-block ol li::before{color:#fcc840;background:none}
.detailblock.gold .btn{background:#fcc840;border-color:#fcc840;color:#101010}
.detailblock.gold .btn:hover{background:transparent;color:#ffd870}

/* ---------- Hinweis auf den Preisrechner ---------- */
.rechner-hinweis{
  display:flex;flex-wrap:wrap;gap:1.4rem 2.5rem;align-items:center;justify-content:space-between;
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--pink);
  padding:clamp(1.4rem,4vw,2.2rem);
}
.rechner-hinweis h2{font-size:var(--step-2);text-transform:uppercase;letter-spacing:-.01em;margin-top:.9rem}
.rechner-hinweis p{color:var(--muted);margin-top:.7rem;max-width:46ch}
.rechner-hinweis .btn{flex:none}

/* ---------- Druck ----------
   Die Seite ist schwarz. Auf Papier verschwendet das Toner und liest sich
   schlecht, deshalb hier dunkle Schrift auf Weiß. Kopfleiste, Fußzeile und
   Knöpfe fallen weg, sie helfen auf Papier niemandem. Gedacht vor allem für
   Impressum und Datenschutzerklärung, die tatsächlich ausgedruckt werden. */
@media print{
  :root{
    --bg:#fff; --surface:#fff; --surface-2:#f4f4f5;
    --text:#111; --white:#000; --muted:#333; --faint:#555;
    --line:#ccc; --line-bright:#999;
    --pink:#000; --pink-bright:#000; --pink-wash:#f4f4f5;
  }
  body{background:#fff;color:#111;font-size:11pt;line-height:1.5}
  .kopf,.fuss,.nav-btn,.cta-row,.btn,video,.streifen{display:none !important}
  section{padding-block:.6rem;border-top:none}
  h1,h2,h3{color:#000;break-after:avoid}
  h1{font-size:20pt;margin-bottom:.4rem}
  h2{font-size:13pt;margin-top:1.1rem}
  .eyebrow{color:#000;font-size:9pt}
  .eyebrow::after{background:#000;height:2px}
  a{color:#000;text-decoration:underline}
  .prose,.wrap{max-width:none}
  p,li{orphans:3;widows:3}
  .block,.zusatz,.regel{break-inside:avoid;border-color:#bbb}
  @page{margin:18mm 16mm}
}

/* Herkunft einer Bewertung (Google-Unternehmensprofil) */
.quelle{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-bright);margin-left:.45rem;white-space:nowrap}