/* =========================================================================
   hueskotech.de — the one stylesheet. Hand-written, variable-driven, no
   framework, no build step (house pattern shared with venedy.io).

   Section order is FIXED. Rule: no @media outside sections 16-17, except the
   two commented component-local exceptions (.hero-split, .docs-layout).

   01 TOKENS          06 NAV               11 DATA
   02 RESET & BASE    07 HERO & SUBHERO    12 EDITORIAL
   03 LAYOUT          08 PILLAR ROWS       13 QUIZ (NIS2)
   04 TYPOGRAPHY      09 CARDS & GRIDS     14 BAND & FOOTER
   05 CONTROLS        10 PEOPLE & PRODUCT  15 MOTION
                                           16 RESPONSIVE  17 REDUCED MOTION
   ========================================================================= */

/* ====================== 01 TOKENS ======================================== */
/* Light page, navy islands. No dark mode by decision — do not add
   prefers-color-scheme here; the island colours ARE the depth mechanism.
   Contrast ratios in comments are against the stated background (WCAG 2.1). */
:root{
  color-scheme:light;

  /* surfaces */
  --bg:#ffffff;
  /* Cream: waermer statt dunkler. Gegen Weiss war der alte Wert #F5F3EF nur
     dE00 3.16 auseinander und las sich beim Scrollen als dieselbe Flaeche.
     #F4F0E4 verdoppelt den Abstand auf dE00 6.34 und haelt die Helligkeit
     (L* 95.89 -> 94.80), Zugewinn kommt aus Chroma (b* 2.15 -> 6.26).
     Nach Helligkeit waere sofort Schluss: bei #F1EDE4 faellt --accent auf
     4.46:1 und reisst AA. Hier: --accent 4.58:1, --muted 5.01:1. */
  --bg-soft:#F4F0E4;               /* cream, was husko-cream */
  --bg-soft-2:#F1EBD8;             /* second warm step: table heads, code chips */

  /* ink on light surfaces */
  --ink:#14263C;                   /* headings, strong        15.30:1 on white */
  --ink-2:#3A4E62;                 /* body copy                8.59:1 on white */
  --muted:#57687D;                 /* meta, captions           5.70:1 on white */

  /* lines */
  --line:#E8E2D2;                  /* aus der neuen Creme abgeleitet, gleiche Helligkeit */
  --line-2:#DAD3BE;

  /* brand */
  --navy:#1E3A5F;                  /* THE brand navy — dark islands */
  --navy-2:#17304F;
  --navy-3:#122840;                /* deepest: code/example blocks */
  --navy-line:#33517A;
  --steel:#3D5A80;                 /* on-island fills, chips */

  --gold:#D4A857;                  /* BRIGHT accent. Surfaces, rules, gradients,
                                      on-navy text (5.22:1). NEVER small text
                                      on white — 2.20:1. */
  --gold-hi:#E5B968;
  --copper:#B87333;
  --copper-hi:#C98444;

  --accent:#98601F;                /* legible bronze: eyebrows, links, icons on
                                      light. 5.21:1 white / 4.70:1 cream */
  --accent-soft:rgba(152,96,31,.10);
  --gold-soft:rgba(212,168,87,.14);

  --on-gold:#0E1A2A;               /* label ON the gold->copper gradient.
                                      4.62:1 even at the copper end. */

  /* ink on navy islands */
  --i-ink:#ffffff;                 /* 11.50:1 on navy */
  --i-ink-2:#C7D6E6;               /*  7.77:1 */
  --i-muted:#A9BFD6;               /*  6.09:1 */

  /* semantic. Die -bg-Werte sind Alpha und gelten nur auf hellem Grund; auf
     Navy scheint sonst der Untergrund durch. Fuer Bausteine, die auf beiden
     Flaechen vorkommen (.flow in .figure--dark), gibt es deckende -tint-Werte
     und dunklere -ink-Varianten fuer die Beschriftung darauf. */
  --ok:#0F7A4A;      --ok-bg:rgba(15,122,74,.10);
  --ok-tint:#EEF6F2; --ok-ink:#0B5C38;        /* 7.34:1 auf ok-tint */
  --warn:#8A6100;    --warn-bg:rgba(138,97,0,.10);
  --critical:#B3261E;--critical-bg:rgba(179,38,30,.09);
  --critical-tint:#FAF2F2; --critical-ink:#8C1D18;   /* 8.27:1 auf critical-tint */
  --info:#1E5F8F;

  /* type */
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --fs-hero:clamp(34px,4.8vw,54px);
  --fs-h1:clamp(30px,3.5vw,42px);
  --fs-h2:clamp(24px,2.7vw,32px);
  --fs-h3:clamp(18px,1.4vw,21px);
  --fs-lede:clamp(17px,1.4vw,18px);
  --fs-body:17px;
  --fs-sm:14.5px;
  --fs-xs:13px;
  --fs-label:12px;

  /* geometry */
  --wrap:1200px;
  --wrap-text:800px;
  --gutter:28px;
  --r:14px; --r-sm:8px; --r-lg:20px;

  /* spacing scale — only these, no ad-hoc pixel values */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  /* Kapitel bleiben deutlich groesser als Komponentengruppen, addieren sich
     an einer Sektionskante aber nicht mehr zu ueber 230px Leerraum. */
  --section-y:clamp(64px,7vw,96px);

  /* motion & elevation */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:.16s; --t:.28s;
  --sh-sm:0 1px 2px rgba(20,38,60,.06);
  --sh:0 10px 28px -12px rgba(20,38,60,.16);
  --sh-lg:0 28px 70px -32px rgba(20,38,60,.30);

  /* focus */
  --focus:#98601F;
  --focus-on-dark:#E5B968;
}

/* ====================== 02 RESET & BASE ================================== */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-behavior:smooth;scroll-padding-top:96px;
}
/* Die Flaeche liegt auf html, nicht auf body: nur so kann body::before mit
   z-index:-1 die Textur darueber legen und trotzdem hinter der Kopie bleiben. */
html{background:var(--bg)}
body{
  margin:0;background:transparent;color:var(--ink-2);
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%;display:block}
button{font:inherit}
/* Fixed opaque colours keep selected text readable inside dark theme scopes. */
::selection{background:#F0D39B;color:#14263C;text-shadow:none}
p,ul,ol,figure{margin:0}
ul,ol{padding:0}

/* global focus — replaces every focus:outline-none of the old build */
:where(a,button,summary,input,textarea,select,[tabindex]):focus{outline:none}
:where(a,button,summary,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:4px;
}
.island :focus-visible,.band :focus-visible,.teaser :focus-visible,
footer :focus-visible,header.nav :focus-visible{outline-color:var(--focus-on-dark)}
/* ...ausser im Mega-Panel, das ein weisses Blatt bleibt. Spezifitaet (0,3,1)
   schlaegt die Zeile darueber (0,2,1). --focus waere auf Navy 2.21:1. */
header.nav .nav-mega-inner :focus-visible{outline-color:var(--focus)}

/* visually hidden (screen-reader only) */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ====================== 03 LAYOUT ======================================== */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap--text{max-width:var(--wrap-text)}

.section{padding:var(--section-y) 0;position:relative}
/* Haarlinie an beiden Raendern: beim Scrollen sind nie beide Flaechen
   gleichzeitig im Blick, es gibt also nichts zu vergleichen. Die Kante macht
   den Uebergang unmissverstaendlich. Zwei --soft folgen nie direkt
   aufeinander, also entsteht kein Doppelrahmen. */
.section--soft{background:var(--bg-soft);
  box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line)}
.section--tight{padding-block:var(--s8)}
.section--rule{border-top:1px solid var(--line)}

/* dark navy island — THE depth mechanism, since there is no dark mode */
.island{
  background:var(--navy);color:var(--i-ink-2);
  padding:var(--section-y) 0;position:relative;overflow:hidden;
}
.island::before{                      /* one soft gold bloom, top-right */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 52% at 92% -6%,
             rgba(212,168,87,.13) 0%,rgba(212,168,87,.03) 44%,transparent 68%);
}
.island .wrap{position:relative;z-index:1}
.island h1,.island h2,.island h3,.island h4{color:var(--i-ink)}
.island .lede{color:var(--i-ink-2)}
.island strong{color:var(--i-ink)}
.island .muted{color:var(--i-muted)}

/* --accent erreicht auf Navy nur 2.21:1, --muted 2.02:1 — beides unlesbar.
   Diese Regeln decken jede Stelle ab, an der eine Insel-Sektion die beiden
   Tokens sonst erben wuerde. */
.island .caps{border-top-color:var(--navy-line)}
.island .cap{border-bottom-color:var(--navy-line)}
.island .cap .k{color:var(--i-ink)}                        /* 11.50:1 */
.island .cap .v{color:var(--i-ink-2)}                      /*  7.77:1 */

/* Inline-Links: es gab bisher KEINE Regel dafuer, a{color:inherit} machte sie
   zu reinem Fliesstext. Auf hell wie auf Navy. */
main p a:not(.btn),.lede a:not(.btn),.cap .v a:not(.btn),.crow .cv a:not(.btn),
.spec-v a:not(.btn),.step p a:not(.btn),.card p a:not(.btn),
.primer a:not(.btn){
  color:var(--accent);border-bottom:1px solid rgba(152,96,31,.32);
}
.island :is(p,.lede,.cap .v,.crow .cv,.spec-v,.step p,.card p,.primer) a:not(.btn){
  color:var(--gold);border-bottom-color:rgba(212,168,87,.38);   /* 5.22:1 */
}
.island .spec{border-top-color:var(--navy-line)}
.island .spec-k{color:var(--i-muted)}
.island .spec-k::after{background:var(--navy-line)}

/* the vertical gold rule mark from the brand sketch */
.rule-mark{
  display:inline-block;width:3px;height:1em;background:var(--gold);
  border-radius:1px;flex:none;translate:0 .1em;
}

/* skip link */
/* Gold-Plakette, nicht navy: der Skip-Link landet bei top:12px AUF der jetzt
   navy Leiste, navy auf navy waere unsichtbar. Gold zur Leiste 5.22:1,
   Label --on-gold darauf 4.62:1. */
.skip{
  position:absolute;left:var(--s4);top:-64px;z-index:200;
  background:var(--gold);color:var(--on-gold);
  font-family:var(--mono);font-size:14px;font-weight:600;
  padding:12px 18px;border-radius:var(--r-sm);
  transition:top var(--t-fast) var(--ease);
}
.skip:focus-visible{top:var(--s3)}

/* ====================== 04 TYPOGRAPHY ==================================== */
h1,h2,h3,h4{
  margin:0;font-family:var(--sans);color:var(--ink);
  font-weight:700;letter-spacing:-.022em;line-height:1.07;
  text-wrap:balance;
}
h1{font-size:var(--fs-h1);font-weight:750;letter-spacing:-.028em;line-height:1.18}
h2{font-size:var(--fs-h2);line-height:1.2}
h3{font-size:var(--fs-h3);letter-spacing:-.012em;line-height:1.25}
h4{font-size:16px;letter-spacing:-.006em}

.lede{
  color:var(--ink-2);font-size:var(--fs-lede);
  line-height:1.55;max-width:62ch;text-wrap:pretty;
}

/* mono kicker above headings. NEVER a heading element — always <p>/<span>. */
.eyebrow{
  display:block;margin:0 0 var(--s4);
  font-family:var(--mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);
}
.island .eyebrow,.band .eyebrow{color:var(--gold)}

