/* ============================================================
   Deep5 — Abschnitte
   Ein Block je Abschnitt, in der Reihenfolge des Dokuments.
   Jeder Block trägt seine eigenen Regeln für schmale Fenster,
   damit er später als Ganzes nach Framer wandern kann.
   ============================================================ */

/* ============================================================
   Messlineal links — Lesefortschritt
   js/bewegung.js schreibt eine Zahl 0…1 nach --gelesen; die Form
   der Anzeige steht hier. Ohne Skript fehlt die Zahl, der Vorgabe-
   wert 0 greift, der Balken bleibt leer und die Skala steht.
   ============================================================ */
.rule-scale{
  position:fixed; left:max(26px, calc((100vw - var(--bahn)) / 2 - 34px)); top:0; bottom:0;
  width:var(--strich);
  background:var(--stahl-22);
  z-index:40; pointer-events:none;
}
.rule-scale i{
  position:absolute; left:0; width:var(--punkt); height:var(--strich);
  background:var(--stahl-30);
}
.rule-scale i:nth-of-type(1){ top:20%; }
.rule-scale i:nth-of-type(2){ top:40%; }
.rule-scale i:nth-of-type(3){ top:60%; }
.rule-scale i:nth-of-type(4){ top:80%; }
.rule-scale b{
  position:absolute; inset:0 auto 0 0; width:var(--strich);
  background:var(--stahl);
  transform:scaleY(var(--gelesen,0)); transform-origin:top center;
}

@media (max-width:1279px){
  .rule-scale{ display:none; }
}

/* ============================================================
   Kopf
   ============================================================ */
.top{
  position:sticky; top:0; z-index:60;
  background:var(--papier-90);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:var(--strich) solid transparent;
  transition:border-color var(--zeit-zustand-weit) var(--kurve-zustand),
             background var(--zeit-zustand-weit) var(--kurve-zustand);
}
.top.is-stuck{ border-bottom-color:var(--linie); }
.top__in{
  display:flex; align-items:center; justify-content:space-between; gap:var(--raum-24);
  height:var(--kopf-hoehe);
}
.top__home{ display:inline-flex; text-decoration:none; }

.nav{ display:flex; align-items:center; gap:clamp(14px,1.9vw,30px); }
.nav a{
  text-decoration:none; font-size:.93rem; font-weight:500; color:var(--text-2);
  position:relative; padding-block:var(--raum-6);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:var(--strich);
  background:var(--bordeaux); transform:scaleX(0); transform-origin:left;
  transition:transform var(--zeit-zustand-weit) var(--kurve-zustand);
}
.nav a:hover::after,.nav a:focus-visible::after{ transform:scaleX(1); }

.menu{ display:none; }
.menu>summary{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:var(--raum-9);
  font-family:var(--mono); font-size:var(--grad-mono-5); letter-spacing:.14em; text-transform:uppercase;
  padding:var(--raum-10) var(--raum-4); color:var(--text-1);
}
.menu>summary::-webkit-details-marker{ display:none; }
.balken{ display:inline-flex; flex-direction:column; gap:var(--raum-4); width:var(--raum-18); }
/* Der Weg vom Balken zum Kreuz bleibt auch bei prefers-reduced-motion:
   er ist keine Zierde, er sagt "offen". Nur die Dauer fällt dort weg. */
.balken__strich{ height:1.5px; background:var(--text-1); display:block; transition:transform var(--zeit-zustand) var(--kurve-zustand); }
.menu[open] .balken__strich:first-child{ transform:translateY(2.75px) rotate(45deg); }
.menu[open] .balken__strich:last-child{ transform:translateY(-2.75px) rotate(-45deg); }

.menu__panel{
  position:absolute; left:0; right:0; top:100%;
  background:var(--papier);
  border-top:var(--strich) solid var(--linie); border-bottom:var(--strich) solid var(--linie);
  padding:var(--raum-8) var(--rand) var(--raum-24);
}
/* :not(.btn) ist nicht Kosmetik: Ohne die Einschränkung gewinnt diese Regel
   gegen .btn, weil sie spezifischer ist. Der Knopf im Mobilmenü verlor dadurch
   display:inline-flex, sein Innenabstand und seine Schrift, und weil .top__cta
   unter 1024 px ausgeblendet ist, war das die einzige sichtbare Aufforderung
   der ganzen Seite auf dem Telefon. */
.menu__panel a:not(.btn){
  display:block; padding:var(--raum-14) 0; text-decoration:none;
  border-bottom:var(--strich) solid var(--linie);
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:-.01em; font-size:1.15rem; color:var(--text-1);
}
.menu__panel .btn{ margin-top:var(--raum-20); width:100%; justify-content:center; }

/* Die Gruppen im Mobilmenü. Der Kopf sieht aus wie ein Verweis, ist aber
   einer, der aufzieht: Vier Namen stehen da, und erst wer einen antippt,
   sieht dessen Unterpunkte. Das Zeichen rechts sagt, was passiert. */
.menu__gruppe > summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--raum-14);
  padding:var(--raum-14) 0; cursor:pointer; list-style:none;
  border-bottom:var(--strich) solid var(--linie);
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:-.01em; font-size:1.15rem; color:var(--text-1);
}
.menu__gruppe > summary::-webkit-details-marker{ display:none; }
.menu__gruppe > summary::after{
  content:"＋"; font-family:var(--body); font-weight:400; font-size:1.1rem;
  color:var(--text-3); transition:transform var(--zeit-zustand) var(--kurve-zustand);
}
.menu__gruppe[open] > summary::after{ content:"－"; }
.menu__gruppe > summary:focus-visible{
  outline:var(--strich-stark) solid var(--bordeaux); outline-offset:3px;
}
/* Die Unterpunkte tragen die zweite Ebene: kleiner, nicht in Versalien,
   eingerückt. Sonst sähen sie aus wie eine zweite erste Ebene. */
.menu__gruppe .menu__unter{ margin:0; padding:0 0 var(--raum-8); list-style:none; }
.menu__gruppe .menu__unter a{
  font-family:var(--body); font-weight:500; text-transform:none;
  font-size:var(--grad-text-2); letter-spacing:0;
  padding:var(--raum-10) 0 var(--raum-10) var(--raum-16);
  border-bottom:0; color:var(--text-2);
}
.menu__gruppe .menu__unter li:first-child a{ color:var(--text-1); font-weight:600; }

@media (max-width:1023px){
  .nav{ display:none; }
  .menu{ display:block; }
  .top__cta{ display:none; }
}

/* ============================================================
   1 — Hero
   ============================================================ */
/* Der Hero füllt das erste Bild allein. min-height statt fester Höhe: er darf
   wachsen, wenn der Text umbricht, aber nie so schrumpfen, dass die Abschnitte
   darunter schon hereinschauen. 100svh statt vh wegen der Adressleiste auf
   dem Telefon. */
.hero{
  padding-top:clamp(40px,5vw,72px); padding-bottom:clamp(28px,3vw,44px);
  min-height:100svh;
  display:flex; align-items:center;
}
.hero > .shell{ width:100%; }

/* Der Kundensatz. Bewusst nicht in der Display-Schrift: er ist gesprochen,
   nicht gesetzt, und darf die Schlagzeile darunter nicht überstrahlen.
   Das Zeilenmaß hängt am Rahmen, nicht an der Zeile: nur so misst 26ch in
   der Schrift des Zitats, und die Signatur darunter findet dessen rechte
   Kante. Am Zitat selbst gemessen wäre 26ch das Maß der Mono-Schrift
   gewesen — die Herkunft brach dann auf drei Zeilen um. */
.hero__stimme{
  margin:0 0 clamp(34px,5vw,64px); max-width:26ch;
  font-size:clamp(1.25rem,2.4vw,2rem);
}
.hero__zitat{
  font-size:inherit; line-height:1.3; font-weight:400;
  color:var(--stahl); margin:0;
  text-wrap:balance;
}
/* Herkunft und Strich stehen rechts unter dem Zitat, im selben Maß —
   das liest sich wie eine Signatur und nicht wie eine zweite Zeile. */
.hero__quelle{
  display:flex; align-items:center; justify-content:flex-end; gap:var(--raum-12);
  margin-top:var(--raum-14);
  font-family:var(--mono); font-size:var(--grad-mono-3); font-weight:400;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-3);
}
.hero__quelle::before{
  content:""; width:clamp(24px,3vw,44px); height:var(--strich); background:var(--linie-stark);
  flex:0 0 auto;
}

.hero__zeile{ display:block; }

/* Der Gründungshinweis schließt den Hero ab, statt ihn zu eröffnen. */
.hero__fuss{
  margin:clamp(40px,5vw,72px) 0 0;
  font-family:var(--mono); font-size:var(--grad-mono-4); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
}
.hero__under{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:var(--steg);
  margin-top:clamp(30px,3.6vw,52px);
  align-items:end;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--raum-12); align-self:end; padding-bottom:var(--raum-4); }
/* Der ursprüngliche font-Kurzbefehl zeigte auf ein Token, das es nie gab, und
   war damit wirkungslos: Die Zeile erbt die Grundschrift. So steht es jetzt da. */
.zuschnitt{ margin:var(--raum-10) 0 0; color:var(--stahl); }

/* ============================================================
   1b — Gebaut für
   Erst der Anspruch, dann sofort die Belege. Die Einträge treten
   gestuft ein; die Regel dafür steht in bewegung.css.
   ============================================================ */
.gebaut{ background:var(--hellblau); padding-block:clamp(22px,2.6vw,34px); }
.gebaut__in{
  display:grid; grid-template-columns:var(--schiene) minmax(0,1fr); gap:var(--steg);
  align-items:baseline;
}
.gebaut__liste{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--raum-6) 0;
}
.gebaut__pos{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(.88rem,.95vw,1rem); letter-spacing:.005em; color:var(--tinte);
  padding-right:var(--raum-10); margin-right:var(--raum-10);
  border-right:var(--strich) solid var(--anthrazit-22);
  line-height:1.3; white-space:nowrap;
}
.gebaut__pos:last-child{ border-right:0; margin-right:0; padding-right:0; }
.gebaut__pos--mehr{ margin-left:auto; font-weight:500; }
.gebaut__pos--mehr a{
  color:var(--bordeaux); text-decoration:none;
  border-bottom:var(--strich) solid transparent;
}
.gebaut__pos--mehr a:hover{ border-bottom-color:var(--bordeaux); }

@media (min-width:1280px){
  .gebaut__liste{ flex-wrap:nowrap; }
}

@media (max-width:1023px){
  .gebaut__in{ grid-template-columns:minmax(0,1fr); gap:var(--raum-12); }
}

/* ============================================================
   1c — Drei Wege
   Einstiege, keine Cases. Jeder trägt ein Zeichen, das ohne Text
   auskommt — Bedingung für die spätere Framer-Fassung.
   ============================================================ */
.wege{ padding-block:clamp(48px,6vw,92px); }
.wege__raster{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:var(--strich) solid var(--linie-stark);
}
.weg{
  display:flex; flex-direction:column; gap:var(--raum-14);
  text-decoration:none; color:inherit; position:relative;
  padding:clamp(32px,3.4vw,48px) clamp(24px,2.6vw,38px) clamp(32px,3.4vw,48px) 0;
  border-right:var(--strich) solid var(--linie);
}
.weg:last-child{ border-right:0; padding-right:0; }
.weg:not(:first-child){ padding-left:clamp(24px,2.6vw,38px); }
.weg::before{
  content:""; position:absolute; left:0; top:calc(var(--strich) * -1);
  height:var(--strich); width:100%; background:var(--bordeaux);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--zeit-zustand-weit) var(--kurve-zustand);
}
.weg:hover::before,.weg:focus-visible::before{ transform:scaleX(1); }
.weg__zeichen{ display:block; width:clamp(56px,6vw,76px); }
.weg__zeichen svg{ width:100%; height:auto; display:block; }
.weg__titel{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.05rem,1.6vw,1.42rem); letter-spacing:-.015em; line-height:1.05;
  color:var(--text-1);
}
.weg__text{ font-size:.94rem; color:var(--text-2); line-height:1.55; }

/* Was hinter der Kachel liegt, steht als Liste da statt als Fließsatz:
   drei Industrien, drei Leistungen, vier Schritte. Der Leser sieht den
   Umfang, bevor er klickt. Die Ziffern führt nur der Ablauf, weil dort
   die Reihenfolge die Aussage ist. */
.weg__liste{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:var(--raum-8);
  counter-reset:folge;
}
.weg__liste li{
  display:flex; gap:var(--raum-10);
  padding-top:var(--raum-8);
  border-top:var(--strich) solid var(--linie);
  font-size:.92rem; line-height:1.4; color:var(--text-1);
}
.weg__liste li::before{
  content:"";
  flex:0 0 auto; width:var(--raum-6); height:var(--raum-6);
  margin-top:.45em; border-radius:50%;
  background:var(--linie-stark);
}
.weg__liste--folge li{ counter-increment:folge; }
.weg__liste--folge li::before{
  content:counter(folge, decimal-leading-zero);
  width:auto; height:auto; margin-top:0; border-radius:0; background:none;
  font-family:var(--mono); font-size:var(--grad-mono-3); font-weight:500;
  letter-spacing:.06em; color:var(--bordeaux);
}
.weg:hover .weg__liste li::before{ background:var(--bordeaux); }
.weg:hover .weg__liste--folge li::before{ background:none; }

.weg__mehr{
  margin-top:auto; padding-top:var(--raum-8);
  font-family:var(--mono); font-weight:500; font-size:var(--grad-mono-3);
  letter-spacing:.13em; text-transform:uppercase; color:var(--text-3);
  transition:color var(--zeit-zustand) var(--kurve-zustand);
}
.weg:hover .weg__mehr{ color:var(--bordeaux); }

/* Die Zeichen. Reine Geometrie, kein Text — damit sie in Framer als
   Code-Baustein leben können, ohne Inhalt einzuschließen. */
.zx{ overflow:visible; }
.zx__server{ fill:none; stroke:var(--anthrazit); stroke-width:1.6; }
.zx__lampe{ fill:var(--bordeaux); }
.zx__akte1,.zx__akte2{ fill:var(--weiss); stroke:var(--anthrazit); stroke-width:1.6; }
.zx__teil{ fill:var(--weiss); stroke:var(--anthrazit); stroke-width:1.6; }
.zx__teil--m{ fill:var(--vanille); }
.zx__rahmen{ fill:none; stroke:var(--bordeaux); stroke-width:1.6; }
.zx__weg{ fill:none; stroke:var(--linie-stark); stroke-width:1.6; }
.zx__lauf{
  fill:none; stroke:var(--bordeaux); stroke-width:2.2; stroke-linecap:round;
  stroke-dasharray:14 86; stroke-dashoffset:100;
}
.zx__punkt{ fill:var(--weiss); stroke:var(--anthrazit); stroke-width:1.6; }

@media (max-width:1023px){
  .wege__raster{ grid-template-columns:minmax(0,1fr); }
  .weg{ border-right:0; border-bottom:var(--strich) solid var(--linie); padding:var(--raum-24) 0; }
  .weg:last-child{ border-bottom:0; padding-bottom:0; }
  .weg:not(:first-child){ padding-left:0; }
}

