/* ORGLITH — Prototyp
   Struktur nach palantir.com (eine Schriftstärke, 1px-Linien, keine Radien,
   Versal-Mikrolabels, 100px-Bänder, 30px-Raster, binäres Flächensystem).
   Farben und Schrift von orglith.com.
   Keine externen Ressourcen. Keine Cookies. Kein Speicherzugriff. */

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Flächen */
  --ink-deep:   #071320;
  --ink:        #0c1a2b;
  --ink-tint:   #0a2030;   /* dritte Fläche, teal-gestimmt — bricht das strenge Binäre */
  --light:      #e8edf3;

  /* Schrift */
  --text:       #e8edf3;
  --text-dim:   #8fa3ba;
  --text-on-light:     #0c1a2b;
  --text-on-light-dim: #4a5f7a;

  /* Akzent — auf Dunkel hell, auf Hell dunkel (beide AA) */
  --accent:      #00c9be;
  --accent-dark: #006d75;

  /* Linien — 1px, nie Radius */
  --line:        rgba(232,237,243,0.14);
  --line-strong: rgba(232,237,243,0.30);
  --line-light:  rgba(12,26,43,0.16);

  /* Raster */
  --pad-x:  clamp(1.25rem, 4vw, 1.875rem);
  --band-y: clamp(3.5rem, 9vw, 6.25rem);
  --gap:    1.875rem;
  --max:    78rem;
  --measure: 60ch;

  /* Typografie */
  --fs-display: clamp(2.25rem, 6.4vw, 5rem);
  --fs-section: clamp(1.75rem, 4vw, 3.25rem);
  --fs-lead:    clamp(1.125rem, 1.9vw, 1.5rem);
  --fs-body-lg: 1.125rem;
  --fs-body:    1rem;
  /* Fließend wie die großen Stufen: 12px bis ~1000px, 14px ab ~1920px. Vorher fest bei
     0.6875rem (= micro im Produkt-Spec, der Stufe für Badges und IDs) — auf breiten
     Schirmen wuchs damit der Abstand zu den clamp-Stufen mit der Fensterbreite mit. */
  --fs-label:   clamp(0.75rem, 0.61rem + 0.22vw, 0.875rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

:target, [id^='p'], [id^='f'] { scroll-margin-top: 5.5rem; }

body {
  background: var(--ink);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv05';
}

/* ---------- Grundbausteine ---------- */

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad-x); }

.label {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
}
/* Das Leerzeichen hinter der Nummer steht im Markup, nicht hier: der Rand trennt nur
   optisch, bei der Text-Extraktion klebte die Nummer am Etikett — Google zeigte
   "01Nach Lage". Der Rand bleibt bei 0.75em; mit dem Leerzeichen wird die Luecke rund
   einen Pixel breiter als zuvor, das faellt nicht auf. */
.label .num { color: var(--text-dim); margin-right: 0.75em; }

.band { padding-block: var(--band-y); border-top: 1px solid var(--line); }
.band > .wrap { display: grid; grid-template-columns: 12.5rem 1fr; gap: var(--gap); }
.band-head { grid-column: 1; }
.band-body { grid-column: 2; max-width: var(--measure); }

/* Helles Band — das eine Flächenumschlagen der Seite */
.band.invert {
  background: var(--light);
  color: var(--text-on-light);
  border-top-color: transparent;
}
.band.invert .label { color: var(--accent-dark); }
.band.invert .label .num { color: var(--text-on-light-dim); }
.band.invert .dim { color: var(--text-on-light-dim); }
.band.invert .rule { background: var(--line-light); }
.band.invert a { color: var(--text-on-light); text-decoration-color: var(--accent-dark); }

h1, h2, h3 { font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; }
h1 { font-size: var(--fs-display); letter-spacing: -0.0425em; }
h2 { font-size: var(--fs-section); }
h1.page-title { font-size: var(--fs-section); letter-spacing: -0.02em; }

p { margin-block-end: 1.25rem; }
p:last-child { margin-block-end: 0; }
.lead { font-size: var(--fs-lead); line-height: 1.32; letter-spacing: -0.015em; }
.big  { font-size: var(--fs-body-lg); }
.dim  { color: var(--text-dim); }

.rule { height: 1px; background: var(--line); border: 0; margin-block: 2.5rem; }

a { color: var(--text); text-underline-offset: 0.25em; text-decoration-color: var(--accent); }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--light); color: var(--ink); padding: 0.75rem 1.25rem; z-index: 100;
}
.skip:focus { left: 0; }

/* ---------- Kopf ---------- */

