/* =====================================================================
   EDELMUT · UNTERNEHMENSBERATUNG
   Art Direction: "Stationen auf einer Linie, Signale dazwischen."

   EIN SYSTEM, VIER ZOOMSTUFEN
     Kopf-Schiene   das System in Ruhe
     Befund         viele Ursachen laufen auf ein sichtbares Symptom zu
     Vorgehen       dasselbe Feld wird kleiner: viel -> wenig -> eins
     Beratungsfelder die Stationen wirken aufeinander

   ZWEI FLAECHEN
     dunkel = das Instrument (Diagnose, Netz)
     hell   = das Argument   (Vorgehen, Montagmorgen, Foerderung)

   BLAU hat genau zwei Aufgaben: "hier sitzt die Ursache" und
   "das ist der naechste Schritt". Sonst nie.

   SERIFE (Newsreader kursiv) spricht die Ueberzeugung - vier Stellen,
   nicht mehr: Kopfnachsatz, These, Montagmorgen, Schlusssatz.

   BEWEGUNG erklaert Zustand. Keine Dauerschleife, kein Schweben ohne
   Grund. Alles laeuft einmal. prefers-reduced-motion schaltet ab.
   ===================================================================== */

@font-face{font-family:'General Sans';font-weight:200 700;font-style:normal;font-display:swap;
  src:url("https://cdn.prod.website-files.com/670d00610124a54e8b89560a/670d00610124a54e8b895619_GeneralSans-Variable.woff2") format("woff2")}
:root{
  /* Flaechen */
  --tinte:#0B0C0E;      --tief:#090908;      --platte-a:#1A1A19;   --platte-b:#111110;
  --papier:#FFFFFF;     --flaeche:#F4F6F9;
  /* Linien */
  --linie-d:rgba(255,255,255,.10);  --linie-d2:rgba(255,255,255,.16);
  --linie:#E4E8ED;                  --linie2:#D3D9E1;
  /* Schrift */
  --auf-dunkel:#FFFFFF; --nebel:rgba(255,255,255,.64); --still:rgba(255,255,255,.50);
  --leise:#54595F;      --sehr-leise:#686E76;
  /* Signal */
  --signal:#2E7CF6;     --akzent-text:#6BA5FF;
  --aktion:#1B62D6;     --aktion-hover:#154FAE;
  /* System */
  --sans:'General Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --serif:'General Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --aus:cubic-bezier(.16,1,.3,1);
  --lang:760ms; --mittel:520ms; --kurz:220ms;
  /* Bedienung ist nicht Erzaehlung. Was auf einen Klick oder ein Hover
     antwortet, gehoert unter 300 ms - darueber fuehlt es sich traege an,
     egal wie schoen die Kurve ist. --mittel (520 ms) war hier ueberall
     im Einsatz und hat den Tabwechsel auf ~950 ms aufgeblaeht. */
  --ui:180ms; --ui-lang:240ms;
  --aus-ui:cubic-bezier(.23,1,.32,1);
  --rand:clamp(20px,4.6vw,72px);
}

*{margin:0;padding:0;box-sizing:border-box}
/* Webflow setzt h1-h6{margin-bottom:24px}, p{margin-bottom:32px} und
   body{font-weight:500} als ELEMENTselektoren. Dagegen verliert *{margin:0}
   auf Spezifitaet - beim letzten Import kostete genau das 670 px = 10,6 %
   Hoehe. Zwei Riegel, beide bewusst so SCHWACH wie moeglich:

   (0,0,1) gleiche Spezifitaet wie Webflows Regel, aber spaeter im Blatt -
           faengt die Elemente ohne eigene Klasse (.dg-st h3, .dg-sz p ...).
   (0,1,0) faengt alles, was selbst eine dg-Klasse traegt, unabhaengig von
           der Ladereihenfolge.
   Staerker duerfen sie nicht sein: ein (0,2,1)-Riegel hat hier die eigenen
   Regeln .dg-st h3 und .dg-nav-mitte a ueberfahren und die Seite um 132 px
   zusammenschnurren lassen. Gemessen, nicht vermutet. */
h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,figcaption,blockquote{margin:0;padding:0}
[class*="dg-"]{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-weight:400;font-size:16px;background:var(--papier);color:var(--tinte);
  font-feature-settings:"kern","liga","clig";-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:600;letter-spacing:-.022em;text-wrap:balance;color:inherit}/* inherit statt einer festen Tinte: Webflow setzt h1-h6 auf #000, das ist auf den
   dunklen Akten unsichtbar (gemessen: Kontrast 1,0 auf vier Ueberschriften).
   Eine feste helle Tinte waere derselbe Fehler mit anderem Vorzeichen - die
   Ueberschrift muss der Farbe ihres Abschnitts folgen. */
i,em{font-style:italic}
.dg-tab-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}

.dg-h{max-width:1340px;margin:0 auto;padding:0 var(--rand)}
/* Zeilenumbrueche sind gesetzt, nicht zufaellig - aber nur dort, wo Platz ist. */
.dg-gross{display:none}
@media (min-width:721px){.dg-gross{display:inline}}
.dg-skip{position:absolute;left:-9999px;top:0;z-index:99;background:#fff;color:#000;padding:12px 18px}
.dg-skip:focus{left:12px;top:12px}

/* ── Typografische Grundakkorde ───────────────────────────────────── */
h1{font-size:clamp(2.45rem,1.1rem + 4.1vw,4.05rem);line-height:1.04;letter-spacing:-.032em}
h2{font-size:clamp(1.85rem,1.05rem + 2.7vw,3.05rem);line-height:1.1}
h3{font-size:1.0625rem;line-height:1.3;letter-spacing:-.014em}

.dg-eyebrow{font-size:.75rem;letter-spacing:.19em;text-transform:uppercase;font-weight:500;
  line-height:1.5;color:var(--still);display:flex;align-items:flex-start;gap:0}

.dg-eyebrow.dg-dunkel{color:var(--sehr-leise)}

.dg-unter{font-size:clamp(1rem,.97rem + .18vw,1.0625rem);line-height:1.62;color:var(--leise);max-width:56ch}
.dg-befund .dg-unter,.dg-felder .dg-unter{color:var(--nebel)}

/* ── Bedienelemente ───────────────────────────────────────────────── */
.dg-knopf{display:inline-flex;align-items:center;gap:.55em;background:var(--aktion);color:#fff;
  font-weight:600;font-size:.9rem;padding:15px 26px;border-radius:100px;
  transition:background-color var(--kurz) var(--aus),transform var(--kurz) var(--aus)}
.dg-knopf::after{content:"\2192";transition:transform var(--ui) var(--aus-ui)}
.dg-nav-cta::after{content:none}
.dg-knopf.dg-klein{padding:10px 18px;font-size:.90625rem}
/* Der Knopf der Startseite: Pille, weiss auf Dunkel, dunkler Text. */
.dg-nav-cta{background:#fff;color:var(--tinte);border-radius:100px;padding:12px 21px;
  font-size:.9rem;font-weight:600;box-shadow:none}
.dg-nav-cta::after{content:none}
@media (hover:hover){.dg-nav-cta:hover{background:rgba(255,255,255,.86);color:var(--tinte)}}
.dg-still-link{font-size:.96875rem;font-weight:500;color:var(--nebel);padding:15px 2px;
  border-bottom:1px solid var(--linie-d2);transition:color var(--kurz),border-color var(--kurz)}
.dg-foerder .dg-still-link{color:var(--leise);border-bottom-color:var(--linie2)}
@media (hover:hover) and (pointer:fine){
  .dg-knopf:hover{background:var(--aktion-hover)}
  .dg-knopf:hover::after{transform:translateX(4px)}
  .dg-still-link:hover{color:#fff;border-bottom-color:#fff}
  .dg-foerder .dg-still-link:hover{color:var(--tinte);border-bottom-color:var(--tinte)}
}
.dg-knopf:active{transform:scale(.98)}
.dg-aktion{display:flex;flex-wrap:wrap;align-items:center;gap:12px 30px}

/* ── Auftritt: einmal, gestaffelt ─────────────────────────────────── */
.dg-auf{opacity:0;transform:translateY(14px);
  transition:opacity var(--lang) var(--aus),transform var(--lang) var(--aus)}
.dg-laeuft .dg-auf{opacity:1;transform:none}
.dg-laeuft .dg-a2{transition-delay:.10s}
.dg-laeuft .dg-a4{transition-delay:.34s}
.dg-laeuft .dg-a5{transition-delay:.46s}
.dg-laeuft .dg-a6{transition-delay:.56s}
.dg-laeuft .dg-a7{transition-delay:.70s}
.dg-rv{opacity:0;transform:translateY(18px);
  transition:opacity var(--lang) var(--aus),transform var(--lang) var(--aus)}
.dg-rv.dg-da{opacity:1;transform:none}

/* ═══════════════════════════ AKT I · DUNKEL ═══════════════════════ */
.dg-akt1{background:var(--tinte);color:var(--auf-dunkel);position:relative;isolation:isolate;
  overflow:hidden}
/* Zwei Lichtquellen statt einer flachen Flaeche: ein fester Schein oben
   links (die Seite hat eine Lichtrichtung, dieselbe wie die Objekte) und
   ein sehr langsames Licht, das dem Zeiger folgt. Nur Transform, nur auf
   Geraeten mit echtem Zeiger. Das ist der Unterschied zwischen "schwarz
   angestrichen" und "dunkle Flaeche mit Licht darauf". */
.dg-akt1::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,#101010 0%,#0C0C0B 38%,#0A0A09 100%)}
.dg-akt1 > *{position:relative;z-index:1}

/* ── Navigation ───────────────────────────────────────────────────── */
.dg-nav{position:fixed;top:0;left:0;right:0;z-index:80;padding:20px var(--rand);
  transition:padding .35s var(--aus)}
.dg-nav-in{display:flex;align-items:center;gap:24px;max-width:1340px;margin:0 auto;
  padding:11px 12px 11px 22px;border-radius:100px;
  background:transparent;box-shadow:none;
  transition:background .4s var(--aus),box-shadow .4s var(--aus)}
.dg-nav.dg-scr{padding-top:12px;padding-bottom:12px}
.dg-nav.dg-scr .dg-nav-in{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.07)}
.dg-nav.dg-hell.dg-scr .dg-nav-in{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.82));
  box-shadow:inset 0 0 0 1px rgba(11,12,14,.07),0 10px 30px -18px rgba(11,12,14,.35)}

