/* ============================================================================
   Projekt-Deep-Dives — gemeinsames Stylesheet für /projekte/*.html
   ----------------------------------------------------------------------------
   Bewusste Abweichung von der Single-File-Regel: Drei Seiten teilen sich
   Chrome und Bausteine, dreifach inline wäre der teurere Pflegeort.
   index.html und 404.html bleiben unangetastet self-contained.

   Farbwerte sind (wie in 404.html) eine KOPIE der :root-Variablen aus
   index.html — bei einem Akzentwechsel hier mitziehen.
   ========================================================================== */

:root {
  --deep: #0e1116;
  --deep-line: #1c232e;
  --code-ink: #3d4a5c;
  --paper: #faf8f3;
  --paper-2: #f1ede4;
  --ink: #1c1b18;
  --muted: #6e6759;
  --accent: #356eb3;
  --accent-soft: #d4deea;
  --accent-ink: #2e5f9b;
  --accent-lite: #7ba5d8;
  --accent-glow: 123, 165, 216;
  --green: #3f9142;
  --radius: 18px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Zweisprachigkeit ohne Dict: Beide Sprachen stehen im HTML, versteckt wird per
   Attribut. Nur ausblenden, nie ein display erzwingen — so behalten Blöcke,
   Zeilen und Tabellenzellen ihren natürlichen Anzeigetyp. */
html[lang="de"] [data-l="en"],
html[lang="en"] [data-l="de"] { display: none !important; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
nav :focus-visible, footer :focus-visible { outline-color: var(--accent-lite); }
html { scroll-behavior: smooth; }

body {
  background: var(--deep);
  background-image: linear-gradient(var(--deep-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--deep-line) 1px, transparent 1px);
  background-size: 52px 52px;
  background-attachment: fixed;
  color: var(--ink);
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 16.5px; line-height: 1.65;
  overflow-x: hidden;
}
.serif { font-family: Georgia, "Times New Roman", serif; }
.mono  { font-family: "SF Mono", ui-monospace, Menlo, monospace; }
.wrap  { max-width: 1020px; margin: 0 auto; padding: 0 22px; position: relative; z-index: 1; }

/* ---------- Code-Ebene im Hintergrund (1:1 aus index.html) ------------------- */
#codelayer { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
/* Etwas leiser als auf der Startseite (dort .55): Der Seitenkopf liegt hier ohne
   Papierkarte direkt auf der Code-Ebene, bei .55 läuft der Code sichtbar durch
   den Fließtext des Untertitels. */
#codelayer pre {
  position: absolute; color: var(--code-ink); font-size: 13px; line-height: 1.8;
  font-family: "SF Mono", ui-monospace, Menlo, monospace; opacity: .38; white-space: pre;
}

/* ---------- Pixel-Zerfall: Tiles und Code-Glyphen --------------------------- */
.tile {
  position: absolute; z-index: 2; background: var(--paper); pointer-events: none;
  animation: drift 6s ease-in-out infinite alternate;
}
.tile.dark  { background: var(--deep);  animation-name: fall; }
.tile.paper { background: var(--paper); animation-name: fall; }
.code-glyph {
  position: absolute; z-index: 2; pointer-events: none;
  font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 11px; color: #6fbf8e;
  animation: fall 6s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate(8px, -6px) rotate(10deg); } }
@keyframes fall  { to { transform: translate(3px, 11px) rotate(-8deg); } }
/* Karteninhalt über die Deko legen, sonst liegen Tiles auf dem Text */
.card > *:not(.tile):not(.code-glyph) { position: relative; z-index: 3; }

