/* ====================================================================
   base.css — gemeinsame Grundlage fuer ALLE Seiten
   --------------------------------------------------------------------
   Angelegt 08/2026 (Audit-Finding 5.6).

   Vorher gab es keine geteilte Ebene: Die Design-Tokens standen doppelt
   (--rd-* in redesign.css, wertgleich als --cs-* in case-study.css), und
   vier weitere Stylesheets hatten ueberhaupt keine. Wer eine Unterseite
   baute, konnte also gar keinen Token benutzen und schrieb Hex-Werte ins
   Markup. Genau daher stammt die Farbdrift: vier Cyan-Varianten und zwei
   Magentas fuer je eine gemeinte Farbe.

   Diese Datei wird als erstes Stylesheet auf jeder Seite geladen. Sie
   definiert die Tokens einmal und stellt die wiederkehrenden Text- und
   Farbklassen bereit.

   Bewusste Grenze: Die Klassen tragen Schrift und Farbe, aber KEINE
   Abstaende. Grund: redesign.css laedt spaeter und setzt dort
   ".rd-root h1, .rd-root h2, .rd-root h3 { margin:0 }" -- eine Regel mit
   hoeherer Spezifitaet als eine Klasse. Ein margin hier wuerde auf
   Ueberschriften still verpuffen. Wo ein Muster einen Abstand hatte,
   bleibt der am Element; das ist ehrlicher als ein Spezifitaets-Trick.
   ==================================================================== */

:root{
  --rd-bg:#050517;
  --rd-cyan:#17E2F6;
  --rd-magenta:#FC01F9;
  --rd-violet:#8B71F7;
  --rd-text:#f5f3ee;

  /* Abgeleitete Textstufen -- vorher als rgba(245,243,238,.x) inline */
  --rd-text-62:rgba(245,243,238,.62);
  --rd-text-55:rgba(245,243,238,.55);
  --rd-text-40:rgba(245,243,238,.4);

  --rd-mono:"JetBrains Mono",ui-monospace,monospace;
  --rd-sans:"Open Sans",sans-serif;
}

/* -- Farbklassen --------------------------------------------------- */
.rd-c-cyan    { color:var(--rd-cyan); }
.rd-c-violet  { color:var(--rd-violet); }
.rd-c-magenta { color:var(--rd-magenta); }
.rd-c-text    { color:var(--rd-text); }

/* -- Label, Chips, Meta (die 12px-Familie aus Finding 5.2) ---------- */
.rd-label      { font:500 13px var(--rd-mono); color:var(--rd-text-40); text-transform:uppercase; letter-spacing:.06em; }
.rd-label--lg  { font:600 13px var(--rd-mono); color:var(--rd-text-40); text-transform:uppercase; letter-spacing:.1em; }
.rd-chip       { font:500 13px var(--rd-mono); color:var(--rd-cyan); white-space:nowrap; }
.rd-meta       { font:400 13px var(--rd-mono); color:var(--rd-text-62); }

/* -- Ueberschriften und Werte -------------------------------------- */
.rd-mono-17    { font:600 17px var(--rd-mono); color:var(--rd-text); }
.rd-mono-17--b { font:700 17px var(--rd-mono); color:var(--rd-text); }
.rd-mono-20    { font:700 20px var(--rd-mono); color:var(--rd-text); }
.rd-value      { font:600 16px var(--rd-sans); color:var(--rd-text); }
.rd-skill-item { font:600 17px var(--rd-sans); color:var(--rd-cyan); text-shadow:0 4px 12px #000; }

/* -- Fliesstext ----------------------------------------------------- */
.rd-body       { font:400 14px/1.6 var(--rd-sans); color:var(--rd-text-55); }
.rd-body--w    { font:400 14px/1.6 var(--rd-sans); color:var(--rd-text-55); max-width:680px; }

/* ====================================================================
   Stufe 2 (Audit 5.6): wiederkehrende Komponenten-Muster
   --------------------------------------------------------------------
   Dieselbe Regel wie oben: Schrift, Farbe, Layout -- aber KEINE
   Aussenabstaende dort, wo eine Ueberschriften-Regel sie schlagen wuerde.
   Werte sind wertgleich zu den ersetzten Inline-Styles; wo ein Hex-Wert
   exakt einem Token entsprach, steht jetzt der Token.
   ==================================================================== */

/* -- Struktur ------------------------------------------------------- */
.rd-section-block{ max-width:1100px; margin:0 auto; border-top:1px solid rgba(255,255,255,.1); padding-top:60px; }
.rd-hr-top       { border-top:1px solid rgba(255,255,255,.12); }
.rd-icon-36      { width:36px; height:36px; margin:0 auto 20px; display:block; }

/* -- Zeilen und Tag-Reihen ------------------------------------------ */
.rd-row-12   { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.rd-tagrow   { display:flex; gap:8px; flex-wrap:wrap; }
.rd-tagrow--10{ display:flex; gap:10px; flex-wrap:wrap; }

/* -- Text ------------------------------------------------------------ */
.rd-sans-14-b { font:600 14px var(--rd-sans); }
.rd-cs-desc   { font:400 14px/1.5 var(--rd-sans); color:rgba(245,243,238,.65); max-width:720px; }
.rd-note      { font:400 14px var(--rd-sans); color:rgba(245,243,238,.5); }
.rd-label--08 { font:600 13px var(--rd-mono); color:var(--rd-text-62); letter-spacing:.08em; text-transform:uppercase; }

/* -- Links ----------------------------------------------------------- */
/* .rd-link-plain und .rd-link-muted wurden bewusst NICHT als Utility gefuehrt:
   Sie verlieren gegen Link-Regeln mit Typ-Selektor (.cs-root a), weil base.css
   zuerst laedt. Solche lokalen Overrides bleiben am Element. */

/* -- Pille in Violett (Wert entspricht --rd-violet) ------------------- */
.rd-pill--violet{ border-color:var(--rd-violet); color:var(--rd-violet); }