/* ============================================================
   BRAYNOX – Stylesheet v3  (Redesign)
   Display: Bricolage Grotesque · Body: Hanken Grotesk
   Fonts self-hosted (DSGVO: kein Google-CDN, keine IP-Weitergabe)
   ============================================================ */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/bricolage-grotesque.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/hanken-grotesk.woff2') format('woff2')}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --ink:#0d1420;            /* near-black blue-ink */
  --paper:#ffffff;
  --paper-2:#f3f6fa;        /* cool off-white (kein Beige) */
  --blue:#124174;           /* Marke */
  --blue-deep:#0a2742;      /* tiefer für Verläufe */
  --blue-bright:#5b9fe3;    /* heller Akzent auf Dunkel */
  --muted:#54606f;          /* Fließtext-Grau auf Hell (>=4.5:1) */
  --line:#e4e8ee;
  --ink-d:#eef3f9;          /* Text auf Dunkel */
  --muted-d:rgba(238,243,249,.72);
  --line-d:rgba(255,255,255,.14);
  --max:1120px;
  --pad:clamp(24px,5vw,72px);
  --ease:cubic-bezier(.16,1,.3,1);
  --z-nav:100; --z-cookie:200;
}

html{scroll-behavior:smooth}
body{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:17px; line-height:1.7; color:var(--ink);
  background:var(--paper); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ── Typo ── */
h1,h2,h3,h4{font-family:'Bricolage Grotesque','Hanken Grotesk',sans-serif;font-weight:700;line-height:1.02;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(3rem,7.2vw,5.4rem);letter-spacing:-.035em}
h2{font-size:clamp(2.15rem,4.8vw,3.5rem);letter-spacing:-.03em}
h3{font-size:clamp(1.2rem,2vw,1.55rem);letter-spacing:-.02em}
p{color:var(--muted);line-height:1.72}
p.big{font-size:clamp(1.12rem,1.7vw,1.35rem);color:var(--ink);line-height:1.6;max-width:34ch}
strong{color:var(--ink);font-weight:600}
a{color:inherit;text-decoration:none}
::selection{background:var(--blue);color:#fff}

.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
section{padding:clamp(88px,12vw,150px) 0;position:relative}
.lead{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--muted);line-height:1.65;max-width:62ch}

/* Abschnitts-Kopf: ruhig, KEIN Großbuchstaben-Label über jeder Sektion */
.s-head{max-width:640px;margin-bottom:clamp(40px,6vw,72px)}
.s-head.wide{max-width:880px}
.s-head p{margin-top:22px;max-width:56ch}

/* ── Scroll-Progress ── */
#progress-bar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--blue-bright);z-index:var(--z-nav);transition:width .1s linear}

/* ── Nav ── */
nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);padding:18px 0;transition:background .35s var(--ease),box-shadow .35s var(--ease),padding .35s var(--ease)}
nav .container{display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo img{height:26px;display:block;filter:brightness(0) invert(1);transition:filter .35s var(--ease)}
.nav-menu{display:flex;align-items:center;gap:6px}
.nav-link{font-size:.95rem;font-weight:500;color:var(--muted-d);padding:9px 13px;border-radius:8px;transition:color .2s var(--ease),background .2s var(--ease)}
.nav-link:hover{color:#fff}
.nav-link.active{color:#fff}
.nav-cta{font-family:'Hanken Grotesk';font-weight:600;font-size:.95rem;background:#fff;color:var(--blue);padding:10px 18px;border-radius:99px;transition:transform .18s var(--ease),box-shadow .25s var(--ease)}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
/* Nav wird solide, sobald man den dunklen Hero verlassen hat */
nav.scrolled{background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line),0 10px 30px -24px rgba(13,20,32,.5);padding:12px 0}
nav.scrolled .nav-link{color:var(--muted)}
nav.scrolled .nav-link:hover,nav.scrolled .nav-link.active{color:var(--ink)}
nav.scrolled .nav-cta{background:var(--blue);color:#fff}
nav.scrolled .nav-logo img{filter:none}
.nav-burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;flex:none}
.nav-burger span{width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .25s var(--ease),opacity .25s var(--ease)}
nav.scrolled .nav-burger span{background:var(--ink)}
.nav-burger.open span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.nav-burger.open span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Hanken Grotesk';font-weight:600;font-size:1.02rem;padding:16px 28px;border-radius:99px;cursor:pointer;border:none;transition:transform .18s var(--ease),box-shadow .28s var(--ease),background .2s var(--ease)}
.btn svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:#fff;color:var(--blue);box-shadow:0 14px 40px -18px rgba(0,0,0,.6)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 50px -18px rgba(0,0,0,.7)}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 14px 40px -18px rgba(18,65,116,.8)}
.btn-blue:hover{transform:translateY(-2px);background:#0f3963}

/* ══════════════ HERO (Blau-Drench) ══════════════ */
#hero{background:var(--ink);color:var(--ink-d);padding:0;min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden;isolation:isolate}
#hero::before{ /* Blaupausen-Raster: „jemand der baut" */
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(120% 100% at 78% 12%, #17457a 0%, var(--blue) 34%, #0b2c4e 70%, var(--ink) 100%);
}
#hero::after{ /* feines technisches Gitter */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 10%,#000 30%,transparent 82%);
          mask-image:radial-gradient(120% 90% at 70% 10%,#000 30%,transparent 82%);
}
.hero-mark{ /* großes, ruhiges bx-Zeichen */
  position:absolute;right:calc(var(--pad) * -.3);bottom:-6%;z-index:-1;
  font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(240px,42vw,560px);
  line-height:.8;letter-spacing:-.06em;color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.07);pointer-events:none;user-select:none;
}
.hero-inner{padding:96px 0 88px;max-width:820px}
.hero-kicker{display:inline-flex;align-items:center;gap:9px;font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--muted-d);margin-bottom:26px}
.hero-kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--blue-bright);box-shadow:0 0 12px 1px var(--blue-bright)}
#hero h1{color:#fff;max-width:15ch}
#hero h1 em{font-style:normal;color:var(--blue-bright)}
.hero-sub{margin:26px 0 38px;font-size:clamp(1.1rem,1.7vw,1.4rem);line-height:1.55;color:var(--muted-d);max-width:40ch}
.hero-sub b{color:#fff;font-weight:600}
.hero-scroll{position:absolute;left:var(--pad);bottom:34px;font-size:.8rem;color:var(--muted-d);display:flex;align-items:center;gap:10px;letter-spacing:.04em}
.hero-scroll .bar{width:44px;height:1px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.hero-scroll .bar::after{content:"";position:absolute;inset:0;background:var(--blue-bright);animation:scrollhint 2.4s var(--ease) infinite}
@keyframes scrollhint{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* ══════════════ WARUM (Hell, editorial – keine 01/02/03-Karten) ══════════════ */
#warum{background:var(--paper)}
.warum-lead{max-width:24ch;font-size:clamp(1.9rem,3.6vw,2.9rem);font-family:'Bricolage Grotesque';font-weight:700;letter-spacing:-.03em;line-height:1.08;color:var(--ink);text-wrap:balance}
.warum-intro{margin:28px 0 0;max-width:56ch;font-size:clamp(1.05rem,1.4vw,1.18rem)}
.warum-intro .kick{color:var(--ink);font-weight:600}
.fails{margin-top:clamp(56px,7vw,88px);border-top:1px solid var(--line)}
.fail{display:grid;grid-template-columns:minmax(180px,.5fr) 1fr;gap:clamp(16px,4vw,60px);padding:clamp(30px,4vw,44px) 0;border-bottom:1px solid var(--line);align-items:start;transition:background .3s var(--ease)}
.fail:hover{background:var(--paper-2)}
.fail h3{font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.1}
.fail .fx{font-size:1.05rem;max-width:52ch;align-self:center}
@media(max-width:680px){.fail{grid-template-columns:1fr;gap:10px}}

/* ══════════════ METHODE (Dunkel, echte Sequenz) ══════════════ */
#methode{background:var(--ink);color:var(--ink-d)}
#methode::before{content:"";position:absolute;inset:0;opacity:.4;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
#methode .container{position:relative}
#methode h2{color:#fff}
#methode .s-head p{color:var(--muted-d)}
.steps{position:relative}
.steps::before{content:"";position:absolute;left:clamp(30px,4vw,54px);top:14px;bottom:60px;width:1px;background:linear-gradient(var(--blue-bright),rgba(255,255,255,.08));opacity:.6}
.step{display:grid;grid-template-columns:clamp(64px,9vw,112px) 1fr;gap:clamp(20px,4vw,52px);padding:clamp(26px,4vw,40px) 0;position:relative}
.step-num{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(2rem,5vw,3.4rem);color:transparent;-webkit-text-stroke:1.4px var(--blue-bright);line-height:.9;position:relative;z-index:1}
.step-tag{display:block;font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--blue-bright);margin-bottom:8px}
.step h3{color:#fff;font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:12px;line-height:1.08}
.step p{color:var(--muted-d);max-width:56ch}
@media(max-width:560px){.step{grid-template-columns:1fr;gap:6px}.steps::before{display:none}}

/* ══════════════ PROJEKTE (Hell) ══════════════ */
#projekte{background:var(--paper-2)}
.proj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(14px,2vw,22px)}
.proj{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:clamp(26px,3vw,34px);transition:transform .3s var(--ease),box-shadow .35s var(--ease),border-color .3s var(--ease);position:relative;overflow:hidden}
.proj::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.proj:hover{transform:translateY(-4px);box-shadow:0 30px 60px -34px rgba(13,20,32,.4);border-color:transparent}
.proj:hover::after{transform:scaleX(1)}
.proj .live{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:600;color:var(--muted);margin-bottom:16px}
.proj .live .d{width:7px;height:7px;border-radius:50%;background:#2e9e5b;box-shadow:0 0 0 0 rgba(46,158,91,.5);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,158,91,.5)}70%{box-shadow:0 0 0 7px rgba(46,158,91,0)}100%{box-shadow:0 0 0 0 rgba(46,158,91,0)}}
.proj h3{font-size:clamp(1.35rem,2vw,1.65rem);margin-bottom:8px}
.proj .pt{color:var(--muted);font-size:1rem;margin-bottom:18px}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{font-size:.78rem;font-weight:500;color:var(--blue);background:#eaf1f9;padding:5px 11px;border-radius:99px}

/* ══════════════ ANDERS (Blau-Drench + Pull-Quote) ══════════════ */
#anders{position:relative;background:var(--blue-deep);color:var(--ink-d);overflow:hidden}
/* Echtes Foto von Martin – dezent im Hintergrund, blau überzogen (Stimmung statt Porträt) */
#anders::before{content:"";position:absolute;inset:0;z-index:0;background:url(assets/martin-bg.webp) 58% 8%/cover no-repeat}
#anders::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(10,39,66,.82) 0%,rgba(10,39,66,.9) 52%,var(--ink) 96%),
  linear-gradient(90deg,rgba(8,20,36,.62) 0%,rgba(10,39,66,.12) 64%,rgba(10,39,66,0) 100%)}
#anders .container{position:relative;z-index:2}
#anders h2{color:#fff;max-width:16ch;text-shadow:0 2px 14px rgba(8,20,36,.35)}
#anders .lead{color:#dce7f3;text-shadow:0 1px 3px rgba(8,20,36,.5)}
#anders .sig{text-shadow:0 1px 3px rgba(8,20,36,.5)}
.pull{font-family:'Bricolage Grotesque';font-weight:600;font-size:clamp(1.55rem,3.1vw,2.5rem);line-height:1.24;color:#fff;letter-spacing:-.02em;max-width:22ch;margin:clamp(34px,4.5vw,52px) 0 0;position:relative;padding-top:clamp(40px,6vw,72px);text-wrap:balance}
.pull::before{content:"\201C";position:absolute;left:-.02em;top:-.02em;font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(5rem,11vw,8.5rem);line-height:1;color:var(--blue-bright);opacity:.5;pointer-events:none}
.pull span{color:var(--blue-bright)}
.punkte{margin-top:clamp(56px,7vw,84px);display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(28px,4vw,44px)}
.punkt{padding-top:22px;border-top:1px solid var(--line-d)}
.punkt h3{color:#fff;font-size:1.28rem;margin-bottom:10px}
.punkt p{color:var(--muted-d)}

/* Signatur unter der Aussage */
.sig{margin-top:26px;font-size:.98rem;color:var(--muted-d);letter-spacing:.01em}
.sig b{color:#fff;font-family:'Bricolage Grotesque';font-weight:700;letter-spacing:-.01em}

/* ══════════════ CTA ══════════════ */
#cta{background:var(--paper);text-align:center}
#cta .container{max-width:760px}
#cta h2{margin-bottom:22px}
#cta .lead{margin:0 auto 36px;max-width:44ch}
#cta .meta{margin-top:22px;font-size:.9rem;color:var(--muted);letter-spacing:.02em}

/* ── Footer ── */
footer{background:var(--ink);color:var(--muted-d);padding:56px 0}
footer .container{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.footer-logo-wrap{display:flex;flex-direction:column;gap:8px}
.footer-logo-wrap img{height:22px}
.footer-claim{font-family:'Bricolage Grotesque';font-size:.95rem;color:var(--ink-d)}
.footer-links{display:flex;gap:22px;font-size:.9rem}
.footer-links a{color:var(--muted-d);transition:color .2s}
.footer-links a:hover{color:#fff}

/* ── Cookie ── */
#cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;max-width:560px;margin:0 auto;background:var(--ink);color:var(--muted-d);border:1px solid var(--line-d);border-radius:14px;padding:16px 18px;display:flex;gap:16px;align-items:center;justify-content:space-between;z-index:var(--z-cookie);box-shadow:0 24px 60px -24px rgba(0,0,0,.6)}
#cookie-banner p{color:var(--muted-d);font-size:.86rem;margin:0}
#cookie-banner a{color:var(--blue-bright);font-weight:600}
#cookie-close{flex:none;background:#fff;color:var(--blue);border:none;font-family:'Hanken Grotesk';font-weight:600;font-size:.86rem;padding:8px 16px;border-radius:99px;cursor:pointer}

/* ══════════════ MOTION (robust: sichtbar per Default, JS ergänzt nur) ══════════════ */
@keyframes riseHero{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
/* Reveal: ohne JS voll sichtbar; mit JS sanft eingeblendet (kein Blitz, kein Blank) */
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal.d1{transition-delay:.08s}
html.js .reveal.d2{transition-delay:.16s}
html.js .reveal.d3{transition-delay:.24s}
html.js .reveal.d4{transition-delay:.32s}
/* Hero orchestriert beim Laden */
html.js #hero .anim{opacity:0;animation:riseHero .9s var(--ease) forwards}
html.js #hero .anim.d1{animation-delay:.08s}
html.js #hero .anim.d2{animation-delay:.2s}
html.js #hero .anim.d3{animation-delay:.34s}
html.js #hero .anim.d4{animation-delay:.5s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  html.js .reveal,html.js #hero .anim{animation:none!important;opacity:1!important;transform:none!important}
  .hero-scroll .bar::after{display:none}
  .proj .live .d{animation:none}
}

/* ── Mobile Nav ── */
@media(max-width:1000px){
  .nav-burger{display:flex}
  .nav-menu{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);flex-direction:column;align-items:stretch;justify-content:center;gap:6px;background:var(--ink);padding:32px;transform:translateX(100%);transition:transform .4s var(--ease);box-shadow:-30px 0 60px -20px rgba(0,0,0,.6)}
  .nav-menu.open{transform:none}
  .nav-link{color:var(--ink-d);font-size:1.2rem;padding:14px 8px}
  nav.scrolled .nav-link{color:var(--ink-d)}
  .nav-cta{margin-top:14px;text-align:center;justify-content:center;background:#fff;color:var(--blue)}
  nav.scrolled .nav-cta{background:#fff;color:var(--blue)}
}

/* ══════════════════════════════════════════════════
   ARBEITSSYSTEM-SEITE (Werkstattbericht)
   ══════════════════════════════════════════════════ */
/* ruhiger Sektions-Marker (bewusstes, wiederkehrendes System – kein lautes Eyebrow) */
.label{display:inline-flex;align-items:center;gap:9px;font-family:'Hanken Grotesk';font-weight:600;font-size:.82rem;letter-spacing:.01em;color:var(--blue);margin-bottom:20px}
.label::before{content:"";width:16px;height:1.5px;background:var(--blue);border-radius:2px}
[data-dark] .label,.system-band .label,#sys-hero .label{color:var(--blue-bright)}
[data-dark] .label::before,.system-band .label::before,#sys-hero .label::before{background:var(--blue-bright)}

/* Sub-Page Hero */
#sys-hero{background:var(--ink);color:var(--ink-d);position:relative;overflow:hidden;isolation:isolate;padding:clamp(120px,16vw,180px) 0 clamp(70px,9vw,110px)}
#sys-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(120% 100% at 82% 0%, #17457a 0%, var(--blue) 36%, #0b2c4e 72%, var(--ink) 100%)}
#sys-hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:60px 60px;-webkit-mask-image:radial-gradient(110% 80% at 75% 0%,#000 34%,transparent 82%);mask-image:radial-gradient(110% 80% at 75% 0%,#000 34%,transparent 82%)}
#sys-hero .inner{max-width:900px}
#sys-hero h1{color:#fff;max-width:14ch;margin-bottom:26px}
#sys-hero h1 span{color:var(--blue-bright)}
#sys-hero .sys-lead{font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.5;color:#fff;max-width:44ch;margin-bottom:22px}
#sys-hero .sys-note{font-size:1.05rem;line-height:1.7;color:var(--muted-d);max-width:60ch}

/* Sektionen: Rhythmus hell/dunkel */
.sys-sec{padding:clamp(72px,10vw,128px) 0;background:var(--paper)}
.sys-sec.alt{background:var(--paper-2)}
.sys-sec.dark{background:var(--ink);color:var(--ink-d);position:relative;overflow:hidden}
.sys-sec.dark::before{content:"";position:absolute;inset:0;opacity:.4;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.sys-sec.dark .container{position:relative}
.sys-sec.dark h2,.sys-sec.dark h3{color:#fff}
.sys-sec.dark p{color:var(--muted-d)}

/* Prosa */
.sys-copy{max-width:680px}
.sys-copy h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:22px;line-height:1.08}
.sys-copy p{font-size:clamp(1.02rem,1.35vw,1.15rem);margin-bottom:18px;max-width:66ch}
.sys-copy.center{margin-left:auto;margin-right:auto}

/* Kopf über Rastern */
.sys-head{max-width:760px;margin-bottom:clamp(44px,6vw,72px)}
.sys-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.08;margin-bottom:18px}
.sys-head p{font-size:clamp(1.02rem,1.35vw,1.15rem);max-width:64ch}

/* Zwei-Spalter: Problem + Frage-Box */
.sys-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:start}
@media(max-width:820px){.sys-two{grid-template-columns:1fr;gap:36px}}
.sys-two h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:16px;line-height:1.1}
.sys-two p{font-size:1.05rem;margin-bottom:14px}
.sys-qbox{display:flex;flex-direction:column;gap:14px}
.sys-q{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.sys-q span{display:block;font-size:.82rem;font-weight:600;color:var(--muted);margin-bottom:8px}
.sys-q p{font-size:1.12rem;color:var(--ink);line-height:1.4;margin:0}
.sys-q.primary{background:var(--blue);border-color:var(--blue)}
.sys-q.primary span{color:rgba(255,255,255,.7)}
.sys-q.primary p{color:#fff}
.sys-sec.dark .sys-q{background:rgba(255,255,255,.04);border-color:var(--line-d)}
.sys-sec.dark .sys-q p{color:#fff}
.sys-sec.dark .sys-q.primary{background:var(--blue);border-color:var(--blue-bright)}

/* Prinzipien / nummerierte Ebenen (echte Reihe) */
.sys-layers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(16px,2.5vw,28px)}
.sys-layer{padding-top:24px;border-top:1px solid var(--line-d)}
.sys-sec:not(.dark) .sys-layer{border-top-color:var(--line)}
.sys-layer .n{font-family:'Bricolage Grotesque';font-weight:800;font-size:1.6rem;color:transparent;-webkit-text-stroke:1.3px var(--blue-bright);margin-bottom:12px;display:inline-block}
.sys-sec:not(.dark) .sys-layer .n{-webkit-text-stroke-color:var(--blue)}
.sys-layer h3{font-size:1.35rem;margin-bottom:10px}
.sys-layer p{font-size:1rem;line-height:1.6}

/* Bereich-Karte (8 Ordner) */
.sys-map{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.sys-map-item{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:24px;transition:transform .3s var(--ease),box-shadow .35s var(--ease),border-color .3s var(--ease)}
.sys-sec.alt .sys-map-item{background:var(--paper)}
.sys-map-item:hover{transform:translateY(-3px);box-shadow:0 26px 54px -34px rgba(13,20,32,.4);border-color:var(--blue)}
.sys-map-item h3{font-size:1.2rem;margin-bottom:8px}
.sys-map-item p{font-size:.95rem;line-height:1.6}

/* Steuerungsdateien-Liste */
.sys-ctrl{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(14px,2vw,22px)}
.sys-ctrl-item{padding:22px 0 24px;border-top:1px solid var(--line-d)}
.sys-ctrl-item span{display:block;font-family:'Bricolage Grotesque';font-weight:700;font-size:1.15rem;color:#fff;margin-bottom:8px}
.sys-ctrl-item p{font-size:.98rem;line-height:1.6}

/* Routinen (hell) */
.sys-routines{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(14px,2vw,22px)}
.sys-routine{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:26px;transition:transform .3s var(--ease),box-shadow .35s var(--ease),border-color .3s var(--ease)}
.sys-routine:hover{transform:translateY(-3px);box-shadow:0 26px 54px -34px rgba(13,20,32,.4);border-color:var(--blue)}
.sys-routine h3{font-size:1.3rem;margin-bottom:10px}
.sys-routine p{font-size:.98rem;line-height:1.6}

/* Fluss Input -> Output */
.sys-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line-d);border-radius:16px;overflow:hidden;margin-top:clamp(40px,5vw,64px)}
@media(max-width:760px){.sys-flow{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.sys-flow{grid-template-columns:1fr}}
.sys-flow>div{background:var(--ink);padding:26px 22px;position:relative}
.sys-flow>div span{display:inline-block;font-family:'Bricolage Grotesque';font-weight:700;font-size:.9rem;color:var(--blue-bright);margin-bottom:10px;letter-spacing:.02em}
.sys-flow>div p{font-size:.96rem;line-height:1.55;color:var(--muted-d)}
.sys-flow>div:not(:last-child)::after{content:"→";position:absolute;right:-11px;top:50%;transform:translateY(-50%);color:var(--blue-bright);font-size:1.1rem;z-index:2;background:var(--ink);width:22px;text-align:center}
@media(max-width:760px){.sys-flow>div::after{display:none!important}}

/* Abschluss-Zweispalter + „was es nicht ist" */
.sys-not{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:clamp(26px,3vw,36px)}
.sys-not ul{list-style:none;margin:0;padding:0}
.sys-not li{position:relative;padding:11px 0 11px 30px;font-size:1.02rem;color:var(--ink);border-bottom:1px solid var(--line)}
.sys-not li:last-child{border-bottom:none}
.sys-not li::before{content:"✕";position:absolute;left:0;top:11px;color:#c0392b;font-weight:700;font-size:.9rem}
.sys-closing{max-width:760px;margin:clamp(56px,7vw,88px) auto 0;text-align:center}
.sys-closing h2{font-size:clamp(2rem,4vw,3.1rem);margin-bottom:20px;line-height:1.06}
.sys-closing p{font-size:clamp(1.05rem,1.4vw,1.2rem);max-width:64ch;margin:0 auto 18px}

/* Inline-Weiterlesen-Link (Homepage-Lead → Pillar, Pillar → Arbeitssystem) */
.more-link{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(44px,6vw,68px);font-family:'Hanken Grotesk';font-weight:600;font-size:1.02rem;color:var(--blue);transition:color .2s var(--ease)}
.more-link svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.more-link:hover{color:var(--blue-deep)}
.more-link:hover svg{transform:translateX(4px)}

/* „Weiterlesen"-Karte (Pillar-Abschluss → Arbeitssystem) */
.next-card{display:flex;align-items:center;gap:clamp(18px,3vw,32px);max-width:720px;margin:clamp(44px,6vw,64px) auto 0;background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:clamp(24px,3.2vw,34px);text-align:left;transition:transform .3s var(--ease),box-shadow .35s var(--ease),border-color .3s var(--ease)}
.next-card:hover{transform:translateY(-3px);box-shadow:0 30px 60px -34px rgba(13,20,32,.4);border-color:var(--blue)}
.next-card-body{flex:1;min-width:0}
.next-card-eyebrow{display:block;font-size:.82rem;font-weight:600;color:var(--blue);margin-bottom:10px;letter-spacing:.01em}
.next-card h3{font-size:clamp(1.3rem,2vw,1.65rem);margin-bottom:8px}
.next-card p{font-size:1rem;line-height:1.6;margin:0;color:var(--muted)}
.next-card-arrow{flex:none;width:clamp(46px,6vw,56px);height:clamp(46px,6vw,56px);border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .25s var(--ease),background .2s var(--ease)}
.next-card:hover .next-card-arrow{transform:translateX(3px);background:var(--blue-deep)}
@media(max-width:540px){.next-card{flex-direction:column;align-items:flex-start;gap:18px}.next-card-arrow{align-self:flex-end}}

/* Abschluss-CTA (Pillar) */
.pillar-cta{max-width:560px;margin:clamp(48px,6vw,72px) auto 0;text-align:center}
.pillar-cta p{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--muted);max-width:44ch;margin:0 auto 26px}

/* ══════════════════════════════════════════════════
   RECHTSTEXTE (Impressum / Datenschutz)
   ══════════════════════════════════════════════════ */
#legal-hero{background:var(--ink);color:var(--ink-d);position:relative;overflow:hidden;isolation:isolate;padding:clamp(114px,14vw,158px) 0 clamp(40px,6vw,64px)}
#legal-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(120% 130% at 84% 0%,#17457a 0%,var(--blue) 40%,#0b2c4e 74%,var(--ink) 100%)}
#legal-hero h1{color:#fff;margin-bottom:8px;font-size:clamp(2.4rem,5.4vw,3.6rem)}
#legal-hero p{color:var(--muted-d);font-size:1.02rem}
.legal{background:var(--paper);padding:clamp(44px,6vw,72px) 0 clamp(80px,11vw,130px)}
.legal-wrap{max-width:760px;margin:0 auto;padding:0 var(--pad)}
.legal-wrap h2{font-size:clamp(1.25rem,2.3vw,1.6rem);letter-spacing:-.02em;margin:clamp(34px,4.5vw,52px) 0 14px;padding-top:clamp(26px,3.4vw,36px);border-top:1px solid var(--line)}
.legal-wrap h2:first-of-type{margin-top:0;padding-top:0;border-top:none}
.legal-wrap p{color:var(--muted);margin-bottom:14px;max-width:72ch}
.legal-wrap p strong{color:var(--ink);font-weight:600}
.legal-wrap address{font-style:normal;color:var(--ink);line-height:1.85;margin-bottom:14px}
.legal-wrap address strong{font-weight:700}
.legal-wrap ul{margin:2px 0 16px;padding-left:20px}
.legal-wrap li{color:var(--muted);margin-bottom:8px}
.legal-wrap a{color:var(--blue);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .18s var(--ease)}
.legal-wrap a:hover{color:var(--blue-deep)}
.legal-todo{color:#b45309;background:#fff7ed;border:1px dashed #f59e0b;border-radius:8px;padding:2px 8px;font-weight:600;font-size:.9em}
.legal-note{margin-top:clamp(40px,5vw,64px);padding:18px 20px;background:var(--paper-2);border:1px solid var(--line);border-radius:14px;font-size:.92rem;color:var(--muted);line-height:1.6}
.legal-back{display:inline-block;margin-top:34px;color:var(--blue);font-weight:600;font-size:.95rem}
.legal-back:hover{color:var(--blue-deep)}