/* ═══════════════════════════════════════════════════════════════════
   kreis.systems — gemeinsames Stilblatt

   Gilt für alle Seiten. Aus Entwurf B („Schaltplan") entwickelt, mit
   den Befunden der drei Kritikläufe vom 2026-09-11 eingearbeitet.

   Leitbild bleibt das technische Datenblatt: Kennwertpaare, Haarlinien,
   tabellarische Ziffern. Keine Karten, keine Kacheln, kein Vollrahmen.
   Das Haus führt keine eigene Buntfarbe; Farbe tragen nur die vier
   Erzeugnisse. Kein JavaScript.

   Externes Stilblatt statt <style> im Kopf, weil die Seite jetzt aus
   neun Seiten besteht: so wird es einmal geladen und danach aus dem
   Zwischenspeicher bedient. Die Auslieferung erlaubt das,
   style-src 'self' steht in der CSP.

   Was hier nachgerechnet und nicht geschätzt ist: die Kontraste. Werte
   gegen --grund, nach WCAG 2.1:
     --text          16,25:1 hell   15,56:1 dunkel
     --gedimmt        6,41:1         7,16:1
     --linie-stark    4,02:1         4,46:1
     --signalbox      5,80:1         9,40:1
     --editio         5,79:1         9,31:1
     --dragui         5,99:1         8,80:1
     --kontor         6,13:1         9,28:1
   --linie-stark lag vorher bei 58 Prozent Helligkeit tiefer und erreichte
   nur 2,51:1. Das reißt die 3:1-Grenze für grafische Objekte, und die
   Zweignummern der Schemata standen auf derselben Farbe. Beides behoben.
   ═══════════════════════════════════════════════════════════════════ */

/* Chivo, selbst ausgeliefert. Eine Variable-Font-Datei je Zeichensatz,
   an drei feste Schnitte gebunden. Pfade ohne /seite-Präfix: die
   Serverwurzel ist laut nginx-Konfiguration bereits seite/. */