.masthead {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap);
  padding: 1.25rem var(--pad-x);
  background: rgba(7,19,32,0.92);
  background: color-mix(in srgb, var(--ink-deep) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
}
.masthead.stuck { border-bottom-color: var(--line); }
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.brand svg { width: clamp(30px, 2.1vw, 38px); height: auto; display: block; }
/* Die Wortmarke folgt der Typografie-Quelle, nicht dem Mikrolabel-Muster der Seite:
   org-graph docs/features/document-export/samples/print-layout.json führt sie als
   {"text": "Orglith", "bold": true, "font": "brand"}, und print-tokens.json setzt
   fonts.brand = Inter mit dem Vermerk „NUR die Orglith-Wortmarke". Also gemischt
   geschrieben, fett, ungesperrt — nicht ORGLITH mit 0.18em wie bisher.
   Stärke 600, nicht 700: Der geladene Schnitt trägt 300–600, alles darüber würde der
   Browser künstlich fetten — auf einer Wortmarke der sichtbarste Fehler, den es gibt. */
.brand span {
  font-size: clamp(1.0625rem, 0.94rem + 0.28vw, 1.3125rem);
  font-weight: 600; letter-spacing: -0.005em; color: var(--text);
}
.masthead nav { display: flex; gap: 1.5rem; }
.masthead nav a {
  font-size: var(--fs-label); letter-spacing: 0.05em; text-transform: uppercase;
  text-decoration: none; color: var(--text-dim);
}
.masthead nav a:hover, .masthead nav a[aria-current] { color: var(--text); }

/* ---------- Hero ---------- */

.hero {
  background: var(--ink-deep);
  min-height: min(88vh, 54rem);
  display: flex; align-items: center;
  padding-block: clamp(5rem, 16vh, 12rem);
}
.hero .wrap { display: block; }
/* Stabilisierter Textblock. .hero zentriert senkrecht, also haengt die Position des
   Inhalts an seiner Hoehe — und die ist in zwei Sprachen nie gleich. Gemessen sprangen
   3 von 23 Seitenpaaren beim Umschalten (Startseite und wer-wir-sind je 14px, die
   Personal-Perspektive 76px), die uebrigen 20 standen auf den Pixel gleich.
   Der Unterschied: die 20 ruhigen Seiten tragen .hero.tight mit min-height:auto, sind
   also inhaltsgetrieben und werden von der Polsterung verankert. Nur wo die Mindesthoehe
   bindet, schwimmt der Block in der Mitte. Eine Mindesthoehe auf dem Block gibt der
   Zentrierung ein Objekt konstanter Hoehe — exakt dort und nur dort.
   Der Wert haengt NICHT an der Fensterhoehe: ein erster Versuch mit 48vh war bei
   900px Fensterhoehe nur 390px und damit kleiner als die deutschen Bloecke (427px).
   28rem fasst sie; die Zeilenzahl ist ueber alle Breiten stabil, weil max-width in ch
   gesetzt ist. Unter 52rem Fensterbreite faellt die Mindesthoehe des Hero ohnehin weg.
   Preis: auf den 18 Seiten mit Mindesthoehe sitzt kurzer Inhalt rund 80px hoeher. */
.hero:not(.tight) .wrap { min-height: 28rem; }
.hero .claim {
  font-size: var(--fs-label); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin-block-end: clamp(2rem, 6vh, 3.5rem);
}
.hero h1 { max-width: 20ch; }
.hero .mirror { margin-block-start: clamp(2rem, 5vh, 3rem); max-width: 42ch; }
.hero .qualify {
  margin-block-start: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line-strong);
  max-width: 42ch;
}

/* ---------- Manifest (Zone 3) ---------- */

.manifest { list-style: none; max-width: 46ch; }
.manifest li {
  font-size: clamp(1.0625rem, 1.7vw, 1.375rem);
  line-height: 1.34; letter-spacing: -0.012em;
  padding-block: 1.375rem;
  border-top: 1px solid var(--line);
}
.manifest li:first-child { border-top: 0; padding-top: 0; }

/* ---------- Bedingungsliste (Zone 5) ---------- */

.conditions { list-style: none; margin-block: 2rem; }
.conditions li {
  padding-left: 1.75rem; position: relative;
  margin-block-end: 0.875rem; color: var(--text-dim);
}
.conditions li::before {
  content: ''; position: absolute; left: 0; top: 0.7em;
  width: 0.75rem; height: 1px; background: var(--accent);
}

/* ---------- Positionen (Maßstab-Seite) ---------- */

.position { border-top: 1px solid var(--line); padding-block: var(--band-y); }
.position .standard {
  margin-block-start: 2.5rem; padding: 1.5rem 0 0;
  border-top: 1px solid var(--line-strong);
  font-size: var(--fs-body-lg); line-height: 1.45;
}
.position .standard .label { margin-block-end: 0.75rem; }

/* ---------- Abbinder ---------- */

.signature { text-align: left; padding-block: var(--band-y); border-top: 1px solid var(--line); }
.signature .anchor {
  font-size: clamp(1.25rem, 3vw, 2rem); letter-spacing: -0.02em; margin-block-end: 2rem;
}

