/* ==========================================================================
   MARKE · digitale-enteignung.de (L64)
   Eine Quelle für Farben, Schrift und die drei Zeichen der Seite:
     Ring  · das Markenzeichen, ein feiner roter Kreis. Markiert jeden Einstieg.
     Spur  · die Geldspur. Viele graue Wege, ein roter: der, dem man folgt.
     Satz  · der Leitsatz, groß gesetzt, an zwei Stellen der Seite.
   Regeln:
     Fließtext steht nie in Mono. Mono trägt Kennungen, Zahlen, Quellen und Labels.
     Rot ist Signal, keine Fläche. Kleine rote Schrift nur auf Schwarz (5,6:1).
   Wird auf allen Seiten der Hauptmarke als letztes Stylesheet geladen.
   Bruchstellen (nur zur Doku, CSS-Variablen gelten nicht in Media Queries):
     klein ≤ 480 · mittel ≤ 768 · breit ≤ 1100
   ========================================================================== */

:root{
  /* Farben. Kontraste auf Schwarz: --text-soft 8,3:1, --text-muted 6,2:1, --text-faint 4,2:1 (nur ab 18px),
     --red 5,6:1. Die Bündel in css/b tragen diese Werte nicht mehr selbst (L64). */
  --black:#000000;
  --surface-1:#070707;
  --surface-2:#0d0d0d;
  --grey-dark:#333333;
  --text:#e0e0e0;
  --white:#ffffff;
  --red:#FF2A2A;
  --green:#00FF41;
  --red-dim:rgba(255,42,42,0.1);
  --red-border:rgba(255,42,42,0.2);
  --border:rgba(255,255,255,0.06);
  --line:rgba(224,224,224,0.16);
  --text-soft:rgba(224,224,224,0.72);
  --text-muted:rgba(224,224,224,0.62);
  --text-faint:rgba(224,224,224,0.5);
  /* Schrift */
  --display:'Barlow Semi Condensed',sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --mono:'JetBrains Mono',monospace;
  /* Größen */
  --fs-label:12px;
  --fs-body:1.0625rem;
  /* Ring */
  --ring:9px;
}

/* --------------------------------------------------------------------------
   RING · ersetzt den grauen Strich vor jedem Einstiegslabel
   -------------------------------------------------------------------------- */
.hero-eyebrow::before,.gl-eyebrow::before,.page-eyebrow::before{
  content:'';width:var(--ring);height:var(--ring);background:none;
  border:1.5px solid var(--red);border-radius:50%;box-sizing:border-box;flex-shrink:0
}
.hero-eyebrow,.gl-eyebrow,.page-eyebrow{display:flex;align-items:center;gap:0.7rem;letter-spacing:0.16em}
.section-label,.sec-eyebrow,.related-label,.key-points-label{display:flex;align-items:center;gap:0.7rem}
.section-label::before,.sec-eyebrow::before,.related-label::before,.key-points-label::before{
  content:'';width:var(--ring);height:var(--ring);border:1.5px solid var(--red);
  border-radius:50%;box-sizing:border-box;flex-shrink:0
}

/* Kein blinkender Cursor, kein pulsierender Punkt: Ruhe ist Teil der Marke */
.cursor{display:none!important}
.pulse-dot{animation:none!important;width:var(--ring);height:var(--ring);background:none!important;
  border:1.5px solid var(--red);box-shadow:none!important;box-sizing:border-box}
.latest-pulse{color:var(--text-muted)}

/* --------------------------------------------------------------------------
   STARTSEITE · Hero
   -------------------------------------------------------------------------- */
.hero-left{border-right:0}
.hero-right{background:transparent;position:relative}
.hero-right::before{
  content:'';position:absolute;inset:12% 18%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,42,42,0.10),rgba(255,42,42,0) 70%);
  pointer-events:none
}
.hero-right>*{position:relative}
.hero-photo{width:210px;height:210px}

/* SPUR · Schema einer Geldspur unter dem Hero.
   Die grauen Wege erscheinen ruhig, nur der rote Weg wird gezogen: der, dem die Analyse folgt. */
.spur{margin:3.25rem 0 0;max-width:760px;opacity:0;animation:fadeUp 0.6s 0.6s forwards}
.spur-svg{display:block;width:100%;height:auto;overflow:visible}
.spur-svg path,.spur-svg circle{fill:none;vector-effect:non-scaling-stroke}
.sp-l{stroke:rgba(224,224,224,0.34);stroke-width:1;opacity:0;animation:spurAuf .8s .8s ease-out forwards}
.sp-n{stroke:rgba(224,224,224,0.5);stroke-width:1;fill:var(--black)!important;opacity:0;animation:spurAuf .8s .8s ease-out forwards}
.sp-t path{stroke:var(--red);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;
  animation:spurZiehen .55s cubic-bezier(.4,0,.2,1) forwards}
