/* ============================================================
   Lizenztresor – UI
   Direction: "Tresor" – helle Datenflächen, smaragd-anthrazit
   Kontrollpult, weiche Tiefe, ein leuchtender Margen-Akzent.
   ============================================================ */
:root{
  /* Flächen */
  --bg:#eef1ee;            /* dezent warmes Grau-Grün, kein Cream-Default */
  --paper:#f5f7f4;
  --card:#ffffff;
  --ink:#14181d;          /* warmes Fast-Schwarz */
  --ink-2:#39414c;
  --muted:#6a727e;
  --muted-2:#9aa2ad;
  --line:#e5e8e4;
  --line-2:#eef0ec;

  /* Smaragd-Akzent (Vertrauen / Marge) */
  --accent:#0c9b73;
  --accent-dk:#0a8262;
  --accent-2:#13b487;
  --accent-soft:#e4f4ee;
  --accent-ring:rgba(12,155,115,.18);

  /* Vault-Sidebar */
  --vault-1:#102a23;
  --vault-2:#0a1a16;
  --vault-line:#1d3a31;
  --vault-text:#9fb3aa;
  --vault-text-2:#6f8a80;

  /* Status */
  --red:#c4362a; --red-soft:#fbe9e7;
  --amber:#9a6a12; --amber-soft:#fbf0db;
  --green:#0c8a55; --green-soft:#e3f3ea;

  /* Schatten – mehrschichtig, weich */
  --sh-sm:0 1px 2px rgba(16,24,32,.04), 0 1px 3px rgba(16,24,32,.05);
  --sh-md:0 6px 16px -6px rgba(16,24,32,.12), 0 2px 6px -2px rgba(16,24,32,.06);
  --sh-lg:0 24px 60px -12px rgba(8,26,22,.45);
  --sh-glow:0 10px 30px -8px rgba(12,155,115,.45);

  --r-card:13px; --r-ctrl:9px; --r-pill:999px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent-soft)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---------- App-Shell ---------- */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{
  background:linear-gradient(180deg,var(--vault-1),var(--vault-2));
  color:var(--vault-text);padding:22px 16px;position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;border-right:1px solid #0a1714;
}
.brand{display:flex;align-items:center;gap:11px;padding:4px 8px 22px;color:#fff}
.brand .dot{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;
  background:linear-gradient(145deg,var(--accent-2),var(--accent-dk));box-shadow:var(--sh-glow);letter-spacing:.5px;
}
.brand b{font-size:15.5px;letter-spacing:-.2px;line-height:1.1}
.brand small{display:block;color:var(--vault-text-2);font-size:11px;font-weight:500;letter-spacing:.3px}
.nav{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.nav-eyebrow{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--vault-text-2);padding:6px 10px 8px;font-weight:700}
.nav-item{
  position:relative;padding:10px 12px;border-radius:9px;color:var(--vault-text);font-weight:550;
  display:flex;align-items:center;gap:11px;transition:background .15s,color .15s;font-size:13.5px;
}
.nav-item .ic{width:18px;text-align:center;font-size:14px;opacity:.85;transition:opacity .15s}
.nav-item:hover{background:rgba(255,255,255,.05);color:#eafff6}
.nav-item:hover .ic{opacity:1}
.nav-item.active{background:linear-gradient(90deg,rgba(19,180,135,.22),rgba(19,180,135,.06));color:#fff;box-shadow:inset 0 0 0 1px var(--vault-line)}
.nav-item.active::before{content:"";position:absolute;left:-16px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--accent-2);box-shadow:0 0 12px var(--accent-2)}
.nav-item.active .ic{opacity:1;color:var(--accent-2)}
.side-foot{margin-top:auto;border-top:1px solid var(--vault-line);padding-top:14px;font-size:12px}
.side-foot .u{display:flex;align-items:center;gap:9px;color:#cfe0d9;margin-bottom:11px}
.av{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:11.5px;color:#fff;font-weight:700;
  background:linear-gradient(145deg,#1f4a3e,#15332b);box-shadow:inset 0 0 0 1px var(--vault-line)}
.logout{width:100%;background:transparent;border:1px solid var(--vault-line);color:var(--vault-text);padding:8px;border-radius:8px;cursor:pointer;font-size:12.5px;font-weight:550;transition:.15s}
.logout:hover{color:#fff;border-color:#2c5247;background:rgba(255,255,255,.04)}

main{padding:30px 38px 70px;max-width:1080px}

/* ---------- Header ---------- */
.crumb{font-size:12px;color:var(--muted);margin-bottom:8px;font-weight:500}
.crumb b{color:var(--ink-2)}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.top h1{font-size:25px;font-weight:720;letter-spacing:-.6px;display:flex;align-items:center;gap:11px;line-height:1.15}
.top p{color:var(--muted);font-size:13.5px;margin-top:5px;max-width:60ch}

/* ---------- Buttons ---------- */
.btn{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:9px 16px;border-radius:var(--r-ctrl);
  font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.15s;box-shadow:var(--sh-sm)}
.btn:hover{border-color:#d3d8d0;transform:translateY(-1px);box-shadow:var(--sh-md)}
.btn:active{transform:translateY(0)}
.btn.pri{background:linear-gradient(145deg,var(--accent-2),var(--accent));border-color:var(--accent-dk);color:#fff;box-shadow:var(--sh-glow)}
.btn.pri:hover{filter:brightness(1.04)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted);box-shadow:none}
.btn.ghost:hover{color:var(--ink);background:var(--line-2);box-shadow:none;transform:none}
.btn.sm{padding:6px 12px;font-size:12.5px}
.btn.danger{color:var(--red);border-color:#eccac6;background:#fff}
.btn.danger:hover{background:var(--red-soft);border-color:#e3b0aa}

/* ---------- Flash ---------- */
.flash{padding:12px 16px;border-radius:11px;margin-bottom:20px;font-size:13.5px;font-weight:550;border:1px solid;display:flex;align-items:center;gap:9px;box-shadow:var(--sh-sm)}
.flash::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.flash.ok{background:var(--green-soft);color:#0a6b43;border-color:#bfe3cf}.flash.ok::before{background:var(--green)}
.flash.err{background:var(--red-soft);color:#9e2b21;border-color:#eebfb9}.flash.err::before{background:var(--red)}
.flash-fixed{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:60;padding:12px 20px;border-radius:11px;font-size:13.5px;font-weight:550;border:1px solid;box-shadow:var(--sh-md);animation:drop .35s cubic-bezier(.2,.8,.2,1)}
.flash-fixed.ok{background:var(--green-soft);color:#0a6b43;border-color:#bfe3cf}
.flash-fixed.err{background:var(--red-soft);color:#9e2b21;border-color:#eebfb9}
@keyframes drop{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- KPI / Stats ---------- */
.kpis,.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.kpi{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 18px 16px;box-shadow:var(--sh-sm);transition:.18s;overflow:hidden}
.kpi:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.kpi .lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;font-weight:700}
.kpi .val{font-size:30px;font-weight:760;margin-top:8px;letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1}
.kpi .sub{font-size:12px;color:var(--muted);margin-top:5px}
.kpi.red .val{color:var(--red)}.kpi.amber .val{color:var(--amber)}.kpi.green .val{color:var(--green)}
.kpi.red::after,.kpi.amber::after,.kpi.green::after{content:"";position:absolute;inset:0 auto 0 0;width:3px}
.kpi.red::after{background:var(--red)}.kpi.amber::after{background:var(--amber)}.kpi.green::after{background:var(--green)}
/* Signature: leuchtende Margen-Kachel */
.kpi.accent{background:linear-gradient(150deg,#0e9b73,#0a6f55 90%);border-color:var(--accent-dk);color:#fff;box-shadow:var(--sh-glow)}
.kpi.accent .lbl{color:#bdebda}.kpi.accent .sub{color:#a9e2cd}
.kpi.accent .val{color:#fff}
.kpi.accent::before{content:"";position:absolute;width:140px;height:140px;right:-40px;top:-50px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%)}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin-bottom:22px;box-shadow:var(--sh-sm)}
.card-h{padding:15px 20px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-h h2{font-size:14.5px;font-weight:680;letter-spacing:-.2px}
.card-h .meta{font-size:12px;color:var(--muted)}
.card-body{padding:24px 26px}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse}
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700;text-align:left;padding:12px 20px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fafbf9,#f6f8f5)}
td{padding:14px 20px;border-bottom:1px solid var(--line-2);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr[data-href]{cursor:pointer;transition:background .12s}
tbody tr[data-href]:hover td{background:#f7faf8}
.right{text-align:right}.center{text-align:center}
.prod{font-weight:650}.sub2{font-size:12px;color:var(--muted)}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12.5px}
.empty{padding:48px 20px;text-align:center;color:var(--muted);font-size:13.5px}

/* ---------- Tags / Status ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650;padding:4px 10px;border-radius:var(--r-pill);white-space:nowrap;line-height:1}
.tag.r{background:var(--red-soft);color:var(--red)}.tag.a{background:var(--amber-soft);color:var(--amber)}
.tag.g{background:var(--green-soft);color:var(--green)}.tag.n{background:#eef1ec;color:var(--muted)}
.dotled{width:6px;height:6px;border-radius:50%}.dotled.r{background:var(--red)}.dotled.a{background:var(--amber)}.dotled.g{background:var(--green)}

/* ---------- Seat bar ---------- */
.seats{display:flex;align-items:center;gap:10px}
.bar{width:96px;height:8px;border-radius:5px;background:#e9ece8;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.05)}
.bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--accent-2),var(--accent))}
.bar i.full{background:linear-gradient(90deg,#e0685c,var(--red))}
.seats b{font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums}

/* ---------- Secret ---------- */
.secret{display:inline-flex;align-items:center;gap:9px}
.secret .dots{letter-spacing:2px;color:var(--muted)}
.eye{border:1px solid var(--line);background:#fff;border-radius:8px;width:30px;height:28px;display:grid;place-items:center;cursor:pointer;font-size:12px;transition:.15s}
.eye:hover{border-color:#cfd4cc;background:#fafbf9}

/* ---------- Forms ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.f{margin-bottom:20px}
.f.req label::after{content:" *";color:var(--accent)}
.f label{display:block;font-size:12.5px;font-weight:650;margin-bottom:7px;color:var(--ink-2)}
.f input,.f select,.f textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-ctrl);font-size:13.5px;font-family:inherit;background:#fff;color:var(--ink);transition:.15s}
.f input::placeholder{color:var(--muted-2)}
.f input:hover,.f select:hover{border-color:#d3d8d0}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring)}
.f input:disabled{background:#f6f8f5;color:var(--muted)}
.f textarea{resize:vertical;min-height:74px}
.f .hint{font-size:11.5px;color:var(--muted);margin-top:6px}

.inpgroup{display:flex}
.inpgroup input{border-radius:var(--r-ctrl) 0 0 var(--r-ctrl)}
.inpgroup .suffix{display:flex;align-items:center;padding:0 13px;border:1px solid var(--line);border-left:none;border-radius:0 var(--r-ctrl) var(--r-ctrl) 0;background:#f7f9f6;color:var(--muted);font-weight:600}
.inpgroup.pre input{border-radius:0 var(--r-ctrl) var(--r-ctrl) 0}
.inpgroup.pre .prefix{display:flex;align-items:center;padding:0 13px;border:1px solid var(--line);border-right:none;border-radius:var(--r-ctrl) 0 0 var(--r-ctrl);background:#f7f9f6;color:var(--muted);font-weight:600}

.sec{font-size:11px;text-transform:uppercase;letter-spacing:.9px;color:var(--muted);font-weight:700;margin:6px 0 18px;display:flex;align-items:center;gap:12px}
.sec::after{content:"";flex:1;height:1px;background:var(--line)}
.sec:not(:first-child){margin-top:32px}

.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#f5f7f4;padding:3px;gap:3px}
.seg button{border:none;background:transparent;padding:8px 18px;font-size:13px;font-weight:650;color:var(--muted);cursor:pointer;border-radius:7px;transition:.15s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:#fff;color:var(--accent-dk);box-shadow:var(--sh-sm)}

.poolbox{display:none;background:var(--accent-soft);border:1px solid #c4e6da;border-radius:11px;padding:16px 18px;margin-top:16px}
.poolbox.show{display:block;animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.switch{display:inline-flex;align-items:center;gap:11px;cursor:pointer;padding-top:6px}
.switch .track{width:42px;height:24px;border-radius:var(--r-pill);background:#cdd3cb;position:relative;transition:.18s}
.switch .track i{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.18s;box-shadow:var(--sh-sm)}
.switch.on .track{background:var(--accent)}.switch.on .track i{left:20px}
.switch span{font-size:13px;color:var(--ink-2);font-weight:550}

.foot{padding:16px 26px;border-top:1px solid var(--line-2);display:flex;justify-content:flex-end;gap:11px;background:#fafbf9}
.lock{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--green);font-weight:700;background:var(--green-soft);padding:3px 9px;border-radius:var(--r-pill)}

/* ---------- Pool-Detail ---------- */
.price-edit{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:.15s}
.price-edit:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring)}
.price-edit input{border:none;width:80px;text-align:right;padding:8px 9px;font:inherit;font-weight:650;font-variant-numeric:tabular-nums}
.price-edit input:focus{outline:none}
.price-edit .eur{padding:0 10px;color:var(--muted);background:#f7f9f6;border-left:1px solid var(--line);align-self:stretch;display:flex;align-items:center;font-weight:600}
.pill-check{width:20px;height:20px;border-radius:6px;border:1.5px solid #ccd2c9;display:inline-grid;place-items:center;cursor:pointer;background:#fff;transition:.12s}
.pill-check:hover{border-color:var(--accent)}
.pill-check.on{background:var(--accent);border-color:var(--accent);color:#fff;font-size:12px}
.pill-check.on::after{content:"✓"}
.avatar{width:32px;height:32px;border-radius:9px;background:linear-gradient(145deg,#eef2ee,#e3e9e2);display:inline-grid;place-items:center;font-size:12px;font-weight:750;color:var(--ink-2);margin-right:11px;vertical-align:middle}
tfoot td{background:#fafbf9;font-weight:650;border-top:2px solid var(--line)}
.pos{color:var(--green)}
.note-box{font-size:12.5px;color:var(--muted);background:#f7f9f6;border:1px solid var(--line-2);border-radius:11px;padding:14px 16px;line-height:1.65;margin:18px 0 0}
.note-box b{color:var(--ink-2)}
.cellinput{border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%;font-size:12.5px;transition:.15s}
.cellinput:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}

/* ---------- Login / 2FA ---------- */
.login-wrap{display:grid;place-items:center;min-height:100vh;padding:24px;
  background:radial-gradient(1100px 560px at 50% -8%,#15392f,#0a1613 60%)}
.login{background:#fff;border-radius:18px;padding:38px 34px;width:392px;box-shadow:var(--sh-lg);border:1px solid rgba(255,255,255,.06)}
.login .brand{justify-content:center;padding-bottom:8px}
.login .brand b{color:var(--ink)}.login .brand small{color:var(--muted)}
.login h3{text-align:center;font-size:18px;font-weight:700;letter-spacing:-.3px;margin-bottom:3px}
.login p.s{text-align:center;color:var(--muted);font-size:12.5px;margin-bottom:24px}
.qr{display:grid;place-items:center;margin:8px 0 16px}
.qr canvas,.qr img{border:1px solid var(--line);border-radius:11px;padding:8px;background:#fff}
.secret-code{font-family:ui-monospace,monospace;background:#f7f9f6;border:1px solid var(--line);border-radius:9px;padding:11px 13px;text-align:center;letter-spacing:3px;font-size:14px;word-break:break-all;margin-bottom:16px;color:var(--ink-2)}

/* ---------- Responsive ---------- */
@media(max-width:880px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:14px 16px}
  .brand{padding:0 12px 0 4px}
  .nav-eyebrow{display:none}
  .nav{flex-direction:row;margin:0;flex-wrap:wrap}
  .nav-item.active::before{display:none}
  .side-foot{margin:0 0 0 auto;border:none;padding:0;display:flex;gap:10px;align-items:center}
  .side-foot .u{margin:0}
  .kpis,.strip{grid-template-columns:1fr 1fr}
  .grid2,.grid3{grid-template-columns:1fr}
  main{max-width:none;padding:22px 18px 60px}
  .top h1{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .btn:hover,.kpi:hover{transform:none}
}