/* ============================================================
   Entwurf V2 „Labor“ — hell, präzise, editorial-technisch
   Schweizer Labor × Datenblatt. Instrument Serif · Space Grotesk · JetBrains Mono
   ============================================================ */
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/fonts/space-grotesk.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono.woff2) format("woff2");font-weight:100 800;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --desk:#e9e5d8;--paper:#f8f6ef;--white:#fffefb;
  --ink:#11151a;--ink2:#394046;--ink3:#4c5450;
  --rule:rgba(17,21,26,.17);--rule2:rgba(17,21,26,.08);
  --serif:"Instrument Serif","Iowan Old Style","Times New Roman",Georgia,serif;
  --sans:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --pad:clamp(16px,4vw,56px);
  --max:1280px;
  --ease:cubic-bezier(.2,.65,.2,1);
  --a:#0a8f77;--a-ink:#0a7a66;--a-dk:#4fe3c4;--b:#8a6d1e;--b-ink:#7a5f12;--b-dk:#e0c070;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:76px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--desk);color:var(--ink);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (min-width:1100px){body{padding-left:40px}}
img,svg{max-width:100%}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
::selection{background:color-mix(in srgb,var(--hue) 38%,#fff);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 5px var(--paper)}
.cta :focus-visible,.foot :focus-visible{outline-color:var(--paper);box-shadow:0 0 0 5px var(--ink)}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:13px 18px;font:500 .85rem var(--mono);text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ul,ol{padding:0}
em{font-style:italic}

/* ---------- Blatt (Seite) ---------- */
.sheet{position:relative;isolation:isolate;max-width:var(--max);margin:0 auto;background:var(--paper);border-inline:1px solid var(--rule);overflow-x:clip}
.sheet::before{content:"";position:absolute;inset:0 var(--pad);border-inline:1px solid var(--rule2);pointer-events:none;z-index:-1}
@media (max-width:699px){.sheet::before{inset:0 calc(var(--pad) / 2)}}
main{display:block}
.sec{position:relative;padding:clamp(60px,9vw,120px) var(--pad);border-top:1px solid var(--ink)}
.sec::before,.sec::after{content:"+";position:absolute;top:-.62em;font:300 1.35rem/1 var(--mono);color:var(--ink);background:var(--paper);line-height:1;padding:0 1px}
.sec::before{left:-.38em}.sec::after{right:-.38em}
@supports not (overflow-x:clip){.sec::before,.sec::after{display:none}}

/* ---------- Kopfzeile ---------- */
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 93%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--ink)}
.hdr__in{display:flex;align-items:center;gap:14px;height:56px;padding:0 var(--pad)}
.hdr__brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;min-height:44px;min-width:44px}
.hdr__mk{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--ink);font:600 .75rem var(--mono);letter-spacing:.02em}
.hdr__nm{font:500 .9rem/1 var(--sans);letter-spacing:-.005em;white-space:nowrap}
.hdr__sl{font:500 .75rem/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);border-left:1px solid var(--rule);padding-left:10px}
.hdr__nav{display:none;margin-left:auto;gap:0}
.hdr__nav a{display:flex;align-items:center;gap:.55em;min-height:44px;padding:0 9px;font:500 .75rem/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink2);text-decoration:none;position:relative;white-space:nowrap}
.hdr__nav a i{font-style:normal;color:var(--a-ink)}
.hdr__nav a::after{content:"";position:absolute;left:9px;right:9px;bottom:6px;height:2px;background:var(--a);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.hdr__nav a:hover::after,.hdr__nav a[aria-current=true]::after{transform:scaleX(1)}
.hdr__nav a:hover,.hdr__nav a[aria-current=true]{color:var(--ink)}
.hdr__cta{margin-left:auto;display:inline-flex;align-items:center;gap:.5em;min-height:44px;padding:0 14px;background:var(--ink);color:var(--paper);font:500 .78rem/1 var(--mono);text-transform:uppercase;letter-spacing:.07em;text-decoration:none;transition:background .25s}
.hdr__cta:hover{background:var(--a-ink)}
.hdr__cta .ar{width:1em;height:1em}
.toc{position:static}
.toc summary{display:inline-flex;align-items:center;gap:.5em;min-height:44px;padding:0 10px;cursor:pointer;list-style:none;font:500 .78rem/1 var(--mono);text-transform:uppercase;letter-spacing:.07em}
.toc summary::-webkit-details-marker{display:none}
.toc summary svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5}
.toc__p{position:absolute;right:var(--pad);top:calc(100% + 8px);z-index:60;list-style:none;margin:0;padding:6px;background:var(--white);border:1px solid var(--ink);min-width:240px;box-shadow:6px 6px 0 var(--rule)}
.toc__p a{display:flex;gap:.9em;align-items:center;min-height:46px;padding:0 12px;font:500 .82rem/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;text-decoration:none;border-bottom:1px solid var(--rule2)}
.toc__p li:last-child a{border-bottom:0}
.toc__p a i{font-style:normal;color:var(--a-ink)}
.toc__p a:hover{background:color-mix(in srgb,var(--hue) 10%,var(--white))}
.pbar{position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none}
.pbar i{display:block;height:100%;background:var(--a);transform:scaleX(0);transform-origin:left}
@media (min-width:1100px){.hdr__nav{display:flex}.toc{display:none}.hdr__cta{margin-left:10px}}
@media (max-width:1279px){.hdr__nav a i{display:none}}
@media (max-width:420px){.hdr__sl{display:none}.hdr__nm{font-size:.82rem}}
@media (max-width:389px){.hdr__nm{display:none}.hdr__in{gap:8px}}