.sp-t .t0{animation-delay:1.5s}.sp-t .t1{animation-delay:2.0s}.sp-t .t2{animation-delay:2.5s}.sp-t .t3{animation-delay:3.0s}
.sp-nt circle{fill:var(--black);stroke:var(--red);stroke-width:1.8;opacity:0;animation:spurAuf .25s ease-out forwards}
.sp-nt .n0{animation-delay:1.3s}.sp-nt .n1{animation-delay:2.0s}.sp-nt .n2{animation-delay:2.5s}.sp-nt .n3{animation-delay:3.0s}.sp-nt .n4{animation-delay:3.5s}
.spur figcaption{display:flex;justify-content:space-between;gap:1rem;margin-top:0.8rem;
  font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted)}
.spur figcaption span:nth-child(2){color:var(--red)}
@keyframes spurZiehen{to{stroke-dashoffset:0}}
@keyframes spurAuf{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .spur,.sp-l,.sp-n,.sp-nt circle{opacity:1;animation:none}
  .sp-t path{stroke-dashoffset:0;animation:none}
}

/* --------------------------------------------------------------------------
   STARTSEITE · Was, warum, wie
   Drei Spalten auf Schwarz, jede beginnt mit einem Knoten auf der Linie.
   -------------------------------------------------------------------------- */
.ww-grid{background:none;gap:0 2.5rem}
.ww-item{background:none;padding:1.6rem 0 0.5rem;border-top:1px solid var(--line);position:relative}
.ww-item::before{content:'';position:absolute;top:-5px;left:0;width:var(--ring);height:var(--ring);
  border:1.5px solid var(--red);border-radius:50%;background:var(--black);box-sizing:border-box}
.ww-k{color:var(--red);letter-spacing:0.18em}
.ww-item p{font-family:var(--display);font-size:1.0625rem;line-height:1.7;color:var(--text-soft)}

/* SATZ · der Leitsatz */
.satz{padding:5.5rem 2rem 5.5rem;border-bottom:1px solid var(--border);margin:0 0 3.5rem}
.ww{border-bottom:1px solid var(--border)}
/* Das Markenzeichen in voller Größe: Ring mit Schein nach außen, nur auf breiten Bildschirmen */
@media (min-width:900px){
  .satz-in{display:grid;grid-template-columns:1fr auto;align-items:center;gap:3rem}
  .satz-in::after{content:'';width:clamp(150px,15vw,210px);aspect-ratio:1;border:2px solid var(--red);border-radius:50%;
    box-shadow:0 0 18px rgba(255,42,42,0.35),0 0 46px rgba(255,42,42,0.16),0 0 96px rgba(255,42,42,0.08);margin-right:6%}
}
.satz-in{max-width:1200px;margin:0 auto}
.satz blockquote{margin:0}
.satz .satz-text{font-family:var(--serif);font-weight:500;font-size:clamp(2.05rem,5.6vw,4.4rem);
  line-height:1.08;letter-spacing:-0.015em;color:var(--white);max-width:18ch;text-wrap:balance}
.satz .pt{color:var(--red)}
.satz .satz-quelle{display:flex;align-items:center;gap:0.7rem;margin-top:2rem;font-family:var(--mono);
  font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-muted)}
.satz .satz-quelle::before{content:'';width:var(--ring);height:var(--ring);border:1.5px solid var(--red);border-radius:50%;box-sizing:border-box}

/* Über mich: derselbe Satz, kleiner, ohne Kasten */
.quote-block{background:none;border-left:0;padding:0;margin:0 0 2.5rem}
.quote-block p,.quote-block strong,.quote-block b{font-family:var(--serif)!important;font-weight:500!important;
  font-size:clamp(1.6rem,3vw,2.3rem)!important;line-height:1.15!important;letter-spacing:-0.01em;color:var(--white)}

/* --------------------------------------------------------------------------
   LESBARKEIT · Fließtext aus Mono in die Hausschrift
   -------------------------------------------------------------------------- */
.zg-card p,.u-1dcbbb,.gl-sub,.rc-sub,.rc-mode-desc,.press-note,.form-note,.creds,.en-note,
.u-011030,.article-disclaimer,.nw-begriff,.latest-excerpt{
  font-family:var(--display)!important;letter-spacing:0!important
}
.zg-card p{font-size:1rem;line-height:1.65}
.gl-sub,.rc-sub,.u-1dcbbb,.u-011030,.en-note,.creds{font-size:1.0625rem!important;line-height:1.7!important}
.rc-mode-desc,.latest-excerpt{font-size:1rem!important;line-height:1.65!important}
.article-disclaimer,.press-note,.form-note{font-size:0.9375rem!important;line-height:1.65!important}
.nw-begriff{font-size:1rem;line-height:1.7}
.gl-author{font-family:var(--display);font-size:0.95rem;letter-spacing:0}

