/* Druvis Website · Layout, Komponenten, Bewegung (3.0.1, Oktober 2026). Nur Tokens aus tokens.css,
   kein Inline-CSS. Bewegung nur über transform/opacity bei no-preference, Tilt nur bei feinem Zeiger.
   Ohne JS ist alles sichtbar. Umbrüche 600/900/1080 px. Doku: README.md. Ergänzungen unten anfügen. */

/* Grundlagen */
:root{--t:var(--dur) var(--ease);--tf:var(--dur-fast) var(--ease)}
.auszeichnung__siegel,.stufe__nr,.zeitstrahl>li::before,.schritte li::before{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:96px;interpolate-size:allow-keywords}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--c-bg);color:var(--c-text-2);font-family:var(--font-sans);font-size:var(--fs-md);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
html.menue-offen{overflow:hidden}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4{margin:0 0 var(--space-4);color:var(--c-text);font-weight:750;line-height:1.18;letter-spacing:-.02em;text-wrap:balance;overflow-wrap:break-word}
h1{font-size:var(--fs-4xl);font-weight:800;letter-spacing:-.03em;line-height:1.08}
h2{font-size:var(--fs-3xl)}
h3{font-size:var(--fs-xl);font-weight:700;line-height:1.3;letter-spacing:-.01em}
h4{font-size:var(--fs-lg);font-weight:700;line-height:1.35;letter-spacing:0}
p,ul,ol,dl,table,figure,blockquote{margin:0 0 var(--space-4)}
p{text-wrap:pretty;overflow-wrap:break-word}
ul,ol{padding-left:1.25em}
li+li{margin-top:var(--space-1)}
strong,b{font-weight:700;color:var(--c-text)}
a{color:var(--c-link);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px;border-radius:4px}
::selection{background:var(--c-blue);color:#fff}
time,.zahl{font-variant-numeric:tabular-nums}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.sprung{position:absolute;left:var(--space-4);top:-100px;z-index:200;background:var(--c-blue-strong);color:#fff;padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);font-weight:700;text-decoration:none}
.sprung:focus{top:var(--space-3)}
.i{width:24px;height:24px;flex:none}

/* Layout */
.wrap{width:100%;max-width:calc(var(--content-w) + 2*var(--space-7));margin-inline:auto;padding-inline:var(--space-4)}
@media (min-width:600px){.wrap{padding-inline:var(--space-6)}}
@media (min-width:900px){.wrap{padding-inline:var(--space-7)}}
.wrap--text{max-width:calc(var(--text-w) + 2*var(--space-7))}
.abschnitt{position:relative;padding-block:clamp(3.5rem,2.5rem + 4.5vw,6.5rem)}
.abschnitt--alt{background:var(--c-bg-alt)}
.abschnitt:not(.abschnitt--alt)+.abschnitt:not(.abschnitt--alt),.abschnitt--alt+.abschnitt--alt{padding-top:0}
.abschnitt__kopf{max-width:760px;margin-bottom:clamp(2rem,1.6rem + 1.5vw,3rem)}
.abschnitt__kopf>:last-child{margin-bottom:0}
.oberzeile{display:inline-flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-3);color:var(--c-link);font-size:var(--fs-sm);font-weight:700;letter-spacing:.01em}
.oberzeile .i{width:18px;height:18px}
.einleitung{font-size:var(--fs-lg);line-height:1.6}
.raster{display:grid;gap:clamp(1rem,.7rem + 1.2vw,1.75rem);grid-template-columns:1fr}
ul.raster,ol.raster{list-style:none;padding:0;margin:0 0 var(--space-6)}
:is(.raster,.zweispalter,.gegenueber,.hero__raster,.aufruf__innen,.erzaehlung__raster,.mit-inhalt,.formular__zeile)>*{min-width:0}
.raster>li{margin:0}
@media (min-width:600px){.raster--2,.raster--3,.raster--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.raster--3{grid-template-columns:repeat(3,minmax(0,1fr))}.raster--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.zweispalter{display:grid;gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:start}
@media (min-width:900px){.zweispalter{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.zweispalter--mitte{align-items:center}.zweispalter--breit-links{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.mitte{text-align:center}
.stapel>*+*{margin-top:var(--space-4)}

/* Navy-Band */
.band{--c-bg:var(--band-bg);--c-bg-alt:var(--band-bg);--c-surface:var(--band-surface);--c-surface-2:var(--band-surface);--c-text:var(--band-text);--c-text-2:var(--band-text-2);--c-muted:var(--band-muted);--c-link:var(--band-link);--c-border:var(--band-border);--c-border-strong:var(--band-border-strong);--c-focus:var(--band-focus);--c-blue-soft:rgba(141,187,245,.14);position:relative;isolation:isolate;overflow:hidden;background-color:var(--band-bg);background-image:radial-gradient(70% 55% at 50% -8%,rgba(141,187,245,.16),transparent 70%),url("/assets/img/muster-sechseck.svg");background-size:auto,110.85px 192px;color:var(--band-text-2)}
.band .btn--sekundaer{color:var(--band-text);border-color:rgba(255,255,255,.5)}
.band .btn--sekundaer:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* Knöpfe */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-h);padding:.6rem 1.3rem;border:1.5px solid transparent;border-radius:var(--radius-md);font:inherit;font-size:1rem;font-weight:700;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:background-color var(--tf),border-color var(--tf),color var(--tf),box-shadow var(--tf),translate .35s var(--ease)}
.btn .i{width:20px;height:20px}
.btn--primaer{isolation:isolate;overflow:hidden;background:linear-gradient(180deg,var(--c-blue-strong),var(--c-blue-strong-hover));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 22px -6px rgba(47,107,193,.6);translate:var(--tx,0) var(--ty,0)}
.btn--primaer::before{content:"";position:absolute;inset:-2px;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%);transform:translateX(-130%)}
.btn--primaer:hover{color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 12px 30px -6px rgba(47,107,193,.75)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.btn--primaer:hover::before{transform:translateX(130%);transition:transform .9s var(--ease)}}
.btn--sekundaer{background:transparent;color:var(--c-text);border-color:var(--c-border-strong)}
.btn--sekundaer:hover{border-color:var(--c-text);color:var(--c-text);background:var(--c-blue-soft)}
.btn--text{min-height:44px;padding-inline:var(--space-2);color:var(--c-link);background:none;text-decoration:underline;text-underline-offset:.2em}
.btn--gross{min-height:54px;padding-inline:1.6rem;font-size:1.0625rem}
.btn--breit{width:100%}
.btn[aria-busy=true]{cursor:progress}
.btn[aria-busy=true]::after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:drehen .8s linear infinite}
@keyframes drehen{to{transform:rotate(360deg)}}
.btn-reihe{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
@media (max-width:479px){.btn-reihe--stapel{flex-direction:column;align-items:stretch}.btn-reihe--stapel .btn{width:100%}}

/* Chips */
.chip{display:inline-flex;align-items:center;gap:.35rem;min-height:28px;padding:.15rem .7rem;border-radius:var(--radius-pill);background:var(--c-blue-soft);color:var(--c-link);font-size:var(--fs-xs);font-weight:700;line-height:1.3}
.chip .i{width:15px;height:15px}
.chip--aus{background:var(--c-surface-2);color:var(--c-text-2);border:1px dashed var(--c-border-strong);white-space:nowrap}
.chip--neu{background:var(--c-success-soft);color:var(--c-success)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2);padding:0;margin:0 0 var(--space-4);list-style:none}
.chips li{margin:0}

/* Karten */
.karte,.preiskarte,.branche,.messwert,.stufe{position:relative;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1)}
.karte::before,.preiskarte::before,.stufe::before{content:"";position:absolute;inset:0 12% auto;height:1px;background:linear-gradient(90deg,transparent,var(--lichtkante),transparent);pointer-events:none}
.karte{display:flex;flex-direction:column;gap:var(--space-3);padding:clamp(1.25rem,1rem + .8vw,1.75rem)}
.karte>*{margin:0}
.karte p{color:var(--c-text-2)}
.karte__titel{font-size:var(--fs-xl)}
.karte__icon{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:13px;color:var(--c-link);background:linear-gradient(145deg,var(--c-blue-soft),color-mix(in srgb,var(--c-blue) 22%,transparent));box-shadow:inset 0 1px 0 var(--lichtkante)}
.karte__icon .i{width:26px;height:26px}
.karte__kopf{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.karte--link{transition:border-color var(--tf),box-shadow var(--t)}
.karte--link:hover{border-color:color-mix(in srgb,var(--c-blue) 55%,var(--c-border));box-shadow:var(--shadow-2)}
.karte__ziel{color:inherit;text-decoration:none}
.karte__ziel::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.karte__ziel:focus-visible{outline:none}
.karte--link:has(.karte__ziel:focus-visible){outline:3px solid var(--c-focus);outline-offset:2px}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
[data-tilt]{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease),box-shadow var(--t),border-color var(--tf)}
[data-tilt].ist-tilt{transition:transform .12s linear,box-shadow var(--t);box-shadow:var(--shadow-3);will-change:transform}
[data-tilt]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--c-blue) 16%,transparent),transparent 45%);opacity:0;transition:opacity var(--t)}
[data-tilt].ist-tilt::after{opacity:1}}
.mehr-link{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;color:var(--c-link);text-decoration:none}
.mehr-link .i{width:18px;height:18px;transition:transform var(--tf)}
.mehr-link:hover{text-decoration:underline}
.mehr-link:hover .i,.karte--link:hover .mehr-link .i{transform:translateX(3px)}

