:root{--night:#0b1119;--slate:#161f29;--slate2:#1d2834;--line:#34404d;--paper:#f1eee7;--ink:#14171a;--muted:#a7b0ba;--bronze:#b88946;--bronze2:#d2a45d;--max:1440px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--night);color:white;line-height:1.55;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:400;margin:0;line-height:1.06}p{margin:0 0 1em}.site-header{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(24px,5vw,72px);background:linear-gradient(to bottom,rgba(8,13,19,.94),rgba(8,13,19,.48),transparent);transition:.3s}.site-header.scrolled{background:rgba(8,13,19,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}.brand{display:grid;text-transform:uppercase;letter-spacing:.18em;font-size:.82rem}.brand small{color:var(--bronze);font-size:.62rem;margin-top:4px}.site-header nav{display:flex;gap:30px;align-items:center;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}.site-header nav a{color:#d5dbe1}.nav-cta{border:1px solid var(--bronze);padding:12px 18px;color:var(--bronze2)!important}.menu-toggle{display:none;background:none;border:1px solid var(--line);color:#fff;padding:9px 12px;text-transform:uppercase;letter-spacing:.1em}.section-dark{background:var(--night)}.section-slate{background:linear-gradient(135deg,var(--slate),#111a23)}.section-light{background:var(--paper);color:var(--ink)}.hero{min-height:100vh;display:grid;grid-template-columns:1.03fr .97fr;position:relative;overflow:hidden}.hero-copy{z-index:2;align-self:center;padding:150px 3vw 80px max(5vw,48px);max-width:850px}.hero-media{min-height:720px;background-image:linear-gradient(90deg,var(--night) 0%,rgba(11,17,25,.62) 14%,transparent 40%),url('assets/johannes-hero.webp');background-size:cover;background-position:center 44%;position:relative}.hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,17,25,.4),transparent 45%)}.eyebrow{font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.16em;color:var(--bronze2);font-size:.72rem;line-height:1.7;margin-bottom:32px}.eyebrow:after{content:"";display:block;width:56px;height:1px;background:var(--bronze);margin-top:20px}.eyebrow.dark{color:#94672f}.hero h1{font-size:clamp(3.2rem,5.6vw,6.8rem);letter-spacing:-.035em}.hero h1 em{color:var(--bronze);font-weight:300}.lede{max-width:570px;color:#c5cbd2;font-size:clamp(1rem,1.4vw,1.25rem);margin-top:30px}.actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:38px}.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;padding:17px 25px;font-family:'IBM Plex Mono',monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;transition:.25s;border:1px solid var(--bronze)}.button.primary{background:linear-gradient(135deg,#c39a5d,#9d6d31);color:white}.button.secondary{background:rgba(0,0,0,.18)}.button:hover{transform:translateY(-2px);filter:brightness(1.08)}.problem{display:grid;grid-template-columns:.55fr 1fr 1fr;padding:86px max(5vw,48px);gap:50px;align-items:start}.section-label{font-family:'IBM Plex Mono',monospace;color:var(--bronze2);font-size:.72rem;text-transform:uppercase;letter-spacing:.15em}.section-label span:after{content:"";display:block;margin-top:16px;width:42px;height:1px;background:var(--bronze)}.problem h2{font-size:clamp(2.2rem,3.5vw,4rem)}.problem h2 em{color:var(--bronze)}.problem-copy{color:#c5cbd2;max-width:530px}.patterns{padding:90px max(5vw,48px);display:grid;grid-template-columns:.75fr 2.5fr;gap:60px}.patterns-intro h2{font-size:clamp(2rem,3vw,3.6rem)}.pattern-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.pattern-card{border:1px solid #c8c3ba;padding:30px 20px;min-height:260px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.pattern-card .icon{display:grid;place-items:center;width:64px;height:64px;border:1px solid var(--bronze);border-radius:50%;color:#9d6d31;font-family:Fraunces;font-size:1.4rem}.pattern-card h3{font-family:Inter;font-size:1rem;font-weight:600;margin:20px 0 10px}.pattern-card p{font-size:.88rem;color:#585d61}.method{padding:95px max(5vw,48px);display:grid;grid-template-columns:.75fr 2.5fr;gap:70px}.method-intro h2{font-size:clamp(2.2rem,3.3vw,4rem)}.method-intro p:last-child{margin-top:24px;color:#aeb7c1}.method-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:12px;align-items:center}.method-step{aspect-ratio:1;border:1px solid #d7dde3;border-radius:50%;padding:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.method-step span{color:var(--bronze);font-family:'IBM Plex Mono';font-size:.68rem}.method-step h3{font-family:Inter;text-transform:uppercase;letter-spacing:.15em;font-size:.8rem;margin:10px}.method-step p{font-size:.78rem;color:#b8c0c9}.flow-arrow{color:var(--bronze);font-size:1.4rem}.about{display:grid;grid-template-columns:.55fr 1.2fr 1.2fr;gap:50px;padding:90px max(5vw,48px)}.about-head h2{font-size:clamp(2.4rem,4vw,4.7rem)}.about-copy{color:#c8d0d8}.about-copy blockquote{margin:28px 0 0;padding-left:20px;border-left:2px solid var(--bronze);font-family:Fraunces;font-size:1.6rem;color:#fff}.assessment{padding:90px max(5vw,48px);display:grid;grid-template-columns:1fr 1.6fr;gap:70px}.assessment h2{font-size:clamp(2.6rem,4.2vw,5rem);margin-bottom:24px}.assessment-copy>p:last-child{max-width:600px;color:#51575b}.assessment-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid #c8c3ba;border-left:1px solid #c8c3ba}.assessment-grid div{padding:32px;border-right:1px solid #c8c3ba;border-bottom:1px solid #c8c3ba}.assessment-grid span{font-family:Fraunces;font-size:1.8rem;color:#97682f}.assessment-grid p{margin-top:10px;color:#555}.case{display:grid;grid-template-columns:.75fr 1.1fr 1.2fr;gap:50px;padding:90px max(5vw,48px);border-top:1px solid #c8c3ba}.case-heading h2{font-size:clamp(2.2rem,3.2vw,3.7rem)}.case-tag{font-family:'IBM Plex Mono';text-transform:uppercase;color:#9d6d31;font-size:.72rem}.case-copy{padding-left:35px;border-left:1px solid #c8c3ba}.room{min-height:290px;background:linear-gradient(135deg,rgba(11,17,25,.08),rgba(11,17,25,.62)),url('assets/decision-room.svg') center/cover no-repeat}.call{padding:70px max(5vw,48px);display:grid;grid-template-columns:1.2fr .8fr auto;gap:50px;align-items:center;border-bottom:1px solid var(--line)}.call h2{font-size:clamp(2.1rem,3.2vw,3.8rem)}.call-meta{color:#b5bec8}footer{background:#0e151e;color:#cbd2d9;padding:54px max(5vw,48px);display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:40px;font-size:.78rem}footer div{display:flex;flex-direction:column;gap:8px}footer strong{text-transform:uppercase;letter-spacing:.14em;color:white;font-size:.72rem;margin-bottom:8px}.footer-brand span{color:var(--bronze);text-transform:uppercase;letter-spacing:.16em}.reveal{opacity:1;transform:none}.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.js .reveal.is-visible{opacity:1;transform:none}@media(max-width:1100px){.site-header nav{display:none}.menu-toggle{display:block}.site-header.open nav{display:flex;position:absolute;top:70px;left:20px;right:20px;flex-direction:column;background:#0b1119;padding:28px;border:1px solid var(--line)}.hero{grid-template-columns:1fr}.hero-copy{min-height:680px;padding-right:35vw}.hero-media{position:absolute;inset:0 0 0 42%;min-height:100%;z-index:0}.problem,.patterns,.method,.about,.assessment,.case,.call{grid-template-columns:1fr}.pattern-grid{grid-template-columns:repeat(2,1fr)}.method-flow{grid-template-columns:repeat(4,1fr)}.flow-arrow{display:none}.method-step{aspect-ratio:auto;min-height:240px;border-radius:0}.call-action{justify-self:start}footer{grid-template-columns:repeat(2,1fr)}}@media(max-width:680px){.site-header{padding:15px 20px}.brand span{font-size:.68rem}.hero{min-height:920px}.hero-copy{padding:130px 22px 60px;align-self:start;max-width:100%}.hero h1{font-size:3.25rem}.hero-media{inset:auto 0 0 0;height:48%;background-position:65% center;background-image:linear-gradient(to bottom,var(--night),transparent 35%),url('assets/johannes-hero.webp')}.actions{flex-direction:column;align-items:stretch}.button{width:100%}.problem,.patterns,.method,.about,.assessment,.case,.call{padding:68px 22px;gap:34px}.pattern-grid,.method-flow,.assessment-grid{grid-template-columns:1fr}.pattern-card{min-height:210px}.method-step{min-height:220px}.case-copy{padding-left:0;border-left:0}.call{grid-template-columns:1fr}.call-action{width:100%}footer{padding:50px 22px;grid-template-columns:1fr 1fr}.hero .lede{font-size:1rem}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}.reveal,.js .reveal{opacity:1;transform:none;transition:none}}
.principles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.principles-grid article{background:var(--night);padding:28px 24px;min-height:210px}
.principles-grid article:last-child{grid-column:2/4}
.principles-grid span{font-family:'IBM Plex Mono',monospace;color:var(--bronze);font-size:.68rem;letter-spacing:.12em}
.principles-grid h3{font-family:Inter,sans-serif;font-size:1rem;font-weight:600;margin:18px 0 10px;color:#fff}
.principles-grid p{font-size:.88rem;color:#aeb7c1}
.legal-page{background:var(--paper);color:var(--ink);min-height:100vh;padding:130px max(5vw,48px) 80px}.legal-page article{max-width:900px;margin:auto}.legal-page h1{font-size:clamp(3rem,6vw,6rem);margin-bottom:50px}.legal-page h2{font-size:1.8rem;margin:38px 0 14px}.legal-page p{max-width:800px}.legal-back{display:inline-block;margin-bottom:40px;color:#8d602b;font-family:'IBM Plex Mono';text-transform:uppercase;font-size:.75rem}
@media(max-width:1100px){.principles-grid{grid-template-columns:repeat(2,1fr)}.principles-grid article:last-child{grid-column:auto}}
@media(max-width:680px){.principles-grid{grid-template-columns:1fr}.legal-page{padding:110px 22px 60px}}

/* Sprint 3 — visual language & premium finish */
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.site-header{transition:background .35s ease,border-color .35s ease,box-shadow .35s ease}.site-header.scrolled{background:rgba(11,17,25,.88);backdrop-filter:blur(14px);box-shadow:0 10px 40px rgba(0,0,0,.2)}
.nav-cta,.button{position:relative;overflow:hidden}.nav-cta:after,.button:after{content:"";position:absolute;inset:0;transform:translateX(-110%);background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);transition:transform .55s ease}.nav-cta:hover:after,.button:hover:after{transform:translateX(110%)}
.hero-media{transform:scale(1.01);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}.hero:hover .hero-media{transform:scale(1.025)}
.editorial-break{padding:120px max(8vw,70px);display:grid;grid-template-columns:.55fr 1.65fr;gap:80px;align-items:start;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.editorial-kicker{font-family:'IBM Plex Mono',monospace;color:var(--bronze2);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem}.editorial-break blockquote{margin:0;font-family:Fraunces,serif;font-size:clamp(2.8rem,5vw,6.2rem);line-height:1.02;letter-spacing:-.03em;color:#f4f0e8}.editorial-break blockquote::first-letter{color:var(--bronze)}
.pattern-card{border-color:rgba(20,23,26,.18);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease,background .35s ease;background:rgba(255,255,255,.22)}.pattern-card:hover{transform:translateY(-7px);border-color:rgba(184,137,70,.6);box-shadow:0 22px 45px rgba(20,23,26,.09);background:rgba(255,255,255,.55)}
.pattern-icon{position:relative;width:76px;height:76px;display:grid;place-items:center;color:#9d6d31}.pattern-icon svg{width:64px;height:64px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}.pattern-icon b{position:absolute;right:-8px;bottom:-1px;font:500 .62rem 'IBM Plex Mono';background:var(--paper);padding:3px 4px;color:#8d602b}
.principles-grid article{position:relative;overflow:hidden;transition:background .3s ease,transform .3s ease}.principles-grid article:after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--bronze);transition:width .4s ease}.principles-grid article:hover{background:#141e29;transform:translateY(-3px)}.principles-grid article:hover:after{width:100%}
.about{grid-template-columns:.42fr 1fr 1fr .75fr;align-items:center}.about-portrait{min-height:430px;background:linear-gradient(to top,rgba(22,31,41,.7),transparent 55%),url('assets/johannes-hero.webp') 66% 34%/cover no-repeat;filter:saturate(.78) contrast(1.04);box-shadow:0 25px 65px rgba(0,0,0,.24);position:relative}.about-portrait:before{content:"";position:absolute;inset:14px;border:1px solid rgba(184,137,70,.55)}
.assessment-grid{position:relative}.assessment-grid div{position:relative;transition:background .3s ease}.assessment-grid div:hover{background:rgba(184,137,70,.08)}.assessment-grid i{display:block;font:500 .62rem 'IBM Plex Mono';font-style:normal;color:#9b7c55;margin-bottom:11px}.assessment-grid span{display:block}
.case-visual{overflow:hidden}.room{transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s ease;filter:saturate(.75)}.case-visual:hover .room{transform:scale(1.035);filter:saturate(1)}
.reveal[data-delay="1"]{transition-delay:.08s}.reveal[data-delay="2"]{transition-delay:.16s}.reveal[data-delay="3"]{transition-delay:.24s}.reveal[data-delay="4"]{transition-delay:.32s}
@media(max-width:1100px){.editorial-break{grid-template-columns:1fr;gap:35px}.about{grid-template-columns:1fr 1fr}.about-portrait{grid-column:2;grid-row:1/4;min-height:520px}}
@media(max-width:680px){.editorial-break{padding:86px 22px}.editorial-break blockquote{font-size:2.65rem}.about{grid-template-columns:1fr}.about-portrait{grid-column:auto;grid-row:auto;min-height:420px;background-position:65% 30%}.pattern-icon{width:68px;height:68px}}


/* Sprint 4 — release QA */
.skip-link{position:fixed;left:16px;top:12px;z-index:1000;transform:translateY(-160%);background:var(--bronze);color:#0b1119;padding:12px 16px;font:600 .78rem "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.08em;transition:transform .2s ease}
.skip-link:focus{transform:translateY(0)}
a:focus-visible,button:focus-visible{outline:2px solid var(--bronze2);outline-offset:4px}
@media(prefers-contrast:more){.section-slate{background:#111a24}.pattern-card{border-color:#4b4b4b}.button.secondary{border-color:#d2a760}}
@media print{.site-header,.actions,.call,footer{display:none!important}.reveal{opacity:1!important;transform:none!important}body{background:#fff;color:#000}.section-dark,.section-slate{background:#fff;color:#000}.section-dark p,.section-slate p{color:#222}}

/* P0 — "Die Frage über allem" (aus index.html <head> migriert, auf Tokens gesetzt) */
.principle-zero{max-width:820px;margin:0 auto 3.5rem;padding:2rem 2.25rem;border:1px solid var(--line);border-left:2px solid var(--bronze);border-radius:2px;background:var(--slate)}
.principle-zero .pz-label{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze2);display:block;margin-bottom:1rem}
.principle-zero h3{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.25;color:#fff;margin:0 0 1rem}
.principle-zero p{color:var(--muted);line-height:1.7;margin:0;max-width:64ch}
@media(max-width:640px){.principle-zero{padding:1.5rem 1.35rem}}

/* FIX v1.2 — 7 Prinzipien sauberes Raster (Desktop) + Hero-Skalierung (Mobile) */

/* 7 Karten: gleich breite Spalten, saubere Umbrüche, keine Buchstaben-Umbrüche.
   Ersetzt das alte repeat(4,1fr) + last-child-Sonderfall.
   12-Spalten-Raster: Reihe 1 = 4 Karten à 3 Spalten, Reihe 2 = 3 Karten à 3 Spalten,
   mittig ausgerichtet durch Versatz der 5. Karte. */
.principles-grid{grid-template-columns:repeat(12,1fr)}
.principles-grid article{grid-column:span 3}
.principles-grid article:nth-child(5){grid-column:2 / span 3}
.principles-grid article:last-child{grid-column:auto;grid-column:span 3}
.principles-grid h3{overflow-wrap:normal;word-break:normal;hyphens:none}
.principles-grid article{min-width:0}

/* ab 1100px runter: 2 Spalten, span-Regeln des 12er-Rasters zurücksetzen */
@media(max-width:1100px){
  .principles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .principles-grid article,
  .principles-grid article:nth-child(5),
  .principles-grid article:last-child{grid-column:auto}
}
@media(max-width:680px){
  .principles-grid{grid-template-columns:1fr}
  .principles-grid article,
  .principles-grid article:nth-child(5),
  .principles-grid article:last-child{grid-column:auto}
}

/* Hero-Titel auf kleinen Screens deutlich kleiner, damit nichts über den Rand läuft */
@media(max-width:680px){
  .hero h1{font-size:2.35rem;letter-spacing:-.02em;line-height:1.08}
  .hero-copy{padding-top:120px}
}
@media(max-width:380px){
  .hero h1{font-size:2.05rem}
}