/* =========================================================
   HEFTI IMPRESSIONS
   Designsystem "Warm & natuerlich", erzaehlend
   Die Fotos fuehren, die Typografie begleitet.
   ========================================================= */

:root{
  --cream:#FBF7F1;
  --paper:#F4EDE3;
  --sand:#EFE4D4;
  --sand-deep:#DFCDB4;
  --gold:#A9784B;
  --gold-lt:#C99A6A;
  --gold-pale:#E8CFB2;
  --sage:#7C8A6E;
  --ink:#191614;
  --ink-2:#241F1B;
  --ink-soft:#544A41;
  --white:#fff;

  --sh-s:0 2px 12px rgba(25,22,20,.06);
  --sh-m:0 14px 40px rgba(25,22,20,.10);
  --sh-l:0 34px 90px rgba(25,22,20,.22);

  --f-head:"Fraunces",Georgia,serif;
  --f-body:"Jost","Helvetica Neue",Arial,sans-serif;
  --f-hand:"Caveat",cursive;

  --gut:clamp(20px,5vw,60px);
  --ease:cubic-bezier(.19,1,.22,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:clip; -webkit-text-size-adjust:100%; }
html.golden{ filter:sepia(.5) contrast(1.05) brightness(1.05); transition:filter 1.2s; }

body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--f-body); font-weight:350;
  font-size:clamp(16px,1.02vw,18px); line-height:1.75;
  overflow-x:clip;
}
body.nav-open,body.lb-open{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* Filmkorn ueber allem */
body::after{
  content:""; position:fixed; inset:-120%; z-index:9200; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}10%{transform:translate(-5%,-5%)}20%{transform:translate(-12%,3%)}
  30%{transform:translate(3%,-12%)}40%{transform:translate(-3%,12%)}50%{transform:translate(-9%,6%)}
  60%{transform:translate(9%,0)}70%{transform:translate(0,9%)}80%{transform:translate(3%,32%)}
  90%{transform:translate(-6%,15%)}100%{transform:translate(0,0)}
}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{ font-family:var(--f-head); font-weight:450; line-height:1.02; letter-spacing:-.025em; margin:0 0 .45em; }
h1{ font-size:clamp(2.9rem,8.2vw,8.2rem); }
h2{ font-size:clamp(2rem,5.2vw,4.6rem); }
h3{ font-size:clamp(1.25rem,2vw,1.8rem); letter-spacing:-.01em; }
p{ margin:0 0 1.2em; }
.lead{ font-size:clamp(1.08rem,1.5vw,1.4rem); line-height:1.62; color:var(--ink-soft); }
.big{ font-size:clamp(1.3rem,2.4vw,2.05rem); line-height:1.44; font-family:var(--f-head); font-weight:400; letter-spacing:-.015em; color:var(--ink); }
.hand{ font-family:var(--f-hand); color:var(--gold); font-size:1.75em; line-height:.9; display:inline-block; transform:rotate(-2deg); }
em.acc{ font-style:italic; color:var(--gold); }
.mark{ font-size:.68rem; letter-spacing:.32em; text-transform:uppercase; font-weight:500; color:var(--gold); display:block; margin-bottom:1.4em; }