/* "Worum es geht": 2-4 Saetze Alltagssprache direkt nach der Lede, bevor der
   erste Fachbegriff faellt. Bewusst NICHT .keybox: die ist die eine Kernaussage
   pro Seite und steht meist am Ende; zwei Gold-Leisten pro Seite und keine
   bedeutet mehr etwas. Der Primer ist ruhiger: linke Haarlinie, kein Kasten. */
.primer{
  max-width:68ch;margin:var(--s5) 0 0;padding:var(--s1) 0 var(--s1) var(--s5);
  border-left:2px solid var(--line-2);
  color:var(--ink-2);font-size:16.5px;line-height:1.68;
}
.primer p+p{margin-top:var(--s3)}
.primer strong{color:var(--ink);font-weight:600}
.island .primer{border-left-color:var(--navy-line);color:var(--i-ink-2)}
.island .primer strong{color:var(--i-ink)}

.section-head{max-width:800px;margin-bottom:var(--s7)}
.section-head .lede{margin-top:var(--s5)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* .mark — gold underline, NOT a gradient text-clip (gold text on white would
   be 2.20:1). Keeps the brand colour, keeps the text at --ink. */
.mark{
  position:relative;color:var(--ink);
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat;
  background-size:100% .16em;
  background-position:0 92%;
  padding-bottom:.04em;
}
.island .mark{color:var(--i-ink)}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;
     letter-spacing:.02em}

/* ====================== 05 CONTROLS ====================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55ch;
  font-family:var(--sans);font-weight:600;font-size:16px;line-height:1;
  padding:15px 26px;border-radius:var(--r-sm);   /* square-ish, not a pill */
  border:1.5px solid transparent;cursor:pointer;text-align:center;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
             background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
.btn-sm{padding:11px 18px;font-size:14.5px}
.btn-block{width:100%}
.btn svg{width:18px;height:18px;flex:none}

/* PRIMARY — the signature gold->copper gradient, preserved exactly.
   Label is --on-gold, not the old #1E3A5F: at #1E3A5F the copper end of the
   gradient is only 3.03:1 and fails AA. */
.btn-gold{
  background:linear-gradient(135deg,var(--gold) 0%,var(--copper) 100%);
  color:var(--on-gold);
}
.btn-gold:hover{
  background:linear-gradient(135deg,var(--gold-hi) 0%,var(--copper-hi) 100%);
  transform:translateY(-2px);
  box-shadow:0 12px 26px -8px rgba(184,115,51,.45);
}
.btn-gold:active{transform:translateY(0)}

.btn-ink{background:var(--navy);color:#fff}
.btn-ink:hover{background:var(--navy-2);transform:translateY(-2px);box-shadow:var(--sh)}

.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}

.island .btn-ghost,.band .btn-ghost,.teaser .btn-ghost{color:#fff;border-color:rgba(255,255,255,.34)}
.island .btn-ghost:hover,.band .btn-ghost:hover,.teaser .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.btn-on-dark{background:#fff;color:var(--navy)}
.btn-on-dark:hover{background:var(--bg-soft);transform:translateY(-2px);
                   box-shadow:0 12px 26px rgba(0,0,0,.28)}

.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none;transform:none}

.badge{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  padding:6px 11px;border-radius:5px;
  color:var(--accent);background:var(--accent-soft);
}
.badge--ok{color:var(--ok);background:var(--ok-bg)}
.badge--warn{color:var(--warn);background:var(--warn-bg)}
.badge--crit{color:var(--critical);background:var(--critical-bg)}
.island .badge{color:var(--gold);background:rgba(212,168,87,.14)}

.chip{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:500;color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:999px;padding:8px 15px;background:#fff;
}
.chip b{color:var(--ink);font-weight:600}
.island .chip{background:var(--navy-2);border-color:var(--navy-line);color:var(--i-ink-2)}

.tag{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
}

/* form fields (contact / quiz email) */
input[type="text"],input[type="email"],textarea{
  width:100%;font:inherit;color:var(--ink);
  background:#fff;border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  padding:13px 15px;
}
input:focus-visible,textarea:focus-visible{outline-offset:0;border-color:var(--accent)}

/* ====================== 06 NAV =========================================== */
/* Die Leiste ist IMMER navy, es gibt keinen header.nav--dark-Modifier: der
   Markenton soll auf jeder Seite oben stehen, inklusive der beiden
   Rechtsseiten, die sonst ausser dem Footer keinen Navy-Pixel haben.
   Deckend statt transluzent: bei rgba(navy,.92) ueber hellem Inhalt rendert
   die Leiste als #304A6C, --gold faellt dort auf 4.11:1 und reisst AA fuer
   den 12,5px-Sprachumschalter. Deckend sind es 5.22:1. Mit dem Alpha
   entfaellt auch backdrop-filter, also eine komponierte Ebene pro Frame. */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:var(--navy);
  border-bottom:1px solid transparent;
  transition:background var(--t),border-color var(--t),box-shadow var(--t);
}
header.nav.scrolled{
  background:var(--navy-2);
  border-bottom-color:var(--navy-line);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.55);
}

.nav-inner{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:var(--s6);height:72px;
}
.brand{display:inline-flex;align-items:center;gap:var(--s3)}
/* The signature rule shares the wordmark's 20px box, without the baseline
   offset used by inline labels elsewhere. */
.brand .rule-mark{height:20px;translate:none;border-radius:0}
.wm{
  font-weight:800;font-size:20px;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--ink);line-height:1;
}
/* gold on white is 2.20:1 — the light-surface wordmark uses copper instead.
   Auf Navy erreicht Gold 5.22:1, die Leiste nimmt darum dasselbe Paar wie
   Band und Footer. Selektor erweitert, keine neue Farbe. */
