/* eLABoraNET home proposal. Tokens follow the live site (website.css); the label motif follows DESIGN.md "Das Etikett". */
:root{
  /* surfaces and text */
  --ink:#182b29;--muted:#53635f;--paper:#fff;--stock:#fbfcfa;--wash:#f3f6f4;--wash-2:#ecf3ef;--dark:#12342d;
  --on-dark:#fff;--on-dark-2:#e8f2ed;--on-dark-3:#c3d8cf;
  /* brand: green and blue, each with a tint, an edge and (green) a halo */
  --green:#08734e;--green-d:#06593e;--green-l:#e3f0ea;--green-halo:#cfe6db;--green-line:#b8d8c9;--green-edge:#8fc4ad;
  --blue:#1e5a85;--blue-d:#1d4a68;--blue-l:#e8f1f8;--blue-line:#c9dbe9;
  /* module families: question cards and map rings */
  --m1:#3b8a66;--m2:#a2cdb7;--m3:#4569b8;--m4:#a4c3e6;
  /* lines, light to strong: hairline, card edge, divider, control border (3:1 on white, WCAG 1.4.11) */
  --line:#dbe3df;--line-2:#c9d6d0;--line-3:#b9c8c0;--line-ctl:#7a8e84;
  /* caution: status chip, form hint, ?review overlay */
  --warn:#74510b;--warn-l:#fff2cc;
  --shadow:#12342d80;--shadow-dark:#000a;
  --focus:var(--blue);
  --header-h:72px;--bar-h:4rem;
  /* type roles, in rem so the browser's default size and OS text scaling apply */
  --fs-meta:.75rem;--fs-note:.8125rem;--fs-ui:.875rem;--fs-ui-l:.9375rem;--fs-body:1rem;--fs-body-l:1.0625rem;--fs-lead:1.125rem;
  --fs-h4:1.25rem;--fs-h4-l:1.375rem;--fs-stat:1.5rem;
  --fs-lead-f:clamp(1.0625rem,1.35vw,1.1875rem);--fs-cap:clamp(1.0625rem,1.5vw,1.21875rem);--fs-id:clamp(1.375rem,2.1vw,1.6875rem);
  --fs-h3:clamp(1.625rem,2.5vw,2.1875rem);--fs-h2:clamp(1.875rem,3.3vw,2.75rem);--fs-h1:clamp(2.1875rem,4vw,3.5rem);--fs-h1-m:2.0625rem;
  --font:system-ui,-apple-system,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html:not(.js) .needs-js{display:none}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 24px)}
@media (prefers-reduced-motion:no-preference){html.smooth{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:var(--fs-body-l)/1.62 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,figure,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{max-width:100%}
a{color:var(--green);text-underline-offset:4px}
p{color:var(--muted)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.wrap{max-width:1240px;margin:0 auto;padding-inline:40px}
.skip{position:absolute;left:16px;top:-100px;z-index:100;padding:10px 14px;background:var(--paper);border:1px solid var(--line)}
.skip:focus{top:8px}
.eyebrow{font-size:var(--fs-meta);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green)}
.mono{font-family:var(--mono)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:12px 22px;border-radius:7px;border:1px solid var(--green);background:var(--green);color:var(--on-dark);font-size:var(--fs-ui-l);font-weight:650;text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.btn:hover{background:var(--green-d);border-color:var(--green-d)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-ctl)}
.btn.ghost:hover{background:var(--green-l);border-color:var(--muted)}

/* header */
.site-header{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line)}
.bar{max-width:1440px;margin:0 auto;min-height:var(--header-h);display:flex;align-items:center;gap:24px;padding:10px 32px}
.brand{display:flex;flex-shrink:0;padding-block:2px}
.brand img{display:block;width:182px;height:40px}
.bar nav{display:flex;align-items:center;gap:24px;margin-left:auto}
.bar nav a{font-size:var(--fs-ui);font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap;padding:12px 0}
.bar nav a:hover{color:var(--green);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.lang-menu{position:relative}.lang-menu summary{list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px;font-size:var(--fs-note);font-weight:700;color:var(--ink);cursor:pointer;border-radius:6px}.lang-menu summary::-webkit-details-marker{display:none}.lang-menu summary:hover,.lang-menu details[open] summary{background:var(--green-l)}.lang-menu ul{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:176px;margin:0;padding:6px;list-style:none;background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 34px -18px var(--shadow)}.lang-menu li a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:6px;font-size:var(--fs-ui);font-weight:600;color:var(--ink);text-decoration:none}.lang-menu li a:hover,.lang-menu li a[aria-current]{background:var(--green-l);color:var(--green-d)}.lang-menu li a[aria-current]{font-weight:700}
.nav-cta{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-ui);font-weight:650;color:var(--on-dark);background:var(--green);border-radius:6px;padding:0 16px;text-decoration:none;white-space:nowrap}
.nav-cta:hover{background:var(--green-d)}
.menu-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:var(--paper);border:1px solid var(--line);border-radius:6px;cursor:pointer}
.mobile-only{display:none}
/* "Unser LIMS" and its sampling page as one group (i18n/lang.mjs, mainNavHtml): in the menu list the sampling link branches off the LIMS link (owner: not on the desktop bar); the offline tag is a small slanted label like the sample tag.
   The group made the header wider, so the menu button takes over below 75em (was 67.5em) and the compact spacing holds up to 80em: Italian, the longest language, keeps at least 40px to spare */