@font-face{
  font-family:"Chivo";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/chivo-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;
}
@font-face{
  font-family:"Chivo";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/chivo-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Chivo";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/chivo-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;
}
@font-face{
  font-family:"Chivo";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/chivo-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Chivo";font-style:normal;font-weight:800;font-display:swap;
  src:url("/fonts/chivo-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;
}
@font-face{
  font-family:"Chivo";font-style:normal;font-weight:800;font-display:swap;
  src:url("/fonts/chivo-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── Marken ──────────────────────────────────────────────────────── */

:root{
  --schrift:"Chivo","Segoe UI",system-ui,-apple-system,sans-serif;

  /* Papier und Tinte, warm getönt. Kein reines Schwarz, kein reines Weiß. */
  --ton:85;
  --grund:      oklch(97.8% 0.006 var(--ton));
  --flaeche:    oklch(99.4% 0.003 var(--ton));
  --text:       oklch(22%   0.012 var(--ton));
  --gedimmt:    oklch(47%   0.010 var(--ton));
  --linie:      oklch(85%   0.007 var(--ton));
  --linie-stark:oklch(58%   0.012 var(--ton));

  /* Die vier Erzeugnisse. Nur sie tragen Farbe. */
  --ton-signalbox:152; --ton-editio:68; --ton-dragui:308; --ton-kontor:250;
  --signalbox:oklch(48% 0.120 var(--ton-signalbox));
  --editio:   oklch(50% 0.135 var(--ton-editio));
  --dragui:   oklch(50% 0.130 var(--ton-dragui));
  --kontor:   oklch(48% 0.120 var(--ton-kontor));
  --marke:var(--text);

  /* Abstandsraster. Nur diese acht Werte, nichts dazwischen. */
  --a1:4px; --a2:8px; --a3:12px; --a4:16px;
  --a5:24px; --a6:32px; --a7:48px; --a8:64px;

  /* Schriftstufen, Verhältnis 1,25 ab 16 Pixel. Darunter genau zwei
     Größen für Beschriftung und Sekundärtext, damit nicht sieben
     willkürliche Kleingrößen nebeneinanderstehen. */
  --s0:11px; --s1:13px; --s2:16px; --s3:20px;
  --s4:25px; --s5:31px; --s6:39px; --s7:49px;

  --dauer:160ms; --kurve:cubic-bezier(0.22,1,0.36,1);
  --kopfhoehe:60px;
}

@media (max-width:900px){ :root{ --kopfhoehe:104px; } }
@media (max-width:560px){ :root{ --kopfhoehe:148px; } }

/* Drei Zustände, zwei Fassungen. Die Papierfassung steht oben als
   nackte Wahrheit in :root, sie gilt immer, wenn nichts anderes
   zutrifft. Darunter kommt die Dunkelfassung zweimal:

     1. wenn das Betriebssystem sie will UND der Besucher nicht
        ausdrücklich hell gewählt hat
     2. wenn der Besucher sie ausdrücklich gewählt hat

   Das `:not([data-thema="hell"])` in Fall 1 ist der ganze Trick. Ohne
   es käme die Wahl „hell" gegen ein dunkles Betriebssystem nicht an:
   die Mediendeklaration stünde später und mit gleicher Gewichtung.
   Fall 2 steht danach und wiegt mit (0,2,0) schwerer als :root, damit
   die Wahl „dunkel" auch auf hellem Betriebssystem greift.

   Das Attribut setzt /thema.js an <html>, vor dem ersten Bild.
   Ohne JavaScript fehlt es und es bleibt bei Fall 1 — also beim
   Verhalten von vorher. */

:root{ color-scheme:light; }

@media (prefers-color-scheme:dark){
  :root:not([data-thema="hell"]){
    color-scheme:dark;
    --grund:      oklch(17% 0.010 var(--ton));
    --flaeche:    oklch(21% 0.010 var(--ton));
    --text:       oklch(93% 0.008 var(--ton));
    --gedimmt:    oklch(70% 0.010 var(--ton));
    --linie:      oklch(34% 0.010 var(--ton));
    --linie-stark:oklch(58% 0.012 var(--ton));
    --signalbox:oklch(76% 0.135 var(--ton-signalbox));
    --editio:   oklch(78% 0.140 var(--ton-editio));
    --dragui:   oklch(77% 0.130 var(--ton-dragui));
    --kontor:   oklch(77% 0.120 var(--ton-kontor));
  }
}

:root[data-thema="dunkel"]{
  color-scheme:dark;
  --grund:      oklch(17% 0.010 var(--ton));
  --flaeche:    oklch(21% 0.010 var(--ton));
  --text:       oklch(93% 0.008 var(--ton));
  --gedimmt:    oklch(70% 0.010 var(--ton));
  --linie:      oklch(34% 0.010 var(--ton));
  --linie-stark:oklch(58% 0.012 var(--ton));
  --signalbox:oklch(76% 0.135 var(--ton-signalbox));
  --editio:   oklch(78% 0.140 var(--ton-editio));
  --dragui:   oklch(77% 0.130 var(--ton-dragui));
  --kontor:   oklch(77% 0.120 var(--ton-kontor));
}

/* ── Grundlage ───────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;background:var(--grund);color:var(--text);
  font-family:var(--schrift);font-size:var(--s2);line-height:1.55;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
a{color:inherit;}
h1,h2,h3,p,dl,dd,ul,figure,figcaption{margin:0;}
ul{padding:0;list-style:none;}
img{display:block;max-width:100%;}
:focus-visible{outline:2px solid var(--text);outline-offset:3px;}
[id]{scroll-margin-top:calc(var(--kopfhoehe) + var(--a2));}

.rahmen{max-width:1180px;margin:0 auto;padding-inline:var(--a5);}
@media (max-width:640px){.rahmen{padding-inline:var(--a4);}}
.rahmen--schmal{max-width:820px;}

/* Sprung an den Inhalt, wie auf den Fragebogenseiten. */
.zum-inhalt{
  position:absolute;left:-9999px;top:0;z-index:40;
  background:var(--text);color:var(--grund);
  padding:var(--a3) var(--a4);font-weight:600;font-size:var(--s1);
  text-decoration:none;
}
.zum-inhalt:focus{left:0;}

/* ── Kopf ────────────────────────────────────────────────────────── */

.kopf{
  position:sticky;top:0;z-index:20;
  background:var(--grund);
  border-bottom:1px solid var(--linie);
}
/* Weichzeichnung nur auf breiten Schirmen: sie kostet bei jedem
   Scrollbild Kompositionsaufwand, und auf dem Telefon lohnt das nicht. */
@media (min-width:901px){
  @supports (backdrop-filter:blur(8px)){
    .kopf{
      background:color-mix(in oklab,var(--grund) 90%,transparent);
      backdrop-filter:blur(8px);
    }
  }
}
.kopf__innen{display:flex;align-items:baseline;gap:var(--a5);
  padding-block:var(--a3);flex-wrap:wrap;}
.wortmarke{font-weight:800;letter-spacing:-.015em;font-size:var(--s2);}
.wortmarke a{text-decoration:none;}
.kopf__name{color:var(--gedimmt);font-size:var(--s1);}
.sprung{margin-left:auto;display:flex;gap:var(--a4);flex-wrap:wrap;
  font-size:var(--s1);}
.sprung a{color:var(--gedimmt);text-decoration:none;padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:color var(--dauer) var(--kurve),border-color var(--dauer) var(--kurve);}
.sprung a:hover{color:var(--text);border-bottom-color:var(--linie-stark);}
.sprung a[aria-current="page"]{color:var(--text);border-bottom-color:var(--text);}

/* Der Umschalter der Farbfassung. Haarlinie, scharfe Ecken, dieselbe
   Kleingröße wie die Navigation: er soll wie eine Zeile im Datenblatt
   aussehen und nicht wie ein Bedienelement aus einem Baukasten. Das
   Zeichen ist ein Kreis in drei Füllungen — voll, halb, leer —, was
   dem Haus auch nominell entspricht. Erzeugt von /thema.js; ohne
   JavaScript steht hier nichts, und das ist beabsichtigt. */
.thema{
  appearance:none;-webkit-appearance:none;
  font:inherit;font-size:var(--s1);font-variant-numeric:tabular-nums;
  color:var(--gedimmt);background:transparent;
  border:1px solid var(--linie);border-radius:0;
  padding:2px var(--a3) 3px;
  display:inline-flex;align-items:center;gap:var(--a2);
  cursor:pointer;white-space:nowrap;
  transition:color var(--dauer) var(--kurve),
             border-color var(--dauer) var(--kurve);
}
.thema:hover{color:var(--text);border-color:var(--linie-stark);}
/* Auf schmalen Schirmen bricht die Navigation ohnehin in eine eigene
   Zeile. Der Knopf setzt sich dann neben die Wortmarke statt eine
   dritte Zeile zu eröffnen — sonst wüchse der klebende Kopf um 40
   Pixel, und die sind auf einem Telefon ein Viertel der Höhe. Die
   Werte von --kopfhoehe bleiben damit gültig. */
@media (max-width:900px){
  .kopf__innen{align-items:center;}
  .thema{order:2;margin-left:auto;}
  .sprung{order:3;width:100%;margin-left:0;}
}
/* Unter 560 Pixeln passen Wortmarke, Name und ein beschrifteter Knopf
   nicht mehr in eine Zeile, der Knopf rutschte in eine eigene und der
   klebende Kopf wuchs auf rund 185 Pixel (Befund 2026-09-13 bei 390 px).
   Der Knopf zeigt dort nur das Kreiszeichen, sein zugaenglicher Name
   nennt weiter Zustand und Wirkung; der Name im Kopf wird mit
   Auslassungspunkten gekuerzt statt umzubrechen. */
@media (max-width:560px){
  .thema{padding:4px var(--a2);gap:0;}
  /* doppelte Klasse, weil die Grundregel .thema__wort weiter unten steht */
  .thema .thema__wort{display:none;}
  .kopf__name{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}
/* Feste Breite für das Wort, sonst springt der ganze Kopf bei jedem
   Klick um die Differenz zwischen „Hell" und „Dunkel". */
.thema__wort{display:inline-block;min-width:4.6em;text-align:left;}
.thema__zeichen{font-size:var(--s2);line-height:1;}

/* ── Aufschlag ───────────────────────────────────────────────────── */

.aufschlag{padding-block:var(--a8) var(--a7);}
.aufschlag--geteilt{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:var(--a8);align-items:center;
}
@media (max-width:980px){
  .aufschlag--geteilt{grid-template-columns:1fr;gap:var(--a7);}
}
.aufschlag h1{
  font-size:clamp(var(--s5),4.4vw,var(--s7));line-height:1.06;
  letter-spacing:-.03em;font-weight:800;text-wrap:balance;
}
.aufschlag__zweitzeile{
  margin-top:var(--a4);font-size:clamp(var(--s3),2vw,var(--s4));
  line-height:1.3;font-weight:600;letter-spacing:-.018em;
  color:var(--gedimmt);max-width:36ch;
}
.aufschlag__post{margin-top:var(--a5);color:var(--gedimmt);max-width:60ch;}
.aufschlag__post strong{color:var(--text);font-weight:600;}

.seitenkopf{padding-block:var(--a8) var(--a6);}
.seitenkopf__kicker{font-size:var(--s0);letter-spacing:.11em;
  text-transform:uppercase;color:var(--gedimmt);font-weight:700;}
.seitenkopf h1{
  margin-top:var(--a3);
  font-size:clamp(var(--s5),4vw,var(--s6));line-height:1.06;
  letter-spacing:-.028em;font-weight:800;text-wrap:balance;
}
.seitenkopf__post{margin-top:var(--a4);color:var(--gedimmt);max-width:62ch;
  font-size:var(--s3);line-height:1.4;}

/* ── Schemata ────────────────────────────────────────────────────── */

.schema{width:100%;height:auto;overflow:visible;}

/* Die breiten Schemata schrumpfen unter 820 Pixel auf einen Text unter
   Lesbarkeit: ein 12,5-Punkt-Text in einem 880 Einheiten breiten Bild
   landet auf einem 390-Pixel-Schirm bei rund 5 Pixel. Statt der Zeichnung
   waagerecht rollen zu lassen, zeigt jedes Schema unter 820 Pixel eine
   zweite, eigens gezeichnete Hochkant-Fassung mit denselben Stationen
   (Klasse .schema--hoch); die breite Fassung (.schema--quer) tritt
   zurück. So bleibt die Schrift in Originalgröße lesbar, ohne dass eine
   Seite waagerecht rollt. .rollbar bleibt als Wrapper stehen, trägt aber
   kein Rollverhalten mehr. */
.rollbar{overflow-x:visible;}
.schema--hoch{display:none;}
@media (max-width:820px){
  .schema--quer{display:none;}
  .schema--hoch{display:block;max-width:440px;margin-inline:auto;}
}
.schema .kasten{fill:none;stroke:var(--linie-stark);stroke-width:1;}
/* Bedeutung läuft über Farbe UND Strichstärke, nicht über Farbe allein. */
.schema .kasten--stark{stroke:var(--text);stroke-width:1.75;}
.schema .draht{fill:none;stroke:var(--linie-stark);stroke-width:1;}
.schema .draht--gestrichelt{stroke-dasharray:4 4;}
.schema .knoten{fill:var(--text);}
.schema .beschriftung{fill:var(--text);font-size:12.5px;font-weight:600;
  font-family:var(--schrift);}
.schema .nebenschrift{fill:var(--gedimmt);font-size:10.5px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;font-family:var(--schrift);}
.schema .nr{fill:var(--gedimmt);font-size:11px;font-weight:800;
  font-family:var(--schrift);}
.schema .tonS{stroke:var(--signalbox);} .schema .tonS-f{fill:var(--signalbox);}
.schema .tonE{stroke:var(--editio);}    .schema .tonE-f{fill:var(--editio);}
.schema .tonD{stroke:var(--dragui);}    .schema .tonD-f{fill:var(--dragui);}
.schema .tonK{stroke:var(--kontor);}    .schema .tonK-f{fill:var(--kontor);}

/* Der Laufpunkt. pathLength=100 macht jeden Draht gleich lang messbar.
   Die Laufpunkte sitzen nur auf Drahtstücken zwischen den Kästen, nie
   quer durch eine Kastenbeschriftung.

   Gesteuert wird über den Scrollfortschritt, nicht über eine Uhr. Damit
   entsteht keine Dauerbewegung im Blickfeld, und WCAG 2.2.2 verlangt
   kein Bedienelement zum Anhalten. Browser ohne animation-timeline
   bekommen einen einzigen Durchlauf unter fünf Sekunden, was ebenfalls
   von der Regel ausgenommen ist. */
.puls{
  fill:none;stroke-width:2;stroke-linecap:round;
  stroke-dasharray:5 95;stroke-dashoffset:100;
}
@keyframes fliess{from{stroke-dashoffset:100;} to{stroke-dashoffset:0;}}

@media (prefers-reduced-motion:no-preference){
  .puls{animation:fliess 2.4s linear 1 both;}
  .puls--v2{animation-delay:.3s;}
  .puls--v3{animation-delay:.6s;}
  .puls--v4{animation-delay:.9s;}
  .puls--v5{animation-delay:1.2s;}

  @supports (animation-timeline:view()){
    .puls{
      animation:fliess linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 45%;
      animation-delay:0s;
    }
    .puls--v2{animation-range:entry 10% cover 50%;}
    .puls--v3{animation-range:entry 16% cover 55%;}
    .puls--v4{animation-range:entry 22% cover 60%;}
    .puls--v5{animation-range:entry 28% cover 65%;}
  }
}
@media (prefers-reduced-motion:reduce){.puls{display:none;}}

.blockbild{margin-top:var(--a7);padding-block:var(--a5);
  border-block:1px solid var(--linie);}
.blockbild__titel{font-size:var(--s0);letter-spacing:.11em;
  text-transform:uppercase;color:var(--gedimmt);font-weight:700;
  margin-bottom:var(--a4);}
.blockbild__fuss{margin-top:var(--a3);font-size:var(--s1);
  color:var(--gedimmt);max-width:62ch;}

/* ── Wegweiser ───────────────────────────────────────────────────── */

.wegweiser{padding-block:var(--a7);}
.wegweiser__titel{font-size:var(--s0);letter-spacing:.11em;
  text-transform:uppercase;color:var(--gedimmt);font-weight:700;
  margin-bottom:var(--a4);}
.weg{display:grid;grid-template-columns:52px minmax(0,16rem) 1fr 24px;
  gap:var(--a4);align-items:baseline;padding-block:var(--a4);
  border-top:1px solid var(--linie);text-decoration:none;
  transition:background var(--dauer) var(--kurve);}
.weg:last-of-type{border-bottom:1px solid var(--linie);}
.weg:hover{background:var(--flaeche);}
.weg:hover .weg__pfeil{transform:translateX(4px);}
.weg__nr{font-weight:800;font-size:var(--s1);color:var(--gedimmt);}
.weg__name{font-weight:600;font-size:var(--s3);letter-spacing:-.012em;}
.weg__was{color:var(--gedimmt);font-size:var(--s1);}
.weg--erzeugnis .weg__name{color:var(--marke);}
.weg--erzeugnis .weg__nr{color:var(--marke);}
.weg__pfeil{align-self:center;color:var(--gedimmt);
  transition:transform var(--dauer) var(--kurve);}
@media (max-width:780px){
  .weg{grid-template-columns:40px 1fr 20px;}
  .weg__was{grid-column:2/4;}
}

/* ── Referenzband ────────────────────────────────────────────────── */

.band{padding-block:var(--a5);border-block:1px solid var(--linie);}
.band__titel{font-size:var(--s0);letter-spacing:.11em;
  text-transform:uppercase;color:var(--gedimmt);font-weight:700;
  margin-bottom:var(--a3);}
.band__liste{display:grid;gap:var(--a5) var(--a6);
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));}
.band__eintrag{display:flex;align-items:center;gap:var(--a4);}
/* Hausregel geaendert 2026-09-12 (Entscheidung Moritz): Fremdlogos stehen
   in voller Farbe, nicht gedaempft. Optische Groesse je Marke, nicht je Pixel. */
.band__bild{height:48px;width:auto;flex:none;
  transition:transform var(--dauer) var(--kurve);}
.band__bild--wort{height:40px;}
.band__verweis{display:flex;align-items:center;gap:var(--a4);
  text-decoration:none;color:inherit;}
.band__verweis:hover .band__bild{transform:translateY(-2px);}
.band__wofuer{font-size:var(--s1);color:var(--text);}

/* ── Bildstreifen ────────────────────────────────────────────────── */

.streifen{position:relative;width:100%;overflow:hidden;
  border-block:1px solid var(--linie-stark);}
/* Die Bilder sind schon als Graustufen ausgeliefert, kein CSS-Filter. */
.streifen img{width:100%;height:100%;object-fit:cover;}
/* Bilder dämpfen, wenn die Dunkelfassung gilt — nach derselben
   Doppelregel wie die Marken oben. */
@media (prefers-color-scheme:dark){
  :root:not([data-thema="hell"]) .streifen img{opacity:.78;}
}
:root[data-thema="dunkel"] .streifen img{opacity:.78;}

/* Zwei Bildfassungen, eine sichtbar. Ersetzt <picture> mit
   media="(prefers-color-scheme:dark)", das den Umschalter im Kopf
   nicht kennt. Siehe die Wortmarke TopCharge auf der Hausseite. */
.nur-dunkel{display:none;}
@media (prefers-color-scheme:dark){
  :root:not([data-thema="hell"]) .nur-hell{display:none;}
  :root:not([data-thema="hell"]) .nur-dunkel{display:block;}
}
:root[data-thema="dunkel"] .nur-hell{display:none;}
:root[data-thema="dunkel"] .nur-dunkel{display:block;}
.streifen--hoch{aspect-ratio:21/6;}
@media (max-width:780px){.streifen--hoch{aspect-ratio:16/8;}}
.streifen__schild{position:absolute;left:0;bottom:0;z-index:2;
  background:var(--grund);color:var(--text);padding:var(--a2) var(--a4);
  font-size:var(--s1);max-width:min(48ch,88%);
  border-top:1px solid var(--linie-stark);
  border-right:1px solid var(--linie-stark);}
.streifen__schild b{font-weight:600;}
.streifen__schild span{color:var(--gedimmt);}

/* ── Abschnitt und Erzeugnis ─────────────────────────────────────── */

.abschnitt{padding-block:var(--a8);border-top:1px solid var(--linie-stark);}
.abschnitt__titel{font-size:clamp(var(--s4),3vw,var(--s5));font-weight:800;
  letter-spacing:-.024em;line-height:1.1;}
.abschnitt__post{margin-top:var(--a4);max-width:62ch;color:var(--gedimmt);}
.abschnitt__post strong{color:var(--text);font-weight:600;}

.erzeugnis--signalbox{--marke:var(--signalbox);}
.erzeugnis--editio{--marke:var(--editio);}
.erzeugnis--dragui{--marke:var(--dragui);}
/* Kontor, Farbwinkel 250 (Entscheidung Moritz 2026-09-13): liegt in der
   größten Lücke zwischen Signalbox 152 und DRAGui 308. Dunkel mit
   Buntheit 0,120 statt 0,135, weil 0,135 bei 77 % außerhalb von sRGB liegt. */
.erzeugnis--kontor{--marke:var(--kontor);}

.reife{margin-top:var(--a5);display:flex;align-items:center;gap:var(--a4);
  flex-wrap:wrap;}
.reife__skala{display:flex;gap:var(--a1);}
.reife__stufe{width:30px;height:8px;border:1px solid var(--linie-stark);}
.reife__stufe--erreicht{background:var(--marke);border-color:var(--marke);}
.reife__wort{font-weight:600;font-size:var(--s1);color:var(--marke);}
.reife__zusatz{font-size:var(--s1);color:var(--gedimmt);}
.reife__erklaerung{font-size:var(--s1);color:var(--gedimmt);}
.reife__erklaerung a{color:var(--marke);}

/* Kennwerte. Was hier steht, beantwortet eine Frage des Kunden.
   Bautechnik gehört in die aufklappbare Tiefe, nicht hierher. */
.kennwerte{border-top:1px solid var(--linie-stark);align-self:start;}
.kennwerte__zeile{display:flex;justify-content:space-between;gap:var(--a3);
  align-items:baseline;padding-block:var(--a2);
  border-bottom:1px solid var(--linie);}
.kennwerte dt{font-size:var(--s1);letter-spacing:.05em;text-transform:uppercase;
  color:var(--gedimmt);font-weight:600;}
.kennwerte dd{margin:0;font-size:var(--s1);font-weight:600;text-align:right;}
.kennwerte dd a{color:var(--marke);}
.kennwerte dd small{display:block;font-weight:400;color:var(--gedimmt);
  font-size:var(--s0);letter-spacing:.04em;text-transform:uppercase;}

.gitter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,19rem);
  gap:var(--a7);margin-top:var(--a7);}
