/* ================================================================
   konto.css – Kundenkonto-Bereich (Block A2)
   --accent/--bg/--fg per inline <style> in konto/index.php gesetzt
   ================================================================ */

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:#0d0d0d;color:#fff;min-height:100vh;
  font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}

.page{min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:24px;position:relative;}
.page-bg{position:fixed;inset:0;z-index:0;background-size:cover;
  background-position:center;background-repeat:no-repeat;}
.page-bg-overlay{position:fixed;inset:0;z-index:1;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.42) 0%,rgba(0,0,0,.66) 100%);}
.card{position:relative;z-index:2;width:min(420px,100%);
  background:rgba(14,14,14,.85);border:1px solid rgba(255,255,255,.09);
  border-radius:18px;padding:34px 32px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 28px 72px rgba(0,0,0,.6);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);}
.card.wide{width:min(560px,100%);}

.brand{font-size:20px;font-weight:800;color:var(--accent);letter-spacing:-.3px;
  text-align:center;margin-bottom:22px;}
h2{margin:0 0 18px;font-size:18px;font-weight:700;letter-spacing:-.1px;}
h3{margin:28px 0 12px;font-size:14px;font-weight:700;color:#aaa;
  text-transform:uppercase;letter-spacing:.4px;}
h3:first-of-type{margin-top:0;}
p.hint{color:#888;font-size:13px;line-height:1.6;margin:0 0 16px;}

.field{margin-bottom:16px;}
.field label{display:block;font-size:12px;color:#888;margin-bottom:6px;font-weight:500;}
.field input{width:100%;padding:12px 14px;border:1px solid #444;
  background:#232323;color:#fff;font-size:15px;border-radius:9px;outline:none;
  transition:border-color .15s,box-shadow .15s;}
.field input:hover{border-color:#5a5a5a;}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,140,0,.15);}
.field select{width:100%;padding:12px 14px;border:1px solid #444;
  background:#232323;color:#fff;font-size:15px;border-radius:9px;outline:none;}
.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,140,0,.15);}
.check-line{display:flex;align-items:center;gap:10px;font-size:14px;color:#ddd;
  padding:7px 0;cursor:pointer;}
.check-line input{width:auto;accent-color:var(--accent);}

.btn{display:inline-block;width:100%;padding:14px;border:none;border-radius:9px;
  background:var(--accent);color:#1a1a1a;font-size:15px;font-weight:700;
  cursor:pointer;margin-top:4px;text-align:center;
  transition:transform .15s cubic-bezier(.2,.8,.2,1),box-shadow .15s,opacity .15s;}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(255,140,0,.5);}
.btn:active{transform:translateY(0) scale(.98);}
.btn.btn-muted{background:#2a2a2a;color:#ccc;}
.btn.btn-danger{background:#3a1414;color:#ff8888;}
.btn.btn-sm{width:auto;padding:9px 16px;font-size:13px;}

.msg{margin-top:14px;padding:12px 14px;border-radius:9px;font-size:14px;}
.msg-err{background:#1a0808;border:1px solid #5a1a1a;color:#ff8888;}
.msg-ok{background:#0a1a0a;border:1px solid #1a4a1a;color:#75ff9a;}

.link-row{margin-top:18px;display:flex;justify-content:space-between;
  font-size:13px;color:#777;}

.totp-secret{font-family:monospace;font-size:16px;letter-spacing:2px;
  text-align:center;background:#1a1a1a;border:1px solid #333;border-radius:9px;
  padding:14px;margin-bottom:16px;color:#fff;word-break:break-all;}

.dash-row{display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid #1f1f1f;gap:16px;}
.dash-row:last-child{border-bottom:none;}
.dash-row .dash-label{font-size:14px;color:#ddd;}
.dash-row .dash-sub{font-size:12px;color:#777;margin-top:2px;}

.danger-zone{margin-top:30px;padding-top:18px;border-top:1px solid #2a1414;}
.danger-zone h3{color:#ff8888;}

/* ── Buchungen (Block B3) ─────────────────────────────────────── */
.booking-item{border:1px solid #222;border-radius:12px;padding:6px 16px;
  margin-bottom:14px;background:rgba(255,255,255,.02);}
.booking-item .dash-row{border-bottom:none;}
.booking-offer{border-top:1px solid #1f1f1f;padding:12px 0 14px;}

.top-link{position:absolute;top:24px;left:24px;z-index:2;font-size:13px;color:#888;}