:root{
  --bg:#0f1220; --panel:#171a2b; --panel2:#1e2338; --line:#2a3050;
  --text:#e7e9f3; --muted:#9aa3c4; --accent:#5b8cff; --accent2:#3f6fe0;
  --free:#2fbf71; --busy:#e0455b; --info:#e0a63f; --block:#8b5cf6;
  --radius:12px; --shadow:0 6px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:15px/1.5 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}

.topbar{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar .wrap{display:flex;align-items:center;gap:18px;height:58px}
.brand{font-weight:700;font-size:17px;color:var(--text)}
.topbar nav{margin-left:auto;display:flex;align-items:center;gap:16px}
.topbar nav a{color:var(--muted)}
.topbar nav a:hover{color:var(--text);text-decoration:none}
.who{color:var(--muted);font-size:13px;border-left:1px solid var(--line);padding-left:16px}

main.wrap{padding-top:24px;padding-bottom:60px}
h1{font-size:24px;margin:6px 0 4px}
h2{font-size:18px;margin:26px 0 12px}
.sub{color:var(--muted);margin:0 0 20px}

.btn,.btn-ghost{display:inline-block;padding:9px 16px;border-radius:10px;border:1px solid transparent;
  font-weight:600;cursor:pointer;font-size:14px}
.btn{background:var(--accent2);color:#fff}
.btn:hover{background:var(--accent);text-decoration:none}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--muted)}
.btn-ghost:hover{color:var(--text);text-decoration:none}
.btn-danger{background:#3a2233;border:1px solid #5b2a3d;color:#ff9db0}
.btn-sm{padding:5px 10px;font-size:13px;border-radius:8px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow)}
.grid{display:grid;gap:16px}
.narrow{max-width:440px;margin:40px auto}

label{display:block;font-size:13px;color:var(--muted);margin:12px 0 5px}
input,select,textarea{width:100%;padding:10px 12px;background:var(--panel2);border:1px solid var(--line);
  border-radius:9px;color:var(--text);font:inherit}
input:focus,select:focus{outline:none;border-color:var(--accent)}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>*{flex:1;min-width:160px}
.inline{display:flex;gap:10px;align-items:end}