@media (max-width:900px){.gitter{grid-template-columns:1fr;gap:var(--a6);}}

.satz{max-width:64ch;margin-top:var(--a4);}
.satz:first-child{margin-top:0;}
.satz strong{font-weight:600;}
.satz a{color:var(--marke);text-underline-offset:3px;}
.satz--gross{font-size:var(--s3);line-height:1.4;}

/* Was dazugehört und was nicht, gleich groß und gleich sichtbar. */
.stand{display:grid;grid-template-columns:1fr 1fr;gap:var(--a6);
  margin-top:var(--a5);}
@media (max-width:760px){.stand{grid-template-columns:1fr;gap:var(--a5);}}
.stand__titel{font-size:var(--s0);letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;padding-bottom:var(--a2);
  border-bottom:1px solid var(--linie-stark);}
.stand--geplant .stand__titel{color:var(--gedimmt);}
.stand__liste{margin-top:var(--a3);}
.stand__liste li{font-size:var(--s2);padding-block:var(--a2);
  padding-left:var(--a4);border-bottom:1px solid var(--linie);
  position:relative;line-height:1.45;}
.stand--heute .stand__liste li::before{content:"";position:absolute;left:0;
  top:15px;width:8px;height:1px;background:var(--marke);}
.stand--geplant .stand__liste li::before{content:"";position:absolute;left:0;
  top:15px;width:8px;height:1px;background:var(--linie-stark);}

