:root{
  --bg:#f4f5f7; --card:#fff; --ink:#1d2733; --muted:#5b6776;
  --line:#e2e6ea; --brand:#1f6feb; --brand-d:#1a5fd0;
  --ok:#127a3b; --okbg:#e4f5ea; --warn:#9a6700; --warnbg:#fff8e1; --danger:#b42318; --dangerbg:#fdecea;
  /* zusätzliche, themefähige Flächen */
  --field-bg:#fff; --field-ink:#1d2733;
  --soft:#eef1f4; --soft-ink:#1d2733;
  --tile-bg:#fff; --tile-ink:#1d2733;
  --attn-tile:#eef4ff; --attn-row:#e6f0ff; /* „offene Aufgabe"-Tönung (hell) */
  --topbar-bg:#1d2733;
  /* Hauptmenü (mainnav) – im Hellmodus hell, im Dunkelmodus dunkel */
  --nav-bg:#eef1f4; --nav-ink:#2a3744; --nav-hover-bg:#dde3ea; --nav-hover-ink:#15212c;
  --nav-line:#d8dee6; --nav-group-ink:#6b7a89;
  --card-title-bg:#f0f3f6; --card-title-ink:#1d2733; --card-title-line:#e2e6ea;
}
/* ===== DUNKLER MODUS ===== */
html[data-theme="dark"]{
  --bg:#141517; --card:#1c1c1c; --ink:#f2f3f5; --muted:#9098a3;
  --line:#2c2f34; --brand:#4d8dff; --brand-d:#3a7bf0;
  --ok:#4ccf86; --okbg:#15301f; --warn:#e0b341; --warnbg:#332a12; --danger:#ff6b5e; --dangerbg:#3a1a17;
  --field-bg:#23262b; --field-ink:#f2f3f5;
  --soft:#2a2e34; --soft-ink:#f2f3f5;
  --tile-bg:#22262b; --tile-ink:#f2f3f5;
  --attn-tile:#263043; --attn-row:#243250; /* „offene Aufgabe"-Tönung (dunkel) */
  --topbar-bg:#0f1012;
  --nav-bg:#26313d; --nav-ink:#cdd6e0; --nav-hover-bg:#33414f; --nav-hover-ink:#fff;
  --nav-line:rgba(255,255,255,.08); --nav-group-ink:#8aa0b6;
  --card-title-bg:#23272d; --card-title-ink:#fff; --card-title-line:#313640;
}
*{box-sizing:border-box}
a,button,.tile,.btn,.appbtn{-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.45;font-size:16px}

/* Theme-Umschalter */
.theme-toggle{background:rgba(255,255,255,.12);border:0;color:#fff;font-size:1.1rem;
  width:40px;height:40px;border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;flex:0 0 auto}
.theme-toggle:hover{background:rgba(255,255,255,.22)}
.theme-toggle-form{display:flex;align-items:center}

/* Topbar */
.topbar{display:flex;align-items:center;gap:.5rem;background:var(--topbar-bg);color:#fff;
  padding:0 .8rem;position:sticky;top:0;z-index:30;height:58px;box-sizing:border-box}
.topbar button{margin-top:0}
.brand{font-weight:700;font-size:1.25rem;line-height:1;flex:1 1 auto;text-align:center;
  height:40px;display:flex;align-items:center;justify-content:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who{font-size:.8rem;opacity:.85;text-align:right;line-height:1.2;display:flex;flex-direction:column;justify-content:center;flex:0 0 auto}
.burger{background:rgba(255,255,255,.12);border:0;color:#fff;font-size:1.5rem;cursor:pointer;display:none;
  line-height:1;width:40px;height:40px;align-items:center;justify-content:center;padding:0;flex:0 0 auto;
  border-radius:9px;-webkit-tap-highlight-color:transparent;outline:none}
.burger:hover{background:rgba(255,255,255,.22)}
.burger:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:1px}
body.nav-open .burger{background:rgba(255,255,255,.28)}

/* Navigation */
.mainnav{display:flex;flex-wrap:wrap;gap:.2rem;background:var(--nav-bg);padding:.4rem .6rem;border-bottom:1px solid var(--nav-line)}
.mainnav a{color:var(--nav-ink);text-decoration:none;padding:.45rem .7rem;border-radius:6px;font-size:.92rem}
.mainnav a:hover{background:var(--nav-hover-bg);color:var(--nav-hover-ink)}
.mainnav .logout{margin-left:auto;color:var(--danger)}
.nav-ico{margin-right:.35rem;font-size:.95em}

/* Content */
.content{max-width:1000px;margin:0 auto;padding:1rem}
.foot{text-align:center;color:var(--muted);padding:1.5rem;font-size:.8rem}

/* Cards & headings */
h1{font-size:1.55rem;font-weight:800;color:var(--ink);margin:.2rem 0 1rem;letter-spacing:-.01em}
h2{font-size:1.2rem;font-weight:800;color:var(--ink);margin:1.4rem 0 .6rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1rem;margin-bottom:1rem}

/* Forms */
label{display:block;font-size:.85rem;color:var(--muted);margin:.6rem 0 .2rem}
input,select,textarea{width:100%;padding:.6rem .7rem;border:1px solid var(--line);
  border-radius:8px;font-size:1rem;background:var(--field-bg);color:var(--field-ink)}
textarea{min-height:90px;resize:vertical}
.row{display:flex;gap:.8rem;flex-wrap:wrap}
.row>div{flex:1;min-width:140px}
button,.btn{display:inline-block;background:var(--brand);color:#fff;border:0;border-radius:8px;
  padding:.65rem 1.1rem;font-size:1rem;line-height:1.25;cursor:pointer;text-decoration:none;
  margin-top:.8rem;vertical-align:middle;font-family:inherit;text-align:center;box-sizing:border-box}
button:hover,.btn:hover{background:var(--brand-d)}
.btn-light{background:var(--soft);color:var(--soft-ink)}
.btn-sm{padding:.35rem .6rem;font-size:.85rem;margin-top:0}
.btn-danger{background:var(--danger)}

/* Tables -> responsive cards on mobile */
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:10px;overflow:hidden}
th,td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--line);font-size:.9rem}
th{background:var(--card-title-bg);font-weight:600}

/* Flash */
.flash{background:var(--okbg);color:var(--ok);border:1px solid var(--ok);
  padding:.7rem .9rem;border-radius:8px;margin-bottom:1rem}

.badge{display:inline-block;padding:.1rem .5rem;border-radius:99px;font-size:.75rem;background:var(--soft);color:var(--muted)}
.muted{color:var(--muted);font-size:.85rem}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.8rem;}
.tile{display:block;text-decoration:none;color:var(--tile-ink);background:var(--tile-bg);border:1px solid var(--line);
  border-radius:10px;padding:1.1rem;text-align:center}
.tile:hover{border-color:var(--brand);box-shadow:0 2px 8px rgba(31,111,235,.12)}
.tile .t{font-weight:600;margin-top:.3rem;font-size:.88rem}

/* Am Handy: Kacheln einspaltig, groß und gut tippbar */
@media(max-width:760px){
  .tiles{grid-template-columns:1fr;gap:.6rem}
  .tile{display:grid;grid-template-columns:2.4rem 1fr;align-items:center;column-gap:1rem;
    text-align:left;padding:1.2rem 1.1rem;min-height:64px}
  .tile > div:first-child{font-size:2rem;line-height:1;grid-row:1 / span 2;text-align:center}
  .tile .t{font-size:.95rem;margin-top:0;grid-column:2}
  .tile .muted{font-size:.95rem;grid-column:2}
}

/* Login */
.login-wrap{max-width:380px;margin:8vh auto;padding:1rem}
.err{background:var(--dangerbg);color:var(--danger);border:1px solid var(--danger);
  padding:.7rem;border-radius:8px;margin-bottom:1rem}
/* FEHLTEN: .warn (install.php) und .flash-warn (update.php) waren im HTML benutzt,
   aber nie definiert – eine Warnung sah dadurch aus wie eine Erfolgsmeldung (grün). */
.warn,.flash-warn{background:var(--warnbg);color:var(--warn);border:1px solid var(--warn);
  padding:.7rem;border-radius:8px;margin-bottom:1rem}

@media(max-width:760px){
  .burger{display:flex}
  .mainnav{display:none;flex-direction:column;flex-wrap:nowrap;gap:0;padding:.5rem 1.1rem 2rem}
  /* Aufgeklapptes Menü immer im Sichtfeld: fix unter der Topbar */
  body.nav-open .mainnav{
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    align-content:flex-start;
    position:fixed;
    top:58px;            /* Höhe der Topbar */
    left:0;right:0;
    bottom:0;
    z-index:25;
    overflow-y:auto;
    background:var(--nav-bg);
    box-shadow:0 8px 24px rgba(0,0,0,.3);
    padding:1rem 1.1rem 2rem;
  }
  .who{display:none}
  /* Gruppen strikt untereinander, volle Breite */
  body.nav-open .navgroup{display:block;width:100%;flex:0 0 auto}
  /* Schlanke, gut tippbare Menüpunkte: flache Zeilen statt dicker Boxen */
  .mainnav a{display:flex;align-items:center;gap:.8rem;width:100%;box-sizing:border-box;
    font-size:1.05rem;padding:.85rem .4rem;border-radius:0;
    background:transparent;color:var(--nav-ink);margin:0;
    border:0;border-bottom:1px solid var(--nav-line)}
  .mainnav a:active{background:rgba(31,111,235,.25)}
  .mainnav a.logout{color:var(--danger);border-bottom:0}
  .nav-ico{flex:0 0 1.6rem;font-size:1.2rem;text-align:center;line-height:1;opacity:.95}
  table thead{display:none}
  table,tbody,tr,td{display:block;width:100%}
  tr{border:1px solid var(--line);border-radius:8px;margin-bottom:.6rem;background:var(--card);padding:.3rem}
  td{border:0;padding:.35rem .5rem;display:flex;justify-content:space-between;gap:1rem}
  td::before{content:attr(data-label);font-weight:600;color:var(--muted);font-size:.8rem}
}

/* Uhrzeit-Auswahl (Stunde : Minute) */
.timepick{display:flex;align-items:center;gap:.4rem}
.timepick select{width:auto;flex:1;min-width:64px}
.timepick-sep{font-weight:600;color:var(--muted)}

/* Bautagebuch-Vorschaubilder */
.thumbs{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0}
.thumbs a{display:block;width:84px;height:84px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block;background:var(--soft)}
.thumbs a:hover{border-color:var(--brand)}

/* Bautagebuch-Fotos im Bearbeiten-Dialog (mit Löschen) */
.thumbs-edit{display:flex;flex-wrap:wrap;gap:1rem;margin:.6rem 0}
.thumb-item{display:flex;flex-direction:column;align-items:center;gap:.4rem;width:120px}
.thumb-item>a{display:block;width:120px;height:120px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.thumb-item img{width:100%;height:100%;object-fit:cover;display:block;background:var(--soft)}
.thumbs video,.thumb-item video,.thumb-wrap video{width:120px;height:120px;object-fit:cover;display:block;border-radius:8px;border:1px solid var(--line);background:#000}
/* Kundenzugang: Video mit sichtbarem Overlay-Wasserzeichen */
.cv-wrap{position:relative;display:inline-block;max-width:340px;width:100%}
.cv-wrap video{width:100%;border-radius:8px;display:block;background:#000}
.cv-wm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;color:rgba(255,255,255,.55);font-weight:800;font-size:1.05rem;letter-spacing:.06em;text-align:center;transform:rotate(-18deg);text-shadow:0 1px 4px rgba(0,0,0,.7);padding:0 1rem}
.thumb-item>a:hover{border-color:var(--brand)}
.thumb-del{margin:0}
.thumb-del button{margin-top:0;width:100%}

/* Status-Badges und Menü-Zähler für Löschworkflow */
.badge-warn{background:var(--warnbg);color:var(--warn);border:1px solid var(--warn)}
.nav-count{display:inline-block;background:#b42318;color:#fff;border-radius:99px;
  font-size:.72rem;padding:.05rem .45rem;margin-left:.15rem;font-weight:600}

/* Galerie / Lightbox */
.lightbox{display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.9);
  align-items:center;justify-content:center}
.lightbox.open{display:flex}
#lb-img{max-width:92vw;max-height:82vh;object-fit:contain;border-radius:6px;
  box-shadow:0 4px 30px rgba(0,0,0,.5)}
.lb-close,.lb-prev,.lb-next{position:absolute;background:rgba(255,255,255,.12);color:#fff;
  border:0;cursor:pointer;font-size:2rem;line-height:1;padding:.4rem .9rem;border-radius:8px;
  user-select:none;transition:background .15s}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.28)}
.lb-close{top:1rem;right:1rem;font-size:2.4rem;padding:.1rem .7rem}
.lb-prev{left:1rem;top:50%;transform:translateY(-50%)}
.lb-next{right:1rem;top:50%;transform:translateY(-50%)}
.lb-caption{position:absolute;bottom:1rem;left:0;right:0;text-align:center;color:#fff;
  font-size:.9rem;padding:0 1rem;text-shadow:0 1px 3px rgba(0,0,0,.8)}