/* Betriebsleiste — ein Weg je Produkt, jeder führt in den Case */
.betrieb{
  margin-top:clamp(44px,5.4vw,84px);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:var(--strich) solid var(--linie-stark);
}
.betrieb--zwei{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.betrieb__cell{
  display:block; text-decoration:none; color:inherit;
  padding:var(--raum-26) var(--raum-26) var(--raum-26) 0;
  border-right:var(--strich) solid var(--linie);
  position:relative;
}
.betrieb__cell:last-child{ border-right:0; }
.betrieb__cell:not(:first-child){ padding-left:var(--raum-26); }
/* Haarlinie über der Zelle. scaleX statt width: derselbe Anblick,
   aber auf der Hauptachse — und bei Ruhe steht sie sofort da. */
.betrieb__cell::before{
  content:""; position:absolute; left:0; top:calc(var(--strich) * -1); height:var(--strich); width:100%;
  background:var(--bordeaux);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--zeit-zustand-weit) var(--kurve-zustand);
}
.betrieb__cell:hover::before,.betrieb__cell:focus-visible::before{ transform:scaleX(1); }
.betrieb__val{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.05rem,1.6vw,1.42rem); letter-spacing:-.015em; line-height:1.05;
  color:var(--text-1);
  display:block;
}
.betrieb__desc{ display:block; margin-top:var(--raum-10); font-size:.92rem; color:var(--text-2); line-height:1.5; }
.betrieb__more{
  display:block; margin-top:var(--raum-14);
  font-family:var(--mono); font-weight:500; font-size:var(--grad-mono-3);
  letter-spacing:.13em; text-transform:uppercase; color:var(--text-3);
  transition:color var(--zeit-zustand) var(--kurve-zustand);
}
.betrieb__cell:hover .betrieb__more{ color:var(--bordeaux); }

@media (max-width:1023px){
  .hero__under{ grid-template-columns:minmax(0,1fr); gap:var(--raum-26); }
  .hero__cta{ padding-bottom:0; }
}

/* Der gesetzte Umbruch stimmt nur, solange die Zeile hineinpasst. Schmaler
   bricht sie ein zweites Mal und lässt „dem," allein stehen — dort fließt
   der Satz besser frei. */
@media (max-width:719px){
  .hero__zeile{ display:inline; }
  .hero h1{ text-wrap:balance; }
}

@media (max-width:719px){
  .betrieb{ grid-template-columns:minmax(0,1fr); }
  .betrieb__cell{ border-right:0; border-bottom:var(--strich) solid var(--linie); padding:var(--raum-20) 0; }
  .betrieb__cell:last-child{ border-bottom:0; }
  .betrieb__cell:not(:first-child){ padding-left:0; }
}

/* ============================================================
   2 — Mitgliedschaften und Partnerschaften
   Logos stehen als Beleg, nicht als dekorative Karten. Die Haarlinien
   halten drei sehr unterschiedliche Marken optisch in einem System.
   ============================================================ */
.trust{ background:var(--hellblau); padding-block:clamp(34px,4.2vw,58px); }
.trust__in{
  display:grid; grid-template-columns:var(--schiene) minmax(0,1fr);
  gap:var(--steg); align-items:start;
}
.trust__logos{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-block:var(--strich) solid var(--anthrazit-22);
}
.trust__item{
  min-width:0; min-height:132px; margin:0;
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--raum-22) clamp(18px,2.4vw,32px);
}
.trust__item + .trust__item{ border-left:var(--strich) solid var(--anthrazit-22); }
.trust__marke{ height:58px; display:flex; align-items:center; }
.trust__logo{
  display:block; width:auto; max-width:100%; max-height:58px;
  object-fit:contain; object-position:left center;
  filter:grayscale(1) contrast(.92); mix-blend-mode:multiply; opacity:.78;
}
.trust__logo--gdg{ filter:grayscale(1) invert(1) contrast(1.2); }
/* Das AGV-Logo ist ein JPEG, sein Grund also deckendes Weiß. `multiply`
   ließe es verschwinden — täte da nicht `contrast(.92)` aus der Grundregel
   vorher aus 255 eine 242 machen, womit multiply das Band um 3 Prozent
   abdunkelt und ein Kasten sichtbar wird. Auf Mint fiel das kaum auf, auf
   Hellblau schon. `brightness` hebt das Weiß zurück auf 255; die dunklen
   Teile des Logos bleiben davon fast unberührt. */
.trust__logo--agv{ max-height:82px; opacity:.9; filter:grayscale(1) contrast(.92) brightness(1.06); }
.trust__item figcaption{
  margin-top:var(--raum-14);
  font-family:var(--mono); font-size:var(--grad-mono-3); font-weight:500;
  letter-spacing:.055em; text-transform:uppercase; color:var(--text-3);
}

@media (max-width:1023px){
  .trust__in{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:719px){
  .trust__logos{ grid-template-columns:minmax(0,1fr); }
  .trust__item{ min-height:112px; padding-inline:0; }
  .trust__item + .trust__item{ border-left:0; border-top:var(--strich) solid var(--anthrazit-22); }
  .trust__logo{ max-width:min(78vw,320px); }
}

/* ============================================================
   3 — Ausgangslage
   ============================================================ */
/* Kein Technik-Hintergrundbild: Die langsamen Farbfelder geben den sechs
   konkreten Prozessbildern eine gemeinsame, filmische Tiefe. */
.lage{
  overflow:hidden;
  isolation:isolate;
  background:#12151d;
}
.lage::before{
  content:""; position:absolute; inset:0; z-index:-3;
  background:
    radial-gradient(ellipse at 15% 22%, rgba(74,94,109,.23), transparent 43%),
    radial-gradient(ellipse at 88% 40%, rgba(82,32,56,.26), transparent 46%),
    linear-gradient(150deg,#12151d 0%,#181b25 50%,#11131a 100%);
}
.lage__fluss{ position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
.lage__fluss span{
  position:absolute; display:block; border-radius:50%;
  filter:blur(70px); opacity:.5; mix-blend-mode:screen;
}
.lage__fluss span:nth-child(1){
  width:46vw; height:46vw; min-width:420px; min-height:420px;
  left:-18vw; top:18%; background:rgba(74,94,109,.24);
}
.lage__fluss span:nth-child(2){
  width:38vw; height:38vw; min-width:360px; min-height:360px;
  right:-12vw; top:4%; background:rgba(82,32,56,.24);
}
.lage__fluss span:nth-child(3){
  width:34vw; height:34vw; min-width:320px; min-height:320px;
  left:38%; bottom:-12vw; background:rgba(206,215,238,.10);
}

.lage__intro{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(280px,.72fr);
  gap:var(--raum-24) var(--steg);
  align-items:end;
}
.lage__intro .label{ grid-column:1 / -1; }
.lage__intro h2{ max-width:16ch; }
.lage__intro .lead{ justify-self:end; max-width:37ch; }

.lage__buehne{
  margin-top:clamp(42px,5vw,76px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:var(--strich) solid var(--hellblau-30);
  border-left:var(--strich) solid var(--hellblau-16);
}
.lage__szene{
  min-width:0; position:relative; perspective:1100px;
  border-right:var(--strich) solid var(--hellblau-16);
  border-bottom:var(--strich) solid var(--hellblau-16);
}
.lage__karte{
  height:100%; display:grid;
  transform-style:preserve-3d;
  transition:transform calc(var(--zeit-auftritt) * .82) var(--kurve-auftritt);
}
.lage__seite{
  grid-area:1 / 1;
  min-width:0; min-height:100%;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  background:linear-gradient(145deg,rgba(206,215,238,.075),rgba(206,215,238,.018));
  transition:background var(--zeit-zustand-weit) var(--kurve-zustand),
             opacity var(--zeit-zustand-weit) var(--kurve-zustand);
}
.lage__seite--vorn{ display:grid; grid-template-rows:minmax(180px,1fr) auto; }
.lage__seite--hinten{
  transform:rotateY(180deg);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:clamp(24px,3vw,42px);
  background:
    radial-gradient(circle at 86% 18%,rgba(206,215,238,.14),transparent 34%),
    linear-gradient(145deg,rgba(74,94,109,.34),rgba(82,32,56,.18));
}
.lage__szene:hover .lage__seite--vorn{
  background:linear-gradient(145deg,rgba(206,215,238,.105),rgba(206,215,238,.025));
}
.lage__szene.ist-offen .lage__karte{ transform:rotateY(180deg); }
.lage.ist-fokussiert .lage__fluss span,
.lage.ist-fokussiert .lage__szene svg *{ animation-play-state:paused !important; }
.lage.ist-fokussiert .lage__szene:not(.ist-offen) .lage__seite--vorn{ opacity:.66; }

.lage__schalter{
  position:absolute; inset:0; z-index:3;
  width:100%; height:100%; margin:0; padding:0;
  border:0; border-radius:0; background:transparent;
  cursor:pointer;
}
.lage__schalter::after{
  content:"↻";
  position:absolute; right:var(--raum-14); top:var(--raum-14);
  width:30px; height:30px;
  display:grid; place-items:center;
  border:var(--strich) solid var(--hellblau-30);
  background:rgba(18,21,29,.74); color:var(--hellblau);
  font-family:var(--mono); font-size:.86rem; line-height:1;
  transition:transform var(--zeit-zustand) var(--kurve-zustand),
             border-color var(--zeit-zustand) var(--kurve-zustand),
             background var(--zeit-zustand) var(--kurve-zustand);
}
.lage__schalter:hover::after{ transform:rotate(24deg); border-color:var(--hellblau-72); }
.lage__szene.ist-offen .lage__schalter::after{
  content:"×"; transform:none;
  background:var(--hellblau); color:var(--tinte); border-color:var(--hellblau);
}
.lage__schalter:focus-visible{
  outline:var(--strich-stark) solid var(--hellblau);
  outline-offset:-5px; border-radius:0;
}

.lage__beispiel{
  display:flex; align-items:center; gap:var(--raum-8);
  font-family:var(--mono); font-size:var(--grad-mono-4); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--hellblau);
}
.lage__beispiel::before{ content:""; width:var(--punkt); height:var(--punkt); background:var(--hellblau); }
.lage__seite--hinten p{
  margin:var(--raum-20) 0 0; max-width:31ch;
  color:var(--text-hell-1);
  font-size:clamp(1.03rem,1.25vw,1.2rem); line-height:1.5;
  text-wrap:balance;
}
.lagebild{
  min-height:180px; padding:clamp(16px,2vw,28px);
  display:grid; place-items:center;
  overflow:hidden;
}
.lagebild svg{ display:block; width:100%; max-width:360px; height:auto; overflow:visible; }
.lage__seite--vorn > p{
  min-height:5.2em;
  margin:0; padding:clamp(18px,2vw,26px);
  border-top:var(--strich) solid var(--hellblau-16);
  color:var(--text-hell-1);
  font-size:clamp(1rem,1.18vw,1.15rem); line-height:1.35;
  text-wrap:balance;
}

/* Gemeinsame Zeichensprache der sechs Betriebsbilder. */
.lagebild .lg__stroke,
.lagebild .lg__bruch,
.lagebild .lg__mensch,
.lagebild .lg__dokument,
.lagebild .lg__neuerweg,
.lagebild .lg__alterweg,
.lagebild .lg__weiche,
.lagebild .lg__behaelter,
.lagebild .lg__zeile,
.lagebild .lg__stau,
.lagebild .lg__achse,
.lagebild .lg__signal,
.lagebild .lg__abbruch,
.lagebild .lg__telefon,
.lagebild .lg__quelle,
.lagebild .lg__zufuhr,
.lagebild .lg__angebot,
.lagebild .lg__uhr,
.lagebild .lg__wissenslinie,
.lagebild .lg__kollege,
.lagebild .lg__team{
  fill:none; stroke:var(--hellblau-72); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.lagebild .lg__flaeche{ fill:rgba(21,23,28,.48); stroke:var(--hellblau-34); stroke-width:1.4; }
.lagebild .lg__punkt{ fill:var(--hellblau); }
.lagebild .lg__bruch,
.lagebild .lg__neuerweg,
.lagebild .lg__abbruch{ stroke-dasharray:5 7; stroke:var(--text-hell-3); }
.lagebild .lg__dokument,
.lagebild .lg__angebot{ fill:rgba(206,215,238,.07); }
.lagebild .lg__alterweg{ stroke:var(--hellblau); stroke-width:2.2; stroke-dasharray:7 9; }
.lagebild .lg__routepunkt{ fill:var(--tinte-lift); stroke:var(--hellblau); stroke-width:1.8; }
.lagebild .lg__zeile{ stroke:var(--text-hell-3); }
.lagebild .lg__dringend circle{ fill:var(--vanille); stroke:var(--vanille); }
.lagebild .lg__dringend path{ fill:none; stroke:var(--tinte); stroke-width:2; stroke-linecap:round; }
.lagebild .lg__signal{ stroke:var(--hellblau); stroke-width:2.4; }
.lagebild .lg__klingel{ opacity:.85; }
.lagebild .lg__quelle{ fill:rgba(206,215,238,.035); stroke:var(--text-hell-3); }
.lagebild .lg__uhr{ stroke:var(--vanille); }
.lagebild .lg__wissen{ fill:rgba(206,215,238,.12); stroke:var(--hellblau); }
.lagebild .lg__kollege{ stroke:var(--hellblau); stroke-width:2; }
.lagebild .lg__team{ stroke:var(--text-hell-3); }
.lagebild .lg__wissenslinie{ stroke-dasharray:4 6; }

.lage__aufloesung{ position:relative; }
.lage__sammler{
  display:block; width:100%; height:clamp(74px,8vw,112px);
  overflow:visible;
}
.lg__sammellinie{
  fill:none; stroke:var(--hellblau-22); stroke-width:1.2;
  vector-effect:non-scaling-stroke;
}
.lg__sammelpunkt{ fill:var(--hellblau); }
.lage__diagnose{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.75fr);
  gap:var(--steg); align-items:start;
  padding-top:clamp(28px,3.2vw,46px);
  border-top:var(--strich) solid var(--hellblau-30);
}
.lage__wende{
  margin:0; max-width:16ch;
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.7rem,3vw,2.7rem); line-height:.98; letter-spacing:-.02em;
  color:var(--text-hell-1);
}
.lage__erklaerung{ max-width:42ch; justify-self:end; }
.lage__erklaerung > p{ color:var(--text-hell-2); }
.lage__erklaerung .lage__kern{
  margin-top:var(--raum-18); color:var(--text-hell-1); font-weight:600;
}
.lage__erklaerung .tief-link{ display:inline-block; margin-top:var(--raum-18); }

@media (max-width:1023px){
  .lage__intro{ grid-template-columns:minmax(0,1fr); align-items:start; }
  .lage__intro .label{ grid-column:auto; }
  .lage__intro .lead{ justify-self:start; max-width:45ch; }
  .lage__buehne{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lage__diagnose{ grid-template-columns:minmax(0,1fr); }
  .lage__erklaerung{ justify-self:start; max-width:48ch; }
}

@media (max-width:719px){
  .lage__buehne{ grid-template-columns:minmax(0,1fr); }
  .lage__seite--vorn{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); grid-template-rows:none; min-height:210px; }
  .lagebild{ min-height:210px; padding:var(--raum-14); }
  .lage__seite--vorn > p{
    min-height:0; display:flex; align-items:center;
    border-top:0; border-left:var(--strich) solid var(--hellblau-16);
    padding:var(--raum-18); font-size:.98rem;
  }
  .lage__seite--hinten{ min-height:210px; padding:var(--raum-24); }
  .lage__sammler{ height:68px; }
}

@media (max-width:440px){
  .lage__seite--vorn{ grid-template-columns:minmax(0,1fr); grid-template-rows:166px auto; min-height:0; }
  .lagebild{ min-height:166px; padding:var(--raum-6) var(--raum-18); }
  .lage__seite--vorn > p{ border-left:0; border-top:var(--strich) solid var(--hellblau-16); }
  .lage__seite--hinten{ min-height:244px; padding:var(--raum-22); }
}

/* ============================================================
   4 — Leistungen
   ============================================================ */
.leistungen{
  overflow:clip;
  isolation:isolate;
}
.leistungen .head{ max-width:44ch; }
.leistungen::before{
  content:"";
  position:absolute; inset:-18%; z-index:-1;
  background:radial-gradient(circle at var(--leistung-licht-x,50%) 54%,var(--leistung-licht,transparent),transparent 52%);
  opacity:0;
  pointer-events:none;
}
.leistungen[data-aktiv="workshop"]{
  background:var(--leistung-workshop);
  --leistung-licht:var(--leistung-workshop-licht);
  --leistung-licht-x:12%;
}
.leistungen[data-aktiv="schulung"]{
  background:var(--leistung-schulung);
  --leistung-licht:var(--leistung-schulung-licht);
  --leistung-licht-x:38%;
}
.leistungen[data-aktiv="wissen"]{
  background:var(--leistung-wissen);
  --leistung-licht:var(--leistung-wissen-licht);
  --leistung-licht-x:62%;
}
.leistungen[data-aktiv="umsetzung"]{
  background:var(--leistung-umsetzung);
  --leistung-licht:var(--leistung-umsetzung-licht);
  --leistung-licht-x:88%;
}
.leistungen[data-aktiv]::before{ opacity:1; }
.leistungen[data-aktiv]{ color:var(--text-hell-2); }
.leistungen[data-aktiv] h2,
.leistungen[data-aktiv] h3{ color:var(--text-hell-1); }
.leistungen[data-aktiv] .lead{ color:var(--text-hell-2); }
.leistungen[data-aktiv] .label{ color:var(--text-hell-3); }
.leistungen[data-aktiv] .label::before{ background:var(--hellblau); }
/* Oben eine Linie, unten keine. Die Linie über dem Wahlraster trennt es vom
   Abschnittskopf. Unten schloss eine zweite die Bühne ab — direkt unter
   „Alle Leistungen“, also genau unter dem Punkt, auf den das Grundbild
   zuläuft. Das Diagramm endet in einer Kugel und soll dort auslaufen, nicht
   gegen einen Strich stoßen. */
.leistungen__buehne{
  position:relative;
  min-height:610px;
  margin-top:clamp(32px,3.6vw,52px);
  border-top:var(--strich) solid var(--linie-stark);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.leistungen__wahlraster{
  position:relative; z-index:3; flex:none;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  min-height:250px;
}
.leistung__wahl{
  position:relative;
  min-width:0; min-height:250px;
  padding:var(--raum-24) clamp(18px,2vw,30px) var(--raum-22);
  border-right:var(--strich) solid var(--linie);
  display:flex; flex-direction:column; align-items:flex-start;
}
.leistung__wahl:first-child{ padding-left:0; }
.leistung__wahl:last-child{ border-right:0; padding-right:0; }
.leistung__wahl::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:var(--strich-stark);
  background:var(--hellblau); opacity:0;
}
.leistung__anlass{
  display:block; margin-bottom:var(--raum-12);
  font-family:var(--mono); font-size:var(--grad-mono-5); font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-3);
}
.leistung__schalter{
  appearance:none; display:block;
  margin:0; padding:0; border:0; background:none;
  color:inherit; text-align:left; cursor:pointer;
}
.leistung__wahl p{
  max-width:30ch; margin-top:var(--raum-14);
  font-size:var(--grad-text-2); line-height:1.52; color:var(--text-2);
}
.leistung__hinweis{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; margin-top:auto; padding-top:var(--raum-12);
  border-top:var(--strich) solid var(--linie);
  font-family:var(--mono); font-size:var(--grad-mono-4); letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-3);
}
.leistung__hinweis span{ font-size:1rem; line-height:1; }
.leistungen[data-aktiv] .leistung__wahl{ opacity:.34; border-color:var(--linie-hell); }
.leistungen[data-aktiv] .leistung__wahl p{ color:var(--text-hell-2); }
.leistungen[data-aktiv] .leistung__anlass,
.leistungen[data-aktiv] .leistung__hinweis{ color:var(--text-hell-3); border-color:var(--linie-hell); }
/* Die aktive Karte hebt sich dreifach ab: volle Deckkraft, der blaue Balken
   an der Oberkante, und das Plus dreht sich zum Kreuz. Welche Karte das ist,
   steht nicht in einer Liste, sondern im Vergleich: Der Abschnitt trägt
   data-aktiv, jede Karte trägt data-leistung, und wo beide gleich sind, ist
   die Karte aktiv. Eine fünfte Leistung braucht hier deshalb keine Zeile. */
