:root{--grund:#F6F8F9;--flaeche:#fff;--tinte:#16212A;--gedaempft:#5C6D7A;--linie:#DDE5EA;
--akzent:#0E5A61;--warn:#AF2A21;--markier:#FFF3C4;
--serif:"Newsreader",Georgia,serif;--sans:"IBM Plex Sans",system-ui,sans-serif;
--mono:"IBM Plex Mono",ui-monospace,monospace}
@media (prefers-color-scheme:dark){:root{--grund:#11171B;--flaeche:#192127;--tinte:#E4EBF0;
--gedaempft:#93A3AF;--linie:#2A353D;--akzent:#5FBFC4;--warn:#F0837A;--markier:#3D3416}}
*{box-sizing:border-box}
body{margin:0;background:var(--grund);color:var(--tinte);font:400 15.5px/1.62 var(--sans)}
.oben{display:flex;align-items:center;gap:1.4rem;padding:.9rem 1.5rem;border-bottom:1px solid var(--linie);
background:var(--flaeche);flex-wrap:wrap;position:sticky;top:0;z-index:9}
.marke{font:600 1.05rem var(--serif);color:var(--tinte);text-decoration:none;letter-spacing:.01em}
.oben nav{display:flex;gap:1.1rem;align-items:center;margin-left:auto;flex-wrap:wrap}
.oben nav a{color:var(--gedaempft);text-decoration:none;font-size:.88rem}
.oben nav a:hover{color:var(--tinte)}
.wer{font-size:.82rem;color:var(--akzent);font-weight:500}
main{max-width:56rem;margin:0 auto;padding:2rem 1.4rem 4rem}
h1{font:600 1.7rem/1.2 var(--serif);margin:0 0 .3rem;text-wrap:balance}
h2{font:600 1.1rem var(--serif);margin:1.8rem 0 .6rem}
.anmelden{max-width:24rem;margin:3rem auto}
.lead{color:var(--gedaempft);margin:.2rem 0 1.6rem}
form label{display:flex;flex-direction:column;gap:.28rem;margin-bottom:.9rem;font-size:.83rem;color:var(--gedaempft)}
input[type=email],input[type=password],input[type=search]{padding:.6rem .7rem;border:1px solid var(--linie);
border-radius:2px;background:var(--flaeche);color:var(--tinte);font:400 .95rem var(--sans);width:100%}
button{padding:.6rem 1.2rem;border:0;border-radius:2px;background:var(--akzent);color:#fff;
font:500 .92rem var(--sans);cursor:pointer}
button:hover{filter:brightness(1.12)}
.hinweis{color:var(--gedaempft);font-size:.8rem;margin-top:1.1rem}
.fehler{color:var(--warn);background:color-mix(in srgb,var(--warn) 8%,transparent);
padding:.6rem .8rem;border-left:2px solid var(--warn);font-size:.9rem}
.suche{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.suche input[type=search]{flex:1 1 22rem}
.wahl{display:flex;gap:.9rem}
.wahl label{flex-direction:row;align-items:center;gap:.32rem;margin:0;font-size:.85rem;color:var(--tinte)}
.bestand{color:var(--gedaempft);font-size:.82rem;margin:.6rem 0 1.6rem;font-variant-numeric:tabular-nums}
.ergebnis{font:600 .8rem var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--gedaempft);
border-bottom:1px solid var(--linie);padding-bottom:.4rem;margin-bottom:1rem}
.tr{background:var(--flaeche);border:1px solid var(--linie);border-left:3px solid var(--akzent);
padding:.9rem 1.1rem;margin-bottom:.7rem}
.tr header{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.tr code{font:500 .95rem var(--mono);color:var(--akzent)}
.tr a{text-decoration:none} .tr a:hover code{text-decoration:underline}
.mt,.tt{color:var(--gedaempft);font-size:.8rem}
.tz{font:400 .95rem var(--serif);margin:.4rem 0 .2rem}
.tr p{margin:.4rem 0 0;font-size:.9rem;color:var(--gedaempft);max-width:70ch}
mark{background:var(--markier);color:inherit;padding:0 .1em}
footer{border-top:1px solid var(--linie);padding:1.2rem 1.5rem;color:var(--gedaempft);
font-size:.78rem;text-align:center}
:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
code{font:500 .85em var(--mono);color:var(--akzent)}

/* ── Akten ─────────────────────────────────────────────────────────── */
main{max-width:64rem}
.pfad{color:var(--gedaempft);font-size:.85rem;margin:0 0 .4rem}
.pfad a{color:var(--gedaempft)}
.ok{color:var(--akzent);background:color-mix(in srgb,var(--akzent) 9%,transparent);
padding:.6rem .8rem;border-left:2px solid var(--akzent);font-size:.9rem}
.ged{color:var(--gedaempft)} .klein{display:block;color:var(--gedaempft);font-size:.78rem;margin-top:.1rem}
.r{text-align:right}
.neu{display:flex;gap:.7rem;align-items:flex-end;flex-wrap:wrap;margin:1.2rem 0 1.6rem}
.neu label{flex:1 1 18rem;margin:0}
input[type=text],textarea{padding:.6rem .7rem;border:1px solid var(--linie);border-radius:2px;
background:var(--flaeche);color:var(--tinte);font:400 .95rem var(--sans);width:100%}
textarea{resize:vertical;line-height:1.5}
.liste{width:100%;border-collapse:collapse;background:var(--flaeche);border:1px solid var(--linie);font-size:.92rem}
.liste th{font:600 .72rem var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--gedaempft);
text-align:left;padding:.55rem .8rem;border-bottom:1px solid var(--linie)}
.liste td{padding:.6rem .8rem;border-bottom:1px solid var(--linie);vertical-align:top}
.liste tr:last-child td{border-bottom:0}
.liste a{color:var(--tinte);text-decoration:none;font-weight:500} .liste a:hover{text-decoration:underline}
.zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,19rem);gap:2.2rem;align-items:start}
@media(max-width:52rem){.zwei{grid-template-columns:1fr}}
.kennung{display:inline-block;font:600 .62rem var(--mono);letter-spacing:.06em;color:var(--gedaempft);
border:1px solid var(--linie);padding:.1rem .3rem;border-radius:2px}
.st-fertig .dname{color:var(--gedaempft)} .st-fertig .kennung{border-color:var(--akzent);color:var(--akzent)}
.st-pruefung .kennung{border-color:#B7791F;color:#B7791F}
.archiv-ok{color:var(--akzent)!important;font-weight:500}
.knopf,button.leise{display:inline-block;padding:.3rem .6rem;border:1px solid var(--linie);border-radius:2px;
background:var(--flaeche);color:var(--tinte);font:500 .8rem var(--sans);text-decoration:none;cursor:pointer;
vertical-align:middle;margin-left:.3rem}
.knopf:hover,button.leise:hover{border-color:var(--akzent);filter:none}
button.leise.warn:hover{border-color:var(--warn);color:var(--warn)}
.upload{margin:1.2rem 0 0;display:flex;gap:.7rem;align-items:flex-end;flex-wrap:wrap}
.upload label{flex:1 1 16rem;margin:0}
input[type=file]{font-size:.85rem;padding:.5rem;border:1px dashed var(--linie);border-radius:2px;width:100%}
aside h2:first-child{margin-top:0}
.titel label{margin-bottom:.5rem}
.archivliste{list-style:none;padding:0;margin:0 0 1rem}
.archivliste li{padding:.45rem 0;border-bottom:1px solid var(--linie);font-size:.88rem}
.archivliste a{color:var(--tinte);text-decoration:none;font-weight:500;word-break:break-word}
.archivliste a:hover{text-decoration:underline}

/* Gerendertes Markdown */
.text{background:var(--flaeche);border:1px solid var(--linie);padding:1.8rem 2.2rem;max-width:52rem;line-height:1.65}
.text h1{font-size:1.5rem} .text h2{font-size:1.15rem;margin-top:1.6rem} .text h3{font-size:1rem;margin:1.2rem 0 .4rem}
.text table{border-collapse:collapse;width:100%;font-size:.88rem;margin:.8rem 0}
.text th,.text td{border:1px solid var(--linie);padding:.4rem .6rem;text-align:left;vertical-align:top}
.text th{background:var(--grund)}
.text pre{background:var(--grund);padding:.9rem 1.1rem;overflow-x:auto;white-space:pre-wrap;font:400 .85rem var(--mono)}
.text hr{border:0;border-top:1px solid var(--linie);margin:1.4rem 0}
.text li{margin:.15rem 0}
@media print{.oben,footer,.pfad{display:none}.text{border:0;padding:0;max-width:none}body{background:#fff;color:#000}}

/* Bearbeiten und Brief */
.editor textarea{width:100%;min-height:34rem;font:400 .9rem/1.55 var(--mono);padding:1rem 1.1rem}
.knopfleiste{display:flex;gap:.6rem;align-items:center;margin-top:.8rem;flex-wrap:wrap}
.knopfleiste .knopf,.knopfleiste button.leise{margin-left:0;padding:.55rem .9rem;font-size:.9rem}
.zeichen{margin-left:auto;color:var(--gedaempft);font-size:.8rem}
.brief label{margin-bottom:.8rem}
.brief textarea[name=text]{font:400 .9rem/1.55 var(--mono)}
.reihe{display:flex;gap:.8rem} .reihe label{flex:1}
.wahl label{flex-direction:row;align-items:center;gap:.4rem;color:var(--tinte)}
.klein.warn{color:var(--warn)}

/* Dateikarten */
.dateien{display:flex;flex-direction:column;gap:.55rem}
.datei{background:var(--flaeche);border:1px solid var(--linie);border-left:3px solid var(--linie);padding:.7rem .9rem .6rem}
.datei.st-pruefung{border-left-color:#B7791F} .datei.st-fertig{border-left-color:var(--akzent)}
.kopfzeile{display:flex;align-items:baseline;gap:.6rem;min-width:0}
.dname{font:500 1.02rem/1.35 var(--sans);color:var(--tinte);text-decoration:none;overflow-wrap:anywhere;min-width:0}
.dname:hover{text-decoration:underline} .endung{color:var(--gedaempft);font-weight:400}
.fusszeile{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-top:.35rem}
.fusszeile .klein{display:inline;margin:0}
.werkzeuge{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin-left:auto}
.werkzeuge .inline{display:inline-block;margin:0}
.werkzeuge select{padding:.22rem .35rem;border:1px solid var(--linie);border-radius:2px;background:var(--flaeche);color:var(--tinte);font:500 .76rem var(--sans)}
.gruppe{display:inline-flex;border:1px solid var(--linie);border-radius:2px;overflow:hidden}
.gruppe a{padding:.24rem .5rem;font:500 .76rem var(--sans);color:var(--tinte);text-decoration:none;border-right:1px solid var(--linie)}
.gruppe a:last-child{border-right:0} .gruppe a:hover{background:var(--grund);color:var(--akzent)}
.werkzeuge button.leise{margin:0;padding:.24rem .5rem;font-size:.76rem}
@media(max-width:40rem){.werkzeuge{margin-left:0;width:100%}}

/* Vorschau im Brief-Dialog */
.vorschau{grid-column:1 / -1;order:3}
.vorschau h2{display:flex;align-items:center;gap:.8rem}
.vorschau iframe{width:100%;height:85vh;border:1px solid var(--linie);background:#fff}
.brief{order:1} .zwei > aside{order:2}
.feldwert{display:block;padding:.6rem .7rem;border:1px solid transparent;font:500 .95rem var(--sans);color:var(--tinte)}
.suche label{flex:1 1 18rem;margin:0}
.liste a.klein{display:block;font-weight:400}