/* ---------- Layout ---------- */
.wrap{ width:min(1180px,100% - var(--gut)*2); margin-inline:auto; }
.wide{ width:min(1560px,100% - var(--gut)*2); margin-inline:auto; }
.pad{ padding:clamp(56px,8vw,118px) 0; }
.pad-s{ padding:clamp(44px,6vw,84px) 0; }
.center{ text-align:center; }
.narrow{ max-width:760px; margin-inline:auto; }
.grid{ display:grid; gap:clamp(22px,3.4vw,48px); }
.g2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.g3{ grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.bg-paper{ background:var(--paper); }
.bg-sand{ background:var(--sand); }
.is-dark{ background:var(--ink); color:#E9E1D7; }
.is-dark h1,.is-dark h2,.is-dark h3,.is-dark .big{ color:var(--cream); }
.is-dark .lead{ color:rgba(233,225,215,.72); }
.is-dark .mark{ color:var(--gold-lt); }

/* ---------- Preloader ---------- */
#preloader{ position:fixed; inset:0; z-index:9500; background:var(--ink); color:var(--cream); display:grid; place-items:center;
  transition:opacity .8s var(--ease), visibility .8s; }
#preloader.done{ opacity:0; visibility:hidden; }
.pl-in{ text-align:center; width:min(420px,80vw); }
.pl-logo{ font-family:var(--f-head); font-size:clamp(1.4rem,3vw,2.1rem); margin-bottom:.2em; }
.pl-sub{ font-size:.66rem; letter-spacing:.42em; text-transform:uppercase; color:var(--gold-lt); margin-bottom:2.4em; }
.pl-bar{ height:1px; background:rgba(251,247,241,.18); overflow:hidden; }
.pl-bar i{ display:block; height:100%; background:var(--gold-lt); transform:scaleX(0); transform-origin:0 50%; }
.pl-num{ font-size:.7rem; letter-spacing:.3em; margin-top:1.4em; display:block; opacity:.6; }

#curtain{ position:fixed; inset:0; z-index:9400; background:var(--ink); pointer-events:none; transform:translateY(100%); transition:transform .62s var(--ease); }
#curtain.in{ transform:translateY(0); }
#prog{ position:fixed; top:0; left:0; right:0; height:2px; background:var(--gold); z-index:9300; transform:scaleX(0); transform-origin:0 50%; }

/* ---------- Kopf ---------- */
.topbar{ background:var(--ink); color:rgba(251,247,241,.72); font-size:.7rem; letter-spacing:.1em;
  display:flex; justify-content:center; gap:clamp(14px,3vw,40px); padding:.7em var(--gut); flex-wrap:wrap; }
.topbar a:hover{ color:var(--gold-lt); }

header.site{ position:fixed; top:0; left:0; right:0; z-index:9000;
  transition:transform .55s var(--ease), background .4s, box-shadow .4s; }
header.site.stuck{ background:rgba(251,247,241,.92); backdrop-filter:blur(16px) saturate(1.2); box-shadow:0 1px 0 rgba(25,22,20,.08); }
header.site.hide{ transform:translateY(-102%); }
header.site.on-dark:not(.stuck){ color:var(--cream); }
header.site.on-dark:not(.stuck) .logo-txt span{ color:var(--gold-lt); }
header.site.on-dark:not(.stuck) .burger span{ background:var(--cream); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:22px; padding:16px 0; width:min(1560px,100% - var(--gut)*2); margin-inline:auto; }
.logo{ display:flex; align-items:center; gap:.65em; cursor:pointer; user-select:none; }
.logo-mark{ width:40px; height:40px; border-radius:50%; background:var(--gold); color:#fff; display:grid; place-items:center; flex:none; transition:transform .6s var(--ease); }
.logo:hover .logo-mark{ transform:rotate(-16deg) scale(1.08); }
.logo-mark svg{ width:20px; height:20px; }
.logo-txt b{ font-family:var(--f-head); font-size:1.04rem; font-weight:450; display:block; line-height:1.05; }
.logo-txt span{ font-size:.55rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); }

.menu{ display:flex; align-items:center; gap:clamp(16px,2vw,34px); list-style:none; margin:0; padding:0; }
.menu a{ font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; position:relative; padding:.4em 0; }
.menu a::after{ content:""; position:absolute; left:0; bottom:.1em; height:1px; width:0; background:currentColor; transition:width .45s var(--ease); }
.menu a:hover::after,.menu a[aria-current]::after{ width:100%; }
.menu a[aria-current]{ color:var(--gold); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.burger{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.burger span{ display:block; width:26px; height:1.5px; background:var(--ink); margin:6px 0; transition:.4s var(--ease); }
.burger.open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

@media(max-width:1060px){
  .menu{ position:absolute; inset:0; background:var(--ink); color:var(--cream); flex-direction:column;
    align-items:flex-start; justify-content:center; gap:clamp(8px,2.2vh,20px); padding:0 12vw;
    clip-path:circle(0% at 92% 6%); transition:clip-path .8s var(--ease); z-index:9100; }
  .menu.open{ clip-path:circle(150% at 92% 6%); }
  .menu a{ font-size:clamp(1.5rem,6.6vw,2.5rem); font-family:var(--f-head); text-transform:none; letter-spacing:-.02em; }
  .burger{ display:block; position:relative; z-index:9150; }
  /* Wichtig: transform am Header wuerde das fixed-Menue einsperren */
  body.nav-open header.site{
    transform:none !important; transition:none;
    height:100dvh; background:transparent !important; backdrop-filter:none !important; box-shadow:none !important;
  }
  body.nav-open .burger span{ background:var(--cream); }
  .nav-cta .btn{ display:none; }
}

/* ---------- Buttons ---------- */
.btn{ --bg:var(--ink); --fg:var(--cream);
  display:inline-flex; align-items:center; gap:.8em; background:var(--bg); color:var(--fg);
  padding:1.15em 2.1em; border:0; border-radius:100px; cursor:pointer;
  font-family:var(--f-body); font-size:.76rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  position:relative; overflow:hidden; transition:transform .5s var(--ease), box-shadow .4s, color .4s; }
.btn svg{ width:16px; height:16px; flex:none; transition:transform .45s var(--ease); }
.btn::after{ content:""; position:absolute; inset:0; background:var(--gold); border-radius:100px; transform:translateY(102%); transition:transform .55s var(--ease); z-index:0; }
.btn>*{ position:relative; z-index:1; }
.btn:hover::after{ transform:translateY(0); }
.btn:hover{ color:#fff; box-shadow:var(--sh-m); }
.btn:hover svg{ transform:translateX(6px); }
.btn-gold{ --bg:var(--gold); --fg:#fff; }
.btn-gold::after{ background:var(--ink); }
.btn-ghost{ --bg:transparent; --fg:currentColor; box-shadow:inset 0 0 0 1px currentColor; }
.btn-ghost:hover{ color:#fff; }
.btn-light{ --bg:var(--cream); --fg:var(--ink); }

.circle-btn{ width:clamp(100px,9vw,136px); height:clamp(100px,9vw,136px); border-radius:50%; background:var(--gold); color:#fff;
  display:grid; place-items:center; text-align:center; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; line-height:1.6;
  transition:transform .5s var(--ease), background .4s; }
.circle-btn:hover{ background:var(--ink); }

/* ---------- Reveals ---------- */
.rev{ opacity:0; transform:translateY(40px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.rev.in{ opacity:1; transform:none; }
.rev.d1{transition-delay:.1s}.rev.d2{transition-delay:.2s}.rev.d3{transition-delay:.3s}.rev.d4{transition-delay:.4s}.rev.d5{transition-delay:.5s}

[data-split] .ln{ display:block; overflow:hidden; }
[data-split] .ln i{ display:block; font-style:inherit; transform:translateY(105%); transition:transform 1.15s var(--ease); }
[data-split].in .ln i{ transform:none; }
[data-split] .ln:nth-child(2) i{ transition-delay:.09s }
[data-split] .ln:nth-child(3) i{ transition-delay:.18s }
[data-split] .ln:nth-child(4) i{ transition-delay:.27s }

.figrev{ overflow:hidden; }
.figrev img{ transform:scale(1.22); transition:transform 1.7s var(--ease), filter 1.7s var(--ease); filter:brightness(.88); }
.figrev.in img{ transform:none; filter:none; }

/* ---------- HERO ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; color:#fff; }
.hero-bg{ position:absolute; inset:-10% 0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(25,22,20,.6) 0%,rgba(25,22,20,.14) 32%,rgba(25,22,20,.2) 54%,rgba(25,22,20,.9) 100%); }
.hero-in{ position:relative; z-index:2; width:100%; padding-bottom:clamp(56px,9vh,110px); }
.hero h1{ color:#fff; margin-bottom:.3em; }
.hero .lead{ color:rgba(255,255,255,.86); max-width:min(560px,92%); }
.hero .mark{ color:var(--gold-pale); }
.hero-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:34px; flex-wrap:wrap; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:1.9em; }
.hero-meta{ display:flex; gap:clamp(20px,3vw,54px); flex-wrap:wrap; align-items:flex-end; }
.hero-meta div{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.hero-meta b{ display:block; font-family:var(--f-head); font-size:clamp(1.5rem,2.6vw,2.4rem); font-weight:450; color:#fff; letter-spacing:-.02em; text-transform:none; }
.scroll-cue{ position:absolute; left:50%; bottom:16px; z-index:3; transform:translateX(-50%); font-size:.58rem; letter-spacing:.34em;
  text-transform:uppercase; color:rgba(255,255,255,.68); display:flex; flex-direction:column; align-items:center; gap:10px; }
.scroll-cue i{ width:1px; height:46px; background:linear-gradient(rgba(255,255,255,.9),transparent); animation:cue 2.4s var(--ease) infinite; }
@keyframes cue{ 0%{transform:scaleY(0);transform-origin:0 0}45%{transform:scaleY(1);transform-origin:0 0}
  55%{transform:scaleY(1);transform-origin:0 100%}100%{transform:scaleY(0);transform-origin:0 100%} }

/* ---------- Kapitel-Marke ---------- */
.chapter{ display:flex; align-items:baseline; gap:1.1em; margin-bottom:1.7em; }
.chapter .no{ font-family:var(--f-head); font-size:clamp(2.6rem,6vw,5rem); line-height:.78; color:var(--gold); opacity:.3; letter-spacing:-.04em; }
.chapter .tx{ font-size:.68rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); }
.chapter .tx small{ display:block; letter-spacing:.14em; color:var(--ink-soft); opacity:.72; margin-top:.5em; text-transform:none; font-size:.95em; }
.is-dark .chapter .tx small{ color:rgba(233,225,215,.6); }

.filmline{ height:22px; opacity:.55;
  background:repeating-linear-gradient(90deg,transparent 0 20px,rgba(169,120,75,.35) 20px 32px) center/auto 7px no-repeat;
  border-block:1px solid rgba(169,120,75,.22); }

/* =========================================================
   FOTO-SEKTIONEN  (die Bilder fuehren)
   ========================================================= */

/* Vollbild, ein Foto, sonst nichts */
.showcase{ position:relative; height:min(112svh,1150px); overflow:hidden; background:var(--ink); }
.showcase .sc-img{ position:absolute; inset:-12% 0; }
.showcase img{ width:100%; height:100%; object-fit:cover; }
.showcase.dim::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(25,22,20,.5),rgba(25,22,20,.05) 40%,rgba(25,22,20,.62)); }
.sc-cap{ position:absolute; left:var(--gut); bottom:clamp(26px,5vh,60px); z-index:2; color:#fff; max-width:min(520px,80vw); }
.sc-cap .t{ font-family:var(--f-hand); font-size:clamp(1.6rem,3vw,2.6rem); color:var(--gold-pale); line-height:1.05; }
.sc-cap .s{ font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; opacity:.7; display:block; margin-top:.8em; }
.sc-quote{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; text-align:center; padding:var(--gut); }
.sc-quote p{ font-family:var(--f-head); font-size:clamp(1.7rem,4.6vw,4rem); color:#fff; line-height:1.1; max-width:18ch; margin:0; letter-spacing:-.02em;
  text-shadow:0 4px 40px rgba(0,0,0,.4); }

/* Zwei Fotos versetzt, viel Luft */
.duo-wrap{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(28px,5vw,80px); align-items:center; }
@media(max-width:900px){ .duo-wrap{ grid-template-columns:1fr } }
.duo{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(14px,2.4vw,34px); align-items:center; }
.duo .a{ aspect-ratio:4/5; }
.duo .b{ aspect-ratio:3/4; margin-top:clamp(24px,6vw,80px); }
.duo figure{ margin:0; overflow:hidden; border-radius:3px; background:var(--sand-deep); }
.duo img{ width:100%; height:100%; object-fit:cover; }
@media(max-width:700px){ .duo{ grid-template-columns:1fr } .duo .b{ margin-top:0 } }

/* Grosses Einzelbild im Fluss, mit Randnotiz */
.plate{ position:relative; }
.plate figure{ margin:0; overflow:hidden; border-radius:3px; background:var(--sand-deep); aspect-ratio:16/9; }
.plate.tall figure{ aspect-ratio:4/5; }
.plate img{ width:100%; height:100%; object-fit:cover; }
.plate .note{ position:absolute; right:calc(var(--gut) * -.2); bottom:-26px; background:var(--cream); padding:18px 26px; max-width:340px;
  font-family:var(--f-hand); font-size:1.45rem; line-height:1.15; color:var(--ink); box-shadow:var(--sh-m); transform:rotate(-1.4deg); }
.is-dark .plate .note{ background:var(--ink-2); color:var(--gold-lt); }
@media(max-width:700px){ .plate .note{ position:static; transform:none; margin-top:14px; max-width:none; box-shadow:none; padding:14px 0; background:none } }

/* =========================================================
   SCROLLYTELLING
   ========================================================= */
.story{ position:relative; background:var(--ink); }
.story-media{ position:sticky; top:0; height:100svh; overflow:hidden; }
.story-shot{ position:absolute; inset:0; margin:0; opacity:0; transform:scale(1.1);
  transition:opacity 1.1s var(--ease), transform 2.6s var(--ease); }
.story-shot.on{ opacity:1; transform:scale(1.02); }
.story-shot img{ width:100%; height:100%; object-fit:cover; }
.story-shot::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,rgba(18,16,14,.92) 0%,rgba(18,16,14,.6) 44%,rgba(18,16,14,.06) 80%); }
@media(max-width:760px){ .story-shot::after{ background:linear-gradient(180deg,rgba(18,16,14,.45),rgba(18,16,14,.18) 38%,rgba(18,16,14,.94)); } }

.story-steps{ position:relative; margin-top:-100svh; z-index:2; }
.story-step{ min-height:100svh; display:flex; align-items:center; color:#fff; }
@media(max-width:760px){ .story-step{ align-items:flex-end; padding-bottom:14vh; } }
.story-card{ max-width:min(600px,92%); opacity:var(--p,0); transform:translateY(calc((1 - var(--p,0)) * 48px)); }
.story-step .time{ font-family:var(--f-head); font-size:clamp(1.05rem,1.6vw,1.45rem); color:var(--gold-lt); display:block; margin-bottom:.55em; }
.story-step .no{ font-size:.66rem; letter-spacing:.36em; text-transform:uppercase; color:rgba(255,255,255,.48); display:block; margin-bottom:1.5em; }
.story-step h3{ font-size:clamp(1.8rem,4.4vw,3.7rem); color:#fff; line-height:1.04; margin-bottom:.45em; }
.story-step p{ color:rgba(255,255,255,.8); font-size:clamp(1rem,1.3vw,1.18rem); max-width:44ch; margin:0; }
.story-step .aside{ font-family:var(--f-hand); font-size:1.65rem; color:var(--gold-lt); margin-top:.8em; display:inline-block; transform:rotate(-2deg); }

.story-rail{ position:absolute; left:clamp(14px,3vw,42px); top:0; bottom:0; width:1px; z-index:3; pointer-events:none; }
.story-rail::before{ content:""; position:absolute; inset:0; background:rgba(255,255,255,.16); }
.story-rail i{ position:absolute; inset:0; background:var(--gold-lt); transform:scaleY(0); transform-origin:50% 0; }
.story-rail b{ position:absolute; left:-3.5px; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.28); transition:.45s var(--ease); }
.story-rail b.on{ background:var(--gold-lt); transform:scale(1.8); }
@media(max-width:760px){ .story-rail{ display:none } }

/* =========================================================
   HORIZONTALE GALERIE
   ========================================================= */
.hscroll{ position:relative; background:var(--paper); }
.hs-pin{ position:sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.hs-head{ padding:0 var(--gut) clamp(18px,3vh,38px); }
.hs-head h2{ margin:0 0 .2em; }
.hs-track{ display:flex; gap:clamp(12px,1.6vw,26px); padding:0 var(--gut); will-change:transform; align-items:center; }
.hs-item{ position:relative; flex:none; width:clamp(210px,25vw,390px); aspect-ratio:3/4; overflow:hidden; border-radius:3px; margin:0; background:var(--sand-deep); }
.hs-item:nth-child(3n){ aspect-ratio:4/3; width:clamp(280px,34vw,540px); }
.hs-item img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.hs-item:hover img{ transform:scale(1.05); }
.hs-item figcaption{ position:absolute; left:14px; bottom:12px; font-family:var(--f-hand); font-size:1.25rem; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.7); }
.hs-hint{ padding:clamp(14px,2vh,26px) var(--gut) 0; font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-soft); opacity:.55; }


/* ---------- Galerie Raster ---------- */
.gal{ display:grid; gap:clamp(10px,1.2vw,18px); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.gal figure{ margin:0; position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:3px; background:var(--sand-deep); transition:transform .7s var(--ease); }
.gal figure img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.gal figure:hover{ transform:translateY(-8px); }
.gal figure:hover img{ transform:scale(1.06); }
.gal figcaption{ position:absolute; left:0; right:0; bottom:0; padding:34px 14px 12px; color:#fff;
  background:linear-gradient(transparent,rgba(20,17,15,.78)); font-family:var(--f-hand); font-size:1.28rem; line-height:1.1;
  opacity:0; transform:translateY(12px); transition:.5s var(--ease); }
.gal figure:hover figcaption{ opacity:1; transform:none; }

/* ---------- Zitatband / Marquee ---------- */
.quoteband{ background:var(--gold); color:#fff; text-align:center; padding:clamp(60px,9vw,130px) 0; }
.quoteband p{ font-family:var(--f-head); font-size:clamp(1.6rem,3.8vw,3.2rem); line-height:1.16; margin:0 auto .6em; max-width:17ch; letter-spacing:-.02em; }
.quoteband cite{ font-style:normal; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; opacity:.82; }

.marquee{ overflow:hidden; padding:clamp(20px,3vw,42px) 0; border-block:1px solid rgba(25,22,20,.1); }
.marquee-in{ display:flex; gap:2.4em; width:max-content; animation:march 46s linear infinite; }
.marquee span{ font-family:var(--f-head); font-size:clamp(1.5rem,3.2vw,2.9rem); color:var(--ink); opacity:.15; letter-spacing:-.02em; white-space:nowrap; }
.marquee span:nth-child(even){ color:var(--gold); opacity:.45; font-style:italic; }
@keyframes march{ to{ transform:translateX(-50%) } }

/* ---------- Karten / Schritte / Stempel ---------- */
.card{ background:var(--white); border-radius:6px; padding:clamp(26px,3vw,40px); box-shadow:var(--sh-s); position:relative; overflow:hidden;
  transition:transform .55s var(--ease), box-shadow .55s; }
.card:hover{ transform:translateY(-8px); box-shadow:var(--sh-m); }
.card .num{ position:absolute; top:4px; right:18px; font-family:var(--f-head); font-size:3.3rem; color:var(--sand-deep); pointer-events:none; }
.card p{ margin:0; font-size:.96rem; color:var(--ink-soft); }
.is-dark .card{ background:var(--ink-2); box-shadow:none; border:1px solid rgba(233,225,215,.1); }
.is-dark .card .num{ color:rgba(233,225,215,.13); }
.is-dark .card p{ color:rgba(233,225,215,.7); }

.steps{ display:grid; gap:clamp(22px,3vw,40px); grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.step{ padding-top:26px; border-top:1px solid rgba(25,22,20,.16); }
.is-dark .step{ border-color:rgba(233,225,215,.18); }
.step .n{ font-size:.64rem; letter-spacing:.3em; color:var(--gold); display:block; margin-bottom:1.6em; }
.step h3{ margin-bottom:.4em; }
.step p{ font-size:.95rem; color:var(--ink-soft); margin:0; }
.is-dark .step p{ color:rgba(233,225,215,.68); }

.stamps{ display:grid; gap:clamp(16px,2.4vw,28px); grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.stamp{ text-align:center; padding:34px 22px; border-radius:8px; border:1.5px dashed rgba(169,120,75,.45); background:rgba(255,255,255,.5);
  transition:transform .5s var(--ease), background .4s, border-color .4s; }
.stamp:hover{ transform:rotate(-2deg) translateY(-6px); background:#fff; border-color:var(--gold); }
.is-dark .stamp{ background:rgba(255,255,255,.03) } .is-dark .stamp:hover{ background:rgba(255,255,255,.07) }
.stamp .ico{ width:46px; height:46px; margin:0 auto 16px; color:var(--gold) } .stamp .ico svg{ width:100%; height:100% }
.stamp h3{ font-size:1.04rem; margin-bottom:.4em }
.stamp p{ font-size:.87rem; color:var(--ink-soft); margin:0 }
.is-dark .stamp p{ color:rgba(233,225,215,.68) }

.stars{ display:inline-flex; align-items:center; gap:.6em; font-size:.88rem; }
.stars .s{ color:#DCA33E; letter-spacing:.1em; }

/* ---------- Testimonials ---------- */
.tgrid{ columns:3; column-gap:clamp(16px,2vw,26px); }
@media(max-width:900px){ .tgrid{ columns:2 } }
@media(max-width:620px){ .tgrid{ columns:1 } }
.tcard{ break-inside:avoid; margin:0 0 clamp(16px,2vw,26px); background:var(--white); border-radius:6px; padding:30px; box-shadow:var(--sh-s); }
.is-dark .tcard{ background:var(--ink-2); box-shadow:none; border:1px solid rgba(233,225,215,.1); }
.tcard p{ font-size:.97rem; color:var(--ink-soft); margin:.9em 0 }
.is-dark .tcard p{ color:rgba(233,225,215,.76) }
.tcard b{ font-family:var(--f-head); font-weight:450; font-size:1rem }

/* ---------- FAQ ---------- */
.faq details{ border-bottom:1px solid rgba(25,22,20,.14) }
.faq details:first-child{ border-top:1px solid rgba(25,22,20,.14) }
.is-dark .faq details{ border-color:rgba(233,225,215,.16) }
.faq summary{ list-style:none; cursor:pointer; padding:26px 48px 26px 0; position:relative;
  font-family:var(--f-head); font-size:clamp(1.08rem,1.8vw,1.42rem); font-weight:450; transition:color .3s; }
.faq summary:hover{ color:var(--gold) }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:""; position:absolute; right:8px; top:50%; width:14px; height:14px; margin-top:-7px;
  background:linear-gradient(var(--gold),var(--gold)) center/100% 1.5px no-repeat,linear-gradient(var(--gold),var(--gold)) center/1.5px 100% no-repeat;
  transition:transform .4s var(--ease); }
.faq details[open] summary::after{ transform:rotate(135deg) }
.faq .a{ padding:0 46px 28px 0; color:var(--ink-soft); max-width:70ch }
.is-dark .faq .a{ color:rgba(233,225,215,.7) }

/* ---------- Formular ---------- */
.formwrap{ background:var(--white); border-radius:8px; padding:clamp(28px,4vw,52px); box-shadow:var(--sh-m); }
.field{ margin-bottom:20px }
.field label{ display:block; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:.7em; color:var(--ink-soft) }
.field input,.field textarea,.field select{ width:100%; padding:.9em 0; border:0; border-bottom:1px solid rgba(25,22,20,.2);
  background:transparent; font-family:var(--f-body); font-size:1.02rem; color:var(--ink); transition:border-color .35s; border-radius:0; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:0; border-color:var(--gold) }
.field textarea{ min-height:120px; resize:vertical }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:20px }
@media(max-width:600px){ .two{ grid-template-columns:1fr } }
.formnote{ font-size:.77rem; color:var(--ink-soft) }
.checks{ list-style:none; margin:0; padding:0; display:grid; gap:14px }
.checks li{ display:flex; gap:14px; align-items:flex-start; font-size:.97rem }
.checks li::before{ content:""; flex:none; width:22px; height:22px; border-radius:50%; margin-top:3px;
  background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat; }

/* ---------- Footer ---------- */
footer.site{ background:var(--ink); color:rgba(233,225,215,.72); padding:clamp(44px,6vw,84px) 0 34px; }
footer.site h4{ color:var(--cream); font-family:var(--f-head); font-weight:450; font-size:1rem; margin-bottom:1.2em }
footer.site a{ opacity:.78; transition:.3s } footer.site a:hover{ opacity:1; color:var(--gold-lt) }
.fbig{ font-family:var(--f-head); font-size:clamp(2.1rem,6.6vw,5.6rem); color:var(--cream); line-height:1; letter-spacing:-.03em; margin:0 0 .45em }
.fgrid{ display:grid; gap:38px; grid-template-columns:1.6fr 1fr 1fr 1.2fr; margin-top:clamp(40px,6vw,80px) }
@media(max-width:900px){ .fgrid{ grid-template-columns:1fr 1fr } }
@media(max-width:520px){ .fgrid{ grid-template-columns:1fr } }
.flist{ list-style:none; margin:0; padding:0; display:grid; gap:11px; font-size:.9rem }
.fbot{ margin-top:52px; padding-top:24px; border-top:1px solid rgba(233,225,215,.14); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.76rem }
.socials{ display:flex; gap:12px; margin-top:20px }
.socials a{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(233,225,215,.2); display:grid; place-items:center; transition:.4s var(--ease) }
.socials a:hover{ background:var(--gold); border-color:var(--gold); color:#fff; transform:translateY(-4px) }
.socials svg{ width:17px; height:17px }

.mobcta{ position:fixed; left:12px; right:12px; bottom:12px; z-index:8000; display:none; gap:10px }
.mobcta .btn{ flex:1; justify-content:center; padding:1.05em; box-shadow:var(--sh-m) }
@media(max-width:760px){ .mobcta{ display:flex } footer.site{ padding-bottom:96px } }

/* ---------- Cursor ---------- */
@media(hover:hover) and (pointer:fine){
  body.cam,body.cam *{ cursor:none !important }
  #cursor{ position:fixed; top:0; left:0; z-index:9250; pointer-events:none }
  .cur-dot{ position:absolute; width:8px; height:8px; border-radius:50%; background:var(--gold); transform:translate(-50%,-50%);
    transition:width .35s var(--ease),height .35s var(--ease),background .3s,border-color .3s }
  .cur-label{ position:absolute; transform:translate(-50%,-50%); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:#fff; opacity:0; transition:opacity .3s; white-space:nowrap }
  #cursor.hot .cur-dot{ width:34px; height:34px; background:rgba(169,120,75,.25); border:1px solid var(--gold) }
  #cursor.big .cur-dot{ width:92px; height:92px; background:var(--gold) }
  #cursor.big .cur-label{ opacity:1 }
  #cursor.down .cur-dot{ transform:translate(-50%,-50%) scale(.82) }
}
#flash{ position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:9240 }
#flash.go{ animation:flash .34s ease-out }
@keyframes flash{ from{opacity:.7} to{opacity:0} }

/* ---------- Lightbox ---------- */
#lightbox{ position:fixed; inset:0; z-index:9350; background:rgba(16,14,12,.96); display:none; align-items:center; justify-content:center }
#lightbox.on{ display:flex; animation:fade .4s ease-out }
@keyframes fade{ from{opacity:0} }
#lightbox figure{ margin:0; max-width:92vw; max-height:88vh; text-align:center }
#lightbox img{ max-width:88vw; max-height:78vh; object-fit:contain; border-radius:3px }
#lightbox figcaption{ color:var(--gold-lt); font-family:var(--f-hand); font-size:1.45rem; margin-top:14px }
#lightbox button{ background:none; border:0; color:rgba(255,255,255,.6); font-size:2.6rem; cursor:pointer; padding:0 clamp(8px,3vw,40px); line-height:1; transition:color .3s }
#lightbox button:hover{ color:#fff }
.lb-x{ position:absolute; top:10px; right:18px; font-size:2.1rem !important }

/* ---------- Toast / Jagd / Polaroid ---------- */
#toast{ position:fixed; left:50%; bottom:34px; transform:translate(-50%,150%); z-index:9260; background:var(--ink); color:var(--cream);
  padding:16px 28px; border-radius:100px; font-size:.86rem; box-shadow:var(--sh-l); transition:transform .6s var(--ease); max-width:92vw; text-align:center }
#toast.show{ transform:translate(-50%,0) }
#toast b{ color:var(--gold-lt) }
#hunt{ position:fixed; right:16px; bottom:16px; z-index:8100; background:rgba(25,22,20,.9); backdrop-filter:blur(8px); color:var(--cream);
  border-radius:100px; padding:10px 20px; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; display:none; align-items:center; gap:.8em }
#hunt.show{ display:flex } #hunt b{ color:var(--gold-lt); font-size:.88rem; letter-spacing:.1em }
@media(max-width:760px){ #hunt{ bottom:80px } }
.polaroid{ position:fixed; top:0; z-index:9270; width:186px; background:#fff; padding:10px 10px 42px; box-shadow:var(--sh-l); border-radius:2px; pointer-events:none }
.polaroid img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--sand) }
.polaroid span{ position:absolute; left:0; right:0; bottom:10px; text-align:center; font-family:var(--f-hand); font-size:1.15rem; color:var(--ink) }
@keyframes drop{ from{ transform:translateY(-120vh) rotate(var(--r,0deg)) } to{ transform:translateY(118vh) rotate(calc(var(--r,0deg) * -2)) } }
.egg{ position:relative }
.egg.found::after{ content:"gefunden!"; position:absolute; top:10px; left:10px; z-index:4; background:var(--gold); color:#fff;
  font-family:var(--f-hand); font-size:1.05rem; padding:1px 14px; border-radius:100px; animation:pop .5s cubic-bezier(.2,1.7,.4,1) }
@keyframes pop{ from{transform:scale(0) rotate(-20deg)} to{transform:scale(1) rotate(-6deg)} }
.tape{ position:absolute; top:-13px; left:50%; transform:translateX(-50%) rotate(-3deg); width:84px; height:26px;
  background:rgba(223,205,180,.8); border-inline:1px dashed rgba(0,0,0,.07); z-index:2 }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  .rev{ opacity:1; transform:none } [data-split] .ln i{ transform:none } .figrev img{ transform:none; filter:none }
  .story-card{ opacity:1; transform:none }
}


/* ---------- Heldenreise-Schiene ---------- */
#stagerail{
  position:fixed; left:clamp(14px,2.2vw,34px); top:50%; transform:translateY(-50%);
  z-index:8500; display:none; flex-direction:column; gap:15px;
}
#stagerail.on{ display:flex; }
#stagerail a{
  display:flex; align-items:center; gap:.8em; color:var(--ink); opacity:.32;
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
  transition:opacity .45s var(--ease);
}
#stagerail a::before{
  content:""; width:14px; height:1px; background:currentColor; flex:none;
  transition:width .5s var(--ease);
}
#stagerail a .rd-tx{
  max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
  transition:max-width .6s var(--ease), opacity .4s var(--ease);
}
#stagerail a:hover{ opacity:.9; }
#stagerail:hover a .rd-tx{ max-width:220px; opacity:.85; }
#stagerail a:hover .rd-tx{ opacity:1; }
#stagerail a.on{ opacity:1; }
#stagerail a.on::before{ width:32px; }
#stagerail.light a{ color:#fff; }
#stagerail a.on{ color:var(--gold); }
#stagerail.light a.on{ color:var(--gold-lt); }
@media(max-width:1240px){ #stagerail{ display:none !important } }

/* Etappen-Marke in der Sektions-Ueberschrift */
.mark em{ font-style:normal; opacity:.5; }
.mark b{ font-weight:500; }

/* ---------- V4: Fakten, Versprechen, Gruende, Preis, lange Stimme ---------- */
.facts{ display:grid; gap:clamp(18px,2.6vw,34px); grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.fact{ padding-top:22px; border-top:1px solid rgba(25,22,20,.16); }
.is-dark .fact{ border-color:rgba(233,225,215,.18); }
.fact .ft{ display:block; font-family:var(--f-head); font-size:clamp(1.15rem,1.9vw,1.55rem); margin-bottom:.5em; }
.fact p{ margin:0; font-size:.94rem; color:var(--ink-soft); }
.is-dark .fact p{ color:rgba(233,225,215,.7); }

.proms{ display:grid; gap:clamp(20px,3vw,40px); grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.prom{ padding:26px 0 0; border-top:1px solid rgba(233,225,215,.2); }
.prom h3{ font-size:clamp(1.4rem,2.4vw,2rem); color:var(--gold-lt); margin-bottom:.4em; }
.prom p{ margin:0; font-size:.96rem; color:rgba(233,225,215,.72); }

.reasons{ list-style:none; margin:0; padding:0; counter-reset:r;
  display:grid; gap:0; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.reasons li{ counter-increment:r; display:grid; grid-template-columns:auto 1fr; gap:1.1em;
  padding:22px 26px 22px 0; border-top:1px solid rgba(25,22,20,.13); align-items:baseline; }
.reasons li::before{ content:counter(r,decimal-leading-zero); font-family:var(--f-head);
  font-size:1.1rem; color:var(--gold); opacity:.65; }
.reasons li b{ font-family:var(--f-head); font-weight:450; font-size:1.15rem; display:block; margin-bottom:.3em; }
.reasons li span{ font-size:.94rem; color:var(--ink-soft); display:block; }
.reasons li > div{ min-width:0; }

.price{ font-family:var(--f-head); font-size:clamp(1.8rem,3.4vw,2.8rem); color:var(--gold); margin:0 0 .2em; letter-spacing:-.02em; }
.price s{ opacity:.4; font-size:.55em; margin-right:.35em; }

.longquote{ font-family:var(--f-head); font-size:clamp(1.15rem,1.7vw,1.5rem); line-height:1.45; color:var(--cream); margin-bottom:1.6em; }
.longquote p{ margin:0 0 .8em; }
.longquote p:first-child::before{ content:"\201E"; color:var(--gold-lt); }
.longquote p:last-child::after{ content:"\201C"; color:var(--gold-lt); }

/* =========================================================
   V5  Kopfbereich, Logo, Termin-Button, Abschneide-Fixes
   ========================================================= */

/* Infoleiste sitzt jetzt IM fixen Header, ueber dem Menue */
header.site{ color:var(--cream); }
header.site .topbar{
  max-height:60px; overflow:hidden; background:rgba(18,16,14,.92);
  transition:max-height .5s var(--ease), padding .5s var(--ease), opacity .4s;
}
header.site.stuck .topbar{ max-height:0; padding-top:0; padding-bottom:0; opacity:0; }
header.site.stuck{ background:rgba(25,22,20,.9); backdrop-filter:blur(16px) saturate(1.2); box-shadow:0 1px 0 rgba(255,255,255,.06); }
header.site.on-dark:not(.stuck){ color:var(--cream); }
header.site .burger span{ background:var(--cream); }
.nav{ padding:10px 0; }

/* Echtes Logo */
.logo img{ height:64px; width:auto; transition:height .5s var(--ease), transform .6s var(--ease); }
header.site.stuck .logo img{ height:48px; }
.logo:hover img{ transform:rotate(-4deg) scale(1.04); }
.pl-logo img{ height:auto; width:min(190px,46vw); margin:0 auto 10px; }

/* Termin-Button immer sichtbar, auf allen Groessen */
.btn-cta{ padding:.95em 1.6em; }
.cta-short{ display:none; }
@media(max-width:1060px){
  .nav-cta .btn{ display:inline-flex !important; }
  .logo img{ height:54px; }
  header.site.stuck .logo img{ height:44px; }
}
@media(max-width:560px){
  .cta-long{ display:none; }
  .cta-short{ display:inline; }
  .btn-cta{ padding:.85em 1.15em; letter-spacing:.14em; }
  .btn-cta svg{ display:none; }
  .logo img{ height:46px; }
  header.site .topbar{ gap:16px; font-size:.66rem; }
  .tb-hours{ display:none; }
}
@media(max-width:380px){
  .topbar a[href^="mailto"]{ display:none; }
}

/* Unterlaengen (g, p, y) nicht mehr abschneiden */
[data-split] .ln{ padding-bottom:.16em; margin-bottom:-.16em; }

/* Karten: Titel passen immer, Nummer stoert nicht mehr */
.card h3{ font-size:clamp(1.12rem,1.45vw,1.38rem); line-height:1.15; padding-right:2.2em;
  hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; }
.card .num{ font-size:2.1rem; top:14px; right:18px; }

/* Ganze Karte klickbar */
.card-link{ display:flex; flex-direction:column; color:inherit; cursor:pointer; }
.card-link:hover{ border-color:var(--gold); }
.card-link:hover h3{ color:var(--gold-lt); }
.card-go{ margin-top:auto; padding-top:1.6em; display:inline-flex; align-items:center; gap:.6em;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.is-dark .card-go{ color:var(--gold-lt); }
.card-go svg{ width:14px; height:14px; transition:transform .45s var(--ease); }
.card-link:hover .card-go svg{ transform:translateX(6px); }

/* Karten-Nummer in den Fluss, Titel bekommen die volle Breite */
.card .num{ position:static; display:block; font-family:var(--f-body); font-size:.72rem; letter-spacing:.24em;
  color:var(--gold); opacity:.9; margin-bottom:1.3em; }
.is-dark .card .num{ color:var(--gold-lt); }
.card h3{ padding-right:0; hyphens:manual; -webkit-hyphens:manual; overflow-wrap:normal; }
.gcards{ grid-template-columns:repeat(4,1fr); }
@media(max-width:1180px){ .gcards{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .gcards{ grid-template-columns:1fr; } }


/* =========================================================
   V6  Archiv-Karussell zum Ziehen, Bilder im Originalformat
   ========================================================= */
.hscroll{ height:auto !important; padding:clamp(70px,9vw,140px) 0; overflow:hidden; background:var(--paper); }
.hs-pin{ display:none; }
.hs-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:0 0 clamp(22px,3vw,40px); }
.hs-head h2{ margin:0; }
.hs-nav{ display:flex; gap:10px; flex:none; }
.hs-btn{ width:54px; height:54px; border-radius:50%; border:1px solid rgba(25,22,20,.22); background:transparent; color:var(--ink);
  display:grid; place-items:center; cursor:pointer; transition:background .35s, color .35s, border-color .35s, transform .4s var(--ease); }
.hs-btn:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.hs-btn:active{ transform:scale(.92); }
.hs-btn svg{ width:20px; height:20px; }

.hs-viewport{ overflow:hidden; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.hs-viewport.grabbing{ cursor:grabbing; }
.hs-track{ display:flex; gap:clamp(12px,1.4vw,22px); width:max-content; align-items:stretch;
  padding:0 !important; will-change:transform; overflow:visible !important; }
.hs-item, .hs-item:nth-child(3n), .hs-item:nth-child(4n){
  flex:none; height:clamp(300px,58vh,620px); width:auto !important; aspect-ratio:auto !important;
  align-self:stretch !important; margin:0; position:relative; overflow:hidden; border-radius:3px; background:var(--sand-deep); }
.hs-item img{ height:100%; width:auto; max-width:none; object-fit:contain; display:block; pointer-events:none;
  transition:transform 1.2s var(--ease), filter .6s; }
.hs-viewport:not(.grabbing) .hs-item:hover img{ transform:scale(1.03); }
.hs-item::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:38%; pointer-events:none;
  background:linear-gradient(transparent,rgba(20,17,15,.55)); }
.hs-item figcaption{ z-index:2; left:16px; bottom:14px; font-size:1.35rem; }

.hs-foot{ display:flex; align-items:center; gap:22px; margin-top:clamp(18px,2.4vw,32px); }
.hs-bar{ flex:1; height:1px; background:rgba(25,22,20,.16); overflow:hidden; }
.hs-bar i{ display:block; height:100%; background:var(--gold); transform-origin:0 50%; transform:scaleX(.06); }
.hs-foot .hs-hint{ padding:0; flex:none; }
@media(max-width:600px){
  .hs-item, .hs-item:nth-child(3n), .hs-item:nth-child(4n){ height:clamp(260px,52vh,440px); }
  .hs-btn{ width:44px; height:44px; }
  .hs-foot .hs-hint{ display:none; }
}

/* Cursor: Kamera in der Mitte des Kreises */
@media(hover:hover) and (pointer:fine){
  .cur-in{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center;
    gap:5px; color:#fff; opacity:0; transition:opacity .3s; pointer-events:none; }
  .cur-in .cur-label{ position:static; transform:none; opacity:1; font-size:.5rem; letter-spacing:.22em; }
  .cur-cam{ width:26px; height:26px; }
  #cursor.big .cur-dot{ width:96px; height:96px; background:rgba(169,120,75,.92); }
  #cursor.big .cur-in{ opacity:1; }
  body.is-grabbing #cursor .cur-dot{ transform:translate(-50%,-50%) scale(.84); }
  body.is-grabbing, body.is-grabbing *{ cursor:none !important; }
}

/* =========================================================
   V7  Begruessung mit Foto, Maria gespiegelt, Zitat unten,
       Ablauf mit Reitern, Kamera-Cursor ueberall
   ========================================================= */

/* Begruessung: Text links, Foto rechts */
.intro-split{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,6vw,110px); align-items:center; }
.intro-split .big{ margin-bottom:.9em; }
.intro-img{ position:relative; margin:0; aspect-ratio:4/5; border-radius:3px; overflow:visible; background:none; }
.intro-img img{ width:100%; height:100%; object-fit:cover; border-radius:3px; box-shadow:var(--sh-l); }
.intro-img .tape{ z-index:3; }
@media(max-width:860px){ .intro-split{ grid-template-columns:1fr; } .intro-img{ max-width:460px; } }

/* Maria: Text links, Bilder rechts */
.duo-wrap.flip{ grid-template-columns:.75fr 1.25fr; }
.duo-wrap.flip > .duo{ order:2; }
@media(max-width:900px){ .duo-wrap.flip{ grid-template-columns:1fr; } .duo-wrap.flip > .duo{ order:0; } }

/* Zitat unten links, damit Gesichter frei bleiben */
.sc-quote.low{ place-items:end start; text-align:left; padding:0 var(--gut) clamp(40px,8vh,90px); }
.sc-quote.low p{ max-width:14ch; }
.showcase.dim:has(.sc-quote.low)::after{
  background:linear-gradient(180deg,rgba(25,22,20,.35),rgba(25,22,20,0) 35%,rgba(25,22,20,.15) 55%,rgba(25,22,20,.78)); }

/* Ablauf mit Reitern */
.fl-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px 60px; flex-wrap:wrap; margin-bottom:clamp(30px,4vw,56px); }
.fl-head > div:first-child{ max-width:640px; }
.fl-head h2{ margin-bottom:.35em; }
.fl-tabs{ display:inline-flex; padding:6px; border-radius:100px; border:1px solid rgba(233,225,215,.2); gap:4px; flex:none; }
.fl-tab{ border:0; background:transparent; color:rgba(233,225,215,.75); padding:.95em 1.6em; border-radius:100px; cursor:pointer;
  font-family:var(--f-body); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; transition:background .4s, color .4s; }
.fl-tab:hover{ color:#fff; }
.fl-tab.on{ background:var(--gold); color:#fff; }
.fl-panel{ display:none; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,80px); align-items:start; }
.fl-panel.on{ display:grid; animation:flin .7s var(--ease); }
@keyframes flin{ from{ opacity:0; transform:translateY(18px) } }
.fl-img{ margin:0; border-radius:3px; overflow:hidden; aspect-ratio:4/5; background:var(--ink-2); position:sticky; top:110px; }
.fl-img img{ width:100%; height:100%; object-fit:cover; }
.fl-steps{ list-style:none; margin:0; padding:0; }
.fl-steps li{ display:grid; grid-template-columns:auto 1fr; gap:1.4em; padding:clamp(22px,2.6vw,34px) 0; border-top:1px solid rgba(233,225,215,.16); }
.fl-steps li:last-child{ border-bottom:1px solid rgba(233,225,215,.16); }
.fl-n{ font-family:var(--f-head); font-size:clamp(1.6rem,2.6vw,2.4rem); line-height:1; color:var(--gold-lt); opacity:.8; min-width:2.2ch; }
.fl-steps h3{ margin-bottom:.35em; color:var(--cream); }
.fl-steps p{ margin:0; color:rgba(233,225,215,.72); font-size:.98rem; }
.fl-note{ margin:clamp(24px,3vw,40px) 0 0; font-size:.92rem; color:rgba(233,225,215,.6); }
@media(max-width:860px){
  .fl-panel.on{ grid-template-columns:1fr; }
  .fl-img{ position:static; aspect-ratio:16/10; }
  .fl-tabs{ width:100%; }
  .fl-tab{ flex:1; padding:.95em .8em; }
}

/* Cursor: kleine Kamera in der Mitte, immer */
@media(hover:hover) and (pointer:fine){
  .cur-dot{ width:34px; height:34px; background:rgba(169,120,75,.14); border:1px solid var(--gold); }
  .cur-in{ opacity:1; color:var(--gold); gap:3px; }
  .cur-cam{ width:14px; height:14px; transition:width .35s var(--ease), height .35s var(--ease), color .3s; }
  .cur-in .cur-label{ display:none; }
  #cursor.hot .cur-dot{ width:48px; height:48px; background:var(--gold); border-color:var(--gold); }
  #cursor.hot .cur-in{ color:#fff; }
  #cursor.hot .cur-cam{ width:17px; height:17px; }
  #cursor.big .cur-dot{ width:96px; height:96px; background:rgba(169,120,75,.92); border-color:transparent; }
  #cursor.big .cur-in{ color:#fff; }
  #cursor.big .cur-cam{ width:26px; height:26px; }
  #cursor.big .cur-in .cur-label{ display:block; }
  #cursor.down .cur-dot{ transform:translate(-50%,-50%) scale(.82); }
}

/* =========================================================
   V8  Haltung, Verweise auf die Unterseiten, Zwischenruf
   ========================================================= */

/* Verweise auf die Detailseiten */
.chips{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,3vw,40px); }
.chip{ display:inline-flex; align-items:center; gap:.7em; padding:.72em 1.25em; border-radius:100px; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--cream); box-shadow:inset 0 0 0 1px rgba(233,225,215,.3); transition:background .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease); }
.chip svg{ width:15px; height:15px; transition:transform .45s var(--ease); }
.chip:hover{ background:var(--gold); color:#fff; box-shadow:inset 0 0 0 1px var(--gold); }
.chip:hover svg{ transform:translateX(4px); }

/* Zwischenruf: jetzt melden */
.ctaband{ position:relative; isolation:isolate; min-height:clamp(440px,68vh,680px); display:flex; align-items:center; color:var(--cream); overflow:hidden; }
.cb-img{ position:absolute; inset:-12% 0; z-index:-2; }
.cb-img img{ width:100%; height:100%; object-fit:cover; }
.ctaband::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(15,13,12,.84) 0%,rgba(15,13,12,.66) 52%,rgba(15,13,12,.34) 100%); }
.cb-in{ padding:clamp(60px,9vw,120px) 0; }
.cb-in h2{ font-size:clamp(2.1rem,5vw,4.1rem); line-height:1.04; color:var(--cream); max-width:22ch; margin-bottom:.45em; }
.cb-in .lead{ color:rgba(233,225,215,.8); max-width:46ch; }
.cb-btns{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2.1em; }
@media(max-width:700px){ .ctaband::before{ background:linear-gradient(180deg,rgba(15,13,12,.6),rgba(15,13,12,.88)); } }

/* Wie wir arbeiten: Pfad mit grossen Ziffern */
.ww{ position:relative; isolation:isolate; overflow:hidden; padding:clamp(80px,11vw,170px) 0; }
.ww-bg{ position:absolute; inset:-12% 0; z-index:-2; }
.ww-bg img{ width:100%; height:100%; object-fit:cover; opacity:.24; }
.ww::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,var(--ink) 0%,rgba(20,17,15,.82) 40%,var(--ink) 100%); }
.ww-head{ max-width:760px; margin-bottom:clamp(44px,6vw,86px); }
.ww-head h2{ margin-bottom:.35em; }
.ww-path{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,46px); position:relative; }
.ww-path::before{ content:""; position:absolute; left:0; right:0; top:5px; height:1px; background:linear-gradient(90deg,transparent,rgba(169,120,75,.5) 10%,rgba(169,120,75,.5) 90%,transparent); }
.ww-path li{ position:relative; padding-top:clamp(30px,3.4vw,44px); }
.ww-path li::after{ content:""; position:absolute; top:0; left:0; width:11px; height:11px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 7px var(--ink); }
.ww-n{ display:block; font-family:var(--serif); font-size:clamp(2.9rem,5.6vw,4.6rem); line-height:1; color:transparent; -webkit-text-stroke:1px rgba(169,120,75,.75); margin-bottom:.34em; transition:color .6s var(--ease); }
.ww-path li:hover .ww-n{ color:rgba(169,120,75,.3); }
.ww-path h3{ font-size:clamp(1.12rem,1.6vw,1.42rem); color:var(--cream); margin-bottom:.5em; hyphens:manual; }
.ww-path p{ margin:0; font-size:.97rem; color:rgba(233,225,215,.7); }
@media(max-width:1000px){
  .ww-path{ grid-template-columns:repeat(2,1fr); gap:clamp(34px,5vw,54px); }
  .ww-path::before{ display:none; }
}
@media(max-width:620px){
  .ww-path{ grid-template-columns:1fr; gap:clamp(30px,8vw,44px); padding-left:30px; }
  .ww-path::before{ display:block; left:5px; right:auto; top:6px; bottom:10px; width:1px; height:auto;
    background:linear-gradient(180deg,rgba(169,120,75,.55),rgba(169,120,75,.08)); }
  .ww-path li{ padding-top:0; }
  .ww-path li::after{ left:-30px; top:.5em; }
}

/* Zeitspalte der Story bleibt leer, wenn wir keine Zeit angeben */
.story-card .time:empty{ display:none; }

/* Leistungen direkt unter dem Hero: Bildkacheln */
.offers{ background:var(--cream); }
.of-head{ display:grid; grid-template-columns:1.15fr .85fr; gap:24px clamp(40px,6vw,110px); align-items:end; margin-bottom:clamp(34px,4.6vw,64px); }
.of-head h2{ margin-bottom:0; }
.of-head .lead{ margin:0 0 1.1em; }
.of-rating{ display:flex; flex-wrap:wrap; align-items:center; gap:.3em .55em; font-size:.92rem; color:rgba(25,22,20,.72); }
.of-rating b{ font-family:var(--serif); font-size:1.35rem; color:var(--ink); font-weight:500; }
.of-stars{ display:inline-flex; gap:2px; color:var(--gold); }
.of-stars svg{ width:15px; height:15px; }
.of-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,22px); }
.of-card{ position:relative; display:block; border-radius:4px; overflow:hidden; aspect-ratio:3/4.15; background:var(--ink-2); color:var(--cream); isolation:isolate; }
.of-card figure{ position:absolute; inset:0; margin:0; }
.of-card img{ width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform 1.3s var(--ease); }
.of-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,13,12,0) 38%,rgba(15,13,12,.5) 68%,rgba(15,13,12,.86) 100%); transition:opacity .6s var(--ease); }
.of-txt{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:clamp(18px,2vw,30px); }
.of-txt h3{ font-size:clamp(1.25rem,1.6vw,1.6rem); line-height:1.12; color:var(--cream); margin:0 0 .45em; hyphens:manual; }
.of-txt p{ margin:0; font-size:.92rem; color:rgba(233,225,215,.8); max-height:0; overflow:hidden; opacity:0; transform:translateY(6px); transition:max-height .7s var(--ease), opacity .5s var(--ease), transform .6s var(--ease), margin .7s var(--ease); }
.of-go{ display:inline-flex; align-items:center; gap:.5em; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-lt); }
.of-go svg{ width:16px; height:16px; }
.of-card:hover img, .of-card:focus-visible img{ transform:scale(1.11); }
.of-card:hover .of-txt p, .of-card:focus-visible .of-txt p{ max-height:6em; opacity:1; transform:none; margin-bottom:.9em; }
.of-note{ margin:clamp(22px,3vw,40px) 0 0; font-family:var(--f-hand); font-size:1.5rem; color:var(--gold); }
@media(max-width:1100px){ .of-grid{ grid-template-columns:repeat(2,1fr); } .of-card{ aspect-ratio:4/3.6; } }
@media(max-width:800px){ .of-head{ grid-template-columns:1fr; } }
@media(max-width:560px){
  .of-grid{ grid-template-columns:1fr; }
  .of-card{ aspect-ratio:16/11; }
  .of-txt p{ max-height:none; opacity:1; transform:none; margin-bottom:.9em; }
}
@media(hover:none){ .of-txt p{ max-height:none; opacity:1; transform:none; margin-bottom:.9em; } }