/* ---------- Messlineal ---------- */
.ruler{display:none;position:fixed;left:0;top:0;bottom:0;width:40px;z-index:45;background:var(--desk);border-right:1px solid var(--ink);overflow:hidden;user-select:none}
@media (min-width:1100px){.ruler{display:block}}
.ruler__t{position:absolute;inset:0;--tk:linear-gradient(to bottom,var(--ink3) 0,var(--ink3) 1px,transparent 1px);background-image:var(--tk),var(--tk),var(--tk);background-size:18px 100px,12px 50px,7px 10px;background-repeat:repeat-y;background-position:right 0,right 0,right 0}
.ruler__n span{position:absolute;right:21px;top:1px;font:500 9px/1 var(--mono);color:var(--ink3);will-change:transform}
.ruler__s span{position:absolute;left:5px;top:-2px;font:600 9px/1 var(--mono);color:var(--paper);background:var(--a-ink);padding:2px 3px;will-change:transform;white-space:nowrap}
.ruler__p{position:absolute;left:0;top:0;width:3px;height:0;background:var(--a)}
.ruler__m{position:absolute;left:0;right:0;top:38vh;border-top:2px solid var(--a-ink);pointer-events:none}
.ruler__m::after{content:"";position:absolute;right:-1px;top:-6px;border:5px solid transparent;border-right-color:var(--a-ink);border-left:0}
.ruler__m span{position:absolute;left:4px;font:600 9px/1 var(--mono);background:var(--ink);color:var(--paper);padding:2px 3px;white-space:nowrap}
.ruler__m span:first-child{bottom:4px}.ruler__m span:last-child{top:4px}