.leistungen[data-aktiv="workshop"]  [data-leistung="workshop"],
.leistungen[data-aktiv="schulung"]  [data-leistung="schulung"],
.leistungen[data-aktiv="wissen"]    [data-leistung="wissen"],
.leistungen[data-aktiv="umsetzung"] [data-leistung="umsetzung"]{ opacity:1; }
.leistungen[data-aktiv="workshop"]  [data-leistung="workshop"]::before,
.leistungen[data-aktiv="schulung"]  [data-leistung="schulung"]::before,
.leistungen[data-aktiv="wissen"]    [data-leistung="wissen"]::before,
.leistungen[data-aktiv="umsetzung"] [data-leistung="umsetzung"]::before{ opacity:1; }
.leistungen[data-aktiv="workshop"]  [data-leistung="workshop"]  .leistung__hinweis span,
.leistungen[data-aktiv="schulung"]  [data-leistung="schulung"]  .leistung__hinweis span,
.leistungen[data-aktiv="wissen"]    [data-leistung="wissen"]    .leistung__hinweis span,
.leistungen[data-aktiv="umsetzung"] [data-leistung="umsetzung"] .leistung__hinweis span{ transform:rotate(45deg); }

/* Auf dem Zeigegerät öffnet die Karte eine Szene daneben, dafür ist der
   Schalter da. Ein Telefon hat kein Zeigegerät und keinen Platz für die Szene,
   dort führt dieselbe Karte deshalb direkt auf die Leistungsseite. Beide Wege
   stehen im Markup, das Fenster entscheidet. */
.leistung__ziel{ display:none; }
.leistung__zeichen--schmal{ display:none; }

.leistungen__szenen{
  position:relative; z-index:1; flex:1; min-height:360px;
  border-top:var(--strich) solid var(--linie);
}
.leistungen[data-aktiv] .leistungen__szenen{ border-color:var(--linie-hell); }
.leistung__szene{ position:absolute; inset:0; }
/* Das Grundbild endet 62 px über dem Bühnenboden. Der Wert ist gerechnet,
   nicht geschätzt: 46 px Knopfhöhe plus 10 px Luft darunter plus 6 px
   zwischen Kugel und Knopfkante. Weil das SVG bei 264 endet statt bei 310,
   steht die Zeichnung trotz des kleineren Kastens praktisch unverändert —
   nachgerechnet bei 1440 px: Kugel vorher auf 298,5 px, jetzt auf 289,0 px. */
.leistungen__grundbild{ position:absolute; inset:0 0 62px; }
.leistungen__grundbild svg,
.leistung__szenenlinie{ width:100%; height:100%; }
.leistungen__grundbild path,
.leistung__szenenlinie path{
  fill:none; stroke:var(--stahl-30); stroke-width:var(--strich);
  vector-effect:non-scaling-stroke;
}
.leistungen__grundbild circle{ fill:var(--stahl); }
/* Der Verweis ist ein Knopf, aber der leise: `--ghost` und `--sm`. Ein
   Bordeaux-Knopf stünde hier in Konkurrenz zum Erstgespräch in der Kopfzeile,
   und das ist der einzige Knopf der Seite, der laut sein darf.
   Hier steht nur die Lage — alles Sichtbare kommt aus `.btn` in
   bausteine.css. Wer hier Farbe oder Grad setzt, überschreibt den Baustein,
   weil abschnitte.css später geladen wird. */
.leistungen__alle{
  position:absolute; z-index:2; left:50%; top:auto; bottom:var(--raum-10);
  transform:translateX(-50%);
  white-space:nowrap;
}
.leistungen[data-aktiv] .leistungen__alle{
  visibility:hidden; opacity:0; pointer-events:none;
  transform:translate(-50%,6px);
}
.leistung__szene{
  visibility:hidden; opacity:0; pointer-events:none;
}
.leistungen[data-aktiv] .leistungen__grundbild{ opacity:0; }
.leistungen[data-aktiv="workshop"] .leistung__szene--workshop,
.leistungen[data-aktiv="schulung"] .leistung__szene--schulung,
.leistungen[data-aktiv="wissen"] .leistung__szene--wissen,
.leistungen[data-aktiv="umsetzung"] .leistung__szene--umsetzung{
  visibility:visible; opacity:1; pointer-events:auto;
}
.leistung__szenenlinie path{ stroke:var(--hellblau-30); }
.schulung__linie--mobil{ display:none; }

.schulung__kern{
  position:absolute; left:10%; top:50%; width:112px;
  transform:translateY(-50%);
}
.schulung__kern svg,
.wissen__kern svg,
.umsetzung__ziel svg,
.workshop__waage svg{ display:block; width:100%; height:auto; }
.schulung__kern circle,
.schulung__kern path,
.wissen__kern path,
.wissen__kern circle,
.umsetzung__ziel circle,
.umsetzung__ziel path,
.workshop__waage circle,
.workshop__waage path{
  fill:none; stroke:var(--hellblau); stroke-width:var(--strich-stark);
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
}
.leistung__satellit,
.wissen__seite span,
.umsetzung__quellen span,
.umsetzung__schritte span,
.workshop__faelle span,
.workshop__reihe span,
.workshop__achse{
  padding:var(--raum-8) var(--raum-12);
  border:var(--strich) solid var(--hellblau-30);
  background:var(--hellblau-06);
  font-family:var(--mono); font-size:var(--grad-mono-6); line-height:1.35;
  letter-spacing:.02em; color:var(--text-hell-1);
}
.leistung__satellit{ position:absolute; }
.schulung__thema--1{ left:37%; top:8%; }
.schulung__thema--2{ left:57%; top:26%; }
.schulung__thema--3{ left:64%; top:46%; }
.schulung__thema--4{ left:57%; top:67%; }
.schulung__thema--5{ left:37%; top:78%; }

.wissen__seite{
  position:absolute; top:16%; bottom:25%; width:20%;
  display:flex; flex-direction:column; justify-content:space-between;
}
.wissen__seite--quellen{ left:4%; align-items:flex-start; }
.wissen__seite--ergebnisse{ right:4%; align-items:flex-end; }
.wissen__seite span{
  box-sizing:border-box;
  width:100%;
  text-align:center;
}
.wissen__kern{
  position:absolute; left:50%; top:50%; width:132px;
  transform:translate(-50%,-50%);
}

.umsetzung__quellen{
  position:absolute; left:3%; top:12%; bottom:12%; width:20%;
  display:flex; flex-direction:column; justify-content:space-between; align-items:stretch;
}
.umsetzung__quellen span{
  box-sizing:border-box;
  width:100%;
  text-align:center;
}
.umsetzung__linie--mobil{ display:none; }
.umsetzung__schritte{
  position:absolute; left:29%; top:50%; width:54%;
  transform:translateY(-50%);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--raum-8);
}
.umsetzung__schritte span{ text-align:center; padding-inline:var(--raum-8); }
.umsetzung__schritte span{
  min-width:0;
  overflow-wrap:break-word;
  hyphens:manual;
}
.umsetzung__ziel{
  position:absolute; left:92%; top:50%; width:92px;
  transform:translate(-50%,-50%);
}

/* Die Workshopszene, gebaut wie die Wissensszene: links Eingang, Mitte
   Verarbeitung, rechts Ergebnis. Der Unterschied liegt im Ergebnis, das hier
   keine Antwort ist, sondern eine Reihenfolge mit einem Fall obenauf. */
.workshop__linie--mobil{ display:none; }

.workshop__faelle{
  position:absolute; left:3%; top:12%; bottom:12%; width:19%;
  display:flex; flex-direction:column; justify-content:space-between;
}
.workshop__faelle span{
  box-sizing:border-box; width:100%; text-align:center;
}

.workshop__waage{
  position:absolute; left:50%; top:50%; width:126px;
  transform:translate(-50%,-50%);
}
.workshop__achse{
  position:absolute; white-space:nowrap;
  padding:var(--raum-6) var(--raum-10);
}
.workshop__achse--nutzen{ left:-30%; bottom:-14%; }
.workshop__achse--aufwand{ right:-34%; top:-8%; }

.workshop__reihe{
  position:absolute; right:3%; top:50%; width:22%;
  transform:translateY(-50%);
  display:flex; flex-direction:column; gap:var(--raum-10);
}
.workshop__reihe span{
  box-sizing:border-box; width:100%; text-align:center;
}
/* Der erste Fall ist das Ergebnis des Workshops, deshalb trägt er als
   einziges Element der Szene die volle Hellblau-Fläche. */
.workshop__reihe .workshop__erster{
  border-color:var(--hellblau);
  background:var(--hellblau);
  color:var(--tinte);
  font-weight:500;
}

.leistung__detail{
  position:absolute; right:var(--raum-24); bottom:var(--raum-20);
  min-height:44px;
  display:inline-flex; align-items:center; justify-content:space-between; gap:var(--raum-18);
  padding:var(--raum-10) var(--raum-14);
  border:var(--strich) solid var(--hellblau);
  background:var(--hellblau);
  color:var(--tinte); text-decoration:none;
  font-family:var(--mono); font-size:var(--grad-mono-5); font-weight:500; letter-spacing:.04em;
}
.leistung__detail:hover{
  color:var(--tinte);
  border-color:var(--weiss);
  background:var(--weiss);
}
.leistung__detail--links{ right:var(--raum-24); left:auto; }

