/* ============================================================
   Schriften — lokal eingebunden, keine Verbindung zu Google
   Barlow Condensed und Inter, SIL Open Font License 1.1
   ============================================================ */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/barlow-condensed-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/barlow-condensed-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-latin-600-normal.woff2') format('woff2')}

/* ============================================================
   Farben — Signalfarben tragen den Zustand, sonst Ruhe
   ============================================================ */
:root{
  --rot:#E10613;        /* Hp0 — Halt: Arbeit beenden, Löschen */
  --gruen:#1a7a43;      /* Hp1 — Fahrt: Arbeit läuft (weißer Text: 5,3:1) */
  --gelb:#e8a11c;       /* Hp2 — Vorsicht: Pause (dunkler Text: 8,6:1) */
  --auf-gelb:#1a1f2e;   /* Text auf Amber — Weiß wäre zu schwach */
  --nacht:#1a1f2e;      /* Nachtblau, Marke */
  --nacht-2:#262c3d;
  --gruen-text:#1a7a43; /* Grün als Schriftfarbe auf hellem Grund */
  --gelb-text:#8a5a00;

  --bg:#f4f5f7;
  --flaeche:#ffffff;
  --flaeche-2:#eceef2;
  --text:#1a1f2e;
  --text-2:#5b6170;
  --linie:#d9dce3;
  --linie-2:#eceef2;
  --auf-farbe:#ffffff;

  --display:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:4px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101319; --flaeche:#1a1f2e; --flaeche-2:#222838;
    --text:#f2f3f5; --text-2:#9ca3b3; --linie:#333b4f; --linie-2:#262c3d;
    --nacht:#0b0e14; --nacht-2:#232a3d;
    --gruen-text:#5cc98a; --gelb-text:#f0b34a;
  }
}
:root[data-theme="dark"]{
  --bg:#101319; --flaeche:#1a1f2e; --flaeche-2:#222838;
  --text:#f2f3f5; --text-2:#9ca3b3; --linie:#333b4f; --linie-2:#262c3d;
  --nacht:#0b0e14; --nacht-2:#232a3d;
  --gruen-text:#5cc98a; --gelb-text:#f0b34a;
}

/* ============================================================
   Grundlagen
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--body);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(76px + env(safe-area-inset-bottom));
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
button:disabled{cursor:default}
:focus-visible{outline:3px solid var(--rot);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;margin:0;letter-spacing:.005em}
h1{font-size:2rem}
h2{font-size:1.5rem}
h3{font-size:1.2rem}
p{margin:0}
[hidden]{display:none!important}
.leise{color:var(--text-2)}
.klein{font-size:.85rem}
.zahl{font-variant-numeric:tabular-nums}

/* ============================================================
   Kopf
   ============================================================ */
.kopf{
  background:var(--nacht);color:#fff;
  padding:calc(12px + env(safe-area-inset-top)) 20px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  position:sticky;top:0;z-index:30;
}
.marke{font-family:var(--display);font-size:1.3rem;font-weight:700;line-height:1}
.marke b{color:var(--rot);font-weight:700}
.kopf-rechts{display:flex;align-items:center;gap:14px}
.uhr{font-family:var(--display);font-size:1.6rem;font-weight:600;line-height:1}
.netzlage{width:9px;height:9px;border-radius:50%;background:var(--gruen)}
.netzlage.aus{background:var(--gelb)}

/* ============================================================
   Seiten
   ============================================================ */
