/* SKP Consulting · Systemkarte · gemeinsames Stylesheet */
@font-face{font-family:"Roboto Slab";src:url("fonts/roboto-slab-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"OpenDyslexic";src:url("fonts/opendyslexic-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"OpenDyslexic";src:url("fonts/opendyslexic-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}

/* Motion-Tokens nach transitions.dev (Polish-Skala) */
:root{
  --duration-stagger:40ms;--duration-micro:80ms;--duration-quick:150ms;--duration-fast:250ms;
  --duration-medium:350ms;--duration-slow:400ms;--duration-very-slow:500ms;
  --ease-smooth-out:cubic-bezier(.22,1,.36,1);--ease-in-out:ease-in-out;--ease-out:ease-out;
  --distance-micro:4px;--distance-base:8px;--blur-small:2px;--scale-large:.96;--scale-medium:.97;
}

/* Farbrollen: hell (Markenstandard) */
:root{
  color-scheme:light;
  --paper:#ffffff;--soft:#eef5f4;--soft-2:#e0ecea;--raised:#ffffff;
  --ink:#333333;--ink-strong:#1f2626;--muted:#596666;--line:#d5e0df;--line-strong:#9fb3b1;
  --brand:#007774;--brand-logo:#00a09f;--brand-ink:#005c58;--on-brand:#ffffff;
  --btn:#1f2626;--btn-ink:#ffffff;--btn-hover:#005c58;
  --night:#1b2323;--night-ink:#f1f6f5;--night-muted:#b7c6c4;--night-line:#3a4747;--night-accent:#75e3d8;
  --focus:#007774;--focus-ring:0 0 0 3px var(--paper),0 0 0 6px var(--focus);
  --shadow:0 18px 48px rgba(24,48,46,.10);--glass-bg:transparent;--layer-filter:none;
  --warn-bg:#fdf1e4;--warn-ink:#7a4108;--logo-plate:transparent;--logo-pad:0px;
  --grid-line:rgba(0,119,116,.085);--net-line:rgba(0,119,116,.3);--glow:rgba(0,160,159,.17);--veil:rgba(18,52,50,.075);
  --card-line:color-mix(in srgb,var(--line) 80%,transparent);--card-shadow:0 1px 2px rgba(20,48,46,.06),0 26px 60px -30px rgba(20,48,46,.34);
  --serif:"Roboto Slab",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --gutter:clamp(16px,4vw,48px);--max:1240px;--head-h:72px;--head-b:calc(var(--head-h) + env(safe-area-inset-top,0px));--safe-b:env(safe-area-inset-bottom,0px);
}
/* dunkel: System oder ausdrückliche Wahl */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --paper:#0f1515;--soft:#152020;--soft-2:#1d2a2a;--raised:#172121;
  --ink:#d9e4e3;--ink-strong:#f3f8f7;--muted:#9eb1af;--line:#2a3838;--line-strong:#4a5f5d;
  --brand:#6fded3;--brand-logo:#1fb5ad;--brand-ink:#9aeee5;--on-brand:#0b1414;
  --btn:#e9f2f1;--btn-ink:#0f1515;--btn-hover:#9aeee5;
  --night:#0a0f0f;--night-line:#2a3838;
  --focus:#6fded3;--shadow:0 18px 48px rgba(0,0,0,.45);--layer-filter:brightness(.92) contrast(1.05);
  --warn-bg:#35270f;--logo-plate:#ffffff;--logo-pad:4px;--warn-ink:#f5c98f;
  --grid-line:rgba(111,222,211,.07);--net-line:rgba(111,222,211,.26);--glow:rgba(31,181,173,.2);--veil:rgba(0,0,0,.3);--card-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 30px 70px -30px rgba(0,0,0,.8)}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0f1515;--soft:#152020;--soft-2:#1d2a2a;--raised:#172121;
  --ink:#d9e4e3;--ink-strong:#f3f8f7;--muted:#9eb1af;--line:#2a3838;--line-strong:#4a5f5d;
  --brand:#6fded3;--brand-logo:#1fb5ad;--brand-ink:#9aeee5;--on-brand:#0b1414;
  --btn:#e9f2f1;--btn-ink:#0f1515;--btn-hover:#9aeee5;
  --night:#0a0f0f;--night-line:#2a3838;
  --focus:#6fded3;--shadow:0 18px 48px rgba(0,0,0,.45);--layer-filter:brightness(.92) contrast(1.05);
  --warn-bg:#35270f;--logo-plate:#ffffff;--logo-pad:4px;--warn-ink:#f5c98f;
  --grid-line:rgba(111,222,211,.07);--net-line:rgba(111,222,211,.26);--glow:rgba(31,181,173,.2);--veil:rgba(0,0,0,.3);--card-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 30px 70px -30px rgba(0,0,0,.8)}
/* hoher Kontrast, hell */
:root[data-contrast="high"]{
  color-scheme:light;
  --paper:#ffffff;--soft:#ffffff;--soft-2:#e6e6e6;--raised:#ffffff;
  --ink:#000000;--ink-strong:#000000;--muted:#1a1a1a;--line:#000000;--line-strong:#000000;
  --brand:#004f4c;--brand-logo:#00807d;--brand-ink:#003836;--on-brand:#ffffff;
  --btn:#000000;--btn-ink:#ffffff;--btn-hover:#004f4c;
  --night:#000000;--night-ink:#ffffff;--night-muted:#ffffff;--night-line:#ffffff;--night-accent:#8ff5ea;
  --focus:#000000;--shadow:none;--layer-filter:contrast(1.1);--warn-bg:#ffffff;--warn-ink:#000000;
  --grid-line:transparent;--net-line:rgba(0,0,0,.35);--glow:transparent;--veil:rgba(0,0,0,.22);--card-line:#000000;--card-shadow:none}
/* hoher Kontrast, dunkel */
@media (prefers-color-scheme:dark){:root[data-contrast="high"]:not([data-theme="light"]){
  color-scheme:dark;
  --paper:#000000;--soft:#000000;--soft-2:#1a1a1a;--raised:#000000;
  --ink:#ffffff;--ink-strong:#ffffff;--muted:#ffffff;--line:#ffffff;--line-strong:#ffffff;
  --brand:#8ff5ea;--brand-logo:#8ff5ea;--brand-ink:#b8fff7;--on-brand:#000000;
  --btn:#ffffff;--btn-ink:#000000;--btn-hover:#8ff5ea;
  --night:#000000;--night-line:#ffffff;--focus:#ffff00;--shadow:none;--layer-filter:brightness(.95);--warn-bg:#000000;--logo-plate:#ffffff;--logo-pad:4px;--warn-ink:#ffffff;--grid-line:transparent;--net-line:rgba(255,255,255,.4);--glow:transparent;--veil:rgba(0,0,0,.55);--card-line:#ffffff;--card-shadow:none}}
:root[data-contrast="high"][data-theme="dark"]{
  color-scheme:dark;
  --paper:#000000;--soft:#000000;--soft-2:#1a1a1a;--raised:#000000;
  --ink:#ffffff;--ink-strong:#ffffff;--muted:#ffffff;--line:#ffffff;--line-strong:#ffffff;
  --brand:#8ff5ea;--brand-logo:#8ff5ea;--brand-ink:#b8fff7;--on-brand:#000000;
  --btn:#ffffff;--btn-ink:#000000;--btn-hover:#8ff5ea;
  --night:#000000;--night-line:#ffffff;--focus:#ffff00;--shadow:none;--layer-filter:brightness(.95);--warn-bg:#000000;--logo-plate:#ffffff;--logo-pad:4px;--warn-ink:#ffffff;--grid-line:transparent;--net-line:rgba(255,255,255,.4);--glow:transparent;--veil:rgba(0,0,0,.55);--card-line:#ffffff;--card-shadow:none}

/* Darstellungseinstellungen */
:root.pref-dyslexic{--serif:"OpenDyslexic",var(--sans);--sans-d:"OpenDyslexic"}
:root.pref-dyslexic body{font-family:"OpenDyslexic",system-ui,sans-serif}
:root.pref-spacing body{line-height:1.8!important;letter-spacing:.12em;word-spacing:.16em}
:root.pref-spacing p,:root.pref-spacing li{margin-bottom:.4em}
:root.pref-links a:not(.btn){text-decoration:underline!important;text-decoration-thickness:2px!important;text-underline-offset:3px}
:root.pref-nodeco .deco{display:none!important}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-b) + 24px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-wrap:anywhere;hyphens:manual}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:3px}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:3px}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink-strong);font-weight:500;margin:0;text-wrap:balance;letter-spacing:-.012em;hyphens:manual;line-height:1.2}
p{margin:0}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font:600 .78rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.lede{font-size:1.125rem;color:var(--muted);max-width:62ch}
.muted{color:var(--muted)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.icon{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.skip{position:absolute;left:12px;top:12px;z-index:100;background:var(--btn);color:var(--btn-ink);padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none}
.skip:not(:focus){width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Entwurfsband (nur Vorschau) */
.preview-ribbon{background:var(--ink-strong);color:var(--paper);font-size:.82rem}
.preview-ribbon .wrap{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;justify-content:space-between;padding-block:7px}
.preview-ribbon a{color:var(--paper)}
@media (max-width:700px){.preview-ribbon .rb-more{display:none}}

/* Kopf */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--paper) 97%,transparent);border-bottom:1px solid var(--line)}
.head-row{position:relative;display:flex;align-items:center;gap:16px;min-height:var(--head-h)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand img{width:46px;height:46px;object-fit:contain;border-radius:8px;background:var(--logo-plate);padding:var(--logo-pad)}
.brand-name{display:grid;line-height:1.15}
.brand-name b{font:600 1.12rem/1.1 var(--sans);color:var(--ink-strong)}
.brand-name span{font-size:.7rem;letter-spacing:.09em;color:var(--muted);text-transform:uppercase}
.main-nav{display:flex;gap:2px;margin-left:4px}
.main-nav a{white-space:nowrap;padding:8px 11px;border-radius:6px;text-decoration:none;font-size:.95rem}
.main-nav a:hover{background:var(--soft)}
.main-nav a[aria-current="page"],.main-nav a[aria-current="true"]{color:var(--brand);font-weight:600}
.main-nav a[aria-current="true"]{background:color-mix(in srgb,var(--brand) 10%,transparent)}
.head-tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.tool-btn{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);cursor:pointer;flex:none}
.tool-btn:hover{border-color:var(--brand);color:var(--brand)}
.lang{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;height:44px;flex:none}
.lang a{display:grid;place-items:center;min-width:42px;padding:0 8px;font-size:.84rem;font-weight:600;text-decoration:none}
.lang a[aria-current="true"]{background:var(--brand);color:var(--on-brand)}
.lang a:not([aria-current]):hover{background:var(--soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;max-width:100%;padding:6px 20px;border-radius:10px;border:1px solid transparent;font-weight:600;font-size:.95rem;text-decoration:none;cursor:pointer;text-align:center;transition:background-color var(--duration-fast) var(--ease-smooth-out),color var(--duration-fast) var(--ease-smooth-out),border-color var(--duration-fast) var(--ease-smooth-out)}
.btn-primary{background:var(--btn);color:var(--btn-ink)}
.btn-primary:hover{background:var(--btn-hover);color:var(--on-brand)}
.btn-quiet{border-color:var(--line-strong);background:transparent;color:var(--ink-strong)}
.btn-quiet:hover{border-color:var(--brand);color:var(--brand)}
.menu-btn,.mobile-search-btn{display:none}

/* Hell/Dunkel-Schalter */
.theme-switch{position:relative;display:inline-flex;align-items:center;width:68px;height:44px;padding:0 5px;border:1px solid var(--line);border-radius:999px;background:var(--soft);cursor:pointer;flex:none}
.theme-switch .knob{position:absolute;top:5px;left:5px;width:32px;height:32px;border-radius:50%;background:var(--paper);box-shadow:0 1px 4px rgba(0,0,0,.18);transition:transform var(--duration-fast) var(--ease-smooth-out)}
.theme-switch[aria-checked="true"] .knob{transform:translateX(24px)}
.theme-switch .icon{position:relative;z-index:1;width:16px;height:16px;margin:0 3px;color:var(--muted);transition:color var(--duration-fast) var(--ease-in-out)}
.theme-switch .i-sun{margin-left:8px}
.theme-switch .i-moon{margin-left:auto;margin-right:8px}
.theme-switch[aria-checked="false"] .i-sun,.theme-switch[aria-checked="true"] .i-moon{color:var(--brand)}
.theme-switch:hover{border-color:var(--brand)}
.theme-switch .auto-dot{position:absolute;right:-3px;top:-3px;width:10px;height:10px;border-radius:50%;background:var(--brand-logo);border:2px solid var(--paper)}
.theme-switch:not([data-auto]) .auto-dot{display:none}

/* Suche */
.search{position:relative}
.search-field{display:flex;align-items:center;gap:8px;width:clamp(170px,16vw,240px);height:44px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.search-field:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent)}
.search-field input{border:0;background:transparent;font-size:.92rem;width:100%;outline:none;min-width:0}
.search-field input::placeholder{color:var(--muted);opacity:1}
.search-field kbd{font:500 .72rem var(--sans);color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:1px 6px}
.search-results{position:absolute;right:0;top:calc(100% + 8px);width:min(400px,calc(100vw - 32px));background:var(--raised);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;max-height:min(60vh,480px);overflow:auto;transform-origin:top right;animation:dropIn var(--duration-fast) var(--ease-smooth-out)}
@keyframes dropIn{from{opacity:0;transform:scale(var(--scale-medium))}}
.search-results a{display:grid;gap:2px;padding:10px 12px;border-radius:8px;text-decoration:none}
.search-results a:hover,.search-results a[aria-selected="true"]{background:var(--soft)}
.search-results small{color:var(--muted);font-size:.8rem}
.search-results mark{background:color-mix(in srgb,var(--brand-logo) 30%,transparent);color:inherit;border-radius:2px}
.search-results p{padding:10px 12px;color:var(--muted);font-size:.9rem}

