:root{
  --bg:#0A0A0B; --bg-glass:rgba(10,10,11,.80);
  --panel:#101012; --card:#161619; --card-2:#1B1B1F;
  --line:#242428; --line-2:#2F2F34;
  --ink:#F4F4F5; --muted:#7C7C82; --faint:#4C4C52;
  --crimson:#C0272D; --crimson-deep:#8B1A1A; --crimson-glow:rgba(192,39,45,.22);
  --radius:13px; --radius-sm:9px;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sf);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{padding-bottom:72px}
button{font-family:inherit;cursor:pointer;color:inherit}
code{font-family:var(--mono);font-size:.92em;color:var(--muted)}
:focus-visible{outline:2px solid var(--crimson);outline-offset:2px;border-radius:6px}

/* ================= LOGIN ================= */
.login-body{display:grid;place-items:center;min-height:100vh;padding:24px;
  background:radial-gradient(1200px 600px at 50% -10%,rgba(192,39,45,.10),transparent 60%),var(--bg)}
.login-wrap{width:100%;max-width:380px}
.login-card{background:var(--panel);border:1px solid var(--line-2);border-radius:18px;
  padding:38px 32px;text-align:center;box-shadow:0 24px 64px rgba(0,0,0,.5)}
.login-logo{height:40px;width:auto;margin-bottom:14px}
.login-sub{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);font-weight:600}
.login-hint{color:var(--faint);font-size:12.5px;margin:16px 0 22px}
.login-input{width:100%;background:#0D0D0F;border:1px solid var(--line-2);border-radius:11px;
  color:var(--ink);font-size:15px;padding:13px 14px;text-align:center;letter-spacing:.06em}