/* =========================================================
   V8.1  Abstaende, grosses Zitat, Kapitelkopf, Hero-Bewegung
   ========================================================= */
.of-head{ margin-bottom:clamp(26px,3.4vw,46px); }
.ww{ padding:clamp(64px,9vw,130px) 0; }
.ww-head{ margin-bottom:clamp(36px,5vw,70px); }
.ctaband{ min-height:clamp(400px,60vh,600px); }
.showcase{ height:min(100svh,1000px); }

/* Zitat richtig gross */
.sc-quote.low p{ max-width:none; font-size:clamp(2.1rem,5.6vw,5.2rem); line-height:.98; letter-spacing:-.03em; }
.sc-quote.low .sc-sub{ font-size:.72rem !important; margin-top:1.6em !important; }

/* Kapitelkopf vor der Haltung */
.chead{ background:var(--ink); padding:clamp(64px,10vw,150px) 0 clamp(40px,6vw,90px); position:relative; }
.chead h2{ font-size:clamp(2.4rem,6.4vw,5.6rem); line-height:1; max-width:22ch; margin:0 0 .4em; }
.chead .lead{ max-width:50ch; color:rgba(233,225,215,.74); margin:0; }
.chead::after{ content:""; position:absolute; left:var(--gut); bottom:0; width:1px; height:clamp(30px,5vw,70px); background:linear-gradient(var(--gold),transparent); }

