/* V3-Skin · Landingpage-Hero mit 3D-Fotostapel (13.10.2026). Nur aus landing/landing_page.php geladen, wenn der V3-Hero
   aktiv ist (partials/v3-skin/landing-hero.php). Regeln aus V3/tools/v3.src.css (K2 Hero mit Abzugsstapel, Abzug, Bildrahmen,
   „Bilder immer ganz“ vom 12.10.2026), alle unter .v3s .v3lh: Bootstrap, style.css und die Startseite bleiben unberührt.
   Tokens (--seite, --kurve, --r-foto, Schatten, Schrift) kommen aus v3-skin.css (.v3s). Keyframes mit Präfix v3lh-. */

/* ---------- Rahmen: warmes Licht wie auf der Startseite, nichts ragt heraus */
.v3s .v3lh{--sch-abzug:0 1px 1px rgb(60 40 10/.10),0 8px 18px -10px rgb(60 40 10/.35),0 22px 40px -28px rgb(60 40 10/.40);
  --kurve-weich:cubic-bezier(.22,.61,.36,1);
  position:relative;isolation:isolate;overflow:hidden;overflow:clip;margin:0;padding:20px var(--seite) 44px}
.v3s main>.v3lh.gaby-landing-hero{padding-top:20px}
.v3s .v3lh::before{content:"";position:absolute;inset:-20%;top:-120px;z-index:-1;pointer-events:none;
  background:radial-gradient(45% 40% at 20% 15%,#ffe49473,transparent 70%),radial-gradient(35% 30% at 85% 35%,#d0b23c38,transparent 70%),radial-gradient(60% 50% at 50% 110%,#fbdf8d4d,transparent 70%);
  -webkit-mask:linear-gradient(#000 62%,#0000 85%);mask:linear-gradient(#000 62%,#0000 85%);animation:v3lh-licht 28s ease-in-out infinite alternate}
@keyframes v3lh-licht{to{transform:translate3d(6%,-4%,0)}}

/* ---------- Text: Kicker, H1, Unterzeile, Ort-Zeile, Wege */
.v3s .v3lh__text{min-width:0}
.v3s .v3lh__kicker{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:0;color:var(--tinte-2);font:600 13px/16px var(--f-text);letter-spacing:.08em;text-transform:uppercase}
.v3s .v3lh__faden{width:24px;height:1px;flex:none;background:var(--gold)}
.v3s main .v3lh h1{margin:0 0 12px;color:var(--tinte);font:400 clamp(32px,8.6vw,40px)/1.1 var(--f-titel);letter-spacing:0;text-wrap:balance;overflow-wrap:break-word}
.v3s .v3lh__lead{margin:0 0 8px;color:var(--tinte);font-size:18px;line-height:26px;text-wrap:pretty}
.v3s .v3lh__ort{margin:0;color:var(--tinte-2);font-size:15px;line-height:22px;text-wrap:pretty}
.v3s .v3lh__wege{display:flex;flex-direction:column;gap:12px;max-width:360px;margin-top:22px}
.v3s .v3lh__wege>a{width:100%;text-align:center}
.v3s .v3lh__wa{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:1px solid #b99a2f;border-radius:999px;background:#ffffff59;color:var(--gold-dunkel);font:600 16px/1.2 var(--f-text);text-decoration:none;transition:background .2s,translate .15s}
.v3s .v3lh__wa:hover{background:#fff;color:var(--gold-dunkel)}
.v3s .v3lh__wa:active{translate:0 1px}
.v3s .v3lh :focus-visible{outline:0;box-shadow:var(--fr)!important}

/* ---------- Stapel. --r = Breite/Höhe des Fotos (inline), --hm = größte Abzughöhe, --bm = größte Abzugbreite.
   Breite = min(--bm, --hm × --r), senkrecht mittig: Hochformat füllt die Höhe, Querformat die Breite, das Foto bleibt ganz. */
.v3s .v3lh .v3-stapelfeld{--buehne:clamp(300px,96vw,400px);--hm:calc(var(--buehne) - 19px);--bm:min(100% - 24px,var(--hm)*1.4);position:relative;height:var(--buehne);margin-top:34px}
.v3s .v3lh .v3-stapel{height:100%;margin:0;padding:0;list-style:none;perspective:1100px;transform-style:preserve-3d}
.v3s .v3lh .v3-stapel__abzug{--i:0;--s:1;--kw:min(var(--bm),var(--hm)*var(--r,.8));position:absolute;top:calc(var(--hm)/2);left:calc(50% - var(--kw)/2);width:var(--kw);margin:calc(var(--kw)/var(--r,.8)/-2) 0 0;padding:0;
  transform:translate3d(calc(var(--i)*var(--v,8px)*var(--s)),calc(var(--i)*-8px),calc(var(--i)*-30px));rotate:var(--rot);transition:transform .5s var(--kurve),opacity .35s;will-change:transform;touch-action:pan-y;animation:v3lh-hinten .5s var(--kurve-weich) backwards}
.v3s .v3lh .v3-stapel__abzug[data-pos="0"]{z-index:10;animation-duration:0s}
.v3s .v3lh .v3-stapel__abzug[data-pos="1"]{--i:1;--s:-1;z-index:9;animation-delay:.3s}
.v3s .v3lh .v3-stapel__abzug[data-pos="2"]{--i:2;z-index:8;animation-delay:.38s}
.v3s .v3lh .v3-stapel__abzug[data-pos="3"]{--i:3;--s:-1;z-index:7;animation-delay:.46s}
.v3s .v3lh .v3-stapel__abzug[data-pos="4"]{--i:3;--s:-1;z-index:6;opacity:0;animation-duration:0s}
.v3s .v3lh .v3-stapel__abzug[data-raus]{z-index:11}
@keyframes v3lh-hinten{from{opacity:0;translate:0 24px}}
@keyframes v3lh-hoch{from{opacity:0;translate:0 12px}}
.v3s .v3lh .v3-stapel .v3-hx{display:block}
.v3s .v3lh .v3-stapel .v3-abzug{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* ---------- Abzug: randlos, großer Radius, feine Goldlichtkante, Glas-Label mit Anlass (nur am obersten Abzug) */
.v3s .v3lh .v3-abzug{position:relative;display:block;padding:0;overflow:hidden;overflow:clip;border-radius:var(--r-foto);background:var(--sand);box-shadow:0 0 0 1px rgb(226 193 90/.55),0 2px 4px rgb(60 40 10/.08),0 18px 30px -14px rgb(60 40 10/.38),0 44px 70px -34px rgb(60 40 10/.45);color:var(--tinte);text-decoration:none}
.v3s .v3lh .v3-abzug::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 rgb(255 255 255/.55),inset 0 0 0 1px rgb(255 232 160/.4);pointer-events:none}
.v3s .v3lh .v3-abzug:focus-visible{box-shadow:var(--fr),var(--sch-abzug)!important}
.v3s .v3lh .v3-bild{position:relative;display:block;overflow:hidden;overflow:clip;background:var(--ph,var(--sand)) 50%/cover}
.v3s .v3lh .v3-bild img{position:relative;display:block;width:100%;max-width:100%;height:auto;margin:0}
.v3s .v3lh .v3-abzug__text{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);padding:6px 12px 7px;border-radius:14px;background:rgb(255 250 242/.9);box-shadow:0 6px 16px -8px rgb(60 40 10/.35);text-align:left;transition:opacity .35s}
.v3s .v3lh .v3-stapel__abzug:not([data-pos="0"]) .v3-abzug__text{opacity:0}
.v3s .v3lh .v3-abzug__titel{display:block;color:var(--tinte);font:18px/1.15 var(--f-titel)}
.v3s .v3lh .v3-abzug__sub{display:block;margin-top:1px;font-size:13px;line-height:1.25}

/* ---------- Weiter / Zurück: mobil Weiter unten rechts (dort liegt bei keinem Format ein Foto), Desktop beide mittig */
.v3s .v3lh button{margin:0;padding:0;border:0;font:inherit;cursor:pointer}
.v3s .v3lh .v3-stapel__weiterhx,.v3s .v3lh .v3-stapel__zurueck{position:absolute;z-index:20;right:0;bottom:0;animation:v3lh-hoch .4s .6s backwards}
.v3s .v3lh .v3-stapel__zurueck{right:auto;left:0;opacity:0;pointer-events:none}
.v3s .v3lh .v3-stapel__zurueck:focus-visible{opacity:1;pointer-events:auto}
html:not(.v3-bereit) .v3lh :is(.v3-stapel__weiterhx,.v3-stapel__zurueck){display:none!important}

/* ---------- Tablet: mehr Bühne, Text bis 640 px */
@media (min-width:600px){
.v3s .v3lh__text{max-width:640px}
.v3s .v3lh .v3-stapelfeld{--buehne:440px}
}

/* ---------- Desktop: Text links, Stapel rechts (wie die Startseite) */
@media (min-width:1024px){
.v3s .v3lh{display:grid;grid-template-columns:1fr 1fr;column-gap:8%;align-items:center;padding-block:40px 72px}
.v3s main>.v3lh.gaby-landing-hero{padding-top:40px}
.v3s main .v3lh h1{margin-bottom:20px;font-size:clamp(48px,4.6vw,68px);line-height:1.06;letter-spacing:-.01em}
.v3s .v3lh__lead{font-size:20px;line-height:30px}
.v3s .v3lh__ort{font-size:16px;line-height:24px}
.v3s .v3lh__wege{flex-direction:row;flex-wrap:wrap;max-width:none;margin-top:28px}
.v3s .v3lh__wege>a{width:auto}
.v3s .v3lh .v3-stapelfeld{--buehne:clamp(420px,100dvh - 200px,600px);--hm:calc(var(--buehne) - 16px);--bm:min(100% - 112px,var(--hm)*1.2);--v:18px;margin:0}
.v3s .v3lh .v3-stapel__zurueck{opacity:1;pointer-events:auto}
.v3s .v3lh .v3-stapel__weiterhx,.v3s .v3lh .v3-stapel__zurueck{bottom:auto;top:calc(50% - 22px)}
.v3s .v3lh .v3-abzug__text{left:14px;bottom:14px;padding:9px 16px 10px;border-radius:16px}
.v3s .v3lh .v3-abzug__titel{font-size:24px}
.v3s .v3lh .v3-abzug__sub{font-size:15px}
}

/* ---------- reduzierte Bewegung: nichts läuft, alles sofort sichtbar */
@media (prefers-reduced-motion:reduce){
.v3s .v3lh::before,.v3s .v3lh .v3-stapel__abzug,.v3s .v3lh .v3-stapel__weiterhx,.v3s .v3lh .v3-stapel__zurueck{animation:none!important}
.v3s .v3lh .v3-stapel__abzug{transition:none}
}