.flash{padding:11px 14px;border-radius:9px;margin:0 0 14px;border:1px solid}
.flash.ok{background:#12271c;border-color:#1f5138;color:#7ee2ad}
.flash.err{background:#2a1620;border-color:#5b2a3d;color:#ff9db0}
.flash.info{background:#161f33;border-color:#2a3a63;color:#a9c2ff}

table{width:100%;border-collapse:collapse;margin-top:8px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-size:14px}
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600}
.pill.busy{background:rgba(224,69,91,.16);color:#ff97a7}
.pill.info{background:rgba(224,166,63,.16);color:#ffcf82}
.pill{background:rgba(154,163,196,.14);color:var(--muted)}
.muted{color:var(--muted)}
.err-text{color:#ff9db0;font-size:12px}
code.inline-code{background:var(--panel2);padding:2px 7px;border-radius:6px;font-size:13px;
  border:1px solid var(--line);word-break:break-all}

/* Legende */
.legend{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0;font-size:13px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.swatch{width:14px;height:14px;border-radius:4px;display:inline-block}
.sw-free{background:var(--free)} .sw-busy{background:var(--busy)}
.sw-info{background:var(--info)} .sw-block{background:var(--block)}

/* Wochen-Kalender */
.cal-toolbar{display:flex;align-items:center;gap:12px;margin:8px 0 14px;flex-wrap:wrap}
.cal-toolbar .title{font-weight:600;font-size:16px;min-width:230px}
.calendar{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow)}
.cal-head{display:grid;grid-template-columns:56px repeat(7,1fr);border-bottom:1px solid var(--line)}
.cal-head .day{padding:8px 6px;text-align:center;font-size:12px;color:var(--muted);border-left:1px solid var(--line)}
.cal-head .day.today{color:var(--accent);font-weight:700}
.cal-head .day b{display:block;font-size:17px;color:var(--text)}
.cal-body{position:relative;display:grid;grid-template-columns:56px repeat(7,1fr);
  max-height:70vh;overflow-y:auto}
.cal-times{display:flex;flex-direction:column}
.cal-times .hr{height:44px;font-size:11px;color:var(--muted);text-align:right;
  padding-right:6px;border-top:1px solid var(--line)}
.cal-col{position:relative;border-left:1px solid var(--line)}
.cal-col .hr{height:44px;border-top:1px solid var(--line)}
.cal-col:hover{background:rgba(91,140,255,.03)}
.event{position:absolute;left:3px;right:3px;border-radius:7px;padding:3px 6px;font-size:11px;
  color:#fff;overflow:hidden;cursor:default;border:1px solid rgba(255,255,255,.14)}
.event.busy{background:rgba(224,69,91,.9)}
.event.info{background:rgba(224,166,63,.92);color:#241a00}
.event.block{background:rgba(139,92,246,.92)}
.event .ev-time{opacity:.85;font-size:10px}
.event .del{position:absolute;top:1px;right:3px;cursor:pointer;font-weight:700;opacity:.8}
.event .del:hover{opacity:1}
.event.mine{cursor:grab}
.event.mine.dragging{cursor:grabbing;opacity:.85;z-index:5;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.event .resize-handle{position:absolute;left:0;right:0;bottom:0;height:7px;cursor:ns-resize;
  border-bottom-left-radius:7px;border-bottom-right-radius:7px}
.event.mine .resize-handle:hover{background:rgba(255,255,255,.25)}
.cal-body.placing{cursor:crosshair}
.cal-body.placing .cal-col:hover{background:rgba(139,92,246,.08)}
.cal-body.placing-info .cal-col:hover{background:rgba(224,166,63,.10)}

/* Platzierungs-Modi (Ruhezeit / Information) */
.btn-ghost.active{background:var(--block);color:#fff;border-color:var(--block)}
#cal-info.active{background:var(--info);color:#241a00;border-color:var(--info)}
.ruhezeit-hint{background:rgba(139,92,246,.14);border:1px solid #5b3aa8;color:#c9b6ff;
  border-radius:9px;padding:8px 12px;margin:0 0 12px;font-size:13px}
.info-hint{background:rgba(224,166,63,.14);border:1px solid #8a6a1f;color:#ffcf82;
  border-radius:9px;padding:8px 12px;margin:0 0 12px;font-size:13px}

/* Toast + Shake für „Zeitfenster zu klein" */
.mc-toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);
  background:#3a1620;border:1px solid #7a2a3d;color:#ffb4c1;padding:12px 18px;border-radius:11px;
  font-weight:600;font-size:14px;box-shadow:var(--shadow);opacity:0;pointer-events:none;z-index:80;
  transition:opacity .18s,transform .18s}
.mc-toast.show{opacity:1;transform:translateX(-50%) translateY(0);animation:mc-shake .4s}
@keyframes mc-shake{
  0%,100%{margin-left:0} 20%{margin-left:-9px} 40%{margin-left:9px}
  60%{margin-left:-6px} 80%{margin-left:6px}}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(4,6,14,.66);display:none;
  align-items:center;justify-content:center;z-index:50}
.modal-bg.open{display:flex}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:22px;width:min(420px,92vw);box-shadow:var(--shadow)}
.modal h3{margin:0 0 12px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}

/* Öffentliche Verfügbarkeitsseite */
.result{margin-top:20px;padding:26px;border-radius:14px;text-align:center;font-size:20px;font-weight:700}
.result.free{background:rgba(47,191,113,.14);border:1px solid #2fbf71;color:#7ee2ad}
.result.busy{background:rgba(224,69,91,.14);border:1px solid #e0455b;color:#ff97a7}
.result.info{background:rgba(224,166,63,.14);border:1px solid #e0a63f;color:#ffcf82}
.result .lbl{font-size:34px;display:block;margin-bottom:6px}
.slotlist{display:grid;gap:8px;margin-top:14px}
.slot{display:flex;justify-content:space-between;padding:10px 14px;background:var(--panel2);
  border:1px solid var(--line);border-radius:9px;font-size:14px}
.slot .go{color:var(--free);font-weight:600;cursor:pointer}
.center{text-align:center}
.hero{text-align:center;padding:50px 0 20px}
.hero h1{font-size:34px}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:26px}
.feature{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}
.feature .ic{font-size:26px}

/* E-Mail-Vorlagen: WYSIWYG-Editor */
.mail-toolbar{display:flex;flex-wrap:wrap;gap:5px;align-items:center;
  background:var(--panel2);border:1px solid var(--line);border-bottom:none;
  border-radius:9px 9px 0 0;padding:7px 8px}
.mail-toolbar button{width:auto;padding:4px 9px;font-size:13px;line-height:1.2;cursor:pointer;
  background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:7px}
.mail-toolbar button:hover{color:var(--text);border-color:var(--accent)}
.mail-toolbar button.active{background:var(--accent2);color:#fff;border-color:var(--accent2)}
.mail-toolbar-sep{width:1px;align-self:stretch;background:var(--line);margin:2px 4px}
.mail-editor{min-height:150px;padding:12px 14px;background:var(--panel2);
  border:1px solid var(--line);border-radius:0 0 9px 9px;color:var(--text);
  font:inherit;line-height:1.6;overflow-y:auto}
.mail-editor:focus{outline:none;border-color:var(--accent)}
.mail-editor a{color:var(--accent)}
.mail-editor h2{font-size:18px;margin:.4em 0}
.mail-editor p{margin:.5em 0}
.mail-source{border-radius:0 0 9px 9px;min-height:150px;font-family:ui-monospace,Consolas,monospace;font-size:13px}

/* Kalender-Ansichtsumschalter (Tag/Woche/Monat) */
.cal-viewswitch{display:inline-flex;gap:4px;margin-left:8px}
.cal-viewswitch .btn-sm.active{background:var(--accent2);color:#fff;border-color:var(--accent2)}

/* Tagesansicht: Zeitraster auf 1 Spalte */
#calendar.cal-mode-day .cal-head{grid-template-columns:56px 1fr}
#calendar.cal-mode-day .cal-body{grid-template-columns:56px 1fr}

/* Monatsansicht: Kopf aus, Body als Block für das Monatsraster */
#calendar.cal-mode-month .cal-head{display:none}
#calendar.cal-mode-month .cal-body{display:block;grid-template-columns:none;max-height:none;overflow:visible}

.cal-month{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-mwd{padding:8px 6px;text-align:center;font-size:12px;color:var(--muted);
  border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.cal-mcell{min-height:98px;padding:5px 6px;border-left:1px solid var(--line);border-bottom:1px solid var(--line);
  cursor:pointer;overflow:hidden}
.cal-month>.cal-mwd:nth-child(7n+1),
.cal-month>.cal-mcell:nth-child(7n+1){border-left:none}
.cal-mcell:hover{background:rgba(91,140,255,.05)}
.cal-mcell.other-month{opacity:.4}
.cal-mdate{font-size:12px;color:var(--muted);margin-bottom:4px}
.cal-mcell.today .cal-mdate{color:var(--accent);font-weight:700}
.cal-mchips{display:flex;flex-direction:column;gap:2px}
.cal-chip{font-size:11px;line-height:1.35;padding:1px 6px;border-radius:5px;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-chip.busy{background:var(--busy)}
.cal-chip.info{background:var(--info);color:#241a00}
.cal-chip.block{background:var(--block)}
.cal-more{font-size:11px;color:var(--muted);margin-top:1px}