/* ============================================================
   Northwatt — shared stylesheet
   Design system v2 ("Zweiwelten"): every page opens in the dark
   world (hero, media, headline figures), crosses a hard seam into
   the light world (facts, site data, tables) and closes dark again.
   Section context model: every section is .ctx-dark or .ctx-light
   and sets its local tokens; colours only ever come from tokens.
   ============================================================ */

/* ---- self-hosted fonts ---- */
@font-face{font-family:'Archivo';font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/archivo-400.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/archivo-500.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/archivo-600.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/archivo-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:800;font-style:normal;font-display:swap;src:url(/assets/fonts/barlowcond-800.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/plexmono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/plexmono-500.woff2) format('woff2')}
/* Overschriftenschnitt: dieselbe Familie, auf der Breitenachse bei 112 fixiert.
   Variabel im Gewicht, damit 600 und 700 aus einer Datei kommen. */
@font-face{font-family:'Archivo Wide';font-weight:100 900;font-style:normal;font-display:swap;src:url(/assets/fonts/archivo-wide-var.woff2) format('woff2-variations')}

:root{
 /* families: one grotesk for everything, condensed for figures only,
    mono for labels. The condensed face is a signature, not a voice. */
 --body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
 --display:'Archivo',system-ui,-apple-system,sans-serif;
 /* Überschriften laufen leicht ausgestellt, alles andere in der normalen Breite */
 --head:'Archivo Wide','Archivo',system-ui,-apple-system,sans-serif;
 --num:'Barlow Condensed','Arial Narrow',sans-serif;
 --mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
 /* Text labels are set in the grotesk; the mono is reserved for content that
    really is machine readable: site codes, row numbers, placeholder chips. */
 --label:var(--display);

 /* type scale */
 /* One ladder, no in between values. Everything on the site picks a step
    from here; a rendered size that is not in this list is a bug. */
 /* Desktop-Leiter (10/2026): Überschriften, Vorspann und Zahlen wachsen auf
    breiten Schirmen weiter, statt bei 1100 px stehen zu bleiben. Telefon und
    Tablet bleiben bei denselben Werten wie vorher. */
 --fs-h1:clamp(36px,min(6.2vw,8.5vh + 10px),76px);
 --fs-h2:clamp(26px,3.5vw,48px);
 --fs-h3:clamp(19px,1.75vw,25px);
 --fs-lead:clamp(17px,1.55vw,22px);
 --fs-claim:clamp(26px,3.9vw,56px);
 --fs-body:16.5px;
 --fs-sm:15px;
 --fs-xs:13.5px;
 --fs-fine:12px;
 --fs-num:clamp(34px,4.6vw,64px);
 --fs-num-md:44px;
 --fs-num-sm:34px;
 /* mono, for labels and codes only */
 --fs-label:11.5px;
 --fs-label-sm:10.5px;
 --fs-code:12px;

 /* rhythm */
 --wrap:1280px;
 --gutter:clamp(20px,4.2vw,56px);
 /* Höhe der Kopfzeile; das mobile Menü beginnt genau darunter */
 --navh:64px;
 --sec-pad:clamp(64px,7vw,104px);
 /* the marginal column that carries row numbers and step labels; the same
    on every page so numbered lists line up across the site */
 --index-col:128px;
 --index-gap:40px;
 /* three card paddings, nothing in between */
 --pad-card-sm:20px;
 --pad-card:26px;
 --pad-card-lg:32px;
 --sec-pad-sm:clamp(40px,4.5vw,64px);
 --sec-pad-lg:clamp(80px,9vw,132px);

 /* brand constants used outside a context (nav, footer, seams) */
 --nw-deep:#073124;
 --nw-dark:#0B4030;
 --nw-panel:#0F4C39;
 --nw-brand:#0B6446;
 --nw-mint:#5FC49B;
 --nw-seam:#127A57;
 --nw-cream:#F2F6F4;

 /* Bewegung: eine Kurve, drei Dauern. Alles auf der Seite benutzt diese
    drei Werte, damit sich die Seite überall gleich anfühlt. */
 --ease:cubic-bezier(.22,.61,.36,1);
 --dur-fast:.16s;
 --dur:.26s;
 --dur-slow:.62s;
}
@media(min-width:1000px){:root{--navh:76px}}
/* Ab 1280 px eine Stufe größer: Fließtext, Labels und die Randspalte. */
@media(min-width:1280px){:root{--fs-body:17.5px;--fs-sm:16px;--fs-xs:14px;--fs-label:12.5px;--fs-label-sm:11.5px;--fs-code:13px;--index-col:152px;--index-gap:48px}}
@media(max-height:500px) and (orientation:landscape){:root{--navh:56px}}
@media(min-width:1600px){:root{--wrap:1360px}}
@media(min-width:2200px){:root{--wrap:1440px}}