/* ---------- Typografische Bausteine ---------- */
.sh{max-width:1040px}
.sh__l{display:flex;align-items:center;gap:0;font:500 .75rem/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--ink3)}
.sh__no{display:inline-grid;place-items:center;min-width:2.4em;height:2em;padding:0 .4em;border:1px solid var(--ink);color:var(--ink);margin-right:.9em;letter-spacing:.02em}
.sh__tab{margin-left:1.4em;padding-left:1.4em;border-left:1px solid var(--rule)}
.sh__t{font:400 clamp(2.5rem,5.6vw,4.8rem)/.98 var(--serif);letter-spacing:-.018em;margin-top:.42em;text-wrap:balance}
.sh__t em,.cta__t em,.h1__sub{color:var(--a-ink)}
.ar{width:1.15em;height:1.15em;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .3s var(--ease)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,34px)}
.btn{display:inline-flex;align-items:center;gap:.75em;min-height:48px;padding:0 20px;font:500 .95rem/1.1 var(--sans);letter-spacing:-.005em;color:var(--ink);background:transparent;border:1px solid var(--ink);text-decoration:none;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn:hover .ar{transform:translateX(3px)}
.btn--pri{background:var(--ink);color:var(--paper)}
.btn--pri:hover{background:var(--a-ink);border-color:var(--a-ink)}
.btn--sm{min-height:44px;padding:0 16px;font:500 .78rem/1 var(--mono);text-transform:uppercase;letter-spacing:.07em}
.btn--inv{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--inv:hover{background:var(--a-dk);border-color:var(--a-dk);color:var(--ink)}

/* ---------- Status ---------- */
.stripe{border-bottom:1px solid var(--ink);background:repeating-linear-gradient(-45deg,transparent 0 7px,rgba(17,21,26,.06) 7px 8px),var(--white)}
.stripe p{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:10px var(--pad);font:400 .86rem/1.4 var(--sans);color:var(--ink2)}
.stripe b{font:600 .75rem/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;background:var(--ink);color:var(--paper);padding:6px 9px}
.stripe a{margin-left:auto;display:inline-flex;align-items:center;gap:.4em;min-height:44px;font:500 .78rem var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--ink)}
.stat{padding:0 var(--pad) clamp(40px,6vw,72px)}
.stat__in{position:relative;border:2px solid var(--ink);background:var(--white);padding:clamp(22px,3.2vw,44px) clamp(20px,3.2vw,44px) clamp(24px,3.2vw,44px) clamp(52px,7vw,96px)}
.stat__in::before{content:"";position:absolute;left:0;top:0;bottom:0;width:clamp(22px,3.4vw,44px);background:repeating-linear-gradient(-45deg,var(--ink) 0 9px,var(--paper) 9px 18px);border-right:2px solid var(--ink)}
.stat__tag{display:inline-block;font:600 .75rem/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;background:var(--ink);color:var(--paper);padding:7px 10px}
.stat__t{font:400 clamp(1.5rem,2.7vw,2.3rem)/1.22 var(--serif);margin-top:18px;max-width:46ch;text-wrap:pretty}

/* ---------- Hero ---------- */
.hero{padding:clamp(22px,3.4vw,40px) var(--pad) clamp(52px,7vw,96px)}
.tb{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--ink);background:var(--white)}
.tb span{padding:9px 12px 10px;display:flex;flex-direction:column;gap:5px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.tb span:nth-child(2n){border-right:0}.tb span:nth-last-child(-n+2){border-bottom:0}
.tb i{font:500 .75rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);font-style:normal}
.tb b{font:500 .82rem/1.1 var(--mono);letter-spacing:.02em}
@media (min-width:760px){.tb{grid-template-columns:repeat(4,1fr)}.tb span{border-bottom:0;border-right:1px solid var(--rule)!important}.tb span:last-child{border-right:0!important}}
.hero__grid{display:grid;gap:clamp(30px,4vw,56px);margin-top:clamp(28px,4.4vw,56px)}
@media (min-width:980px){.hero__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:stretch}.hero__txt{display:flex;flex-direction:column}}
.hero__txt{container-type:inline-size;min-width:0}
.h1{font:400 clamp(3.4rem,13vw,9rem)/.88 var(--serif);letter-spacing:-.025em;text-wrap:balance;overflow-wrap:anywhere}
@supports (width:1cqw){.h1{font-size:clamp(3.2rem,calc(100cqw / var(--wu) * .93),10.5rem)}}
.h1__m{display:block}
.h1__m,.h1__sub{animation:h1-in 1s var(--ease) both}
.h1__sub{animation-delay:.12s}
@keyframes h1-in{from{clip-path:inset(0 0 100% 0);transform:translateY(.12em)}to{clip-path:inset(-0.2em -0.1em -0.2em -0.1em);transform:none}}
.h1__sub{display:block;font-style:italic;font-size:.31em;line-height:1.08;letter-spacing:-.005em;margin-top:.5em;max-width:20ch}
.dim{display:flex;align-items:center;gap:12px;margin-top:clamp(16px,2vw,26px);font:500 .78rem/1.25 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--ink3)}
.dim::before,.dim::after{content:"";flex:1 1 0;min-width:14px;height:13px;background:linear-gradient(currentColor,currentColor) left center/100% 1px no-repeat}
.dim::before{border-left:1px solid currentColor}.dim::after{border-right:1px solid currentColor}
.dim span{flex:0 1 auto;text-align:center;text-wrap:balance}
.tagline{font:500 clamp(1.3rem,2.3vw,1.75rem)/1.22 var(--sans);letter-spacing:-.018em;margin-top:clamp(22px,3vw,36px);max-width:26ch;text-wrap:balance}
.kurz{margin-top:14px;font-size:clamp(1rem,1.2vw,1.08rem);line-height:1.62;color:var(--ink2);max-width:52ch;text-wrap:pretty}
.nb{white-space:nowrap}

.hero__fig{min-width:0}
.idx{display:none;margin-top:auto;padding-top:clamp(36px,5vw,64px)}
@media (min-width:980px){.idx{display:block}}
.idx__h{display:flex;justify-content:space-between;font:500 .75rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);padding-bottom:10px;border-bottom:1px solid var(--ink)}
.idx__k{opacity:1}
.idx kbd{font:inherit;border:1px solid var(--ink3);padding:2px 5px;margin-right:4px}
.idx ol{list-style:none;columns:2;column-gap:28px}
.idx li{break-inside:avoid}
.idx a{display:flex;align-items:center;gap:.8em;min-height:44px;border-bottom:1px solid var(--rule);font:500 .78rem/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink2);text-decoration:none;transition:color .2s,padding-left .25s var(--ease)}
.idx a i{font-style:normal;color:var(--a-ink)}
.idx a span{flex:1}
.idx a .ar{width:.95em;height:.95em;opacity:.55}
.idx a:hover{color:var(--ink);padding-left:6px}
.idx a:hover .ar{transform:translateY(3px);opacity:1}