.wm-t{color:var(--copper)}
header.nav .wm,.island .wm,.band .wm,footer .wm{color:#fff}                 /* 11.50:1 */
header.nav .wm-t,.island .wm-t,.band .wm-t,footer .wm-t{color:var(--gold)}  /*  5.22:1 */

.nav-links{display:flex;align-items:center;justify-content:center;gap:var(--s2);height:100%}
.nav-links>a,.nav-drop>a{
  position:relative;display:inline-flex;align-items:center;min-height:44px;
  font-size:15px;font-weight:500;color:var(--i-ink-2);   /* 7.77:1 auf navy */
  padding:10px 12px;border-radius:var(--r-sm);white-space:nowrap;
  transition:color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
/* > ist tragend: ohne Kombinator faerbt die Hover-Regel auch .nmega-all im
   WEISSEN Mega-Panel weiss auf weiss (.nmega-all hat keinen eigenen Hover). */
.nav-links>a:hover,.nav-drop>a:hover,
.nav-links>a:focus-visible,.nav-drop>a:focus-visible,.nav-drop.is-open>a{
  color:#fff;background:rgba(255,255,255,.09);box-shadow:inset 0 -2px 0 var(--gold);
}
.nav-links>a[aria-current],.nav-drop>a[aria-current],.nav-drop>a.is-current-section{
  color:var(--gold);background:rgba(212,168,87,.10);
  box-shadow:inset 0 -2px 0 var(--gold);
}

.nav-right{display:flex;align-items:center;gap:var(--s4)}
.lang{font-family:var(--mono);font-size:12.5px;color:var(--i-muted);letter-spacing:.04em}
.lang .on{color:#fff;font-weight:500}                                       /* 11.50:1 */
.lang a:hover{color:var(--gold)}   /* 5.22:1 — --accent waere hier 2.21:1 */

.nav-toggle{
  display:none;background:none;
  border:1px solid rgba(255,255,255,.40);  /* = #78899F, 3.22:1 zu navy, WCAG 1.4.11 */
  border-radius:var(--r-sm);width:44px;height:40px;
  color:#fff;cursor:pointer;align-items:center;justify-content:center;
  transition:border-color var(--t-fast),background var(--t-fast);
}
.nav-toggle:hover{border-color:#fff;background:rgba(255,255,255,.08)}

.mobile-menu{
  flex-direction:column;
  padding:var(--s3) var(--gutter) var(--s5);
  border-top:1px solid var(--navy-line);background:var(--navy);
  max-height:calc(100vh - 72px);overflow-y:auto;overscroll-behavior:contain;
}
.mobile-menu[hidden]{display:none}
.mobile-menu:not([hidden]){display:flex}
.mobile-menu a:not(.btn){
  padding:13px 0;color:var(--i-ink-2);font-size:16px;font-weight:500;   /* 7.77:1 */
  border-bottom:1px solid var(--navy-line);
}
.mobile-menu a:not(.btn):hover{color:#fff}
.mobile-menu a:not(.btn)[aria-current],.mobile-menu summary.is-current-section{
  color:var(--gold);box-shadow:inset 3px 0 0 var(--gold);padding-left:var(--s3);
  background:rgba(212,168,87,.08);
}
.mobile-menu .btn{margin-top:var(--s4)}
/* nested groups in the mobile menu: native <details>, no JS */
.mobile-menu details{border-bottom:1px solid var(--navy-line)}
.mobile-menu summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;padding:13px 0;
  font-size:16px;font-weight:600;color:#fff;
}
.mobile-menu summary::-webkit-details-marker{display:none}
.mobile-menu summary svg{transition:transform var(--t-fast) var(--ease);color:var(--i-muted)}
.mobile-menu details[open]>summary svg{transform:rotate(90deg)}
/* :not(.btn) ist noetig: .mobile-menu details a (0,1,2) verliert sonst gegen
   .mobile-menu a:not(.btn) (0,2,1) — bisher griffen Einrueckung, Schriftgroesse
   und das Entfernen der Trennlinie im Untermenue gar nicht. */
.mobile-menu details a:not(.btn){
  border-bottom:none;padding:9px 0 9px var(--s4);font-size:15px;color:var(--i-muted);
}
.mobile-menu details a:not(.btn):hover{color:#fff}

/* Native hover/focus fallback; with JS, Escape and ARIA share .is-open. */
/* Anchor the panel to the header so it stays inside the viewport. The full
   header-height trigger keeps a continuous pointer path into the panel. */
.nav-drop{position:static;display:inline-flex;align-items:center;align-self:stretch}
.nav-mega{
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(4px);
  width:min(880px,calc(100vw - 40px));
  padding-top:14px;z-index:70;
  opacity:0;visibility:hidden;
  /* Visibility changes immediately so ArrowDown can focus the first link. */
  transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
html:not(.js) .nav-drop:hover .nav-mega,
html:not(.js) .nav-drop:focus-within .nav-mega,
.nav-drop.is-open .nav-mega{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.nav-mega-inner{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5) var(--s6);
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r);
  padding:var(--s5) var(--s6);box-shadow:var(--sh-lg);
}
.nmega-h{
  display:block;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin-bottom:var(--s2);
}
.nmega-col a{display:block;font-size:14.5px;color:var(--ink-2);padding:5px 0;font-weight:500}
.nmega-col a:hover{color:var(--accent)}
.nmega-foot{grid-column:1/-1;border-top:1px solid var(--line);padding-top:var(--s3)}
.nmega-all{font-size:13.5px;font-weight:600;color:var(--accent);font-family:var(--mono)}

/* ====================== 07 HERO & SUBHERO ================================ */
/* Die Leiste darueber ist jetzt deckend navy, die ersten 72px dieser
   Hintergruende sind also verdeckt. Beide Radial-Zentren sind darum in px
   verankert und liegen frei: das alte `at 96% -12%` lag AUSSERHALB des
   Viewports, gerendert wurde nur die Flanke (~10 % Alpha, 3 Stufen von Weiss).
   Spitzen-Alpha .20 ist die AA-Decke: bei .21 mischt sich #F6EDDC und
   --accent faellt auf 4.485:1, unter AA fuer die .eyebrow, die auf Mobile
   darunter liegt. */
.hero{
  /* Der Hero endet als eigenes Kapitel. 96px bis zur folgenden Eyebrow
     verhindern, dass Leistungen wie eine Fortsetzung der CTA-Zeile wirken. */
  padding:calc(72px + var(--s9)) 0 var(--s9);
  position:relative;overflow:hidden;
  background:
    radial-gradient(760px 560px at 86% 210px,
      rgba(212,168,87,.20) 0%,rgba(212,168,87,.09) 44%,transparent 72%),
    radial-gradient(520px 460px at -4% 40px,rgba(30,58,95,.10),transparent 66%);
}

/* Schematischer Grund: CAD-Haarlinienraster mit Fadenkreuzen, per Maske
   ausgeblendet, bevor es die Kopie erreicht. Inline-data-URI, kein Request,
   kein LCP-Bild. Kachel 96px, Kreuze bei 48px = Zellmitte. */
.hero::before,.subhero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M48 41v14M41 48h14' fill='none' stroke='%231E3A5F' stroke-opacity='.20' stroke-width='1'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg,rgba(30,58,95,.075) 0 1px,transparent 1px 96px),
    repeating-linear-gradient(180deg,rgba(30,58,95,.075) 0 1px,transparent 1px 96px);
  -webkit-mask-image:radial-gradient(72% 88% at 94% 0%,#000 0%,rgba(0,0,0,.5) 46%,transparent 78%);
          mask-image:radial-gradient(72% 88% at 94% 0%,#000 0%,rgba(0,0,0,.5) 46%,transparent 78%);
}
/* .hero .wrap fehlte bisher — ohne das liegt die Kopie unter dem Raster */
.hero .wrap,.subhero .wrap{position:relative;z-index:1}
.hero-tagline{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin-bottom:var(--s7);
}
.hero-split{
  display:grid;grid-template-columns:minmax(190px,.30fr) 1fr;
  gap:var(--s8);align-items:start;
}
.hero-rail{
  display:flex;flex-direction:column;
  border-right:1px solid var(--line);
  padding-right:var(--s6);padding-top:var(--s2);
}
.hrail{
  display:flex;align-items:baseline;gap:var(--s3);
  padding:var(--s4) 0;border-bottom:1px solid var(--line);
  transition:padding-left var(--t) var(--ease);
}
.hrail:first-child{border-top:1px solid var(--line)}
.hrail:hover{padding-left:6px}
.hrail-n{
  font-family:var(--mono);font-size:13px;font-weight:600;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.hrail-t{
  font-family:var(--mono);font-size:15px;font-weight:500;
  letter-spacing:.10em;color:var(--ink);
}
.hrail:hover .hrail-t{color:var(--accent)}
/* Scroll-Spy: markiert, an welcher der drei Ebenen der Leser gerade steht.
   Ohne JS bleibt die Rail eine normale Sprungmarkenliste. */
/* Stationsanzeige: derselbe Knotenglyph wie auf der Scroll-Spur, damit oben
   die Legende und links die Skala als EIN Instrument lesbar sind. Gefuellt
   heisst "war schon dran" und wird nie zurueckgenommen. align-self ist
   zwingend, weil .hrail auf align-items:baseline steht. */
.hrail::before{
  content:"";flex:none;align-self:center;width:7px;height:7px;border-radius:50%;
  border:1.25px solid var(--line-2);background:var(--bg);
  transition:background var(--t),border-color var(--t);
}
.hrail.is-done::before{background:var(--accent);border-color:var(--accent)}
/* Der gefuellte Ring darf nie alleiniger Traeger von "aktiv" sein. */
.hrail.is-active{box-shadow:inset 2px 0 0 var(--gold)}
.hrail.is-active .hrail-n,.hrail.is-active .hrail-t{color:var(--accent)}

.hero-copy h1{font-size:var(--fs-hero);line-height:1.06;max-width:21ch}
.hero-copy .lede{margin-top:var(--s5)}
.hero-meta{
  margin-top:var(--s5);font-family:var(--mono);font-size:14px;
  letter-spacing:.06em;color:var(--muted);
}
.hero-cta{display:flex;gap:var(--s3);margin-top:var(--s6);flex-wrap:wrap}
.hero--consulting .hero-copy h1{max-width:22ch}
.hero--consulting .hero-meta{margin-top:var(--s5)}
/* Enterprise home: a text-based architecture figure explains the relationship
   between services. The shared gold bracket spans all layers. */
.hero--enterprise{padding-bottom:var(--s8)}
.hero--enterprise .hero-tagline{margin-bottom:var(--s6)}
.hero--enterprise .enterprise-split{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s7);align-items:start}
.hero--enterprise .hero-copy h1{font-size:clamp(34px,3.8vw,50px);line-height:1.16;letter-spacing:-.035em}
.hero--enterprise .hero-copy .lede{max-width:52ch}
.hero--enterprise .hero-meta{font-size:12px;letter-spacing:.01em}
.architecture-map{margin:0;padding:var(--s5);background:var(--navy);border:1px solid var(--navy-line);border-radius:var(--r-sm);color:var(--i-ink)}
.architecture-map figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--i-muted)}
.architecture-hint{font-size:12px;color:var(--i-ink-2);margin:var(--s2) 0 var(--s5)}
.architecture-system{position:relative;padding-left:var(--s5)}
.architecture-system::before{
  content:"";position:absolute;inset:0 auto 0 0;width:var(--s3);
  border:1px solid var(--gold);border-right:0;border-radius:var(--r-sm) 0 0 var(--r-sm);
  pointer-events:none;
}
.architecture-system::after{
  content:"";position:absolute;left:0;top:var(--scope-y,0px);height:var(--scope-height,0px);
  width:2px;border-radius:2px;background:var(--gold-hi);pointer-events:none;
  box-shadow:0 0 9px rgba(212,168,87,.55);opacity:0;transition:opacity var(--t);
}
.architecture-system.has-active-layer::after{opacity:1}
.architecture-layers{display:grid;gap:var(--s4);list-style:none}
.architecture-step{position:relative;min-width:0}
.architecture-step+.architecture-step::before,.architecture-step+.architecture-step::after{
  content:"";position:absolute;left:var(--s5);top:calc(-1 * var(--s4));height:var(--s4);
  width:1px;background:var(--navy-line);pointer-events:none;
}
.architecture-step+.architecture-step::after{background:var(--gold);opacity:0;transform-origin:top}
.architecture-step.is-exploring::after,.architecture-step.is-exploring+.architecture-step::after{
  animation:architecture-flow .7s var(--ease) both;
}
.architecture-layer{border:1px solid var(--navy-line);background:var(--navy-2);border-radius:var(--r-sm);transition:background var(--t),border-color var(--t),box-shadow var(--t)}
.architecture-trigger{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:var(--s3);padding:var(--s4);list-style:none;cursor:pointer;border-radius:inherit}
.architecture-trigger::-webkit-details-marker{display:none}
.architecture-toggle{position:relative;width:12px;height:12px;margin-top:var(--s1);color:var(--gold)}
.architecture-toggle::before,.architecture-toggle::after{content:"";position:absolute;background:currentColor;border-radius:1px}
.architecture-toggle::before{width:10px;height:1px;left:1px;top:5px}
.architecture-toggle::after{width:1px;height:10px;left:5px;top:1px;transition:transform var(--t)}
.architecture-layer[open] .architecture-toggle::after{transform:rotate(90deg)}
.architecture-step.is-exploring .architecture-layer,.architecture-layer[open],.architecture-layer:focus-within{
  background:var(--navy);border-color:var(--i-muted);box-shadow:0 0 0 1px rgba(169,191,214,.12),0 0 22px -12px rgba(169,191,214,.55);
}
.architecture-map :is(summary,a):focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.architecture-number{font-family:var(--mono);font-size:11px;color:var(--gold)}
.architecture-layer strong,.architecture-foundation strong{display:block;color:var(--i-ink);font-size:16px;line-height:1.4;font-weight:600}
.architecture-layer small,.architecture-foundation small{display:block;color:var(--i-ink-2);font-size:12px;line-height:1.5;margin-top:var(--s1)}
.architecture-foundation{margin-top:var(--s5)}
.architecture-foundation strong{color:var(--gold);font-size:14px}
.architecture-foundation small{min-height:3em}
.architecture-panel{padding:0 var(--s4) var(--s4);border-radius:0 0 var(--r-sm) var(--r-sm)}
.architecture-panel h3{padding-top:var(--s4);border-top:1px solid var(--navy-line);color:var(--i-ink);font-size:14px;line-height:1.5}
.architecture-panel p{margin-top:var(--s2);color:var(--i-ink-2);font-size:13px;line-height:1.65}
.architecture-links{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);margin-top:var(--s4)}
.architecture-links a{color:var(--gold);font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.architecture-links a:hover{color:var(--gold-hi)}
.launch-aside{margin-top:var(--s5);font-size:var(--fs-sm);color:var(--muted)}
.launch-aside a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.wrap--text>p+p{margin-top:var(--s4)}

/* deliberate component-local exception: the rail flips horizontal early */
@media (max-width:900px){
  .hero{padding:calc(72px + var(--s7)) 0 var(--s8)}
  .hero-split{grid-template-columns:1fr;gap:var(--s6)}
  .hero-rail{
    flex-direction:row;border-right:none;border-bottom:1px solid var(--line);
    padding-right:0;padding-bottom:var(--s2);gap:var(--s5);
    overflow-x:auto;scrollbar-width:none;
  }
  .hero-rail::-webkit-scrollbar{display:none}
  .hrail{border:none;padding:var(--s2) 0;flex:none}
  .hrail:first-child{border-top:none}
  .hero-copy h1{max-width:none}
}

.subhero{
  padding:calc(72px + var(--s8)) 0 var(--section-y);
  border-bottom:1px solid var(--line);position:relative;overflow:hidden;
  background:radial-gradient(620px 420px at 88% 150px,
    rgba(212,168,87,.19) 0%,rgba(212,168,87,.06) 46%,transparent 74%);
}
.subhero h1{max-width:28ch}
.subhero .lede{margin-top:var(--s6);max-width:62ch}
.subhero .hero-cta{margin-top:var(--s6)}

.breadcrumb{
  font-family:var(--mono);font-size:12.5px;color:var(--muted);
  margin-bottom:var(--s4);letter-spacing:.02em;
}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb [aria-current]{color:var(--ink-2)}

/* ====================== 08 PILLAR ROWS =================================== */
.capability-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line-2);border-left:1px solid var(--line-2)}
.capability{
  --cap-surface:var(--bg);--cap-title:var(--ink);--cap-copy:var(--ink-2);
  --cap-accent:var(--accent);--cap-muted:var(--muted);--cap-line:var(--line-2);
  min-width:0;display:flex;flex-direction:column;background:var(--cap-surface);
  padding:var(--s6);border-right:1px solid var(--cap-line);border-bottom:1px solid var(--cap-line);
  scroll-margin-top:var(--s9);transition:background-color var(--t),border-color var(--t);
}
.capability:focus-within{
  --cap-surface:var(--navy);--cap-title:var(--i-ink);--cap-copy:var(--i-ink-2);
  --cap-accent:var(--gold);--cap-muted:var(--i-muted);--cap-line:var(--navy-line);
}
.capability :is(h3,p,a,span){transition:color var(--t)}
.capability :focus-visible{outline-color:var(--cap-accent)}
.capability-index{display:flex;gap:var(--s3);align-items:baseline;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--cap-accent);margin-bottom:var(--s5)}
.capability-index span{flex:none;color:var(--cap-muted);font-variant-numeric:tabular-nums}
.capability h3{font-size:21px;line-height:1.3;max-width:30ch;letter-spacing:-.02em;color:var(--cap-title)}
.capability>p:not(.capability-index){font-size:15px;line-height:1.65;color:var(--cap-copy);margin-top:var(--s4)}
.capability>p.capability-meta{font-family:var(--mono);font-size:11px;color:var(--cap-muted);margin-top:auto;padding-top:var(--s5)}
.capability-links{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);padding-top:var(--s4)}
.capability-links a,.digital-extension .more{font-size:13px;color:var(--cap-accent,var(--accent));font-weight:600;text-decoration:underline;text-underline-offset:4px}
.digital-extension{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:start}
.digital-extension h2{font-size:var(--fs-h3);line-height:1.4;max-width:32ch}
.digital-extension p{font-size:15px;color:var(--ink-2);line-height:1.65}
.digital-extension .eyebrow{color:var(--accent);font-size:var(--fs-label)}
.digital-extension .more{display:inline-block;margin-top:var(--s4)}
.proof-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s7);align-items:center}
.proof-layout>.section-head{margin-bottom:0}
.proof-feature{padding:var(--s6);border:1px solid var(--navy-line);border-left:2px solid var(--gold);background:var(--navy-2);border-radius:var(--r-sm)}
.proof-feature h3{font-size:clamp(22px,2vw,28px);max-width:26ch;margin-top:var(--s5);color:var(--i-ink)}
.proof-feature>p{margin-top:var(--s4);font-size:16px;line-height:1.7;color:var(--i-ink-2)}
.proof-stack{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--navy-line)}
.proof-stack dt{font-family:var(--mono);font-size:11px;color:var(--i-muted)}
.proof-stack dd{margin:var(--s2) 0 0;color:var(--i-ink);font-size:14px}
.proof-feature .more{display:inline-block;margin-top:var(--s5);font-size:14px;color:var(--gold);text-decoration:underline;text-underline-offset:4px}
.competence-matrix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s7)}
.competence-matrix>div{border-top:1px solid var(--navy-line);padding-top:var(--s4)}
.competence-matrix dt{font-family:var(--mono);font-size:12px;color:var(--gold)}
.competence-matrix dd{margin:var(--s3) 0 0;color:var(--i-ink);font-size:17px;line-height:1.7}
.prows{padding-block:0;border-top:1px solid var(--line)}
.prow{
  display:grid;
  grid-template-columns:auto 56px 1fr auto;
  align-items:center;gap:var(--s4);
  max-width:var(--wrap);margin:0 auto;
  padding:var(--s7) var(--gutter);
  border-bottom:1px solid var(--line);
  position:relative;
  transition:background var(--t) var(--ease);
  scroll-margin-top:96px;
}
/* gold wipe on hover — the island colour used as a light-surface accent */
.prow::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(212,168,87,.10),rgba(212,168,87,0) 62%);
  opacity:0;transition:opacity var(--t) var(--ease);
}
.prow:hover::before,.prow:focus-visible::before{opacity:1}