/* ---- contexts ---- */
.ctx-dark{
 --fg:#F2F6F4; --fg2:#B0C5BB; --fg3:#B2C8BD;
 --eyebrow:#A5C6B6; --accent:#5FC49B; --dev:#E0A64A;
 /* erhobene Flächen tragen einen eigenen Verlauf und eine Lichtkante */
 --surface:linear-gradient(180deg,#145844 0%,#0F4C39 100%); --surface2:#0A3B2C;
 --line:rgba(236,246,242,.13); --line2:rgba(236,246,242,.26);
 --bar-track:rgba(236,246,242,.14);
 --btn-bg:#F2F6F4; --btn-fg:#073124;
 --ghost-bd:rgba(236,246,242,.34); --ghost-fg:#F2F6F4;
 --tablehi:rgba(95,196,155,.10);
 --shadow:inset 0 1px 0 rgba(255,255,255,.09),0 1px 2px rgba(0,0,0,.22),0 16px 40px rgba(0,0,0,.24);
 --sunk:rgba(5,32,24,.4);
 --sunk-shadow:inset 0 1px 3px rgba(0,0,0,.28);
 --rule-head:rgba(236,246,242,.34);
 --link:#F2F6F4;
}
.ctx-light{
 --fg:#101614; --fg2:#4A5B52; --fg3:#5A6961;
 --eyebrow:#0B6446; --accent:#0B6446; --dev:#8A5A0C;
 --surface:#FFFFFF; --surface2:#EAECEA;
 --line:#DCE0DE; --line2:#BFC5C1;
 --bar-track:#E3E7E5;
 --btn-bg:#0B6446; --btn-fg:#FFFFFF;
 --ghost-bd:#BFC5C1; --ghost-fg:#101614;
 --tablehi:#EAF1ED;
 --shadow:0 1px 2px rgba(16,22,20,.05),0 14px 32px rgba(16,22,20,.07);
 --sunk:#EFF1EF;
 --sunk-shadow:inset 0 1px 3px rgba(16,22,20,.06);
 --rule-head:#101614;
 --link:#101614;
}

/* ---- Sektionsgründe ----
   Die dunkle Welt hat einen Verlauf und eine Lichtquelle oben links, damit
   aufeinanderfolgende dunkle Sektionen als ein modellierter Körper lesen und
   nicht als Streifen. Die helle Welt bleibt bewusst flach. */
.gnd-deep{background:linear-gradient(180deg,#083527 0%,#063022 100%)}
.gnd-dark{background:linear-gradient(180deg,#0C4433 0%,#0A3D2D 100%)}
.gnd-panel{background:linear-gradient(180deg,#10503D 0%,#0E4A38 100%)}
.gnd-paper{background:#F5F6F5}
.gnd-band{background:#EAECEA}
.ctx-dark:is(.gnd-deep,.gnd-dark,.gnd-panel){position:relative;isolation:isolate}
.ctx-dark:is(.gnd-deep,.gnd-dark,.gnd-panel)::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(150% 130% at 12% -40%,rgba(120,220,180,.075),transparent 72%);
}

/* ---- base ---- */
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
 font-family:var(--body);font-size:var(--fs-body);line-height:1.6;
 -webkit-font-smoothing:antialiased;overflow-x:hidden;background:var(--nw-deep);
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:#BFEAD6;color:#073124}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:#F2F6F4;color:#073124;padding:10px 16px;font-weight:600;text-decoration:none}
.skip-link:focus{left:8px;top:8px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec-pad);color:var(--fg)}
.sec--tight{padding-block:var(--sec-pad-sm)}
.sec--lg{padding-block:var(--sec-pad-lg)}

/* seams: the 1px hairline between two sections of the same world, and the
   2px brand rule that marks the crossing from the dark world to the light. */
.seam{border-top:1px solid rgba(236,246,242,.13)}
.seam--hard{height:3px;background:var(--nw-seam)}

/* ---- type ---- */
.eyebrow{
 font-family:var(--label);font-weight:600;font-size:var(--fs-label);
 letter-spacing:.13em;text-transform:uppercase;color:var(--eyebrow);display:block;
}
.h1{
 font-family:var(--head);font-weight:700;font-size:var(--fs-h1);
 line-height:1.03;letter-spacing:-.02em;color:var(--fg);text-wrap:balance;
}
.h2{
 font-family:var(--head);font-weight:700;font-size:var(--fs-h2);
 line-height:1.09;letter-spacing:-.017em;color:var(--fg);text-wrap:balance;
}
.h3{
 font-family:var(--head);font-weight:600;font-size:var(--fs-h3);
 line-height:1.17;letter-spacing:-.01em;color:var(--fg);text-wrap:balance;
}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--fg2);max-width:54ch;text-wrap:pretty}
.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}

/* ---- Sektionskopf ----
   Eine Regel über die volle Breite, das Label in der Randspalte, die
   Überschrift daneben. Dieselbe Randspalte, auf der die nummerierten Zeilen
   und die Schrittlabels sitzen, damit alles auf einer Linie liegt. */
/* Die Regel ist genau so breit wie die Randspalte, auf der die Nummern und
   Beschriftungen sitzen. Sie gehört damit zum Label und nicht zur ganzen
   Seite; über die volle Containerbreite las sie sich auf dem Desktop wie ein
   Trenner, obwohl die Sektionen sich längst über die Fläche trennen. */
.shead{position:relative;padding-top:20px}
.shead::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;max-width:180px;background:var(--rule-head)}
@media(min-width:1000px){.shead::before{max-width:var(--index-col)}}
.shead__row{display:grid;grid-template-columns:1fr;gap:9px}
.shead__lead{margin-top:16px;max-width:56ch}
@media(min-width:1000px){
 .shead__row{grid-template-columns:var(--index-col) minmax(0,1fr);gap:var(--index-gap);align-items:start}
 .shead__row .eyebrow{padding-top:.62em;overflow-wrap:break-word;hyphens:auto}
 .shead__lead{margin-left:calc(var(--index-col) + var(--index-gap))}
}

/* ---- Kennzahlenband ----
   Dunkel, über die volle Breite, drei bis vier Zahlen mit senkrechten Regeln.
   Setzt einen Takt zwischen zwei Textsektionen. */
.figband{display:grid;grid-template-columns:1fr;gap:26px;margin-top:38px}
@media(min-width:820px){.figband{grid-template-columns:repeat(3,1fr);gap:0}}
@media(min-width:820px){.figband--4{grid-template-columns:repeat(4,1fr)}}
.figband__i{padding-top:20px;border-top:1px solid var(--line2)}
@media(min-width:820px){
 .figband__i{padding:0 32px;border-top:0;border-left:1px solid var(--line2)}
 .figband__i:first-child{padding-left:0;border-left:0}
}
.figband__l{font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.12em;text-transform:uppercase;color:var(--eyebrow);display:block;margin-bottom:14px}
.figband__n{font-family:var(--num);font-weight:800;font-size:var(--fs-num);line-height:.84;color:var(--fg);font-variant-numeric:tabular-nums}
.figband__n .u{font-family:var(--body);font-weight:600;font-size:.3em;margin-left:.14em;color:var(--fg2)}
.figband p{margin-top:14px;font-size:var(--fs-sm);line-height:1.5;color:var(--fg2);max-width:34ch}

/* ---- Bild und Datenblatt ----
   Ein Bild bis an die Kante, daneben Zeilen statt Karten. Ruhiger und
   wertiger als drei Kacheln nebeneinander. */
.sheetsplit{display:grid;grid-template-columns:1fr;background:var(--surface2)}
.sheetsplit--noim{grid-template-columns:1fr}
@media(min-width:900px){.sheetsplit{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}}
@media(min-width:900px){.sheetsplit--noim{grid-template-columns:1fr}}
.sheetsplit--noim .sheetsplit__tx{max-width:760px}
.sheetsplit__im{position:relative;min-height:260px}
@media(min-width:900px){.sheetsplit__im{min-height:100%}}
.sheetsplit__tx{padding:clamp(28px,4vw,52px)}
.sheetsplit__tx .h2{font-size:var(--fs-h2)}
.sheetsplit dl{margin-top:28px;border-top:1px solid var(--line)}
.sheetsplit .r{display:grid;grid-template-columns:1fr;gap:3px;padding:15px 0;border-bottom:1px solid var(--line)}
@media(min-width:560px){.sheetsplit .r{grid-template-columns:minmax(120px,.4fr) minmax(0,1fr);gap:20px;align-items:baseline}}
.sheetsplit dt{font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.11em;text-transform:uppercase;color:var(--fg3)}
.sheetsplit dd{font-size:var(--fs-sm);font-weight:500;color:var(--fg)}
.sheetsplit dd.open{font-weight:400;font-style:italic;color:var(--dev)}

/* ---- Aussageband ----
   Ein Satz, groß gesetzt, mit Zuordnung darunter. Gibt der Seite eine Stimme
   und einen Ort zum Durchatmen. */
.claim{font-family:var(--head);font-weight:700;font-size:var(--fs-claim);line-height:1.14;letter-spacing:-.017em;color:var(--fg);max-width:22ch;text-wrap:balance}
.claim__b{margin-top:22px;font-size:var(--fs-lead);line-height:1.55;color:var(--fg2);max-width:56ch}
.claim__at{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-top:32px;padding-top:18px;border-top:1px solid var(--line2)}
.claim__l{font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.12em;text-transform:uppercase;color:var(--eyebrow)}
.claim__v{font-size:var(--fs-sm);color:var(--fg2)}

/* figures: the only place the condensed face is used */
.num{font-family:var(--num);font-weight:800;line-height:.86;font-variant-numeric:tabular-nums;color:var(--fg)}
.num .u{font-family:var(--body);font-weight:600;font-size:.3em;margin-left:.14em;color:var(--fg2);letter-spacing:0}

/* wordmark */
.wm{font-family:var(--head);font-weight:700;letter-spacing:-.025em;line-height:1;display:inline-flex;align-items:flex-end;font-size:20px;color:var(--fg)}
.wm .o,.wm .f{font-weight:700}
.wm .dot{display:inline-block;width:.22em;height:.22em;background:var(--nw-mint,#5FC49B);margin-left:.12em;margin-bottom:.06em;flex:none}
.wm--lg{font-size:26px}
.wm--A{font-size:25px;font-weight:900;letter-spacing:-.03em}
.wm--A .o,.wm--A .f{font-weight:900}
.wm--A .dot{width:.26em;height:.26em;margin-left:.1em}

/* ---- buttons and links ---- */
.btn{
 display:inline-flex;align-items:center;gap:.5em;font-family:var(--body);
 font-weight:600;font-size:var(--fs-sm);line-height:1.2;letter-spacing:.005em;padding:15px 24px;
 border:1px solid transparent;text-decoration:none;cursor:pointer;
 transition:transform var(--dur-fast) var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn-primary{background:var(--btn-bg);color:var(--btn-fg)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{border-color:var(--ghost-bd);color:var(--ghost-fg)}
.btn-ghost:hover{border-color:var(--fg)}
.btns{display:flex;flex-wrap:wrap;gap:12px}
/* Der Unterstrich läuft nur unter dem Text, nicht unter dem Pfeil. Lag er auf
   dem Link selbst, riss ihn der Abstand zwischen Text und Pfeil auf. */
.alink{font-weight:600;font-size:var(--fs-sm);color:var(--link);text-decoration:none;display:inline-flex;align-items:center;gap:.5em}
.alink__t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:var(--line2)}
.alink:hover .alink__t{text-decoration-color:currentColor}
.alink:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.alink .ar{transition:transform var(--dur) var(--ease)}
.alink:hover .ar{transform:translateX(4px)}
.alink--back:hover .ar{transform:translateX(-4px)}

/* ============================================================
   Navigation — one row, always dark
   ============================================================ */
.nav{position:sticky;top:0;z-index:50;background:rgba(7,49,36,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(236,246,242,.14)}
.nav .wm,.nav__link{color:#F2F6F4}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--navh)}
@media(min-width:1000px){.nav .wm{font-size:28px}.nav__links{gap:32px}.nav__cta{margin-left:8px}}
.nav__links{display:none;align-items:center;gap:26px}
.nav__link{position:relative;font-weight:500;font-size:var(--fs-sm);text-decoration:none;opacity:.84;transition:opacity var(--dur-fast) var(--ease);white-space:nowrap}
.nav__link::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:rgba(242,246,244,.45);transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
.nav__link:hover::after{transform:scaleX(1)}
.nav__link:hover{opacity:1}
.nav__link.is-active{opacity:1}
.nav__link.is-active::after{transform:scaleX(1);background:var(--nw-mint)}
.nav__link:focus-visible{outline:2px solid var(--nw-mint);outline-offset:4px}
.nav__cta{display:none;background:#F2F6F4;color:#073124;border:none;padding:13px 20px}
/* CSS-only toggle: the checkbox is visually hidden but stays focusable, so the
   mobile menu opens with no JavaScript at all (label click flips :checked). */
.nav__toggle{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.nav__burger{display:inline-block;width:24px;height:14px;position:relative;background:none;border:none;padding:0;cursor:pointer}
.nav__burger span{position:absolute;left:0;right:0;height:1.5px;background:#F2F6F4;transition:transform .25s ease,opacity .2s ease}
.nav__burger span:nth-child(1){top:0}.nav__burger span:nth-child(2){top:6px}.nav__burger span:nth-child(3){top:12px}
.nav__toggle:focus-visible ~ .nav .nav__burger{outline:2px solid var(--nw-mint);outline-offset:6px}
.nav__toggle:checked ~ .nav .nav__burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav__toggle:checked ~ .nav .nav__burger span:nth-child(2){opacity:0}
.nav__toggle:checked ~ .nav .nav__burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* ---- mobiles Menü ----
   Eine Fläche unter der Kopfzeile, genau so hoch wie ihr Inhalt. Die Seite
   darunter wird abgedunkelt, ein Tipp auf die dunkle Fläche schließt. So
   entsteht nie ein leerer Raum zwischen Liste und Knopf. Die Kopfzeile liegt
   mit z-index 50 über allem, das Menü beginnt genau an ihrer Unterkante. */
.nav__dim{position:fixed;inset:0;z-index:30;background:rgba(2,14,10,.58);
 backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
 opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s}
.nav__toggle:checked ~ .nav__dim{opacity:1;visibility:visible;transition:opacity .3s var(--ease),visibility 0s}
.nav__mobile{position:fixed;left:0;right:0;top:var(--navh);z-index:40;
 max-height:calc(100vh - var(--navh));max-height:calc(100dvh - var(--navh));overflow-y:auto;overscroll-behavior:contain;
 background:#0A3328;border-bottom:1px solid rgba(242,246,244,.12);box-shadow:0 26px 50px rgba(0,0,0,.38);
 opacity:0;transform:translateY(-10px);visibility:hidden;
 transition:opacity .28s ease,transform .32s var(--ease),visibility 0s linear .32s}
.nav__toggle:checked ~ .nav__mobile{opacity:1;transform:none;visibility:visible;
 transition:opacity .28s ease,transform .32s var(--ease),visibility 0s}
.menu__in{max-width:var(--wrap);margin:0 auto;padding:4px var(--gutter) 24px}
.menu__pri a{position:relative;display:flex;align-items:center;min-height:62px;
 font-family:var(--head);font-weight:600;font-size:24px;line-height:1.15;letter-spacing:-.018em;
 color:#F2F6F4;text-decoration:none;border-bottom:1px solid rgba(242,246,244,.1)}
.menu__pri a[aria-current="page"]{color:var(--nw-mint)}
.menu__pri a[aria-current="page"]::before{content:"";position:absolute;left:calc(-1 * var(--gutter));top:18px;bottom:18px;width:3px;background:var(--nw-mint)}
.menu__pri a:last-child{border-bottom:none}
.menu__cta{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;margin-top:18px;padding:0 20px;
 background:#F2F6F4;color:#073124;font-weight:600;font-size:16px;letter-spacing:.005em;text-decoration:none}
.menu__cta span{font-size:18px}
.menu__pri a:focus-visible{outline:2px solid var(--nw-mint);outline-offset:2px}
.menu__cta:focus-visible{outline:2px solid var(--nw-mint);outline-offset:3px}
.menu__pri a:active,.menu__cta:active{opacity:.7}
/* Einträge erscheinen kurz nacheinander */
.menu__pri a,.menu__cta{opacity:0;transform:translateY(8px);transition:opacity .36s var(--ease),transform .36s var(--ease)}
.nav__toggle:checked ~ .nav__mobile .menu__pri a,
.nav__toggle:checked ~ .nav__mobile .menu__cta{opacity:1;transform:none}
.nav__toggle:checked ~ .nav__mobile .menu__pri a:nth-child(1){transition-delay:.05s}
.nav__toggle:checked ~ .nav__mobile .menu__pri a:nth-child(2){transition-delay:.09s}
.nav__toggle:checked ~ .nav__mobile .menu__pri a:nth-child(3){transition-delay:.13s}
.nav__toggle:checked ~ .nav__mobile .menu__pri a:nth-child(4){transition-delay:.17s}
.nav__toggle:checked ~ .nav__mobile .menu__pri a:nth-child(5){transition-delay:.21s}
.nav__toggle:checked ~ .nav__mobile .menu__pri a:nth-child(6){transition-delay:.25s}
.nav__toggle:checked ~ .nav__mobile .menu__pri a:nth-child(7){transition-delay:.29s}
.nav__toggle:checked ~ .nav__mobile .menu__cta{transition-delay:.31s}
/* Ab Tabletbreite: der Knopf in seiner natürlichen Breite statt über die
   ganze Fläche gezogen */
@media(min-width:600px){
 .menu__cta{display:inline-flex;min-width:300px}
}
/* Telefon quer: flacher, damit alles ohne Scrollen passt */
@media(max-height:500px) and (orientation:landscape){
 .menu__pri a{min-height:44px;font-size:19px}
 .menu__cta{min-height:46px;margin-top:10px}
}
@media(min-width:1000px){.nav__links{display:flex}.nav__cta{display:inline-flex}.nav__burger{display:none}.nav__toggle{display:none}.nav__mobile,.nav__dim{display:none!important}}
.nav.scrolled{background:rgba(5,38,28,.96);border-bottom-color:rgba(236,246,242,.22);box-shadow:0 1px 0 rgba(0,0,0,.24),0 12px 34px rgba(0,0,0,.22)}
.nav{transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}

/* ============================================================
   Hero — content left, capacity panel right (the right half of the
   old hero was empty; the figures now live there instead of being
   repeated in a separate band further down the page)
   ============================================================ */
.hero{position:relative;display:flex;align-items:flex-end;overflow:hidden;background:var(--nw-deep);min-height:clamp(520px,80vh,760px)}
.hero--inner{min-height:clamp(340px,48vh,480px)}
.hero--plain{background:linear-gradient(180deg,#083527 0%,#062C20 100%)}
@media(max-height:560px) and (orientation:landscape){.hero,.hero--inner{min-height:auto}.hero__in{padding-block:40px}}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,49,36,.86) 0%,rgba(7,49,36,.55) 42%,rgba(7,49,36,.2) 72%),linear-gradient(180deg,rgba(7,49,36,.22) 0%,rgba(7,49,36,.62) 54%,rgba(7,49,36,.92) 100%)}
.hero--video .hero__bg::after{background:linear-gradient(180deg,rgba(7,49,36,.18) 0%,rgba(7,49,36,.66) 30%,rgba(7,49,36,.95) 62%,#073124 100%)}
/* Der Hero bekommt dieselbe Modellierung wie die dunklen Sektionen: eine
   Vignette an den Rändern, ein Lichtschein oben links, eine Absetzung unter
   der Navigation und ein Auslauf nach unten, damit er landet statt abzureißen. */
.hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
 background:
  radial-gradient(150% 130% at 12% -30%,rgba(120,220,180,.10),transparent 68%),
  radial-gradient(120% 100% at 50% 50%,transparent 42%,rgba(4,22,16,.42) 100%),
  linear-gradient(180deg,rgba(4,22,16,.4) 0%,transparent 16%),
  linear-gradient(0deg,rgba(6,44,32,.85) 0%,transparent 26%);
}
.hero__in{position:relative;z-index:2;width:100%;padding-block:52px 44px;color:#F2F6F4}
/* the lower band of the hero belongs to the scroll hint and the video
   control, so the content block keeps clear of it */
@media(min-width:1000px){.hero__in{padding-block:96px 84px}}
.hero .h1{max-width:15ch;color:#F2F6F4}
.hero .eyebrow{color:#A5C6B6}
.hero .lead{color:#C9DBD2;margin-top:18px;text-wrap:balance}
.hero .btns{margin-top:30px}
.hero__grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:end}
@media(min-width:1000px){.hero__grid{grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr);gap:56px}}
/* Telefon quer und kleine Tablets quer: Kennzahlen neben den Text statt darunter */
@media(min-width:740px) and (max-width:999px) and (orientation:landscape){.hero__grid{grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:32px}}
/* Tablet hoch: Kennzahlen bleiben unter dem Text, aber nicht über die volle Breite gezogen */
@media(min-width:600px) and (max-width:999px) and (orientation:portrait){.hero__grid .cpanel{max-width:600px}}
/* capacity panel */
/* The panel is one ruled box: the header rule, the cell rules and the footer
   rule all run from border to border. It used to carry its own padding with a
   second grid floating inside it, which read as two boxes stacked. */
.cpanel{background:linear-gradient(180deg,rgba(20,88,68,.66),rgba(9,58,43,.72));border:1px solid rgba(236,246,242,.2);backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 6px rgba(0,0,0,.26),0 26px 60px rgba(0,0,0,.32)}
.cpanel__h{
 font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.14em;
 text-transform:uppercase;color:#A5C6B6;padding:15px 20px;
 border-bottom:1px solid rgba(236,246,242,.16);
}
.cpanel dl{display:grid;grid-template-columns:1fr 1fr;background:rgba(5,32,24,.34);box-shadow:inset 0 1px 3px rgba(0,0,0,.26)}
.cpanel .cp{padding:18px 20px 16px;border-bottom:1px solid rgba(236,246,242,.16)}
.cpanel .cp:nth-child(odd){border-right:1px solid rgba(236,246,242,.16)}
.cpanel .cp:nth-last-child(-n+2){border-bottom:none}
.cpanel dt{font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.11em;text-transform:uppercase;color:#A5BEB2;margin-top:9px}
/* the figure has to fit the widest value (24/7) inside half the panel on a
   narrow phone, so it scales with the viewport instead of sitting fixed */
.cpanel dd{
 font-family:var(--num);font-weight:800;font-size:clamp(27px,7vw,34px);
 line-height:.86;color:#F2F6F4;font-variant-numeric:tabular-nums;
}
.cpanel dd .u{font-family:var(--body);font-weight:600;font-size:.4em;margin-left:.14em;color:#B0C5BB}
.cpanel__foot{padding:15px 20px 16px;border-top:1px solid rgba(236,246,242,.16)}
.hero__scroll{position:absolute;left:max(var(--gutter),calc(50% - var(--wrap)/2 + var(--gutter)));bottom:16px;z-index:2;font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.16em;text-transform:uppercase;color:rgba(242,246,244,.5);display:flex;align-items:center;gap:9px}
.hero__scroll .sd{width:1px;height:20px;background:linear-gradient(180deg,rgba(242,246,244,.6),transparent);display:inline-block}
@media(max-width:999px){.hero__scroll{display:none}}
/* video controls (WCAG 2.2.2: an autoplaying loop needs a way to stop it) */
.vidbtn{
 position:absolute;right:max(var(--gutter),calc(50% - var(--wrap)/2 + var(--gutter)));bottom:20px;z-index:3;
 width:40px;height:40px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;
 background:rgba(7,49,36,.5);border:1px solid rgba(236,246,242,.26);backdrop-filter:blur(6px);
 transition:background .2s ease,border-color .2s ease;
}
.vidbtn:hover{background:rgba(7,49,36,.75);border-color:rgba(236,246,242,.5)}
/* below the breakpoint the capacity panel fills the lower half of the hero,
   so the control moves up into the open picture area instead of sitting on
   the panel's corner */
@media(max-width:999px){.vidbtn{top:16px;bottom:auto;right:var(--gutter)}}
.vidbtn__i{display:block;width:12px;height:13px;border-left:3.5px solid #F2F6F4;border-right:3.5px solid #F2F6F4}
.vidbtn.is-paused .vidbtn__i{
 width:0;height:0;border-left:12px solid #F2F6F4;border-right:0;
 border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:4px;
}
.vidbtn:focus-visible{outline:2px solid var(--nw-mint);outline-offset:3px}

/* ============================================================
   Media slot — the green grade is the signature. No grid overlay,
   no corner marks: the treatment is one tint pass so the subject
   of the photograph still reads.
   ============================================================ */
.ph{position:relative;background:linear-gradient(160deg,#115743 0%,#0A3B2C 58%,#062A1E 100%);overflow:hidden;isolation:isolate;width:100%;height:100%}
.ph::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(200deg,rgba(16,96,68,.3),transparent 60%),linear-gradient(0deg,rgba(5,32,24,.5),transparent 46%)}
.ph__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:grayscale(.42) contrast(1.06)}
/* the tint pass itself */
.ph--photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(200deg,rgba(16,96,68,.52),rgba(8,52,38,.36) 55%,rgba(5,32,24,.6));mix-blend-mode:multiply}
.ph--photo::after{background:linear-gradient(0deg,rgba(4,18,12,.34),transparent 40%)}
.ph--lite{background:linear-gradient(160deg,#E1E8E4 0%,#CCD8D2 60%,#BCCCC5 100%)}
.ph--lite::after{background:linear-gradient(0deg,rgba(16,22,20,.16),transparent 46%)}
/* Offener Bildplatz: das Motiv fehlt noch und das soll man sehen. */
.ph--pending::before{content:"";position:absolute;inset:0;z-index:1;
 background:repeating-linear-gradient(45deg,rgba(236,246,242,.5) 0 1px,transparent 1px 10px);opacity:.16}
.ph--lite.ph--pending::before{background:repeating-linear-gradient(45deg,rgba(16,22,20,.5) 0 1px,transparent 1px 10px);opacity:.13}
.ph__tag{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:10px;
 padding:13px 16px;font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);
 letter-spacing:.12em;text-transform:uppercase;color:#C9DBD2;
 background:linear-gradient(0deg,rgba(5,32,24,.72),transparent)}
.ph--lite .ph__tag{color:#4A5B52;background:linear-gradient(0deg,rgba(255,255,255,.78),transparent)}
.ph__mark{flex:none;width:9px;height:9px;border:1px solid currentColor;display:block;opacity:.75}
.ph--lite.ph--photo::before{background:linear-gradient(200deg,rgba(16,96,68,.52),rgba(8,52,38,.36) 55%,rgba(5,32,24,.6));mix-blend-mode:multiply}
@media(prefers-reduced-motion:reduce){.ph__img:is(video){display:none}}

/* ============================================================
   Layout primitives
   ============================================================ */
/* numbered stack (Home: grid to running hardware) */
.stack{display:flex;flex-direction:column;margin-top:44px}
.srow{display:grid;grid-template-columns:1fr;gap:18px;padding-block:32px;border-top:1px solid var(--line)}
.srow:last-child{border-bottom:1px solid var(--line)}
.srow__num{font-family:var(--mono);font-size:var(--fs-code);letter-spacing:.12em;color:var(--fg3);margin-bottom:10px}
.srow__img{aspect-ratio:16/9;border:1px solid var(--line)}
.srow__txt p{margin-top:10px;max-width:46ch;color:var(--fg2)}
@media(min-width:700px) and (max-width:999px){.srow{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:center}.srow__img{aspect-ratio:3/2}}
@media(min-width:1000px){
 /* the row number is pulled into the margin and pinned to the first line of
    the heading, so it reads as a marginal note instead of floating beside
    the paragraph */
 .srow{
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--index-gap);
  align-items:center;padding-block:30px;
  padding-left:calc(var(--index-col) + var(--index-gap));
 }
 .srow__txt{position:relative}
 .srow__num{position:absolute;left:calc(-1 * (var(--index-col) + var(--index-gap)));top:3px;margin-bottom:0}
 /* a wider crop keeps the picture the same height as the text beside it and
    still lands on the right edge of the column */
 .srow__img{aspect-ratio:21/9;max-height:none}
}

/* workload cards */
.wcards{display:grid;gap:20px;grid-template-columns:1fr;margin-top:44px}
@media(min-width:700px){.wcards{grid-template-columns:1fr 1fr}}
.wcard{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.wcard__img{aspect-ratio:16/9;border-bottom:1px solid var(--line)}
.wcard__b{padding:var(--pad-card)}
.wcard h3{margin-top:14px}
.wcard p{margin-top:11px;color:var(--fg2);max-width:48ch;text-wrap:pretty}
.wcard .alink{margin-top:22px}

.tag{font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border:1px solid var(--line2);display:inline-block;color:var(--fg2)}
.tag--live{color:var(--fg);border-color:var(--line2)}

/* feature grid (subpages) */
.fgrid{display:grid;gap:20px;grid-template-columns:1fr;margin-top:44px}
@media(min-width:680px){.fgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.fgrid{grid-template-columns:1fr 1fr 1fr}}
@media(min-width:1000px){.fgrid--2{grid-template-columns:1fr 1fr}}
.fcard{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);padding:var(--pad-card);display:flex;flex-direction:column;gap:11px;box-shadow:var(--shadow)}
.fcard__n{font-family:var(--label);font-weight:600;font-size:var(--fs-label);letter-spacing:.1em;color:var(--fg3);text-transform:uppercase}
.fcard h3{margin-top:4px}
.fcard p{color:var(--fg2);max-width:42ch;text-wrap:pretty}
.fcard ul{list-style:none;margin-top:6px;color:var(--fg2);font-size:var(--fs-sm)}
.fcard li{padding:4px 0 4px 20px;position:relative}
.fcard li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:1px;background:var(--line2)}

/* steps */
.steps{display:grid;gap:0;grid-template-columns:1fr;margin-top:44px}
.step{display:grid;grid-template-columns:1fr;gap:6px;padding-block:28px;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step__n{font-family:var(--mono);font-size:var(--fs-code);letter-spacing:.12em;color:var(--fg3);text-transform:uppercase;line-height:1.5}
.step p{color:var(--fg2);max-width:54ch;margin-top:5px}
@media(min-width:1000px){.step{grid-template-columns:var(--index-col) minmax(0,1fr);gap:var(--index-gap);align-items:baseline}}

/* full data sheet (site detail pages) */
.sheet{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.sheet__h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:18px var(--pad-card);border-bottom:1px solid var(--line);background:var(--surface2)}
.sheet__h b{font-family:var(--display);font-weight:600;font-size:var(--fs-body)}
.sheet__h span{font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.11em;text-transform:uppercase;color:var(--fg2)}
.sheet dl{padding:6px var(--pad-card) 16px}
.sheet .r{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid var(--line)}
.sheet .r:last-child{border-bottom:none}
.sheet dt{font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--fg3);flex:none}
.sheet dd{font-weight:500;font-size:var(--fs-sm);text-align:right;font-variant-numeric:tabular-nums;color:var(--fg)}
.sheet dd.open{font-weight:400;font-style:italic;color:var(--dev)}

/* stats band */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--nw-deep);padding:34px 24px}
.ctx-light .stat{background:var(--surface)}
.stat .n{font-family:var(--num);font-weight:800;font-size:var(--fs-num);line-height:.86;color:var(--fg);font-variant-numeric:tabular-nums}
.stat .n .u{font-family:var(--body);font-weight:600;font-size:.3em;margin-left:.14em;color:var(--fg2)}
.stat .l{font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.11em;text-transform:uppercase;color:var(--fg2);margin-top:12px}

/* proof strip: short factual claims in one row, no cards */
.proof{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:44px}
@media(min-width:700px){.proof{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.proof{grid-template-columns:repeat(4,1fr)}}
.proof__i{background:var(--surface);padding:var(--pad-card)}
.ctx-dark .proof__i{box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.proof__l{font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.11em;text-transform:uppercase;color:var(--fg3)}
.proof__v{margin-top:11px;font-weight:500;font-size:var(--fs-sm);color:var(--fg);line-height:1.45}

/* comparison */
.tablewrap{margin-top:44px;overflow-x:auto;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.ctable{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:600px}
.ctable th,.ctable td{text-align:left;padding:18px 22px;border-bottom:1px solid var(--line);vertical-align:top}
.ctable tr:last-child th,.ctable tr:last-child td{border-bottom:none}
.ctable thead th{font-family:var(--label);font-size:var(--fs-label-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--fg2);font-weight:600}
.ctable thead th.cu{color:var(--fg);background:var(--tablehi);border-top:2px solid var(--accent)}
.ctable tbody th{font-weight:600;color:var(--fg);width:30%}
.ctable td.cu{color:var(--fg);background:var(--tablehi)}
.ctable td.ct{color:var(--fg2)}
.ck{color:var(--accent);margin-right:8px;font-weight:700}

/* faq */
.faq{margin-top:44px;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;font-family:var(--display);font-weight:600;font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.012em;color:var(--fg)}
.faq__q:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.faq__q::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:var(--body);font-weight:400;font-size:24px;color:var(--accent)}
.faq__item.open .faq__q::after{content:"\2212"}
.js .faq__a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq__a p{color:var(--fg2);padding-bottom:24px;max-width:64ch}
.faq__item.open .faq__a{max-height:600px}

/* split: what we provide vs what the partner provides */
.split{display:grid;gap:20px;grid-template-columns:1fr;margin-top:44px}
@media(min-width:700px){.split{grid-template-columns:1fr 1fr}}
.split__col{border:1px solid var(--line);background:var(--surface);padding:var(--pad-card-lg);box-shadow:var(--shadow)}
.split__col h3{margin-bottom:16px}
.split__col ul{list-style:none}
.split__col li{padding:12px 0 12px 24px;position:relative;color:var(--fg2);border-top:1px solid var(--line)}
.split__col li:first-child{border-top:none}
.split__col li::before{content:"";position:absolute;left:0;top:20px;width:9px;height:1px;background:var(--line2)}

/* site detail rows (Facilities) */
.sdetail{display:grid;gap:16px;grid-template-columns:1fr;margin-top:44px}
@media(min-width:760px){.sdetail{grid-template-columns:1fr 1fr}}
.sdrow{border:1px solid var(--line);background:var(--surface);padding:var(--pad-card);display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;box-shadow:var(--shadow)}
.sdrow__code{font-family:var(--mono);font-size:var(--fs-code);letter-spacing:.13em;color:var(--fg3);padding-top:6px}
.sdrow__mw{font-family:var(--num);font-weight:800;font-size:var(--fs-num-md);line-height:.88;color:var(--fg);font-variant-numeric:tabular-nums}
.sdrow__mw .u{font-family:var(--body);font-weight:600;font-size:var(--fs-xs);margin-left:5px;color:var(--fg2)}
.sdrow__meta{font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.09em;text-transform:uppercase;color:var(--fg3);display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.sdrow__note{color:var(--fg2);margin-top:12px;font-size:var(--fs-sm);max-width:44ch}

/* contact methods and form */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);padding:var(--pad-card);margin-bottom:24px}
.formnote p{font-size:var(--fs-sm);color:var(--fg2)}
.formnote p:first-child{color:var(--fg);font-size:var(--fs-body)}
.formnote p+p{margin-top:8px}
.formnote--warn{border-left:3px solid var(--dev)}

.ways{display:grid;gap:20px;grid-template-columns:1fr;margin-top:44px}
@media(min-width:760px){.ways{grid-template-columns:repeat(3,1fr)}}
.way{border:1px solid var(--line);background:var(--surface);padding:var(--pad-card);box-shadow:var(--shadow)}
.way__l{font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.11em;text-transform:uppercase;color:var(--fg3)}
.way__v{margin-top:12px;font-size:var(--fs-sm);line-height:1.8}
.way__v a{color:var(--fg);text-decoration:none;display:inline-block;padding-block:4px}
.way__v a:hover{color:var(--accent)}
.form{margin-top:44px;display:grid;gap:20px;max-width:680px}
.frow{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:640px){.frow{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.11em;text-transform:uppercase;color:var(--fg2)}
.field input,.field textarea,.field select{font-family:var(--body);font-size:var(--fs-body);color:var(--fg);background:var(--surface);border:1px solid var(--line2);padding:14px;width:100%}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.field textarea{min-height:150px;resize:vertical}

/* Hashrelay product page */
.hrlock{display:inline-grid;grid-template-columns:auto auto;column-gap:20px;align-items:center}
.hrlock__icon{grid-row:1;width:52px;height:52px;color:var(--fg)}
.hrlock__wm{display:contents}
.hrlock__name{grid-column:2;grid-row:1;font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.94;letter-spacing:-.01em;font-size:clamp(34px,5vw,54px);color:var(--fg);white-space:nowrap}
.hrlock__name .o{font-weight:400;opacity:.74}
.hrlock__tm{font-size:.28em;line-height:1;vertical-align:top;letter-spacing:0;margin-left:.14em}
.hrlock__sub{grid-column:2;grid-row:2;justify-self:end;font-weight:600;font-size:clamp(11px,1.4vw,13px);color:var(--fg2);margin-top:6px}
.hrlock--sm .hrlock__icon{width:34px;height:34px}
.hrlock--sm .hrlock__name{font-size:28px}
.hrlock--sm .hrlock__sub{font-size:var(--fs-label-sm);margin-top:3px}
.shot{position:relative;margin:0}
.shot__frame{position:relative;border:1px solid var(--line);background:#FFFFFF;padding:0}
.shot__frame img{width:100%;display:block}
.shots{display:grid;gap:26px;grid-template-columns:1fr;margin-top:44px;align-items:start}
@media(min-width:760px){.shots{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr)}}
.shots--single,.shots--single>*{grid-template-columns:1fr}
.modchips,.algochips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.modchip{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.07em;padding:9px 14px;border:1px solid var(--line2);color:var(--fg2);white-space:nowrap}
.showcase{margin-top:44px}
.show{padding-block:40px;border-top:1px solid var(--line)}
.show__n{font-family:var(--label);font-weight:600;font-size:var(--fs-label);letter-spacing:.14em;color:var(--fg3);display:block;text-transform:uppercase}
.show h3{margin-top:10px}
.show p{margin-top:10px;color:var(--fg2);max-width:64ch}
.show .shot{margin-top:26px}
.techgrid{display:grid;gap:26px;grid-template-columns:1fr;margin-top:44px;align-items:start}
@media(min-width:900px){.techgrid{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}}
.techgrid__cards{display:grid;gap:20px}
.techgrid .shot{max-width:340px;margin:0 auto;width:100%}
.shotph{position:relative;aspect-ratio:16/9;margin-top:44px}
.shotduo{display:grid;grid-template-columns:repeat(2,minmax(0,250px));gap:26px;justify-content:center;margin-top:44px}
.shotduo .shotph{aspect-ratio:9/19;margin-top:0}
.techgrid .shotduo{margin-top:0}

/* ============================================================
   Legal pages
   ============================================================ */
.lhead{background:var(--nw-deep);border-bottom:1px solid rgba(236,246,242,.14);padding-block:clamp(48px,6.5vw,84px) clamp(38px,5vw,54px)}
.lhead .eyebrow{color:#A5C6B6}
.lhead__t{font-family:var(--display);font-weight:700;font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.024em;color:#F2F6F4;margin-top:16px}
.lnav{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(236,246,242,.16);border:1px solid rgba(236,246,242,.16);margin-top:34px;max-width:760px}
@media(min-width:720px){.lnav{grid-template-columns:repeat(4,1fr)}}
.lnav__i{background:var(--nw-deep);display:flex;align-items:center;justify-content:center;text-align:center;min-height:56px;padding:14px 16px;font-weight:500;font-size:var(--fs-xs);color:#A7BCB1;text-decoration:none;transition:background .15s ease,color .15s ease}
.lnav__i:hover{color:#F2F6F4;background:#0D4634}
.lnav__i.is-active{color:#F2F6F4;background:var(--nw-panel);box-shadow:inset 0 -2px 0 var(--nw-mint)}
.lnav__i:focus-visible{outline:2px solid var(--nw-mint);outline-offset:-2px}
.lbody{background:#F5F6F5;color:#101614}
.lgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding-block:clamp(44px,6vw,76px)}
@media(min-width:1000px){.lgrid{grid-template-columns:238px minmax(0,1fr);gap:58px}}
.ltoc{display:none}
@media(min-width:1000px){.ltoc{display:block;align-self:start;position:sticky;top:96px}}
.ltoc__h{font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.13em;text-transform:uppercase;color:#5A6961;margin-bottom:14px}
.ltoc a{display:block;font-size:var(--fs-xs);line-height:1.4;color:#4A5B52;text-decoration:none;padding:6px 0 6px 14px;border-left:2px solid #DCE0DE;transition:color .15s ease,border-color .15s ease}
.ltoc a:hover{color:#0B6446}
.ltoc a.is-active{color:#101614;border-left-color:#0B6446;font-weight:600}
.ltoc a:focus-visible{outline:2px solid #0B6446;outline-offset:2px}
.lcol{max-width:760px;min-width:0}
.lupdated{font-family:var(--label);font-weight:600;font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:#5A6961;margin-bottom:22px;display:block}
.lsec{scroll-margin-top:96px;padding-top:34px;margin-top:34px;border-top:1px solid #DCE0DE}
.lsec:first-of-type{border-top:none;padding-top:18px;margin-top:8px}
.lsec__h{display:flex;gap:14px;align-items:baseline}
.lsec__n{font-family:var(--mono);font-size:var(--fs-code);color:#0B6446;font-weight:500;flex:none}
.lsec__t{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.2vw,26px);line-height:1.14;letter-spacing:-.016em;color:#101614}
.lsec p{font-size:var(--fs-body);line-height:1.72;color:#27302D;margin-top:14px;max-width:68ch}
.lsec strong{font-weight:600;color:#101614}
.lsec a{color:#0B6446;text-decoration:underline;text-underline-offset:2px}
.llist{list-style:none;margin-top:14px;max-width:68ch}
.llist li{position:relative;padding-left:24px;margin-top:10px;font-size:var(--fs-body);line-height:1.66;color:#27302D}
.llist li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:1px;background:#0B6446}
.ltable{margin-top:18px;overflow-x:auto;border:1px solid #DCE0DE;background:#fff}
.ltable table{border-collapse:collapse;width:100%;font-size:var(--fs-xs);min-width:540px}
.ltable th,.ltable td{text-align:left;padding:12px 14px;vertical-align:top;border-bottom:1px solid #DCE0DE}
.ltable thead th{font-family:var(--label);font-size:var(--fs-label-sm);letter-spacing:.09em;text-transform:uppercase;color:#3E4A47;background:#EAECEA;font-weight:600}
.ltable tbody tr:last-child td{border-bottom:none}
.ltable tbody tr:nth-child(even){background:#F5F6F5}
.ltable td:first-child{font-weight:600;color:#101614;white-space:nowrap}
.lcaps{margin-top:16px;padding:18px 20px;background:#EAF1ED;border-left:3px solid #0B6446;font-size:var(--fs-xs);line-height:1.74;color:#2A3532}
.todo{overflow-wrap:anywhere;background:#F7ECD8;color:#8A5A0C;padding:0 6px;border:1px solid #E3CE9C;font-size:.9em;font-family:var(--mono);letter-spacing:.02em}
.legal{max-width:760px;margin-top:8px}
.legal h2{font-family:var(--display);font-weight:600;font-size:clamp(19px,2.2vw,25px);line-height:1.14;color:var(--fg);margin-top:40px;letter-spacing:-.016em}
.legal h2:first-child{margin-top:0}
.legal h3{font-family:var(--display);font-weight:600;font-size:19px;color:var(--fg);margin-top:26px}
.legal p{color:var(--fg2);margin-top:14px;line-height:1.7}
.legal ul,.legal ol{color:var(--fg2);margin-top:14px;padding-left:22px;line-height:1.7}
.legal li{margin-top:8px}
.legal a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.legal strong{color:var(--fg)}
.legal table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin-top:18px;font-size:var(--fs-sm)}
.legal th,.legal td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top;color:var(--fg2);min-width:150px}
.legal th{font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.09em;text-transform:uppercase;color:var(--fg3)}
.legal__meta{font-family:var(--label);font-weight:600;font-size:var(--fs-label);letter-spacing:.07em;text-transform:uppercase;color:var(--fg3);margin-top:16px}
.legal__notice{border:1px solid var(--line);background:var(--surface);padding:20px;margin:0 0 32px;color:var(--fg2);font-size:var(--fs-sm);line-height:1.65;max-width:760px}
.legal__notice strong{display:block;font-family:var(--label);font-size:var(--fs-label-sm);letter-spacing:.11em;text-transform:uppercase;color:var(--fg3);margin-bottom:8px;font-weight:600}
.legal__policies{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 36px}
.legal__policies a{font-family:var(--label);font-weight:600;font-size:var(--fs-label);letter-spacing:.07em;text-transform:uppercase;border:1px solid var(--line2);padding:10px 14px;text-decoration:none;color:var(--fg)}
.legal__policies a:hover{border-color:var(--accent);color:var(--accent)}

/* utility pages */
.utilsec{min-height:62vh;display:flex;align-items:center}
.utilsec .code{font-family:var(--num);font-weight:800;font-size:clamp(72px,15vw,160px);line-height:.84;color:var(--accent)}
.utilsec .lead{margin-top:16px}
.utilsec .btns{margin-top:30px}

/* cta */
.cta__row{display:grid;gap:28px;grid-template-columns:1fr}

/* ============================================================
   Footer — corporate block: entity, address, three link columns,
   language and legal line
   ============================================================ */
.foot{position:relative;isolation:isolate;background:linear-gradient(180deg,#083527 0%,#05261C 100%);border-top:1px solid rgba(236,246,242,.13);padding-block:40px 22px;color:#F2F6F4}
.foot::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(150% 130% at 12% -40%,rgba(120,220,180,.06),transparent 72%)}
@media(min-width:760px){.foot{padding-block:48px 24px}}
.foot .wm{color:#F2F6F4}
/* Fuß K1 (22.10.2026): klassisch wie große Betreiber. Marke links, drei
   Spalten rechts, Resources einspaltig, damit keine Zeile umbricht und die
   Nachbarspalte nicht verrutscht. Unten eine Zeile mit Copyright und
   Gesellschaft, daneben die Rechtslinks. */
.foot__grid{display:grid;gap:32px}
.foot__tag{color:#B0C5BB;margin-top:12px;max-width:30ch;font-size:var(--fs-sm)}
.foot__about{color:#A0B9AE;margin-top:10px;max-width:40ch;font-size:var(--fs-xs);line-height:1.6}
.foot__cta{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--nw-mint);font-weight:600;font-size:var(--fs-sm);text-decoration:none}
.foot__cta span{transition:transform var(--dur-fast) var(--ease)}
.foot__cta:hover span{transform:translateX(3px)}
.foot__cta:focus-visible{outline:2px solid var(--nw-mint);outline-offset:3px}
.foot__cols{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px}
.fcol--res{grid-column:1 / -1}
.fcol .fcol__h{font-family:var(--label);font-size:var(--fs-label-sm);letter-spacing:.12em;text-transform:uppercase;color:#A5BEB2;font-weight:600;margin-bottom:10px}
.fcol a{display:block;text-decoration:none;color:#F2F6F4;opacity:.86;padding:5px 0;font-size:var(--fs-sm);white-space:nowrap}
.fcol a:hover{opacity:1}
.fcol a:focus-visible{outline:2px solid var(--nw-mint);outline-offset:2px}
.foot__bar{margin-top:34px;padding-top:18px;border-top:1px solid rgba(236,246,242,.14);display:grid;gap:12px}
.foot__co{font-size:var(--fs-fine);line-height:1.6;color:#93AFA2}
.foot__co strong{font-weight:500;color:#C9D8D1}
.foot__legal{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px}
.foot__legal a{color:#C9D8D1;text-decoration:none}
.foot__legal a:hover{color:#F2F6F4;text-decoration:underline;text-underline-offset:2px}
.foot__legal a:focus-visible{outline:2px solid var(--nw-mint);outline-offset:2px}
@media(min-width:760px){
 .foot__grid{grid-template-columns:1.2fr 2.8fr;gap:56px}
 .foot__cols{grid-template-columns:1fr 1fr 1.4fr;gap:40px}
 .fcol--res{grid-column:auto}
 .fcol .fcol__h{margin-bottom:14px}
 .foot__bar{grid-template-columns:auto 1fr;align-items:center;column-gap:32px;margin-top:48px;padding-top:22px}
 .foot__legal{justify-content:flex-end}
}

/* ---- motion ---- */
/* Reveal-on-scroll is a progressive enhancement: content is visible by
   default, and only hidden (to animate in) when JS is active (html.js). */
.js [data-rise]{opacity:0;transform:translateY(10px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
[data-rise].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-rise]{opacity:1;transform:none;transition:none}.hero__in>*{animation:none!important}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero__in>*{animation:rise var(--dur-slow) var(--ease) backwards}
.hero__grid>*{animation:rise var(--dur-slow) var(--ease) backwards}
.hero__grid>*:nth-child(2){animation-delay:.2s}

/* Zustände: in der dunklen Welt hebt sich nichts, dort wird die Lichtkante
   heller. In der hellen Welt hebt sich die Karte zwei Pixel und der Schatten
   wird tiefer. Zwei Regeln, sonst nichts. */
.wcard,.site,.sitelink,.fcard,.split__col,.pcard,.plead,a.tile{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.ctx-dark :is(.wcard,.site,.sitelink,.fcard,.split__col):hover{
 box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.24),0 18px 44px rgba(0,0,0,.3);
 border-color:rgba(236,246,242,.22);
}
.ctx-light :is(.wcard,.site,.sitelink,.fcard,.split__col,.pcard,.plead,a.tile):hover{
 transform:translateY(-2px);
 box-shadow:0 2px 5px rgba(16,22,20,.07),0 22px 48px rgba(16,22,20,.12);
 border-color:var(--line2);
}
.wcard__img,.srow__img{transition:filter var(--dur) var(--ease)}
.wcard:hover .wcard__img,.srow:hover .srow__img{filter:brightness(1.06)}

/* ============================================================
   Insights: Liste und Beitrag
   ============================================================ */
/* Themenfelder. Fünf Flächen mit der Anzahl: die vollständige Übersicht und
   je Kategorie eine eigene Seite. Ein leeres Feld bleibt sichtbar, ist aber
   kein Link, damit die Reihe nicht mit dem Bestand springt. */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:34px}
.tile{display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:104px;
 padding:15px 17px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
 color:var(--fg);text-decoration:none;
 transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.tiles .tile:first-child{grid-column:span 2;flex-direction:row;align-items:baseline;justify-content:flex-start;
 gap:14px;min-height:0;padding:13px 17px}
@media(min-width:760px){
 .tiles{grid-template-columns:repeat(5,1fr);gap:14px}
 .tiles .tile:first-child{grid-column:auto;flex-direction:column;align-items:stretch;
  justify-content:space-between;gap:16px;min-height:104px;padding:15px 17px}
}
.tile__n{font-family:var(--num);font-weight:800;font-size:var(--fs-num-sm);line-height:.9;letter-spacing:-.01em}
.tile__l{font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.11em;
 text-transform:uppercase;color:var(--fg2)}
.tile.is-on{background:var(--fg);border-color:var(--fg)}
.tile.is-on .tile__n,.tile.is-on .tile__l{color:#F5F6F5}
.tile--off{opacity:.55;box-shadow:none}
.tile:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* Aufmacher. Der neueste Beitrag auf der ersten Seite jeder Liste, als eigene
   Fläche über dem Raster. */
.plead{display:block;margin-top:20px;padding:24px 22px 26px;background:var(--surface);
 border:1px solid var(--line);box-shadow:var(--shadow);text-decoration:none;color:var(--fg);
 transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
@media(min-width:900px){.plead{display:grid;grid-template-columns:var(--index-col) minmax(0,1fr);
 gap:var(--index-gap);padding:34px 40px 38px}}
.plead__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
 font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.11em;
 text-transform:uppercase;color:var(--fg3)}
@media(min-width:900px){.plead__meta{display:block;padding-top:.5em}}
.plead__cat{color:var(--eyebrow)}
@media(min-width:900px){.plead__d{display:block;margin-top:8px}}
.plead__body{display:block}
.plead__t{display:block;margin-top:12px;max-width:20ch}
@media(min-width:900px){.plead__t{margin-top:0}}
.plead__x{display:block;margin-top:13px;color:var(--fg2);font-size:var(--fs-lead);line-height:1.55;max-width:56ch}
.plead__more{display:inline-flex;align-items:center;gap:.5em;margin-top:20px;
 font-weight:600;font-size:var(--fs-sm);color:var(--link)}
.plead__u{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:var(--line2)}
.plead .ar{transition:transform var(--dur) var(--ease)}
.plead:hover .ar{transform:translateX(4px)}
.plead:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* Kartenraster. Titel und Anriss sind auf feste Zeilen begrenzt, deshalb
   sitzen Datum und Pfeil in jeder Karte auf derselben Grundlinie. */
.pgrid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
@media(min-width:700px){.pgrid{grid-template-columns:1fr 1fr;gap:18px}}
@media(min-width:1060px){.pgrid{grid-template-columns:1fr 1fr 1fr;gap:20px}}
.pcard{display:flex;flex-direction:column;padding:22px 22px 18px;background:var(--surface);
 border:1px solid var(--line);box-shadow:var(--shadow);text-decoration:none;color:var(--fg)}
.pcard__cat{font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.11em;
 text-transform:uppercase;color:var(--eyebrow)}
.pcard__t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
 margin-top:11px;max-width:26ch}
.pcard__x{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
 margin-top:10px;color:var(--fg2);font-size:var(--fs-sm);line-height:1.5}
.pcard__foot{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
 margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.pcard__d{font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.11em;
 text-transform:uppercase;color:var(--fg3)}
.pcard .ar{color:var(--fg3);transition:transform var(--dur) var(--ease),color var(--dur) var(--ease)}
.pcard:hover .ar{transform:translateX(4px);color:var(--fg)}
.pcard:hover .pcard__t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:var(--line2)}
.pcard:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* Blätterung. Erscheint erst, wenn die Liste länger ist als eine Seite. */
.pgr{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:34px}
.pgr__b{display:inline-flex;align-items:center;justify-content:center;min-width:42px;padding:11px 12px;
 border:1px solid var(--line2);font-family:var(--label);font-weight:600;font-size:var(--fs-xs);
 color:var(--fg2);text-decoration:none;
 transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
a.pgr__b:hover{border-color:var(--fg);color:var(--fg)}
.pgr__b.is-on{background:var(--fg);border-color:var(--fg);color:#F5F6F5}
.pgr__b.is-off{opacity:.3}
.pgr__c{margin-left:auto;font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);
 letter-spacing:.11em;text-transform:uppercase;color:var(--fg3)}
.pgr__b:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Beitragskopf: kein Bild, der Titel trägt die Seite. */
.hero--post{min-height:auto;background:linear-gradient(180deg,#083527 0%,#062C20 100%)}
.hero--post .hero__in{padding-block:40px 44px}
@media(min-width:1000px){.hero--post .hero__in{padding-block:64px 68px}}
.hero--post .h1{max-width:20ch;font-size:clamp(30px,4.6vw,50px)}
.art__byline{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;margin-top:24px;
 padding-top:16px;border-top:1px solid rgba(236,246,242,.26);
 font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.11em;
 text-transform:uppercase;color:#A0B9AE}

/* Artikel. Eine Spalte, ruhiges Maß, die Zwischenüberschriften sitzen auf
   derselben Linie wie der Text. */
.art{max-width:68ch}
.art__lead{font-size:var(--fs-lead);line-height:1.5;color:var(--fg);max-width:58ch;font-weight:500}
.art p{margin-top:20px;font-size:var(--fs-body);line-height:1.72;color:var(--fg2)}
.art__lead + p,.art__lead + h2{margin-top:32px}
.art__h2{margin-top:44px;font-size:var(--fs-h3);color:var(--fg);scroll-margin-top:calc(var(--navh) + 24px)}
@media(min-width:1000px){.art__h2{font-size:clamp(23px,2.4vw,28px)}}
.art__h3{margin-top:32px;color:var(--fg)}
.art__list{margin-top:18px;padding-left:0;list-style:none;color:var(--fg2)}
.art__list li{position:relative;padding:5px 0 5px 26px;font-size:var(--fs-body);line-height:1.66}
.art__list li::before{content:"";position:absolute;left:0;top:16px;width:10px;height:1px;background:var(--line2)}
.art ol.art__list{counter-reset:art}
.art ol.art__list li{counter-increment:art}
.art ol.art__list li::before{content:counter(art);top:5px;width:auto;height:auto;background:none;
 font-family:var(--mono);font-size:var(--fs-code);color:var(--fg3)}
.art__quote{margin-top:26px;padding:4px 0 4px 22px;border-left:3px solid var(--nw-seam)}
.art__quote p{margin:0;font-size:var(--fs-lead);line-height:1.55;color:var(--fg)}
.art__rule{margin:40px 0 0;border:0;border-top:1px solid var(--line)}
.art a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--line2)}
.art a:hover{text-decoration-color:currentColor}
.art code{font-family:var(--mono);font-size:var(--fs-code);background:var(--surface2);padding:2px 5px}
.art strong{font-weight:600;color:var(--fg)}

/* ============================================================
   Site pages and commitment tables
   ============================================================ */
.backlink{color:#A5C6B6;font-weight:500;font-size:var(--fs-xs);padding-block:4px}
.backlink:hover{color:#F2F6F4}
.hero .backlink .ar{transition:transform var(--dur) var(--ease)}
.hero .backlink:hover .ar{transform:translateX(-4px)}
.sheetwrap{max-width:640px;margin-top:40px}
.sitelinks{display:grid;gap:14px;grid-template-columns:1fr;margin-top:36px}
@media(min-width:600px){.sitelinks{grid-template-columns:repeat(3,1fr)}}
.sitelink{
 display:grid;gap:6px;border:1px solid var(--line);background:var(--surface);
 padding:20px;text-decoration:none;color:var(--fg);box-shadow:var(--shadow);
}

.sitelink:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sitelink__code{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.13em;color:var(--fg3)}
.sitelink__mw{font-family:var(--num);font-weight:800;font-size:var(--fs-num-sm);line-height:.86;font-variant-numeric:tabular-nums}
.sitelink__mw .u{font-family:var(--body);font-weight:600;font-size:var(--fs-xs);margin-left:5px;color:var(--fg2)}
.sitelink__st{font-size:var(--fs-xs);font-weight:500;color:var(--fg2)}
/* commitment table: three columns, open rows carry the same amber italic as
   the open rows in the site data sheets */
.ctable--spec{min-width:680px}
.ctable--spec thead th{background:var(--surface2);color:var(--fg2)}
.ctable--spec tbody th{width:26%}
.ctable--spec td{color:var(--fg)}
.ctable td.open{color:var(--dev);font-style:italic}

/* ============================================================
   Editorial two column block
   A section that is only a heading plus prose used to sit in the
   left third of a 1280px container with the rest empty. Heading
   left, text right, so the column actually spans the page.
   ============================================================ */
.prose2{position:relative;display:grid;grid-template-columns:1fr;gap:18px;margin-top:0;padding-top:20px}
.prose2::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;max-width:180px;background:var(--rule-head)}
@media(min-width:1000px){.prose2::before{max-width:var(--index-col)}}
/* prose2 sitzt meist direkt auf .wrap: die Regel beginnt dann an der Inhaltskante, nicht im Rand. */
.wrap.prose2::before{left:var(--gutter)}
@media(min-width:1000px){
 .prose2{grid-template-columns:minmax(0,7fr) minmax(0,9fr);gap:clamp(44px,5vw,88px);align-items:start}
}
.prose2__b > * + *{margin-top:16px}
.prose2__b .lead{max-width:60ch}
.prose2__b .form{margin-top:0}
.prose2__h .lead{margin-top:16px}
/* Kontakt: was beim Antworten hilft, und der Hinweis für Bestandskunden */
.helps{margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.helps__h{font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.11em;text-transform:uppercase;color:var(--fg3)}
.helps ul{list-style:none;margin-top:10px}
.helps li{position:relative;padding:6px 0 6px 20px;color:var(--fg2);font-size:var(--fs-sm)}
.helps li::before{content:"";position:absolute;left:0;top:16px;width:9px;height:1px;background:var(--line2)}
.custnote{margin-top:22px;font-size:var(--fs-xs);line-height:1.5;color:var(--fg3);max-width:44ch}
.field select{appearance:none;-webkit-appearance:none;border-radius:0;cursor:pointer;
 background-image:linear-gradient(45deg,transparent 50%,var(--fg2) 50%),linear-gradient(135deg,var(--fg2) 50%,transparent 50%);
 background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px}
.field textarea::placeholder{color:var(--fg3)}

/* stacked tables on phones: a three column table cannot scroll sideways on a
   handset without hiding half of itself, so each row becomes a small block
   with its column name in front of the value */
@media(max-width:719px){
 .tablewrap{overflow-x:visible;border:none;background:transparent}
 .ctable{min-width:0;display:block;font-size:var(--fs-body)}
 .ctable thead{display:none}
 .ctable tbody{display:block}
 .ctable tr{display:block;border:1px solid var(--line);background:var(--surface);padding:18px 18px 16px;margin-bottom:12px}
 .ctable tr:last-child{margin-bottom:0}
 .ctable tbody th{display:block;width:auto;padding:0 0 12px;border:none;font-size:var(--fs-body)}
 .ctable td{display:block;padding:10px 0 0;border:none;background:transparent!important}
 .ctable td+td{border-top:1px solid var(--line);margin-top:10px}
 .ctable td::before{
  content:attr(data-l);display:block;font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);margin-bottom:5px;
  font-style:normal;font-weight:400;
 }
 .ctable td.cu{color:var(--fg);font-weight:500}
 .ctable td.open{font-weight:400}
}

/* ==== Desktop v3 (10/2026): geschlossen und voll ====
   Ab 1000 px trägt jede Sektion ihren Inhalt in Flächen: Karten, Kacheln,
   Panels und Bilder füllen das Raster über die volle Breite. Kurze Regeln über
   Köpfen, Haarlinien zwischen frei stehenden Zeilen und lose Trenner gibt es
   am Desktop nicht mehr; Linien stehen nur noch innerhalb einer Fläche.
   Begleitelemente (.dt-only) erscheinen nur in dieser Breite. Telefon und
   Tablet hoch bleiben, wie sie sind. */
@media(max-width:999px){.dt-only{display:none!important}}
@media(min-width:1000px){
 /* Sektionskopf: Label über der Überschrift, der Vorspann rechts daneben
    auf der unteren Kante. Keine Regel darüber. */
 .shead{padding-top:0}
 .shead::before{display:none}
 .shead__row{display:flex;flex-direction:column;gap:16px}
 .shead__row .eyebrow{padding-top:0}
 .shead__lead{margin:0;max-width:none}
 .shead--lead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(48px,6vw,96px);align-items:end}
 .shead--lead .shead__lead{padding-bottom:6px}
 .shead .h2{max-width:22ch}
 .prose2{padding-top:0}
 .prose2::before{display:none}
 .hero__scroll{display:none}

 /* Kopf neben Inhalt: FAQ, Datenblatt, Bausteine. Beide Spalten gefüllt. */
 .cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(48px,6vw,96px);align-items:start}
 .cols--mid{align-items:center}
 .cols .shead{display:block}
 .cols .shead__lead{margin-top:20px}
 .cols__h .btns{margin-top:32px}
 .cols__b>.faq,.cols__b>.sheetwrap,.cols__b>.facts{margin-top:0}
 .cols__b>.sheetwrap{max-width:none}

 /* Kennzahlen als Kacheln statt Zahlen mit senkrechten Linien */
 .figband{gap:16px;margin-top:0}
 .figband__i,.figband__i:first-child{padding:28px 28px 30px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}

 /* Die vier Zusagen der Startseite als Kacheln */
 .proof{gap:16px;background:none;border:0}
 .proof__i{border:1px solid var(--line);box-shadow:var(--shadow);padding:30px 28px 32px}
 .proof__v{font-size:var(--fs-body);margin-top:14px}

 /* Ebenen der Startseite: Bildkarten, zwei mal zwei */
 .stack{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px}
 .srow,.srow:last-child{display:flex;flex-direction:column-reverse;justify-content:flex-end;align-items:stretch;gap:0;padding:0;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
 .srow__img{aspect-ratio:16/9;border:0}
 .srow__txt{padding:28px 30px 32px}
 .srow__txt p{max-width:none}
 .srow__num{display:none}

 /* Abläufe als Kartenreihe; eine echte Abfolge zeigt die Nummer groß */
 .steps{gap:16px;margin-top:48px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
 .steps--n2,.steps--wide{grid-template-columns:repeat(2,minmax(0,1fr))}
 .steps--n3{grid-template-columns:repeat(3,minmax(0,1fr))}
 .steps--n4{grid-template-columns:repeat(4,minmax(0,1fr))}
 .steps--n5{grid-template-columns:repeat(5,minmax(0,1fr))}
 .steps--n6{grid-template-columns:repeat(3,minmax(0,1fr))}
 .steps--wide.steps--n4{grid-template-columns:repeat(2,minmax(0,1fr))}
 .step,.step:last-child{display:flex;flex-direction:column;gap:18px;padding:28px 26px 30px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
 .step__n{font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.12em;color:var(--eyebrow)}
 .step--num .step__n{font-family:var(--num);font-weight:800;font-size:var(--fs-num-sm);letter-spacing:0;line-height:.9;color:var(--accent)}
 .step p{margin-top:10px;max-width:none}
 .steps--wide .step{padding:32px 34px 36px}
 /* In schmalen Karten (vier oder fünf je Reihe) läuft der Titel in der
    normal breiten Grotesk, wie die Fragen der FAQ, und der Text eine Stufe
    kleiner, damit nichts über die Karte hinausläuft. */
 .steps--n4 .h3,.steps--n5 .h3{font-family:var(--display);font-size:var(--fs-lead);line-height:1.22;letter-spacing:-.005em}
 .steps--n4 .step p,.steps--n5 .step p{font-size:var(--fs-sm);line-height:1.55}

 /* Aussageband: links der Satz, rechts ein Panel; die Zuordnung steht in
    dessen Kopfzeile statt auf einer Linie unter dem Satz */
 .claimx{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);column-gap:clamp(48px,6vw,96px);align-items:center}
 .claimx .claim__at{display:none}

 /* FAQ in einer Fläche, daneben die Kontaktkarte */
 .cols__b>.faq{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);padding:4px 32px}
 .cols__b>.faq .faq__item:last-child{border-bottom:0}

 /* Schlussband: Text links, Bild rechts in das Band hinein */
 .cta{position:relative;isolation:isolate;overflow:hidden}
 .cta__row{grid-template-columns:minmax(0,1fr)}
 .cta__tx{max-width:600px}
 .cta__tx .shead .h2{font-size:var(--fs-h2)}
 .cta__tx .lead{margin-top:20px}
}
/* Köpfe mit Begleitpanel: unter 1000 px fällt das Panel weg und der Kopf ist
   wieder einspaltig, auch im Querformat. */
@media(max-width:999px){.hero__grid--panel{grid-template-columns:1fr!important}}
.cpanel--rows dl{display:block;padding:4px 22px 8px}
.cpanel--rows .r{display:grid;grid-template-columns:116px minmax(0,1fr);gap:18px;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(236,246,242,.14)}
.cpanel--rows .r:last-child{border-bottom:none}
.cpanel--rows dt{margin-top:0}
.cpanel--rows dd{font-family:var(--body);font-weight:500;font-size:var(--fs-sm);line-height:1.4;color:#F2F6F4}
/* Schmale Desktops (1000 bis 1279 px): Label über dem Wert, damit der Wert nicht in drei Zeilen bricht. */
@media(max-width:1279px){.cpanel--rows .r{grid-template-columns:1fr;gap:6px;padding:12px 0}}

/* Panel neben einem Aussageband */
.claimx__panel{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.claimx__h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 26px;border-bottom:1px solid var(--line);background:var(--surface2)}
.claimx__h span{font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.12em;text-transform:uppercase;color:var(--eyebrow)}
.claimx__h b{font-family:var(--display);font-weight:600;font-size:var(--fs-sm);color:var(--fg)}
.claimx__list{padding:4px 26px 8px}
.claimx__list .r{display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.claimx__list .r:last-child{border-bottom:0}
.claimx__list dt{font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.12em;text-transform:uppercase;color:var(--eyebrow)}
.claimx__list dd{font-size:var(--fs-sm);line-height:1.45;color:var(--fg)}

/* Vier Bausteine neben einer Textsektion */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);box-shadow:var(--shadow)}
.facts>div{background:var(--surface);padding:var(--pad-card) var(--pad-card) calc(var(--pad-card) + 4px);display:flex;flex-direction:column;gap:12px}
.facts dt{font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.12em;text-transform:uppercase;color:var(--eyebrow)}
.facts dd{font-family:var(--display);font-weight:600;font-size:var(--fs-lead);line-height:1.3;color:var(--fg);text-wrap:balance}

/* Kontaktkarte neben den FAQ */
.askcard{margin-top:36px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);padding:28px 28px 30px}
.askcard__h{font-family:var(--head);font-weight:600;font-size:var(--fs-h3);line-height:1.2;color:var(--fg)}
.askcard p+p{margin-top:10px;color:var(--fg2)}
.askcard .btn{margin-top:22px}

/* Bild im Schlussband: rechts, zur Textseite hin in die Bandfarbe auslaufend */
.cta__bg{position:absolute;top:0;right:0;bottom:0;width:60%;z-index:-2}
.cta__bg .ph{position:absolute;inset:0}
.cta__veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(90deg,#0F4C39 0%,#0F4C39 38%,rgba(15,76,57,.72) 56%,rgba(15,76,57,.18) 82%,rgba(15,76,57,.08) 100%)}

/* Beitrag am Desktop: Text links, rechts ein Inhaltsverzeichnis und ein
   kurzer Kontaktweg, beides in Flächen und beim Lesen stehen bleibend. */
@media(min-width:1000px){
 .artwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);column-gap:clamp(48px,6vw,96px);align-items:start}
 .art__aside{position:sticky;top:calc(var(--navh) + 40px);display:flex;flex-direction:column;gap:16px;max-height:calc(100vh - var(--navh) - 80px);overflow:auto}
}
.toc{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);padding:20px 24px 8px}
.toc__h{font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.12em;text-transform:uppercase;color:var(--eyebrow);padding-bottom:12px;border-bottom:1px solid var(--line)}
.toc ol{list-style:none}
.toc li{border-bottom:1px solid var(--line)}
.toc li:last-child{border-bottom:0}
.toc a{display:block;padding:10px 0;font-size:var(--fs-sm);line-height:1.4;color:var(--fg2);text-decoration:none;transition:color var(--dur-fast) var(--ease)}
.toc a:hover{color:var(--fg)}
.art__cta{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);padding:var(--pad-card)}
.art__cta p{font-size:var(--fs-sm);line-height:1.5;color:var(--fg2);margin-bottom:16px}
/* Telefon: das Datenblatt der About-Seite behält seinen Abstand zum Text */
@media(max-width:999px){.prose2__b>.sheet:first-child{margin-top:14px}}
/* Schmale Desktops (1000 bis 1279 px): fünf Karten nebeneinander wären zu
   eng. Der Ablauf steht dann als Zeilen in einer gemeinsamen Fläche. */
@media(min-width:1000px) and (max-width:1279px){
 .steps--n5{grid-template-columns:1fr;gap:0;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);padding:0 30px}
 .steps--n5 .step,.steps--n5 .step:last-child{flex-direction:row;align-items:baseline;gap:32px;padding:24px 0;border:0;border-bottom:1px solid var(--line);background:none;box-shadow:none}
 .steps--n5 .step:last-child{border-bottom:0}
 .steps--n5 .step__n{flex:none;width:72px}
}
/* About: Bild unter dem Firmendatenblatt, nur am Desktop */
.prose2__im{margin-top:16px;aspect-ratio:16/10;border:1px solid var(--line);box-shadow:var(--shadow)}

/* ---- Desktop v3: Kontakt und Rechtstexte ----
   Formular, Hinweise, Inhaltsverzeichnis und Dokument stehen in Flächen. */
@media(min-width:1000px){
 .prose2__b>.form{max-width:none;grid-template-columns:1fr 1fr;column-gap:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);padding:36px 40px 40px}
 .form .field:has(textarea),.form>.btns{grid-column:1/-1}
 .helps{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);padding:22px 26px 18px}
 .custnote{margin-top:18px}

 .lgrid{grid-template-columns:280px minmax(0,1fr);gap:40px}
 .ltoc{border:1px solid #DCE0DE;background:#fff;box-shadow:0 1px 2px rgba(16,22,20,.05),0 14px 32px rgba(16,22,20,.07);padding:22px 20px 14px}
 .ltoc a{border-left:0;padding:8px 10px;margin:0 -10px}
 .ltoc a.is-active{background:#EAF1ED;color:#0B6446}
 .lcol{max-width:none;background:#fff;border:1px solid #DCE0DE;box-shadow:0 1px 2px rgba(16,22,20,.05),0 14px 32px rgba(16,22,20,.07);padding:44px 52px 52px}

 .legalwrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:40px;align-items:start}
 .legalwrap>.legal{grid-column:1;grid-row:1;max-width:none;margin-top:0;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);padding:44px 52px 52px}
 .legalwrap>.legal>*{max-width:72ch}
 .legalwrap>.legal__policies{grid-column:2;grid-row:1;position:sticky;top:calc(var(--navh) + 40px);flex-direction:column;flex-wrap:nowrap;gap:0;margin:0;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);padding:20px 24px 12px}
 .legalwrap>.legal__policies a{border:0;border-bottom:1px solid var(--line);padding:13px 0;font-size:var(--fs-sm);letter-spacing:0;text-transform:none;font-family:var(--body);font-weight:500}
 .legalwrap>.legal__policies a:last-child{border-bottom:0}
 .legal__ph{font-family:var(--label);font-weight:600;font-size:var(--fs-label-sm);letter-spacing:.12em;text-transform:uppercase;color:var(--eyebrow);padding-bottom:12px;border-bottom:1px solid var(--line)}
}

/* ---- Suchseiten (10/2026) ----
   Fuß mit fünfter Spalte "Resources"; Verweiskarten; Glossar; Anfrageformular. */
.fcard .alink{margin-top:auto;padding-top:12px}
.btns .alink{margin-right:16px}
@media(min-width:1000px){.fgrid--4{grid-template-columns:repeat(4,1fr)}}
.fcard--link{position:relative}
.gloss{display:grid;gap:16px;grid-template-columns:1fr;margin-top:36px}
@media(min-width:680px){.gloss{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.gloss{margin-top:44px}}
.gloss__i{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);padding:var(--pad-card-sm) var(--pad-card);scroll-margin-top:calc(var(--navh) + 24px)}
.gloss__t{font-family:var(--display);font-weight:600;font-size:var(--fs-body);color:var(--fg)}
.gloss__i p{margin-top:8px;color:var(--fg2);font-size:var(--fs-sm);line-height:1.55}
.gloss__i p a{color:var(--fg);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line2)}
.gloss__nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.gloss__nav a{font-family:var(--label);font-weight:600;font-size:var(--fs-label);letter-spacing:.07em;text-transform:uppercase;border:1px solid var(--line2);padding:9px 13px;text-decoration:none;color:var(--fg)}
.gloss__nav a:hover{border-color:var(--accent);color:var(--accent)}
.field--half{grid-column:span 1}
@media(max-width:999px){.prose2__b .custnote{margin-top:14px}}

/* Datenschutzhinweis unter den Formularen (10/2026) */
.form__privacy{grid-column:1 / -1;margin:0;font-size:var(--fs-fine);line-height:1.6;color:var(--fg3)}
.form__privacy a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Verwandte Seiten (10/2026): schmales Band vor dem Schlussband */
.related__in{display:grid;gap:14px}
.related__links{display:flex;flex-wrap:wrap;gap:10px}
.related__a{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);background:var(--surface);color:var(--fg);text-decoration:none;font-size:var(--fs-sm);font-weight:500;border-radius:2px}
.related__a span{color:var(--fg3);transition:transform var(--dur-fast) var(--ease)}
.related__a:hover{border-color:var(--fg3)}
.related__a:hover span{transform:translateX(3px)}
.related__a:focus-visible{outline:2px solid var(--nw-mint);outline-offset:2px}
@media(min-width:1000px){.related__in{grid-template-columns:200px 1fr;align-items:center}}

/* Brotkrumen (10/2026): oben im ersten Block, Farben aus dem Kontext */
main>:first-child{position:relative}
.crumbs{position:absolute;top:14px;left:0;right:0;z-index:3;pointer-events:none}
.crumbs ol{list-style:none;margin:0 auto;display:flex;flex-wrap:nowrap;gap:0;font-size:var(--fs-fine);line-height:1.4;color:var(--fg2);overflow:hidden;white-space:nowrap}
.crumbs li{display:flex;align-items:center;min-width:0}
.crumbs li+li::before{content:"/";margin:0 8px;opacity:.6}
.crumbs li:last-child{overflow:hidden;text-overflow:ellipsis;display:block;opacity:.8}
.crumbs a{color:inherit;text-decoration:none;pointer-events:auto}
.crumbs a:hover{text-decoration:underline;text-underline-offset:2px}
.crumbs a:focus-visible{outline:2px solid var(--nw-mint);outline-offset:2px}
@media(min-width:1000px){.crumbs{top:20px}}

/* ---- Gestaltungsrunde 22.10.2026 ---- */
/* Kennzahlen am Telefon nebeneinander: drei in einer Reihe, vier als 2 x 2 */
@media(max-width:819px){
 .figband{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:30px}
 .figband__i{padding:0 12px;border-top:0;border-left:1px solid var(--line2)}
 .figband__i:first-child{padding-left:0;border-left:0}
 .figband__l{font-size:9.5px;letter-spacing:.1em;margin-bottom:10px;min-height:2.6em}
 .figband__n{font-size:clamp(30px,9vw,40px)}
 .figband--4{grid-template-columns:1fr 1fr;row-gap:22px}
 .figband--4 .figband__i:nth-child(3){padding-left:0;border-left:0}
}
/* Sprungmarken landen unter der festen Leiste */
html{scroll-padding-top:calc(var(--navh) + 16px)}
/* Zugeklappte FAQ-Antworten werden nicht vorgelesen */
.js .faq__item:not(.open) .faq__a{visibility:hidden;transition:max-height .3s ease,visibility 0s linear .3s}
.js .faq__item.open .faq__a{visibility:visible;transition:max-height .3s ease}
/* größere Tippflächen, ohne die Anordnung zu verschieben */
.nav__burger::before{content:"";position:absolute;inset:-15px -10px}
.foot__legal a{padding:8px 0;margin:-8px 0}
.crumbs a{padding:6px 0;margin:-6px 0}
.form.is-busy{opacity:.6;pointer-events:none}
/* Bewegung reduziert: auch Menü und FAQ ohne Übergänge */
@media(prefers-reduced-motion:reduce){
 .nav__mobile,.nav__dim,.faq__a,.faq__q::after,.related__a span,.foot__cta span{transition:none!important}
}
/* Tabellen am Telefon kompakter: eine Fläche, je Zeile Titel oben und beide
   Werte nebeneinander (22.10.2026) */
@media(max-width:719px){
 .ctable tbody{border:1px solid var(--line);background:var(--surface)}
 .ctable tr{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;border:0;border-bottom:1px solid var(--line);background:transparent;padding:14px 16px;margin:0}
 .ctable tr:last-child{border-bottom:0}
 .ctable tbody th{grid-column:1 / -1;padding:0 0 8px;font-size:var(--fs-sm)}
 .ctable td{padding:0;font-size:var(--fs-xs);line-height:1.45}
 .ctable td+td{border-top:0;margin-top:0;padding-left:14px;border-left:1px solid var(--line)}
 .ctable td::before{margin-bottom:4px;font-size:9.5px}
 .ctable td:only-of-type{grid-column:1 / -1}
}
/* Karten am Telefon dichter: weniger Innenabstand und Abstand dazwischen */
@media(max-width:699px){
 .fgrid{gap:10px;margin-top:32px}
 .fcard{padding:20px 20px 22px;gap:8px}
}
/* Glossar am Telefon: eine Fläche je Gruppe, Begriffe durch Linien getrennt */
@media(max-width:679px){
 .gloss{gap:0;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
 .gloss__i{border:0;border-bottom:1px solid var(--line);box-shadow:none;background:none;padding:16px 18px}
 .gloss__i:last-child{border-bottom:0}
}
/* Formularseiten am Telefon: das Formular direkt nach Überschrift und Vorspann,
   die Hinweise darunter */
@media(max-width:999px){
 .prose2:has(.form){display:flex;flex-direction:column;gap:18px}
 .prose2:has(.form) .prose2__h{display:contents}
 .prose2:has(.form) .prose2__h>*{order:1}
 .prose2:has(.form) .prose2__b{order:2}
 .prose2:has(.form) .helps,.prose2:has(.form) .custnote{order:3;margin-top:0}
}
/* Owner-Auswahl aus dem Gestaltungs-Baukasten (22.10.2026), alle Punkte B */
/* Anfrageformular: Menge und Last am Telefon nebeneinander, E-Mail am Rechner volle Breite */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(min-width:1000px){.prose2__b>.form .field-row{display:contents}.prose2__b>.form .field--wide{grid-column:1 / -1}}
/* Verweisband: gleich breite Kacheln mit Pfeil rechts, Linie oben, am Rechner eine Reihe */
.related{border-top:1px solid var(--line)}
.related__links{display:grid;grid-template-columns:1fr;gap:8px}
.related__a{justify-content:space-between}
@media(min-width:700px){.related__links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.related__links{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
/* Blätterleiste am Telefon in einer Reihe, die Anzahl darunter */
@media(max-width:699px){
 .pgr{gap:6px}
 .pgr__b{min-width:38px;padding:10px 6px}
 .pgr__c{flex-basis:100%;margin-left:0;margin-top:6px}
}
/* Leiste oben 97 % deckend */
.nav{background:rgba(7,49,36,.97)}
/* Eingabefelder: dunklerer Rand, roter Rand nach Verlassen eines ungültigen Feldes, (optional) */
.ctx-light .field input,.ctx-light .field textarea,.ctx-light .field select{border-color:#8C9690}
.field input:user-invalid,.field textarea:user-invalid,.field select:user-invalid{border-color:#B4432F;box-shadow:inset 3px 0 0 #B4432F}
.field .opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--fg3);margin-left:6px}
/* Brotkrumen: aktuelle Seite in voller Helligkeit */
.crumbs li:last-child{opacity:1}
/* FAQ-Fragen mit ausgeglichenem Umbruch */
.faq__q{text-wrap:balance}
/* Schlussband am Telefon: Abstand zwischen Überschrift und Vorspann (Rechner 20 px) */
@media(max-width:999px){.cta__tx .lead{margin-top:14px}}