@media(max-width:760px){
  .lb-prev,.lb-next{font-size:1.5rem;padding:.3rem .6rem}
}

/* Status-Badges für Abwesenheiten */
.badge-ok{background:#e4f5ea;color:#127a3b;border:1px solid #b8e6c6}
.badge-bad{background:var(--dangerbg);color:var(--danger);border:1px solid var(--danger)}
.badge-info{background:#e7f0fb;color:#1a5fd0;border:1px solid #c2d8f5}

/* Urlaubs-Kalendermatrix */
.calmatrix{font-size:.74rem;border-collapse:collapse;min-width:100%}
.calmatrix th,.calmatrix td{border:1px solid var(--line);text-align:center;padding:.2rem .1rem;min-width:21px}
.calmatrix th{background:var(--card-title-bg);font-weight:600}
.calmatrix .cal-name{text-align:left;white-space:nowrap;position:sticky;left:0;background:var(--card);z-index:1;min-width:118px;padding:.3rem .4rem}
.calmatrix thead .cal-name{background:#f0f3f6;color:#1d2733}
.cal-dow{font-weight:400;color:var(--muted);font-size:.65rem}
.calmatrix .cal-we{background:#eef1f4;color:var(--muted)}
.calmatrix .cal-u{background:#cfe8d6;color:#0f5e2e;font-weight:700}
.calmatrix .cal-u-req{background:#fff3cd;color:#9a6700;font-weight:700}
.calmatrix .cal-k{background:#dbe7fb;color:#1a5fd0;font-weight:700}
.calmatrix .cal-f{background:#f7d4cf;color:#b42318;font-weight:700}
.calmatrix .cal-kk{background:#e0e7fb;color:#3641c0;font-weight:700}
.calmatrix .cal-su{background:#cdeeea;color:#0f6b62;font-weight:700}
.calmatrix .cal-ub{background:#e4e6ea;color:#4a4f57;font-weight:700}
.calmatrix .cal-ub-req{background:#f0f1f4;color:#7a7f87;font-weight:700}
.calmatrix .cal-pz{background:#ecdcf5;color:#7322a3;font-weight:700}
.calmatrix .cal-pz-req{background:#f6ecfb;color:#9a52c0;font-weight:700}
.cal-legend{display:inline-block;padding:.05rem .45rem;border-radius:4px;font-weight:700;margin:0 .2rem 0 .6rem}
.plan-legend{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 0;font-size:.82rem;color:var(--muted);margin:.2rem 0 .8rem}
.plan-legend .cal-legend{color:#111 !important}
.plan-legend .cal-legend.cal-u{background:#cfe8d6}
.plan-legend .cal-legend.cal-u-req{background:#fff3cd}
.plan-legend .cal-legend.cal-k{background:#dbe7fb}
.plan-legend .cal-legend.cal-kk{background:#e0e7fb}
.plan-legend .cal-legend.cal-su{background:#cdeeea}
.plan-legend .cal-legend.cal-ub{background:#e4e6ea}
.plan-legend .cal-legend.cal-f{background:#f7d4cf}
.cal-legend.cal-u{background:#cfe8d6;color:#0f5e2e}
.cal-legend.cal-u-req{background:#fff3cd;color:#9a6700}
.cal-legend.cal-k{background:#dbe7fb;color:#1a5fd0}
.cal-legend.cal-f{background:#f7d4cf;color:#b42318}
.cal-legend.cal-kk{background:#e0e7fb;color:#3641c0}
.cal-legend.cal-su{background:#cdeeea;color:#0f6b62}
.cal-legend.cal-ub{background:#e4e6ea;color:#4a4f57}
.cal-legend.cal-pz{background:#ecdcf5;color:#7322a3}
.cal-legend-row{line-height:2.1}

/* Foto-Auswahl & Sendeleiste */
.thumb-wrap{position:relative}
.thumb-check{position:absolute;top:4px;left:4px;z-index:2;background:rgba(255,255,255,.85);
  border-radius:4px;padding:1px 3px;cursor:pointer}
.thumb-check input{width:18px;height:18px;cursor:pointer}
.send-bar{display:none;position:sticky;top:58px;z-index:20;background:#26313d;color:#fff;
  padding:.6rem .9rem;border-radius:8px;margin-bottom:1rem;align-items:center;gap:.6rem;flex-wrap:wrap}
.send-bar.active{display:flex}
.send-bar .send-mail{width:auto;min-width:200px;flex:1}
.send-bar button{margin-top:0}

/* Upload-Fortschrittsanzeige (groß, für gute Sichtbarkeit) */
.upload-overlay{display:none;position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.75);
  align-items:center;justify-content:center;padding:1rem}
.upload-overlay.active{display:flex}
.upload-box{background:var(--card);border-radius:14px;padding:2rem 1.5rem;max-width:420px;width:100%;
  text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.upload-title{font-size:1.2rem;font-weight:600;color:var(--ink);margin-bottom:1rem}
.upload-percent{font-size:3.2rem;font-weight:700;color:var(--brand);line-height:1;margin-bottom:1rem}
.upload-track{height:22px;background:#e2e6ea;border-radius:99px;overflow:hidden;margin-bottom:1rem}
.upload-fill{height:100%;width:0;background:var(--brand);border-radius:99px;transition:width .2s ease}
.upload-hint{font-size:1rem;color:var(--muted)}
.upload-file{margin:-.4rem 0 .9rem}
.upload-file-name{font-size:.92rem;color:var(--muted);margin-bottom:.35rem;font-weight:600}
.upload-track-sm{height:10px;margin-bottom:0}
.upload-fill-sm{background:var(--ok,#2e9e5b);opacity:.85}

/* PDF-Mail-Bereich in Berichten */
.pdfmail{display:inline-flex;gap:.3rem;align-items:center;margin-left:.4rem;flex-wrap:wrap}
.pdfmail input{min-width:160px}

/* Export-Bereich: klar gruppierte Buttons */
.export-group{margin-bottom:.9rem;padding:.7rem .9rem;background:var(--soft);border:1px solid var(--line);border-radius:8px}
.export-group:last-child{margin-bottom:0}
.export-label{font-size:.8rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:.5rem}
.export-buttons{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.export-buttons input[type=email]{flex:1;min-width:200px;max-width:300px;margin:0}

/* Urlaubsplan: responsiv Matrix (Desktop) vs. Liste (Handy) */
.plan-list{display:none}
.plan-matrix{display:block}
@media (max-width:760px){
  .plan-matrix{display:none}
  .plan-list{display:block}
}
.plan-person{border:1px solid var(--line);border-radius:8px;padding:.6rem .8rem;margin-bottom:.6rem;background:var(--card)}
.plan-person-name{font-weight:600;margin-bottom:.4rem}
.plan-none{color:var(--muted);font-size:.9rem}
.plan-entry{display:flex;align-items:center;gap:.5rem;padding:.25rem 0;flex-wrap:wrap}
.plan-dot{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:6px;font-weight:700;font-size:.85rem;flex-shrink:0}
.plan-text{font-size:.95rem}
.plan-status{font-size:.85rem}
/* Punkt-Farben wiederverwenden aus den cal-Klassen */
.plan-dot.cal-u{background:#cfe8d6;color:#0f5e2e}
.plan-dot.cal-u-req{background:#fff3cd;color:#9a6700}
.plan-dot.cal-k{background:#dbe7fb;color:#1a5fd0}
.plan-dot.cal-f{background:#f7d4cf;color:#b42318}
.plan-dot.cal-kk{background:#e0e7fb;color:#3641c0}
.plan-dot.cal-su{background:#cdeeea;color:#0f6b62}
.plan-dot.cal-ub{background:#e4e6ea;color:#4a4f57}
.plan-dot.cal-ub-req{background:#f0f1f4;color:#7a7f87}
.plan-dot.cal-pz{background:#ecdcf5;color:#7322a3}
.plan-dot.cal-pz-req{background:#f6ecfb;color:#9a52c0}

/* Überschneidungen hervorheben */
.calmatrix .cal-conflict{box-shadow:inset 0 0 0 2px #d4351c;position:relative}
.calmatrix th.cal-conflict{box-shadow:inset 0 -3px 0 0 #d4351c}
.plan-conflicts{background:var(--dangerbg);border:1px solid var(--danger);border-radius:8px;padding:.7rem .9rem;margin-bottom:1rem}
.plan-conflicts-title{font-weight:600;color:var(--danger);margin-bottom:.4rem}
.plan-conflicts-list{margin:0;padding-left:1.2rem}
.plan-conflicts-list li{margin:.2rem 0;font-size:.92rem}
/* Neutrale "geklärt – nur zur Info"-Variante (kein Alarm) */
.calmatrix .cal-conflict-info{background:rgba(124,147,176,.10)}
.calmatrix th.cal-conflict-info{box-shadow:inset 0 -3px 0 0 #7c93b0}
.plan-conflicts.plan-conflicts-info{background:#eef2f7;border-color:#cdd8e6}
.plan-conflicts.plan-conflicts-info .plan-conflicts-title{color:#3a536b}
.plan-conflicts.plan-conflicts-info .plan-conflicts-list li{color:#3a4756}

/* Gruppiertes Menü */
.navgroup{display:inline-flex;align-items:center;gap:.2rem;position:relative}
.navgroup-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--nav-group-ink)}
/* Auf breiten Schirmen: KEINE Labels, nur dezente Trennstriche zwischen Gruppen */
@media (min-width:761px){
  .navgroup-label{display:none}
  .navgroup + .navgroup::before{content:"";width:1px;height:18px;background:var(--nav-line);margin:0 .55rem}
}
/* Auf dem Handy: Labels als helle Überschrift auf dunklem Menü */
@media (max-width:760px){
  .navgroup{display:block;width:100%}
  .navgroup-label{display:block;color:var(--nav-group-ink);margin:.8rem 0 .2rem;
    padding-bottom:.25rem;border-bottom:1px solid var(--nav-line)}
  .navgroup:first-child .navgroup-label{margin-top:.2rem}
  .navgroup + .navgroup::before{display:none}
}
/* Kachel-Gruppenüberschriften auf der Startseite */
.tiles-head{font-size:.95rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink);margin:1.6rem 0 .7rem;padding-left:.6rem;border-left:4px solid var(--brand)}
.tiles-head:first-of-type{margin-top:.8rem}

/* Foto-Auswahl für Anzeigen */
.photo-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.6rem}
.photo-pick-item{position:relative;display:block;border:2px solid var(--line);border-radius:8px;
  padding:.3rem;cursor:pointer;text-align:center;background:var(--card)}
.photo-pick-item.on{border-color:var(--brand);box-shadow:0 0 0 2px rgba(31,111,235,.2)}
.photo-pick-item img{width:100%;height:90px;object-fit:cover;border-radius:5px;display:block}
.photo-pick-item input{position:absolute;top:.4rem;left:.4rem;width:20px;height:20px}
.photo-pick-item .muted{font-size:.75rem;display:block;margin-top:.2rem}

/* Hilfe-Seite */
.help-content h1{font-size:1.4rem;margin:1rem 0 .5rem}
.help-content h2{font-size:1.15rem;margin:1.4rem 0 .4rem;padding-left:.6rem;border-left:4px solid var(--brand)}
.help-content h3{font-size:1rem;margin:1rem 0 .3rem}
.help-content p{margin:.4rem 0;line-height:1.55}
.help-content ul,.help-content ol{margin:.4rem 0 .8rem;padding-left:1.5rem}
.help-content li{margin:.3rem 0;line-height:1.5}
.help-content hr{border:0;border-top:1px solid var(--line);margin:1.2rem 0}
.help-content code{background:#eef1f4;padding:.1rem .35rem;border-radius:4px;font-size:.9em}

/* Stempel-Widget */
.stamp-box{border-left:4px solid var(--brand)}
.stamp-label{font-weight:700;font-size:1.05rem;color:var(--ink)}
.stamp-running{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.btn-stampin{background:#0f7a3d;font-size:1.1rem;padding:.7rem 1.6rem}
.btn-stampin:hover{background:#0c6633}
.btn-stampout{background:#b42318;font-size:1.1rem;padding:.7rem 1.6rem}
.btn-stampout:hover{background:#8f1c12}
@media (max-width:760px){
  .stamp-running{flex-direction:column;align-items:stretch}
  .btn-stampin,.btn-stampout{width:100%}
}
.badge-running{display:inline-block;background:#0f7a3d;color:#fff;font-size:.72rem;font-weight:700;padding:.1rem .45rem;border-radius:10px;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.stamp-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.btn-pause{background:#9a6700;font-size:1.05rem;padding:.7rem 1.2rem}
.btn-pause:hover{background:#7d5400}
.btn-pause.btn-light{background:var(--soft);color:var(--soft-ink)}
.btn-pause.btn-light:hover{background:#e2e6ea}
@media (max-width:760px){ .stamp-actions{width:100%} .stamp-actions form{flex:1} .stamp-actions .btn{width:100%} }

/* Meine Woche – Balkendiagramm */
.week-bars{display:flex;gap:.4rem;align-items:flex-end;margin-top:.8rem;height:140px}
.week-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}
.week-bar-track{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
.week-bar-fill{width:70%;max-width:34px;background:var(--brand);border-radius:6px 6px 0 0;min-height:3px;transition:height .3s}
.week-bar-fill.is-today{background:#0f7a3d}
.week-bar-val{font-size:.72rem;font-weight:700;color:var(--ink);margin-top:.2rem;height:1rem}
.week-bar-lbl{font-size:.8rem;color:var(--muted);margin-top:.1rem}
.week-bar-date{font-size:.7rem;color:var(--muted);opacity:.75;margin-top:.05rem}
.week-bar-lbl.is-today{color:var(--ok);font-weight:700}
.flag-warn{color:var(--danger);cursor:help;font-weight:700}
.row-flagged{background:var(--dangerbg);color:var(--ink)}
.btn-approve{background:#0f7a3d}
.btn-approve:hover{background:#0c6633}

/* Auffälligkeiten – Hinweis-Kasten, Pille, Detailzeile */
.notice-flag{background:#fff6f5;color:#3a1512;border-left:4px solid #b42318}
.flag-pill{display:inline-block;background:#b42318;color:#fff;font-size:.72rem;font-weight:700;padding:.05rem .4rem;border-radius:10px;vertical-align:middle}
.flag-detail-row td{background:#fff6f5;color:#3a1512;border-top:0!important;padding:.3rem .8rem .5rem}
.flag-detail{color:var(--danger);font-size:.85rem;font-weight:600}
@media(max-width:760px){
  /* Detailzeile optisch an die darüberliegende Karte anschließen */
  .flag-detail-row{margin-top:-.7rem!important;border-top-left-radius:0!important;border-top-right-radius:0!important;border-top:0!important}
  .flag-detail-row td{justify-content:flex-start}
  .flag-detail-row td::before{content:none}
}

/* ============================================================
   App-Stil (dunkle Kacheln) – Variante Schwarz/Weiß/Grau
   Gezielt für Startseite & Dashboard-Kacheln
   ============================================================ */
.appcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.2rem;margin-bottom:.9rem;color:var(--ink)}
.appcard .muted{color:var(--muted)}

/* Stempel-App */
.stamp-app{text-align:center}
.stamp-app-active{padding-top:1.4rem}
.stamp-status{color:var(--ink);font-size:.8rem;font-weight:600;letter-spacing:.5px;margin-bottom:.8rem;text-transform:uppercase}
.stamp-status .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:.3rem;vertical-align:middle;animation:pulse 1.6s infinite}
.stamp-clock{color:var(--ink);font-size:2.9rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:1px;line-height:1.1}
.stamp-sub{color:var(--muted);font-size:.9rem;margin-top:.5rem;line-height:1.5}
.pause-flag{color:var(--warn);font-weight:700}
.stamp-app-actions{display:flex;gap:.6rem;margin-top:1.1rem}
.stamp-app-actions form{flex:1;margin:0}

/* App-Buttons */
.appbtn{display:block;width:100%;box-sizing:border-box;border:none;border-radius:12px;
  padding:.9rem 1rem;font-size:1rem;font-weight:600;cursor:pointer;font-family:inherit}
.appbtn-primary{background:var(--brand);color:#fff}
.appbtn-primary:active{background:var(--brand-d)}
.appbtn-ghost{background:var(--soft);color:var(--soft-ink);border:1px solid var(--line)}
.appbtn-ghost:active{background:var(--line)}
.appbtn-big{padding:1.1rem;font-size:1.1rem;margin-top:.4rem}

/* Einstempel-Auswahl */
.stamp-selects{display:flex;flex-direction:column;gap:.7rem;text-align:left;margin-bottom:1rem}
.stamp-selects label{color:var(--muted);font-size:.82rem;font-weight:500;display:flex;flex-direction:column;gap:.3rem}
.stamp-selects select{background:var(--field-bg);color:var(--field-ink);border:1px solid var(--line);border-radius:10px;padding:.8rem;font-size:1rem}
.stamp-hint{color:var(--muted);font-size:.8rem;margin-top:.7rem}

/* App-Metric-Kacheln (Statistik) */
.app-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-bottom:.9rem}
.app-metric{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.9rem 1rem;min-width:0}
.app-metric .label{color:var(--muted);font-size:.8rem}
.app-metric .value{color:var(--ink);font-size:1.5rem;font-weight:600;margin-top:.2rem}
.app-metric .value small{font-size:.8rem;color:var(--muted);font-weight:400}

/* App-Wochenbalken (dunkel) */
.appcard .week-bars{height:120px}
.appcard .week-bar-fill{background:var(--brand)}
.appcard .week-bar-fill.is-today{background:var(--ok)}
.appcard .week-bar-val{color:var(--ink)}
.appcard .week-bar-lbl{color:var(--muted)}
.appcard .week-bar-lbl.is-today{color:var(--ink);font-weight:700}
.appcard h2,.appcard .tiles-head{color:var(--ink)}



@media(max-width:760px){
  .stamp-clock{font-size:2.6rem}
  .app-metrics{grid-template-columns:1fr 1fr}
}

/* ============================================================
   app-look: ganzes Dashboard im App-Stil (dunkle Karten)
   Tabellen bleiben hell & lesbar
   ============================================================ */
.app-look .card{background:var(--card);border:1px solid var(--line);border-radius:16px;color:var(--ink)}
.app-look .card h1,.app-look .card h2,.app-look .card h3{color:var(--ink)}
.app-look .card .muted{color:var(--muted)}
.app-look .card > p,.app-look .card label{color:var(--ink)}
.app-look .card a:not(.btn):not(.tile){color:var(--brand)}
/* Tiles innerhalb app-look dunkel */
.app-look .tile{background:var(--tile-bg);border:1px solid var(--line);color:var(--tile-ink)}
.app-look .tile .muted{color:var(--muted)}
.app-look .tile:hover{border-color:var(--brand)}
/* Tabellen in dunklen Karten: helle Insel für Lesbarkeit */
.app-look .card table{background:var(--field-bg);border-radius:10px;overflow:hidden}
.app-look .card table th,
.app-look .card table td{color:var(--field-ink) !important}
.app-look .card table a:not(.btn){color:var(--brand) !important}
.app-look .card thead th{background:var(--soft);color:var(--field-ink) !important}
.app-look .card table td .muted,
.app-look .card table td span{color:var(--muted) !important}
/* Auffälligkeits-Zeilen in Tabellen weiter sichtbar */
.app-look .card .row-flagged{background:#fff6f5;color:#3a1512}
/* Konflikt-/Plan-Listen lesbar halten */
.app-look .card .plan-conflicts{background:#fff6f5;color:#7a1d12}
/* Buttons in dunklen Karten */
.app-look .card .btn-light{background:var(--soft);color:var(--soft-ink);border-color:var(--line)}
.app-look .card .btn-light:hover{background:var(--line)}

/* Helle Insel-Elemente (Urlaubsplan-Liste/Matrix) lesbar halten */
.app-look .card .plan-person{background:var(--field-bg);border-color:var(--line)}
.app-look .card .plan-person-name{color:var(--field-ink)}
.app-look .card .plan-text{color:var(--field-ink)}
.app-look .card .plan-none{color:var(--muted)}
.app-look .card .plan-status{color:var(--muted) !important}
.app-look .card .calmatrix{background:var(--field-bg);border-radius:10px}
.app-look .card .calmatrix th,
.app-look .card .calmatrix td{color:var(--field-ink) !important;border-color:var(--line)}
/* Wochenend-Spalten dezent an das jeweilige Theme anpassen (nicht knallig hell) */
.app-look .card .calmatrix .cal-we{background:rgba(127,127,127,.10) !important}
html[data-theme="dark"] .calmatrix .cal-we{background:rgba(255,255,255,.05)}
.app-look .card .cal-name{color:var(--field-ink) !important}
/* Status-Zellen haben helle Pastell-Hintergründe -> dunkler Text, auch im Dark-Mode */
.app-look .card .calmatrix td.cal-u{background:#cfe8d6 !important;color:#0f5e2e !important}
.app-look .card .calmatrix td.cal-u-req{background:#fff3cd !important;color:#8a5a00 !important}
.app-look .card .calmatrix td.cal-k{background:#dbe7fb !important;color:#1a5fd0 !important}
.app-look .card .calmatrix td.cal-f{background:#f7d4cf !important;color:#b42318 !important}
.app-look .card .calmatrix td.cal-kk{background:#e0e7fb !important;color:#3641c0 !important}
.app-look .card .calmatrix td.cal-su{background:#cdeeea !important;color:#0f6b62 !important}
.app-look .card .calmatrix td.cal-ub{background:#e4e6ea !important;color:#3a3f47 !important}
.app-look .card .calmatrix td.cal-ub-req{background:#f0f1f4 !important;color:#5a5f67 !important}
.app-look .card .plan-conflicts{background:#fdecea;color:#7a1d12}
.app-look .card .plan-conflicts *{color:#7a1d12 !important}
/* Neutrale Info-Box NICHT rot einfärben (überschreibt die rote Regel) */
.app-look .card .plan-conflicts.plan-conflicts-info{background:#eef2f7;color:#33414f}
.app-look .card .plan-conflicts.plan-conflicts-info *{color:#33414f !important}

/* Karten-Überschriften: oben links, abgesetzter Titelbereich mit Umrandung */


/* ============================================================
   EINHEITLICHER KARTEN-TITEL (app-card-title)
   Eine zentrale Klasse für ALLE App-Karten-Überschriften.
   Abgesetzter Block, oben links, dezente Umrandung.
   ============================================================ */
.app-card-title{
  text-align:left;
  margin:0 0 1rem;
  padding:.55rem .85rem;
  background:var(--card-title-bg);
  border:1px solid var(--card-title-line);
  border-radius:10px;
  font-size:1.05rem;
  font-weight:600;
  color:var(--card-title-ink);
  display:flex;
  align-items:center;
  gap:.4rem;
  flex-wrap:wrap;
}
.app-card-title .muted{color:var(--muted);font-weight:400}

/* Pausen-Timer im Stempel-Widget */
.stamp-pause-timer{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.6rem;
  background:#2a2620;border:1px solid #3a3328;border-radius:10px;padding:.5rem .8rem}
.stamp-pause-timer .pause-flag{color:#e0b341;font-weight:600;font-size:.9rem}
.stamp-pause-timer .pause-clock{color:#f2f3f5;font-variant-numeric:tabular-nums}
.stamp-pause-timer .pause-clock{color:#e0b341;font-size:1.4rem;font-weight:600;font-variant-numeric:tabular-nums}

/* Geo-Buttons in Stammdaten: Symbol oben, Beschriftung darunter */
.geo-action{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;min-width:74px;padding:.35rem .5rem;line-height:1.1;
  background:#2f2f2f;color:#fff;border:1px solid #444;border-radius:8px;cursor:pointer;
  font-size:.72rem;font-weight:500;
}
.geo-action:hover{background:#3a3a3a}
.geo-action[disabled]{opacity:.4;cursor:not-allowed}
.geo-action .geo-action-lbl{white-space:nowrap}
.geo-action.is-busy{opacity:.6;pointer-events:none}

/* GPS-Adresse zum Prüfen hervorheben */
.geo-check{border:2px solid #e0b341 !important;background:#fffaf0 !important;color:#3a2e00 !important;box-shadow:0 0 0 3px rgba(224,179,65,.18)}
.geo-check-note{display:inline-block;background:#fff3cd;color:#7a5b00;border:1px solid #e0b341;
  border-radius:6px;padding:.25rem .5rem;font-weight:500;font-size:.8rem}

/* Mitteilungs-Banner (ungelesene Nachrichten) */
.msg-banner{background:var(--card-title-bg);border:1px solid var(--brand);border-left:4px solid var(--brand);
  border-radius:10px;padding:.7rem .9rem;margin-bottom:1rem}
.msg-banner-head{font-weight:700;margin-bottom:.4rem;color:var(--ink)}
.msg-banner-item{padding:.3rem 0;border-top:1px solid var(--line);color:var(--ink)}
.msg-banner-item:first-of-type{border-top:0}

/* ===== Chat ===== */
.chat-wrap{display:flex;gap:1rem;align-items:flex-start}
.chat-threads{flex:0 0 200px;display:flex;flex-direction:column;gap:.3rem;max-height:70vh;overflow-y:auto}
.chat-thread{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.55rem .7rem;border-radius:9px;background:var(--card);border:1px solid var(--line);
  color:var(--ink)!important;text-decoration:none;font-size:.9rem;font-weight:500}
.chat-thread-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-thread-badge{flex:0 0 auto;background:#b42318;color:#fff;border-radius:99px;font-size:.72rem;
  padding:.05rem .45rem;font-weight:700;min-width:1.3em;text-align:center;line-height:1.35}
.chat-thread.active .chat-thread-badge{background:#fff;color:var(--brand)}
.chat-pick-hint{margin:auto;text-align:center;padding:2rem;line-height:1.6}
/* Foto-Sammel-Widget (mehrere Kamerafotos) */
.mp-bar{display:flex;gap:.5rem;flex-wrap:wrap;margin:.3rem 0}
.sel-tools{display:flex;gap:.5rem;flex-wrap:wrap;margin:.2rem 0 .6rem}
/* Auswahl-Blatt: knipsen oder Galerie */
.mp-sheet{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center;padding:12px}
.mp-sheet-card{background:var(--card);border:1px solid var(--line);border-radius:16px;width:100%;max-width:460px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.mp-sheet-opt{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;width:100%;background:none;border:none;border-bottom:1px solid var(--line);padding:.95rem 1.1rem;text-align:left;cursor:pointer;color:var(--ink);font-size:1rem;font-weight:600;font-family:inherit}
.mp-sheet-opt small{font-weight:400;font-size:.8rem;color:var(--muted)}
.mp-sheet-opt:active{background:var(--tile-bg)}
.mp-sheet-cancel{border-bottom:none;justify-content:center;align-items:center;color:var(--muted);font-weight:700}
.mp-grid{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0}
.mp-cell{position:relative;width:78px;height:78px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--tile-bg)}
.mp-cell img{width:100%;height:100%;object-fit:cover;display:block}
.mp-file{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:.68rem;text-align:center;padding:.2rem;color:var(--muted);word-break:break-word}
.mp-del{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;border:none;background:rgba(0,0,0,.6);color:#fff;font-size:15px;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
/* In-App-Serienkamera */
body.mp-cam-open{overflow:hidden}
.mp-cam-overlay{position:fixed;inset:0;z-index:9999;background:#000;display:flex;flex-direction:column}
.mp-cam-stage{position:relative;flex:1;overflow:hidden;background:#000}
.mp-cam-video{width:100%;height:100%;object-fit:contain;display:block}
.mp-cam-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .12s ease}
.mp-cam-flash.on{opacity:.7;transition:none}
.mp-cam-count{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.55);color:#fff;padding:.25rem .8rem;border-radius:99px;font-size:.85rem;font-weight:600}
.mp-cam-wm{position:absolute;top:12px;right:12px;z-index:2;background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:99px;padding:.35rem .7rem;font-size:.8rem;font-weight:600;cursor:pointer}
.mp-cam-wm.off{border-style:dashed;opacity:.85}
.mp-cam-wm:disabled{opacity:.4}
.mp-cam-controls{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.4rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom));background:#000}
.mp-cam-shoot{width:72px;height:72px;border-radius:50%;background:#fff;border:5px solid #cfd6dd;cursor:pointer;flex:0 0 auto;box-shadow:0 0 0 3px rgba(255,255,255,.15)}
.mp-cam-shoot:active{transform:scale(.94)}
.mp-cam-done{background:#2c333b;color:#fff;border:none;border-radius:8px;padding:.6rem 1rem;font-size:.9rem;font-weight:600;cursor:pointer;flex:0 0 auto}
.mp-cam-switch{background:rgba(255,255,255,.12);color:#fff;border:none;border-radius:50%;width:48px;height:48px;font-size:20px;cursor:pointer;flex:0 0 auto}
.mp-cam-switch:disabled{opacity:.4}
.mp-cam-rec{width:72px;height:72px;border-radius:50%;background:#fff;border:5px solid #cfd6dd;cursor:pointer;position:relative;flex:0 0 auto}
.mp-cam-rec::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:#e5484d;transition:all .15s ease}
.mp-cam-rec.rec-on::after{width:22px;height:22px;border-radius:5px}
.mp-cell video{width:100%;height:100%;object-fit:cover;display:block}
.mp-badge{position:absolute;left:0;right:0;bottom:0;top:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem;text-shadow:0 1px 4px rgba(0,0,0,.7);pointer-events:none}
.chat-thread:hover{border-color:var(--brand);background:var(--bg)}
.chat-thread.active{background:var(--brand);color:#fff!important;border-color:var(--brand);font-weight:600}
.chat-main{flex:1;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;min-width:0;height:70vh}
.chat-head{padding:.7rem 1rem;font-weight:600;border-bottom:1px solid var(--line);background:var(--soft);color:var(--ink)}
.chat-scroll{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.5rem;background:var(--bg)}
.chat-msg{max-width:78%;padding:.5rem .7rem;border-radius:12px;background:var(--card);border:1px solid var(--line);
  align-self:flex-start;word-wrap:break-word}
.chat-msg.mine{align-self:flex-end;background:var(--brand);color:#fff;border-color:var(--brand)}
.chat-sender{font-size:.72rem;font-weight:700;color:var(--brand);margin-bottom:.2rem}
.chat-msg.mine .chat-sender{color:#fff}
.chat-text{font-size:.92rem;line-height:1.35;white-space:pre-wrap}
.chat-time{font-size:.66rem;opacity:.7;margin-top:.25rem;text-align:right}
.chat-img{max-width:200px;max-height:200px;border-radius:8px;display:block;margin-bottom:.3rem}
.chat-input{display:flex;align-items:flex-end;gap:.35rem;padding:.5rem;border-top:1px solid var(--line);background:var(--card)}
.chat-input textarea{flex:1 1 auto;min-width:0;resize:none;border:1px solid var(--line);border-radius:18px;padding:.55rem .9rem;
  font-size:.95rem;background:var(--field-bg);color:var(--field-ink);min-height:0;line-height:1.3}
.chat-emoji-btn,.chat-photo-btn,.chat-send-btn{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.15rem;background:var(--soft);color:var(--soft-ink)}
.chat-send-btn{background:var(--brand);color:#fff;font-size:1.05rem}
.chat-photo-btn{margin:0}
.chat-emoji-pick{display:flex;flex-wrap:wrap;gap:.3rem;padding:.5rem .6rem;background:var(--card);border-top:1px solid var(--line)}
.emoji-opt{font-size:1.4rem;cursor:pointer;padding:.1rem .2rem;border-radius:6px}
.emoji-opt:hover{background:var(--soft)}
@media (max-width:720px){
  .chat-wrap{flex-direction:column;gap:.5rem}
  .chat-threads{flex:none;width:100%;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;max-height:none}
  .chat-thread{white-space:nowrap;flex:0 0 auto}
  /* chat-main füllt den Rest des Bildschirms, lässt aber die Eingabe sichtbar.
     Abzug: Topbar (58) + content-padding + Überschrift + Thread-Leiste + Puffer. */
  .chat-main{width:100%;flex:0 0 auto;height:calc(100dvh - 250px);min-height:240px;max-height:calc(100dvh - 250px)}
  .chat-msg{max-width:85%}
}

/* Empfänger-Auswahl (Mitteilungen): große, klare Optionen */
.recipient-pick{display:flex;flex-direction:column;gap:.5rem;margin-top:.3rem}
.recipient-opt{display:flex;align-items:center;gap:.7rem;padding:.8rem 1rem;border:2px solid var(--line);
  border-radius:10px;cursor:pointer;background:var(--field-bg);margin:0;transition:border-color .15s,background .15s}
.recipient-opt:hover{border-color:var(--brand)}
.recipient-opt input{width:auto;margin:0;flex:0 0 auto;transform:scale(1.3)}
.recipient-opt-text{font-size:1rem;font-weight:500;color:var(--field-ink)}
.recipient-opt:has(input:checked){border-color:var(--brand);background:rgba(31,111,235,.08)}
html[data-theme="dark"] .recipient-opt:has(input:checked){background:rgba(77,141,255,.14)}

/* Benutzer-Info unten im Menü (Name + Rolle) */
.nav-user{display:none;font-size:.8rem;color:var(--nav-group-ink);padding:.8rem .4rem .2rem;line-height:1.4}
.nav-user strong{color:var(--nav-hover-ink);font-weight:600}
.nav-user-role{display:inline-block;margin-top:.1rem;padding:.05rem .5rem;background:var(--nav-hover-bg);
  border-radius:99px;font-size:.72rem;color:var(--nav-ink)}
@media(max-width:760px){ .nav-user{display:block} }

/* Hinweis bei laufender Stempelung in den Kacheln */
.running-hint{color:var(--brand) !important;font-weight:600}

/* ArbZG-Pausenhinweis im Stempel-Widget */
.stamp-arbzg{margin-top:.8rem;padding:.6rem .8rem;border-radius:10px;font-size:.82rem;line-height:1.45;
  background:var(--soft);color:var(--soft-ink);border:1px solid var(--line)}
.stamp-arbzg strong{font-weight:700}

/* Monatsabschluss-Assistent */
.mc-allok{color:var(--ok);font-weight:600;margin:.4rem 0 0}
.mc-haswarn{color:var(--danger);font-weight:600;margin:.4rem 0 0}
.mc-check{display:flex;flex-direction:column;gap:.3rem}
.mc-head{display:flex;align-items:center;gap:.6rem}
.mc-badge{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;
  border-radius:99px;font-size:.85rem;font-weight:700;padding:0 .4rem}
.mc-badge-ok{background:rgba(76,207,134,.18);color:var(--ok)}
.mc-badge-warn{background:rgba(255,107,94,.18);color:var(--danger)}
.mc-badge-info{background:rgba(255,255,255,.12);color:var(--ink)}
.mc-hint{font-size:.82rem;margin:.1rem 0 .3rem}
.mc-list{list-style:none;padding:0;margin:.4rem 0 0}
.mc-list li{padding:.4rem .2rem;border-top:1px solid var(--line);display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.mc-date{font-weight:600;min-width:90px}
.mc-name{font-weight:500}
.mc-check details summary{cursor:pointer;color:var(--brand);font-size:.85rem;padding:.2rem 0}
.mc-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}

/* Dezenter Sekundär-Button (Ghost) */
.btn-ghost{background:var(--soft);color:var(--soft-ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--line)}

/* Tagesabschluss – Status je Mitarbeiter */
.dc-list{list-style:none;padding:0;margin:0}
.dc-row{display:flex;align-items:center;gap:.7rem;padding:.6rem .2rem;border-top:1px solid var(--line)}
.dc-row:first-child{border-top:0}
.dc-dot{width:11px;height:11px;border-radius:99px;flex:0 0 auto;background:var(--line)}
.dc-name{font-weight:600;min-width:120px}
.dc-status{color:var(--muted);font-size:.88rem}
.dc-booked .dc-dot{background:var(--ok)}
.dc-open   .dc-dot{background:var(--brand)}
.dc-none   .dc-dot{background:var(--danger)}
.dc-absent .dc-dot{background:#9aa7b4}
.dc-weekend .dc-dot{background:#c7cdd4}
.dc-none .dc-status{color:var(--danger);font-weight:600}
.dc-absent .dc-name,.dc-absent .dc-status{opacity:.7}
.dc-weekend .dc-name,.dc-weekend .dc-status{opacity:.65}
.dc-add{margin-left:auto;flex:0 0 auto;white-space:nowrap}

/* Verlinkte Metrics-Gruppe (Dashboard -> Tagesabschluss) */
a.app-metrics-link{text-decoration:none;color:inherit;cursor:pointer;display:block;
  border-radius:16px;transition:box-shadow .15s,transform .15s;position:relative}
a.app-metrics-link .app-metric{transition:border-color .12s}
/* Beim Überfahren wird die GANZE GRUPPE als ein klickbarer Block umrandet
   (blauer Ring + Anheben) – nicht alle vier Einzelrahmen (wirkte wie Mehrfachauswahl). */
a.app-metrics-link:hover{
  box-shadow:0 0 0 2px var(--brand), 0 6px 18px rgba(31,111,235,.20);
  transform:translateY(-2px)}
a.app-metrics-link:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* Baustellen-Auswertung */
.se-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.se-hours{font-weight:700;font-size:1.15rem;color:var(--brand);white-space:nowrap}
.se-meta{margin:.2rem 0 .6rem;font-size:.85rem}
.se-subhead{font-size:.95rem;margin:.6rem 0 .3rem}
.se-mat{width:100%;border-collapse:collapse}
.se-mat th,.se-mat td{padding:.4rem .3rem;border-top:1px solid var(--line);text-align:left}
.se-mat th{font-size:.78rem;color:var(--muted);font-weight:600}
.se-nomat{font-size:.85rem;margin:.4rem 0}
.se-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.7rem}

/* Material-Tabelle bleibt auch auf dem Handy einzeilig (kompakt) */
@media(max-width:760px){
  .se-mat,.se-mat tbody,.se-mat thead{display:table;width:100%}
  .se-mat thead{display:table-header-group}
  .se-mat tr{display:table-row;border:0;border-radius:0;margin:0;background:transparent;padding:0}
  .se-mat td,.se-mat th{display:table-cell;border-top:1px solid var(--line);padding:.4rem .3rem;justify-content:initial;gap:0}
  .se-mat td::before{content:none}
  .se-mat td{font-size:.85rem}
}

/* Dokumente & Export-Block (Berichte) */
.export-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.export-mail{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line)}
.export-mail-label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.4rem;font-weight:600}
.export-mail-row{display:flex;gap:.5rem;flex-wrap:wrap}
.export-mail-row input{flex:1 1 200px;min-width:0;border:1px solid var(--line);border-radius:8px;
  padding:.55rem .8rem;background:var(--field-bg);color:var(--field-ink);font-size:.95rem}
.export-mail-row .btn{flex:0 0 auto}

/* Zurück-Pfeil in der Topbar */
.topback,.topfwd{background:rgba(255,255,255,.12);border:0;color:#fff;font-size:1.6rem;cursor:pointer;
  width:34px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  padding:0;line-height:1;flex:0 0 auto;margin-top:0;-webkit-tap-highlight-color:transparent;outline:none}
.topback:hover,.topfwd:hover{background:rgba(255,255,255,.22)}
.topback{border-top-right-radius:3px;border-bottom-right-radius:3px}
.topfwd{border-top-left-radius:3px;border-bottom-left-radius:3px;margin-left:-2px}
.topback:hover,.topfwd:hover{background:rgba(255,255,255,.22)}

/* Such-Symbol in Topbar */
.topsearch-btn{background:rgba(255,255,255,.12);border:0;color:#fff;font-size:1.05rem;cursor:pointer;
  width:40px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  padding:0;line-height:1;flex:0 0 auto;margin-top:0;-webkit-tap-highlight-color:transparent;outline:none}
.topsearch-btn:hover{background:rgba(255,255,255,.22)}

/* Such-Overlay */
.search-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);
  align-items:flex-start;justify-content:center;padding:4rem 1rem 1rem}
.search-overlay.open{display:flex}
.search-box{background:var(--card);border:1px solid var(--line);border-radius:14px;width:100%;max-width:520px;
  box-shadow:0 10px 40px rgba(0,0,0,.3);overflow:hidden}
.search-inputrow{display:flex;align-items:center;gap:.5rem;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.search-inputrow input{flex:1;border:0;background:transparent;color:var(--ink);font-size:1.05rem;outline:none}
.search-close{background:none;border:0;color:var(--muted);font-size:1.1rem;cursor:pointer;padding:.2rem .4rem}
.search-results{list-style:none;margin:0;padding:.4rem;max-height:50vh;overflow-y:auto}
.search-item{padding:.7rem .8rem;border-radius:8px;cursor:pointer;font-weight:500;color:var(--ink)}
.search-item.sel,.search-item:hover{background:var(--brand);color:#fff}
.search-empty,.search-hint{padding:.7rem .8rem;color:var(--muted);font-size:.85rem}
.search-hint{border-top:1px solid var(--line);margin:0}

/* Topbar bei vielen Elementen: Titel auf schmalen Schirmen kleiner */
@media(max-width:430px){
  .topbar{gap:.35rem;padding:0 .6rem}
  .brand{font-size:1.05rem}
}
@media(max-width:360px){
  .brand{font-size:.95rem}
  .topback,.topfwd,.burger,.topsearch-btn,.theme-toggle{width:34px;height:36px}
}

/* Tagesabschluss: klickbare Filter-Kacheln */
.dc-filter{cursor:pointer;text-align:left;font:inherit;border:1px solid var(--line);background:var(--card);
  transition:border-color .12s,box-shadow .12s;position:relative}
.dc-filter:hover{border-color:var(--brand);background:var(--card)}
.dc-filter:hover .label{color:var(--muted)}
.dc-filter:hover .value{color:var(--ink)}
.dc-filter.active,
.dc-filter.active:hover{background:var(--brand-d);border-color:var(--brand-d);
  box-shadow:0 2px 8px rgba(0,0,0,.2);color:#fff}
.dc-filter.active *,
.dc-filter.active:hover *{color:#fff !important}
.dc-filter.active .label{opacity:1;font-weight:700}
.dc-filter.active .label::after{opacity:.85}
/* Dunkelmodus: kräftigeres Blau für die aktive Kachel (besserer Kontrast zu weißem Text) */
html[data-theme="dark"] .dc-filter.active,
html[data-theme="dark"] .dc-filter.active:hover{background:#1e5bb8;border-color:#1e5bb8}
.dc-filter .label::after{content:" ▸";opacity:.4;font-size:.8em}
.dc-listhead{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.4rem}
.dc-listhead .app-card-title{margin:0}

/* Strukturierte Formular-Blöcke (Baustellen-Stammdaten) */
.field-block{margin-bottom:1rem}
.field-label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.35rem}
.geo-actions-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.coord-row{display:flex;gap:.6rem;flex-wrap:wrap}
.coord-row input{flex:1;min-width:120px}

/* Hervorgehobener Status-Hinweis (Geocoding/GPS) */
.geo-status{margin-top:.4rem;padding:.7rem .9rem;border-radius:10px;font-size:.9rem;font-weight:500;
  border:1px solid var(--line);line-height:1.4}
.geo-status-info{background:rgba(91,141,239,.12);border-color:rgba(91,141,239,.4);color:var(--ink)}
.geo-status-ok{background:rgba(76,207,134,.14);border-color:rgba(76,207,134,.5);color:var(--ink)}
.geo-status-warn{background:rgba(255,107,94,.14);border-color:rgba(255,107,94,.5);color:var(--ink)}

/* Hilfe-Box */
.geo-help{background:var(--soft)}
.geo-help ul{font-size:.9rem}

/* kleiner Inline-Hinweis in den Baustellen-Zeilen auch hervorheben */
.geo-hint.geo-status{display:inline-block;margin-top:.4rem}

/* Adress-Raster: 4 Felder (Straße/Nr./PLZ/Ort) – am Handy gut bedienbar */
.addr-grid{display:grid;grid-template-columns:1fr 90px;gap:.5rem}
.addr-street{grid-column:1}
.addr-hnr{grid-column:2}
.addr-plz{grid-column:1;max-width:120px}
.addr-city{grid-column:2;grid-column:1/3}
@media(min-width:560px){
  .addr-grid{grid-template-columns:2fr 70px 90px 2fr}
  .addr-street{grid-column:1}.addr-hnr{grid-column:2}
  .addr-plz{grid-column:3;max-width:none}.addr-city{grid-column:4}
}
.site-geo-form .geo-hint.geo-status{display:block;margin-top:.5rem}

/* Baustellen-Name als klare Überschrift jeder Zeile */
.site-name{font-weight:700;font-size:1.05rem;color:var(--ink)}
@media(max-width:720px){
  /* Auf dem Handy: Name als Titel über dem Block, mit Trennlinie */
  td[data-label="Name"]{padding-bottom:.5rem;border-bottom:1px solid var(--line);margin-bottom:.3rem}
  td[data-label="Name"]::before{display:none}
  .site-name{font-size:1.15rem}
}

/* ============================================================
   BAUSTELLEN-KARTEN (sites.php)
   Jede vorhandene Baustelle als eigener, klar abgegrenzter Block.
   ============================================================ */
.site-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}
.site-card{background:var(--field-bg);border:1px solid var(--line);border-radius:12px;
  padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.2rem}
.site-card.is-archived{opacity:.7}

/* Kopf: Name (editierbar) + Status-Badge */
.site-card-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.site-card-namewrap{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}
.site-card-namewrap .site-ico{font-size:1.2rem;line-height:1;flex-shrink:0}
.site-card-name{font-size:1.1rem;font-weight:700;flex:1;min-width:0;
  background:var(--field-bg);color:var(--field-ink);border:1px solid var(--line);
  border-radius:8px;padding:.4rem .55rem}
.site-card-name:focus{outline:2px solid var(--brand);outline-offset:0;border-color:var(--brand)}

.site-status{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:600;
  padding:.25rem .6rem;border-radius:99px;white-space:nowrap}
.site-status.on{background:var(--okbg);color:var(--ok);border:1px solid var(--ok)}
.site-status.arch{background:var(--soft);color:var(--muted);border:1px solid var(--line)}
.site-status .dot{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}

/* Bereiche innerhalb der Karte */
.site-card-sec{padding:.75rem 0 .1rem}
.site-card-sec-lbl{display:flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:600;
  color:var(--muted);margin-bottom:.5rem}
.site-card-sec-lbl .muted{font-weight:400}

/* Fußzeile mit Speichern / Aktiv-Schalter */
.site-card-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  flex-wrap:wrap;padding-top:.8rem;margin-top:.3rem;border-top:1px solid var(--line)}
.site-card-foot form{margin:0}
.site-save{display:inline-flex;align-items:center;gap:.4rem;background:var(--brand);color:#fff;
  border:1px solid var(--brand-d)}
.site-save:hover{background:var(--brand-d)}

@media (max-width:560px){
  .site-cards{grid-template-columns:1fr}
}

/* ---- Baustellen-Karte: Absprung, Verwaltung, Dialoge ---- */
.site-diary-link{display:inline-flex;align-items:center;gap:.3rem;text-decoration:none}
.site-card-admin{display:flex;justify-content:flex-end;padding-top:.6rem;margin-top:.3rem;
  border-top:1px solid var(--line)}

/* Dialog (Archivieren / Löschen) – fügt sich in die Karte ein */
.site-dialog{margin-top:.7rem}
.site-dialog-box{background:var(--field-bg);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:8px;padding:.9rem 1rem;color:var(--ink)}
.site-dialog .muted{color:var(--muted)}
.site-dialog-counts{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0}
.site-count-chip{background:var(--soft);color:var(--soft-ink);border:1px solid var(--line);
  border-radius:99px;padding:.2rem .6rem;font-size:.8rem}
.site-count-chip strong{color:var(--ink)}
.site-dialog-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.3rem}

/* Lösch-Dialog rot umrandet zur Warnung */
.site-dialog#delete-,.site-dialog[id^="delete-"] .site-dialog-box{border-left-color:var(--danger)}
.btn-sm.btn-danger[disabled]{opacity:.45;cursor:not-allowed}

/* ---- Footer: User / Rolle / Version klar gegliedert ---- */
.foot-user{font-weight:600;color:var(--ink)}
.foot .foot-copy{opacity:.75;font-size:.92em}

/* ---- DATEV-/Adress-Block in Mitarbeiter-Stammdaten ---- */
.datev-block{border:1px solid var(--line);border-radius:8px;padding:.4rem .9rem;margin:.8rem 0 1rem;
  background:var(--field-bg)}
.datev-block summary{cursor:pointer;font-weight:600;color:var(--ink);padding:.5rem 0;list-style:none}
.datev-block summary::-webkit-details-marker{display:none}
.datev-block summary::before{content:"▸ ";color:var(--muted)}
.datev-block[open] summary::before{content:"▾ "}
.datev-block .muted{color:var(--muted)}

/* ---- Einheitliche Zeitraum-Navigation (zurück | Label | weiter) ---- */
.period-nav{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.period-nav .period-label{flex:1 1 auto;text-align:center;font-weight:700;font-size:1.05rem;color:var(--ink)}
.period-nav .btn-sm{flex:0 0 auto;white-space:nowrap}

/* ---- Live-Gesamtstand: hervorgehobene Kachel über den Metriken ---- */
.live-balance{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:1rem 1.2rem;margin-bottom:.9rem;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;flex-wrap:wrap}
.live-balance .lb-left{display:flex;flex-direction:column;gap:.15rem}
.live-balance .lb-label{font-size:.85rem;color:var(--muted);font-weight:600}
.live-balance .lb-sub{font-size:.74rem;color:var(--muted)}
.live-balance .lb-value{font-size:1.8rem;font-weight:800;line-height:1}
.live-balance.is-plus{border-color:var(--ok)}
.live-balance.is-minus{border-color:var(--danger)}

/* ---- Anklickbare auffällige Einträge (Monatsabschluss) ---- */
.mc-list li.mc-editable{padding:0;border-top:1px solid var(--line)}
.mc-row-link{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;width:100%;
  padding:.55rem .4rem;text-decoration:none;color:var(--ink);border-radius:6px}
.mc-row-link:hover{background:var(--soft)}
.mc-edit-hint{margin-left:auto;font-size:.8rem;color:var(--brand);font-weight:600;white-space:nowrap}

/* ---- Mitarbeiter-Detailseite (overtime_detail) ---- */
.detail-twocol{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:1rem}
@media(max-width:560px){ .detail-twocol{grid-template-columns:1fr} }
.start-balance-card{background:var(--soft);border-color:var(--warn)}
.auto-carry-card{background:var(--soft);border:1px solid var(--line)}

/* ---- Mitarbeiter-Zeiteinträge mit Tagesgruppierung ---- */
.entry-table .entry-day-row td{background:var(--soft);font-size:.9rem;padding:.5rem .6rem;
  border-top:2px solid var(--line)}
.entry-table tbody tr td{vertical-align:middle}

/* Tages-Trennband (Zeiterfassung & Mitarbeiter-Bericht) */
.entry-day-row td{padding:0 !important;border:0 !important;background:transparent !important}
.day-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem .7rem;
  margin:.9rem 0 .2rem;padding:.5rem .8rem;border-radius:10px;
  background:var(--soft);border-left:4px solid var(--brand)}
.day-head .day-weekday{font-weight:700;font-size:1rem;color:var(--ink)}
.day-head .day-date{color:var(--muted);font-size:.92rem}
.day-head .day-sum{margin-left:auto;font-size:.85rem;color:var(--brand);font-weight:600;
  background:var(--card);padding:.15rem .55rem;border-radius:99px;border:1px solid var(--line)}
.day-head .day-tag{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);background:var(--card);padding:.1rem .45rem;border-radius:99px;border:1px solid var(--line)}
.entry-day-row.is-weekend .day-head{border-left-color:#c7cdd4;background:var(--card)}
@media (max-width:640px){
  .day-head{margin:1rem 0 .35rem}
  .day-head .day-sum{margin-left:0;flex-basis:100%}
}

/* Mobile Karten-Darstellung für Zeiteinträge (statt Label/Wert-Salat) */
@media(max-width:760px){
  /* Tagesband ist kein Karten-Kasten, sondern Banner */
  .entry-table tr.entry-day-row{border:0;background:transparent;margin:0;padding:0}
  .entry-table tbody tr{padding:.6rem .7rem}
  /* Datum ausblenden – steht bereits im Tagesband darüber */
  .entry-table td.c-date{display:none}
  /* alle Label-Präfixe in dieser Tabelle ausblenden, wir bauen eine echte Karte */
  .entry-table td::before{display:none}
  .entry-table td{display:block;padding:.12rem 0}
  /* Baustelle = Kartentitel */
  .entry-table td.c-site{font-weight:700;font-size:1.05rem;margin-bottom:.1rem}
  /* Tätigkeit dezent darunter */
  .entry-table td.c-act{color:var(--muted);font-size:.9rem;margin-bottom:.35rem}
  /* Mitarbeiter (nur Manager) als kleine Zeile */
  .entry-table td.c-emp{color:var(--muted);font-size:.85rem;margin-bottom:.25rem}
  .entry-table td.c-emp::before{content:"👤 ";display:inline}
  /* Zeit-Infos in eine Reihe mit kleinen „Chips“ */
  .entry-table td.c-time,
  .entry-table td.c-break,
  .entry-table td.c-dur{display:inline-flex;align-items:center;gap:.3rem;
    font-size:.9rem;margin:.1rem .4rem .1rem 0;
    background:var(--soft);border-radius:99px;padding:.18rem .6rem}
  .entry-table td.c-time::before{content:"🕒";display:inline}
  .entry-table td.c-break::before{content:"☕";display:inline}
  .entry-table td.c-dur{font-weight:700;color:var(--brand);background:var(--card);border:1px solid var(--line)}
  .entry-table td.c-actions{margin-top:.5rem}
}

/* ---- Schnellfilter-Leiste (Zeiterfassung) ---- */
.quickfilter{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.9rem}
.quickfilter .btn-sm{margin-top:0}

/* ---- Kundenzugang & DSGVO-Consent ---- */
.consent-item{display:flex;flex-direction:column;gap:.3rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.consent-item:last-of-type{border-bottom:0}
.consent-check{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer}
.consent-check input{width:auto;margin-top:.2rem}
.consent-link{font-size:.9rem;color:var(--brand);text-decoration:none}
.consent-doc h2{font-size:1.05rem;margin:1rem 0 .3rem}
.consent-placeholder{background:var(--okbg);border:1px solid var(--warn);color:var(--warn);
  padding:.6rem .8rem;border-radius:8px;font-size:.9rem}
.badge-extern{background:var(--okbg);color:var(--ok);border:1px solid var(--ok)}
.badge-intern{background:var(--soft);color:var(--muted);border:1px solid var(--line)}
.site-checks{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0 .9rem}
.site-check{display:inline-flex;align-items:center;gap:.4rem;font-weight:500;
  padding:.45rem .8rem;border:1.5px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--ink);cursor:pointer;user-select:none;
  transition:border-color .12s,background .12s,color .12s}
.site-check:hover{border-color:var(--brand)}
.site-check input{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}
/* Ausgewählte Chips hervorheben (per :has, moderne Browser) */
.site-check:has(input:checked){background:var(--brand);border-color:var(--brand);color:#fff}
.site-check:has(input:checked)::before{content:"✓ ";font-weight:700}
/* Fallback für Browser ohne :has – über zusätzliche Klasse via JS */
.site-check.is-checked{background:var(--brand);border-color:var(--brand);color:#fff}
.site-check.is-checked::before{content:"✓ ";font-weight:700}
.customer-photos a{position:relative;display:block}
.diary-card .diary-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.4rem}
.diary-photo-badge{margin-left:auto;font-size:.85rem;color:var(--muted)}

/* ---- Live-Vorschau Zeitbuchung ---- */
.time-preview{border-radius:10px;padding:.7rem .9rem;margin:.2rem 0 .8rem;font-size:.92rem;border:1px solid var(--line)}
.time-preview .tp-main{font-size:1rem}
.time-preview .tp-sub{color:var(--muted);font-weight:400;font-size:.85rem}
.time-preview .tp-note{margin-top:.45rem;font-size:.88rem;line-height:1.4}
.time-preview.tp-ok{background:var(--okbg);border-color:var(--ok)}
.time-preview.tp-ok .tp-main strong{color:var(--ok)}
.time-preview.tp-warn{background:#fff8ec;border-color:#e0a93b;color:#5a4300}
.time-preview.tp-warn .tp-main strong{color:#7a5200}
.time-preview.tp-warn .tp-sub{color:#7a6020}
.time-preview.tp-warn .tp-note{color:#8a5d00}
.time-preview.tp-error{background:#fff6f5;border-color:#d4796f;color:#9a1e14}

/* ============================================================
   App-Dialog (ersetzt native confirm/prompt/alert)
   ============================================================ */
.appdialog-overlay{position:fixed;inset:0;z-index:3000;display:none;
  align-items:center;justify-content:center;padding:1rem;
  background:rgba(0,0,0,.5);backdrop-filter:blur(2px)}
.appdialog-overlay.open{display:flex}
.appdialog{background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:16px;max-width:440px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.28);
  padding:1.4rem 1.4rem 1.1rem;animation:appdialog-in .15s ease}
@keyframes appdialog-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.appdialog-icon{font-size:1.8rem;line-height:1;margin-bottom:.5rem}
.appdialog-title{font-size:1.15rem;font-weight:700;color:var(--ink);margin-bottom:.4rem}
.appdialog-msg{font-size:.96rem;color:var(--muted);line-height:1.5;margin-bottom:1.1rem;white-space:pre-line}
.appdialog-input{width:100%;margin-bottom:1.1rem;font-size:1.1rem;text-align:center}
.appdialog-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.appdialog-actions .btn{flex:1;margin-top:0;min-width:130px;text-align:center}
.appdialog-actions .btn-secondary{background:var(--soft);color:var(--soft-ink)}
.appdialog-actions .btn-secondary:hover{background:var(--line)}
/* Akzent-Varianten je nach Dialog-Typ */
.appdialog.is-danger .appdialog-icon{color:var(--danger)}
.appdialog.is-warn .appdialog-icon{color:var(--warn)}
.appdialog.is-info .appdialog-icon{color:var(--brand)}

/* ---- Eingabefeld mit Einheit (z. B. Pause "min") ---- */
.input-unit{position:relative;display:block}
.input-unit input{width:100%;padding-right:3.2rem}
.input-unit .unit-suffix{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:.9rem;pointer-events:none;font-weight:500}
/* min-Angaben im Stempel-Bereich als dezente Pille */
.min-pill{display:inline-block;background:var(--soft);color:var(--soft-ink);
  border-radius:6px;padding:.05rem .4rem;font-weight:600;font-size:.92em;white-space:nowrap}

/* ---- Tab-Navigation ---- */
.tabnav{display:flex;gap:.3rem;border-bottom:2px solid var(--line);margin:0 0 1.1rem;flex-wrap:wrap}
.tabnav a{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1rem;
  text-decoration:none;color:var(--muted);font-weight:600;border-radius:10px 10px 0 0;
  border:2px solid transparent;border-bottom:none;margin-bottom:-2px;transition:color .12s,background .12s}
.tabnav a:hover{color:var(--ink);background:var(--soft)}
.tabnav a.active{color:var(--brand);border-color:var(--line);border-bottom:2px solid var(--card);background:var(--card)}
.tabnav a .tab-count{background:var(--brand);color:#fff;border-radius:999px;
  font-size:.75rem;padding:.05rem .45rem;font-weight:700}

/* ---- Chat: Gelesen-/Gesendet-Status ---- */
.chat-read{display:inline-block;margin-left:.4rem;font-weight:600;white-space:nowrap}
.chat-msg.mine .chat-read.read{color:#cfe3ff}   /* gut sichtbar auf blauem Grund */
.chat-msg.mine .chat-read.sent{color:rgba(255,255,255,.6)}

/* ============================================================
   Umfragen / Abstimmungen
   ============================================================ */
.poll-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0}
.poll-chip{display:inline-block;background:var(--soft);color:var(--soft-ink);
  border-radius:999px;padding:.2rem .7rem;font-size:.8rem;font-weight:600}
.poll-chip.is-open{background:var(--okbg);color:var(--ok)}
.poll-chip.is-closed{background:var(--soft);color:var(--muted)}
.poll-chip.is-done{background:#e7f0ff;color:var(--brand)}
html[data-theme="dark"] .poll-chip.is-done{background:#1a2740;color:var(--brand)}

/* Abstimm-Optionen (anklickbare Zeilen mit Radio/Checkbox) */
.poll-options{display:flex;flex-direction:column;gap:.5rem}
.poll-option{display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;
  border:2px solid var(--line);border-radius:10px;cursor:pointer;
  background:var(--card);color:var(--ink);transition:border-color .12s,background .12s}
.poll-option:hover{border-color:var(--brand)}
.poll-option input{width:auto;margin:0;flex:none;transform:scale(1.2)}
.poll-option:has(input:checked){border-color:var(--brand);background:rgba(31,111,235,.07)}
html[data-theme="dark"] .poll-option:has(input:checked){background:rgba(77,141,255,.12)}
.poll-option-label{flex:1}

/* Ergebnis-Balken */
.poll-results{display:flex;flex-direction:column;gap:.7rem}
.poll-result-row.mine .poll-result-label{font-weight:700;color:var(--brand)}
.poll-result-head{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.25rem;font-size:.9rem}
.poll-result-num{color:var(--muted);white-space:nowrap;font-weight:600}
.poll-yourpick{font-size:.72rem;background:var(--brand);color:#fff;border-radius:999px;padding:.05rem .45rem;font-weight:600;margin-left:.3rem}
.poll-bar{background:var(--soft);border-radius:999px;height:12px;overflow:hidden}
.poll-bar-fill{background:var(--brand);height:100%;border-radius:999px;transition:width .3s ease;min-width:2px}
.poll-result-row.mine .poll-bar-fill{background:var(--brand)}

/* Optionen-Editor beim Erstellen */
.poll-option-edit{display:flex;flex-direction:column;gap:.4rem}

/* Enddatum: Datum + Uhrzeit nebeneinander mit kleiner Beschriftung */
.poll-datetime{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.3rem}
.input-unit-wide{display:flex;flex-direction:column;gap:.2rem;flex:1;min-width:150px}
.input-unit-wide input,.input-unit-wide select{width:100%}
.input-unit-wide .unit-label{font-size:.74rem;color:var(--muted);font-weight:600;padding-left:.2rem;order:-1}

/* "Stimme ändern"-Aufklapper im Abstimmen-Tab */
.poll-change{margin-top:.8rem;border-top:1px solid var(--line);padding-top:.6rem}
.poll-change summary{cursor:pointer;font-weight:600;color:var(--brand);font-size:.92rem;list-style:none}
.poll-change summary::-webkit-details-marker{display:none}
.poll-change summary:hover{text-decoration:underline}

/* ============================================================
   Zeiterfassung – Kalenderansicht + Tages-Panel
   ============================================================ */
.viewswitch{display:flex;gap:.4rem;margin:.2rem 0 .8rem}
.tcal-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.3rem;flex-wrap:wrap}
.tcal-title{font-size:1.05rem}

/* Kalender-Gitter: 7 Spalten */
.tcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem}
.tcal-dow{text-align:center;font-size:.74rem;font-weight:700;color:var(--muted);padding:.2rem 0}
.tcal-cell{position:relative;min-height:54px;border:1px solid var(--line);border-radius:8px;
  padding:.25rem;display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;background:var(--card)}
.tcal-empty{border:none;background:transparent}
.tcal-num{font-size:.8rem;font-weight:600;color:var(--ink)}
.tcal-we{background:var(--soft)}
.tcal-today{box-shadow:inset 0 0 0 2px var(--brand)}
.tcal-h{font-size:.72rem;font-weight:700;line-height:1.1}
.tcal-running{color:var(--warn)}
.tcal-cnt{position:absolute;top:.2rem;right:.3rem;font-size:.66rem;font-weight:700;
  background:var(--soft);color:var(--soft-ink);border-radius:999px;padding:0 .35rem;min-width:1.1rem;text-align:center}
.tcal-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
/* Status-Farben */
.tcal-booked{background:var(--okbg);border-color:var(--ok)}
.tcal-booked .tcal-dot{background:#1e9e5a}
.tcal-booked .tcal-h{color:var(--ok)}
.tcal-open{background:#fff6e6;border-color:#f3dca6}
.tcal-open .tcal-dot{background:var(--warn)}
.tcal-flag{background:var(--dangerbg);border-color:var(--danger)}
.tcal-flag .tcal-dot{background:#d4351c}
.tcal-flag .tcal-h{color:var(--danger)}
.tcal-has{cursor:pointer;transition:transform .08s,box-shadow .12s}
.tcal-has:hover{box-shadow:0 2px 8px rgba(0,0,0,.12)}
.tcal-has:active{transform:scale(.97)}
/* Dark Mode für Status */
html[data-theme="dark"] .tcal-booked{background:#13301f;border-color:#1e5236}
html[data-theme="dark"] .tcal-booked .tcal-h{color:#5fd397}
html[data-theme="dark"] .tcal-open{background:#3a2e0c;border-color:#6b5410}
html[data-theme="dark"] .tcal-flag{background:#3a1512;border-color:#7a2b22}
html[data-theme="dark"] .tcal-flag .tcal-h{color:#ff9c8f}

/* Legende */
.tcal-legend{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.7rem;font-size:.78rem;color:var(--muted)}
.tcal-leg{display:inline-flex;align-items:center;gap:.35rem}
.tcal-swatch{width:13px;height:13px;border-radius:4px;display:inline-block;border:1px solid var(--line)}
.tcal-swatch.s-booked{background:#e9f7ef;border-color:#bfe6cf}
.tcal-swatch.s-open{background:#fff6e6;border-color:#f3dca6}
.tcal-swatch.s-flag{background:#fdecea;border-color:#f5c2bc}
.tcal-swatch.s-we{background:var(--soft)}

/* Tages-Panel: Bottom-Sheet (Handy) / Dialog (Desktop) */
.daypanel-overlay{position:fixed;inset:0;z-index:3000;display:none;background:rgba(0,0,0,.5);
  backdrop-filter:blur(2px);align-items:flex-end;justify-content:center}
.daypanel-overlay.open{display:flex}
.daypanel{background:var(--card);color:var(--ink);width:100%;max-width:560px;
  border-radius:18px 18px 0 0;max-height:85vh;display:flex;flex-direction:column;
  box-shadow:0 -8px 30px rgba(0,0,0,.25);animation:daypanel-up .2s ease}
@keyframes daypanel-up{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
.daypanel-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.2rem;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);border-radius:18px 18px 0 0}
.daypanel-head strong{font-size:1.05rem}
.daypanel-close{background:var(--soft);color:var(--soft-ink);border:0;border-radius:50%;
  width:34px;height:34px;font-size:1rem;cursor:pointer;flex:none;line-height:1}
.daypanel-close:hover{background:var(--line)}
.daypanel-body{padding:.8rem 1.2rem 1.4rem;overflow-y:auto}
.daypanel-item{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;
  padding:.8rem .9rem;border:1px solid var(--line);border-radius:10px;margin-bottom:.5rem;
  text-decoration:none;color:var(--ink);transition:border-color .12s,background .12s}
.daypanel-item:hover{border-color:var(--brand);background:var(--soft)}
.daypanel-item.is-flag{border-left:4px solid #d4351c}
.daypanel-item-main{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.daypanel-site{font-weight:700}
.dp-flag{color:var(--danger)}
.daypanel-emp{font-size:.82rem;color:var(--brand);font-weight:600}
.daypanel-act{font-size:.85rem;color:var(--muted)}
.daypanel-item-side{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;flex:none;white-space:nowrap}
.daypanel-time{font-weight:600;font-size:.9rem}
.daypanel-dur{font-size:.82rem;color:var(--muted)}
/* Desktop: Dialog mittig statt Bottom-Sheet */
@media (min-width:700px){
  .daypanel-overlay{align-items:center}
  .daypanel{border-radius:16px;max-height:80vh}
  .daypanel-head{border-radius:16px 16px 0 0}
}

/* Abwesenheiten – aufgeräumte Aktionen-Spalte (Buttons statt Inline-Grundfelder) */
.abs-actions{white-space:nowrap}
.abs-actions form{margin:0}
.abs-actions .btn-sm{margin:.15rem .15rem .15rem 0}
@media (max-width:760px){
  .abs-actions{display:flex;flex-wrap:wrap;gap:.3rem}
  .abs-actions .btn-sm{margin:0;flex:1 1 auto;min-width:120px}
}

/* Urlaubsplan: klickbare Tag-Zellen + Zeilen-Hervorhebung beim Sprung */
.calmatrix td.cal-clickable{cursor:pointer}
.calmatrix td.cal-clickable:hover{outline:2px solid var(--brand);outline-offset:-2px}
.row-highlight{animation:rowflash 1.5s ease}
@keyframes rowflash{0%,100%{background:transparent}15%,55%{background:rgba(31,111,235,.16)}}
/* Dauerhaft markierte Zeile nach Klick im Kalender */
.row-selected > td{background:rgba(31,111,235,.10) !important}
.row-selected > td:first-child{box-shadow:inset 3px 0 0 var(--brand)}
html[data-theme="dark"] .row-selected > td{background:rgba(77,141,255,.16) !important}

/* ============================================================
   Zeiterfassung – Stand-Streifen + Wochenansicht
   ============================================================ */
.worktime-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:.2rem 0 .9rem}
.wts-item{background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.wts-label{color:var(--muted);font-size:.8rem}
.wts-val{font-size:1.5rem;font-weight:600;line-height:1.2;margin-top:.1rem}
.wts-val small{font-size:.8rem;font-weight:400;color:var(--muted)}
.wts-sub{font-size:.74rem;color:var(--muted)}
.wts-running{color:var(--warn)}
@media (max-width:560px){
  .worktime-strip{grid-template-columns:1fr 1fr 1fr;gap:.4rem}
  .wts-item{padding:.6rem .55rem}
  .wts-val{font-size:1.15rem}
}

/* Wochenansicht: 7 Tage als Karten */
.tweek{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem}
.tweek-day{border:1px solid var(--line);border-radius:10px;background:var(--card);
  min-height:120px;display:flex;flex-direction:column;overflow:hidden}
.tweek-we{background:var(--soft)}
.tweek-today{box-shadow:inset 0 0 0 2px var(--brand)}
.tweek-dayhead{padding:.4rem .5rem;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:.05rem}
.tweek-dow{font-size:.72rem;font-weight:700;color:var(--muted)}
.tweek-date{font-size:.92rem;font-weight:700}
.tweek-sum{font-size:.74rem;font-weight:700;color:var(--ok)}
.tweek-entries{display:flex;flex-direction:column;gap:.3rem;padding:.4rem}
.tweek-entry{display:flex;flex-direction:column;gap:.05rem;text-decoration:none;
  background:#e9f7ef;border:1px solid #bfe6cf;border-radius:7px;padding:.3rem .4rem;color:var(--ink);transition:transform .08s}
.tweek-entry:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.1)}
.tweek-entry.is-flag{background:#fdecea;border-color:#f5c2bc}
.tweek-entry-site{font-size:.78rem;font-weight:700;line-height:1.1}
.tweek-entry-emp{font-size:.7rem;color:var(--brand);font-weight:600}
.tweek-entry-meta{font-size:.7rem;color:var(--muted)}
.tweek-empty{padding:.5rem;color:var(--muted);font-size:.74rem;text-align:center;margin-top:auto;margin-bottom:auto}
html[data-theme="dark"] .tweek-entry{background:#13301f;border-color:#1e5236}
html[data-theme="dark"] .tweek-entry.is-flag{background:#3a1512;border-color:#7a2b22}

/* Wochenansicht auf dem Handy: untereinander statt 7 Spalten */
@media (max-width:760px){
  .tweek{grid-template-columns:1fr;gap:.4rem}
  .tweek-day{min-height:0}
  .tweek-dayhead{flex-direction:row;align-items:baseline;gap:.5rem}
  .tweek-dow{font-size:.8rem}
}
.wts-owner{grid-column:1 / -1;font-size:.76rem;font-weight:600;color:var(--muted);margin-bottom:-.2rem}

/* ============================================================
   Zeiterfassung – Tabellen-Ansicht (Monatsplan mit Kontostand)
   ============================================================ */
.ttable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ttable{width:100%;border-collapse:collapse;font-size:.86rem;min-width:680px}
.ttable th,.ttable td{padding:.4rem .55rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ttable thead th{background:var(--soft);color:var(--soft-ink);font-weight:700;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.02em;position:sticky;top:0;z-index:1}
.ttable .tt-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ttable .tt-date{white-space:nowrap}
.tt-d{font-weight:700}
.tt-dow{color:var(--muted);font-size:.78rem;margin-left:.15rem}
.ttable tr.tt-we td{background:var(--soft)}
.ttable tr.tt-today td{box-shadow:inset 0 2px 0 var(--brand)}
.tt-link{color:var(--ink);text-decoration:none;display:flex;flex-direction:column;gap:.05rem}
.tt-link:hover{color:var(--brand)}
.tt-link:hover .tt-act{color:var(--brand)}
.tt-act{font-size:.76rem;color:var(--muted)}
.tt-abs{display:inline-block;background:#e0e7fb;color:#3641c0;border-radius:5px;padding:.05rem .4rem;font-weight:600;font-size:.78rem}
html[data-theme="dark"] .tt-abs{background:#1f2a4d;color:#9db4ff}
.tt-empty{color:var(--muted)}
.tt-pos{color:var(--ok);font-weight:600}
.tt-neg{color:var(--danger);font-weight:600}
.tt-balance{font-weight:700;border-left:2px solid var(--line)}
.ttable tfoot .tt-sum td{border-top:2px solid var(--line);background:var(--soft);padding-top:.55rem;padding-bottom:.55rem}
.ttable tfoot .tt-sum .tt-balance{font-size:.95rem}

/* ============================================================
   Stundenkonto – Chef-Übersicht mit Soll/Ist-Abgleich + Ampel
   ============================================================ */
.ov-controls{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;margin:.2rem 0 .8rem}
.ov-period-toggle{display:flex;gap:.3rem}
.ov-nav{display:flex;align-items:center;gap:.6rem}
.ov-period-label{font-size:1.02rem;min-width:9rem;text-align:center}
.ov-card{padding-top:.4rem}
.ov-table{width:100%;border-collapse:collapse}
.ov-table th,.ov-table td{padding:.55rem .6rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.ov-table thead th{font-size:.74rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}
.ov-table .ov-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ov-th-sub{display:block;font-weight:500;font-size:.66rem;text-transform:none;letter-spacing:0;color:var(--muted)}
.ov-name{font-weight:600;display:block}
.ov-wh{font-size:.74rem;color:var(--muted)}
.ov-credit{display:block;font-size:.7rem;color:var(--muted)}
/* Ampel-Pills */
.ov-pill{display:inline-block;padding:.2rem .6rem;border-radius:999px;font-weight:700;font-size:.9rem}
.amp-green{color:#0f5e2e;background:#e9f7ef}
.amp-red{color:#b42318;background:#fdecea}
.amp-amber{color:#9a6700;background:#fff6e6}
html[data-theme="dark"] .amp-green{color:#5fd397;background:#13301f}
html[data-theme="dark"] .amp-red{color:#ff9c8f;background:#3a1512}
html[data-theme="dark"] .amp-amber{color:#f3c969;background:#3a2e0c}
/* als reine Textfarbe (z. B. Selbstansicht-Werte) */
.ov-self-value.amp-green,.ov-self-v.amp-green{background:none;color:#0f5e2e}
.ov-self-value.amp-red,.ov-self-v.amp-red{background:none;color:#b42318}
.ov-self-value.amp-amber,.ov-self-v.amp-amber{background:none;color:#9a6700}
html[data-theme="dark"] .ov-self-value.amp-green,html[data-theme="dark"] .ov-self-v.amp-green{color:#5fd397}
html[data-theme="dark"] .ov-self-value.amp-red,html[data-theme="dark"] .ov-self-v.amp-red{color:#ff9c8f}
html[data-theme="dark"] .ov-self-value.amp-amber,html[data-theme="dark"] .ov-self-v.amp-amber{color:#f3c969}
/* Legende */
.ov-legend{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.7rem;font-size:.78rem;color:var(--muted)}
.ov-leg{display:inline-flex;align-items:center;gap:.4rem}
.ov-dot{width:12px;height:12px;border-radius:50%;display:inline-block}
.ov-dot.amp-green{background:#1e9e5a}
.ov-dot.amp-red{background:#d4351c}
.ov-dot.amp-amber{background:#e0a200}
/* Mitarbeiter-Selbstansicht */
.ov-self{display:flex;flex-direction:column;gap:.9rem}
.ov-self-main{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.15rem}
.ov-self-label{font-size:.84rem;color:var(--muted)}
.ov-self-value{font-size:2.1rem;font-weight:800;line-height:1.1}
.ov-self-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.ov-self-cell{background:var(--soft);border-radius:10px;padding:.6rem;text-align:center;display:flex;flex-direction:column;gap:.15rem}
.ov-self-k{font-size:.74rem;color:var(--muted);font-weight:600}
.ov-self-v{font-size:1.1rem;font-weight:700}
@media (max-width:560px){
  .ov-self-grid{grid-template-columns:1fr}
}

/* Login-Selfservice + 2FA */
.login-notice{background:#e9f7ef;color:#0f5e2e;border:1px solid #bfe6cf;padding:.7rem;border-radius:8px;margin-bottom:1rem;font-size:.9rem}
html[data-theme="dark"] .login-notice{background:#13301f;color:#5fd397;border-color:#1e5236}
.login-links{margin-top:1rem;text-align:center;font-size:.9rem}
.login-links a{color:var(--brand);text-decoration:none}
.login-links a:hover{text-decoration:underline}
.login-sep{color:var(--muted);margin:0 .4rem}
.login-check{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--muted);margin:.6rem 0;font-weight:400}
.login-check input{width:auto;margin:0}
button.linkish{background:none;border:0;color:var(--brand);cursor:pointer;font-size:.9rem;padding:0;margin:0;text-decoration:none;font-family:inherit}
button.linkish:hover{text-decoration:underline;background:none}

/* Update- & Systemcheck-Seite */
.upd-table{width:100%;border-collapse:collapse;margin-top:.6rem}
.upd-table th,.upd-table td{padding:.6rem .5rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.upd-table thead th{font-size:.74rem;text-transform:uppercase;letter-spacing:.02em;color:var(--muted)}
.upd-title{display:block;font-weight:600}
.upd-desc{display:block;font-size:.82rem;color:var(--muted);margin:.1rem 0}
.upd-file{display:block;font-size:.72rem;color:var(--muted);font-family:ui-monospace,monospace}
.upd-badge{display:inline-block;padding:.15rem .55rem;border-radius:999px;font-size:.8rem;font-weight:700;white-space:nowrap}
.upd-ok{background:#e9f7ef;color:#0f5e2e}
.upd-open{background:#fff6e6;color:#9a6700}
html[data-theme="dark"] .upd-ok{background:#13301f;color:#5fd397}
html[data-theme="dark"] .upd-open{background:#3a2e0c;color:#f3c969}
.upd-run{display:flex;flex-direction:column;gap:.35rem;align-items:flex-end}
.upd-check{display:flex;align-items:center;gap:.35rem;font-size:.78rem;color:var(--muted);font-weight:400}
.upd-check input{width:auto;margin:0}
.upd-steps{margin:.4rem 0 0 1.1rem;padding:0;line-height:1.7}
.upd-steps li{margin:.2rem 0}

/* ===== Bautagebuch-Liste (aufgewertet) ===== */
.diary-entry{padding:1rem 1.1rem}
.diary-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;
  padding-bottom:.7rem;margin-bottom:.7rem;border-bottom:1px solid var(--line)}
.diary-head-main{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.diary-date{font-family:var(--font-head,inherit);font-weight:800;font-size:1.15rem;color:var(--ink)}
.diary-site{font-weight:600;color:var(--brand)}
.diary-head-badges{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
.diary-block{margin:.55rem 0;line-height:1.5}
.diary-label{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);margin-bottom:.15rem}
.diary-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--line)}
.diary-actions form{margin:0}

/* ============================================================
   Einheitlicher Datums-Picker (wertet native <input type=date> auf)
   Farben aus Theme-Variablen -> hell/dunkel automatisch korrekt.
   ============================================================ */
.dp-wrap{position:relative}
/* Natives Feld bleibt im Formular (Wert/Pflichtprüfung), nur unsichtbar */
.dp-native-hidden{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;opacity:0;pointer-events:none}
.dp-display{cursor:pointer;padding-right:40px}
.dp-toggle{position:absolute;top:0;right:0;height:100%;width:38px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;color:var(--muted);cursor:pointer;padding:0}
.dp-toggle:hover{background:transparent;color:var(--brand)}
.dp-pop{position:absolute;z-index:60;top:calc(100% + 6px);left:0;width:300px;max-width:92vw;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.25)}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dp-title{font-weight:700;font-size:15px;color:var(--ink)}
.dp-nav{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:transparent;
  color:var(--ink);cursor:pointer;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;margin:0;padding:0}
.dp-nav:hover{border-color:var(--brand);color:var(--brand);background:transparent}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-dow{text-align:center;font-size:11px;font-weight:700;color:var(--muted);padding:4px 0;text-transform:uppercase}
.dp-day{aspect-ratio:1;min-height:34px;border:0;background:transparent;color:var(--ink);border-radius:8px;cursor:pointer;
  font-size:13px;display:flex;align-items:center;justify-content:center;margin:0;padding:0}
.dp-day:hover:not(:disabled){background:var(--soft)}
.dp-day:disabled{color:var(--muted);opacity:.4;cursor:not-allowed}
.dp-day.dp-sel{background:var(--brand);color:#fff;font-weight:700}
.dp-day.dp-today{outline:1px solid var(--brand);outline-offset:-1px}
.dp-day.dp-empty{visibility:hidden}
.dp-foot{margin-top:8px;display:flex;justify-content:flex-end}
.dp-clear{background:none;border:0;color:var(--muted);font-size:13px;cursor:pointer;padding:4px 8px;margin:0}
.dp-clear:hover{color:var(--ink);background:none}

/* ===== Passwort ein-/ausblenden (Augensymbol) ===== */
.pw-wrap{position:relative;display:block}
.pw-has-eye{padding-right:40px}
.pw-eye{position:absolute;top:0;right:0;height:100%;width:38px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;color:var(--muted);cursor:pointer;padding:0}
.pw-eye:hover{background:transparent;color:var(--brand)}

/* Aktions-Buttons in Listen sauber nebeneinander/umbrechen (kein Überlappen) */
.entry-table td.c-actions{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;justify-content:flex-end}
.entry-table td.c-actions form{margin:0}

/* Anklickbare Tabellenzeilen (z. B. „Gerade eingestempelt" im Dashboard) */
tr.row-link{cursor:pointer;transition:background .12s}
tr.row-link:hover{background:var(--soft)}
.plain-link{color:inherit;text-decoration:none}
.plain-link:hover{color:inherit;text-decoration:none}

/* Offene Aufgaben einheitlich hervorheben (Verwaltungs-Kacheln + offene Antragszeilen).
   Nutzt durchgängig themefähige Variablen -> passt automatisch zu Hell- und Dunkelmodus. */
.tile.tile-attention{border-color:var(--brand);background:var(--attn-tile)}
.tile-open{color:var(--brand);font-weight:700;font-size:.88rem}
tr.row-attention > td{background:var(--attn-row)}
tr.row-attention > td:first-child{box-shadow:inset 3px 0 0 0 var(--brand)}

/* ===================== Sammel-Auswahl (select-tools.js) =====================
   Einheitlich für Zeiten, Bautagebuch, Belege und Abwesenheiten. */
.selbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem;margin:.6rem 0;
  background:var(--tile-bg)}
.selbar.selbar-aktiv{border-color:var(--brand);box-shadow:0 0 0 2px rgba(31,111,235,.12)}
.selbar .sel-count{font-size:.9rem;color:var(--muted)}
.selbar .sel-count.sel-count-on{color:var(--ink);font-weight:600}
.selbar .sel-spacer{flex:1 1 auto}
.selbar-sticky{position:sticky;top:.4rem;z-index:5;background:var(--card);
  box-shadow:0 2px 10px rgba(0,0,0,.08)}
.sel-hint{font-size:.78rem;color:var(--muted);margin:.1rem 0 .6rem}

/* Auswahl-Spalte in Tabellen */
th.sel-col,td.sel-col{width:1%;white-space:nowrap;text-align:center}
.sel-box,[data-sel-group]{width:18px;height:18px;cursor:pointer;accent-color:var(--brand)}

/* Markierte Zeile / markierte Kachel */
tr[data-sel-item].sel-on{background:rgba(31,111,235,.10)}
tr[data-sel-grouprow].sel-group-on{background:rgba(31,111,235,.06)}
.thumb-wrap[data-sel-item].sel-on{outline:3px solid var(--brand);outline-offset:-3px;border-radius:8px}
.thumb-wrap[data-sel-item].sel-on img{filter:brightness(.92)}

/* Auswahl-Zeile je Eintrag (Bautagebuch) */
.sel-group-line{display:flex;align-items:center;gap:.5rem;font-size:.88rem;color:var(--muted);
  margin:.5rem 0 .35rem;padding:.3rem .5rem;cursor:pointer;user-select:none;
  border:1px dashed var(--line);border-radius:8px;width:fit-content}
.sel-group-line:hover{color:var(--ink);border-color:var(--brand)}
.sel-group-line input{width:18px;height:18px;margin:0;accent-color:var(--brand);cursor:pointer}
.sel-group-line.sel-group-on{color:var(--ink);border-style:solid;border-color:var(--brand)}

/* Grund-Feld für Sammel-Löschanträge */
.sel-reason{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-top:.4rem}
.sel-reason input[type="text"]{flex:1 1 220px;min-width:180px}

/* Umschalter zwischen zwei Auswahl-Ebenen (Bautagebuch: Fotos ⇄ Einträge) */
.modeswitch{display:flex;gap:.35rem;flex-wrap:wrap;margin:.6rem 0 .2rem}
.selbar-danger.selbar-aktiv{border-color:var(--danger);box-shadow:0 0 0 2px rgba(192,57,43,.12)}
.diary-selbox{display:inline-flex;align-items:center;margin-right:.5rem}
.diary-selbox input{width:18px;height:18px;accent-color:var(--danger);cursor:pointer}
.card.diary-entry[data-sel-item].sel-on{outline:2px solid var(--danger);outline-offset:2px}
/* [hidden] muss auch bei Flex-Elementen greifen */
[hidden]{display:none !important}

/* Auswahl: Tri-State-Häkchen + Statuszeile im Klartext (Muster wie Gmail/Drive/GitHub).
   Der Zustand steckt im Häkchen (leer / Strich / Haken), nicht in einer wechselnden
   Knopf-Beschriftung – die wäre mehrdeutig (Zustand oder Aktion?). */
.sel-master{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:.2rem}
.sel-master input{width:20px;height:20px;cursor:pointer;accent-color:var(--brand);margin:0}
.selbar-danger .sel-master input{accent-color:var(--danger)}
.sel-clear{background:none;border:0;padding:.1rem .2rem;margin:0;color:var(--brand);
  font-size:.86rem;font-weight:600;cursor:pointer;text-decoration:underline;width:auto}
.sel-clear:hover{background:none;color:var(--brand-d)}
.selbar-danger .sel-clear{color:var(--danger)}
/* Eingabefelder in der Auswahl-Leiste dürfen die Zeile nicht sprengen */
.selbar input[type="email"],.selbar input[type="text"]{flex:0 1 220px;width:auto;min-width:150px}

/* ---- Datums-/Zeitfelder: Kalendersymbol sauber ausrichten ----------------
   Ohne diese Regeln setzt der Browser sein eigenes Symbol an den rechten Rand –
   je nach Browser unterschiedlich hoch und unterschiedlich weit innen. Ergebnis:
   die Symbole stehen nicht in einer Flucht. Hier wird es fest zentriert. */
input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"]{
  position:relative;min-height:44px;padding-right:2.4rem;
  -webkit-appearance:none;appearance:none}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator{
  position:absolute;right:.6rem;top:50%;transform:translateY(-50%);
  width:20px;height:20px;padding:0;margin:0;opacity:.55;cursor:pointer}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover{opacity:1}
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator{filter:invert(1)}
/* Damit Textfeld, Auswahlfeld und Datumsfeld in einer Zeile gleich hoch sind */
input:not([type="checkbox"]):not([type="radio"]),select{min-height:44px}

/* ---- Häkchen und Auswahlknöpfe -------------------------------------------
   BESTANDSFEHLER: Die Basisregel `input,select,textarea{width:100%;padding:.6rem;
   border:1px solid …}` galt auch für Checkboxen und Radios. Die wurden dadurch zu
   großen weißen Kästen mit Rahmen und Innenabstand – deshalb musste bisher jede
   Stelle im Projekt einzeln dagegen ansteuern. Hier einmal zentral korrigiert. */
input[type="checkbox"],input[type="radio"]{
  width:18px;height:18px;min-height:0;padding:0;border:0;margin:0;
  background:none;border-radius:0;accent-color:var(--brand);
  vertical-align:middle;cursor:pointer;flex:none}

/* ---- Preisvorschlag im Vorgang (Rechenhilfe fürs Backend, geht NIE automatisch raus) ---- */
.preisvorschlag{border:1px solid var(--brand);border-left:4px solid var(--brand);background:var(--tile-bg);
  border-radius:10px;padding:.85rem 1rem;margin-bottom:1rem}
.preisvorschlag.pv-leer{border-color:var(--warn);border-left-color:var(--warn)}
.pv-kopf{display:flex;gap:.6rem;flex-wrap:wrap;align-items:baseline;margin-bottom:.55rem}
.pv-rechnung{display:flex;gap:.45rem;align-items:baseline;flex-wrap:wrap;font-size:1.02rem}
.pv-einzel{font-weight:700}
.pv-summe{font-weight:800;font-size:1.15rem;color:var(--brand)}
.pv-mal{color:var(--muted)}
.pv-notiz,.pv-next,.pv-hinweis,.pv-leer-text{font-size:.88rem;margin-top:.45rem}
.pv-next{color:var(--warn);font-weight:600}
.pv-hinweis{color:var(--muted);border-top:1px solid var(--line);padding-top:.5rem;margin-top:.6rem}
.pv-aktion{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin-top:.75rem}
.pv-stichtag{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  margin-top:.7rem;padding-top:.6rem;border-top:1px solid var(--line)}
.pv-stichtag label{margin:0;font-size:.85rem;color:var(--muted)}
.pv-stichtag input[type="date"]{max-width:180px}
form.pv-uebernommen{outline:2px solid var(--brand);outline-offset:6px;border-radius:8px}