:root{
  --bg:#F5F5F7;
  --surface:#FFFFFF;
  --text:#1D1D1F;
  --text-secondary:#6E6E73;
  --border:#E5E5E7;
  --accent:#0071E3;
  --accent-hover:#0077ED;
  --accent-active:#0068D1;
  --accent-tint:#EFF6FF;
  --danger:#FF3B30;
  --danger-hover:#E6352C;
  --danger-tint:#FDECEB;
  --danger-text:#C0392B;
  --success-tint:#E8F8ED;
  --success-text:#1F7A3D;
  --warning-tint:#FFF4E2;
  --warning-text:#B25000;
  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:9px;
  --sidebar-w:236px;
  --shadow-card:0 1px 2px rgba(0,0,0,.04),0 2px 16px rgba(0,0,0,.035);
  --shadow-pop:0 8px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--accent)}

/* ── App shell / sidebar ─────────────────────────────────────────────── */
.app-shell{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:var(--surface);border-right:1px solid var(--border);
  position:fixed;top:0;left:0;bottom:0;
  display:flex;flex-direction:column;
  padding:1.5rem 1rem 1rem;
  overflow-y:auto;
}
.sidebar-brand{
  display:flex;align-items:center;gap:.55rem;
  font-size:1.2rem;font-weight:700;letter-spacing:-0.02em;
  padding:.25rem .6rem;margin-bottom:1.75rem;color:var(--text);text-decoration:none;
}
.sidebar-brand .mark{
  width:26px;height:26px;border-radius:8px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;
}
.sidebar-brand .mark svg{width:15px;height:15px}
.sidebar-nav{display:flex;flex-direction:column;gap:.1rem;flex:1}
.sidebar-nav .nav-section-label{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  color:var(--text-secondary);padding:1.1rem .65rem .4rem;
}
.sidebar-nav .nav-section-label:first-child{padding-top:0}
.sidebar-nav a{
  display:flex;align-items:center;gap:.7rem;
  padding:.55rem .65rem;border-radius:var(--radius-sm);
  color:var(--text);text-decoration:none;font-size:.89rem;font-weight:500;
  transition:background .12s ease,color .12s ease;
}
.sidebar-nav a svg{width:18px;height:18px;flex-shrink:0;color:var(--text-secondary);transition:color .12s ease}
.sidebar-nav a:hover{background:var(--bg)}
.sidebar-nav a.active{background:var(--accent);color:#fff}
.sidebar-nav a.active svg{color:#fff}
.sidebar-footer{
  border-top:1px solid var(--border);margin-top:.75rem;padding-top:.85rem;
  display:flex;align-items:center;gap:.6rem;padding-left:.5rem;padding-right:.25rem;
}
.sidebar-footer .avatar{
  width:30px;height:30px;border-radius:50%;background:var(--bg);color:var(--text-secondary);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex-shrink:0;
}
.sidebar-footer .user-name{font-size:.83rem;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.sidebar-footer button{
  background:none;border:none;color:var(--text-secondary);cursor:pointer;
  font-size:.78rem;padding:.4rem;border-radius:var(--radius-sm);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.sidebar-footer button:hover{background:var(--bg);color:var(--danger)}
.sidebar-footer button svg{width:16px;height:16px}

.content{margin-left:var(--sidebar-w);flex:1;min-width:0;padding:2.75rem 3rem 4rem;max-width:1040px}

/* ── Bottom nav (mobile) ─────────────────────────────────────────────── */
.bottom-nav{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:rgba(255,255,255,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--border);
  padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom));
}
.bottom-nav-inner{display:flex;justify-content:space-around;align-items:center;max-width:520px;margin:0 auto}
.bottom-nav a{
  display:flex;flex-direction:column;align-items:center;gap:.2rem;
  color:var(--text-secondary);text-decoration:none;font-size:.68rem;font-weight:600;
  padding:.3rem .9rem;border-radius:var(--radius-sm);min-width:64px;
}
.bottom-nav a svg{width:22px;height:22px}
.bottom-nav a.active{color:var(--accent)}

@media (max-width:860px){
  .app-shell{flex-direction:column}
  .sidebar{display:none}
  .content{margin-left:0;padding:1.5rem 1.25rem calc(5.5rem + env(safe-area-inset-bottom))}
  .bottom-nav{display:block}
}

/* ── Arbeitsplan: Zeitachsen-Raster (Uhrzeiten links, 7 Tage nebeneinander) ─ */
.week-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem;gap:.75rem}
.week-nav .week-label{font-weight:600;font-size:.95rem}

.timegrid-head-row{display:grid;grid-template-columns:34px repeat(7,1fr);gap:0;margin-bottom:.3rem}
.timegrid-head-row .day-head{
  text-align:center;font-size:.62rem;font-weight:700;color:var(--text-secondary);
  cursor:pointer;border-radius:6px;padding:.15rem 0;
}
.timegrid-head-row .day-head:hover{background:var(--bg)}
.timegrid-head-row .day-head .num{display:block;font-size:.82rem;color:var(--text);font-weight:700;margin-top:1px}
.timegrid-head-row .day-head.is-today{color:var(--accent)}
.timegrid-head-row .day-head.is-today .num{color:var(--accent)}

.timegrid-scroll{overflow-y:auto;overflow-x:hidden;max-height:620px;border-top:1px solid var(--border);padding:8px 0}
.timegrid{
  display:grid;grid-template-columns:34px repeat(7,1fr);position:relative;
  background-image:linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-repeat:repeat-y;
}
.timegrid .time-axis{position:relative}
.timegrid .time-axis .hour-label{
  position:absolute;right:6px;transform:translateY(-50%);
  font-size:.6rem;color:var(--text-secondary);white-space:nowrap;
}
.timegrid .day-col{position:relative;border-left:1px solid var(--border)}
.timegrid .day-col.is-today{background:var(--accent-tint)}

/* Soll: gestrichelte Umriss-Fläche in normaler Blockgröße (nur Orientierung) */
.plan-bar{
  position:absolute;left:2px;right:2px;border-radius:6px;overflow:hidden;
  border:2px dashed currentColor;background:rgba(255,255,255,.5);
  padding:3px 4px;cursor:pointer;z-index:1;
}
.plan-bar .lbl{font-size:.62rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.plan-bar .time{font-size:.55rem;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plan-bar.is-self{border-style:dotted}

/* Ist: dicker, durchgezogener Block — liegt über dem Soll und deckt ihn im
   überlappenden Zeitraum ab (tatsächlich gestempelte Zeit gewinnt visuell). */
.ist-block{
  --ist-color:var(--text);
  position:absolute;left:2px;right:2px;border-radius:6px;overflow:hidden;
  padding:3px 4px;color:#fff;background:var(--ist-color);box-shadow:0 1px 4px rgba(0,0,0,.25);
  cursor:default;z-index:2;
}
.ist-block .time{font-size:.6rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ist-block.is-open{background:linear-gradient(to bottom, var(--ist-color) 0%, var(--ist-color) 80%, transparent 100%)}

@media (max-width:480px){
  .timegrid-head-row .day-head .num{font-size:.72rem}
  .plan-bar{padding:2px 2px}
  .plan-bar .lbl{font-size:.56rem}
  .ist-block{padding:2px 2px}
  .ist-block .time{font-size:.52rem}
}

/* ── Modal ───────────────────────────────────────────────────────────── */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;z-index:50;padding:1.25rem;
}
.modal-card{background:var(--surface);border-radius:var(--radius-lg);padding:1.5rem;max-width:380px;width:100%;box-shadow:var(--shadow-pop)}
.modal-card h3{font-size:1.05rem;margin:0 0 1.1rem}
.modal-actions{display:flex;gap:.6rem;margin-top:.4rem}
.modal-actions .btn{flex:1}

/* ── Mitteilungen ────────────────────────────────────────────────────── */
.announcement{border-bottom:1px solid var(--border);padding:1rem 0}
.announcement:last-child{border-bottom:none}
.announcement .a-title{font-weight:700;font-size:.95rem;margin-bottom:.2rem}
.announcement .a-date{font-size:.72rem;color:var(--text-secondary);margin-bottom:.4rem}
.announcement .a-body{font-size:.87rem;color:var(--text);line-height:1.5;white-space:pre-wrap}

/* ── Profil ──────────────────────────────────────────────────────────── */
.profile-head{display:flex;align-items:center;gap:1rem;margin-bottom:.5rem}
.profile-head .avatar-lg{
  width:56px;height:56px;border-radius:50%;background:var(--accent-tint);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700;flex-shrink:0;
}
.profile-head .name{font-size:1.15rem;font-weight:700}
.profile-head .email{font-size:.85rem;color:var(--text-secondary)}
.info-list{display:flex;flex-direction:column}
.info-list .info-row{display:flex;justify-content:space-between;padding:.65rem 0;border-bottom:1px solid var(--border);font-size:.87rem}
.info-list .info-row:last-child{border-bottom:none}
.info-list .info-row .k{color:var(--text-secondary)}
.info-list .info-row .v{font-weight:600}
.admin-link-list{display:flex;flex-direction:column;gap:.35rem}
.admin-link-list a{
  display:flex;align-items:center;gap:.65rem;padding:.65rem .75rem;border-radius:var(--radius-sm);
  color:var(--text);text-decoration:none;font-size:.88rem;font-weight:600;background:var(--bg);
}
.admin-link-list a svg{width:18px;height:18px;color:var(--text-secondary)}

/* ── Typography ──────────────────────────────────────────────────────── */
h1{font-size:1.7rem;font-weight:700;letter-spacing:-0.02em;margin:0 0 .3rem}
h2{font-size:1.05rem;font-weight:600;margin:0 0 .9rem;color:var(--text)}
.sub{color:var(--text-secondary);font-size:.9rem;margin:0 0 1.25rem}

/* ── Cards ───────────────────────────────────────────────────────────── */
.card{
  background:var(--surface);border-radius:var(--radius-lg);
  padding:1.75rem;margin-bottom:1.5rem;box-shadow:var(--shadow-card);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);
  padding:.68rem 1.25rem;font-size:.9rem;font-weight:600;cursor:pointer;
  text-decoration:none;transition:background .12s ease,transform .05s ease;
}
.btn:hover{background:var(--accent-hover)}
.btn:active{background:var(--accent-active);transform:scale(.98)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-danger{background:var(--danger)}
.btn-danger:hover{background:var(--danger-hover)}
.btn-gray{background:var(--bg);color:var(--text)}
.btn-gray:hover{background:#E9E9EC}
.btn-sm{padding:.4rem .8rem;font-size:.8rem;border-radius:8px}

/* ── Forms ───────────────────────────────────────────────────────────── */
label{display:block;font-size:.8rem;font-weight:600;color:var(--text-secondary);margin-bottom:.35rem}
input,select,textarea{
  width:100%;padding:.65rem .8rem;border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:.9rem;margin-bottom:.9rem;font-family:inherit;background:var(--surface);color:var(--text);
  transition:border-color .12s ease,box-shadow .12s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,113,227,.14);
}
.row-inline{display:flex;gap:.85rem}
.row-inline > *{flex:1}

/* ── Tables ──────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:.86rem}
th,td{padding:.7rem .6rem;text-align:left;border-bottom:1px solid var(--border)}
th{color:var(--text-secondary);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--bg)}

/* ── Badges ──────────────────────────────────────────────────────────── */
.badge{display:inline-block;padding:.25rem .65rem;border-radius:999px;font-size:.74rem;font-weight:600}
.badge-beantragt{background:var(--warning-tint);color:var(--warning-text)}
.badge-genehmigt{background:var(--success-tint);color:var(--success-text)}
.badge-abgelehnt{background:var(--danger-tint);color:var(--danger-text)}

/* ── Stats ───────────────────────────────────────────────────────────── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;margin-bottom:.5rem}
.stat{background:var(--bg);border-radius:var(--radius-md);padding:1.1rem;text-align:center}
.stat .val{font-size:1.6rem;font-weight:700;letter-spacing:-0.02em;color:var(--text)}
.stat .val.neg{color:var(--danger)}
.stat .lbl{font-size:.76rem;color:var(--text-secondary);margin-top:.2rem;font-weight:500}

/* ── Messages ────────────────────────────────────────────────────────── */
.msg{padding:.65rem .9rem;border-radius:var(--radius-sm);font-size:.85rem;margin-bottom:1.1rem;font-weight:500}
.msg-ok{background:var(--success-tint);color:var(--success-text)}
.msg-err{background:var(--danger-tint);color:var(--danger-text)}

/* ── Stempeluhr ──────────────────────────────────────────────────────── */
.clock-row{display:flex;align-items:center;gap:.55rem;margin:.9rem 0 1.25rem;font-size:.92rem}
.clock-row .dot{width:9px;height:9px;border-radius:50%;background:var(--text-secondary);flex-shrink:0}
.clock-row .dot.active{background:#34C759}
.clock-row #clockStatus{color:var(--text-secondary);font-weight:500}
.clock-row .time{color:var(--text);font-variant-numeric:tabular-nums}

/* ── Auth pages (login/register) ─────────────────────────────────────── */
.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.auth-card{width:100%;max-width:380px;padding:2.5rem 2.25rem;box-shadow:var(--shadow-pop)}
.auth-logo{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-bottom:1.75rem}
.auth-logo .mark{width:52px;height:52px;border-radius:14px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff}
.auth-logo .mark svg{width:28px;height:28px}
.auth-logo h1{margin:0;font-size:1.4rem}
.switch-link{display:block;text-align:center;margin-top:1.25rem;font-size:.85rem;color:var(--text-secondary)}
.switch-link a{font-weight:600}