.liste{list-style:none;padding:0;margin:0 0 var(--space-4)}
.liste li{position:relative;padding-left:1.9rem;margin:0}
.liste li+li{margin-top:var(--space-2)}
.liste .i{position:absolute;left:0;top:.2em;width:20px;height:20px;color:var(--c-success)}
.liste .nicht,.liste .nicht .i,.liste--minus .i{color:var(--c-muted)}
.liste--icons .i{color:var(--c-link)}
.liste--icons li{padding-left:2.1rem}
.liste--icons li+li{margin-top:var(--space-4)}

.hinweis{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-4) var(--space-5);margin:0 0 var(--space-5);background:var(--c-blue-soft);border-left:4px solid var(--c-blue);border-radius:var(--radius-md);color:var(--c-text-2)}
.hinweis>.i{color:var(--c-link);margin-top:.1em}
.hinweis p{margin:0}
.hinweis p+p{margin-top:var(--space-2)}
.hinweis--aus{background:var(--c-surface-2);border-left-color:var(--c-border-strong)}
.hinweis--aus>.i{color:var(--c-text-2)}
.hinweis--fehler{background:var(--c-danger-soft);border-left-color:var(--c-danger)}
.hinweis--fehler>.i{color:var(--c-danger)}

.messwert{display:grid;gap:var(--space-1);padding:var(--space-5) var(--space-6)}
.messwert__zahl{font-size:var(--fs-2xl);font-weight:800;color:var(--c-text);letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.messwert__text{margin:0;color:var(--c-text-2)}
.messwert__quelle{margin:0;font-size:var(--fs-xs);color:var(--c-muted)}

/* Kopfzeile */
.kopf{position:sticky;top:0;z-index:100;height:72px}
.kopf::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--c-bg);border-bottom:1px solid var(--c-border);transform-origin:top;transition:transform var(--t),box-shadow var(--t)}
.kopf.ist-gescrollt::before{transform:scaleY(.86);background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);box-shadow:var(--shadow-2);border-bottom-color:var(--glass-rand)}
.kopf__innen{display:flex;align-items:center;gap:var(--space-4);height:72px}
.kopf__logo,.kopf__aktionen,.nav-schalter{transition:translate var(--t)}
.kopf.ist-gescrollt :is(.kopf__logo,.kopf__aktionen,.nav-schalter){translate:0 -5px}
.kopf__logo{display:inline-flex;align-items:center;flex:none;min-height:44px;border-radius:6px}
.kopf__logo img{width:124px;height:35px;transition:scale var(--t);transform-origin:left center}
.kopf.ist-gescrollt .kopf__logo img{scale:.9}
.kopf__aktionen{order:2;display:none;margin-left:auto;gap:var(--space-2);align-items:center}
.kopf__aktionen .btn{min-height:44px;padding:.5rem 1rem;font-size:.9375rem}
@media (min-width:600px){.kopf__aktionen{display:flex}}
.nav-schalter{order:3;display:inline-flex;align-items:center;gap:var(--space-2);margin-left:auto;min-height:44px;min-width:44px;padding:0 .85rem;border:1.5px solid var(--c-border-strong);border-radius:var(--radius-md);background:var(--c-bg);color:var(--c-text);font:inherit;font-weight:700;font-size:.9375rem;text-decoration:none;cursor:pointer}
.nav-schalter .i{width:22px;height:22px}
@media (min-width:600px){.nav-schalter{margin-left:0}}
.nav-schalter[hidden]{display:none}
.lesefortschritt{position:absolute;left:0;right:0;bottom:0;height:3px;transform-origin:left;transform:scaleX(var(--fortschritt,0));background:linear-gradient(90deg,var(--c-blue),var(--c-blue-strong));pointer-events:none;transition:translate var(--t)}
.kopf.ist-gescrollt .lesefortschritt{translate:0 -10px}
@supports (animation-timeline:scroll()){.lesefortschritt{animation:fortschritt linear both;animation-timeline:scroll(root)}}
@keyframes fortschritt{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Navigation: am Handy Vollbild, ab 1080 px in der Zeile mit Mega-Menü */
.nav{order:1;display:none}
.nav:target,.nav.ist-offen{display:block;position:fixed;inset:0;z-index:-2;overflow-y:auto;padding:88px var(--space-4) var(--space-8);background:var(--c-bg);background-image:radial-gradient(60% 40% at 90% 0,color-mix(in srgb,var(--c-blue) 14%,transparent),transparent 70%)}
.nav__liste{list-style:none;margin:0 auto;padding:0;max-width:640px}
.nav__liste>li{margin:0;border-bottom:1px solid var(--c-border)}
.nav__link,.nav__knopf{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;min-height:58px;padding:.5rem .25rem;border:0;background:none;color:var(--c-text);font:inherit;font-size:1.25rem;font-weight:700;text-align:left;text-decoration:none;cursor:pointer;border-radius:var(--radius-sm)}
.nav__link:hover,.nav__knopf:hover,.nav__link[aria-current=page]{color:var(--c-link)}
.nav__knopf .i{width:22px;height:22px;transition:transform var(--tf)}
.nav__knopf[aria-expanded=true] .i{transform:rotate(180deg)}
.js .nav__knopf[aria-expanded=false]+.mega{display:none}
.mega__liste{list-style:none;margin:0;padding:0 0 var(--space-3)}
.mega__liste li{margin:0}
.mega__link{display:flex;gap:var(--space-3);align-items:center;min-height:56px;padding:.5rem;border-radius:var(--radius-md);color:var(--c-text);text-decoration:none}
.mega__link:hover,.mega__link[aria-current=page]{background:var(--c-blue-soft)}
.mega__link b{display:block;font-size:1rem}
.mega__link small{display:block;color:var(--c-muted);font-size:var(--fs-xs);line-height:1.35}
.mega__link .karte__icon{width:42px;height:42px;border-radius:11px}
.mega__link .karte__icon .i{width:22px;height:22px}
.mega__vorschau{display:none}
.nav__extra{display:grid;gap:var(--space-3);max-width:640px;margin:var(--space-6) auto 0}
@media (min-width:600px){.nav__extra{display:none}}
.nav__zu{display:flex;max-width:640px;margin:var(--space-4) auto 0}
.js .nav__zu{display:none}
@media (prefers-reduced-motion:no-preference){.nav.ist-offen :is(.nav__liste>li,.nav__extra){animation:aufsteigen .5s var(--ease) both}.nav.ist-offen li:nth-child(2){animation-delay:.04s}.nav.ist-offen li:nth-child(3){animation-delay:.08s}.nav.ist-offen li:nth-child(4){animation-delay:.12s}.nav.ist-offen li:nth-child(5){animation-delay:.16s}.nav.ist-offen .nav__extra{animation-delay:.2s}}
@keyframes aufsteigen{from{opacity:0;translate:0 14px}}
@media (min-width:1080px){
.nav-schalter{display:none}
.nav,.nav:target,.nav.ist-offen{display:block;position:static;z-index:auto;overflow:visible;background:none;padding:0;margin-left:var(--space-5)}
.nav__liste{display:flex;align-items:center;gap:var(--space-1);max-width:none;transition:translate var(--t)}
.kopf.ist-gescrollt .nav__liste{translate:0 -5px}
.nav__liste>li{position:relative;border:0}
.nav__link,.nav__knopf{min-height:44px;padding:.4rem .75rem;font-size:.96875rem;font-weight:650}
.nav__link:hover,.nav__knopf:hover,.nav__knopf[aria-expanded=true]{background:var(--c-blue-soft)}
.mega{display:none;position:absolute;left:-1rem;top:calc(100% + 12px);z-index:110;width:min(780px,calc(100vw - 4rem));padding:var(--space-4);grid-template-columns:minmax(0,1fr) 230px;gap:var(--space-4);background:var(--c-surface);border:1px solid var(--c-border);border-radius:calc(var(--radius-lg) + 4px);box-shadow:var(--shadow-3)}
.js .nav__knopf[aria-expanded=true]+.mega,html:not(.js) .nav__eintrag--unter:is(:hover,:focus-within) .mega{display:grid}
.mega__liste{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-1);padding:0}
.mega__vorschau{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5);border-radius:var(--radius-lg);color:var(--band-text-2);background:radial-gradient(90% 70% at 100% 0,rgba(111,168,240,.4),transparent 70%),var(--band-bg)}
.mega__vorschau b{color:#fff;font-size:var(--fs-lg)}
.mega__vorschau p{margin:0;font-size:var(--fs-sm)}
.mega__vorschau .btn{margin-top:auto}
.nav__extra,.nav__zu{display:none}
.kopf__aktionen{display:flex}}
@media (min-width:1080px) and (prefers-reduced-motion:no-preference){.js .nav__knopf[aria-expanded=true]+.mega{animation:mega-ein .28s var(--ease) both}}
@keyframes mega-ein{from{opacity:0;translate:0 -8px;scale:.985}}

