
@font-face{font-family:Montserrat;font-weight:200;src:url("../fonts/font-01.woff2") format("woff2");font-display:swap}
@font-face{font-family:Montserrat;font-weight:300;src:url("../fonts/font-02.woff2") format("woff2");font-display:swap}
@font-face{font-family:Montserrat;font-weight:400;src:url("../fonts/font-03.woff2") format("woff2");font-display:swap}
@font-face{font-family:Walkway;src:url("../fonts/font-04.woff2") format("woff2");font-display:swap}

/* Farbsystem laut Brandbook: sieben tragen, eine zeigt */
:root{
  --tiefe:#1B222A;--schiefer:#2B353F;--papier:#F1F0F0;--frost:#DEE8F4;
  --weiss:#FFFFFF;--eislicht:#C9EBFD;--salbei:#A8C4C0;--dunst:#C3CFD8;
  --stahl:#3E4C57;--nebel:#98A4AE;--linie:#46525D;--pastellrot:#E7D0C8;
  --kernlicht:#4FB6E8;--kerndunkel:#0E6FA8;
  --t:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* Bewegung laut Brandbook: beschleunigt kurz, bremst lange, nie wippend */
  --kurve:cubic-bezier(.22,.61,.36,1);
  --breite:1280px;--luft:clamp(5.5rem,12vw,11rem);--r:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--tiefe);color:var(--papier);font:300 clamp(1rem,1.1vw,1.125rem)/1.65 var(--t);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
.wrap{width:min(var(--breite),100% - 2*clamp(1rem,4.5vw,3.5rem));margin-inline:auto}
.sektion{padding-block:var(--luft);position:relative}

/* Gründe: Tiefe trägt das Bild, Schiefer das Argument, Papier und Frost die helle Seite */
.g-tiefe{background:var(--tiefe);color:var(--papier)}
.g-schiefer{background:var(--schiefer);color:var(--papier)}
.g-papier{background:var(--papier);color:var(--tiefe)}
.g-frost{background:var(--frost);color:var(--tiefe)}

/* Typografie: eine Familie. ExtraLight für Display, Light für Text, Regular unter 16 px */
.label{font:400 .72rem/1 var(--t);letter-spacing:.3em;text-transform:uppercase;color:var(--nebel);margin-bottom:1.8rem;display:flex;align-items:center;gap:.9rem}
.label::before{content:"";width:2.2rem;height:1px;background:currentColor;opacity:.6}
.g-papier .label,.g-frost .label{color:var(--stahl)}
.h-riesig,.h2{font-family:var(--t);font-weight:200;letter-spacing:0;text-wrap:balance}
.h-riesig{font-size:clamp(3rem,9.6vw,9.4rem);line-height:.98}
.h2{font-size:clamp(2.4rem,6.4vw,6rem);line-height:1.02;max-width:17ch}
.h3{font-weight:400;font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.25;letter-spacing:0}
.h-riesig em,.h2 em{font-style:normal;color:var(--kernlicht)}
.g-papier .h2 em,.g-frost .h2 em{color:var(--kerndunkel)}
.lead{font-size:clamp(1.12rem,1.55vw,1.4rem);line-height:1.55;max-width:42ch;color:var(--frost)}
.g-papier .lead,.g-frost .lead{color:var(--schiefer)}
.quelle{font:400 .75rem/1.5 var(--t);color:var(--nebel);margin-top:1rem}
.g-papier .quelle,.g-frost .quelle{color:var(--stahl)}

.knopf{display:inline-flex;align-items:center;gap:.7em;padding:1.05em 1.7em;border-radius:999px;background:var(--kernlicht);color:var(--tiefe);font:400 .95rem/1 var(--t);text-decoration:none;transition:background .72s var(--kurve),transform .72s var(--kurve);-webkit-tap-highlight-color:transparent}
.knopf::after{content:"→";transition:transform .72s var(--kurve)}
.knopf:hover{background:var(--eislicht)}
.knopf:hover::after{transform:translateX(4px)}
.knopf:active{transform:scale(.97);transition-duration:.1s}
.knopf--hell{background:transparent;color:var(--papier);box-shadow:inset 0 0 0 1px rgba(241,240,240,.35)}
.knopf--hell::after{content:"↓"}
.knopf--hell:hover{background:rgba(241,240,240,.08)}
.knopf--hell:hover::after{transform:translateY(3px)}
:focus-visible{outline:2px solid var(--kernlicht);outline-offset:3px}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--papier);color:var(--tiefe);padding:.5rem 1rem}

/* Icons: 100er Raster, Strich 2,4, runde Enden, nie gefüllt */
.icon{width:var(--gr,72px);height:var(--gr,72px);fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible;color:var(--eislicht)}
.g-papier .icon,.g-frost .icon,.flaeche .icon{color:var(--kerndunkel)}
.zeichnen .icon{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.9s var(--kurve)}
.zeichnen.da .icon{stroke-dashoffset:0}

/* Navigation */
.nav{position:fixed;inset:0 0 auto;z-index:50;transition:background .72s var(--kurve)}
.nav.fest{background:rgba(27,34,42,.62);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%)}
.nav::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;pointer-events:none;background:linear-gradient(180deg,rgba(27,34,42,.4),rgba(27,34,42,0));opacity:0;transition:opacity .72s var(--kurve)}
.nav.fest::after{opacity:1}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.nav img{height:28px;width:auto}
.nav ul{display:flex;gap:2.2rem;list-style:none;font:400 .72rem/1 var(--t);letter-spacing:.3em;text-transform:uppercase}
.nav ul a{text-decoration:none;opacity:.72;transition:opacity .72s var(--kurve)}.nav ul a:hover{opacity:1}
.nav .rechts{display:flex;align-items:center;gap:1.4rem}
.nav .klein{font:400 .78rem/1 var(--t);opacity:.6;text-decoration:none}
.nav .knopf{padding:.8em 1.25em;font-size:.82rem}
.nav .knopf::after{content:none}
@media (max-width:1040px){.nav ul{display:none}.nav .klein{display:none}}

/* Bild- und Videogrund */
.grund{position:absolute;inset:0;z-index:-2;overflow:hidden}
.grund img,.grund video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.grund video{opacity:0;transition:opacity 1.2s var(--kurve)}
.grund video.laeuft{opacity:1}

/* Header */
.header{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:8rem 0 clamp(3rem,8vh,6rem);isolation:isolate;overflow:hidden}
.header .grund{will-change:transform}
.header::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(27,34,42,.45) 0%,rgba(27,34,42,.1) 35%,rgba(27,34,42,.55) 70%,rgba(27,34,42,.96) 100%)}
.header>.wrap{will-change:transform,opacity}
.header .lead{margin-top:2rem}
.header .aktionen{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.6rem}
.claim{font-family:Walkway,var(--t);font-size:clamp(.78rem,1.1vw,.95rem);letter-spacing:.3em;color:var(--eislicht);margin-top:3.2rem}
.scrollhinweis{position:absolute;right:clamp(1rem,4.5vw,3.5rem);bottom:clamp(3rem,8vh,6rem);width:1px;height:72px;background:rgba(241,240,240,.2);overflow:hidden}
.scrollhinweis::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--kernlicht);animation:tropfen 2.6s var(--kurve) infinite}
@keyframes tropfen{to{top:100%}}

/* Einblenden laut Brandbook: 720 ms Überblendung, 1150 ms Skalierung von 1.028 auf 1 */
.ein{opacity:0;transform:translateY(22px) scale(1.028);transform-origin:50% 100%;transition:opacity .72s var(--kurve),transform 1.15s var(--kurve)}
.ein.da{opacity:1;transform:none}

/* Problem */
.fragenpaar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(3rem,6vw,5rem)}
.karte{background:var(--weiss);color:var(--tiefe);border-radius:var(--r);padding:clamp(2rem,4vw,3.4rem);display:flex;flex-direction:column;gap:1.6rem;min-height:22rem}
.karte .nr{font:400 .72rem/1 var(--t);letter-spacing:.3em;color:var(--stahl)}
.karte .h3{font-weight:200;font-size:clamp(1.7rem,2.8vw,2.6rem);line-height:1.1;letter-spacing:0}
.karte p{color:var(--schiefer);max-width:36ch;margin-top:auto}
.karte .icon{--gr:clamp(88px,10vw,148px)}
.zahlband{margin-top:clamp(1rem,2vw,1.5rem);background:var(--eislicht);color:var(--tiefe);border-radius:var(--r);padding:clamp(2rem,5vw,4rem);display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,5vw,5rem);align-items:center}
.zahlband strong{font-weight:200;font-size:clamp(5.5rem,16vw,14rem);line-height:.85;letter-spacing:0;color:var(--kerndunkel)}
.zahlband p{font-size:clamp(1.15rem,1.9vw,1.6rem);line-height:1.4;max-width:30ch;color:var(--tiefe)}
.zahlband .quelle{color:var(--stahl);font-size:.75rem}
@media (max-width:760px){.fragenpaar,.zahlband{grid-template-columns:1fr}.karte{min-height:0}}

