/* =====================================================================
   HAASEC – Bewegung: Logo-Intro, Hero, Einblenden beim Scrollen, Karte, Zähler.
   Alles schaltet sich bei „Bewegung reduzieren" im Betriebssystem ab.
   ===================================================================== */

/* ---------- Logo-Intro: Logo steht kurz, dann öffnet sich der Vorhang ---------- */
.intro{display:none}
html.intro-an{overflow:hidden}
html.intro-an .intro,.intro.weg{display:grid;place-items:center;position:fixed;inset:0;z-index:1000}
html.intro-an .intro{animation:introNotaus .01s 6s forwards}
.intro.weg{pointer-events:none}
@keyframes introNotaus{to{visibility:hidden;opacity:0}}
.intro .iv{position:absolute;left:0;right:0;height:50.5%;background:#0b0b0b;transition:transform 1.1s cubic-bezier(.76,0,.18,1)}
.intro .iv.a{top:0}
.intro .iv.b{bottom:0}
.intro.weg .iv.a{transform:translateY(-101%)}
.intro.weg .iv.b{transform:translateY(101%)}
.intro-buehne{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;transition:opacity .5s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.intro.weg .intro-buehne{opacity:0;transform:scale(1.2)}
.intro-schild{display:block;width:clamp(64px,9vw,96px);height:auto;max-width:none;margin-bottom:24px;opacity:0;transform:translateY(30%) scale(.8);
  filter:drop-shadow(0 0 26px rgba(227,184,90,.35));animation:introRein .8s cubic-bezier(.16,.84,.3,1) forwards}
.intro-wort{display:flex;font:700 clamp(1.7rem,5.4vw,3rem)/1 var(--font-head,Montserrat),sans-serif;letter-spacing:.42em;padding-left:.42em;color:#E3B85A;transition:letter-spacing .9s cubic-bezier(.2,.7,.2,1)}
.intro-wort i{display:inline-block;font-style:normal;opacity:0;transform:translateY(60%);animation:introRein .7s cubic-bezier(.16,.84,.3,1) forwards;animation-delay:calc(.25s + var(--i) * 60ms)}
.intro-wort i.r{color:#D51A1A}
.intro.weg .intro-wort{letter-spacing:.7em}
.intro-linie{display:block;width:0;height:1px;margin-top:24px;background:#C8902F;animation:introLinie .9s .6s cubic-bezier(.2,.7,.2,1) forwards}
.intro-slogan{margin-top:16px;color:#CFC8BC;font:600 clamp(10px,1.3vw,12px)/1 var(--font-head,Montserrat),sans-serif;letter-spacing:.34em;padding-left:.34em;text-transform:uppercase;opacity:0;animation:einblenden .6s 1s forwards}
@keyframes introRein{to{opacity:1;transform:none}}
@keyframes introLinie{to{width:min(15rem,50vw)}}
@keyframes einblenden{to{opacity:1}}
/* Während das Logo steht, wartet die Seite. Danach fährt der Header ein und der Hero baut sich auf. */
html.intro-an .hero,html.intro-an .hero *{animation-play-state:paused !important}
html.intro-an .top{opacity:0}
html.kopf-rein .top{animation:kopfRein .9s .35s cubic-bezier(.2,.9,.2,1) both}
@keyframes kopfRein{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}

/* ---------- Hero: Auftritt der Inhalte ---------- */
html.js .hero .wrap > *{animation:heroRein .9s cubic-bezier(.2,.9,.2,1) both;animation-delay:calc(var(--hv,0s) + var(--i,0) * .12s)}
.hero .wrap > :nth-child(1){--i:0}.hero .wrap > :nth-child(2){--i:1}.hero .wrap > :nth-child(3){--i:2}.hero .wrap > :nth-child(4){--i:3}.hero .wrap > :nth-child(5){--i:4}.hero .wrap > :nth-child(6){--i:5}
@keyframes heroRein{from{opacity:0;transform:translateY(28px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
html.js .hero .wrap > h1:not(.zerlegt){opacity:0;animation:einblenden .3s .6s both}
html.js .hero .wrap > h1.zerlegt{animation:none;opacity:1}
.hero h1 .wort{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .wort > span{display:inline-block;animation:wortHoch 1s cubic-bezier(.2,.9,.2,1) both;animation-delay:calc(var(--hv,0s) + .2s + var(--w,0) * .09s)}
@keyframes wortHoch{from{transform:translateY(110%)}to{transform:none}}
/* Lichtkegel wie ein Suchscheinwerfer */
.hero:before{content:"";position:absolute;inset:-40% -20%;background:conic-gradient(from 180deg at 20% 0%,transparent 0deg,rgba(227,184,90,.11) 10deg,rgba(227,184,90,0) 24deg,transparent 360deg);
  animation:kegel 16s ease-in-out infinite alternate;pointer-events:none;z-index:0;transform-origin:20% 0%}
@keyframes kegel{from{transform:rotate(-18deg)}to{transform:rotate(26deg)}}
.hero:after{animation:schildSchweben 9s ease-in-out infinite alternate}
@keyframes schildSchweben{from{translate:0 0;rotate:0deg}to{translate:-14px -22px;rotate:-3deg}}
.hero canvas.funken{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero .wrap{z-index:1}

/* ---------- Laufband ---------- */
.laufband{background:var(--gold);color:var(--black);overflow:hidden;white-space:nowrap;border-block:1px solid var(--gold-dark)}
.laufband-spur{display:inline-flex;animation:laufen 42s linear infinite;padding:14px 0}
.laufband:hover .laufband-spur{animation-play-state:paused}
.laufband span{font:800 15px var(--font-head);text-transform:uppercase;letter-spacing:.12em;padding:0 22px;display:inline-flex;align-items:center;gap:22px}
.laufband span:after{content:"";width:8px;height:8px;background:var(--red);transform:rotate(45deg)}
@keyframes laufen{to{transform:translateX(-50%)}}

/* ---------- Zahlen ---------- */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-bottom:56px}
.zahl{border:1px solid rgba(200,144,47,.35);border-radius:14px;padding:22px 20px;background:linear-gradient(160deg,rgba(200,144,47,.12),transparent 60%)}
.zahl b{display:block;font:800 clamp(38px,5vw,56px)/1 var(--font-head);color:#E3B85A;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.zahl span{display:block;margin-top:8px;color:#CFC8BC;font-size:15px}

/* ---------- Einblenden beim Scrollen ---------- */
html.js .rv{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.9,.2,1),transform .8s cubic-bezier(.2,.9,.2,1);transition-delay:calc(var(--rv,0) * 90ms)}
html.js .rv.rv-links{transform:translateX(-46px)}
html.js .rv.rv-rechts{transform:translateX(46px)}
html.js .rv.rv-zoom{transform:scale(.92)}
html.js .rv.sichtbar{opacity:1;transform:none}

/* ---------- Karten: Lichtpunkt folgt der Maus, leichtes Kippen ---------- */
.card,.siegel span,.zahl{position:relative;transition:transform .35s cubic-bezier(.2,.9,.2,1),box-shadow .35s,border-color .35s,opacity .8s}
.card:before,.siegel span:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(200,144,47,.18),transparent 60%)}
.card:hover:before,.siegel span:hover:before{opacity:1}
.card:hover{box-shadow:0 22px 50px rgba(20,20,20,.12);border-color:rgba(200,144,47,.55)}
.card > *{position:relative}

/* ---------- Knöpfe: Glanz und Puls ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%) -120% 0/220% 100% no-repeat;transition:background-position .7s;pointer-events:none}
.btn:hover:after{background-position:120% 0}
.btn:hover{transform:translateY(-2px)}
.hero .btn-red{animation:heroRein .9s cubic-bezier(.2,.9,.2,1) both,puls 3.2s 5s ease-in-out infinite}
@keyframes puls{0%,100%{box-shadow:0 0 0 0 rgba(181,15,15,0)}50%{box-shadow:0 0 0 12px rgba(181,15,15,.22)}}
.region span{transition:transform .25s,border-color .25s,box-shadow .25s}
.region span:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 8px 20px rgba(200,144,47,.2)}

/* ---------- Kopfzeile, Fortschritt, nach oben ---------- */
.fortschritt{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--red),#E3B85A);z-index:60;pointer-events:none}
.top,.top .wrap,.brand img{transition:background .3s,box-shadow .3s,height .3s}
.top.klein .wrap{height:64px}
.top.klein{box-shadow:0 10px 30px rgba(0,0,0,.35)}
.top.klein .brand img{height:38px}
.nach-oben{position:fixed;right:18px;bottom:18px;z-index:55;width:50px;height:50px;border-radius:50%;border:2px solid var(--gold);background:rgba(20,20,20,.92) url(img/bildmarke.webp) center/28px no-repeat;
  cursor:pointer;opacity:0;transform:translateY(20px) scale(.8);transition:opacity .3s,transform .3s,box-shadow .3s;pointer-events:none}
.nach-oben.da{opacity:1;transform:none;pointer-events:auto}
.nach-oben:hover{box-shadow:0 0 0 7px rgba(200,144,47,.22)}

/* ---------- Schritte: Linie zieht sich durch ---------- */
.steps{position:relative;isolation:isolate}
html.js .steps.rv-linie:after{content:"";position:absolute;left:0;right:0;top:20px;height:2px;background:linear-gradient(90deg,var(--gold),var(--red));transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s .3s cubic-bezier(.2,.9,.2,1);z-index:-1;opacity:.4}
html.js .steps.rv-linie.sichtbar:after{transform:scaleX(1)}

/* ---------- Karte: Radar, Strahlen, Punkte ---------- */
.karte .radar{transform-box:view-box;animation:radar 7s linear infinite}
@keyframes radar{to{rotate:360deg}}
.karte .strahl{stroke:#C8902F;stroke-width:1;stroke-opacity:.4;stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
html.js .karte .punkt,html.js .karte .ort{opacity:0}
html.js .karte.sichtbar .strahl{animation:strahl 1.1s calc(var(--d) * 1s) ease-out forwards}
html.js .karte.sichtbar .punkt,html.js .karte.sichtbar .ort{animation:einblenden .5s calc(var(--d) * 1s + .5s) forwards}
html:not(.js) .karte .strahl{stroke-dashoffset:0}
@keyframes strahl{to{stroke-dashoffset:0}}
.karte .welle{transform-box:fill-box;transform-origin:center;animation:welle 2.6s ease-out infinite}
.karte .welle.zwei{animation-delay:1.3s}
@keyframes welle{from{transform:scale(1);opacity:.8}to{transform:scale(7);opacity:0}}

/* ---------- Schwebendes Logo im Hero ---------- */
.hero.mit-logo:after{display:none}
main{overflow-x:clip}
.hero-logo{position:absolute;z-index:0;pointer-events:none;top:50%;right:max(3vw,calc((100vw - var(--maxw,1140px)) / 2));width:min(30vw,380px,var(--hl,380px));aspect-ratio:1;translate:0 -50%;perspective:900px;
  animation:logoRein 1.6s cubic-bezier(.2,.9,.2,1) both;animation-delay:calc(var(--hv,0s) + .45s)}
@keyframes logoRein{from{scale:.5;filter:blur(16px) opacity(0)}to{scale:1;filter:none}}
.hero-logo .hl-halo{position:absolute;inset:-22%;border-radius:50%;background:radial-gradient(circle,rgba(227,184,90,.32),rgba(181,15,15,.12) 42%,transparent 68%);animation:halo 5s ease-in-out infinite alternate}
@keyframes halo{from{opacity:.5;scale:.9}to{opacity:1;scale:1.08}}
.hero-logo .hl-ring{position:absolute;inset:-4%;border-radius:50%;border:1px dashed rgba(227,184,90,.38);animation:dreh 38s linear infinite}
.hero-logo .hl-ring.zwei{inset:7%;border:1px solid rgba(227,184,90,.16);animation-duration:24s;animation-direction:reverse}
.hero-logo .hl-ring i{position:absolute;top:-4px;left:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:#E3B85A;box-shadow:0 0 14px 4px rgba(227,184,90,.75)}
.hero-logo .hl-ring.zwei i{top:auto;bottom:-3px;width:6px;height:6px;left:calc(50% - 3px);background:#D51A1A;box-shadow:0 0 14px 4px rgba(213,26,26,.75)}
@keyframes dreh{to{rotate:360deg}}
.hero-logo .hl-schatten{position:absolute;left:30%;right:30%;bottom:3%;height:5%;border-radius:50%;background:radial-gradient(closest-side,rgba(227,184,90,.4),transparent);animation:schatten 6s ease-in-out infinite}
@keyframes schatten{0%,100%{scale:1;opacity:.9}50%{scale:.68;opacity:.45}}
.hero-logo .hl-schweben{position:absolute;inset:15%;transform-style:preserve-3d;animation:schweben 6s ease-in-out infinite}
@keyframes schweben{0%,100%{translate:0 0;rotate:y -9deg}50%{translate:0 -20px;rotate:y 9deg}}
.hero-logo .hl-kipp{position:absolute;inset:0;transform:rotateX(var(--kx,0deg)) rotateY(var(--ky,0deg));transition:transform .6s cubic-bezier(.2,.9,.2,1)}
.hero-logo img{display:block;width:100%;height:100%;max-width:none;filter:drop-shadow(0 22px 30px rgba(0,0,0,.6)) drop-shadow(0 0 24px rgba(227,184,90,.28))}
.hero-logo .hl-glanz{position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.8) 50%,transparent 62%) 150% 0/260% 100% no-repeat;
  -webkit-mask:url(img/bildmarke.webp) center/contain no-repeat;mask:url(img/bildmarke.webp) center/contain no-repeat;mix-blend-mode:screen;
  animation:glanzLoop 7s ease-in-out infinite;animation-delay:calc(var(--hv,0s) + 2.2s)}
@keyframes glanzLoop{0%{background-position:150% 0}22%,100%{background-position:-50% 0}}
@media (max-width:1099px){
  .hero-logo{top:14px;right:-28px;translate:none;width:min(44vw,240px);opacity:.32}
}

/* ---------- Bilder: aufziehen, Tiefe beim Scrollen ---------- */
html.js .bild-breit{clip-path:inset(10% 7% round 14px);transition:clip-path 1.3s cubic-bezier(.2,.9,.2,1)}
html.js .bild-breit.sichtbar{clip-path:inset(0 round 14px)}
html.js .bild-breit img{transform:translateY(var(--py,0px)) scale(1.18);transition:transform 1.6s cubic-bezier(.2,.9,.2,1)}
html.js .bild-breit.sichtbar img{transform:translateY(var(--py,0px)) scale(1.02)}
html.js .bild-breit.sichtbar.ruhend img{transition:transform .12s linear}
html.js .bild-breit figcaption{opacity:0;translate:-24px 0;transition:opacity .8s .7s,translate .8s .7s cubic-bezier(.2,.9,.2,1)}
html.js .bild-breit.sichtbar figcaption{opacity:1;translate:0 0}
html.js .bild-breit:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(227,184,90,.28) 50%,transparent 60%) 160% 0/250% 100% no-repeat}
html.js .bild-breit.sichtbar:before{animation:bildGlanz 1.6s .5s ease-in-out both}
@keyframes bildGlanz{to{background-position:-60% 0}}

/* ---------- Highlights ---------- */
/* Seitenwechsel wie im Film (Chrome, Edge, Safari) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:seiteRaus .32s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:seiteRein .45s cubic-bezier(0,0,.2,1) both}
.top{view-transition-name:kopf}
@keyframes seiteRaus{to{opacity:0;transform:translateY(-14px) scale(.99);filter:blur(4px)}}
@keyframes seiteRein{from{opacity:0;transform:translateY(22px);filter:blur(6px)}}

/* Goldglanz über „Vertrauen." */
.hero h1 em .wort > span{background:linear-gradient(100deg,#E3B85A 35%,#FFF4D6 50%,#E3B85A 65%) 120% 0/260% 100% no-repeat,#E3B85A;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:wortHoch 1s cubic-bezier(.2,.9,.2,1) both,textGlanz 6s ease-in-out infinite;animation-delay:calc(var(--hv,0s) + .2s + var(--w,0) * .09s),calc(var(--hv,0s) + 2.4s)}
@keyframes textGlanz{0%{background-position:120% 0}30%,100%{background-position:-20% 0}}

/* Live-Uhr „Wir sind jetzt erreichbar" */
.im-dienst{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:9px 16px 9px 12px;border:1px solid rgba(227,184,90,.35);border-radius:999px;
  background:rgba(20,20,20,.55);backdrop-filter:blur(6px);color:#E9E4DA;font:600 14px/1.2 Montserrat,sans-serif;text-decoration:none;position:relative;z-index:1}
.im-dienst:hover{border-color:#E3B85A;color:#fff}
.im-dienst b{color:#E3B85A;font-variant-numeric:tabular-nums;letter-spacing:.03em}
.im-dienst .led{width:9px;height:9px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:led 2s infinite}
@keyframes led{0%{box-shadow:0 0 0 0 rgba(61,220,132,.6)}70%{box-shadow:0 0 0 10px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.im-dienst .doppel{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* Taschenlampe in dunklen Abschnitten */
@property --lx{syntax:'<length-percentage>';inherits:true;initial-value:30%}
@property --ly{syntax:'<length-percentage>';inherits:true;initial-value:40%}
section.dark.mit-lampe{position:relative;overflow:hidden}
section.dark.mit-lampe > .wrap{position:relative;z-index:1}
.lampe{position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--lampe-bild) center/cover no-repeat;opacity:.9;filter:brightness(1.6) saturate(.9);
  -webkit-mask:radial-gradient(circle 260px at var(--lx) var(--ly),#000 0,rgba(0,0,0,.7) 40%,transparent 100%);mask:radial-gradient(circle 260px at var(--lx) var(--ly),#000 0,rgba(0,0,0,.7) 40%,transparent 100%)}
.lampe:after{content:"";position:absolute;inset:0;background:radial-gradient(circle 320px at var(--lx) var(--ly),rgba(255,214,140,.26),transparent 70%)}
section.dark.lampe-auto .lampe{animation:lampeWandern 14s ease-in-out infinite alternate}
@keyframes lampeWandern{0%{--lx:12%;--ly:30%}25%{--lx:70%;--ly:18%}50%{--lx:85%;--ly:70%}75%{--lx:35%;--ly:85%}100%{--lx:55%;--ly:45%}}
.lampe-tipp{position:absolute;right:20px;top:18px;z-index:1;color:rgba(227,184,90,.7);font:600 12px/1 Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase;pointer-events:none;transition:opacity .6s}
section.dark.lampe-benutzt .lampe-tipp{opacity:0}

/* Goldener Zeiger und magnetische Knöpfe (nur Maus) */
.zeiger,.zeiger-punkt{position:fixed;left:0;top:0;pointer-events:none;z-index:2000;border-radius:50%;opacity:0;transition:opacity .3s,width .25s,height .25s,margin .25s,background-color .25s,border-color .25s}
.zeiger{width:36px;height:36px;margin:-18px 0 0 -18px;border:1.5px solid rgba(227,184,90,.85)}
.zeiger-punkt{width:6px;height:6px;margin:-3px 0 0 -3px;background:#E3B85A}
html.zeiger-an .zeiger,html.zeiger-an .zeiger-punkt{opacity:1}
html.zeiger-gross .zeiger{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(227,184,90,.14);border-color:#E3B85A}
html.zeiger-gross .zeiger-punkt{opacity:0}
.btn{transition:transform .25s cubic-bezier(.2,.9,.2,1),background-color .2s,color .2s,border-color .2s,box-shadow .2s}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none !important;transition:none !important}
  html.js .rv{opacity:1;transform:none}
  html.js .bild-breit{clip-path:none}
  html.js .bild-breit img{transform:none}
  html.js .bild-breit figcaption{opacity:1;translate:none}
  html.js .karte .punkt,html.js .karte .ort{opacity:1}
  .karte .strahl{stroke-dashoffset:0}
  .hero canvas.funken,.karte .radar,.zeiger,.zeiger-punkt,.lampe,.lampe-tipp{display:none}
  .hero h1 em .wort > span{color:#E3B85A;background:none}
}