/* Willkomm Urlaub — Mitarbeiter-Ansicht (Handy).
   Farben ausschließlich CI: #00694C / #F6B600 / #8D9295 / #C5C7C4.
   🔴 Gelb nie als Textfarbe auf Weiß, auf Grün steht Text weiß. */
:root{
  --gruen:#00694C; --gruen-tief:#004f39; --gelb:#F6B600;
  --telegrau:#8D9295; --lichtgrau:#C5C7C4;
  --ink:#182420; --ink-soft:#4a5a53;
  --bg:#eef2ef; --card:#fff; --hair:#e4e9e5; --panel:#f4f7f4;
  --ok:#00694C; --ok-bg:#e3efe9;
  --wait:#8a6a12; --wait-bg:#fbf1d6;
  --stop:#8f2f22; --stop-bg:#f7e4e1;
  --shadow:0 12px 34px -18px rgba(0,40,28,.45);
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0f1613; --card:#141d19; --hair:#22322c; --panel:#18221e;
         --ink:#e7ede9; --ink-soft:#9fb0a8; --ok-bg:#17302a; --wait-bg:#32290f; --stop-bg:#331c18; }
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); -webkit-tap-highlight-color:transparent;
}
.app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--panel)}

/* ---- Kopf ---- */
.topbar{background:linear-gradient(160deg,var(--gruen),var(--gruen-tief));color:#fff;padding:14px 16px 16px}
.topbar .row{display:flex;align-items:center;gap:10px}
/* Echte Negativ-Fassung — NICHT per CSS invertieren, das macht die Wellengrafik
   zu einem weissen Block. 40px hoch = 125px breit (CI-Mindestbreite 120px). */
.topbar img{height:40px;width:auto;display:block}
.topbar .sp{flex:1}
.topbar .who{font-size:12.5px;opacity:.92;font-weight:700}
.topbar h1{margin:12px 0 2px;font-size:20px;font-weight:800}
.topbar .sub{font-size:12.5px;opacity:.9}

.body{flex:1;overflow-y:auto;padding:14px 12px 28px}
.view{display:none} .view.active{display:block}
.sectlabel{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--telegrau);font-weight:800;margin:22px 4px 8px}

/* ---- Urlaubskonto ---- */
.konto{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--hair);
  border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.konto-zahl{flex:0 0 auto;width:74px;height:74px;border-radius:18px;background:var(--ok-bg);color:var(--gruen);
  display:grid;place-items:center;align-content:center;font-weight:900;font-size:27px;line-height:1}
.konto-zahl small{display:block;font-size:11px;font-weight:700;opacity:.75;margin-top:2px}
.konto-t{font-weight:800;font-size:15px}
.konto-s{font-size:12.5px;color:var(--ink-soft);margin-top:3px;line-height:1.5}

/* ---- Hauptknopf ---- */
.cta{display:flex;align-items:center;gap:13px;width:100%;margin:16px 0 4px;padding:15px 16px;
  border:none;border-radius:16px;background:var(--gruen);color:#fff;font:inherit;text-align:left;
  cursor:pointer;box-shadow:var(--shadow)}
.cta:active{transform:scale(.99)}
.cta-ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.18);
  display:grid;place-items:center;font-size:21px}
.cta-t{display:block;font-weight:800;font-size:16px}
.cta-s{display:block;font-size:12.5px;opacity:.88;margin-top:2px}

/* ---- Karten & Felder ---- */
.karte{background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:14px;margin-bottom:12px}
.feldlabel{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;margin-bottom:9px}
.feldlabel.klein{font-size:12.5px;font-weight:700;color:var(--ink-soft);margin:14px 0 6px}
.feldlabel .opt{font-weight:600;color:var(--telegrau)}
.mikro{width:28px;height:28px;border-radius:9px;background:var(--ok-bg);display:grid;place-items:center;font-size:15px}
textarea,input[type=text],input[type=date],select{
  width:100%;font:inherit;font-size:16px;   /* 16px verhindert das Zoomen auf iOS */
  color:var(--ink);background:var(--panel);border:1.5px solid var(--hair);border-radius:12px;padding:12px}
textarea{resize:vertical;line-height:1.5}
textarea:focus,input:focus,select:focus{outline:none;border-color:var(--gruen)}
.datumsreihe{display:flex;gap:10px}
.dfeld{flex:1;display:block}
.dfeld span{display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);margin-bottom:6px}

.oder{display:flex;align-items:center;gap:12px;margin:4px 6px 12px;color:var(--telegrau);font-size:12px;font-weight:700}
.oder::before,.oder::after{content:"";flex:1;height:1px;background:var(--hair)}

.deutung{margin-top:10px;font-size:13px;line-height:1.5;display:none}
.deutung.an{display:block}
.deutung.gut{color:var(--gruen);font-weight:700}
.deutung.unklar{color:var(--ink-soft)}