.prow-n{
  position:relative;z-index:1;
  font-family:var(--mono);font-weight:600;
  font-size:clamp(20px,2.4vw,30px);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  color:var(--accent);line-height:1;
}
.prow-rule{
  position:relative;z-index:1;height:1px;background:var(--line-2);
  transition:background var(--t) var(--ease),transform var(--t) var(--ease);
  transform-origin:left;
}
/* Die Kette schliesst sich: gelesene Ebenen behalten Kante und bronzene
   Linie. Bewusst ADDITIV, der Ausgangszustand haengt an keinem Skript. */
.prow.is-live{box-shadow:inset 2px 0 0 var(--accent)}
.prow.is-done .prow-rule{background:var(--accent)}
.prow:hover .prow-rule{background:var(--gold);transform:scaleX(1.12)}

/* Das Zeichnen laeuft rein deklarativ ueber die Scroll-Zeitachse, ohne JS.
   Die Startzustaende stehen AUSSCHLIESSLICH im @supports-Block: ohne ihn
   waere die Linie in Engines ohne view() unsichtbar. Einzeleigenschaft scale
   statt transform, damit sie mit dem transform der Hover-Regel komponiert
   statt sie zu ueberschreiben. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .prow .prow-rule{
      scale:0 1;animation:rule-in linear both;
      animation-timeline:view();animation-range:entry 20% cover 40%;
    }
    @keyframes rule-in{to{scale:1 1}}
  }
}

.prow-body{position:relative;z-index:1;min-width:0}
.prow-t{
  display:block;font-family:var(--mono);font-weight:600;
  font-size:clamp(19px,2.1vw,26px);letter-spacing:.06em;
  color:var(--ink);line-height:1.1;
}
.prow-sub{
  display:block;margin-top:var(--s2);
  font-size:var(--fs-h3);font-weight:700;color:var(--ink);letter-spacing:-.012em;
}
.prow-d{
  display:block;margin-top:var(--s3);
  color:var(--ink-2);font-size:var(--fs-sm);line-height:1.55;max-width:66ch;
}
.prow-meta{
  display:block;margin-top:var(--s3);
  font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--muted);
}
.prow-arr{
  position:relative;z-index:1;color:var(--muted);flex:none;
  transition:transform var(--t) var(--ease),color var(--t) var(--ease);
}
.prow:hover .prow-arr{transform:translateX(6px);color:var(--accent)}

/* ====================== 09 CARDS & GRIDS ================================= */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.engagement-grid .card{display:flex;flex-direction:column;
  --edge-bright:var(--i-muted);--edge-colour:var(--steel);--edge-rgb:61,90,128}
/* A narrow light follows the pointer along the edge; the reading surface stays calm. */
.card,.step{--edge-bright:#F0D39B;--edge-colour:var(--gold);--edge-rgb:212,168,87}
.card::after,.step::after{
  content:"";position:absolute;inset:-1px;padding:2px;border-radius:inherit;
  pointer-events:none;opacity:0;transition:opacity var(--t) var(--ease);
  background:radial-gradient(240px circle at var(--card-x,50%) var(--card-y,0px),
    var(--edge-bright),var(--edge-colour) 35%,rgba(var(--edge-rgb),.08) 75%,transparent);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.card:focus-within,.step:focus-within{
  border-color:var(--edge-colour);
  box-shadow:0 0 0 1px rgba(var(--edge-rgb),.3),0 0 20px rgba(var(--edge-rgb),.3),0 10px 24px -14px rgba(var(--edge-rgb),.5);
}
.card:focus-within::after,.step:focus-within::after{opacity:1}
.engagement-grid .card .eyebrow{margin:0 0 var(--s4);color:var(--accent)}
.engagement-grid .card .more{margin-top:auto;padding-top:var(--s5)}
.card{
  position:relative;display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s6) var(--s5);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
a.card:hover{border-color:var(--gold);box-shadow:var(--sh);transform:translateY(-3px)}
/* Die Marken-Icons sind gezeichnete Illustrationen, keine Strichpiktogramme:
   bei 28 px in einer 44er-Kachel fiel ihre Binnenzeichnung zusammen. 40 px in
   einer 60er-Kachel ist die Groesse, ab der sie sich zuverlaessig lesen. */
.card .ic{
  width:60px;height:60px;border-radius:12px;
  background:var(--bg-soft);border:1px solid var(--line);
  display:grid;place-items:center;margin-bottom:var(--s4);color:var(--accent);
}
.card .ic svg{width:26px;height:26px;stroke:currentColor;fill:none}
.card .ic img{width:40px;height:40px}
.card h3{font-size:var(--fs-h3)}
.card p{margin-top:var(--s2);color:var(--ink-2);font-size:var(--fs-sm);line-height:1.55}
.card .more{
  display:inline-block;margin-top:var(--s3);
  font-family:var(--mono);font-size:12.5px;color:var(--accent);
}
/* Kurze Expertise-Karten sind eine zusammengehoerige Auswahl, keine sechs
   eigenstaendigen Kapitel: kompaktere Zeilen und 24px Innenraum. Flex haelt
   die Handlungslinks trotz unterschiedlicher Textlaenge auf einer Grundlinie. */
.expertise-grid{row-gap:var(--s4)}
.expertise-grid .card{
  display:flex;flex-direction:column;
  padding-block:var(--s5);
}
.expertise-grid .more{margin-top:auto;padding-top:var(--s3)}
.island .card{background:var(--navy-2);border-color:var(--navy-line)}
.island .card h3{color:var(--i-ink)}
.island .card p{color:var(--i-ink-2)}
/* Brand-Icons bleiben Bronze auf Weiss, auch auf der Insel: die Kachel wird
   weiss statt creme, das Icon selbst bleibt unangetastet. */
.island .card .ic{background:#fff;border-color:transparent}
.island .card .more,.island .tag{color:var(--gold)}   /* --accent waere 2.21:1 */

/* checklist — replaces the old lucide check icons */
.checks{list-style:none;margin:var(--s4) 0 0;padding:0}
.checks li{
  position:relative;padding:7px 0 7px 26px;
  color:var(--ink-2);font-size:var(--fs-sm);line-height:1.5;
}
/* Haken statt Quadrat: ICON_AUDIT hat die quadratischen Marker mit 3/5
   bewertet, weil sie nicht als "erfuellt" lesbar sind. Solange die Klasse
   ungenutzt war, spielte das keine Rolle; auf der Karriere-Seite steht sie
   jetzt unter "Was wir bieten", also greift der Befund. Reines CSS, zwei
   Kanten gedreht, kein Bild und kein Zeichen aus der Schrift. */
.checks li::before{
  content:"";position:absolute;left:1px;top:11px;
  width:10px;height:6px;border-radius:1px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.island .checks li::before{border-color:var(--gold)}   /* 2.21:1 waere zu wenig */

/* expertise/service page: mono key + long-form value.
   Einspaltig: der Schluessel ist ein einzelnes Wort, in der alten 266px-Spalte
   liess er ein Loch von Labelbreite neben 830px Kopie stehen. Die Linie hinter
   dem Label uebernimmt die Trennfunktion der leeren Spalte. .spec-v war
   ausserdem ~104 Zeichen breit, Ziel sind 45-75. */
.spec{display:block;padding:var(--s7) 0;border-top:1px solid var(--line)}
.spec-k{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
  margin-bottom:var(--s5);
}
.spec-k::before{content:"";width:3px;height:.95em;background:var(--gold);
                border-radius:1px;flex:none}          /* dieselbe Marke wie .rule-mark */
.spec-k::after{content:"";flex:1;height:1px;background:var(--line)}
.spec-v{max-width:74ch}
.spec-v>p{color:var(--ink-2);font-size:16px;line-height:1.7}
.spec-v>p+p{margin-top:var(--s4)}
.spec-v h3{margin-bottom:var(--s2)}
.spec-v h3+p{margin-bottom:var(--s5)}

/* capability rows: label/value pairs, no chip rows */
.caps{border-top:1px solid var(--line)}
.cap{display:grid;grid-template-columns:minmax(180px,.3fr) 1fr;gap:var(--s5);
     padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.cap .k{font-weight:600;color:var(--ink);font-size:15px}
.cap .v{color:var(--ink-2);font-size:var(--fs-sm);line-height:1.6}
/* bare example paragraph directly after a caps list (expertise pages):
   p has margin:0 in the reset and would touch the last hairline */
.caps+p{margin-top:var(--s5);max-width:74ch}

/* numbered steps (counter mechanism) */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5);counter-reset:step}
.step{
  position:relative;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s6) var(--s6) var(--s6) 70px;
  transition:border-color var(--t),box-shadow var(--t);
}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;left:var(--s6);top:calc(var(--s6) + 3px);
  font-family:var(--mono);font-size:13px;font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.step h3{font-size:17px}
.step p{margin-top:var(--s2);color:var(--ink-2);font-size:var(--fs-sm);line-height:1.55}
.section--soft .step,.island .step{background:#fff}
.island .step{background:var(--navy-2);border-color:var(--navy-line)}
.island .step h3{color:var(--i-ink)}
.island .step p{color:var(--i-ink-2)}
.island .step::before{color:var(--gold)}   /* der Zaehler, war --accent = 2.21:1 */

/* technology grid — text, not logos (trademark + design decision) */
.tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6)}
.tech-h{
  display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
  padding-bottom:var(--s3);border-bottom:1px solid var(--line);margin-bottom:var(--s3);
}
.tech-list{list-style:none;margin:0;padding:0}
.tech-list li{
  font-family:var(--mono);font-size:14.5px;color:var(--ink);
  padding:8px 0;border-bottom:1px solid var(--line);letter-spacing:.01em;
}
.tech-list li:last-child{border-bottom:none}
.island .tech-h{color:var(--i-muted);border-bottom-color:var(--navy-line)}
.island .tech-list li{color:var(--i-ink);border-bottom-color:var(--navy-line)}
.island .tech-note{color:var(--i-muted)}   /* 6.09:1, war --muted = 2.02:1 */
.tech-note{
  margin-top:var(--s6);font-size:12.5px;line-height:1.6;color:var(--muted);max-width:70ch;
}

/* workshop cards */
.wsx{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.ws{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
a.ws:hover{border-color:var(--gold);box-shadow:var(--sh);transform:translateY(-3px)}
.ws-head{
  padding:var(--s5) var(--s5) var(--s4);
  background:var(--bg-soft);border-bottom:1px solid var(--line);
}
.ws-meta{
  display:flex;gap:var(--s4);flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2);
}
.ws-head h3{font-size:18px}
.ws-body{padding:var(--s5);flex:1}
.ws-body p{color:var(--ink-2);font-size:var(--fs-sm);line-height:1.6}
.ws-foot{
  padding:var(--s4) var(--s5);border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
}
.ws-foot .more{font-family:var(--mono);font-size:12.5px;color:var(--accent)}

/* ====================== 10 PEOPLE & PRODUCT ============================== */
.founder-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}
.founder-card{
  display:flex;flex-direction:column;min-width:0;overflow:hidden;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg);
  scroll-margin-top:var(--s9);
}
/* Existing photographs, presented in a complete frame. Larger source files
   cover the crop at high pixel densities without additional CSS scaling. */
