/* Persönliche Seite · baut ausschließlich auf design_tokens.css (tigerOS-Design-System) auf.
   Einzige Erweiterung: --fs-read für Lesetext (die Systemskala ist für Cockpits ausgelegt). */
@import url("design_tokens.css");
:root { --fs-read: 18px; --fs-title: 46px; --spalte: 680px;
  /* Ableitung nach lucumr.pocoo.org: Nachtblau statt Schwarz, Serifenschrift, helle Links */
  --font-read: Charter, "Iowan Old Style", "Bitstream Charter", Georgia, serif; }
:root[data-theme="dark"] { --bg: #131c2e; --border: #24324d; --titel: #a5b4cf; --sand: #e8c27a; --sand-hell: #f3d9a4; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-read); font-size: var(--fs-read); line-height: 1.65; }
.seite { max-width: var(--spalte); margin: 0 auto; padding: calc(var(--sp-12) * 1.5) var(--sp-6) var(--sp-12); }
header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: calc(28.6vw - 100px); }
.name { font-weight: 600; color: var(--text); text-decoration: none; letter-spacing: -0.01em; font-family: var(--font); }
/* Streifen des Beutelwolfs: geometrisch, abnehmende Höhe wie die Rückenstreifen, nur in --brand-thylacine */
.name::before { content: ""; display: inline-block; width: 22px; height: 14px; margin-right: var(--sp-3); vertical-align: -1px;
  background:
    linear-gradient(var(--brand-thylacine), var(--brand-thylacine)) 0 0 / 3px 14px no-repeat,
    linear-gradient(var(--brand-thylacine), var(--brand-thylacine)) 6px 1px / 3px 12px no-repeat,
    linear-gradient(var(--brand-thylacine), var(--brand-thylacine)) 12px 2px / 3px 10px no-repeat,
    linear-gradient(var(--brand-thylacine), var(--brand-thylacine)) 18px 3px / 3px 8px no-repeat; }
h2::before { content: ""; display: inline-block; width: 16px; height: 10px; margin-right: var(--sp-3); vertical-align: 4px;
  background:
    linear-gradient(var(--brand-thylacine), var(--brand-thylacine)) 0 0 / 2px 10px no-repeat,
    linear-gradient(var(--brand-thylacine), var(--brand-thylacine)) 5px 1px / 2px 8px no-repeat,
    linear-gradient(var(--brand-thylacine), var(--brand-thylacine)) 10px 2px / 2px 6px no-repeat; }
