/* ============ Vantis Planer (/planen) — Monatskalender im Look der Startseite ============ */
@font-face { font-family:'Bricolage'; src:url('../fonts/bricolage-800.woff2') format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:'Bricolage'; src:url('../fonts/bricolage-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Bricolage'; src:url('../fonts/bricolage-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Hanken'; src:url('../fonts/hanken-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Hanken'; src:url('../fonts/hanken-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Hanken'; src:url('../fonts/hanken-600.woff2') format('woff2'); font-weight:600; font-display:swap; }

:root {
  --bg:#06070d; --ink:#eef1f8; --muted:#9aa3bd; --muted-2:#6b7390;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16); --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.08);
  --blue:#4f8cff; --blue-2:#74a6ff; --blue-soft:rgba(79,140,255,.18); --cyan:#46e0ff; --ok:#34c759; --danger:#f0595e;
  --font-display:'Bricolage','Hanken',system-ui,sans-serif;
  --font-body:'Hanken',system-ui,-apple-system,sans-serif;
  --r:18px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { color-scheme:dark; }
body.planen {
  min-height:100vh; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative;
}
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; }
input, select { font:inherit; }
.hidden { display:none !important; }

/* ---- Atmosphäre (wie Startseite) ---- */
body::before {
  content:""; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(1.5px 1.5px at 18% 24%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 62% 18%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 82% 42%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 32% 64%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 74% 78%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 46% 88%, rgba(255,255,255,.35), transparent);
}
.aurora { position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
.blob { position:absolute; border-radius:50%; filter:blur(90px); opacity:.45; mix-blend-mode:screen; }
.b1 { width:60vw; height:60vw; left:-18vw; top:-24vh; background:radial-gradient(circle,rgba(79,140,255,.6),transparent 70%); }
.b2 { width:46vw; height:46vw; right:-14vw; bottom:-20vh; background:radial-gradient(circle,rgba(70,224,255,.35),transparent 70%); }

/* ---- Typo-Bausteine ---- */
h1, h2 { font-family:var(--font-display); letter-spacing:-.02em; line-height:1.05; }
.pl-eyebrow { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); }
.pl-muted { color:var(--muted); font-size:.92rem; }
.pl-error { color:var(--danger); font-size:.88rem; min-height:1.2em; }
.pl-opt { color:var(--muted); font-weight:400; }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--font-display); font-weight:600; font-size:.95rem;
  border-radius:999px; padding:.7rem 1.3rem; cursor:pointer; white-space:nowrap; border:1px solid transparent;
  transition:transform .16s, box-shadow .25s, background .2s, border-color .2s;
}
.btn-primary { background:linear-gradient(180deg,var(--blue-2),var(--blue)); color:#fff; box-shadow:0 8px 26px rgba(79,140,255,.35), inset 0 1px 0 rgba(255,255,255,.28); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 12px 34px rgba(79,140,255,.5), inset 0 1px 0 rgba(255,255,255,.32); }
.btn-secondary { background:var(--glass); color:var(--ink); border-color:var(--line-2); }
.btn-secondary:hover { background:var(--glass-2); border-color:rgba(255,255,255,.3); transform:translateY(-1px); }
.btn-ghost { background:transparent; color:var(--muted); border-color:var(--line); padding:.55rem .9rem; font-size:.85rem; }
.btn-ghost:hover { color:var(--ink); border-color:var(--line-2); }
.btn-sm { padding:.5rem .95rem; font-size:.85rem; }
.btn-danger { background:transparent; color:var(--danger); border-color:rgba(240,89,94,.35); }
.btn-danger:hover { background:rgba(240,89,94,.12); }

/* ---- Kopf ---- */
.pl-head { display:flex; align-items:center; gap:1rem; padding:1.1rem clamp(1rem, 3vw, 2.4rem); border-bottom:1px solid var(--line); background:rgba(6,7,13,.55); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); position:sticky; top:0; z-index:5; }
.pl-brand { display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-display); font-weight:800; font-size:1.15rem; }
.pl-brand-logo { width:26px; height:26px; }
.pl-head-sep { width:1px; height:20px; background:var(--line-2); }
.pl-head-title { color:var(--muted); font-size:.95rem; }
.pl-head-link { margin-left:auto; color:var(--muted); font-size:.9rem; }
.pl-head-link:hover { color:var(--ink); }

/* ---- Schlüssel-Abfrage ---- */
.pl-gate { min-height:calc(100vh - 70px); display:grid; place-items:center; padding:2rem 1rem; }
.pl-gate-card { width:min(440px,100%); background:var(--glass); border:1px solid var(--line-2); border-radius:22px; padding:2rem; display:flex; flex-direction:column; gap:.8rem; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.pl-gate-card h1 { font-size:2rem; font-weight:800; }
.pl-gate-form { display:flex; gap:.6rem; margin-top:.4rem; }
.pl-gate-form input { flex:1; min-width:0; }

/* ---- Layout ---- */
.pl-main { display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:1.4rem; width:min(1280px, calc(100% - 2rem)); margin:1.6rem auto 0; align-items:start; }
.pl-card { background:var(--glass); border:1px solid var(--line); border-radius:var(--r); padding:1.2rem 1.25rem; display:flex; flex-direction:column; gap:.9rem; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); scroll-margin-top:84px; /* Sprung zum Panel landet unter der sticky Kopfzeile */ }
.pl-side { display:flex; flex-direction:column; gap:1rem; position:sticky; top:86px; }

/* ---- Kalender ---- */
.pl-cal { background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03)); border:1px solid var(--line); border-radius:22px; padding:1.4rem 1.4rem 1.1rem; box-shadow:0 30px 80px rgba(0,0,0,.35); }
.pl-cal-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.pl-cal-month h1 { font-size:clamp(1.9rem, 3.2vw, 2.6rem); font-weight:800; margin-top:.15rem; }
.pl-cal-nav { display:flex; align-items:center; gap:.4rem; }
.pl-nav { width:40px; height:40px; border-radius:12px; border:1px solid var(--line-2); background:var(--glass); font-size:1.4rem; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .15s, border-color .15s; }
.pl-nav:hover { background:var(--glass-2); border-color:rgba(255,255,255,.3); }
.pl-nav-today { width:auto; padding:0 .9rem; font-size:.85rem; font-weight:600; font-family:var(--font-display); }
.pl-new { margin-left:.6rem; }
.pl-weekdays { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; padding:0 0 .5rem; }
.pl-weekdays span { text-align:center; font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
.pl-weekdays span:nth-child(n+6) { color:rgba(116,166,255,.75); }
.pl-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.pl-day {
  position:relative; min-height:104px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.025);
  padding:.5rem .55rem .45rem; cursor:pointer; display:flex; flex-direction:column; gap:.3rem; text-align:left;
  transition:background .15s, border-color .15s, transform .15s; animation:dayIn .45s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i) * 12ms);
}
@keyframes dayIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.pl-day:hover { background:rgba(255,255,255,.06); border-color:var(--line-2); }
.pl-day.weekend { background:rgba(79,140,255,.035); }
.pl-day.other { opacity:.38; }
.pl-day.past .pl-daynum { color:var(--muted-2); }
.pl-day.selected { border-color:var(--blue); background:var(--blue-soft); box-shadow:0 0 0 1px rgba(79,140,255,.35), 0 14px 40px rgba(79,140,255,.18); }
.pl-day.today .pl-daynum { background:var(--blue); color:#fff; box-shadow:0 6px 18px rgba(79,140,255,.5); }
.pl-daynum { font-family:var(--font-display); font-weight:700; font-size:.95rem; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; }
.pl-day::after { content:"+"; position:absolute; right:.55rem; bottom:.35rem; font-family:var(--font-display); font-weight:700; color:var(--blue-2); opacity:0; transition:opacity .15s; font-size:1rem; }
.pl-day:hover::after { opacity:.9; }
.pl-chip {
  display:flex; align-items:center; gap:.4rem; padding:.28rem .45rem .28rem .5rem; border-radius:8px; font-size:.76rem; font-weight:500; line-height:1.15;
  background:rgba(79,140,255,.16); border-left:2px solid var(--blue-2); color:var(--ink); overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  transition:background .15s, transform .15s;
}
.pl-chip:hover { background:rgba(79,140,255,.3); transform:translateY(-1px); }
.pl-chip.past { border-left-color:var(--muted-2); background:rgba(255,255,255,.05); color:var(--muted); }
.pl-chip b { font-weight:600; color:var(--blue-2); font-variant-numeric:tabular-nums; }
.pl-chip.past b { color:var(--muted); }
.pl-chip span { overflow:hidden; text-overflow:ellipsis; }
.pl-more { font-size:.72rem; color:var(--muted); padding-left:.2rem; }
.pl-dots { display:none; gap:3px; }
.pl-dot { width:6px; height:6px; border-radius:50%; background:var(--blue-2); }
.pl-cal-hint { margin-top:.9rem; font-size:.8rem; color:var(--muted-2); text-align:center; }

/* ---- Tages-Panel ---- */
.pl-day-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem; }
.pl-day-head h2 { font-size:1.35rem; font-weight:700; margin-top:.15rem; }
.pl-count:empty { display:none; }
.pl-count { font-family:var(--font-display); font-weight:700; font-size:.8rem; color:var(--blue-2); background:var(--blue-soft); border:1px solid rgba(79,140,255,.35); border-radius:999px; padding:.2rem .6rem; white-space:nowrap; }
.pl-x { width:32px; height:32px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; }
.pl-x:hover { color:var(--ink); border-color:var(--line-2); }
.pl-list { list-style:none; display:flex; flex-direction:column; gap:.7rem; }
.pl-item { background:rgba(6,7,13,.45); border:1px solid var(--line); border-radius:14px; padding:.9rem 1rem; display:flex; flex-direction:column; gap:.55rem; animation:dayIn .35s ease both; }
.pl-item.past { opacity:.6; }
.pl-item-top { display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; }
.pl-item-title { font-family:var(--font-display); font-weight:700; font-size:1.05rem; }
.pl-item-time { font-variant-numeric:tabular-nums; color:var(--blue-2); font-weight:600; white-space:nowrap; font-size:.9rem; }
.pl-item-meta { display:flex; flex-wrap:wrap; gap:.35rem; font-size:.78rem; color:var(--muted); }
.pl-item-meta span { padding:.15rem .5rem; border-radius:999px; background:var(--glass); border:1px solid var(--line); }
.pl-item-meta .cd { color:var(--blue-2); border-color:rgba(79,140,255,.35); }
.pl-actions { display:flex; flex-wrap:wrap; gap:.4rem; }
.pl-actions .btn { padding:.45rem .85rem; font-size:.82rem; }
.pl-day-new { width:100%; }
.pl-day-empty { padding:.2rem 0; }