.nav-lims{display:flex;align-items:center;gap:24px}
.nav-tag{display:inline-block;margin-left:8px;padding:0 6px 0 11px;font-size:.6875rem;font-weight:700;line-height:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--green-d);background:radial-gradient(circle at 5.5px 50%,var(--paper) 1.5px,transparent 2.1px),var(--green-halo);clip-path:polygon(4px 0,100% 0,100% 100%,4px 100%,0 50%);transform:rotate(-4deg);vertical-align:1px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* hero */
.hero{background:linear-gradient(180deg,var(--wash),var(--wash-2));border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding-top:44px;padding-bottom:44px}
h1{font-size:var(--fs-h1);line-height:1.05;letter-spacing:-.028em;font-weight:730;text-wrap:balance}
h1 .hl{color:var(--green)}
.hero .eyebrow{margin-bottom:18px}
.lead{margin-top:22px;max-width:33em;font-size:var(--fs-lead-f);line-height:1.6}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.map-card{container-type:inline-size;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:16px 20px 16px;box-shadow:0 26px 60px -34px var(--shadow)}
.map-head{display:flex;align-items:center;gap:12px}
.id-chip{flex-shrink:0;font:700 var(--fs-note)/1 var(--mono);letter-spacing:.02em;background:var(--green-l);color:var(--green-d);padding:8px 10px;border-radius:6px}
.map-title{min-width:0;font-size:var(--fs-note);color:var(--muted);line-height:1.3}
.pause{flex:none;margin-left:auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--muted);cursor:pointer}
.pause:hover{border-color:var(--green);color:var(--green)}
.pause svg{width:16px;height:16px}
.pause .i-play{display:none}.pause[aria-pressed="true"] .i-play{display:block}.pause[aria-pressed="true"] .i-pause{display:none}
.stepper{flex:none;margin-left:auto;display:flex;gap:8px}
.step{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--muted);cursor:pointer}
.step:hover:not(:disabled){border-color:var(--green);color:var(--green)}
.step:disabled{opacity:.4;cursor:default}
.step svg{width:18px;height:18px}