body::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 28.6vw; max-height: 440px; min-height: 200px; z-index: 0; pointer-events: none;
  background: url("bilder/kopf.png") no-repeat center bottom / cover;
  -webkit-mask-image: linear-gradient(180deg, #000 85%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 85%, transparent 100%); }
/* Kopfzeile steht im gelben Himmel: dunkle Schrift, Streifen-Marke im Hintergrundton */
header .name, header nav a { color: var(--text); }
header nav a { opacity: .7; } header nav a.aktiv, header nav a:hover { opacity: 1; color: var(--text); }
.seite { position: relative; z-index: 1; }
nav a { color: var(--muted); text-decoration: none; margin-left: var(--sp-6); font-size: var(--fs-body); font-family: var(--font); }
nav a:hover, nav a.aktiv { color: var(--text); }
h1 { font-size: var(--fs-title); line-height: 1.15; font-weight: 400; letter-spacing: -0.01em; color: var(--titel); margin: 0 0 var(--sp-8); }
h1.klein { font-size: 34px; }
h2 { font-size: 30px; font-weight: 400; color: var(--titel); margin: var(--sp-12) 0 var(--sp-4); line-height: 1.2; }
p { margin: 0 0 var(--sp-6); }
a { color: var(--sand); text-decoration: underline; text-decoration-color: rgba(232,194,122,.45); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sand-hell); text-decoration-color: var(--sand-hell); }
.zeile { font-size: var(--fs-lead); color: var(--muted); margin-bottom: var(--sp-8); }
ul.liste { list-style: none; padding: 0; margin: 0; }
ul.liste li { display: flex; gap: var(--sp-6); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
ul.liste .datum { color: var(--faint); font-size: var(--fs-body); min-width: 96px; font-variant-numeric: tabular-nums; }
.hinweis { color: var(--muted); font-size: var(--fs-body); }
.avatar { width: 150px; height: 150px; object-fit: cover; float: right; margin: var(--sp-2) 0 var(--sp-4) var(--sp-8); border-radius: var(--r-sm); }
article .datum { color: var(--faint); font-size: var(--fs-body); margin-bottom: var(--sp-12); display: block; }
footer { margin-top: calc(var(--sp-12) * 2); padding-top: var(--sp-6); border-top: 1px solid var(--border); color: var(--faint); font-size: var(--fs-label); }
footer a { color: var(--muted); margin-right: var(--sp-4); text-decoration-color: var(--border); }
footer p { margin: var(--sp-3) 0 0; }
@media (max-width: 520px) {
  header { flex-direction: column; gap: var(--sp-3); margin-bottom: 225px; }
  nav a { margin: 0 var(--sp-6) 0 0; }
  .seite { padding-top: var(--sp-8); }
  body::before { height: 330px; min-height: 0; background-size: auto 330px; background-position: 78% bottom; }
  h1 { font-size: 34px; }
  .avatar { width: 112px; height: 112px; margin-left: var(--sp-4); }
}
/* Artikel-Bausteine (Komponenten aus dem tigerOS-Design-System, Haut der Homepage: Sand und Thylacine statt Teal) */
article code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .86em; padding: .08em .35em; border-radius: var(--r-sm); background: var(--chip-bg); border: 1px solid var(--border); }
article ul { padding-left: 1.2em; margin: 0 0 var(--sp-6); }
article li { margin-bottom: var(--sp-3); }
.eyebrow { font-family: var(--font); font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--faint); }
/* Panel: Fläche hebt sich vom Nachtblau ab */
.panel { background: var(--chip-bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); margin: 0 0 var(--sp-8); }
.panel p:last-child { margin-bottom: 0; }
/* Zwei Experimente als Option-Cards, die zweite ist der Fall, um den es geht */
.faelle { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin: 0 0 var(--sp-8); }
.fall { background: var(--chip-bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
.fall.treffer { border-color: var(--brand-thylacine); }
.fall h3 { font-size: 21px; font-weight: 400; color: var(--titel); margin: 0; line-height: 1.25; }
.fall p { font-size: 16px; line-height: 1.55; margin: 0; }
.fall .zitat { font-style: italic; color: var(--muted); }
.urteil { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--border); font-family: var(--font); font-size: var(--fs-label); color: var(--muted); }
.urteil b { font-weight: var(--fw-bold); }
.urteil .modell { color: var(--sand); } .urteil .tor { color: var(--sev-hi); }
/* Terminal: die echte Ausgabe des Gates */
.terminal { background: #0b111d; border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-6); margin: 0 0 var(--sp-8); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13.5px; line-height: 1.6; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.terminal .prompt { color: var(--faint); } .terminal .deny { color: var(--sev-hi); font-weight: 600; } .terminal .wert { color: var(--sand); }
/* Kernsatz: eine Aussage pro Fläche */
.kernsatz { border-left: 3px solid var(--brand-thylacine); padding: var(--sp-2) 0 var(--sp-2) var(--sp-6); margin: var(--sp-8) 0; font-size: 26px; line-height: 1.35; color: var(--titel); }
/* Ablauf: Agent -> Gate -> OPA -> Urteil */
.fluss { display: flex; align-items: stretch; gap: var(--sp-2); margin: 0 0 var(--sp-8); font-family: var(--font); }
.fluss .schritt { flex: 1; background: var(--chip-bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.fluss .schritt.gate { border-color: var(--brand-thylacine); }
.fluss .schritt b { display: block; font-size: var(--fs-body); color: var(--text); font-weight: var(--fw-bold); }
.fluss .schritt span { font-size: var(--fs-caption); color: var(--muted); line-height: 1.4; display: block; margin-top: 2px; }
.fluss .pfeil { align-self: center; color: var(--faint); font-size: 18px; }
.fluss .schritt b span { display: inline; font-size: inherit; margin: 0; }
.fluss .ja { color: var(--ok); } .fluss .nein { color: var(--sev-hi); }
/* Regeln als Fact-Chips mit Erklärung */
.regeln { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-8); align-items: baseline; }
.chip { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--fs-caption); font-weight: 600; letter-spacing: .04em; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--brand-thylacine); color: var(--brand-thylacine); background: transparent; }
.regeln dd { margin: 0; font-size: 16px; line-height: 1.5; }
article .quellen { font-size: var(--fs-body); color: var(--muted); border-top: 1px solid var(--border); padding-top: var(--sp-4); margin-top: var(--sp-12); }
@media (max-width: 640px) {
  .faelle { grid-template-columns: 1fr; }
  .fluss { flex-direction: column; } .fluss .pfeil { transform: rotate(90deg); }
  .kernsatz { font-size: 22px; }
  .regeln { grid-template-columns: 1fr; gap: var(--sp-1); } .regeln dd { margin-bottom: var(--sp-3); }
}