/* Hero: langsamer Zoom, Zaehler, gezeichnete Linie unter dem Akzentwort */
@keyframes kenburns{ from{ transform:scale(1.14) translateY(-1.2%) } to{ transform:scale(1) translateY(0) } }
body.ready .hero-bg img{ animation:kenburns 9s cubic-bezier(.2,.6,.2,1) both; }
.hero h1 .acc{ position:relative; display:inline-block; }
.hero h1 .acc::after{ content:""; position:absolute; left:.02em; right:.02em; bottom:.04em; height:.06em; background:var(--gold); transform:scaleX(0); transform-origin:0 50%; transition:transform 1.1s var(--ease) 1.25s; }
body.ready .hero h1 .acc::after{ transform:scaleX(1); }
.hero-meta b{ font-variant-numeric:tabular-nums; }
@media(prefers-reduced-motion:reduce){ body.ready .hero-bg img{ animation:none } .hero h1 .acc::after{ transform:scaleX(1); transition:none } }
section:has(> .duo-wrap) + section:has(> .duo-wrap){ padding-top:0; }

/* =========================================================
   V8.2  Wechselwort, Rezensionswand, Stempel, Ultrawide
   ========================================================= */

/* Zitat und Kapitelkopf wachsen mit der Bildschirmbreite mit */
.sc-quote.low p{ font-size:clamp(2.1rem,5.6vw,7.6rem); }
.sc-quote.low{ padding-bottom:clamp(40px,9vh,120px); }
.showcase.dim:has(.sc-quote.low)::after{ background:linear-gradient(180deg,rgba(15,13,12,.05) 30%,rgba(15,13,12,.72) 100%) !important; }
.chead{ min-height:min(72svh,820px); display:flex; align-items:center; overflow:hidden; }
.chead h2{ font-size:clamp(2.6rem,7.2vw,9rem); letter-spacing:-.03em; }
.chead .lead{ font-size:clamp(1.05rem,1.4vw,1.4rem); }
.chead .ghost{ position:absolute; right:-.06em; top:50%; transform:translateY(-50%); font-family:var(--serif); font-size:clamp(9rem,26vw,30rem); line-height:1; color:transparent; -webkit-text-stroke:1px rgba(169,120,75,.18); pointer-events:none; white-space:nowrap; }
@media(min-width:1800px){ .wide{ width:min(1760px,100% - var(--gut)*2); } }

/* Wechselwort */
.swap{ display:inline-grid; vertical-align:baseline; color:var(--gold-lt); position:relative; transition:width .55s var(--ease); }
.swap > span{ grid-area:1/1; display:inline-block; white-space:nowrap; transition:opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease); }
.swap > span.out{ opacity:0; transform:translateY(-.55em) rotate(-2deg); filter:blur(6px); }
.swap > span.pre{ opacity:0; transform:translateY(.55em) rotate(2deg); filter:blur(6px); transition:none; }
.swap::after{ content:""; position:absolute; left:0; right:0; bottom:.02em; height:.05em; background:var(--gold); opacity:.7; }

/* Stempel: schief, mit Siegel, nicht geradlinig */
.stampsec{ position:relative; overflow:hidden; }
.stampsec .ghost{ position:absolute; left:50%; top:clamp(10px,3vw,40px); transform:translateX(-50%) rotate(-4deg); font-family:var(--f-hand); font-size:clamp(5rem,16vw,15rem); line-height:1; color:rgba(169,120,75,.09); pointer-events:none; white-space:nowrap; }
.stamps{ grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,44px); align-items:start; }
.stamp{ text-align:left; padding:clamp(28px,3vw,44px) clamp(24px,2.6vw,38px) clamp(30px,3vw,46px); border-radius:6px; border:2px solid var(--gold); background:var(--cream); position:relative;
  box-shadow:0 20px 50px -30px rgba(25,22,20,.45); transition:transform .7s var(--ease), box-shadow .7s var(--ease); }
.stamp::before{ content:""; position:absolute; inset:7px; border:1px dashed rgba(169,120,75,.55); border-radius:3px; pointer-events:none; }
.stamp:nth-child(1){ transform:rotate(-2.4deg); }
.stamp:nth-child(2){ transform:rotate(1.6deg) translateY(clamp(10px,2.4vw,34px)); }
.stamp:nth-child(3){ transform:rotate(-1.2deg); }
.stamp.in:hover{ transform:rotate(0) translateY(-6px) !important; box-shadow:0 34px 60px -30px rgba(25,22,20,.55); }
.stamp .seal{ display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:var(--gold); color:#fff; margin-bottom:1.1em; box-shadow:0 0 0 6px var(--cream), 0 0 0 7px rgba(169,120,75,.5); }
.stamp .seal svg{ width:30px; height:30px; }
.stamp h3{ font-size:clamp(1.3rem,1.9vw,1.7rem); line-height:1.12; margin-bottom:.5em; hyphens:manual; }
.stamp p{ font-size:.98rem; color:var(--ink-soft); margin:0; }
.stamp .ico{ display:none; }
.is-dark .stamp{ background:var(--ink-2); } .is-dark .stamp .seal{ box-shadow:0 0 0 6px var(--ink-2), 0 0 0 7px rgba(169,120,75,.5); }
.is-dark .stamp h3{ color:var(--cream); } .is-dark .stamp p{ color:rgba(233,225,215,.72); }
@media(max-width:860px){ .stamps{ grid-template-columns:1fr; max-width:560px; margin:0 auto; } .stamp:nth-child(2){ transform:rotate(1.6deg); } }

/* Rezensionswand */
.rw-head{ display:grid; grid-template-columns:1.1fr .9fr; gap:20px clamp(40px,6vw,110px); align-items:end; margin-bottom:clamp(30px,4vw,56px); }
.rw-head h2{ margin:0; }
.rw-head .lead{ margin:0; }
@media(max-width:800px){ .rw-head{ grid-template-columns:1fr; } }
.rwall{ columns:3; column-gap:clamp(16px,1.8vw,26px); }
@media(max-width:1100px){ .rwall{ columns:2; } }
@media(max-width:640px){ .rwall{ columns:1; } }
.rw{ break-inside:avoid; background:var(--cream); border:1px solid rgba(25,22,20,.08); border-radius:4px; padding:clamp(20px,2vw,30px); margin:0 0 clamp(16px,1.8vw,26px); position:relative; }
.rw-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.9em; }
.rw-stars{ display:inline-flex; gap:2px; color:var(--gold); } .rw-stars svg{ width:14px; height:14px; }
.rw-src{ font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(25,22,20,.5); }
.rw p{ margin:0 0 1em; font-size:.96rem; line-height:1.6; color:var(--ink); }
.rw.long p{ display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; overflow:hidden; }
.rw.long.open p{ display:block; }
.rw-more{ background:none; border:0; padding:0; margin:-.2em 0 1em; font:inherit; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); cursor:pointer; border-bottom:1px solid currentColor; }
.rw b{ display:block; font-family:var(--f-hand); font-weight:500; font-size:1.3rem; color:var(--gold); }

.rw-stars i{ display:inline-flex; gap:2px; color:rgba(25,22,20,.18); }
.rw-only{ margin:clamp(18px,2.4vw,32px) 0 0; font-size:.92rem; color:rgba(25,22,20,.66); display:flex; flex-wrap:wrap; align-items:center; gap:.5em; }

.rw.rw-hid{ display:none; }
.reviewsec.open .rw.rw-hid{ display:block; }
.rw-all{ display:flex; justify-content:center; margin-top:clamp(20px,3vw,40px); }

/* Zitat und Kapitelkopf auf derselben linken Kante wie der restliche Inhalt */
.sc-quote.low{ padding-left:max(var(--gut), calc((100vw - 1560px) / 2)); padding-right:max(var(--gut), calc((100vw - 1560px) / 2)); }
@media(min-width:1800px){
  .sc-quote.low{ padding-left:max(var(--gut), calc((100vw - 1760px) / 2)); padding-right:max(var(--gut), calc((100vw - 1760px) / 2)); }
}

/* Haltungskapitel: größer und besser lesbar */
.story-step .no{ font-size:.74rem; letter-spacing:.32em; margin-bottom:1.2em; color:rgba(255,255,255,.62); }
.story-step h3{ font-size:clamp(2.1rem,5.2vw,4.6rem); line-height:1.02; letter-spacing:-.025em; }
.story-step p{ font-size:clamp(1.1rem,1.6vw,1.5rem); line-height:1.5; max-width:34ch; color:rgba(255,255,255,.88); }
.story-step .aside{ font-size:clamp(1.6rem,2.2vw,2.2rem); margin-top:.9em; line-height:1.25; display:block; max-width:22ch; }
@media(max-width:760px){ .story-step p{ font-size:clamp(1.02rem,3.8vw,1.2rem); max-width:30ch; } }