.map{--sym:clamp(38px,7.2cqw,52px);--padx:clamp(46px,10cqw,74px);position:relative;height:clamp(384px,59cqw,430px);margin-top:2px}
.stage{position:absolute;left:var(--padx);right:var(--padx);top:6px;bottom:6px}
.edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.e{fill:none;stroke:var(--green-halo);stroke-width:1.3;stroke-linecap:round;vector-effect:non-scaling-stroke;transition:stroke .35s,stroke-width .35s}
.e-flow{stroke:var(--m2);stroke-width:2.2}
.e-flow.is-done{stroke:var(--green);stroke-width:3}
.e-support,.e-access,.e-specialist,.e-oversight,.e-lifecycle{stroke:var(--blue-line)}
.e-oversight{stroke-dasharray:4 5}
.e.is-hot{stroke:var(--green);stroke-width:2.2}
.node{position:absolute;left:var(--x);top:var(--y);z-index:2;width:calc(var(--sym) + 76px);display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--ink);transform:translate(-50%,calc(var(--sym) / -2))}
.sym{display:grid;place-items:center;width:var(--sym);height:var(--sym);border-radius:50%;background:var(--paper);border:1.5px solid var(--green-edge);color:var(--green-d);transition:background .3s,color .3s,border-color .3s,box-shadow .3s,transform .3s}
.sym svg{width:calc(var(--sym) * .5);height:calc(var(--sym) * .5)}
.lbl{margin-top:6px;padding:0 4px;background:var(--paper);font-size:clamp(.75rem,1.9cqw,.84375rem);font-weight:630;line-height:1.2;text-align:center;text-wrap:balance}
.k-blue .sym{border-color:var(--m4);color:var(--blue)}
.node:hover .sym,.node:focus-visible .sym,.node.is-related .sym{border-color:var(--green);box-shadow:0 0 0 6px var(--green-l)}
.node.is-done .sym{background:var(--green-l);border-color:var(--green)}
.node.is-active .sym{background:var(--green);color:var(--on-dark);border-color:var(--green);box-shadow:0 0 0 6px var(--green-halo);transform:scale(1.06)}
.node.is-active .lbl{color:var(--green-d)}
.node .sub{margin-top:2px;padding:0 4px;background:var(--paper);font-size:clamp(.625rem,1.5cqw,.72rem);font-weight:560;line-height:1.2;text-align:center;color:var(--muted)}
.token{position:absolute;left:0;top:calc(51% - var(--sym) / 2 - 9px);z-index:4;display:flex;align-items:center;gap:7px;padding:5px 9px;background:var(--paper);border:1.5px solid var(--green);border-radius:7px;font:700 var(--fs-meta)/1 var(--mono);color:var(--green-d);white-space:nowrap;box-shadow:0 8px 18px -8px var(--shadow);pointer-events:none;transform:translate(calc(var(--tx,0px) - 50%),-100%);transition:transform .95s cubic-bezier(.5,0,.2,1),opacity .35s}
.token::after{content:"";position:absolute;left:50%;bottom:-6px;width:9px;height:9px;background:var(--paper);border:solid var(--green);border-width:0 1.5px 1.5px 0;transform:translateX(-50%) rotate(45deg)}
.token i{width:15px;height:11px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 3px,var(--ink) 3px 4px,transparent 4px 6px)}
.token.is-off{opacity:0}
.js .token{display:flex}.token{display:none}
.cap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:end;min-height:88px;margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
.cap-k{grid-column:1/-1;font-size:var(--fs-meta);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.cap-t{font-size:var(--fs-cap);font-weight:650;line-height:1.3;color:var(--ink)}
.cap-link{font-size:var(--fs-ui);font-weight:650;white-space:nowrap;padding:6px 0}
.mini{display:none}
/* links keep their tight look; an invisible 44px target is added around them */
.mlink,.next,.cap-link,.mini-all{position:relative}
.next::before,.cap-link::before{content:"";position:absolute;inset:-6px -4px}
.mlink::before{content:"";position:absolute;inset:-8px -4px}
.mini-all::before{content:"";position:absolute;inset:-11px -4px}

/* trust strip */
.trust{border-bottom:1px solid var(--line)}
.trust-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px 56px;align-items:center;padding-top:22px;padding-bottom:10px}
.trust-k{font-size:var(--fs-note);color:var(--muted);margin-bottom:10px}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}
.logos img{display:block;height:38px;width:auto;max-width:140px;object-fit:contain;filter:grayscale(1);opacity:.82}
.facts{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:12px 20px}
.facts dt{font-size:var(--fs-stat);font-weight:720;line-height:1.1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.facts dd{font-size:var(--fs-note);line-height:1.35;color:var(--muted);margin-top:3px}
.certs{grid-column:1/-1;font-size:var(--fs-note);line-height:1.5;color:var(--muted);padding:6px 0 18px}
.certs b{color:var(--ink);font-weight:650}

/* story */
.story{background:var(--wash);border-bottom:1px solid var(--line)}
.story-head{max-width:780px;padding:76px 0 34px}
.story-head h2{margin-top:14px;font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.022em;font-weight:730;text-wrap:balance}
.story-head p{margin-top:16px;font-size:var(--fs-lead);max-width:34em}
.story-grid{display:grid;grid-template-columns:336px minmax(0,1fr);gap:64px;align-items:start;padding-bottom:84px}

.label{position:relative;background:var(--stock);border:1px solid var(--line-2);border-radius:14px;overflow:hidden;box-shadow:0 22px 44px -28px var(--shadow)}
.tag{position:sticky;top:calc(var(--header-h) + 24px)}
.tag-in{padding:16px 18px 14px}
.mx{display:inline-block;width:10px;height:10px;margin-right:7px;border-radius:3px;background:var(--m1)}
.tag-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font:700 var(--fs-meta)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tag-top img{display:block;width:22px;height:22px;border-radius:4px}
.barcode{display:block;max-width:100%;height:58px;margin:12px 0 4px}
.barcode rect{fill:var(--paper)}
.barcode path{fill:var(--ink)}
.tag-id{margin-top:10px;font:800 var(--fs-id)/1 var(--mono);letter-spacing:-.025em;color:var(--ink)}
.tag-fields{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin-top:12px;font-size:var(--fs-note);line-height:1.4}
.tag-fields dt{color:var(--muted)}.tag-fields dd{font-weight:650}
.stagebar{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-3)}
.stage-pill{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-note);font-weight:700;color:var(--green-d);background:var(--green-l);border-radius:999px;padding:5px 12px 5px 10px}
.stage-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}
.stage-pill.pop{animation:pop .5s ease-out}
@keyframes pop{0%{transform:scale(.94)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
.ticks{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:10px}
.ticks i{height:4px;border-radius:2px;background:var(--line-2);transition:background .4s}
.ticks i.on{background:var(--green)}
.log{display:flex;flex-direction:column;justify-content:flex-end;max-height:232px;margin-top:12px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30px);mask-image:linear-gradient(to bottom,transparent 0,#000 30px)}
.row{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows .45s ease,opacity .45s ease}
.js .row{grid-template-rows:0fr;opacity:0}
.js .row.on{grid-template-rows:1fr;opacity:1}
.row>div{overflow:hidden;min-height:0}
.row p{padding:4px 0;font-size:var(--fs-note);line-height:1.35;color:var(--muted)}
.row b{color:var(--ink);font-weight:700;margin-right:5px}
.tag-next{margin-top:4px;padding-top:9px;border-top:1px dashed var(--line-3);font-size:var(--fs-note);line-height:1.35;color:var(--muted);min-height:42px}

.alias{display:block;height:0}
.chapter{padding:50px 0 54px;border-top:1px solid var(--line-2)}
.chapter:first-child{border-top:0;padding-top:10px}
.ch-meta{display:flex;align-items:baseline;gap:12px;font-size:var(--fs-meta);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green)}
.ch-no{font-family:var(--mono)}
.ch-title{margin-top:14px;max-width:20em;font-size:var(--fs-h3);line-height:1.14;letter-spacing:-.018em;font-weight:720;text-wrap:balance}
.ch-text{margin-top:16px;max-width:38em;font-size:var(--fs-body-l)}
.ch-evidence{margin-top:28px}
.ch-note{margin-top:14px;max-width:38em;font-size:var(--fs-ui-l)}
.ch-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin-top:26px}
.mlink{font-size:var(--fs-ui);font-weight:650;text-decoration:none;border-bottom:1px solid var(--m2);padding:6px 0 3px}
.mlink:hover{border-color:var(--green)}
.next{margin-left:auto;font-size:var(--fs-ui);color:var(--muted);text-decoration:none;padding:6px 0}
.next:hover{color:var(--green)}
.next span{display:inline-block;transition:transform .2s}.next:hover span{transform:translateY(3px)}
.status{display:inline-block;font-size:var(--fs-meta);font-weight:650;color:var(--warn);background:var(--warn-l);padding:4px 9px;border-radius:4px}
.status.ok{color:var(--green-d);background:var(--green-l)}
.status-line{margin-top:12px}

.flow-pills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.flow-pills li{position:relative;padding:16px 18px 16px 20px;background:var(--paper);border:1px solid var(--line);border-left-width:0}
.flow-pills li:first-child{border-left-width:1px;border-radius:12px 0 0 12px}
.flow-pills li:last-child{border-radius:0 12px 12px 0;background:var(--green-l);border-color:var(--green-line)}
.flow-pills li+li::before{content:"";position:absolute;left:-1px;top:50%;width:13px;height:13px;background:var(--wash);border:solid var(--line);border-width:1px 1px 0 0;transform:translate(-50%,-50%) rotate(45deg)}
.flow-pills b{display:block;font-size:var(--fs-body);color:var(--ink)}
.flow-pills span{display:block;margin-top:4px;font-size:var(--fs-ui);line-height:1.45;color:var(--muted)}
.flow-pills .mono{display:inline;font-size:var(--fs-note);color:var(--green-d)}

.ev-split{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:28px 36px;align-items:center}
.shot{margin:0}
.zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.shot img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line-2);background:var(--paper);box-shadow:0 14px 34px -22px var(--shadow)}
.shot figcaption{margin-top:9px;font-size:var(--fs-meta);line-height:1.45;color:var(--muted)}
.ev-cards{display:grid;gap:16px}
.gate{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 14px;align-items:start;padding:16px 18px;background:var(--blue-l);border:1px solid var(--blue-line);border-radius:12px}
.gate .ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--paper);border:1.5px solid var(--m4);color:var(--blue)}
.gate .ic svg{width:20px;height:20px}
.gate .eyebrow{display:block;color:var(--blue);margin-bottom:6px}
.gate h4{font-size:var(--fs-h4);line-height:1.25;color:var(--blue-d)}
.gate p{margin-top:8px;font-size:var(--fs-ui-l);line-height:1.55}
.gate .mlink{display:inline-block;margin-top:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px 22px}   /* a feature list, not buttons (tester) */
.chips li{position:relative;padding-left:22px;font-size:var(--fs-ui);font-weight:600;color:var(--ink)}
.chips li::before{content:"";position:absolute;left:0;top:.28em;width:15px;height:15px;background:var(--green);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.paths{display:grid;gap:0;counter-reset:p}
.paths li{counter-increment:p;position:relative;padding:14px 0 14px 46px;border-top:1px solid var(--line-2)}
.paths li:first-child{border-top:2px solid var(--green)}
.paths li::before{content:counter(p);position:absolute;left:0;top:14px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--green-l);color:var(--green-d);font:700 var(--fs-note)/1 var(--mono)}
.paths b{display:block;font-size:var(--fs-body);color:var(--ink)}
.paths span{display:block;font-size:var(--fs-ui-l);line-height:1.5;color:var(--muted)}
.paths strong{display:block;margin-top:5px;font-weight:650;color:var(--ink)}
.paths .shot{margin:16px 0 0 -46px}
.gate-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}
.inline-link{margin-top:16px;font-size:var(--fs-ui-l)}
.micro-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px 28px;align-items:start;margin-top:22px}
.micro-row .inline-link{margin-top:0}
.micro-row .shot{margin:0}

