/* =====================================================================
   HERO-FOLIEN · Plattformbaustein OPTIMaiZEx (B72, 28.09.2026)

   Setzt den 3D-Hero mit weiteren Folien fort: je Folie eine Gruppe mit
   ihren Elementen, parallaxes Scrollytelling mit fixierter Buehne.
   Formel ohne Inhalt: Texte, Bilder, Farben der Buehne kommen aus den
   Mandantendaten (mandant/texte/hero-folien.json) und den Variablen
   unten. Bedienelemente mindestens 44 px.
   ===================================================================== */
#hero-kat{
  --hk-grund-a:#0B1B2B; --hk-grund-b:#002B49; --hk-grund-c:#0C0F12;
  --hk-akzent:#F4A900; --hk-auf-akzent:#002B49; --hk-text:#FFFFFF; --hk-leise:rgba(255,255,255,.74);
  --hk-glas:rgba(255,255,255,.05); --hk-linie:rgba(255,255,255,.14);
  --hk-kopf:var(--kopf-hoehe,64px);
  --hk-n:5;
  position:relative; height:calc(var(--hk-n) * 100vh); height:calc(var(--hk-n) * 100svh);
  background:var(--hk-grund-c); color:var(--hk-text); isolation:isolate }
#hero-kat[hidden]{ display:none }
html.hk-aktiv #hero-kat .hk-buehne{ touch-action:none }
#hero-kat .hk-buehne{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  touch-action:pan-y; overscroll-behavior:none;
  background:
    radial-gradient(60% 70% at 12% 6%, rgba(255,246,230,.10) 0%, transparent 60%),
    radial-gradient(34% 46% at 50% 52%, rgba(244,169,0,.14) 0%, transparent 72%),
    linear-gradient(180deg, var(--hk-grund-a) 0%, var(--hk-grund-b) 48%, var(--hk-grund-c) 100%) }

/* Kinetische Typografie im Hintergrund, laeuft mit dem Scrollen */
#hero-kat .hk-wort{ position:absolute; left:50%; top:50%; z-index:0; pointer-events:none; white-space:nowrap;
  font:900 clamp(90px,17vw,280px)/.8 'Barlow Condensed','HT Barlow','Arial Narrow',sans-serif; letter-spacing:-.02em;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.08); transform:translate(-50%,-50%); will-change:transform,opacity }

/* Kapitel oben: dieselben Reiter wie im 3D-Hero */
#hero-kat .hk-kapitel{ position:absolute; z-index:6; left:50%; transform:translateX(-50%);
  top:calc(var(--hk-kopf) + 18px); display:flex; gap:7px; max-width:calc(100vw - 24px);
  overflow-x:auto; scrollbar-width:none; touch-action:pan-x }
#hero-kat .hk-kapitel::-webkit-scrollbar{ display:none }
#hero-kat .hk-kap{ flex:0 0 auto; display:flex; align-items:center; gap:7px; min-height:44px; height:44px; padding:0 12px 0 8px;
  border:0; border-radius:10px; cursor:pointer; background:#FFFFFF; color:#002B49; white-space:nowrap;
  font:800 15px/1 'HT Barlow','Barlow','Segoe UI',system-ui,sans-serif }
#hero-kat .hk-kap img{ width:26px; height:26px; object-fit:contain; flex:none }
#hero-kat .hk-kap:hover{ background:#F4F8FC }
#hero-kat .hk-kap[aria-current="true"]{ background:var(--hk-akzent); color:var(--hk-auf-akzent) }
#hero-kat .hk-kap:focus-visible, #hero-kat button:focus-visible, #hero-kat a:focus-visible,
.hk-leiste button:focus-visible{ outline:2px solid #002B49; outline-offset:2px; box-shadow:0 0 0 4px var(--hk-akzent,#F4A900) }

/* Folien liegen uebereinander; das Skript setzt Lage und Deckkraft */
#hero-kat .hk-folie{ position:absolute; inset:0; z-index:2; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,1fr); align-items:center;
  gap:clamp(20px,3vw,56px); padding:calc(var(--hk-kopf) + 90px) clamp(18px,4.4vw,64px) 96px;
  opacity:0; pointer-events:none }
#hero-kat .hk-folie.an{ pointer-events:auto }
#hero-kat .hk-text{ max-width:440px; justify-self:start; will-change:transform }
#hero-kat .hk-aug{ display:block; margin:0 0 14px; color:var(--hk-akzent);
  font:700 12px/1 'HT Barlow','Barlow',sans-serif; letter-spacing:.16em; text-transform:uppercase }
#hero-kat .hk-titel{ margin:0 0 16px; color:var(--hk-text);
  font:800 clamp(40px,4.8vw,76px)/.95 'Barlow Condensed','HT Barlow',sans-serif; letter-spacing:-.02em; text-wrap:balance }