/* Karussell beginnt exakt an der Inhaltskante, wie die Überschrift darüber */
.hs-viewport{ padding-inline:max(var(--gut), calc((100% - 1560px) / 2)); }
@media(min-width:1800px){ .hs-viewport{ padding-inline:max(var(--gut), calc((100% - 1760px) / 2)); } }

.flegal{ display:flex; gap:clamp(14px,2vw,28px); flex-wrap:wrap; }

/* Foto-Jagd: klickbares Abzeichen mit Erklärung */
#hunt{ cursor:pointer; transition:transform .45s var(--ease), background .45s var(--ease); }
#hunt:hover{ transform:translateY(-3px); background:rgba(25,22,20,.98); }
#hunt.pulse{ animation:huntpulse .9s var(--ease); }
@keyframes huntpulse{ 0%{transform:scale(1)} 35%{transform:scale(1.14)} 100%{transform:scale(1)} }
#huntpop{ position:fixed; right:16px; bottom:64px; z-index:8200; width:min(320px, calc(100vw - 32px));
  background:var(--cream); color:var(--ink); border-radius:6px; padding:22px 22px 20px; display:none;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.65); border:1px solid rgba(169,120,75,.35); }
#huntpop.show{ display:block; animation:huntin .5s var(--ease); }
@keyframes huntin{ from{ opacity:0; transform:translateY(14px) } }
#huntpop h5{ font-family:var(--f-head); font-weight:500; font-size:1.18rem; line-height:1.15; margin:0 0 .5em; color:var(--ink); }
#huntpop p{ margin:0; font-size:.92rem; line-height:1.55; color:var(--ink-soft); }
#huntpop b{ color:var(--gold); }
#huntpop .hp-x{ position:absolute; top:8px; right:10px; background:none; border:0; font-size:1.5rem; line-height:1;
  color:rgba(25,22,20,.4); cursor:pointer; padding:4px 6px; }
#huntpop .hp-x:hover{ color:var(--ink); }
#huntpop .hp-more{ margin-top:1.1em; background:none; border:0; padding:0; font:inherit; font-size:.76rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold); cursor:pointer; border-bottom:1px solid currentColor; }
@media(max-width:760px){ #huntpop{ bottom:128px; } }
footer.site{ padding-top:clamp(36px,4vw,62px); padding-bottom:78px; }
@media(max-width:760px){ footer.site{ padding-bottom:128px } }

/* Hero: Begrüßung und Untertitel größer, Notiz zu den Kennzahlen */
.hero .lead{ font-size:clamp(1.15rem,1.9vw,1.68rem); line-height:1.4; color:rgba(255,255,255,.92); max-width:min(640px,94%); }
.scroll-cue{ font-size:.82rem; letter-spacing:.16em; text-transform:none; font-family:var(--f-head); gap:14px; }
.scroll-cue span{ color:rgba(255,255,255,.92); }
.hero-note{ margin:1.1em 0 0; font-family:var(--f-hand); font-size:clamp(1.25rem,1.7vw,1.6rem); line-height:1.25;
  color:var(--gold-lt); max-width:26ch; transform:rotate(-1.2deg); }
@media(max-width:900px){ .hero-note{ max-width:34ch; } }
@media(max-width:760px){
  .hero-in{ padding-bottom:clamp(74px,14vh,120px); }
  .hero-meta{ gap:18px 26px; }
  .hero-meta div{ font-size:.6rem; letter-spacing:.14em; }
  .hero-meta b{ font-size:1.35rem; }
  .hero-note{ font-size:1.08rem; margin-top:.8em; max-width:30ch; }
  .scroll-cue{ display:none; }
}

/* Hero: enger zwischen Überschrift und Untertitel, alles etwas größer */
.hero h1{ margin-bottom:.16em; }
.hero-row{ align-items:flex-start; gap:clamp(24px,3vw,60px); }
.hero-row > div:first-child{ flex:1 1 440px; }
.hero-row > div:last-child{ flex:0 1 auto; align-self:flex-end; }
.hero .lead{ font-size:clamp(1.3rem,2.3vw,2.05rem); line-height:1.32; margin-top:0; max-width:min(680px,94%); }
.hero-actions{ margin-top:1.5em; }
.scroll-cue{ font-size:.98rem; letter-spacing:.1em; }
.scroll-cue i{ height:38px; }
@media(max-width:900px){ .hero-row > div:last-child{ align-self:flex-start; } }
@media(max-width:760px){ .hero .lead{ font-size:clamp(1.15rem,4.6vw,1.45rem); } }

/* Hero: Text bleibt auf hellen Bildern lesbar */
.hero-bg::after{ background:
  linear-gradient(180deg,rgba(20,17,15,.62) 0%,rgba(20,17,15,.24) 28%,rgba(20,17,15,.34) 52%,rgba(20,17,15,.92) 100%),
  linear-gradient(100deg,rgba(20,17,15,.72) 0%,rgba(20,17,15,.46) 38%,rgba(20,17,15,.06) 68%,rgba(20,17,15,0) 100%) !important; }
.hero h1{ text-shadow:0 2px 34px rgba(15,13,12,.55), 0 1px 4px rgba(15,13,12,.35); }
.hero h1 .acc{ color:#E4B98A; }
.hero .lead, .hero .mark, .hero-meta, .hero-note, .scroll-cue{ text-shadow:0 1px 20px rgba(15,13,12,.6); }
.hero h1 .acc::after{ background:#E4B98A; box-shadow:0 1px 14px rgba(15,13,12,.5); }

/* Footer in drei Spalten: Marke, Kacheln im Stempelstil, Kontakt */
.ftop{ display:grid; grid-template-columns:minmax(230px,.95fr) minmax(0,1.5fr) minmax(230px,.9fr);
  gap:clamp(26px,3.2vw,60px); align-items:start; margin-bottom:clamp(34px,4vw,58px); }
.fbrand .flogo{ display:inline-block; opacity:1 !important; margin-bottom:1.3em; }
.fbrand .flogo img{ width:auto; height:54px; }
.fbrand p{ font-size:.92rem; max-width:40ch; margin:0 0 1em; }
.fhand{ font-family:var(--f-hand); font-size:1.42rem; color:var(--gold-lt); transform:rotate(-1.4deg); }
.fmid .mark, .fside .mark{ display:block; margin-bottom:clamp(14px,1.6vw,22px); }

.ftiles{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.6vw,26px); }
.ftile{ display:block; opacity:1 !important; padding:9px 9px 0; border-radius:5px;
  background:rgba(233,225,215,.05); box-shadow:inset 0 0 0 1.5px rgba(169,120,75,.55);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), background .6s var(--ease); }
.ftile:nth-child(1){ transform:rotate(-1.6deg); }
.ftile:nth-child(2){ transform:rotate(1.2deg); }
.ftile:nth-child(3){ transform:rotate(1deg); }
.ftile:nth-child(4){ transform:rotate(-1.2deg); }
.ftile:hover{ transform:rotate(0) translateY(-5px); box-shadow:inset 0 0 0 1.5px var(--gold), 0 24px 44px -26px rgba(0,0,0,.8);
  background:rgba(169,120,75,.14); }
.ft-img{ display:block; position:relative; border-radius:3px; overflow:hidden; aspect-ratio:16/10; background:var(--ink-2); }
.ft-img img{ width:100%; height:100%; object-fit:cover; transform:scale(1.03); transition:transform 1.1s var(--ease); filter:saturate(.95); }
.ftile:hover .ft-img img{ transform:scale(1.1); filter:saturate(1.05); }
.ft-cap{ display:block; padding:.62em .2em .68em; text-align:center; font-family:var(--f-head);
  font-size:clamp(.95rem,1.1vw,1.15rem); color:var(--cream); letter-spacing:.01em; }
.ftile:hover .ft-cap{ color:var(--gold-lt); }

.fside{ display:grid; gap:8px; align-content:start; }
.fc{ display:flex; align-items:center; gap:.75em; padding:.62em .85em; border-radius:100px;
  box-shadow:inset 0 0 0 1px rgba(233,225,215,.16); font-size:.85rem; color:var(--cream); opacity:1 !important;
  transition:background .45s var(--ease), box-shadow .45s var(--ease); overflow-wrap:anywhere; }
.fc:hover{ background:rgba(169,120,75,.2); box-shadow:inset 0 0 0 1px var(--gold); }
.fc-ico{ flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--gold); color:#fff; }
.fc-ico svg{ width:14px; height:14px; }
.fc-go{ background:rgba(169,120,75,.14); }
.fstudio{ margin:14px 0 0; font-size:.82rem; line-height:1.6; color:rgba(233,225,215,.6); }
.fside .socials{ margin-top:10px; }
@media(max-width:1100px){ .ftop{ grid-template-columns:1fr 1fr; } .fside{ grid-column:1 / -1; max-width:420px; } }
@media(max-width:760px){ .ftop{ grid-template-columns:1fr; } .fbrand p{ max-width:none; } }
@media(max-width:420px){ .ftiles{ grid-template-columns:1fr; } }
.socials a{ width:36px; height:36px; }
.socials svg{ width:16px; height:16px; }

/* Kontaktseite: drei Wege, Studio-Daten */
.ways{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,26px); }
.way{ display:grid; gap:.3em; padding:clamp(26px,2.8vw,40px); border-radius:5px; background:var(--cream);
  box-shadow:inset 0 0 0 1px rgba(25,22,20,.1); position:relative; transition:transform .6s var(--ease), box-shadow .6s var(--ease); }
.way:hover{ transform:translateY(-6px); box-shadow:inset 0 0 0 1px var(--gold), 0 30px 54px -32px rgba(25,22,20,.6); }
.way-ico{ display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:var(--gold); color:#fff; margin-bottom:1em; }
.way-ico svg{ width:25px; height:25px; }
.way-t{ font-family:var(--f-head); font-size:clamp(1.25rem,1.7vw,1.6rem); color:var(--ink); line-height:1.15; }
.way-s{ font-size:.86rem; letter-spacing:.06em; color:var(--gold); overflow-wrap:anywhere; }
.way-x{ margin-top:.7em; font-size:.94rem; line-height:1.55; color:var(--ink-soft); }
.way-go{ margin-top:1.1em; color:var(--gold); } .way-go svg{ width:20px; height:20px; transition:transform .5s var(--ease); }
.way:hover .way-go svg{ transform:translateX(6px); }
@media(max-width:920px){ .ways{ grid-template-columns:1fr; } }

.sd-rows{ margin-top:1.8em; display:grid; gap:0; }
.sd-row{ display:flex; justify-content:space-between; align-items:baseline; gap:1.5em; padding:.85em 0;
  border-bottom:1px solid rgba(25,22,20,.12); }
.sd-row:first-child{ border-top:1px solid rgba(25,22,20,.12); }
.sd-row span{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); }
.sd-row b{ font-family:var(--f-head); font-weight:450; font-size:clamp(1rem,1.2vw,1.18rem); color:var(--ink); text-align:right; }

/* Footer-Kacheln: flacher, alle vier nebeneinander */
.ftop{ grid-template-columns:minmax(200px,.8fr) minmax(0,1.9fr) minmax(215px,.8fr); }
.ftiles{ grid-template-columns:repeat(4,1fr); gap:clamp(10px,1vw,16px); }
.ftile{ padding:6px 6px 0; }
.ft-img{ aspect-ratio:4/3; }
.ft-cap{ padding:.5em .2em .55em; font-size:clamp(.82rem,.92vw,.98rem); }
@media(max-width:1200px){ .ftop{ grid-template-columns:1fr 1fr; } .fside{ grid-column:1 / -1; max-width:420px; } }
@media(max-width:760px){ .ftop{ grid-template-columns:1fr; } }
@media(max-width:620px){ .ftiles{ grid-template-columns:1fr 1fr; } }
@media(max-width:420px){ .ftiles{ grid-template-columns:1fr 1fr; } }

/* =========================================================
   V8.9  Eingebettetes Anfrageformular lesbar machen
   ========================================================= */
.formwrap, .pk-panel{ color:var(--ink); font-family:var(--f-body); }

/* Alles im Widget bekommt eine lesbare Grundfarbe */
.js-hm-form,
.js-hm-form *:not(a):not(svg):not(path):not(button):not(button *):not([type="submit"]){ color:var(--ink) !important; }

/* Beschriftungen und Hilfstexte */
.js-hm-form label{ color:var(--ink) !important; font-family:var(--f-body); }
.js-hm-form p,
.js-hm-form small,
.js-hm-form span{ color:var(--ink-soft) !important; }

/* Ja/Nein und die Datenschutz-Zeile stehen direkt neben dem Feld */
.js-hm-form input[type="radio"] + *,
.js-hm-form input[type="checkbox"] + *,
.js-hm-form input[type="radio"] ~ label,
.js-hm-form input[type="checkbox"] ~ label{ color:var(--ink) !important; opacity:1 !important; }
.js-hm-form input[type="radio"],
.js-hm-form input[type="checkbox"]{ accent-color:var(--gold); width:17px; height:17px; opacity:1 !important; }

/* Eingabefelder */
.js-hm-form input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]),
.js-hm-form select,
.js-hm-form textarea{
  font-family:var(--f-body) !important; font-size:1rem !important; color:var(--ink) !important;
  background:var(--paper) !important; border:1px solid rgba(25,22,20,.16) !important; border-radius:3px !important; }
.js-hm-form input:focus,
.js-hm-form select:focus,
.js-hm-form textarea:focus{ outline:0 !important; border-color:var(--gold) !important;
  box-shadow:0 0 0 3px rgba(169,120,75,.16) !important; }
.js-hm-form ::placeholder{ color:rgba(25,22,20,.42) !important; opacity:1; }

/* Links im Formular in unserem Gold */
.js-hm-form a{ color:var(--gold) !important; text-decoration:underline; text-underline-offset:.2em; }
.js-hm-form a:hover{ color:var(--ink) !important; }

/* Absende-Knopf wie unsere Buttons */
.js-hm-form button,
.js-hm-form input[type="submit"],
.js-hm-form input[type="button"]{
  background:var(--gold) !important; color:#fff !important; border:0 !important; border-radius:100px !important;
  padding:1.05em 2.2em !important; font-family:var(--f-body) !important; font-size:.78rem !important;
  letter-spacing:.2em !important; text-transform:uppercase !important; cursor:pointer;
  transition:background .4s var(--ease), transform .4s var(--ease) !important; }
.js-hm-form button:hover,
.js-hm-form input[type="submit"]:hover{ background:var(--ink) !important; transform:translateY(-2px); }

/* Pflichtfeld-Sternchen und Fehlermeldungen */
.js-hm-form [class*="error"],
.js-hm-form [class*="invalid"]{ color:#B4423A !important; }
/* Text im Absende-Knopf bleibt weiß, auch wenn er in einem span steckt */
.js-hm-form button *,
.js-hm-form input[type="submit"] *{ color:#fff !important; }
.js-hm-form{ overflow-wrap:anywhere; }

/* =========================================================
   V9  Kontaktwähler, Bewertungsseite
   ========================================================= */

/* Kontaktseite: links Text und Gesichter, rechts die Auswahl */
.pk-wrap{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(32px,5vw,86px); align-items:start; }
.pk-left h2{ margin-bottom:.35em; }
.pk-left .checks{ margin:2em 0; }
.pk-people{ display:flex; gap:clamp(14px,1.6vw,22px); margin:2.2em 0 1.4em; }
.pp{ margin:0; text-align:left; }
.pp img{ width:clamp(74px,7vw,96px); height:clamp(74px,7vw,96px); object-fit:cover; border-radius:50%;
  box-shadow:0 0 0 2px var(--gold), 0 0 0 5px var(--ink); }
.pp figcaption{ margin-top:.7em; }
.pp b{ display:block; font-family:var(--f-head); font-weight:450; font-size:1.02rem; color:var(--cream); }
.pp span{ font-size:.74rem; color:rgba(233,225,215,.6); }
.pk-note{ font-family:var(--f-hand); font-size:1.35rem; color:var(--gold-lt); max-width:26ch; transform:rotate(-1deg); }

.pk-right{ background:var(--cream); border-radius:8px; padding:clamp(24px,2.8vw,40px); box-shadow:var(--sh-m); }
.pk-q{ display:block; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:1.2em; }
.pk-tabs{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,.9vw,14px); margin-bottom:clamp(22px,2.4vw,34px); }
.pk-tab{ display:grid; justify-items:center; gap:.3em; padding:clamp(14px,1.5vw,20px) .5em; border:0; cursor:pointer;
  background:var(--paper); border-radius:5px; box-shadow:inset 0 0 0 1px rgba(25,22,20,.1); font:inherit;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease); }
.pk-tab:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 1px var(--gold); }
.pk-tab.on{ background:var(--gold); box-shadow:inset 0 0 0 1px var(--gold); }
.pk-ico{ display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--gold); color:#fff;
  margin-bottom:.25em; transition:background .4s var(--ease); }
