/* Reset, CSS-Variablen, Grund-Layout (Bildschirm-Rahmen, Kopfleiste, Tab-Leiste). */
:root{
  --brand:#0f6e8c; --brand-d:#0b5a72; --bg:#eef2f4; --card:#ffffff;
  --ink:#1c2a30; --mut:#6b7c84; --line:#e2e8eb;
  --krank:#2e9e5b; --krank-bg:#e7f6ed;      /* Krank = grün */
  --urlaub:#e0a500; --urlaub-bg:#fdf4dc;     /* Urlaub = gelb */
  --info:#d63b3b; --info-bg:#fdeaea;         /* Chef-Info = rot */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{color-scheme:only light}            /* immer Hell-Modus, Auto-Dunkel hart aus */
html,body{height:100%;color-scheme:only light}
body{margin:0;font-family:-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
     background:var(--bg);color:var(--ink);overflow:hidden}   /* keine Seiten-Scroll */
.wrap{max-width:430px;margin:0 auto;height:100vh;height:100dvh;background:var(--bg);position:relative;
      display:flex;flex-direction:column;overflow:hidden}      /* füllt genau den Bildschirm */
.hide{display:none!important}
button{font:inherit;cursor:pointer;border:none}

/* App-Rahmen */
#app{flex:1;display:flex;flex-direction:column;min-height:0}
.top{background:var(--brand);color:#fff;padding:14px 18px 12px;flex:none;
     display:flex;align-items:center;justify-content:space-between}
.top .hi{font-size:18px;font-weight:600}
.top .date{font-size:13px;color:#cfe6ee}
.body{flex:1;min-height:0;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding:14px 14px 16px}
.view{display:none} .view.on{display:block}

/* Tab-Leiste */
.tabs{flex:none;background:#fff;border-top:1px solid var(--line);
      display:flex;padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
.tab{flex:1;text-align:center;color:var(--mut);font-size:11px;padding:4px 0;background:none}
.tab .ic{font-size:21px;display:block;line-height:1.2}
.tab.on{color:var(--brand)}

/* Generische Layout-Hilfen (ersetzen inline style="..." im Markup) */
.center{text-align:center}
.row{display:flex;align-items:center;gap:10px}
/* Immer untereinander statt nebeneinander (Kenans Feedback 13.07., iPhone-Safari-Test):
   native <input type=date>/[time] rendern browserabhaengig unterschiedlich breit — Safari
   braucht mehr Platz als Chromium. Die App ist ohnehin nie breiter als 430px (.wrap), zwei
   Spalten haetten dort nie zuverlaessig genug Raum. Volle Breite je Feld ist robust auf
   jedem Geraet, statt eine Browser-Mindestbreite zu erraten. */
.row-8{display:flex;flex-direction:column;gap:8px}
.row-between{display:flex;align-items:center;justify-content:space-between}
.flex1{flex:1}
.m0{margin:0}
.mb-8{margin-bottom:8px}
.mt-2{margin-top:2px}
.mt-6{margin-top:6px}