/* ---------- 01 Kennzahlen ---------- */
.kz{list-style:none;margin:clamp(36px,5vw,64px) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,208px),1fr));overflow:hidden;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--white)}
.kz__c{position:relative;display:flex;flex-direction:column;min-height:clamp(190px,24vw,270px);padding:16px 22px 32px;box-shadow:-1px 0 0 var(--rule),0 -1px 0 var(--rule)}
.kz__id{font:500 .75rem/1 var(--mono);letter-spacing:.09em;color:var(--ink3)}
.kz__n{container-type:inline-size;margin-top:auto;padding-top:28px;white-space:nowrap}
/* Ziffern: Schriftgröße passt sich der Zellbreite an; der Ausgleich unten hält die Grundlinie aller Ziffern einer Zeile auf einer Höhe (0,1253 em = Abstand Grundlinie–Zeilenunterkante) */
.kz__fit{--fs:clamp(2.2rem,calc(100cqw / var(--wu)),7rem);display:block;font:400 var(--fs)/.92 var(--serif);letter-spacing:-.03em;padding-bottom:calc((7rem - var(--fs)) * .1253)}
.num{position:relative;display:inline-block}
.num__l{position:absolute;left:0;top:0;white-space:nowrap}
.v2on:not(.v2-static) .num[data-count] .num__g{visibility:hidden}
.kz__x{font-size:.52em;margin-left:.06em;color:var(--a-ink);letter-spacing:0;vertical-align:.34em;line-height:0}
.kz__u{margin-top:12px;font:500 .8rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--a-ink)}
.kz__u--si{text-transform:none;letter-spacing:.03em;font-size:1.05rem;font-weight:600}
.kz__l{margin-top:8px;font-size:.98rem;line-height:1.45;color:var(--ink2);max-width:30ch;overflow-wrap:break-word;hyphens:manual}
.kz__sc{position:absolute;left:22px;right:22px;bottom:0;height:9px;background:repeating-linear-gradient(90deg,var(--ink3) 0 1px,transparent 1px 8px),linear-gradient(var(--ink3),var(--ink3)) left bottom/100% 1px no-repeat;opacity:.55;transform-origin:left}
.js.v2on .kz__sc{transform:scaleX(0);transition:transform 1.1s var(--ease) .3s}
.js.v2on .kz__c.is-in .kz__sc{transform:none}
/* gemeinsame Zeilen (Kennung / Ziffer / Einheit / Beschriftung) – Ziffern stehen auf einer Grundlinie, Labels auf einer Höhe */
@supports (grid-template-rows:subgrid){
  .kz__c{display:grid;grid-row:span 4;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);row-gap:0;min-height:0;align-content:start}
  .kz__id{grid-row:1}
  .kz__n{grid-row:2;align-self:end;margin:0;padding-top:clamp(28px,4vw,52px)}
  .kz__u{grid-row:3;margin-top:12px}
  .kz__l{grid-row:4;margin-top:8px;align-self:start}
}
@media (max-width:600px){
  .kz{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kz__c--full{grid-column:1/-1}
  .kz__c{padding:14px 14px 30px}
  .kz__sc{left:14px;right:14px}
  .kz__n{padding-top:22px}
  .kz__l{font-size:.92rem}
}

/* ---------- 02 Leitgedanke ---------- */
.lg__grid{display:grid;gap:clamp(30px,5vw,72px);align-items:center;margin-top:clamp(28px,4vw,52px)}
@media (min-width:980px){.lg--img .lg__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.lg__q{font:400 clamp(1.95rem,4.3vw,3.7rem)/1.1 var(--serif);letter-spacing:-.014em;text-wrap:balance;max-width:24ch}
.lg:not(.lg--img) .lg__q{max-width:30ch}
.lg__q em{color:var(--a-ink)}
.lg__q--l{font-size:clamp(1.75rem,3.5vw,3rem);max-width:30ch}
.lg__q--xl{font-size:clamp(1.6rem,3vw,2.5rem);max-width:34ch}
.qed{display:inline-block;width:.3em;height:.3em;background:var(--a);margin-left:.3em;vertical-align:baseline}
.lg__fig{min-width:0}

/* ---------- Bilder / Tafeln ---------- */
.ph{margin:0;max-width:min(100%,var(--mw,100%))}
.ph__fr{position:relative;border:1px solid var(--ink);background-color:var(--white);background-image:linear-gradient(var(--rule2) 1px,transparent 1px),linear-gradient(90deg,var(--rule2) 1px,transparent 1px);background-size:16px 16px}
.ph__fr::before{content:"";position:absolute;inset:-7px;pointer-events:none;z-index:2;background:
  linear-gradient(var(--ink),var(--ink)) left top/13px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) left top/1px 13px no-repeat,
  linear-gradient(var(--ink),var(--ink)) right top/13px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) right top/1px 13px no-repeat,
  linear-gradient(var(--ink),var(--ink)) left bottom/13px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) left bottom/1px 13px no-repeat,
  linear-gradient(var(--ink),var(--ink)) right bottom/13px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) right bottom/1px 13px no-repeat}