/* ---- Ergebnis nach dem Anlegen ---- */
.pl-result { border-color:rgba(52,199,89,.45); box-shadow:0 0 0 1px rgba(52,199,89,.15), 0 20px 50px rgba(52,199,89,.08); }
.pl-result-head { display:flex; align-items:center; justify-content:space-between; }
.pl-result h2 { font-size:1.2rem; color:var(--ok); }
.pl-link { display:flex; flex-direction:column; gap:.3rem; }
.pl-link-label { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.pl-link code { display:block; background:rgba(6,7,13,.6); border:1px solid var(--line-2); border-radius:12px; padding:.65rem .8rem; word-break:break-all; font-size:.86rem; }

/* ---- Formular ---- */
.pl-form { display:flex; flex-direction:column; gap:.85rem; }
.pl-field { display:flex; flex-direction:column; gap:.35rem; font-size:.8rem; font-weight:600; color:var(--muted); letter-spacing:.02em; }
.pl-form input[type="text"], .pl-form input[type="datetime-local"], .pl-form select, .pl-gate-form input {
  width:100%; background:rgba(6,7,13,.55); border:1px solid var(--line-2); color:var(--ink); border-radius:12px; padding:.7rem .85rem; font-size:.95rem; outline:none; font-weight:400;
  transition:border-color .15s, box-shadow .15s;
}
.pl-form input:focus, .pl-form select:focus, .pl-gate-form input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(79,140,255,.18); }
.pl-row { display:flex; gap:.5rem; }
.pl-row input { flex:1; min-width:0; }
.pl-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.pl-check { display:flex; align-items:center; gap:.6rem; font-size:.92rem; cursor:pointer; }
.pl-check input { width:18px; height:18px; accent-color:var(--blue); }
.pl-submit { width:100%; margin-top:.2rem; }