.close-rows{margin-top:30px;border-top:2px solid var(--green)}
.close-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 20px;padding:24px 0;border-bottom:1px solid var(--line-2)}
.close-row .ic{grid-row:1/4;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--paper);border:1.5px solid var(--green-edge);color:var(--green-d)}
.close-row .ic svg{width:22px;height:22px}
.close-row .eyebrow{color:var(--muted)}
.close-row h4{font-size:var(--fs-h4-l);line-height:1.25;letter-spacing:-.01em;margin-top:2px}
.close-row p{margin-top:8px;max-width:42em;font-size:var(--fs-body)}
.close-row .chips{margin-top:12px}
.close-row .mlink{justify-self:start;margin-top:12px}

/* teasers + family */
.teasers{padding:84px 0 28px}
.sec-head{max-width:720px}
.sec-head h2{margin-top:12px;font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.02em;font-weight:730;text-wrap:balance}
.sec-head p{margin-top:14px;font-size:var(--fs-body-l)}
.q-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:32px}
.q{--mx:var(--m1);display:flex;flex-direction:column;gap:10px;padding:22px 22px 20px;background:var(--paper);border:1px solid var(--line);border-radius:12px;color:inherit;text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s}
.q:nth-child(2){--mx:var(--m3)}.q:nth-child(3){--mx:var(--m2)}
.q:hover{transform:translateY(-3px);border-color:var(--mx);box-shadow:0 20px 34px -24px var(--shadow)}
.q .qi{align-self:flex-start;padding:5px 9px;border-radius:6px;font:700 var(--fs-meta)/1 var(--mono);letter-spacing:.08em;color:var(--ink);background:var(--green-l);background:color-mix(in srgb,var(--mx) 24%,var(--paper))}
.q h3{font-size:var(--fs-h4);line-height:1.25;letter-spacing:-.01em;font-weight:700}
.q p{font-size:var(--fs-ui-l);line-height:1.55}
.q .go{margin-top:auto;padding-top:8px;font-size:var(--fs-ui);font-weight:650;color:var(--green)}
.topic-head{margin-top:64px}.mlinks{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:12px}.close-row .mlinks .mlink{margin-top:0}.inline-link .mlink+.mlink{margin-left:18px}
.family{padding:56px 0 84px}
.fam-note{margin-top:14px;max-width:38em;font-size:var(--fs-note)}
.fam-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:28px}
.fam{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 20px;align-items:center;padding:22px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.fam img{display:block;height:44px;width:auto;max-width:160px;object-fit:contain}
.fam p{grid-column:1/-1;font-size:var(--fs-ui-l)}
.fam .mlink{grid-column:1/-1;justify-self:start}
.fam .top{display:flex;align-items:center;gap:12px;grid-column:1/-1}

/* demo */
.demo{background:var(--dark);color:var(--on-dark-2)}
.demo-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:start;padding-top:84px;padding-bottom:84px}
.demo .eyebrow{color:var(--m2)}
.demo h2{margin-top:14px;font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.024em;font-weight:730;color:var(--on-dark);text-wrap:balance}
.demo p{color:var(--on-dark-3)}
.demo .sub{margin-top:18px;font-size:var(--fs-lead);max-width:28em}
.demo-contact{margin-top:28px;display:grid;gap:6px;font-size:var(--fs-body)}
.demo-contact a{color:var(--on-dark);font-weight:650}
.form{background:var(--paper);color:var(--ink);border-radius:16px;padding:26px 26px 24px;box-shadow:0 30px 60px -30px var(--shadow-dark)}
.form legend,.form label.t{display:block;font-size:var(--fs-ui);font-weight:700;color:var(--ink);margin-bottom:8px;padding:0}
.form fieldset{border:0;padding:0;margin:0 0 20px}
.topics{display:flex;flex-wrap:wrap;gap:8px}
.topics label{position:relative;display:inline-flex}
.topics input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.topics span{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;font-size:var(--fs-ui);font-weight:600;color:var(--ink);background:var(--paper);border:1px solid var(--line-ctl);border-radius:999px;transition:background .15s,border-color .15s,color .15s}
.topics input:hover+span{border-color:var(--green)}
.topics input:checked+span{background:var(--green);border-color:var(--green);color:var(--on-dark)}
.topics input:focus-visible+span{outline:3px solid var(--focus);outline-offset:3px}
.field{margin-bottom:16px}
.field input,.field textarea{width:100%;padding:12px 14px;font:inherit;font-size:var(--fs-body);color:var(--ink);background:var(--paper);border:1px solid var(--line-ctl);border-radius:8px}
.field textarea{min-height:92px;resize:vertical}
.field input:focus,.field textarea:focus{outline:3px solid var(--blue-line);border-color:var(--blue)}
.form-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.form .btn.ghost{color:var(--ink)}
.copied{font-size:var(--fs-ui);color:var(--green-d);font-weight:650}
.demo .form-note{margin-top:14px;font-size:var(--fs-note);line-height:1.5;color:var(--muted)}
.demo .form-hint{margin-top:12px;font-size:var(--fs-note);line-height:1.5;color:var(--warn)}
.my-label{margin-top:34px;width:fit-content;max-width:100%}
.my-label .tag-id{font-size:var(--fs-h4-l);overflow-wrap:anywhere}
.demo .my-label{color:var(--ink)}
.demo .my-label p,.demo .my-label dt{color:var(--muted)}
.demo .my-label .tag-id{color:var(--ink)}