.ph img{display:block;width:100%;height:auto}
.ph--tall .ph__fr{aspect-ratio:3/4}.ph--tall img{height:100%;object-fit:cover;object-position:50% 0}
.ph--wide .ph__fr{aspect-ratio:16/9}.ph--wide img{height:100%;object-fit:cover}
.ph--sm{max-width:min(100%,380px)}
.ph--logo .ph__fr{background-color:#0e1317;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}
.ph figcaption{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;align-items:baseline;padding-top:13px;font:400 .8rem/1.4 var(--mono);color:var(--ink3)}
.ph figcaption b{font-weight:600;color:var(--ink);letter-spacing:.04em;text-transform:uppercase;font-size:.75rem}
.ph__s{color:var(--ink2);font-weight:500}
.ph__t{grid-column:2}

/* Bildtafel: gleich große Felder (Raster-Papier), Bilder unbeschnitten – kleine Dateien nie hochskaliert */
.tafel__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,3.4vw,44px) clamp(14px,2.4vw,36px);align-items:start;margin-top:clamp(30px,4vw,56px)}
@media (min-width:760px){.tafel__g{grid-template-columns:repeat(var(--tn,3),minmax(0,1fr))}}
@media (max-width:759px){.tafel__g--3>.ph--tile:last-child{grid-column:1/-1}.tafel__g--3>.ph--tile:last-child .ph__fr{aspect-ratio:16/10}}
.ph--tile{max-width:none}
.ph--tile .ph__fr{aspect-ratio:1/1}
.ph--mono img{filter:grayscale(1) contrast(1.06)}
.tafel__g--2 .ph--tile .ph__fr{aspect-ratio:4/3}
.ph--tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ph--tile.ph--cover img{object-fit:cover}
.ph--tile.ph--small img{object-fit:scale-down}
.ph--tile.ph--contain img,.ph--tile.ph--small img{padding:clamp(8px,1.6vw,18px)}
.ph--tile.ph--logo img{padding:0}
@media (max-width:759px){.ph--tile figcaption{display:flex;flex-direction:column;gap:3px;font-size:.75rem}.ph--tile figcaption b{font-size:.75rem}.ph--tile .ph__t{overflow-wrap:anywhere}}
.tafel__g--solo{grid-template-columns:1fr;align-items:start}
@media (min-width:860px){.tafel__g--solo{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,5vw,72px)}}
.tafel__g--solo .ph--tile{max-width:min(100%,400px)}
.tafel__g--solo .ph--tile .ph__fr{aspect-ratio:4/5;max-height:500px}
.tafel__k{font:500 .75rem/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--ink3);padding-bottom:12px;border-bottom:1px solid var(--ink)}
.tafel__note dl>div{display:grid;grid-template-columns:minmax(0,5.5rem) minmax(0,1fr);gap:14px;padding:13px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.tafel__note dt{font:500 .75rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--ink3)}
.tafel__note dd{font:500 1.02rem/1.4 var(--sans)}

