:root{
  color-scheme:light dark;
  --bg:#0f172a; --panel:#ffffff; --ink:#1e293b; --muted:#64748b;
  --line:#e2e8f0; --brand:#2563eb; --brand-d:#1d4ed8; --ok:#16a34a;
  --err:#dc2626; --warn:#d97706; --soft:#f8fafc; --radius:12px;
  --input-bg:#ffffff; --code-bg:#f1f5f9; --pill-bg:#f1f5f9;
  --nav-text:#cbd5e1; --nav-text-dim:#94a3b8;
  --nav-hover:rgba(255,255,255,.08); --nav-sep:rgba(255,255,255,.2);
  --pro-accent:#fbbf24;
  --shadow-card:0 1px 2px rgba(15,23,42,.04);
  --shadow-modal:0 20px 50px rgba(0,0,0,.3);
  --focus-ring:#bfdbfe;
  --flash-ok-bg:#f0fdf4; --flash-ok-border:#bbf7d0; --flash-ok-ink:#166534;
  --flash-err-bg:#fef2f2; --flash-err-border:#fecaca; --flash-err-ink:#991b1b;
  --btn-danger-border:#fecaca; --btn-danger-hover:#fef2f2;
  --cell-green-bg:#dcfce7; --cell-green-ink:#166534;
  --cell-orange-bg:#ffedd5; --cell-orange-ink:#9a3412;
  --cell-red-bg:#fee2e2; --cell-red-ink:#991b1b;
  --update-bg:#fffbeb; --update-border:#fde68a;
  --badge-live-bg:#dcfce7; --badge-live-ink:#166534;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#020617; --panel:#0f172a; --ink:#e2e8f0; --muted:#94a3b8;
    --line:#1e293b; --brand:#3b82f6; --brand-d:#60a5fa; --ok:#22c55e;
    --err:#f87171; --warn:#fbbf24; --soft:#0b1220;
    --input-bg:#0f172a; --code-bg:#1e293b; --pill-bg:#1e293b;
    --nav-text:#cbd5e1; --nav-text-dim:#64748b;
    --nav-hover:rgba(255,255,255,.06); --nav-sep:rgba(255,255,255,.12);
    --pro-accent:#fcd34d;
    --shadow-card:0 1px 2px rgba(0,0,0,.4);
    --shadow-modal:0 20px 50px rgba(0,0,0,.5);
    --focus-ring:#1e40af;
    --flash-ok-bg:#052e16; --flash-ok-border:#166534; --flash-ok-ink:#86efac;
    --flash-err-bg:#450a0a; --flash-err-border:#991b1b; --flash-err-ink:#fca5a5;
    --btn-danger-border:#7f1d1d; --btn-danger-hover:#450a0a;
    --cell-green-bg:#052e16; --cell-green-ink:#86efac;
    --cell-orange-bg:#431407; --cell-orange-ink:#fdba74;
    --cell-red-bg:#450a0a; --cell-red-ink:#fca5a5;
    --update-bg:#3a2807; --update-border:#78350f;
    --badge-live-bg:#052e16; --badge-live-ink:#86efac;
  }
}

:root[data-theme="dark"]{
  --bg:#020617; --panel:#0f172a; --ink:#e2e8f0; --muted:#94a3b8;
  --line:#1e293b; --brand:#3b82f6; --brand-d:#60a5fa; --ok:#22c55e;
  --err:#f87171; --warn:#fbbf24; --soft:#0b1220;
  --input-bg:#0f172a; --code-bg:#1e293b; --pill-bg:#1e293b;
  --nav-text-dim:#64748b;
  --nav-hover:rgba(255,255,255,.06); --nav-sep:rgba(255,255,255,.12);
  --pro-accent:#fcd34d;
  --shadow-card:0 1px 2px rgba(0,0,0,.4);
  --shadow-modal:0 20px 50px rgba(0,0,0,.5);
  --focus-ring:#1e40af;
  --flash-ok-bg:#052e16; --flash-ok-border:#166534; --flash-ok-ink:#86efac;
  --flash-err-bg:#450a0a; --flash-err-border:#991b1b; --flash-err-ink:#fca5a5;
  --btn-danger-border:#7f1d1d; --btn-danger-hover:#450a0a;
  --cell-green-bg:#052e16; --cell-green-ink:#86efac;
  --cell-orange-bg:#431407; --cell-orange-ink:#fdba74;
  --cell-red-bg:#450a0a; --cell-red-ink:#fca5a5;
  --update-bg:#3a2807; --update-border:#78350f;
  --badge-live-bg:#052e16; --badge-live-ink:#86efac;
}

