: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%}

/* 2FA / Login-Extras */
.check label,.inline{display:inline;text-transform:none;letter-spacing:normal;font-family:var(--serif);font-size:.95rem;color:var(--tinte);margin:0}
.check{margin:.8rem 0}
.check input[type=checkbox]{margin-right:.4rem}
.mono{font-family:"SF Mono",Menlo,Consolas,"Liberation Mono",monospace}
.otpkey{font-family:"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;font-size:1.15rem;letter-spacing:.12em;background:var(--papier-tief);border:1px solid var(--linie-fein);padding:.6rem .8rem;word-break:break-all}
.qr{margin:.4rem 0 1rem}
.qr svg{width:200px;height:200px;background:#fff;border:1px solid var(--linie-fein);padding:6px}
.foot-legal{display:inline-block;margin-left:.6rem}
.foot-legal a{color:var(--tinte-blass)}

/* Wiederherstellungs-Codes */
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:1rem 0}
.codes .otpkey{margin:0;text-align:center;font-size:1.05rem;letter-spacing:.1em}
details{margin:.6rem 0}
summary{cursor:pointer;font-family:var(--grotesk);text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;color:var(--tinte-blass)}
@media(max-width:520px){.codes{grid-template-columns:1fr}}

/* Konto-Untermenü (Klick auf den Namen) */
.usermenu{position:relative;display:inline-block}
.usermenu>summary{list-style:none;cursor:pointer;font-family:var(--grotesk);text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;color:var(--tinte);padding-bottom:2px;border-bottom:1px solid transparent}
.usermenu>summary::-webkit-details-marker{display:none}
.usermenu>summary::marker{content:""}
.usermenu>summary::after{content:"▾";margin-left:.35em;font-size:.8em;color:var(--tinte-blass)}
.usermenu[open]>summary{color:var(--akzent);border-bottom-color:var(--akzent)}
.usermenu-panel{position:absolute;right:0;top:100%;margin-top:.55rem;background:var(--papier-hell);border:1px solid var(--linie-fein);min-width:170px;z-index:50;display:flex;flex-direction:column;box-shadow:0 6px 18px rgba(0,0,0,.10)}
.usermenu-panel a{padding:.55rem .9rem;border-bottom:1px solid var(--linie-fein)}
.usermenu-panel a:last-child{border-bottom:0}
.usermenu-panel a.sep{border-top:2px solid var(--linie)}

/* Rückfrage-Dialog (ersetzt window.confirm) im Jucama-Design */
.modal-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(26,25,23,.55);z-index:1000;padding:16px}
.modal-overlay.open{display:flex}
.modal{background:var(--papier-hell);border:1px solid var(--linie);border-top:4px solid var(--akzent);max-width:440px;width:100%;padding:1.4rem 1.5rem;box-shadow:0 12px 44px rgba(0,0,0,.28)}
.modal-msg{margin:0 0 1.3rem;white-space:pre-line;font-family:var(--serif);font-size:1.02rem;line-height:1.5;color:var(--tinte)}
.modal-actions{display:flex;gap:.6rem;justify-content:flex-end}
.modal-actions button{margin:0}