.tiefe{margin-top:var(--a6);border-top:1px solid var(--linie-stark);}
.tiefe summary{display:flex;align-items:center;gap:var(--a2);cursor:pointer;
  padding-block:var(--a3);font-weight:600;font-size:var(--s1);list-style:none;}
.tiefe summary::-webkit-details-marker{display:none;}
.tiefe__pfeil{transition:transform var(--dauer) var(--kurve);color:var(--marke);}
.tiefe[open] .tiefe__pfeil{transform:rotate(90deg);}
.tiefe__inhalt{padding-bottom:var(--a5);}
.tiefe__block{margin-top:var(--a5);max-width:64ch;}
.tiefe__block-titel{font-size:var(--s0);letter-spacing:.11em;
  text-transform:uppercase;font-weight:700;color:var(--gedimmt);
  margin-bottom:var(--a2);}
.tiefe__block p{font-size:var(--s1);}
.tiefe__reihe{display:flex;flex-wrap:wrap;gap:var(--a2);}
.tiefe__marke{font-size:var(--s1);padding:var(--a1) var(--a2);
  border:1px solid var(--linie-stark);color:var(--gedimmt);}

.anfrage{margin-top:var(--a5);padding-top:var(--a5);
  border-top:1px solid var(--linie-stark);display:flex;gap:var(--a5);
  align-items:center;justify-content:space-between;flex-wrap:wrap;}