/* ---------- 03 Merkmale ---------- */
.ft{list-style:none;margin:clamp(36px,5vw,64px) 0 0;display:grid;grid-template-columns:1fr;overflow:hidden;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--white)}
@media (min-width:640px){.ft{grid-template-columns:repeat(2,1fr)}.ft__i--last:nth-child(odd){grid-column:1/-1}}
@media (min-width:1100px){.ft{grid-template-columns:repeat(var(--cols,4),1fr)}.ft__i--last{grid-column:span var(--sp,1)!important}}
.ft__i{position:relative;padding:20px 24px 32px;box-shadow:-1px 0 0 var(--rule),0 -1px 0 var(--rule);transition:background .3s}
.ft__i::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--a);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.ft__i:hover::before,.ft__i:focus-within::before{transform:scaleX(1)}
.ft__i:hover{background:color-mix(in srgb,var(--hue) 7%,var(--white))}
.ft__top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:clamp(26px,3vw,40px)}
.ft__no{font:500 .75rem/1 var(--mono);letter-spacing:.09em;color:var(--ink3);padding-top:2px}
.ft__ic{position:relative;display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--ink);color:var(--a-ink);background:var(--paper)}
.ft__ic::after{content:"";position:absolute;right:-4px;bottom:-4px;width:8px;height:8px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.ic{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ic *{stroke-dasharray:1;stroke-dashoffset:0}
.ft__i:hover .ic *,.ft__i:focus-within .ic *{animation:ic-draw .9s var(--ease) both}
@keyframes ic-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.ft__t{font:400 clamp(1.5rem,2.1vw,1.85rem)/1.08 var(--serif);letter-spacing:-.01em;margin-bottom:.55em}
.ft__x{font-size:clamp(.97rem,.2vw + .9rem,1.04rem);line-height:1.58;color:var(--ink2)}
@media (max-width:639px){
  .ft__i{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:16px;align-items:start;padding:18px 18px 22px}
  .ft__top{display:contents}
  .ft__ic{grid-column:1;grid-row:1/4;width:46px;height:46px}
  .ft__no{grid-column:2;grid-row:1;margin-bottom:6px;padding-top:0}
  .ft__t{grid-column:2;grid-row:2}
  .ft__x{grid-column:2;grid-row:3}
}

/* ---------- 04 Abschnitte ---------- */
.abs{margin-top:clamp(28px,4vw,56px)}
.ab{display:grid;gap:18px clamp(24px,5vw,72px);padding:clamp(34px,5vw,60px) 0;border-top:1px solid var(--ink)}
@media (min-width:960px){.ab{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}.ab__h{position:sticky;top:92px;align-self:start}}
.ab__no{font:500 .82rem/1 var(--mono);letter-spacing:.08em;color:var(--a-ink);margin-bottom:12px}
.ab__m{display:flex;align-items:center;gap:12px;margin-top:16px;font:500 .75rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink3)}
.ab__m i{display:block;width:calc(var(--n,3) * 11px);height:7px;background:repeating-linear-gradient(90deg,var(--a) 0 7px,transparent 7px 11px)}
.ab__t{font:400 clamp(1.9rem,3.2vw,2.8rem)/1.04 var(--serif);letter-spacing:-.012em;text-wrap:balance}
.ab__x{font-size:clamp(1.06rem,1.5vw,1.28rem);line-height:1.56;max-width:62ch;margin-bottom:clamp(22px,3vw,34px);color:var(--ink)}
.ab__x strong{font-weight:600}
.pts{list-style:none;border-top:1px solid var(--ink);counter-reset:pts}
.pts li{display:grid;grid-template-columns:3.1rem minmax(0,1fr);gap:10px;padding:13px 0;border-bottom:1px solid var(--rule);font-size:1.02rem;line-height:1.55;transition:background .2s,padding-left .25s var(--ease)}
.mg{display:none}
@media (min-width:960px){
  .mg{display:block;margin-top:clamp(22px,2.6vw,34px);max-width:320px}
  .mg__fr{position:relative;aspect-ratio:4/3;border:1px solid var(--ink);background-color:var(--white);background-image:linear-gradient(var(--rule2) 1px,transparent 1px),linear-gradient(90deg,var(--rule2) 1px,transparent 1px);background-size:16px 16px;overflow:hidden}
  .mg__svg{position:absolute;inset:0;width:100%;height:100%;--u:.78}
  .mg__loc{position:absolute;right:7px;top:7px;width:58px;height:47px;background:var(--white);box-shadow:0 0 0 3px var(--white)}
  .mg__lb{fill:none;stroke:var(--ink);stroke-width:1}
  .mg__lc{fill:var(--a);fill-opacity:.28;stroke:var(--a-ink);stroke-width:1}
  .mg figcaption{display:grid;gap:3px;padding-top:10px;font:400 .8rem/1.4 var(--mono);color:var(--ink3)}
  .mg figcaption b{font-weight:600;color:var(--ink);font-size:.75rem;letter-spacing:.05em;text-transform:uppercase}
}
.pts li:hover{background:color-mix(in srgb,var(--hue) 7%,transparent);padding-left:8px}
.pts__n{font:500 .78rem/1 var(--mono);letter-spacing:.06em;color:var(--a-ink);padding-top:.4em}

/* ---------- 05 Technische Daten ---------- */
.sp__grid{display:grid;gap:clamp(28px,5vw,72px)}
@media (min-width:980px){.sp__grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start}.sp__side{position:sticky;top:92px}}
.sp__tools{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,3vw,34px)}
.sp__l{counter-reset:sp;border-top:2px solid var(--ink)}
.sp__r{counter-increment:sp;position:relative;display:grid;grid-template-columns:2.3rem minmax(0,1fr);column-gap:14px;row-gap:5px;padding:18px 10px 19px 0;border-bottom:1px solid var(--rule);transition:background .25s,padding-left .3s var(--ease)}
.sp__r::before{content:counter(sp,decimal-leading-zero);grid-row:1/3;font:500 .78rem/1 var(--mono);letter-spacing:.06em;color:var(--a-ink);padding-top:.5em}
.sp__r::after{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:3px;background:var(--a);transform:scaleY(0);transition:transform .3s var(--ease)}
.sp__r:hover{background:color-mix(in srgb,var(--hue) 7%,transparent);padding-left:12px}
.sp__r:hover::after{transform:scaleY(1)}
.sp__r dt{display:flex;align-items:baseline;gap:10px;font:500 .8rem/1.35 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink3)}
.sp__r dd{font:500 clamp(1.06rem,1.55vw,1.32rem)/1.35 var(--sans);letter-spacing:-.008em}
.nn{font:400 1.42em/.9 var(--serif);letter-spacing:-.01em;padding:0 .04em;white-space:nowrap}
@media (min-width:720px){
  .sp__r{grid-template-columns:2.6rem minmax(0,5fr) minmax(0,7fr);align-items:baseline;column-gap:18px}
  .sp__r::before{grid-row:auto;padding-top:0}
  .sp__r dt::after{content:"";flex:1;min-width:14px;border-bottom:1px dotted var(--ink3);opacity:.7;transform:translateY(-.3em)}
}

/* ---------- Rhythmus: Papierwechsel ---------- */
#daten{background:var(--white)}
#ablauf{background-color:var(--paper);background-image:linear-gradient(var(--rule2) 1px,transparent 1px),linear-gradient(90deg,var(--rule2) 1px,transparent 1px),linear-gradient(rgba(17,21,26,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(17,21,26,.035) 1px,transparent 1px);background-size:80px 80px,80px 80px,16px 16px,16px 16px}
#fragen{background:var(--white)}
#daten::before,#daten::after,#fragen::before,#fragen::after,#ablauf::before,#ablauf::after{background:var(--paper)}