/* Hinweisband Einfache Sprache */
.plain-banner{background:var(--warn-bg);color:var(--warn-ink);border-bottom:1px solid var(--line)}
.plain-banner .wrap{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding-block:10px;font-size:.95rem}
.plain-banner button{border:1px solid currentColor;background:transparent;border-radius:8px;padding:6px 12px;cursor:pointer;color:inherit}

/* ================================================================
   Runde 4 · Tiefenschichten
   Szenen-Engine: Elemente mit .sa tragen ihr Keyframe in --an und ihren
   Bereich in --rk (cover|contain|entry|exit), --rs/--re (Prozent) bzw. bei
   .sa-root in vh ab Seitenanfang. --k/--stg staffeln Gruppen.
   Grundzustand ohne Bewegung = ruhiger, vollständig lesbarer Endzustand.
   ================================================================ */
@property --stick-n{syntax:"<length>";inherits:true;initial-value:0px}
@property --st0{syntax:"<length>";inherits:true;initial-value:0px}
@property --st1{syntax:"<length>";inherits:true;initial-value:0px}
@property --safe-b{syntax:"<length>";inherits:true;initial-value:0px}
[data-view]{view-timeline:--view block}
.sa{--an2:none}
@supports (animation-timeline:scroll()) and (timeline-scope:none){
  :root.motion-on .sa{
    --rng:var(--rk,cover) calc((var(--rs,0) + var(--k,0) * var(--stg,0)) * 1%) var(--rk,cover) calc((var(--re,100) + var(--k,0) * var(--stg,0)) * 1% - var(--re-sub,0px));
    animation:var(--an,none) var(--ease,linear) both,var(--an2,none) linear both;
    animation-timeline:var(--tl,--view),var(--tl,--view);
    animation-range:var(--rng),var(--rng);
  }
  :root.motion-on .sa-root{--rng:calc((var(--rs,0) + var(--k,0) * var(--stg,0)) * 1vh) calc((var(--re,100) + var(--k,0) * var(--stg,0)) * 1vh);animation-timeline:scroll(root),scroll(root)}
  :root.motion-on .cards.is-stacked .dp::after{animation:veil linear both;animation-timeline:var(--tl);animation-range:cover calc(var(--rs) * 1%) cover calc(100% - var(--stick-n))}
  :root.motion-on .site-head::after{display:block;animation:headProg linear both;animation-timeline:scroll(root)}
}
:root.motion-on.sda-fallback .sa{animation:var(--an,none) 1000ms var(--ease,linear) both paused,var(--an2,none) 1000ms linear both paused}
:root.motion-on.sda-fallback .cards.is-stacked .dp::after{animation:veil 1000ms linear both paused}
.site-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brand-logo);transform-origin:0 50%;transform:scaleX(0);display:none;pointer-events:none}
@keyframes headProg{to{transform:scaleX(1)}}
@keyframes skLayer{from{transform:var(--c)}to{transform:var(--o)}}
@keyframes pinIn{from{opacity:0;translate:-10px 0}to{opacity:1;translate:0 0}}
@keyframes visIn{from{visibility:hidden}to{visibility:visible}}
@keyframes visOut{from{visibility:visible}to{visibility:hidden}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes fadeIn{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes copyOut{from{opacity:1;translate:0 0}to{opacity:0;translate:0 -96px}}
@keyframes modelDock{from{transform:none}to{transform:var(--m-end)}}
@keyframes gridDrift{from{transform:translateY(0)}to{transform:translateY(-14%)}}
@keyframes netFade{0%,32%{opacity:1}43%,100%{opacity:.14}}
@keyframes gridFade{0%,32%{opacity:1}43%,100%{opacity:.5}}
@keyframes netDrift{from{transform:translateY(6%)}to{transform:translateY(-26%)}}
@keyframes glowGrow{from{transform:translate(0,-50%) scale(.82);opacity:.55}to{transform:translate(0,-50%) scale(1.08);opacity:1}}
@keyframes tintIn{from{opacity:0}to{opacity:1}}
@keyframes sink{to{transform:scale(var(--sink,.955))}}
@keyframes veil{to{opacity:1}}
@keyframes rise{from{opacity:.12;transform:translateY(64px) scale(.965)}to{opacity:1;transform:none}}
@keyframes riseS{from{opacity:.1;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes bandL{from{transform:translateX(6vw)}to{transform:translateX(min(6vw,calc(94vw - 100%)))}}
@keyframes bandR{from{transform:translateX(min(6vw,calc(94vw - 100%)))}to{transform:translateX(6vw)}}
@keyframes secOpen{from{transform:scale(.9);border-radius:36px}to{transform:scale(1.03);border-radius:36px}}
@keyframes phMove{from{transform:translateY(-15%)}to{transform:translateY(0)}}
@keyframes pathDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pathDrawY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes dotOn{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes ringIn{from{transform:rotate(-144deg)}to{transform:rotate(0deg)}}

/* ---------- Szene 1: Hero „Auftrennen“ ---------- */
.sk{position:relative}
.sk-stage{position:relative;overflow:clip;isolation:isolate}
.hero{padding-block:clamp(36px,6vw,88px) clamp(28px,4vw,56px)}
.sk-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.sk-tint{position:absolute;inset:0;background:var(--soft);opacity:0;--an:none;--rs:62;--re:96}
.sk-grid{position:absolute;inset:-12% -4% -30%;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:56px 56px;background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 58% 52% at 70% 42%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 58% 52% at 70% 42%,#000 25%,transparent 78%);--an:gridDrift;--rs:0;--re:220}
.sk-net{position:absolute;right:-6%;top:-2%;width:70%;height:104%;--an:netDrift;--rs:0;--re:220;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 55% 45%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 60% 55% at 55% 45%,#000 30%,transparent 80%)}
.sk-net .net-l{fill:none;stroke:var(--net-line);stroke-width:1.2}
.sk-net .net-n rect{fill:var(--paper);stroke:var(--net-line);stroke-width:1.2}
.sk-net .net-n rect.on{fill:var(--brand-logo);stroke:var(--brand-logo)}
.sk-glow{position:absolute;right:-6vw;top:48%;width:min(62vw,900px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent);transform:translate(0,-50%) scale(1.15);--an:glowGrow;--rs:0;--re:42}
.sk-layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(24px,4vw,64px);align-items:center}
.hero-copy{--an:none}
.hero h1{font-size:clamp(2.5rem,6vw,5rem);line-height:1.03;margin-top:18px}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero .lede{margin-top:24px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:34px;padding-top:18px;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted);list-style:none;padding-left:0}
.hero-facts b{color:var(--ink-strong);font-weight:600}
.sk-right{position:relative;min-width:0}
.sk-model{position:relative;--an:none;transform-origin:100% 0}
.sk-index{display:none}
.sk-hint{display:none}
.sk-spacer{display:block;height:0}

/* Ebenenstapel (Startseite, Leistungsseite, Kontakt) */
.stack{position:relative;width:100%;aspect-ratio:704/650;max-width:640px;margin-inline:auto}
.stack .layers{position:absolute;inset:0}
.stack .layer{position:absolute;left:0;top:0;width:100%;transform:var(--o);--an:skLayer;--ease:cubic-bezier(.45,.05,.35,1)}
.stack .layer-in{filter:var(--layer-filter);transition:transform var(--duration-medium) var(--ease-smooth-out),opacity var(--duration-fast) var(--ease-in-out)}
.stack .layer img{width:100%;pointer-events:none;user-select:none;-webkit-user-drag:none}
/* Reihenfolge wie in der Startseiten-Szene: von oben 01 Infrastruktur, 02 Kommunikation, 03 Sicherheit, 04 Projekt & Vergabe */
.stack .l-infra{z-index:4;--c:translate(0,24.6%);--o:translate(2.5%,-18%) scale(1.03);--rs:0;--re:24}
.stack .l-comm{z-index:3;--c:translate(0,33.3%);--o:translate(1.2%,16%) scale(1.015);--rs:4;--re:28}
.stack .l-security{z-index:2;--c:translate(0,35.5%);--o:translate(0,48%);--rs:8;--re:32}
.stack .l-project{z-index:1;--c:translate(0,34.6%);--o:translate(-1.5%,65%) scale(.985);--rs:0;--re:32}
.stack[data-focus] .layer-in{opacity:.28}
.stack[data-focus="project"] .l-project .layer-in,.stack[data-focus="security"] .l-security .layer-in,.stack[data-focus="comm"] .l-comm .layer-in,.stack[data-focus="infra"] .l-infra .layer-in,.stack[data-focus="all"] .layer-in{opacity:1}
.stack[data-focus="project"] .l-project .layer-in,.stack[data-focus="security"] .l-security .layer-in,.stack[data-focus="comm"] .l-comm .layer-in,.stack[data-focus="infra"] .l-infra .layer-in{transform:translateY(-6%)}
.stack .pins{list-style:none;margin:0;padding:0}
.stack .pin{position:absolute;left:64%;z-index:6;display:flex;align-items:center;transform:translateY(-50%);--an:pinIn;--an2:visIn;--rs:26;--re:32;--stg:4}
.stack .pin::before{content:"";width:28px;height:1px;background:var(--brand)}
.stack .pin::after{content:"";position:absolute;left:-4px;width:7px;height:7px;border-radius:50%;background:var(--brand)}
/* V28: Nummern auf die sichtbare Fläche der jeweiligen Platte (Infrastruktur ohne Sockel) */
.stack .p-infra{top:12%}.stack .p-comm{top:40%}.stack .p-security{top:56%}.stack .p-project{top:70%}
/* V29: Grundplatten 05/06 (Digitalisierung, Dauerbetreuung) – breiter, unter dem Stapel, in den Farben der Szene */
.stack.has-found{aspect-ratio:704/860}
.stack.has-found .p-infra{top:9%}.stack.has-found .p-comm{top:30%}.stack.has-found .p-security{top:42.5%}.stack.has-found .p-project{top:53%}.stack.has-found .p-f5{top:68%}.stack.has-found .p-f6{top:80%}
.stack.has-found .l-comm{--o:translate(1.2%,8%) scale(1.015)}.stack.has-found .l-security{--o:translate(0,40%)}.stack.has-found .l-project{--o:translate(-1.5%,68%) scale(.985)}
.stack .l-f5{z-index:0;--c:translate(0,34%);--o:translate(-2%,97%) scale(1.05);--rs:0;--re:32}
.stack .l-f6{z-index:-1;--c:translate(0,34%);--o:translate(-2.5%,126%) scale(1.09);--rs:0;--re:32}
.stack .l-f5 img{filter:sepia(.5) hue-rotate(95deg) saturate(2.2) brightness(1.02)}
.stack .l-f6 img{filter:sepia(.6) hue-rotate(130deg) saturate(2.6) brightness(.82)}
.stack[data-focus="f5"] .l-f5 .layer-in,.stack[data-focus="f6"] .l-f6 .layer-in{opacity:1;transform:translateY(-6%)}
.pins-out{position:absolute;inset:0;z-index:6;--an:none}
.pin-btn{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px 0 6px;border-radius:999px;border:1px solid var(--line);background:var(--raised);box-shadow:0 4px 14px rgba(20,40,40,.10);font:500 .86rem/1.1 var(--sans);color:var(--ink-strong);cursor:pointer;text-decoration:none;white-space:nowrap;transition:border-color var(--duration-fast) var(--ease-smooth-out)}
.pin-btn b,.badge{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--soft-2);color:var(--brand-ink);font:700 .72rem var(--sans);font-variant-numeric:tabular-nums;flex:none}
.pin-btn:hover,.pin-btn[aria-current="true"]{border-color:var(--brand)}
.pin-btn[aria-current="true"] b{background:var(--brand);color:var(--on-brand)}
/* ohne dekorative Bilder: Markierungen als ruhige Liste */
:root.pref-nodeco .stack{aspect-ratio:auto;max-width:none}
:root.pref-nodeco .stack .pins{display:grid;gap:8px}
:root.pref-nodeco .stack .pin{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto}
:root.pref-nodeco .stack .pin::before,:root.pref-nodeco .stack .pin::after{display:none}
:root.pref-nodeco .pin-btn{white-space:normal}

/* ---------- Szene 2: Systemkarte als Kartenstapel ---------- */
.sk-fields{background:var(--soft);padding-block:clamp(56px,8vw,112px)}
.sk-head{max-width:760px;margin-bottom:clamp(28px,4vw,48px)}
.sk-head h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.08;margin-top:14px}
.sk-head .lede{margin-top:18px}
.cards{position:relative;display:grid;gap:clamp(18px,2.4vw,28px);--st0:calc(var(--head-b) + 20px);--st1:14px}
.card-anchor{display:block;height:0;overflow:hidden}
.cards>.card-anchor{margin-bottom:calc(-1 * clamp(18px,2.4vw,28px))}
.card{position:relative;container-type:inline-size;outline:none;border-radius:22px}
.card:focus-visible .card-in{outline:3px solid var(--focus);outline-offset:3px}
.dp{position:relative;border-radius:22px;transform-origin:50% 0;--an:none;--rk:cover;--rs:42;--re:100;--re-sub:var(--stick-n);--stick-n:calc(var(--st0) + var(--jn) * var(--st1))}
.dp::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;background:var(--veil);opacity:0;pointer-events:none}
.cards.is-stacked .dp{--an:sink;will-change:transform}
.cards.is-stacked .card{position:sticky;top:calc(var(--st0) + var(--j) * var(--st1))}
.cards.is-stacked{padding-bottom:6vh}
.card-in{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:clamp(20px,5cqi,38px);border-radius:22px;
  background:linear-gradient(165deg,color-mix(in srgb,var(--brand-logo) 9%,var(--raised)) 0%,var(--raised) 42%);border:1px solid var(--card-line);box-shadow:var(--card-shadow)}
.card-in::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--brand-logo) 55%,transparent),transparent);opacity:.8}
.card-num{position:absolute;right:clamp(14px,3cqi,28px);top:-.14em;font:500 clamp(4.6rem,15cqi,8.4rem)/1 var(--serif);letter-spacing:-.04em;color:color-mix(in srgb,var(--brand) 10%,transparent);pointer-events:none;user-select:none}
.card-main,.card-detail,.card-side{position:relative;min-width:0}
.card .kicker{display:flex;align-items:center;gap:10px}
.card .kicker span{min-width:0}
.card .kicker span{font:600 .8rem/1.3 var(--sans);color:var(--brand);letter-spacing:.06em}
.card h3{font-size:clamp(1.45rem,4.2cqi,2.05rem);line-height:1.14;margin-top:12px;max-width:22ch}
.card .short{margin-top:12px;font-size:1.06rem;color:var(--ink-strong);max-width:52ch}
.card .long{color:var(--muted);max-width:60ch}
.card-side .deliver{margin-top:10px}
.card-side .text-link{display:inline-block;margin-top:16px;max-width:100%}
.card-detail{display:grid;gap:18px}
@container (min-width:640px){
  .card-in{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);column-gap:clamp(24px,5cqi,44px);row-gap:12px}
  .card-detail{display:contents}
  .card-main{grid-column:1}
  .card .long{grid-column:1}
  .card-side{grid-column:2;grid-row:1 / span 2;align-self:end;padding-top:clamp(40px,10cqi,96px)}
}
.card-more{display:none}
.kicker{display:flex;align-items:center;gap:12px}
.glyph{width:46px;height:42px;flex:none;overflow:visible}
.glyph .g{fill:var(--paper);stroke:var(--line-strong);stroke-width:1.2;stroke-linejoin:round;transition:fill var(--duration-fast) var(--ease-in-out)}
.glyph .g.on{fill:var(--brand-logo);stroke:var(--brand-ink)}
.glyph.all .g{fill:color-mix(in srgb,var(--brand-logo) 55%,var(--paper));stroke:var(--brand-ink)}
.glyph-s{width:26px;height:24px}
.kicker span{font:600 .8rem/1.3 var(--sans);color:var(--brand);letter-spacing:.06em}
.list-label{font:600 .72rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.more{margin-top:8px;padding:6px 0;border:0;background:none;color:var(--brand);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.deliver{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--line)}
.deliver li{display:flex;min-width:0;gap:10px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line);font-size:.94rem}
.deliver li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none;transform:translateY(-2px)}
.text-link{display:inline;color:var(--brand);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.text-link .icon{display:inline-block;vertical-align:-3px;margin-left:6px}
.nowrap{white-space:nowrap}
:root:is(.pref-bigtext,.pref-spacing,.pref-dyslexic) .nowrap{white-space:normal}
.text-link:hover{color:var(--brand-ink)}
/* Kapitelindex (nur angeheftete Desktop-Szene) */
.sk-index-h{font:600 .78rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.field-group{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:12px 0 4px}
.sk-index-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sk-index-list li{border-bottom:1px solid var(--line)}
.sk-index-list a{display:grid;grid-template-columns:28px 26px minmax(0,1fr);align-items:center;gap:6px;min-height:40px;padding:6px 4px 6px 12px;text-decoration:none;font-size:.93rem;color:var(--ink);transition:color var(--duration-fast) var(--ease-in-out),box-shadow var(--duration-fast) var(--ease-smooth-out)}
.sk-index-list .num{font:600 .76rem var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.sk-index-list a:hover{color:var(--brand)}
.sk-index-list a[aria-current="true"]{color:var(--ink-strong);font-weight:600;box-shadow:inset 3px 0 0 var(--brand)}
.sk-index .glyph .g{transition:none}
.sk-index-list a[aria-current="true"] .num{color:var(--brand)}

/* ---------- Szene 3: Branchen-Laufband ---------- */
.band{position:relative;overflow:clip;padding-block:clamp(26px,3.6vw,52px);border-bottom:1px solid var(--line)}
.band-rows{display:grid;gap:.1em}
.band-track{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.18em .42em;margin:0 auto;max-width:var(--max);padding-inline:var(--gutter);font:400 clamp(1.2rem,2.2vw,1.75rem)/1.2 var(--serif);letter-spacing:-.02em;color:var(--ink-strong);text-align:center}
.band-track .lead{color:var(--brand)}
.band-track.r2{color:var(--muted)}
.band-track i{width:.2em;height:.2em;border-radius:50%;background:var(--brand-logo);flex:none}
:root.motion-on .band-track{flex-wrap:nowrap;width:max-content;max-width:none;white-space:nowrap;padding-inline:0;margin:0;font-size:clamp(1.2rem,2.2vw,1.75rem);--rk:cover;--rs:10;--re:90}
:root.motion-on .band-track.r1{--an:bandL}
:root.motion-on .band-track.r2{--an:bandR}
:root[data-contrast="high"] .band-track.r2{color:var(--ink-strong)}

/* ---------- Szene 4: Sicherheit, Maskenöffnung ---------- */
.section{--sec-pad:clamp(56px,8vw,112px);padding-block:var(--sec-pad)}
/* Sprungziele: die Überzeile landet knapp unter dem Kopf, nicht der leere Innenabstand des Abschnitts */
.section[id]{scroll-margin-top:calc(8px - var(--sec-pad))}
.section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 56px;align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.section-head h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.08;margin-top:14px}
.security .eyebrow{color:var(--night-accent)}
.tinted{background:var(--soft)}
.security{position:relative;background:var(--night);color:var(--night-ink);isolation:isolate;overflow:clip}
.sec-bg{display:none;position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 70% 60% at 78% 30%,color-mix(in srgb,var(--brand-logo) 18%,transparent),transparent 70%),var(--night);--an:secOpen;--rk:entry;--rs:0;--re:80}
:root.motion-on .security{background:transparent}
:root.motion-on .sec-bg{display:block}
.security h2,.security h3{color:#fff}
.security-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,5vw,80px);align-items:center}
.security h2{font-size:clamp(2rem,4vw,3rem);line-height:1.08;margin-top:14px}
.security .lede{color:var(--night-muted);margin-top:18px}
.sec-visual{position:relative}
.sec-photo{margin:0;position:relative}
.sec-photo .ph{position:relative;overflow:hidden;border-radius:18px;aspect-ratio:16/11;box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
.sec-photo img{position:absolute;left:0;top:0;width:100%;height:118%;object-fit:cover;filter:saturate(.8);transform:translateY(-7.5%);--an:phMove;--rk:cover}
.sec-photo figcaption{position:absolute;right:12px;top:12px;font-size:.74rem;color:#e6efee;background:rgba(10,16,16,.75);padding:4px 8px;border-radius:4px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;list-style:none}
.chips li{border:1px solid var(--night-line);padding:6px 11px;border-radius:6px;font-size:.86rem;color:#fff}
.steps{list-style:none;margin:clamp(40px,6vw,72px) 0 0;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.step{position:relative;padding:clamp(18px,2.4vw,28px);border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid var(--night-line);--an:rise;--rk:entry;--rs:20;--re:95;--stg:10}
.step::before{counter-increment:s;content:"0" counter(s);display:block;font:600 .8rem var(--sans);color:var(--night-accent);margin-bottom:10px}
.steps h3{font-size:1.2rem}
.steps p{margin-top:6px;color:var(--night-muted);font-size:.95rem}
.security .note{margin-top:clamp(28px,4vw,44px);padding-top:20px;border-top:1px solid var(--night-line);max-width:80ch;color:var(--night-muted);font-size:.95rem}
.security .note b{color:#fff;font-family:var(--serif);font-weight:500}
.security .text-link{color:var(--night-accent)}

/* ---------- Szene 5: Vorgehen als Pfad ---------- */
.phases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);position:relative}
.phases::before{content:"";position:absolute;left:0;right:0;top:22px;height:1px;background:var(--line)}
.phases .path{position:absolute;left:0;right:0;top:21px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--brand-logo),var(--brand));transform-origin:0 50%;--an:pathDraw;--rk:cover;--rs:16;--re:52}
.phase{position:relative;min-width:0;--an:rise;--rk:cover;--rs:8;--re:34;--stg:6}
.phase .dot{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--paper);border:1px solid var(--line-strong);font:600 .84rem var(--sans);color:var(--brand);font-variant-numeric:tabular-nums}
.phase .dot span{position:relative;z-index:1}
.dot-fill{position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--brand);box-shadow:0 0 0 6px color-mix(in srgb,var(--brand-logo) 18%,transparent);--an:dotOn;--rk:cover;--rs:18;--re:24;--stg:9}
.phase-body{margin-top:18px;padding:18px 18px 16px;border-radius:18px;background:var(--raised);border:1px solid var(--line);box-shadow:0 14px 34px -22px rgba(20,48,46,.35)}
.phase h3{font-size:1.35rem}
.phase p{margin-top:8px;color:var(--muted);font-size:.95rem}
.phase ul{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)}
.phase li{border-bottom:1px solid var(--line);font-size:.88rem;padding:8px 0;color:var(--muted)}
.phase li:last-child{border-bottom:0;padding-bottom:0}