/* ---------- Sprachwechsel-Choreografie (Werte 1:1 aus index.html) ------------ */
.lang-out {
  opacity: 0 !important; transform: scale(.988) !important;
  transition: opacity .26s ease, transform .26s ease !important;
}
.rvl.lang-fast { transform: scale(.992); }
.rvl.lang-fast.in {
  transform: none;
  transition: opacity .5s cubic-bezier(.2, .7, .3, 1), transform .5s cubic-bezier(.2, .7, .3, 1);
}
.lb-layer { position: fixed; inset: 0; pointer-events: none; z-index: 34; }
.lb-layer span { position: absolute; will-change: transform, opacity; }
.lb-t { background: var(--paper); }
.lb-t.dk { background: #10151d; }
.lb-g { font-family: "SF Mono", ui-monospace, Menlo, monospace; color: #4da76a; }
.lb-out { animation: lbout .55s ease-out forwards; }
.lb-in  { animation: lbin .55s ease-out forwards; }
@keyframes lbout { from { transform: translate(0, 0); opacity: .95; } to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
@keyframes lbin  { from { transform: translate(var(--dx), var(--dy)); opacity: .95; } to { transform: translate(0, 0); opacity: 0; } }

/* ---------- Überschriften-Decode (grüne Mono-Glyphen) ----------------------- */
.dc  { display: inline-block; }
.dcw { white-space: nowrap; }
/* Decode-Grün ist #4da76a, dasselbe wie auf Hauptseite und 404 — NICHT --green
   und nicht das hellere #6fbf8e der Code-Werte (auf Papier nur 2,08:1). */
.dc.x   { font-family: "SF Mono", ui-monospace, Menlo, monospace; color: #4da76a; }
.dc.pop { animation: dcpop .24s ease; }
@keyframes dcpop { 0% { transform: scale(1.3); color: var(--accent); } 100% { transform: scale(1); } }
/* Auf der dunklen Ebene (Kopf-h1) darf der Pop nicht in Papier-Akzent kippen */
header.pj .dc.pop { animation-name: dcpop-dark; }
@keyframes dcpop-dark { 0% { transform: scale(1.3); color: var(--accent-lite); } 100% { transform: scale(1); } }

/* Spotlight: gleiche Werte und gleiche Guards wie Hauptseite und 404 */
#spot {
  position: fixed; left: -720px; top: -720px; width: 1440px; height: 1440px;
  border-radius: 50%; pointer-events: none; z-index: 35; mix-blend-mode: screen;
  background: radial-gradient(circle closest-side,
    rgba(var(--accent-glow), .16), rgba(var(--accent-glow), .062) 45%, transparent 70%);
  opacity: 0; transition: opacity .6s; will-change: transform;
}

/* ---------- Kopfzeile (gekürzte Fassung der Hauptseiten-Nav, wie 404.html) --- */
nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(14,17,22,.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--deep-line);
}
nav .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; height: 62px; }
.logo {
  color: var(--paper); text-decoration: none; font-weight: 600;
  font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 14.5px;
}
.logo::before { content: "~/"; color: var(--green); }
nav .links { display: flex; align-items: center; gap: 22px; }
nav .links a { color: #8b95a5; text-decoration: none; font-size: 14.5px; }
nav .links a:hover { color: var(--paper); }

.lang { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: #8b95a5; }
.lang > span { transition: color .3s ease; }
.lang .on { color: var(--paper); }
.switch {
  width: 46px; height: 26px; border-radius: 100px; background: var(--accent);
  position: relative; cursor: pointer; transition: background .25s; border: none;
}
/* Gleitet statt zu springen: iOS-Kurve (schneller Antritt, weiche Landung, KEIN
   Überschwingen). Werte identisch zur Hauptseite und zur 404. */
.switch .knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 100px;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transform-origin: left center;
  transition: transform .34s cubic-bezier(.32,.72,0,1);
}
/* transform-origin wandert mit: Der Knopf zieht sich beim Drücken in Fahrtrichtung
   lang (iOS-Detail) und muss dabei im Gleis bleiben, nicht über die Kante wachsen. */
.switch.en .knob { transform: translateX(20px); transform-origin: right center; }
.switch:active .knob { transform: scaleX(1.14); }
.switch.en:active .knob { transform: translateX(20px) scaleX(1.14); }

.burger {
  display: none; background: none; border: 1px solid var(--deep-line); color: var(--paper);
  border-radius: 8px; padding: 5px 13px; font-size: 19px; cursor: pointer;
}
.burger:active { transform: scale(.95); }
.mobile-menu {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--deep); border-bottom: 1px solid var(--deep-line);
  padding: 6px 16px 20px; flex-direction: column; z-index: 19;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  color: var(--paper); text-decoration: none; padding: 14px 2px;
  font-size: 16.5px; border-bottom: 1px solid var(--deep-line);
}
.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-menu .lang { margin-top: 18px; justify-content: center; font-size: 14px; }

/* ---------- Kopf des Projekts ---------------------------------------------- */
/* NUR die Längsseiten setzen: header trägt selbst .wrap, und ein padding-Kurzform
   überschreibt hier dessen `padding: 0 22px` (header.pj ist spezifischer als
   .wrap). Genau das ließ Brotkrume, h1, Untertitel und Buttons am Handy und auf
   allen Viewports unter 1020px direkt am Seitenrand kleben. */
header.pj { padding-top: 46px; padding-bottom: 8px; }
.pj-crumb {
  font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 12.5px;
  color: #8b95a5; margin-bottom: 20px;
}
.pj-crumb a { color: var(--accent-lite); text-decoration: none; }
.pj-crumb a:hover { text-decoration: underline; }
.pj-tag {
  font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-lite); margin-bottom: 14px;
}
header.pj h1 {
  font-family: Georgia, "Times New Roman", serif; font-weight: 400; color: var(--paper);
  font-size: clamp(30px, 5.4vw, 44px); line-height: 1.14; letter-spacing: -.01em;
}
header.pj h1 em { font-style: italic; color: var(--accent-lite); }
header.pj .sub { color: #9aa4b3; font-size: 18px; max-width: 64ch; margin-top: 16px; }

/* Fakten-Zeile: Kurs, Jahr, Rolle, Umfang — als Code-Zeile, nicht als Fließtext */
.pj-meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px;
  font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 13px;
}
.pj-meta div { color: #9aa4b3; }
.pj-meta b { color: var(--accent-lite); font-weight: 600; }
.pj-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

/* ---------- Karten ---------------------------------------------------------- */
section { padding: 22px 0; scroll-margin-top: 74px; }
.card {
  background: var(--paper); border-radius: var(--radius); padding: clamp(26px, 4.2vw, 44px);
  box-shadow: 0 18px 50px rgba(0,0,0,.35); position: relative;
}
.card.dark { background: var(--deep); border: 1px solid var(--deep-line); color: var(--paper); }
.card.dark h2, .card.dark h3 { color: var(--paper); }
.card.dark p, .card.dark li { color: #9aa4b3; }

.sec-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 26px; }
.sec-num {
  font-size: 12.5px; color: var(--accent); font-weight: 700; flex: none;
  font-family: "SF Mono", ui-monospace, monospace;
}
.card.dark .sec-num { color: var(--accent-lite); }
h2 { font-family: Georgia, "Times New Roman", serif; font-size: 27px; font-weight: 400; letter-spacing: -.01em; }
h3 { font-size: 17px; font-weight: 700; margin: 26px 0 8px; }
h3:first-child { margin-top: 0; }
.card p { color: var(--muted); font-size: 15.5px; margin-bottom: 14px; }
.card p:last-child { margin-bottom: 0; }
.card p b, .card li b { color: var(--ink); font-weight: 700; }
.card.dark p b, .card.dark li b { color: var(--paper); }
.card ul, .card ol { margin: 0 0 14px; padding-left: 20px; }
.card li { color: var(--muted); font-size: 15.5px; margin: 6px 0; }
.card li::marker { color: var(--accent); }
.card.dark li::marker { color: var(--accent-lite); }
.card a { color: var(--accent); font-weight: 600; }
.card.dark a { color: var(--accent-lite); }

.lead { font-size: 18px !important; color: var(--ink) !important; }
.card.dark .lead { color: var(--paper) !important; }

/* Chips wie auf der Startseite, inklusive Aufhellen in der Akzentfarbe beim
   Drüberfahren — dort unguarded, hier deshalb auch (bewusst wertgleich). */
.chip { display: inline-block; font-size: 13.5px; font-weight: 600; padding: 6px 14px; border-radius: 100px; background: var(--paper-2); margin: 0 5px 7px 0; transition: all .15s; }
.chip:hover { background: var(--accent); color: #fff; }
.pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 100px; background: var(--accent-soft); color: var(--accent-ink); margin: 6px 4px 0 0; }

/* max-width als Sicherung: Die Breite wird beim Sprachwechsel auf max(DE, EN)
   festgenagelt, und auf sehr schmalen Geräten könnte die längere Beschriftung
   sonst über den Rand schieben. */
.btn { display: inline-block; padding: 13px 26px; text-decoration: none; font-size: 15px; font-weight: 600; border-radius: 10px; transition: all .18s; max-width: 100%; text-align: center; }
.btn:active { transform: scale(.95); }
.btn-dark  { background: var(--paper); color: var(--ink); }
.btn-dark:hover { background: var(--accent-lite); transform: translateY(-1px); }
.btn-ghost { border: 1.5px solid #4a5666; color: #c3ccd9; }
.btn-ghost:hover { border-color: var(--accent-lite); color: var(--accent-lite); }
.card .btn-dark { background: var(--ink); color: var(--paper); }
.card .btn-dark:hover { background: var(--accent); }
.card .btn-ghost { border-color: var(--ink); color: var(--ink); }
.card .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Kennzahlen ------------------------------------------------------ */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 22px 0; }
.fact { background: var(--paper-2); border-radius: 12px; padding: 16px 18px; }
.card.dark .fact { background: #151b24; }
.fact .tag { display: block; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
/* Zahl groß und farbig, Einheit klein und grau daneben. Vorher stand die Einheit
   im selben Serifen-Grad wie die Zahl ("1 Datei"), dadurch war die Zeile in
   dieser Kachel nur 15px statt 25px hoch und Wert wie Unterzeile saßen höher als
   in den Nachbarkacheln. min-height nagelt die Zeile zusätzlich fest, damit
   Kacheln mit und ohne Einheit garantiert auf derselben Höhe liegen. */
.fact b {
  display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap;
  min-height: 1.2em; font-family: Georgia, serif; font-size: 25px; line-height: 1.2;
  color: var(--accent); font-weight: 400;
}
.fact b i {
  font-style: normal; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .01em;
}
.card.dark .fact b { color: var(--accent-lite); }
.fact > span:not(.tag) { font-size: 12.5px; color: var(--muted); display: block; margin-top: 2px; }

/* Ein Case-Block auf der Consulting-Seite: Kurs-Kicker, Titel, dann Zeilen aus
   Schlagwort und Text. Die Schlagwort-Spalte macht die vier Cases vergleichbar,
   ohne dass daraus eine Tabelle wird. */
.case { padding: 24px 0; border-top: 1px solid var(--paper-2); }
.case:first-of-type { border-top: none; padding-top: 4px; }
.case-kick {
  font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 11px;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 6px;
}
.case h3 { font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 400; margin: 0 0 14px; }
.case-row { display: grid; grid-template-columns: 128px 1fr; gap: 6px 20px; margin-bottom: 12px; }
.case-row:last-child { margin-bottom: 0; }
.case-row .k {
  font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 11.5px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding-top: 3px;
}
.case-row .v { font-size: 15px; color: var(--muted); }
.case-row .v b { color: var(--ink); font-weight: 700; }
/* Die Lernzeile schließt jeden Case ab und ist deshalb abgesetzt: Bis hierher
   steht, was passiert ist, ab hier, was hängen geblieben ist. */
.case-row.learn .k { color: var(--accent-ink); }
.case-row.learn .v { color: var(--ink); }
.case-skills { margin-top: 14px; }
.case-skills .chip { font-size: 12.5px; padding: 4px 11px; }

/* Skills-Zeile am Ende einer Projektseite, gleiche Chips wie auf der Startseite */
.skills-out { margin-top: 20px; }
/* Die Mini-Überschrift ist überall dieselbe, egal ob am Seitenende oder in einem
   Case-Block — sonst tragen manche Skill-Zeilen ein Label und andere nicht. */
.skills-out .lbl, .case-skills .lbl {
  display: block; font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.case-skills .lbl { margin-bottom: 8px; }

/* Hinweiskasten für Einschränkungen — bewusst ruhig, kein Warnrot */
.note {
  background: var(--paper-2); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0;
  padding: 16px 20px; margin: 20px 0;
}
.card.dark .note { background: #151b24; border-left-color: var(--accent-lite); }
.note p { font-size: 14.5px !important; margin-bottom: 8px; }
.note p:last-child { margin-bottom: 0; }
.note .tag {
  display: block; font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 6px;
}
.card.dark .note .tag { color: var(--accent-lite); }

/* ---------- Diagramme ------------------------------------------------------- */
/* Alles handgebautes Inline-SVG: Die CSP lässt keine Chart-Library zu, und eine
   wäre für drei Diagramme auch nicht die Mühe wert. */
.chart { margin: 24px 0 8px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart figcaption { font-size: 13px; color: var(--muted); margin-top: 14px; line-height: 1.55; }
.chart .lg { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 16px; font-size: 13px; color: var(--muted); }
.chart .lg span { display: flex; align-items: center; gap: 7px; }
.chart .lg i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.c-lbl { font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; font-size: 12.5px; fill: var(--muted); }
.c-val { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 12px; fill: var(--muted); }
.c-key { font-size: 13px; fill: var(--ink); font-weight: 600; }
.c-grid { stroke: #e3ddd0; stroke-width: 1; }
.c-axis { stroke: #c9c1b1; stroke-width: 1; }

/* Balken-Diagramm in HTML statt SVG: Beschriftungen brechen von selbst um,
   beide Sprachen laufen über dasselbe [data-l] wie der Fließtext, und die
   Breiten stehen als Prozent im style-Attribut direkt neben dem Zahlenwert.
   Zwei Reihen pro Zeile, Farbe trägt die Bedeutung: Akzent = das neue System,
   Tinte = das klassische. */
.bars { margin: 22px 0 4px; }
.bar-row {
  display: grid; grid-template-columns: minmax(140px, 200px) 1fr auto;
  gap: 6px 18px; align-items: center;
  padding: 13px 0; border-top: 1px solid var(--paper-2);
}
.bar-row:first-child { border-top: none; padding-top: 0; }
.bar-lbl { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.bar-lbl em {
  display: block; font-style: normal; font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-top: 2px;
}
.bar-track { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bar {
  height: 21px; border-radius: 0 4px 4px 0; min-width: 46px;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 8px;
}
.bar b { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 11.5px; font-weight: 700; color: #fff; }
/* Sehr kleine Werte: Die Mindestbreite oben würde den Balken optisch aufblasen
   (3 % sähen aus wie gut 10 %). Deshalb echte Breite und Beschriftung daneben. */
.bar.out { min-width: 0; padding-right: 0; position: relative; overflow: visible; }
.bar.out b { position: absolute; left: 100%; margin-left: 8px; color: var(--ink); white-space: nowrap; }
.b-a { background: var(--accent); }
.b-b { background: var(--ink); }
.bar-sig {
  font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 11.5px;
  color: var(--muted); white-space: nowrap; text-align: right;
}
.bar-sig s { text-decoration: none; color: var(--accent-ink); font-weight: 700; }
/* Achse unter den Balken, gleiche Spalten wie die Zeilen darüber */
.bar-axis { display: grid; grid-template-columns: minmax(140px, 200px) 1fr auto; gap: 18px; margin-top: 10px; }
.bar-axis .t {
  grid-column: 2; display: flex; justify-content: space-between;
  font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 11px; color: var(--muted);
  border-top: 1px solid #ddd5c6; padding-top: 5px;
}

/* Tabellen: breite Inhalte scrollen in sich selbst, die Seite nie horizontal */
.tbl-wrap { overflow-x: auto; margin: 20px 0; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--paper-2); vertical-align: top; }
th {
  font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 11.5px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  border-bottom: 2px solid var(--paper-2);
}
td { color: var(--muted); }
td b { color: var(--ink); }
tbody tr:last-child td { border-bottom: none; }
.num { font-family: "SF Mono", ui-monospace, Menlo, monospace; white-space: nowrap; }

/* R0–R3-Marker der Prompt-Injection-Matrix, auch als Tabellenzelle nutzbar.
   Bewusst gedeckte Erdtöne statt Ampelfarben: harmlos → bedenklich soll man
   lesen können, ohne dass Signalrot in die Papier-Ebene schreit. Die beiden
   Zwischenstufen (R1/R2, R2/R3) sitzen farblich genau dazwischen. */
.r { display: inline-block; min-width: 40px; text-align: center; padding: 2px 7px; border-radius: 6px;
     font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 11.5px; font-weight: 700; }
.r0  { background: #dfe9dd; color: #2f5c33; }
.r1  { background: #e6e8dc; color: #55603c; }
.r12 { background: #eee7d8; color: #6a5b34; }
.r2  { background: #f0e4d2; color: #7a5a2c; }
.r23 { background: #eedfd4; color: #82492c; }
.r3  { background: #ecd9d5; color: #8a3a2c; }
.r-arrow { color: #b6ac99; padding: 0 3px; font-size: 12px; }

/* Verlaufsspalte der Matrix: drei Marker mit Pfeilen, bleibt in einer Zeile */
.r-run { display: flex; align-items: center; gap: 1px; white-space: nowrap; }

/* Gestapelte Zeile für die Stufen-Verteilung: Breiten in Prozent im style-Attribut */
.stack { display: flex; height: 34px; border-radius: 7px; overflow: hidden; margin-top: 6px; }
.stack > span {
  display: flex; align-items: center; justify-content: center; min-width: 0;
  font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 11.5px; font-weight: 700;
}
.stack-row { margin: 0 0 18px; }
.stack-row > .k {
  font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 12px;
  font-weight: 700; color: var(--ink); letter-spacing: .04em;
}
.stack-row > .k em { font-style: normal; font-weight: 400; color: var(--muted); }

/* ---------- Verwandte Projekte ---------------------------------------------- */
/* Querverweise zwischen den Deep-Dives: Die Seiten sollen als ein Werk lesbar
   sein, nicht als acht unverbundene Abstellgleise. Ziele tragen data-pj, weil
   der Ordner auf Deutsch /projekte/ und auf Englisch /en/projects/ heißt. */
.rel { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.rel-item {
  display: block; text-decoration: none; background: var(--paper-2);
  border-radius: 12px; padding: 16px 18px; transition: all .18s;
  border: 1.5px solid transparent;
}
.rel-item:hover { border-color: var(--accent); transform: translateY(-2px); }
.rel-item:active { transform: scale(.98); }
.rel-tag {
  display: block; font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 7px;
}
.rel-t { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 17px; color: var(--ink); margin-bottom: 5px; }
.rel-w { display: block; font-size: 13px; color: var(--muted); line-height: 1.5; }
.rel-item::after { content: " →"; color: var(--accent); font-weight: 700; font-size: 13px; }
/* Dimmen der Geschwister beim Hover, wie die Projektkarten auf der Startseite */
@media (hover: hover) {
  .rel:has(.rel-item:hover) .rel-item:not(:hover) { opacity: .55; transition: opacity .55s ease .08s; }
}

/* ---------- Auslaufender Code unten rechts ---------------------------------- */
/* Sitzt in der Code-Ebene, nicht im Textfluss: Als Block zwischen letzter Karte
   und Fußzeile klemmte er in einer 44px-Lücke und stand über „Zurück zu den
   Projekten“ statt daneben. Jetzt liegt er wie die übrigen Snippets hinter dem
   Inhalt und taucht am Seitenende neben der Fußzeile auf. Inhalt je Projekt
   eigen (window.PJ_TAIL). */
#codelayer pre.tail {
  left: auto; top: auto; right: 3vw; bottom: 12vh;
  text-align: right; opacity: .5;
}
@media (max-width: 900px) {
  /* Schmale Viewports: Die Karten füllen die Breite fast aus, rechts bleibt kaum
     dunkler Grund. Tiefer und kleiner, damit er nicht angeschnitten wirkt. */
  #codelayer pre.tail { right: 4vw; bottom: 3vh; font-size: 11px; }
}

/* ---------- Fußzeile -------------------------------------------------------- */
footer { padding: 40px 0 56px; }
footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap;
               font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 12.5px; color: #6b7484; }
footer a { color: var(--accent-lite); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ---------- Reveal beim Reinscrollen (Mini-Fassung der Hauptseite) ---------- */
.rvl { opacity: 0; transform: translateY(14px); }
.rvl.in { opacity: 1; transform: none; transition: opacity .9s ease, transform .9s ease; }

/* ---------- Schmale Viewports ---------------------------------------------- */
@media (max-width: 760px) {
  nav .wrap { padding: 0 16px; }
  nav .links a, nav .links .lang { display: none; }
  .burger { display: block; }
  header.pj { padding-top: 32px; padding-bottom: 4px; }
  header.pj .sub { font-size: 16.5px; }
  .pj-meta { gap: 8px 18px; font-size: 12px; }
  .facts { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
  .fact b { font-size: 21px; }
  .card p, .card li { font-size: 15px; }
  /* Balken: Beschriftung und Signifikanz teilen sich die erste Zeile, die Balken
     laufen darunter über die volle Breite — in drei Spalten nebeneinander bliebe
     für die Balken selbst kaum Platz. Die Zeilen sind fest zugewiesen, sonst
     schiebt die Auto-Platzierung die Signifikanz hinter die Balken. */
  .bar-row { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .bar-lbl   { grid-column: 1; grid-row: 1; }
  .bar-sig   { grid-column: 2; grid-row: 1; align-self: start; }
  .bar-track { grid-column: 1 / -1; grid-row: 2; }
  /* Umbrechen dürfen: Das nowrap von oben hält Zahlenpaare wie „p = 0,0083"
     zusammen, schob am Handy aber ganze Wortgruppen aus der Karte hinaus
     („praktisch unbrauchbar" ragte 31px über den Kartenrand und wurde
     abgeschnitten). Zusammen bleiben nur die Effektstärken, alles andere bricht
     erst, wenn der Platz wirklich nicht reicht. */
  .bar-sig { white-space: normal; }
  .bar-sig s, .bar-sig [data-n] { white-space: nowrap; }
  .bar-axis { grid-template-columns: 1fr; }
  .bar-axis .t { grid-column: 1; }
  /* Cases: Schlagwort über den Text statt daneben, sonst bleiben 128px Spalte
     und für den eigentlichen Inhalt kaum Breite übrig. */
  .case-row { grid-template-columns: 1fr; gap: 2px; }
  .case-row .k { padding-top: 0; }
  .case h3 { font-size: 18.5px; }
}

/* ---------- Sehr schmale Geräte (iPhone SE der ersten Bauart u. ä.) --------- */
/* Bis 359px reicht die Zeile für Beschriftung UND Signifikanz nicht mehr: Die
   Unterzeile der Beschriftung ist ein einzelnes Großbuchstaben-Wort mit Sperrung
   („STANDARDEINSTELLUNG"), das nicht umbrechen kann, und schiebt die Signifikanz
   über den Kartenrand. Deshalb rutscht sie hier unter die Beschriftung. */
@media (max-width: 359px) {
  .bar-row { grid-template-columns: 1fr; }
  .bar-sig { grid-column: 1; grid-row: 2; text-align: left; }
  .bar-track { grid-row: 3; }
}

/* ---------- Reduzierte Bewegung --------------------------------------------- */
/* Pflicht wie auf der Hauptseite: Das Reveal darf hier nichts unsichtbar lassen,
   deshalb .rvl zurücksetzen statt nur die Dauer zu nullen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
  .rvl { opacity: 1; transform: none; }
}

/* ---------- Druck ------------------------------------------------------------ */
@media print {
  body { background: #fff; color: #000; }
  nav, footer, #spot, .pj-cta, .mobile-menu,
  #codelayer, .tile, .code-glyph, .lb-layer { display: none !important; }
  /* Die per JS gesetzten Risse und Mindesthöhen neutralisieren, sonst schneidet
     der Druck Inhalt ab bzw. lässt riesige Leerflächen stehen (wie index.html) */
  .card { clip-path: none !important; min-height: auto !important; }
  .rvl { opacity: 1 !important; transform: none !important; }
  .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  .card.dark { background: #fff; color: #000; border-color: #ddd; }
  .card.dark h2, .card.dark h3, .card.dark p, .card.dark li { color: #000; }
  header.pj h1, header.pj .sub, .pj-crumb, .pj-meta div { color: #000; }
  .tbl-wrap { overflow: visible; }
}