.pk-ico svg{ width:19px; height:19px; }
.pk-tab.on .pk-ico{ background:#fff; color:var(--gold); }
.pk-t{ font-family:var(--f-head); font-size:.98rem; color:var(--ink); line-height:1.1; }
.pk-s{ font-size:.68rem; letter-spacing:.08em; color:var(--ink-soft); }
.pk-tab.on .pk-t, .pk-tab.on .pk-s{ color:#fff; }

.pk-panels{ position:relative; }
.pk-panel{ position:absolute; left:-200vw; top:0; width:100%; visibility:hidden; pointer-events:none; }
.pk-panel.on{ position:static; left:auto; visibility:visible; pointer-events:auto; animation:pkin .5s var(--ease); }
@keyframes pkin{ from{ opacity:0; transform:translateY(12px) } }
.pk-panel h3{ font-size:clamp(1.3rem,2vw,1.75rem); color:var(--ink); margin-bottom:.45em; line-height:1.12; }
.pk-panel > p{ color:var(--ink-soft); font-size:1rem; margin-bottom:1.4em; }
.pk-cta{ display:inline-flex !important; }
.pk-small{ margin-top:1.3em; font-size:.8rem; color:var(--ink-soft); }
.pk-small a{ color:var(--gold); }
@media(max-width:1000px){ .pk-wrap{ grid-template-columns:1fr; } }
@media(max-width:520px){
  .pk-tabs{ grid-template-columns:1fr 1fr; }
  .pk-tab{ grid-template-columns:auto 1fr; justify-items:start; align-items:center; gap:.2em .7em; text-align:left; }
  .pk-ico{ grid-row:span 2; margin:0; }
}

/* Rezensionen: Quelle, Link, leise Karten */
.rw-link{ display:inline-flex; align-items:center; gap:.45em; margin-top:.7em; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.rw-link svg{ width:14px; height:14px; transition:transform .4s var(--ease); }
.rw-link:hover svg{ transform:translateX(4px); }
.rw.quiet{ background:transparent; box-shadow:inset 0 0 0 1px rgba(25,22,20,.1); }
.rw-nowords{ color:rgba(25,22,20,.5) !important; font-style:italic; }
.rw-all{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }

/* Bewertungsseite mit Filter */
.rw-filter{ display:flex; align-items:center; gap:clamp(14px,2vw,28px); flex-wrap:wrap;
  margin-bottom:clamp(24px,3vw,44px); }
.rfs{ display:flex; gap:8px; flex-wrap:wrap; }
.rf{ padding:.6em 1.15em; border:0; border-radius:100px; background:transparent; cursor:pointer; font:inherit;
  font-size:.8rem; letter-spacing:.1em; color:var(--ink-soft); box-shadow:inset 0 0 0 1px rgba(25,22,20,.16);
  transition:background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease); }
.rf:hover{ box-shadow:inset 0 0 0 1px var(--gold); color:var(--ink); }
.rf.on{ background:var(--gold); color:#fff; box-shadow:inset 0 0 0 1px var(--gold); }
.rf-count{ font-size:.8rem; color:var(--ink-soft); margin-left:auto; }
.rwall[data-allopen] .rw.rw-hid{ display:block; }
.rw.rw-out{ display:none !important; }
/* Kontaktseite beginnt direkt unter dem Kopf, ohne Hero */
body:has(.pk-wrap) main > section:first-child{ padding-top:clamp(120px,14vh,190px); }

/* Vor der Auswahl steht nur ein kurzer Hinweis */
.pk-empty p{ margin:0; color:var(--ink-soft); font-size:1rem; max-width:44ch; }
.pk-empty{ padding:clamp(10px,1.4vw,18px) 0; border-top:1px dashed rgba(169,120,75,.4); }
[data-picker].picked .pk-empty{ display:none !important; }

/* Zurück zur Auswahl */
.pk-back{ display:inline-flex; align-items:center; gap:.55em; background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:1.4em; transition:color .4s var(--ease); }
.pk-back svg{ width:16px; height:16px; transform:rotate(180deg); transition:transform .4s var(--ease); }
.pk-back:hover{ color:var(--gold); }
.pk-back:hover svg{ transform:rotate(180deg) translateX(-4px); }

/* Gemeinsames Foto von Pascal und Maria */
.pk-people{ display:block; margin:2.2em 0 1.4em; }
.ppduo{ margin:0; }
.ppduo img{ width:100%; max-width:430px; aspect-ratio:16/10; object-fit:cover; border-radius:4px;
  box-shadow:0 22px 46px -26px rgba(0,0,0,.7); }
.ppduo figcaption{ margin-top:.9em; display:flex; align-items:baseline; gap:.6em; flex-wrap:wrap; }
.ppduo b{ font-family:var(--f-head); font-weight:450; font-size:1.12rem; color:var(--cream); }
.ppduo span{ font-size:.82rem; color:rgba(233,225,215,.62); }

/* =========================================================
   V9.2  Kontaktblock kompakter
   ========================================================= */
section:has(> .wide.pk-wrap){ padding-block:clamp(48px,6vw,92px); }
.pk-wrap{ grid-template-columns:.9fr 1.1fr; gap:clamp(28px,3.6vw,64px); align-items:start; }
.pk-left h2{ font-size:clamp(2rem,3.6vw,3.3rem); }
.pk-left .lead{ font-size:clamp(1rem,1.15vw,1.12rem); max-width:46ch; }
.pk-left .checks{ margin:1.5em 0; gap:.6em; }
.pk-left .checks li{ font-size:.96rem; }

/* Foto und handschriftliche Zeile nebeneinander */
.pk-people{ display:grid; grid-template-columns:auto 1fr; align-items:center;
  gap:clamp(16px,1.8vw,26px); margin:1.6em 0 0; }
.ppduo{ margin:0; }
.ppduo img{ width:clamp(150px,15vw,210px); max-width:none; aspect-ratio:1/1; }
.ppduo figcaption{ margin-top:.6em; display:block; }
.ppduo b{ font-size:.98rem; display:block; }
.ppduo span{ font-size:.76rem; line-height:1.35; display:block; max-width:22ch; }
.pk-note{ margin:0; font-size:1.18rem; line-height:1.4; max-width:24ch; align-self:center; }

/* Rechte Karte etwas ruhiger */
.pk-right{ padding:clamp(20px,2.2vw,32px); }
.pk-tabs{ margin-bottom:clamp(16px,1.8vw,24px); }
.pk-tab{ padding:clamp(11px,1.2vw,16px) .4em; }
.pk-ico{ width:34px; height:34px; } .pk-ico svg{ width:17px; height:17px; }
.pk-panel h3{ font-size:clamp(1.2rem,1.7vw,1.5rem); }
.pk-panel > p{ font-size:.96rem; margin-bottom:1.1em; }
.pk-back{ margin-bottom:1em; }
.pk-small{ margin-top:1em; }
@media(max-width:1000px){
  .pk-wrap{ grid-template-columns:1fr; }
  .pk-people{ max-width:520px; }
}
@media(max-width:560px){
  .pk-people{ grid-template-columns:1fr; }
  .pk-note{ max-width:none; }
}

/* Foto links, Namen und Notiz rechts daneben */
.pk-people{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:clamp(16px,1.8vw,26px); }
.ppimg{ width:clamp(140px,13vw,190px); aspect-ratio:1/1; object-fit:cover; border-radius:4px;
  box-shadow:0 20px 42px -26px rgba(0,0,0,.75); }
.pptxt{ display:grid; gap:.3em; }
.pptxt b{ font-family:var(--f-head); font-weight:450; font-size:1.05rem; color:var(--cream); }
.pptxt span{ font-size:.78rem; color:rgba(233,225,215,.6); line-height:1.4; }
.pptxt .pk-note{ margin-top:.7em; font-size:1.14rem; line-height:1.38; max-width:26ch; }
@media(max-width:560px){ .pk-people{ grid-template-columns:1fr; } .pptxt .pk-note{ max-width:none; } }

/* =========================================================
   V9.3  Kontaktwege im Kopf statt in einer eigenen Leiste
   ========================================================= */
.topbar{ display:none !important; }
.nav-quick{ display:flex; align-items:center; gap:8px; }
.nq{ position:relative; display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  color:currentColor; box-shadow:inset 0 0 0 1px currentColor; opacity:.62;
  transition:opacity .35s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease); }
.nq svg{ width:17px; height:17px; }
.nq:hover{ opacity:1; background:var(--gold); color:#fff; box-shadow:inset 0 0 0 1px var(--gold); transform:translateY(-2px); }
.nq::after{ content:attr(data-tip); position:absolute; top:calc(100% + 9px); left:50%; transform:translateX(-50%) translateY(-4px);
  background:var(--ink); color:var(--cream); font-size:.68rem; letter-spacing:.08em; padding:.5em .85em; border-radius:100px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease); }
.nq:hover::after{ opacity:1; transform:translateX(-50%) translateY(0); }
.nav-cta{ gap:clamp(10px,1.2vw,18px); }

/* Kontaktwege im mobilen Menü */
.menu-contact{ display:none; }
@media(max-width:1060px){
  .nav-quick{ display:none; }
  .menu-contact{ display:grid; gap:.5em; margin-top:clamp(18px,4vh,40px);
    padding-top:clamp(16px,3vh,28px); border-top:1px solid rgba(233,225,215,.2); }
  .menu-contact a{ font-family:var(--f-body) !important; font-size:.95rem !important; letter-spacing:.06em !important;
    text-transform:none !important; color:rgba(233,225,215,.8); }
  .menu-contact a:hover{ color:var(--gold-lt); }
}
@media(max-width:1240px) and (min-width:1061px){
  .nq:nth-child(3){ display:none; }
}

/* Bevorzugte Wege hervorheben */
.pk-tab{ position:relative; }
.pk-tab.fav{ box-shadow:inset 0 0 0 1.5px rgba(169,120,75,.55); background:rgba(169,120,75,.07); }
.pk-badge{ position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:#fff; font-size:.56rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.35em .8em; border-radius:100px; white-space:nowrap; }
.pk-tab.on .pk-badge{ background:var(--ink); }
.pk-tabs{ padding-top:10px; }

/* Kein heller Streifen mehr, wenn man über das Seitenende hinaus scrollt */
html{ background:var(--ink); overscroll-behavior-y:none; }
body{ overscroll-behavior-y:none; }

/* Ausgewähltes Feld schlägt die Hervorhebung der beliebten Wege */
.pk-tab.fav.on, .pk-tab.on{ background:var(--gold) !important; box-shadow:inset 0 0 0 1.5px var(--gold) !important; }
.pk-tab.fav.on .pk-t, .pk-tab.on .pk-t{ color:#fff !important; }
.pk-tab.fav.on .pk-s, .pk-tab.on .pk-s{ color:rgba(255,255,255,.82) !important; }
.pk-tab.fav.on .pk-ico, .pk-tab.on .pk-ico{ background:#fff !important; color:var(--gold) !important; }
.pk-tab.fav.on .pk-badge, .pk-tab.on .pk-badge{ background:var(--ink); color:var(--cream); }
.pk-tab.fav:not(.on) .pk-t{ color:var(--ink); }
.pk-tab.fav:not(.on) .pk-s{ color:var(--ink-soft); }

/* =========================================================
   V9.4  Unterseiten optisch angleichen
   Listenabschnitte werden Karten, Überschriften kompakter
   ========================================================= */

/* Abschnittsköpfe brauchen weniger Höhe */
.pad > .wrap > .narrow, .pad > .wide > .narrow{ margin-bottom:clamp(26px,3.4vw,48px) !important; }
.pad > .wrap > .narrow h2, .pad > .wide > .narrow h2{ font-size:clamp(2rem,4.2vw,3.5rem); }

/* Gemeinsame Kartenoptik für Ablauf, Eckdaten und Versprechen */
.steps, .facts, .proms{ align-items:stretch; }
.step, .fact, .prom{
  padding:clamp(24px,2.6vw,34px) clamp(20px,2.2vw,30px) clamp(26px,2.8vw,36px);
  border-top:0 !important; border-radius:5px; background:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(25,22,20,.09); position:relative; overflow:hidden;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), background .6s var(--ease); }
.step::before, .fact::before, .prom::before{
  content:""; position:absolute; top:0; left:0; height:2px; width:38px; background:var(--gold);
  transition:width .7s var(--ease); }
.step:hover, .fact:hover, .prom:hover{ transform:translateY(-5px);
  box-shadow:inset 0 0 0 1px rgba(169,120,75,.55), 0 26px 46px -32px rgba(25,22,20,.6); }
.step:hover::before, .fact:hover::before, .prom:hover::before{ width:100%; }
.is-dark .step, .is-dark .fact, .is-dark .prom{ background:rgba(233,225,215,.045);
  box-shadow:inset 0 0 0 1px rgba(233,225,215,.13); }
.is-dark .step:hover, .is-dark .fact:hover, .is-dark .prom:hover{
  background:rgba(169,120,75,.13); box-shadow:inset 0 0 0 1px rgba(169,120,75,.6), 0 26px 46px -30px rgba(0,0,0,.7); }

/* Ablauf: große Umrissziffern wie auf der Startseite */
.step .n{ font-family:var(--serif); font-size:clamp(2.2rem,3.4vw,3.1rem); line-height:1; letter-spacing:-.02em;
  color:transparent; -webkit-text-stroke:1px rgba(169,120,75,.7); margin-bottom:.3em !important;
  transition:color .6s var(--ease); }
.step:hover .n{ color:rgba(169,120,75,.28); }
.step h3{ font-size:clamp(1.12rem,1.5vw,1.35rem); line-height:1.16; hyphens:manual; }

/* Eckdaten und Versprechen: Titel etwas kräftiger */
.fact .ft, .prom h3{ display:block; font-family:var(--f-head); font-weight:450;
  font-size:clamp(1.12rem,1.5vw,1.38rem); line-height:1.15; margin-bottom:.5em; color:var(--ink); }
.is-dark .fact .ft, .is-dark .prom h3{ color:var(--cream); }
.prom h3{ color:var(--cream); }
.fact p, .prom p{ font-size:.95rem; margin:0; }

/* Fragen: ruhiger Kasten statt loser Zeilen */
.faq details{ background:var(--paper); border-radius:5px; box-shadow:inset 0 0 0 1px rgba(25,22,20,.09);
  margin-bottom:10px; padding:0 clamp(16px,1.8vw,26px); transition:box-shadow .5s var(--ease), background .5s var(--ease); }
.faq details:hover, .faq details[open]{ box-shadow:inset 0 0 0 1px rgba(169,120,75,.5); background:var(--cream); }
.faq summary{ padding:1.15em 0; }
.faq .a{ padding-bottom:1.2em; }

/* Wechsel der Flächen: nie zweimal derselbe Ton direkt hintereinander */
section.bg-paper + .hscroll, .hscroll + section.bg-paper{ background:var(--cream) !important; }
.showcase + section.is-dark, section.is-dark + .showcase,
.story + section.is-dark, section.is-dark + section.is-dark{ position:relative; }
.showcase + section.is-dark::before, .story + section.is-dark::before,
section.is-dark + section.is-dark::before{
  content:""; position:absolute; top:0; left:var(--gut); right:var(--gut); height:1px;
  background:linear-gradient(90deg,rgba(169,120,75,.55),rgba(169,120,75,.08) 60%,transparent); }


/* Wechselnde Helligkeit der hellen Abschnitte, im Generator vergeben */
main > section.tone-a{ background:var(--cream); }
main > section.tone-b{ background:var(--paper); }
/* Zweispaltige Abschnitte: Überschriften etwas ruhiger */
.duo-wrap h2{ font-size:clamp(1.9rem,3.4vw,3rem); line-height:1.05; }
.duo-wrap .lead{ font-size:clamp(1rem,1.15vw,1.12rem); }

/* =========================================================
   V9.5  Schwebende Bilder, Bildteppich, Was du bekommst
   ========================================================= */

/* (Der alte Aufbau mit frei positionierten Bildern ist ab V9.8 ersetzt.) */

/* Bildteppich */
.mo-head{ display:grid; grid-template-columns:1.1fr .9fr; gap:20px clamp(40px,6vw,100px); align-items:end;
  margin-bottom:clamp(24px,3vw,44px); }
.mo-head h2{ margin:0; }
.mo-note{ margin:0; font-family:var(--f-hand); font-size:clamp(1.25rem,1.7vw,1.6rem); color:var(--gold);
  max-width:30ch; transform:rotate(-1deg); }
@media(max-width:820px){ .mo-head{ grid-template-columns:1fr; } }
.mo-grid{ columns:4; column-gap:clamp(8px,1vw,16px); }
.mo-i{ margin:0 0 clamp(8px,1vw,16px); overflow:hidden; border-radius:3px; background:var(--sand-deep);
  position:relative; break-inside:avoid; display:block; }
.mo-i img{ width:100%; height:auto; display:block; transform:scale(1.02);
  transition:transform 1.2s var(--ease), filter .8s var(--ease); }
.mo-i::after{ content:""; position:absolute; inset:0; background:rgba(25,22,20,.1); opacity:0;
  transition:opacity .6s var(--ease); }
.mo-i:hover img{ transform:scale(1.09); }
.mo-i:hover::after{ opacity:1; }
@media(max-width:1100px){ .mo-grid{ columns:3; } }
@media(max-width:760px){ .mo-grid{ columns:2; } }

/* Was du bekommst */
.gwsec{ position:relative; isolation:isolate; overflow:hidden; }
.gw-bg{ position:absolute; inset:-12% 0; z-index:-2; }
.gw-bg img{ width:100%; height:100%; object-fit:cover; opacity:.15; }
/* Oben und unten laeuft das Foto ganz in die Flaeche aus, damit der Uebergang
   zur Nachbarsektion weich bleibt und die Karten lesbar sind. */
.gwsec::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,var(--ink) 0%, var(--ink) 12%, rgba(20,17,15,.9) 40%,
                             rgba(20,17,15,.9) 60%, var(--ink) 88%, var(--ink) 100%); }
.gw-head{ display:grid; grid-template-columns:1.05fr .95fr; gap:20px clamp(40px,6vw,100px); align-items:end;
  margin-bottom:clamp(30px,4vw,56px); }
.gw-head h2{ margin:0; }
.gw-head .lead{ margin:0; }
.gw-head .hand{ margin:.7em 0 0; font-size:1.4rem; color:var(--gold-lt); }
@media(max-width:860px){ .gw-head{ grid-template-columns:1fr; } }
.gw-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,26px); }
.gw{ padding:clamp(24px,2.6vw,34px); border-radius:5px; background:rgba(233,225,215,.05);
  box-shadow:inset 0 0 0 1px rgba(233,225,215,.13);
  transition:transform .6s var(--ease), background .6s var(--ease), box-shadow .6s var(--ease); }