/* Seitenkopf, Brotkrumen, Stand */
.seitenkopf{position:relative;overflow:hidden;padding-block:clamp(2rem,1.5rem + 2.5vw,3.75rem) clamp(2.5rem,2rem + 3vw,4.5rem);background:radial-gradient(60% 90% at 100% 0,color-mix(in srgb,var(--c-blue) 13%,transparent),transparent 70%),var(--c-bg-alt);border-bottom:1px solid var(--c-border)}
.seitenkopf h1{max-width:20ch;margin-bottom:var(--space-5)}
.seitenkopf .einleitung{max-width:62ch;margin-bottom:var(--space-5)}
.seitenkopf .btn-reihe{margin-top:var(--space-6)}
.seitenkopf--text h1{max-width:28ch}
.pfad{margin-bottom:var(--space-6);font-size:var(--fs-sm)}
.pfad ol{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.pfad li{margin:0;display:inline-flex;align-items:center;color:var(--c-muted)}
.pfad li+li::before{content:"/";margin:0 .6rem;color:var(--c-border-strong)}
.pfad a{color:var(--c-text-2)}
.stand{display:inline-flex;align-items:center;gap:var(--space-2);margin:0;color:var(--c-muted);font-size:var(--fs-sm)}
.stand .i{width:18px;height:18px}

/* Hero */
.hero{padding-block:clamp(3rem,2rem + 5vw,6rem) clamp(6rem,4rem + 6vw,9.5rem)}
.hero::before{content:"";position:absolute;inset:-25% -10%;z-index:-1;pointer-events:none;background:radial-gradient(34% 42% at 72% 32%,rgba(56,120,208,.5),transparent 70%),radial-gradient(28% 36% at 18% 86%,rgba(111,168,240,.24),transparent 70%),radial-gradient(30% 40% at 96% 90%,rgba(47,107,193,.34),transparent 70%)}
@media (prefers-reduced-motion:no-preference){.hero::before{animation:aurora 22s ease-in-out infinite alternate}}
@keyframes aurora{to{transform:translate3d(-4%,3%,0) rotate(6deg) scale(1.06)}}
.hero__raster{display:grid;gap:clamp(2.5rem,1.5rem + 4vw,4rem);align-items:center}
@media (min-width:960px){.hero__raster{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}}
.hero h1{color:#fff;margin-bottom:var(--space-5);max-width:17ch;font-size:clamp(2rem,1.5rem + 2.4vw,3.35rem)}
@media (min-width:600px){.ohne-umbruch{white-space:nowrap}}
.hero__betont{background:linear-gradient(100deg,#fff 10%,#A9CBF7 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .einleitung{color:var(--band-text-2);max-width:54ch;font-size:clamp(1.125rem,1.05rem + .35vw,1.3125rem)}
.hero__marke{margin-bottom:var(--space-5)}
.hero__marke .chip{background:rgba(141,187,245,.16);color:#DCE9FB;font-size:var(--fs-sm);min-height:32px;padding-inline:.85rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.hero .btn-reihe{margin-top:var(--space-7)}
.hero__notiz{margin:var(--space-4) 0 0;font-size:var(--fs-sm);color:var(--band-muted)}

.szene{position:relative;container-type:inline-size;width:min(100%,560px);margin-inline:auto;aspect-ratio:1/.9;perspective:1300px;perspective-origin:50% 35%}
.szene__buehne{position:absolute;inset:0;font-size:clamp(10.5px,2.7cqw,15px);transform-style:preserve-3d;transform:rotateX(calc(9deg + var(--rx,0deg))) rotateY(calc(-16deg + var(--ry,0deg)))}
.szene__karte{position:absolute;padding:1.05em 1.15em;border-radius:1.1em;background:var(--app-surface);color:var(--app-text-2);border:1px solid var(--app-border);line-height:1.45;box-shadow:inset 0 1px 0 var(--lichtkante),0 .35em .9em rgba(3,12,28,.22),0 1.6em 3.4em -.6em rgba(3,12,28,.55)}
.szene__karte b{color:var(--app-text)}
.szene__chat{left:8%;top:15%;width:76%;transform:translateZ(0)}
.szene__wissen{right:-7%;top:-5%;width:50%;transform:translateZ(-5.5em) rotateZ(2deg)}
.szene__fund{left:-5%;bottom:2%;width:56%;transform:translateZ(7em)}
@media (prefers-reduced-motion:no-preference){.szene__karte{animation:schweben 7s ease-in-out infinite alternate}.szene__wissen{animation-duration:9s;animation-delay:-3s}.szene__fund{animation-duration:8s;animation-delay:-5s}}
@keyframes schweben{to{translate:0 -.7em}}
@media (max-width:599px){.szene__buehne{transform:rotateX(calc(8deg + var(--rx,0deg))) rotateY(calc(-9deg + var(--ry,0deg)))}.szene__chat{left:2%;width:90%}.szene__wissen{right:0;width:56%}.szene__fund{left:1%;width:64%}}
.szene__leiste{display:flex;align-items:center;gap:.6em;margin:-.15em 0 .9em;padding-bottom:.7em;border-bottom:1px solid var(--app-border)}
.szene__leiste img{width:1.5em;height:1.42em}
.szene__leiste b{font-size:.92em}
.szene__punkte{margin-left:auto;display:flex;gap:.3em}
.szene__punkte span{width:1.8em;height:.42em;border-radius:1em;background:var(--app-surface-2)}
.szene__frage{margin:0 0 .8em auto;width:fit-content;max-width:88%;padding:.55em .85em;border-radius:1em 1em .3em 1em;background:linear-gradient(180deg,#2F6BC1,#275CA8);color:#fff;font-weight:600}
.szene__antwort{display:grid;gap:.5em;padding:.85em .95em;border:1px solid var(--app-border);border-radius:.85em;background:var(--app-surface)}
.szene__antwort p{margin:0;color:var(--app-text)}
.szene__herkunft,.szene__marke{display:inline-flex;align-items:center;gap:.35em;justify-self:start;width:fit-content;padding:.15em .6em;border-radius:1em;font-size:.82em;font-weight:700;background:var(--app-ok-soft);color:var(--app-ok)}
.szene__marke{background:var(--app-chip);color:var(--app-link);margin-bottom:.55em}
.szene__herkunft .i,.szene__marke .i{width:1.1em;height:1.1em}
.szene__zeile{display:block;height:.55em;border-radius:1em;background:var(--app-surface-2)}
.szene__zeile--b{width:84%}
.szene__zeile--c{width:62%}
.szene__belege{display:flex;flex-wrap:wrap;gap:.4em}
.szene__belege span{padding:.2em .55em;border-radius:.5em;background:var(--app-chip);color:var(--app-link);font-size:.8em;font-weight:700}
.szene__seite{display:grid;gap:.45em;margin:.5em 0 0}
.szene__seite mark{padding:.2em .35em;border-radius:.3em;background:var(--app-mark);color:var(--app-text);font-size:.9em;box-shadow:inset .18em 0 0 #E0A100}
.szene__vermerk{display:flex;align-items:center;gap:.35em;margin-top:.6em;font-size:.82em;color:var(--app-muted)}
.szene__vermerk .i{width:1.1em;height:1.1em;color:var(--app-ok)}

/* 3D-Zeichen aus Ebenen */
.zeichen3d{position:absolute;right:0;bottom:4%;width:27%;aspect-ratio:1701/1614;transform:translateZ(-9em);transform-style:preserve-3d;pointer-events:none}
.zeichen3d::before{content:"";position:absolute;inset:-45%;background:radial-gradient(closest-side,rgba(111,168,240,.5),transparent);transform:translateZ(-2em)}
.zeichen3d__koerper{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(-24deg) rotateX(8deg)}
@media (prefers-reduced-motion:no-preference){.zeichen3d__koerper{animation:schwenken 11s ease-in-out infinite alternate}}
@keyframes schwenken{from{transform:rotateY(-34deg) rotateX(10deg)}to{transform:rotateY(30deg) rotateX(-6deg)}}
.zeichen3d img{position:absolute;inset:0;width:100%;height:100%}
.zeichen3d img:nth-child(1){transform:translateZ(-1em)}
.zeichen3d img:nth-child(2){transform:translateZ(-.83em)}
.zeichen3d img:nth-child(3){transform:translateZ(-.67em)}
.zeichen3d img:nth-child(4){transform:translateZ(-.5em)}
.zeichen3d img:nth-child(5){transform:translateZ(-.33em)}
.zeichen3d img:nth-child(6){transform:translateZ(-.17em)}
@media (prefers-reduced-motion:no-preference){.szene{animation:szene-ein 1s var(--ease) both}}
@keyframes szene-ein{from{opacity:0;translate:0 30px}}

/* Vertrauensleiste */
.vertrauen{position:relative;z-index:2;margin-top:clamp(-5rem,-3rem - 2vw,-3.5rem)}
.vertrauen__liste{display:grid;gap:var(--space-5);list-style:none;margin:0;padding:clamp(1.25rem,1rem + 1vw,1.75rem);background:var(--c-surface);border:1px solid var(--c-border);border-radius:calc(var(--radius-lg) + 4px);box-shadow:var(--shadow-3)}
@media (min-width:600px){.vertrauen__liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.vertrauen__liste{grid-template-columns:1.35fr 1fr 1fr .85fr}}
.vertrauen__liste>li{display:flex;gap:var(--space-3);align-items:flex-start;margin:0}
.vertrauen__liste p{margin:0}
.vertrauen__liste .karte__icon{width:44px;height:44px}
.vertrauen__titel{display:block;color:var(--c-text);font-weight:700;line-height:1.35}
.vertrauen__quelle{display:block;margin-top:.25rem;font-size:var(--fs-xs);color:var(--c-muted)}

/* Auszeichnung, ohne fremde Logos */
.auszeichnung{display:flex;gap:var(--space-4);align-items:center;padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--c-blue-soft),transparent 80%);border:1px solid var(--c-border)}
.auszeichnung__siegel{position:relative;display:grid;place-items:center;width:64px;height:72px;flex:none;color:#fff;background:linear-gradient(160deg,#2F6BC1,#172E4D 70%)}
.auszeichnung__siegel::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.35),transparent 45%)}
.auszeichnung__siegel .i{width:30px;height:30px}
.auszeichnung__text{margin:0;line-height:1.4}
.auszeichnung__text small{display:block;color:var(--c-link);font-weight:800;font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase}
.auszeichnung__text strong{display:block;font-size:var(--fs-lg)}
.auszeichnung__text>span{display:block;margin-top:.2rem;font-size:var(--fs-sm);color:var(--c-text-2)}
.vertrauen .auszeichnung{padding:0;background:none;border:0;align-items:flex-start}
.vertrauen .auszeichnung__siegel{width:44px;height:50px}
.vertrauen .auszeichnung__siegel .i{width:22px;height:22px}

/* Problem und Lösung */
.gegenueber{display:grid;gap:var(--space-5)}
@media (min-width:900px){.gegenueber{grid-template-columns:1fr 1fr}}
.gegenueber__mit{border-color:color-mix(in srgb,var(--c-blue) 60%,var(--c-border));box-shadow:var(--shadow-2),0 0 0 4px var(--c-blue-soft)}
.beispielfragen__titel{margin-top:clamp(2.5rem,2rem + 2vw,3.5rem)}
.beispielfragen{list-style:none;padding:0;margin:0 0 var(--space-3);display:grid;gap:var(--space-2)}
.beispielfragen li{margin:0;display:flex;gap:var(--space-3);align-items:baseline;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--c-bg-alt);border:1px solid var(--c-border)}
.beispielfragen q{color:var(--c-text);font-weight:600;quotes:"„" "“"}
.beispielfragen span{flex:none;min-width:7.5rem;font-size:var(--fs-xs);font-weight:700;color:var(--c-muted)}
@media (max-width:599px){.beispielfragen li{flex-direction:column;gap:.1rem}}
.fussnote{font-size:var(--fs-xs);color:var(--c-muted);margin:0}

/* Vier Stufen */
.stufen{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4)}
@media (min-width:900px){.stufen{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5)}}
.stufe{margin:0;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6) var(--space-5)}
.stufe__nr{display:grid;place-items:center;width:46px;height:52px;flex:none;background:linear-gradient(160deg,#3878D0,#2F6BC1);color:#fff;font-weight:800;font-size:1.125rem}
.stufe:nth-child(4) .stufe__nr{background:linear-gradient(160deg,#2B4A73,#172E4D)}
.stufe h3{margin:0;font-size:var(--fs-lg)}
.stufe p{margin:0;font-size:var(--fs-sm)}
.stufe .chip{align-self:flex-start}
.stufen-notiz{margin-top:var(--space-6)}

/* Erzählabschnitt „So antwortet Druvis“ */
.erzaehlung__raster{display:grid;gap:var(--space-7)}
.erzaehlung__schritte{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4)}
.erzaehlung__schritt{margin:0}
.erzaehlung__karte{position:relative;padding:var(--space-5) var(--space-5) var(--space-5) 4.75rem;border-radius:var(--radius-lg);border:1px solid var(--c-border);background:var(--c-surface);box-shadow:var(--shadow-1);transition:background-color var(--t),border-color var(--t),box-shadow var(--t)}
.erzaehlung__karte .stufe__nr{position:absolute;left:var(--space-5);top:var(--space-5);width:40px;height:45px;font-size:1rem}
.erzaehlung__karte h3{margin-bottom:var(--space-2)}
.erzaehlung__karte p{margin-bottom:var(--space-3)}
.erzaehlung__buehne{display:none}
@media (min-width:960px){
.erzaehlung__raster{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2rem,4vw,4.5rem);align-items:start}
.erzaehlung__schritte{gap:0}
.erzaehlung__schritt{min-height:56vh;display:flex;flex-direction:column;justify-content:center}
.erzaehlung__buehne{display:block;position:sticky;top:calc(50vh - 15.5rem)}
.js .erzaehlung__karte{background:transparent;border-color:transparent;box-shadow:none}
.js .ist-aktiv .erzaehlung__karte{background:var(--c-surface);border-color:var(--c-border);box-shadow:var(--shadow-2)}
.js .erzaehlung__schritt:not(.ist-aktiv) .stufe__nr{background:var(--c-surface-2);color:var(--c-text-2)}}
.erzaehlung__buehne .szene{aspect-ratio:1/.92}
.ansicht{position:absolute;inset:6% 4% 14%;transform-style:preserve-3d;opacity:0;transform:translateZ(-3em) rotateY(-14deg) rotateX(4deg);transition:opacity .45s var(--ease),transform .8s var(--ease);pointer-events:none}
.ansicht .szene__karte{position:relative;inset:auto;width:100%}
[data-aktiv="1"] .ansicht[data-stufe="1"],[data-aktiv="2"] .ansicht[data-stufe="2"],[data-aktiv="3"] .ansicht[data-stufe="3"],[data-aktiv="4"] .ansicht[data-stufe="4"]{opacity:1;transform:none}
.ansicht__neben{position:absolute!important;left:16%;right:-8%;top:-24%;transform:translateZ(-4em) rotateZ(3deg)}
.ansicht__neben--unten{left:-6%;right:10%;top:auto;bottom:-14%;transform:translateZ(4em) rotateZ(-2deg)}
.ansicht__schritte{display:grid;gap:.45em;margin:0 0 .8em;padding:0;list-style:none;font-size:.86em}
.ansicht__schritte li{display:flex;align-items:center;gap:.45em;margin:0;color:var(--app-text-2)}
.ansicht__schritte .i{width:1.15em;height:1.15em;color:var(--app-ok)}
.ansicht__tempo{display:flex;align-items:center;gap:.4em;margin-top:.5em;font-size:.82em;font-weight:700;color:var(--app-link)}
.ansicht__tempo .i{width:1.15em;height:1.15em}
.buehne__fortschritt{position:absolute;left:50%;bottom:0;translate:-50% 0;display:flex;gap:.4rem;margin:0;padding:.45rem .7rem;list-style:none;border-radius:999px;background:var(--glass-bg);border:1px solid var(--glass-rand);box-shadow:var(--shadow-2);font-size:var(--fs-xs);font-weight:700;color:var(--c-text)}
.buehne__fortschritt li{display:grid;place-items:center;width:1.7rem;height:1.7rem;margin:0;border-radius:50%;background:var(--c-surface-2);color:var(--c-text-2);transition:background-color var(--t),color var(--t)}
[data-aktiv="1"] .buehne__fortschritt li:nth-child(-n+1),[data-aktiv="2"] .buehne__fortschritt li:nth-child(-n+2),[data-aktiv="3"] .buehne__fortschritt li:nth-child(-n+3),[data-aktiv="4"] .buehne__fortschritt li{background:var(--c-blue-strong);color:#fff}

/* Branchen, Demo-Teaser */
.branchen{list-style:none;margin:0 0 var(--space-6);padding:0;display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.branche{display:flex;flex-direction:column;gap:var(--space-3);margin:0;padding:var(--space-5)}
.branche h3{margin:0 0 var(--space-1);font-size:var(--fs-lg)}
.branche p{margin:0;font-size:var(--fs-sm)}
.demo-teaser{padding-block:clamp(3.5rem,2.5rem + 4.5vw,6.5rem)}
.demo-teaser::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(55% 70% at 0 0,rgba(56,120,208,.32),transparent 70%),radial-gradient(40% 60% at 100% 100%,rgba(111,168,240,.18),transparent 70%)}
.demo-teaser h2{color:#fff}
.bereiche{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.bereiche>li{margin:0}
.bereich{position:relative;display:flex;gap:var(--space-3);align-items:flex-start;height:100%;min-height:64px;padding:var(--space-4);border-radius:var(--radius-md);background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid var(--band-border);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);color:var(--band-text-2);font-size:var(--fs-sm);text-decoration:none;transition:border-color var(--tf),background-color var(--tf)}
.bereich:hover{border-color:var(--band-link);background-color:rgba(141,187,245,.08)}
.bereich .i{color:var(--band-link);margin-top:2px}
.bereich b{display:block;color:#fff;font-size:1rem}
.demo-teaser__notiz{margin-top:var(--space-5);color:var(--band-muted);font-size:var(--fs-sm)}

/* Preise und Rechner */
.preiskarten{display:grid;gap:var(--space-5);grid-template-columns:1fr;align-items:stretch}
@media (min-width:640px){.preiskarten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1120px){.preiskarten{grid-template-columns:repeat(4,minmax(0,1fr))}}
.preiskarte{display:flex;flex-direction:column;padding:var(--space-6) var(--space-5)}
.preiskarte--empfohlen{border:2px solid var(--c-blue-strong);box-shadow:var(--shadow-glow),var(--shadow-2)}
.preiskarte__marke{position:absolute;top:-.85rem;left:var(--space-5);margin:0}
.preiskarte__marke .chip{background:linear-gradient(180deg,#2F6BC1,#275CA8);color:#fff}
.preiskarte h3{margin:0 0 var(--space-1);font-size:var(--fs-xl)}
.preiskarte__rahmen{margin:0 0 var(--space-4);color:var(--c-muted);font-size:var(--fs-sm)}
.preiskarte__preis{margin:0;color:var(--c-text);font-size:clamp(2.25rem,2rem + 1vw,2.75rem);font-weight:800;line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.preiskarte__preis--wort{font-size:var(--fs-2xl);padding-block:.4rem}
.preiskarte__einheit{margin:var(--space-1) 0 var(--space-5);font-size:var(--fs-sm);color:var(--c-muted)}
.preiskarte .liste{flex:1;font-size:var(--fs-sm)}
.preiskarte .btn{margin-top:var(--space-5)}
.preise-notiz{margin-top:var(--space-6);text-align:center}
.preise-notiz p{margin:0 auto var(--space-2);max-width:70ch}
.preise-kurz{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));list-style:none;margin:0 0 var(--space-5);padding:0}
.preise-kurz li{position:relative;margin:0;padding:var(--space-5);border-radius:var(--radius-lg);background:var(--c-surface);border:1px solid var(--c-border);box-shadow:var(--shadow-1)}
.preise-kurz li.empfohlen{border:2px solid var(--c-blue-strong);box-shadow:var(--shadow-glow)}
.preise-kurz b{display:block;font-size:var(--fs-lg)}
.preise-kurz .zahl{display:block;margin:var(--space-1) 0;color:var(--c-text);font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em}
.preise-kurz span{color:var(--c-muted);font-size:var(--fs-sm)}
.rechner{padding:clamp(1.25rem,1rem + 1.2vw,2rem);margin-bottom:var(--space-5);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-3)}
.rechner[hidden]{display:none}
.rechner__frage{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-3)}
.rechner__frage label{color:var(--c-text);font-weight:700}
.rechner__anzahl{font-size:var(--fs-2xl);font-weight:800;color:var(--c-link);font-variant-numeric:tabular-nums}
.rechner input[type=range]{width:100%;height:44px;margin:0;accent-color:var(--c-blue-strong);cursor:pointer}
.rechner__skala{display:flex;justify-content:space-between;margin:0 0 var(--space-5);font-size:var(--fs-xs);color:var(--c-muted);font-variant-numeric:tabular-nums}
.rechner__zeilen{display:grid;gap:var(--space-4);margin:0 0 var(--space-5)}
.rechner__zeile{display:grid;gap:var(--space-2);grid-template-columns:minmax(0,1fr) auto;align-items:center}
.rechner__name{font-size:var(--fs-sm)}
.rechner__zeile strong{font-weight:800;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.balken{grid-column:1/-1;height:14px;border-radius:7px;background:var(--c-surface-2);overflow:hidden}
.balken__wert{display:block;height:100%;width:100%;border-radius:7px;background:var(--c-border-strong);transform-origin:left;transition:width var(--t)}
.balken__wert--druvis{background:linear-gradient(90deg,var(--c-blue),var(--c-blue-strong))}
.rechner__ergebnis{margin:0 0 var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);background:var(--c-success-soft);color:var(--c-text);font-weight:700}
.rechner__ergebnis.ist-neutral{background:var(--c-surface-2)}
.tabelle-rahmen{width:100%;overflow-x:auto;border:1px solid var(--c-border);border-radius:var(--radius-lg);background:var(--c-surface);margin-bottom:var(--space-4)}
.tabelle{width:100%;border-collapse:collapse;margin:0;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.tabelle caption{padding:var(--space-4) var(--space-4) 0;text-align:left;color:var(--c-text);font-weight:700}
.tabelle th,.tabelle td{padding:.8rem var(--space-4);border-bottom:1px solid var(--c-border);text-align:left;vertical-align:top}
.tabelle thead th{color:var(--c-text);background:var(--c-surface-2);white-space:nowrap}
.tabelle tbody tr:last-child>*{border-bottom:0}
.tabelle .zahl{text-align:right;white-space:nowrap}

/* Zeitstrahl */
.zeitstrahl{list-style:none;margin:0;padding:0;position:relative}
.zeitstrahl::before,.zeitstrahl::after{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--c-border)}
.zeitstrahl::after{background:linear-gradient(var(--c-blue),var(--c-blue-strong));transform-origin:top;transform:scaleY(var(--fortschritt,1))}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){.js .zeitstrahl{view-timeline:--zeitstrahl block}.js .zeitstrahl::after{animation:wachsen linear both;animation-timeline:--zeitstrahl;animation-range:entry 25% cover 75%}}}
@keyframes wachsen{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.zeitstrahl>li{position:relative;margin:0;padding:0 0 var(--space-6) 2.75rem}
.zeitstrahl>li:last-child{padding-bottom:0}
.zeitstrahl>li::before{content:"";position:absolute;z-index:1;left:3px;top:4px;width:18px;height:20px;background:linear-gradient(160deg,#3878D0,#2F6BC1)}
.zeitstrahl>li.wichtig::before{background:var(--c-text)}
.zeitstrahl__datum{display:block;color:var(--c-link);font-weight:800;font-size:var(--fs-sm)}
.zeitstrahl__text{display:block;margin-top:.15rem;color:var(--c-text);font-weight:600}
.zeitstrahl__quelle{display:block;margin-top:.25rem;font-size:var(--fs-xs);color:var(--c-muted)}

.zitat{margin:0 0 var(--space-5);padding:var(--space-5) var(--space-6);border-left:4px solid var(--c-blue);border-radius:0 var(--radius-lg) var(--radius-lg) 0;background:var(--c-surface);box-shadow:var(--shadow-1)}
.zitat p{margin:0 0 var(--space-2);color:var(--c-text);font-size:var(--fs-lg);font-weight:600;line-height:1.5}
.zitat footer{color:var(--c-muted);font-size:var(--fs-sm)}

/* Fragen */
.faq{max-width:880px}
.faq__eintrag{border-bottom:1px solid var(--c-border)}
.faq__eintrag:first-of-type{border-top:1px solid var(--c-border)}
.faq__eintrag summary{position:relative;display:block;list-style:none;cursor:pointer;padding:var(--space-5) 3rem var(--space-5) 0;color:var(--c-text);font-size:var(--fs-lg);font-weight:700;line-height:1.4}
.faq__eintrag summary::-webkit-details-marker{display:none}
.faq__eintrag summary::after{content:"";position:absolute;right:.6rem;top:calc(50% - 7px);width:10px;height:10px;border-right:2.5px solid var(--c-link);border-bottom:2.5px solid var(--c-link);transform:rotate(45deg);transition:transform var(--tf)}
.faq__eintrag[open] summary::after{transform:rotate(-135deg);top:calc(50% - 2px)}
.faq__eintrag summary:hover{color:var(--c-link)}
.faq__antwort{padding:0 0 var(--space-5);max-width:72ch}
.faq__antwort>:last-child{margin-bottom:0}
@media (prefers-reduced-motion:no-preference){.faq__eintrag::details-content{block-size:0;overflow-y:clip;transition:block-size .35s var(--ease),content-visibility .35s allow-discrete}.faq__eintrag[open]::details-content{block-size:auto}}

/* Weiterlesen, Aufruf */
.verweise{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));list-style:none;margin:0;padding:0}
.verweise>li{margin:0}
.verweise .karte{height:100%}
.aufruf{padding-block:clamp(3rem,2.2rem + 3.5vw,5rem)}
.aufruf::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(50% 90% at 100% 50%,rgba(56,120,208,.34),transparent 70%)}
.aufruf__innen{display:grid;gap:var(--space-6);align-items:center}
@media (min-width:900px){.aufruf__innen{grid-template-columns:minmax(0,1.4fr) auto}}
.aufruf h2{color:#fff;margin-bottom:var(--space-3);font-size:var(--fs-2xl)}
.aufruf p{margin:0}

/* Inhaltsverzeichnis mit Scrollspy */
.mit-inhalt{display:grid;gap:var(--space-7)}
@media (min-width:1100px){.mit-inhalt .raster--3{grid-template-columns:repeat(2,minmax(0,1fr))}.mit-inhalt{grid-template-columns:230px minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:start}.inhaltsverzeichnis{position:sticky;top:96px;max-height:calc(100vh - 7rem);overflow:auto}}
.inhaltsverzeichnis__titel{margin:0 0 var(--space-3);color:var(--c-muted);font-size:var(--fs-xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.inhaltsverzeichnis ol{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:0;padding:0}
.inhaltsverzeichnis li{margin:0}
.inhaltsverzeichnis a{display:inline-flex;align-items:center;min-height:40px;padding:.35rem .85rem;border:1px solid var(--c-border-strong);border-radius:999px;color:var(--c-text);font-size:var(--fs-sm);font-weight:600;text-decoration:none;background:var(--c-surface)}
.inhaltsverzeichnis a:hover{color:var(--c-link);border-color:var(--c-link)}
@media (min-width:1100px){.inhaltsverzeichnis ol{display:block}.inhaltsverzeichnis a{display:flex;min-height:38px;border:0;border-left:2px solid var(--c-border);border-radius:0 6px 6px 0;background:none;color:var(--c-text-2);transition:color var(--tf),border-color var(--tf),background-color var(--tf)}.inhaltsverzeichnis a.ist-aktiv{color:var(--c-link);border-left-color:var(--c-blue-strong);background:var(--c-blue-soft)}}
.nach-oben{position:fixed;right:var(--space-5);bottom:var(--space-5);z-index:90;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:var(--c-text);background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);border:1px solid var(--glass-rand);box-shadow:var(--shadow-2);opacity:0;translate:0 14px;pointer-events:none;transition:opacity var(--t),translate var(--t)}
.nach-oben.ist-sichtbar{opacity:1;translate:none;pointer-events:auto}
.nach-oben .i{rotate:-90deg}

/* Fließtext und Rechtstexte */
.text{max-width:var(--text-w)}
.text h2{font-size:var(--fs-2xl);margin-top:var(--space-9)}
.text h3{margin-top:var(--space-7)}
.text>:first-child{margin-top:0}
.recht h2{font-size:var(--fs-xl);margin-top:var(--space-8);padding-top:var(--space-2)}
.recht h3{font-size:var(--fs-lg);margin-top:var(--space-6)}
.recht p,.recht li{font-size:1rem}
.recht__kasten{padding:var(--space-4) var(--space-5);margin:0 0 var(--space-4);border-radius:var(--radius-md);background:var(--c-bg-alt);border:1px solid var(--c-border)}
.recht__kasten>:last-child{margin-bottom:0}
.angaben{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--space-2) var(--space-5);margin:0 0 var(--space-5)}
.angaben dt{color:var(--c-muted);font-size:var(--fs-sm);padding-top:.15em}
.angaben dd{margin:0;color:var(--c-text)}
@media (max-width:479px){.angaben{grid-template-columns:1fr;gap:0}.angaben dd{margin-bottom:var(--space-3)}}
.gruppe{scroll-margin-top:96px}
.gruppe+.gruppe{margin-top:clamp(3rem,2rem + 3vw,4.5rem)}
.gruppe__kopf{display:flex;gap:var(--space-4);align-items:center;margin-bottom:var(--space-5)}
.gruppe__kopf h2{margin:0;font-size:var(--fs-2xl)}
.gruppe__kopf .karte__icon{width:56px;height:56px;border-radius:15px}
.gruppe__kopf .karte__icon .i{width:30px;height:30px}

/* Formular */
.formular{display:grid;gap:var(--space-5);padding:clamp(1.25rem,1rem + 1.2vw,2rem);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-3)}
.formular__zeile{display:grid;gap:var(--space-5)}
@media (min-width:720px){.formular__zeile{grid-template-columns:1fr 1fr}}
.feld{display:grid;gap:var(--space-2);align-content:start}
.feld label{color:var(--c-text);font-weight:700}
.feld__optional{color:var(--c-muted);font-weight:400}
.feld input,.feld select,.feld textarea{width:100%;min-height:var(--control-h);padding:.65rem .85rem;border:1.5px solid var(--c-border-strong);border-radius:var(--radius-md);background:var(--c-surface);color:var(--c-text);font:inherit;font-size:1rem;line-height:1.4}
.feld textarea{min-height:140px;resize:vertical}
.feld select{appearance:none;padding-right:2.5rem;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--c-blue-strong);outline:3px solid var(--c-focus);outline-offset:1px}
.feld [aria-invalid=true]{border-color:var(--c-danger)}
.feld__hilfe{margin:0;font-size:var(--fs-xs);color:var(--c-muted)}
.feld__fehler{margin:0;display:flex;gap:.35rem;align-items:center;font-size:var(--fs-sm);font-weight:600;color:var(--c-danger)}
.feld__fehler[hidden]{display:none}
.feld__fehler .i{width:18px;height:18px}
.haken-feld{grid-template-columns:auto minmax(0,1fr);gap:var(--space-3);align-items:start}
.haken-feld input{width:24px;height:24px;min-height:0;margin:.1rem 0 0;accent-color:var(--c-blue-strong)}
.haken-feld label{font-weight:400;color:var(--c-text-2);font-size:var(--fs-sm)}
.haken-feld .feld__fehler{grid-column:1/-1}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.formular__status:empty{display:none}
.formular__fuss{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;justify-content:space-between}
.formular__fuss .fussnote{max-width:46ch}
.ziel-fehler{display:none}
.ziel-fehler:target{display:flex}
.kontaktwege{display:grid;gap:var(--space-4)}
.kontaktweg{display:flex;gap:var(--space-4);align-items:center}
.kontaktweg p{margin:0}
.kontaktweg a{font-weight:700}
.schritte{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-4);counter-reset:schritt}
.schritte li{counter-increment:schritt;position:relative;margin:0;padding-left:3rem}
.schritte li::before{content:counter(schritt);position:absolute;left:0;top:0;display:grid;place-items:center;width:2rem;height:2.2rem;background:var(--c-blue-soft);color:var(--c-link);font-weight:800}
.schritte b{display:block}