/* Die Marke ist ein Lockup-Bild in zwei Fassungen - hell auf Dunkel,
   dunkel auf Hell. Genau die zwei Dateien der Startseite. */
.dg-marke{display:flex;align-items:center;margin-right:auto;line-height:0}
.dg-lockup{height:36px;width:auto}
.dg-lockup-dunkel{display:none}
.dg-nav.dg-hell .dg-lockup-hell{display:none}
.dg-nav.dg-hell .dg-lockup-dunkel{display:block}

.dg-nav-mitte{display:flex;gap:26px;font-size:.9rem;font-weight:500;color:rgba(255,255,255,.62)}
.dg-nav-mitte a{padding:4px 0;border-bottom:1px solid transparent;
  transition:color var(--kurz),border-color var(--kurz)}
.dg-nav-mitte .dg-an{color:#fff;border-bottom-color:var(--signal)}
.dg-tel{font-size:.9rem;font-weight:500;color:rgba(255,255,255,.62);white-space:nowrap;
  transition:color var(--kurz)}
/* Heller Zustand: Werte 1:1 aus dem Stilblatt der Startseite */
.dg-nav.dg-hell .dg-nav-mitte,.dg-nav.dg-hell .dg-nav-mitte a,
.dg-nav.dg-hell .dg-tel{color:rgba(11,12,14,.72)}
.dg-nav.dg-hell .dg-nav-mitte .dg-an{color:var(--tinte)}
.dg-nav.dg-hell .dg-nav-cta{background:var(--tinte);color:#fff}
.dg-nav.dg-hell .dg-burger i{background:var(--tinte)}
@media (hover:hover){
  .dg-nav-mitte a:hover{color:#fff}
  .dg-nav.dg-hell .dg-nav-mitte a:hover{color:var(--tinte)}
  .dg-tel:hover{color:#fff}
  .dg-nav.dg-hell .dg-tel:hover{color:var(--tinte)}
}
.dg-burger{display:none;width:42px;height:38px;flex-direction:column;justify-content:center;
  align-items:flex-end;gap:6px;background:transparent;border:0;border-radius:0;padding:0;cursor:pointer}
/* width animiert Layout - scaleX laeuft auf der GPU. */
.dg-burger i{display:block;height:1.5px;background:#fff;transform-origin:left center;
  transition:transform var(--ui) var(--aus-ui),background var(--ui)}
/* Beide Balken sind 22 px breit; die kuerzere Optik macht scaleX, nicht
   eine kleinere width - sonst animiert der Wechsel Layout. Im offenen
   Zustand dreht sich beides um die Mitte. */
.dg-burger i:nth-child(1){width:22px}
.dg-burger i:nth-child(2){width:22px;transform:scaleX(.68)}
.dg-burger[aria-expanded="true"] i{transform-origin:center}
.dg-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.dg-burger[aria-expanded="true"] i:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}

/* ── Kopf ─────────────────────────────────────────────────────────── */
/* ── Kopf: Punktraster, Schimmer, Radar ───────────────────────────
   Geometrie und Werte aus dem Stilblatt der Startseite: .radarwrap
   (aspect-ratio 1, clamp(360px,44vw,660px), rechts, mittig), .ring
   (1 px, Kreis), .sweep (conic-gradient, 11 s linear), .sweepline
   (49 % breit, 1 px), .rlabel (.6rem, .14em, schwarzer Grund).
   Umgedeutet: in der Mitte steht, was man SIEHT. Der Sweep zieht ueber
   alle Punkte und es passiert nichts - bis auf einen, und der liegt
   aussen. Das ist die These der Seite als Bild. */
.dg-kopf{padding-top:clamp(140px,15vw,220px);position:relative;overflow:hidden}
/* Kein zweiter Klassenname noetig - der Kindselektor reicht. set_style
   liest zwei globale Klassen als Kombikette und lehnt sie ab. */
.dg-kopf > .dg-h{position:relative;z-index:3}

.dg-raster{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(100deg,#000 0%,rgba(0,0,0,.55) 34%,transparent 62%);
  mask-image:linear-gradient(100deg,#000 0%,rgba(0,0,0,.55) 34%,transparent 62%)}
.dg-schimmer{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(70% 55% at 76% 6%,rgba(140,150,166,.13),transparent 62%)}

/* ── Der Querschnitt ──────────────────────────────────────────────
   Eigenes Bild fuer die Beratung, bewusst nicht das Radar der
   Startseite. Die These der Seite ist eine Aussage ueber Tiefe: oben
   liegt, was man sieht, und die Sonde faehrt hinunter bis dorthin, wo
   es sitzt. Objektsprache wie ueberall: Flaechen mit Lichtkante,
   keine Strichzeichnung. Bewegung laeuft EINMAL - keine Schleife. */
/* ── Der Querschnitt ──────────────────────────────────────────────
   EIN aufgeschnittener Kern, keine fuenf Karten. Die Schichten liegen
   aneinander, wie in einer Bohrprobe, und werden nach unten dunkler
   und dichter. Oben liegt, was man sieht. Die Sonde faehrt einmal
   hinunter und haelt dort an, wo es sitzt.
   Bewusst nicht das Radar der Startseite - das ist deren Bild. */
.dg-schnitt{position:absolute;z-index:1;pointer-events:none;top:50%;right:7%;
  width:clamp(330px,32vw,430px);transform:translateY(-50%)}
.dg-schnitt-kopf{font-size:.6rem;letter-spacing:.19em;text-transform:uppercase;
  color:rgba(255,255,255,.30);margin-bottom:14px;padding-left:2px}

.dg-kern{position:relative;border-radius:14px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),
             0 2px 6px rgba(0,0,0,.5),
             0 34px 64px -30px rgba(0,0,0,.95)}
/* Die aufgeschnittene Kante faengt Licht - daran liest man, dass es
   ein Koerper ist und keine Liste. */
.dg-kern::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;z-index:3;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.03))}

.dg-band{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:0 18px 0 50px}
.dg-band + .dg-band{box-shadow:inset 0 1px 0 rgba(255,255,255,.055)}
.dg-b1{height:70px;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.055))}
.dg-b2{height:56px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03))}
.dg-b3{height:50px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.02))}
.dg-b4{height:64px;background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.015))}
.dg-b5{height:78px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.006))}
.dg-band-name{font-size:.875rem;font-weight:500;letter-spacing:-.012em;color:rgba(255,255,255,.58)}
.dg-band-note{font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.34);white-space:nowrap}
.dg-b1 .dg-band-name{color:rgba(255,255,255,.94)}

/* Die Sonde: ein Schacht, der einmal hinunterfaehrt. */
.dg-sonde{position:absolute;left:24px;top:0;width:2px;height:0;z-index:2;
  background:linear-gradient(180deg,rgba(46,124,246,.10),rgba(46,124,246,.85));
  animation:dg-sonde 1200ms cubic-bezier(.4,0,.2,1) 800ms forwards}
.dg-sonde-spitze{position:absolute;left:-4px;bottom:-5px;width:10px;height:10px;
  border-radius:50%;background:var(--signal);opacity:0;
  box-shadow:0 0 0 5px rgba(46,124,246,.16);
  animation:dg-spitze 340ms var(--aus) 1900ms forwards}
@keyframes dg-sonde{from{height:0}to{height:208px}}
@keyframes dg-spitze{to{opacity:1}}

/* Der Fund: die Schicht hellt auf und bekommt eine Marke an der Kante. */
.dg-fund{animation:dg-fund 760ms var(--aus) 1900ms forwards}
@keyframes dg-fund{
  to{background:linear-gradient(180deg,rgba(46,124,246,.20),rgba(46,124,246,.075))}
}
.dg-fund::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;z-index:4;
  background:var(--signal);transform:scaleY(0);transform-origin:center;
  animation:dg-fundkante 520ms var(--aus) 2000ms forwards}
@keyframes dg-fundkante{to{transform:scaleY(1)}}
.dg-fund .dg-band-name{animation:dg-fund-t 760ms var(--aus) 1900ms forwards}
.dg-fund .dg-band-note{animation:dg-fund-n 760ms var(--aus) 1900ms forwards}
@keyframes dg-fund-t{to{color:#fff}}
@keyframes dg-fund-n{to{color:var(--akzent-text)}}

.dg-kopf .dg-eyebrow{margin-bottom:clamp(18px,2vw,26px)}
h1{max-width:none;text-wrap:normal}
.dg-kopf h1{max-width:15ch}
.dg-nachsatz{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.55rem,.9rem + 2.5vw,2.8rem);line-height:1.16;color:rgba(255,255,255,.58);
  margin-top:clamp(6px,.8vw,12px);margin-left:0;
  max-width:24ch;letter-spacing:-.01em;text-wrap:normal}
.dg-kopf .dg-lead{font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);line-height:1.62;
  color:var(--nebel);max-width:46ch;margin-top:clamp(22px,2.4vw,32px)}
.dg-kopf .dg-aktion{margin-top:clamp(26px,2.8vw,36px)}