footer.legal {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem;
  font-size: var(--fs-label); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-dim);
}
footer.legal .wrap { display: flex; flex-wrap: wrap; gap: 1.875rem; justify-content: space-between; }
footer.legal a { color: var(--text-dim); text-decoration-color: var(--line-strong); }
footer.legal a:hover { color: var(--text); }
footer.legal ul { list-style: none; display: flex; gap: 1.875rem; flex-wrap: wrap; }

/* ---------- HUD-Anzeige ---------- */

.hud {
  position: fixed; left: var(--pad-x); bottom: 1.25rem; z-index: 40;
  font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim); pointer-events: none;
  display: flex; align-items: center; gap: 0.625rem;
}
.hud .bar { width: 2.5rem; height: 1px; background: var(--line-strong); position: relative; }
.hud .bar i { position: absolute; inset: 0 auto 0 0; background: var(--accent); width: 0; }

/* ---------- Bewegung ---------- */

/* Nur verstecken, wenn JS läuft — sonst bleibt die Seite ohne Skript leer. */
html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s ease; }
html.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Schmale Viewports ---------- */

@media (max-width: 52rem) {
  .band > .wrap { grid-template-columns: 1fr; gap: 1.25rem; }
  .band-head, .band-body { grid-column: 1; }
  .hud { display: none; }
}

/* ---------- Druck ---------- */
/* Gremien drucken aus und geben PDFs weiter. Vorher kamen dabei sieben Seiten heraus,
   fünf davon leer: Die Bänder stehen bis zum Scrollen auf opacity 0, und beim Drucken
   scrollt nichts. Dazu trägt die Seite helle Schrift auf dunklem Grund — ein blankes
   `body { color: #000 }` reicht nicht, weil jedes Element seine eigene Farbe aus den
   Token zieht. Deshalb werden hier die Token umdefiniert, nicht einzelne Regeln. */
@media print {
  :root {
    --ink-deep: #fff;  --ink: #fff;  --ink-tint: #fff;  --light: #fff;
    --text: #111;      --text-dim: #444;
    --text-on-light: #111;  --text-on-light-dim: #444;
    --accent: #006d75;      --accent-dark: #006d75;
    --line: rgba(0,0,0,0.18);  --line-strong: rgba(0,0,0,0.34);  --line-light: rgba(0,0,0,0.18);
    --dg: #006d75;
    --band-y: 1.5rem;
  }
  html.js .reveal, .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .masthead, .hud, .frames, .credit, .skip, .cta { display: none !important; }
  body, .band, .band.tint, .band.invert, .hero, .signature { background: #fff !important; color: #111 !important; }
  .hero { min-height: 0; background-image: none !important; padding-block: 1.5rem; }
  .hero::before { display: none; }
  a { color: #111; text-decoration: underline; }
  /* Verweisziele mitdrucken — auf Papier ist ein Link sonst eine Sackgasse. */
  main a[href^="http"]::after, main a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
  .band, .signature, section { break-inside: avoid; page-break-inside: avoid; }
  h1, h2 { break-after: avoid; page-break-after: avoid; }
  img, svg { max-width: 100% !important; }
}


/* ---------- Dritte Fläche ---------- */

.band.tint { background: var(--ink-tint); border-top-color: var(--accent-line, rgba(0,201,190,0.22)); }
.band.tint .rule { background: rgba(0,201,190,0.20); }

/* ---------- Lagen ---------- */

.lagen { list-style: none; }
.lagen > li {
  border-top: 1px solid var(--line);
  padding-block: 1.5rem;
  font-size: var(--fs-body-lg); line-height: 1.5;
}
.lagen > li:first-child { border-top: 0; padding-top: 0; }

.case { border-top: 1px solid var(--line); padding-block: var(--band-y); }
/* Abschnitt mit Marke — in den Positionen des Maßstabs und im Formular. */
.field { margin-block-start: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.field:first-of-type { border-top: 0; padding-top: 0; margin-block-start: 0; }
.field .label { margin-block-end: 0.75rem; }
.field.standard { border-top-color: var(--line-strong); }

/* ---------- Sprachumschalter ---------- */

.lang { display: flex; align-items: center; gap: 0.5rem; }
.lang a, .lang span {
  font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
}
.lang span[aria-current] { color: var(--text); }
.lang a { color: var(--text-dim); }
.lang a:hover { color: var(--text); }
.lang .sep { color: var(--line-strong); }

/* ---------- Diagramm ---------- */

figure.diagram { margin-block: 3rem 0; }
figure.diagram svg { width: 100%; height: auto; display: block; }
figure.diagram figcaption {
  margin-block-start: 1.25rem; font-size: var(--fs-label); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-dim);
}
.band.invert figure.diagram figcaption { color: var(--text-on-light-dim); }

.dg-field   { fill: none; stroke: currentColor; stroke-opacity: 0.16; }
.dg-old     { fill: none; stroke: currentColor; stroke-opacity: 0.45; stroke-dasharray: 5 5; }
.dg-new     { fill: none; stroke: var(--accent-dark); stroke-width: 1.5; }
.dg-path    { fill: none; stroke: currentColor; stroke-opacity: 0.30; }
.dg-path-new{ fill: none; stroke: var(--accent-dark); stroke-opacity: 0.9; }
.dg-block   { fill: none; stroke: currentColor; stroke-opacity: 0.55; }
.dg-txt     { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; fill: currentColor; fill-opacity: 0.65; }
.dg-txt-acc { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; fill: var(--accent-dark); }


/* ---------- Index auf den Tiefenseiten ---------- */

.index { list-style: none; margin-block-start: 2.5rem; border-top: 1px solid var(--line); }
.index li { border-bottom: 1px solid var(--line); }
.index a {
  display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: baseline;
  padding-block: 1rem; text-decoration: none; color: var(--text-dim);
  transition: color .2s;
}
.index a:hover, .index a:focus-visible { color: var(--text); }
.index .n { font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--accent); }
.index .t { font-size: var(--fs-body-lg); line-height: 1.35; letter-spacing: -0.012em; }

/* ---------- Abgesetzter Nebenblock, wie der Maßstab-Block ---------- */

.aside-block {
  margin-block-start: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line-strong);
}
.aside-block .label { margin-block-end: 0.75rem; }
.band.invert .aside-block { border-top-color: var(--line-light); }