/* ---------- Szene 6: Profil, Wertering formtreu ---------- */
.profile-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.profile-copy p{color:var(--muted);max-width:62ch}
.profile-copy .quote{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);color:var(--ink)}
.profile-copy .quote b{display:block;font-family:var(--serif);font-weight:500;font-size:1.25rem;color:var(--ink-strong)}
.values{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:center}
.values-side{display:grid;gap:16px;min-width:0}
.ring{width:200px;height:200px}
#ring-segs{transform-box:view-box;transform-origin:50% 50%;--an:ringIn;--rk:cover;--rs:6;--re:46;--ease:cubic-bezier(.3,.1,.3,1)}
.ring .seg{fill:var(--soft-2);cursor:pointer;transition:fill var(--duration-fast) var(--ease-in-out)}
.ring .seg:hover{fill:color-mix(in srgb,var(--brand-logo) 40%,var(--soft-2))}
.ring .seg.on{fill:var(--brand-logo)}
.ring text{font:600 9px var(--sans);fill:var(--muted);pointer-events:none}
.ring .seg.on+text{fill:var(--on-brand)}
.ring .centre{font:500 12px var(--serif);fill:var(--ink-strong)}
.ring .logo-bg{fill:var(--paper)}
.ring .logo-plate{fill:var(--logo-plate)}
.value-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.value-list button{display:flex;gap:12px;width:100%;min-height:44px;padding:10px 4px;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;cursor:pointer}
.value-list button span{font:600 .76rem var(--sans);color:var(--muted);padding-top:3px;font-variant-numeric:tabular-nums}
.value-list button[aria-pressed="true"]{color:var(--brand-ink);font-weight:600}
.value-list button[aria-pressed="true"] span{color:var(--brand)}
.value-text{border-left:3px solid var(--brand-logo);padding-left:14px;min-height:4.8em}
.value-text b{font-family:var(--serif);font-weight:500;color:var(--ink-strong)}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(40px,6vw,72px)}
.pillar{position:relative;padding:clamp(18px,2.2vw,26px);border-radius:18px;background:var(--raised);border:1px solid var(--card-line);box-shadow:var(--card-shadow);overflow:hidden;--an:rise;--rk:cover;--rs:4;--re:34;--stg:6}
.pillar::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand-logo),transparent)}
.pillar h3{font-size:1.35rem;margin:0}
.pillar p{margin-top:8px;color:var(--muted)}