/* ── Die Schiene: das System in Ruhe ──────────────────────────────── */
.dg-schiene{margin-top:clamp(72px,10vw,132px)}
.dg-gleis{position:relative;height:1px;overflow:hidden;
  background:linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,.17) 38%,
             rgba(255,255,255,.17) 62%,rgba(255,255,255,.02))}
.dg-signal{position:absolute;top:0;left:0;width:34px;height:1px;
  background:var(--signal);opacity:0;transform:translateX(-40px)}
.dg-laeuft .dg-signal{animation:dg-lauf 2.4s cubic-bezier(.4,0,.2,1) 1.35s 1 both}
@keyframes dg-lauf{
  0%{opacity:0;transform:translateX(-40px)}
  12%{opacity:1}
  76%{opacity:1}
  100%{opacity:0;transform:translateX(calc(100vw - 40px))}
}
.dg-halte{display:grid;grid-template-columns:repeat(6,1fr);margin-top:14px}
.dg-halte > div{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.48);position:relative}
.dg-halte > div::before{content:"";position:absolute;top:-16px;left:0;width:5px;height:5px;
  border-radius:50%;background:#4A4A48;
  transition:background 420ms var(--aus)}
/* Das Signal beleuchtet jede Station, wenn es sie passiert. Die Zeiten
   sind aus der Laufzeit des Signals gerechnet (2,4 s ueber die Breite,
   Start nach 1,35 s), nicht geraten. */
.dg-laeuft .dg-halte > div::before{animation:dg-stationlicht 620ms var(--aus) both}
.dg-laeuft .dg-halte > div:nth-child(1)::before{animation-delay:1.46s}
.dg-laeuft .dg-halte > div:nth-child(2)::before{animation-delay:1.76s}
.dg-laeuft .dg-halte > div:nth-child(3)::before{animation-delay:2.06s}
.dg-laeuft .dg-halte > div:nth-child(4)::before{animation-delay:2.36s}
.dg-laeuft .dg-halte > div:nth-child(5)::before{animation-delay:2.66s}
.dg-laeuft .dg-halte > div:nth-child(6)::before{animation-delay:2.96s}
@keyframes dg-stationlicht{0%,100%{background:#4A4A48}35%{background:#C9C9C5}}
.dg-halte > div:last-child{justify-self:end}
.dg-halte > div:last-child::before{left:auto;right:0}
.dg-halt-an{color:rgba(255,255,255,.80) !important}
.dg-halt-an::before{background:var(--signal) !important}

/* ── 02 · Der Befund ──────────────────────────────────────────────── */
.dg-befund{padding:clamp(80px,11vw,150px) 0 clamp(90px,12vw,160px)}
.dg-befund-kopf{max-width:44rem}
.dg-befund-kopf .dg-eyebrow{margin-bottom:22px}
.dg-befund-kopf .dg-unter{margin-top:22px}
.dg-instrument{margin-top:clamp(44px,5.5vw,72px)}

/* Waehler: drei Saetze, kein Chip-Look */
.dg-waehler{display:flex;flex-wrap:wrap;gap:10px}
.dg-wtaste{display:inline-flex;align-items:center;gap:11px;text-align:left;
  padding:13px 22px;border-radius:100px;border:0;text-decoration:none;cursor:pointer;
  color:var(--still);position:relative;font-size:clamp(.9375rem,.9rem + .22vw,1.0625rem);
  font-weight:500;letter-spacing:-.015em;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(255,255,255,.06);
  transition:color var(--ui) var(--aus-ui),background var(--ui) var(--aus-ui),
             box-shadow var(--ui) var(--aus-ui)}
.dg-wtaste::before{content:attr(data-nr);font-size:.75rem;font-weight:500;letter-spacing:.1em;
  color:rgba(255,255,255,.34);flex:none;font-variant-numeric:tabular-nums}
.dg-wtaste[aria-selected="true"]{color:var(--tinte);
  background:linear-gradient(180deg,#FFFFFF,#EDEFF2);
  box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(0,0,0,.35),0 14px 28px -18px rgba(0,0,0,.9)}
.dg-wtaste[aria-selected="true"]::before{color:var(--aktion)}
@media (hover:hover){
  .dg-wtaste:hover{color:rgba(255,255,255,.9);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.10)}
  .dg-wtaste[aria-selected="true"]:hover{color:var(--tinte)}}

/* Feld */
.dg-feld{display:grid;grid-template-columns:minmax(0,1fr) 96px 292px;align-items:center;
  margin-top:clamp(34px,4vw,54px)}
.dg-fall{grid-column:1;grid-row:1;min-width:0}
.dg-feld-titel{font-size:.75rem;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(255,255,255,.50);margin-bottom:16px}
.dg-platten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}

/* Die Station: ein gebautes Objekt, keine Strichzeichnung */
.dg-st{position:relative;border-radius:20px;padding:24px 22px 26px;border:0;overflow:hidden;
  background:
    linear-gradient(168deg,rgba(255,255,255,.10),rgba(255,255,255,.028) 46%,rgba(255,255,255,.014)),
    linear-gradient(168deg,#1A1D22,#121316);
  box-shadow:
    /* Eine Kante mit RICHTUNG: oben Licht, unten Masse. Ein gleich
       heller Rahmen ringsum sieht aus wie ein Rechteck mit Strich,
       nicht wie ein Koerper. Dazu zwei Schatten statt einem: ein
       enger Kontaktschatten (das Objekt liegt auf) und ein weiter,
       weicher (der Raum dahinter). */
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 1px 2px rgba(0,0,0,.55),
    0 12px 22px -14px rgba(0,0,0,.7),
    0 44px 74px -44px rgba(0,0,0,1);
  transition:transform var(--ui-lang) var(--aus-ui),box-shadow var(--ui-lang) var(--aus-ui)}
.dg-st > *{position:relative;z-index:1}
.dg-st::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 34%,transparent 60%);
  transition:opacity var(--ui-lang) var(--aus-ui)}
/* Korn. Ohne das bandet der Verlauf auf dunklem Grund und die Flaeche
   wirkt wie Plastik; mit ihm wie ein Werkstoff. Sehr niedrig dosiert -
   sichtbar ist es erst, wenn man es wegnimmt. */
.dg-st::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;opacity:.42;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size:160px 160px}
.dg-st-weiss::after{opacity:.20;mix-blend-mode:multiply}

/* Laufende Nummer im Kopf der Platte - sechs Kandidaten in einer
   Reihenfolge, nicht sechs beliebige Kacheln. */
.dg-platten{counter-reset:dgpl}
.dg-platten .dg-st{counter-increment:dgpl}
/* Haengender Einzug: die Nummer steht im linken Rand, Titel und Frage
   stehen auf EINER Achse. Ueber dem Titel gestapelt frisst sie Hoehe
   und macht aus der Platte eine Kachel mehr; im Rand macht sie daraus
   einen Eintrag in einem Verzeichnis. */
/* Kein position:absolute: das h3 ist selbst position:relative (aus
   .dg-st > *), die Nummer haenge sonst am Titel statt am Rand der
   Platte - sie war schlicht unsichtbar hinter der Ueberschrift.
   Ein echter haengender Einzug braucht das gar nicht: Kasten in
   Gutterbreite, negativer linker Rand. */
.dg-platten .dg-st{padding-left:48px}
.dg-platten .dg-st h3::before{content:counter(dgpl,decimal-leading-zero);
  display:inline-block;width:26px;margin-left:-26px;
  font-size:.6875rem;letter-spacing:.14em;font-weight:500;
  color:rgba(255,255,255,.30);font-variant-numeric:tabular-nums}
.dg-st h3{color:#fff;margin-bottom:7px;font-size:1rem;letter-spacing:-.022em}
.dg-st p{font-size:.84375rem;line-height:1.56;color:rgba(255,255,255,.60);text-wrap:pretty}
@media (hover:hover) and (pointer:fine){
  /* Beim Anheben wandert das Licht mit und der Schatten wird weicher -
     das ist der Unterschied zwischen "Karte bewegt sich" und "Objekt
     hebt ab". */
  .dg-st:hover{transform:translateY(-3px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 0 0 1px rgba(255,255,255,.085),
      0 5px 12px rgba(0,0,0,.4),
      0 32px 58px -26px rgba(0,0,0,.95)}
  .dg-st:hover::before{opacity:1.35}
}
/* gestaffelter Auftritt bei jedem Fallwechsel - erklaert den Wechsel */
.dg-fall .dg-st{animation:dg-platte 260ms var(--aus-ui) both}
/* Spalte 3 zuerst (am Kanal), dann 2, dann 1 - rueckwaerts, weil die
   Frage rueckwaerts laeuft. Staffelung 55 ms statt 110 (laengere
   Abstaende fuehlen sich langsam an), letzte Platte fertig bei
   0,165 + 0,26 = 0,425 s statt 0,95 s. Ein Tabwechsel ist eine
   Bedienung, keine Vorfuehrung. */
.dg-platten .dg-st:nth-child(3){animation-delay:.00s} .dg-platten .dg-st:nth-child(6){animation-delay:.02s}
.dg-platten .dg-st:nth-child(2){animation-delay:.055s} .dg-platten .dg-st:nth-child(5){animation-delay:.075s}
.dg-platten .dg-st:nth-child(1){animation-delay:.11s} .dg-platten .dg-st:nth-child(4){animation-delay:.13s}
@keyframes dg-platte{from{opacity:0;transform:translateY(6px) scale(.99)}to{opacity:1;transform:none}}

/* Kanal: hier laufen die Signale zusammen */
.dg-kanal{grid-column:2;grid-row:1;position:relative;height:1px;align-self:center;
  background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.34))}
