:root{--bg:#222823;--flaeche:#262d2c;--flaeche2:#1b201f;--rand:#3a4241;--text:#EFEFEE;--gedimmt:#9aa3a1;--akzent:#39A2AE;--charcoal:#575A5E;--violett:#30011E}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;max-width:900px;margin:2rem auto;padding:0 1rem;color:var(--text);background:var(--bg)}
header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--rand);padding-bottom:.6rem}
.marke{display:flex;align-items:center;gap:.6rem}
h1{font-size:1rem;margin:0;text-transform:uppercase;letter-spacing:.32em;font-weight:600}
h1 .sub{color:var(--akzent);letter-spacing:.15em;font-weight:400;font-size:.78rem}
h2{font-size:.95rem;text-transform:uppercase;letter-spacing:.12em;margin:.1rem 0 .6rem;border-bottom:2px solid var(--akzent);display:inline-block;padding-bottom:.25rem}
.card{position:relative;background:var(--flaeche);border:1px solid var(--rand);border-radius:4px;padding:1rem;margin:1rem 0}
.card::after{content:'';position:absolute;top:-1px;right:-1px;width:22px;height:22px;border-top:2px solid var(--akzent);border-right:2px solid var(--akzent);border-radius:0 4px 0 0;pointer-events:none}
label{display:block;margin:.5rem 0 .2rem;color:var(--gedimmt);font-size:.9rem}
input[type=text],input[type=password],input[type=email],textarea,select{width:100%;padding:.55rem;border:1px solid var(--charcoal);border-radius:3px;font:inherit;background:var(--flaeche2);color:var(--text)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--akzent)}
select{width:auto;min-width:12rem}
button{padding:.55rem 1.2rem;border:0;border-radius:3px;background:var(--akzent);color:#0d1413;cursor:pointer;font:inherit;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.85rem}
button:hover{background:#46b7c4}
button:disabled{background:var(--charcoal);color:var(--gedimmt);cursor:wait}
button.sek{background:transparent;border:1px solid var(--charcoal);color:var(--gedimmt);text-transform:none;letter-spacing:0;font-weight:400;padding:.25rem .6rem;font-size:.8rem}
button.sek:hover{border-color:var(--akzent);color:var(--text);background:transparent}
.fehler{color:#e0708a}.ok{color:#7fd8c9}
.msg{padding:.6rem .8rem;border-radius:4px;margin:.4rem 0;white-space:pre-wrap}
.user{background:rgba(57,162,174,.14);border:1px solid rgba(57,162,174,.35)}
.assistant{background:var(--flaeche2);border:1px solid var(--rand)}
.klein{font-size:.85rem;color:var(--gedimmt)}
a{color:var(--akzent)}
ul.files li{display:flex;justify-content:space-between;gap:1rem;padding:.2rem 0}
code{background:#171c1b;padding:0 .3rem;border-radius:3px;color:#8fd4dc}
.msg.md{white-space:normal}  /* erst nach dem md()-Rendern; vorher/ohne JS bleibt pre-wrap erhalten */
.msg p{margin:.3rem 0}
.msg h3,.msg h4,.msg h5{margin:.5rem 0 .2rem;font-size:1rem;letter-spacing:.05em}
.msg pre{background:#171c1b;border:1px solid var(--rand);border-radius:4px;padding:.5rem;overflow-x:auto;margin:.4rem 0;white-space:pre}
.msg pre code{background:none;padding:0}
.msg table{border-collapse:collapse;margin:.4rem 0;display:block;overflow-x:auto;max-width:100%}
.msg th,.msg td{border:1px solid var(--rand);padding:.25rem .5rem;text-align:left;vertical-align:top}
.msg th{background:#2e3534;color:var(--akzent);letter-spacing:.04em}
.msg ul,.msg ol{margin:.3rem 0 .3rem 1.2rem;padding:0}
.msg a{color:var(--akzent)}
.tippt::after{content:'● ● ●';color:var(--akzent);animation:tippt 1.2s ease-in-out infinite}
@keyframes tippt{0%,100%{opacity:.25}50%{opacity:1}}
@media(max-width:640px){body{margin:.8rem auto}header{flex-wrap:wrap;gap:.3rem}.card{padding:.7rem}textarea{min-height:5rem}}