/* Ein konkreter Projektmoment als ruhiger Beleg zwischen Leistung und Case.

   Kein eigener Grund. Das Band steht auf dem Papier der Seite und lebt
   allein von seinen zwei Linien — damit ist es das leiseste Band der
   Startseite, was zu einer einzelnen Stimme passt. Mint hatte es zur
   Familie der Fremdbeleg-Bänder gezählt und dabei lauter gemacht als die
   Leistungen darüber; Weiß wäre ein zweites Mal derselbe Griff wie bei den
   Referenzen gewesen, und der wirkt dort nur, weil er einmalig ist. */
.projektzitat{
  padding-block:clamp(26px,3.2vw,44px);
  border-block:var(--strich) solid var(--anthrazit-22);
}
.projektzitat__in{ padding-left:calc(var(--rand) + var(--schiene) + var(--steg)); }
.projektzitat__stimme{
  margin:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--raum-8) var(--raum-20);
  align-items:end;
}
.projektzitat__sterne{
  grid-column:1 / -1;
  font-size:clamp(.9rem,1.1vw,1.05rem);
  line-height:1;
  letter-spacing:.2em;
  color:var(--bordeaux);
}
.projektzitat blockquote{ margin:0; max-width:920px; }
.projektzitat blockquote p{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.18rem,1.65vw,1.55rem);
  font-weight:700;
  line-height:1.22;
  text-wrap:balance;
  color:var(--text-1);
}
.projektzitat figcaption{
  max-width:245px;
  padding-bottom:.18em;
  font-family:var(--mono);
  font-size:var(--grad-mono-4);
  line-height:1.5;
  letter-spacing:.035em;
  color:var(--text-3);
}
.projektzitat figcaption strong,
.projektzitat figcaption span{ display:block; }
.projektzitat figcaption strong{
  margin-bottom:var(--raum-2);
  font-family:var(--body);
  font-size:var(--grad-text-4);
  letter-spacing:0;
  color:var(--text-1);
}
@media (max-width:719px){
  .projektzitat__in{ padding-left:var(--rand); }
  .projektzitat__stimme{ grid-template-columns:minmax(0,1fr); gap:var(--raum-12); }
  .projektzitat__sterne{ grid-column:1; }
  .projektzitat blockquote p{ font-size:clamp(1.12rem,5.5vw,1.35rem); }
  .projektzitat figcaption{ max-width:none; }
}

/* Das Laufband trennt bewusst Werkzeug und Liefergegenstand. Kein Tag-Cloud-
   Raster: zwei ruhige technische Zeilen, lesbar wie eine Werkstattliste. */
.technikband{
  background:var(--tinte); color:var(--text-hell-2);
  border-block:var(--strich) solid var(--hellblau-16);
  overflow:hidden;
}
.technikband__reihe{
  display:grid; grid-template-columns:clamp(190px,18vw,248px) minmax(0,1fr);
  align-items:center; min-height:64px;
}
.technikband__reihe + .technikband__reihe{ border-top:var(--strich) solid var(--hellblau-16); }
.technikband__label{
  position:relative; z-index:2; align-self:stretch;
  display:flex; align-items:center;
  padding-right:var(--raum-24);
  background:var(--tinte); border-right:var(--strich) solid var(--hellblau-16);
  font-family:var(--mono); font-size:var(--grad-mono-5); font-weight:500;
  letter-spacing:.07em; text-transform:uppercase; color:var(--text-hell-3);
}
.technikband__fenster{
  min-width:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.technikband__spur{ display:flex; width:max-content; }
.technikband__gruppe{
  flex:none; display:flex; align-items:center;
  list-style:none; margin:0; padding:0;
}
.technikband__gruppe li{
  display:flex; align-items:center; gap:var(--raum-14);
  padding-right:clamp(30px,3.6vw,54px);
  white-space:nowrap;
  font-family:var(--mono); font-size:clamp(.72rem,.84vw,.82rem);
  letter-spacing:.025em; color:var(--text-hell-2);
}
.technikband__gruppe li::before{
  content:""; width:4px; height:4px; flex:0 0 4px;
  background:var(--hellblau-34);
}
.technikband__reihe--gebaut .technikband__gruppe li{
  font-family:var(--display); font-size:clamp(.88rem,1vw,1rem); font-weight:700;
  letter-spacing:.01em; text-transform:uppercase; color:var(--text-hell-1);
}

@media (max-width:719px){
  .technikband__reihe{ grid-template-columns:minmax(0,1fr); padding-block:var(--raum-12); }
  .technikband__reihe + .technikband__reihe{ border-top:var(--strich) solid var(--hellblau-16); }
  .technikband__label{
    min-height:28px; padding:0 0 var(--raum-8); border-right:0;
  }
  .technikband__fenster{ margin-inline:calc(var(--rand) * -1); }
}

@media (max-width:1023px){
  .leistungen__buehne{ min-height:900px; }
  .leistungen__wahlraster{
    grid-template-columns:repeat(2,minmax(0,1fr));
    min-height:0;
  }
  .leistung__wahl{ min-height:250px; }
  /* Bei zwei mal zwei trägt die zweite Reihe keinen rechten Rand mehr am
     zweiten Element, dafür brauchen beide oberen eine untere Linie. */
  .leistung__wahl:nth-child(2n){ border-right:0; padding-right:0; }
  .leistung__wahl:nth-child(2n+1){ padding-left:0; }
  .leistung__wahl:nth-child(-n+2){ border-bottom:var(--strich) solid var(--linie); }
}

@media (max-width:719px){
  .leistungen__buehne{ min-height:0; }
  .leistungen__wahlraster{ grid-template-columns:minmax(0,1fr); min-height:0; }
  .leistung__wahl{
    min-height:0; padding:var(--raum-20) 0;
    border-right:0; border-bottom:var(--strich) solid var(--linie);
  }
  .leistung__wahl:last-child{ border-bottom:0; }
  .leistung__wahl p{ max-width:44ch; padding-right:var(--raum-30); }
  .leistung__hinweis{ position:absolute; right:0; top:50%; width:auto; margin:0; padding:0; border:0; }
  .leistung__hinweis{ transform:translateY(-50%); }
  .leistung__hinweis > span{ margin-left:var(--raum-8); }
  /* Die Szenen samt Grundbild fallen weg: Vier Linien, die auf einen Punkt
     zulaufen, sind eine Aussage über vier Spalten. Untereinander gibt es die
     Spalten nicht mehr, und die Zeichnung sagt dann nichts. Der Knopf zur
     Übersicht bleibt, er ist der Teil, der trägt. */
  .leistungen__szenen{
    position:relative; inset:auto; min-height:0;
    border-top:var(--strich) solid var(--linie);
    padding-top:var(--raum-24);
  }
  .leistungen__grundbild,
  .leistung__szene{ display:none; }
  .leistungen__alle{
    position:static; transform:none; white-space:normal;
    visibility:visible; opacity:1; pointer-events:auto;
  }

  /* Die ganze Karte wird zur Fläche des Links, nicht nur die Überschrift. */
  .leistung__wahl{ position:relative; }
  .leistung__schalter{ display:none; }
  .leistung__ziel{
    display:inline; color:inherit; text-decoration:none;
    font:inherit; letter-spacing:inherit;
  }
  .leistung__ziel::after{ content:''; position:absolute; inset:0; z-index:1; }
  .leistung__wahl:active{ background:var(--tinte-10); }
  .leistung__zeichen--breit{ display:none; }
  .leistung__zeichen--schmal{ display:inline; }
  .schulung__kern{ left:3%; width:82px; }
  .schulung__linie--desktop{ display:none; }
  .schulung__linie--mobil{ display:block; }
  .schulung__thema--1{ left:28%; top:7%; }
  .schulung__thema--2{ left:52%; top:25%; }
  .schulung__thema--3{ left:58%; top:46%; }
  .schulung__thema--4{ left:52%; top:67%; }
  .schulung__thema--5{ left:28%; top:80%; }
  .wissen__seite{ width:24%; }
  .wissen__seite--quellen{ left:0; }
  .wissen__seite--ergebnisse{ right:0; }
  .wissen__kern{ width:92px; }
  .umsetzung__quellen{ left:0; width:32%; }
  .umsetzung__linie--desktop{ display:none; }
  .umsetzung__linie--mobil{ display:block; }
  /* Workshopszene auf schmalen Geräten: Die Kästen rücken an die Ränder, die
     Waage schrumpft. Die beiden Achsenwörter fallen weg, sie säßen sonst mitten
     zwischen den Kästen. Was sie erklären, steht ohnehin im Text daneben. */
  .workshop__linie--desktop{ display:none; }
  .workshop__linie--mobil{ display:block; }
  .workshop__faelle{ left:0; width:30%; }
  .workshop__waage{ width:84px; }
  .workshop__achse{ display:none; }
  .workshop__reihe{ right:0; width:32%; }
  .umsetzung__schritte{ left:34%; width:37%; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .umsetzung__ziel{ left:84%; width:70px; }
  .leistung__detail{ right:0; }
  .leistung__detail--links{ left:auto; right:0; }
}

@media (max-width:440px){
  .leistung__wahl p{ max-width:32ch; padding-right:0; }
  .leistung__hinweis{ top:var(--raum-20); transform:none; }
  .leistung__hinweis{ font-size:0; }
  .leistung__hinweis > span{ font-size:1rem; margin:0; }
  /* Die Szenen sind unter 720px ausgeblendet, eine Mindesthöhe für sie
     wäre nur Leerraum unter dem Knopf. */
  .leistungen__szenen{ min-height:0; }
  .leistung__satellit,
  .wissen__seite span,
  .umsetzung__quellen span,
  .umsetzung__schritte span{ padding:var(--raum-6) var(--raum-8); font-size:var(--grad-mono-2); }
  .schulung__thema--2,
  .schulung__thema--4{ left:48%; }
  .schulung__thema--3{ left:54%; }
  .wissen__kern{ width:76px; }
  .umsetzung__schritte{ left:38%; width:32%; grid-template-columns:minmax(0,1fr); gap:var(--raum-6); }
  .umsetzung__ziel{ left:84%; width:58px; }
  .leistung__detail--links{ left:auto; right:0; }
}

/* ============================================================
   5 — Industrien
   ============================================================ */
.ind{ margin-top:var(--nach-kopf); border-top:var(--strich) solid var(--linie-stark); }
.ind__row{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr) auto;
  gap:var(--steg);
  align-items:start;
  padding:var(--reihe-y) 0;
  border-bottom:var(--strich) solid var(--linie);
  text-decoration:none; color:inherit;
  position:relative;
}
.ind__row::before{
  content:""; position:absolute; left:0; bottom:calc(var(--strich) * -1); height:var(--strich); width:100%;
  background:var(--bordeaux);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--zeit-zustand-weit) var(--kurve-zustand);
}
.ind__row:hover::before,.ind__row:focus-visible::before{ transform:scaleX(1); }
.ind__name{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.15rem,1.9vw,1.75rem); line-height:1; letter-spacing:-.02em; color:var(--text-1);
}
.ind__body p{ font-size:var(--grad-text-4); margin-bottom:var(--raum-14); }
.ind__arte{ display:flex; flex-wrap:wrap; gap:var(--raum-4) 0; }
.ind__arte span{
  font-family:var(--mono); font-size:var(--grad-mono-5); letter-spacing:.04em; color:var(--text-3);
  padding-right:var(--raum-11); margin-right:var(--raum-11); border-right:var(--strich) solid var(--linie);
  line-height:1.5;
}
.ind__arte span:last-child{ border-right:0; }
.ind__go{
  font-family:var(--mono); font-size:var(--grad-mono-5); letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-3); white-space:nowrap; padding-top:.3em;
  display:inline-flex; gap:.6em; align-items:center;
}
.ind__row:hover .ind__go{ color:var(--bordeaux); }

@media (max-width:1023px){
  .ind__row{ grid-template-columns:minmax(0,1fr); gap:var(--raum-14); }
  .ind__go{ padding-top:0; }
}

/* ============================================================
   Scharnier: Bildband, das ins Dunkle führt
   ============================================================ */
/* Das Scharnier ist um die Höhe seiner früheren Bildunterschrift kürzer
   geworden. Sie stand auf 16 px über der Unterkante und war eine Zeile hoch;
   dieser Streifen ist raus, damit der Case-Kopf genau dort beginnt, wo vorher
   die Unterschrift stand. */
.hinge{ position:relative; height:clamp(194px,27vw,387px); overflow:hidden; background:var(--tinte); }
.hinge img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 52%;
  filter:grayscale(1) contrast(1.05) brightness(.86);
}
.hinge__tint{ position:absolute; inset:0; background:var(--stahl); mix-blend-mode:color; opacity:.5; }
.hinge__fade{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    var(--papier) 0%,
    var(--papier-34) 9%,
    var(--tinte-10) 34%,
    var(--tinte-58) 70%,
    var(--tinte) 100%);
}
/* ============================================================
   6 — Cases
   ============================================================ */
/* Kein Abstand nach oben. Der Fade des Scharniers endet auf reinem Tinte;
   der Abschnitt beginnt deshalb ohne sichtbare Kante, und die Schiene sitzt
   genau auf der Höhe, auf der vorher die Bildunterschrift stand. */
.cases{ padding-top:0; }
.cases__kopf{ max-width:40ch; }

/* Die Fuge zwischen zwei Cases.
   Sie war unlesbar, und zwar aus zwei Gründen gleichzeitig. Erstens saß die
   Trennlinie ohne jede Luft direkt auf der Unterkante von „Bericht lesen“
   (gemessen: 0 px), während darunter 73 px Platz waren — die Linie gehörte
   damit optisch zum vorigen Case und trennte nicht, sie schloss ab.
   Zweitens hatte sie dieselbe Stärke wie die Linien *innerhalb* eines Cases
   (Kopf zum Wandel, Wandel zum Beleg); drei gleich aussehende Striche je Case,
   von denen einer die Grenze sein sollte.

   Also beides: Luft auf beiden Seiten der Linie, und die Linie selbst kräftiger
   als die Hausstriche. --hellblau-30 statt --linie-hell (.16) ist der Sprung,
   den es dafür braucht; stärker wäre ein Kasten, und Kästen hat dieser
   Abschnitt bewusst nicht. */
.case{
  position:relative;
  /* Weg von der Inhaltsspalte zurück an den linken Rand der Bahn: Die Cases
     stehen in der rechten Rasterspalte, die Trennlinie soll aber über die
     ganze Bahn laufen — sonst hört sie an der Schiene auf und trennt nur den
     Text, nicht den Case. Unter 1024 px ist die Schiene 0 und das Raster
     einspaltig, dort ist der Weg entsprechend 0. */
  --fuge-links:calc(var(--schiene) + var(--steg));
  padding-top:clamp(52px,6vw,92px);
  padding-bottom:clamp(46px,5.2vw,80px);
}
.case:first-of-type{ padding-top:clamp(30px,3.4vw,52px); }
.case:last-of-type{ padding-bottom:clamp(30px,3.4vw,52px); }
.case + .case::before{
  content:"";
  position:absolute; top:0; right:0;
  left:calc(var(--fuge-links) * -1);
  height:var(--strich);
  background:var(--hellblau-30);
}
.case__head{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--raum-11); margin-bottom:var(--raum-22); }
/* Seit die Industriezeile ein Verweis ist, braucht sie einen sichtbaren
   Zustand — sonst sähe sie aus wie die Beschriftung, die sie vorher war. */