*{box-sizing:border-box}
html,body{margin:0}
body{font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--soft)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
code{background:var(--code-bg);padding:1px 5px;border-radius:5px;font-size:.85em}

/* Topbar */
.topbar{display:flex;align-items:center;gap:18px;background:var(--bg);color:#fff;
  padding:10px 20px;flex-wrap:wrap}
.brand{color:#fff;font-weight:700;font-size:17px}
.brand:hover{text-decoration:none;opacity:.9}
.mainnav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.mainnav a{color:var(--nav-text);padding:6px 10px;border-radius:8px;font-size:14px}
.mainnav a:hover{background:var(--nav-hover);color:#fff;text-decoration:none}
.mainnav a.active{background:var(--brand);color:#fff}
.nav-sep{width:1px;background:var(--nav-sep);margin:0 4px}
.nav-pro{color:var(--pro-accent) !important;font-weight:600}
.userbox{display:flex;align-items:center;gap:12px}
.who{font-size:13px;color:var(--nav-text)}
.who em{display:block;font-style:normal;color:var(--nav-text-dim);font-size:11px}

.wrap{max-width:1120px;margin:0 auto;padding:22px 20px 60px}
.page-title{font-size:22px;margin:6px 0 18px}
.foot{text-align:center;color:var(--muted);padding:20px;font-size:12px}

/* Cards */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin-bottom:18px;box-shadow:var(--shadow-card)}
.card.narrow{max-width:560px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.card h2{font-size:16px;margin:0 0 12px}
.card h3{font-size:14px;margin:16px 0 8px;color:var(--muted)}

/* Buttons */
.btn{display:inline-block;background:var(--panel);border:1px solid var(--line);color:var(--ink);
  padding:8px 14px;border-radius:9px;cursor:pointer;font-size:14px;line-height:1;text-align:center}
.btn:hover{background:var(--soft);text-decoration:none}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-d)}
.btn-danger{background:var(--panel);border-color:var(--btn-danger-border);color:var(--err)}
.btn-danger:hover{background:var(--btn-danger-hover)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn-sm{padding:5px 9px;font-size:12px}
.btn-block{width:100%;padding:11px}
.inline{display:inline}

/* Flash */
.flash{padding:11px 14px;border-radius:9px;margin-bottom:14px;font-size:14px}
.flash-ok{background:var(--flash-ok-bg);border:1px solid var(--flash-ok-border);color:var(--flash-ok-ink)}
.flash-err{background:var(--flash-err-bg);border:1px solid var(--flash-err-border);color:var(--flash-err-ink)}

/* Forms */
label{display:block;margin-bottom:12px;font-size:13px;color:var(--muted)}
label.check{display:flex;align-items:center;gap:8px;color:var(--ink)}
label.check input{margin:0}
input[type=text],input[type=password],input[type=email],input[type=number],
input[type=date],input[type=datetime-local],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;
  font:inherit;color:var(--ink);background:var(--input-bg);margin-top:4px}
input[type=color]{width:48px;height:34px;padding:2px;border:1px solid var(--line);border-radius:8px;margin-top:4px}
textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
select:focus,input:focus,textarea:focus{outline:2px solid var(--focus-ring);border-color:var(--brand)}
.row{display:flex;gap:12px}
.row .grow{flex:1}
.form-actions{display:flex;gap:10px;align-items:center;margin-top:6px}

/* Tables */
/* Team-Sentiment-Tracking (#92).
   `.sentiment-scale` is the five-smiley radio row. Each `<label>` wraps a
   hidden radio + the emoji + a text label; the selected one lights up via
   `:has(:checked)` so no JS is needed to track selection. `.sentiment-sparkline`
   is the 60-day history strip (one bar per day, color by score). */
.sentiment-scale{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.sentiment-pick{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 10px;min-width:92px;border:1px solid var(--line);border-radius:12px;
  cursor:pointer;background:var(--panel);transition:border-color .12s,transform .08s,background .12s}
.sentiment-pick:hover{border-color:var(--brand);transform:translateY(-1px)}
.sentiment-pick input[type=radio]{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.sentiment-pick:has(input:checked),.sentiment-pick.is-selected{
  border-color:var(--brand);background:var(--soft);box-shadow:0 0 0 2px var(--focus-ring)}
.sentiment-emoji{font-size:28px;line-height:1}
.sentiment-label{font-size:12px;color:var(--muted);text-align:center}
.sentiment-note-label{display:block;margin:10px 0}
.sentiment-saved{margin-left:10px;font-size:12px}
.sentiment-sparkline{display:flex;gap:2px;align-items:flex-end;margin:4px 0 14px;
  height:34px;padding:4px 0;overflow-x:auto}
.sentiment-tick{display:inline-block;flex:0 0 8px;height:100%;border-radius:3px;background:var(--line)}
.sentiment-tick.is-empty{background:var(--line);opacity:.3}
.sentiment-tick.is-s1{background:#ef4444;height:30%}
.sentiment-tick.is-s2{background:#f97316;height:50%}
.sentiment-tick.is-s3{background:#eab308;height:70%}
.sentiment-tick.is-s4{background:#84cc16;height:85%}
.sentiment-tick.is-s5{background:#22c55e;height:100%}
.sentiment-team-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:10px 0 16px;text-align:center}
.sentiment-team-metric{font-size:22px;line-height:1.2;margin-bottom:2px}
.sentiment-team-metric strong{font-weight:700}
@media (max-width:620px){
  .sentiment-team-summary{grid-template-columns:1fr}
}

.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.table th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.table tr.muted td{opacity:.55}
.r{text-align:right}
.nowrap{white-space:nowrap}
.muted{color:var(--muted)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle;background-color:#888}
/* Utility classes to keep views free of inline `style=""` attributes (strict CSP). */
.hidden{display:none!important}
.fading-out{transition:opacity .4s;opacity:0}
.summary-adv{cursor:pointer;color:var(--muted);margin:14px 0 8px}
.note-pro{font-size:.85em}
.pill{display:inline-block;background:var(--pill-bg);color:var(--muted);padding:2px 9px;border-radius:20px;font-size:12px}
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600}
.badge-live{background:var(--badge-live-bg);color:var(--badge-live-ink)}

/* Layout helpers */
.cols{display:grid;grid-template-columns:360px 1fr;gap:18px;align-items:start}
.col-form,.col-list{min-width:0}
.filter-bar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.filter-bar label{margin-bottom:0}
.grid-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;text-align:center}
.tile-val{font-size:26px;font-weight:700;color:var(--brand)}
.tile-lbl{font-size:12px;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:.04em}

/* Project report — Ist vs Plan (#112, Pro-Sync B.3). */
.report-filter{margin-bottom:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.report-chart-head{margin-top:16px}
.report-status-badge{display:inline-block;padding:2px 8px;border-radius:999px;
  font-size:11px;font-weight:600;letter-spacing:.02em}
.report-badge-ok{background:rgba(16,185,129,.15);color:#047857}
.report-badge-warn{background:rgba(245,158,11,.18);color:#92400e}
.report-badge-over{background:rgba(239,68,68,.18);color:#991b1b}
:root[data-theme="dark"] .report-badge-ok{color:#6ee7b7}
:root[data-theme="dark"] .report-badge-warn{color:#fcd34d}
:root[data-theme="dark"] .report-badge-over{color:#fca5a5}
.report-chart-wrap{overflow-x:auto;margin-top:8px}
.report-chart-wrap svg{display:block;max-width:100%}
.report-chart-soll{fill:var(--muted);opacity:.4}
.report-chart-ist-ok{fill:var(--brand)}
.report-chart-ist-warn{fill:#f59e0b}
.report-chart-ist-over{fill:#ef4444}
.report-chart-label{font-size:11px;fill:var(--muted)}
.report-chart-legend{margin-top:4px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.report-chart-legend-swatch{display:inline-block;width:12px;height:12px;border-radius:2px;vertical-align:middle;margin-right:4px}
.report-chart-legend-soll{background:var(--muted);opacity:.4}
.report-chart-legend-ist-ok{background:var(--brand)}
.report-pro-teaser{margin-top:16px}

/* Planning tile — simple soll-vs-ist bar (#111, Pro-Sync B.2). */
.planning-bar{background:var(--soft);border:1px solid var(--line);
  border-radius:var(--radius);height:8px;overflow:hidden;min-width:120px}
.planning-bar-fill{height:100%;transition:width .2s ease}
.planning-bar-ok{background:var(--brand)}
.planning-bar-warn{background:#f59e0b}
.planning-bar-over{background:#ef4444}
.planning-pro-teaser{margin-top:8px}

/* Timer */
.timer-card{padding:20px}
.timer-running{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.timer-clock{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;margin-left:auto}
.timer-start{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.timer-start .grow{flex:1;margin-bottom:0}

/* Cascading task picker: Kunde -> Projekt -> Arbeitspaket -> Aufgabe.
   Four selects next to each other on wide screens, stacked on narrow.
   `.tp-stack` is the inline-form variant that behaves like a single
   labeled field (one row below the previous labeled field). */
.task-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.task-picker label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);margin:0}
.task-picker select{width:100%}
.timer-start .task-picker{flex:1 1 100%;margin-bottom:0}
@media (max-width:820px){
  .task-picker{grid-template-columns:1fr}
}

/* Charts */
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.chart-wide{grid-column:1 / -1}
.chart-box{position:relative;height:300px}
.chart-legend{list-style:none;margin:12px 0 0;padding:0;font-size:13px}
.chart-legend li{display:flex;align-items:center;gap:8px;padding:3px 0}
.lg-dot{width:10px;height:10px;border-radius:3px;flex:none}
.lg-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-val{color:var(--muted);white-space:nowrap}

/* Report traffic-light cells */
.cell-green{background:var(--cell-green-bg);color:var(--cell-green-ink)}
.cell-orange{background:var(--cell-orange-bg);color:var(--cell-orange-ink)}
.cell-red{background:var(--cell-red-bg);color:var(--cell-red-ink)}
.matrix td,.matrix th{white-space:nowrap;font-size:12px;padding:6px 8px}

/* Perms */
.perms{border:1px solid var(--line);border-radius:9px;padding:12px;margin-bottom:12px}
.perms legend{padding:0 6px;color:var(--muted);font-size:13px}
.perm-grp{margin-bottom:10px}
.perm-grp>strong{display:block;font-size:12px;color:var(--brand);margin-bottom:4px}
.ref{margin:4px 0;padding-left:18px;font-size:13px;columns:2}

/* Auth + install */
.auth-body{background:var(--bg);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-card{background:var(--panel);border-radius:16px;padding:32px;width:100%;max-width:380px;box-shadow:var(--shadow-modal)}
.install-card{background:var(--panel);border-radius:16px;padding:32px;width:100%;max-width:620px;box-shadow:var(--shadow-modal);margin:20px auto}
.auth-brand{font-size:24px;font-weight:700;text-align:center}
.auth-sub{text-align:center;color:var(--muted);margin:4px 0 22px}
.lang-switcher{text-align:center;color:var(--muted);font-size:12px;margin:18px 0 0}
.lang-switcher a{color:var(--muted)}
.lang-switcher a:hover{color:var(--ink)}
.lang-switcher .lang-sep{margin:0 6px;opacity:.5}
.lang-switcher strong{color:var(--ink)}
.auth-form label,.install-form label{color:var(--ink)}
.ok-mark{color:var(--ok);font-weight:600}
.bad-mark{color:var(--err);font-weight:600}
.db-toggle{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:12px}
.update-box{margin-top:14px;padding:12px;border-radius:9px;background:var(--soft);border:1px solid var(--line)}
.update-box.update-avail{background:var(--update-bg);border-color:var(--update-border)}

/* "Update available" banner shown below the topbar on admin sessions. */
.update-banner{position:fixed;top:56px;right:16px;width:280px;z-index:50;
  background:var(--update-bg);border:1px solid var(--update-border);
  border-radius:var(--radius);padding:12px 14px;
  box-shadow:0 4px 16px rgba(0,0,0,.12);font-size:13px}
.update-banner-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:4px}
.update-banner-head strong{font-size:14px}
.update-banner-current{margin:2px 0 6px;font-size:12px}
.update-banner p{margin:4px 0}
.update-banner-close{background:transparent;border:0;color:var(--muted);
  font-size:20px;line-height:1;padding:0 4px;cursor:pointer}
.update-banner-close:hover{color:var(--ink)}
.update-banner-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

/* Community side-panel (ad slot). 200 px wide, flush against the right
   viewport edge, running the full available height below the topbar.
   `.shell.has-aside` reserves the right 200 px via `padding-right` so
   the main content never slides under the panel; the aside itself is
   `position: fixed`. The FelixSchallerCOM wordmark sits at the top
   (color-inverted via `mask-image` so it tracks the theme); the
   #spRotator fills the remaining height and the single visible card
   stretches to fill the whole slot. Deliberately generic class names
   (sidepanel/sp) — not literally "banner" — so content-blocking filter
   lists don't disappear the whole column. */
.shell{display:block}
.shell.has-aside{display:block;max-width:none;margin:0;padding-right:200px}
.shell.has-aside .wrap{max-width:1120px;margin:0 auto}
.sidepanel{position:fixed;top:56px;right:0;bottom:0;width:200px;
  padding:14px 10px;display:flex;flex-direction:column;gap:10px;
  background:var(--bg);z-index:5}
.sp-brand{display:block;flex:0 0 auto;width:160px;height:20px;margin:0 auto 2px;
  background-color:#e2e8f0;
  -webkit-mask-image:url(banners/logos/felixschaller.svg);
          mask-image:url(banners/logos/felixschaller.svg);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  opacity:.9;transition:opacity .15s}
.sp-brand:hover{opacity:1}
.sp-rotator{position:relative;flex:1 1 auto;min-height:0}
.sp-item{position:absolute;inset:0 0 22px 0;display:flex;flex-direction:column;gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow-card);color:var(--ink);text-decoration:none}
.sp-item:hover{text-decoration:none;border-color:var(--brand)}
.sp-item img{width:100%;height:auto;border-radius:9px;display:block;background:var(--soft)}
.sp-item.hidden{display:none}
.sp-item.is-image{padding:0;border:0;background:transparent;box-shadow:none;overflow:hidden;border-radius:var(--radius)}
.sp-item.is-image img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
.sp-item.is-image:hover{opacity:.94}
.sp-item.is-iframe{padding:0;border:0;background:transparent;box-shadow:none;overflow:hidden;border-radius:var(--radius)}
.sp-item.is-iframe iframe{display:block;width:100%;height:100%;border:0;border-radius:var(--radius);background:var(--panel)}
.sp-item .sp-title{font-weight:700;font-size:15px}
.sp-item .sp-text{font-size:13px;color:var(--muted);line-height:1.45}
.sp-item .sp-cta{margin-top:2px;font-size:13px;font-weight:600;color:var(--brand)}
.sp-item .sp-cta::after{content:" \2197"}
.sp-dots{position:absolute;left:0;right:0;bottom:4px;display:flex;gap:6px;justify-content:center;height:14px;align-items:center}
.sp-dot{width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.35);border:0;padding:0;cursor:pointer}
.sp-dot.active{background:#fff}
@media (max-width:1023px){
  .shell.has-aside{padding-right:0}
  .sidepanel{position:static;width:auto;height:auto;padding:16px 0 0;
    margin-top:8px;border-top:1px solid var(--line);background:transparent;z-index:auto}
  .sp-brand{margin:0 0 10px}
  .sp-rotator{flex:0 0 auto;min-height:420px;height:60vw;max-height:600px}
}

/* --- Collapsible nav groups (Kaufmaennisch, Systemverwaltung) --- */
/* <details class="nav-group"> uses the browser's native expander; CSS
   just styles the summary like a regular nav link and positions the
   open panel below it. No JS required for toggling, keyboard works. */
.nav-group{position:relative;display:inline-block}
.nav-group-toggle{
  list-style:none;cursor:pointer;color:var(--nav-text);
  padding:6px 10px;border-radius:8px;font-size:14px;
  display:inline-flex;align-items:center;gap:4px
}
.nav-group-toggle::-webkit-details-marker{display:none}
.nav-group-toggle::after{content:"\25BE";font-size:9px;opacity:.7;margin-left:2px}
.nav-group-toggle:hover{background:var(--nav-hover);color:#fff}
.nav-group-toggle.active{background:var(--brand);color:#fff}
.nav-group[open] > .nav-group-toggle{background:var(--nav-hover);color:#fff}
.nav-group-items{
  position:absolute;top:calc(100% + 4px);left:0;z-index:50;
  min-width:200px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:6px;
  display:flex;flex-direction:column;gap:2px;
  box-shadow:0 8px 24px rgba(0,0,0,.18)
}
.nav-group-items a{
  color:var(--ink);padding:6px 10px;border-radius:6px;
  font-size:14px;white-space:nowrap;display:flex;align-items:center;gap:6px
}
.nav-group-items a:hover{background:var(--nav-hover);color:#fff;text-decoration:none}
.nav-group-items a.active{background:var(--brand);color:#fff}

/* Endpoints form: show the currently-active URL as monospace below each input,
   and let the input take full card width so long URLs aren't cut off. */
.endpoint-form label{display:block;margin-bottom:14px}
.endpoint-form input[type=url]{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.endpoint-form small{display:block;margin-top:4px;font-size:12px;word-break:break-all}
.endpoint-form small code{background:transparent;padding:0;font-size:12px}

/* Gold Pro badge used in nav + feature cards. */
.pill-pro{background:#fde68a;color:#92400e;font-weight:600;letter-spacing:.02em}
:root[data-theme="dark"] .pill-pro{background:#78350f;color:#fde68a}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pill-pro{background:#78350f;color:#fde68a}
}

/* Entries: Liste/Kalender toggle in the filter bar. */
.view-toggle{display:inline-flex;gap:4px;padding:2px;border:1px solid var(--line);border-radius:9px}
.view-toggle .btn-sm{padding:5px 10px}

/* Week calendar grid.
   Hour row = 56 px, 24 hours = 1344 px total. The outer container caps
   that at 70vh with overflow-y so a typical screen scrolls to the busy
   hours instead of showing all 24. */
.cal-week{display:grid;grid-template-columns:52px 1fr;gap:0;
  max-height:70vh;overflow-y:auto;border:1px solid var(--line);border-radius:9px;
  scroll-padding-top:0}
.cal-week .cal-hours{display:grid;grid-template-rows:repeat(24,56px);border-right:1px solid var(--line);background:var(--panel)}
.cal-hour-label{font-size:11px;color:var(--muted);padding:2px 6px;text-align:right}
.cal-days{display:grid;grid-template-columns:repeat(7,1fr);min-width:0}
.cal-day{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line)}
.cal-day:last-child{border-right:0}
.cal-day-head{position:sticky;top:0;z-index:2;background:var(--panel);
  padding:6px 8px;font-size:12px;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line);text-align:center}
.cal-day-today .cal-day-head{color:var(--brand)}
.cal-day-holiday-badge{position:sticky;top:28px;z-index:2;
  padding:3px 6px;font-size:11px;line-height:1.2;
  background:var(--soft);color:var(--muted);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:4px;
  text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  cursor:help}
.cal-day-holiday .cal-day-head{color:var(--brand)}
.cal-holiday-dot{color:var(--brand);font-size:10px}
.cal-holiday-name{overflow:hidden;text-overflow:ellipsis}
.cal-day-grid{position:relative;flex:1;background:var(--soft);
  height:calc(56px * 24);cursor:crosshair;user-select:none}
.cal-day-today .cal-day-grid{background:var(--panel)}
/* Click-drag placeholder for new entries (fixes #64). JS updates
   --draft-top / --draft-height via setProperty on the element so the
   stylesheet does all the actual positioning. */
.cal-event-draft{position:absolute;left:2px;right:2px;
  top:var(--draft-top,0);height:var(--draft-height,0);
  background:rgba(37,99,235,.35);border:1px dashed var(--brand);
  border-radius:4px;pointer-events:none;z-index:3}
.cal-day-line{position:absolute;left:0;right:0;height:1px;background:var(--line);opacity:.6}
.cal-day-line:nth-child(1){top:calc(56px * 1)}
.cal-day-line:nth-child(2){top:calc(56px * 2)}
.cal-day-line:nth-child(3){top:calc(56px * 3)}
.cal-day-line:nth-child(4){top:calc(56px * 4)}
.cal-day-line:nth-child(5){top:calc(56px * 5)}
.cal-day-line:nth-child(6){top:calc(56px * 6)}
.cal-day-line:nth-child(7){top:calc(56px * 7)}
.cal-day-line:nth-child(8){top:calc(56px * 8)}
.cal-day-line:nth-child(9){top:calc(56px * 9)}
.cal-day-line:nth-child(10){top:calc(56px * 10)}
.cal-day-line:nth-child(11){top:calc(56px * 11)}
.cal-day-line:nth-child(12){top:calc(56px * 12)}
.cal-day-line:nth-child(13){top:calc(56px * 13)}
.cal-day-line:nth-child(14){top:calc(56px * 14)}
.cal-day-line:nth-child(15){top:calc(56px * 15)}
.cal-day-line:nth-child(16){top:calc(56px * 16)}
.cal-day-line:nth-child(17){top:calc(56px * 17)}
.cal-day-line:nth-child(18){top:calc(56px * 18)}
.cal-day-line:nth-child(19){top:calc(56px * 19)}
.cal-day-line:nth-child(20){top:calc(56px * 20)}
.cal-day-line:nth-child(21){top:calc(56px * 21)}
.cal-day-line:nth-child(22){top:calc(56px * 22)}
.cal-day-line:nth-child(23){top:calc(56px * 23)}

/* Booking blocks inside a day column. Each event's top/height is set in
   a nonce-authorized <style> block emitted by the view (per-event). */
.cal-event{position:absolute;left:2px;right:2px;overflow:hidden;
  background:var(--brand);color:#fff;border-radius:4px;padding:3px 5px;
  font-size:11px;line-height:1.25;text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
  display:flex;flex-direction:column;gap:1px}
.cal-event:hover{filter:brightness(1.07);text-decoration:none}
.cal-event-time{opacity:.9;font-size:10px;font-variant-numeric:tabular-nums}
.cal-event-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.cal-event-running{outline:2px solid var(--ok);outline-offset:-2px}

.cal-nav{display:flex;gap:6px}

/* External-calendar teaser card (Pro-only). */
.external-cal-teaser{border:1px dashed var(--line)}
.external-cal-items{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.external-cal-item{display:block;background:var(--soft);border:1px solid var(--line);
  border-radius:9px;padding:12px;color:var(--ink);text-decoration:none;position:relative;
  transition:transform .12s ease, box-shadow .12s ease}
.external-cal-item:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.08);text-decoration:none}
.external-cal-item strong{display:block;margin-bottom:4px}
.external-cal-item .muted{display:block;font-size:12px;margin-bottom:28px}
.external-cal-item .pill-pro{position:absolute;right:10px;bottom:10px}

@media(max-width:820px){
  .cols{grid-template-columns:1fr}
  .chart-grid{grid-template-columns:1fr}
  .grid-tiles{grid-template-columns:1fr}
  .ref{columns:1}
  .update-banner{position:static;width:auto;margin:12px 0 0}
  .cal-days{overflow-x:auto}
  .cal-day{min-width:120px}
  .external-cal-items{grid-template-columns:1fr}
}

/* Small gold "Pro" pill rendered inline inside a nav link. Keeps the
   nav label legible while flagging that the link opens a teaser. */
.nav-pill{font-size:9px;padding:1px 5px;margin-left:4px;vertical-align:1px}

/* Pro-feature teaser pages (Rechnungen / Angebote / Budget / Rollen Pro).
   Two-column layout: dimmed mockup on the left, upsell banner glued to
   the right edge of the main content column so the CTA stays visible
   even on long tables. Below 1024 px the upsell stacks on top. */
.pro-teaser{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:20px;align-items:start}
.pro-teaser-mock{min-width:0;opacity:.55;filter:grayscale(.3);pointer-events:none;user-select:none}
.pro-teaser-mock .btn{cursor:not-allowed}
.pro-teaser-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.pro-teaser-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:12px}
.pro-teaser-form label{display:block;font-size:12px;color:var(--muted)}
.pro-teaser-form input{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 8px;color:var(--ink)}

.pro-upsell{
  position:sticky;top:84px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:16px;display:flex;flex-direction:column;gap:10px
}
.pro-upsell h2{margin:4px 0 0;font-size:18px}
.pro-upsell .pro-upsell-list{margin:0;padding-left:18px;color:var(--ink);font-size:13px;line-height:1.45}
.pro-upsell .pro-upsell-list li{margin-bottom:4px}
.pro-upsell-cta{align-self:stretch;text-align:center;margin-top:4px}
.pro-upsell-foot{font-size:11px;margin:0}

/* Budget progress bar — three buckets. */
.pro-budget-track{display:inline-block;width:140px;height:8px;background:var(--line);border-radius:4px;overflow:hidden;vertical-align:middle;margin-right:8px}
.pro-budget-bar{display:block;height:100%;background:var(--brand);border-radius:4px}
.pro-budget-ok{background:#16a34a}
.pro-budget-warn{background:#eab308}
.pro-budget-over{background:#dc2626}

@media(max-width:1023px){
  .pro-teaser{grid-template-columns:1fr}
  .pro-upsell{position:static;order:-1}
}