.login-input:focus{outline:none;border-color:var(--crimson)}
.login-btn{width:100%;margin-top:12px;background:var(--crimson);border:1px solid var(--crimson);
  color:#fff;font-size:15px;font-weight:600;padding:13px;border-radius:11px;transition:background .15s}
.login-btn:hover{background:var(--crimson-deep)}
.login-btn:disabled{opacity:.6;cursor:default}
.login-err{margin-top:14px;color:#ff8080;font-size:13px}

/* ================= KOPF ================= */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;
  padding:0 22px;height:58px;background:var(--bg-glass);backdrop-filter:saturate(170%) blur(22px);
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{height:26px;width:auto;display:block}
.brand .sub{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.26em;
  font-weight:600;padding-left:12px;border-left:1px solid var(--line-2)}
.crumb{flex:1;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
.crumb .sepc{color:var(--faint)}
.crumb .cur{color:var(--ink);font-weight:600}
.top-actions{display:flex;gap:8px}

.chip{background:var(--card);border:1px solid var(--line-2);color:var(--ink);border-radius:var(--radius-sm);
  padding:8px 13px;font-size:13px;font-weight:500;transition:background .15s,border-color .15s,color .15s}
.chip:hover{background:var(--card-2);border-color:#3d3d44}
.chip.solid{background:var(--crimson);border-color:var(--crimson);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.08) inset}
.chip.solid:hover{background:var(--crimson-deep);border-color:var(--crimson-deep)}

/* ================= VIEWS ================= */
.view{max-width:1720px;margin:0 auto}
.view-head{display:flex;align-items:center;justify-content:space-between;padding:26px 22px 8px}
.view-title{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em}

/* ---- Projekt-Übersicht ---- */
.proj-grid{display:grid;gap:20px;padding:16px 22px 40px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.pcard{text-align:left;padding:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .16s,border-color .16s,box-shadow .16s}
.pcard:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 10px 28px rgba(0,0,0,.45)}
.pcover{aspect-ratio:16/9;background:#000;overflow:hidden}
.pcover img{width:100%;height:100%;object-fit:cover;display:block}
.pcover.empty-cover{display:grid;place-items:center;color:var(--faint);font-size:26px;background:var(--card-2)}
.pbody{padding:14px 15px 16px}
.pname{font-size:16px;font-weight:600;letter-spacing:-.01em}
.pmeta{margin-top:6px;font-family:var(--mono);font-size:11.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:0 6px;align-items:center}
.pmeta .pcount{color:var(--ink)}
.pmeta .sep{color:var(--faint)}

/* ================= WERKZEUGLEISTE (Detail) ================= */
.bar{position:sticky;top:58px;z-index:25;display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;padding:12px 22px;background:var(--bg-glass);backdrop-filter:saturate(170%) blur(22px);
  border-bottom:1px solid var(--line)}
.bar-left{display:flex;align-items:center;gap:14px}
.counts{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.counts b{color:var(--ink);font-weight:600}
.counts .fav{color:var(--crimson)} .counts .sep{color:var(--faint);margin:0 3px}
.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--card);border:1px solid var(--line-2);border-radius:var(--radius-sm);overflow:hidden}
.seg button{background:transparent;border:0;color:var(--muted);padding:7px 13px;font-size:12.5px;font-weight:500;transition:background .14s,color .14s}
.seg button:not(.on):hover{color:var(--ink);background:var(--card-2)}
.seg button.on{background:var(--crimson);color:#fff}
select{appearance:none;background:var(--card);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  padding:7px 30px 7px 11px;font-size:12.5px;font-weight:500;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%237C7C82' stroke-width='1.4' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center}

/* ================= TAG -> GERÄT -> CLIPS ================= */
.day-stack{padding:8px 22px 40px}
.day{margin-top:30px}
.day:first-child{margin-top:16px}
.day-head{display:flex;align-items:baseline;gap:12px;padding:10px 0 14px;border-bottom:1px solid var(--line-2);position:sticky;top:107px;background:var(--bg);z-index:10}
.day-date{font-size:19px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.day-wd{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.day-count{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--faint)}
.cam-group{margin-top:18px}
.cam-head{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.02em;
  color:var(--muted);text-transform:uppercase;margin-bottom:12px}
.cam-dot{width:7px;height:7px;border-radius:50%;background:var(--crimson);box-shadow:0 0 0 3px rgba(192,39,45,.15)}
.cam-count{font-family:var(--mono);font-weight:500;color:var(--faint);letter-spacing:0}

/* ================= KACHEL (Kontaktabzug) ================= */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
  transition:transform .16s,border-color .16s,box-shadow .16s}
.card:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 8px 24px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.04) inset}
.card.fav{border-color:var(--crimson);box-shadow:0 0 0 1px var(--crimson) inset,0 6px 20px var(--crimson-glow)}
.card.seen{opacity:.46;filter:saturate(.7)}
.card.seen:hover{opacity:.9}
.thumb{position:relative;display:block;aspect-ratio:16/9;background:#000;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.card:hover .thumb img{transform:scale(1.015)}
.perf{height:9px;background:repeating-linear-gradient(90deg,transparent 0 7px,var(--bg) 7px 12px),var(--card-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.badge{position:absolute;top:9px;left:9px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;
  color:#EDEDED;padding:3px 8px;border-radius:5px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);box-shadow:0 0 0 1px rgba(255,255,255,.09) inset}
.dur{position:absolute;bottom:9px;right:9px;font-family:var(--mono);font-size:10.5px;color:#EDEDED;background:rgba(0,0,0,.62);padding:2px 7px;border-radius:5px}
.corner{position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 30px 30px 0;border-color:transparent var(--crimson) transparent transparent;opacity:0;transition:opacity .16s}
.corner::after{content:"";position:absolute;top:4px;right:-27px;width:6px;height:6px;background:#fff;border-radius:50%}
.card.fav .corner{opacity:1}
.meta{padding:12px 13px 13px;display:flex;flex-direction:column;gap:9px}
.fname{font-family:var(--mono);font-size:11px;color:var(--muted);word-break:break-all;line-height:1.45}
.note{width:100%;background:#0D0D0F;border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);
  font-family:var(--sf);font-size:12.5px;padding:8px 10px;resize:none;line-height:1.45;min-height:36px;transition:border-color .15s}
.note::placeholder{color:var(--faint)}
.note:focus{outline:none;border-color:var(--crimson)}
.acts{display:flex;gap:8px}
.acts button{flex:1;background:var(--card-2);border:1px solid var(--line-2);color:var(--muted);border-radius:var(--radius-sm);
  padding:9px;font-size:12.5px;font-weight:600;transition:background .14s,border-color .14s,color .14s}
.acts button:hover{color:var(--ink);border-color:#3d3d44}
.acts .bfav.on{background:var(--crimson);border-color:var(--crimson);color:#fff}
.acts .bseen.on{background:#232327;border-color:var(--muted);color:var(--ink)}

/* ================= LEER / DIALOG ================= */
.empty{padding:80px 22px;text-align:center;color:var(--muted);font-size:14.5px;line-height:1.7;max-width:560px;margin:0 auto}
.empty b{color:var(--ink);font-weight:600}
dialog{border:1px solid var(--line-2);border-radius:16px;background:var(--panel);color:var(--ink);padding:24px;max-width:640px;width:92vw;box-shadow:0 24px 64px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(0,0,0,.62);backdrop-filter:blur(4px)}
dialog h3{margin:0 0 7px;font-size:17px;font-weight:600}
.hint{color:var(--muted);font-size:13px;line-height:1.55;margin:0 0 13px}
#exCmd{width:100%;background:#000;color:#8BE29B;border:1px solid var(--line-2);border-radius:10px;padding:13px;font-family:var(--mono);font-size:12px;line-height:1.55}
.row{display:flex;gap:10px;justify-content:flex-end;margin-top:15px}

@media (max-width:560px){
  .top{height:auto;flex-wrap:wrap;gap:8px;padding:12px 16px}
  .crumb{order:3;flex-basis:100%}
  .bar{position:static;padding:11px 16px}
  .day-head{position:static}
  .proj-grid,.day-stack{padding-left:16px;padding-right:16px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.card:hover,.pcard:hover{transform:none}}

/* ===== Tag-Ebene Ergänzungen ===== */
.view-head{gap:16px}
.view-head-right{display:flex;align-items:center;gap:14px;margin-left:auto}
.crumb .cl{color:var(--muted);cursor:pointer;text-decoration:none}
.crumb .cl:hover{color:var(--ink)}
.daycard .pname{display:flex;align-items:baseline;gap:9px}
.daycard .dnum{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.daycard .dwd{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.pcover{position:relative}
.daytag{position:absolute;top:9px;right:9px;font-family:var(--mono);font-size:11px;font-weight:600;
  color:#fff;background:var(--crimson);padding:3px 8px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.brand .ver{font-family:var(--mono);font-size:10px;color:var(--faint);
  border:1px solid var(--line-2);border-radius:5px;padding:2px 6px;margin-left:4px}