.founder-visual{
  display:flex;justify-content:center;position:relative;overflow:hidden;
  padding:var(--s6);
  background:radial-gradient(ellipse at 50% 40%,rgba(61,90,128,.4),transparent 72%),var(--navy-2);
}
.founder-visual::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 27v10M27 32h10' fill='none' stroke='%23D4A857' stroke-opacity='.28'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg,rgba(169,191,214,.08) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(180deg,rgba(169,191,214,.08) 0 1px,transparent 1px 64px);
  opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 42%,transparent 58%,#000);
          mask-image:linear-gradient(90deg,#000,transparent 42%,transparent 58%,#000);
}
.founder-visual::after{
  content:"";position:absolute;inset:var(--s5);pointer-events:none;
  border-top:1px solid var(--navy-line);border-bottom:1px solid var(--navy-line);
  background:linear-gradient(var(--gold),var(--gold)) left top/var(--s6) 1px no-repeat,
             linear-gradient(var(--gold),var(--gold)) right bottom/var(--s6) 1px no-repeat;
}
.founder-portrait{
  position:relative;z-index:1;width:min(100%,256px);aspect-ratio:4/5;overflow:hidden;
  border:1px solid var(--navy-line);border-radius:var(--r-sm);
  background:var(--navy-3);box-shadow:0 16px 40px rgba(0,0,0,.24);
}
.founder-portrait picture{display:block;width:100%;height:100%}
.founder-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 24%}
.founder-story{display:flex;flex:1;flex-direction:column;padding:var(--s6)}
.founder-story h3{font-size:24px;text-align:center;margin-bottom:var(--s5)}
.founder-story p{font-size:15px;line-height:1.75;color:var(--ink-2)}
.founder-story .founder-milestone{margin-top:var(--s5);padding-left:var(--s4);border-left:2px solid var(--gold)}
.founder-link{
  display:inline-flex;align-items:center;align-self:center;gap:var(--s2);
  margin-top:auto;padding:var(--s5) var(--s2) 0;font-size:14px;font-weight:600;
  color:var(--accent);text-decoration:underline;text-underline-offset:4px;
}
.founder-link:hover{color:var(--ink)}
.founder-link svg{width:18px;height:18px}

/* Project experience is presented as aggregated fields of technical work. */
.experience-list{list-style:none;border-top:1px solid var(--line-2)}
.experience-entry{
  display:grid;grid-template-columns:var(--s7) minmax(0,.85fr) minmax(0,1.4fr);
  gap:var(--s6);align-items:start;padding:var(--s6) 0;border-bottom:1px solid var(--line-2);
}
.experience-index{font-family:var(--mono);font-size:13px;line-height:1.8;color:var(--accent)}
.experience-entry h3{font-size:20px;line-height:1.35;max-width:27ch}
.experience-copy{min-width:0}
.experience-copy p{font-size:15px;line-height:1.7;color:var(--ink-2)}
.experience-copy .more{
  display:inline-block;margin-top:var(--s4);font-size:14px;font-weight:600;
  color:var(--accent);text-decoration:underline;text-underline-offset:4px;
}

/* label/value facts inside a member card or elsewhere */
.kv-list{margin:var(--s3) 0 0;border-top:1px solid var(--line)}
.kv{display:grid;grid-template-columns:minmax(130px,.36fr) 1fr;gap:var(--s4);
    padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.kv dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
       text-transform:uppercase;color:var(--muted);padding-top:2px}
.kv dd{margin:0;color:var(--ink-2)}
.island .kv-list,.island .kv{border-color:var(--navy-line)}
.island .kv dt{color:var(--i-muted)}
.island .kv dd{color:var(--i-ink-2)}

/* product teaser (Venedy) — navy island panel */
.teaser{
  display:grid;grid-template-columns:1.15fr 1fr;gap:var(--s8);align-items:center;
  border-radius:var(--r-lg);background:var(--navy);color:var(--i-ink-2);
  padding:var(--s8) var(--s7);position:relative;overflow:hidden;
}
.teaser::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 100% 0%,rgba(212,168,87,.12),transparent 60%);
}
.teaser>*{position:relative;z-index:1}
.teaser h2{color:#fff;font-size:clamp(24px,2.8vw,34px)}
.teaser p{color:var(--i-ink-2);margin-top:var(--s4);font-size:16px;line-height:1.65;max-width:52ch}
.teaser .eyebrow{color:var(--gold)}
.teaser-note{font-size:13.5px;color:var(--i-muted)}
.teaser-cta{margin-top:var(--s6);display:flex;gap:var(--s3);flex-wrap:wrap}
.teaser-art{
  border:1px solid var(--navy-line);border-radius:var(--r);
  background:var(--navy-2);padding:var(--s5);
}
.teaser-art .kv2{
  display:flex;flex-direction:column;gap:6px;
  padding:12px 0;border-bottom:1px solid var(--navy-line);
}
.teaser-art .kv2:last-child{border-bottom:none}
.teaser-art .kv2 b{color:var(--gold);font-weight:600;font-family:var(--mono);
                   font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.teaser-art .kv2 span{font-size:13.5px;color:var(--i-ink-2);line-height:1.55}

/* contact rows */
.crow{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:var(--s4);padding:var(--s3) 0}
.crow .ci{
  width:40px;height:40px;border-radius:10px;flex:none;
  background:var(--bg-soft);border:1px solid var(--line);
  display:grid;place-items:center;align-self:center;color:var(--accent);
}
.crow .ci svg{display:block;width:18px;height:18px}
.crow .crow-text{display:grid;gap:2px;min-width:0;margin:0}
.crow .crow-text .cl{display:block;margin:0;line-height:1.4}
.crow .crow-text .cv{display:block;min-width:0;margin:0;line-height:1.55;white-space:normal;overflow-wrap:anywhere}
/* Shared label style for contact rows and standalone contact information. */
.cl{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
          text-transform:uppercase;color:var(--muted)}
.crow .cv{font-size:15.5px;color:var(--ink);font-weight:500;margin-top:2px}
.crow .cv a:hover{color:var(--accent)}
.island .crow .ci{background:var(--navy-2);border-color:var(--navy-line);color:var(--gold)}
.island .cl{color:var(--i-muted)}   /* 6.09:1 */
.island .crow .cv{color:var(--i-ink)}

/* A useful email fallback comes first; the calendar is an optional enhancement. */
.booking-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s8);align-items:start}
.booking-intro{padding-top:var(--s5)}
.booking-intro h2{max-width:22ch}
.booking-intro .lede{margin-top:var(--s5);font-size:17px}
.booking-points{list-style:none;margin-top:var(--s6);border-top:1px solid var(--line-2)}
.booking-points li{position:relative;padding:var(--s4) 0 var(--s4) var(--s5);border-bottom:1px solid var(--line-2);font-size:14.5px;line-height:1.6}
.booking-points li::before{content:"";position:absolute;top:var(--s5);left:0;width:6px;height:6px;background:var(--accent)}
.booking-panel{min-width:0;border:1px solid var(--line-2);border-top:3px solid var(--navy);border-radius:var(--r-sm);background:var(--bg);padding:var(--s6);box-shadow:var(--sh-sm)}
.booking-placeholder{max-width:52ch;margin:0 auto}
.booking-icon{color:var(--accent);margin-bottom:var(--s5)}
.booking-placeholder h3{font-size:22px;line-height:1.35}
.booking-placeholder>p{font-size:15px;line-height:1.7;margin-top:var(--s4)}
.booking-actions{display:flex;flex-direction:column;align-items:stretch;gap:var(--s3);margin-top:var(--s5)}
.booking-actions .btn{font-size:14px;line-height:1.4}
.booking-placeholder .booking-note,.booking-status{font-size:12.5px;line-height:1.65;color:var(--muted)}
.booking-alternative{align-self:center;font-size:13px;color:var(--accent);text-decoration:underline;text-underline-offset:4px;text-align:center}
.booking-status:not(:empty){padding-top:var(--s4)}
.booking-calendar{margin-top:var(--s5)}
.booking-calendar iframe{display:block;width:100%;max-width:100%;border:0;background:var(--bg);color-scheme:light}
[data-booking-state="error"] .booking-status{color:var(--critical)}
.booking-actions [hidden],.booking-calendar[hidden]{display:none}