.case__branche{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--mono); font-size:var(--grad-mono-5); letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-hell-3); text-decoration:none;
  border-bottom:var(--strich) solid transparent;
  transition:color var(--zeit-zustand) var(--kurve-zustand),
             border-color var(--zeit-zustand) var(--kurve-zustand);
}
.case__branche:hover,.case__branche:focus-visible{
  color:var(--hellblau); border-bottom-color:var(--hellblau-30);
}
.case__branche:hover .arw{ transform:translateX(var(--pfeil-weg)); }

/* Was in einer Industrie gebaut wurde. Steht zwischen Beschreibung und
   Gegenständen, weil es beides verbindet. */
.ind__cases{
  font-size:var(--grad-text-4); color:var(--text-2);
  margin-bottom:var(--raum-14);
}
.ind__cases .k{
  font-family:var(--mono); font-size:var(--grad-mono-5); letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-3);
  margin-right:var(--raum-10);
}
.case h3{ font-size:clamp(1.25rem,2.05vw,1.95rem); letter-spacing:-.02em; }

/* ---------- Der Wandel im Case ----------
   Zwei Sätze in derselben Schrift und derselben Größe, dazwischen eine
   Linie mit Spitze. Erst durch die Gleichbehandlung liest sich das Paar
   als eine Bewegung und nicht als zwei Behauptungen.
   Links stehen Anführungszeichen, rechts nicht: Links hat es jemand
   gesagt, rechts beschreiben wir einen Zustand. Solange keine
   schriftliche Freigabe für einen Kundensatz vorliegt, ist rechts kein
   Zitat, und die Zeichensetzung darf das nicht behaupten. */
/* Der ganze Case in einem Block. Vier Zeilen, die ersten drei teilen sich die
   beiden Seiten: Label, Satz, Ausgangslage. Die vierte läuft über beide und
   trägt die Lösung.

   Der Grund für das Zeilenraster ist die Spitze. Sie muss auf der Satzzeile
   sitzen, und da die Vorher-Seite einen zweiten Absatz trägt, sind die Seiten
   unterschiedlich hoch — ein gerechneter Abstand von oben wäre bei jeder
   Fensterbreite ein anderer. Über subgrid liegt sie in Zeile 2 und stimmt
   ohne Rechnung. Die Heute-Seite füllt Zeile 3 nicht; das ist Absicht. */
.wandel{
  margin-top:clamp(20px,2.4vw,30px);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  grid-template-rows:auto auto auto auto;
  column-gap:clamp(18px,2.4vw,34px);
  row-gap:var(--raum-12);
  align-items:start;
  padding:clamp(20px,2.4vw,30px) 0;
  border-top:var(--strich) solid var(--linie-hell);
  border-bottom:var(--strich) solid var(--linie-hell);
}
.wandel__seite{
  display:grid;
  grid-row:1 / 4;
  grid-template-rows:subgrid;
}
/* Von den drei Beschriftungen des Teasers leuchtet genau eine: „Heute“.
   Sie ist das Ergebnis, und nur das Ergebnis soll aus dem Block heraus-
   springen. „Vorher“ und „Gebaut“ bleiben gedämpft — sonst konkurrieren
   drei gleich helle Marken um denselben Blick. */
.wandel__seite .label,
.wandel__loesung .label{ color:var(--text-hell-3); }
.wandel__seite .label::before,
.wandel__loesung .label::before{ background:var(--hellblau-34); }
.wandel__seite--heute .label{ color:var(--hellblau); }
.wandel__seite--heute .label::before{ background:var(--hellblau); }
.wandel__satz{
  margin:0;
  font-size:clamp(1.08rem,1.45vw,1.38rem); line-height:1.32;
  color:var(--text-hell-1);
  text-wrap:balance;
}
.wandel__seite--heute .wandel__satz{ color:var(--hellblau); }
/* Die Ausgangslage stand früher als eigene Spalte „Problem“ unter dem
   Beleg und hat damit gesagt, was „Vorher“ schon gesagt hatte. Sie steht
   jetzt unter dem Satz, den sie erklärt — aber deutlich kleiner und in
   der Fließschrift, damit das gesprochene Zitat der Blickfang bleibt.
   Zwei Sätze sind die Obergrenze: Wird das ein Absatz, ist die Zeile
   kein Blickfang mehr, sondern nur noch Text, und der Wandel verliert
   das Tempo, das ihn zum verständlichsten Element der Seite macht. */
.wandel__lage{
  margin:0;
  max-width:46ch;
  font-size:var(--grad-text-2); line-height:1.6;
  color:var(--text-hell-2);
  text-wrap:pretty;
}
/* Die Lösung schließt den Teaser ab und läuft über beide Spalten. Sie steht
   bewusst ohne Pfeil und ohne Gegenüber: Vorher und Heute sind eine Bewegung,
   Gebaut ist die Antwort auf das Wie. Ein Satz, mehr nicht — was danach kommt,
   steht im Bericht, und genau dafür ist der Link da.

   Beschriftung neben den Satz, nicht darüber: Übereinander kostete die Zeile
   111 px, daneben 62 px, und der Teaser hat drei Beschriftungen. Eine dritte
   Linie über der Lösung hatte der Block auch noch — vier Striche je Case waren
   zu viele, um die Trennlinie zwischen den Cases noch als Grenze zu lesen. */
.wandel__loesung{
  grid-column:1 / -1;
  grid-row:4;
  margin-top:clamp(12px,1.4vw,20px);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(18px,2.4vw,34px);
  align-items:baseline;
}
.wandel__loesung p{
  margin:0;
  max-width:74ch;
  font-size:var(--grad-text-2); line-height:1.6;
  color:var(--text-hell-2);
  text-wrap:pretty;
}
/* Die Spitze ist gezeichnet, nicht gesetzt: ein Pfeil als Schriftzeichen
   säße auf der Grundlinie und nicht in der Mitte zwischen den Sätzen. */
.wandel__pfeil{
  grid-column:2; grid-row:2; align-self:center;
  display:block; width:clamp(26px,3.4vw,52px); height:var(--strich);
  background:var(--hellblau-34); position:relative;
}
.wandel__pfeil::after{
  content:""; position:absolute; right:0; top:50%;
  width:6px; height:6px;
  border-top:var(--strich) solid var(--hellblau-34);
  border-right:var(--strich) solid var(--hellblau-34);
  transform:translateY(-50%) rotate(45deg);
}

@media (max-width:719px){
  /* Untereinander gibt es keine gemeinsamen Zeilen mehr: Das Raster fällt
     zurück auf eine Spalte, die Seiten werden gewöhnliche Blöcke, und die
     Spitze dreht sich auf senkrecht zwischen sie. */
  .wandel{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:none;
    row-gap:var(--raum-16);
  }
  .wandel__seite{ display:block; grid-row:auto; grid-template-rows:none; }
  /* Auf dem Telefon bliebe neben der Beschriftung zu wenig für den Satz —
     dort steht sie wieder darüber. */
  .wandel__loesung{
    grid-column:auto; grid-row:auto;
    grid-template-columns:minmax(0,1fr);
    margin-top:var(--raum-20);
  }
  .wandel__loesung p{ margin-top:var(--raum-12); }
  .wandel__satz{ margin-top:var(--raum-12); }
  .wandel__lage{ margin-top:var(--raum-12); max-width:none; }
  .wandel__pfeil{
    grid-column:auto; grid-row:auto; align-self:auto;
    width:var(--strich); height:var(--raum-20); justify-self:start;
    margin-left:3px;
  }
  .wandel__pfeil::after{
    right:auto; left:50%; top:auto; bottom:0;
    transform:translateX(-50%) rotate(135deg);
  }
}

/* .case__cols und .case__col sind am 19.08. entfallen: Die Spalten unter dem
   Beleg waren zuletzt „Gebaut“ und „Stand“, und beides gehört nicht mehr auf
   die Startseite — Gebaut ist als vierte Zeile in den Teaser gerückt, Stand
   auf die Case-Seite. Die Regeln stehen nicht mehr hier, weil sie nichts mehr
   treffen; die Struktur, die sie einmal getragen haben, steht im LIESMICH. */
.case__foot{ margin-top:var(--raum-26); display:flex; flex-wrap:wrap; gap:var(--raum-16) 28px; align-items:center; }
.case__metric{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.04em; color:var(--text-hell-3);
  max-width:56ch; line-height:1.7;
}
/* Erbt die Grundschrift — siehe Hinweis bei .zuschnitt. */
.cases__hinweis{ margin:38px 0 0; max-width:62ch; color:var(--text-hell-2); }

/* Der Knopf zu allen sechs Berichten. Er sitzt unter dem Hinweis und
   nicht rechts daneben: der Hinweis ist auf 62ch begrenzt, rechts davon
   wäre er auf breiten Fenstern weit vom Text entfernt gelandet. */
.cases__alle{ margin:22px 0 0; }

@media (max-width:1023px){
  .case{ --fuge-links:0px; }
}

/* ============================================================
   6b — Referenzen
   Keine Bewertungssterne und keine Testimonial-Kacheln: Die drei
   veröffentlichten Stimmen stehen wie Randnotizen zu den Cases.
   Bild und Absender bleiben fest, das Zitat bekommt die Lesebreite.

   Der einzige weiße Abschnitt der Seite, und zwar mit Absicht: Nach
   Cases und Technikband liegen über 4.800 px Tinte hinter dem Leser.
   Weiß bremst dort härter als Papier, weil es keiner der beiden
   Gründe ist, die er bis hierhin kennt — die Stimmen kommen wie ein
   eingelegtes Blatt und nicht wie der nächste Abschnitt. Danach
   schließt der Abschluss wieder dunkel: hell steht nur für die Dauer
   der Referenzen, nicht als neuer Seitenteil.
   ============================================================ */
.referenzen{
  background:var(--weiss);
  padding-top:clamp(24px,3vw,46px);
  padding-bottom:clamp(64px,8vw,118px);
}
/* Die Linie über dem Kopf ist mit dem Grundwechsel entfallen: Sie hat
   die Referenzen vom Technikband getrennt, solange beide auf Tinte
   standen. Jetzt trennt die Kante selbst, und kein anderer heller
   Abschnitt der Seite setzt eine Linie über seinen Kopf. */
.referenzen__kopf{
  max-width:52rem;
  padding-top:clamp(34px,4vw,58px);
}
.referenzen__kopf .lead{ max-width:44ch; }
.referenzen__liste{ margin-top:clamp(36px,4.8vw,70px); }
.referenz{
  position:relative;
  display:grid;
  grid-template-columns:minmax(220px,.52fr) minmax(0,1fr);
  gap:clamp(28px,5vw,78px);
  align-items:start;
  margin:0;
  padding:clamp(28px,3.6vw,52px) clamp(0px,1.2vw,18px);
  border-top:var(--strich) solid var(--linie);
  isolation:isolate;
}
.referenz:last-child{ border-bottom:var(--strich) solid var(--linie); }
/* Auf weißem Grund trägt der Hellblau-Schleier nicht mehr. Mint ist
   der einzige helle Markenton und legt sich als Tönung über das Blatt,
   ohne dass eine zweite Fläche entsteht. */
.referenz::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,var(--mint),transparent 66%);
  opacity:0;
  transition:opacity var(--zeit-zustand) var(--kurve-zustand);
}
.referenz__person{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:var(--raum-16);
  align-items:center;
}
.referenz__bild{
  width:88px;
  height:88px;
  aspect-ratio:1;
  object-fit:cover;
  object-position:center;
  filter:grayscale(1) contrast(1.03);
  border:var(--strich) solid var(--anthrazit-22);
  transition:filter var(--zeit-zustand) var(--kurve-zustand),
             border-color var(--zeit-zustand) var(--kurve-zustand);
}
.referenz__person-text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.referenz__person-text strong{
  color:var(--text-1);
  font-size:1rem;
  line-height:1.25;
}
.referenz__person-text span{
  color:var(--text-3);
  font-family:var(--mono);
  font-size:var(--grad-mono-3);
  line-height:1.45;
}
.referenz blockquote{
  position:relative;
  margin:0;
  padding-left:clamp(24px,3vw,44px);
}
.referenz blockquote::before{
  content:"„";
  position:absolute;
  left:0;
  top:-.3em;
  color:var(--stahl-30);
  font-family:var(--display);
  font-size:clamp(2.1rem,3.6vw,3.5rem);
  line-height:1;
}
.referenz blockquote p{
  color:var(--text-2);
  font-size:clamp(1.05rem,1.5vw,1.28rem);
  line-height:1.56;
  text-wrap:pretty;
}
.referenz:hover::before{ opacity:1; }
.referenz:hover .referenz__bild{
  filter:grayscale(.2) contrast(1.02);
  border-color:var(--stahl-30);
}

@media (max-width:860px){
  .referenz{
    grid-template-columns:minmax(0,1fr);
    gap:var(--raum-24);
  }
  .referenz__person{ grid-template-columns:72px minmax(0,1fr); }
  .referenz__bild{ width:72px; height:72px; }
  .referenz blockquote{ max-width:46rem; }
}

@media (max-width:719px){
  /* Nicht mehr 0: Die Schiene mit „Referenzen“ steht mobil unmittelbar
     unter dem Technikband. Solange beide dunkel waren, ging das ohne
     Luft. Auf Weiß klebt sie an der Kante. */
  .referenzen{ padding-top:var(--raum-26); }
  .referenzen__kopf{ padding-top:var(--raum-28); }
  .referenz{ padding-block:var(--raum-26); }
  .referenz blockquote{ padding-left:var(--raum-22); }
  .referenz blockquote p{ font-size:1rem; }
}

/* ============================================================
   7 — Ablauf
   ============================================================ */
.ablauf{ margin-top:var(--nach-kopf); border-top:var(--strich) solid var(--linie-stark); }
.ablauf__step{
  display:grid; grid-template-columns:48px minmax(250px,.8fr) minmax(0,1fr); gap:var(--steg);
  padding:var(--reihe-y) 0; border-bottom:var(--strich) solid var(--linie);
  align-items:start;
}
.ablauf__no{
  font-family:var(--mono); font-weight:500; font-size:.9rem; letter-spacing:.06em;
  color:var(--text-3); padding-top:.2em; font-variant-numeric:tabular-nums;
}
.ablauf__when{
  margin-top:var(--raum-10); font-family:var(--mono); font-size:var(--grad-mono-4); letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-3);
}
.ablauf__meta{ min-width:0; }
.ablauf__body p{ font-size:var(--grad-text-4); }

.ergebnis{
  margin-top:var(--raum-16); padding:var(--raum-14) var(--raum-16);
  background:var(--hellblau); border-radius:var(--radius);
  color:var(--tinte);
}
.ergebnis .k{
  font-family:var(--mono); font-size:var(--grad-mono-2); letter-spacing:.15em; text-transform:uppercase;
  color:var(--bordeaux); display:block; margin-bottom:5px;
}
.ergebnis .v{ font-size:var(--grad-text-2); line-height:1.5; font-weight:500; }