.seite{display:none;max-width:600px;margin:0 auto;padding:20px 16px 8px}
.seite.aktiv{display:block}
.seitenkopf{margin-bottom:18px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.seitenkopf p{margin-top:4px}
.gruss{font-family:var(--display);font-size:1.7rem;font-weight:600;line-height:1.1;margin-bottom:16px}

/* ============================================================
   Signalblock — die eine große Farbfläche
   ============================================================ */
.signal{
  border-radius:var(--r);padding:26px 22px 22px;color:#fff;
  background:var(--nacht-2);position:relative;overflow:hidden;
  transition:background .35s ease;
}
.signal.laeuft{background:var(--gruen)}
.signal.pause{background:var(--gelb);color:var(--auf-gelb)}
.signal.pause .signal-projekt{border-top-color:rgba(26,31,46,.25)}
.signal.pause .signal-projekt button{color:var(--auf-gelb);border-color:rgba(26,31,46,.45)}
.signal.pause .signal-projekt button:hover{background:rgba(26,31,46,.08)}
.signal-warnung{
  margin-top:14px;padding:12px 14px;border-radius:var(--r);font-size:.88rem;line-height:1.45;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);
}
.signal-lage{font-size:.95rem;font-weight:500;opacity:.9}
.signal-zeit{
  font-family:var(--display);font-size:4.6rem;font-weight:700;
  line-height:.95;margin:6px 0 10px;letter-spacing:-.01em;
}
.signal-zeit small{font-size:1.6rem;font-weight:500;opacity:.8;margin-left:4px}
.signal-detail{font-size:.95rem;opacity:.92}
.signal-projekt{
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.28);
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.signal-projekt strong{display:block;font-size:1.05rem;line-height:1.3}
.signal-projekt span{font-size:.85rem;opacity:.85}
.signal-projekt button{
  color:#fff;font-size:.85rem;font-weight:600;padding:10px 14px;
  border:1.5px solid rgba(255,255,255,.55);border-radius:var(--r);white-space:nowrap;
  min-height:44px;
}
.signal-projekt button:hover{background:rgba(255,255,255,.12)}
.signal-projekt button:disabled{opacity:.5}

/* ============================================================
   Handlungsknöpfe
   ============================================================ */