/* ====================== 11 DATA ========================================== */
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin:var(--s6) 0}
.statband .s{border:1px solid var(--line);border-radius:12px;padding:var(--s5);background:#fff}
.statband .n{
  font-family:var(--mono);font-weight:600;font-size:clamp(26px,3vw,34px);
  color:var(--accent);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.statband .l{font-size:13px;color:var(--ink-2);margin-top:var(--s2);line-height:1.45}
.statband .src{font-family:var(--mono);font-size:10.5px;color:var(--muted);
               margin-top:var(--s2);display:block}
.island .statband .s{background:var(--navy-2);border-color:var(--navy-line)}
.island .statband .n{color:var(--gold)}
.island .statband .l{color:var(--i-ink-2)}

/* hairline-separated fact strip, editorial */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.facts .f{padding:var(--s5) var(--s5) var(--s5) 0;border-right:1px solid var(--line)}
.facts .f:last-child{border-right:none}
.facts .f .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.10em;
             text-transform:uppercase;color:var(--muted)}
.facts .f .v{font-size:clamp(19px,2vw,25px);font-weight:700;color:var(--ink);
             margin-top:var(--s2);letter-spacing:-.02em;line-height:1.2}
.island .facts{border-top-color:var(--navy-line)}
.island .facts .f{border-right-color:var(--navy-line)}
.island .facts .f .k{color:var(--i-muted)}
.island .facts .f .v{color:var(--i-ink)}

/* comparison table */
.cmp{width:100%;border-collapse:collapse;border:1px solid var(--line);
     border-radius:var(--r);overflow:hidden}
.cmp th,.cmp td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line);
                font-size:15px}
.cmp thead th{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:var(--bg-soft);font-weight:500;
}
.cmp td:first-child{color:var(--ink-2)}
.cmp td.v{color:var(--ink);font-weight:600;background:var(--gold-soft)}
.cmp td.o{color:var(--muted)}
.cmp tbody tr:hover{background:var(--bg-soft)}
.cmp tr:last-child td{border-bottom:none}

/* tiers */
.tiers{border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2)}
.tiers .tier{padding:var(--s4) var(--s5);border-bottom:1px solid var(--line-2)}
.tiers .tier:last-child{border-bottom:none}
.tiers .tier .h{font-weight:700;font-size:16px;color:var(--ink)}
.tiers .tier .meta{font-family:var(--mono);font-size:11.5px;color:var(--muted);float:right}
.tiers .tier p{font-size:13.5px;color:var(--ink-2);margin-top:5px}
.tiers .t0{background:var(--gold-soft)}
.tiers .t1{background:rgba(212,168,87,.06)}

/* flow diagram */
.flow{display:flex;align-items:stretch;justify-content:center;gap:var(--s3);flex-wrap:wrap}
.flow .b{
  flex:1;min-width:150px;border:1px solid var(--line-2);border-radius:12px;
  padding:var(--s3) var(--s4);background:#fff;font-size:13.5px;color:var(--ink-2);
}
.flow .b .t{display:block;margin-bottom:5px;font-family:var(--mono);font-size:12px;
            font-weight:600;color:var(--ink)}
/* Gruen/Rot als Bedeutungspaar: gruen ist der tragfaehige Zustand, rot der
   Angriffs- oder Fehlerpfad. Deckende Tints, weil dieselbe Figur auf Weiss
   UND auf der Navy-Insel vorkommt: mit Alpha schien dort Navy durch und der
   Text stand dunkel auf dunkel. Die Mono-Beschriftung traegt den Akzent, die
   Flaeche bleibt fast weiss. */
.flow .b.ok{border-color:rgba(15,122,74,.45);background:var(--ok-tint)}
.flow .b.ok .t{color:var(--ok-ink)}
.flow .b.bad{border-color:rgba(179,38,30,.45);background:var(--critical-tint)}
.flow .b.bad .t{color:var(--critical-ink)}
.flow .arr{align-self:center;color:var(--accent);font-size:22px;flex:none;
           font-family:var(--mono)}

/* figure */
.figure{margin:var(--s6) 0;padding:var(--s5);border:1px solid var(--line);
        border-radius:var(--r);background:var(--bg-soft)}
/* display:block ist tragend: .cap erbt sonst das 2-Spalten-Grid der
   .caps-Komponente und quetscht die Bildunterschrift in eine ~200px-Spalte
   mit fremdem border-bottom. */
.figure .cap{display:block;padding:0;border:none;
             font-family:var(--mono);font-size:12px;color:var(--muted);
             margin-top:var(--s3);text-align:center;line-height:1.5}

/* Die eine Stelle, an der ein Langtext den Markenton nehmen kann, ohne dass
   Fliesstext auf Navy landet: das Diagramm bei ~50 % der Artikelhoehe. */
.figure--dark{background:var(--navy);border-color:var(--navy-line)}
.figure--dark .cap{color:var(--i-muted)}         /* 6.09:1, --muted waere 2.02:1 */
.figure--dark .flow .arr{color:var(--gold)}      /* 5.22:1, --accent waere 2.21:1 */
.figure--dark .cmp{background:#fff}              /* Tabelle bleibt helle Flaeche */

/* ====================== 12 EDITORIAL ===================================== */
.docs-layout{display:grid;grid-template-columns:250px 1fr;gap:var(--s8);align-items:start}
.docs-layout>*{min-width:0}
.docs-side{
  position:sticky;top:100px;max-height:calc(100vh - 130px);
  overflow-y:auto;overscroll-behavior:contain;padding-right:var(--s2);
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.dn-top{
  display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.10em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s3);
}
.dn-top:hover{color:var(--accent)}
.dn-cat{border-top:1px solid var(--line)}
.dn-cat:last-of-type{border-bottom:1px solid var(--line)}
.dn-cat>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:var(--s2);padding:11px 0;
  font-weight:600;font-size:14px;color:var(--ink);
}
.dn-cat>summary::-webkit-details-marker{display:none}
.dn-cat>summary svg{color:var(--muted);transition:transform var(--t-fast) var(--ease);flex:none}
.dn-cat[open]>summary svg{transform:rotate(90deg)}
.dn-cat>summary:hover{color:var(--accent)}
.dn-list{padding:0 0 var(--s3)}
.dn-list a{display:block;font-size:13.5px;color:var(--ink-2);padding:6px 0 6px 2px}
.dn-list a:hover{color:var(--accent)}
.dn-list a.cur{color:var(--accent);font-weight:600}
.dn-sub{margin:1px 0 7px;padding-left:12px;border-left:1px solid var(--line)}
.dn-sub a{display:block;font-size:13px;color:var(--muted);padding:5px 0 5px 2px}

/* post cards (hub) */
.knowledge-group + .knowledge-group{margin-top:var(--s8)}
.post-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);margin-top:var(--s5)}
.post-card{
  display:block;border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s5);background:#fff;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.post-card:hover{border-color:var(--gold);box-shadow:var(--sh);transform:translateY(-2px)}
.post-card .tag{display:block}
.post-card h3{font-size:18px;margin:9px 0 7px}
.post-card p{color:var(--muted);font-size:var(--fs-sm);line-height:1.5}
.post-card .more{
  display:inline-block;margin-top:var(--s3);
  font-family:var(--mono);font-size:12.5px;color:var(--accent);
}

/* article */
.article-intro .article-meta,.job-intro .job-meta{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:var(--s2) var(--s5);max-width:76ch;margin:var(--s5) 0 0;
  font-family:var(--mono);font-size:12.5px;line-height:1.75;color:var(--muted);
}
.article-meta time,.job-meta time{white-space:nowrap}
.article-intro .article-meta + .primer{margin-top:var(--s6)}
.docs-article{max-width:820px;overflow-wrap:break-word}
.article-body h2{font-size:26px;margin:var(--s8) 0 var(--s4);letter-spacing:-.018em}
.article-body h2:first-child{margin-top:0}
.article-body h3{font-size:19px;margin:var(--s6) 0 var(--s2)}
.article-body p{color:var(--ink-2);font-size:17px;line-height:1.75;margin:0 0 var(--s4)}
.article-body ul,.article-body ol{
  margin:0 0 var(--s5);padding-left:22px;color:var(--ink-2);font-size:17px;line-height:1.75;
}
.article-body li{margin:6px 0}
.article-body strong{color:var(--ink);font-weight:600}
.article-body a:not(.btn){
  color:var(--accent);border-bottom:1px solid rgba(152,96,31,.32);
}
.article-body a:not(.btn):hover{border-bottom-color:var(--accent)}
.article-body code{
  font-family:var(--mono);font-size:.87em;background:var(--bg-soft-2);
  border:1px solid var(--line);border-radius:5px;padding:2px 6px;
  color:var(--ink);overflow-wrap:anywhere;
}
.article-body figure{margin:var(--s6) 0}
.article-body figcaption{
  font-family:var(--mono);font-size:12px;color:var(--muted);
  margin-top:var(--s3);line-height:1.5;
}
.article-hero{border-radius:var(--r);overflow:hidden;margin:0 0 var(--s6)}
.article-hero img{width:100%;height:auto}

/* legal modifier: preserved Impressum/Datenschutz content, element-styled */
.article-body.legal h2{font-size:22px;margin-top:var(--s8)}
.article-body.legal h3{font-size:17px;margin-top:var(--s5)}
.article-body.legal p,.article-body.legal li{font-size:16px}
.article-body.legal ul{list-style:disc}
.article-body.legal section+section{margin-top:var(--s6)}

/* key box */
.keybox{
  border-left:3px solid var(--gold);background:var(--bg-soft);
  padding:var(--s4) var(--s5);border-radius:0 10px 10px 0;margin:var(--s6) 0;
}
.keybox .b{
  display:block;margin-bottom:6px;
  font-family:var(--mono);font-size:11px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--accent);
}
.keybox p{margin:0;font-size:16px;color:var(--ink-2);line-height:1.65}
.keybox p+p{margin-top:var(--s3)}

/* umami opt-out block on the privacy pages — the #ids and data-attrs are
   load-bearing hooks for umami-optout.js, never rename them */
.keybox--optout{border-left-color:var(--accent);background:var(--bg-soft-2)}
.keybox--optout h3{font-size:17px;margin:0 0 var(--s2)}
.optout-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s4)}
.optout-state{font-size:14px;color:var(--ink-2)}
.optout-note{margin-top:var(--s3);font-size:13.5px;color:var(--muted);line-height:1.6}

/* code / example block */
.example-block{
  background:var(--navy-3);color:#D6E2F0;border-radius:12px;
  padding:var(--s4) var(--s5);
  font-family:var(--mono);font-size:13px;line-height:1.68;
  white-space:pre-wrap;word-break:break-word;overflow-x:auto;margin:var(--s3) 0;
  tab-size:2;
}
.example-block .c{color:#8FA6BF}
.example-block .k{color:var(--gold)}
.example-block .s{color:#8FD8B4}

/* sources */
.src-h{font-family:var(--mono);font-size:11px;letter-spacing:.10em;text-transform:uppercase;
       color:var(--muted);margin:var(--s8) 0 2px}
.src-list{margin:0;padding:0;list-style:none;counter-reset:s}
.src-list li{
  counter-increment:s;position:relative;padding:11px 0 11px 32px;
  border-top:1px solid var(--line);font-size:14px;color:var(--ink-2);line-height:1.55;
}
.src-list li::before{
  content:counter(s);position:absolute;left:0;top:12px;
  width:21px;height:21px;border-radius:50%;
  background:var(--bg-soft);border:1px solid var(--line-2);
  font-family:var(--mono);font-size:11px;color:var(--muted);
  display:grid;place-items:center;
}
.src-list a{color:var(--accent);word-break:break-word}
.src-list .pub{color:var(--muted);font-size:12.5px}

.article-related{margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--line)}
.article-related .rh{
  font-family:var(--mono);font-size:11px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--s3);
}
.article-related .rg{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.article-related a{
  display:block;border:1px solid var(--line);border-radius:12px;padding:var(--s4) var(--s5);
  transition:border-color var(--t),transform var(--t);
}
.article-related a:hover{border-color:var(--gold);transform:translateY(-2px)}
.article-related strong{display:block;margin-top:5px;font-size:16px;color:var(--ink)}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq-q{border-bottom:1px solid var(--line)}
.faq-q summary{
  cursor:pointer;padding:var(--s5) 2px;font-weight:600;font-size:17px;line-height:1.4;
  list-style:none;display:flex;justify-content:space-between;gap:var(--s5);color:var(--ink);
}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary::after{content:"+";color:var(--accent);font-weight:400;flex:none;
                      font-family:var(--mono)}
.faq-q[open] summary::after{content:"\2212"}
.faq-q p{margin:-4px 2px var(--s5);color:var(--ink-2);font-size:15px;line-height:1.65;max-width:70ch}

/* ============ 13 QUIZ (NIS2 + KI-Readiness) ============================== */
.quiz{max-width:820px;margin:0 auto}
.quiz-progress{margin-bottom:var(--s6)}
.quiz-progress .meta{display:flex;justify-content:space-between;align-items:center;
                     font-family:var(--mono);font-size:12.5px;color:var(--muted);
                     margin-bottom:var(--s2)}
.quiz-bar{height:6px;border-radius:3px;background:var(--bg-soft-2);overflow:hidden}
.quiz-bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--copper));
            transition:width var(--t) var(--ease)}