.gw:hover{ transform:translateY(-5px); background:rgba(169,120,75,.14);
  box-shadow:inset 0 0 0 1px rgba(169,120,75,.6), 0 26px 46px -30px rgba(0,0,0,.7); }
.gw-ico{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:var(--gold); color:#fff; margin-bottom:1em; }
.gw-ico svg{ width:22px; height:22px; }
.gw h3{ font-size:clamp(1.12rem,1.5vw,1.36rem); line-height:1.15; color:var(--cream); margin-bottom:.5em; }
.gw p{ margin:0; font-size:.95rem; color:rgba(233,225,215,.72); }
@media(max-width:980px){ .gw-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .gw-grid{ grid-template-columns:1fr; } }

/* Was dich erwartet mit Bild im Hintergrund */
.promsec{ position:relative; isolation:isolate; overflow:hidden; }
.prom-bg{ position:absolute; inset:-12% 0; z-index:-2; }
.prom-bg img{ width:100%; height:100%; object-fit:cover; opacity:.15; }
.promsec::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,var(--ink) 0%, var(--ink) 12%, rgba(20,17,15,.88) 42%,
                             rgba(20,17,15,.88) 62%, var(--ink) 88%, var(--ink) 100%); }
.prom-n{ display:block; font-family:var(--serif); font-size:clamp(1.9rem,2.6vw,2.6rem); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(169,120,75,.7); margin-bottom:.35em;
  transition:color .6s var(--ease); }
.prom:hover .prom-n{ color:rgba(169,120,75,.3); }

/* Ablauf mit Bild daneben */
.st-split{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4vw,70px); align-items:start; }
.st-img{ margin:0; border-radius:4px; overflow:hidden; aspect-ratio:3/4; background:var(--sand-deep);
  position:sticky; top:110px; }
.st-img img{ width:100%; height:100%; object-fit:cover; }
.steps-col{ grid-template-columns:1fr 1fr; }
@media(max-width:900px){ .st-split{ grid-template-columns:1fr; } .st-img{ position:static; aspect-ratio:16/10; }
  .steps-col{ grid-template-columns:1fr; } }

/* ============================================================
   V9.6  Logo optisch linksbuendig
   Die Logo Grafik hat rundherum transparenten Rand (links rund
   5 Prozent der Breite). Dadurch beginnt die sichtbare Schrift
   weiter rechts als der uebrige Inhalt. Wir ziehen die Grafik
   um genau diesen Rand nach links, damit das Logo optisch exakt
   dort abschliesst, wo auch Text und Bilder beginnen.
   ============================================================ */
.logo img{ margin-left:-5%; }
.fbrand .flogo img{ margin-left:-5%; }
.pl-logo img{ display:block; margin-inline:auto; }

/* ============================================================
   V9.7  Kopfleiste genau so breit wie der Inhalt
   Ab 1800 Pixel Fensterbreite darf der Inhalt (.wide) 1760 Pixel
   breit werden, die Kopfleiste blieb aber bei 1560. Dadurch stand
   das Logo auf grossen Bildschirmen rund 100 Pixel weiter innen
   als alles darunter. Die Kopfleiste folgt jetzt derselben Breite.
   ============================================================ */
@media(min-width:1800px){
  .nav{ width:min(1760px, 100% - var(--gut)*2); }
}

/* ============================================================
   V9.8  Schwebende Bilder, Bildteppich mit Knopf, Leuchtkasten
   ============================================================ */

/* --- Text mit Bildern links und rechts daneben -------------- */
.floatsec{ overflow:hidden; }
.fl-inner{ display:grid; grid-template-columns:1fr minmax(0,540px) 1fr;
  gap:clamp(14px,2vw,34px); align-items:center; }
/* Je Seite zwei schmale Spalten, damit die Bilder nebeneinander stehen
   und der Abschnitt nicht in die Hoehe waechst. */
.fl-col{ columns:2; column-gap:clamp(8px,.9vw,14px); }
.fl-col > .flimg{ break-inside:avoid; -webkit-column-break-inside:avoid; }
.fl-text{ width:auto; margin:0; max-width:none; padding-inline:clamp(4px,1.4vw,26px); }
.fl-text .big{ font-size:clamp(1.35rem,2.2vw,2rem); }

/* Jedes Bild behaelt sein eigenes Format, nichts wird beschnitten. */
.flimg{ position:relative; width:100%; margin:0 0 clamp(8px,.9vw,14px); cursor:pointer; display:block; }
.flimg .flin{ display:block; border-radius:4px; overflow:hidden;
  box-shadow:0 18px 44px rgba(25,22,20,.16);
  transform:rotate(var(--r,0deg));
  animation:schweben 9s ease-in-out infinite; animation-delay:var(--d,0s);
  transition:box-shadow .5s var(--ease); }
.flimg img{ width:100%; height:auto; display:block; transition:transform .7s var(--ease); }
.flimg:hover .flin{ box-shadow:0 26px 60px rgba(25,22,20,.26); }
.flimg:hover img{ transform:scale(1.045); }
.flimg:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; }
@keyframes schweben{ 0%,100%{ transform:rotate(var(--r,0deg)) translateY(0) }
  50%{ transform:rotate(var(--r,0deg)) translateY(-10px) } }
@media(prefers-reduced-motion:reduce){ .flimg .flin{ animation:none; } }

@media(max-width:1250px){ .fl-inner{ grid-template-columns:1fr minmax(0,460px) 1fr; } }
@media(max-width:1000px){
  .fl-inner{ grid-template-columns:1fr; gap:clamp(20px,4vw,38px); }
  .fl-text{ order:-1; padding:0; }
  .fl-col{ columns:3; }
  .fl-r{ margin-top:0; }
}
@media(max-width:560px){ .fl-col{ columns:2; } }

/* --- Bildteppich: Rest steckt im Leuchtkasten --------------- */
.mo-i{ cursor:pointer; }
.mo-hidden{ display:none !important; }
.mo-more{ margin-top:clamp(22px,3vw,40px); display:flex; align-items:center;
  justify-content:center; gap:18px; flex-wrap:wrap; }
.mo-count{ font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); opacity:.6; }

/* --- Leuchtkasten mit Streifen ------------------------------ */
#lightbox{ flex-direction:row; padding-bottom:clamp(86px,11vh,124px); }
#lightbox img{ max-height:68vh; }
.lb-strip{ position:absolute; left:0; right:0; bottom:0; display:flex; gap:8px;
  padding:14px clamp(12px,4vw,60px); overflow-x:auto; overflow-y:hidden;
  justify-content:flex-start; scrollbar-width:thin;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent); }
.lb-strip::-webkit-scrollbar{ height:6px; }
.lb-strip::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.22); border-radius:3px; }
.lb-t{ flex:none; width:clamp(48px,5vw,72px); height:clamp(48px,5vw,72px);
  padding:0 !important; border-radius:3px; overflow:hidden; opacity:.42;
  transition:opacity .3s, transform .3s var(--ease); background:rgba(255,255,255,.06) !important; }
.lb-t img{ width:100%; height:100%; object-fit:cover; max-width:none !important; max-height:none !important;
  border-radius:0; display:block; }
.lb-t:hover{ opacity:.8; }
.lb-t.on{ opacity:1; transform:translateY(-4px); box-shadow:0 0 0 2px var(--gold); }
@media(max-width:700px){ #lightbox figcaption{ font-size:1.1rem; margin-top:8px } }

/* ============================================================
   V9.9  Weg statt Kacheln, Symbole, Fragen mit Begleitspalte
   ============================================================ */

/* --- Der Ablauf als gezeichneter Weg ------------------------ */
.wg{ list-style:none; margin:0; padding:0; position:relative; }
.wg li{ position:relative; }
.wg-p{ position:relative; z-index:1; display:grid; place-items:center; flex:none;
  width:clamp(52px,4.4vw,66px); height:clamp(52px,4.4vw,66px); border-radius:50%;
  background:var(--cream); border:1px solid rgba(169,120,75,.42);
  transition:border-color .5s var(--ease), background .5s var(--ease), transform .5s var(--ease); }
.is-dark .wg-p{ background:var(--ink); border-color:rgba(169,120,75,.5); }
.wg-n{ font-family:var(--f-head); font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--gold); line-height:1; }
.wg li:hover .wg-p{ border-color:var(--gold); transform:scale(1.07); }
.wg li:hover .wg-n{ color:var(--gold); }
.wg-t h3{ font-size:clamp(1.1rem,1.5vw,1.36rem); margin:0 0 .45em; hyphens:manual; }
.wg-t p{ margin:0; color:var(--ink-soft); font-size:.97rem; }
.is-dark .wg-t p{ color:rgba(233,225,215,.72); }
.wg-flag{ width:22px; height:22px; color:var(--gold); display:block; }
.wg-flag svg{ width:100%; height:100%; }
.wg-ziel .wg-p{ background:var(--gold); border-color:var(--gold); }
.wg-ziel .wg-flag{ color:#fff; }
.wg-ziel .wg-t h3{ color:var(--gold); }

/* senkrecht, neben dem mitlaufenden Foto */
.wg-col li{ display:flex; gap:clamp(16px,1.8vw,28px); padding-bottom:clamp(26px,3vw,42px); }
.wg-col li:last-child{ padding-bottom:0; }
.wg-col li::before{ content:""; position:absolute; left:calc(clamp(52px,4.4vw,66px) / 2); top:0; bottom:0;
  width:1px; background:linear-gradient(rgba(169,120,75,.42), rgba(169,120,75,.42)); }
.wg-col li:first-child::before{ top:clamp(26px,2.2vw,33px); }
.wg-col li:last-child::before{ bottom:auto; height:clamp(26px,2.2vw,33px); }
.wg-col li:only-child::before{ display:none; }
.wg-col .wg-t{ padding-top:clamp(8px,.9vw,14px); }

/* waagrecht, wenn kein Foto danebensteht */
.wg-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:clamp(22px,2.6vw,40px); }
.wg-row li{ padding-top:0; }
.wg-row li::before{ content:""; position:absolute; top:calc(clamp(52px,4.4vw,66px) / 2); left:50%; right:-50%;
  height:1px; background:rgba(169,120,75,.42); }
.wg-row li:last-child::before{ display:none; }
.wg-row .wg-t{ margin-top:clamp(16px,1.8vw,26px); }
@media(max-width:820px){
  .wg-row{ grid-template-columns:1fr; }
  .wg-row li{ display:flex; gap:18px; padding-bottom:30px; }
  .wg-row li::before{ top:0; bottom:0; left:calc(clamp(52px,4.4vw,66px) / 2); right:auto; width:1px; height:auto; }
  .wg-row li:last-child::before{ display:none; }
  .wg-row .wg-t{ margin-top:clamp(6px,1vw,12px); }
}

/* --- Kartenreihe: fuenf in einer Zeile, mit Symbol ---------- */
.g5{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(12px,1.3vw,22px); }
@media(max-width:1250px){ .g5{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:820px){ .g5{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .g5{ grid-template-columns:1fr; } }
.g5 .card{ padding:clamp(20px,1.7vw,28px); }
.g5 .card h3{ font-size:clamp(1rem,1.15vw,1.16rem); }
.g5 .card p{ font-size:.9rem; }
.card-i{ display:block; width:clamp(26px,2.2vw,32px); height:clamp(26px,2.2vw,32px);
  color:var(--gold); margin:.2em 0 .9em; transition:transform .5s var(--ease); }
.card-i svg{ width:100%; height:100%; }
.card:hover .card-i{ transform:translateY(-3px) scale(1.06); }

/* Kopfzeile zweispaltig: Ueberschrift links, Einleitung rechts */
.ch-head{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(20px,4vw,70px); align-items:end; }
.ch-head .lead{ margin:0; }
@media(max-width:900px){ .ch-head{ grid-template-columns:1fr; gap:18px; } }

/* --- Symbole bei den vier Dingen ---------------------------- */
.promsec .wide{ position:relative; z-index:1; }
.prom-i{ display:block; width:clamp(26px,2.2vw,34px); height:clamp(26px,2.2vw,34px);
  color:var(--gold); margin:.1em 0 .8em; transition:transform .5s var(--ease); }
.prom-i svg{ width:100%; height:100%; }
.prom:hover .prom-i{ transform:translateY(-3px) scale(1.06); }
.proms{ grid-template-columns:repeat(4,1fr); }
@media(max-width:980px){ .proms{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .proms{ grid-template-columns:1fr; } }

/* --- Fragen mit ruhiger Begleitspalte ----------------------- */
.fq-split{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,5vw,80px); align-items:start; }
@media(max-width:900px){ .fq-split{ grid-template-columns:1fr; } }
.fq-side{ position:sticky; top:clamp(96px,11vh,130px); }
@media(max-width:900px){ .fq-side{ position:static; } }
.fq-img{ margin:clamp(24px,3vw,40px) 0 0; border-radius:4px; overflow:hidden;
  box-shadow:0 20px 50px rgba(25,22,20,.14); }
.fq-img img{ width:100%; height:auto; display:block; }
.fq-hand{ font-size:clamp(1.4rem,2.2vw,1.9rem); color:var(--gold); margin:.6em 0 0; }
.fq-ways{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(16px,2vw,26px); }
.fq-w{ display:inline-flex; align-items:center; gap:9px; padding:10px 16px; border-radius:999px;
  border:1px solid rgba(25,22,20,.14); font-size:.84rem; color:var(--ink);
  transition:border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease); }
.fq-w svg{ width:16px; height:16px; color:var(--gold); }
.fq-w:hover{ border-color:var(--gold); background:rgba(169,120,75,.08); transform:translateY(-2px); }
/* Ueberschrift der vier Dinge beginnt links, wie alles andere auch */
.promsec .narrow{ margin-inline:0; }
/* Handschriftliche Zeile neben den schwebenden Bildern etwas luftiger */
.fl-text .hand{ line-height:1.3; }
/* Ohne Ziffer darf das Symbol etwas groesser stehen */
.prom-i{ width:clamp(30px,2.6vw,40px); height:clamp(30px,2.6vw,40px); margin:0 0 1em; }

/* ============================================================
   V9.12  Der Hochzeitstag als ruhige Abfolge statt gepinntem Kapitel
   ============================================================ */
.ta-list{ display:flex; flex-direction:column; gap:clamp(40px,6vw,96px); }
.ta-row{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,70px); align-items:center; }
.ta-flip .ta-img{ order:2; }
.ta-img{ margin:0; border-radius:4px; overflow:hidden; box-shadow:0 26px 60px rgba(0,0,0,.34); }
.ta-img img{ width:100%; height:auto; display:block; transition:transform .9s var(--ease); }
.ta-row:hover .ta-img img{ transform:scale(1.03); }
.ta-zeit{ display:block; font-size:.68rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.1em; }
.ta-txt h3{ font-size:clamp(1.5rem,2.6vw,2.3rem); color:var(--cream); margin:0 0 .3em; hyphens:manual; }
.ta-lead{ font-family:var(--f-head); font-size:clamp(1.12rem,1.7vw,1.5rem); color:var(--gold-lt);
  margin:0 0 .9em; line-height:1.35; }