/* Die Prozessbilder sind freie technische Zeichenflächen. Sie haben bewusst
   weder Fensterkopf noch Status, Rahmen oder Raster: Der Fließtext erklärt,
   die Grafik zeigt nur die Bewegung und Struktur des jeweiligen Schritts. */
.prozessbild{
  width:100%; max-width:360px; margin:var(--raum-24) 0 0;
  color:var(--stahl);
}
.prozessbild svg{ display:block; width:100%; height:auto; overflow:visible; }
.prozessbild svg text{
  fill:var(--text-3); font-family:var(--mono); font-size:8px;
  font-weight:500; letter-spacing:.09em; text-anchor:middle;
}
.prozessbild svg path,
.prozessbild svg circle,
.prozessbild svg rect{
  vector-effect:non-scaling-stroke;
  stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round;
}
.prozessbild svg path,
.prozessbild svg circle{ fill:none; }

/* 01 — Aufwand-/Nutzen-Verteilung. Nur Achsen, Fälle und Startpunkt sind
   beschriftet; die Richtung der Achsen erklärt den Rest. */
.prozessbild--analyse .pb__achse{ stroke:var(--stahl); }
.prozessbild--analyse .pb__achsenlabel{ font-size:7px; text-anchor:middle; }
.prozessbild--analyse .pb__achsenlabel--x{ text-anchor:end; }
.prozessbild--analyse .pb__fall circle{ fill:var(--papier); }
.prozessbild--analyse .pb__fall--1 circle{ fill:var(--hellblau); stroke:var(--bordeaux); stroke-width:1.6; }
.prozessbild--analyse .pb__fall text{ fill:var(--stahl); font-size:7px; }
.prozessbild--analyse .pb__fall--1 text{ fill:var(--bordeaux); }
.prozessbild--analyse .pb__auswahl{ stroke:var(--bordeaux); }
.prozessbild--analyse .pb__auswahltext{ fill:var(--bordeaux); font-size:7px; text-anchor:start; }

/* 02 — Architekturplan: Dokumente, Menschen, Kern, Datenspeicher und
   Serverlandschaft werden vor dem Bau zu einer Strecke verbunden. */
.prozessbild--planung .pb__planrahmen{ stroke:var(--linie-stark); }
.prozessbild--planung .pb__planlinie{ stroke:var(--bordeaux); }
.prozessbild--planung .pb__planbaustein--1 path{ fill:rgba(255,255,255,.42); }
.prozessbild--planung .pb__planbaustein--2 circle{ fill:var(--mint); }
.prozessbild--planung .pb__planbaustein--3 rect{ fill:var(--hellblau); }
.prozessbild--planung .pb__planbaustein--3 circle{ fill:var(--bordeaux); stroke:var(--bordeaux); }
.prozessbild--planung .pb__planbaustein--4 path{ fill:var(--mint); }
.prozessbild--planung .pb__planbaustein--5 rect{ fill:rgba(255,255,255,.48); }
.prozessbild--planung .pb__planbaustein--5 circle{ fill:var(--bordeaux); stroke:var(--bordeaux); }

/* 03 — Vier Stationen eines Baus: Gespräch, Entwicklung, Infrastruktur und
   Test. Der Bordeaux-Punkt ist das eine Vorhaben, das die Strecke durchläuft. */
.prozessbild--bau .pb__baulinie{ stroke:var(--linie-stark); }
.prozessbild--bau .pb__bauknoten{ fill:var(--papier); stroke:var(--stahl); }
.prozessbild--bau .pb__bauimpuls{ fill:var(--bordeaux); stroke:var(--bordeaux); }
.prozessbild--bau .pb__sprechblase{ fill:var(--mint); }
.prozessbild--bau .pb__baustation--2 rect{ fill:var(--hellblau); }
.prozessbild--bau .pb__baustation--3 rect{ fill:rgba(255,255,255,.5); }
.prozessbild--bau .pb__baustation--3 circle{ fill:var(--bordeaux); stroke:var(--bordeaux); }
.prozessbild--bau .pb__baustation--4 > circle{ fill:var(--mint); }
.prozessbild--bau .pb__bauhaken{ stroke:var(--bordeaux); stroke-width:1.8; }

/* 04 — Eine robuste Maschine statt eines weiteren Status-Dashboards. */
.prozessbild--betrieb .pb__maschinenbett{ stroke:var(--linie-stark); }
.prozessbild--betrieb .pb__zahnkranz{
  fill:rgba(226,238,237,.6); stroke:var(--stahl); stroke-width:7;
  stroke-dasharray:10 5;
}
.prozessbild--betrieb .pb__zahnrad > circle:not(.pb__zahnkranz){ fill:var(--papier); stroke:var(--bordeaux); }
.prozessbild--betrieb .pb__zahnrad path{ stroke:var(--stahl); }

/* 05 — Schulung an einer gemeinsamen Tafel; die drei Doppelwinkel stehen
   ausschließlich für den sichtbaren Kompetenzzuwachs. */
.prozessbild--schulung .pb__tafel{ fill:rgba(206,215,238,.62); }
.prozessbild--schulung .pb__tafelinhalt{ stroke:var(--stahl); }
.prozessbild--schulung .pb__trainer circle,
.prozessbild--schulung .pb__person circle{ fill:var(--mint); }
.prozessbild--schulung .pb__level path{ stroke:var(--bordeaux); stroke-width:1.6; }

/* 06 — Ein bestehendes System bekommt kontrolliert einen neuen Baustein. */
.prozessbild--ausbau .pb__systemlinie,
.prozessbild--ausbau .pb__ausbaulinie{ stroke:var(--stahl); }
.prozessbild--ausbau .pb__systemkern rect{ fill:var(--hellblau); }
.prozessbild--ausbau .pb__systemkern circle{ fill:var(--bordeaux); stroke:var(--bordeaux); }
.prozessbild--ausbau .pb__systemmodul rect{ fill:rgba(255,255,255,.48); }
.prozessbild--ausbau .pb__systemmodul--2 circle{ fill:var(--mint); }
.prozessbild--ausbau .pb__zielslot{ fill:none; stroke:var(--linie-stark); stroke-dasharray:4 4; }
.prozessbild--ausbau .pb__ausbaumodul rect{ fill:var(--mint); stroke:var(--bordeaux); }
.prozessbild--ausbau .pb__ausbaumodul path,
.prozessbild--ausbau .pb__zyklus{ stroke:var(--bordeaux); }

/* Auf breiten Ansichten ist der Raum unter der Zeit-/Vertragszeile eine
   eigene Fläche. Das Bild sitzt in deren Mitte — also zwischen dieser Zeile
   und der Unterkante der Ergebnisbox, nicht in der geometrischen Zeilenmitte. */
@media (min-width:1024px){
  .ablauf__meta{
    display:grid; grid-template-rows:auto auto minmax(0,1fr);
    align-self:stretch;
  }
  .ablauf__meta .prozessbild{ align-self:center; margin-block:0; }
}

@media (max-width:1023px){
  .ablauf__step{ grid-template-columns:38px minmax(0,1fr); }
  .ablauf__body{ grid-column:2; }
}

@media (max-width:719px){
  .ablauf__step{ grid-template-columns:30px minmax(0,1fr); gap:var(--raum-14); }
  .ablauf__body{ grid-column:1 / -1; }
  .prozessbild{ max-width:420px; }
}

/* ---------- Kompakte Roadmap ----------
   JavaScript setzt .ablauf-ist-kompakt erst, wenn alle sechs Register
   verdrahtet sind. Ohne JavaScript bleibt die vollständige lineare Fassung
   sichtbar. Die Roadmap wechselt nur Inhalt. Sie hält weder den Seitenlauf
   fest noch verändert sie den Hintergrund des Abschnitts. */
.ablauf-nav[hidden]{ display:none; }
.ablauf-ist-kompakt .ablauf-nav{
  position:relative;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  margin-top:var(--nach-kopf);
  border-top:var(--strich) solid var(--linie-stark);
  border-bottom:var(--strich) solid var(--linie);
}
.ablauf-ist-kompakt .ablauf-nav::before{
  content:"";
  position:absolute;
  z-index:0;
  top:36px;
  left:8.333%;
  right:8.333%;
  height:var(--strich);
  background:var(--linie-stark);
}
.ablauf-nav__tab{
  position:relative;
  z-index:1;
  min-width:0;
  /* Ein Knopf zentriert seinen Inhalt senkrecht, sobald er höher ist als der
     Inhalt. Beim sechsten Schritt bricht der Name um, die Rasterzeile wird
     dadurch höher, und die Kreise der übrigen fünf rutschten nach unten,
     seiner nach oben. Sie standen dann nicht mehr auf einer Linie. Ein
     ausdrückliches Raster mit Ausrichtung nach oben beendet das. */
  display:grid;
  align-content:start;
  justify-items:center;
  padding:14px 5px 16px;
  border:0;
  background:transparent;
  color:var(--text-3);
  font:inherit;
  text-align:center;
  cursor:pointer;
  appearance:none;
  transition:color var(--zeit-zustand) var(--kurve-zustand),
             box-shadow var(--zeit-zustand) var(--kurve-zustand);
}
.ablauf-nav__icon{
  width:44px;
  height:44px;
  margin:0 auto var(--raum-8);
  display:grid;
  place-items:center;
  color:var(--stahl);
  background:var(--papier);
  border:var(--strich) solid var(--linie-stark);
  border-radius:50%;
  transition:color var(--zeit-zustand) var(--kurve-zustand),
             border-color var(--zeit-zustand) var(--kurve-zustand),
             background-color var(--zeit-zustand) var(--kurve-zustand);
}
.ablauf-nav__icon svg{ width:31px; height:31px; display:block; }
.ablauf-nav__icon svg path,
.ablauf-nav__icon svg circle,
.ablauf-nav__icon svg rect{
  fill:none;
  stroke:currentColor;
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.ablauf-nav__nummer{
  display:block;
  margin-bottom:3px;
  font-family:var(--mono);
  font-size:var(--grad-mono-1);
  letter-spacing:.12em;
}
.ablauf-nav__name{
  display:block;
  overflow-wrap:anywhere;
  color:inherit;
  font-family:var(--mono);
  font-size:var(--grad-mono-2);
  font-weight:500;
  line-height:1.25;
  letter-spacing:.04em;
}
.ablauf-nav__tab:hover{ color:var(--text-1); }
.ablauf-nav__tab:hover .ablauf-nav__icon{ border-color:var(--stahl); }
.ablauf-nav__tab.is-active{
  color:var(--text-1);
  box-shadow:inset 0 -2px 0 var(--bordeaux);
}
.ablauf-nav__tab.is-active .ablauf-nav__icon{
  color:var(--bordeaux);
  background:var(--hellblau);
  border-color:var(--bordeaux);
}
.ablauf-nav__tab:focus-visible{
  outline:var(--strich-stark) solid var(--bordeaux);
  outline-offset:-2px;
}

.ablauf-ist-kompakt .ablauf--kompakt{
  margin-top:0;
  border-top:0;
}
.ablauf-ist-kompakt .ablauf--kompakt .ablauf__step{
  grid-template-columns:minmax(270px,.82fr) minmax(0,1fr);
  gap:clamp(34px,5vw,76px);
  min-height:440px;
  padding:clamp(34px,4.4vw,62px) 0;
}
.ablauf-ist-kompakt .ablauf--kompakt .ablauf__step[hidden]{ display:none; }
.ablauf-ist-kompakt .ablauf--kompakt .ablauf__no{ display:none; }
.ablauf-ist-kompakt .ablauf--kompakt .ablauf__body{
  grid-column:auto;
  align-self:center;
}
.ablauf-ist-kompakt .ablauf--kompakt .prozessbild{ max-width:330px; }

@media (max-width:1023px){
  .ablauf-ist-kompakt .ablauf--kompakt .ablauf__step{
    grid-template-columns:minmax(250px,.78fr) minmax(0,1fr);
    gap:clamp(28px,5vw,54px);
    min-height:470px;
  }
  .ablauf-ist-kompakt .ablauf--kompakt .ablauf__body{ grid-column:auto; }
}

@media (max-width:719px){
  .ablauf-ist-kompakt .ablauf-nav{
    --schritt-spalte:80px;
    grid-template-columns:repeat(6,var(--schritt-spalte));
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  .ablauf-ist-kompakt .ablauf-nav::-webkit-scrollbar{ display:none; }
  /* Zwei Dinge gingen am durchlaufenden Strich schief, sobald der Kasten
     seitlich scrollt: `right` misst vom sichtbaren Rand statt vom Ende des
     Inhalts, der Strich brach also beim vierten Kreis ab. Und `top:36px`
     rechnet mit einer Tabhöhe, die hier nicht stimmt, weil der sechste Name
     zweizeilig wird und die Rasterzeile streckt.

     Deshalb hier ein anderer Weg: Jeder Kreis zieht seinen eigenen Strich zum
     nächsten, auf halber Höhe seiner selbst. Damit sitzt er immer mittig, egal
     wie hoch die Zeile wird, und er endet von selbst beim letzten Kreis. */
  .ablauf-ist-kompakt .ablauf-nav::before{ display:none; }
  .ablauf-nav__icon{ position:relative; }
  .ablauf-nav__tab:not(:last-child) .ablauf-nav__icon::after{
    content:"";
    position:absolute;
    top:50%;
    left:100%;
    width:calc(var(--schritt-spalte) - 44px);
    height:var(--strich);
    background:var(--linie-stark);
  }
  .ablauf-nav__tab{ scroll-snap-align:center; }
  .ablauf-nav__name{ font-size:.62rem; }
  .ablauf-ist-kompakt .ablauf--kompakt .ablauf__step{
    grid-template-columns:minmax(0,1fr);
    gap:var(--raum-24);
    min-height:0;
    padding-block:var(--raum-28);
    align-content:start;
  }
  .ablauf-ist-kompakt .ablauf--kompakt .ablauf__body{ grid-column:1; }
  .ablauf-ist-kompakt .ablauf--kompakt .prozessbild{
    max-width:340px;
    margin-top:var(--raum-18);
  }
}

/* ============================================================
   8 — Der Mensch dahinter
   ============================================================ */
.person{ display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:var(--steg); align-items:center; }
.portrait{ position:relative; }
.portrait__img{ aspect-ratio:808/1000; overflow:hidden; }
.portrait__img img{
  width:100%; height:100%; object-fit:cover; object-position:52% 22%;
  clip-path:url(#d5-bogen);
  filter:grayscale(1) contrast(1.06);
}
.portrait__cap{
  margin-top:var(--raum-14); font-family:var(--mono); font-size:var(--grad-mono-3);
  letter-spacing:.06em; color:var(--text-3);
}
.person__body p{ font-size:1.04rem; max-width:52ch; }
.person__body h2 + p{ margin-top:var(--raum-22); }

.kontakt{
  margin-top:var(--raum-26); padding-top:var(--raum-22); border-top:var(--strich) solid var(--linie-stark);
  display:flex; flex-wrap:wrap; gap:var(--raum-14) var(--raum-30); align-items:center;
}
.kontakt__mail{
  font-family:var(--mono); font-size:.92rem; letter-spacing:.01em;
  color:var(--text-1); text-decoration:none;
  border-bottom:var(--strich) solid var(--bordeaux); padding-bottom:var(--raum-2);
}
.kontakt__mail:hover{ color:var(--bordeaux); }

@media (max-width:1023px){
  .person{ grid-template-columns:minmax(0,1fr); }
  .portrait{ max-width:340px; }
}

/* ============================================================
   9 — Preise und Fragen
   ============================================================ */
.preise{ margin-top:var(--nach-kopf); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--raum-16); }
.preis{
  background:var(--weiss); border:var(--strich) solid var(--linie); border-radius:var(--radius);
  padding:var(--raum-22) var(--raum-22) var(--raum-24); display:flex; flex-direction:column; gap:var(--raum-12);
  transition:border-color var(--zeit-zustand) var(--kurve-zustand);
}
/* Der Rahmen ist der Zustand, den auch die Ruhe-Fassung zeigt;
   das Anheben kommt in bewegung.css dazu. */
.preis:hover{ border-color:var(--linie-stark); }
.preis__k{ font-family:var(--mono); font-size:var(--grad-mono-3); letter-spacing:.15em; text-transform:uppercase; color:var(--text-3); }
.preis__v{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.3rem,2.2vw,1.95rem); line-height:1; letter-spacing:-.025em; color:var(--tinte);
  font-variant-numeric:tabular-nums;
}
.preis__v small{ font-size:.5em; font-weight:700; letter-spacing:0; }
.preis p{ font-size:var(--grad-text-1); color:var(--text-2); }

.fn{ font-size:.4em; color:var(--bordeaux); vertical-align:super; line-height:0; letter-spacing:0; }
.fussnote{
  margin-top:var(--raum-18); font-family:var(--mono); font-size:var(--grad-mono-6); line-height:1.75;
  letter-spacing:.02em; color:var(--text-3); max-width:78ch;
}
.fussnote sup{ color:var(--bordeaux); }

.faq{ margin-top:clamp(44px,5vw,76px); border-top:var(--strich) solid var(--linie-stark); }
.faq details{ border-bottom:var(--strich) solid var(--linie); }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--raum-24);
  padding:var(--raum-20) 0;
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.02rem,1.4vw,1.24rem); letter-spacing:-.012em; color:var(--text-1);
  line-height:1.2;
}
.faq summary:hover{ color:var(--bordeaux); }
.faq summary::-webkit-details-marker{ display:none; }
/* Plus, das sich beim Öffnen zum Minus dreht. 13px ist seine Kantenlänge.
   Wie der Menübalken bleibt die Drehung auch bei Ruhe: sie sagt
   "offen", sie schmückt nicht. Nur die Dauer fällt dort weg. */