#hero-kat .hk-satz{ margin:0 0 26px; color:var(--hk-leise); font:500 clamp(16px,1.25vw,19px)/1.5 'HT Barlow','Barlow',sans-serif; text-wrap:pretty }
#hero-kat .hk-shop{ display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 22px; border-radius:999px;
  background:var(--hk-akzent); color:var(--hk-auf-akzent); text-decoration:none; font:800 16px/1 'HT Barlow','Barlow',sans-serif;
  transition:transform .18s cubic-bezier(.16,1,.3,1), filter .18s }
#hero-kat .hk-shop:hover{ transform:translateY(-1px); filter:brightness(1.05) }
#hero-kat .hk-shop svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }

/* Buehne in der Mitte mit Pfeilen */
#hero-kat .hk-bild{ position:relative; display:flex; align-items:center; gap:14px; will-change:transform }
#hero-kat .hk-platz{ position:relative; margin:0; width:min(40vw,58vh,560px); aspect-ratio:1; border-radius:28px;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02)); border:1px solid var(--hk-linie);
  box-shadow:0 40px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  display:grid; place-items:center; overflow:hidden }
#hero-kat .hk-platz::before{ content:''; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:36px 36px; mask-image:radial-gradient(circle at 50% 45%,#000 30%,transparent 75%) }
#hero-kat .hk-platz img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain }
#hero-kat .hk-icon{ position:relative; width:32%; height:auto; fill:none; stroke:var(--hk-akzent); stroke-width:1.1;
  stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 12px 30px rgba(244,169,0,.25)); transition:transform .5s cubic-bezier(.16,1,.3,1) }
#hero-kat .hk-marke{ position:absolute; top:18px; left:18px; padding:7px 12px; border-radius:999px;
  background:rgba(255,255,255,.1); color:var(--hk-leise); font:700 12px/1 'HT Barlow','Barlow',sans-serif; letter-spacing:.06em }
#hero-kat .hk-name{ position:absolute; left:0; right:0; bottom:0; padding:22px 26px 24px; text-align:center;
  background:linear-gradient(0deg,rgba(0,0,0,.45),transparent) }
#hero-kat .hk-name b{ display:block; color:#FFFFFF; font:800 clamp(20px,1.8vw,28px)/1.05 'Barlow Condensed','HT Barlow',sans-serif; letter-spacing:-.01em }
#hero-kat .hk-name span{ display:block; margin-top:6px; color:var(--hk-leise); font:500 14px/1.4 'HT Barlow','Barlow',sans-serif }
#hero-kat .hk-pfeil{ flex:none; display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  border:1px solid var(--hk-linie); background:var(--hk-glas); color:#FFFFFF; cursor:pointer; transition:background .18s, border-color .18s }
#hero-kat .hk-pfeil:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4) }
#hero-kat .hk-pfeil svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }

/* Auswahl rechts */
#hero-kat .hk-wahl{ justify-self:end; display:flex; flex-direction:column; gap:6px; width:min(300px,100%); will-change:transform }
#hero-kat .hk-el{ display:grid; grid-template-columns:10px minmax(0,1fr); column-gap:12px; align-items:center; min-height:56px;
  padding:10px 14px; border:1px solid transparent; border-radius:14px; background:transparent; color:var(--hk-leise);
  text-align:left; cursor:pointer; font:inherit; transition:background .18s, color .18s, border-color .18s }
#hero-kat .hk-el i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.3); transition:background .18s, transform .18s }
#hero-kat .hk-el b{ display:block; font:700 15px/1.2 'HT Barlow','Barlow',sans-serif; color:inherit }
#hero-kat .hk-el small{ display:block; margin-top:3px; font:500 12.5px/1.35 'HT Barlow','Barlow',sans-serif; color:rgba(255,255,255,.55) }
#hero-kat .hk-el:hover{ background:rgba(255,255,255,.06); color:#FFFFFF }
#hero-kat .hk-el[aria-selected="true"]{ background:rgba(255,255,255,.08); border-color:var(--hk-linie); color:#FFFFFF }
#hero-kat .hk-el[aria-selected="true"] i{ background:var(--hk-akzent); transform:scale(1.2) }

/* Leiste unten, mittig: Element n / Gesamt, ein Balken fuer Folien und
   Elemente, Ueberspringen. 28.09.2026, Noah: ein Balken statt zwei. */
.hk-leiste{ position:fixed; z-index:74; left:50%; bottom:clamp(12px,2vh,22px);
  display:flex; align-items:center; gap:14px; padding:6px 6px 6px 18px; border-radius:999px;
  background:rgba(11,27,43,.72); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.14); color:#FFFFFF;
  opacity:0; transform:translate(-50%,12px); pointer-events:none; transition:opacity .4s ease, transform .4s cubic-bezier(.22,.7,.3,1) }
