:root{
  --tinte:#0d1b2a; --papier:#f5f7fa; --karte:#ffffff; --rand:#d9e0ea;
  --akzent:#1f6feb; --akzent-weich:#e8f0fe; --gruen:#0f7b4f; --rot:#b4232a; --gelb:#8a6100;
  --grau:#5b6878; --radius:12px; --schatten:0 1px 3px rgba(13,27,42,.08),0 6px 20px rgba(13,27,42,.05);
}
@media (prefers-color-scheme:dark){:root{
  --tinte:#e6edf5; --papier:#0d1117; --karte:#161b22; --rand:#2b3240;
  --akzent:#589bff; --akzent-weich:#152239; --gruen:#3fb37f; --rot:#ff7b72; --gelb:#d3a34d;
  --grau:#9aa7b6; --schatten:0 1px 3px rgba(0,0,0,.4);
}}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--tinte);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--akzent)}
.huelle{max-width:1180px;margin:0 auto;padding:0 16px 64px}
header.kopf{position:sticky;top:0;z-index:20;background:var(--papier);border-bottom:1px solid var(--rand);padding:12px 0;margin-bottom:20px}
.kopf-innen{max-width:1180px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.marke{font-weight:700;letter-spacing:-.02em;font-size:1.1rem;margin-right:auto}
.marke span{color:var(--grau);font-weight:400;font-size:.85rem;display:block}
nav.reiter{display:flex;gap:4px;flex-wrap:wrap}
nav.reiter button{background:none;border:1px solid transparent;border-radius:999px;padding:7px 14px;font:inherit;font-size:.92rem;color:var(--grau);cursor:pointer}
nav.reiter button[aria-selected=true]{background:var(--akzent-weich);color:var(--akzent);border-color:var(--akzent)}
.karte{background:var(--karte);border:1px solid var(--rand);border-radius:var(--radius);box-shadow:var(--schatten);padding:20px;margin-bottom:16px}
h1{font-size:1.5rem;margin:.2em 0 .5em}h2{font-size:1.15rem;margin:0 0 .6em}h3{font-size:1rem;margin:1.2em 0 .4em}
button.tat{background:var(--akzent);color:#fff;border:0;border-radius:8px;padding:10px 18px;font:inherit;font-weight:600;cursor:pointer}
button.tat:disabled{opacity:.5;cursor:default}
button.leise{background:none;border:1px solid var(--rand);color:var(--tinte);border-radius:8px;padding:7px 13px;font:inherit;font-size:.9rem;cursor:pointer}
input[type=text],input[type=password],input[type=search],textarea{width:100%;padding:11px 13px;border:1px solid var(--rand);border-radius:8px;background:var(--karte);color:var(--tinte);font:inherit}
textarea{resize:vertical;min-height:80px}
.ablage{border:2px dashed var(--rand);border-radius:var(--radius);padding:36px 20px;text-align:center;color:var(--grau);cursor:pointer;transition:.15s}
.ablage.aktiv,.ablage:hover{border-color:var(--akzent);background:var(--akzent-weich);color:var(--akzent)}
.liste{display:grid;gap:12px}
.zeile{background:var(--karte);border:1px solid var(--rand);border-radius:var(--radius);padding:14px 16px;cursor:pointer;transition:.12s}
.zeile:hover{border-color:var(--akzent);box-shadow:var(--schatten)}
.zeile h3{margin:0 0 4px;font-size:1.02rem}
.meta{color:var(--grau);font-size:.85rem;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.wolke{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.wort{background:var(--akzent-weich);color:var(--akzent);border-radius:999px;padding:2px 10px;font-size:.78rem}
.marke-status{border-radius:999px;padding:2px 10px;font-size:.78rem;font-weight:600}
.s-analysiert{background:rgba(15,123,79,.12);color:var(--gruen)}
.s-fehler{background:rgba(180,35,42,.12);color:var(--rot)}
.s-offen{background:rgba(138,97,0,.14);color:var(--gelb)}
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kachel{background:var(--karte);border:1px solid var(--rand);border-radius:var(--radius);padding:16px}
.kachel b{display:block;font-size:1.9rem;line-height:1.1;letter-spacing:-.02em}
.kachel span{color:var(--grau);font-size:.85rem}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--rand);vertical-align:top}
th{color:var(--grau);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
.faden{display:grid;gap:14px;margin-bottom:16px}
.blase{padding:13px 16px;border-radius:var(--radius);max-width:min(760px,92%);white-space:pre-wrap;overflow-wrap:anywhere}
.blase.ich{background:var(--akzent);color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.blase.du{background:var(--karte);border:1px solid var(--rand);border-bottom-left-radius:4px}
.hinweis{background:rgba(138,97,0,.1);border:1px solid rgba(138,97,0,.3);color:var(--gelb);border-radius:8px;padding:11px 14px;font-size:.9rem;margin-bottom:14px}
.versteckt{display:none!important}
.anmelde{max-width:380px;margin:12vh auto;text-align:center}
.fort{height:4px;background:var(--rand);border-radius:4px;overflow:hidden;margin-top:10px}
.fort i{display:block;height:100%;background:var(--akzent);width:0;transition:width .3s}
pre.wortlaut{white-space:pre-wrap;background:var(--papier);border:1px solid var(--rand);border-radius:8px;padding:14px;max-height:460px;overflow:auto;font-size:.86rem}
@media(max-width:640px){.huelle{padding:0 12px 48px}.blase{max-width:100%}}

/* Klassen statt Inline-Stil: die Sicherheitsrichtlinie (CSP) verbietet das
   style-Attribut, erlaubt aber Klassen und CSSOM. */
.leise-text{color:var(--grau)}
.klein{font-size:.9rem}
.eng-oben{margin-top:0}
.breit{width:100%}
.knopfzeile{margin:.8em 0 0}
.fehlerzeile{color:var(--rot);font-size:.9rem;min-height:1.2em;margin:.6em 0}
.anriss{margin:.5em 0 0;color:var(--grau);font-size:.92rem}
.blase-fehler{color:var(--rot)}
.chat-leiste{display:flex;gap:10px;align-items:flex-end}
.zurueck{margin-bottom:10px}

/* ---- Aktenschrank, Chronik, Akte ------------------------------------------
   Alles ueber Klassen, nie ueber style-Attribute (CSP). Die Baumtiefe kommt
   als Klasse t0..t4 herein, weil ein berechneter Einzug ein style-Attribut
   braeuchte -- und das wirft der Browser hier still weg. */
.zweispalt{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
.spalte-schmal{position:sticky;top:76px;max-height:calc(100vh - 100px);overflow:auto}
@media(max-width:860px){.zweispalt{grid-template-columns:1fr}.spalte-schmal{position:static;max-height:none}}

.baum{display:grid;gap:1px}
.baum-zeile{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;
  border-radius:7px;padding:6px 8px;font:inherit;font-size:.92rem;color:var(--tinte);cursor:pointer}
.baum-zeile:hover{background:var(--akzent-weich)}
.baum-zeile.leer{color:var(--grau)}
.baum-zeile.t1{padding-left:22px}.baum-zeile.t2{padding-left:38px}
.baum-zeile.t3{padding-left:54px}.baum-zeile.t4{padding-left:70px}
.baum-pfeil{color:var(--grau);width:12px;flex:0 0 12px;font-size:.8rem}
.baum-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.baum-zahl{color:var(--grau);font-size:.8rem;font-variant-numeric:tabular-nums}

.pfad-marke{background:rgba(31,111,235,.10);color:var(--akzent);border-radius:6px;padding:1px 8px;font-size:.78rem}
.pfad-marke.gross{font-size:.92rem;padding:4px 12px}
.datum-marke{font-variant-numeric:tabular-nums;font-weight:600;color:var(--tinte)}
.kennung{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;
  background:var(--papier);border:1px solid var(--rand);border-radius:6px;padding:1px 7px}
.warn{color:var(--gelb);font-weight:600}
.wort-aktiv{background:var(--akzent);color:#fff}
button.wort{border:0;font:inherit;font-size:.78rem;cursor:pointer}
.filterzeile{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}

.ablagezeile{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0;
  padding:12px;background:var(--papier);border:1px solid var(--rand);border-radius:8px}
.sicherheit{font-size:.78rem;border-radius:999px;padding:2px 10px}
.sicherheit.s-sicher{background:rgba(15,123,79,.12);color:var(--gruen)}
.sicherheit.s-wahrscheinlich{background:rgba(31,111,235,.10);color:var(--akzent)}
.sicherheit.s-geraten{background:rgba(138,97,0,.14);color:var(--gelb)}

.strahl{display:grid;gap:0;margin-top:6px}
.strahl-punkt{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:10px 0 10px 14px;
  border-left:2px solid var(--rand);position:relative}
.strahl-punkt::before{content:"";position:absolute;left:-5px;top:17px;width:8px;height:8px;
  border-radius:50%;background:var(--rand)}
.strahl-punkt.art-frist::before{background:var(--gelb)}
.strahl-punkt.art-dokumentdatum::before{background:var(--akzent)}
.strahl-datum{color:var(--grau);font-variant-numeric:tabular-nums;font-size:.86rem;padding-top:1px}
.art-marke{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--grau)}
@media(max-width:640px){.strahl-punkt{grid-template-columns:1fr;gap:2px}}

.vorlage{margin-bottom:14px;padding-left:12px;border-left:3px solid var(--rand)}
.vorlage h3{margin:0 0 .3em;font-size:.95rem}
.vorlage ul{margin:0;padding-left:18px}
.vorlage li{margin:.15em 0;font-size:.92rem}
.vorlage.rot{border-left-color:var(--rot)}.vorlage.rot h3{color:var(--rot)}
.vorlage.gelb{border-left-color:var(--gelb)}.vorlage.gelb h3{color:var(--gelb)}
.vorlage.grau{border-left-color:var(--rand)}.vorlage.grau h3{color:var(--grau)}

button.kachel{text-align:left;font:inherit;color:var(--tinte);cursor:pointer}
button.kachel:hover{border-color:var(--akzent)}