.more { margin-block-start: 2.5rem; font-size: var(--fs-label); letter-spacing: 0.05em; text-transform: uppercase; }


/* ---------- Rahmenwerk: vier Stufen statt Liste ---------- */

.frame { margin-block-start: 2.5rem; display: grid; gap: 1px; background: var(--line);
         grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.frame > div { background: var(--ink); padding: 1.5rem 1.25rem; display: flex; flex-direction: column; }
.hero .frame > div { background: var(--ink-deep); }
.frame .stage { font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase;
                color: var(--accent); margin-block-end: 0.375rem; }
.frame .ask { font-size: var(--fs-label); letter-spacing: 0.02em; color: var(--text-dim);
              margin-block-end: 1.25rem; text-transform: none; }
.frame ol { list-style: none; display: flex; flex-direction: column; gap: 0.875rem; margin: 0; }
.frame li { border-top: 1px solid var(--line); padding-top: 0.875rem; }
.frame li:first-child { border-top: 0; padding-top: 0; }
.frame a { display: block; text-decoration: none; color: var(--text-dim); line-height: 1.35;
           font-size: 0.9375rem; letter-spacing: -0.01em; transition: color .2s; }
.frame a:hover, .frame a:focus-visible { color: var(--text); }
.frame a .n { display: block; font-size: var(--fs-label); letter-spacing: 0.08em;
              color: var(--accent); margin-block-end: 0.375rem; }
.frame .arrow { margin-block-start: auto; padding-top: 1.5rem; font-size: var(--fs-label);
                color: var(--line-strong); text-align: right; }
.frame .arrow::after { content: "\2192"; }
@media (max-width: 36rem) { .frame .arrow { text-align: left; } .frame .arrow::after { content: "\2193"; } }

@media (max-width: 62rem) { .frame { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 36rem) { .frame { grid-template-columns: 1fr; } }

/* ---------- Lagen: seitenwechselnd, überlappend ---------- */

.case { position: relative; z-index: 1; }
.case > .wrap { grid-template-columns: 5fr 7fr; align-items: start; }
.case.flip > .wrap { grid-template-columns: 7fr 5fr; }
.case.flip .band-head { grid-column: 2; grid-row: 1; }
.case.flip .band-body { grid-column: 1; grid-row: 1; margin-block-start: 0; }
.case:not(.flip) .band-body { margin-block-start: 2.5rem; }

.case .ghost {
  display: block;
  font-size: clamp(3.5rem, 11vw, 8rem);
  line-height: 0.78;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px currentColor;
  opacity: 0.20;
  margin-block-start: calc(var(--band-y) * -1.15);
  margin-block-end: 1.25rem;
  pointer-events: none;
}
.case .band-head .label { display: block; max-width: 18ch; }
.case.flip .band-head { text-align: right; }
.case.flip .band-head .label { margin-inline-start: auto; }
.case.flip .ghost { text-align: right; }

@media (max-width: 52rem) {
  .case > .wrap, .case.flip > .wrap { grid-template-columns: 1fr; }
  .case.flip .band-head, .case.flip .band-body { grid-column: 1; grid-row: auto; }
  .case.flip .band-head { text-align: left; }
  .case.flip .band-head .label { margin-inline-start: 0; }
  .case.flip .ghost { text-align: left; }
  .case:not(.flip) .band-body { margin-block-start: 0; }
  .case .ghost { margin-block-start: calc(var(--band-y) * -0.6); }
}


/* ---------- Diagramm-Varianten ---------- */

.g-frame { fill:none; stroke:currentColor; stroke-opacity:.14 }
.p-out   { fill:currentColor; fill-opacity:.14 }
.p-old   { fill:currentColor; fill-opacity:.40 }
.p-new   { fill:var(--dg); fill-opacity:.95 }
.g-ring  { fill:none; stroke:currentColor; stroke-opacity:.10 }
.g-old   { fill:none; stroke:currentColor; stroke-opacity:.42; stroke-dasharray:4 5 }
.g-new   { fill:none; stroke:var(--dg); stroke-width:1.5 }
.g-traj-stub { fill:none; stroke:currentColor; stroke-opacity:.22 }
.g-traj-new  { fill:none; stroke:var(--dg); stroke-opacity:.85 }
.g-stub-end  { fill:currentColor; fill-opacity:.30 }
.g-origin    { fill:var(--dg) }
.c-out { fill:currentColor; fill-opacity:.05 }
.c-old { fill:currentColor; fill-opacity:.22 }
.c-new { fill:var(--dg); fill-opacity:.85 }
.g-base { stroke:currentColor; stroke-opacity:.35; fill:none }
.g-tick { stroke:currentColor; stroke-opacity:.22; fill:none }
.g-drop { stroke:var(--dg); stroke-opacity:.35; stroke-dasharray:3 4; fill:none }
.g-excl rect { fill:none; stroke:currentColor; stroke-opacity:.5 }
.g-excl path { stroke:currentColor; stroke-opacity:.5; fill:none }
.g-lbl     { font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; fill:currentColor; fill-opacity:.55 }
.g-lbl-acc { font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; fill:var(--dg) }

svg.dg { width:100%; height:auto; display:block; --dg: var(--accent); }
.band.invert svg.dg, .surf-light svg.dg { --dg: var(--accent-dark); }

.surf { padding: 1.75rem; border: 1px solid var(--line); }
.surf-dark  { background: var(--ink-deep); color: var(--text); }
.surf-tint  { background: var(--ink-tint); color: var(--text); }
.surf-light { background: var(--light); color: var(--text-on-light); border-color: var(--line-light); }
.surf-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.surf-pair .surf { border: 0; }
@media (max-width: 52rem) { .surf-pair { grid-template-columns: 1fr; } }


/* ---------- Reifegrad-Feld ---------- */
.c-impl { fill: var(--dg); fill-opacity:.95 }
.c-part { fill: currentColor; fill-opacity:.42 }
.c-boot { fill: currentColor; fill-opacity:.42; stroke: var(--dg); stroke-width:1 }
.c-plan { fill: none; stroke: currentColor; stroke-opacity:.35 }
.c-na   { fill: none; stroke: currentColor; stroke-opacity:.15 }


/* ---------- V3: Verteiler ---------- */

.stakes { font-size: clamp(1.5rem, 3.4vw, 2.75rem); line-height: 1.16; letter-spacing: -0.028em; }
.stakes .nouns { display: block; margin-block-end: 1.25rem; }
.stakes .purpose { display: block; margin-block-start: 1.5rem; color: var(--accent); }

.assert { font-size: clamp(1.5rem, 3.6vw, 2.875rem); line-height: 1.14; letter-spacing: -0.03em; max-width: 34ch; }

.doors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line);
         border: 1px solid var(--line); margin-block-start: 2.5rem; }