/* Prinzip */
.buehne{position:relative;isolation:isolate;padding-block:var(--luft);overflow:hidden}
.buehne::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(27,34,42,.95) 0%,rgba(27,34,42,.78) 50%,rgba(27,34,42,.5) 100%)}
.prinzip{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.prinzip .h2{max-width:13ch;font-size:clamp(2.4rem,4.6vw,4.6rem)}
.prinzip .lead{margin-top:2rem}
.schaubild{width:100%;height:auto}
.schaubild text{font-family:var(--t);font-weight:400;font-size:13px;letter-spacing:.24em;fill:var(--nebel);text-transform:uppercase}
.betrieb{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.75rem,1.5vw,1.25rem);margin-top:clamp(3.5rem,7vw,6rem);list-style:none}
.betrieb li{border-top:1px solid rgba(201,235,253,.3);padding-top:1.4rem;display:flex;flex-direction:column;gap:1rem}
.betrieb .icon{--gr:clamp(64px,6vw,92px)}
.betrieb span{font-size:clamp(1rem,1.3vw,1.2rem);color:var(--frost)}
@media (max-width:900px){.prinzip{grid-template-columns:1fr}.betrieb{grid-template-columns:1fr 1fr}}

/* Plattform: Stufen */
.stufen{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.75rem,1.5vw,1.25rem);margin-top:clamp(3rem,6vw,5rem);list-style:none}
.stufe{border-radius:var(--r);padding:clamp(1.6rem,2.6vw,2.4rem);background:var(--weiss);color:var(--tiefe);min-height:22rem;display:flex;flex-direction:column;gap:1.4rem}
.stufe .kopf{display:flex;justify-content:space-between;align-items:flex-start}
.stufe .nr{font-weight:200;font-size:clamp(3rem,5.5vw,5rem);line-height:.9;letter-spacing:0;color:var(--dunst)}
.stufe .icon{--gr:clamp(60px,6vw,88px)}
.stufe .h3{margin-top:auto}
.stufe p{color:var(--schiefer);margin-top:.4rem;font-size:.98rem}
.stufe--cavelon{background:var(--tiefe);color:var(--papier)}
.stufe--cavelon .nr{color:var(--kernlicht)}
.stufe--cavelon .icon{color:var(--eislicht)}
.stufe--cavelon p{color:var(--frost)}
.stufen .marke{grid-column:3/5;display:flex;align-items:center;gap:1rem;font:400 .72rem/1 var(--t);letter-spacing:.3em;text-transform:uppercase;color:var(--kerndunkel)}
.stufen .marke::before,.stufen .marke::after{content:"";flex:1;height:1px;background:var(--kerndunkel)}
.nachsatz{font-weight:200;font-size:clamp(1.8rem,3.6vw,3.2rem);line-height:1.15;letter-spacing:0;max-width:24ch;margin-top:clamp(3.5rem,7vw,6rem)}
.nachsatz em{font-style:normal;color:var(--kerndunkel)}
@media (max-width:900px){.stufen{grid-template-columns:1fr 1fr}.stufen .marke{grid-column:1/3}}
@media (max-width:520px){.stufen{grid-template-columns:1fr}.stufen .marke{grid-column:1}.stufe{min-height:0}}

/* Versprechen: drei Flächen und Bild, gleichrangig */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.75rem,1.5vw,1.25rem);margin-top:clamp(3rem,6vw,5rem)}
.kachel{position:relative;border-radius:var(--r);overflow:hidden;min-height:clamp(22rem,36vw,30rem);display:flex;flex-direction:column;justify-content:space-between;gap:2rem;padding:clamp(1.8rem,3vw,2.8rem);isolation:isolate;grid-column:span 2}
.kachel--gross{grid-column:span 3}
.kachel .h3{font-weight:200;font-size:clamp(2rem,3.4vw,3.2rem);line-height:1;letter-spacing:0;margin-bottom:1rem}
.kachel p{max-width:34ch}
.kachel .icon{--gr:clamp(84px,8.5vw,128px)}
.kachel--bild{color:var(--papier)}
.kachel--bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.15s var(--kurve)}
.kachel--bild:hover img{transform:scale(1.04)}
.kachel--bild::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(27,34,42,.25) 0%,rgba(27,34,42,.1) 35%,rgba(27,34,42,.92) 85%)}
.kachel--bild p{color:var(--frost)}
.flaeche{color:var(--tiefe)}
.flaeche p{color:var(--schiefer)}
.f-eislicht{background:var(--eislicht)}
.f-salbei{background:var(--salbei)}
.f-weiss{background:var(--weiss)}
.beleg{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-top:1.4rem}
.beleg strong{font-weight:200;font-size:clamp(2.8rem,5vw,4.4rem);line-height:1;letter-spacing:0;color:var(--kerndunkel)}
.beleg span{font:400 .78rem/1.4 var(--t);color:var(--stahl);max-width:22ch}
@media (max-width:960px){.bento{grid-template-columns:1fr 1fr}.kachel,.kachel--gross{grid-column:span 1}.kachel--gross:first-child{grid-column:span 2}}
@media (max-width:600px){.bento{grid-template-columns:1fr}.kachel,.kachel--gross,.kachel--gross:first-child{grid-column:span 1}}

/* Referenzen */
.kennzahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(3rem,6vw,5rem);list-style:none}
.kennzahlen li{background:var(--weiss);border-radius:var(--r);padding:clamp(1.6rem,3vw,2.6rem)}
.kennzahlen li:first-child{background:var(--tiefe);color:var(--papier)}
.kennzahlen strong{display:block;font-weight:200;font-size:clamp(3.2rem,7vw,6.2rem);line-height:1;letter-spacing:0;color:var(--kerndunkel)}
.kennzahlen li:first-child strong{color:var(--kernlicht)}
.kennzahlen span{display:block;margin-top:1rem;max-width:26ch;color:var(--schiefer)}
.kennzahlen li:first-child span{color:var(--frost)}
.band{margin-top:clamp(4rem,8vw,6rem);overflow:hidden;background:var(--weiss);padding-block:2rem;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.band ul{display:flex;gap:4rem;width:max-content;list-style:none;animation:laufen 60s linear infinite}
.band li{font-weight:200;font-size:clamp(1.3rem,2.2vw,1.9rem);letter-spacing:0;white-space:nowrap;color:var(--schiefer);display:flex;align-items:center;gap:4rem}
.band li::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--kernlicht)}

@keyframes laufen{to{transform:translateX(-50%)}}
@media (max-width:760px){.kennzahlen{grid-template-columns:1fr}}

/* Haltung */
.haltung{position:relative;isolation:isolate;padding-block:calc(var(--luft)*1.15);overflow:hidden}
.haltung::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(27,34,42,.9),rgba(27,34,42,.55) 60%,rgba(27,34,42,.35))}
.haltung blockquote{margin-top:2.6rem;max-width:46ch;padding-left:1.6rem;border-left:1px solid var(--kernlicht)}
.haltung blockquote p{font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.55;color:var(--frost)}
.haltung cite{display:block;margin-top:1.4rem;font:400 .72rem/1 var(--t);font-style:normal;letter-spacing:.3em;text-transform:uppercase;color:var(--nebel)}
.schluss{font-weight:200;font-size:clamp(3rem,8.4vw,8rem);line-height:1;letter-spacing:0;margin-top:clamp(4.5rem,9vw,8rem)}
.schluss em{font-style:normal;color:var(--kernlicht)}
.austria{margin-top:1.8rem;font:400 .72rem/1 var(--t);letter-spacing:.3em;color:var(--eislicht)}

/* Fragen */
.fragen{margin-top:clamp(3rem,6vw,5rem);display:grid;gap:.75rem}
.fragen details{background:var(--weiss);border-radius:18px;overflow:hidden}
.fragen summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:3.4rem 1fr 2.6rem;gap:1rem;align-items:center;padding:1.5rem clamp(1.2rem,2.5vw,2rem);font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:300;color:var(--tiefe);-webkit-tap-highlight-color:transparent;transition:color .72s var(--kurve)}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary .nr{font-weight:200;font-size:1.6rem;letter-spacing:0;color:var(--kerndunkel)}
.fragen summary .plus{width:2.6rem;height:2.6rem;border-radius:50%;background:var(--frost);position:relative;transition:transform .72s var(--kurve),background .72s var(--kurve)}
.fragen summary .plus::before,.fragen summary .plus::after{content:"";position:absolute;left:50%;top:50%;width:.9rem;height:1.4px;background:var(--tiefe);transform:translate(-50%,-50%);transition:background .72s var(--kurve)}
.fragen summary .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.fragen details[open]:not(.schliesst) .plus{transform:rotate(45deg);background:var(--kerndunkel)}
.fragen details[open]:not(.schliesst) .plus::before,.fragen details[open]:not(.schliesst) .plus::after{background:var(--weiss)}
.fragen summary:hover{color:var(--kerndunkel)}
.fragen .antwort{padding:0 clamp(1.2rem,2.5vw,2rem) 2rem calc(clamp(1.2rem,2.5vw,2rem) + 4.4rem);max-width:80ch;color:var(--schiefer);transition:opacity .72s var(--kurve)}
.fragen details.schliesst .antwort{opacity:0}
.fragen .antwort p+p{margin-top:.9rem}
.fragen .antwort .quelle{margin-top:1.2rem}
@media (max-width:600px){.fragen summary{grid-template-columns:2.4rem 1fr 2.6rem}.fragen .antwort{padding-left:clamp(1.2rem,2.5vw,2rem)}}

/* Kontakt */
.kontakt{position:relative;isolation:isolate;min-height:92svh;display:flex;align-items:center;padding-block:var(--luft);overflow:hidden}
.kontakt::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(27,34,42,.9),rgba(27,34,42,.55) 50%,rgba(27,34,42,.95))}
.kontakt .h2{max-width:13ch}
.kontakt .lead{margin-top:2rem}
.kontakt .knopfzeile{margin-top:2.6rem}
.wege{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:clamp(3.5rem,7vw,6rem);list-style:none}
.wege li{border-top:1px solid rgba(201,235,253,.3);padding-top:1.3rem}
.wege small{display:block;font:400 .7rem/1 var(--t);letter-spacing:.3em;text-transform:uppercase;color:var(--nebel);margin-bottom:.7rem}
.wege a{text-decoration:none;transition:color .72s var(--kurve)}.wege a:hover{color:var(--kernlicht)}
@media (max-width:760px){.wege{grid-template-columns:1fr}}