html.hk-sicht .hk-leiste{ opacity:1; transform:translate(-50%,0); pointer-events:auto }
.hk-leiste .hk-stand{ font:700 14px/1 'HT Barlow','Barlow',sans-serif; white-space:nowrap; color:rgba(255,255,255,.7);
  font-variant-numeric:tabular-nums; min-width:3.2em; text-align:center }
.hk-leiste .hk-stand b{ color:#FFFFFF; font-weight:800 }
.hk-leiste .hk-balken{ display:flex; gap:5px; align-items:center }
.hk-leiste .hk-balken > span{ position:relative; overflow:hidden; width:16px; height:4px; border-radius:2px; background:rgba(255,255,255,.25);
  transition:width .35s cubic-bezier(.22,.7,.3,1) }
.hk-leiste .hk-balken > span i{ position:absolute; left:0; top:0; bottom:0; width:0; background:#F4A900; border-radius:2px;
  transition:width .35s cubic-bezier(.22,.7,.3,1) }
.hk-leiste .hk-balken > span.war i{ width:100%; opacity:.55 }
.hk-leiste .hk-balken > span.an{ width:72px }
.hk-leiste .hk-balken > span.an i{ width:var(--hk-teil,100%) }
.hk-leiste .hk-skip{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border:0; border-radius:999px;
  background:#FFFFFF; color:#002B49; cursor:pointer; font:800 14px/1 'HT Barlow','Barlow',sans-serif }
.hk-leiste .hk-skip svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }
/* Der Regler unter dem Elementtitel geht in der Leiste auf. */
html body #hero3d .h3-regler{ display:none !important }

/* Telefon und Tablet: eine Spalte, Auswahl als waagerechtes Band */
@media (max-width:1024px){
  #hero-kat .hk-folie{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; align-content:start; justify-items:center;
    gap:14px; padding:calc(var(--hk-kopf) + 78px) 16px 150px; text-align:center }
  #hero-kat .hk-text{ justify-self:center; max-width:560px }
  #hero-kat .hk-aug{ margin-bottom:8px }
  #hero-kat .hk-titel{ font-size:clamp(34px,8.6vw,54px); margin-bottom:8px }
  #hero-kat .hk-satz{ font-size:15px; margin:0 0 12px }
  #hero-kat .hk-shop{ min-height:44px; font-size:15px }
  #hero-kat .hk-platz{ width:min(62vw,36svh,420px); border-radius:22px }
  #hero-kat .hk-name{ padding:14px 14px 16px } #hero-kat .hk-name b{ font-size:19px } #hero-kat .hk-name span{ font-size:12.5px }
  #hero-kat .hk-marke{ top:12px; left:12px; font-size:11px }
  #hero-kat .hk-pfeil{ width:44px; height:44px }
  #hero-kat .hk-wahl{ justify-self:stretch; width:auto; flex-direction:row; overflow-x:auto; scrollbar-width:none;
    touch-action:pan-x; margin:0 -16px; padding:0 16px; scroll-snap-type:x proximity }
  #hero-kat .hk-wahl::-webkit-scrollbar{ display:none }
  #hero-kat .hk-el{ flex:0 0 auto; min-height:44px; padding:8px 14px; grid-template-columns:8px auto; border-color:var(--hk-linie);
    border-radius:999px; scroll-snap-align:start }
  #hero-kat .hk-el small{ display:none }
  #hero-kat .hk-el b{ font-size:14px; white-space:nowrap }
  #hero-kat .hk-kapitel{ left:0; right:0; transform:none; padding:0 12px; max-width:none; justify-content:flex-start; top:calc(var(--hk-kopf) + 12px) }
  .hk-leiste{ bottom:calc(76px + env(safe-area-inset-bottom)); padding:6px 14px; gap:10px }
  .hk-leiste .hk-balken > span.an{ width:56px }
}
/* Am Telefon traegt die Fussleiste bereits "Ueberspringen" */
@media (max-width:1024px){ html .hk-leiste .hk-skip{ display:none } }
@media (max-height:620px) and (min-width:1025px){
  #hero-kat .hk-folie{ padding-top:calc(var(--hk-kopf) + 70px); padding-bottom:70px }
  #hero-kat .hk-platz{ width:min(36vw,50vh) } }
@media (prefers-reduced-motion: reduce){
  #hero-kat .hk-wort, #hero-kat .hk-text, #hero-kat .hk-bild, #hero-kat .hk-wahl{ transform:none !important }
  #hero-kat *, .hk-leiste{ transition:none !important } }