.ta-txt p{ color:rgba(233,225,215,.74); margin:0 0 .8em; }
.ta-aside{ font-family:var(--f-hand); font-size:clamp(1.25rem,2vw,1.7rem);
  color:var(--gold) !important; margin-top:.4em !important; line-height:1.3; }
@media(max-width:860px){
  .ta-row{ grid-template-columns:1fr; gap:clamp(18px,4vw,28px); }
  .ta-flip .ta-img{ order:0; }
}

/* ============================================================
   V9.13  Einstiegstexte mit Bildspalte und Merkpunkten
   ============================================================ */
.op-split{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(26px,4vw,70px); align-items:center; }
.op-col{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.2vw,18px); align-content:center; }
.op-img{ margin:0; border-radius:4px; overflow:hidden; box-shadow:0 18px 46px rgba(25,22,20,.16); }
.op-img:first-child{ grid-column:1 / -1; }
.op-img img{ width:100%; height:auto; display:block; transition:transform .9s var(--ease); }
.op-img:hover img{ transform:scale(1.04); }
@media(max-width:900px){ .op-split{ grid-template-columns:1fr; } .op-col{ grid-template-columns:1fr 1fr; } }

.op-stamps{ margin-top:clamp(40px,5.4vw,78px); }
.op-punkte{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,30px);
  margin-top:clamp(34px,4.6vw,64px); padding-top:clamp(26px,3vw,40px);
  border-top:1px solid rgba(25,22,20,.1); }
.is-dark .op-punkte{ border-top-color:rgba(233,225,215,.14); }
.op-p{ display:flex; flex-direction:column; gap:.4em; }
.op-i{ width:26px; height:26px; color:var(--gold); margin-bottom:.4em; }
.op-i svg{ width:100%; height:100%; }
.op-p b{ font-family:var(--f-head); font-weight:450; font-size:clamp(1rem,1.3vw,1.2rem); }
.op-p span{ font-size:.92rem; color:var(--ink-soft); }
.is-dark .op-p span{ color:rgba(233,225,215,.7); }
@media(max-width:760px){ .op-punkte{ grid-template-columns:1fr; gap:22px; } }

/* ============================================================
   V9.15  Leiste, die zeigt, wo im Tagesablauf man gerade ist
   ============================================================ */
.st-nav{ position:absolute; left:0; right:0; bottom:clamp(20px,4vh,46px); z-index:3;
  display:flex; justify-content:center; align-items:center; gap:0;
  padding-inline:var(--gut); pointer-events:none; flex-wrap:wrap; }
.st-nav span{ position:relative; display:flex; align-items:center; gap:10px;
  padding:0 clamp(12px,2vw,30px); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.4); transition:color .5s var(--ease); white-space:nowrap; }
.st-nav span::after{ content:""; width:clamp(16px,3vw,44px); height:1px; margin-left:10px;
  background:rgba(255,255,255,.22); transition:background .5s var(--ease); }
.st-nav span:last-child::after{ display:none; }
.st-nav i{ width:9px; height:9px; border-radius:50%; flex:none;
  border:1px solid rgba(255,255,255,.35); background:transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease); }
.st-nav span.done{ color:rgba(255,255,255,.6); }
.st-nav span.done i{ background:rgba(169,120,75,.75); border-color:rgba(169,120,75,.75); }
.st-nav span.done::after{ background:rgba(169,120,75,.6); }
.st-nav span.on{ color:#fff; }
.st-nav span.on i{ background:var(--gold); border-color:var(--gold); transform:scale(1.5);
  box-shadow:0 0 0 5px rgba(169,120,75,.22); }
@media(max-width:760px){
  .st-nav{ bottom:auto; top:calc(env(safe-area-inset-top, 0px) + 86px); justify-content:flex-start; }
  .st-nav span{ font-size:.58rem; letter-spacing:.16em; padding:0 8px; gap:7px; }
  .st-nav span::after{ width:12px; margin-left:7px; }
}
/* Die Leiste sitzt oben im Bild, dort ist Platz und nichts laeuft hinein */
.story .st-nav{ justify-content:flex-start; bottom:auto; top:clamp(96px,13vh,150px); }
.story .st-nav::before{ content:""; position:absolute; left:0; right:0; top:calc(-1 * clamp(96px,13vh,150px));
  height:calc(100% + clamp(120px,17vh,200px)); z-index:-1;
  background:linear-gradient(to bottom, rgba(18,16,14,.72), transparent); pointer-events:none; }
@media(max-width:760px){ .story .st-nav{ top:calc(env(safe-area-inset-top, 0px) + 92px); } }
/* Die Karten stehen links unter dem Text, nicht quer unter dem ganzen Abschnitt */
.op-text .op-stamps{ grid-template-columns:1fr; gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(30px,3.4vw,48px); max-width:none; }
.op-text .stamp{ padding:clamp(20px,2vw,28px) clamp(20px,2vw,30px); }
.op-text .stamp h3{ font-size:clamp(1.05rem,1.35vw,1.28rem); }
.op-text .stamp p{ font-size:.92rem; }
.op-text .stamp .seal{ width:44px; height:44px; margin-bottom:.8em; }
.op-text .stamp .seal svg{ width:21px; height:21px; }
.op-text .stamp:nth-child(1){ transform:rotate(-1.2deg); }
.op-text .stamp:nth-child(2){ transform:rotate(.9deg) translateX(clamp(8px,1.6vw,22px)); }
.op-text .stamp:nth-child(3){ transform:rotate(-.7deg); }
.op-split{ align-items:start; }
.op-col{ position:sticky; top:clamp(96px,12vh,140px); }
@media(max-width:900px){ .op-col{ position:static; } .op-text .stamp:nth-child(2){ transform:rotate(.9deg); } }
/* Rechtstexte: ruhige Lesespalte */
.rechtstext p{ margin:0 0 1.2em; max-width:68ch; }
.rechtstext .btn{ margin-top:1.4em; }

/* ============================================================
   V12  Cookie-Hinweis und Bedienelemente auf der Datenschutzseite
   ============================================================ */
.ewschleier{ position:fixed; inset:0; z-index:10800; background:rgba(18,16,14,.62);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; transition:opacity .35s var(--ease); }
.ewschleier.an{ opacity:1; }
body.ewoffen{ overflow:hidden; }

.ewbox{ position:fixed; z-index:10900; left:50%; bottom:0;
  width:min(680px, 100% - 2 * clamp(12px,3vw,28px));
  transform:translate(-50%, 110%); opacity:0;
  transition:transform .5s var(--ease), opacity .4s var(--ease);
  margin-bottom:clamp(12px,3vw,28px);
  background:var(--cream); color:var(--ink); border-radius:10px;
  border:1px solid rgba(169,120,75,.35);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
  padding:clamp(22px,3vw,34px); max-height:88vh; overflow-y:auto; }
.ewbox.an{ opacity:1; transform:translate(-50%, 0); }

.ewkopf h2{ font-size:clamp(1.35rem,2.2vw,1.85rem); margin:0 0 .5em; line-height:1.15; hyphens:manual; }
.ewkopf p{ font-size:.94rem; line-height:1.6; color:var(--ink-soft); margin:0; }

.ewliste{ display:flex; flex-direction:column; gap:10px; margin:clamp(18px,2.4vw,26px) 0; }
.ewwahl{ display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  padding:13px 15px; border:1px solid rgba(25,22,20,.13); border-radius:6px;
  background:rgba(255,255,255,.55); transition:border-color .3s, background .3s; }
.ewwahl:hover{ border-color:var(--gold); background:#fff; }
.ewwahl.fest{ cursor:default; opacity:.72; }
.ewwahl.fest:hover{ border-color:rgba(25,22,20,.13); background:rgba(255,255,255,.55); }
.ewwahl input{ position:absolute; opacity:0; width:0; height:0; }
.ewschalter{ flex:none; position:relative; width:38px; height:22px; margin-top:2px;
  background:rgba(25,22,20,.18); border-radius:99px; transition:background .3s var(--ease); }
.ewschalter::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px;
  background:#fff; border-radius:50%; transition:transform .3s var(--ease);
  box-shadow:0 1px 3px rgba(0,0,0,.25); }
.ewwahl input:checked + .ewschalter{ background:var(--gold); }
.ewwahl input:checked + .ewschalter::after{ transform:translateX(16px); }
.ewwahl input:focus-visible + .ewschalter{ outline:2px solid var(--gold); outline-offset:3px; }
.ewico{ flex:none; width:20px; height:20px; margin-top:3px; color:var(--gold); }
.ewico svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
.ewtxt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ewtxt b{ font-family:var(--f-head); font-weight:450; font-size:1.02rem; }
.ewtxt b i{ font-style:normal; font-family:var(--f-body); font-size:.6rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin-left:8px; }
.ewtxt > span{ font-size:.87rem; line-height:1.5; color:var(--ink-soft); }

.ewknoepfe{ display:flex; gap:10px; flex-wrap:wrap; }
.ewbtn{ flex:1 1 170px; padding:14px 18px; border-radius:999px; border:1px solid var(--gold);
  font-family:var(--f-body); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease); }
.ewja{ background:var(--gold); color:#fff; }
.ewja:hover{ background:var(--ink); border-color:var(--ink); }
.ewnein{ background:transparent; color:var(--ink); }
.ewnein:hover{ background:rgba(169,120,75,.12); }
.ewauswahl{ background:transparent; color:var(--ink-soft); border-color:rgba(25,22,20,.2); }
.ewauswahl:hover{ border-color:var(--gold); color:var(--ink); }
.ewfuss{ margin:clamp(14px,2vw,20px) 0 0; font-size:.78rem; line-height:1.55; color:var(--ink-soft); }
.ewfuss a{ color:var(--gold); text-decoration:underline; text-underline-offset:2px; }
.ewfuss i{ font-style:normal; font-weight:500; color:var(--ink); }
@media(max-width:560px){ .ewbtn{ flex:1 1 100%; } }

/* Ampel und Knöpfe auf der Datenschutzseite */
.dsbox{ border:1px solid rgba(25,22,20,.14); border-radius:6px; padding:clamp(18px,2.4vw,26px);
  margin:1.6em 0; background:rgba(255,255,255,.5); }
.dsampel{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:9px;
  background:rgba(25,22,20,.28); vertical-align:middle; }
.dsampel.an{ background:#5c8a4a; box-shadow:0 0 0 4px rgba(92,138,74,.16); }
.dsampel.aus{ background:var(--gold); box-shadow:0 0 0 4px rgba(169,120,75,.16); }
.dsbox .dsstand{ margin:0 0 1em; font-size:.95rem; }
.dsknoepfe{ display:flex; gap:10px; flex-wrap:wrap; }
.rechtstext h2{ font-size:clamp(1.15rem,1.6vw,1.4rem); margin:2em 0 .6em; }
.rechtstext h2:first-child{ margin-top:0; }
.rechtstext a{ color:var(--gold); text-decoration:underline; text-underline-offset:2px; }
.rechtstext .checks{ margin:0 0 1.2em; }

/* ═══════════════════════════════════════════════════════════════
   V16 · Kontaktseite kompakter
   Die linke Spalte war zu gross fuer ihren Inhalt: riesige
   Ueberschrift, viel Luft, und rechts daneben ein Kasten, der
   frueher fertig war. Jetzt ist links alles eine Stufe kleiner
   und enger, damit beide Spalten ungefaehr gleich weit reichen.
   Die Telefonnummer steht bewusst nicht mehr im Kasten, sie
   steht ohnehin im Fuss und in der Kopfzeile.
   ═══════════════════════════════════════════════════════════════ */
.pk-left h1, .pk-left h2{
  font-size:clamp(1.9rem,2.9vw,2.9rem); line-height:1.02; margin-bottom:.5em;
}
.pk-left .lead{
  font-size:clamp(.95rem,1.02vw,1.02rem); line-height:1.55; max-width:40ch; margin:0;
}
.pk-left .checks{ margin:1.5em 0 0; gap:.5em; }
.pk-left .checks li{ font-size:.9rem; }
.pk-people{ margin:1.9em 0 0; gap:clamp(13px,1.3vw,18px); }
.pk-people .ppimg{ width:clamp(74px,7vw,96px); }
.pk-note{ font-size:1.06rem; line-height:1.38; max-width:23ch; }
.pk-left .mark{ margin-bottom:1em; }

.pk-empty{ padding-top:clamp(12px,1.5vw,18px); }
.pk-empty > p{ max-width:44ch; margin:0; }

@media(min-width:1001px){
  .pk-wrap{ grid-template-columns:.78fr 1.22fr; align-items:center; }
}

/* ═══════════════════════════════════════════════════════════════
   V17 · Kontaktseite auf voller Hoehe
   Die Kontaktseite besteht nur noch aus diesem einen Block.
   Damit darunter kein angeschnittener Rest steht, fuellt er den
   ganzen Bildschirm und sitzt darin mittig.
   ═══════════════════════════════════════════════════════════════ */
.pk-solo{ min-height:100svh; display:grid; align-content:center;
  padding-block:clamp(100px,12vh,150px) clamp(40px,6vh,80px); }
@supports not (min-height:100svh){ .pk-solo{ min-height:100vh; } }
body:has(.pk-solo) main > section:first-child{ padding-top:clamp(100px,12vh,150px); }
@media(max-width:1000px){
  .pk-solo{ min-height:0; display:block; }
}

/* ═══════════════════════════════════════════════════════════════
   V18 · Wo wir fotografieren
   Vier ruhige Spalten mit echten Orten. Keine Schlagwortwolke,
   sondern eine Liste, die man auch wirklich liest.
   ═══════════════════════════════════════════════════════════════ */
.rgsec .narrow{ margin-inline:0; }
.rg-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(22px,2.6vw,46px); }
.rg-g h3{
  font-family:var(--f-ui); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1em; padding-bottom:.9em;
  border-bottom:1px solid rgba(169,120,75,.28);
}
.rg-g ul{ list-style:none; margin:0; padding:0; display:grid; gap:.42em; }
.rg-g li{ font-size:.95rem; color:var(--ink-soft); line-height:1.35; }
.is-dark .rg-g li{ color:rgba(251,247,241,.72); }
.rg-ziel{ margin-top:clamp(26px,3vw,44px); max-width:62ch; color:var(--ink-soft); }
.is-dark .rg-ziel{ color:rgba(251,247,241,.72); }
.rgsec .hand{ margin-top:1.2em; }
@media(max-width:900px){ .rg-grid{ grid-template-columns:1fr 1fr; gap:26px 22px; } }
@media(max-width:480px){ .rg-grid{ grid-template-columns:1fr; } .rg-g ul{ grid-template-columns:1fr 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   V19 · Rechtstexte: dritte Ebene
   Die AGB enthalten jetzt einen eigenen Teil zu Hochzeiten und
   Veranstaltungen mit vielen kleinen Punkten. Dafuer braucht es
   eine Zwischenebene unter den Abschnitten.
   ═══════════════════════════════════════════════════════════════ */
.rechtstext h3{
  font-family:var(--f-ui); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin:1.9em 0 .7em;
}
.rechtstext .hinweis{
  border-left:2px solid var(--gold); padding:.2em 0 .2em 1.1em;
  margin:1.6em 0; max-width:64ch;
}

/* ═══════════════════════════════════════════════════════════════
   V20 · Mauszeiger, der nicht verschwindet
   Der Kamerazeiger lag auf Ebene 9250, der Cookie-Hinweis auf
   10800 und der Leuchtkasten auf 9350. Ueber beiden war der
   echte Zeiger ausgeblendet und der eigene lag darunter, also
   war gar nichts zu sehen.
   Jetzt liegt der eigene Zeiger ueber allem, und solange der
   Hinweis offen ist, kommt der ganz normale Mauszeiger zurueck.
   Bei einer Entscheidung, die man treffen muss, ist Verlaesslich-
   keit wichtiger als der Effekt.
   ═══════════════════════════════════════════════════════════════ */
#cursor{ z-index:11000 !important; }

body.ewoffen #cursor{ opacity:0 !important; }
body.cam.ewoffen,
body.cam.ewoffen *{ cursor:auto !important; }
body.cam.ewoffen button,
body.cam.ewoffen a,
body.cam.ewoffen label,
body.cam.ewoffen .ewschalter{ cursor:pointer !important; }

/* In Eingabefeldern der Schreibzeiger, sonst trifft man die
   Stelle im Text nicht. */
body.cam input,
body.cam textarea,
body.cam select{ cursor:auto !important; }