.faq__zeichen{ flex:0 0 auto; width:13px; height:13px; position:relative; margin-top:.3em; }
.faq__zeichen::before,.faq__zeichen::after{
  content:""; position:absolute; background:var(--bordeaux);
  left:0; top:var(--raum-6); width:13px; height:var(--strich);
  transition:transform var(--zeit-zustand-weit) var(--kurve-zustand);
}
.faq__zeichen::after{ transform:rotate(90deg); }
details[open] .faq__zeichen::after{ transform:rotate(0deg); }
.faq__a{ padding:0 0 var(--raum-24); max-width:74ch; }
.faq__a p{ font-size:var(--grad-text-4); }

@media (max-width:1023px){
  .preise{ grid-template-columns:minmax(0,1fr); }
}

/* ============================================================
   10 — Abschluss
   ============================================================ */
.abschluss{ padding-block:clamp(72px,8.5vw,132px) 0; }
.abschluss__grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:var(--steg); align-items:end; }
.abschluss h2{ font-size:clamp(1.9rem,4.2vw,3.6rem); line-height:.94; max-width:16ch; }
.abschluss__side p{ color:var(--text-hell-2); font-size:1.02rem; max-width:38ch; }
.abschluss__cta{ margin-top:var(--raum-24); display:flex; flex-wrap:wrap; gap:var(--raum-12); }

@media (max-width:1023px){
  .abschluss__grid{ grid-template-columns:minmax(0,1fr); align-items:start; }
}

/* ============================================================
   Fuß
   ============================================================ */
.fuss{ border-top:var(--strich) solid var(--linie-hell); padding-block:clamp(40px,4.6vw,64px) 34px; }
.fuss__top{ display:grid; grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr)); gap:var(--steg); }
.fuss .wordmark{ color:var(--text-hell-1); height:22px; }
.fuss__addr{
  margin-top:var(--raum-20); font-family:var(--mono); font-size:var(--grad-mono-6); line-height:1.8;
  color:var(--text-hell-3); letter-spacing:.02em;
}
/* h3, nicht h4: Der Fuss folgt auf eine h2, ein Sprung auf h4 wuerde die
   Fussspalten zu Unterpunkten des Handlungsaufrufs machen. */
.fuss__col h3{
  font-family:var(--mono); font-weight:500; font-size:var(--grad-mono-3); letter-spacing:.15em;
  text-transform:uppercase; color:var(--text-hell-3); margin-bottom:var(--raum-14);
}
.fuss__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--raum-9); }
.fuss__col a{ text-decoration:none; font-size:var(--grad-text-1); color:var(--text-hell-2); }
.fuss__col a:hover{ color:var(--hellblau); }
.fuss__bottom{
  margin-top:clamp(36px,4vw,56px); padding-top:var(--raum-20); border-top:var(--strich) solid var(--linie-hell);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--raum-12) var(--raum-24);
  font-family:var(--mono); font-size:var(--grad-mono-3); letter-spacing:.06em; color:var(--text-hell-3);
}
.fuss__bottom nav{ display:flex; flex-wrap:wrap; gap:var(--raum-20); }
.fuss__bottom a{ text-decoration:none; }
.fuss__bottom a:hover{ color:var(--hellblau); }

@media (max-width:1023px){
  .fuss__top{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px var(--steg); }
}

@media (max-width:719px){
  .fuss__top{ grid-template-columns:minmax(0,1fr); gap:var(--raum-30); }
  .fuss__bottom{ flex-direction:column; }
}

/* ============================================================
   6c — Ein Case, ein Bildschirm
   Der Browser rastet beim Scrollen auf jedem Case ein. Kein Skript,
   kein Scrollverbrauch: `proximity` rastet nur in der Nähe eines
   Cases, überall sonst scrollt die Seite unverändert.
   `scroll-snap-stop:always` sorgt dafür, dass eine Wischbewegung
   keinen Case überspringen kann — das ist das kurze Halten.

   `proximity` statt `mandatory` mit Absicht: Wer die Schrift
   hochstellt oder ein Case übersetzt, soll nicht festsitzen.
   `align:start` statt `center` aus demselben Grund — läuft ein Case
   über, wächst er nach unten und bleibt normal scrollbar.

   Die drei Zeilen, die das Rasten auslösen, stehen in bewegung.css —
   das Rasten legt einen Weg zurück und entfällt deshalb bei Ruhe.
   Hier steht nur die Höhe und die Anordnung.
   ============================================================ */

/* Ganze Bildschirmhöhe nur dort, wo ein Case auch hineinpasst.
   Ab 1024 px Breite stellt der Case mit Artefakt es neben den Wandel
   statt darunter; das ist die einzige Anordnung, in der er auf einen
   Schirm passt — untereinander 1.040 px, nebeneinander 624 px.
   Die Schwelle bei 760 px Höhe ist gerechnet: Darunter reicht der
   Platz für Case 2 nicht, und ein Rastpunkt, dessen Ziel nicht ins
   Bild passt, ist schlechter als gar keiner. Unterhalb der Schwelle
   und auf dem Telefon bleiben die Cases so hoch wie ihr Inhalt —
   gerastet wird trotzdem, nur eben auf den Anfang. */
@media (min-width:1024px) and (min-height:760px){
  /* Polster auf null: Die Luft kommt aus der Zentrierung im
     Bildschirm, nicht mehr aus einem festen Abstand. Das sind die
     161 px, die Case 2 gefehlt haben. */
  .case,
  .case:first-of-type,
  .case:last-of-type{
    min-height:calc(100svh - var(--sprung-abstand));
    padding-block:0;
    display:grid; align-content:center;
  }

  .case:has(.beleg){
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    column-gap:var(--steg);
    grid-template-areas:
      "kopf  kopf"
      "wandel beleg"
      "fuss  fuss";
  }
  .case:has(.beleg) .case__head{ grid-area:kopf; }
  .case:has(.beleg) .wandel{ grid-area:wandel; }
  .case:has(.beleg) .beleg{ grid-area:beleg; align-self:center; }
  .case:has(.beleg) .case__foot{ grid-area:fuss; }

  /* Neben dem Text steht der Wandel gestapelt statt nebeneinander:
     Zwei Spalten in einer halben Spalte ergäben 200 px je Seite, und
     „Dieselbe Stunde pflegen wir dreimal.“ bräche dort dreimal um.
     Gestapelt bekommt das Zitat die volle Spaltenbreite. Die Regeln
     stehen hier ein zweites Mal, weil der mobile Zweig in einer
     anderen Medienabfrage liegt und beide sich kein Regelwerk teilen
     können. */
  .case:has(.beleg) .wandel{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:none;
    row-gap:var(--raum-16);
  }
  .case:has(.beleg) .wandel__seite{ display:block; grid-row:auto; grid-template-rows:none; }
  .case:has(.beleg) .wandel__satz,
  .case:has(.beleg) .wandel__lage{ margin-top:var(--raum-12); max-width:none; }
  .case:has(.beleg) .wandel__loesung{
    grid-column:auto; grid-row:auto; margin-top:var(--raum-20);
  }
  .case:has(.beleg) .wandel__pfeil{
    grid-column:auto; grid-row:auto; align-self:auto;
    width:var(--strich); height:var(--raum-20); justify-self:start;
    margin-left:3px;
  }
  .case:has(.beleg) .wandel__pfeil::after{
    right:auto; left:50%; top:auto; bottom:0;
    transform:translateX(-50%) rotate(135deg);
  }

  /* Der Zuschnitt darf in der schmalen Spalte nur noch in der Höhe
     schneiden, nie in der Breite: Bei 429 px Spaltenbreite liegt die
     Grenze bei 429 / 1,754 = 244 px. Darüber würde `cover` seitlich
     beschneiden und dem Dashboard die Randspalten abschneiden. */
  .case:has(.beleg) .beleg--zuschnitt .beleg__bild{ height:clamp(180px,17vw,244px); }
}

/* Die drei Case-Belege auf der Startseite stehen untereinander, je einer pro
   Bildschirm. Sie waren 331, 244 und 331 Pixel hoch, weil der Screenshot als
   Artefakt eine andere Regel traf. Beim Durchscrollen sprang das Bild dadurch
   in der Größe, und das liest sich als Unruhe, nicht als Unterschied. */
.case .beleg__bild{ height:clamp(190px,22vw,330px); }

/* ============================================================
   Navigation mit Untereinträgen
   Wer im Menü auf „Leistungen" zeigt, will nicht erst eine
   Übersichtsseite laden, um zu sehen, welche drei es gibt. Die
   Klappe zeigt sie sofort, mit einer Zusatzzeile, die die Frage
   beantwortet, die als Nächstes kommt: was es kostet, wessen
   Fall es ist, worum es geht.

   Gebaut mit :hover und :focus-within, ohne Skript: Die Klappe
   ist Markup, sie steht also auch dann im Dokument, wenn niemand
   sie öffnet, und sie ist mit der Tastatur erreichbar, ohne dass
   jemand eine Taste dafür erfinden musste.
   ============================================================ */
.nav__gruppe{ position:relative; display:flex; align-items:center; }
.nav__klappe{
  position:absolute; top:100%; left:calc(-1 * var(--raum-18));
  z-index:60; min-width:302px;
  margin-top:var(--raum-10);
  padding:var(--raum-14) var(--raum-18) var(--raum-16);
  background:var(--weiss);
  border:var(--strich) solid var(--linie-stark);
  border-radius:var(--radius);
  box-shadow:0 18px 44px -22px rgba(26,28,34,.44);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--zeit-zustand) var(--kurve-zustand),
             transform var(--zeit-zustand) var(--kurve-zustand),
             visibility 0s linear var(--zeit-zustand);
}
/* Die Brücke: ohne sie reißt die Klappe ab, sobald die Maus den Spalt zwischen
   Reiter und Panel überquert, und niemand trifft einen Eintrag. */
.nav__klappe::before{
  content:""; position:absolute; left:0; right:0; top:calc(-1 * var(--raum-10) - 2px);
  height:calc(var(--raum-10) + 4px);
}
.nav__gruppe:hover .nav__klappe,
.nav__gruppe:focus-within .nav__klappe{
  opacity:1; visibility:visible; transform:translateY(0);
  transition-delay:0s, 0s, 0s;
}
.nav__klappe ul{ list-style:none; margin:0; padding:0; }
.nav__klappe li + li{ border-top:var(--strich) solid var(--linie); }
.nav__klappe li a{
  display:block; padding:var(--raum-10) 0; text-decoration:none;
}
.nav__klappe li a::after{ display:none; }
.nav__klappe li a span{
  display:block; font-size:.92rem; font-weight:600; line-height:1.35;
  color:var(--text-1);
}
.nav__klappe li a i{
  display:block; margin-top:2px; font-style:normal;
  font-family:var(--mono); font-size:var(--grad-mono-3); font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-3);
}
.nav__klappe li a:hover span{ color:var(--bordeaux); }
.nav__mehr{
  display:inline-flex; align-items:center; gap:var(--raum-8);
  margin-top:var(--raum-12); padding-top:var(--raum-12);
  border-top:var(--strich) solid var(--linie-stark);
  width:100%;
  font-family:var(--mono); font-size:var(--grad-mono-4); font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-3);
  text-decoration:none;
}
.nav__mehr::after{ display:none; }
.nav__mehr:hover{ color:var(--bordeaux); }

/* Die letzte Klappe darf nicht aus dem Fenster laufen. */
.nav__gruppe:last-child .nav__klappe{ left:auto; right:calc(-1 * var(--raum-18)); }

/* Im Mobilmenü sind die Untereinträge immer sichtbar. Ein Panel, das man
   aufziehen muss, um ein zweites aufzuziehen, ist auf dem Telefon eine
   Zumutung. */
.menu__unter{ list-style:none; margin:0 0 var(--raum-10); padding:0 0 0 var(--raum-16); }
.menu__unter li a{
  display:block; padding:var(--raum-8) 0;
  border-bottom:0;
  font-family:var(--body); font-size:.94rem; font-weight:500;
  text-transform:none; letter-spacing:0; color:var(--text-2);
}
.menu__unter li a::before{
  content:"— "; color:var(--text-3);
}