/* ---------- 06 Ablauf ---------- */
.flow{list-style:none;margin:clamp(36px,5vw,64px) 0 0;display:grid;gap:0 30px;grid-template-columns:1fr}
@media (min-width:700px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.flow{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}}
.flow__s{position:relative;padding:68px 0 44px}
.flow__s::before{content:"";position:absolute;left:0;right:0;top:19px;height:1px;background:var(--ink);transform-origin:left}
@media (min-width:700px){.flow__s::before{right:-30px}}
.flow__s:last-child::before{right:0!important}
.flow__n{position:absolute;left:0;top:0;display:grid;place-items:center;width:40px;height:40px;background:var(--ink);color:var(--paper);font:500 .85rem/1 var(--mono);letter-spacing:.04em}
.js.v2on .flow__s::before{transform:scaleX(0);transition:transform .9s var(--ease) calc(var(--i,0) * .14s + .2s)}
.js.v2on .flow__s.is-in::before{transform:none}
.flow__t{font:400 clamp(1.55rem,2.1vw,1.95rem)/1.08 var(--serif);letter-spacing:-.01em;margin-bottom:.5em;text-wrap:balance}
.flow__x{font-size:clamp(.97rem,.2vw + .9rem,1.04rem);line-height:1.58;color:var(--ink2);max-width:42ch}
@supports (grid-template-rows:subgrid){
  .flow__s{display:grid;grid-row:span 2;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);align-content:start}
  .flow__t{grid-row:1}
  .flow__x{grid-row:2}
}
@media (max-width:699px){
  .flow{margin-bottom:-34px}
  .flow__s{padding:0 0 34px 62px}
  .flow__t{padding-top:7px}
  .flow__s::before{left:19.5px;right:auto!important;top:46px;bottom:6px;width:1px;height:auto}
  .js.v2on .flow__s::before{transform:scaleY(0);transform-origin:top}
  .js.v2on .flow__s.is-in::before{transform:none}
  .flow__s:last-child::before{display:none}
}
#ablauf{padding-bottom:clamp(44px,6vw,80px)}
@media (min-width:700px){.flow{margin-bottom:-44px}}

/* ---------- 07 FAQ ---------- */
.faq__l{margin-top:clamp(30px,4vw,56px);border-top:2px solid var(--ink)}
.q{border-bottom:1px solid var(--rule)}
.q summary{display:grid;grid-template-columns:3.2rem minmax(0,1fr) 44px;gap:14px;align-items:center;min-height:68px;padding:14px 0;cursor:pointer;list-style:none}
.q summary::-webkit-details-marker{display:none}
.q__no{font:500 .78rem/1 var(--mono);letter-spacing:.06em;color:var(--a-ink)}
.q__t{font:500 clamp(1.1rem,1.8vw,1.45rem)/1.28 var(--sans);letter-spacing:-.014em;transition:color .2s}
.q summary:hover .q__t{color:var(--a-ink)}
.q__i{position:relative;width:44px;height:44px;border:1px solid var(--ink);transition:background .25s,color .25s}
.q__i::before,.q__i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform .3s var(--ease)}
.q__i::after{transform:translate(-50%,-50%) rotate(90deg)}
.q[open] .q__i{background:var(--ink);color:var(--paper)}
.q[open] .q__i::after{transform:translate(-50%,-50%) rotate(0)}
.q__a{padding:2px 58px 30px calc(3.2rem + 14px);max-width:calc(74ch + 3.2rem + 14px)}
.q__a p{font-size:1.02rem;line-height:1.62;color:var(--ink2)}
.q[open] .q__a{animation:q-in .4s var(--ease)}
@keyframes q-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:640px){.q summary{grid-template-columns:2.4rem minmax(0,1fr) 44px;gap:8px}.q__a{padding:2px 0 26px 0}}

/* ---------- 08 Verwandt ---------- */
.cards{list-style:none;margin:clamp(36px,5vw,64px) 0 0;display:grid;gap:clamp(18px,2.4vw,28px);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.card{position:relative;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--ink);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card:hover,.card:focus-within{transform:translateY(-4px);box-shadow:8px 8px 0 var(--rule)}
.card__th{position:relative;aspect-ratio:2/1;overflow:hidden;border-bottom:1px solid var(--ink);background-color:var(--paper);background-image:linear-gradient(var(--rule2) 1px,transparent 1px),linear-gradient(90deg,var(--rule2) 1px,transparent 1px);background-size:20px 20px}
.card__th svg{position:absolute;inset:0;width:100%;height:100%}
.card__fn{position:absolute;left:12px;bottom:10px;font:500 .75rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink3)}
.card__b{display:flex;flex-direction:column;gap:10px;flex:1;padding:20px 22px 22px}
.card__t{font:400 clamp(1.7rem,2.4vw,2.1rem)/1.04 var(--serif);letter-spacing:-.01em}
.card__t a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:inherit}
.card__t a::after{content:"";position:absolute;inset:0;z-index:1}
.card__x{font-size:.98rem;line-height:1.55;color:var(--ink2)}
.card__go{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:.6em;font:500 .78rem/1 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--a-ink)}
.card:hover .card__go .ar{transform:translateX(4px)}