.quiz-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
           padding:var(--s7);box-shadow:var(--sh)}
.quiz-screen[hidden]{display:none}
.quiz-h{margin-bottom:var(--s5)}
.opt-group{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
           text-transform:uppercase;color:var(--muted);margin:var(--s5) 0 var(--s3)}
.opts{display:grid;gap:var(--s3)}
.opt{
  display:flex;gap:var(--s3);align-items:flex-start;
  border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  padding:var(--s4);cursor:pointer;background:#fff;
  transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
  font-size:15px;color:var(--ink-2);
}
.opt:hover{border-color:var(--copper);background:var(--bg-soft)}
.opt input{margin-top:3px;accent-color:var(--accent);flex:none;width:18px;height:18px}
.opt:has(input:checked),.opt.is-selected{
  border-color:var(--copper);background:var(--gold-soft);
  box-shadow:inset 0 0 0 1px var(--copper);color:var(--ink);
}
.opt:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
.quiz-nav{display:flex;justify-content:space-between;gap:var(--s3);margin-top:var(--s6)}
.quiz-result{border-radius:var(--r);padding:var(--s6);border:1px solid var(--line)}
.quiz-result--hi{border-color:var(--critical);background:var(--critical-bg)}
.quiz-result--mid{border-color:var(--warn);background:var(--warn-bg)}
.quiz-result--lo{border-color:var(--ok);background:var(--ok-bg)}
/* Quiz auf einer Navy-Insel: die weisse .quiz-card schwebt, alles darin
   behaelt seine hellen Kontraste. Nur die zwei Elemente ausserhalb der Karte
   brauchen Insel-Werte. */
.island .quiz-progress .meta{color:var(--i-muted)}
.island .quiz-bar{background:var(--navy-3)}
.island .quiz-card{box-shadow:0 30px 70px -30px rgba(0,0,0,.55)}
/* Die pauschalen .island-Textregeln (weisse Ueberschriften, helle .cl) greifen
   sonst auch INNERHALB der weissen Karte: weiss auf hellgruenem Ergebnisfeld
   waere unlesbar. Hier gilt wieder die Helle-Flaeche-Palette. */
.island .quiz-card{color:var(--ink-2)}   /* Basis, deckt auch li-Textknoten */
.island .quiz-card :is(h1,h2,h3,h4,legend){color:var(--ink)}
.island .quiz-card p,.island .quiz-card span,.island .quiz-card li{color:var(--ink-2)}
.island .quiz-card .cl{color:var(--muted)}
.island .quiz-card .tag{color:var(--accent)}
.island .quiz-card strong{color:var(--ink)}
.quiz-result h2{margin-bottom:var(--s3)}
.quiz-result p{font-size:16px;line-height:1.65}
.quiz-result ul{margin:var(--s4) 0 0;padding-left:20px;font-size:15px;line-height:1.7}

/* KI-Readiness-Check: acht Radio-Gruppen auf einer Karte, ohne Screen-Wechsel.
   Erst das <fieldset> laesst eine Gruppe mit ihrer Frage ansagen, es braucht
   also einen eigenen Reset - der Browser-Default zeichnete sonst acht Rahmen in
   die eine .quiz-card. min-width:0, weil ein fieldset sonst nicht schrumpft. */
.quiz-q{border:0;margin:var(--s6) 0 0;padding:0;min-width:0}
.quiz-q+.quiz-q{padding-top:var(--s6);border-top:1px solid var(--line)}
/* float+width nimmt das <legend> aus dem Rahmenfluss des fieldset heraus. Ohne
   das liegt die Oberkante des Padding-Box auf halber Legenden-Hoehe, und die
   Trennlinie laeuft quer durch die Frage statt darueber. Alles, was folgt,
   muss den Float wieder aufheben. */
.quiz-q legend{float:left;width:100%;padding:0;margin-bottom:var(--s4);
               color:var(--ink);font-weight:700;
               line-height:1.35;font-size:clamp(18px,1.8vw,21px)}
.quiz-q legend .n{display:block;margin-bottom:6px;font-weight:500;color:var(--accent);
                  font-family:var(--mono);font-size:11.5px;letter-spacing:.10em;
                  text-transform:uppercase}
/* clear statt margin-top: die Clearance schluckt einen eigenen Aussenabstand,
   der Abstand kommt deshalb aus dem margin-bottom der Legende. */
.quiz-q .q-hint{clear:both;font-size:15px;color:var(--muted)}
.quiz-q .q-hint+.opts{margin-top:var(--s4)}
.quiz-q .opts{clear:both}
/* Traeger der aria-live-Region: bleibt im DOM, auch solange #aiResult hidden ist */
.quiz-out{margin-top:var(--s7)}

/* ====================== 14 BAND & FOOTER ================================= */
.band{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-3) 100%);
      padding:var(--s9) 0;position:relative;overflow:hidden}
.band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 100% at 88% 0%,rgba(212,168,87,.16),transparent 62%);
}
.band-inner{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s7);flex-wrap:wrap;
}
.band-inner>div{min-width:0;max-width:100%}
.band h2{color:#fff;font-size:var(--fs-h2);max-width:26ch;overflow-wrap:anywhere;hyphens:auto}
.band p{color:var(--i-ink-2);font-size:17px;margin-top:var(--s3);max-width:48ch}

footer{background:var(--navy);color:var(--i-ink-2);padding:var(--s8) 0 var(--s6)}
.foot-news{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s8);align-items:center;margin-bottom:var(--s7);padding-bottom:var(--s7);border-bottom:1px solid var(--navy-line)}
.foot-news>div{min-width:0}
.foot-news .eyebrow{color:var(--gold);font-size:11px}
.foot-news h2{font-size:24px;line-height:1.35;color:var(--i-ink);max-width:30ch}
.foot-news-copy{font-size:14.5px;line-height:1.7;color:var(--i-ink-2);margin-top:var(--s4);max-width:56ch}
.foot-news-topics{font-family:var(--mono);font-size:11px;line-height:1.8;color:var(--i-muted);margin-top:var(--s4)}
.foot-news-note{font-size:12px;line-height:1.65;color:var(--i-muted);margin-top:var(--s4);max-width:52ch}
.foot-news-privacy{display:inline-block;margin-top:var(--s3);font-size:12px;color:var(--i-ink-2);text-decoration:underline;text-underline-offset:4px}
.foot-news-privacy:hover{color:var(--gold)}
.foot-news :focus-visible{outline-color:var(--gold)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s6);
           margin-bottom:var(--s7)}
.foot-brand p{color:var(--i-muted);font-size:14px;max-width:34ch;margin-top:var(--s4);
              line-height:1.6}
.foot-brand .tagline{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--gold);margin-top:var(--s3);
}
.foot-col-h{
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--i-muted);margin:0 0 var(--s4);
}
.foot-col a{display:block;color:var(--i-ink-2);font-size:14.5px;padding:6px 0}
.foot-col a:hover{color:var(--gold)}
.foot-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
  padding-top:var(--s5);border-top:1px solid var(--navy-line);
  color:var(--i-muted);font-size:13px;font-family:var(--mono);flex-wrap:wrap;
}
.foot-bottom a:hover{color:var(--gold)}