/* footer */
footer{background:var(--stock);border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:36px;padding-top:48px;padding-bottom:40px}
.foot-grid.has-topics{grid-template-columns:1.2fr 1fr 1fr 1fr 1fr}
.foot-grid img{display:block;width:182px;height:40px}
.foot-grid h2{font-size:var(--fs-ui);margin-bottom:14px}
.foot-grid a{display:block;padding:3px 0;margin-bottom:5px;font-size:var(--fs-ui);color:var(--muted);text-decoration:none}
.foot-grid a:hover{text-decoration:underline}
.foot-grid p{margin-top:12px;font-size:var(--fs-ui);max-width:250px}
.foot-bottom{max-width:1240px;margin:0 auto;padding:18px 40px;border-top:1px solid var(--line);font-size:var(--fs-note);color:var(--muted)}

/* lightbox */
dialog{border:0;padding:0;background:transparent;max-width:min(96vw,1500px);max-height:94vh;overflow:visible}
.demo-contact,dialog{--focus:var(--m2)}
dialog::backdrop{background:#0b1f1bd9} /* literal: ::backdrop only inherits custom properties in recent browsers */
dialog img{display:block;max-width:100%;max-height:82vh;border-radius:10px;background:var(--paper)}
dialog p{max-width:60em;margin:12px auto 0;color:#fff;font-size:var(--fs-note);line-height:1.45;text-align:center}
dialog p:empty{display:none}
dialog .close{position:absolute;top:-46px;right:0;height:40px;padding:0 14px;border:0;border-radius:6px;background:var(--paper);font-weight:650;cursor:pointer}

/* review mode (?review): outlines every claim that still needs confirmation, see CLAIMS in build.mjs */
html.review [data-claim]{position:relative;outline:2px dashed var(--warn);outline-offset:4px}
html.review [data-claim]::after{content:attr(data-claim-note);position:absolute;left:6px;bottom:100%;z-index:60;max-width:min(30ch,80vw);margin-bottom:6px;padding:4px 8px;border-radius:4px;background:var(--warn);color:var(--on-dark);font:600 var(--fs-meta)/1.35 var(--font);letter-spacing:0;text-transform:none;white-space:normal;pointer-events:none}
.review-bar{position:fixed;left:12px;bottom:12px;z-index:90;padding:8px 12px;border-radius:6px;background:var(--warn);color:var(--on-dark);font:600 var(--fs-note)/1.3 var(--font)}

/* responsive */
@media (max-height:48.75em){.log{max-height:176px}.tag-fields{display:none}.barcode{height:48px}}
@media (max-width:80em){
  .bar{padding:10px 24px;gap:16px}.bar nav{gap:16px}.nav-lims{gap:16px}
}
@media (max-width:73.75em){
  .wrap{padding-inline:28px}
  .hero-grid{gap:36px}
  .story-grid{gap:40px}
}
@media (max-width:75em){
  /* header: menu button and the navigation as a list */
  .menu-toggle{display:flex;order:4}
  .bar{flex-wrap:wrap}.brand{margin-right:auto}
  .bar nav{display:none;order:5;width:100%;margin:0;padding:12px 0;flex-direction:column;align-items:stretch;gap:0}
  .bar nav.open{display:flex}.bar nav a{padding:13px 8px;font-size:var(--fs-body)}.mobile-only{display:block}
  .nav-lims{flex-direction:column;align-items:stretch;gap:0}
  .bar nav .nav-sub{position:relative;padding-left:34px}.nav-sub::before{content:"";position:absolute;left:15px;top:0;width:11px;height:calc(50% + 1px);border:solid var(--line-ctl);border-width:0 0 1.5px 1.5px;border-bottom-left-radius:3px}
  .nav-cta{display:none}
  html:not(.js) .menu-toggle{display:none}
  html:not(.js) .bar nav{display:flex}
  html:not(.js) .site-header{position:static}
}
@media (min-width:62.5625em) and (max-width:73.75em){
}
@media (max-width:67.5em){
  .hero-grid{grid-template-columns:1fr;padding-top:36px}
  .map-card{max-width:760px}
  .trust-grid{grid-template-columns:1fr}
  .q-grid{grid-template-columns:1fr}.q:has(.qi){display:grid;grid-template-columns:auto 1fr;gap:6px 18px}.q .qi{grid-row:1/3}.q:has(.qi) .go{grid-column:2}
  .demo-grid{grid-template-columns:1fr;gap:36px}
  .my-label{display:none}
  .foot-grid,.foot-grid.has-topics{grid-template-columns:1fr 1fr}
}
@media (max-width:62.5em){
  html{scroll-padding-top:calc(var(--header-h) + var(--bar-h) + 8px)}
  .story-grid{grid-template-columns:1fr;gap:0;padding-bottom:56px}
  html:not(.js) .tag{position:static}
  .tag{top:var(--header-h);z-index:20;margin:0 -28px 8px;border-radius:0;border-width:1px 0;box-shadow:0 10px 18px -14px var(--shadow)}
  .tag .tag-in{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:'id stage' 'ticks ticks';align-items:center;gap:8px 14px;padding:10px 28px}
  .tag .tag-top,.tag .barcode,.tag .tag-fields,.tag .log,.tag .tag-next{display:none}
  .tag .tag-id{grid-area:id;margin:0;font-size:var(--fs-lead)}
  .tag .stagebar{display:contents}
  .tag .stage-pill{grid-area:stage;justify-self:end}
  .tag .ticks{grid-area:ticks;margin:0}
}
@media (max-width:43.75em){
  body{font-size:var(--fs-body)}
  .wrap{padding-inline:22px}
  .bar{padding:8px 16px}.brand{padding-block:6px}.brand img{width:150px;height:33px}
  .tag{margin:0 -22px 8px}.tag .tag-in{padding-left:22px;padding-right:22px}
  .hero-grid{padding-top:28px;padding-bottom:30px;gap:28px}
  .hero .eyebrow{font-size:var(--fs-meta)}
  h1{font-size:var(--fs-h1-m)}
  .lead{margin-top:16px;font-size:var(--fs-body)}
  .actions{margin-top:22px}.actions .btn{width:100%}.actions .btn.ghost{min-height:46px}
  .map-card{padding:14px 10px 12px;border-radius:14px}
  .id-chip{white-space:nowrap}.map-title{font-size:var(--fs-meta)}
  .cap{min-height:96px}
  .trust-grid{padding-top:18px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
  .logos{gap:10px 16px}.logos img{height:27px;max-width:96px}
  .story-head{padding:52px 0 24px}.story-head p{font-size:var(--fs-body-l)}
  .chapter{padding:30px 0 34px}.ch-evidence{margin-top:20px}.ch-foot{margin-top:18px}
  .flow-pills,.gate-row,.micro-row{grid-template-columns:1fr}
  .flow-pills li,.flow-pills li:first-child,.flow-pills li:last-child{border-width:1px;border-radius:12px;margin-bottom:10px}
  .flow-pills li+li::before{display:none}
  .ev-split{grid-template-columns:1fr}
  .ev-split .shot-phone{max-width:170px}
.gate{padding:14px 16px}.gate-row{gap:12px;margin-top:16px}
  .q{display:flex;gap:10px;padding:18px 18px 16px}.q h3{font-size:var(--fs-h4)}
  .close-row{padding:18px 0}.close-row p{font-size:var(--fs-ui-l)}
  .ch-foot .next{margin-left:0;width:100%}
  .close-row{grid-template-columns:36px minmax(0,1fr);gap:2px 14px}.close-row .ic{width:36px;height:36px}.close-row .ic svg{width:19px;height:19px}.close-row h4{font-size:var(--fs-h4)}
  .teasers{padding:56px 0 16px}.family{padding:40px 0 56px}.fam-grid{grid-template-columns:1fr}
  .demo-grid{padding-top:56px;padding-bottom:56px}
  .form{padding:20px 18px}
  .form-actions .btn{width:100%}
  .foot-grid{gap:28px 18px;padding-top:36px}.foot-grid>div:first-child{grid-column:1/-1}
  .foot-bottom{padding:16px 22px}
}
/* reduced motion: nothing moves, but state changes still show (colour and opacity cross-fades stay, the hero gets a stepper) */
/* the compact chain replaces the diagram when the card is too narrow for it. Measured in em, so larger text switches earlier */
@container (max-width:31em){
  .map{display:none}
  .token,.js .token{display:none}
  .mini{display:block}
  .mini-row{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:14px;--p:0}
  .mini-row::before{content:"";position:absolute;left:10%;right:10%;top:23px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--green) calc(var(--p) * 100%),var(--line-2) 0)}
  .mini .node{position:relative;left:auto;top:auto;transform:none;width:auto;min-width:0;padding:0 1px}
  .mini .sym{--sym:46px;position:relative;z-index:1}
  .mini .lbl{background:none;font-size:var(--fs-meta);letter-spacing:-.035em;margin-top:6px;padding:0;white-space:nowrap}
  .mini-all{display:inline-block;min-height:24px;margin-top:12px;font-size:var(--fs-ui);font-weight:650}
}
/* touch screens and phones: taller rows for the plain text links */
@media (pointer:coarse),(max-width:43.75em){
  .foot-grid a{padding:11px 0;margin-bottom:0}
  .demo-contact{gap:0}.demo-contact a{padding:9px 0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stage-pill.pop{animation:none}
  .token,.row,.sym,.next span,.q,.btn{transition:none}
  .node.is-active .sym,.q:hover,.next:hover span{transform:none}
}
/* AI section: three capabilities in use, two on the roadmap (status as text, not colour alone) */
.ai{padding:76px 0 8px}
.ai-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:end}
.ai-trust{display:grid;gap:10px;justify-items:stretch}
.ai-cert{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--green-line);border-radius:10px;background:var(--green-l);font-size:var(--fs-ui);font-weight:650;color:var(--green-d);max-width:22rem}
.ai-cert svg{flex:none;width:22px;height:22px}
.ai-k{display:flex;align-items:center;gap:8px;margin-top:34px;font-size:var(--fs-meta);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green-d)}
.ai-k::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}
.ai-k-next{color:var(--muted)}.ai-k-next::before{background:transparent;border:2px solid var(--line-ctl);width:6px;height:6px}
.ai-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:14px}
.ai-card{display:flex;flex-direction:column;gap:10px;height:100%;padding:22px 22px 20px;background:var(--paper);border:1px solid var(--line);border-radius:12px;color:inherit;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.ai-card:hover{border-color:var(--green-edge);box-shadow:0 10px 28px -18px var(--shadow)}
.ai-card h3,.ai-next h3{font-size:var(--fs-h4);line-height:1.25;letter-spacing:-.01em;font-weight:700}
.ai-card p,.ai-next p{font-size:var(--fs-ui-l);line-height:1.55}
.ai-ic{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:10px;background:var(--green-l);color:var(--green-d)}
.ai-ic svg{width:22px;height:22px}
.ai-next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:14px}
.ai-next li{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border:1px dashed var(--line-3);border-radius:12px;background:var(--stock)}
.ai-next .ai-ic{background:var(--wash);color:var(--muted)}
.ai-next h3{font-size:var(--fs-body-l)}
.ai-next p{margin-top:4px}
.ai-more{margin-top:22px}.ai-more:empty{display:none}
@media (max-width:67.5em){.ai-head{grid-template-columns:1fr;align-items:start}.ai-trust{justify-items:start}.ai-grid{grid-template-columns:1fr}.ai-card{display:grid;grid-template-columns:auto 1fr;gap:6px 18px}.ai-card .ai-ic{grid-row:1/3}}
@media (max-width:62.5em){.ai-next{grid-template-columns:1fr}}
@media (max-width:43.75em){.ai{padding-top:56px}}
/* working contact form (kontakt.php) */
.field-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.field .req{font-weight:500;color:var(--muted)}
.field input[aria-invalid=true]{border-color:#b42318;outline:2px solid #fbd3cf}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:14px;font-size:var(--fs-ui);font-weight:650;line-height:1.5}.form-status:empty{display:none}
.form-status[data-kind=ok]{color:var(--green-d)}.form-status[data-kind=error]{color:#b42318}.form-status[data-kind=busy]{color:var(--muted)}
@media (max-width:43.75em){.field-two{grid-template-columns:1fr}}