/* ---------- Szene 7: Versprechen ---------- */
.promise{margin-top:clamp(48px,7vw,88px);border-top:1px solid var(--line);padding-top:clamp(28px,4vw,48px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,56px);align-items:start}
.promise-head h3{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;margin:0;max-width:20ch;text-wrap:balance}
.promise-head .lede{margin-top:14px}
.promise-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px);align-items:stretch}
.pillar h3 span,.fact h4 span{display:block;font:600 .72rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:10px}
.fact h4{font-family:var(--serif);font-weight:500;font-size:1.3rem;line-height:1.2;margin:0;color:var(--ink-strong)}
@media (max-width:900px){.promise{grid-template-columns:minmax(0,1fr)}}
.fact{padding:clamp(18px,2.2vw,26px);border-radius:18px;background:var(--raised);border:1px solid var(--card-line);box-shadow:var(--card-shadow);--an:rise;--rk:cover;--rs:4;--re:30;--stg:6}
.fact p{margin-top:10px;color:var(--muted)}

/* ---------- Kennenlernen: Das sind wir ---------- */
.team-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,80px);align-items:center}
.team h2{font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.08;margin-top:14px;max-width:18ch}
.team .lede{margin-top:18px;max-width:46ch}
.team .list-label{margin-top:28px}
.team-steps{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.team-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:10px;padding:14px 0;border-bottom:1px solid var(--line);--an:riseS;--rk:cover;--rs:8;--re:26;--stg:4}
.team-steps .n{grid-row:span 2;font:600 .8rem var(--sans);color:var(--brand);font-variant-numeric:tabular-nums;padding-top:3px}
.team-steps b{font-family:var(--serif);font-weight:500;font-size:1.12rem;color:var(--ink-strong)}
.team-steps p{margin:2px 0 0;color:var(--muted);font-size:.95rem}
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.person{margin:0;--an:rise;--rk:cover;--rs:4;--re:30;--stg:6}
.person:nth-child(2){margin-top:clamp(24px,4vw,56px)}   /* leichter Versatz der Gesellschafter-Bilder */
.person-ph{position:relative;overflow:hidden;border-radius:18px;aspect-ratio:4/5;background:#0a1819;box-shadow:var(--card-shadow)}
.person-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--duration-fast) var(--ease-smooth-out)}
.person:hover .person-ph img{transform:scale(1.03)}
.ph-tag{position:absolute;left:12px;bottom:12px;font:600 .72rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#dff3f1;background:rgba(6,20,22,.72);border:1px solid rgba(111,222,211,.35);padding:6px 9px;border-radius:999px}
.person figcaption{margin-top:12px;display:grid;gap:2px}
.person figcaption b{font-family:var(--serif);font-weight:500;font-size:1.2rem;color:var(--ink-strong)}
.person figcaption span{font-size:.88rem;color:var(--muted)}
@media (max-width:900px){.team-grid{grid-template-columns:minmax(0,1fr)}.people{max-width:560px}}

/* ---------- Szene 8: Kontakt ---------- */
.contact .contact-card{box-shadow:var(--shadow)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.contact h2{font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.05;margin-top:14px}
.contact .lede{margin-top:20px}
.contact-side{position:relative;min-width:0}
.contact-card{position:relative;z-index:1;border:1px solid var(--line);border-radius:16px;padding:clamp(20px,3vw,32px);display:grid;gap:18px;background:var(--raised)}
.contact-line{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line)}
.contact-line .val{font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.7rem);color:var(--ink-strong);text-decoration:none}
.contact-line small{display:block;font-size:.76rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.copy-btn{min-height:36px;border:1px solid var(--line-strong);background:transparent;border-radius:8px;padding:6px 12px;font-size:.84rem;cursor:pointer}
.copy-btn:hover{border-color:var(--brand);color:var(--brand)}

@media (min-width:901px) and ((max-width:1099px) or (max-height:699px)){
  .stack .l-project{--rs:0;--re:14}.stack .l-security{--rs:2;--re:16}.stack .l-comm{--rs:4;--re:18}.stack .l-infra{--rs:0;--re:18}
  .stack .pin{--rs:16;--re:21;--stg:2}
}
/* ---------- Angeheftete Desktop-Szene (breit und hoch genug, Bewegung erlaubt) ---------- */
@media (min-width:1100px) and (min-height:700px){
  :root.motion-on .sk-stage{position:sticky;top:var(--head-b);height:calc(100vh - var(--head-b));height:calc(100svh - var(--head-b));padding-block:0}
  :root.motion-on .sk-layout{height:100%}
  :root.motion-on .sk-tint{--an:tintIn;--rs:72;--re:96}
  :root.motion-on .sk-net{--an2:netFade}
  :root.motion-on .sk-grid{--an2:gridFade}
  :root.motion-on .hero-copy{--an:copyOut;--an2:visOut;--rs:68;--re:82;--ease:cubic-bezier(.45,0,.8,.35)}
  :root.motion-on .sk-right{align-self:stretch;display:flex;flex-direction:column;justify-content:center}
  :root.motion-on .sk-model{width:min(100%,calc((100svh - var(--head-b)) * 1.02));margin-inline:auto;--an:modelDock;--rs:74;--re:96;--m-end:translate(0%,-14%) scale(.6);--ease:cubic-bezier(.45,.05,.35,1)}
  :root.motion-on .pins-out{--an:fadeOut;--an2:visOut;--rs:66;--re:72}
  :root.motion-on .sk-index{display:block;position:absolute;right:0;bottom:clamp(20px,5vh,56px);width:min(380px,62%);--an:fadeIn;--an2:visIn;--rs:90;--re:102}
  :root.motion-on .sk-hint{display:flex;position:absolute;left:50%;bottom:clamp(14px,3vh,28px);z-index:2;translate:-50% 0;flex-direction:column;align-items:center;gap:8px;margin:0;font:600 .72rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);--an:fadeOut;--an2:visOut;--rs:0;--re:8}
  :root.motion-on .sk-hint i{width:1px;height:34px;background:linear-gradient(var(--brand),transparent)}
  :root.motion-on .sk-flow{position:relative;z-index:3;margin-top:calc(-100vh + var(--head-b));margin-top:calc(-100svh + var(--head-b));pointer-events:none}
  :root.motion-on .sk-spacer{height:calc(180vh - var(--head-b))}
  :root.motion-on .sk-fields{background:transparent;padding-block:0 8vh}
  :root.motion-on .sk-col{width:58%;pointer-events:auto}
}

/* Unterseiten */
.page-hero{padding-block:clamp(36px,6vw,80px) clamp(20px,3vw,40px)}
.page-hero h1{font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.05;margin-top:14px}
.page-hero .lede{margin-top:20px}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:center}
.crumbs{font-size:.86rem;color:var(--muted)}
.crumbs a{color:var(--muted)}
.svc-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(24px,5vw,80px);padding-block:clamp(24px,4vw,48px) clamp(56px,8vw,112px)}
.svc-nav{position:sticky;top:calc(var(--head-b) + 24px);align-self:start}
.svc-nav ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc-nav a{display:grid;grid-template-columns:30px 26px minmax(0,1fr);align-items:center;gap:6px;min-height:48px;padding:8px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:.95rem;transition:color var(--duration-fast) var(--ease-in-out)}
.svc-nav .num{font:600 .78rem var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.svc-nav a:hover{color:var(--brand)}
.svc-nav a[aria-current="true"]{color:var(--ink-strong);font-weight:600}
.svc-nav a[aria-current="true"] .num{color:var(--brand)}
.service{--svc-pad:clamp(36px,5vw,64px);padding-block:var(--svc-pad);border-top:1px solid var(--line);scroll-margin-top:calc(8px - var(--svc-pad))}
.svc-layout{scroll-margin-top:calc(8px - clamp(24px,4vw,48px))}
@media (max-width:900px){:root:has(.svc-nav) .svc-layout{scroll-margin-top:calc(-76px - clamp(24px,4vw,48px))}}   /* Sprung zu „Alle sechs im Überblick“: Feldnavigation direkt unter dem Kopf */
.service:first-child{border-top:0;padding-top:0}
.service h2{margin-top:14px;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.1}
.service .short{margin-top:14px;font-size:1.1rem;color:var(--ink-strong)}
.service .long{margin-top:12px;color:var(--muted);max-width:66ch}
.service .list-label{margin-top:26px}
.service .deliver{margin-top:10px}
.service .deliver{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;border-top:0}
.service .deliver li:nth-child(-n+2){border-top:1px solid var(--line)}
.prose{max-width:760px}
.legal-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,5vw,72px);padding-bottom:clamp(56px,8vw,112px)}
.toc{position:sticky;top:calc(var(--head-b) + 24px);align-self:start;border-left:2px solid var(--line);padding-left:16px;display:grid;gap:4px;font-size:.92rem}
.toc a{text-decoration:none;color:var(--muted);display:block;min-height:24px;padding-block:2px}
.toc a:hover{color:var(--brand)}
.prose h2{font-size:1.6rem;margin-top:44px;scroll-margin-top:calc(var(--head-b) + 24px)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.15rem;margin-top:26px}
.prose h4{font-size:1rem;margin-top:20px}   /* V30: vierte Ebene der übernommenen Datenschutzerklärung */
.prose h3+h4{margin-top:10px}
.prose p,.prose ul,.prose address{margin-top:12px;color:var(--ink)}
.prose address{font-style:normal}
.prose ul{padding-left:1.2em}
.prose li{margin-top:4px}
.prose a{color:var(--brand)}
.notice{border:1px solid var(--line);border-left:4px solid var(--brand-logo);border-radius:10px;padding:14px 16px;background:var(--soft);margin-top:18px}
.notice strong{display:block;margin-bottom:4px}   /* V28: Titel des Hinweises als eigene Zeile */
.notice b{display:block;color:var(--ink-strong)}
.feature-list{list-style:none;padding:0!important;display:grid;gap:0;border-top:1px solid var(--line)}
.feature-list li{padding:12px 0;border-bottom:1px solid var(--line);margin:0!important}
.state{display:inline-block;font:600 .7rem var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:4px;margin-right:8px;vertical-align:1px}
.state.ok{background:color-mix(in srgb,var(--brand) 18%,transparent);color:var(--brand-ink)}
.state.open{background:var(--warn-bg);color:var(--warn-ink);border:1px solid color-mix(in srgb,var(--warn-ink) 30%,transparent)}

