/* Promundius Cockpit – Gestaltung aus dem abgestimmten Mockup (entwuerfe/promundius-cockpit_mockup.html) */
:root{
  --ink:#16212F; --ink-2:#48556A; --bg:#F2F4F6; --surface:#FFFFFF;
  --line:#DDE3EA; --line-2:#EDF0F4;
  --ok:#0E7C66; --ok-bg:#E4F2EE;
  --warn:#C0561B; --warn-bg:#FBEDE3;
  --akzent:#1F3A5F;
  --k1:#0E7C66; --k2:#2C5F8A; --k3:#7A5FA0; --k4:#B0813B;
  --intern:#8A94A3; --fahrt:#C2C9D3;
  --radius:8px;
  font-size:16px;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{min-height:100%}
body{
  font-family:"Segoe UI", system-ui, -apple-system, sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.45;
  font-variant-numeric:tabular-nums;
}
button{font:inherit; cursor:pointer}
input,select,textarea{font:inherit; color:var(--ink)}
input:not([type=checkbox]):not([type=color]),select,textarea{border:1px solid var(--line); border-radius:6px; padding:.4rem .5rem; background:#fff}
a{color:var(--akzent)}
code{font-size:.85em; background:var(--line-2); padding:.05rem .3rem; border-radius:4px}
form.inline{display:inline}
.nowrap{white-space:nowrap}
.grow{flex:1}

/* ---------- Rahmen ---------- */
.top{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; background:var(--kopf,#008391);   /* Farbe wählt der Kunde: Einstellungen → Darstellung */ color:#fff; padding:.55rem 1rem}
.brand{font-weight:700; letter-spacing:.14em; font-size:.95rem}
.brand small{display:block; font-weight:400; letter-spacing:.02em; font-size:.72rem; opacity:.75}
.brand.dunkel{color:var(--akzent); margin-bottom:1.2rem}
.top .spacer{flex:1}
.userchip{font-size:.85rem; background:var(--kopf-2,#006B77); border-radius:999px; padding:.28rem .8rem}
.mock-hint{font-size:.72rem; background:#C0561B; border-radius:4px; padding:.1rem .5rem}
.menuknopf{display:none; background:none; border:none; color:#fff; font-size:1.3rem}
.top .btn.ghost.hell{color:#fff; border-color:var(--kopf-3,#4FA9B3)}
.top .btn.ghost.hell:hover{background:var(--kopf-2,#006B77)}

.layout{display:flex; min-height:calc(100vh - 56px)}
nav.side{width:215px; flex:none; background:var(--surface); border-right:1px solid var(--line); padding:.6rem 0 1rem; display:flex; flex-direction:column}
nav.side a{display:block; text-decoration:none; padding:.5rem 1.1rem; color:var(--ink-2); font-size:.92rem; border-left:3px solid transparent}
nav.side a:hover{background:var(--line-2)}
nav.side a.active{color:var(--ink); font-weight:600; border-left-color:var(--akzent); background:var(--line-2)}
nav.side .navcap{font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); padding:1rem 1.1rem .3rem}
nav.side .release{margin-top:auto; padding:1.2rem 1.1rem 0; font-size:.7rem; color:var(--ink-2)}
nav.side .release.warnung{color:var(--warn); margin-top:.3rem; padding-top:0}
.badge{display:inline-block; background:var(--warn); color:#fff; border-radius:999px; font-size:.7rem; padding:0 .45rem; margin-left:.3rem; font-weight:600}
main{flex:1; padding:1.4rem clamp(1rem,3vw,2.2rem); max-width:1180px; min-width:0}
h1{font-size:1.35rem; margin-bottom:.2rem}
.sub{color:var(--ink-2); font-size:.9rem; margin-bottom:1.2rem}
.sub.inline{display:inline; margin:0 0 0 .6rem; font-weight:400; font-size:.85rem}
h2{font-size:1.02rem; margin:1.4rem 0 .6rem}
.kopfzeile{display:flex; justify-content:space-between; align-items:center; gap:.8rem; flex-wrap:wrap; margin-bottom:.4rem}
.blaettern{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center}
.knopfzeile{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem}
.zweispaltig{display:grid; grid-template-columns:1fr 1fr; gap:1rem}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; margin-bottom:1rem}
.tabelle-scroll{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:.9rem}
th{text-align:left; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); padding:.45rem .6rem; border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:.5rem .6rem; border-bottom:1px solid var(--line-2); vertical-align:middle}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right; white-space:nowrap}
td.aktionen{white-space:nowrap; text-align:right}
td.alt{color:var(--ink-2); text-decoration:line-through; text-decoration-color:rgba(0,0,0,.2)}
tr.inaktiv td{opacity:.55}
.btn{display:inline-block; text-decoration:none; background:var(--akzent); color:#fff; border:1px solid var(--akzent); border-radius:6px; padding:.45rem .95rem; font-size:.88rem; line-height:1.3}
.btn:hover{background:#2C4A73}
.btn.ghost{background:none; color:var(--akzent); border:1px solid var(--line)}
.btn.ghost:hover{background:var(--line-2)}
.btn.small{padding:.25rem .6rem; font-size:.8rem}
.btn:disabled{opacity:.45; cursor:default}
.linkknopf{background:none; border:none; color:var(--akzent); text-decoration:underline; font-size:.8rem; padding:0 .2rem}
.pill{display:inline-block; font-size:.74rem; padding:.12rem .55rem; border-radius:999px; white-space:nowrap; border:1px solid transparent}
.pill.ok{background:var(--ok-bg); color:var(--ok)}
.pill.warn{background:var(--warn-bg); color:var(--warn)}
.pill.neutral{background:var(--line-2); color:var(--ink-2)}
.pill.billed{background:#E8EBF2; color:var(--akzent)}
.pillbtn{border:1px dashed transparent; cursor:pointer}
.pillbtn:hover{border-color:currentColor}
input.mini{width:4.4rem; padding:.22rem .35rem !important; text-align:right}
input.mini.wide{width:8.5rem; text-align:left}
input.feld{width:100%; min-width:9rem; padding:.25rem .4rem !important}
.katform{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center}
.katform label,label.schalter,label.klein{font-size:.88rem; display:inline-flex; gap:.35rem; align-items:center}
.counter{font-size:.74rem; color:var(--ink-2)}
.filterbar{display:flex; flex-direction:column; gap:.5rem}
.filterzeile{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center}
.suchfeld{width:100%; padding:.5rem .7rem !important}
.chips{display:flex; gap:.35rem; flex-wrap:wrap; align-items:center}
.chips .cap{font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); min-width:6.2rem}
.chip{display:inline-block; text-decoration:none; border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:.22rem .75rem; font-size:.8rem; color:var(--ink-2); cursor:pointer; user-select:none}
.chip:hover{background:var(--line-2)}
.chip.on{background:var(--akzent); border-color:var(--akzent); color:#fff}
.chips input[type=date]{padding:.15rem .35rem !important; font-size:.8rem}

/* ---------- Signatur: Tagesbilanz ---------- */
.bilanz{display:flex; height:14px; border-radius:7px; overflow:hidden; background:var(--line-2); min-width:160px}
.bilanz span{display:block; height:100%}
.bilanz .offen,.legend i.offen{background:repeating-linear-gradient(135deg, var(--warn-bg) 0 5px, #F3CDAF 5px 10px)}
.legend{display:flex; gap:1rem; flex-wrap:wrap; font-size:.76rem; color:var(--ink-2); margin-top:.6rem}
.legend i{display:inline-block; width:.75rem; height:.75rem; border-radius:3px; margin-right:.3rem; vertical-align:-1px}

/* ---------- Monat ---------- */
.dayrow{cursor:pointer}
.dayrow:hover td{background:var(--line-2)}
.daydate{white-space:nowrap; font-weight:600}
.daydate a{color:inherit; text-decoration:none}
.weekrow td{background:var(--line-2); padding:.35rem .6rem}
.kwlabel{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); font-weight:700; margin-right:.6rem}

/* ---------- Tag ---------- */
.dayhead{display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap}
.bignum{font-size:1.7rem; font-weight:700}
.bignum small{font-size:.85rem; font-weight:400; color:var(--ink-2)}
.stamps{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem}
.stamp{font-size:.78rem; background:var(--line-2); border-radius:6px; padding:.2rem .55rem; color:var(--ink-2)}
.banner{border-radius:var(--radius); padding:.7rem .9rem; font-size:.88rem; margin-bottom:1rem; display:flex; gap:.8rem; align-items:center; flex-wrap:wrap}
.banner.warn{background:var(--warn-bg); color:#7A3810; border:1px solid #EFCBB2}
.banner.info{background:#E8EBF2; color:var(--akzent); border:1px solid #CBD4E4}
.banner.ok{background:var(--ok-bg); color:#0A5A4A; border:1px solid #BFE0D6}
.posform{display:grid; grid-template-columns:1.4fr 1.4fr .9fr .9fr; gap:.6rem; margin-top:.7rem}
.posform label{display:flex; flex-direction:column; gap:.2rem; font-size:.78rem; color:var(--ink-2)}
.posform input,.posform select{width:100%}
.posform textarea{flex:1; min-width:220px; resize:vertical}
.posform .full{grid-column:1 / -1; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}
.posform .full input{flex:1; min-width:220px}
.mitknopf{display:flex; gap:.3rem}
.dot{display:inline-block; width:.65rem; height:.65rem; border-radius:3px; margin-right:.4rem; vertical-align:-1px}
.linkicon{font-size:.8rem; white-space:nowrap}
.linkzeile{display:flex; gap:.4rem; align-items:center; margin-top:.25rem}
.linkinput{flex:1; width:100%; min-width:150px; padding:.22rem .4rem !important; font-size:.8rem; color:var(--ink-2)}
.linkinput:focus{color:var(--ink)}
table.positionen td{vertical-align:top}
.fotozeile{display:flex; gap:.35rem; flex-wrap:wrap; align-items:center; margin-top:.3rem}
.thumbwrap{position:relative; display:inline-block}
.thumb{width:46px; height:46px; object-fit:cover; border-radius:5px; border:1px solid var(--line); cursor:zoom-in; display:block}
.thumbweg button{position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; border:none; background:var(--ink); color:#fff; font-size:.6rem; line-height:18px; padding:0; opacity:0}
.thumbwrap:hover .thumbweg button,.thumbweg button:focus{opacity:1}
.fotoadd{display:inline-flex; align-items:center; gap:.3rem; border:1px dashed var(--line); border-radius:6px; padding:.25rem .6rem; font-size:.8rem; color:var(--ink-2); cursor:pointer; white-space:nowrap}
.fotoadd:hover{background:var(--line-2)}
#lightbox{position:fixed; inset:0; background:rgba(22,33,47,.85); display:none; align-items:center; justify-content:center; z-index:50; cursor:zoom-out}
#lightbox.show{display:flex}
#lightbox img{max-width:92vw; max-height:92vh; border-radius:8px; background:#fff}
.mailvorschau{background:var(--line-2); border:1px solid var(--line); border-radius:6px; padding:.7rem .9rem; font-size:.82rem; white-space:pre-wrap; color:var(--ink-2); word-break:break-all}

/* ---------- Statistik ---------- */
.quotebar{position:relative; height:12px; background:var(--line-2); border-radius:6px; overflow:hidden; min-width:120px; display:inline-block; width:100%; max-width:220px; vertical-align:middle}
.quotebar span{position:absolute; inset:0 auto 0 0; background:var(--ok); border-radius:6px}
.rank{font-weight:700; color:var(--ink-2); width:2rem}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.8rem; margin-bottom:1rem}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:.8rem 1rem}
.kpi .v{font-size:1.45rem; font-weight:700}
.kpi .l{font-size:.76rem; color:var(--ink-2)}

/* ---------- Anmeldung ---------- */
body.schlicht{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:1rem}
.schlicht-kasten{background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--akzent); border-radius:var(--radius); padding:1.6rem; width:100%; max-width:380px}
.schlicht-fuss{font-size:.72rem; color:var(--ink-2); margin-top:1rem}
.stapel{display:flex; flex-direction:column; gap:.8rem}
.stapel label{display:flex; flex-direction:column; gap:.25rem; font-size:.85rem; color:var(--ink-2)}

/* ---------- Druck / PDF ---------- */
body.druck{background:#fff; padding:1.5rem; max-width:1000px; margin:0 auto}
.druckleiste{display:flex; gap:.6rem; margin-bottom:1.2rem}
.druckkopf{border-bottom:2px solid var(--akzent); padding-bottom:.6rem; margin-bottom:1rem}
.druckkopf .sub{margin:0; font-size:.8rem}
.druckkunde{margin-bottom:1.4rem; break-inside:avoid-page}
.druckkunde h2{margin:0 0 .4rem; font-size:1rem}
.druckkunde table{font-size:.82rem}
tr.summe td{font-weight:700; border-top:1px solid var(--ink)}
@media print{
  .nicht-drucken{display:none}
  body.druck{padding:0}
  @page{margin:15mm}
}

:focus-visible{outline:2px solid var(--akzent); outline-offset:2px}
.js .nurohnejs{display:none}

@media (max-width:820px){
  .menuknopf{display:block}
  .mock-hint,.userchip{display:none}
  .layout{flex-direction:column}
  nav.side{display:none; width:100%; border-right:none; border-bottom:1px solid var(--line)}
  body.menu-offen nav.side{display:flex}
  .posform{grid-template-columns:1fr 1fr}
  .zweispaltig{grid-template-columns:1fr}
  .bignum{font-size:1.35rem}
}
@media (max-width:520px){
  .posform{grid-template-columns:1fr}
}

/* ---------- Einstellungen als Kacheln ---------- */
.kacheln{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.8rem}
.kachel{display:flex; flex-direction:column; gap:.35rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; text-decoration:none; color:var(--ink)}
.kachel:hover{border-color:var(--akzent); box-shadow:0 1px 4px rgba(22,33,47,.08)}
.kachel-titel{font-weight:600; display:flex; justify-content:space-between; gap:.5rem; align-items:center}
.kachel-text{font-size:.85rem; color:var(--ink-2)}
.stapel.schmal{max-width:520px}
details summary{cursor:pointer; margin:.2rem 0 .5rem}
details label{display:flex; flex-direction:column; gap:.25rem; font-size:.85rem; color:var(--ink-2); margin-bottom:.6rem}

/* ---------- Anmeldeseite im Auftritt von promundius.com (04.10.2026) ----------
   Nur hier Logo, Petrol #008391 / Grau #575f64 aus dem Logo und Poppins (OFL, selbst gehostet).
   Nach der Anmeldung bleibt die Kopfzeile des Mockups (Christian, 04.10.2026). */
@font-face{font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap; src:url(schrift/poppins-400.woff2) format("woff2")}
@font-face{font-family:"Poppins"; font-style:normal; font-weight:500; font-display:swap; src:url(schrift/poppins-500.woff2) format("woff2")}
@font-face{font-family:"Poppins"; font-style:normal; font-weight:600; font-display:swap; src:url(schrift/poppins-600.woff2) format("woff2")}
body.schlicht{--akzent:#008391; --ink:#2C2D33; --ink-2:#575F64; --bg:#F6F7F7; --line:#E1E5E7;
  font-family:"Poppins", "Segoe UI", system-ui, sans-serif}
body.schlicht .btn:hover{background:#006B77; border-color:#006B77}
body.schlicht .banner.info{background:#E3F2F3; color:#00606B; border-color:#BFE0E4}
.schlicht-kasten{padding:1.8rem; max-width:400px}
.schlicht-logo{display:block; width:100%; max-width:240px; height:auto; margin-bottom:.4rem}
.schlicht-app{font-size:.8rem; color:var(--ink-2); margin-bottom:1.4rem}
.druckkopf{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem}
.druckkopf img{height:48px; width:auto}

/* Logo von Promundius oben links in der Kopfzeile – weiße Fassung, aus dem Original erzeugt */
.kopflogo{display:block; line-height:0}
.kopflogo img{height:42px; width:auto}
.kopfname{font-size:.78rem; opacity:.8; border-left:1px solid var(--kopf-3,#4FA9B3); padding-left:1rem}
@media (max-width:820px){ .kopfname{display:none} .kopflogo img{height:34px} }

/* Module: Stufe Test (nur KPNS sieht es) */
.pill.test{background:#FFF4DC; color:#8A5A00; font-size:.66rem; padding:.05rem .4rem; vertical-align:1px}
.modulwahl{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden}
.modulwahl button{border:none; background:var(--surface); padding:.28rem .8rem; font-size:.8rem; color:var(--ink-2); border-right:1px solid var(--line)}
.modulwahl button:last-child{border-right:none}
.modulwahl button:hover{background:var(--line-2)}
.modulwahl button.s0.on{background:#EEF0F3; color:#4B5563; font-weight:600}
.modulwahl button.s1.on{background:#FFF4DC; color:#8A5A00; font-weight:600}
.modulwahl button.s2.on{background:var(--ok-bg); color:var(--ok); font-weight:600}
.farbwahl{display:flex; gap:.8rem; flex-wrap:wrap}
.farbwahl label{display:flex; flex-direction:column; gap:.4rem; border:2px solid var(--line); border-radius:var(--radius); padding:.6rem; cursor:pointer; font-size:.85rem; min-width:220px}
.farbwahl label:has(input:checked){border-color:var(--akzent)}
.farbwahl .muster{height:34px; border-radius:6px; display:flex; align-items:center; padding:0 .6rem}
.farbwahl .muster img{height:24px}
.versteckt{display:none !important}
.gedimmt{opacity:.5}

/* Rückrufe */
select.prio{padding:.2rem .35rem; font-size:.8rem; border-radius:999px}
select.prio.warn{background:var(--warn-bg); color:var(--warn); border-color:#EFCBB2}
select.prio.gelb{background:#FFF4DC; color:#8A5A00; border-color:#F3DFAE}
details.card > summary{list-style:none; display:inline-block}
details.card > summary::-webkit-details-marker{display:none}
details.card[open] > summary{margin-bottom:.4rem}

/* Schalter aus | an im Stil der Module-Seite (Mitarbeiter „aktiv“, Christian 04.10.2026) */
.schalter-wahl{margin-top:.3rem}
td > .schalter-wahl{margin-top:0}
.schalter-wahl label{padding:.22rem .75rem; font-size:.8rem; color:var(--ink-2); border-right:1px solid var(--line); cursor:pointer; background:var(--surface)}
.schalter-wahl label:last-child{border-right:none}
.schalter-wahl label:hover{background:var(--line-2)}
.schalter-wahl input{position:absolute; opacity:0; width:1px; height:1px}
.schalter-wahl label:has(input:checked).s0{background:#EEF0F3; color:#4B5563; font-weight:600}
.schalter-wahl label:has(input:checked).s2{background:var(--ok-bg); color:var(--ok); font-weight:600}
.schalter-wahl label:has(input:focus-visible){outline:2px solid var(--akzent); outline-offset:-2px}

/* „Ansicht als“ in der Kopfzeile – nur Admins (wie im Mockup) */
.ansichtwahl label{font-size:.75rem; opacity:.85; margin-right:.35rem}
.ansichtwahl select{background:var(--kopf-2,#006B77) !important; color:#fff; border:1px solid var(--kopf-3,#4FA9B3) !important; border-radius:6px; padding:.25rem .4rem !important; font-size:.8rem; max-width:170px}
@media (max-width:820px){ .ansichtwahl label{display:none} }

/* Entwicklung: Fehler & Wünsche */
.meldung-text{white-space:pre-wrap; font-size:.9rem; margin-top:.5rem}
details.card > summary.meldung-kopf{display:block; cursor:pointer}
.stapel .katform label{flex-direction:row; color:var(--ink); font-size:.88rem}
textarea.antwort{width:100%; resize:vertical; font:inherit}

/* Elektroprüfung: Prüfkalender (Monat mit KW-Spalte) */
table.kalender{table-layout:fixed; min-width:720px}
table.kalender th{text-align:center}
table.kalender td{vertical-align:top; height:84px; border:1px solid var(--line-2); padding:.25rem .3rem}
table.kalender td.kw,table.kalender th.kw{width:2.6rem; text-align:center; color:var(--ink-2); font-size:.75rem; background:var(--line-2)}
table.kalender td.fremd{background:#FAFBFC; color:#9AA2A6}
table.kalender td.frei{background:#F7F8FA}
table.kalender td.heute{outline:2px solid var(--akzent); outline-offset:-2px}
.tagnr{font-size:.78rem; font-weight:600; margin-bottom:.2rem}
.tagnr small{font-weight:400; color:var(--warn)}
a.termin{display:block; font-size:.74rem; line-height:1.25; padding:.15rem .3rem; margin-bottom:.15rem; border-left:4px solid var(--akzent);
  background:var(--surface); border-radius:3px; box-shadow:0 0 0 1px var(--line); color:var(--ink); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
a.termin:hover{background:var(--line-2)}
a.termin.erledigt{opacity:.55; text-decoration:line-through}
.pill.gelb{background:#FFF4DC; color:#8A5A00}

/* Kacheln als Filter (Elektroprüfung → Fällig & ohne Termin) */
a.kpi-link{display:block; text-decoration:none; color:var(--ink); cursor:pointer}
a.kpi-link:hover{border-color:var(--akzent)}
a.kpi-link.on{border-color:var(--akzent); box-shadow:inset 0 0 0 1px var(--akzent); background:#F4FAFA}