/* ====================== 15 MOTION ======================================== */
.reveal{opacity:0;transform:translateY(18px);
        transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* Lesefortschritt: 2px Gold unter der Leiste, nur auf Artikelseiten, per JS
   eingehaengt. transform statt width, damit nur der Compositor arbeitet. */
.readbar{
  position:fixed;top:72px;left:0;right:0;height:2px;z-index:59;
  background:var(--gold);transform:scaleX(0);transform-origin:0 50%;
  pointer-events:none;
}
/* Scroll-Spur im linken Freiraum der Startseite. Eine Leiterbahn, an der ein
   Punkt mitwandert: sie fuellt den leeren Rand und sagt zugleich, wo man im
   Dokument steht. Bewusst als Instrument gezeichnet, nicht als Zierde, im
   selben Vokabular wie das CAD-Raster im Hero. Per JS eingehaengt, deshalb
   ohne JS schlicht nicht da. Die Bahn selbst steht auch bei reduzierter
   Bewegung, nur der Punkt und das Nachziehen entfallen (siehe 17). */
/* Millimeterpapier in den Seitenraendern. Dieselben Fadenkreuze wie im Hero,
   nur schwaecher, damit der Grund Struktur bekommt statt leer zu sein. Die
   Maske haelt sie aus der Textspalte heraus: hinter Fliesstext gelesen wirken
   sie wie Schmutz, im Freiraum wie Zeichenpapier. Fest im Viewport, damit sie
   beim Scrollen ruhig stehen. z-index:-1 liegt ueber der html-Flaeche und
   unter allem Inhalt; Sektionen mit eigener Flaeche decken sie ohnehin ab. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M48 43v10M43 48h10' fill='none' stroke='%231E3A5F' stroke-opacity='.16' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(90deg,#000 0,transparent 27%,transparent 73%,#000 100%);
          mask-image:linear-gradient(90deg,#000 0,transparent 27%,transparent 73%,#000 100%);
}

/* Mouse light on the home page's technical grid. Only the line work gains
   colour; section surfaces and content stay unchanged. Each layer is clipped
   to its section, so it cannot spill onto the navy panels or navigation. */
.grid-surface>.wrap{position:relative;z-index:1}
.grid-light{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  opacity:0;transition:opacity .3s var(--ease);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M48 41v14M41 48h14' fill='none' stroke='%2398601F' stroke-opacity='.55' stroke-width='1'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg,rgba(152,96,31,.28) 0 1px,transparent 1px 96px),
    repeating-linear-gradient(180deg,rgba(152,96,31,.28) 0 1px,transparent 1px 96px);
  background-position:0 var(--grid-phase-y,0px);
  -webkit-mask-image:radial-gradient(circle 200px at var(--grid-x,-400px) var(--grid-y,-400px),#000 0%,rgba(0,0,0,.65) 32%,transparent 100%);
          mask-image:radial-gradient(circle 200px at var(--grid-x,-400px) var(--grid-y,-400px),#000 0%,rgba(0,0,0,.65) 32%,transparent 100%);
}
.grid-light.is-lit{opacity:1}

.trace{
  position:fixed;top:calc(72px + var(--s4));bottom:var(--s4);
  width:clamp(20px,calc((100vw - 1160px) / 4),44px);z-index:2;pointer-events:none;
  /* 100% statt 100vw: bei einem fixierten Element loest Prozent gegen den
     Viewport OHNE klassischen Scrollbalken auf, 100vw schliesst ihn ein.
     Sonst sitzt die Bahn dort rund 8px zu weit rechts, naeher an der Kopie. */
  left:max(2px,calc((100% - var(--wrap)) / 2 - 50px));
}
.trace svg{width:100%;height:100%;overflow:visible}

/* Die Zeichnung liegt zweimal uebereinander. tr-light ist der Normalfall auf
   hellem Grund; tr-dark ist dieselbe Zeichnung in Gold und wird von der
   Bandmaske nur dort freigegeben, wo eine Navy-Insel steht. Deshalb wechselt
   die Farbe exakt an der Inselkante statt fuer die ganze Spalte auf einmal.
   Gold haelt auf Navy 5.22:1, Bronze nur 2.21:1. */
.trace .tr-bed{stroke:var(--line-2);stroke-width:1.25;fill:none}
.trace .tr-run{stroke:var(--accent);stroke-width:1.6;fill:none}
.trace .tr-node{fill:var(--bg);stroke:var(--line-2);stroke-width:1.25;
                transition:fill var(--t),stroke var(--t)}
.trace .tr-node.on{fill:var(--accent);stroke:var(--accent)}
.trace .tr-dot{fill:var(--accent)}
.trace .tr-halo{fill:var(--gold);opacity:.22}
/* Anschlusspad am unteren Ende: die Bahn laeuft nicht aus dem Bild, sie endet
   in einem Kontakt. Bildliches Echo auf "wir uebergeben". */
.trace .tr-pad{stroke:var(--line-2);stroke-width:1.25;fill:none;
               transition:stroke var(--t),fill var(--t)}
.trace .tr-pad.on{stroke:var(--accent)}

.trace .tr-dark .tr-bed{stroke:var(--navy-line)}
.trace .tr-dark .tr-run{stroke:var(--gold)}
.trace .tr-dark .tr-node{fill:var(--navy);stroke:var(--navy-line)}
.trace .tr-dark .tr-node.on{fill:var(--gold);stroke:var(--gold)}
.trace .tr-dark .tr-dot{fill:var(--gold)}
.trace .tr-dark .tr-halo{fill:var(--gold);opacity:.3}
.trace .tr-dark .tr-pad{stroke:var(--navy-line)}
.trace .tr-dark .tr-pad.on{stroke:var(--gold)}

/* Section 15: one arrival per main heading, triggered by the scroll rail. */
.trace-heading{
  position:relative;
  --trace-arrival-color:var(--accent);
  --trace-arrival-glow:color-mix(in srgb,var(--accent) 28%,transparent);
}
.island .trace-heading,.band .trace-heading{
  --trace-arrival-color:var(--gold);
  --trace-arrival-glow:color-mix(in srgb,var(--gold) 32%,transparent);
}
.trace-heading::before{
  content:"";position:absolute;top:50%;right:calc(100% + 12px);
  width:var(--trace-arrival-width,0px);height:1px;
  background:var(--trace-arrival-color);pointer-events:none;
  opacity:0;transform:scaleX(0);transform-origin:left center;
}
.trace-heading.is-trace-arriving{animation:trace-title-arrival .72s var(--ease) 1}
.trace-heading.is-trace-arriving::before{animation:trace-line-arrival .72s var(--ease) 1}
@keyframes trace-title-arrival{
  0%,100%{text-shadow:none}
  32%{text-shadow:0 0 .38em var(--trace-arrival-glow),0 0 .08em var(--trace-arrival-glow)}
}
@keyframes trace-line-arrival{
  0%{opacity:0;transform:scaleX(0)}
  28%{opacity:.9;transform:scaleX(1)}
  62%{opacity:.55;transform:scaleX(1)}
  100%{opacity:0;transform:scaleX(1)}
}

/* safety net: if JS never runs, nothing stays invisible */
html:not(.js) .reveal{opacity:1;transform:none}

@keyframes architecture-flow{
  0%{opacity:0;transform:scaleY(0)}
  35%{opacity:1;transform:scaleY(1)}
  100%{opacity:0;transform:scaleY(1)}
}

/* ====================== 16 RESPONSIVE — ONE place ======================== */
@media (hover:hover) and (pointer:fine){
  .card:hover,.step:hover{
    border-color:var(--edge-colour);
    box-shadow:0 0 0 1px rgba(var(--edge-rgb),.3),0 0 20px rgba(var(--edge-rgb),.3),0 10px 24px -14px rgba(var(--edge-rgb),.5);
  }
  .card:hover::after,.step:hover::after{opacity:1}
  .capability:hover{
    --cap-surface:var(--navy);--cap-title:var(--i-ink);--cap-copy:var(--i-ink-2);
    --cap-accent:var(--gold);--cap-muted:var(--i-muted);--cap-line:var(--navy-line);
  }
}
@media (hover:none),(pointer:coarse){
  .grid-light{display:none}
}
@media (max-width:980px){
  .booking-layout{grid-template-columns:1fr;gap:var(--s7)}
  .booking-intro{padding-top:0;max-width:62ch}
  .booking-intro h2{max-width:28ch}
  .booking-panel{width:100%;max-width:760px;justify-self:center}
  .foot-news{gap:var(--s7)}
}
@media (max-width:640px){
  .booking-panel{padding:var(--s5)}
  .booking-placeholder h3{font-size:20px}
  .foot-news{grid-template-columns:1fr;gap:var(--s5)}
  .foot-news h2{font-size:22px}
}
@media (max-width:980px){
  .hero--enterprise .enterprise-split{grid-template-columns:1fr;gap:var(--s6)}
  .hero--enterprise .hero-copy h1{font-size:var(--fs-hero)}
  .architecture-map{max-width:640px;width:100%}
  .proof-layout{gap:var(--s5)}
  /* Unter 980px gibt es keinen Seitenrand mehr, den die Textur fuellen
     koennte: sie laege dann hinter der Kopie statt daneben. */
  body::before{display:none}
  .nav-links,.nav-right .btn,.nav-right .lang{display:none}
  .nav-inner{grid-template-columns:auto 1fr auto}
  .nav-toggle{display:flex}
  /* Navigation remains usable when site.js is unavailable. */
  html:not(.js) .nav{position:relative}
  html:not(.js) .nav-toggle{display:none}
  html:not(.js) .mobile-menu[hidden]{display:flex;max-height:none}
  html:not(.js) .hero,html:not(.js) .subhero{padding-top:var(--s7)}
  .cards,.cards.four{grid-template-columns:repeat(2,1fr)}
  .wsx{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .teaser{grid-template-columns:1fr;gap:var(--s6);padding:var(--s7) var(--s5)}
  .founder-grid{grid-template-columns:1fr;max-width:680px;margin-inline:auto}
  .tech-grid{grid-template-columns:repeat(2,1fr)}
  .statband,.facts{grid-template-columns:repeat(2,1fr)}
  .facts .f:nth-child(2n){border-right:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .prow{grid-template-columns:auto 1fr auto;gap:var(--s3);padding-block:var(--s6)}
  .prow-rule{display:none}
  .prow-n{align-self:start;padding-top:2px}
}
@media (max-width:680px){
  /* A straight, fine thread fits inside the existing 20px mobile gutter. */
  .trace{width:10px;left:3px}
  .capability-grid,.digital-extension,.proof-layout,.competence-matrix{grid-template-columns:1fr}
  .capability{padding:var(--s5)}
  .capability h3{font-size:20px}
  .capability-index{font-size:11px;margin-bottom:var(--s4)}
  .digital-extension{gap:var(--s4)}
  .architecture-map{padding:var(--s4)}
  .architecture-trigger{padding:var(--s3);gap:var(--s2)}
  .architecture-panel{padding:0 var(--s3) var(--s3)}
  .architecture-layer strong{font-size:14px}
  .architecture-layer small{font-size:12px}
  .proof-feature{padding:var(--s5)}
  body{font-size:16px}
  :root{--gutter:20px}
  .hero--consulting{padding-top:calc(72px + var(--s6));padding-bottom:var(--s7)}
  .hero--consulting .hero-tagline{font-size:10px;letter-spacing:.08em}
  .hero--consulting .hero-split{gap:var(--s5)}
  .hero--consulting .hero-cta{gap:var(--s3);margin-top:var(--s5)}
  .hero--consulting .hero-cta .btn{width:100%}
  .cards,.cards.two,.cards.four,.wsx{grid-template-columns:1fr}
  .band-inner{flex-direction:column;align-items:flex-start}
  .btn{width:100%}
  .hero-cta .btn,.band .btn,.quiz-nav .btn,.teaser .btn{width:auto}
  .founder-story{padding:var(--s5)}
  .founder-story h3{font-size:22px}
  .experience-entry{grid-template-columns:var(--s6) minmax(0,1fr);gap:var(--s4)}
  .experience-copy{grid-column:2}
  .kv{grid-template-columns:1fr;gap:var(--s1)}
  .cap{grid-template-columns:1fr;gap:var(--s1)}
  .tech-grid{grid-template-columns:1fr}
  .statband,.facts{grid-template-columns:1fr}
  .facts .f{border-right:none;border-bottom:1px solid var(--line)}
  .post-cards,.article-related .rg{grid-template-columns:1fr}
  .flow{flex-direction:column}
  .flow .arr{transform:rotate(90deg)}
  .cmp{display:block;overflow-x:auto;white-space:nowrap;width:100%}
  .foot-grid{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column;align-items:flex-start}
}
/* deliberate component-local exception: blog sidebar collapses */
@media (max-width:900px){
  .docs-layout{grid-template-columns:1fr;gap:var(--s5)}
  .docs-side{position:static;max-height:none;overflow:visible;padding-right:0}
}
/* print: the NIS2 result must save cleanly as PDF via the browser */
@media print{
  @page{size:A4;margin:18mm}
  header.nav,footer,.band,.skip,.quiz-nav,.noprint,.trace,.grid-light{display:none!important}
  /* Auf Papier ist die view()-Zeitachse inaktiv, ohne das bliebe scale:0. */
  .prow-rule{scale:none}
  body{background:#fff;color:#000}
  .quiz-card{border:none;box-shadow:none;padding:0}
  a{color:inherit}
  /* Ohne das druckt jede Insel ein vollflaechiges Navy-Rechteck, und der
     NIS2- bzw. KI-Check-Report waere unbrauchbar. */
  .island,.figure--dark{background:none!important;color:#000!important;
                        border-color:#999!important}
  .island::before,.hero::before,.subhero::before{display:none!important}
  .island :is(h1,h2,h3,h4,legend,.lede,.eyebrow,.muted,.cl,strong),
  .figure--dark .cap{color:#000!important}
  .island :is(.card,.step,.quiz-bar){background:none!important;border-color:#999!important}
  .readbar{display:none!important}
}

/* ====================== 17 REDUCED MOTION — one block ==================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .prow:hover .prow-rule{transform:none}
  .grid-light{display:none}
  /* Keep the border light as feedback, without following the pointer. */
  .card::after,.step::after{background:linear-gradient(120deg,var(--edge-bright),var(--edge-colour) 45%,rgba(var(--edge-rgb),.3))}
  .architecture-step::after{display:none}
  .trace-heading.is-trace-arriving,.trace-heading.is-trace-arriving::before{animation:none}
  .trace-heading::before{display:none}
  /* Die Bahn fuellt den Rand und darf bleiben; der mitlaufende Punkt und
     das Nachziehen sind Bewegung und entfallen. */
  .trace .tr-dot,.trace .tr-halo{display:none}
  .trace .tr-run{stroke-dashoffset:0!important;opacity:.35}
}