/* ============================================================
   Variablen & Reset
   ============================================================ */
:root{
  --bg:#EEF4FC; --surface:#FFFFFF; --ink:#132238; --muted:#5B6B82;
  --line:#DCE6F3; --primary:#1E5FCC; --primary-soft:#E8F0FE; --accent:#4F9CF9;
  --pos:#15803D; --neg:#DC2626;
  --c-buero:#1E5FCC; --c-homeoffice:#0E9B8B; --c-urlaub:#D98A0B;
  --c-krankheit:#DB4B6A; --c-seminar:#7C5CD6;
  --radius:16px; --shadow:0 10px 30px -18px rgba(19,34,56,.35);
  --tab-h:60px;   /* Höhe der mobilen Bottom-Tab-Bar */
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:"Inter",system-ui,sans-serif; color:var(--ink);
  background:
    radial-gradient(1200px 500px at 80% -10%, #DCEAFE 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 0%,  #E6F6F2 0%, transparent 55%),
    var(--bg);
  min-height:100vh; line-height:1.5;
  /* Platz für sticky Bottom-Nav auf Mobile */
  padding-bottom:env(safe-area-inset-bottom);
}
.num{font-family:"Space Grotesk",monospace; font-variant-numeric:tabular-nums}
.wrap{max-width:1040px; margin:0 auto; padding:20px 16px 80px}

/* ============================================================
   Header
   ============================================================ */
header.app{display:flex; align-items:center; gap:12px; margin-bottom:20px}
.logo{width:42px; height:42px; border-radius:12px; flex:none;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:grid; place-items:center; color:#fff; box-shadow:var(--shadow)}
.logo svg{width:22px; height:22px}
header.app h1{font-family:"Space Grotesk"; font-size:1.35rem; margin:0; letter-spacing:-.02em}

/* ============================================================
   Zeitkonto-Hero
   ============================================================ */
.konto{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); margin-bottom:20px}
.konto .cell{background:var(--surface); padding:16px 18px}
.konto .cell:first-child{background:linear-gradient(135deg,#1E5FCC,#3D7BE8); color:#fff}
.konto .lbl{font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; opacity:.8; font-weight:600}
.konto .big{font-family:"Space Grotesk"; font-size:1.6rem; font-weight:700; line-height:1.1; margin-top:5px; font-variant-numeric:tabular-nums}
.konto .cell:first-child .lbl{opacity:.9}
.konto .sub{font-size:.74rem; color:var(--muted); margin-top:3px}
.konto .cell:first-child .sub{color:rgba(255,255,255,.85)}
.pos{color:var(--pos)} .neg{color:var(--neg)}

@media (max-width:820px){ .konto{grid-template-columns:1fr 1fr} }
@media (max-width:480px){
  .konto{grid-template-columns:1fr 1fr}
  .konto .cell{padding:12px 14px}
  .konto .big{font-size:1.35rem}
  .konto .sub{font-size:.7rem}
}

/* ============================================================
   Tabs – Desktop: horizontal oben / Mobile: sticky Bottom-Bar
   ============================================================ */
nav.tabs{display:flex; gap:6px; background:var(--surface); padding:6px;
  border-radius:13px; box-shadow:var(--shadow); margin-bottom:20px; flex-wrap:wrap}
nav.tabs button{flex:1; min-width:90px; border:0; background:transparent; cursor:pointer;
  padding:10px 10px; border-radius:9px; font:inherit; font-size:.88rem; font-weight:600; color:var(--muted);
  white-space:nowrap; touch-action:manipulation}
nav.tabs button.active{background:var(--primary-soft); color:var(--primary)}

section.tab{display:none}
section.tab.active{display:block}

@media (max-width:600px){
  nav.tabs{
    position:fixed; bottom:0; left:0; right:0; z-index:50;
    border-radius:0; margin:0; padding:4px 6px;
    border-top:1px solid var(--line);
    box-shadow:0 -4px 16px rgba(19,34,56,.12);
    padding-bottom:max(4px, env(safe-area-inset-bottom));
    gap:2px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  nav.tabs::-webkit-scrollbar{display:none}
  nav.tabs button{
    flex:none; min-width:64px; font-size:.72rem;
    padding:6px 8px; border-radius:8px;
    display:flex; flex-direction:column; align-items:center; gap:2px;
  }
  nav.tabs button::before{
    content:attr(data-icon); font-size:1.1rem; line-height:1;
  }
  .wrap{padding-bottom:calc(var(--tab-h) + 16px + env(safe-area-inset-bottom))}
}

/* ============================================================
   Cards
   ============================================================ */
.card{background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:20px; border:1px solid var(--line)}
.card + .card{margin-top:16px}
.card h2{font-family:"Space Grotesk"; font-size:1.1rem; margin:0 0 16px; letter-spacing:-.01em}

@media (max-width:480px){
  .card{padding:16px; border-radius:14px}
}

/* ============================================================
   Formular
   ============================================================ */
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.field{display:flex; flex-direction:column; gap:5px}
.field.full{grid-column:1 / -1}
label{font-size:.78rem; font-weight:600; color:var(--muted)}
input,select,textarea{
  font:inherit; font-size:1rem; /* verhindert iOS-Zoom */
  padding:12px 13px; border:1px solid var(--line);
  border-radius:10px; background:#fbfdff; color:var(--ink); width:100%;
  -webkit-appearance:none; appearance:none}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
textarea{resize:vertical; min-height:54px}
.hint{font-size:.74rem; color:var(--muted)}
.hint.warn{color:var(--c-urlaub); font-weight:600}
.field.check{flex-direction:row; align-items:center; gap:9px}
.field.check input{width:20px; height:20px; min-width:20px; margin:0; accent-color:var(--primary)}
.field.check label{font-weight:500; color:var(--ink); font-size:.9rem; cursor:pointer}

/* Zeitzeile mit Jetzt-Knopf */
.time-row{display:flex; gap:8px}
.time-row input{flex:1; min-width:0}
.now-btn{flex:none; border:1px solid var(--line); background:var(--primary-soft); color:var(--primary);
  border-radius:9px; padding:0 14px; font:inherit; font-weight:600; font-size:.82rem; cursor:pointer;
  min-height:44px; touch-action:manipulation}
.now-btn:hover{background:#dbe7fd}

.preview{margin-top:16px; padding:14px 16px; border-radius:12px; background:var(--primary-soft);
  display:flex; gap:20px; flex-wrap:wrap; align-items:baseline}
.preview div .k{font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; font-weight:600}
.preview div .v{font-family:"Space Grotesk"; font-size:1.25rem; font-weight:700; font-variant-numeric:tabular-nums}

.actions{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
button.btn{border:0; cursor:pointer; font:inherit; font-weight:600;
  padding:13px 20px; border-radius:11px; background:var(--primary); color:#fff;
  min-height:44px; touch-action:manipulation}
button.btn:hover{background:#1a55b8}
button.ghost{background:var(--primary-soft); color:var(--primary)}
button.ghost:hover{background:#dbe7fd}
.err{color:var(--neg); font-size:.82rem; min-height:1.1em; font-weight:500; margin-top:8px}

@media (max-width:600px){
  .grid{grid-template-columns:1fr}
  .actions{flex-direction:column}
  .actions button{width:100%; justify-content:center}
}

/* ============================================================
   Badges
   ============================================================ */
.badge{display:inline-flex; align-items:center; gap:5px; font-size:.74rem; font-weight:600;
  padding:3px 9px; border-radius:999px; color:#fff; white-space:nowrap}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.9)}
.b-buero{background:var(--c-buero)} .b-homeoffice{background:var(--c-homeoffice)}
.b-urlaub{background:var(--c-urlaub)} .b-krankheit{background:var(--c-krankheit)}
.b-seminar{background:var(--c-seminar)} .b-feiertag{background:#94739b}

/* ============================================================
   Tabellen
   ============================================================ */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:.88rem}
th,td{text-align:left; padding:10px 11px; border-bottom:1px solid var(--line)}
th{font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600}
td.num,th.num{text-align:right; font-family:"Space Grotesk"; font-variant-numeric:tabular-nums}
tbody tr:hover{background:#f6faff}
tfoot td{font-weight:700; border-top:2px solid var(--line); border-bottom:0}
.rowbtn{border:0; background:transparent; cursor:pointer; color:var(--muted);
  padding:6px 8px; border-radius:7px; font-size:.82rem; min-height:36px; touch-action:manipulation}
.rowbtn:hover{background:var(--primary-soft); color:var(--primary)}
.rowbtn.del:hover{background:#fdeaee; color:var(--neg)}
.empty{text-align:center; color:var(--muted); padding:30px 10px}
tr.row-missing td{background:#fdf3f4}
tr.row-missing td:first-child{color:var(--neg)}
tr.row-holiday td{background:#f7f1f9}
.tiny-link{border:0; background:transparent; color:var(--primary); cursor:pointer;
  font:inherit; font-size:.82rem; font-weight:600; text-decoration:underline}

/* ============================================================
   Berichte
   ============================================================ */
.report-controls{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-bottom:18px}
.report-controls .field{min-width:120px}
.spacer{flex:1}
.summary{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-top:16px}
.stat{border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:#fbfdff}
.stat .k{font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:600}
.stat .v{font-family:"Space Grotesk"; font-size:1.35rem; font-weight:700; margin-top:3px; font-variant-numeric:tabular-nums}

@media (max-width:600px){
  .report-controls{gap:8px}
  .report-controls .field{min-width:100px}
  .summary{grid-template-columns:1fr 1fr}
}

/* ============================================================
   Kalender
   ============================================================ */
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:10px}
.cal-nav{display:flex; gap:8px; align-items:center}
.cal-nav button{border:1px solid var(--line); background:#fbfdff; border-radius:9px;
  width:40px; height:40px; cursor:pointer; font-size:1.1rem; color:var(--ink);
  line-height:1; touch-action:manipulation; min-height:44px; min-width:44px}
.cal-nav button:hover{background:var(--primary-soft)}
.cal-label{font-family:"Space Grotesk"; font-weight:600; font-size:1rem; min-width:150px; text-align:center}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
.cal-dow{font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; text-align:center; padding:4px 0}
.cal-cell{min-height:68px; border:1px solid var(--line); border-radius:10px; padding:6px 7px;
  background:#fbfdff; position:relative; cursor:pointer; display:flex; flex-direction:column; gap:3px;
  touch-action:manipulation}
.cal-cell:hover{border-color:var(--accent)}
.cal-cell.blank{background:transparent; border:0; cursor:default}
.cal-cell.weekend{background:#eef3fa}
.cal-cell.today{outline:2px solid var(--accent); outline-offset:-2px}
.cal-cell.holiday{background:#f7f1f9}
.cal-cell.missing{background:#fdf3f4}
.cal-cell .d{font-family:"Space Grotesk"; font-weight:600; font-size:.85rem}
.cal-cell.missing .d{color:var(--neg)}
.cal-cell .tag{font-size:.65rem; color:#fff; border-radius:5px; padding:1px 6px; font-weight:600; align-self:flex-start}
.cal-cell .sld{font-size:.7rem; font-variant-numeric:tabular-nums; margin-top:auto; font-family:"Space Grotesk"; color:var(--muted)}
.cal-cell .hol{font-size:.6rem; color:#7c5cd6; font-weight:600; line-height:1.2}
.t-buero{background:var(--c-buero)} .t-homeoffice{background:var(--c-homeoffice)}
.t-urlaub{background:var(--c-urlaub)} .t-krankheit{background:var(--c-krankheit)}
.t-seminar{background:var(--c-seminar)} .t-feiertag{background:#94739b}
.legend{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; font-size:.76rem; color:var(--muted)}
.legend span{display:inline-flex; align-items:center; gap:5px}
.legend i{width:10px; height:10px; border-radius:3px; display:inline-block}

@media (max-width:600px){
  .cal-grid{gap:3px}
  .cal-cell{min-height:50px; padding:4px 5px; border-radius:8px}
  .cal-cell .d{font-size:.78rem}
  .cal-cell .tag{font-size:.58rem; padding:1px 4px}
  .cal-cell .sld{font-size:.62rem}
  .cal-cell .hol{font-size:.55rem}
  .cal-label{min-width:120px; font-size:.95rem}
}

/* ============================================================
   Einstellungen
   ============================================================ */
.s-status{color:var(--pos); font-size:.85rem; font-weight:500; min-height:1.1em; margin-top:4px}

/* ============================================================
   Toast
   ============================================================ */
#toastWrap{position:fixed; left:50%; bottom:calc(var(--tab-h) + 12px);
  transform:translateX(-50%);
  display:flex; flex-direction:column; gap:8px; z-index:60; align-items:center; pointer-events:none}
.toast{background:var(--ink); color:#fff; padding:11px 18px; border-radius:11px; box-shadow:var(--shadow);
  font-size:.9rem; font-weight:500; opacity:0; transform:translateY(8px);
  transition:opacity .25s, transform .25s; max-width:90vw; text-align:center}
.toast.show{opacity:1; transform:none}
.toast.ok{background:#13653a} .toast.err{background:#b3261e}

@media (min-width:601px){
  #toastWrap{bottom:24px}
}

/* ============================================================
   Modal
   ============================================================ */
.modal-backdrop{position:fixed; inset:0; background:rgba(19,34,56,.45); display:none; z-index:70;
  align-items:center; justify-content:center; padding:20px}
.modal-backdrop.show{display:flex}
.modal{background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px; max-width:360px; width:100%}
.modal p{margin:0 0 16px; font-size:.95rem}
.modal .actions{margin:0; justify-content:flex-end}

/* ============================================================
   Print
   ============================================================ */
.print-head{display:none}

@media (prefers-reduced-motion:no-preference){
  section.tab.active{animation:fade .2s ease}
  @keyframes fade{from{opacity:0; transform:translateY(3px)}to{opacity:1; transform:none}}
}

@media print{
  body{background:#fff; padding-bottom:0}
  .no-print{display:none !important}
  nav.tabs{display:none !important}
  .wrap{max-width:none; padding:0}
  .card{box-shadow:none; border:0; padding:0}
  .print-head{display:block; margin-bottom:14px}
  .print-head h2{font-family:"Space Grotesk"; margin:0}
  .print-head .pn{font-size:.9rem; color:#333; font-weight:400}
  th,td{padding:6px 8px; font-size:.8rem}
  tbody tr:hover{background:none}
  .summary{margin-top:12px}
  .stat{break-inside:avoid}
}