/* Footer und Impressum */
.fuss{background:var(--tiefe);padding-block:2.6rem;font:400 .78rem/1.5 var(--t);color:var(--nebel)}
.fuss .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
.fuss img{height:22px;width:auto;opacity:.85}
.fuss button{background:none;border:0;color:inherit;font:inherit;cursor:pointer;text-decoration:underline}
dialog#impressum{max-width:760px;width:calc(100% - 2rem);max-height:85vh;margin:auto;background:var(--papier);color:var(--tiefe);border:0;border-radius:var(--r);padding:clamp(1.5rem,4vw,3rem);font-size:.92rem;transform-origin:50% 100%;opacity:0;transform:translateY(16px) scale(1.028);transition:opacity .72s var(--kurve),transform 1.15s var(--kurve),overlay .72s allow-discrete,display .72s allow-discrete}
dialog#impressum[open]{opacity:1;transform:none}
@starting-style{dialog#impressum[open]{opacity:0;transform:translateY(16px) scale(1.028)}}
dialog#impressum::backdrop{background:rgba(10,14,18,0);transition:background .72s var(--kurve),overlay .72s allow-discrete,display .72s allow-discrete}
dialog#impressum[open]::backdrop{background:rgba(10,14,18,.78)}
@starting-style{dialog#impressum[open]::backdrop{background:rgba(10,14,18,0)}}
dialog#impressum h2{font-weight:200;font-size:2.2rem;letter-spacing:0;margin-bottom:1.5rem}
dialog#impressum h3{font:400 .7rem/1 var(--t);color:var(--kerndunkel);letter-spacing:.3em;text-transform:uppercase;margin:1.8rem 0 .6rem}
dialog#impressum ul{margin:.4rem 0 .6rem 1.2rem}
dialog#impressum .zu{position:sticky;top:0;float:right;background:var(--tiefe);border:0;color:var(--papier);border-radius:999px;padding:.6em 1.1em;cursor:pointer;font:400 .8rem/1 var(--t)}

/* Pflicht laut Brandbook: reduzierte Bewegung schaltet jede Bewegung vollständig ab */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .ein{opacity:1;transform:none}
  .zeichnen .icon{stroke-dashoffset:0}
  .grund video{display:none}
  .band ul{flex-wrap:wrap;width:auto;gap:1rem 3rem;padding-inline:2rem}.band li[aria-hidden]{display:none}.band{-webkit-mask:none;mask:none}
  .scrollhinweis{display:none}
}
@media (prefers-reduced-transparency:reduce){.nav.fest{background:var(--tiefe);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (prefers-contrast:more){.nav.fest{background:var(--tiefe)}.lead,.kachel--bild p,.haltung blockquote p{color:var(--papier)}}
@media (max-width:420px){.h2{font-size:2.15rem}.h-riesig{font-size:2.9rem}}

/* Allgemeine Hilfen */
.zentriert{text-align:center;display:flex;flex-direction:column;align-items:center}
.zentriert .h2,.zentriert .lead{margin-inline:auto}
.raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.kleben{position:sticky;top:10rem}
.g-eis{background:var(--eislicht);color:var(--tiefe)}
.g-salbei{background:var(--salbei);color:var(--tiefe)}
.g-eis .label,.g-salbei .label{color:var(--stahl)}
.g-eis .h2 em,.g-salbei .h2 em{color:var(--kerndunkel)}
.g-eis .lead,.g-salbei .lead{color:var(--schiefer)}
.g-eis .icon,.g-salbei .icon{color:var(--kerndunkel)}
.g-tiefe .icon,.g-schiefer .icon{color:var(--eislicht)}
.variante .lead{margin-top:1.8rem}
.knopf--dunkel{background:transparent;color:var(--tiefe);box-shadow:inset 0 0 0 1px var(--nebel)}
.knopf--dunkel::after{content:"↓"}
.knopf--tiefe{background:var(--tiefe);color:var(--papier)}
.knopf--tiefe:hover{background:var(--schiefer)}
.teil-text{display:flex;align-items:center;padding:clamp(6rem,10vw,9rem) clamp(1rem,5vw,5rem)}
.teil-bild{position:relative;min-height:60vh}
.teil-bild img,.teil-bild video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.teil-bild video{opacity:0;transition:opacity 1.2s var(--kurve)}.teil-bild video.laeuft{opacity:1}
@media (max-width:900px){.raster{grid-template-columns:1fr}.kleben{position:static}}

/* Rahmen wie im Logo: gerundet, unten offen, die Zeile steht in der Öffnung */
.rahmen{position:relative;border:1.5px solid var(--eislicht);border-bottom-color:transparent;border-radius:48px;padding:clamp(2.5rem,6vw,5.5rem) clamp(1.5rem,5vw,5rem) clamp(3.5rem,7vw,6rem);text-align:center;display:flex;flex-direction:column;align-items:center}
.rahmen::before,.rahmen::after{content:"";position:absolute;bottom:-1.5px;height:1.5px;background:var(--eislicht);width:calc(50% - 11rem)}
.rahmen::before{left:40px}.rahmen::after{right:40px}
.rahmen .rahmen-zeile{position:absolute;bottom:-.55em;left:50%;transform:translateX(-50%);font-family:Walkway,var(--t);letter-spacing:.3em;font-size:clamp(.8rem,1.3vw,1.05rem);color:var(--eislicht);white-space:nowrap}
.rahmen .lead{margin-inline:auto}

/* ================= HEADER ================= */
.vh2 .wrap{padding-top:4rem}
.vh2 .logo-gross{width:min(420px,70vw);height:auto;margin-bottom:3rem}
.vh2{align-items:center}
.vh3{display:grid;grid-template-columns:1fr 1fr;min-height:100svh;background:var(--tiefe)}
.vh3 .h-riesig{font-size:clamp(2.8rem,6.4vw,6.6rem)}
.vh3 .teil-bild{min-height:100%}
@media (max-width:900px){.vh3{grid-template-columns:1fr}}
.vh4{padding-top:10rem;padding-bottom:3rem}
.vh4 .zeile{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap}
.vh4 .zeile .lead{margin-top:0}
.vh4 .bildband{position:relative;margin-top:3rem}
.vh4 .bildband img{width:100%;height:52vh;object-fit:cover;border-radius:var(--r)}
.vh4 .bildband .claim{position:absolute;left:2rem;bottom:1.6rem;margin:0}
.vh5{align-items:center}
.vh5 .h-riesig{font-size:clamp(2.6rem,7vw,7rem)}
.vh6{padding:10rem 0 5rem;min-height:100svh;display:flex;align-items:center}
.vh6 .raster{align-items:center}
.vh6 .h-riesig{font-size:clamp(2.8rem,6.6vw,6.8rem)}
.vh6 .h-riesig em{color:var(--kerndunkel)}
.vh6 .lead{color:var(--schiefer)}
.vh6 .bildkarte{position:relative}
.vh6 .bildkarte img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.vh6 .bildkarte .claim{position:absolute;left:1.6rem;bottom:1.4rem;margin:0}
.vh7 .tafel{background:var(--eislicht);color:var(--tiefe);border-radius:var(--r);padding:clamp(2rem,5vw,4.5rem);max-width:58rem}
.vh7 .tafel .label{color:var(--stahl)}
.vh7 .tafel .h-riesig{font-size:clamp(2.6rem,6.6vw,6.4rem)}
.vh7 .tafel .h-riesig em{color:var(--kerndunkel)}
.vh7 .tafel .lead{color:var(--schiefer)}
.vh8 .fakten{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3.5rem;border-top:1px solid rgba(201,235,253,.3);padding-top:1.6rem}
.vh8 .fakten li{display:flex;align-items:center;gap:1rem;color:var(--frost)}
.vh8 .fakten .icon{--gr:52px;flex:none}
@media (max-width:760px){.vh8 .fakten{grid-template-columns:1fr}}
.vh9{padding-top:9rem}
.vh9 .kopf .zeile{display:grid;grid-template-columns:1.3fr 1fr;gap:3rem;align-items:end}
.vh9 .kopf .lead{margin-top:0}
.vh9 .fenster{position:relative;margin:4rem clamp(1rem,4.5vw,3.5rem) 0}
.vh9 .fenster img{width:100%;height:58vh;object-fit:cover;border-radius:40px 40px 0 0}
.vh9 .fenster .claim{position:absolute;right:2rem;bottom:1.5rem;margin:0}
@media (max-width:900px){.vh9 .kopf .zeile{grid-template-columns:1fr}}
.vh10{align-items:center}
.vh10::after{background:rgba(27,34,42,.82)!important}
.vh10 .punkt{width:18px;height:18px;border-radius:50%;background:var(--kernlicht);box-shadow:0 0 0 12px rgba(79,182,232,.12),0 0 60px 10px rgba(79,182,232,.45);margin-bottom:3rem;animation:puls 4.6s var(--kurve) infinite alternate}
@keyframes puls{from{opacity:.55}to{opacity:1}}
.vh10 .knopf{margin-top:2.4rem}

/* ================= PROBLEM ================= */
.vp2 .riesenzahl{font-weight:200;font-size:clamp(7rem,24vw,22rem);line-height:.82;color:var(--kerndunkel)}
.vp2 .zahltext{font-size:clamp(1.2rem,2vw,1.7rem);max-width:34ch;margin-top:2rem}
.vp2 .h2{margin-top:clamp(4rem,8vw,7rem)}
.zwei-linien{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:3rem}
.linie{border-top:1px solid var(--dunst);padding-top:1.6rem;display:flex;flex-direction:column;gap:1rem}
.linie .icon{--gr:72px}.linie .nr{font:400 .72rem/1 var(--t);letter-spacing:.3em;color:var(--stahl)}
.linie .h3{font-weight:200;font-size:clamp(1.7rem,2.6vw,2.4rem)}
.linie p{color:var(--schiefer)}
.vp3 .haelften{display:grid;grid-template-columns:1fr 1fr}
.haelfte{padding:clamp(4rem,9vw,8rem) clamp(1.5rem,5vw,5rem);display:flex;flex-direction:column;gap:1.4rem;min-height:70vh}
.haelfte .icon{--gr:clamp(88px,10vw,140px)}
.haelfte .nr{font:400 .72rem/1 var(--t);letter-spacing:.3em}
.haelfte h3{font-weight:200;font-size:clamp(2.2rem,4.4vw,4.2rem);line-height:1.05;margin-top:auto}
.haelfte p{max-width:34ch}
.h-hell{background:var(--weiss);color:var(--tiefe)}.h-hell .icon{color:var(--kerndunkel)}.h-hell .nr{color:var(--stahl)}.h-hell p{color:var(--schiefer)}
.h-dunkel{background:var(--tiefe);color:var(--papier)}.h-dunkel .nr{color:var(--nebel)}.h-dunkel p{color:var(--frost)}
.vp3 .streifen{background:var(--eislicht);color:var(--tiefe);padding:3rem 0}
.vp3 .streifen .wrap{display:flex;align-items:center;gap:3rem;flex-wrap:wrap}
.vp3 .streifen strong{font-weight:200;font-size:clamp(4rem,10vw,8rem);line-height:1;color:var(--kerndunkel)}
.vp3 .streifen p{max-width:40ch;font-size:1.15rem}.vp3 .streifen .quelle{display:block;color:var(--stahl)}
@media (max-width:760px){.vp3 .haelften,.zwei-linien{grid-template-columns:1fr}.haelfte{min-height:0}}
.vp4 .zeilen{margin-top:4rem;border-top:1px solid var(--dunst)}
.zeile-q{display:grid;grid-template-columns:8rem 1.2fr 1fr;gap:2rem;align-items:baseline;padding:2.6rem 0;border-bottom:1px solid var(--dunst)}
.zeile-q .gnr{font-weight:200;font-size:4rem;line-height:1;color:var(--kerndunkel)}
.zeile-q h3{font-weight:200;font-size:clamp(1.8rem,3.4vw,3.2rem);line-height:1.1}
.zeile-q p{color:var(--schiefer)}
.vp4 .kasten{margin-top:3rem;background:var(--tiefe);color:var(--papier);border-radius:var(--r);padding:clamp(2rem,4vw,3.5rem);display:grid;grid-template-columns:auto 1fr;gap:1rem 3rem;align-items:center}
.vp4 .kasten strong{grid-row:span 2;font-weight:200;font-size:clamp(4.5rem,11vw,9rem);line-height:.9;color:var(--kernlicht)}
.vp4 .kasten p{color:var(--frost);max-width:40ch;font-size:1.15rem}
@media (max-width:760px){.zeile-q{grid-template-columns:1fr}.vp4 .kasten{grid-template-columns:1fr}}
.frage-kurz{display:flex;gap:1.6rem;margin-top:2.6rem;align-items:flex-start}
.frage-kurz .icon{--gr:64px;flex:none}
.frage-kurz h3{font-weight:300;font-size:1.5rem}.frage-kurz p{color:var(--schiefer);margin-top:.4rem}
.ringbox{position:relative;display:grid;place-items:center}
.ring{width:min(460px,100%);height:auto}
.ringzahl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18%}
.ringzahl strong{font-weight:200;font-size:clamp(3.5rem,8vw,6.5rem);line-height:1;color:var(--kerndunkel)}
.ringzahl p{font-size:.95rem;color:var(--schiefer);margin-top:.6rem}.ringzahl .quelle{font-size:.66rem}
.kontur{border:1.5px solid rgba(201,235,253,.45);border-radius:var(--r);padding:clamp(2rem,4vw,3.4rem);display:flex;flex-direction:column;gap:1.4rem;min-height:22rem}
.kontur .icon{--gr:clamp(88px,10vw,140px)}
.kontur .nr{font:400 .72rem/1 var(--t);letter-spacing:.3em;color:var(--nebel)}
.kontur .h3{font-weight:200;font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.1}
.kontur p{color:var(--frost);margin-top:auto}
.zahl-dunkel{margin-top:4rem;display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:center}
.zahl-dunkel strong{font-weight:200;font-size:clamp(6rem,17vw,15rem);line-height:.85;color:var(--kernlicht)}
.zahl-dunkel p{font-size:1.3rem;color:var(--frost);max-width:32ch}
.drei{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:1.25rem;margin-top:4rem}
.drei .mitte{background:var(--eislicht);border-radius:var(--r);padding:clamp(2rem,3vw,3rem);display:flex;flex-direction:column;justify-content:center}
.drei .mitte strong{font-weight:200;font-size:clamp(4.5rem,9vw,8rem);line-height:.9;color:var(--kerndunkel)}
.drei .mitte p{margin-top:1rem}
@media (max-width:900px){.drei,.zahl-dunkel{grid-template-columns:1fr}}
.vp8 .frage-gross{margin-top:4rem;display:flex;flex-direction:column;align-items:center;gap:1.2rem;max-width:44rem}
.vp8 .frage-gross .icon{--gr:96px}
.vp8 .frage-gross h3{font-weight:200;font-size:clamp(2.4rem,5.4vw,5rem);line-height:1.05}
.vp8 .frage-gross p{color:var(--schiefer);max-width:40ch}
.vp8 .trenner{width:1px;height:6rem;background:var(--kernlicht);margin:4rem 0}
.vp8 .zahl-mitte{font-weight:200;font-size:clamp(6rem,18vw,16rem);line-height:.85;color:var(--kerndunkel)}
.vp8 .zahltext{font-size:1.3rem;max-width:34ch;margin-top:1.5rem}
.vp9{background:var(--salbei);color:var(--tiefe)}.vp9 .label{color:var(--stahl)}.vp9 .h2 em{color:var(--kerndunkel)}
.zahl-tiefe{margin-top:1.25rem;background:var(--tiefe);color:var(--papier);border-radius:var(--r);padding:clamp(2rem,5vw,4rem);display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:center}
.zahl-tiefe strong{font-weight:200;font-size:clamp(5rem,14vw,12rem);line-height:.85;color:var(--kernlicht)}
.zahl-tiefe p{font-size:1.25rem;color:var(--frost);max-width:32ch}
@media (max-width:760px){.zahl-tiefe{grid-template-columns:1fr}}
.icongross{background:var(--weiss);border-radius:var(--r);padding:clamp(2rem,4vw,3.4rem);display:flex;flex-direction:column;gap:1.2rem;align-items:flex-start}
.icongross .icon{--gr:clamp(120px,15vw,200px);color:var(--kerndunkel);margin-bottom:1rem}
.icongross .nr{font:400 .72rem/1 var(--t);letter-spacing:.3em;color:var(--stahl)}
.icongross .h3{font-weight:200;font-size:clamp(1.8rem,3vw,2.8rem)}
.icongross p{color:var(--schiefer)}
.balken{margin-top:3rem}
.balken-kopf{display:flex;align-items:baseline;gap:2rem;flex-wrap:wrap}
.balken-kopf strong{font-weight:200;font-size:clamp(4rem,9vw,7.5rem);line-height:1;color:var(--kerndunkel)}
.balken-kopf p{max-width:44ch;font-size:1.15rem}
.balken-spur{height:14px;border-radius:999px;background:var(--weiss);margin-top:1.6rem;overflow:hidden}
.balken-spur span{display:block;height:100%;background:var(--kerndunkel);border-radius:999px}

/* ================= PRINZIP ================= */
.schaubild-gross{width:min(760px,100%);margin:3rem auto 0}
.schaubild-karte{background:var(--tiefe);border-radius:var(--r);padding:clamp(1.5rem,3vw,3rem)}
.betrieb-karten{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:4rem}
.betrieb-karten li{background:var(--weiss);color:var(--tiefe);border-radius:18px;padding:1.6rem;display:flex;flex-direction:column;gap:1.2rem}
.betrieb-karten .icon{color:var(--kerndunkel)}
.formen-liste{list-style:none;margin-top:3rem;display:grid;gap:1rem}
.formen-liste li{display:flex;align-items:center;gap:1.2rem;padding:1rem 0;border-top:1px solid rgba(201,235,253,.25);color:var(--frost)}
.vr5{display:grid;grid-template-columns:1.1fr 1fr;min-height:100svh}
.vr5 .h2{font-size:clamp(2.4rem,4.6vw,4.4rem)}
@media (max-width:900px){.vr5{grid-template-columns:1fr}.betrieb-karten{grid-template-columns:1fr 1fr}}
.vr6 .durch{font-weight:200;font-size:clamp(2.4rem,6vw,5.6rem);line-height:1.05;color:var(--nebel);text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:var(--kernlicht)}
.vr6 .gegen{font-weight:200;font-size:clamp(3rem,8vw,7.6rem);line-height:1;color:var(--kernlicht);margin-top:1rem}
.betrieb-eis{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:4rem}
.betrieb-eis li{background:var(--eislicht);color:var(--tiefe);border-radius:var(--r);padding:2rem 1.6rem;display:flex;flex-direction:column;gap:2.4rem;min-height:15rem;justify-content:space-between;font-size:1.1rem}
.betrieb-eis .icon{color:var(--kerndunkel)}
@media (max-width:900px){.betrieb-eis{grid-template-columns:1fr 1fr}}
.vergleich{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:4rem}
.vergleich>div{border-radius:var(--r);padding:clamp(2rem,4vw,3.4rem);display:flex;flex-direction:column;gap:1.2rem}
.vergleich .nr{font:400 .72rem/1 var(--t);letter-spacing:.3em}
.vergleich h3{font-weight:200;font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.1}
.v-alt{background:var(--weiss);color:var(--stahl)}.v-alt .icon{color:var(--nebel)}.v-alt h3{color:var(--stahl)}
.v-neu{background:var(--tiefe);color:var(--papier)}.v-neu .icon{color:var(--kernlicht)}.v-neu .nr{color:var(--kernlicht)}.v-neu p{color:var(--frost)}
@media (max-width:760px){.vergleich{grid-template-columns:1fr}}
.vr8{min-height:100svh;display:flex;align-items:center}
.chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:3rem}
.chips li{display:flex;align-items:center;gap:.6rem;border:1px solid rgba(201,235,253,.4);border-radius:999px;padding:.6rem 1.2rem .6rem .8rem;color:var(--eislicht);background:rgba(27,34,42,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.vier{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:4rem}
.vier .f{border-radius:var(--r);padding:clamp(1.6rem,3vw,2.6rem);min-height:22rem;display:flex;flex-direction:column;justify-content:space-between;color:var(--tiefe)}
.vier .f h3{font-weight:200;font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.1}
.vier .f1{background:var(--weiss)}.vier .f2{background:var(--eislicht)}.vier .f3{background:var(--salbei)}
.vier .f4{background:var(--tiefe);color:var(--papier)}.vier .f4 .icon{color:var(--kernlicht)}
.vier .f1 .icon,.vier .f2 .icon,.vier .f3 .icon{color:var(--kerndunkel)}
@media (max-width:900px){.vier{grid-template-columns:1fr 1fr}}
.schaubild-riesig{width:min(1000px,100%);margin:3rem auto}

/* ================= PLATTFORM ================= */
.treppe{align-items:end}
.treppe .stufe:nth-child(1){min-height:16rem}.treppe .stufe:nth-child(2){min-height:21rem}
.treppe .stufe:nth-child(3){min-height:26rem}.treppe .stufe:nth-child(4){min-height:31rem}
.treppe .marke{grid-row:2}
.strahl{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:5rem;position:relative;padding-top:2.6rem}
.strahl::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--dunst)}
.strahl::after{content:"";position:absolute;left:50%;right:0;top:9px;height:2px;background:var(--kerndunkel)}
.strahl li{position:relative;display:flex;flex-direction:column;gap:.9rem}
.strahl .knoten{position:absolute;top:-2.6rem;left:0;width:19px;height:19px;border-radius:50%;background:var(--weiss);border:1.5px solid var(--dunst)}
.strahl li.an .knoten{background:var(--kernlicht);border-color:var(--kernlicht);box-shadow:0 0 0 8px rgba(79,182,232,.18)}
.strahl .nr{font-weight:200;font-size:3.6rem;line-height:1;color:var(--dunst)}
.strahl li.an .nr{color:var(--kerndunkel)}
.strahl h3{font-weight:400;font-size:1.3rem}.strahl p{color:var(--schiefer)}
.klammer{margin:2.4rem 0 0 50%;font:400 .72rem/1 var(--t);letter-spacing:.3em;text-transform:uppercase;color:var(--kerndunkel)}
@media (max-width:760px){.strahl{grid-template-columns:1fr 1fr;row-gap:3.5rem}.strahl::before,.strahl::after{display:none}.klammer{margin-left:0}}
.stufen-zeilen{list-style:none;display:grid;gap:.75rem}
.stufen-zeilen li{display:grid;grid-template-columns:4rem 3rem 1fr;gap:1.2rem;align-items:center;background:var(--weiss);border-radius:18px;padding:1.4rem 1.6rem}
.stufen-zeilen li.an{background:var(--tiefe);color:var(--papier)}.stufen-zeilen li.an p{color:var(--frost)}.stufen-zeilen li.an .icon{color:var(--eislicht)}.stufen-zeilen li.an .nr{color:var(--kernlicht)}
.stufen-zeilen .nr{font-weight:200;font-size:3rem;line-height:1;color:var(--dunst)}
.stufen-zeilen h3{font-weight:400;font-size:1.25rem}.stufen-zeilen p{color:var(--schiefer);font-size:.95rem}
.welten{display:grid;grid-template-columns:1fr 1.4fr;gap:1.25rem;margin-top:4rem}
.welten>div{border-radius:var(--r);padding:clamp(2rem,4vw,3rem);display:grid;gap:2rem;align-content:start}
.welten .nr{font:400 .72rem/1 var(--t);letter-spacing:.3em}
.welt-a{background:var(--weiss);color:var(--stahl)}.welt-a .icon{color:var(--nebel)}
.welt-b{background:var(--tiefe);color:var(--papier);grid-template-columns:1fr 1fr}.welt-b .nr{grid-column:1/-1;color:var(--kernlicht)}.welt-b p{color:var(--frost)}
.welten .w h3{font-weight:300;font-size:1.5rem;margin-top:1rem}
@media (max-width:760px){.welten,.welt-b{grid-template-columns:1fr}}
.ziffern{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:4rem}
.ziffern .nr{display:block;font-weight:200;font-size:clamp(7rem,16vw,14rem);line-height:.85;color:var(--dunst)}
.ziffern li.an .nr{color:var(--kerndunkel)}
.ziffern h3{font-weight:400;font-size:1.3rem;margin-top:1.5rem;border-top:1px solid var(--dunst);padding-top:1rem}
.ziffern li.an h3{border-color:var(--kerndunkel)}
.ziffern p{color:var(--schiefer)}
.unter{margin-top:2rem;font:400 .72rem/1 var(--t);letter-spacing:.3em;text-transform:uppercase;color:var(--kerndunkel)}
@media (max-width:760px){.ziffern{grid-template-columns:1fr 1fr}}
.segmente{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:4rem}
.segmente .seg{display:block;height:10px;border-radius:999px;background:var(--linie);margin-bottom:2rem}
.segmente li.an .seg{background:var(--kernlicht);box-shadow:0 0 24px rgba(79,182,232,.5)}
.segmente .nr{font:400 .72rem/1 var(--t);letter-spacing:.3em;color:var(--nebel);display:block;margin-bottom:1.2rem}
.segmente li.an .nr{color:var(--kernlicht)}
.segmente h3{font-weight:300;font-size:1.5rem;margin-top:1.2rem}.segmente p{color:var(--frost)}
.segmente li:not(.an){opacity:.6}
.vs7 .nachsatz em{color:var(--kernlicht)}
@media (max-width:760px){.segmente{grid-template-columns:1fr 1fr;row-gap:2.5rem}}
.zentral .stufe{align-items:center;text-align:center}
.zentral .kopf{flex-direction:column;align-items:center;gap:1.5rem}
.zentral .stufe--cavelon{background:var(--eislicht);color:var(--tiefe)}.zentral .stufe--cavelon .icon{color:var(--kerndunkel)}.zentral .stufe--cavelon p{color:var(--schiefer)}.zentral .stufe--cavelon .nr{color:var(--kerndunkel)}
.stapel{list-style:none;display:grid;gap:1rem}
.stapel .stufe{min-height:14rem}
.turm{list-style:none;display:grid;gap:.6rem}
.turm li{display:grid;grid-template-columns:3rem 3rem 1fr;align-items:center;gap:1rem;border-radius:16px;padding:1.2rem 1.6rem;background:var(--weiss)}
.turm li:nth-child(1){margin-inline:0}.turm li:nth-child(2){margin-inline:4%}.turm li:nth-child(3){margin-inline:8%}.turm li:nth-child(4){margin-inline:12%}
.turm li.an{background:var(--tiefe);color:var(--papier)}.turm li.an .icon{color:var(--eislicht)}.turm li.an .nr{color:var(--kernlicht)}
.turm .nr{font-weight:200;font-size:2.4rem;line-height:1;color:var(--dunst)}
.turm h3{font-weight:300;font-size:1.35rem}

/* ================= VERSPRECHEN ================= */
.saeulen{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:4rem}
.saeulen .kachel{min-height:30rem;grid-column:auto;padding:1.8rem}
.saeulen .kachel .h3{font-size:clamp(1.6rem,2.2vw,2.1rem)}
@media (max-width:1100px){.saeulen{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.saeulen{grid-template-columns:1fr}}
.vzeilen{list-style:none;margin-top:4rem;border-top:1px solid var(--dunst)}
.vzeilen li{display:grid;grid-template-columns:5rem 6rem 1fr 1.2fr;gap:2rem;align-items:center;padding:2.2rem 0;border-bottom:1px solid var(--dunst)}
.vzeilen .nr{font-weight:200;font-size:2.4rem;color:var(--kerndunkel)}
.vzeilen h3{font-weight:200;font-size:clamp(2rem,3.6vw,3.4rem);line-height:1}
.vzeilen p{color:var(--schiefer)}
@media (max-width:900px){.vzeilen li{grid-template-columns:4rem 1fr}.vzeilen h3,.vzeilen p{grid-column:1/-1}}
.held .kachel{min-height:70vh;grid-column:auto;margin-top:4rem}
.held .kachel .h3{font-size:clamp(3rem,7vw,6.4rem)}
.vier-klein{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1rem}
.vier-klein .kachel{grid-column:auto;min-height:26rem;padding:1.8rem}
.vier-klein .kachel .h3{font-size:clamp(1.6rem,2.2vw,2.2rem)}
@media (max-width:900px){.vier-klein{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.vier-klein{grid-template-columns:1fr}}
.wisch{margin-top:1.4rem;font:400 .72rem/1 var(--t);letter-spacing:.3em;text-transform:uppercase;color:var(--nebel)}
.karussell{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:3rem clamp(1rem,4.5vw,3.5rem) 1rem;scrollbar-width:none}
.karussell::-webkit-scrollbar{display:none}
.karussell .kachel{flex:0 0 min(440px,82vw);min-height:32rem;scroll-snap-align:start}
.hellraster{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:4rem}
.hellraster article{background:var(--weiss);border-radius:var(--r);padding:clamp(1.8rem,3vw,2.6rem);display:flex;flex-direction:column;gap:1.4rem;min-height:22rem}
.hellraster article:first-child{grid-column:span 2;background:var(--tiefe);color:var(--papier)}
.hellraster article:first-child .icon{color:var(--eislicht)}.hellraster article:first-child p{color:var(--frost)}
.hellraster .nr{font-weight:200;font-size:2.4rem;color:var(--kerndunkel)}.hellraster article:first-child .nr{color:var(--kernlicht)}
.hellraster .icon{color:var(--kerndunkel)}
.hellraster h3{font-weight:200;font-size:clamp(1.8rem,2.8vw,2.6rem);margin-top:auto}
.hellraster p{color:var(--schiefer)}
@media (max-width:900px){.hellraster{grid-template-columns:1fr}.hellraster article:first-child{grid-column:auto}}
.liste{display:grid;gap:0}
.liste>div{display:grid;grid-template-columns:4rem 1fr;gap:.4rem 1.4rem;padding:1.8rem 0;border-top:1px solid rgba(62,76,87,.25)}
.liste .icon{grid-row:span 2}
.liste dt{font-weight:200;font-size:clamp(1.8rem,2.8vw,2.6rem);line-height:1}
.liste dd{color:var(--schiefer)}
.konturen{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:4rem}
.konturen article{border:1.5px solid rgba(201,235,253,.35);border-radius:var(--r);padding:clamp(1.8rem,3vw,2.6rem);display:flex;flex-direction:column;gap:1.6rem;min-height:24rem;transition:border-color .72s var(--kurve),background .72s var(--kurve)}
.konturen article:hover{border-color:var(--kernlicht);background:rgba(79,182,232,.06)}
.konturen h3{font-weight:200;font-size:clamp(1.8rem,2.8vw,2.6rem);margin-top:auto}
.konturen p{color:var(--frost)}
@media (max-width:900px){.konturen{grid-template-columns:1fr}}

/* ================= REFERENZEN ================= */
.zahlreihe,.zahlreihe-hell{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:4rem}
.zahlreihe strong,.zahlreihe-hell strong{display:block;font-weight:200;font-size:clamp(3.6rem,8.4vw,7.6rem);line-height:1;color:var(--kernlicht)}
.zahlreihe-hell strong{color:var(--kerndunkel)}
.zahlreihe span{display:block;margin-top:1rem;color:var(--frost);border-top:1px solid var(--linie);padding-top:1rem}
.zahlreihe-hell span{display:block;margin-top:1rem;color:var(--schiefer);border-top:1px solid var(--dunst);padding-top:1rem}
.band-dunkel{background:var(--schiefer)}.band-dunkel li{color:var(--frost)}
.rueckwaerts{margin-top:0}.rueckwaerts ul{animation-direction:reverse}
.namen{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:3rem}
.namen li{background:var(--weiss);border-radius:16px;padding:2rem 1.4rem;font-weight:200;font-size:1.5rem;text-align:center;color:var(--tiefe)}
.namen-text{list-style:none;margin-top:2.4rem;columns:2;gap:2rem}
.namen-text li{padding:.5rem 0;border-bottom:1px solid var(--dunst)}
.zahl-stapel{list-style:none;display:grid;gap:1rem}
.zahl-stapel li{background:var(--weiss);border-radius:var(--r);padding:2rem}
.zahl-stapel li:first-child{background:var(--tiefe);color:var(--papier)}
.zahl-stapel strong{display:block;font-weight:200;font-size:clamp(3.6rem,7vw,6rem);line-height:1;color:var(--kerndunkel)}
.zahl-stapel li:first-child strong{color:var(--kernlicht)}
.zahl-stapel span{display:block;margin-top:.6rem}
.eine{margin-top:4rem;background:var(--eislicht);border-radius:var(--r);padding:clamp(2rem,5vw,4.5rem)}
.eine strong{display:block;font-weight:200;font-size:clamp(6rem,19vw,17rem);line-height:.85;color:var(--kerndunkel)}
.eine p{font-size:clamp(1.2rem,2vw,1.7rem);margin-top:1.5rem;max-width:30ch}
.klein2{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
.klein2 li{background:var(--weiss);border-radius:var(--r);padding:2rem}
.klein2 strong{display:block;font-weight:200;font-size:3.4rem;line-height:1;color:var(--kerndunkel)}
.klein2 span{display:block;margin-top:.6rem;color:var(--schiefer)}
.namen-gross{margin-top:4rem;font-weight:200;font-size:clamp(2rem,4.4vw,4rem);line-height:1.25;color:var(--tiefe)}
.namen-gross span{color:var(--kernlicht);font-size:.4em;vertical-align:middle;margin:0 .3em}
.fall{margin-top:4rem;background:var(--tiefe);color:var(--papier);border-radius:var(--r);padding:clamp(2rem,4vw,3.5rem)}
.fall .nr{font:400 .72rem/1 var(--t);letter-spacing:.3em;color:var(--kernlicht)}
.fall h3{font-weight:200;font-size:clamp(1.8rem,3.2vw,2.8rem);margin-top:1rem;max-width:28ch}
.fall-zahlen{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3rem;border-top:1px solid var(--linie);padding-top:2rem}
.fall-zahlen strong{display:block;font-weight:200;font-size:clamp(3rem,6vw,5rem);line-height:1;color:var(--kernlicht)}
.fall-zahlen span{color:var(--frost);display:block;margin-top:.6rem}
.vf8 .namen{grid-template-columns:repeat(4,1fr)}
.vf9 .kennzahlen li:first-child strong{color:var(--kernlicht)}
.zeitleiste{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:4rem;position:relative}
.zeitleiste li{border-top:2px solid var(--dunst);padding-top:1.6rem}
.zeitleiste li.an{border-color:var(--kerndunkel)}
.zeitleiste .jahr{display:block;font-weight:200;font-size:clamp(2.6rem,5vw,4.4rem);line-height:1;color:var(--kerndunkel)}
.zeitleiste h3{font-weight:400;font-size:1.25rem;margin-top:1rem}.zeitleiste p{color:var(--schiefer)}
@media (max-width:760px){.zahlreihe,.zahlreihe-hell,.namen,.vf8 .namen,.fall-zahlen,.zeitleiste,.klein2{grid-template-columns:1fr}.namen-text{columns:1}}

/* ================= HALTUNG ================= */
.va2 blockquote{border-left:0;padding-left:0;margin-inline:auto}
.va3 .zitat-gross blockquote{border-left:0;padding-left:0;max-width:none;margin-top:3rem}
.va3 .zitat-gross blockquote p{font-weight:200;font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.35;color:var(--tiefe)}
.va3 .zitat-gross cite{color:var(--stahl)}
.schlussblock{background:var(--tiefe);color:var(--papier);padding:clamp(4rem,8vw,7rem) 0;margin-top:var(--luft)}
.schlussblock .schluss{margin-top:0}
.va3{padding-bottom:0}
.va4 .raster{align-items:center}
.va4 .schluss{margin-top:0}
.va4 .h2{font-size:clamp(2rem,3.6vw,3.4rem)}
.va5 .schluss.riesig,.va7 .schluss.riesig{font-size:clamp(3.6rem,11vw,11rem);margin-top:0}
.va5 .unten{margin-top:6rem;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.va5 .unten .h2{font-size:clamp(2rem,3.4vw,3.2rem)}.va5 .unten blockquote{margin-top:0}
@media (max-width:900px){.va5 .unten{grid-template-columns:1fr}}
.va6 .anf{font-weight:200;font-size:clamp(8rem,18vw,16rem);line-height:.6;color:var(--kerndunkel);margin-top:3rem}
.va6 blockquote{border-left:0;padding-left:0;max-width:none;margin-top:0}
.va6 blockquote p{font-weight:200;font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.35;color:var(--tiefe)}
.va6 cite{color:var(--stahl)}
.va6 .schluss em{color:var(--kerndunkel)}.va6 .austria{color:var(--stahl)}
.va7{min-height:100svh;display:flex;align-items:center}
.mehr{margin-top:3rem;max-width:46rem;text-align:left}
.mehr summary{cursor:pointer;list-style:none;display:inline-flex;gap:.6rem;border:1px solid rgba(201,235,253,.4);border-radius:999px;padding:.7rem 1.3rem;color:var(--eislicht)}
.mehr summary::-webkit-details-marker{display:none}
.mehr[open] summary{margin-bottom:2rem}
.mehr .h2{font-size:clamp(1.8rem,3vw,2.8rem)}
.va8 blockquote{border-left-color:var(--kerndunkel)}.va8 blockquote p{color:var(--schiefer)}.va8 cite{color:var(--stahl)}
.tafeln{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:4rem}
.tafeln>div{border-radius:var(--r);padding:clamp(2.4rem,5vw,4.5rem);font-weight:200;font-size:clamp(2.2rem,5vw,4.6rem);line-height:1.05;min-height:20rem;display:flex;align-items:flex-end}
.tafeln .t1{background:var(--weiss);color:var(--stahl)}
.tafeln .t2{background:var(--tiefe);color:var(--kernlicht)}
.va8 .austria{color:var(--stahl)}
@media (max-width:760px){.tafeln{grid-template-columns:1fr}}
.mia{font-weight:200;font-size:clamp(4rem,14vw,13rem);line-height:.9}
.mia em{font-style:normal;color:var(--kernlicht)}
.va9 .raster{margin-top:5rem}.va9 .raster .h2{font-size:clamp(2rem,3.4vw,3.2rem)}.va9 blockquote{margin-top:0}
.zkarte{background:var(--weiss);color:var(--tiefe);border-radius:var(--r);padding:clamp(2rem,5vw,4rem);max-width:52rem}
.zkarte .label{color:var(--stahl)}.zkarte .h2 em{color:var(--kerndunkel)}.zkarte .h2{font-size:clamp(2rem,4vw,3.6rem)}
.zkarte blockquote{border-left-color:var(--kerndunkel)}.zkarte blockquote p{color:var(--schiefer)}.zkarte cite{color:var(--stahl)}

/* ================= FRAGEN ================= */
.zweisp{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:4rem;align-items:start}
.zweisp .fragen{margin-top:0}
@media (max-width:900px){.zweisp{grid-template-columns:1fr}}
.linien details{background:transparent;border-radius:0;border-bottom:1px solid var(--linie)}
.linien{gap:0;border-top:1px solid var(--linie)}
.linien summary{color:var(--papier)}.linien summary:hover{color:var(--kernlicht)}
.linien summary .nr{color:var(--kernlicht)}
.linien summary .plus{background:var(--linie)}.linien summary .plus::before,.linien summary .plus::after{background:var(--papier)}
.linien .antwort{color:var(--frost)}.linien .quelle{color:var(--nebel)}
.vq4 .fragen{margin-top:0}
.raster-karten{grid-template-columns:1fr 1fr;align-items:start}
@media (max-width:900px){.raster-karten{grid-template-columns:1fr}}
.tabs{display:grid;grid-template-columns:1fr 1.3fr;gap:1.25rem;margin-top:4rem;align-items:start}
.tabliste{display:grid;gap:.4rem}
.tabliste button{display:grid;grid-template-columns:3rem 1fr;gap:.8rem;align-items:center;text-align:left;border:0;background:var(--weiss);border-radius:14px;padding:1rem 1.2rem;font:300 1rem/1.35 var(--t);color:var(--tiefe);cursor:pointer;transition:background .72s var(--kurve),color .72s var(--kurve)}
.tabliste button .nr{font-weight:200;font-size:1.4rem;color:var(--kerndunkel)}
.tabliste button:hover{background:var(--eislicht)}
.tabliste button[aria-selected="true"]{background:var(--tiefe);color:var(--papier)}
.tabliste button[aria-selected="true"] .nr{color:var(--kernlicht)}
.panels{position:sticky;top:10rem;background:var(--weiss);border-radius:var(--r);padding:clamp(1.8rem,4vw,3.4rem)}
.panel h3{font-weight:200;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.15;margin-bottom:1.6rem}
.panel p{color:var(--schiefer)}.panel p+p{margin-top:.9rem}
@media (max-width:900px){.tabs{grid-template-columns:1fr}.panels{position:static}}
.offen{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:4rem}
.offen article{background:var(--weiss);border-radius:var(--r);padding:clamp(1.6rem,3vw,2.4rem)}
.offen .nr{font-weight:200;font-size:2.2rem;color:var(--kerndunkel)}
.offen h3{font-weight:300;font-size:1.35rem;margin:.6rem 0 1rem}
.offen p{color:var(--schiefer);font-size:.96rem}.offen p+p{margin-top:.7rem}
@media (max-width:900px){.offen{grid-template-columns:1fr}}
.eis-offen details{background:var(--weiss);transition:background .72s var(--kurve)}
.eis-offen details[open]:not(.schliesst){background:var(--eislicht)}
.eis-offen details[open]:not(.schliesst) .plus{background:var(--tiefe)}
.gruppen{display:grid;gap:3rem;margin-top:4rem}
.gruppe{display:grid;grid-template-columns:14rem 1fr;gap:2rem;align-items:start}
.gruppe h3{font:400 .72rem/1.4 var(--t);letter-spacing:.3em;text-transform:uppercase;color:var(--kerndunkel);padding-top:1.8rem}
.gruppe .fragen{margin-top:0}
@media (max-width:760px){.gruppe{grid-template-columns:1fr}.gruppe h3{padding-top:0}}
.minimal{gap:0;border-top:1px solid var(--tiefe)}
.minimal details{background:transparent;border-radius:0;border-bottom:1px solid var(--dunst)}
.minimal summary{padding-inline:0;grid-template-columns:5rem 1fr 2.6rem}
.minimal summary .nr{font-size:2.6rem}
.minimal summary .plus{background:transparent;box-shadow:inset 0 0 0 1px var(--nebel)}
.minimal .antwort{padding-left:6rem}
@media (max-width:600px){.minimal .antwort{padding-left:0}.minimal summary{grid-template-columns:3.4rem 1fr 2.6rem}}

/* ================= KONTAKT ================= */
.wege .icon,.wege-karten .icon,.wege-liste .icon{--gr:40px;margin-bottom:1rem}
.g-eis .wege li,.g-salbei .wege li,.g-papier .wege li{border-top-color:rgba(62,76,87,.3)}
.g-eis .wege small,.g-salbei .wege small,.g-papier .wege small{color:var(--stahl)}
.vk4{min-height:92svh}
.vk4 .wege{text-align:left;width:100%}
.wege-karten{list-style:none;display:grid;gap:1rem}
.wege-karten li{background:var(--weiss);border-radius:var(--r);padding:1.8rem;color:var(--tiefe)}
.wege-karten .icon{color:var(--kerndunkel)}
.wege-karten small{display:block;font:400 .7rem/1 var(--t);letter-spacing:.3em;text-transform:uppercase;color:var(--stahl);margin-bottom:.6rem}
.wege-karten a{text-decoration:none;font-size:1.3rem;font-weight:300}
.vk5 .mail-gross{display:block;font-weight:200;font-size:clamp(2.6rem,8vw,7.6rem);line-height:1;color:var(--kernlicht);text-decoration:none;margin-top:3rem;word-break:break-word;transition:color .72s var(--kurve)}
.vk5 .mail-gross:hover{color:var(--eislicht)}
.vk6 .rahmen{margin-top:1rem}
.vk8{display:grid;grid-template-columns:1fr 1.1fr;min-height:90svh}
.wege-liste{list-style:none;margin-top:3rem}
.wege-liste li{padding:1.2rem 0;border-top:1px solid rgba(201,235,253,.25);display:grid;grid-template-columns:3.5rem 1fr;align-items:center}
.wege-liste .icon{margin:0;grid-row:span 2}
.wege-liste small{display:block;font:400 .7rem/1 var(--t);letter-spacing:.3em;text-transform:uppercase;color:var(--nebel)}
.wege-liste a{text-decoration:none}
@media (max-width:900px){.vk8{grid-template-columns:1fr}}
.kacheln3{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:4rem}
.kacheln3 li{background:var(--weiss);border-radius:var(--r);padding:clamp(1.8rem,3vw,2.6rem);display:flex;flex-direction:column;gap:1rem;min-height:20rem;color:var(--tiefe)}
.kacheln3 li:nth-child(2){background:var(--eislicht)}
.kacheln3 .icon{color:var(--kerndunkel);margin-bottom:auto}
.kacheln3 small{font:400 .7rem/1 var(--t);letter-spacing:.3em;text-transform:uppercase;color:var(--stahl)}
.kacheln3 span,.kacheln3 a{font-weight:200;font-size:clamp(1.4rem,2vw,1.8rem);text-decoration:none}
@media (max-width:760px){.kacheln3{grid-template-columns:1fr}}
.vk10 .wege li{border-top-color:var(--dunst)}.vk10 .wege small{color:var(--stahl)}

/* ================= Korrekturen nach Sichtprüfung ================= */
.variante .flaeche .icon,.variante .karte .icon,.variante .linie .icon,.variante .icongross .icon{color:var(--kerndunkel)}
.vh9 .h-riesig{font-size:clamp(2.8rem,6.2vw,6.4rem)}
.saeulen .kachel .h3{font-size:clamp(1.3rem,1.7vw,1.8rem);hyphens:auto}
.vier-klein .beleg strong{font-size:clamp(2rem,2.6vw,2.6rem)}
.zahlreihe strong,.zahlreihe-hell strong{font-size:clamp(3rem,6.4vw,6rem)}
.va6 .anf{display:block;height:.45em;margin-top:2rem;line-height:1}
.vp3 .kopfzeile{padding:var(--luft) 0 3rem}
.wahl{font-size:.74rem}
@media (max-width:520px){
  .betrieb-eis,.vier{grid-template-columns:1fr}
  .vier .f,.betrieb-eis li{min-height:0;gap:1.2rem}
  .eine strong{font-size:clamp(4rem,22vw,6rem)}
  .fall h3{font-size:1.5rem}
}
.variante h3{hyphens:auto;overflow-wrap:break-word}

/* Claim als Headline: Versalien, laut Brandbook auf .30em gesperrt */
.h-claim{font-size:clamp(1.7rem,7.2vw,7rem);letter-spacing:.3em;line-height:1.08;text-transform:uppercase}
.zentriert .h-claim{margin-right:-.3em}
@media (max-width:600px){.schaubild text{font-size:18px;letter-spacing:.08em}}
.vh10 .logo-hero{width:clamp(180px,24vw,340px);height:auto;margin-bottom:clamp(2.4rem,5vh,4rem)}
.band-titel{font:400 .7rem/1 var(--t);letter-spacing:.3em;text-transform:uppercase;color:var(--nebel);margin-top:clamp(4rem,8vw,6rem);margin-bottom:1.1rem}
.band-titel+.band{margin-top:0}
.g-papier .band-titel,.g-frost .band-titel,.g-salbei .band-titel{color:var(--stahl)}
.rueckwaerts{margin-top:.5rem!important}

/* ================= HERO NEU: Logo prominent, Logo und Headline animiert ================= */
/* Brandbook: beschleunigt kurz, bremst lange, nie wippend. Das Zeichen tritt auf, dauerhaft bewegt sich nur das Kernlicht. */
.hx{min-height:100svh}
.hx .wrap{padding-top:5rem}
.logo-svg{display:block;width:100%;height:auto;color:var(--papier)}
.hx-logo{width:clamp(240px,34vw,500px);margin-bottom:clamp(2.2rem,5vh,3.6rem)}
.hx-logo.gross{width:clamp(280px,46vw,700px)}
.hx-logo.riesig{width:clamp(300px,66vw,1000px);margin:0}
.unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@keyframes einblenden{from{opacity:0}to{opacity:1}}
@keyframes auftritt{from{opacity:0;transform:translateY(18px) scale(1.028)}to{opacity:1;transform:none}}
@keyframes zeichnen{to{stroke-dashoffset:0}}
@keyframes fuellen{to{fill-opacity:1;stroke-opacity:0}}
@keyframes teil{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes zeichen{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}
@keyframes wischen{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

.hx h1{animation:auftritt 1.15s var(--kurve) .9s both}
.hx .lead{animation:auftritt 1.15s var(--kurve) 1.7s both}
.hx .aktionen{animation:auftritt 1.15s var(--kurve) 2s both}
.hx .hx-logo{animation:einblenden .72s var(--kurve) both}
.hx h1:has(.zeichenfolge){animation:none}

/* Rahmen zeichnet sich, dann füllt er sich, dann kommen die Buchstaben */
.zeichnen-an .rahmen path{fill-opacity:0;stroke:currentColor;stroke-width:5;stroke-dasharray:1;stroke-dashoffset:1;animation:zeichnen 1.9s var(--kurve) .2s forwards,fuellen .72s var(--kurve) 2s forwards}
.zeichnen-an .wort path,.zeichnen-an .zeile path,.letter-an .wort path,.letter-an .zeile path{opacity:0;transform-box:fill-box;animation:teil .72s var(--kurve) calc(1.1s + var(--i) * 90ms) forwards}
.letter-an .rahmen path{opacity:0;animation:einblenden 1.15s var(--kurve) .1s forwards}
.zeichnen-an .zeile path{animation-delay:calc(2.2s + var(--i) * 40ms)}

/* Headline Buchstabe für Buchstabe */
.zeichenfolge span{display:inline-block;opacity:0;animation:zeichen .72s var(--kurve) calc(.9s + var(--i) * 55ms) forwards}
em .zeichenfolge span{animation-delay:calc(1.4s + var(--i) * 55ms)}
.zeichenfolge .lz{width:.3em}

/* Lichtstreif: nur das Kernlicht wandert */
.streif{pointer-events:none}

/* Wechsel zwischen Logo und Headline */
.wechsel{display:grid;place-items:center;width:100%;min-height:clamp(10rem,26vw,22rem);margin-bottom:clamp(1.6rem,4vh,3rem)}
.wechsel>div{grid-area:1/1;opacity:0}
.wechsel h1,.wechsel .h-claim{animation:none;margin:0}
@keyframes wechsel2{0%{opacity:0;transform:scale(1.028)}8%{opacity:1;transform:none}44%{opacity:1;transform:none}52%{opacity:0;transform:scale(.99)}100%{opacity:0}}
@keyframes wechsel3{0%{opacity:0;transform:scale(1.028)}6%{opacity:1;transform:none}28%{opacity:1;transform:none}34%{opacity:0;transform:scale(.99)}100%{opacity:0}}
.zwei>.w-a{animation:wechsel2 10s var(--kurve) infinite both}
.zwei>.w-b{animation:wechsel2 10s var(--kurve) 5s infinite both}
.drei>.w-a{animation:wechsel3 13.5s var(--kurve) infinite both}
.drei>.w-b{animation:wechsel3 13.5s var(--kurve) 4.5s infinite both}
.drei>.w-c{animation:wechsel3 13.5s var(--kurve) 9s infinite both}

/* Geteilt */
.hx6-raster{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center;min-height:100svh;padding:8rem clamp(1rem,5vw,5rem) 4rem}
.hx6-logo .logo-svg{width:100%}
.hx6 .h-claim.links{font-size:clamp(1.6rem,3.6vw,3.8rem);text-align:left}
@media (max-width:900px){.hx6-raster{grid-template-columns:1fr}}

/* Logo als Bühne */
.hx7-buehne{position:absolute;inset:0;z-index:-1;display:grid;place-items:center;opacity:.22;animation:einblenden 1.8s var(--kurve) both}
.hx7-buehne .logo-svg{width:min(94vw,1500px)}

/* Kernlicht fährt ein, Headline glimmt */
.hx9-logo{position:relative}
.hx9-punkt{position:absolute;left:50%;top:calc(100% + 1.6rem);width:14px;height:14px;border-radius:50%;background:var(--kernlicht);box-shadow:0 0 0 10px rgba(79,182,232,.12),0 0 40px 8px rgba(79,182,232,.45);transform:translate(-50%,-50%);animation:einfahren 2.2s var(--kurve) .2s both,puls 4.6s var(--kurve) 2.4s infinite alternate}
@keyframes einfahren{from{left:-30%;opacity:0}25%{opacity:1}to{left:50%;opacity:1}}
@keyframes puls{from{opacity:.55}to{opacity:1}}
.hx9 h1{margin-top:2.4rem}
.glimmen .zeichenfolge span{animation:zeichen .72s var(--kurve) calc(.9s + var(--i) * 55ms) forwards,glimmen 4.6s var(--kurve) calc(3.2s + var(--i) * 90ms) infinite}
.glimmen em .zeichenfolge span{animation:zeichen .72s var(--kurve) calc(1.4s + var(--i) * 55ms) forwards,glimmen2 4.6s var(--kurve) calc(3.9s + var(--i) * 90ms) infinite}
@keyframes glimmen{0%,24%,100%{color:inherit}12%{color:var(--kernlicht)}}
@keyframes glimmen2{0%,24%,100%{color:var(--kernlicht)}12%{color:var(--eislicht)}}

/* Claim wischt ein */
.hx h1.wischen{animation:wischen 1.6s var(--kurve) 2s both}

/* Reduzierte Bewegung: alles sofort im Endzustand, Wechsel stehen untereinander */
@media (prefers-reduced-motion:reduce){
  .zeichenfolge span,.logo-svg path{opacity:1!important;transform:none!important;fill-opacity:1!important;stroke:none!important}
  .wechsel{display:flex;flex-direction:column;gap:2rem}
  .wechsel>div{opacity:1}
  .hx h1.wischen{clip-path:none}
}
/* Logo prominenter */
.hx-logo{width:clamp(280px,46vw,660px)}
.hx-logo.gross{width:clamp(300px,60vw,860px)}
.hx7-buehne{opacity:.13}
@media (max-width:600px){.hx-logo,.hx-logo.gross{width:86vw}.hx-logo.riesig{width:92vw}}
@keyframes einblenden-leise{from{opacity:0}to{opacity:.13}}
.hx7-buehne{animation:einblenden-leise 1.8s var(--kurve) both}
@media (prefers-reduced-motion:reduce){.hx7-buehne{opacity:.13}}

/* Abstimmung der gewählten Varianten aufeinander */
.nav .wrap>a img{transition:opacity .72s var(--kurve)}
.nav:not(.fest) .wrap>a img{opacity:0}
#referenzen{background:var(--schiefer)}
#referenzen .lead{margin-top:2.8rem}
#referenzen .band-dunkel{background:var(--tiefe)}
#versprechen .konturen{grid-template-columns:repeat(6,1fr)}
#versprechen .konturen article{grid-column:span 2}
#versprechen .konturen article:nth-child(n+4){grid-column:span 3}
/* Headlines unter den Icons auf gleicher Höhe, Text darunter */
#versprechen .konturen h3{margin-top:0}
@media (max-width:900px){#versprechen .konturen{grid-template-columns:1fr}#versprechen .konturen article,#versprechen .konturen article:nth-child(n+4){grid-column:auto}}