.aktionen{display:grid;gap:10px;margin-top:14px}
.aktionen.zwei{grid-template-columns:1fr 1fr}
.knopf{
  min-height:76px;border-radius:var(--r);
  font-family:var(--display);font-size:1.55rem;font-weight:700;letter-spacing:.01em;
  display:flex;align-items:center;justify-content:center;gap:10px;
  color:#fff;transition:filter .15s ease,transform .08s ease;
}
.knopf:active{transform:scale(.985)}
.knopf:hover{filter:brightness(.94)}
.knopf:disabled{opacity:.55;filter:none}
.knopf.start{background:var(--gruen)}
.knopf.pause{background:var(--gelb);color:var(--auf-gelb)}
.knopf.ende{background:var(--rot)}
.knopf.neutral{background:var(--nacht-2)}
.knopf svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.knopf-flach{
  min-height:48px;padding:0 16px;border-radius:var(--r);
  border:1.5px solid var(--linie);background:var(--flaeche);
  font-size:.92rem;font-weight:600;display:inline-flex;align-items:center;gap:8px;
}
.knopf-flach:hover{border-color:var(--text-2)}
.knopf-flach.voll{width:100%;justify-content:center}
.knopf-flach.rot{border-color:var(--rot);color:var(--rot)}
.knopf-flach.rot:hover{background:var(--rot);color:#fff}
.knopf-flach.gruen{border-color:var(--gruen);color:var(--gruen-text)}
.knopf-flach.gruen:hover{background:var(--gruen);color:#fff}
.knopf-flach.primaer{background:var(--nacht);border-color:var(--nacht);color:#fff}
.knopf-flach.primaer:hover{background:#000}
.knopf-flach svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.knopf-text{color:var(--text-2);font-size:.9rem;font-weight:500;padding:10px 4px;min-height:44px}
.knopf-text:hover{color:var(--text);text-decoration:underline}

/* ============================================================
   Listen & Gruppen
   ============================================================ */
.gruppe{margin-top:26px}
.gruppe-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.gruppe-kopf h2{font-size:1.3rem}
.liste{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden}
.zeile{
  display:flex;align-items:center;gap:14px;padding:14px 16px;
  border-bottom:1px solid var(--linie-2);min-height:60px;
}
.zeile:last-child{border-bottom:0}
.zeile.klickbar{cursor:pointer;width:100%;text-align:left}
.zeile.klickbar:hover{background:var(--flaeche-2)}
.zeile-zeit{font-family:var(--display);font-size:1.35rem;font-weight:600;min-width:58px;line-height:1}
.zeile-zeit small{display:block;font-family:var(--body);font-size:.68rem;font-weight:500;color:var(--text-2);margin-top:3px}
.zeile-sub.warn{color:var(--rot)}
.zeile-haupt{flex:1;min-width:0}
.zeile-titel{font-weight:600;font-size:.95rem;line-height:1.35}
.zeile-sub{font-size:.82rem;color:var(--text-2);margin-top:2px;overflow-wrap:anywhere}
.zeile-rechts{text-align:right;flex:0 0 auto}
.zeile-rechts strong{font-family:var(--display);font-size:1.25rem;font-weight:600;display:block;line-height:1}
.zeile-rechts span{font-size:.78rem;color:var(--text-2)}
.leer{padding:32px 20px;text-align:center;color:var(--text-2);font-size:.92rem;line-height:1.55}
.leer strong{display:block;color:var(--text);font-weight:600;margin-bottom:4px}

/* Zustandspunkt */
.punkt{width:10px;height:10px;border-radius:50%;flex:0 0 auto;background:var(--linie)}
.punkt.ein{background:var(--gruen)}
.punkt.aus{background:var(--rot)}
.punkt.pause{background:var(--gelb)}

/* Kennzeichen */
.kennz{
  display:inline-block;font-size:.72rem;font-weight:600;padding:3px 8px;
  border-radius:var(--r);background:var(--flaeche-2);color:var(--text-2);white-space:nowrap;
}
.kennz.gruen{background:rgba(26,122,67,.14);color:var(--gruen-text)}
.kennz.gelb{background:rgba(232,161,28,.18);color:var(--gelb-text)}
.kennz.rot{background:rgba(225,6,19,.12);color:var(--rot)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .kennz.rot{color:#ff6b74} }
:root[data-theme="dark"] .kennz.rot{color:#ff6b74}

/* ============================================================
   Formulare
   ============================================================ */
.feld{margin-bottom:16px}
.feld label{display:block;font-size:.88rem;font-weight:600;margin-bottom:6px}
.feld input,.feld select,.feld textarea{
  width:100%;min-height:50px;padding:12px 14px;border-radius:var(--r);
  border:1.5px solid var(--linie);background:var(--flaeche);font-size:16px;
}
.feld textarea{min-height:96px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--nacht)}
.feld .hinweis{font-size:.8rem;color:var(--text-2);margin-top:6px}
.zwei-spalten{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Ist eines der beiden Felder ausgeblendet (z. B. „Bis“ außer bei Pausen), nimmt das andere die ganze Breite */
.zwei-spalten:has(> [hidden]) > :not([hidden]){grid-column:1/-1}
.schalter{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer}
.schalter input{width:22px;height:22px;accent-color:var(--gruen);margin:0}

/* Segmentwahl */
.segmente{display:flex;background:var(--flaeche-2);border-radius:var(--r);padding:3px;gap:3px;margin-bottom:18px;overflow-x:auto}
.segmente button{
  flex:1;min-height:42px;padding:0 12px;border-radius:3px;font-size:.88rem;font-weight:600;
  color:var(--text-2);white-space:nowrap;
}
.segmente button.aktiv{background:var(--flaeche);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* Filterleiste */
.filter{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.filter .feld{margin:0}
.filter .feld input,.filter .feld select{min-height:46px;padding:10px 12px}
.filter-schalter{display:flex;flex-direction:column;align-items:flex-start;gap:2px}   /* Kästchen untereinander in einer Linie */
.filter-schalter .schalter.klein{min-height:36px;white-space:nowrap}
.gruppe-kopf:has(.filter-schalter){align-items:flex-start}
.filter .breit{grid-column:1/-1}

/* Tabelle */
.tabelle-hülle{overflow-x:auto;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.9rem}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--linie-2);white-space:nowrap}
th{font-size:.78rem;font-weight:600;color:var(--text-2);background:var(--flaeche-2)}
td.z,th.z{text-align:right;font-variant-numeric:tabular-nums}
tfoot td{font-weight:600;background:var(--flaeche-2)}

/* Kennzahlen-Reihe */
.kennzahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.kennzahl{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);padding:14px}
.kennzahl strong{font-family:var(--display);font-size:1.8rem;font-weight:700;display:block;line-height:1}
.kennzahl span{font-size:.78rem;color:var(--text-2)}

/* ============================================================
   Dialoge
   ============================================================ */
dialog{
  border:0;border-radius:var(--r) var(--r) 0 0;padding:0;margin:auto 0 0;
  width:100%;max-width:600px;max-height:88vh;
  background:var(--flaeche);color:var(--text);
}
dialog::backdrop{background:rgba(10,12,18,.6)}
@media (min-width:640px){ dialog{margin:auto;border-radius:var(--r);max-height:84vh} }
.dialog-kopf{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:18px 20px 12px;border-bottom:1px solid var(--linie-2);
}
.dialog-kopf h2{font-size:1.35rem}
.dialog-zu{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r)}
.dialog-zu:hover{background:var(--flaeche-2)}
.dialog-zu svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.dialog-inhalt{padding:18px 20px calc(18px + env(safe-area-inset-bottom));overflow-y:auto;max-height:calc(88vh - 70px)}
.dialog-fuss{display:flex;gap:10px;margin-top:6px}
.dialog-fuss .knopf-flach{flex:1;justify-content:center}

/* Projektwahl — große Zeilen */
.wahl{display:flex;flex-direction:column;gap:6px}
.wahl button{
  text-align:left;padding:14px 16px;border:1.5px solid var(--linie);border-radius:var(--r);
  min-height:62px;display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.wahl button:hover{border-color:var(--text-2)}
.wahl button.gewaehlt{border-color:var(--gruen);background:rgba(31,138,76,.08)}
.wahl strong{display:block;font-size:1rem}
.wahl span{font-size:.82rem;color:var(--text-2)}

/* ============================================================
   Rückmeldung
   ============================================================ */
.melder{
  position:fixed;left:12px;right:12px;bottom:calc(86px + env(safe-area-inset-bottom));
  max-width:576px;margin:0 auto;z-index:60;border-radius:var(--r);
  background:var(--nacht);color:#fff;padding:14px 16px;font-size:.92rem;line-height:1.45;
  transform:translateY(16px);opacity:0;pointer-events:none;
  transition:transform .22s ease,opacity .22s ease;
}
.melder.zeigen{transform:none;opacity:1}
.melder.gut{background:var(--gruen)}
.melder.warn{background:var(--gelb);color:var(--auf-gelb)}
.melder.fehler{background:var(--rot)}
.melder strong{display:block;font-weight:600;margin-bottom:1px}

/* ============================================================
   Fußnavigation
   ============================================================ */
.nav{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--flaeche);border-top:1px solid var(--linie);
  display:flex;padding-bottom:env(safe-area-inset-bottom);
}
.nav button{
  flex:1;padding:10px 4px 9px;display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:.7rem;font-weight:600;color:var(--text-2);position:relative;min-height:60px;
}
.nav button.aktiv{color:var(--rot)}
.nav button.aktiv::before{content:"";position:absolute;top:-1px;left:22%;right:22%;height:3px;background:var(--rot)}
.nav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav .zaehler{
  position:absolute;top:6px;right:calc(50% - 22px);background:var(--rot);color:#fff;
  font-size:.62rem;font-weight:700;min-width:16px;height:16px;border-radius:8px;
  display:grid;place-items:center;padding:0 4px;
}

/* Sperre */
.sperre{
  max-width:600px;margin:40px auto;padding:28px 20px;text-align:center;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);
}

@media (prefers-reduced-motion: reduce){ *{transition:none!important} }
@media (max-width:380px){
  .signal-zeit{font-size:3.8rem}
  .knopf{font-size:1.35rem;min-height:70px}
  .kennzahlen{grid-template-columns:1fr 1fr}
}

/* ============================================================
   Anmeldung
   ============================================================ */
.login{max-width:440px;margin:0 auto;padding:28px 20px 40px}
.login h1{font-size:2.1rem;margin-bottom:6px}
.login .leise{margin-bottom:22px}
.login form{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);padding:20px}
.login .knopf-flach.primaer{width:100%;justify-content:center;min-height:56px;font-size:1rem;margin-top:4px}
.login-links{display:flex;flex-direction:column;gap:4px;margin-top:16px;align-items:flex-start}
.login-fehler{background:rgba(225,6,19,.1);color:var(--rot);border-left:3px solid var(--rot);padding:12px 14px;border-radius:var(--r);font-size:.92rem;margin-bottom:14px}
.code-zeile{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);padding:14px 16px;margin-bottom:14px}
.code-zeile .knopf-reihe{flex-wrap:nowrap}
.code-zeile code{font-family:var(--display);font-size:1.4rem;font-weight:700;letter-spacing:.06em}
.hinweis-text{font-size:.95rem;line-height:1.6}
.hinweis-text p{margin-bottom:12px}
.hinweis-text a{color:var(--rot)}

.kopf-knopf{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r);color:rgba(255,255,255,.7)}
.kopf-knopf:hover{background:rgba(255,255,255,.1);color:#fff}
.kopf-knopf svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Schichtenliste in der Auswertung */
.zeile-datum{min-width:58px;line-height:1.15}
.zeile-datum strong{font-family:var(--display);font-size:1.15rem;font-weight:600;display:block}
.zeile-datum span{font-size:.75rem;color:var(--text-2)}
.karte-links{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.karte-links a{
  display:inline-flex;align-items:center;gap:5px;min-height:38px;padding:0 12px;
  border:1px solid var(--linie);border-radius:var(--r);font-size:.78rem;font-weight:600;
  color:var(--text);text-decoration:none;
}
.karte-links a:hover{border-color:var(--text-2)}
.karte-links svg{width:14px;height:14px;stroke:var(--rot);fill:none;stroke-width:2}
.schalter.klein{font-size:.85rem;color:var(--text-2);min-height:0}
.schalter.klein input{width:18px;height:18px}

.fusslinks{display:flex;gap:20px;justify-content:center;margin-top:28px}
.fusslinks a{color:var(--text-2);font-size:.85rem;text-decoration:underline;padding:8px 0;min-height:44px;display:inline-flex;align-items:center}
.fusslinks a:hover{color:var(--text)}

/* Stornierte Buchungen: sichtbar, aber zurückgenommen */
.zeile.storniert .zeile-titel,.zeile.storniert .zeile-zeit,.zeile.storniert .zeile-datum strong{text-decoration:line-through;color:var(--text-2)}
.zeile.storniert .punkt{background:var(--linie)}
.storno-knopf{
  display:inline-flex;align-items:center;min-height:38px;padding:0 12px;
  border:1px solid var(--linie);border-radius:var(--r);font-size:.78rem;font-weight:600;color:var(--text-2);
}
.storno-knopf:hover{border-color:var(--rot);color:var(--rot)}

/* Logo in der Kopfzeile */
.kopf .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;min-height:44px}
.kopf .logo img{height:30px;width:auto;display:block}
.marke-zusatz{font-family:var(--display);font-size:1.05rem;font-weight:600;opacity:.75;padding-top:3px;letter-spacing:.02em}
@media (max-width:380px){ .marke-zusatz{display:none} }

/* ============================================================
   Ergänzungen aus der Durchsicht
   ============================================================ */
/* Ladezustand vor dem ersten Skript */
.laden{max-width:600px;margin:60px auto;padding:0 20px;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--text-2);flex-wrap:wrap;text-align:center}
.laden-punkt{width:12px;height:12px;border-radius:50%;background:var(--rot);animation:pulsieren 1s ease-in-out infinite}
@keyframes pulsieren{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.laden noscript{flex-basis:100%;color:var(--text)}

/* Passwortfeld mit Anzeige-Schalter */
.pw{position:relative}
.pw input{padding-right:52px}
.auge{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r);color:var(--text-2)}
.auge:hover{color:var(--text)}
.auge[aria-pressed="true"]{color:var(--rot)}
.auge svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Netzhinweis auf dem Stempelbildschirm */
.netz-hinweis{background:rgba(232,161,28,.18);color:var(--gelb-text);border-left:3px solid var(--gelb);padding:10px 14px;border-radius:var(--r);font-size:.88rem;line-height:1.45;margin-bottom:14px}

/* Suche in der Projektwahl */
.suche{width:100%;min-height:50px;padding:12px 14px;border-radius:var(--r);border:1.5px solid var(--linie);background:var(--flaeche);font-size:16px;margin-bottom:12px}
.suche:focus{outline:none;border-color:var(--nacht)}

/* Einladungscode als Knopf */
.code{font-family:var(--display);font-size:1.4rem;font-weight:700;letter-spacing:.06em;color:var(--text);padding:6px 0;min-height:44px;text-align:left}
.code:hover{color:var(--rot)}

/* Nicht klickbare Zeilen sehen nicht klickbar aus */
.zeile:not(.klickbar){cursor:default}
.knopf-flach:disabled{opacity:.5}

/* Schichtzeile in der Auswertung: Datum | Titel | Netto, darunter Details über die volle Breite */
.zeile.schicht{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"datum haupt rechts" "detail detail detail";align-items:start;row-gap:6px}
.zeile.schicht .zeile-datum{grid-area:datum}
.zeile.schicht .zeile-haupt{grid-area:haupt}
.zeile.schicht .zeile-rechts{grid-area:rechts}
.zeile.schicht .schicht-detail{grid-area:detail;display:flex;flex-direction:column;gap:4px}
.zeile.schicht .karte-links{margin-top:4px}

/* Tabelle auf schmalen Bildschirmen ohne Seitwärtsscrollen */
@media (max-width:600px){
  table{min-width:0;font-size:.84rem}
  th.dez,td.dez{display:none}   /* Dezimalstunden nur am großen Bildschirm und im CSV */
  th,td{padding:10px 8px}
  th:first-child,td:first-child{padding-left:12px}
  th:last-child,td:last-child{padding-right:12px}
  td:first-child{white-space:normal}   /* Name samt Kennzeichen darf umbrechen statt die Tabelle zu verbreitern */
}

/* ============================================================
   Erweiterungen: Live-Übersicht, Druck, Einladung, Zuschläge
   ============================================================ */
.knopf-reihe{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
@media (max-width:480px){ .nur-breit{display:none} }

/* Live-Übersicht */
.live-gruppe{margin-top:18px}
.live-gruppe h3{font-size:1.05rem;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.live-gruppe .zeile-rechts span{display:block;margin-top:2px}
.punkt.feierabend{background:var(--text-2)}

/* Auswahl im Druckdialog */
.wahl-option{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1.5px solid var(--linie);border-radius:var(--r);cursor:pointer;text-align:left}
.wahl-option input{margin:3px 0 0;width:20px;height:20px;accent-color:var(--rot);flex:0 0 auto}
.wahl-option strong{display:block;font-size:.95rem;margin-bottom:2px}
.wahl-option span span{font-size:.82rem;color:var(--text-2);display:block;line-height:1.45}
.wahl-option:has(input:checked){border-color:var(--nacht);background:var(--flaeche-2)}

/* QR-Code — immer schwarz auf weiß mit Ruhezone, auch im Dunkelmodus */
.qr{background:#fff;padding:14px;border-radius:var(--r);max-width:280px;margin:0 auto;border:1px solid var(--linie)}
.qr svg{display:block;width:100%;height:auto}

/* Zuschlagsspalten nur am großen Bildschirm (im CSV und Druck immer) */
@media (max-width:600px){ th.zu,td.zu{display:none} }

/* Druckbereich: am Bildschirm unsichtbar */
#druck{display:none}

@media print{
  @page{size:A4 portrait;margin:12mm 12mm 14mm}
  html,body{background:#fff!important;color:#000!important;padding:0!important;margin:0!important}
  body > *:not(#druck){display:none!important}
  #druck{display:block!important;font-family:var(--body);font-size:9.5pt;line-height:1.35;color:#111;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .blatt{break-after:page;page-break-after:always}
  .blatt:last-child{break-after:auto;page-break-after:auto}
  .blatt-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:10px;border-bottom:2px solid #1a1f2e;margin-bottom:12px}
  .blatt-kopf img{height:32px;width:auto;display:block;margin-bottom:6px}
  .blatt-kopf .firma{font-size:8.5pt;color:#333;line-height:1.4}
  .blatt-kopf h1{font-family:var(--display);font-size:21pt;margin:0 0 2px;color:#1a1f2e;line-height:1}
  .blatt-kopf .meta{text-align:right;font-size:9pt;color:#222;line-height:1.45}
  .blatt-kopf .meta strong{font-size:11pt;color:#111}
  .blatt table{width:100%;border-collapse:collapse;font-size:8.8pt;min-width:0}
  .blatt th,.blatt td{padding:4px 6px;border-bottom:1px solid #d0d3da;text-align:left;white-space:normal;vertical-align:top;background:none;color:#111}
  .blatt th{font-size:7.5pt;text-transform:uppercase;letter-spacing:.04em;color:#444;border-bottom:1.5px solid #1a1f2e;font-weight:600}
  .blatt td.z,.blatt th.z{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  .blatt tr.tag td{background:#eef0f4;font-weight:600}
  .blatt tr.summe td{font-weight:600;background:#f6f7f9}
  .blatt tfoot td{font-weight:700;border-top:1.5px solid #1a1f2e;border-bottom:0;background:none}
  .blatt .bem{color:#8a0000}
  .blatt .summen{display:flex;flex-wrap:wrap;gap:6px 24px;margin:12px 0 4px;font-size:9pt}
  .blatt .summen span{color:#444}
  .blatt .summen b{font-family:var(--display);font-size:13pt;color:#111;margin-right:4px}
  .blatt .unterschriften{display:flex;gap:30px;margin-top:38px;break-inside:avoid}
  .blatt .unterschriften div{flex:1;border-top:1px solid #333;padding-top:4px;font-size:8pt;color:#333}
  .blatt .fuss{margin-top:14px;font-size:7.5pt;color:#555;line-height:1.45}
  .blatt thead{display:table-header-group}
  .blatt tr{break-inside:avoid;page-break-inside:avoid}
  .blatt .leer-hinweis{padding:20px 0;color:#444}
  /* Aushang für neue Mitarbeiter */
  .aushang{text-align:center;padding-top:14mm}
  .aushang img{height:44px;width:auto}
  .aushang h1{font-family:var(--display);font-size:34pt;margin:12mm 0 3mm;color:#1a1f2e;line-height:1}
  .aushang h2{font-family:var(--display);font-size:16pt;font-weight:500;color:#333;margin:0 0 10mm}
  .aushang .qr{width:86mm;padding:0;border:0;margin:0 auto}
  .aushang ol{text-align:left;display:inline-block;font-size:13pt;line-height:1.75;margin:10mm auto 6mm;padding-left:26px}
  .aushang .code{font-family:var(--display);font-size:24pt;letter-spacing:.08em;color:#1a1f2e;display:block;margin-top:4mm}
  .aushang .link{font-size:11pt;color:#333;overflow-wrap:anywhere}
}

/* ============================================================
   Eigener Kalender für die Zeitraumwahl (nur mit Maus)
   ============================================================ */
.datumsfeld,.zeitfeld{position:relative}
/* Das Datumsfeld des Browsers bleibt als Wertspeicher stehen, sichtbar ist unser eigenes Feld —
   sonst zeigt jeder Browser sein eigenes Symbol und seinen eigenen kleinen Kalender dazu. */
.datumsfeld .datum-wert,.zeitfeld .datum-wert{display:none}
.datumsfeld .datum-anzeige,.zeitfeld .datum-anzeige{padding-right:46px;cursor:pointer;font-variant-numeric:tabular-nums}
.kalender-knopf{position:absolute;right:4px;bottom:3px;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r);color:var(--text-2)}
.kalender-knopf:hover{color:var(--rot);background:var(--flaeche-2)}
.kalender-knopf svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.kalender,.uhr-wahl{
  position:absolute;top:calc(100% + 6px);left:0;z-index:40;width:352px;max-width:86vw;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);
  box-shadow:0 14px 36px rgba(10,12,18,.32);padding:12px 14px 14px;
}
.kalender.rechts,.uhr-wahl.rechts{left:auto;right:0}
/* Im Dialog schwebt das Auswahlfenster über allem und wird von Hand gesetzt (siehe platzieren) */
.kalender.schwebend,.uhr-wahl.schwebend{position:fixed;margin:0}
.kalender-tag.gesperrt{opacity:.3;cursor:not-allowed}
.kalender-tag.gesperrt:hover{background:none}
.kalender-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.kalender-monat{font-family:var(--display);font-size:1.3rem;font-weight:700;letter-spacing:.01em}
.kalender-pfeil{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r);color:var(--text-2)}
.kalender-pfeil:hover{background:var(--flaeche-2);color:var(--text)}
.kalender-pfeil svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.kalender-zeile{display:grid;grid-template-columns:30px repeat(7,1fr);align-items:center;gap:2px}
.kalender-titel{margin-bottom:4px}
.kalender-titel span{text-align:center;font-size:.75rem;font-weight:600;color:var(--text-2)}
.kalender-zeile .kw{text-align:center;font-size:.7rem;color:var(--text-2);font-variant-numeric:tabular-nums}
.kalender-tag{
  height:38px;border-radius:var(--r);font-size:.98rem;font-weight:500;font-variant-numeric:tabular-nums;
  display:grid;place-items:center;color:var(--text);
}
.kalender-tag:hover{background:var(--flaeche-2)}
.kalender-tag.ausserhalb{opacity:.35}
.kalender-tag.frei{color:var(--rot)}
.kalender-tag.heute{box-shadow:inset 0 0 0 1.5px var(--text-2)}
.kalender-tag.spanne{background:rgba(225,6,19,.10)}
.kalender-tag.gegenstueck{background:rgba(225,6,19,.10);box-shadow:inset 0 0 0 1.5px var(--rot);color:var(--rot);font-weight:600}
.kalender-tag.gewaehlt,.kalender-tag.gewaehlt.frei{background:var(--rot);color:#fff;font-weight:700;box-shadow:none}
.kalender-tag.gewaehlt:hover{background:var(--rot);filter:brightness(1.08)}

.kalender-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--linie-2)}
.kalender-fuss span{flex-basis:100%;margin-bottom:2px}
.kalender-fuss button{
  flex:1;min-width:0;min-height:36px;padding:0 8px;border:1px solid var(--linie);border-radius:var(--r);
  font-size:.8rem;font-weight:600;color:var(--text);white-space:nowrap;
}
.kalender-fuss button:hover{border-color:var(--rot);color:var(--rot)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .kalender-tag.frei{color:#ff6b74} }
:root[data-theme="dark"] .kalender-tag.frei{color:#ff6b74}

/* ============================================================
   Uhrzeit-Auswahl (nur mit Maus) — Stunde, dann Minute
   ============================================================ */
.uhr-titel{font-size:.78rem;font-weight:600;color:var(--text-2);margin:2px 0 6px}
.uhr-gitter + .uhr-titel{margin-top:14px}
.uhr-gitter{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.uhr-knopf{
  height:40px;border-radius:var(--r);font-size:1rem;font-weight:500;font-variant-numeric:tabular-nums;
  color:var(--text);border:1px solid var(--linie-2);
}
.uhr-knopf:hover{background:var(--flaeche-2);border-color:var(--linie)}
.uhr-knopf.gewaehlt{background:var(--rot);border-color:var(--rot);color:#fff;font-weight:700}
.uhr-knopf.gewaehlt:hover{filter:brightness(1.08)}
.uhr-hinweis{margin-top:12px;padding-top:10px;border-top:1px solid var(--linie-2);line-height:1.45}