/* ---------- Kontakt & Fuß (dunkel) ---------- */
.cta,.foot{position:relative;background:var(--ink);color:#e9e6dc}
.cta{padding:clamp(64px,9vw,128px) var(--pad) clamp(44px,6vw,80px);border-top:1px solid var(--ink)}
.cta .sh__l{color:rgba(233,230,220,.7)}
.cta .sh__no{border-color:rgba(233,230,220,.55);color:#e9e6dc}
.cta__t{font:400 clamp(2.9rem,7.6vw,7rem)/.94 var(--serif);letter-spacing:-.022em;margin:.38em 0 .5em;max-width:13ch;color:#f4f1e6;text-wrap:balance}
.cta__t em{color:var(--a-dk)}
.cta__row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.cta__n{font:500 .8rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:rgba(233,230,220,.72)}
.cta__d{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));margin-top:clamp(40px,6vw,72px);border-top:1px solid rgba(233,230,220,.28)}
.cta__d>div{padding:20px 22px 24px 0;border-bottom:1px solid rgba(233,230,220,.16)}
.cta__d dt{font:500 .75rem/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:rgba(233,230,220,.72);margin-bottom:10px}
.cta__d dd{font:400 clamp(1.1rem,1.5vw,1.3rem)/1.4 var(--sans)}
.cta a:not(.btn),.foot a{color:inherit;text-decoration-color:rgba(233,230,220,.5)}
.cta__d dd a,.wt-firma a{display:inline-flex;align-items:center;min-height:44px}
.cta a:not(.btn):hover,.foot a:hover{color:var(--a-dk);text-decoration-color:currentColor}
.foot__in{padding:0 var(--pad) 120px}
.wt-footer{display:grid;gap:36px 48px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));border-top:1px solid rgba(233,230,220,.28);padding-top:44px;font-size:.92rem;line-height:1.6}
.wt-firma{color:rgba(233,230,220,.86)}.wt-firma strong{color:#f4f1e6;font-weight:600}
.wt-links{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.wt-links a{display:inline-flex;align-items:center;min-height:44px;font:500 .8rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.wt-disclaimer{grid-column:1/-1;columns:1;column-gap:48px;font-size:.92rem;line-height:1.65;color:rgba(233,230,220,.92);border-top:1px solid rgba(233,230,220,.16);padding-top:28px}
@media (min-width:900px){.wt-disclaimer{columns:2}}
.wt-disclaimer h2{column-span:all;font:500 .78rem/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:rgba(233,230,220,.78);margin-bottom:16px}
.wt-disclaimer p{break-inside:avoid;margin-bottom:12px}

/* ---------- Scroll-Enthüllung (nur mit JS) ---------- */
.js.v2on .rv{opacity:0;transform:translateY(20px);transition:opacity .75s var(--ease) calc(var(--i,0) * 70ms),transform .75s var(--ease) calc(var(--i,0) * 70ms)}
.js.v2on .rv.is-in{opacity:1;transform:none}
.js.v2on .ph.rv{opacity:1;transform:none;transition:none}
.js.v2on .ph.rv .ph__fr{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease)}
.js.v2on .ph.rv.is-in .ph__fr{clip-path:inset(-12px)}
.js.v2on .kz__c.rv,.js.v2on .ft__i.rv,.js.v2on .card.rv{transition-property:opacity,transform,background,box-shadow}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js.v2on .rv{opacity:1;transform:none}
  .js.v2on .ph.rv .ph__fr{clip-path:none}
  .js.v2on .kz__sc,.js.v2on .flow__s::before{transform:none}
}

/* ---------- Raster-Ansicht (Taste G) ---------- */
.v2-grid .sheet::after{content:"";position:absolute;inset:0 var(--pad);z-index:70;pointer-events:none;background-image:repeating-linear-gradient(90deg,rgba(0,110,255,.09) 0,rgba(0,110,255,.09) calc((100% - 264px) / 12),transparent calc((100% - 264px) / 12),transparent calc((100% - 264px) / 12 + 24px));border-inline:1px solid rgba(0,110,255,.35)}

/* ---------- Druck: Datenblatt ---------- */
@media print{
  @page{size:A4;margin:14mm}
  html{font-size:10.5pt}
  body{background:#fff;padding:0;overflow:visible}
  .ruler,.hdr,.skip,.btns,.sp__tools,.stripe,.fig__stage .mc,[data-reviewbar],.cards,.cta__row,.toc{display:none!important}
  .sheet{border:0;max-width:none;overflow:visible}.sheet::before{display:none}
  .sec{padding:16pt 0;border-top:1px solid #000;break-inside:auto}.sec::before,.sec::after{display:none}
  .js.v2on .rv{opacity:1!important;transform:none!important}.js.v2on .ph.rv .ph__fr{clip-path:none!important}
  .cta,.foot{background:#fff;color:#000}.cta__t{color:#000;font-size:28pt}.cta__d dt,.cta .sh__l{color:#333}
  .wt-disclaimer{color:#000}
  a{text-decoration:none}
}