:root {
  --bg: #0f1115; --karte: #181b22; --karte2: #1f232c; --text: #e7e9ee;
  --dim: #9aa3b2; --akzent: #6ea8fe; --gut: #45c06a; --schlecht: #e0708a; --rand: #2a2f3a;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; }
a { color: inherit; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.kopf { padding: 1rem 0; border-bottom: 1px solid var(--rand); }
.kopf-in { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.logo { font-weight: 700; text-decoration: none; color: var(--text); }
.kopf-sub { color: var(--dim); font-size: .9rem; }

.ai-act { background: #2a2117; border-bottom: 1px solid #4a3a22; color: #e8d3a8; font-size: .82rem; padding: .55rem 0; }
.ai-act strong { color: #ffd98a; }

main { max-width: 1100px; margin: 0 auto; padding: 1.25rem; }
h2 { margin: .2rem 0 1rem; }
h3.abschnitt { border-bottom: 1px solid var(--rand); padding-bottom: .35rem; margin-top: 2rem; }
h3.sektion { color: var(--akzent); font-size: 1.3rem; margin: 1.8rem 0 .6rem; }

/* Hero / Datenfluss */
.hero h2 { margin-bottom: 1rem; }
.fluss { display: flex; flex-wrap: wrap; align-items: stretch; gap: .6rem; }
.fl-box { position: relative; flex: 1 1 180px; background: var(--karte); border: 1px solid var(--rand); border-radius: 12px; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .15rem; color: var(--text); text-decoration: none; }
.fl-box:hover { border-color: var(--akzent); }
.fl-q { position: absolute; top: .45rem; right: .5rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1px solid var(--rand); color: var(--dim); display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; }
.fl-box:hover .fl-q { border-color: var(--akzent); color: var(--akzent); }
.prompt { white-space: pre-wrap; background: #0b0d10; border: 1px solid var(--rand); border-radius: 8px; padding: 1rem; font-size: .8rem; line-height: 1.45; overflow-y: auto; max-height: 62vh; color: var(--text); }
.mtab { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; }
.mtab th, .mtab td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--rand); }
.mtab th { color: var(--dim); font-weight: 600; }
.mtab a { color: var(--akzent); }
.fl-box strong { font-size: 1.05rem; }
.fl-box span { color: var(--dim); font-size: .82rem; }
.fl-pfeil { align-self: center; color: var(--akzent); font-size: 1.5rem; font-weight: 700; }

.infobox { background: #16202b; border: 1px solid #244; border-radius: 12px; padding: .9rem 1.1rem; margin: 1.25rem 0; font-size: .92rem; }
.infobox strong { color: var(--akzent); }
.infozeile, .mini { color: var(--dim); font-size: .85rem; }
.mini { font-size: .78rem; }

/* Signatur-Karten */
.sig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
/* Modell-Vergleichsgitter: 3 Spalten bei 6 Modellen (3×300 passt in 1100px, 4× nicht) → 2 Reihen à 3; responsiv 2/1. */
.sig-grid.modelle { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.sigkarte { background: var(--karte); border: 1px solid var(--rand); border-radius: 14px; padding: 1rem; text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: .35rem; transition: border-color .15s, transform .08s; }
.sigkarte:hover { border-color: var(--akzent); transform: translateY(-2px); }
.sigkarte h4 { margin: 0; font-size: 1.2rem; }
.sig-modell { color: var(--dim); font-size: .78rem; }
.sig-zahlen { margin: .4rem 0; display: flex; flex-direction: column; gap: .25rem; }
.sigzeile { display: flex; justify-content: space-between; font-size: .9rem; border-bottom: 1px solid #20242d; padding-bottom: .2rem; }
.sz-l { color: var(--dim); } .sz-w { font-weight: 600; font-variant-numeric: tabular-nums; }
.sig-label { color: var(--dim); font-size: .82rem; }
.sig-cta { color: var(--akzent); font-weight: 600; font-size: .9rem; margin-top: .3rem; }

.unternav { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.navbtn { background: var(--karte); border: 1px solid var(--rand); border-radius: 10px; padding: .6rem .9rem; text-decoration: none; color: var(--text); }
.navbtn:hover { border-color: var(--akzent); }

/* Brotkrume */
.brotkrume { font-size: .85rem; color: var(--dim); margin-bottom: .8rem; }
.brotkrume a { color: var(--akzent); text-decoration: none; }
.bc-sep { margin: 0 .4rem; } .bc-akt { color: var(--text); }
.bc-kat { color: var(--dim); text-transform: uppercase; font-size: .72rem; letter-spacing: .03em; }

/* Signatur-Banner / Vergleichsleiste */
.sigbanner { background: var(--karte); border: 1px solid var(--rand); border-radius: 10px; padding: .5rem .8rem; font-size: .9rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.sb-sep { color: var(--dim); }
.vsbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .8rem 0; }
.vslbl { color: var(--dim); font-size: .85rem; }
.vsbtn { background: var(--karte2); border: 1px solid var(--rand); color: var(--text); border-radius: 999px; padding: .25rem .7rem; cursor: pointer; font-size: .85rem; }
.vsbtn.an { border-color: var(--akzent); color: var(--akzent); font-weight: 600; }
.vsbtn.aus { border-color: var(--schlecht); color: var(--schlecht); }

/* Ebenen-Umschalter */
.ebtoggle { display: inline-flex; align-items: center; gap: .3rem; margin: .8rem 0 .2rem; }
.ebt-l { color: var(--dim); font-size: .85rem; margin-right: .3rem; }
.ebt { text-decoration: none; color: var(--text); background: var(--karte2); border: 1px solid var(--rand); border-radius: 999px; padding: .25rem .8rem; font-size: .85rem; }
.ebt.an { border-color: var(--akzent); color: var(--akzent); font-weight: 600; }

/* Querschnitts-Tabelle */
.qtab { display: flex; flex-direction: column; gap: .35rem; margin-top: .8rem; }
.qrow { display: flex; align-items: center; gap: .8rem; background: var(--karte); border: 1px solid var(--rand); border-radius: 10px; padding: .5rem .8rem; text-decoration: none; color: var(--text); }
.qrow:hover { border-color: var(--akzent); }
.qname { flex: 1; display: flex; align-items: center; gap: .5rem; }
.qpartei { flex: 1; }
.scorepill { color: #0b0d10; font-weight: 700; border-radius: 999px; padding: .1rem .55rem; font-variant-numeric: tabular-nums; min-width: 2.2rem; text-align: center; }
.urteilpill { color: #0b0d10; font-weight: 700; border-radius: 999px; padding: .1rem .6rem; font-size: .8rem; white-space: nowrap; text-align: center; }
.uk-lab { color: var(--dim); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
.gsbalken { display: flex; align-items: center; gap: 0; width: 180px; height: 14px; border-radius: 4px; overflow: hidden; background: #20242d; position: relative; }
.gs-gut { background: var(--gut); height: 100%; } .gs-schlecht { background: var(--schlecht); height: 100%; }
.gs-zahl { position: absolute; right: 6px; font-size: .72rem; color: #fff; mix-blend-mode: difference; }
.splitscore { display: flex; align-items: center; gap: .4rem; } .splitscore .vs { color: var(--dim); font-size: .75rem; }
.vsx { color: var(--akzent); font-weight: 700; }
.delta { color: var(--dim); font-size: .8rem; } .delta.hoch { color: #ffd98a; font-weight: 700; }

/* fiktiv-Marker */
.fiktiv { font-size: .68rem; color: #d8a; border: 1px solid #634; border-radius: 999px; padding: 0 .4rem; }
.fiktiv.gross { font-size: .8rem; display: inline-block; margin: .2rem 0; }

/* Avatare */
.avatar { image-rendering: pixelated; width: 96px; height: auto; background: #11141a; border-radius: 8px; }
.avatar.gross { width: 130px; } .avatar.mini { width: 40px; }
.persliste { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.persliste a { display: flex; align-items: center; gap: .5rem; padding: .3rem .6rem .3rem .3rem; background: var(--karte); border: 1px solid var(--rand); border-radius: 8px; text-decoration: none; color: var(--text); font-size: .85rem; }
.persliste a:hover { border-color: var(--akzent); }
.persliste a .avatar { border-radius: 6px; }
.persliste.text a { padding: .4rem .8rem; font-weight: 600; }

/* Detail / Profil */
.detail-kopf { display: flex; gap: 1.2rem; align-items: center; margin-bottom: .5rem; }
.detail-kopf h2 { margin: 0; } .einzeiler { color: var(--dim); margin: .2rem 0; }
.chip { background: var(--karte2); border: 1px solid var(--rand); border-radius: 999px; padding: .1rem .55rem; font-size: .75rem; color: var(--dim); }
.themen { display: flex; flex-wrap: wrap; gap: .3rem; }

/* Blatt */
.blatt-einzel, .blatt-split { margin-top: 1rem; }
.blatt-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.blattspalte { background: var(--karte); border: 1px solid var(--rand); border-radius: 12px; padding: 1rem; }
.bs-kopf { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; flex-wrap: wrap; }
.hilfe { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1px solid var(--rand); color: var(--dim); font-size: .72rem; font-weight: 700; text-decoration: none; line-height: 1; flex: none; }
.hilfe:hover { border-color: var(--akzent); color: var(--akzent); }
.mtab tr:target { outline: 2px solid var(--akzent); background: rgba(110,168,254,.08); }
.zusammenfassung { color: var(--dim); font-size: .92rem; }
.ki-badge { font-size: .72rem; color: #e8d3a8; background: #2a2117; border: 1px solid #4a3a22; border-radius: 6px; padding: .15rem .45rem; display: inline-block; margin: .2rem 0 .5rem; }
.ki-dot { color: #ffd98a; font-weight: 600; }
h4.gut { color: var(--gut); margin: .8rem 0 .3rem; } h4.schlecht { color: var(--schlecht); margin: .8rem 0 .3rem; }
.highlight { background: var(--karte2); border-radius: 10px; padding: .7rem .8rem; margin: .5rem 0; }
.hl-kopf { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.titel { font-size: 1.02rem; } .selbst { margin: .4rem 0 .2rem; } .analytisch { color: var(--dim); font-size: .88rem; }
.belegzeile { font-size: .82rem; color: var(--dim); margin-top: .3rem; }
.quelle-link { color: var(--dim); text-decoration: none; }
.quelle-link:hover { color: var(--text); }
.quelle-link:hover .q-src { text-decoration: underline; }
.q-src { color: var(--akzent); white-space: nowrap; }
.beleg { font-weight: 600; margin-right: .3rem; } .beleg.ok { color: var(--gut); } .beleg.fehler { color: #e0b070; } .beleg.offen { color: var(--dim); }
.diffbox { background: #16202b; border: 1px solid #244; border-radius: 10px; padding: .7rem .9rem; margin: .6rem 0; }
.diffstat { color: var(--akzent); font-weight: 600; }

/* Divergenz */
.divscores { display: flex; gap: .35rem; flex-wrap: wrap; flex: 1; }
.divscore { font-size: .78rem; border: 1px solid var(--rand); border-left-width: 4px; border-radius: 5px; padding: .1rem .4rem; color: var(--text); }
a.divscore { text-decoration: none; }
a.divscore:hover { border-color: var(--akzent); color: var(--akzent); }
.qrow.static { cursor: default; }
.qrow.static:hover { border-color: var(--rand); }
.spanne { font-weight: 700; color: #ffd98a; font-size: .85rem; }

/* Methodik: „Was die Zahlen bedeuten"-Karten */
.zahlgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .8rem; margin: .6rem 0 1rem; }
.zahlkarte { background: var(--karte); border: 1px solid var(--rand); border-radius: 12px; padding: .8rem 1rem; scroll-margin-top: 1rem; }
.zahlkarte h4 { margin: 0 0 .3rem; }
.zahlkarte p { margin: .4rem 0 0; font-size: .9rem; }
.zk-skala { font-size: .8rem; color: var(--dim); }
.zk-form { font-family: ui-monospace, monospace; font-size: .76rem; }
.bsp { border-top: 1px dashed var(--rand); padding-top: .4rem; }
.zahlkarte:target { outline: 2px solid var(--akzent); background: rgba(110,168,254,.08); }

/* Persona-Raster (Zweit-Einstieg) */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.karte { background: var(--karte); border: 1px solid var(--rand); border-radius: 14px; padding: 1rem; text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: .35rem; }
.karte:hover { border-color: var(--akzent); transform: translateY(-2px); }
.karte h3 { margin: .3rem 0 0; font-size: 1.05rem; }
.meta { color: var(--dim); font-size: .82rem; }

.fuss { max-width: 1100px; margin: 2rem auto; padding: 1.25rem; border-top: 1px solid var(--rand); color: var(--dim); font-size: .82rem; }
.fuss a { color: var(--akzent); }

.vergleich-grid { display: grid; gap: 1rem; margin-top: 1rem; }
.profil-link { display: inline-block; margin: .6rem 0; }

@media (max-width: 760px) { .blatt-split, .vergleich-grid { grid-template-columns: 1fr !important; } .gsbalken { width: 110px; } }