.anfrage__text{font-size:var(--s1);max-width:46ch;color:var(--gedimmt);}
.anfrage__text b{color:var(--text);}
.knopf{display:inline-flex;align-items:center;gap:var(--a2);
  padding:var(--a3) var(--a5);background:var(--text);color:var(--grund);
  text-decoration:none;font-weight:600;font-size:var(--s1);white-space:nowrap;
  transition:opacity var(--dauer) var(--kurve);}
.knopf:hover{opacity:.88;}
.knopf:hover .knopf__pfeil{transform:translateX(3px);}
.knopf__pfeil{transition:transform var(--dauer) var(--kurve);}
.knopf--leise{background:transparent;color:var(--text);
  border:1px solid var(--linie-stark);}

/* Kein Vollrahmen: DESIGN.md schließt Karten ohne Ausnahme aus, und
   jede andere Box dieser Seite trägt eine bis zwei Haarlinien. */
.verfuegbarkeit{margin-top:var(--a5);padding-top:var(--a4);
  border-top:2px solid var(--marke);
  display:flex;gap:var(--a3);flex-wrap:wrap;align-items:baseline;
  font-size:var(--s1);}
.verfuegbarkeit b{color:var(--marke);}
.verfuegbarkeit span{color:var(--gedimmt);max-width:60ch;}

