/* ===========================================================================
   Zeiterfassung – App-Styles
   In der Designsprache des Webshops „Folientechnik Obermann" (Navy/Gold,
   Sora/Montserrat/Roboto). Backend-Charakter: dunkle Navy-Sidebar, sachliche
   Flächen, runde Gold-Primary-Buttons, Glas-/Gradient-Akzente.
   =========================================================================== */
:root{
  --navy:#0d3e68;   --navy900:#06243f;   --navy700:#0a3358;
  --gold:#f69d15;   --gold300:#ffc869;   --gold600:#e08c0a;
  --green:#61ce70;
  --ink:#1c2531;    --muted:#5d6b7a;     --line:#e3e8ee;
  --paper:#eef2f7;  --card:#ffffff;
  --ok:#3aa64a;     --err:#d9534f;       --warn:#e08c0a;
  --accent:#f69d15; --accent-dk:#e08c0a;
  --disp:'Sora','Montserrat',sans-serif;
  --head:'Montserrat',sans-serif;
  --body:'Roboto',system-ui,sans-serif;
  --r:12px; --r-lg:18px; --pill:999px;
  --sh:0 10px 28px -14px rgba(13,62,104,.35);
  --sh-sm:0 2px 8px rgba(13,62,104,.07);
}
*{box-sizing:border-box;}
body.app{margin:0;display:grid;grid-template-columns:264px 1fr;min-height:100vh;
  font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.6;}
h1,h2,h3{font-family:var(--disp);color:var(--navy);letter-spacing:-.01em;margin:0 0 .6em;font-weight:800;}
h1{font-size:1.7rem;} h2{font-size:1.25rem;font-weight:700;} h3{font-size:1.05rem;}
a{color:var(--accent-dk);text-decoration:none;}
::selection{background:var(--gold);color:#fff;}

/* ---- Sidebar -------------------------------------------------------- */
.side{background:linear-gradient(180deg,var(--navy),var(--navy900));color:#c7d6e6;display:flex;
  flex-direction:column;gap:1.3rem;padding:1.4rem 1.1rem;position:sticky;top:0;height:100vh;}
.side__brand{display:flex;align-items:center;gap:.7rem;color:#fff;flex:none;}
.side__mark{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex:none;
  font-family:var(--disp);font-weight:800;font-size:1.25rem;color:#3a2400;
  background:linear-gradient(135deg,var(--gold300),var(--gold) 60%,var(--gold600));
  box-shadow:0 10px 22px -8px rgba(246,157,21,.6);}
.side__brandtext strong{display:block;font-family:var(--head);font-weight:800;font-size:1.02rem;color:#fff;line-height:1.15;}
.side__badge{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--head);font-weight:700;
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold300);margin-top:.15rem;}
.side__nav{display:flex;flex-direction:column;gap:.25rem;margin-top:.3rem;
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent;
  margin-right:-.35rem;padding-right:.35rem;}
.side__nav::-webkit-scrollbar{width:8px;}
.side__nav::-webkit-scrollbar-track{background:transparent;}
.side__nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:8px;}
.side__nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.34);}
.side__nav a{display:flex;align-items:center;gap:.6rem;color:#c7d6e6;padding:.7rem .85rem;border-radius:10px;
  font-family:var(--head);font-weight:600;font-size:.92rem;transition:background .2s,color .2s;position:relative;}