.doors a { background: var(--ink); padding: 1.5rem 1.375rem; text-decoration: none; display: block;
           transition: background .2s, color .2s; color: var(--text-dim); }
.doors a:hover, .doors a:focus-visible { background: var(--ink-tint); color: var(--text); }
.doors .n { display: block; font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--accent);
            margin-block-end: 0.5rem; }
.doors .k { display: block; font-size: var(--fs-label); letter-spacing: 0.05em; text-transform: uppercase;
            margin-block-end: 0.625rem; color: var(--text); }
.doors .s { display: block; font-size: 1rem; line-height: 1.4; }
@media (max-width: 52rem) { .doors { grid-template-columns: 1fr; } }

.persp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line);
         border: 1px solid var(--line); margin-block-start: 2.5rem; }
.persp a { background: var(--ink); padding: 1.75rem 1.5rem; text-decoration: none; color: var(--text-dim);
           transition: background .2s, color .2s; }
.persp a:hover, .persp a:focus-visible { background: var(--ink-tint); color: var(--text); }
.persp .k { display: block; font-size: var(--fs-body-lg); letter-spacing: -0.015em; color: var(--text);
            margin-block-end: 0.75rem; }
@media (max-width: 52rem) { .persp { grid-template-columns: 1fr; } }

.crosslinks { margin-block-start: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-strong); }
.crosslinks ul { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; margin-block-start: 0.875rem; }
.crosslinks a { color: var(--text-dim); text-decoration-color: var(--line-strong); }
.crosslinks a:hover { color: var(--text); }


/* ---------- Kopfzeile auf schmalen Viewports ---------- */