/* Fußzeile */
.aufruf+.fuss{border-top:1px solid var(--band-border)}
.fuss{padding-block:clamp(3rem,2.5rem + 2.5vw,4.5rem) var(--space-6);font-size:var(--fs-sm)}
.fuss a{color:var(--band-text-2);text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss__raster{display:grid;gap:var(--space-8) var(--space-6);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.fuss__raster{grid-template-columns:1.4fr repeat(4,minmax(0,1fr))}}
.fuss__marke{grid-column:1/-1}
@media (min-width:900px){.fuss__marke{grid-column:auto}}
.fuss__marke img{width:140px;height:40px;margin-bottom:var(--space-4)}
.fuss__marke p{margin:0 0 var(--space-3);max-width:36ch}
.fuss h2{margin:0 0 var(--space-3);color:#fff;font-size:.9375rem;letter-spacing:.01em}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin:0}
.fuss li a{display:inline-flex;align-items:center;min-height:36px;padding-block:.25rem}
.fuss__kontakt{display:grid;gap:var(--space-1);margin-top:var(--space-4)}
.fuss__kontakt a{display:inline-flex;gap:var(--space-2);align-items:center;min-height:36px}
.fuss__kontakt .i{width:18px;height:18px;color:var(--band-link)}
.fuss__unten{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);justify-content:space-between;margin-top:var(--space-9);padding-top:var(--space-5);border-top:1px solid var(--band-border);color:var(--band-muted)}
.fuss__unten p{margin:0}

/* Hinweis-Toast, Themensuche */
.toast{position:fixed;left:50%;bottom:var(--space-5);z-index:300;translate:-50% 0;display:flex;gap:var(--space-3);align-items:flex-start;width:min(560px,calc(100% - 2rem));padding:var(--space-4) var(--space-4) var(--space-4) var(--space-5);background:var(--c-surface);color:var(--c-text-2);border:1px solid var(--c-border);border-left:4px solid var(--c-warning);border-radius:var(--radius-md);box-shadow:var(--shadow-3)}
.toast[hidden]{display:none}
.toast p{margin:0;flex:1}
.toast__zu{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-.5rem -.25rem -.5rem 0;border:0;border-radius:var(--radius-sm);background:none;color:var(--c-text);cursor:pointer}
.themensuche{display:grid;gap:var(--space-2);max-width:520px;margin-bottom:var(--space-6)}
.themensuche[hidden]{display:none}
.themensuche label{color:var(--c-text);font-weight:700}
.themensuche input{min-height:var(--control-h);padding:.65rem .85rem;border:1.5px solid var(--c-border-strong);border-radius:var(--radius-md);background:var(--c-surface);color:var(--c-text);font:inherit}
.themen{list-style:none;margin:0 0 var(--space-5);padding:0;display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.themen li{margin:0}
.themen li[hidden]{display:none}
.themen a{display:flex;flex-direction:column;justify-content:center;min-height:56px;padding:var(--space-3) var(--space-4);border:1px solid var(--c-border);border-radius:var(--radius-md);background:var(--c-surface);color:var(--c-text);font-weight:700;text-decoration:none}
.themen a:hover{border-color:var(--c-link)}
.themen small{color:var(--c-muted);font-weight:400}

/* Einblenden beim Scrollen */
@media (prefers-reduced-motion:no-preference){
.js:not(.sd) .einblenden-wartet{opacity:0;translate:0 26px;scale:.97}
.js:not(.sd) .einblenden-da{opacity:1;translate:none;scale:none;transition:opacity .7s var(--ease),translate .8s var(--ease),scale .8s var(--ease)}
.sd [data-einblenden]{animation:einblenden linear both;animation-timeline:view();animation-range:entry 0% cover 24%}
.sd :is(.raster,.branchen,.preiskarten,.stufen,.verweise)>:nth-child(4n+2)[data-einblenden]{animation-range:entry 4% cover 28%}
.sd :is(.raster,.branchen,.preiskarten,.stufen,.verweise)>:nth-child(4n+3)[data-einblenden]{animation-range:entry 8% cover 32%}
.sd :is(.raster,.branchen,.preiskarten,.stufen,.verweise)>:nth-child(4n+4)[data-einblenden]{animation-range:entry 12% cover 36%}}
@keyframes einblenden{from{opacity:0;translate:0 30px;scale:.965}to{opacity:1;translate:none;scale:none}}

@media print{*{animation:none!important;transition:none!important}.kopf,.aufruf,.nach-oben,.szene,.toast{display:none!important}.band{background:none!important;color:#000}.einblenden-wartet{opacity:1!important;translate:none!important;scale:none!important}}

/* Integrator 25.10.2026 („nicht überladen“): Untermenü in zwei Gruppen, Zeile „Außerdem“, Demo-Kacheln am Handy kompakt */
.mega__titel{margin:var(--space-3) 0 var(--space-1);padding:0 .5rem;color:var(--c-muted);font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
@media (min-width:1080px){.mega{width:min(820px,calc(100vw - 4rem))}.mega__gruppen{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}.mega__gruppe .mega__liste{grid-template-columns:1fr}.mega__titel{margin-top:0}}
.fussnote+p{margin-top:var(--space-4)}
.weitere{max-width:64ch;margin:var(--space-7) auto var(--space-4);color:var(--c-text-2);text-align:center}
.weitere .nb{white-space:nowrap}
@media (max-width:599px){.weitere{text-align:left}}
:where(main h1,#inhalt)[tabindex="-1"]:focus:not(:focus-visible){outline:none}
.bereich small{display:block;font-size:inherit}
@media (max-width:599px){.bereiche{grid-template-columns:1fr 1fr;gap:var(--space-2)}.bereich{min-height:0;padding:var(--space-3);gap:var(--space-2)}.bereich small{display:none}}