/* Startseite: Wege der Lesergruppen ohne Grün, als Link in der Hausschrift */
.zg-weg{font-family:var(--display);font-size:1rem;font-weight:600;letter-spacing:0;color:var(--white);
  text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px;text-decoration-thickness:1px}
.zg-card:hover,.zg-card:focus-visible{border-color:var(--red-border)}
.zg-card:hover .zg-weg{text-decoration-thickness:2px}
.nl-title{line-height:1.15}
/* Grundlagen-Leiste der Startseite: ohne graue Fläche, Links in der Hausschrift */
.u-f35d24{background:none;border:0;border-top:1px solid var(--line);padding:2.25rem 0 0;position:relative}
.u-f35d24::before{content:'';position:absolute;top:-5px;left:0;width:var(--ring);height:var(--ring);border:1.5px solid var(--red);border-radius:50%;background:var(--black);box-sizing:border-box}
.u-aeef49{font-family:var(--display);font-size:1rem;letter-spacing:0;color:var(--text);line-height:1.45}
.u-aeef49:hover,a.u-aeef49:focus-visible{border-color:var(--red-border);background:var(--red-dim)}
.pub-excerpt{max-width:68ch;font-size:1rem;color:var(--text-soft)}
.latest-pulse{display:flex;flex-direction:row;align-items:center;gap:0.7rem}
.about-content p{max-width:68ch}

/* Glossar: Vertiefungsknopf nicht auf das folgende Label setzen */
.gl-vertiefung{margin-bottom:2rem}

/* Links im Fließtext, die keine eigene Gestaltung haben */
:where(main p, main li) a:where(:not([class])){color:inherit;text-decoration-color:var(--red);text-underline-offset:3px}

/* --------------------------------------------------------------------------
   FUSS · die Spur endet in einem Ring
   -------------------------------------------------------------------------- */
.site-footer{position:relative;border-top:1px solid var(--line)}
.site-footer::before{content:'';position:absolute;top:-5px;left:max(2.5rem,calc((100% - 1200px) / 2));
  width:var(--ring);height:var(--ring);border:1.5px solid var(--red);border-radius:50%;
  background:var(--black);box-sizing:border-box}

/* Zeilenumbruch statt Mittelpunkt am Zeilenende (schmale Bildschirme) */
@media (max-width:480px){.hb{display:block;height:0;overflow:hidden}}

@media (max-width:768px){
  .hero-left{padding-left:1.25rem;padding-right:1.25rem}
  .ww,.zg,.start-werk{padding-left:1.25rem;padding-right:1.25rem}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions a{text-align:center;padding-left:1rem;padding-right:1rem}
  .spur{margin-top:2.25rem}
  .spur figcaption{font-size:10px;letter-spacing:0.1em}
  .ww-grid{gap:0}
  .ww-item{padding:1.4rem 0 1.6rem}
  .satz{padding:3.5rem 1.25rem 3.25rem;margin:0 0 2.5rem}
  .site-footer::before{left:1.25rem}
}
.quote-block .pt{color:var(--red)}

/* 404 · Die Spur reißt ab */
.glitch{display:inline-flex;align-items:center;gap:0.7rem;letter-spacing:0.16em}
.glitch::before{content:''!important;width:var(--ring);height:var(--ring);border:1.5px solid var(--red);border-radius:50%;box-sizing:border-box;animation:none!important}
.glitch::after{content:none!important}
.spur-404{display:block;width:min(420px,86vw);height:auto;margin:0 auto 2rem;overflow:visible}
.s4-rot{fill:none;stroke:var(--red);stroke-width:1.6;stroke-linecap:round}
.s4-weg{fill:none;stroke:rgba(224,224,224,0.55);stroke-width:1.2;stroke-dasharray:3 6;stroke-linecap:round}
.s4-k{fill:var(--black);stroke:var(--red);stroke-width:1.6}
.s4-leer{fill:none;stroke:rgba(224,224,224,0.55);stroke-width:1.2;stroke-dasharray:3 4}

/* Chain Trace Academy: Spielfläche mit Rand statt bündig am Bildschirmrand */
#cta-root{max-width:1200px;margin:2.5rem auto 0;padding:0 2.5rem}
@media (max-width:768px){#cta-root{padding:0 1.25rem}}

/* L68: Artikelkopf ohne Titelgrafik, Metazeile auf dem Handy enger */
@media (max-width:600px){.article-meta-top,.meta-top{gap:.55rem 1rem;margin-bottom:1.75rem}}