/* Fuß */
.site-foot{border-top:1px solid var(--line);padding-block:32px;background:var(--paper)}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between}
.site-foot nav ul{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:0;padding:0;font-size:.92rem}
.site-foot nav a{display:inline-block;padding:6px 0}
.site-foot small{color:var(--muted);font-size:.84rem}

/* Dialoge: Öffnen 250 ms, Schließen 150 ms (Panel 400/350 ms) */
dialog{border:1px solid var(--line);border-radius:16px;padding:0;background:var(--raised);color:var(--ink);width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 24px);box-shadow:var(--shadow);overscroll-behavior:contain}
dialog::backdrop{background:rgba(8,16,16,.45)}
dialog[open]{animation:dlgIn var(--duration-fast) var(--ease-smooth-out)}
dialog.closing{animation:dlgOut var(--duration-quick) var(--ease-smooth-out) forwards}
@keyframes dlgIn{from{opacity:0;transform:scale(var(--scale-large))}}
@keyframes dlgOut{to{opacity:0;transform:scale(var(--scale-large))}}
.side-panel{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(420px,100vw);border-radius:0;border-width:0 0 0 1px;display:flex;flex-direction:column}
.side-panel:not([open]){display:none}
.side-panel[open]{animation:panelIn var(--duration-slow) var(--ease-smooth-out)}
.side-panel.closing{animation:panelOut var(--duration-medium) var(--ease-smooth-out) forwards}
@keyframes panelIn{from{transform:translateX(24px);opacity:0}}
@keyframes panelOut{to{transform:translateX(24px);opacity:0}}
.dlg-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);flex:none}
.dlg-head .brand-mini{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dlg-head h2{font-size:1.3rem}
.dlg-body{padding:6px 18px 18px;overflow:auto;flex:1}
.dlg-note{font-size:.88rem;color:var(--muted);margin:10px 0 4px}
.pref{padding:14px 0;border-bottom:1px solid var(--line)}
.pref-title{display:block;font-weight:600;color:var(--ink-strong)}
.pref small{display:block;color:var(--muted);font-size:.84rem;margin-top:2px}
.pref-row{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer}
.size-ctl{display:flex;align-items:center;gap:8px;margin-top:10px}
.size-ctl button{width:44px;height:44px;border:1px solid var(--line-strong);border-radius:10px;background:transparent;cursor:pointer;font-weight:700}
.size-ctl button:disabled{opacity:.4;cursor:not-allowed}
.size-ctl output{min-width:64px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.radio-rows{display:grid;gap:6px;margin-top:10px;border:0;padding:0}
.radio-rows legend{padding:0}
.radio-row{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.radio-row:has(input:checked){border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,transparent)}
.radio-row input{width:18px;height:18px;accent-color:var(--brand);margin:0}
.switch{appearance:none;-webkit-appearance:none;width:46px;height:28px;border-radius:999px;background:var(--line-strong);position:relative;cursor:pointer;flex:none;transition:background-color var(--duration-fast) var(--ease-smooth-out);margin:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--paper);transition:transform var(--duration-fast) var(--ease-smooth-out)}
.switch:checked{background:var(--brand)}
.switch:checked::after{transform:translateX(18px)}
.switch:disabled{opacity:.45;cursor:not-allowed}
.dlg-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding-top:16px}
.dlg-foot a{font-size:.9rem;color:var(--brand)}
.status-msg{font-size:.86rem;color:var(--brand-ink);min-height:1.3em;margin-top:8px}
.drawer-nav{display:grid;padding:4px 18px}
.drawer-nav a[aria-current="true"],.drawer-nav a[aria-current="page"]{color:var(--brand);box-shadow:inset 3px 0 0 var(--brand);padding-left:12px!important}
.drawer-nav a{padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:1.12rem;font-family:var(--serif)}
.drawer-tools{display:flex;gap:10px;padding:16px 18px;flex-wrap:wrap;align-items:center}
body.dlg-lock{overflow:hidden}