@media (max-width: 52rem) {
  .masthead { flex-wrap: wrap; row-gap: 0.75rem; padding-block: 0.875rem; }
  .masthead nav { flex-wrap: wrap; gap: 0.5rem 1rem; width: 100%; }
  .brand span { letter-spacing: 0.14em; }
}
@media (max-width: 26rem) {
  .masthead nav a { font-size: 0.625rem; }
}


/* ---------- Diagrammschrift: viewBox-Einheiten skalieren mit ---------- */
/* 720 Einheiten auf ~350 px gerendert = Faktor 0,49 — 11 Einheiten waeren 5 px. */

@media (max-width: 40rem) {
  .g-lbl, .g-lbl-acc, .dg-txt, .dg-txt-acc { font-size: 17px; }
}
@media (max-width: 28rem) {
  .g-lbl, .g-lbl-acc, .dg-txt, .dg-txt-acc { font-size: 22px; letter-spacing: .03em; }
}

/* ---------- Sicherung: wenn das Fuss-Skript ausfaellt, trotzdem einblenden ---------- */

html.shown .reveal { opacity: 1 !important; transform: none !important; }

/* ---------- Kopfzeile: Reserve gegen Fallback-Schriften ---------- */

@media (max-width: 69rem) { .masthead nav { gap: 0.5rem 0.75rem; } }


/* ==================== V4: Aufmacher mit Bildsequenz ==================== */
/* Vier KI-generierte Aufnahmen, sehr langsame Ueberblendung mit leichtem Zoom.
   Kein JavaScript, keine Fremdressource. Bei prefers-reduced-motion steht das erste Bild still. */

.hero.bleed { position: relative; isolation: isolate; overflow: hidden;
              min-height: calc(100svh - 4.5rem); background: var(--ink-deep); }
.hero.bleed .frames { position: absolute; inset: 0; z-index: -2; }
.hero.bleed .frames i {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; animation: heroFade 64s linear infinite;
}
.hero.bleed .frames i:nth-child(1) { background-image: url('img/hero.webp');           animation-delay: 0s;   }
.hero.bleed .frames i:nth-child(2) { background-image: url('img/k-atrium-morgen.webp'); animation-delay: 16s;  }
.hero.bleed .frames i:nth-child(3) { background-image: url('img/j-werk-galerie.webp');   animation-delay: 32s;  }
.hero.bleed .frames i:nth-child(4) { background-image: url('img/n-flur-licht.webp');    animation-delay: 48s;  }

/* Der Rücksprung auf 1.05 passiert in einem Prozent des Zyklus, während die Ebene
   unsichtbar ist — nicht über die restlichen 70 %. Vorher interpolierten alle vier
   Ebenen dauerhaft ihren transform, auch bei opacity 0: vier Vollbild-Ebenen, die
   den Compositor nie zur Ruhe kommen ließen. Die Kopfzeile darüber hat
   backdrop-filter und musste deshalb in jedem Bild neu weichzeichnen. */
@keyframes heroFade {
   0%  { opacity: 0; transform: scale(1.05); }
   5%  { opacity: 1; }
  25%  { opacity: 1; }
  30%  { opacity: 0; transform: scale(1.00); }
  31%  { opacity: 0; transform: scale(1.05); }
 100%  { opacity: 0; transform: scale(1.05); }
}

.hero.bleed::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(7,19,32,.86) 0%, rgba(7,19,32,.58) 48%, rgba(7,19,32,.22) 100%); }
.hero.bleed h1 { text-shadow: 0 2px 24px rgba(0,0,0,.45); max-width: 34ch; }
.hero.bleed .claim, .hero.bleed .qualify { text-shadow: 0 1px 14px rgba(0,0,0,.7); }
.hero.bleed .wrap { width: 100%; }
.hero.bleed .credit { position: absolute; right: var(--pad-x); bottom: 1rem; margin: 0;
  font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }

@media (max-width: 52rem) {
  .hero.bleed .frames i { background-position: 78% center; }
  .hero.bleed::before { background: rgba(7,19,32,.68); }
}
@media (prefers-reduced-motion: reduce) {
  .hero.bleed .frames i { animation: none; opacity: 0; transform: none; }
  .hero.bleed .frames i:nth-child(1) { opacity: 1; }
}

/* Gruenderband auf der Startseite */
.founders { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
            border: 1px solid var(--line); margin-block-start: 2.5rem; }
.founders > div { background: var(--ink); padding: 1.75rem; }
.founders .n { display: block; font-size: var(--fs-body-lg); letter-spacing: -.015em; color: var(--text);
               margin-block-end: .625rem; }
.founders p { font-size: 1rem; line-height: 1.5; color: var(--text-dim); }
@media (max-width: 52rem) { .founders { grid-template-columns: 1fr; } }