/* ---- Demnächst ---- */
.pl-upcoming-list { list-style:none; display:flex; flex-direction:column; gap:.45rem; }
.pl-up { display:flex; align-items:center; gap:.75rem; padding:.55rem .6rem; border-radius:12px; cursor:pointer; border:1px solid transparent; transition:background .15s, border-color .15s; }
.pl-up:hover { background:var(--glass); border-color:var(--line); }
.pl-up-date { font-family:var(--font-display); font-weight:700; font-size:.8rem; line-height:1.1; text-align:center; min-width:44px; padding:.35rem .3rem; border-radius:10px; background:var(--blue-soft); color:var(--blue-2); border:1px solid rgba(79,140,255,.3); }
.pl-up-date small { display:block; font-weight:600; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; opacity:.85; }
.pl-up-body { min-width:0; display:flex; flex-direction:column; }
.pl-up-title { font-weight:600; font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-up-meta { font-size:.78rem; color:var(--muted); }

/* ---- Fuß / Toast ---- */
.pl-foot { text-align:center; padding:2rem 1rem 1.6rem; color:var(--muted); font-size:.85rem; }
.pl-foot strong { color:var(--ink); font-weight:600; }
.pl-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(12px); background:#1b2030; border:1px solid var(--line-2); color:var(--ink); padding:.7rem 1.1rem; border-radius:12px; font-size:.9rem; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:50; box-shadow:0 14px 40px rgba(0,0,0,.5); }
.pl-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- Responsiv ---- */
@media (max-width: 1040px) {
  .pl-main { grid-template-columns:1fr; }
  .pl-side { position:static; }
}
@media (max-width: 640px) {
  .pl-main { width:calc(100% - 1.2rem); margin-top:1rem; gap:1rem; }
  .pl-cal { padding:1rem .8rem .8rem; border-radius:18px; }
  .pl-cal-head { flex-direction:column; align-items:stretch; gap:.7rem; }
  .pl-new { margin-left:auto; }
  .pl-weekdays, .pl-grid { gap:4px; }
  .pl-day { min-height:64px; padding:.35rem .35rem .3rem; border-radius:10px; }
  .pl-daynum { width:24px; height:24px; font-size:.82rem; }
  .pl-chip, .pl-more { display:none; }
  .pl-dots { display:flex; margin-top:auto; }
  .pl-day::after { display:none; }
  .pl-grid2 { grid-template-columns:1fr; }
  .pl-head-title { display:none; }
}
@media (prefers-reduced-motion: reduce) { .pl-day, .pl-item { animation:none; } }