/* Große Schrift oder zu breite Kopfzeile (head-compact setzt site.js nach Messung): Navigation ins Menü */
:root:is(.pref-bigtext,.head-compact) .main-nav,:root:is(.pref-bigtext,.head-compact) .head-tools .search,:root:is(.pref-bigtext,.head-compact) .head-tools .lang,:root:is(.pref-bigtext,.head-compact) .head-tools .a11y-btn{display:none}
:root:is(.pref-bigtext,.head-compact) .menu-btn,:root:is(.pref-bigtext,.head-compact) .mobile-search-btn{display:inline-grid}
:root:is(.pref-bigtext,.head-compact) .search.mobile-open{display:block!important;position:absolute;left:var(--gutter);right:var(--gutter);top:calc(100% + 6px)}
:root:is(.pref-bigtext,.head-compact) .search.mobile-open .search-field{width:100%;box-shadow:var(--shadow)}
:root:is(.pref-bigtext,.head-compact) .search.mobile-open .search-results{left:0;right:0;width:auto}
:root.pref-bigtext .brand-name span{display:none}
@media (max-width:700px){:root.pref-bigtext .brand-name,:root.pref-bigtext .head-tools .theme-switch{display:none}}
:root:is(.pref-bigtext,.pref-spacing,.pref-dyslexic):not(.pref-nodeco) .pin-btn span{display:none}
:root:is(.pref-bigtext,.pref-spacing,.pref-dyslexic):not(.pref-nodeco) .pin-btn{padding:0 6px}
/* Große Schrift: Display-Überschriften an die Breite binden, damit Wörter ganz bleiben */
:root.pref-bigtext .hero h1,:root.pref-bigtext .page-hero h1{font-size:min(2.5rem,11vw)}
:root.pref-bigtext .section-head h2,:root.pref-bigtext .contact h2,:root.pref-bigtext .sk-head h2{font-size:min(2rem,9vw)}
:root.pref-bigtext .card h3{font-size:min(1.6rem,8vw)}
:root.pref-bigtext .card-num{display:none}
/* Responsiv */
@media (min-width:901px) and (max-width:1320px){.stack .pin{left:52%}}
@media (max-width:1120px){
  .main-nav,.head-tools .search,.head-tools .lang,.head-tools .a11y-btn{display:none}
  .menu-btn,.mobile-search-btn{display:inline-grid}
  :root{--head-h:64px}
  .search.mobile-open{display:block!important;position:absolute;left:var(--gutter);right:var(--gutter);top:calc(var(--head-h) + 6px)}
  .search.mobile-open .search-field{width:100%;box-shadow:var(--shadow)}
  .search.mobile-open .search-results{left:0;right:0;width:auto}
}
@media (max-width:900px){
  .sk-layout,.section-head,.security-grid,.profile-grid,.promise-grid,.contact-grid,.page-hero-grid{grid-template-columns:minmax(0,1fr)}
  .sk-right,.hero-visual{max-width:440px;margin-inline:auto;width:100%}
  /* Handy/Tablet hoch: Ebenen heben sich einzeln, oben beginnend (bestätigter Ablauf) */
  .stack .l-project{--rs:2;--re:16}.stack .l-security{--rs:16;--re:30}.stack .l-comm{--rs:30;--re:44}.stack .l-infra{--rs:0;--re:44}
  .stack .pin{--rs:16;--re:22;--stg:14}
  .sk-grid{-webkit-mask-image:radial-gradient(ellipse 80% 42% at 50% 72%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 80% 42% at 50% 72%,#000 25%,transparent 78%)}
  .sk-net{right:-20%;top:40%;width:140%;height:62%}
  .sk-glow{right:auto;left:50%;top:74%;width:120vw;translate:-50% 0}
  .cards{--st0:calc(var(--head-b) + 12px);--st1:10px}
  :root.js .card-detail:not(.open){display:none}
  .card-more{display:inline-block}
  .card-detail{margin-top:4px}
  .steps{grid-template-columns:minmax(0,1fr)}
  .sec-visual{max-width:560px}
  .sec-photo .ph{aspect-ratio:16/10}
  .svc-layout{grid-template-columns:minmax(0,1fr);padding-top:0}
  .svc-nav{position:sticky;top:var(--head-b);z-index:6;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);margin-inline:calc(-1 * var(--gutter));padding:10px var(--gutter);border-block:1px solid var(--line)}
  .svc-nav ul{display:flex;gap:8px;overflow-x:auto;border:0;scrollbar-width:none}
  .svc-nav li{flex:none}
  .svc-nav a{display:flex;gap:8px;min-height:40px;padding:6px 14px;border:1px solid var(--line-strong);border-radius:999px;white-space:nowrap;font-size:.9rem}
  .svc-nav a .glyph-s{display:none}
  .svc-nav a[aria-current="true"]{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
  .svc-nav a[aria-current="true"] .num{color:var(--brand-logo)}
  :root:has(.svc-nav){scroll-padding-top:calc(var(--head-b) + 84px)}
  .phases{grid-template-columns:minmax(0,1fr);gap:0}
  .phases::before{left:21px;right:auto;top:8px;bottom:24px;width:1px;height:auto}
  .phases .path{left:20px;right:auto;top:8px;bottom:24px;width:3px;height:auto;transform-origin:50% 0;--an:pathDrawY;--rs:6;--re:70}
  .phase{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:0 0 22px;--rs:4;--re:22;--stg:10}
  .dot-fill{--rs:10;--re:16;--stg:16}
  .phase-body{margin-top:0}
  .phase ul{max-width:520px}
  .pillars{grid-template-columns:1fr}
  .legal-grid{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;border-left:0;padding-left:0;display:flex;flex-wrap:wrap;gap:8px 16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
}
@media (max-width:560px){
  .brand-name span{display:none}
  .values{grid-template-columns:minmax(0,1fr);justify-items:center;gap:20px}
  .values-side{width:100%}
  .promise-grid{grid-template-columns:minmax(0,1fr)}
  .sk-right,.hero-visual{max-width:360px}
  .service .deliver{grid-template-columns:minmax(0,1fr)}
  .service .deliver li:nth-child(2){border-top:0}
  .stack .pin::before{width:14px}
  .pin-btn span{display:none}
  .pin-btn{padding:0 6px}
  :root.pref-nodeco .pin-btn span{display:inline}
  .theme-switch{width:60px}
  .theme-switch[aria-checked="true"] .knob{transform:translateX(16px)}
  .theme-switch .i-sun{margin-left:6px}.theme-switch .i-moon{margin-right:6px}
  .head-row{gap:8px}
  .card .kicker span{font-size:.74rem}
}
@media (max-width:400px){.site-head .brand-name{display:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
:root.pref-still{scroll-behavior:auto}
:root.pref-still *,:root.pref-still *::before,:root.pref-still *::after{transition-duration:.01ms!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
@media print{.site-head,.preview-ribbon,.site-foot nav,dialog,.stack,.sk-bg,.sk-hint,.sk-index,.band{display:none!important}.sk-stage{position:static!important;height:auto!important}.sk-flow{margin-top:0!important}.sk-spacer{display:none!important}.cards .card{position:static!important}.card-detail{display:grid!important}}
.prose table{width:100%;border-collapse:collapse;margin-top:14px;font-size:.92rem}.prose th,.prose td{text-align:left;vertical-align:top;padding:9px 10px;border-bottom:1px solid var(--line)}.prose th{font-weight:600;color:var(--ink-strong)}.prose img{border-radius:10px;border:1px solid var(--line)}@media (max-width:560px){.prose table{display:block;overflow-x:auto}}
/* Leistungsseite: kurzer Einstieg, Stapel öffnet sich früh */
.svc-hero .stack .layer{--rs:0;--re:16}.svc-hero .stack .l-security{--rs:2;--re:18}.svc-hero .stack .l-comm{--rs:4;--re:20}
.svc-hero .stack .pin{--rs:12;--re:18;--stg:2}

/* ================================================================== Runde 7: Einstieg „Stadtkarte“
   Erde → Wuppertal → vier Ebenen steigen aus der Stadt. Mit Bewegung: angeheftete WebGL-Bühne, Karten scrollen darüber.
   Ohne Bewegung (System, Einstellung, Textgröße ab 150 %, ohne JavaScript): Standbild und Karten als ruhige Liste. */
.city,:root.on-scene:not([data-contrast="high"]) .site-head{
  color-scheme:dark;
  --paper:#0f1515;--soft:#152020;--soft-2:#1d2a2a;--raised:#172121;
  --ink:#d9e4e3;--ink-strong:#f3f8f7;--muted:#9eb1af;--line:#2a3838;--line-strong:#4a5f5d;
  --brand:#6fded3;--brand-logo:#1fb5ad;--brand-ink:#9aeee5;--on-brand:#0b1414;
  --btn:#e9f2f1;--btn-ink:#0f1515;--btn-hover:#9aeee5;--focus:#6fded3;--logo-plate:#ffffff;--logo-pad:4px;
  --glow:#6fded3;--mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
:root[data-contrast="high"] .city{--paper:#000;--ink:#fff;--ink-strong:#fff;--muted:#fff;--line:#fff;--brand:#8ff5ea;--btn:#fff;--btn-ink:#000;--btn-hover:#8ff5ea;--focus:#ffff00}
:root.on-scene:not([data-contrast="high"]) .site-head{background:rgba(6,16,18,.8);border-bottom-color:rgba(111,222,211,.16);color:var(--ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.site-head{transition:background-color var(--duration-medium) var(--ease-out),border-color var(--duration-medium) var(--ease-out)}
.city{position:relative;background:#061012;color:var(--ink)}
.city-stage{position:relative;height:calc(100vh - var(--head-b));height:calc(100svh - var(--head-b));min-height:480px;overflow:hidden;background:radial-gradient(120% 90% at 50% 30%,#0c1d20,#061012 75%)}
:root.motion-on:not(.city-flat) .city-stage{position:sticky;top:var(--head-b)}
.city-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:48%;background:linear-gradient(transparent,rgba(4,10,12,.86));pointer-events:none;z-index:1}
.city-poster{position:absolute;inset:0}
.city-poster img{width:100%;height:100%;object-fit:cover;display:block}
.city-gl,.city-globe{position:absolute;inset:0;width:100%;height:100%;display:block}
.city-globe{z-index:1;pointer-events:none}
.city.gl-on .city-poster{display:none}
:root:not(.motion-on) .city .city-poster,.city.no-gl .city-poster,:root.city-flat .city .city-poster{display:block}
:root:not(.motion-on) .city-gl,:root:not(.motion-on) .city-globe,.city.no-gl .city-gl,.city.no-gl .city-globe,:root.city-flat .city-gl,:root.city-flat .city-globe{display:none}
.city .gpin{position:absolute;left:0;top:0;z-index:2;opacity:0;pointer-events:none;display:flex;align-items:center;gap:8px;color:#eaf6f4;font:600 .85rem var(--sans);white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.city .gpin::before{content:"";width:28px;height:1px;background:var(--glow)}
.city .gpin small{display:block;font-weight:400;color:#9fc1bd}
.city .copy{z-index:3;position:absolute;left:max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter)));right:var(--gutter);bottom:clamp(76px,12vh,140px);max-width:640px;color:#eef7f6;pointer-events:none}
.city .copy .eyebrow{color:var(--glow)}
.city .copy h1{font-size:clamp(2.3rem,5.4vw,4.4rem);line-height:1.04;margin:12px 0 0;color:#fff}
.city .copy h1 em{font-style:normal;color:var(--glow)}
.city .copy p:not(.eyebrow){margin:14px 0 0;color:#c4d6d3;max-width:48ch}
.city .copy .actions{margin-top:22px}
.city .copy .hero-facts{margin-top:18px;color:#a9c1bd}
.city .c3::before{content:"";position:absolute;z-index:-1;inset:-18% -30% -20% -40%;background:radial-gradient(closest-side,rgba(4,10,12,.72),rgba(4,10,12,.4) 60%,transparent);pointer-events:none}
.city .copy{text-shadow:0 1px 12px rgba(0,0,0,.55)}
.city .c3.live,.city .c3:focus-within{pointer-events:auto}
.city .lbl{position:absolute;left:0;top:0;opacity:0;pointer-events:none;font:600 .74rem var(--sans);color:#e8f6f4;white-space:nowrap;display:flex;align-items:center;gap:6px;text-shadow:0 1px 6px rgba(0,0,0,.8);z-index:2}
.city .lbl::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--glow);box-shadow:0 0 8px var(--glow)}
.city .lbl.key{font-size:.82rem;color:#fff}
.city .chip{position:absolute;left:0;top:0;opacity:0;pointer-events:none;display:flex;align-items:center;gap:8px;white-space:nowrap;background:rgba(6,16,18,.88);border:1px solid var(--lc);border-radius:999px;padding:4px 12px 4px 4px;color:#f3faf9;font:600 .9rem var(--sans);box-shadow:0 6px 18px rgba(0,0,0,.45);transition:background .3s ease,box-shadow .3s ease;z-index:2}
.city .chip.on{background:color-mix(in srgb,var(--lc) 24%,rgba(6,16,18,.92));box-shadow:0 0 0 3px color-mix(in srgb,var(--lc) 30%,transparent),0 8px 22px rgba(0,0,0,.5)}
.city .chip::after{content:"";position:absolute;left:-14px;top:50%;width:14px;height:1px;background:var(--lc)}
.city .num{flex:none;display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:999px;background:var(--lc);color:var(--lt,#071214);font:700 .82rem var(--sans);letter-spacing:0;font-variant-numeric:tabular-nums}
.city .legend{position:absolute;right:var(--gutter);top:20px;z-index:2;opacity:0;transition:opacity .4s;display:grid;gap:6px;font-size:.78rem;color:#cfe3e0;background:rgba(4,9,11,.55);border:1px solid rgba(111,222,211,.25);border-radius:12px;padding:10px 12px}
.city .legend i{display:inline-block;width:18px;height:3px;border-radius:2px;vertical-align:middle;margin-right:8px}
.city .credit{z-index:3;position:absolute;right:var(--gutter);bottom:10px;margin:0;font-size:.68rem;line-height:1.45;color:#8fb0ac;text-align:right;max-width:min(58ch,calc(50vw - 190px))}   /* nie unter der mittigen Bedienleiste */
.city .credit a{color:inherit}
.city .credit details{display:inline}
.city .credit summary{display:inline;cursor:pointer;text-decoration:underline;text-underline-offset:3px;list-style:none}
.city .credit summary::-webkit-details-marker{display:none}
.city .credit summary:focus-visible{outline:2px solid #6fded3;outline-offset:2px;border-radius:2px}
.city .credit details p{position:absolute;right:0;bottom:calc(100% + 8px);margin:0;width:min(52ch,80vw);padding:10px 12px;border-radius:10px;background:rgba(5,13,15,.94);border:1px solid rgba(111,222,211,.25);text-align:left;color:#c4d6d3}
:root:not(.motion-on) .city .credit details p,:root.city-flat .city .credit details p{position:static;width:auto;margin-top:6px;background:none;border:0;padding:0}
.city .hint{z-index:3;position:absolute;left:50%;bottom:30px;translate:-50% 0;color:#8fb4af;font:600 .7rem var(--sans);letter-spacing:.16em;text-transform:uppercase;display:grid;justify-items:center;gap:8px}
.city .hint i{width:1px;height:30px;background:linear-gradient(var(--glow),transparent)}
/* HUD im Stil eines Lagebilds: Zielrahmen, Messwerte, Scan beim Übergang */
.city .hud{position:absolute;inset:0;z-index:2;pointer-events:none}
.city .hud .scan{position:absolute;left:0;right:0;height:22vh;top:-22vh;opacity:0;background:linear-gradient(to bottom,transparent,rgba(111,222,211,.06) 70%,rgba(111,222,211,.5) 98%,transparent);box-shadow:0 1px 0 rgba(111,222,211,.8)}
.city .loader{position:absolute;left:0;right:0;top:0;height:2px;z-index:6;background:rgba(111,222,211,.14);transition:opacity .6s ease}
.city .loader.done{opacity:0;pointer-events:none}
.city .loader .fill{height:100%;transform:scaleX(0);transform-origin:left;background:var(--glow);transition:transform .3s ease}
.city .progressbar{position:absolute;left:0;top:0;height:2px;width:0;background:var(--glow);z-index:5;opacity:0;transition:opacity .4s}
/* Bedienleiste: Überspringen · ← Wiederholen → */
.autoplay{position:fixed;left:50%;z-index:30;bottom:calc(var(--safe-b) + 20px);translate:-50% 0;display:flex;gap:8px}
.autoplay button{display:none;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid rgba(111,222,211,.45);background:rgba(5,13,15,.8);color:#e6f6f4;font:600 .84rem var(--sans);letter-spacing:.02em;white-space:nowrap;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.autoplay button:hover{border-color:#6fded3;color:#fff}
.autoplay button:focus-visible{outline:2px solid #6fded3;outline-offset:3px}
.autoplay button.show{display:inline-flex}
.autoplay svg{width:14px;height:14px}
.autoplay .nav{padding:8px;width:44px;justify-content:center}
.autoplay .nav svg{width:16px;height:16px}
.autoplay .nav:disabled{opacity:.35;cursor:default;border-color:rgba(111,222,211,.2)}
.autoplay .nav:disabled:hover{color:#e6f6f4}
.autoplay .sm{display:none}
:root:not(.motion-on) .autoplay,:root:not(.motion-on) .city .loader,:root:not(.motion-on) .city .progressbar,:root.city-flat .autoplay,:root.city-flat .city .loader,:root.city-flat .city .progressbar{display:none}
/* Erklärkarten: scrollen über die angeheftete Bühne */
.city-track{display:none}
:root.motion-on:not(.city-flat) .city-track{display:block;height:300vh;margin-top:calc(-100vh + var(--head-b));margin-top:calc(-100svh + var(--head-b));pointer-events:none}
.lcards{position:relative;z-index:3;list-style:none;margin:0 auto;padding:0 var(--gutter);max-width:var(--max)}
.lcard{min-height:calc((100vh - var(--head-b)) * .7);min-height:calc((100svh - var(--head-b)) * .7);display:flex;align-items:center;pointer-events:none;scroll-margin-top:calc(4vh - 24px)}
.lcard article{pointer-events:auto;width:min(460px,100%);background:rgba(6,16,18,.88);border:1px solid rgba(207,238,234,.14);border-left:4px solid var(--lc);border-radius:16px;padding:24px 24px 22px;color:#e6f2f0;box-shadow:0 30px 60px -30px rgba(0,0,0,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.lcard article:focus{outline:none}.lcard article:focus-visible{outline:2px solid var(--glow);outline-offset:4px}
:root.motion-on:not(.city-flat) .city.gl-on .lcard:not(.active):not(:focus-within) article{opacity:.16;transform:translateX(-10px)}   /* nur die erklärte Karte ist Inhalt; Fokus holt jede Karte nach vorn */
.lcard .k{display:flex;align-items:center;gap:10px;margin:0;font:600 .88rem var(--sans);letter-spacing:0;color:var(--lk,var(--lc))}
.lcard .k .glyph{width:26px;height:24px}
.lcard .k .glyph .g.on{fill:var(--lc);stroke:var(--lc)}   /* V28: hervorgehobene Ebene in der Farbe ihrer Ebene, wie Nummer und Plattenrahmen */
.lcard h3{font-size:clamp(1.45rem,2.4vw,1.9rem);line-height:1.15;margin:12px 0 0;color:#fff}
.lcard p{margin:10px 0 0;color:#bdd0cd;max-width:46ch}
.lcard .in-map{margin-top:16px;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:#8fb4af}
.lcard .parts{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.lcard .parts li{font-size:.8rem;line-height:1.35;color:#e6f2f0;border:1px solid color-mix(in srgb,var(--lc) 55%,transparent);background:color-mix(in srgb,var(--lc) 12%,transparent);border-radius:14px;padding:4px 10px}
.lcard .more{margin-top:16px;color:var(--glow);background:none;border:0;padding:6px 0;font:600 .9rem var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.lcard .card-detail{display:none;margin-top:6px;border-top:1px solid rgba(207,238,234,.14);padding-top:12px}
.lcard .card-detail.open{display:block}
.lcard .deliver{margin:8px 0 0;padding-left:1.1em;color:#d5e5e2}
.lcard .list-label{margin-top:12px;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:#8fb4af}
.lcard .text-link{display:inline-block;margin-top:12px;color:#fff}   /* inline-flex verschluckte das Leerzeichen vor dem letzten Wort */
.lcard .text-link .icon{width:16px;height:16px}
.lcards-tail{height:40vh}
:root:not(.motion-on) .lcards-tail,:root.city-flat .lcards-tail{display:none}
/* Ruhige Fassung: Standbild mit Hero, darunter die Karten als Liste */
:root:not(.motion-on) .city-stage,:root.city-flat .city-stage{height:auto;min-height:min(78vh,720px);display:flex;align-items:flex-end}
:root:not(.motion-on) .city .hint,:root:not(.motion-on) .city .hud,:root:not(.motion-on) .city .gpin,:root.city-flat .city .hint,:root.city-flat .city .hud,:root.city-flat .city .gpin{display:none}
:root:not(.motion-on) .city .legend,:root.city-flat .city .legend,.city.no-gl .legend{opacity:1}
:root:not(.motion-on) .city .c3,:root.city-flat .city .c3{opacity:1;position:relative;left:auto;right:auto;bottom:auto;margin:clamp(96px,22vh,220px) auto clamp(56px,8vh,88px);padding-inline:var(--gutter);max-width:calc(var(--max));width:100%;pointer-events:auto}
:root:not(.motion-on) .city .c3>*,:root.city-flat .city .c3>*{max-width:640px}
:root:not(.motion-on) .lcards,:root.city-flat .lcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:18px;padding-block:clamp(40px,6vw,72px)}
:root:not(.motion-on) .lcard,:root.city-flat .lcard{min-height:0;display:block}
:root:not(.motion-on) .lcard article,:root.city-flat .lcard article{width:auto;height:100%}
:root.pref-nodeco .city-stage{min-height:0}
@media (max-width:820px){
  .city .legend{display:none}
  .city .lbl:not(.key){display:none}
  .city .chip{font-size:.78rem;padding:3px 10px 3px 3px}
  .city .num{min-width:24px;height:24px;font-size:.72rem}
  .city .copy{bottom:calc(var(--safe-b) + 84px)}
  .city .copy .hero-facts{margin-top:14px;padding-top:12px;gap:4px 14px;font-size:.8rem}
  .city .copy h1{font-size:clamp(2rem,9vw,2.6rem)}
  .city .copy .actions{margin-top:16px}
  .city .copy p:not(.eyebrow){font-size:.98rem}
  .city .credit{left:var(--gutter);right:var(--gutter);text-align:left;max-width:none;font-size:.62rem;bottom:calc(var(--safe-b) + 6px);opacity:.85}
  :root.motion-on:not(.city-flat) .city .credit{display:none}
  :root.motion-on:not(.city-flat) .lcard{align-items:flex-end;padding-bottom:calc(var(--safe-b) + 92px);min-height:calc((100svh - var(--head-b)) * .72)}
  .lcard article{padding:18px 18px 16px}
  .lcard p{font-size:.95rem}
}
@media (max-width:480px){.autoplay .lg{display:none}.autoplay .sm{display:inline}}
.lcards-wrap{position:relative;z-index:3}
.lcards-head{padding-top:clamp(40px,6vw,72px)}
.lcards-head .eyebrow{color:var(--glow)}
.lcards-head h2{color:#fff;margin-top:10px;max-width:24ch;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.12}
.lcards-head .lede{margin-top:14px}
.lcard h3{overflow-wrap:break-word;-webkit-hyphens:manual;hyphens:manual}
.lcards-head .lede{color:#c4d6d3;max-width:60ch}
:root.motion-on:not(.city-flat) .lcards-head{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.credit-tail{display:none;margin:0 auto;padding:0 var(--gutter) 28px;font-size:.75rem;line-height:1.5;color:#8fb0ac}
.credit-tail a{color:inherit}
@media (max-width:820px){:root.motion-on:not(.city-flat) .credit-tail{display:block}}

/* Grundlagen 05/06: breite Platten unter dem Stapel */
.city .chip.found{border-style:solid;border-width:1px 1px 3px}
.lcard.found article{border-left-width:6px}
.lcard.found .parts li{border-color:color-mix(in srgb,var(--lc) 80%,#9aeee5)}
.glyph.found .g.on{fill:var(--brand-logo);stroke:var(--brand-ink)}

/* Runde 7: Kennenlernen – Team-Kacheln bis zu echten Fotos, Kontakt mit Wuppertal-Karte */
.person-ph.mono{display:grid;place-items:center;background:linear-gradient(160deg,rgba(0,119,116,.55),rgba(6,16,18,.92) 70%),url("kontakt-karte.webp") var(--mp,50% 50%)/260% auto no-repeat,#0a1819}
.mono-in{font:500 clamp(3rem,7vw,5.2rem)/1 var(--serif);letter-spacing:.02em;color:#e9f4f2;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.mono-in::after{content:"";display:block;width:42%;height:3px;margin:14px auto 0;border-radius:2px;background:var(--brand-logo)}
.contact-map{position:relative;background:#061012;color-scheme:dark;
  --paper:#0f1515;--soft:#152020;--raised:#0f1a1c;--ink:#d9e4e3;--ink-strong:#f3f8f7;--muted:#a7bbb8;--line:#25393a;--line-strong:#4a5f5d;
  --brand:#6fded3;--brand-logo:#1fb5ad;--brand-ink:#9aeee5;--btn:#e9f2f1;--btn-ink:#0f1515;--btn-hover:#9aeee5;--focus:#6fded3;--shadow:0 24px 60px -30px rgba(0,0,0,.8)}
:root[data-contrast="high"] .contact-map{--paper:#000;--raised:#000;--ink:#fff;--ink-strong:#fff;--muted:#fff;--line:#fff;--brand:#8ff5ea;--btn:#fff;--btn-ink:#000;--focus:#ffff00}
.contact-map .contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"copy map" "card map";align-items:start;row-gap:28px}
.contact-map .contact-grid>div:first-child{grid-area:copy}
.contact-map .contact-side{grid-area:card}
.cmap{grid-area:map;margin:0;align-self:center}
.cmap-in{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(111,222,211,.18);box-shadow:0 30px 70px -30px rgba(0,0,0,.85);aspect-ratio:3/2}
.cmap-in img{display:block;width:100%;height:100%;object-fit:cover}
.cmap-in::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 32% 66%,transparent 30%,rgba(6,16,18,.55));pointer-events:none}
.cmap-pin{position:absolute;z-index:1;display:block;translate:-50% -50%;width:0;height:0}
.cmap-pin i{position:absolute;left:-24px;top:-24px;width:48px;height:48px;border-radius:50%;border:2px solid #6fded3;background:rgba(111,222,211,.16);box-shadow:0 0 0 6px rgba(111,222,211,.08)}
.cmap-pin i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#6fded3;box-shadow:0 0 12px #6fded3}
.cmap-pin i::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(111,222,211,.5);opacity:0}
:root.motion-on .cmap-pin i::before{animation:pinPulse 2.6s var(--ease-out) infinite}
@keyframes pinPulse{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.5);opacity:0}}   /* nur transform/opacity: läuft auf der Grafikkarte */
.cmap-in{container-type:inline-size}
.cmap-pin .lab{position:absolute;left:34px;top:-24px;width:max-content;max-width:calc(64cqw - 34px);display:grid;gap:2px;text-shadow:0 1px 8px rgba(0,0,0,.9)}
.cmap-pin b{font:600 .95rem/1.2 var(--sans);color:#fff}
.cmap-pin small{font-size:.78rem;line-height:1.3;color:#bfe2dd}
.cmap figcaption{margin-top:10px;font-size:.72rem;color:var(--muted)}
.cmap figcaption a{color:inherit}
@media (max-width:900px){
  .contact-map .contact-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "card" "map"}
}
.contact-map .copy-btn{color:var(--ink-strong);border-color:var(--line-strong);background:transparent}
.contact-map .copy-btn:hover{border-color:var(--brand);color:#fff}
/* Lesbarkeit (impeccable clarify): Quellenangaben nicht unter 11px, lange Kartenkennungen nicht in Versalien */
.city .credit,.cmap figcaption{font-size:max(11px,.72rem)}
.credit-tail{font-size:max(12px,.75rem)}
.lcard .k{text-transform:none;letter-spacing:.01em;font-size:.86rem}

/* adapt: flache Querformate (Handy quer) zeigen das Standbild statt der angehefteten Szene; Tippflächen für Touch */
@media (pointer:coarse){
  .lcard .more{display:inline-flex;align-items:center;min-height:44px;padding:0}
  .contact-line .val{display:inline-flex;align-items:center;min-height:44px}
  .copy-btn{min-height:44px}
  .site-foot nav a{display:inline-flex;align-items:center;min-height:44px}
  .pin-btn{min-width:44px;min-height:44px}
}
/* Ruhige Darstellung und Handy quer: Quellenzeile unter dem Einstieg statt darüber */
:root:not(.motion-on) .city-stage,:root.city-flat .city-stage{flex-wrap:wrap;align-content:flex-end}
:root:not(.motion-on) .city .credit,:root.city-flat .city .credit{position:relative;inset:auto;z-index:3;flex:1 0 100%;display:block;max-width:var(--max);margin:0 auto;padding:0 var(--gutter) 14px;text-align:left;opacity:.85}
:root:not(.motion-on) .city .c3,:root.city-flat .city .c3{margin-bottom:clamp(20px,4vh,40px)}

/* Menü für Handy und Tablet: Hauptpunkte mit Erklärung, Darstellung gebündelt, Kontakt unten griffbereit */
.drawer.side-panel{width:min(440px,100vw)}
.drawer .brand-name span{display:block}
.drawer-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:8px 0 16px}
.drawer .drawer-nav{display:grid;padding:4px 18px 8px}
.drawer .drawer-nav a{display:grid;gap:2px;padding:11px 4px;min-height:52px;border-bottom:1px solid var(--line);text-decoration:none;font-size:inherit;font-family:inherit;color:var(--ink-strong);transition:background-color var(--duration-quick) var(--ease-out)}
.drawer .drawer-nav a:active{background:var(--soft)}
.drawer .dn-t{font:500 1.28rem/1.2 var(--serif)}
.drawer .dn-h{font-size:.86rem;color:var(--muted)}
.drawer .drawer-nav a[aria-current]{box-shadow:none!important;padding-left:4px!important}
.drawer .drawer-nav a[aria-current] .dn-t{color:var(--brand)}
.drawer .drawer-nav a[aria-current] .dn-t::after{content:"";display:inline-block;width:7px;height:7px;margin-left:10px;border-radius:50%;background:var(--brand-logo);vertical-align:middle}
.drawer-group{padding:18px 18px 0}
.drawer-label{margin:0 0 10px;font-size:.78rem;font-weight:600;color:var(--muted)}
.drawer .drawer-tools{padding:0;gap:10px}
.drawer .drawer-tools .btn{min-height:44px}
.drawer-foot{flex:none;padding:12px 18px calc(12px + var(--safe-b));border-top:1px solid var(--line);background:var(--soft);display:grid;gap:10px}
.drawer-foot .drawer-label{margin:0}
.drawer-contact{display:flex;flex-wrap:wrap;gap:8px}
.dc-line{flex:1 1 auto;display:grid;gap:0;min-height:48px;padding:6px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);text-decoration:none;color:var(--ink-strong);min-width:0}
.dc-line small{font-size:.74rem;color:var(--muted)}
.dc-line span{font-weight:600;font-size:.88rem;white-space:nowrap}
.drawer-cta{justify-content:center;min-height:48px}
.drawer-legal{display:flex;flex-wrap:wrap;gap:4px 16px}
.drawer-legal a{display:inline-flex;align-items:center;min-height:32px;font-size:.8rem;color:var(--muted)}
@media (max-height:600px){.drawer.side-panel{overflow-y:auto}.drawer-body{flex:none;overflow:visible}.drawer-foot{border-top:0}}   /* niedrige Fenster: ganzes Menü scrollt, nichts wird abgeschnitten */
@media (max-width:700px){.city .hint{display:none}}   /* Handy: der Hinweis säße auf den Knöpfen; der Vorlauf startet ohnehin */
/* Critique-Runde: Handy-Szene – kompakte, deckende Karte unten, darüber bleiben die Ebenen sichtbar; Leistungen erst mit „Weiterlesen“ */
@media (max-width:700px){
  :root.motion-on:not(.city-flat) .lcard article{background:rgba(6,16,18,.96)}
  :root.motion-on:not(.city-flat) .lcard .in-map,:root.motion-on:not(.city-flat) .lcard .parts{display:none}
  :root.motion-on:not(.city-flat) .lcard article:has(.card-detail.open) .in-map{display:block}
  :root.motion-on:not(.city-flat) .lcard article:has(.card-detail.open) .parts{display:flex}
  :root.motion-on:not(.city-flat) .lcard .more{margin-top:10px}
}
@media (max-width:700px){.city .c3::before{inset:-14% -20% -10% -20%;background:radial-gradient(closest-side,rgba(4,10,12,.86),rgba(4,10,12,.6) 65%,transparent)}}

/* Polish: Browser-Oberflächen in Markenfarben */
:root{accent-color:var(--brand);caret-color:var(--brand);scrollbar-color:color-mix(in srgb,var(--brand) 45%,transparent) transparent}
::selection{background:color-mix(in srgb,var(--brand-logo) 30%,transparent);color:inherit}
/* Kartenspur über der Bühne: nur die Karten selbst fangen Klicks, Quellen und Bedienung darunter bleiben erreichbar */
:root.motion-on:not(.city-flat) .lcards-wrap,:root.motion-on:not(.city-flat) .lcards{pointer-events:none}
:root.motion-on:not(.city-flat) .lcards-wrap .credit-tail{pointer-events:auto}
/* V15: Handy – längerer Anflugweg und mehr Abstand zwischen den Karten, damit Daumen-Wischen nicht durch die Szene rast */
@media (max-width:700px){
  :root.motion-on:not(.city-flat) .city-track{height:460vh}
  :root.motion-on:not(.city-flat) .lcard{min-height:calc((100svh - var(--head-b)) * .9)}
}

/* V16: Navigation in der Szene */
.city .chip{cursor:pointer}
.city .chip:hover{background:color-mix(in srgb,var(--lc) 18%,rgba(6,16,18,.92))}
.lcard .card-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin:0}
.lcard .card-foot .more{margin-top:16px}
.lcard .all-link{margin-top:10px;margin-bottom:-6px;padding-block:6px;color:#c4d6d3;font-size:.86rem;text-underline-offset:4px}
.lcard .all-link:hover{color:#fff}
.autoplay .nav.out svg{rotate:90deg}
@media (max-width:700px){:root.motion-on:not(.city-flat) .lcard .card-foot .more,:root.motion-on:not(.city-flat) .lcard .all-link{margin-top:4px}}
/* V20: Hero-Überzeile am Handy einzeilig und auf dunklem Grund */
@media (max-width:700px){
  .city .copy .eyebrow{font-size:.7rem;letter-spacing:.05em}
  .city .c3::before{inset:-24% -20% -10% -20%}
}
/* Datenschutz-Hinweis: ruhige Karte unten links, kein Overlay, keine Sperre */
/* Runde 8: Seit 1978 – Geschichte und Nachweise */
.history-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.history-copy h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.08;margin-top:14px;max-width:18ch}
.history-copy p:not(.eyebrow){margin:18px 0 0;color:var(--muted);max-width:60ch}
.history-copy p:not(.eyebrow):first-of-type{color:var(--ink);font-size:1.08rem}
.ledger{margin:0;display:grid;border-top:1px solid var(--line)}
.ledger>div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:4px 20px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);--an:riseS;--rk:cover;--rs:6;--re:24;--stg:4}
.ledger dt{white-space:nowrap;font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1;color:var(--brand-ink,var(--brand));font-variant-numeric:lining-nums tabular-nums}
.ledger dd{margin:0;color:var(--muted)}
.qual{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;margin-top:22px;padding:16px 18px;border-radius:16px;background:var(--raised);border:1px solid var(--card-line);box-shadow:var(--card-shadow);--an:rise;--rk:cover;--rs:4;--re:30}
.qual .badges{display:flex;gap:6px}
.qual img{width:80px;height:80px;display:block}
.qual b{font-family:var(--serif);font-weight:500;font-size:1.15rem;color:var(--ink-strong)}
.qual p{margin:4px 0 0;font-size:.9rem;color:var(--muted)}
@media (max-width:900px){.history-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.ledger>div{grid-template-columns:minmax(0,1fr)}.qual{grid-template-columns:minmax(0,1fr)}.qual img{width:72px;height:72px}}
/* Aus der Praxis */
.cases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(32px,5vw,56px);align-items:start}
.case{padding:clamp(20px,2.4vw,28px);border-radius:18px;background:var(--raised);border:1px solid var(--card-line);box-shadow:var(--card-shadow);--an:rise;--rk:cover;--rs:4;--re:30;--stg:6}
.case-meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;font-size:.82rem;color:var(--muted)}
.case-tag{font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.case h3{font-size:1.4rem;line-height:1.2;margin:10px 0 0}
.case>p:not(.case-meta):not(.case-field){margin:10px 0 0;color:var(--muted)}
.case details{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.case summary{cursor:pointer;font-weight:600;color:var(--brand);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;min-height:32px;display:flex;align-items:center}
.case summary::-webkit-details-marker{display:none}
.case summary::after{content:"";width:8px;height:8px;margin-left:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:45deg;translate:0 -2px;transition:rotate .2s ease}
.case details[open] summary::after{rotate:225deg;translate:0 2px}
.case details p{margin:10px 0 0;font-size:.95rem;color:var(--ink)}
.case-field{margin:14px 0 0;font-size:.86rem;color:var(--muted)}
.case-field a{color:var(--brand);font-weight:600}
/* Team: Foto aus dem Projektgespräch und Zuständigkeiten */
.people{display:block}
.team-photo{margin:0;--an:rise;--rk:cover;--rs:4;--re:30}
.team-photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:18px;box-shadow:var(--card-shadow)}
.team-photo figcaption{margin-top:10px;font-size:.84rem;color:var(--muted)}
.roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:18px}
.role{padding-top:14px;border-top:2px solid var(--brand-logo);--an:riseS;--rk:cover;--rs:6;--re:24;--stg:4}
.role:nth-child(2){margin-top:clamp(14px,2.4vw,32px)}   /* leichter Versatz wie bei den Bildern zuvor */
.role b{display:block;font-family:var(--serif);font-weight:500;font-size:1.2rem;color:var(--ink-strong)}
.role span{display:block;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--brand);margin-top:2px}
.role p{margin:8px 0 0;font-size:.92rem;color:var(--muted)}
@media (max-width:560px){.roles{grid-template-columns:minmax(0,1fr)}.role:nth-child(2){margin-top:0}}
.fact .text-link{display:inline-block;margin-top:12px}

/* Karten mit Einblend-Bewegung: genug Luft, damit die Überschrift auch während der Bewegung nicht unter den Kopf rutscht */
.fact[id]{scroll-margin-top:72px}
.service:first-child{scroll-margin-top:8px}   /* erstes Feld ohne oberen Innenabstand */

/* V28 Tippziele ≥ 24 px: Links im Text bekommen unsichtbaren Innenabstand oben/unten, das Layout bleibt gleich */
.crumbs a,a[href^="tel:"],a[href^="mailto:"]{padding-block:4px}
.city .credit a,.city .credit summary{padding-block:5px}

/* V28 KI-Kennzeichnung der Ebenen-Grafik auf der Leistungsseite */
.stack-credit{margin:6px 0 0;text-align:center;font-size:.8rem;line-height:1.4;color:var(--muted)}

/* V31 Datenschutz-Hinweis „Prüfprotokoll“: mittig, modal, nur über „Verstanden“ zu schließen; im Fußbereich wieder aufrufbar */
.privacy-note{width:min(640px,calc(100% - 2 * var(--gutter)));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--raised);color:var(--ink);box-shadow:0 30px 80px -24px rgba(0,0,0,.6);overflow:auto;display:none;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.privacy-note[open]{display:grid}
.privacy-note::backdrop{background:rgba(10,18,18,.58);backdrop-filter:blur(3px)}
.privacy-note .pn-proof{background:var(--soft);padding:24px;display:grid;gap:12px;align-content:start;border-right:1px solid var(--line)}
.privacy-note .pn-k{margin:0;font:700 .7rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-ink)}
.privacy-note ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.privacy-note li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;font-size:.92rem;line-height:1.4;color:var(--ink-strong)}
.privacy-note li .icon{width:18px;height:18px;margin-top:1px;fill:none;stroke:var(--brand);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.privacy-note .pn-stamp{margin:4px 0 0;padding-top:10px;border-top:1px dashed var(--line-strong);font-size:.78rem;line-height:1.45;color:var(--muted)}
.privacy-note .pn-main{padding:24px;display:grid;gap:14px;align-content:start}
.privacy-note h2{margin:0;font-size:1.35rem;line-height:1.2}
.privacy-note #pn-p{margin:0;font-size:.95rem;line-height:1.55;color:var(--muted)}
.privacy-note .pn-actions{display:flex;flex-wrap:wrap;gap:10px}
.privacy-note .pn-actions .btn-primary{flex:1 1 100%}
.privacy-note .pn-actions .btn{min-height:44px}
.privacy-note .pn-legal{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.88rem}
.privacy-note .pn-legal a{color:var(--brand-ink);text-underline-offset:3px;padding-block:4px}
@media (max-width:640px){.privacy-note{grid-template-columns:minmax(0,1fr)}.privacy-note .pn-proof{border-right:0;border-bottom:1px solid var(--line);padding:18px}.privacy-note .pn-main{padding:18px}.privacy-note .pn-stamp{display:none}}
@media (prefers-reduced-motion:no-preference){:root:not(.pref-still) .privacy-note[open]{animation:pnIn .45s cubic-bezier(.16,1,.3,1)}}
@keyframes pnIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.link-btn{padding:4px 0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.link-btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:3px}