@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --sb:#7a1c2e;--sb-mid:#a02840;--sb-light:#f9edef;--sb-border:#d4aab2;
  --ww:#1e4d35;--ww-mid:#2a6b49;--ww-light:#e8f3ec;--ww-border:#9dc4ae;
  --sand:#f6f2ec;--sand2:#ede7db;--sand3:#e2dbd0;
  --ink:#1c1c1a;--ink2:#3e3d38;--muted:#8a8880;--mutedl:#c5c2bb;
  --s-res-bg:#fdf3dc;--s-res:#7a5000;--s-res-b:#e8c97a;
  --s-anf-bg:#dce8f7;--s-anf:#1a3a6e;--s-anf-b:#90b4e0;
  --s-anz-bg:#d0e4f5;--s-anz:#1e4d7a;--s-anz-b:#6fa8d8;
  --s-bez-bg:#d6eedf;--s-bez:#1a4d2e;--s-bez-b:#7dc09a;
  --radius:12px;
  --shadow:0 2px 14px rgba(28,28,26,.09);
  --shadow-lg:0 8px 36px rgba(28,28,26,.16);
}

body{font-family:'DM Sans',sans-serif;background:var(--sand);color:var(--ink);min-height:100vh;font-size:15px;line-height:1.5}

/* ── HEADER ── */
header{background:var(--ink);color:#f6f2ec;padding:13px 18px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 2px 14px rgba(0,0,0,.3)}
.logo{display:flex;align-items:center;gap:11px}
.ldots{display:flex;gap:5px}
.ldot{width:11px;height:11px;border-radius:50%}
.lsb{background:var(--sb-mid)}.lww{background:var(--ww-mid)}
header h1{font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:600;line-height:1.2}
header h1 small{display:block;font-family:'DM Sans',sans-serif;font-size:.62rem;font-weight:300;letter-spacing:.14em;text-transform:uppercase;color:#aaa;margin-bottom:1px}
.hright{display:flex;gap:7px;align-items:center}
.vtabs{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:8px;display:flex;overflow:hidden}
.vtab{background:none;border:none;color:#bbb;padding:7px 12px;cursor:pointer;font-size:.78rem;font-family:'DM Sans',sans-serif;font-weight:500;transition:all .15s;display:flex;align-items:center;gap:5px;white-space:nowrap}
.vtab svg{width:13px;height:13px;flex-shrink:0}
.vtab.active{background:rgba(255,255,255,.2);color:white}
.user-menu{display:flex;align-items:center;gap:8px}
.user-name{font-size:.78rem;color:#bbb;font-weight:500}
.btn-logout{color:#888;display:flex;align-items:center;transition:color .15s;text-decoration:none}
.btn-logout:hover{color:#f9edef}
.btn-add{background:var(--sb-mid);color:white;border:none;border-radius:7px;padding:8px 14px;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:5px;transition:opacity .15s}
.btn-add:hover{opacity:.85}
.btn-add svg{width:14px;height:14px}

/* ── MAIN ── */
main{max-width:1060px;margin:0 auto;padding:18px 14px 60px}

/* ── STATS ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:18px}
.sc{background:white;border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow);border-top:3px solid}
.sc.s0{border-color:var(--ink2)}.sc.s1{border-color:var(--s-res)}.sc.s2{border-color:var(--s-anz)}.sc.s3{border-color:var(--s-bez)}
.sn{font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:700;line-height:1}
.sl{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:500;margin-top:2px}

/* ── FILTER ── */
.fbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.pill{background:white;border:1.5px solid var(--sand2);border-radius:20px;padding:5px 12px;font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:500;cursor:pointer;color:var(--ink2);transition:all .15s}
.pill:hover{border-color:var(--ink2)}
.pill.active{background:var(--ink);color:white;border-color:var(--ink)}
.pill.asb{background:var(--sb);color:white;border-color:var(--sb)}
.pill.aww{background:var(--ww);color:white;border-color:var(--ww)}
.sw{margin-left:auto;position:relative}
.sw input{border:1.5px solid var(--sand2);border-radius:20px;padding:5px 12px 5px 30px;font-family:'DM Sans',sans-serif;font-size:.78rem;background:white;color:var(--ink);outline:none;width:155px;transition:border .15s,width .2s}
.sw input:focus{border-color:var(--sb);width:195px}
.sw svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--muted);width:13px;height:13px;pointer-events:none}

/* ── CALENDAR ── */
.cal-wrap{background:white;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.cal-nav{background:var(--ink);color:white;padding:14px 18px;display:flex;align-items:center;justify-content:space-between}
.cal-nav h2{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:600;min-width:160px;text-align:center}
.cal-nav-side{display:flex;gap:6px;align-items:center}
.cnbtn{background:rgba(255,255,255,.14);border:none;color:white;border-radius:7px;width:32px;height:32px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:background .15s}
.cnbtn:hover{background:rgba(255,255,255,.26)}
.btn-today{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:7px;padding:5px 12px;color:white;font-family:'DM Sans',sans-serif;font-size:.76rem;font-weight:500;cursor:pointer}
.btn-today:hover{background:rgba(255,255,255,.2)}
.cal-legend{padding:10px 18px;background:var(--sand);border-bottom:1px solid var(--sand2)}
.legend-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:5px}
.legend-row:last-child{margin-bottom:0}
.leg{display:flex;align-items:center;gap:6px;font-size:.7rem;font-weight:500;color:var(--ink2)}
.leg-sw{width:34px;height:12px;border-radius:3px;flex-shrink:0}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-dow{text-align:center;padding:7px 2px;background:var(--sand);border-bottom:1px solid var(--sand2);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.cal-dow.we{color:var(--sb-mid)}
.cal-cell{border-right:1px solid var(--sand2);border-bottom:1px solid var(--sand2);padding:5px 3px 3px;position:relative;cursor:default;transition:background .1s;min-height:100px;}
.cal-cell:nth-child(7n){border-right:none}
.cal-cell.other{background:#faf9f6}
.cal-cell.other .dnum{color:var(--mutedl)}
.cal-cell.today-cell{background:#f3ede3}
.cal-cell.free-day:hover{background:#ede8e0;cursor:pointer}
.cal-cell.we-bg{background:#faf8f5}
.cal-cell.we-bg.other{background:#f7f5f2}
.dnum{font-size:.78rem;font-weight:600;color:var(--ink2);width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;margin-bottom:3px;line-height:1;flex-shrink:0;}
.today-cell .dnum{background:var(--ink);color:white}
.slots{display:flex;flex-direction:column;gap:2px;margin-top:1px}
.slot{height:18px;position:relative;}
.bpill{position:absolute;top:0;bottom:0;left:0;right:0;display:flex;align-items:center;padding:0 5px;font-size:.63rem;font-weight:600;white-space:nowrap;overflow:hidden;cursor:pointer;transition:filter .12s;line-height:1;}
.bpill:hover{filter:brightness(.88)}
.bpill .bn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bpill.ps{border-radius:5px 0 0 5px}.bpill.pe{border-radius:0 5px 5px 0}
.bpill.pse{border-radius:5px}.bpill.pm{border-radius:0}.bpill.pw{border-radius:5px 0 0 5px}
/* Schlossberg */
.sb-vorm{background:rgba(249,237,239,.7);color:var(--sb);border-top:2px dotted var(--sb-border);border-bottom:2px dotted var(--sb-border)}
.sb-vorm.ps,.sb-vorm.pw,.sb-vorm.pse{border-left:2px dotted var(--sb-border)}
.sb-vorm.pe,.sb-vorm.pse{border-right:2px dotted var(--sb-border)}
.sb-res{background:rgba(249,237,239,.85);color:var(--sb);border-top:2px dashed var(--sb-mid);border-bottom:2px dashed var(--sb-mid)}
.sb-res.ps,.sb-res.pw,.sb-res.pse{border-left:2px dashed var(--sb-mid)}
.sb-res.pe,.sb-res.pse{border-right:2px dashed var(--sb-mid)}
.sb-bez{background:var(--sb-light);color:var(--sb);border-top:2px solid var(--sb);border-bottom:2px solid var(--sb)}
.sb-bez.ps,.sb-bez.pw,.sb-bez.pse{border-left:3px solid var(--sb)}
.sb-bez.pe,.sb-bez.pse{border-right:2px solid var(--sb)}
/* Weiherweg */
.ww-vorm{background:rgba(232,243,236,.7);color:var(--ww);border-top:2px dotted var(--ww-border);border-bottom:2px dotted var(--ww-border)}
.ww-vorm.ps,.ww-vorm.pw,.ww-vorm.pse{border-left:2px dotted var(--ww-border)}
.ww-vorm.pe,.ww-vorm.pse{border-right:2px dotted var(--ww-border)}
.ww-res{background:rgba(232,243,236,.85);color:var(--ww);border-top:2px dashed var(--ww-mid);border-bottom:2px dashed var(--ww-mid)}
.ww-res.ps,.ww-res.pw,.ww-res.pse{border-left:2px dashed var(--ww-mid)}
.ww-res.pe,.ww-res.pse{border-right:2px dashed var(--ww-mid)}
.ww-bez{background:var(--ww-light);color:var(--ww);border-top:2px solid var(--ww);border-bottom:2px solid var(--ww)}
.ww-bez.ps,.ww-bez.pw,.ww-bez.pse{border-left:3px solid var(--ww)}
.ww-bez.pe,.ww-bez.pse{border-right:2px solid var(--ww)}
/* Storniert */
.st-offen{background:#f0efee;color:#888;border-top:2px solid #ccc;border-bottom:2px solid #ccc}
.st-offen.ps,.st-offen.pw,.st-offen.pse{border-left:2px solid #ccc}
.st-offen.pe,.st-offen.pse{border-right:2px solid #ccc}

/* ── LIST VIEW ── */
.sec-head{display:flex;align-items:center;gap:9px;margin:20px 0 8px}
.sstripe{width:4px;height:20px;border-radius:2px}
.ssb{background:var(--sb)}.sww{background:var(--ww)}
.sec-head h2{font-family:'Playfair Display',serif;font-size:1rem;font-weight:600}
.sec-cnt{background:var(--sand2);border-radius:9px;padding:2px 8px;font-size:.7rem;color:var(--muted);font-weight:600}
.bgrid{display:grid;gap:8px}
.card{background:white;border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 14px;display:grid;grid-template-columns:50px 1fr auto auto;gap:8px 12px;align-items:center;cursor:pointer;transition:box-shadow .15s,transform .1s;border-left:4px solid}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.csb{border-left-color:var(--sb)}.cww{border-left-color:var(--ww)}
.card.past{opacity:.55}.card.cancelled{opacity:.45;background:#f7f6f5}
.cdate{text-align:center}
.cday{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;line-height:1}
.cmon{font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.cnts{font-size:.62rem;font-weight:600;background:var(--sand);border-radius:4px;padding:1px 4px;margin-top:2px;display:inline-block}
.csb .cnts{color:var(--sb)}.cww .cnts{color:var(--ww)}
.cname{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmeta{font-size:.72rem;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;margin-top:2px;align-items:center}
.hbadge{font-size:.65rem;font-weight:700;padding:2px 6px;border-radius:5px}
.csb .hbadge{color:var(--sb);background:var(--sb-light)}
.cww .hbadge{color:var(--ww);background:var(--ww-light)}
.cwohn{font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:3px 8px;border-radius:6px;white-space:nowrap}
.csb .cwohn{background:var(--sb-light);color:var(--sb)}
.cww .cwohn{background:var(--ww-light);color:var(--ww)}
.cpay{text-align:right}
.sbadge{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:20px;font-size:.7rem;font-weight:700;white-space:nowrap;border:1px solid}
.sd{width:5px;height:5px;border-radius:50%}
.b-vorm{background:var(--s-res-bg);color:var(--s-res);border-color:var(--s-res-b)}
.b-res{background:var(--s-anz-bg);color:var(--s-anz);border-color:var(--s-anz-b)}
.b-bez{background:var(--s-bez-bg);color:var(--s-bez);border-color:var(--s-bez-b)}
.b-st{background:#f0efee;color:#777;border-color:#ccc}
.camount{font-size:.74rem;color:var(--muted);margin-top:2px;font-weight:500}
.camount.offen{color:var(--s-res);font-weight:700}
.empty{text-align:center;padding:36px;color:var(--muted)}
.empty svg{width:34px;height:34px;margin:0 auto 9px;display:block;opacity:.3}

/* ── MODAL ── */
.overlay{position:fixed;inset:0;background:rgba(28,28,26,.6);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.overlay.open{opacity:1;pointer-events:all}
.modal{background:white;border-radius:20px 20px 0 0;padding:20px 18px 36px;width:100%;max-width:540px;max-height:92vh;overflow-y:auto;transform:translateY(30px);transition:transform .25s cubic-bezier(.32,.72,0,1);box-shadow:0 -6px 40px rgba(0,0,0,.22)}
.overlay.open .modal{transform:translateY(0)}
.mhandle{width:32px;height:4px;background:var(--sand2);border-radius:2px;margin:0 auto 15px}
.mtitle{font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mtag{font-family:'DM Sans',sans-serif;font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:3px 9px;border-radius:6px}
.tsb{background:var(--sb-light);color:var(--sb)}.tww{background:var(--ww-light);color:var(--ww)}
.msec{font-size:.67rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;margin:12px 0 6px}
.mdiv{height:1px;background:var(--sand2);margin:12px 0}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.frow.f1{grid-template-columns:1fr}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:.67rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700}
.field input,.field select,.field textarea{border:1.5px solid var(--sand2);border-radius:8px;padding:8px 10px;font-family:'DM Sans',sans-serif;font-size:.87rem;color:var(--ink);background:white;outline:none;transition:border .15s;-webkit-appearance:none;appearance:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--sb)}
.field textarea{resize:vertical;min-height:60px}
.paybox{background:var(--sand);border-radius:9px;padding:10px 13px;margin:5px 0 9px;display:flex;align-items:center;justify-content:space-between}
.paybox .pr{font-size:.84rem;font-weight:700}
.pr.red{color:var(--s-res)}.pr.green{color:var(--s-bez)}.pr.zero{color:var(--muted)}
.spicker{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:7px}
.spicker2{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:11px}
.sopt{border:2px solid var(--sand2);border-radius:9px;padding:8px 5px;text-align:center;cursor:pointer;transition:all .15s;font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.sopt:hover{border-color:var(--ink)}
.sopt.sv{background:var(--s-res-bg);border-color:var(--s-res-b);color:var(--s-res)}
.sopt.sr2{background:var(--s-anz-bg);border-color:var(--s-anz-b);color:var(--s-anz)}
.sopt.sb2{background:var(--s-bez-bg);border-color:var(--s-bez-b);color:var(--s-bez)}
.sopt.sst-o{background:#f0efee;border-color:#ccc;color:#777}
.sopt.sst-e{background:#e8e8e8;border-color:#bbb;color:#999}
.storno-info{background:#fdf3dc;border-radius:9px;padding:10px 13px;margin:4px 0 10px;font-size:.78rem;color:var(--s-res);border-left:3px solid var(--s-res-b)}
.hbox{background:var(--sand);border-radius:9px;padding:9px 12px;margin:4px 0 9px}
.hbox h4{font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.hentry{display:flex;align-items:center;gap:8px;font-size:.77rem;padding:3px 0;border-bottom:1px solid var(--sand2)}
.hentry:last-child{border-bottom:none}
.hdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.hdot-sb{background:var(--sb)}.hdot-ww{background:var(--ww)}
.conflict-warn{background:#fde8eb;border:1px solid var(--sb-border);border-radius:9px;padding:10px 13px;margin:6px 0;font-size:.78rem;color:var(--sb);font-weight:500}
.macts{display:flex;gap:8px;margin-top:14px}
.bsave{flex:1;background:var(--ink);color:white;border:none;border-radius:10px;padding:12px;font-family:'DM Sans',sans-serif;font-size:.87rem;font-weight:600;cursor:pointer;transition:background .15s}
.bsave:hover{background:var(--ink2)}
.bcancel{background:var(--sand);color:var(--ink2);border:none;border-radius:10px;padding:12px 14px;font-family:'DM Sans',sans-serif;font-size:.87rem;font-weight:500;cursor:pointer}
.bcancel:hover{background:var(--sand2)}
.bdel{background:#fde8eb;color:var(--sb);border:none;border-radius:10px;padding:12px;cursor:pointer;font-size:.87rem}
.bdel:hover{background:#f9d0d5}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink);color:white;border-radius:10px;padding:10px 18px;font-size:.81rem;font-weight:500;z-index:999;transition:transform .3s cubic-bezier(.32,.72,0,1);pointer-events:none;white-space:nowrap}
.toast.show{transform:translateX(-50%) translateY(0)}

@media(max-width:660px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .card{grid-template-columns:44px 1fr auto}
  .cwohn{display:none}
  .sw{margin-left:0;width:100%}
  .sw input{width:100%}
  .frow{grid-template-columns:1fr}
  .cal-cell{min-height:80px}
  header h1{font-size:.92rem}
  .vtab span{display:none}
  .vtab{padding:7px 9px}
  .legend-row{gap:9px}
  .user-name{display:none}
}
@media(max-width:380px){
  .btn-add .badd-lbl{display:none}
  .cal-cell{min-height:68px}
}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:var(--sand3);border-radius:3px}