/* ---- Bestätigungsseite ---- */
.pruef{text-align:center;padding:20px 16px}
.pruef-zeile.gross{font-size:17px;font-weight:800;line-height:1.5}
.pruef-tage{margin-top:10px;display:inline-block;background:var(--ok-bg);color:var(--gruen);
  border-radius:99px;padding:7px 15px;font-size:13.5px;font-weight:800}
.pruef-liste{margin-top:14px;font-size:13px;color:var(--ink-soft);line-height:1.7;text-align:left}
.pruef-liste div{display:flex;gap:8px}
.pruef-liste b{color:var(--ink);font-weight:700}

.hinweis{border-radius:14px;padding:13px 15px;font-size:13.5px;line-height:1.6;margin-bottom:12px;
  background:var(--card);border:1px solid var(--hair)}
.hinweis.warn{background:var(--wait-bg);border-color:transparent;color:var(--wait);font-weight:600}
/* Merker, kein Warnton: kurzfristige Anträge werden genehmigt, der Hinweis
   gilt dem nächsten Mal. Deshalb ruhiges Grau-Grün statt Gelb. */
.hinweis.merk{background:var(--panel);border-color:var(--hair);color:var(--ink-soft)}
.hinweis b{display:block;margin-bottom:3px}

/* ---- Knöpfe ---- */
.knopfreihe{display:flex;gap:10px;margin-top:16px}
.btn{flex:1;border:none;border-radius:13px;background:var(--gruen);color:#fff;font:inherit;font-weight:800;
  font-size:15px;padding:15px;cursor:pointer}
.btn:active{transform:scale(.99)}
.btn:disabled{opacity:.45}
.btn.ghost{background:transparent;color:var(--ink-soft);border:1.5px solid var(--hair)}
.btn.klein{flex:0 0 auto;font-size:12.5px;padding:9px 14px;border-radius:10px}

.fehler{color:var(--stop);background:var(--stop-bg);border-radius:12px;padding:12px 14px;font-size:13.5px;
  font-weight:600;margin-top:12px;display:none}
.fehler.an{display:block}

/* ---- Antragsliste ---- */
.liste{display:flex;flex-direction:column;gap:9px}
.eintrag{background:var(--card);border:1px solid var(--hair);border-radius:14px;padding:13px 14px}
.eintrag .kopf{display:flex;align-items:center;gap:9px}
.eintrag .zeit{font-weight:800;font-size:14.5px;flex:1}
.eintrag .unten{margin-top:5px;font-size:12.5px;color:var(--ink-soft);line-height:1.5}
.chip{flex:0 0 auto;font-size:11px;font-weight:800;padding:4px 10px;border-radius:99px;white-space:nowrap}
.chip.offen{background:var(--wait-bg);color:var(--wait)}
.chip.genehmigt{background:var(--ok-bg);color:var(--gruen)}
.chip.abgelehnt,.chip.storniert{background:var(--stop-bg);color:var(--stop)}
.chip.zurueckgezogen{background:var(--panel);color:var(--telegrau)}
.leer{color:var(--telegrau);font-size:13.5px;text-align:center;padding:22px 10px;line-height:1.6}

/* ---- Fertig ---- */
.fertig{background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:30px 20px;text-align:center}
.fertig-ic{width:58px;height:58px;margin:0 auto 14px;border-radius:50%;background:var(--ok-bg);color:var(--gruen);
  display:grid;place-items:center;font-size:29px;font-weight:900}
.fertig h2{margin:0 0 8px;font-size:18px}
.fertig p{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.6}

/* ---- Anmeldung: Namensliste ---- */
.abmelden{background:rgba(255,255,255,.18);border:none;color:#fff;font:inherit;font-size:12px;font-weight:700;
  padding:7px 12px;border-radius:9px;cursor:pointer}
.namensliste{display:flex;flex-direction:column;gap:8px}
.namensknopf{display:flex;align-items:center;gap:12px;width:100%;background:var(--card);border:1px solid var(--hair);
  border-radius:14px;padding:12px 14px;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.namensknopf:active{transform:scale(.99);border-color:var(--gruen)}
.nk-kreis{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--ok-bg);color:var(--gruen);
  display:grid;place-items:center;font-weight:800;font-size:13.5px}
.nk-name{flex:1;font-weight:700;font-size:15.5px}
.nk-neu{flex:0 0 auto;font-size:11px;font-weight:800;background:var(--wait-bg);color:var(--wait);
  padding:4px 9px;border-radius:99px}

/* ---- Anmeldung: PIN ---- */
.pinkarte{text-align:center;padding:22px 18px}
.pinwer{font-size:15px;font-weight:800}
.pinfrage{font-size:13.5px;color:var(--ink-soft);margin:6px 0 16px;line-height:1.5}
.pinfeld{max-width:210px;margin:0 auto 10px;text-align:center;font-size:26px;letter-spacing:12px;
  padding:14px 12px;font-weight:700}
.pinfeld::placeholder{letter-spacing:normal;font-size:14px;font-weight:600}
.pinhinweis{font-size:12px;color:var(--telegrau);line-height:1.55;margin-top:8px}

.fuss{text-align:center;font-size:11px;color:var(--telegrau);padding:14px 12px 20px}