/* =====================================================================
   RÖHLL Einsatzplanung – Gestaltung
   Übernommen aus dem Prototyp (Moosgrün #046A38, Schwarz, Grau) und um
   Login, „Meine Einsätze“, Kontenverwaltung und die Handy-Ansicht ergänzt.

   Aufbau dieser Datei:
     1. Schriften und Farben
     2. Kopfbereich
     3. Plan-Tabelle (Dienstplan, Projekte, Maschinen)
     4. Hinweise, Banner, Legende
     5. Dialoge (Fenster)
     6. Admin, Abrechnung, Auswertung
     7. Login, Meine Einsätze, Meldungen
     8. Handy (schmale Bildschirme)
     9. Drucken
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Schriften und Farben
   Schriften liegen auf dem eigenen Server (keine Verbindung zu Google).
   --------------------------------------------------------------------- */
@font-face {
  font-family: Inter; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../schriften/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Inter; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../schriften/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Archivo; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../schriften/archivo-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Archivo; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(../schriften/archivo-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --green: #046A38; --green-700: #03502b; --green-050: #e8f1ec; --green-100: #d3e6dc;
  --ink: #0e1512; --black: #000; --muted: #5c6360;
  --beton: #7c7e7d; --umbra: #474945;
  --line: #d9e0dc; --line-soft: #e8edea; --bg: #eef2f0; --surface: #fff;
  --amber: #c07a17; --amber-050: #f9efda; --amber-line: #e4bd77;
  --rot: #b23a55;
  --wknd: #f6f7f5;
  --shadow: 0 1px 2px rgba(14,21,18,.06), 0 8px 24px rgba(14,21,18,.06);
  color-scheme: light;
}
* { box-sizing: border-box }
html, body { margin: 0 }
body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--ink); background: var(--bg); -webkit-text-size-adjust: 100% }
button { font-family: inherit; cursor: pointer }
.hide { display: none !important }
.gesperrt-seite { overflow: hidden }

/* ---------------------------------------------------------------------
   2. Kopfbereich
   --------------------------------------------------------------------- */
header { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--line) }
.hbar { padding: 9px 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.hbar2 { padding: 0 14px 9px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.brand { display: flex; flex-direction: column; line-height: .9 }
.brand .mark { font-family: Archivo, sans-serif; font-weight: 800; font-size: 24px; letter-spacing: .02em; color: var(--green) }
.brand .sub { font-family: Archivo, sans-serif; font-weight: 700; font-size: 8.5px; letter-spacing: .32em; color: var(--black); margin-top: 3px }
.hdiv { width: 1px; height: 32px; background: var(--line) }
.apptitle { display: flex; flex-direction: column; line-height: 1.05 }
.apptitle b { font-size: 14.5px; font-weight: 700 }
.apptitle .tag { font-size: 10.5px; color: var(--muted) }
.apptitle .tag.spielwiese { color: #fff; background: var(--amber); border-radius: 4px; padding: 1px 5px; font-weight: 700; align-self: flex-start; margin-top: 2px }
.spacer { flex: 1 1 auto }
.tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }

/* Reiter (Dienstplan, Projektübersicht …) */
.seg { display: inline-flex; background: var(--green-050); border: 1px solid var(--green-100); border-radius: 9px; padding: 3px }
.seg button { border: 0; background: transparent; color: var(--green-700); font-weight: 600; font-size: 13px; padding: 7px 14px; border-radius: 6px; white-space: nowrap }
.seg button.on { background: var(--green); color: #fff; box-shadow: var(--shadow) }

/* Suchfeld, Filter, Knöpfe */
.search { border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; font-size: 13px; font-family: inherit; width: 180px }
.search:focus { outline: 2px solid var(--green-100); border-color: var(--green) }
.hfilter { border: 1px solid var(--line); background-color: var(--surface); border-radius: 9px; padding: 8px 28px 8px 11px; font-size: 12.5px; font-weight: 600; color: var(--green-700); font-family: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%235c6360' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px; max-width: 170px }
.hfilter:hover { background-color: var(--green-050); border-color: var(--green-100) }
.hfilter:focus { outline: 2px solid var(--green-100); border-color: var(--green) }
.today-btn, .exp-btn, .nb-btn, .filter-btn { border: 1px solid var(--line); background: var(--surface); border-radius: 9px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--green-700); white-space: nowrap }
.today-btn:hover, .exp-btn:hover, .nb-btn:hover, .filter-btn:hover { background: var(--green-050); border-color: var(--green-100) }
.nb-btn { color: var(--muted) }
.nb-btn.on { background: var(--green-050); border-color: var(--green-100); color: var(--green-700) }
.filter-btn { display: none }
.filter-btn .anzahl { background: var(--green); color: #fff; border-radius: 10px; padding: 0 6px; font-size: 11px; margin-left: 3px }
.newproj-btn { border: 1px solid var(--green); background: var(--green); color: #fff; border-radius: 9px; padding: 8px 13px; font-size: 12.5px; font-weight: 600; white-space: nowrap }
.newproj-btn:hover { background: var(--green-700) }

/* Wochen-Navigation */
.wknav { position: relative; display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface) }
.wknav > button { border: 0; background: transparent; padding: 7px 11px; font-size: 16px; color: var(--ink); border-radius: 8px }
.wknav > button:hover { background: var(--green-050) }
.wklabel { padding: 3px 8px !important; text-align: center; min-width: 150px; font-size: inherit !important }
.wklabel .kw { font-weight: 700; font-size: 13px }
.wklabel .dt { font-size: 10.5px; color: var(--muted); white-space: nowrap }

/* Rollenwahl (GF ⇄ PL) und Kontomenü */
.rollenwahl { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); white-space: nowrap }
.rollenwahl select { border: 1px solid var(--green); background: var(--green); color: #fff; border-radius: 9px; padding: 7px 26px 7px 11px; font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 10px }
.kontomenue { position: relative }
.kontoknopf { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: 9px; padding: 5px 10px 5px 5px; font-size: 12.5px; font-weight: 600; color: var(--ink) }
.kontoknopf:hover { background: var(--green-050) }
.kontoknopf .avatar { width: 28px; height: 28px; border-radius: 7px; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; font-family: Archivo, sans-serif }
.kontoknopf .knam { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1 }
.kontoknopf .krol { font-size: 10.5px; color: var(--muted); font-weight: 500 }
.kontodd { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 40px rgba(14,21,18,.18); padding: 6px; min-width: 210px; z-index: 70 }
.kontodd button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 10px 12px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ink) }
.kontodd button:hover { background: var(--green-050) }
.kontodd .kinfo { padding: 8px 12px 10px; font-size: 11.5px; color: var(--muted); border-bottom: 1px solid var(--line-soft); margin-bottom: 4px }

/* ---------------------------------------------------------------------
   3. Plan-Tabelle
   --------------------------------------------------------------------- */
.tablewrap { margin: 11px 14px 14px; border: 1px solid var(--line); border-radius: 12px; overflow: auto; background: var(--surface); box-shadow: var(--shadow); max-height: calc(100vh - 170px); -webkit-overflow-scrolling: touch }
table.plan { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 900px; font-size: 12px }
table.plan col.dcol { width: 128px }
table.plan th, table.plan td { border-bottom: 1px solid #d2dbd6; border-right: 1px solid #d2dbd6 }
table.plan th:last-child, table.plan td:last-child { border-right: 0 }
thead th { position: sticky; top: 0; z-index: 6; background: #fbfcfb; padding: 7px 6px; text-align: center; font-weight: 600 }
thead th .wd { font-weight: 700; color: var(--ink); font-size: 13px; font-family: Archivo, sans-serif }
thead th .da { font-size: 11px; color: var(--muted); font-weight: 500 }
thead th.wknd { background: #f4f6f3 }
thead th.heute { background: var(--green-050); box-shadow: inset 0 -3px 0 var(--green) }
thead th .ftag { display: block; font-size: 9px; font-weight: 700; color: #9a6a1e; line-height: 1.1; margin-top: 1px }
thead th.namehead { left: 0; z-index: 9; text-align: left; padding-left: 13px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em }
tr.wkgrp th { top: 0 }
.wkgrph { background: #eef2f0; font-size: 11px; font-weight: 700; color: var(--umbra); padding: 5px 6px; text-align: center; border-bottom: 1px solid var(--line) }
.wkgrph.cur { background: var(--green-050); color: var(--green-700) }
th.wkstart, td.wkstart { border-left: 3px solid #a9b6af }
.namecol { position: sticky; left: 0; z-index: 5; background: var(--surface); width: 158px; min-width: 158px; border-right: 2px solid #bcc7c1 !important }
/* Lange Namen umbrechen statt über die Tageszellen zu laufen */
td.namecol { overflow: hidden }
.nm, .projname .pn, .projname .ppl, .prjbem, .plnote, .prjmeta { overflow-wrap: anywhere; hyphens: auto }
.leerzeile td { padding: 30px; text-align: center; color: var(--muted); font-size: 13px }

/* Team-Überschrift */
tr.grp td { position: sticky; left: 0; background: #f0f4f2; padding: 0 }
tr.grp .gin { display: flex; align-items: center; gap: 9px; padding: 7px 13px; font-weight: 700; font-size: 11.5px; color: var(--umbra); letter-spacing: .02em; text-transform: uppercase; border-left: 4px solid var(--green) }
tr.grp .cnt { font-weight: 500; color: var(--muted); letter-spacing: 0; text-transform: none; font-size: 11px }

/* Personen-Zeilen */
tr.r:hover td { background: #fcfdfc }
tr.r:hover .namecol { background: #f8faf9 }
td.namecol { padding: 7px 9px 7px 13px; border-left: 4px solid transparent }
td.namecol.pclick { cursor: pointer }
td.namecol.pclick:hover { background: var(--green-050) }
.nm { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 5px; line-height: 1.2; flex-wrap: wrap }
.nm .vn, .vn { font-weight: 400; color: var(--muted); font-size: 11px }
.meta { font-size: 10px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.oflag { font-size: 8.5px; font-weight: 700; color: #8a4e12; background: #fbe6cf; border: 0; border-radius: 3px; padding: 1px 4px; line-height: 1.5 }
.exflag { font-size: 8.5px; font-weight: 700; color: var(--umbra); background: #efece4; border: 1px solid #e2d8bf; border-radius: 3px; padding: 0 3px; line-height: 1.5 }
.confbadge { color: #c47a17; font-size: 11px; font-weight: 700 }
@keyframes flashname { 0% { background: #fff0c2 } 100% { background: var(--surface) } }
tr.flash .namecol { animation: flashname 1.7s ease-out }

/* Zellen */
td.c { padding: 0; vertical-align: middle; height: 52px; position: relative }
td.c.klickbar { cursor: pointer }
td.c.wknd { background: var(--wknd) }
td.c.klickbar:hover { box-shadow: inset 0 0 0 2px var(--green-100) }
td.c.empty.klickbar:hover::after { content: "+"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--green); font-weight: 700; font-size: 15px; opacity: .55 }
.cin { min-height: 52px; padding: 6px 8px; display: flex; flex-direction: column; justify-content: center; gap: 2px; overflow: visible; border-left: 3px solid transparent }
.cin .main { font-weight: 600; font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cin .time { font-size: 11px; font-weight: 600; opacity: .85; line-height: 1.15 }
.cin .note { font-size: 11px; opacity: .75; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.moon { width: 11px; height: 11px; vertical-align: -1px; margin-right: 2px }
.wrench { width: 11px; height: 11px; vertical-align: -1px; margin-right: 2px; opacity: .7 }
.multi { display: flex; flex-direction: column; gap: 2px; padding: 3px 4px }
.multi .cin { min-height: 0; border-radius: 5px; padding: 3px 6px; justify-content: center; flex: none }
td.c.dragsel { background: var(--green-050) }
td.c.dragsel .cin { outline: 2px solid var(--green); outline-offset: -2px; border-radius: 4px }

/* Farben je Status */
.c-proj .cin { background: #f5f9f7; color: #123a24; border-left-color: var(--green) }
.c-urlaub .cin { background: #e4f1e8; color: #2f7d4b }
.c-krank .cin { background: #f7e3e7; color: #b23a55 }
.c-arzt .cin { background: #fbeef2; color: #b0567a }
.c-freischicht .cin { background: #eaf0ee; color: #3a6b66 }
.c-anreise .cin { background: #f6ecda; color: #9a6a1e }
.c-lehrgang .cin { background: #ece3f2; color: #6b4a8f }
.c-frei .cin { background: #eef1f0; color: #667470 }
.c-neu .cin { background: repeating-linear-gradient(45deg, #f9efda, #f9efda 5px, #f2e2bf 5px, #f2e2bf 10px); color: #8a5c12 }
.c-nacht .cin { background: #39456f; color: #eef0fb; border-left-color: #232b52; font-weight: 600 }
.c-nacht .cin .time, .c-nacht .cin .note { color: #d7dcf3; opacity: .95 }
.c-nacht .moon { color: #dfe4fb }
.c-ausfall .cin { background: repeating-linear-gradient(45deg, #edefee, #edefee 6px, #e2e5e3 6px, #e2e5e3 12px); color: #66716b; border-left-color: #9aa4a0 }
.c-ausfall .cin .main { color: #5a655f }
.conf .cin { background: #fbe6cf; color: #8a4e12; border-left-color: #d98a2b }
.warn .cin { background: #f8e0dd; color: #a8493f; border-left-color: #cf6b5a }
.warnnote { font-size: 9px; font-weight: 700; line-height: 1.15; margin-top: 1px }
.wn-doppel { color: #8a4e12 } .wn-fahrer { color: #a8493f }
.warnico { margin-right: 2px; font-weight: 700 }
.ausfalltag { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: #7a847e; color: #fff; border-radius: 3px; padding: 1px 4px; vertical-align: 1px }
.webadge { font-size: 8.5px; font-weight: 700; border-radius: 3px; padding: 1px 4px; margin-top: 1px; align-self: flex-start; line-height: 1.3 }
.webadge.weok { background: #e2efe6; color: #1f7a46 }
.webadge.weopen { background: #f6ecda; color: #8a5c12 }
.machln { font-size: 10px; color: var(--umbra); opacity: .92; line-height: 1.15; display: flex; align-items: center; gap: 1px }
.machln.machconf { color: #a8493f; font-weight: 700; opacity: 1 }
.c-nacht .machln { color: #d7dcf3 }

/* Vorschläge (unter Vorbehalt): gestrichelt/blass */
td.c.pending .cin, .multi .pending .cin { opacity: .72; border: 1.5px dashed #9aa4a0; border-radius: 5px; background-image: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(0,0,0,.03) 6px, rgba(0,0,0,.03) 12px) }
td.c.penddel .cin, .multi .penddel .cin, .pchip.penddel { opacity: .6 }
td.c.penddel .cin .main, .pchip.penddel .lbl { text-decoration: line-through }

/* Projektübersicht */
td.namecol.projname { padding: 6px 9px 6px 13px; border-left: 4px solid var(--green); vertical-align: top; cursor: pointer }
td.namecol.projname:hover { background: #f6faf8 }
.pnr { font-size: 9.5px; color: #fff; background: var(--green); padding: 1px 5px; border-radius: 4px; font-family: Archivo, sans-serif; font-weight: 700; margin-right: 5px; vertical-align: 1px }
.projname .pn { font-weight: 700; font-size: 13px; font-family: Archivo, sans-serif }
.projname .ppl { font-size: 10.5px; color: var(--muted); margin-top: 3px }
.arts { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap }
.art { font-size: 9px; font-weight: 600; padding: 1px 6px; border-radius: 10px; background: var(--green-050); color: var(--green-700); border: 1px solid var(--green-100) }
.prjbem { font-size: 10px; color: #7a4e10; margin-top: 4px; background: var(--amber-050); border: 1px solid var(--amber-line); border-radius: 5px; padding: 2px 6px; line-height: 1.25 }
.plnote { font-size: 10px; color: #2f5075; margin-top: 4px; background: #eef2f8; border: 1px solid #d6e0ee; border-radius: 5px; padding: 2px 6px; line-height: 1.25 }
.prjmeta { font-size: 9.5px; color: var(--muted); margin-top: 3px }
.donebadge { font-size: 9.5px; font-weight: 700; color: #5c6360; background: #e7ebe9; border: 1px solid #d3dbd6; border-radius: 20px; padding: 1px 8px; margin-left: 5px; vertical-align: 1px }
.rowdone td { opacity: .5 }
.projdone .pn { text-decoration: line-through; text-decoration-color: #9aa4a0 }
td.pc { padding: 0; vertical-align: top; height: 44px }
td.pc.wknd { background: var(--wknd) }
.pcell { padding: 4px 5px; display: flex; flex-direction: column; gap: 3px; min-height: 44px }
.pchip { display: flex; flex-direction: column; gap: 1px; background: #f5f9f7; border: 1px solid var(--green-100); border-radius: 6px; padding: 3px 7px; font-size: 11px; color: #123a24; width: 100%; text-align: left }
.pchip.klickbar { cursor: pointer }
.pchip.klickbar:hover { border-color: var(--green); background: var(--green-050) }
.pchip.conf { background: #fbe6cf; border-color: #f0d2a8; color: #8a4e12 }
.pchip.warn { background: #f8e0dd; border-color: #e6bcb5; color: #a8493f }
.pchip.nacht { background: #39456f; border-color: #232b52; color: #eef0fb }
.pchip.nacht .pcnote { opacity: .9 }
.pchip.nacht .moon { color: #dfe4fb }
.pchip.ausfall { background: repeating-linear-gradient(45deg, #eef0ef, #eef0ef 6px, #e3e6e4 6px, #e3e6e4 12px); border-color: #d3d9d5; color: #66716b }
.pchip.pending { opacity: .75; border-style: dashed; border-color: #9aa4a0 }
.pchip .pctop { display: flex; align-items: center; gap: 5px; font-weight: 600; line-height: 1.15 }
.pchip .moon { width: 10px; height: 10px; flex: none }
.pchip .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pchip .pcnote { font-size: 9.5px; font-weight: 500; opacity: .82; line-height: 1.2 }
.machtag { font-size: 10px; margin-left: 1px }
.pcfoot { display: flex; gap: 4px; align-items: center; margin-top: 1px }
.paddb { border: 1px dashed var(--green-100); background: transparent; color: var(--green-700); border-radius: 6px; padding: 2px 9px; font-size: 12px; font-weight: 700; line-height: 1.25 }
.paddb:hover { background: var(--green-050); border-style: solid }
.btbtog { border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 5px; padding: 2px 7px; font-size: 9px; font-weight: 700; letter-spacing: .04em }
.btbtog:disabled { cursor: default }
.btbtog:not(:disabled):hover { border-color: var(--green-100) }
.btbtog.on { background: var(--green-050); border-color: var(--green-100); color: var(--green-700) }
.machrow td { border-top: 1px dashed #cfd8d3; background: #fafbfa }
.machrow .machlabel { font-size: 9.5px; font-weight: 700; color: var(--beton); text-transform: uppercase; letter-spacing: .04em; padding: 6px 9px 6px 13px; display: flex; align-items: center; gap: 3px }
td.machcell .pcell { min-height: 32px; gap: 3px }
.mchip { display: flex; flex-direction: column; background: #eef0ef; border: 1px solid #d9dedb; border-radius: 6px; padding: 3px 7px; font-size: 10px; color: var(--umbra); width: 100%; line-height: 1.2; text-align: left }
.mchip.klickbar { cursor: pointer }
.mchip.klickbar:hover { border-color: var(--beton); background: #e6eae8 }
.mchip.machconf { background: #f8e0dd; border-color: #e6bcb5; color: #a8493f }
.mchip .mctop { font-weight: 700; display: flex; align-items: center; gap: 2px }
.mchip .mcdrv { font-weight: 500; opacity: .85 }
.machempty { font-size: 10px; color: #b9c1bc; font-style: italic; padding: 3px 2px }
.newrow td { background: #f7faf8 }
.newrowbtn { border: 1px dashed var(--green-100); background: #fff; color: var(--green-700); border-radius: 8px; padding: 9px 15px; font-size: 13px; font-weight: 600; margin: 7px 9px }
.newrowbtn:hover { background: var(--green-050); border-style: solid; border-color: var(--green) }

/* Maschinen-Ansicht */
.mcin { min-height: 44px; padding: 6px 8px; display: flex; flex-direction: column; justify-content: center; gap: 2px; border-left: 3px solid var(--beton); background: #f4f6f5 }
.mcin.klickbar { cursor: pointer }
.mcin.klickbar:hover { background: #eef1f0 }
.mcin .main { font-weight: 700; font-size: 12.5px; line-height: 1.2 }
.mcin .note { font-size: 10.5px; color: var(--muted) }
.mcin.machconf { background: #f8e0dd; border-left-color: #cf6b5a; color: #a8493f }
td.c.mfree { text-align: center; vertical-align: middle }
.mfreein { font-size: 11px; color: #c0c8c3; font-style: italic }

/* ---------------------------------------------------------------------
   4. Hinweise, Banner, Legende
   --------------------------------------------------------------------- */
.strip { padding: 0 14px }
.strip:empty { display: none }
.robanner { margin-top: 9px; background: #eef2f8; border: 1px solid #d6e0ee; color: #2f5075; border-radius: 9px; padding: 8px 13px; font-size: 12.5px }
.webanner { margin-top: 9px; background: #f6ecda; border: 1px solid #ead9b5; color: #8a5c12; border-radius: 9px; padding: 8px 13px; font-size: 12.5px; display: flex; align-items: center; gap: 10px }
.webtn { border: 1px solid #d9a94e; background: #8a5c12; color: #fff; border-radius: 8px; padding: 5px 11px; font-size: 12px; font-weight: 700; margin-left: auto; white-space: nowrap }
.webtn:hover { background: #734c0f }
.rejbanner { margin-top: 9px; background: #f8e6e2; border: 1px solid #e6bcb5; color: #a8493f; border-radius: 9px; padding: 8px 13px; font-size: 12.5px; display: flex; align-items: center; gap: 10px }
.rejbtn { border: 1px solid #cf6b5a; background: #a8493f; color: #fff; border-radius: 8px; padding: 5px 11px; font-size: 12px; font-weight: 700; margin-left: auto; white-space: nowrap }
.rejbtn:hover { background: #8f3d34 }
.rejx { color: #a8493f; font-weight: 800 }

.notices { margin-top: 9px; position: relative }
.noticebar { display: flex; align-items: center; gap: 9px; width: 100%; background: var(--amber-050); border: 1px solid var(--amber-line); color: #7a4e10; padding: 9px 13px; border-radius: 9px; font-size: 12.5px; text-align: left }
.noticebar .ni-ic { width: 15px; height: 15px; flex: none }
.noticebar .chev { margin-left: auto; font-size: 12px }
.noticedd { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 7px; max-height: 50vh; overflow: auto }
.noticeitem { display: flex; align-items: center; gap: 9px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; font-size: 12.5px; color: var(--ink) }
button.noticeitem:hover { border-color: var(--amber-line); background: #fdf7ee }
.nidot { width: 9px; height: 9px; border-radius: 3px; flex: none }
.nidot.doppel { background: var(--amber) }
.nidot.fahrer { background: #b23a55 }
.nidot.mach { background: var(--beton) }
.nidot.pend { background: #7d6bb0 }
.pendhead { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px 5px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #5b4b8a }
.approveall { border: 1px solid #cfc4ea; background: #efeaf9; color: #5b4b8a; border-radius: 7px; padding: 4px 10px; font-size: 11px; font-weight: 700 }
.approveall:hover { background: #e6dff5 }
.pendrow { display: flex; align-items: center; gap: 8px }
.pendbody { flex: 1; cursor: pointer; text-align: left; background: none; border: 0; font: inherit; color: inherit; padding: 0 }
.pmuted { color: var(--muted) }
.pendact { display: flex; gap: 5px; flex-shrink: 0 }
.pendok { border: 1px solid #b6d8c2; background: #e7f3ec; color: #1f7a46; border-radius: 6px; padding: 4px 9px; font-size: 11px; font-weight: 700; white-space: nowrap }
.pendok:hover { background: #d8ecdf }
.pendno { border: 1px solid #e6bcb5; background: #f8e6e2; color: #a8493f; border-radius: 6px; padding: 4px 9px; font-size: 11px; font-weight: 700; white-space: nowrap }
.pendno:hover { background: #f2d8d2 }
.pendsep { height: 1px; background: var(--line); margin: 6px 10px }

.legend { margin: 0 14px 90px; padding: 12px 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px }
.legend h3 { margin: 0 0 9px; font-size: 11px; font-weight: 700; color: var(--umbra); letter-spacing: .03em; text-transform: uppercase }
.legrow { display: flex; flex-wrap: wrap; gap: 7px 14px }
.leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px }
.legsw { width: 15px; height: 15px; border-radius: 4px; flex: none; border: 1px solid rgba(0,0,0,.06) }

/* Kalender */
.calpop { position: fixed; z-index: 80; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px rgba(14,21,18,.18); padding: 12px; width: 250px }
.calhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; font-weight: 700; font-size: 13px }
.calnav { border: 1px solid var(--line); background: #fff; border-radius: 7px; width: 28px; height: 28px; font-size: 15px }
.calnav:hover { background: var(--green-050) }
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px }
.calwd { text-align: center; font-size: 10px; color: var(--muted); font-weight: 600; padding: 2px 0 }
.calday { border: 0; background: #fff; border-radius: 6px; padding: 6px 0; font-size: 12px; color: var(--ink) }
.calday:hover { background: var(--green-050) }
.calday.cur { background: var(--green); color: #fff; font-weight: 700 }
.calday.heute { box-shadow: inset 0 0 0 1.5px var(--green) }

/* ---------------------------------------------------------------------
   5. Dialoge (Fenster)
   --------------------------------------------------------------------- */
.backdrop { position: fixed; inset: 0; background: rgba(14,21,18,.42); z-index: 60; display: none; align-items: center; justify-content: center; padding: 16px }
.backdrop.show { display: flex }
.modal { background: var(--surface); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.28); width: 100%; max-width: 580px; max-height: 90vh; overflow: auto; position: relative }
.modal.breit { max-width: 860px }
.mhead { position: sticky; top: 0; background: var(--surface); padding: 15px 50px 10px 18px; border-bottom: 1px solid var(--line); z-index: 2 }
.mhead .who { font-weight: 700; font-size: 15.5px }
.mhead .when { font-size: 12px; color: var(--muted); margin-top: 2px }
.mclose { position: absolute; right: 12px; top: 12px; border: 0; background: var(--bg); width: 32px; height: 32px; border-radius: 8px; font-size: 18px; color: var(--muted) }
.mbody { padding: 13px 18px 18px }
.mlabel { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 13px 0 7px }
.msub { font-size: 12px; color: var(--muted); line-height: 1.4 }
.mfehler { background: #f8e6e2; border: 1px solid #e6bcb5; color: #a8493f; border-radius: 9px; padding: 8px 11px; font-size: 12.5px; margin-top: 10px }
.segmini { display: inline-flex; background: var(--bg); border-radius: 8px; padding: 3px; margin-bottom: 10px; flex-wrap: wrap }
.segmini button { border: 0; background: transparent; padding: 6px 14px; border-radius: 6px; font-weight: 600; font-size: 12.5px; color: var(--muted) }
.segmini button.on { background: var(--surface); color: var(--green-700); box-shadow: var(--shadow) }
.optlist { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow: auto; margin: 0 -4px; padding: 2px 4px }
.opt { border: 1px solid var(--line); background: var(--surface); border-radius: 9px; padding: 11px 13px; text-align: left; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink) }
.opt:hover { border-color: var(--green-100); background: var(--green-050) }
.opt .onr { font-family: Archivo, sans-serif; font-weight: 700; font-size: 9.5px; color: #fff; background: var(--green); padding: 2px 6px; border-radius: 5px }
.opt .osub { margin-left: auto; font-size: 10.5px; color: var(--muted) }
.optcol { flex-direction: column; align-items: flex-start; gap: 3px }
.optmain { display: flex; align-items: center; gap: 6px; width: 100%; flex-wrap: wrap }
.optbe { font-size: 10.5px; color: #7a4e10; background: var(--amber-050); border-radius: 5px; padding: 2px 6px; line-height: 1.2 }
.optgroup { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 9px 4px 4px }
.licmini { font-size: 9px; font-weight: 700; color: var(--muted); background: #eef1f0; border-radius: 3px; padding: 1px 4px; margin-left: 2px }
.statlist { display: flex; flex-wrap: wrap; gap: 7px }
.statopt { border-radius: 9px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line) }
.statopt:hover { filter: brightness(.97) }
.statopt.c-urlaub { background: #e4f1e8; color: #2f7d4b } .statopt.c-krank { background: #f7e3e7; color: #b23a55 }
.statopt.c-arzt { background: #fbeef2; color: #b0567a } .statopt.c-freischicht { background: #eaf0ee; color: #3a6b66 }
.statopt.c-nacht { background: #e7e9f2; color: #33406b } .statopt.c-anreise { background: #f6ecda; color: #9a6a1e }
.statopt.c-lehrgang { background: #ece3f2; color: #6b4a8f } .statopt.c-frei { background: #eef1f0; color: #667470 }
.statopt.c-ausfall { background: #eceeed; color: #66716b } .statopt.c-neu { background: #f6ecda; color: #8a5c12 }
.artpick { border: 1px solid var(--line); border-radius: 9px; padding: 8px 14px; font-size: 13px; font-weight: 600; background: #fff; color: var(--muted) }
.artpick.on { background: var(--green-050); border-color: var(--green); color: var(--green-700) }
.artpick:disabled { cursor: default }
.frow { display: flex; gap: 9px; margin-top: 12px; flex-wrap: wrap }
.field { flex: 1; min-width: 120px }
.field label { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 4px }
.field input[type=text], .field input[type=password], .field input[type=date], .field input[type=time], .field input[type=number], .field select, .field textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 12.5px; font-family: inherit; background: #fff }
.field select { padding: 9px 10px; cursor: pointer }
.field textarea { resize: vertical; min-height: 44px }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--green-100); border-color: var(--green) }
.field input.ro, .field textarea.ro, .field input:disabled, .field select:disabled, .field textarea:disabled { background: #f4f6f5; color: var(--muted); cursor: not-allowed }
.filterbox { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; font-size: 14px; font-family: inherit; margin-bottom: 10px }
.filterbar { display: flex; gap: 6px; margin-bottom: 9px; flex-wrap: wrap }
.filterbar select { flex: 1; min-width: 130px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; font-size: 12px; font-family: inherit; background: #fff }
.chkrow { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; margin-top: 12px }
.chkrow input { width: 17px; height: 17px; accent-color: var(--green) }
.ncheck { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; font-weight: 500 }
.ncheck input { width: 16px; height: 16px; accent-color: var(--green) }
.createbtn { margin-top: 18px; width: 100%; border: 0; background: var(--green); color: #fff; border-radius: 10px; padding: 13px; font-size: 14.5px; font-weight: 700 }
.createbtn:hover { background: var(--green-700) }
.createbtn:disabled { opacity: .6; cursor: wait }
.zweitbtn { border: 1px solid var(--line); background: #fff; color: var(--green-700); border-radius: 9px; padding: 11px 16px; font-size: 13px; font-weight: 600 }
.zweitbtn:hover { background: var(--green-050) }
.saverow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap }
.saverow .createbtn { flex: 1; max-width: 260px; margin-top: 0 }
.delbtn2 { border: 1px solid #eecdd5; background: #fff; color: #b23a55; border-radius: 9px; padding: 11px 16px; font-size: 13px; font-weight: 600 }
.delbtn2:hover { background: #fbeef2 }
.beacht { background: var(--amber-050); border: 1px solid var(--amber-line); color: #7a4e10; border-radius: 9px; padding: 8px 11px; font-size: 12px; font-weight: 500; margin-bottom: 8px }
.rolehint { font-size: 11.5px; color: var(--muted); margin: 7px 2px 4px; line-height: 1.35; background: var(--green-050); border-radius: 7px; padding: 7px 10px }

/* Einträge im Zellen-Dialog */
.eedit { border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; margin-bottom: 7px; background: #fbfcfb }
.eedit.eeprop { border-left: 3px solid #7d6bb0 }
.eedit.eedel { border-left: 3px solid #cf6b5a; opacity: .85 }
.eehead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.eelabel { font-weight: 700; font-size: 12.5px; flex: 1 }
.eeinfo { font-size: 11px; color: var(--muted); margin-top: 4px }
.eefields { display: flex; gap: 6px; margin-top: 8px; align-items: center; flex-wrap: wrap }
.eefields input[type=text], .eefields input[type=time] { border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; font-size: 12px; font-family: inherit }
.eefields .tin { width: 96px }
.eefields .nin { flex: 1; min-width: 130px }
.eefields input:focus { outline: 2px solid var(--green-100); border-color: var(--green) }
.min { width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; font-size: 12px; font-family: inherit; background: #fff; cursor: pointer }
.er { border: 1px solid var(--line); background: #fff; border-radius: 7px; color: var(--muted); padding: 4px 9px; font-size: 11.5px; font-weight: 600 }
.er:hover { color: #b23a55; border-color: #eecdd5 }
.er.ok { border: 1px solid #b6d8c2; background: #e7f3ec; color: #1f7a46 }
.er.no { border: 1px solid #e6bcb5; background: #f8e6e2; color: #a8493f }
.proptag { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; background: #efeaf9; color: #5b4b8a; border: 1px solid #cfc4ea; border-radius: 4px; padding: 1px 5px; margin-left: 4px }
.proptag.del { background: #f8e6e2; color: #a8493f; border-color: #e6bcb5 }
.histlist { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; margin-top: 2px }
.histrow { display: flex; align-items: center; gap: 9px; font-size: 12px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfb; flex-wrap: wrap }
.histdate { color: var(--muted); white-space: nowrap; font-weight: 600; min-width: 118px }
.histwhat { font-weight: 700 }
.hs-status { color: #b23a55 } .hs-proj { color: #164a30 } .hs-night { color: #39456f } .hs-ausfall { color: #66716b }
.histextra { color: var(--muted); font-size: 11px; margin-left: auto; text-align: right }
.welist { display: flex; flex-direction: column; gap: 6px }
.werow { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; font-size: 12.5px; flex-wrap: wrap }
.wewhen { color: var(--muted); font-weight: 600; white-space: nowrap; min-width: 150px }
.wewhat { font-weight: 700; flex: 1 }
.wedone { color: #1f7a46; font-weight: 700 }
.webtn2 { border: 1px solid #d9a94e; background: #f6ecda; color: #8a5c12; border-radius: 7px; padding: 6px 12px; font-size: 12px; font-weight: 700 }
.webtn2:hover { background: #efdfbf }

/* ---------------------------------------------------------------------
   6. Admin, Abrechnung, Auswertung
   --------------------------------------------------------------------- */
.screen { margin: 11px 14px 90px }
.adminwrap { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden }
.adminhd { padding: 16px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(0deg, #fbfcfb, #fff) }
.scr-title { font-family: Archivo, sans-serif; font-weight: 700; font-size: 19px; margin: 0 }
.scr-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; max-width: 760px; line-height: 1.4 }
.subtabs { display: flex; gap: 4px; padding: 10px 14px 0; border-bottom: 1px solid var(--line); overflow-x: auto }
.subtab { border: 0; background: transparent; padding: 8px 14px; border-radius: 8px 8px 0 0; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap }
.subtab:hover { background: var(--green-050) }
.subtab.on { color: var(--green-700); border-bottom-color: var(--green); background: var(--green-050) }
.adminbody { padding: 14px 16px 18px; overflow-x: auto }
.tbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; flex-wrap: wrap }
.tbar .rechts { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; align-items: center }
.tcount { font-size: 12.5px; color: var(--muted); font-weight: 600 }
.addbtn2 { border: 1px solid var(--green); background: var(--green); color: #fff; border-radius: 9px; padding: 8px 14px; font-size: 13px; font-weight: 600; white-space: nowrap }
.addbtn2:hover { background: var(--green-700) }
.addbtn2.hell { background: #fff; color: var(--green-700) }
.addbtn2.hell:hover { background: var(--green-050) }
.exp-btn2 { border: 1px solid var(--line); background: var(--surface); border-radius: 9px; padding: 8px 13px; font-size: 12.5px; font-weight: 600; color: var(--green-700); white-space: nowrap }
.exp-btn2:hover { background: var(--green-050); border-color: var(--green-100) }
table.atable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px }
table.atable th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; padding: 8px 12px; border-bottom: 2px solid var(--line); white-space: nowrap }
table.atable td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle }
table.atable tr:hover td { background: #fafcfb }
table.atable tr.inaktiv td { opacity: .55 }
.qcell { color: var(--muted); font-size: 12px; max-width: 280px }
.muted2 { color: #aab2ae }
.aktionen { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end }
.rowedit { border: 1px solid var(--line); background: #fff; border-radius: 7px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--green-700); white-space: nowrap }
.rowedit:hover { background: var(--green-050); border-color: var(--green-100) }
.rowedit:disabled { color: var(--muted); cursor: not-allowed; background: #f4f6f5 }
.rolebadge { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; white-space: nowrap; display: inline-block; margin: 1px 2px 1px 0 }
.r-admin { background: #efe4f2; color: #7a3f8f } .r-planung { background: #e4ecf5; color: #3f6a9f }
.r-pl { background: var(--green-050); color: var(--green-700) } .r-mitarbeiter { background: #eef1f0; color: #667470 }
.r-rechnung { background: #f6ecda; color: #9a6a1e } .r-gf { background: #e7edea; color: #2f5044 }
.r-extern { background: #efece4; color: var(--umbra) }
.stat-on { color: #2f7d4b; font-weight: 600; font-size: 12px } .stat-off { color: #b23a55; font-weight: 600; font-size: 12px }
.stat-warn { color: #9a6a1e; font-weight: 600; font-size: 12px }
.holadd { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center }
.holadd input[type=date], .holadd input[type=text], .holadd input[type=number], .holadd select { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 12.5px; font-family: inherit; background: #fff }
.holadd input[type=text] { flex: 1; min-width: 200px }
.laenderwahl { display: flex; flex-wrap: wrap; gap: 5px }
.laenderwahl .artpick { padding: 5px 9px; font-size: 12px }
.billsum { display: flex; gap: 8px; flex-wrap: wrap }
.billpill { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 20px }
.s-offen { background: #eef1f0; color: #667470 } .s-zur_abrechnung { background: #f6ecda; color: #9a6a1e } .s-abgerechnet { background: #e4f1e8; color: #2f7d4b }
.billbtn { border: 1px solid var(--line); border-radius: 20px; padding: 5px 13px; font-size: 12px; font-weight: 700; white-space: nowrap }
.billbtn:disabled { cursor: default }
.billbtn.s-zur_abrechnung { border-color: #e6c98f } .billbtn.s-abgerechnet { border-color: #bfe0cc }
.billtable td { font-size: 12.5px }
.zusatzln { font-size: 11px; color: #2f7d4b; margin-top: 2px; line-height: 1.2 }
.stattable td, .stattable th { padding: 9px 12px }
.stattable th.num, .stattable td.num { text-align: center; width: 150px }
.sorth { cursor: pointer; user-select: none }
.sorth:hover { color: var(--green-700) }
.nh-we { color: #2f7d4b } .nh-fe { color: #9a6a1e } .nh-na { color: #39456f }
.statgrp td { background: #eef3f0; font-weight: 700; font-size: 12px; color: var(--umbra); letter-spacing: .02em; padding: 8px 12px; text-transform: uppercase }
.statgrp .dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 8px; vertical-align: 0 }
.statpill { display: inline-block; min-width: 28px; padding: 3px 11px; border-radius: 20px; font-weight: 800; font-size: 14px }
.sp-we { background: #dcefe4; color: #2f7d4b } .sp-fe { background: #f7ead2; color: #9a6a1e } .sp-na { background: #e4e7f4; color: #39456f }
.statbar { display: block; width: 66px; height: 5px; border-radius: 3px; background: #edf1ef; margin: 5px auto 0; overflow: hidden }
.statbarfill { display: block; height: 100% }
.sf-we { background: #3f9f68 } .sf-fe { background: #d29a3a } .sf-na { background: #5866a8 }
.statzero { color: #c0c8c3; font-size: 16px; font-weight: 700 }
.stattot td { border-top: 2px solid #cfd8d3; font-weight: 800; background: #fafcfb; padding: 12px }
.mehrladen { display: block; margin: 12px auto 0 }
.pwliste { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px }
.pwliste th, .pwliste td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line) }
.pwliste .pw { font-family: ui-monospace, Consolas, monospace; font-size: 14px; font-weight: 700; letter-spacing: .02em }
.auswahlliste { max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: 9px; padding: 4px 10px }
.auswahlliste label { display: flex; align-items: center; gap: 9px; padding: 7px 2px; font-size: 13px; border-bottom: 1px solid var(--line-soft) }
.auswahlliste label:last-child { border-bottom: 0 }
.auswahlliste input { width: 17px; height: 17px; accent-color: var(--green) }

/* ---------------------------------------------------------------------
   7. Login, Meine Einsätze, Meldungen
   --------------------------------------------------------------------- */
.login { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px }
.loginkarte { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); width: 100%; max-width: 400px; padding: 28px 26px 24px }
.loginkarte .brand { margin-bottom: 22px }
.loginkarte .brand .mark { font-size: 34px }
.loginkarte .brand .sub { font-size: 11px }
.loginkarte h1 { font-size: 18px; margin: 0 0 4px }
.loginkarte .msub { margin-bottom: 8px }
.loginkarte .field { margin-top: 14px }
.loginkarte .field input { font-size: 16px; padding: 12px 13px }
.loginkarte .createbtn { font-size: 16px; padding: 14px }
.loginfuss { text-align: center; font-size: 11.5px; color: var(--muted); margin-top: 18px }
.pwregeln { font-size: 12px; color: var(--muted); background: var(--green-050); border-radius: 8px; padding: 9px 12px; margin-top: 12px; line-height: 1.45 }

.meine { max-width: 720px; margin: 11px auto 90px; padding: 0 14px }
.meinekopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 6px 2px 12px; flex-wrap: wrap }
.meinekopf h2 { font-family: Archivo, sans-serif; font-size: 20px; margin: 0 }
.tagkarte { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; overflow: hidden }
.tagkarte.heute { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) }
.tagkarte.wochenende .tagkopf { background: #f4f6f3 }
.tagkopf { display: flex; align-items: baseline; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--line-soft); background: #fbfcfb }
.tagkopf .tagname { font-weight: 700; font-family: Archivo, sans-serif; font-size: 14px }
.tagkopf .tagdatum { color: var(--muted); font-size: 12.5px }
.tagkopf .heutetag { margin-left: auto; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--green); border-radius: 10px; padding: 1px 8px }
.tagkopf .feiertag { font-size: 10.5px; font-weight: 700; color: #9a6a1e }
.tageintrag { padding: 11px 14px; display: flex; flex-direction: column; gap: 4px; border-left: 4px solid var(--green) }
.tageintrag + .tageintrag { border-top: 1px solid var(--line-soft) }
.tageintrag .was { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.tageintrag .details { font-size: 13px; color: var(--umbra); display: flex; flex-wrap: wrap; gap: 4px 14px }
.tageintrag .kollegen { font-size: 12px; color: var(--muted) }
.tageintrag.status { border-left-color: #9aa4a0 }
.tageintrag.nacht { border-left-color: #39456f }
.tageintrag.leer { color: var(--muted); font-size: 13px; border-left-color: transparent }
.tageintrag .webtn2 { align-self: flex-start; margin-top: 4px; padding: 9px 16px; font-size: 13px }

.meldung { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 100; background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 10px; font-size: 13.5px; box-shadow: 0 10px 30px rgba(0,0,0,.3); max-width: calc(100vw - 32px); text-align: center }
.meldung.fehler { background: #a8493f }
.laden { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; background: linear-gradient(90deg, transparent, var(--green), transparent); background-size: 50% 100%; animation: ladebalken 1s linear infinite }
@keyframes ladebalken { from { background-position: -50% 0 } to { background-position: 150% 0 } }

/* ---------------------------------------------------------------------
   8. Handy (schmale Bildschirme)
   Gilt auch für Handys im Querformat: Die sind zwar breit, aber so
   niedrig, dass ein „klebender“ Kopf fast den ganzen Bildschirm füllt.
   --------------------------------------------------------------------- */
@media (max-width: 760px), (max-height: 560px) {
  /* Kopf: kompakt und nicht „klebend“ – so bleibt Platz für den Plan */
  header { position: static }
  .hbar { padding: 8px 10px; gap: 8px }
  .brand .mark { font-size: 19px }
  .brand .sub { font-size: 7px; letter-spacing: .26em }
  .apptitle, .hdiv, .spacer { display: none }
  .kontomenue { margin-left: auto }
  .kontoknopf .knam { display: none }
  .kontoknopf { padding: 4px }
  .rollenwahl span { display: none }
  .rollenwahl select { padding: 6px 24px 6px 9px; font-size: 12px }
  /* Reiter: eine Zeile, seitlich wischbar */
  .seg { order: 10; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none }
  .seg::-webkit-scrollbar { display: none }
  .seg button { padding: 8px 12px }
  .hbar2 { padding: 0 10px 8px; gap: 6px }
  .wknav { flex: 1 1 auto; justify-content: space-between }
  .wklabel { min-width: 0 !important; flex: 1 }
  .wknav > button { padding: 9px 13px }
  .nb-btn { display: none }
  .filter-btn { display: inline-block }
  /* Filter & Werkzeuge nur nach Tippen auf „Filter“ */
  .tools { display: none; flex: 1 0 100%; gap: 6px }
  header.filter-offen .tools { display: flex }
  .tools .search, .tools .hfilter { flex: 1 1 45%; max-width: none; width: auto }
  .strip { padding: 0 10px }
  /* Tabelle: schmalere Spalten, volle Bildschirmhöhe zum Scrollen */
  .tablewrap { margin: 8px 6px; border-radius: 10px; max-height: calc(100dvh - 12px) }
  /* Beim Scrollen nach unten verschwindet der Kopf (siehe start.js) */
  body.kopf-weg header { display: none }
  body.kopf-weg .tablewrap { margin-top: 6px }
  /* feste Spaltenbreiten – lange Projektnamen werden mit „…“ gekürzt statt die Spalte zu verbreitern */
  /* width:1px + fixed: Die Tabelle wird genau so breit wie die Summe der Spalten */
  table.plan { min-width: 0; width: 1px; table-layout: fixed }
  table.plan col.dcol { width: 92px }
  table.plan col:first-child { width: 104px !important }
  .namecol { width: 104px; min-width: 104px }
  /* Projektübersicht: etwas breitere Namensspalte (Nummer + Projektname) */
  table.plan.projekttabelle col:first-child { width: 150px !important }
  .projekttabelle .namecol { width: 150px; min-width: 150px }
  .projekttabelle .pnr { display: inline-block; margin-bottom: 2px }
  .pchip .lbl, .cin .main { max-width: 100% }
  td.namecol { padding: 6px 6px 6px 9px }
  .nm { font-size: 12.5px }
  .cin { padding: 5px 6px }
  .cin .main { font-size: 12px }
  thead th .wd { font-size: 12px }
  .legend { margin: 0 6px 60px }
  .screen { margin: 8px 6px 60px }
  .adminbody { padding: 10px }
  .tbar .rechts { margin-left: 0 }
  /* Dialoge kommen von unten („Bottom Sheet“) */
  .backdrop { align-items: flex-end; padding: 0 }
  .modal, .modal.breit { max-width: none; border-radius: 18px 18px 0 0; max-height: 92dvh }
  /* Eingabefelder mind. 16px – sonst zoomt das iPhone beim Tippen hinein */
  input, select, textarea, .field input[type=text], .field input[type=password], .field input[type=date], .field input[type=time], .field select, .field textarea, .filterbox, .search, .eefields input[type=text], .eefields input[type=time], .min { font-size: 16px !important }
  .opt { padding: 13px }
  .pendrow { flex-wrap: wrap }
  .pendact { width: 100%; justify-content: flex-end }
  .pendok, .pendno { padding: 8px 13px; font-size: 12.5px }
  .er { padding: 7px 11px; font-size: 12.5px }
  .meldung { bottom: 14px }
}

/* ---------------------------------------------------------------------
   9. Drucken (z. B. Liste mit Startpasswörtern)
   --------------------------------------------------------------------- */
@media print {
  body.drucke-dialog > *:not(.backdrop) { display: none !important }
  body.drucke-dialog .backdrop { position: static; background: none; padding: 0; display: block }
  body.drucke-dialog .modal { box-shadow: none; max-height: none; overflow: visible; max-width: none }
  body.drucke-dialog .mclose, body.drucke-dialog .nichtdrucken { display: none !important }
}