@font-face{font-family:Inter;src:url("assets/fonts/inter-400.woff2?v=8909904a") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url("assets/fonts/inter-700.woff2?v=6f56409f") format("woff2");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("assets/fonts/source-serif-4-400.woff2?v=02194deb") format("woff2");font-style:normal;font-weight:400;font-display:swap}
:root{--ink:#10241d;--deep:#071510;--paper:#f2eee4;--white:#fffdf8;--acid:#d6ff3f;--muted:#6d7b74;--line:rgba(16,36,29,.17)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif}a{color:inherit}.head{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:2.5rem 1fr auto;gap:1rem;align-items:center;padding:.8rem clamp(1rem,3vw,2.5rem);background:rgba(242,238,228,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.head>a{text-decoration:none;font-size:1.35rem}.head div{display:flex;flex-direction:column;gap:.08rem}.head span,.head small{font-size:.62rem;letter-spacing:.12em}.head strong{font-size:.76rem;letter-spacing:.08em}.head .doc{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.12rem}.hero{min-height:72vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(20rem,.75fr);gap:clamp(2rem,6vw,7rem);align-items:end;padding:clamp(4rem,8vw,8rem) clamp(1rem,5vw,6rem) clamp(3rem,6vw,5rem)}.kicker,.eyebrow{margin:0 0 .75rem;font-size:.65rem;font-weight:700;letter-spacing:.15em;color:#607269}.hero h1{margin:0;max-width:8.5ch;font-family:"Source Serif 4",Georgia,serif;font-weight:400;font-size:clamp(4rem,9vw,9rem);line-height:.82;letter-spacing:-.055em}.hero-copy{max-width:42rem}.hero-copy .lead{font-family:"Source Serif 4",Georgia,serif;font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1.1;margin:0 0 1.2rem}.hero-copy p{font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.55}.rule{margin-top:2rem;padding:1.1rem 1.2rem;border-left:4px solid var(--acid);background:rgba(16,36,29,.05)}.rule b{display:block;font-size:.66rem;letter-spacing:.13em;margin-bottom:.5rem}.rule strong{font-family:"Source Serif 4",Georgia,serif;font-weight:400;font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.15}.series{padding:0 clamp(1rem,5vw,6rem) 6rem}.piece{display:grid;grid-template-columns:5rem minmax(18rem,.62fr) minmax(22rem,1.38fr);gap:clamp(1.3rem,4vw,4rem);padding:clamp(3rem,6vw,6rem) 0;border-top:1px solid var(--line);align-items:start}.piece-num{width:4.7rem;height:4.7rem;border-radius:50%;display:grid;place-items:center;background:var(--deep);color:var(--acid);font-weight:700;font-size:1.65rem}.piece h2{margin:.25rem 0 .8rem;font-family:"Source Serif 4",Georgia,serif;font-weight:400;font-size:clamp(2.6rem,5vw,5.5rem);line-height:.92;letter-spacing:-.04em}.piece .intro{margin:0 0 1.6rem;font-size:1rem;line-height:1.55;max-width:39ch}.answers{margin:0;display:grid;gap:.8rem}.answers div{padding-top:.75rem;border-top:1px solid var(--line)}.answers dt{font-size:.61rem;font-weight:700;letter-spacing:.13em;color:#697a71}.answers dd{margin:.28rem 0 0;font-size:.9rem;line-height:1.48}.visual{margin:0}.visual img{display:block;width:100%;max-height:72vh;object-fit:contain;background:#e8e1d3;border:1px solid rgba(16,36,29,.12)}.visual figcaption{display:flex;justify-content:space-between;gap:1rem;margin-top:.55rem;font-size:.63rem;letter-spacing:.07em;color:#697a71}.piece:nth-child(even){background:var(--panel-dark,var(--ink));color:var(--white);margin-inline:calc(clamp(1rem,5vw,6rem) * -1);padding-inline:clamp(1rem,5vw,6rem);border-top-color:rgba(255,255,255,.14)}.piece:nth-child(even) .answers div{border-color:rgba(255,255,255,.17)}.piece:nth-child(even) .answers dt,.piece:nth-child(even) .visual figcaption{color:#b6c3bc}.piece:nth-child(even) .visual img{border-color:rgba(255,255,255,.13)}.synthesis{background:var(--deep);color:var(--white);padding:clamp(4rem,8vw,8rem) clamp(1rem,5vw,6rem);display:grid;grid-template-columns:minmax(0,.85fr) minmax(22rem,1.15fr);gap:clamp(2rem,7vw,8rem);align-items:center}.synthesis h2{margin:.5rem 0 1.2rem;font-family:"Source Serif 4",Georgia,serif;font-weight:400;font-size:clamp(3rem,6.8vw,7rem);line-height:.9;letter-spacing:-.045em}.synthesis p{max-width:38ch;font-size:1.05rem;line-height:1.55}.flow{display:flex;flex-wrap:wrap;gap:.55rem .75rem;align-items:center;padding:1.2rem 0;border-top:1px solid rgba(214,255,63,.32);border-bottom:1px solid rgba(214,255,63,.32);font-size:.72rem;font-weight:700;letter-spacing:.1em}.flow i{font-style:normal;color:var(--acid)}.flow strong{color:var(--acid)}.final-thesis{font-family:"Source Serif 4",Georgia,serif!important;font-size:clamp(1.7rem,3vw,3rem)!important;line-height:1.08!important;margin-top:2rem!important}.actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}.actions a{text-decoration:none;font-size:.68rem;font-weight:700;letter-spacing:.1em;border-bottom:2px solid var(--acid);padding-bottom:.3rem}.note{margin-top:2rem;font-size:.72rem!important;color:#b5c1bb}.footer{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.2rem clamp(1rem,5vw,6rem);font-size:.61rem;letter-spacing:.1em;background:var(--paper);color:#63736b}
@media(max-width:1000px){.hero{grid-template-columns:1fr;min-height:auto}.hero h1{max-width:9ch}.hero-copy{max-width:48rem}.piece{grid-template-columns:4rem 1fr}.piece .visual{grid-column:2}.synthesis{grid-template-columns:1fr}.piece:nth-child(even){margin-inline:calc(clamp(1rem,5vw,6rem) * -1)}}
@media(max-width:720px){.head{grid-template-columns:2rem 1fr}.head .doc{display:none}.hero{padding-top:4.5rem}.hero h1{font-size:clamp(3.2rem,16vw,5rem)}.piece{grid-template-columns:1fr;padding:3.5rem 0}.piece-num{width:3.4rem;height:3.4rem;font-size:1.25rem}.piece .visual{grid-column:auto}.piece h2{font-size:clamp(3rem,14vw,4.5rem)}.visual figcaption{flex-direction:column}.synthesis{padding-top:4rem;padding-bottom:4rem}.flow{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* v1.120-pigment-accessibility-cleanup — vector intervention plates: keep the full action visible */
.visual img{max-height:none;aspect-ratio:16/10;object-fit:contain;background:#f2eee4}
#system .visual img{aspect-ratio:16/10}
/* v1.120-pigment-accessibility-cleanup — photographic intervention studies: preserve full image, no crop */
.visual img{display:block;width:100%;height:auto!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;background:#f2eee4}
#system .visual img{aspect-ratio:auto!important}

/* v1.120-pigment-accessibility-cleanup — feedback-led art direction: one restrained visual system, not a new design language */
.piece:nth-child(even){background:transparent;color:var(--ink);margin-inline:0;padding-inline:0;border-top-color:var(--line)}
.piece:nth-child(even) .answers div{border-color:var(--line)}
.piece:nth-child(even) .answers dt,.piece:nth-child(even) .visual figcaption{color:#697a71}
.piece:nth-child(even) .visual img{border-color:rgba(16,36,29,.12)}
.visual img{display:block;width:100%;height:auto!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;background:#ebe5da}
.piece .visual{align-self:start}
.piece .visual img{box-shadow:0 .35rem 1.2rem rgba(16,36,29,.06)}
.piece .answers dt{color:#53665c}
.piece .answers dd{max-width:47ch}
#system{padding-top:clamp(4.5rem,8vw,8rem);padding-bottom:clamp(5rem,9vw,9rem);border-top:2px solid var(--ink)}
#system .piece-num{background:var(--acid);color:var(--deep)}
#system h2{font-size:clamp(3.5rem,6.2vw,6.5rem)}
#system .visual{position:relative}
#system .visual::before{content:"A / B · EINE VERBINDUNG VERSCHOBEN";display:block;margin-bottom:.55rem;font-size:.61rem;font-weight:700;letter-spacing:.13em;color:#53665c}
@media(max-width:1000px){.piece:nth-child(even){margin-inline:0}.piece{grid-template-columns:4rem minmax(0,1fr)}.piece .visual{grid-column:1/-1;margin-top:.5rem}}
@media(max-width:720px){.piece{grid-template-columns:1fr}.piece .visual{grid-column:auto}.piece .answers dd{max-width:none}}

@media(min-width:2200px){html{font-size:clamp(17px,.78vw,21px)}}

/* Dunkle Darstellung. Das Grün der Untersuchung bleibt der Grundton,
   nur die Richtung kehrt sich um. Flächen und Schrift sind getrennt. */
[data-theme="dark"] {
  --paper: #0e1a15;
  --ink: #e9efe9;
  --panel-dark: #10241d;
  --panel-bright: #16241e;
  --muted: #93a69c;
  --line: #2b3b34;
}


/* Fest notierte gedämpfte Töne aus dem hellen Entwurf. Auf dunklem
   Grund tragen sie nicht mehr; sie behalten ihre Rolle als Nebentext,
   nur heller. */
[data-theme="dark"] .kicker,
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .answers dt,
[data-theme="dark"] .piece .answers dt,
[data-theme="dark"] .visual figcaption,
[data-theme="dark"] .footer { color: #93a69c; }

/* Die Kopfzeile liegt als helle Fläche über dem dunklen Grund. */
[data-theme="dark"] .head { background: rgba(14, 26, 21, .96); }

/* ─────────────────────────────────────────────────────────────
   Schrift auf der Signalfarbe bleibt in beiden Darstellungen dunkel.
   --ink ist im dunklen Thema hell; ohne diese Regel verschwindet
   jede Beschriftung auf dem Acid-Grund. Vollständig erzeugt aus
   allen Stellen, die diesen Grund setzen.
   ───────────────────────────────────────────────────────────── */
[data-theme="dark"] #system .piece-num { color: #101010; }

/* Die Kopfzeile trägt einen fest notierten hellen Grund. */
[data-theme="dark"] .head { background: rgba(14,26,21,.96); }

/* Dieselbe Ordnung wie in der Dokumentation: die dunklen Flaechen
   kehren ihre Richtung um, statt auf dem Grund zu verschwinden.
   Grund #0e1a15 -> Flaeche #232f2a (1.28). */
[data-theme="dark"] { --panel-dark: #232f2a; --deep: #232f2a; }