/* ── Werdegang, Websites, Zeitleiste ─────────────────────────────── */

.werdegang{border-top:1px solid var(--linie-stark);}
.werdegang__zeile{display:grid;grid-template-columns:104px 1fr;gap:var(--a4);
  padding-block:var(--a4);border-bottom:1px solid var(--linie);}
.werdegang dt{font-size:var(--s1);font-weight:600;color:var(--gedimmt);
  padding-top:2px;}
.werdegang dd{margin:0;}
.werdegang dd b{display:block;font-size:var(--s2);font-weight:600;}
.werdegang dd span{display:block;margin-top:var(--a1);font-size:var(--s1);
  color:var(--gedimmt);}
@media (max-width:560px){.werdegang__zeile{grid-template-columns:1fr;gap:var(--a1);}}

.website{padding-block:var(--a4);border-bottom:1px solid var(--linie);}
.website__adresse{font-weight:600;font-size:var(--s2);}
.website__was{font-size:var(--s1);color:var(--gedimmt);max-width:64ch;
  margin-top:var(--a1);}

/* Zeitleiste. Nur DRAGui benutzt sie, weil dort ein Verlauf und kein
   Betriebsstand zu zeigen ist. */
.leiste{border-top:1px solid var(--linie-stark);margin-top:var(--a5);}
.leiste__punkt{display:grid;grid-template-columns:128px 1fr;gap:var(--a4);
  padding-block:var(--a4);border-bottom:1px solid var(--linie);}
