:root{
    --winblue:#1a5fb4; --winblue-light:#e5eefb;
    --headerbar:#0f2438; --headerbar2:#183048;
    --tabbar:#eceff3; --tabbar-line:#c7ccd3; --toolbar:#f4f5f7;
    --border:#c9ccd2; --ink:#20242b; --ink-soft:#666d78;
    --paper:#fff; --bg:#dfe2e6; --safety:#c15a2c; --ok:#3c7a5c; --warn:#b8860b;
    font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  }
  *{box-sizing:border-box;}
  body,html{margin:0;padding:0;height:100%;}
  body{background:var(--bg);color:var(--ink);font-size:13px;}
  .app{display:flex;flex-direction:column;min-height:100vh;}

  /* Kopf */
  .win-header{background:linear-gradient(var(--headerbar2),var(--headerbar));color:#fff;
    padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
  .win-header .title{font-weight:700;font-size:16px;}
  .win-header .title small{display:block;font-weight:400;font-size:11px;color:#9db2c4;}
  .whoami{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .whoami label{font-size:11.5px;color:#9db2c4;font-weight:600;}
  .whoami select{border:1px solid #35516b;background:#0c1c2c;color:#dfe6ee;border-radius:2px;padding:6px 8px;font-size:13px;}
  .chefbadge{background:var(--safety);color:#fff;font-size:10.5px;font-weight:700;
    padding:3px 8px;border-radius:10px;letter-spacing:.03em;}

  /* Reiter */
  .tab-row{background:var(--tabbar);border-bottom:1px solid var(--tabbar-line);display:flex;padding:0 10px;flex-wrap:wrap;}
  .tab-btn{padding:9px 16px;font-size:12.5px;cursor:pointer;border:none;background:none;
    color:var(--ink-soft);border-bottom:3px solid transparent;font-weight:600;}
  .tab-btn:hover{color:var(--ink);}
  .tab-btn.active{color:var(--winblue);border-bottom-color:var(--winblue);background:#fff;}
  .tab-btn .badge{background:var(--safety);color:#fff;border-radius:9px;padding:1px 6px;font-size:10.5px;margin-left:5px;}

  /* Werkzeugleiste */
  .toolbar{background:var(--toolbar);border-bottom:1px solid var(--border);padding:8px 14px;
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
  .btn{border:1px solid transparent;border-radius:3px;padding:7px 13px;font-size:12.5px;font-weight:600;cursor:pointer;}
  .btn-primary{background:var(--safety);color:#fff;}
  .btn-primary:hover{filter:brightness(1.08);}
  .btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--border);}
  .btn-ghost:hover{background:#eef2f6;}
  .btn-ok{background:var(--ok);color:#fff;}
  .btn-no{background:#fff;color:#b94a3a;border:1px solid #d9a9a1;}
  .btn-sm{padding:4px 9px;font-size:11.5px;}
  .nav-month{display:flex;align-items:center;gap:6px;}
  .nav-month .mlabel{font-weight:700;font-size:14px;min-width:150px;text-align:center;}
  .spacer{flex:1;}

  .content{flex:1;padding:16px;}

  /* Kalender */
  .cal{background:#fff;border:1px solid var(--border);border-radius:4px;overflow:hidden;}
  .cal-head{display:grid;grid-template-columns:repeat(7,1fr);background:#f4f5f7;border-bottom:1px solid var(--border);}
  .cal-head div{padding:7px 8px;font-size:11.5px;font-weight:700;color:var(--ink-soft);text-align:center;}
  .cal-head div.we{color:#a8442f;}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);}
  .cell{min-height:104px;border-right:1px solid #eceef1;border-bottom:1px solid #eceef1;padding:5px;position:relative;}
  .cell:nth-child(7n){border-right:none;}
  .cell.out{background:#fafbfc;}
  .cell.we{background:#f7f8fa;}
  .cell.heute{background:#fff8ef;box-shadow:inset 0 0 0 2px var(--safety);}
  .cell.feiertag-tag{background:#fdecea;}
  .cell.feiertag-tag .daynum{color:#a8291c;}
  .cell.feiertag-tag.heute{background:#fdecea;}
  .daynum{font-size:11.5px;font-weight:700;color:var(--ink-soft);margin-bottom:3px;}
  .cell.out .daynum{color:#c2c7ce;}
  .cell.heute .daynum{color:var(--safety);}
  .feiertag{font-size:9.5px;color:#fff;background:#c0392b;font-weight:700;
    border-radius:2px;padding:1px 4px;margin-bottom:3px;display:block;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  .eintrag{display:flex;align-items:center;gap:4px;border-radius:3px;padding:2px 5px;margin-bottom:2px;
    font-size:11px;font-weight:600;color:#fff;cursor:pointer;line-height:1.35;}
  .eintrag.offen{color:var(--ink);border:1.5px dashed currentColor;background-image:
      repeating-linear-gradient(45deg, rgba(255,255,255,.75) 0 4px, rgba(255,255,255,.35) 4px 8px);}
  .eintrag .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:currentColor;opacity:.9;}
  .eintrag .frage{font-weight:800;}
  .mehr{font-size:10px;color:var(--ink-soft);padding-left:4px;}

  /* Legende */
  .legende{background:#fff;border:1px solid var(--border);border-radius:4px;padding:11px 14px;margin-top:14px;
    display:flex;gap:18px;flex-wrap:wrap;align-items:center;}
  .legende .gruppe{display:flex;gap:9px;align-items:center;flex-wrap:wrap;}
  .legende .lbl{font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;}
  .person-chip{display:flex;align-items:center;gap:5px;font-size:11.5px;}
  .person-chip .sw{width:13px;height:13px;border-radius:3px;}
  .muster{width:34px;height:15px;border-radius:3px;display:inline-block;vertical-align:middle;}
  .muster.offen{border:1.5px dashed #555;background-image:
      repeating-linear-gradient(45deg,#d9d9d9 0 4px,#f2f2f2 4px 8px);}

  /* Tabellen / Listen */
  .card{background:#fff;border:1px solid var(--border);border-radius:4px;padding:16px 18px;margin-bottom:14px;}
  .card h3{margin:0 0 12px;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--winblue);}
  table{width:100%;border-collapse:collapse;font-size:12.5px;}
  th{text-align:left;padding:7px 9px;background:#f4f5f7;border-bottom:1px solid var(--border);
    font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);}
  td{padding:8px 9px;border-bottom:1px solid #eef0f2;vertical-align:middle;}
  tr:last-child td{border-bottom:none;}
  .namecell{display:flex;align-items:center;gap:7px;font-weight:600;}
  .namecell .sw{width:12px;height:12px;border-radius:3px;flex-shrink:0;}
  .status{display:inline-block;padding:2px 9px;border-radius:10px;font-size:10.5px;font-weight:700;}
  .status.offen{background:#fdf3e2;color:#8a6417;border:1px solid #e8d3a6;}
  .status.ok{background:#e7f2ec;color:#2f6249;border:1px solid #bcd9c9;}
  .status.no{background:#fbeae6;color:#a33e2f;border:1px solid #e5c1b9;}
  .leer{color:var(--ink-soft);font-size:12.5px;padding:18px 4px;text-align:center;}

  /* Balken Resturlaub */
  .bar{height:9px;background:#eceef1;border-radius:5px;overflow:hidden;min-width:110px;}
  .bar span{display:block;height:100%;}

  /* Formular / Dialog */
  .overlay{position:fixed;inset:0;background:rgba(20,20,20,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px;}
  .modal{background:#fff;border-radius:5px;width:440px;max-width:100%;max-height:88vh;
    display:flex;flex-direction:column;box-shadow:0 14px 44px rgba(0,0,0,.32);position:relative;}
  .modal-griff{display:flex;align-items:center;gap:8px;padding:12px 16px 10px;cursor:move;
    border-bottom:1px solid var(--border);background:#f7f8fa;border-radius:5px 5px 0 0;user-select:none;flex-shrink:0;}
  .modal-griff h3{margin:0;font-size:14.5px;color:var(--winblue);flex:1;}
  .modal-griff .punkte{color:#b2b8c0;font-size:15px;letter-spacing:1px;line-height:1;}
  .modal-griff .zu{border:none;background:none;font-size:17px;color:var(--ink-soft);cursor:pointer;
    line-height:1;padding:0 2px;}
  .modal-griff .zu:hover{color:#b94a3a;}
  .modal-inhalt{padding:16px 22px 18px;overflow-y:auto;}
  .modal h3{margin-top:0;font-size:14.5px;color:var(--winblue);}
  .overlay.frei{background:rgba(20,20,20,.18);}
  .frow{margin-bottom:11px;}
  label.fl{display:block;font-size:11px;color:var(--ink-soft);margin-bottom:4px;font-weight:600;}
  input[type=text],input[type=date],select,textarea{width:100%;border:1px solid var(--border);border-radius:2px;
    padding:7px 9px;font-size:13px;font-family:inherit;color:var(--ink);background:#fff;}
  textarea{min-height:64px;resize:vertical;}
  input:focus,select:focus,textarea:focus{outline:2px solid var(--winblue);}
  .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
  .modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;flex-wrap:wrap;}
  .datumsfeld{position:relative;}
  .datumsfeld input{cursor:pointer;padding-right:32px;}
  .datumsfeld .kalendersymbol{position:absolute;right:8px;top:50%;transform:translateY(-50%);
    pointer-events:none;color:var(--ink-soft);font-size:14px;}
  .hinweis{background:var(--winblue-light);border:1px solid #c5d9f2;border-radius:3px;
    padding:9px 11px;font-size:11.5px;color:#22456f;margin-bottom:12px;}
  .tage-info{font-size:12px;color:var(--ink-soft);margin-top:4px;}

  .toast{position:fixed;bottom:16px;right:16px;background:var(--ok);color:#fff;padding:9px 15px;
    border-radius:3px;font-size:12.5px;z-index:100;opacity:0;transition:opacity .25s;pointer-events:none;}
  .toast.show{opacity:1;}

  /* Anmeldung */
  .login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(var(--headerbar2),var(--headerbar));padding:20px;}
  .login-box{background:#fff;border-radius:6px;padding:28px 26px;width:340px;max-width:100%;
    box-shadow:0 12px 40px rgba(0,0,0,.35);}
  .login-box h2{margin:0 0 4px;font-size:18px;color:var(--headerbar);}
  .login-box .sub{font-size:11.5px;color:var(--ink-soft);margin-bottom:18px;}
  .pin-feld{letter-spacing:.5em;font-size:20px;text-align:center;font-weight:700;}
  .login-fehler{color:#b94a3a;font-size:12px;min-height:17px;margin-top:7px;}
  .demo-hinweis{background:#fff8ef;border:1px solid #e8d3a6;border-radius:3px;padding:8px 10px;
    font-size:11px;color:#7a5a12;margin-top:14px;line-height:1.5;}
  .abmelden{background:transparent;color:#9db2c4;border:1px solid #35516b;border-radius:2px;
    padding:5px 11px;font-size:11.5px;cursor:pointer;}
  .abmelden:hover{background:#1c3852;color:#fff;}
  .wer{color:#dfe6ee;font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px;}
  .wer .sw{width:12px;height:12px;border-radius:3px;}

  .entwurf-band{background:#fff3cd;border-bottom:1px solid #e8d3a6;color:#7a5a12;
    padding:7px 14px;font-size:11.5px;text-align:center;}

  @media (max-width:760px){
    .cell{min-height:72px;}
    .eintrag{font-size:10px;padding:1px 3px;}
    .fgrid{grid-template-columns:1fr;}
    .cal-head div{font-size:10px;padding:5px 2px;}
  }
/* ---- Anmeldung ---- */
html,body{height:100%;}
body{margin:0;background:var(--bg);}
.app{min-height:100vh;}
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(var(--headerbar2),var(--headerbar));padding:20px;}
.login-box{background:#fff;border-radius:6px;padding:28px 26px;width:330px;max-width:100%;
  box-shadow:0 12px 40px rgba(0,0,0,.35);}
.login-box h2{margin:0 0 3px;font-size:18px;color:var(--headerbar);}
.login-box .sub{font-size:11.5px;color:var(--ink-soft);margin-bottom:18px;}
.login-fehler{color:#b94a3a;font-size:12px;min-height:17px;margin-top:5px;}
.abmelden{background:transparent;color:#9db2c4;border:1px solid #35516b;border-radius:2px;
  padding:5px 11px;font-size:11.5px;cursor:pointer;}
.abmelden:hover{background:#1c3852;color:#fff;}