:root{
  --papier:#f7f4ed;--papier-tief:#efeade;--papier-hell:#fffdf8;
  --tinte:#1a1917;--tinte-blass:#55524c;--akzent:#7a1f14;--rot:#bd1622;--gruen:#2c6e3f;
  --linie:#1a1917;--linie-fein:#c9c3b5;
  --grotesk:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",Times,serif;
  --blatt:1120px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--serif);font-size:16px;line-height:1.55}
.nav{display:flex;gap:1.3rem;align-items:center;flex-wrap:wrap;background:var(--papier);border-bottom:3px double var(--linie);padding:.8rem 1.5rem}
.nav .brand{display:flex;align-items:center;text-decoration:none}
.nav .brand img{display:block;height:30px;width:auto}
.brandline{font-family:var(--grotesk);text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;color:var(--tinte-blass);border-left:1px solid var(--linie-fein);padding-left:1rem}
.menu{display:flex;gap:1.1rem;margin-left:.6rem}
.nav a{font-family:var(--grotesk);text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;color:var(--tinte);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.nav a:hover{color:var(--akzent);border-bottom-color:var(--akzent)}
.nav .user{font-family:var(--grotesk);text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;color:var(--tinte-blass)}
.spacer{flex:1}
.wrap{max-width:var(--blatt);margin:2rem auto;padding:0 1.5rem}
h1{font-family:var(--serif);font-weight:700;letter-spacing:-.01em;font-size:clamp(1.9rem,4vw,2.7rem);margin:0 0 1rem;padding-bottom:.3rem;border-bottom:3px double var(--linie)}
h2{font-family:var(--serif);font-weight:700;font-size:1.4rem;margin:2rem 0 .6rem;padding-bottom:.2rem;border-bottom:1px solid var(--linie-fein)}
table{width:100%;border-collapse:collapse;background:var(--papier-hell);border:1px solid var(--linie-fein)}
th,td{text-align:left;padding:.55rem .7rem}
th{font-family:var(--grotesk);text-transform:uppercase;letter-spacing:.1em;font-size:.66rem;color:var(--tinte-blass);border-bottom:2px solid var(--linie)}
td{border-bottom:1px solid var(--linie-fein);font-size:.95rem}
tr:last-child td{border-bottom:0}
.card{background:var(--papier-hell);border:1px solid var(--linie-fein);padding:1.1rem 1.2rem;margin:1rem 0}
.card table{margin-top:12px}
label{display:block;margin:.7rem 0 .25rem;font-family:var(--grotesk);text-transform:uppercase;letter-spacing:.1em;font-size:.66rem;color:var(--tinte-blass)}
input,select,textarea{width:100%;padding:.5rem .6rem;border:1px solid var(--linie-fein);background:#fff;color:var(--tinte);font-family:var(--serif);font-size:1rem;border-radius:0}
input[type=checkbox]{width:auto}
input:focus,select:focus,textarea:focus{outline:2px solid var(--akzent);outline-offset:0;border-color:var(--akzent)}
button{font-family:var(--grotesk);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;background:var(--tinte);color:var(--papier);border:0;padding:.6rem 1.15rem;cursor:pointer;border-radius:0}
button:hover{background:var(--akzent)}
button.sec{background:var(--tinte-blass)}button.danger{background:var(--rot)}
code{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;background:var(--papier-tief);border:1px solid var(--linie-fein);padding:.1rem .35rem;font-size:.85em;word-break:break-all}
code.big{font-size:18px}
.row{display:flex;gap:1rem;flex-wrap:wrap}.row>div{flex:1;min-width:150px}
.pill{display:inline-block;font-family:var(--grotesk);text-transform:uppercase;letter-spacing:.08em;font-size:.62rem;padding:.15rem .5rem;border:1px solid currentColor}
.pill.active{color:var(--gruen)}.pill.suspended{color:#8a6a1f}.pill.revoked{color:var(--rot)}
.muted{color:var(--tinte-blass);font-size:.85em}
a{color:var(--akzent)}
a.btn{display:inline-block;text-decoration:none}
.foot{max-width:var(--blatt);margin:2rem auto 1rem;padding:1rem 1.5rem 0;border-top:1px solid var(--linie-fein);font-family:var(--grotesk);text-transform:uppercase;letter-spacing:.1em;font-size:.62rem}

/* Utility-Klassen (ersetzen die früheren inline-styles, CSP-konform) */
.inline{display:inline}
.flex0{flex:0}
.right{text-align:right}
.mt{margin-top:10px}
.note-ok{border-left:3px solid var(--gruen)}
.note-warn{border-left:3px solid #8a6a1f}
.note-bad{border-left:3px solid var(--rot)}
.txt-bad{color:var(--rot)}
.txt-warn{color:#8a6a1f}

/* Speicher-Balken */
.bar{display:inline-block;width:160px;height:8px;background:var(--papier-tief);border:1px solid var(--linie-fein);vertical-align:middle}
.bar>span{display:block;height:100%;background:var(--akzent)}
.bar.near>span{background:#8a6a1f}
.bar.over>span{background:var(--rot)}
.w0{width:0}.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}
.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}
.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}
.w80{width:80%}.w85{width:85%}.w90{width:90%}.w95{width:95%}.w100{width:100%}