/* ============================================================
   Scharniere in beide Richtungen
   Die Startseite hatte genau einen weichen Übergang, das
   Scharnier vor den Cases, und vier harte Kanten: hell auf
   dunkel, dunkel auf hellblau, dunkel auf weiß, weiß auf dunkel.
   An einer Kante sieht man, dass zwei Bausteine
   aneinandergesetzt wurden. An einem Scharnier sieht man, dass
   die Seite weitergeht.

   Zwei Varianten, weil ein Verlauf eine Richtung hat: `--auf`
   geht ins Dunkle, `--ab` kommt heraus. Das Bild ist in beiden
   dasselbe Bauteil, nur der Verlauf dreht sich um.
   ============================================================ */
.hinge--ab .hinge__fade{
  background:linear-gradient(180deg,
    var(--tinte) 0%,
    var(--tinte-58) 30%,
    var(--tinte-10) 66%,
    var(--papier-34) 91%,
    var(--papier) 100%);
}
/* Aus dem Dunklen ins Weiße, nicht ins Papier: Der Referenzenblock ist der
   einzige weiße Abschnitt der Seite, und ein Verlauf, der auf Papier endet,
   setzt dort eine sichtbare Kante. */
.hinge--weiss .hinge__fade{
  background:linear-gradient(180deg,
    var(--tinte) 0%,
    var(--tinte-58) 30%,
    var(--tinte-10) 66%,
    rgba(255,255,255,.5) 88%,
    var(--weiss) 100%);
}
.hinge--von-weiss .hinge__fade{
  background:linear-gradient(180deg,
    var(--weiss) 0%,
    rgba(255,255,255,.5) 10%,
    var(--tinte-10) 36%,
    var(--tinte-58) 72%,
    var(--tinte) 100%);
}
/* Flacher als das große Scharnier vor den Cases: Dort ist der Übergang selbst
   ein Moment, hier soll er nur die Kante nehmen. */
.hinge--schmal{ height:clamp(120px,15vw,210px); }
/* Der Trust-Streifen ist hellblau, nicht Papier. Ein Verlauf, der auf Papier
   endet, setzt darüber eine sichtbare Kante von drei Prozent Helligkeit, und
   genau die soll er wegnehmen. */
.hinge--hellblau .hinge__fade{
  background:linear-gradient(180deg,
    var(--tinte) 0%,
    var(--tinte-58) 30%,
    var(--tinte-10) 68%,
    rgba(206,215,238,.5) 90%,
    var(--hellblau) 100%);
}

/* Ein Scharnier ohne Bild ist nur der Verlauf. Ohne den dunklen Grund darunter
   liefe er gegen Schwarz statt gegen Papier. */
.hinge--leer{ background:transparent; }


/* Unter der letzten Zeile des Ausgangslage-Abschnitts standen 97 px leere
   dunkle Fläche, bevor der Trust-Streifen anfängt. Auf einem dunklen Grund
   liest sich das nicht als Luft, sondern als Loch: Es ist der einzige Ort auf
   der Seite, an dem eine Farbfläche endet, ohne dass dort etwas steht. */
.lage{ padding-bottom:clamp(46px,5vw,72px); }

/* ============================================================
   Prozessbilder der Unterseiten
   Dieselbe Zeichensprache wie die sechs Bilder im Ablauf: Raster
   320 zu 178, Strich 1,2, Schreibmaschinenschrift bei 8 px, ein
   farbiger Akzent je Bild.

   Sie stehen hier und nicht in unterseiten.css, weil sie die
   Grundregeln von `.prozessbild` erben und beides zusammengehört.
   Zwei Zeichensprachen auf einer Website sind eine zu viel: Die
   erste Fassung dieser Bilder hatte ein eigenes Raster und eigene
   Kastenformen, und man sah beim Wechsel von der Startseite auf
   eine Unterseite, dass zwei Leute gezeichnet haben.
   ============================================================ */
/* Die Breite ist nicht Geschmack, sie ist die Schriftgröße. Das Bild ist
   320 Einheiten breit und setzt seine Beschriftung auf 8 davon. Bei 520 px
   Darstellungsbreite sind das 13 px, also so groß wie die Kleinschrift der
   Seite. Läuft das Bild auf volle Spaltenbreite, wird die Beschriftung 24 px
   groß und schlägt jede Überschrift daneben. Genau das ist beim ersten Einbau
   passiert. */
.prozessbild--kette,
.prozessbild--trichter,
.prozessbild--kurve,
.prozessbild--raster,
.prozessbild--gegenueber{
  max-width:min(100%, 520px); width:100%;
  margin-block:clamp(30px,3.6vw,52px);
}
/* Die Kette ist die breiteste Form: vier Stationen nebeneinander brauchen mehr,
   sonst bricht jedes Wort. */
.prozessbild--kette{ max-width:min(100%, 580px); }
.prozessbild .pb__grund{ stroke:var(--linie); }
.prozessbild .pb__stufe,
.prozessbild .pb__quelle,
.prozessbild .pb__fest,
.prozessbild .pb__lose{ fill:var(--weiss); stroke:var(--linie-stark); }
.prozessbild .pb__stufe--kern,
.prozessbild .pb__fest{ fill:var(--vanille); stroke:var(--bordeaux); }
.prozessbild .pb__lose{ fill:none; stroke-dasharray:5 4; stroke:var(--anthrazit-32); }
.prozessbild .pb__weg{ stroke:var(--anthrazit-32); }
.prozessbild .pb__wort{ fill:var(--text-1); }
.prozessbild .pb__wort--kern{ fill:var(--bordeaux); }
.prozessbild .pb__klein{ font-size:6.6px; fill:var(--text-3); letter-spacing:.05em; }
/* Die Marke oben links benennt die Art der Darstellung. Sie ersetzt die
   Bildunterschrift, die früher unter jeder Skizze stand und dieselbe Sache
   ein zweites Mal gesagt hat. */
.prozessbild .pb__marke{
  font-size:7px; fill:var(--text-3); letter-spacing:.16em; text-anchor:start;
}
.prozessbild .pb__band{ fill:var(--vanille); stroke:none; opacity:.6; }
.prozessbild .pb__achse{ stroke:var(--stahl); }
.prozessbild .pb__linie{ stroke:var(--anthrazit); stroke-width:1.6; }
.prozessbild .pb__punkt{ fill:var(--anthrazit); stroke:none; }
.prozessbild .pb__punkt--alarm{ fill:var(--bordeaux); stroke:none; }
.prozessbild .pb__zelle{ fill:none; stroke:var(--anthrazit-32); }
.prozessbild .pb__zelle--treffer{ fill:var(--bordeaux); stroke:none; opacity:.85; }
.prozessbild .pb__marker{ fill:var(--anthrazit-32); stroke:none; }
.prozessbild .pb__marker--kern{ fill:var(--bordeaux); stroke:none; }

/* Auf dunklem Grund dreht sich die Palette, die Zeichnung bleibt dieselbe. */
.sec--dark .prozessbild,
.zwischenband .prozessbild{ color:var(--hellblau-72); }
.sec--dark .prozessbild .pb__stufe,
.sec--dark .prozessbild .pb__quelle{ fill:rgba(21,23,28,.5); stroke:var(--hellblau-34); }
.sec--dark .prozessbild .pb__wort{ fill:var(--text-hell-1); }
.sec--dark .prozessbild .pb__klein,
.sec--dark .prozessbild .pb__marke{ fill:var(--text-hell-3); }
/* Ausrichtung als Klasse, nicht als Attribut: `.prozessbild svg text` setzt
   text-anchor:middle, und eine CSS-Eigenschaft schlägt jedes
   Präsentationsattribut im Markup. */
.prozessbild .pb__links{ text-anchor:start; }
.prozessbild .pb__rechts{ text-anchor:end; }

/* ============================================================
   Zeichnungen der Unterseiten
   Dasselbe Vokabular wie die sechs Prozessbilder im Ablauf, nur
   als benannte Klassen, damit nicht jede Zeichnung ihre eigene
   Palette mitbringt.

   Die Regel, die alles trägt: Eine Zeichnung zeigt Gegenstände,
   keine Kästen. Ein Dokument sieht aus wie ein Dokument, ein
   Mensch wie ein Mensch, ein Zahnrad wie ein Zahnrad. Vier
   Rechtecke mit Pfeilen dazwischen sind ein Ablaufdiagramm und
   keine Zeichnung, und sie erklären nichts, was die Überschrift
   nicht schon gesagt hat.

   Zweite Regel: so wenig Schrift wie möglich. Auf den sechs
   Vorlagen der Startseite stehen zusammen fünf Wörter. Wo eine
   Beschriftung nötig ist, gehört sie an den Gegenstand und nicht
   in eine Zeile darunter, in der vier Beschriftungen
   nebeneinander stehen und keine mehr zuzuordnen ist.
   ============================================================ */
.zeichnung{
  width:100%; max-width:520px; margin-block:clamp(30px,3.6vw,54px);
  color:var(--stahl);
}
.zeichnung svg{ display:block; width:100%; height:auto; overflow:visible; }
.zeichnung svg path,
.zeichnung svg circle,
.zeichnung svg rect,
.zeichnung svg ellipse,
.zeichnung svg polyline{
  vector-effect:non-scaling-stroke;
  fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}
/* Die Klassen wirken auch auf einer <g>-Gruppe. Ohne die Kindselektoren
   gewinnt `.zeichnung svg circle` gegen `.zeichnung .zg__akzent`, weil die
   Regel das Element direkt trifft und die Klasse nur den Vater. Ein als Akzent
   ausgezeichneter Mensch wäre dann grau wie alles andere. */
.zeichnung .zg__flaeche,
.zeichnung .zg__flaeche path,
.zeichnung .zg__flaeche rect,
.zeichnung .zg__flaeche circle,
.zeichnung .zg__flaeche ellipse{ fill:var(--hellblau-34); stroke:var(--stahl); }
.zeichnung .zg__blatt,
.zeichnung .zg__blatt path,
.zeichnung .zg__blatt rect,
.zeichnung .zg__blatt circle,
.zeichnung .zg__blatt ellipse{ fill:var(--weiss); stroke:var(--stahl); }
/* Innenzeichnung eines Blattes bleibt strichig, sonst füllt sich jede Zeile. */
.zeichnung .zg__blatt .zg__strich,
.zeichnung .zg__flaeche .zg__strich{ fill:none; stroke:var(--anthrazit-32); }
/* Der eine farbige Gegenstand je Bild. Mehr als einer, und keiner sticht heraus. */
.zeichnung .zg__akzent,
.zeichnung .zg__akzent path,
.zeichnung .zg__akzent rect,
.zeichnung .zg__akzent circle,
.zeichnung .zg__akzent ellipse{ stroke:var(--bordeaux); }
.zeichnung .zg__akzentflaeche,
.zeichnung .zg__akzentflaeche path,
.zeichnung .zg__akzentflaeche rect,
.zeichnung .zg__akzentflaeche circle{ fill:var(--vanille); stroke:var(--bordeaux); }
.zeichnung .zg__punkt{ fill:var(--bordeaux); stroke:none; }
.zeichnung .zg__punkt-hell{ fill:var(--weiss); stroke:var(--stahl); stroke-width:1.4; }
/* Verbindungen: durchgezogen, wenn etwas fließt, gestrichelt, wenn etwas fehlt
   oder unterbrochen ist. */
.zeichnung .zg__linie{ stroke:var(--anthrazit-32); }
.zeichnung .zg__lose{ stroke:var(--anthrazit-32); stroke-dasharray:5 4; }
.zeichnung .zg__achse{ stroke:var(--linie-stark); }
/* Schrift ist die Ausnahme. Achsenbeschriftung, ein Zahlenwert, ein einzelnes
   Wort am Gegenstand. Keine Zeile mit vier Wörtern nebeneinander. */
.zeichnung svg text{
  fill:var(--text-3); font-family:var(--mono); font-size:7.5px;
  font-weight:500; letter-spacing:.09em; stroke:none;
  text-anchor:middle;
}
.zeichnung svg .zg__wert{ fill:var(--text-1); font-size:9px; letter-spacing:.02em; }
.zeichnung svg .zg__akzenttext{ fill:var(--bordeaux); }
.zeichnung svg .zg__links{ text-anchor:start; }
.zeichnung svg .zg__rechts{ text-anchor:end; }
.zeichnung figcaption{
  margin-top:var(--raum-14);
  font-family:var(--mono); font-size:var(--grad-mono-4); font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-3);
  max-width:52ch;
}

/* Auf dunklem Grund dreht sich die Palette, die Zeichnung bleibt dieselbe.
   Genau so machen es die sechs Betriebsbilder im Ausgangslage-Abschnitt. */
.sec--dark .zeichnung,
.zwischenband .zeichnung,
.dunkelteil .zeichnung,
.buehne--dunkel .zeichnung{ color:var(--hellblau-72); }
.sec--dark .zeichnung .zg__flaeche,
.sec--dark .zeichnung .zg__flaeche *,
.dunkelteil .zeichnung .zg__flaeche,
.dunkelteil .zeichnung .zg__flaeche *{ fill:rgba(206,215,238,.12); stroke:var(--hellblau); }
.sec--dark .zeichnung .zg__blatt,
.sec--dark .zeichnung .zg__blatt *,
.dunkelteil .zeichnung .zg__blatt,
.dunkelteil .zeichnung .zg__blatt *{ fill:rgba(21,23,28,.6); stroke:var(--hellblau-34); }
.sec--dark .zeichnung .zg__blatt .zg__strich,
.sec--dark .zeichnung .zg__flaeche .zg__strich,
.dunkelteil .zeichnung .zg__blatt .zg__strich,
.dunkelteil .zeichnung .zg__flaeche .zg__strich{ fill:none; stroke:var(--text-hell-4); }
.sec--dark .zeichnung .zg__linie,
.sec--dark .zeichnung .zg__lose,
.sec--dark .zeichnung .zg__achse,
.dunkelteil .zeichnung .zg__linie,
.dunkelteil .zeichnung .zg__lose,
.dunkelteil .zeichnung .zg__achse{ stroke:var(--text-hell-4); }
.sec--dark .zeichnung svg text,
.dunkelteil .zeichnung svg text{ fill:var(--text-hell-3); }
.sec--dark .zeichnung svg .zg__wert,
.dunkelteil .zeichnung svg .zg__wert{ fill:var(--text-hell-1); }
/* Die Akzentfläche bleibt auch auf dunklem Grund hell, weil sie das eine
   Hervorgehobene der Zeichnung ist. Eine Zahl darauf muss deshalb dunkel
   bleiben, sonst steht sie hell auf hell und verschwindet. */
.sec--dark .zeichnung svg .zg__akzenttext,
.dunkelteil .zeichnung svg .zg__akzenttext{ fill:var(--bordeaux); }
.sec--dark .zeichnung figcaption,
.dunkelteil .zeichnung figcaption{ color:var(--text-hell-3); }
/* Der zweite Weg unter den Knöpfen. Buchen ist der Regelfall, aber wer keinen
   Kalender aufmachen will, soll nicht erst auf eine andere Seite müssen. */
.schluss__alt{
  margin-top:var(--raum-18);
  font-size:var(--grad-text-2); line-height:1.55; color:var(--text-hell-3);
}
.schluss__alt a{ color:var(--text-hell-1); }