.leiste__wann{font-size:var(--s1);font-weight:600;color:var(--marke);}
.leiste__was{font-size:var(--s2);max-width:58ch;}
.leiste__punkt--offen .leiste__wann{color:var(--gedimmt);}
@media (max-width:560px){.leiste__punkt{grid-template-columns:1fr;gap:var(--a1);}}

/* ── Kontakt und Fuß ─────────────────────────────────────────────── */

.adresse{margin-top:var(--a6);font-style:normal;
  font-size:clamp(var(--s4),3.4vw,var(--s6));font-weight:800;
  letter-spacing:-.024em;line-height:1.1;}
.adresse a{text-decoration:none;border-bottom:2px solid var(--linie-stark);}
.adresse a:hover{border-bottom-color:var(--text);}

.fuss{border-top:1px solid var(--linie-stark);margin-top:var(--a8);}
.fuss__innen{padding-block:var(--a6);display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--a6);}
@media (max-width:820px){.fuss__innen{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.fuss__innen{grid-template-columns:1fr;gap:var(--a5);}}
.fuss__titel{font-size:var(--s0);letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;color:var(--gedimmt);margin-bottom:var(--a3);}
.fuss__liste li{font-size:var(--s1);padding-block:3px;}
.fuss__liste li{padding-block:var(--a1);}
.fuss__liste a{text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color var(--dauer) var(--kurve);}
.fuss__liste a:hover{border-bottom-color:var(--linie-stark);}
.fuss__schluss{padding-block:var(--a4);border-top:1px solid var(--linie);
  display:flex;justify-content:space-between;gap:var(--a4);flex-wrap:wrap;
  font-size:var(--s1);color:var(--gedimmt);}

/* ── Entwurfsfahne. Gehört nicht zur Seite. ──────────────────────── */
.fahne{position:fixed;left:0;bottom:0;z-index:50;background:var(--text);
  color:var(--grund);font-size:var(--s0);letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;padding:6px var(--a3);
  text-decoration:none;}