/* ==================== V4: gestaffelte Aufmacher ==================== */
/* Startseite  = Bildsequenz, 100svh  — man ist angekommen.
   Achseneinstieg = ein stehendes Bild, 88vh — man hat eine Achse gewaehlt.
   Lage-Seite  = kein Bild, knapper Aufmacher — man ist im Material, die Zeile muss treffen. */

.hero.still { position: relative; isolation: isolate; overflow: hidden;
              background-color: var(--ink-deep); background-size: cover; background-position: center; }
.hero.still::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(7,19,32,.92) 0%, rgba(7,19,32,.72) 52%, rgba(7,19,32,.42) 100%); }
.hero.still h1 { text-shadow: 0 2px 20px rgba(0,0,0,.45); }
.hero.still .claim, .hero.still .qualify { text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.hero.still .credit { position: absolute; right: var(--pad-x); bottom: 1rem; margin: 0;
  font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
@media (max-width: 52rem) {
  .hero.still { background-position: 76% center; }
  .hero.still::before { background: rgba(7,19,32,.78); }
}

.hero.tight { min-height: auto; padding-block: clamp(3.5rem, 9vh, 6rem); }




/* ---------- Lage-Schemata (uebernommen aus prototyp-tj) ----------
   Organigramm-Schemata statt Punktfelder: Wo es einen Gegenstand gibt, wird er gezeichnet.
   Gebaut in derselben Sprache — 1px-Strich, kein Radius, --dg als Akzent. */

svg.px { width: 100%; height: auto; display: block; overflow: visible; --dg: var(--accent); color: var(--text); }
.px-l   { fill: none; stroke: currentColor; stroke-opacity: .38; stroke-width: 1; }
.px-s   { fill: none; stroke: currentColor; stroke-opacity: .75; stroke-width: 1.4; }
.px-k   { fill: currentColor; fill-opacity: .55; }
.px-lg  { fill: none; stroke: currentColor; stroke-opacity: .26; stroke-dasharray: 3 4; }
.px-la  { fill: none; stroke: var(--dg); stroke-width: 1.5; }
.px-lad { fill: none; stroke: var(--dg); stroke-width: 1.5; stroke-dasharray: 4 4; }
.px-n   { fill: var(--px-bg, var(--ink)); stroke: currentColor; stroke-opacity: .75; stroke-width: 1; }
.px-ng  { fill: none; stroke: currentColor; stroke-opacity: .32; stroke-dasharray: 2 3; }
.px-na  { fill: var(--dg); }
.px-f   { fill: currentColor; fill-opacity: .18; }
.px-fa  { fill: var(--dg); fill-opacity: .9; }
.px-b   { fill: none; stroke: currentColor; stroke-opacity: .22; }
.px-ba  { fill: none; stroke: var(--dg); stroke-opacity: .8; }

/* Aufmacher mit Bild */
svg.px { max-width: 15rem; margin-block-end: 1.75rem; }
.hero.pic, .hero.tight { --px-bg: var(--ink-deep); }
@media (max-width: 52rem) { svg.px { max-width: 11rem; } }


/* ---------- Handlungsschaltflaeche ---------- */
/* Form nach palantir.com: umrandet, 1px, kein Radius. Steht an zwei Orten — im Kopf
   jeder Seite und am Fuß der Startseite —, deshalb als eigene Klasse und nicht an
   .masthead gebunden. Beide tragen denselben Wortlaut: „Gespräch anfragen". */

.cta {
  display: inline-block;
  font-size: var(--fs-label); letter-spacing: 0.05em; text-transform: uppercase;
  text-decoration: none; color: var(--text);
  background: none;
  border: 1px solid var(--line-strong); padding: 0.875rem 1.1875rem;
  white-space: nowrap; transition: background .2s, border-color .2s;
}
.cta:hover, .cta:focus-visible {
  background: var(--accent); border-color: var(--accent); color: var(--ink-deep);
}
.signature .cta { padding: 1.0625rem 1.5rem; }
/* Gleiche Breite in beiden Fassungen. Die Schaltflaeche ist rechts verankert, also
   wandert alles links von ihr mit ihrer Breite — "Request a conversation" ist breiter
   als "Gespraech anfragen", und der Sprachumschalter daneben rutschte beim Umschalten
   unter dem Zeiger weg.
   em, nicht rem: --fs-label waechst mit dem Viewport (clamp mit vw-Anteil), eine feste
   rem-Breite nicht. Ein erster Versuch mit 14.5rem griff deshalb nur bei 1440px und
   liess den Umschalter auf breiten Schirmen weiter 57px wandern. 18em deckt das
   englische Etikett bei jeder Schriftgroesse. */
.masthead .cta { min-width: 18em; text-align: center; }
.masthead nav { margin-inline-start: auto; }

/* Sprachumschalter: zwei Buchstaben, der aktive ohne Verweis, rechts neben der
   Navigation und vor der Schaltflaeche. Er zeigt auf die entsprechende Seite,
   nicht auf die Startseite. Keine Weiterleitung nach Browsersprache — sie
   ueberstimmt den Leser und schickt einen deutschen Vorstand mit englischem
   Betriebssystem auf die falsche Fassung. */
.lang { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.lang a, .lang span {
  font-size: var(--fs-label); letter-spacing: 0.05em; text-transform: uppercase;
  text-decoration: none; color: var(--text-dim);
}
.lang a:hover, .lang a:focus-visible { color: var(--text); }
.lang [aria-current] { color: var(--text); }
.lang .sep { color: var(--line-strong); }

/* Umbruch bei 69rem statt 52rem wie sonst: Marke, fünf Verweise und die
   Schaltfläche stehen in einer Reihe; 66rem reichte nach „Die Perspektiven“
   in der DE-Nav nicht mehr — ~30 px Reserve für Fallback-Schriften. */
@media (max-width: 69rem) {
  .masthead nav { order: 3; margin-inline-start: 0; }
  .masthead .lang { order: 1; margin-inline-start: auto; }
  /* Auf schmalen Viewports faellt die feste Breite weg, dort zaehlt der Platz. */
  .masthead .cta { order: 2; padding: 0.625rem 0.875rem; min-width: 0; }
}

/* Porträts der Gründer — im schmalen Kopf der Fallbahn, damit die Links-Rechts-
   Wechselfolge der Bahnen sie von selbst spiegelt. */
.case .band-head figure.portraet { margin: 2rem 0 0; max-width: 20rem; }
.case.flip .band-head figure.portraet { margin-inline-start: auto; }
.case .band-head figure.portraet img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line);
}
@media (max-width: 52rem) {
  .case .band-head figure.portraet,
  .case.flip .band-head figure.portraet { max-width: 14rem; margin-inline-start: 0; }
}

/* ---------- Anfrageformular ---------- */
/* Dieselbe Formensprache wie der Rest: 1px-Linien, kein Radius, keine Füllung.
   Kein reCAPTCHA und kein fremdes Skript — die Spam-Abwehr ist die Falle unten
   plus serverseitige Begrenzung, siehe spezifikation-kontaktformular.md. */

.anfrage fieldset { border: 0; padding: 0; margin: 0 0 2.5rem; }
.anfrage legend { padding: 0; margin-block-end: 1.25rem; color: var(--text-dim); }
.anfrage .feld { display: block; margin-block-end: 1.5rem; }
.anfrage label {
  display: block; margin-block-end: 0.5rem;
  font-size: var(--fs-label); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-dim);
}
.anfrage input, .anfrage textarea {
  display: block; width: 100%; box-sizing: border-box;
  font: inherit; font-size: var(--fs-body-lg); line-height: 1.45;
  color: var(--text); background: var(--ink-deep);
  border: 1px solid var(--line-strong); border-radius: 0;
  padding: 0.8125rem 0.9375rem;
  transition: border-color .2s;
}
.anfrage textarea { resize: vertical; min-height: 9rem; }
.anfrage input:focus, .anfrage textarea:focus {
  outline: 0; border-color: var(--accent);
}
.anfrage input:focus-visible, .anfrage textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.anfrage .hinweis {
  display: block; margin-block-start: 0.5rem;
  font-size: 1rem; line-height: 1.4; color: var(--text-dim);
}
.anfrage .pflicht, .anfrage .rechtshinweis {
  font-size: 1rem; line-height: 1.5; color: var(--text-dim);
}
.anfrage .rechtshinweis { margin-block: 1.25rem 2.5rem; max-width: 60ch; }
/* background gehoert NICHT hierher: .anfrage button.cta ist spezifischer als
   .cta:hover und hat dessen Akzentfarbe ueberschrieben — der Absende-Knopf blieb beim
   Ueberfahren farblos, waehrend der Kopf-Knopf (ein <a>, ohne diese Ruecksetzung)
   richtig umschlug. Die Ruecksetzung steht jetzt in .cta selbst. */
.anfrage button.cta { cursor: pointer; font-family: inherit; }

/* Die Spam-Falle muss für Menschen unsichtbar sein, für Roboter aber ausfüllbar —
   also nicht display:none, sondern aus dem Sichtfeld geschoben. */
.anfrage .falle {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0;
}

@media (max-width: 52rem) { .anfrage input, .anfrage textarea { font-size: 1rem; } }

/* Aufzählungen in den Pflichtseiten — nüchtern, ohne Punkte, mit linker Kante. */
ul.dsgvo { list-style: none; margin: 1rem 0 0; padding: 0; }
ul.dsgvo li {
  position: relative; padding-inline-start: 1.25rem; margin-block-end: 0.5rem;
  font-size: var(--fs-body); line-height: 1.5; color: var(--text-dim);
}
ul.dsgvo li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.65em;
  width: 0.5rem; height: 1px; background: var(--accent);
}
ul.dsgvo li strong { color: var(--text); font-weight: 600; }