.side__nav a .ic{width:1.1rem;text-align:center;opacity:.85;}
.side__nav a:hover{background:rgba(255,255,255,.07);color:#fff;}
.side__nav a.active{background:rgba(246,157,21,.16);color:#fff;box-shadow:inset 3px 0 0 var(--gold);}
.side__sep{font-family:var(--head);font-weight:700;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:#7e97b1;padding:.9rem .85rem .2rem;}
.side__count{margin-left:auto;background:var(--gold);color:#3a2400;font-size:.72rem;font-weight:800;
  min-width:1.35rem;height:1.35rem;border-radius:var(--pill);display:inline-grid;place-items:center;padding:0 .35rem;}
.dot-live{width:.55rem;height:.55rem;border-radius:50%;background:var(--green);margin-left:auto;
  box-shadow:0 0 0 0 rgba(97,206,112,.6);animation:pulse 2.4s infinite;}
.side__foot{margin-top:auto;flex:none;font-size:.82rem;color:#90a6bd;display:flex;flex-direction:column;gap:.8rem;
  border-top:1px solid rgba(255,255,255,.1);padding-top:1.1rem;}
.side__foot strong{color:#fff;font-family:var(--head);}

/* ---- Main + Topbar -------------------------------------------------- */
.main{display:flex;flex-direction:column;min-width:0;}
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:.85rem 2rem;display:flex;align-items:center;
  gap:1rem;position:sticky;top:0;z-index:20;}
.topbar__burger{display:none;background:none;border:none;font-size:1.4rem;color:var(--navy);cursor:pointer;line-height:1;}
.topbar__title{font-family:var(--disp);font-weight:800;color:var(--navy);font-size:1.12rem;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.topbar__right{margin-left:auto;display:flex;align-items:center;gap:.65rem;flex:none;}
.topbar__clock{font-family:var(--disp);font-weight:800;font-size:1.05rem;color:var(--navy);white-space:nowrap;
  background:#eaf0f7;border:1px solid #d6e2ee;padding:.3rem .85rem;border-radius:var(--pill);letter-spacing:.02em;}
.topbar__logout{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;cursor:pointer;
  font-family:var(--head);font-weight:700;font-size:.86rem;color:var(--navy);background:#fff;
  border:1.5px solid var(--line);padding:.5rem .9rem;border-radius:var(--pill);
  transition:background .2s,color .2s,border-color .2s;}
.topbar__logout:hover{background:var(--err);color:#fff;border-color:var(--err);}
.topbar__logout .ic{font-size:1.05rem;line-height:1;}
.content{padding:2rem;flex:1;}
.content-foot{padding:1.2rem 2rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:.5rem;color:var(--muted);font-size:.8rem;background:#fff;}

/* ---- Buttons -------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  background:linear-gradient(135deg,var(--gold300),var(--gold) 55%,var(--gold600));color:#3a2400;border:none;
  padding:.7rem 1.3rem;font:700 .9rem/1 var(--head);border-radius:var(--pill);cursor:pointer;
  box-shadow:0 10px 22px -10px rgba(246,157,21,.6);transition:transform .15s,box-shadow .15s,filter .2s;}
.btn:hover{transform:translateY(-1px);filter:saturate(1.05);}
.btn--sm{padding:.45rem .85rem;font-size:.8rem;}
.btn--block{width:100%;padding:.85rem 1.3rem;}
.btn--ghost{background:#fff;border:1.5px solid var(--line);color:var(--navy);box-shadow:none;}
.btn--ghost:hover{background:var(--navy);color:#fff;border-color:var(--navy);}
.btn--danger{background:var(--err);color:#fff;box-shadow:none;}
.btn--danger:hover{background:#b73b37;}
.btn--out{background:linear-gradient(135deg,#ff8f6b,var(--err));color:#fff;box-shadow:0 10px 22px -10px rgba(217,83,79,.6);}
.btn--xl{padding:1.05rem 2.4rem;font-size:1.1rem;border-radius:var(--pill);}
.btn--logout{background:rgba(255,255,255,.08);border:1.4px solid rgba(255,255,255,.25);color:#fff;box-shadow:none;}
.btn--logout:hover{background:#fff;color:var(--navy);}

/* ---- Greeting / Pagehead ------------------------------------------- */
.greeting{margin-bottom:1.6rem;}
.greeting h1{margin-bottom:.15em;}
.greeting__sub{color:var(--muted);font-size:.95rem;margin:0;}
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem;}
.pagehead p{color:var(--muted);margin:.2rem 0 0;}

/* ---- Dashboard ------------------------------------------------------ */
.dash-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:1.3rem;margin-bottom:1.4rem;}
.dash-grid--mgr{grid-template-columns:1fr 1fr;}
.clockcard{background:radial-gradient(70% 90% at 85% -10%,rgba(246,157,21,.28),transparent 60%),
    linear-gradient(155deg,var(--navy),var(--navy900));color:#fff;border-radius:var(--r-lg);padding:2rem;
  display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:var(--sh);position:relative;overflow:hidden;}
.clockcard--in{box-shadow:0 20px 44px -18px rgba(97,206,112,.5);}
.clockcard__status{display:inline-flex;align-items:center;gap:.5rem;font-size:.92rem;color:#cfe0f0;font-family:var(--head);}
.clockcard__status strong{color:#fff;}
.clockcard__big{font-family:var(--disp);font-weight:800;font-size:3.4rem;letter-spacing:.02em;margin:.6rem 0 1.1rem;
  color:#fff;font-variant-numeric:tabular-nums;}
.clockcard__form{margin:0;}
.clockcard__hint{color:#9fb6cd;font-size:.78rem;margin:1rem 0 0;}
.pulse{width:.7rem;height:.7rem;border-radius:50%;background:var(--green);display:inline-block;
  box-shadow:0 0 0 0 rgba(97,206,112,.6);animation:pulse 2.4s infinite;}
.pulse--off{background:#9fb6cd;animation:none;}
.pulse--sm{width:.55rem;height:.55rem;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(97,206,112,.55);}70%{box-shadow:0 0 0 9px rgba(97,206,112,0);}100%{box-shadow:0 0 0 0 rgba(97,206,112,0);}}
.statpanel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem;
  display:flex;flex-direction:column;justify-content:center;gap:1.1rem;box-shadow:var(--sh-sm);}
.statpanel__item{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:1.1rem;border-bottom:1px solid var(--line);}
.statpanel__item:last-child{border-bottom:none;padding-bottom:0;}
.statpanel__num{font-family:var(--disp);font-weight:800;font-size:2rem;color:var(--navy);line-height:1;font-variant-numeric:tabular-nums;}
.statpanel__lbl{color:var(--muted);font-size:.84rem;text-transform:uppercase;letter-spacing:.05em;font-family:var(--head);font-weight:600;}

/* ---- Panels --------------------------------------------------------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;box-shadow:var(--sh-sm);margin-bottom:1.4rem;}
.panel__head{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem;}
.panel__head h2{margin:0;}
.panel__count{margin-left:auto;background:#eef2f7;color:var(--muted);font-family:var(--disp);font-weight:800;
  min-width:1.9rem;height:1.9rem;border-radius:var(--pill);display:inline-grid;place-items:center;padding:0 .5rem;font-size:.95rem;}
.panel__count--alert{background:#fff4e2;color:var(--accent-dk);}
.panel__link{margin-left:auto;font-family:var(--head);font-weight:700;font-size:.85rem;color:var(--accent-dk);}
.muted{color:var(--muted);}
.livelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.2rem;}
.livelist li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem .2rem;border-bottom:1px solid var(--line);}
.livelist li:last-child{border-bottom:none;}
.livelist__name{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--head);font-weight:600;color:var(--ink);}
.livelist__meta{color:var(--muted);font-size:.82rem;text-align:right;}

/* ---- Tabellen ------------------------------------------------------- */
.table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-sm);}
.table th,.table td{padding:.8rem 1.1rem;text-align:left;border-bottom:1px solid var(--line);font-size:.92rem;}
.table th{background:#f7f9fc;text-transform:uppercase;font-size:.72rem;letter-spacing:.05em;color:var(--muted);font-family:var(--head);font-weight:700;}
.table tr:last-child td{border-bottom:none;}
.table th a.th-sort{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:.2rem;white-space:nowrap;}
.table th a.th-sort:hover{color:var(--navy);}
.table th.is-sorted a.th-sort{color:var(--navy);}
.table th.num a.th-sort{justify-content:flex-end;width:100%;}
.table tbody tr:hover{background:#fafcfe;}
.table .num{text-align:right;font-variant-numeric:tabular-nums;}
.row-off{opacity:.55;}
.tag{display:inline-block;padding:.2rem .65rem;border-radius:var(--pill);font-size:.72rem;font-weight:700;font-family:var(--head);white-space:nowrap;}
.tag--on{background:#e8f7ec;color:var(--ok);}
.tag--off{background:#eef2f7;color:var(--muted);}
.tag--muted{background:#eef2f7;color:var(--muted);border:1px solid var(--line);}
.tag--open{background:#e7f0fb;color:var(--navy);}
.tag--wait{background:#fff4e2;color:var(--accent-dk);}
.tag--cancel{background:#fdeded;color:var(--err);}
.tag--role{background:#efe7fb;color:#6b3fb0;}
.cell-note{color:var(--muted);font-size:.85rem;}
.note-reject{color:var(--err);font-size:.82rem;display:block;margin-top:.15rem;}
.cell-actions{display:flex;gap:.4rem;flex-wrap:wrap;}
.inline-form{display:inline;margin:0;}
.self-tag{font-size:.7rem;color:var(--muted);font-style:italic;margin-left:.35rem;}

/* ---- Monatsleiste --------------------------------------------------- */
.monthbar{display:flex;align-items:center;gap:1rem;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:.8rem 1.1rem;margin-bottom:1.3rem;box-shadow:var(--sh-sm);flex-wrap:wrap;}
.monthbar__current{font-family:var(--disp);font-weight:800;color:var(--navy);font-size:1.1rem;}
.monthbar__total{margin-left:auto;font-family:var(--head);font-weight:700;color:var(--navy);
  background:#eaf0f7;border:1px solid #d6e2ee;padding:.4rem .9rem;border-radius:var(--pill);}

/* ---- Genehmigungs-Karten ------------------------------------------- */
.approve-list{display:flex;flex-direction:column;gap:1rem;}
.approve-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem;
  box-shadow:var(--sh-sm);display:flex;gap:1.3rem;flex-wrap:wrap;align-items:flex-start;border-left:4px solid var(--gold);}
.approve-card__main{flex:1;min-width:240px;}
.approve-card__top{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:.5rem;}
.approve-card__top strong{font-family:var(--head);font-weight:700;color:var(--navy);font-size:1.02rem;}
.approve-card__date{display:block;color:var(--muted);font-size:.8rem;margin-top:.6rem;}
.approve-card__times{display:flex;gap:1.2rem;flex-wrap:wrap;font-family:var(--head);color:var(--ink);font-size:.92rem;}
.approve-card__times span{color:var(--muted);}
.approve-card__times b{color:var(--ink);font-weight:700;}
.approve-card__dur{color:var(--navy)!important;font-weight:800!important;}
.approve-card__reason{margin:.7rem 0 0;color:var(--ink);font-style:italic;}
.approve-card__actions{min-width:240px;}
.approve-form{display:flex;flex-direction:column;gap:.6rem;margin:0;}
.approve-form__note{width:100%;padding:.6rem .75rem;border:1.5px solid var(--line);border-radius:10px;
  font:inherit;background:#fff;min-height:62px;resize:vertical;}
.approve-form__note:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(246,157,21,.16);}
.approve-form__btns{display:flex;gap:.6rem;}

/* ---- Formulare ------------------------------------------------------ */
.form{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.8rem;max-width:720px;box-shadow:var(--sh-sm);}
.form-row{margin-bottom:1.2rem;}
.form-row label{display:block;font-family:var(--head);font-weight:600;font-size:.85rem;margin-bottom:.4rem;color:var(--navy);}
.form-row input,.form-row textarea,.form-row select{width:100%;padding:.7rem .8rem;border:1.5px solid var(--line);
  border-radius:10px;font:inherit;background:#fff;transition:border-color .2s,box-shadow .2s;}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(246,157,21,.16);}
.form-row textarea{min-height:90px;resize:vertical;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;}
.form-actions{display:flex;gap:.7rem;margin-top:1.3rem;flex-wrap:wrap;}
.hint{color:var(--muted);font-size:.8rem;margin-top:.3rem;}
.check{display:flex;align-items:center;gap:.55rem;}
.check input{width:auto;}
.check label{margin:0;}

/* ---- Flash ---------------------------------------------------------- */
.flash{padding:.85rem 1.1rem;border-radius:10px;margin:0 0 1.2rem;border-left:4px solid;font-size:.9rem;}
.flash--info{background:#eaf0f7;border-color:var(--navy);}
.flash--ok{background:#e8f7ec;border-color:var(--ok);}
.flash--error{background:#fdeded;border-color:var(--err);}

/* ---- Login ---------------------------------------------------------- */
.login-wrap{grid-column:1/-1;display:grid;place-items:center;min-height:100vh;padding:2rem 1rem;
  background:radial-gradient(60% 90% at 82% -10%,rgba(246,157,21,.28),transparent 60%),
    radial-gradient(50% 60% at 0% 110%,rgba(110,193,228,.16),transparent 60%),
    linear-gradient(155deg,var(--navy),var(--navy900));}
.login-card{background:var(--card);border-radius:20px;padding:2.3rem;width:min(400px,100%);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.45);border-top:4px solid var(--gold);}
.login-card .brand-mark{width:56px;height:56px;margin:0 auto;border-radius:15px;display:grid;place-items:center;
  font-family:var(--disp);font-weight:800;font-size:1.5rem;color:#3a2400;
  background:linear-gradient(135deg,var(--gold300),var(--gold) 60%,var(--gold600));box-shadow:0 16px 34px -8px rgba(246,157,21,.6);}
.login-card h1{text-align:center;font-size:1.5rem;margin:.8rem 0 .2rem;}
.login-card .sub{text-align:center;color:var(--muted);font-size:.88rem;margin-bottom:1.4rem;}
.login-badge{display:block;text-align:center;margin-bottom:1.2rem;}
.login-badge span{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--head);font-weight:700;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:#06243f;background:var(--gold);padding:.25rem .7rem;border-radius:var(--pill);}
.login-hint{text-align:center;color:var(--muted);font-size:.8rem;margin-top:1.3rem;}

/* ---- Responsive ----------------------------------------------------- */
@media (max-width:860px){
  body.app{grid-template-columns:1fr;}
  .side{position:fixed;z-index:60;width:260px;height:100vh;left:-280px;transition:left .25s ease;box-shadow:0 0 60px rgba(0,0,0,.4);}
  .side.is-open{left:0;}
  .topbar__burger{display:block;}
  .dash-grid,.dash-grid--mgr{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .content{padding:1.3rem;}
  .topbar{padding:.85rem 1.3rem;}
}

/* Tabellen auf schmalen Geräten horizontal scrollbar machen */
@media (max-width:680px){
  .panel{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .table{width:auto;min-width:100%;white-space:nowrap;}
  .table td.cell-note{white-space:normal;min-width:180px;}
  .pagehead{align-items:flex-start;}
  .pagehead h1{font-size:1.45rem;}
}

/* Smartphones: Topbar verschlanken, Texte/Spalten reduzieren */
@media (max-width:560px){
  .topbar__clock{display:none;}
  .topbar__logout-txt{display:none;}
  .topbar__logout{padding:.5rem .65rem;}
  .content{padding:1rem;}
  .panel{padding:1.1rem;}
  .btn{padding:.65rem 1.05rem;}
  h1{font-size:1.4rem;}
  .table--perm th.perm-col,.table--perm td.perm-col{width:64px;}
}

@media (max-width:480px){
  .contract-grid{grid-template-columns:1fr;}
  .exportmeta{grid-template-columns:1fr;}
  .form-actions{flex-direction:column;align-items:stretch;}
  .form-actions .btn{width:100%;}
}

/* ---- Vertrag & Überstunden (Dashboard) ----------------------------- */
.contract-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;}
.cstat{background:#f7f9fc;border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;display:flex;
  flex-direction:column;gap:.35rem;}
.cstat__num{font-family:var(--disp);font-weight:800;font-size:1.5rem;color:var(--navy);line-height:1;font-variant-numeric:tabular-nums;}
.cstat__lbl{color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;font-family:var(--head);font-weight:600;}
.cstat--accent .cstat__num{color:var(--accent-dk);}
.cstat--plus{background:#eefaf0;border-color:#cdeccf;}
.cstat--plus .cstat__num{color:var(--ok);}
.cstat--minus{background:#fdeeee;border-color:#f3cccc;}
.cstat--minus .cstat__num{color:var(--err);}

/* Vorzeichen-Werte in Tabellen */
.num-plus{color:var(--ok);font-weight:700;}
.num-minus{color:var(--err);font-weight:700;}

/* ---- Steuerberater-Export ------------------------------------------ */
.exportbar{display:flex;align-items:flex-end;gap:1rem;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:1.1rem 1.2rem;margin-bottom:1.3rem;box-shadow:var(--sh-sm);flex-wrap:wrap;}
.exportbar__field{display:flex;flex-direction:column;gap:.4rem;}
.exportbar__field label{font-family:var(--head);font-weight:600;font-size:.8rem;color:var(--navy);}
.exportbar__field select,.exportbar__field input{padding:.6rem .7rem;border:1.5px solid var(--line);border-radius:10px;
  font:inherit;background:#fff;min-width:230px;}
.exportbar__field select:focus,.exportbar__field input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(246,157,21,.16);}
.exportmeta{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem 1.4rem;}
.exportmeta>div{display:flex;flex-direction:column;gap:.2rem;padding:.2rem 0;}
.exportmeta__lbl{color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;font-family:var(--head);font-weight:600;}
.exportmeta>div>span:last-child{font-size:1.05rem;color:var(--ink);}

@media (max-width:860px){
  .contract-grid{grid-template-columns:1fr 1fr;}
  .exportmeta{grid-template-columns:1fr 1fr;}
  .exportbar__field select,.exportbar__field input{min-width:0;width:100%;}
  .exportbar__field{width:100%;}
}

/* ---- Abwesenheiten: Farben & Dots ---------------------------------- */
.lv-dot{display:inline-block;width:.72rem;height:.72rem;border-radius:3px;vertical-align:middle;margin-right:.15rem;
  background:#9aa6b6;flex:0 0 auto;}
.lv-dot.lv--urlaub{background:#3fbf7f;}
.lv-dot.lv--krank{background:#e0556b;}
.lv-dot.lv--sonder{background:#6e7bd6;}
.lv-dot.lv--gleit{background:#f0a52a;}
.lv-dot.lv--unbez{background:#8a94a6;}
.lv-dot.lv--pendleg{background:repeating-linear-gradient(45deg,#cbd5e1,#cbd5e1 3px,#fff 3px,#fff 6px);border:1px solid var(--line);}
.lv-dot.lv--holleg{background:#fdf0e0;border:1px solid #f3d9b5;}

/* Abwesenheits-Tags (helle Variante) */
.tag.lv--urlaub{background:#e3f6ec;color:#1d7d4f;}
.tag.lv--krank{background:#fde7eb;color:#b23a4d;}
.tag.lv--sonder{background:#e9ebfb;color:#46509e;}
.tag.lv--gleit{background:#fdf0db;color:#a96a08;}
.tag.lv--unbez{background:#eef1f5;color:#5d6b7a;}

.infolist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;}
.infolist li{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--ink);}

/* ---- Team-Kalender -------------------------------------------------- */
.cal-scroll{overflow-x:auto;}
.cal{border-collapse:collapse;width:100%;font-size:.8rem;}
.cal th,.cal td{border:1px solid var(--line);}
.cal__name{position:sticky;left:0;z-index:2;background:#fff;text-align:left;padding:.45rem .7rem;white-space:nowrap;
  font-family:var(--head);font-weight:600;color:var(--ink);min-width:160px;}
.cal thead .cal__name{background:#f7f9fc;}
.cal__day{width:1.6rem;min-width:1.6rem;padding:.25rem 0;text-align:center;background:#f7f9fc;}
.cal__wd{display:block;font-size:.58rem;color:var(--muted);line-height:1;}
.cal__dn{display:block;font-weight:700;color:var(--navy);font-size:.72rem;line-height:1.3;}
.cal__day--we,.cal__c--we{background:#eef2f7;}
.cal__day--hol,.cal__c--hol{background:#fdf0e0;}
.cal__c{height:1.75rem;padding:0;}
.cal__c.lv--urlaub{background:#3fbf7f;}
.cal__c.lv--krank{background:#e0556b;}
.cal__c.lv--sonder{background:#6e7bd6;}
.cal__c.lv--gleit{background:#f0a52a;}
.cal__c.lv--unbez{background:#8a94a6;}
.cal__c.is-pending{position:relative;}
.cal__c.is-pending::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.65),rgba(255,255,255,.65) 3px,transparent 3px,transparent 6px);}
.cal-legend{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin-top:1rem;font-size:.8rem;color:var(--muted);}
.cal-legend span{display:inline-flex;align-items:center;gap:.35rem;}
.calwrap{overflow:hidden;}

/* ---- Gehalt --------------------------------------------------------- */
.salary-form{display:flex;align-items:center;gap:.4rem;}
.salary-input{width:120px;padding:.45rem .55rem;border:1.5px solid var(--line);border-radius:8px;font:inherit;text-align:right;}
.salary-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(246,157,21,.16);}

/* ---------------------------------------------------------------------------
   Rechte-Matrix (Bausteine) – Toggle-Schalter
   --------------------------------------------------------------------------- */
.table--perm th.perm-col,
.table--perm td.perm-col { text-align: center; width: 124px; vertical-align: middle; }
.table--perm td strong { font-family: var(--head); color: var(--navy); }

.switch { position: relative; display: inline-block; width: 46px; height: 26px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch__slider { position: absolute; inset: 0; cursor: pointer; background: #cfd8e3;
  border-radius: 999px; transition: background .2s; }
.switch__slider::before { content: ""; position: absolute; height: 20px; width: 20px;
  left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.switch input:checked + .switch__slider { background: var(--gold); }
.switch input:checked + .switch__slider::before { transform: translateX(20px); }
.switch input:focus-visible + .switch__slider { box-shadow: 0 0 0 3px rgba(246,157,21,.32); }

/* ---------------------------------------------------------------------------
   Auftrags-Kennzahlen (Statuskacheln)
   --------------------------------------------------------------------------- */
.statcard{display:flex;flex-direction:column;gap:.15rem;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1rem 1.2rem;transition:border-color .15s,transform .15s,box-shadow .15s;}
.statcard:hover{border-color:var(--gold);transform:translateY(-1px);box-shadow:var(--sh);}
.statcard__num{font-family:var(--disp);font-weight:800;font-size:1.7rem;color:var(--navy);line-height:1;}
.statcard__label{font-family:var(--head);font-size:.82rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;}

/* Auftrags-Statuskacheln: responsives Auto-Fit-Raster (alle Bildschirme) */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;}
@media (max-width:420px){ .statgrid{grid-template-columns:repeat(2,1fr);} }

/* ---------------------------------------------------------------------------
   Persönliche Benachrichtigungen (Dashboard)
   --------------------------------------------------------------------------- */
.notify-panel{border-left:4px solid var(--gold);}
.notify-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;}
.notify-item{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;flex-wrap:wrap;
  padding:.7rem .9rem;border-radius:10px;background:#f3f6fb;border-left:4px solid var(--line);}
.notify-item--success{border-left-color:var(--green);}
.notify-item--warning{border-left-color:#e0972b;}
.notify-item.is-unread{background:#fff7e9;font-weight:600;}
.notify-item__msg{color:var(--ink);}
.notify-item__time{color:var(--muted);font-size:.82rem;white-space:nowrap;}

/* ---------------------------------------------------------------------------
   Datei-Anhänge (Auftragserfassung)
   --------------------------------------------------------------------------- */
.is-hidden{display:none;}
.filelist{list-style:none;margin:0 0 .8rem;padding:0;display:flex;flex-direction:column;gap:.4rem;}
.filelist__item{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;background:var(--card);
  border:1px solid var(--line);border-radius:10px;}
.filelist__ic{flex:none;opacity:.7;}
.filelist__name{flex:1;min-width:0;color:var(--navy);font-weight:600;text-decoration:none;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.filelist__name:hover{text-decoration:underline;}
.filelist__meta{flex:none;color:var(--muted);font-size:.8rem;}
.filelist__del{flex:none;border:none;background:#fbe9e9;color:#b3261e;width:26px;height:26px;border-radius:7px;
  cursor:pointer;font-size:.8rem;line-height:1;transition:background .15s;}
.filelist__del:hover{background:#f3c7c4;}

.dropzone{position:relative;border:2px dashed var(--line);border-radius:var(--r-lg);background:#f7f9fc;
  padding:1.4rem 1rem;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;}
.dropzone:hover{border-color:var(--gold);}
.dropzone.is-drag{border-color:var(--gold);background:#fff7e9;}
.dropzone__input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}
.dropzone__hint{margin:0;font-weight:600;color:var(--navy);}
.dropzone__link{color:var(--accent-dk,#b3760a);text-decoration:underline;}
.dropzone__sub{margin:.2rem 0 0;font-size:.8rem;color:var(--muted);}
.dropzone__list{list-style:none;margin:.7rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem;
  position:relative;z-index:2;}
.dz-file{display:flex;align-items:center;gap:.5rem;justify-content:space-between;background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:.35rem .6rem;font-size:.85rem;}
.dz-file__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);}
.dz-file__x{border:none;background:transparent;color:#b3261e;cursor:pointer;font-size:.85rem;line-height:1;flex:none;}

/* zugewiesene Aufträge (Mitarbeiter-Dashboard) */
.assign-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;}
.assign-item{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;padding:.6rem .8rem;background:var(--card);
  border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;text-decoration:none;
  transition:background .12s,border-color .12s;}
.assign-item:hover{background:#fff7e9;border-color:var(--gold);}
.assign-item__no{font-family:var(--head);font-weight:700;color:var(--navy);}
.assign-item__title{flex:1;min-width:0;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.assign-item__meta{color:var(--muted);font-size:.82rem;}

/* Hervorgehobener Panel-Akzent (z. B. „Mir zugewiesene Aufträge") */
.panel--accent{border-left:4px solid var(--gold);}

/* ---------------------------------------------------------------------------
   Auftrags-Detailansicht
   --------------------------------------------------------------------------- */
.pagehead__actions{display:flex;gap:.6rem;flex-wrap:wrap;}
.tagrow{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem;}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.1rem 1.6rem;}
.info-cell{display:flex;flex-direction:column;gap:.25rem;padding:.7rem .9rem;background:#f7f9fc;
  border:1px solid var(--line);border-radius:10px;}
.info-cell__label{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}
.info-cell__value{font-size:1.02rem;font-weight:700;color:var(--navy);}
.prewrap{white-space:pre-wrap;color:var(--ink);margin:0;line-height:1.55;}
@media (max-width:680px){ .detail-grid{grid-template-columns:1fr;gap:0;} }

/* anklickbare Tabellenzeilen */
.row-link{cursor:pointer;transition:background .12s;}
.row-link:hover{background:#f3f6fb;}

/* --- Aufträge: Fristen, Hinweise, Aktionsreihen (Feature-Erweiterung) --- */
.tag--danger{background:#fbe7e6;color:var(--err);}
.btnrow{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.4rem;}
.btn--success{background:linear-gradient(135deg,#5cc26b,var(--ok) 60%,#2f8f3e);color:#fff;}
.req{color:var(--err);font-weight:700;}
ul.tight{margin:.4rem 0 0;padding-left:1.1rem;}
ul.tight li{margin:.15rem 0;}
.notice{border:1px solid var(--line);border-radius:var(--r);padding:.8rem 1rem;margin:0 0 1rem;background:#fff;}
.notice--warn{border-left:4px solid var(--warn);background:#fff8ee;}
.notice strong{color:var(--navy);}

/* Primärzelle einer klickbaren Zeile: als Link nutzbar, optisch unaufdringlich */
.cell-main{color:var(--navy);text-decoration:none;}
.cell-main:hover,.cell-main:focus{text-decoration:underline;}
.row-link:focus-within{outline:2px solid var(--gold);outline-offset:-2px;}

/* Volle Breite im Manager-Grid (z. B. Backup-Verlauf) */
.panel--wide{grid-column:1 / -1;}