/* Rechnungsautopilot – ruhige App-Oberfläche in MW-Lab-Tokens (Navy/Grau, Petrol nur als Akzent für Hauptaktion und aktive Zustände).
   Keine externen Schriften, kein Inline-Style (CSP). Abstände: 4/8/12/16/24/32/48 px. */
:root{
  --ink:#142330;--muted:#566775;--faint:#7a8995;--line:#dfe6eb;--line-strong:#c9d4dc;--bg:#f5f7f9;--paper:#f2f5f7;--surface:#fff;--navy:#102434;
  --petrol:#0e7c66;--petrol-dark:#0a5e4e;--petrol-tint:#e5f2ee;--petrol-line:#a9d3c6;
  --warn-bg:#fff6d6;--warn-ink:#6b5200;--warn-line:#e6cf85;--err:#b42318;--err-bg:#fdf1f0;--err-line:#f0c4c0;--info-bg:#e6eef5;--info-ink:#27445a;
  --focus:#3d7ea6;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;
  --r:6px;--r-card:8px;--max:1200px;--gutter:clamp(16px,3vw,32px);
  --body:Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;color:var(--ink);background:var(--bg);font:400 15px/1.5 var(--body);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
::selection{background:var(--petrol-tint)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
a{color:var(--petrol-dark);text-decoration:underline;text-decoration-color:var(--petrol-line);text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
p{margin:0 0 var(--s4)}
b,strong{font-weight:600}
h1,h2,h3{margin:0;line-height:1.3;font-weight:600;overflow-wrap:break-word}
h1{font-size:24px;letter-spacing:-.01em}
h2{font-size:16px}
h3{font-size:15px}
.muted{color:var(--muted)}
.small{font-size:13px}
.skip{position:absolute;top:-100px;left:var(--s4);z-index:100;background:#fff;padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r)}
.skip:focus{top:var(--s3)}

/* Kopfzeile: Logo, Navigation (max. 6 Punkte), Benutzer */
header.top{background:#fff;border-bottom:1px solid var(--line)}
.bar,main,footer.site,.notice-bar>div{width:min(calc(100% - var(--gutter)*2),var(--max));margin-inline:auto}
.bar{display:flex;align-items:center;gap:var(--s5);min-height:60px}
.brand{display:inline-flex;align-items:center;flex-shrink:0;text-decoration:none;color:var(--ink)}
.brand img.lockup{height:24px;width:auto;display:block}
.brand .mini{display:none;align-items:center;gap:var(--s2);font-weight:600;font-size:15px}
.brand .mini img{height:28px;width:28px}
.top-nav{display:flex;gap:var(--s1);flex:1;min-width:0}
.top-nav a{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-radius:var(--r);color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap}
.top-nav a:hover{background:var(--paper);color:var(--ink)}
.top-nav a[aria-current=page]{background:var(--paper);color:var(--ink);font-weight:600}
.badge{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;background:var(--petrol);color:#fff;font-size:12px;font-weight:600;line-height:20px;text-align:center}
form.user{display:flex;align-items:center;gap:var(--s3);margin:0;flex-shrink:0}
.user-mail{font-size:13px;color:var(--muted)}
header.top .bar>.spacer{flex:1}

/* Hinweisleiste (Versand noch nicht aktiviert) */
.notice-bar{background:#faf6e6;border-bottom:1px solid #eee3b8;color:#5a4a10;font-size:13px}
.notice-bar>div{padding:var(--s2) 0}
.notice-bar a{color:inherit;text-decoration-color:#c9b560}

/* Inhalt */
main{flex:1;padding:var(--s5) 0 var(--s7)}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.page-head .sub{margin:var(--s1) 0 0;color:var(--muted);font-size:14px;max-width:72ch}
.page-head .head-actions{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.flash{padding:var(--s3) var(--s4);border:1px solid var(--petrol-line);border-radius:var(--r);margin-bottom:var(--s4);background:var(--petrol-tint);color:var(--petrol-dark)}
.flash.err{border-color:var(--err-line);background:var(--err-bg);color:var(--err)}
h2.sec{margin:var(--s5) 0 var(--s3)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s5);margin-bottom:var(--s4);min-width:0}
.card>:last-child{margin-bottom:0}
.card>h2:first-child,.card>h2{margin-bottom:var(--s3)}
.card.flush{padding:0;overflow:hidden}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.card-head h2{font-size:15px}
.card-head a,.card-foot a{font-size:14px}
.card-foot{padding:var(--s3) var(--s4);border-top:1px solid var(--line);font-size:14px}
.card-body{padding:var(--s4)}
.callout{padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r);margin-bottom:var(--s4);background:#fff}
.callout.info{background:var(--info-bg);border-color:#c9d9e6;color:var(--info-ink)}
.callout.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}
.callout.err{background:var(--err-bg);border-color:var(--err-line);color:var(--err)}
.callout p{margin:0}
.callout .btn{margin-top:var(--s3)}
.empty{padding:var(--s6) var(--s4);text-align:center;color:var(--muted)}
.empty p{margin:0 0 var(--s3)}
.empty .btn{margin-top:var(--s1)}
td.empty{display:table-cell}

/* Kennzahlenleiste */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin-bottom:var(--s4)}
.stat{background:#fff;padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:2px;min-width:0}
.stat .l{font-size:13px;color:var(--muted)}
.stat .v{font-size:22px;font-weight:600;line-height:1.3}
.stat .d{font-size:13px;color:var(--muted)}
a.stat{text-decoration:none;color:inherit}
a.stat:hover{background:#fafcfc}
.cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--s4);align-items:start}
.cols>div{min-width:0}
.cols .card:last-child{margin-bottom:var(--s4)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:var(--s1) var(--s4);margin:0;font-size:14px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;text-align:right}
.list{list-style:none;margin:0;padding:0}
.list li{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:var(--s3);align-items:center}
.list li:last-child{border-bottom:0}
.list .t{min-width:0}
.list .t b{display:block;overflow-wrap:anywhere}
.list .t span{font-size:13px;color:var(--muted)}

/* Tabellen */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);vertical-align:middle;font-size:14px}
th{font-size:13px;font-weight:600;color:var(--muted);background:#fafbfc;white-space:nowrap}
tbody tr:last-child>td{border-bottom:0}
tbody tr:hover>td{background:#fafcfc}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
td.nowrap{white-space:nowrap}
td .muted{font-size:13px}
td.actions{white-space:nowrap;text-align:right}
td.actions>*{display:inline-block;vertical-align:middle;margin-left:var(--s2)}
td.actions>.btn{display:inline-flex}
td.empty:hover{background:none}
.scroll{overflow-x:auto}
table.lines{min-width:560px}
table.lines th,table.lines td{padding:0 var(--s2) var(--s2) 0;border:0;background:none}
table.lines td:first-child{width:44%}
table.lines input,table.lines select{margin:0}

/* Formulare */
label{display:block;font-size:14px;font-weight:600;margin:0 0 var(--s1)}
label .muted{font-weight:400}
input,select,textarea{width:100%;display:block;background:#fff;color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r);padding:0 var(--s3);height:36px;font:inherit;margin-bottom:var(--s4)}
textarea{height:auto;padding:var(--s2) var(--s3);resize:vertical;min-height:84px}
select{appearance:none;padding-right:36px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(-45deg,transparent 50%,var(--muted) 50%);background-position:calc(100% - 18px) 15px,calc(100% - 13px) 15px;background-size:5px 5px;background-repeat:no-repeat}
input[type=checkbox]{width:16px;height:16px;padding:0;margin:3px 0 0;accent-color:var(--petrol)}
input[type=file]{height:auto;padding:var(--s2) var(--s3)}
input[type=file]::file-selector-button{font:inherit;font-size:13px;margin-right:var(--s3);padding:var(--s1) var(--s3);border:1px solid var(--line-strong);border-radius:var(--r);background:var(--paper);color:var(--ink);cursor:pointer}
input:hover,select:hover,textarea:hover{border-color:var(--faint)}
input:focus,select:focus,textarea:focus{border-color:var(--petrol);outline:2px solid var(--petrol-tint);outline-offset:0}
::placeholder{color:var(--faint)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s4)}
.hint{margin:calc(var(--s2)*-1) 0 var(--s4);font-size:13px;color:var(--muted)}
.form-narrow{max-width:760px}
fieldset{border:0;padding:0;margin:0 0 var(--s4)}
legend{font-weight:600;padding:0;margin-bottom:var(--s2)}
details.adv{margin:0 0 var(--s4)}
details.adv>summary{cursor:pointer;color:var(--petrol-dark);font-size:14px;padding:var(--s1) 0}
details.adv[open]>summary{margin-bottom:var(--s3)}

details.guide{border:1px solid var(--line);border-radius:var(--r);padding:var(--s3) var(--s4);background:var(--paper)}
details.guide ol{margin:0 0 var(--s3);padding-left:var(--s5)}
details.guide li{margin-bottom:var(--s2);font-size:14px}
details.guide p.hint{margin:0}
dl.setup{margin:0 0 var(--s4)}
dl.setup dd{text-align:left}

/* Schaltflächen: eine Hauptaktion je Seite (Petrol), alles andere neutral */
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:36px;padding:0 var(--s4);border:1px solid var(--line-strong);border-radius:var(--r);background:#fff;color:var(--ink);font:500 14px/1 var(--body);cursor:pointer;text-decoration:none;white-space:nowrap}
button:hover,.btn:hover{background:var(--paper);border-color:var(--faint);color:var(--ink)}
button.primary,.btn.primary{background:var(--petrol);border-color:var(--petrol);color:#fff}
button.primary:hover,.btn.primary:hover{background:var(--petrol-dark);border-color:var(--petrol-dark);color:#fff}
button.danger,.btn.danger{color:var(--err)}
button.danger:hover,.btn.danger:hover{background:var(--err-bg);border-color:var(--err-line);color:var(--err)}
button.sm,.btn.sm{height:30px;padding:0 var(--s3);font-size:13px}
button.ghost,.btn.ghost{border-color:transparent;background:transparent}
button.ghost:hover,.btn.ghost:hover{background:var(--paper);border-color:transparent}
button.sec,.btn.sec{}
button:disabled,button:disabled:hover{background:var(--paper);color:var(--faint);border-color:var(--line);cursor:not-allowed}
.actions{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin:var(--s4) 0 0}
form.inline{display:inline;margin:0}
.bar-actions{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin-bottom:var(--s4)}

/* Zweite Ebene unter Abos */
.subnav{display:flex;gap:var(--s1);margin:0 0 var(--s4);border-bottom:1px solid var(--line)}
.subnav a{padding:var(--s2) var(--s3);color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.subnav a:hover{color:var(--ink)}
.subnav a[aria-current=page]{color:var(--ink);font-weight:600;border-bottom-color:var(--petrol)}

/* Status-Pillen */
.pill{display:inline-flex;align-items:center;height:22px;padding:0 var(--s2);border-radius:999px;font-size:12px;font-weight:600;line-height:1;background:#eef2f5;color:#40525f;white-space:nowrap;vertical-align:middle}
.pill.ok{background:var(--petrol-tint);color:var(--petrol-dark)}
.pill.warn{background:var(--warn-bg);color:var(--warn-ink)}
.pill.err{background:var(--err-bg);color:var(--err)}
.pill.info{background:var(--info-bg);color:var(--info-ink)}

/* Freigabe */
.msg{padding:var(--s4)}
.msg+.msg{border-top:1px solid var(--line)}
.msg-head{display:flex;gap:var(--s2) var(--s3);flex-wrap:wrap;align-items:center}
.msg-head b{font-size:15px;overflow-wrap:anywhere}
.msg-meta{color:var(--muted);font-size:13px;margin:var(--s1) 0 var(--s3)}
.msg details>summary{cursor:pointer;color:var(--petrol-dark);font-size:14px}
.msg-note{margin:var(--s3) 0;padding:var(--s2) var(--s3);border:1px solid var(--warn-line);border-radius:var(--r);background:var(--warn-bg);color:var(--warn-ink);font-size:13px}
pre.mail{white-space:pre-wrap;overflow-wrap:anywhere;margin:var(--s3) 0;background:#fafbfc;border:1px solid var(--line);border-radius:var(--r);padding:var(--s3) var(--s4);font:14px/1.6 var(--body);color:var(--ink);max-width:76ch}

details.log{margin:var(--s2) 0 0;font-size:13px}
details.log>summary{cursor:pointer;color:var(--petrol-dark)}
details.log ul{margin:var(--s2) 0 0;padding-left:var(--s4)}
details.log li{margin-bottom:var(--s1);overflow-wrap:anywhere}

/* Einstellungen: Abschnittsnavigation + Inhalt */
.settings{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s6);align-items:start}
.sidenav{position:sticky;top:var(--s4);display:flex;flex-direction:column;gap:var(--s1)}
.sidenav a{padding:var(--s2) var(--s3);border-radius:var(--r);color:var(--muted);text-decoration:none;font-size:14px}
.sidenav a:hover{background:var(--paper);color:var(--ink)}
.settings .card{max-width:760px;scroll-margin-top:var(--s4)}
.feature{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.feature:last-child{border-bottom:0;padding-bottom:0}
.feature:first-of-type{padding-top:0}
.feature p{margin:0;font-size:14px;color:var(--muted)}

/* Anmeldung */
.auth{max-width:420px;margin:var(--s6) auto 0}
.auth-logo{margin-bottom:var(--s5)}
.auth-logo img{height:32px;width:auto;max-width:100%;display:block}
.auth h1{margin-bottom:var(--s2)}
.auth .lead{color:var(--muted);margin-bottom:var(--s5)}
.auth form button{width:100%;height:40px}
.auth .below{margin-top:var(--s4);font-size:14px;color:var(--muted)}

/* Fußzeile */
footer.site{display:flex;justify-content:space-between;gap:var(--s2) var(--s5);flex-wrap:wrap;padding:var(--s4) 0 var(--s5);border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
footer.site p{margin:0;max-width:640px}

/* Breite Bildschirme → Signet statt Lockup, wenn es eng wird */
@media(max-width:1180px){
  .brand img.lockup{display:none}
  .brand .mini{display:inline-flex}
  .user-mail{display:none}
}
@media(max-width:960px){
  .cols{grid-template-columns:1fr}
  .settings{grid-template-columns:1fr;gap:var(--s4)}
  .sidenav{position:static;flex-direction:row;flex-wrap:wrap}
}

/* Mobil: Navigation einzeilig scrollbar, Tabellen werden Karten */
@media(max-width:720px){
  body{font-size:15px}
  main{padding:var(--s4) 0 var(--s6)}
  .bar{flex-wrap:wrap;gap:var(--s2) var(--s3);padding-top:var(--s2)}
  .bar .brand{order:1}
  form.user{order:2;margin-left:auto}
  .top-nav{order:3;flex:0 0 100%;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gutter)*-1);padding:0 var(--gutter) var(--s2)}
  .top-nav::-webkit-scrollbar{display:none}
  .row{grid-template-columns:1fr}
  .page-head{margin-bottom:var(--s4)}
  .card{padding:var(--s4)}
  .stats{grid-template-columns:1fr 1fr}
  .stat .v{font-size:20px}
  .card.flush.stack{background:none;border:0;overflow:visible}
  .stack thead{display:none}
  .stack table,.stack tbody,.stack tr,.stack td{display:block;width:100%}
  .stack tr{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);margin-bottom:var(--s2);padding:var(--s2) var(--s4)}
  .stack tbody tr:hover>td{background:none}
  .stack td,.stack td.num{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);padding:var(--s1) 0;border:0;text-align:right;white-space:normal}
  .stack td[data-label]:before{content:attr(data-label);flex:0 0 36%;color:var(--muted);font-size:13px;text-align:left}
  .stack td>.cv{text-align:right;min-width:0;overflow-wrap:anywhere}
  .stack td.t-main{display:block;text-align:left;font-weight:600;padding:var(--s1) 0 var(--s2)}
  .stack td.num{white-space:nowrap}
  .stack td.actions{justify-content:flex-start;padding-top:var(--s3);margin-top:var(--s2);border-top:1px solid var(--line)}
  .stack td.actions>*{margin:0 var(--s2) 0 0}
  .stack td.sel{justify-content:flex-start;gap:var(--s3)}
  .stack td.sel:after{content:'Zum Buchen auswählen';font-size:14px}
  .stack td.sel-fin:after{content:'Zum Finalisieren auswählen';font-size:14px}
  .stack td.sel-imp:after{content:'Als Abo übernehmen';font-size:14px}
  .stack td.empty{display:block;text-align:center}
  .stack td:empty{display:none}
  .stack tr:has(input:checked){border-color:var(--petrol)}
  .settings .card{max-width:none}
  .auth{margin-top:var(--s4)}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}