/* View-spezifisch: Lade-Screen, Login, Start (Check-in), Stunden, Kalender-Grid, Dokumente. */

/* ---------- Lade-Screen ---------- */
#lade{flex:1;display:flex;align-items:center;justify-content:center;color:var(--mut)}
.lade-icon{width:70px;height:70px;object-fit:contain;opacity:.7}
.lade-text{margin-top:10px}

/* ---------- LOGIN + PASSWORT-NEU (teilen sich dieselbe Optik: .auth-screen) ---------- */
.auth-screen{flex:1;display:flex;flex-direction:column;justify-content:center;padding:32px 26px;
       background:var(--bg)}
.auth-screen h1{color:var(--brand);text-align:center;margin:6px 0 2px;font-size:24px;letter-spacing:.3px}
.auth-screen .sub{color:var(--mut);text-align:center;margin:0 0 26px;font-size:14px}
.auth-screen .fld{background:#fff;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;
            padding:0 14px;margin-bottom:12px;height:52px}
.auth-screen .fld input{border:none;outline:none;flex:1;font-size:16px;background:transparent;color:var(--ink)}
.auth-screen .fld .eye{color:var(--mut);font-size:18px;padding:6px}
.auth-screen .go{width:100%;height:52px;border-radius:12px;background:var(--brand);color:#fff;
           font-size:17px;font-weight:600;margin-top:8px}
.auth-screen .forgot{color:var(--mut);text-align:center;margin-top:18px;font-size:13px}
.auth-screen .logobadge{margin:0 auto 12px;text-align:center}
.auth-screen .logobadge img{width:132px;height:132px;object-fit:contain}
.auth-msg{color:var(--info);text-align:center;min-height:18px;font-size:13px;margin-bottom:2px}

/* ---------- START (Check-in) ---------- */
#v-start.on{display:flex;flex-direction:column;height:100%}
#v-start.on > *{flex:none}
#v-start .abslist{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
#gebBanner{background:#f1ebfb;color:#6b3fbf;border:1px solid #ddd0f5;border-radius:14px;padding:11px 14px;margin-bottom:12px;font-size:14px;font-weight:600}
#presence{padding:0 4px 6px}
#absList{padding:6px 14px}

.checkin{background:linear-gradient(135deg,#159a63,#0f7d50);color:#fff;border-radius:16px;
         padding:20px;text-align:center;margin-bottom:12px}
.checkin.done{background:linear-gradient(135deg,#0f6e8c,#0b5a72)}
.checkin .big{font-size:20px;font-weight:700;letter-spacing:.5px}
.checkin .st{font-size:13px;opacity:.9;margin-top:4px}
.hours{display:flex;gap:10px;margin-bottom:14px}
.hours .h{flex:1;background:var(--card);border-radius:14px;padding:12px;text-align:center;
          box-shadow:0 1px 3px rgba(20,40,50,.06)}
.hours .h b{display:block;font-size:20px} .hours .h span{font-size:12px;color:var(--mut)}

/* ---------- STUNDEN ---------- */
#stdMonthHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
#stdPrev,#stdNext{font-size:20px;padding:2px 14px}
#stdMonLabel{margin:0}
#stdBody{padding:6px 14px}

/* ---------- KALENDER ---------- */
#kalListe{padding:4px 14px}
.cal .mh{text-align:center;font-weight:700;font-size:16px;margin-bottom:10px}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.calgrid .wd{text-align:center;font-size:11px;color:var(--mut);font-weight:700;padding:2px 0}
.calgrid .cell{aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:10px;font-size:14px;background:#f4f7f8}
.calgrid .cell.empty{visibility:hidden;background:none}
.calgrid .cell.today{background:var(--brand);color:#fff;font-weight:700}
.calgrid .dots{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;margin-top:2px;max-width:100%}
.calgrid .dots i{width:5px;height:5px;border-radius:50%}
.calgrid .dots i.b{background:#8a63d2}
.calgrid .dots .tag{font-size:7px;line-height:1.4;font-weight:700;border-radius:4px;padding:1px 3px;color:#fff}
.calgrid .dots .tag.k{background:var(--krank)} .calgrid .dots .tag.u{background:var(--urlaub)}
.krow{display:flex;align-items:center;gap:10px;padding:11px 6px;border-bottom:1px solid var(--line)}
.krow:last-child{border-bottom:none}
.dot{width:10px;height:10px;border-radius:50%}
.dot.k{background:var(--krank)} .dot.u{background:var(--urlaub)} .dot.b{background:#8a63d2}
.kdate{font-size:12px;color:var(--mut);min-width:74px}

/* ---------- DOKUMENTE ---------- */
#dokChefHead{display:flex;gap:8px;align-items:center;margin-bottom:8px}
#dokFuer{flex:1;border:1px solid var(--line);border-radius:10px;padding:8px;background:#fff;color:var(--ink)}
#btnDokNeu{background:var(--brand);flex:none}
#dokFoldersList,#fileList{padding:4px 14px}
.folder,.file{display:flex;align-items:center;gap:12px;padding:14px 8px;border-bottom:1px solid var(--line)}
.folder:last-child,.file:last-child{border-bottom:none}
.folder .ic,.file .ic{font-size:22px}
.folder .nm{font-weight:600} .folder .c{margin-left:auto;color:var(--mut)}

/* ---------- MITARBEITER / KRANKMELDUNGEN (Chef) ---------- */
#btnMitNeu{background:var(--brand)}
#mitList,#krankListe{padding:4px 14px}

/* ---------- Dynamische Verdichtung: passt sich der Bildschirmhoehe an ---------- */
.infobar{padding:clamp(9px,1.5vh,12px) 14px;margin-bottom:clamp(8px,1.4vh,12px);font-size:clamp(13px,1.8vh,14px)}
.checkin{padding:clamp(11px,2.1vh,20px);margin-bottom:clamp(8px,1.4vh,12px)}
.checkin .big{font-size:clamp(17px,2.3vh,20px)}
.checkin .st{font-size:clamp(12px,1.6vh,13px)}
.hours{margin-bottom:clamp(8px,1.4vh,14px)}
.hours .h{padding:clamp(8px,1.5vh,12px)}
.hours .h b{font-size:clamp(16px,2.3vh,20px)}
.tiles{gap:8px;margin-bottom:clamp(8px,1.4vh,14px)}
.tile{padding:clamp(9px,1.7vh,16px) 12px}
.tile .ic{font-size:clamp(20px,2.8vh,26px)}
.tile .t{font-size:13px;margin-top:4px}
.sec{margin:2px 4px 6px}
.abs{padding:clamp(7px,1.2vh,10px) 4px}