.dg-kanal::after{content:"";position:absolute;right:-3px;top:-2.5px;width:6px;height:6px;
  border-radius:50%;background:#fff}
.dg-puls{position:absolute;top:0;left:0;width:26px;height:1px;opacity:0;
  background:var(--signal)}
.dg-kanal.dg-feuer .dg-puls{animation:dg-puls 620ms var(--aus) 60ms 1 both}
/* rueckwaerts: vom Sichtbaren zu den Ursachen */
@keyframes dg-puls{0%{opacity:0;transform:translateX(96px)}20%{opacity:1}
  100%{opacity:0;transform:translateX(-46px)}}

/* Das Sichtbare: die einzige weisse Flaeche im dunklen Akt */
.dg-sichtbar{grid-column:3;grid-row:1}
.dg-sichtbar.dg-wechsel .dg-st-weiss{animation:dg-befund-an 620ms var(--aus) both}
/* Ein Anheben, kein Blitz: das Objekt reagiert koerperlich. */
@keyframes dg-befund-an{0%{transform:none}34%{transform:translateY(-4px)}100%{transform:none}}
.dg-st-weiss{padding:28px 24px 30px;border-radius:18px;
  background:linear-gradient(168deg,#FFFFFF,#EEF0F3 78%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 0 0 1px rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(11,12,14,.10),
    0 2px 4px rgba(0,0,0,.5),
    0 14px 26px -14px rgba(0,0,0,.6),
    /* ein Hauch Blau im weiten Schatten - das Licht der Seite hat eine
       Farbe, ein neutralgrauer Schatten wirkt daneben tot */
    0 44px 78px -30px rgba(9,22,48,.95)}
.dg-st-weiss::before{background:linear-gradient(150deg,rgba(255,255,255,.9),transparent 55%)}
.dg-st-weiss::before{display:none}
.dg-st-weiss h3{color:var(--tinte);font-size:1.3125rem;margin-bottom:10px;letter-spacing:-.022em}
/* Serifen-Kursive wie im Kopf: die eine Stelle, an der die Seite
   spricht statt aufzuzaehlen. Bindet den Befund an die Headline. */
.dg-st-weiss p{color:var(--leise);font-size:1rem;line-height:1.5;
  font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:-.005em}
.dg-st-weiss h3::before{display:none}
@media (hover:hover) and (pointer:fine){.dg-st-weiss:hover{transform:none}}

.dg-befund-satz{margin-top:clamp(30px,3.4vw,44px);font-size:clamp(1rem,.96rem + .3vw,1.125rem);
  line-height:1.6;color:var(--nebel);max-width:58ch;padding-left:18px;
  border-left:1px solid var(--linie-d2)}

/* Die These: das Scharnier zwischen Instrument und Argument */
.dg-these{margin-top:clamp(88px,11vw,150px);padding-left:clamp(18px,2vw,26px);
  border-left:2px solid var(--signal);
  font-size:clamp(1.55rem,.9rem + 2.4vw,2.65rem);line-height:1.18;letter-spacing:-.026em;
  font-weight:500;color:#fff;max-width:none;text-wrap:normal}

/* ═══════════════════ AKT II · HELL: DAS ARGUMENT ══════════════════ */

/* ── 03 · Vorgehen ────────────────────────────────────────────────── */
.dg-vorgehen{background:var(--papier);padding:clamp(90px,12vw,168px) 0}
.dg-vor-kopf{max-width:46rem}
.dg-vor-kopf .dg-eyebrow{margin-bottom:22px}
.dg-vor-kopf .dg-unter{margin-top:20px}

/* Uebernommen von der neuen Startseite: Karte, darin oben ein
   abgesetztes Szenenfeld, darunter Nummer, Ueberschrift, Text. Gleiche
   Radien (20/14), gleicher Aufbau. Der Unterschied zu drei beliebigen
   Karten: die Szenen werden von links nach rechts leerer. */
.dg-trichter{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(48px,6vw,80px)}
.dg-zone{position:relative;border-radius:20px;padding:20px 20px 26px;
  background:linear-gradient(180deg,#F8F9FB,#F1F3F6);
  box-shadow:inset 0 0 0 1px rgba(16,20,26,.05)}
.dg-szene{border-radius:14px;padding:18px 18px 20px;margin-bottom:24px;min-height:272px;
  display:flex;flex-direction:column;
  background:#FDFDFE;box-shadow:inset 0 0 0 1px rgba(16,20,26,.055)}
.dg-szene-marke{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sehr-leise);margin-bottom:16px}
.dg-zone-kopf{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.dg-zone-kopf::before{content:attr(data-nr);font-size:.75rem;letter-spacing:.1em;
  color:var(--sehr-leise);font-variant-numeric:tabular-nums}
.dg-zone-kopf h3{font-size:1.1875rem}
.dg-zone-frage{font-size:1.0625rem;line-height:1.4;color:var(--tinte);font-weight:600;
  letter-spacing:-.018em}
.dg-zone-text{font-size:.90625rem;line-height:1.6;color:var(--leise);margin-top:14px}

/* Zone 1: das volle Feld */
.dg-koerner{display:flex;flex-wrap:wrap;gap:6px;align-content:start}
.dg-koerner > div{display:inline-block;padding:6px 11px;border-radius:7px;border:0;
  background:linear-gradient(180deg,#FFFFFF,#F7F9FB);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(16,20,26,.09),0 1px 2px rgba(16,20,26,.05);
  font-size:.78125rem;letter-spacing:-.005em;color:var(--leise);
  opacity:0;transform:translateY(6px);
  transition:opacity var(--mittel) var(--aus),transform var(--mittel) var(--aus),
             background-color var(--lang) var(--aus),color var(--lang) var(--aus),
             border-color var(--lang) var(--aus)}
.dg-s1 .dg-koerner > div{opacity:1;transform:none}
.dg-s1 .dg-koerner > div:nth-child(1){transition-delay:0ms}
.dg-s1 .dg-koerner > div:nth-child(2){transition-delay:38ms}
.dg-s1 .dg-koerner > div:nth-child(3){transition-delay:76ms}
.dg-s1 .dg-koerner > div:nth-child(4){transition-delay:114ms}
.dg-s1 .dg-koerner > div:nth-child(5){transition-delay:152ms}
.dg-s1 .dg-koerner > div:nth-child(6){transition-delay:190ms}
.dg-s1 .dg-koerner > div:nth-child(7){transition-delay:228ms}
.dg-s1 .dg-koerner > div:nth-child(8){transition-delay:266ms}
.dg-s1 .dg-koerner > div:nth-child(9){transition-delay:304ms}
.dg-s1 .dg-koerner > div:nth-child(10){transition-delay:342ms}
.dg-s1 .dg-koerner > div:nth-child(11){transition-delay:380ms}
.dg-s1 .dg-koerner > div:nth-child(12){transition-delay:418ms}
.dg-s1 .dg-koerner > div:nth-child(13){transition-delay:456ms}
.dg-s1 .dg-koerner > div:nth-child(14){transition-delay:494ms}
.dg-s2 .dg-koerner > div,.dg-s3 .dg-koerner > div{opacity:.32;transition-delay:0ms}
.dg-s2 .dg-koerner .dg-bleibt,.dg-s3 .dg-koerner .dg-bleibt{opacity:1;color:#fff;
  background:linear-gradient(168deg,#232830,#0B0C0E);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(11,12,14,.35),
             0 6px 14px -6px rgba(11,12,14,.5)}

/* Zone 2: vier bleiben, in Reihenfolge */
.dg-rang{list-style:none;display:flex;flex-direction:column}
.dg-rang li{display:flex;align-items:center;gap:12px;padding:11px 13px;margin-bottom:8px;
  border-radius:9px;background:linear-gradient(180deg,#FFFFFF,#F8F9FB);
  box-shadow:inset 0 0 0 1px rgba(16,20,26,.07),0 1px 2px rgba(16,20,26,.04);
  font-size:.875rem;font-weight:500;letter-spacing:-.012em;
  opacity:0;transform:translateX(-8px);
  transition:opacity var(--lang) var(--aus),transform var(--lang) var(--aus),color var(--lang)}
.dg-rang li::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:#CDD3DB}
.dg-rang li:first-child::before{background:var(--aktion)}
.dg-s2 .dg-rang li,.dg-s3 .dg-rang li{opacity:1;transform:none}
.dg-s2 .dg-rang li:nth-child(1),.dg-s3 .dg-rang li:nth-child(1){transition-delay:0ms}
.dg-s2 .dg-rang li:nth-child(2),.dg-s3 .dg-rang li:nth-child(2){transition-delay:110ms}
.dg-s2 .dg-rang li:nth-child(3),.dg-s3 .dg-rang li:nth-child(3){transition-delay:220ms}
.dg-s2 .dg-rang li:nth-child(4),.dg-s3 .dg-rang li:nth-child(4){transition-delay:330ms}
.dg-s2 .dg-rang li:first-child,.dg-s3 .dg-rang li:first-child{color:var(--aktion)}
.dg-achse{margin-top:14px}
.dg-achse{font-size:.75rem;letter-spacing:.02em;color:var(--sehr-leise)}

/* Zone 3: einer wird gemacht */
.dg-plan{display:flex;flex-direction:column;opacity:0;transform:translateY(8px);
  transition:opacity var(--lang) var(--aus),transform var(--lang) var(--aus)}
.dg-s3 .dg-plan{opacity:1;transform:none}
.dg-planzeile{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 13px;margin-bottom:8px;border-radius:9px;
  background:linear-gradient(180deg,#FFFFFF,#F8F9FB);
  box-shadow:inset 0 0 0 1px rgba(16,20,26,.07),0 1px 2px rgba(16,20,26,.04)}
.dg-pk{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sehr-leise)}
.dg-pw{font-size:.90625rem;font-weight:500;letter-spacing:-.01em;text-align:right}

/* ── 04 · Beratungsfelder (dunkel: Instrument) ────────────────────── */
.dg-felder{background:var(--tinte);color:#fff;padding:clamp(90px,12vw,160px) 0}
.dg-felder-kopf{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(28px,4vw,56px);align-items:end}
.dg-felder-kopf .dg-eyebrow{margin-bottom:22px}
.dg-netz{margin-top:clamp(54px,7vw,96px);display:grid;
  grid-template-columns:minmax(0,1fr) 340px;gap:clamp(30px,4vw,64px);align-items:center}

.dg-netz-buehne{position:relative;padding-top:104px}
.dg-boegen{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.dg-boegen path{fill:none;stroke:var(--signal);stroke-width:1.25}
/* Kein Keyframe: Laenge und Versatz setzt das Skript, und der Endzustand
   ist "sichtbar". Laeuft der Uebergang aus irgendeinem Grund nicht, springt
   die Linie sofort auf 0 - statt dauerhaft unsichtbar zu bleiben. Genau das
   ist im hohen Aufnahmefenster passiert (Versatz blieb bei 222 px stehen). */
.dg-knoten{display:flex;justify-content:space-between;gap:8px;position:relative;
  padding-top:26px;border-top:1px solid var(--linie-d)}
.dg-knoten-taste{position:relative;flex:1 1 0;min-width:0;padding:19px 12px;border-radius:12px;
  text-decoration:none;cursor:pointer;text-align:center;border:0;
  background:
    linear-gradient(166deg,#1F1F1D,#111110);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.045),
    0 2px 5px rgba(0,0,0,.45),
    0 18px 36px -24px rgba(0,0,0,.95);
  font-size:.9375rem;font-weight:500;letter-spacing:-.014em;color:rgba(255,255,255,.60);
  transition:color var(--mittel) var(--aus),transform var(--mittel) var(--aus),
             border-color var(--mittel),box-shadow var(--mittel)}
.dg-knoten-taste::before{content:"";position:absolute;top:-27px;left:50%;width:1px;height:20px;
  background:var(--linie-d)}
.dg-knoten-taste::after{content:"";position:absolute;top:-31px;left:50%;margin-left:-3px;
  width:6px;height:6px;border-radius:50%;background:#31343A;
  transition:background-color var(--mittel),box-shadow var(--mittel)}
.dg-knoten-taste[aria-selected="true"]{color:#fff;transform:translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.11),
    0 5px 11px rgba(0,0,0,.45),
    0 32px 56px -26px rgba(0,0,0,.95)}
.dg-knoten-taste[aria-selected="true"]::after{background:#fff}
.dg-knoten-taste.dg-ziel{color:var(--akzent-text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 0 0 1px rgba(46,124,246,.30),
    0 2px 5px rgba(0,0,0,.45),
    0 18px 36px -24px rgba(0,0,0,.95)}
.dg-knoten-taste.dg-ziel::after{background:var(--signal)}
@media (hover:hover){.dg-knoten-taste:hover{color:#fff}}

.dg-feldtext h3{font-size:1.25rem;color:#fff;margin-bottom:14px;letter-spacing:-.02em}
.dg-feldtext > p{font-size:.96875rem;line-height:1.6;color:var(--nebel)}
.dg-wirkt,.dg-faellt{margin-top:18px;font-size:.875rem;line-height:1.5;color:rgba(255,255,255,.52)}
.dg-wirkt::before,.dg-faellt::before{content:attr(data-k);display:block;font-size:.75rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.52);margin-bottom:5px}
.dg-wirkt{color:var(--akzent-text)}
.dg-feldtext{animation:dg-platte var(--lang) var(--aus) both}

/* ── 05 · Foerderung ──────────────────────────────────────────────── */
.dg-foerder{background:var(--flaeche);padding:clamp(84px,11vw,150px) 0}
.dg-foerder-raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:start}
.dg-foerder .dg-eyebrow{margin-bottom:22px}
.dg-foerder h2{margin-bottom:24px}
.dg-foerder .dg-knopf{margin-top:32px}
.dg-sz{display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 20px;padding:20px 0;
  border-top:1px solid var(--linie2)}
.dg-sz:first-child{border-top:0;padding-top:0}
.dg-sz::before{content:attr(data-nr);grid-row:1 / span 2;font-size:.75rem;letter-spacing:.1em;
  color:var(--sehr-leise);padding-top:4px;font-variant-numeric:tabular-nums}
.dg-sz h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.018em;margin-bottom:6px}
.dg-sz p{font-size:.90625rem;line-height:1.55;color:var(--leise)}
.dg-sz.dg-offen h3{color:var(--aktion)}
.dg-hinweis{font-size:.8125rem;line-height:1.55;color:var(--sehr-leise);
  border-top:1px solid var(--linie2);padding-top:18px;margin-top:20px;max-width:44ch}

/* ── 06 · Montagmorgen: der leiseste Moment ───────────────────────── */
.dg-montag{background:var(--papier);padding:clamp(100px,15vw,220px) 0 clamp(90px,12vw,168px)}
.dg-montag .dg-eyebrow{margin-bottom:clamp(40px,6vw,80px)}
.dg-montag-auf{font-size:clamp(1.35rem,.95rem + 1.5vw,1.9rem);font-weight:500;letter-spacing:-.024em;
  line-height:1.25;max-width:20ch}
.dg-montag-text{margin-top:22px;font-size:1.0625rem;line-height:1.65;color:var(--leise);max-width:52ch}
.dg-montag-frage{margin-top:clamp(66px,10vw,140px);font-size:clamp(2.25rem,1.05rem + 4.7vw,4.6rem);
  line-height:1.04;letter-spacing:-.034em;max-width:none;text-wrap:normal}
.dg-montag-frage s{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--leise);
  letter-spacing:-.012em;text-decoration:none}
.dg-montag-klein{margin-top:clamp(26px,3vw,38px);font-size:.96875rem;color:var(--sehr-leise)}
/* Dieselben Dateien wie auf der Startseite. Dort steht im Overlay:
   "die Logos sprechen fuer sich" - deshalb ohne Ueberschrift. */
.dg-kunden{margin-top:clamp(76px,10vw,140px);border-top:1px solid var(--linie);padding-top:40px}
.dg-logoband{display:flex;flex-wrap:wrap;align-items:center;gap:24px 38px}
.dg-logoband img{height:26px;width:auto;opacity:.62;
  transition:opacity var(--mittel) var(--aus)}
@media (hover:hover){.dg-logoband img:hover{opacity:1}}

/* ── 07 · Abschluss ───────────────────────────────────────────────── */
.dg-abschluss{background:var(--tinte);color:#fff;padding:clamp(90px,12vw,160px) 0}
.dg-abschluss-raster{display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(40px,6vw,90px);align-items:center}
.dg-abschluss .dg-eyebrow{margin-bottom:22px}
.dg-abschluss h2{font-size:clamp(2rem,1.1rem + 3.1vw,3.5rem);line-height:1.06;letter-spacing:-.03em}
.dg-abschluss .dg-lead{margin-top:26px;font-size:1.0625rem;line-height:1.65;color:var(--nebel);max-width:50ch}
.dg-abschluss .dg-aktion{margin-top:34px}
.dg-mikro{margin-top:22px;font-size:.8125rem;letter-spacing:.02em;color:rgba(255,255,255,.54)}
.dg-ehrlich{margin-top:clamp(34px,4vw,50px);padding-top:22px;border-top:1px solid var(--linie-d);
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.15rem,.95rem + .8vw,1.5rem);line-height:1.35;color:rgba(255,255,255,.72);max-width:24ch}
.dg-portrait{position:relative}
.dg-portrait img{width:100%;height:auto;border-radius:2px}
.dg-portrait figcaption{margin-top:14px;font-size:.8125rem;line-height:1.5;
  color:rgba(255,255,255,.54)}

/* ── Fuss ─────────────────────────────────────────────────────────
   Werte 1:1 aus dem Stilblatt der Startseite: .f-footer, .fclaim,
   .f-fclaim-gross, .f-fclaim-zeile, .fgrid, .f-fgrid-em-col,
   .f-fgrid-em-col-h, .fbot. */
.dg-fuss{background:var(--tinte);color:#fff;border-top:1px solid rgba(255,255,255,.12);
  padding:clamp(46px,7vh,72px) 0 40px}
.dg-fclaim{border-bottom:1px solid rgba(255,255,255,.12);
  margin-bottom:clamp(30px,4vh,44px);padding-bottom:clamp(30px,4vh,44px)}
.dg-fclaim-gross{color:#fff;letter-spacing:-.04em;max-width:34ch;text-wrap:normal;
  font-size:clamp(1.4rem,1.05rem + 1.4vw,2.1rem);font-weight:600;line-height:1.1}
.dg-fclaim-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:22px;
  margin-top:18px;font-size:.84rem;color:rgba(255,255,255,.45)}
.dg-fz{display:flex;align-items:center;gap:.36em}
.dg-fz-b{color:rgba(255,255,255,.85);font-weight:600}
.dg-fgrid{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:30px}
.dg-fcol{display:grid;gap:9px;font-size:.88rem;color:rgba(255,255,255,.45)}
.dg-fcol-h{color:rgba(255,255,255,.42);letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:4px;font-size:.68rem;font-weight:600}
.dg-fcol a{color:rgba(255,255,255,.62);transition:color var(--kurz)}
@media (hover:hover){.dg-fcol a:hover{color:#fff}}
.dg-fmarke{margin:0 0 6px;line-height:0}
.dg-fmarke .dg-lockup{height:24px}
.dg-fbot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;
  color:rgba(255,255,255,.5);border-top:1px solid rgba(255,255,255,.12);
  margin-top:clamp(34px,5vh,52px);padding-top:22px;font-size:.82rem}
.dg-fbot-r{display:flex;gap:14px}
.dg-fbot a{transition:color var(--kurz)}
@media (hover:hover){.dg-fbot a:hover{color:#fff}}

/* ═══════════════════════════ BREITEN ══════════════════════════════ */
@media (max-width:1080px){
  .dg-schnitt{width:min(38vw,340px);right:3%}
  .dg-kopf h1{max-width:12ch}
  .dg-feld{grid-template-columns:minmax(0,1fr) 64px 250px}
  .dg-platten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dg-netz{grid-template-columns:minmax(0,1fr) 290px}
}
@media (max-width:900px){
  .dg-schnitt{display:none}
  .dg-kopf h1{max-width:none}
  .dg-kopf .dg-lead{max-width:52ch}
  .dg-burger{display:flex}
  .dg-nav-cta{display:none}
  .dg-nav-mitte{position:absolute;left:var(--rand);right:var(--rand);top:calc(100% + 8px);z-index:20;
    flex-direction:column;gap:0;border-radius:18px;
    background:var(--tinte);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);padding:0 20px;
    max-height:0;overflow:hidden;transition:max-height 420ms var(--aus)}
  .dg-nav.dg-hell .dg-nav-mitte{background:#fff;box-shadow:0 18px 40px -20px rgba(11,12,14,.4),inset 0 0 0 1px rgba(11,12,14,.08)}
  .dg-nav-mitte a{padding:16px 0;border-bottom:1px solid var(--linie-d);font-size:1rem}
  .dg-nav-mitte a:last-child{border-bottom:0}
  .dg-nav-mitte.dg-offen-menue{max-height:340px;padding:6px 20px}
  .dg-tel{display:none}
  .dg-fgrid{gap:34px}

  .dg-trichter{grid-template-columns:1fr;gap:14px}
  .dg-szene{min-height:0}

  .dg-felder-kopf{grid-template-columns:1fr;align-items:start}
  .dg-netz{grid-template-columns:1fr;gap:38px}
  .dg-boegen{display:none}
  .dg-netz-buehne{padding-top:0}
  .dg-knoten{flex-wrap:wrap;border-top:0;padding-top:0;gap:8px}
  .dg-knoten-taste{flex:1 1 30%;padding:13px 8px;font-size:.8125rem}
  .dg-knoten-taste::before,.dg-knoten-taste::after{display:none}

  .dg-foerder-raster,.dg-abschluss-raster{grid-template-columns:1fr;gap:44px}
  .dg-abschluss-raster{gap:52px}
  .dg-portrait{max-width:420px}
  .dg-fuss-oben{grid-template-columns:1fr;gap:44px}
  .dg-fuss-spalten{grid-template-columns:repeat(2,1fr);gap:32px 24px}
}
@media (max-width:720px){
  .dg-waehler{grid-template-columns:1fr;border-bottom:0}
  .dg-wtaste{width:100%;justify-content:flex-start}
  .dg-feld{grid-template-columns:1fr;gap:0}
  .dg-fall{grid-column:1;grid-row:1}
  .dg-kanal{grid-column:1;grid-row:2;width:1px;height:44px;margin:0 auto;justify-self:center}
  .dg-kanal .dg-puls{width:1px;height:26px;left:0;top:0;background:var(--signal)}
  .dg-kanal.dg-feuer .dg-puls{animation-name:dg-puls-hoch}
  @keyframes dg-puls-hoch{0%{opacity:0;transform:translateY(44px)}20%{opacity:1}
    100%{opacity:0;transform:translateY(-26px)}}
  .dg-sichtbar{grid-column:1;grid-row:3}
  .dg-st-weiss{max-width:none}
    /* Die Schiene traegt keine Information (aria-hidden). Statt sie auf dem
     Handy in drei Reihen zu brechen, zeigt sie dort drei Stationen. */
  .dg-halte{grid-template-columns:repeat(3,1fr)}
  .dg-halte > div:nth-child(1),.dg-halte > div:nth-child(4),.dg-halte > div:nth-child(5){display:none}
  .dg-nachsatz{margin-left:0}
  .dg-fuss-unten{flex-direction:column;gap:8px}
}
@media (max-width:560px){
  .dg-eyebrow{letter-spacing:.15em;gap:10px}
  
}
@media (max-width:520px){
  .dg-platten{grid-template-columns:1fr}
  .dg-koerner{grid-template-columns:repeat(7,1fr)}
  .dg-knoten-taste{flex:0 1 calc(50% - 4px)}
}

/* ═══════════════════════════ RUHE ═════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms !important;animation-delay:0ms !important;
    transition-duration:1ms !important;transition-delay:0ms !important}
  .dg-auf,.dg-rv{opacity:1 !important;transform:none !important}
  .dg-signal,.dg-puls{display:none}
}

/* ═══════════════════════════════════════════════════════════════════
   KOPF · HELL (uebernommen aus _var_hell2.html am 24.08.)
   Der dunkle Kopf mit dem Querschnitt ist ersetzt. Die Regeln fuer
   .dg-schnitt/.dg-kern/.dg-band/.dg-sonde/.dg-schiene stehen weiter
   oben und sind damit ohne Wirkung - bewusst stehen gelassen, weil
   ein Herausschneiden zwischen Kommentargrenzen hier schon einmal
   halbe Bloecke mitgenommen hat.
   ═══════════════════════════════════════════════════════════════ */
/* Kopf nach dem Vorbild von SALESHAX: heller Grund, Serifen-Headline
   roman + kursiv, kurze Zeile, ein Knopf, direkt darunter die Logos.
   Keine Grafik. */
.dg-hell-kopf{background:#FBFBFA;color:var(--tinte);padding-top:clamp(150px,16vw,230px);
  padding-bottom:0;overflow:visible}
.dg-hell-kopf .dg-eyebrow{color:var(--sehr-leise);margin-bottom:clamp(26px,3vw,40px)}
.dg-hell-kopf h1{font-family:var(--sans);font-weight:600;font-style:normal;
  font-size:clamp(2.6rem,1.2rem + 3.6vw,4.4rem);line-height:1.08;letter-spacing:-.022em;
  color:var(--tinte);max-width:22ch}
.dg-hell-kopf h1 s{font-style:italic;font-weight:300;text-decoration:none;
  color:rgba(11,12,14,.42)}
.dg-hell-kopf .dg-lead{color:var(--leise);max-width:52ch;margin-top:clamp(24px,2.6vw,34px);
  font-size:1.0625rem;line-height:1.62}
.dg-hell-kopf .dg-aktion{margin-top:clamp(28px,3vw,38px)}
.dg-hell-kopf .dg-knopf{background:var(--tinte);color:#fff}
.dg-hell-kopf .dg-still-link{color:var(--leise);border-bottom-color:var(--linie2)}
.dg-kopfband{margin-top:clamp(74px,9vw,120px);border-top:1px solid var(--linie);
  padding:30px 0 34px}
.dg-kopfband-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 34px}
.dg-kopfband img{height:24px;width:auto;opacity:.5}
/* Umbruch VOR der Kursiven - nur schmal. Breit stehen roman und kursiv
   ohnehin auf eigenen Zeilen; schmal liefen sie sonst in derselben
   Zeile aneinander ("Loesung. Manche"). */
.dg-eng{display:none}
@media (max-width:820px){
  .dg-eng{display:block}
  /* Acht Logos als 4x2 statt umbrechender Reihe - "space-between"
     zerreisst sonst die letzte, halb gefuellte Zeile. */
  .dg-kopfband-in{display:grid;grid-template-columns:repeat(4,1fr);
    justify-items:center;align-items:center;gap:24px 14px}
  .dg-kopfband img{height:17px}
}

/* ── Die Kurve ────────────────────────────────────────────────────────
   Ein Diagramm, das nach oben geht - aber OHNE eine einzige Zahl.
   Wir haben fuer diese Seite keine belegten Kundenzahlen; eine
   beschriftete Achse waere erfunden. Die Form traegt die Aussage.

   Drei Bauteile, jedes mit einem Grund:
   1. Links liegt die Linie flach und macht drei Ausschlaege, die jedes
      Mal auf den Ausgangswert zurueckfallen - und sie werden KLEINER.
      Das sind die Versuche, das sichtbare Problem zu behandeln.
   2. An der Marke wird die Ursache gefunden.
   3. Rechts laufen ZWEI Linien: die gestrichelte graue ist die alte
      Bahn, unveraendert weiter. Die blaue steigt. Der Abstand
      dazwischen ist die Aussage - ohne ihn waere der Anstieg gegen
      nichts gemessen und blosse Dekoration. */
.dg-vn{position:absolute;top:50%;right:5%;width:clamp(360px,34vw,470px);
  transform:translateY(-50%);pointer-events:none;z-index:1}
.dg-vn-buehne{position:relative;aspect-ratio:460/236}
/* Der Platz steht schon, bevor das SVG da ist - baut das Skript es
   nach (weil der Import es verschluckt hat), springt nichts. */
.dg-vn-svg{display:block;width:100%;height:auto;overflow:visible}

.dg-vn-l{position:absolute;font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;
  white-space:nowrap;opacity:0;animation:dg-vn-ein 600ms var(--aus) forwards}
@keyframes dg-vn-ein{to{opacity:1}}
/* y=190 von 236 -> die Grundlinie liegt bei 80,5 % der Buehnenhoehe.
   Alle Beschriftungen haengen an dieser einen Zahl. */
.dg-vn-vorher{left:0;top:calc(100% + 15px);color:rgba(11,12,14,.36);animation-delay:900ms}
.dg-vn-marke{left:65.2%;top:calc(100% + 15px);transform:translateX(-50%);color:var(--aktion);
  animation-delay:1750ms}
.dg-vn-alt{right:0;top:calc(80.5% + 11px);color:rgba(11,12,14,.34);animation-delay:3350ms}
.dg-vn-neu{right:0;top:-2px;color:var(--aktion);animation-delay:3300ms}

.dg-vn-gitter{stroke:rgba(11,12,14,.06);stroke-width:1;vector-effect:non-scaling-stroke;
  opacity:0;animation:dg-vn-ein 700ms var(--aus) 200ms forwards}
.dg-vn-grund{stroke:rgba(11,12,14,.15);stroke-width:1;vector-effect:non-scaling-stroke;
  opacity:0;animation:dg-vn-ein 700ms var(--aus) 200ms forwards}

/* pathLength="1" macht die Laenge unabhaengig von der Geometrie - damit
   zeichnet sich jeder Strich ohne eine Zeile JavaScript.
   Die Luecke MUSS laenger sein als der Pfad (1 2, nicht 1), sonst
   wiederholt sich das Muster und am Ende blitzt ein zweites Stueck auf. */
.dg-vn-flach{fill:none;stroke:rgba(11,12,14,.32);stroke-width:1.6;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1 2;stroke-dashoffset:1;
  animation:dg-vn-strich 1150ms cubic-bezier(.35,0,.4,1) 450ms forwards}
.dg-vn-steigt{fill:none;stroke:var(--aktion);stroke-width:2.2;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1 2;stroke-dashoffset:1;
  animation:dg-vn-strich 1200ms cubic-bezier(.5,0,.2,1) 1950ms forwards}
@keyframes dg-vn-strich{to{stroke-dashoffset:0}}

.dg-vn-lot{stroke:rgba(11,12,14,.13);stroke-width:1;vector-effect:non-scaling-stroke;
  opacity:0;animation:dg-vn-ein 380ms var(--aus) forwards}
.dg-vn-fall{fill:rgba(11,12,14,.30);opacity:0;animation:dg-vn-ein 380ms var(--aus) forwards}
.dg-vn-p1{animation-delay:800ms} .dg-vn-p2{animation-delay:1090ms} .dg-vn-p3{animation-delay:1350ms}

.dg-vn-schnitt{stroke:var(--aktion);stroke-width:1;stroke-dasharray:3 4;
  vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:bottom;
  animation:dg-vn-schnitt 600ms cubic-bezier(.2,0,.2,1) 1650ms forwards}
@keyframes dg-vn-schnitt{from{opacity:0;transform:scaleY(0)}to{opacity:.5;transform:scaleY(1)}}

/* Die alte Bahn - gestrichelt, unveraendert weiter. */
.dg-vn-bahn{fill:none;stroke:rgba(11,12,14,.30);stroke-width:1.5;stroke-dasharray:5 5;
  vector-effect:non-scaling-stroke;opacity:0;
  animation:dg-vn-ein 800ms var(--aus) 1900ms forwards}

/* Der Abstand zwischen beiden Bahnen. Kommt erst, wenn die blaue
   Linie fertig gezeichnet ist - vorher stuende die Flaeche unter
   einer Linie, die es noch gar nicht gibt. */
.dg-vn-flaeche{fill:url(#dgvnfl);opacity:0;
  animation:dg-vn-ein 800ms var(--aus) 3050ms forwards}

.dg-vn-punkt{fill:var(--aktion);stroke:#FBFBFA;stroke-width:3;
  opacity:0;transform-box:fill-box;transform-origin:center;
  animation:dg-vn-punkt 520ms cubic-bezier(.2,.9,.3,1) 3150ms forwards}
@keyframes dg-vn-punkt{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
.dg-vn-anker{stroke:rgba(46,124,246,.45);stroke-width:1;vector-effect:non-scaling-stroke;
  opacity:0;animation:dg-vn-ein 500ms var(--aus) 3300ms forwards}

@media (prefers-reduced-motion:reduce){
  .dg-vn-flach,.dg-vn-steigt{stroke-dashoffset:0;animation:none}
  .dg-vn-l,.dg-vn-gitter,.dg-vn-grund,.dg-vn-lot,.dg-vn-fall,.dg-vn-bahn,
  .dg-vn-flaeche,.dg-vn-punkt,.dg-vn-anker{opacity:1;animation:none}
  .dg-vn-schnitt{opacity:.5;animation:none}
}
@media (max-width:1180px){.dg-vn{width:min(36vw,320px);right:3%}}
/* Unter 900 px kein Wegblenden: die Kurve faellt in den Fluss und steht
   unter dem Knopf, volle Breite. Sie ist die einzige Grafik im Kopf -
   mobil ganz ohne Bild dazustehen waere die schlechtere Loesung.
   Kein erzwungenes Hoehenmass: die Buehne behaelt ihr Seitenverhaeltnis
   (preserveAspectRatio="none" wuerde die Punkte sonst zu Ellipsen
   ziehen). */
@media (max-width:900px){
  .dg-vn{position:static;transform:none;width:auto;max-width:1340px;
    margin:clamp(46px,9vw,64px) var(--rand) 0}
}

/* ═══════════════════════════════════════════════════════════════════════
   BEFUND · DIE ACHSE (24.08., abends)
   Das Raster aus sechs Platten ist ersetzt. Die sechs moeglichen Ursachen
   liegen als Stationen auf EINER Linie, abwechselnd darueber und darunter,
   und ganz am Ende der Linie steht der Punkt, an dem es sichtbar wird.
   Damit steht die These der Sektion als Bild da: das Sichtbare ist das
   Ende der Kette, nicht ihr Anfang.
   Abwechselnd, weil sechs Bloecke in einer Reihe wieder ein Raster waeren
   und sechs untereinander eine Liste.
   Diese Regeln stehen bewusst am Blattende - sie ueberschreiben die
   aelteren .dg-feld/.dg-kanal/.dg-sichtbar-Regeln weiter oben, ohne dass
   ich dort zwischen Kommentargrenzen herausschneiden muss (dabei sind
   hier schon einmal halbe Bloecke mitgegangen).
   ═══════════════════════════════════════════════════════════════════ */
.dg-buehne{margin-top:clamp(30px,4vh,44px)}
/* background und overflow MUESSEN hier zurueckgesetzt werden: die alte
   .dg-gleis-Regel weiter oben (Zeile ~310, vom entfernten dunklen Kopf)
   traegt einen weissen Verlauf und overflow:hidden. Meine Regel hat
   bisher nur height und position ueberschrieben - der Verlauf lag als
   heller Streifen ueber der ganzen Achse, und overflow:hidden hat die
   erste Station beschnitten. Ein wiederverwendeter Klassenname erbt
   alles, was nicht ausdruecklich neu gesetzt wird. */
.dg-gleis{position:relative;margin-top:26px;height:404px;
  background:none;overflow:visible}

/* Die Linie wird nach rechts kraeftiger: das Signal sammelt sich zum
   sichtbaren Punkt hin. */
.dg-linie{position:absolute;left:0;right:236px;top:50%;height:1px;z-index:0;
  background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.30))}
.dg-linie::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-radius:50%;background:#fff}

/* Die blaue Spur laeuft beim Fallwechsel von der weissen Platte nach
   links zurueck - die Bewegung der Diagnose. Traegt weiter die alten
   Klassennamen (.dg-kanal / .dg-feuer), damit das Seitenskript sie
   unveraendert findet. */
.dg-kanal{position:absolute;left:0;right:236px;top:50%;height:1px;z-index:1;
  grid-column:auto;grid-row:auto;align-self:auto;transform-origin:right center;
  background:linear-gradient(90deg,rgba(46,124,246,0),var(--signal));
  transform:scaleX(0);opacity:0}
.dg-kanal.dg-feuer{animation:dg-spur 620ms var(--aus) both}
@keyframes dg-spur{0%{transform:scaleX(0);opacity:0}18%{opacity:.9}
  100%{transform:scaleX(1);opacity:0}}

.dg-fall{position:absolute;left:0;right:236px;top:0;bottom:0;z-index:2}
.dg-fall[hidden]{display:none}

.dg-station{position:absolute;top:50%;width:1px}
.dg-punkt{position:absolute;left:-4.5px;top:-4.5px;width:9px;height:9px;border-radius:50%;
  background:var(--tief);box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)}
.dg-strebe{position:absolute;left:0;width:1px;background:rgba(255,255,255,.14)}
/* NICHT .dg-marke - der Name ist im Menue schon vergeben (Logo-Traeger,
   display:flex + line-height:0). Er hat die drei Zeilen nebeneinander
   gestellt und die Schrift auf Hoehe 0 gesetzt. */
/* left:0, nicht -2px: die erste Station steht auf der Container-Kante,
   und alles, was darueber hinaushaengt, wird abgeschnitten - das erste
   Zeichen jeder Zeile fehlte. */
.dg-mrk{position:absolute;left:0;width:168px}
.dg-snr{display:block;text-decoration:none;font-size:.6875rem;letter-spacing:.15em;font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.30);margin-bottom:7px}
.dg-sname{display:block;text-decoration:none;font-size:1rem;font-weight:600;letter-spacing:-.02em;margin-bottom:6px;
  color:#fff}
.dg-sfrage{display:block;text-decoration:none;font-size:.84375rem;line-height:1.55;color:rgba(255,255,255,.58);
  text-wrap:pretty}

.dg-oben .dg-strebe{bottom:9px;height:48px}
.dg-oben .dg-mrk{bottom:65px}
.dg-unten .dg-strebe{top:9px;height:48px}
.dg-unten .dg-mrk{top:65px}

.dg-s1{left:0}    .dg-s2{left:16%} .dg-s3{left:32%}
.dg-s4{left:48%}  .dg-s5{left:64%} .dg-s6{left:80%}

.dg-sichtbar{position:absolute;right:0;top:50%;transform:translateY(-50%);width:212px;
  grid-column:auto;grid-row:auto;z-index:3}
.dg-sicht-schild{margin-bottom:12px;font-size:.75rem}
.dg-sichtbar .dg-st-weiss{padding:22px 20px 24px;border-radius:16px}
.dg-sichtbar .dg-st-weiss h3{font-size:1.1875rem;margin-bottom:9px}

/* Auftritt rueckwaerts: 06 zuerst, 01 zuletzt. Staffelung 55 ms,
   Dauer 240 ms - die letzte Station steht nach 0,52 s. Ein
   Reiterwechsel ist Bedienung, keine Vorfuehrung. */
.dg-fall:not([hidden]) .dg-station{animation:dg-stat 240ms var(--aus-ui) both}
@keyframes dg-stat{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dg-fall:not([hidden]) .dg-s6{animation-delay:0ms}
.dg-fall:not([hidden]) .dg-s5{animation-delay:55ms}
.dg-fall:not([hidden]) .dg-s4{animation-delay:110ms}
.dg-fall:not([hidden]) .dg-s3{animation-delay:165ms}
.dg-fall:not([hidden]) .dg-s2{animation-delay:220ms}
.dg-fall:not([hidden]) .dg-s1{animation-delay:275ms}

@media (max-width:1180px){
  .dg-mrk{width:142px}
  .dg-linie,.dg-kanal,.dg-fall{right:196px}
  .dg-sichtbar{width:196px}
}
/* Unter 900 px kippt die Achse in die Senkrechte: die Stationen stehen
   untereinander, alle Marken rechts der Linie. Nicht dieselbe Zeichnung
   kleiner, sondern eine gedrehte. */
@media (max-width:900px){
  .dg-gleis{height:auto;padding-left:26px}
  .dg-linie{left:0;right:auto;top:0;bottom:104px;width:1px;height:auto;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.30))}
  .dg-linie::after{right:auto;left:-3px;top:auto;bottom:-4px}
  .dg-kanal{left:0;right:auto;top:0;bottom:104px;width:1px;height:auto;
    transform-origin:bottom center;transform:scaleY(0);
    background:linear-gradient(180deg,rgba(46,124,246,0),var(--signal))}
  .dg-kanal.dg-feuer{animation:dg-spur-hoch 620ms var(--aus) both}
  @keyframes dg-spur-hoch{0%{transform:scaleY(0);opacity:0}18%{opacity:.9}
    100%{transform:scaleY(1);opacity:0}}
  .dg-fall{position:static;right:auto}
  .dg-station{position:relative;top:auto;left:auto !important;width:auto;
    padding:0 0 30px 26px}
  .dg-punkt{left:-30px;top:5px}
  .dg-strebe,.dg-oben .dg-strebe,.dg-unten .dg-strebe{left:-30px;top:9px;width:26px;height:1px;
    bottom:auto}
  .dg-mrk,.dg-oben .dg-mrk,.dg-unten .dg-mrk{position:static;width:auto;bottom:auto;top:auto}
  .dg-sichtbar{position:static;transform:none;width:auto;max-width:340px;margin-top:10px}
}
@media (prefers-reduced-motion:reduce){
  .dg-fall:not([hidden]) .dg-station{animation:none;opacity:1;transform:none}
  .dg-kanal{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   DIE NAHT (24.08., spaet)
   Zwischen dem dunklen Akt und dem hellen stiess bisher Kante auf Kante:
   ein rasiermesserscharfer schwarz/weiss-Schnitt ueber die volle Breite.
   Die Startseite loest das nicht mit einer Rampe (ein Grauband macht es
   schlechter - das ist dort schon einmal gemessen worden), sondern mit
   einem SEHR grossen, SEHR blassen Kreisbogen, der die Grenze kreuzt.
   Gemessen aus ihrem Blatt (.naht / .f-naht-i):
     aspect-ratio:1 · width:min(1400px,140vw) · border:1px · radius:50%
     top:-1px · left:50% · translateX(-50%)
   Hier braucht es ZWEI Boegen: der obere haelt auf schwarzem Grund
   (weiss), der untere auf weissem (Tinte). Ein einzelner Rand waere auf
   einer der beiden Seiten unsichtbar - auf der Startseite liegen beide
   Nahtseiten hell, deshalb reicht ihr einer Farbwert.
   ═══════════════════════════════════════════════════════════════════ */
/* Der Bogen ist breiter als das Fenster (das ist der Punkt - nur sein
   flacher Scheitel soll zu sehen sein). Ohne Klippfenster erzeugt er
   Querscroll: gemessen 135 px auf 768. Deshalb ein Band um die Grenze,
   das ihn seitlich UND nach oben/unten beschneidet. */
.dg-naht{position:relative;height:0;z-index:2;pointer-events:none}
.dg-naht.dg-rv{opacity:1;transform:none}
.dg-naht-in{position:absolute;left:0;right:0;top:-140px;height:280px;overflow:hidden}
.dg-naht i{position:absolute;left:50%;top:80px;width:min(1400px,140vw);aspect-ratio:1;
  border-radius:50%;border:1px solid transparent;
  transform:translateX(-50%) scale(.965);opacity:0;
  transition:opacity 900ms var(--aus),transform 1100ms var(--aus)}
/* Geklippt wird an der GRENZE, nicht an der Kreishaelfte: der Scheitel
   steht 60 px ueber der Kante, sein Stueck oberhalb ist weiss (auf
   Schwarz sichtbar), alles darunter Tinte (auf Weiss sichtbar). Vorher
   lag der ganze Bogen unterhalb - der weisse Rand war auf Weiss
   unsichtbar und der dunkle 700 px zu tief. */
.dg-naht i:nth-child(1){border-color:rgba(255,255,255,.20);
  clip-path:inset(0 0 calc(100% - 60px) 0)}
.dg-naht i:nth-child(2){border-color:rgba(11,12,14,.13);clip-path:inset(60px 0 0 0);
  transition-delay:120ms}
.dg-naht.dg-da i{opacity:1;transform:translateX(-50%) scale(1)}
@media (prefers-reduced-motion:reduce){
  .dg-naht i{opacity:1;transform:translateX(-50%);transition:none}
}

/* ── Die drei Zonen: die Reduktion muss man SEHEN ──────────────────────
   Bisher fielen die zehn, die nicht weiterkommen, nur auf opacity .32 -
   eine Abblendung, kein Vorgang. Jetzt treten sie zurueck: kleiner,
   unscharf, fast weg - und zwar RUECKWAERTS gestaffelt, damit es sich
   liest wie ein Aussortieren und nicht wie ein Schalter. Sie behalten
   ihren Platz im Fluss, sonst springen die Verbleibenden.
   Die vier, die bleiben, heben sich gleichzeitig an. */
.dg-koerner > div{transition:opacity 420ms var(--aus),transform 420ms var(--aus),
  filter 420ms var(--aus),background 420ms var(--aus),color 420ms var(--aus)}
.dg-s2 .dg-koerner > div,.dg-s3 .dg-koerner > div{
  opacity:.13;transform:scale(.92);filter:blur(1.4px)}
.dg-s2 .dg-koerner > div:nth-child(14){transition-delay:0ms}
.dg-s2 .dg-koerner > div:nth-child(13){transition-delay:34ms}
.dg-s2 .dg-koerner > div:nth-child(12){transition-delay:68ms}
.dg-s2 .dg-koerner > div:nth-child(11){transition-delay:102ms}
.dg-s2 .dg-koerner > div:nth-child(10){transition-delay:136ms}
.dg-s2 .dg-koerner > div:nth-child(9){transition-delay:170ms}
.dg-s2 .dg-koerner > div:nth-child(8){transition-delay:204ms}
.dg-s2 .dg-koerner > div:nth-child(7){transition-delay:238ms}
.dg-s2 .dg-koerner > div:nth-child(6){transition-delay:272ms}
.dg-s2 .dg-koerner > div:nth-child(5){transition-delay:306ms}
.dg-s2 .dg-koerner > div:nth-child(4){transition-delay:340ms}
.dg-s2 .dg-koerner > div:nth-child(3){transition-delay:374ms}
.dg-s2 .dg-koerner > div:nth-child(2){transition-delay:408ms}
.dg-s2 .dg-koerner > div:nth-child(1){transition-delay:442ms}
/* Die Bleibenden gehen NICHT zurueck, sie kommen nach vorn. */
.dg-s2 .dg-koerner .dg-bleibt,.dg-s3 .dg-koerner .dg-bleibt{
  opacity:1;filter:none;transform:translateY(-2px) scale(1);
  transition-delay:480ms}

/* ═══════════ FUSS AUF SCHMALEN GERAETEN ═══════════════════════════
   Befund (390 px gemessen): .dg-fgrid ist ein Flex mit space-between
   und inhaltsbreiten Spalten - vier verschiedene Breiten (121/87/105/149)
   und Luecken von 142 und 96 px. Der Fuss sah zerrissen aus.
   Ein Raster mit zwei gleichen Spalten loest das; die Markenspalte nimmt
   die volle Breite. Gleiche Regel wie auf der Startseite, damit der Fuss
   ueberall identisch bricht. */
@media (max-width:700px){
  .dg-fgrid{
    display:grid;grid-template-columns:1fr 1fr;gap:34px 18px;
    justify-content:stretch;align-items:start}
  .dg-fgrid > *{width:auto;min-width:0}
  .dg-fgrid > *:first-child{grid-column:1 / -1}
  .dg-fgrid > *:last-child{grid-column:1 / -1}
  .dg-fclaim-zeile{
    display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;align-items:start}
  .dg-fbot{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:420px){
  .dg-fclaim-zeile{grid-template-columns:1fr}
}