/* Produktionsplaner Esselmann Polen – Styles
   Optik nach Vorgabe Produktionsplaner-Konzept-GL.html / sea-deck.html:
   Navy #002554 · Orange #ef7d00 · Space Grotesk (Headlines) + IBM Plex Mono (Text),
   eckige Flächen, feine Linien, Raster-Hintergrund.
   Themes: dunkel (Standard, wie Deck) / hell / kontrast · Schriftgrößen A/A+/A++ */

@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700;
  src: url('fonts/spacegrotesk.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
  src: url('fonts/plexmono-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500;
  src: url('fonts/plexmono-500.woff2') format('woff2'); font-display: swap; }

:root, html[data-theme="dunkel"] {
  /* Panelfarben wie im GL-Konzept: dunkle Glasflächen auf Navy-Deep */
  --bg:#03101f; --bg2:rgba(0,37,84,.35); --panel:rgba(3,16,31,.78); --panel2:rgba(6,32,59,.55);
  --ink:#eef2f7; --muted:#8ba0b8; --border:rgba(198,198,198,.16); --border2:rgba(198,198,198,.34);
  --navy:#002554; --orange:#ef7d00; --orange-ink:#03101f;
  --ok:#5fae7d; --warn:#e0a13a; --red:#c45b5b; --blue:#5b86b8;
  --okbg:rgba(95,174,125,.14); --warnbg:rgba(224,161,58,.14); --redbg:rgba(196,91,91,.16);
  --shadow:none;
  --topbar:rgba(3,16,31,.92); --topbar-ink:#eef2f7;
  --grid-line:rgba(0,37,84,.55); --glow:rgba(239,125,0,.10);
}
html[data-theme="hell"] {
  --bg:#eef1f5; --bg2:#e2e7ee; --panel:#ffffff; --panel2:#f4f6f9;
  --ink:#0e2340; --muted:#5b6b80; --border:#d4dae3; --border2:#b7c1cf;
  --navy:#002554; --orange:#ef7d00; --orange-ink:#ffffff;
  --ok:#2e7d4f; --warn:#a86f10; --red:#b53a3a; --blue:#3d6ea5;
  --okbg:#e2f2e9; --warnbg:#f7ecd8; --redbg:#f6e2e2;
  --shadow:0 1px 3px rgba(14,35,64,.07);
  --topbar:#002554; --topbar-ink:#eef2f7;
  --grid-line:rgba(0,37,84,.07); --glow:rgba(239,125,0,.06);
}
html[data-theme="kontrast"] {
  --bg:#000000; --bg2:#000000; --panel:#000000; --panel2:#101010;
  --ink:#ffffff; --muted:#e8e8e8; --border:#ffffff; --border2:#ffffff;
  --navy:#000000; --orange:#ffb000; --orange-ink:#000000;
  --ok:#00e070; --warn:#ffd000; --red:#ff6060; --blue:#66b3ff;
  --okbg:#00381c; --warnbg:#3d3000; --redbg:#420000;
  --shadow:none;
  --topbar:#000000; --topbar-ink:#ffffff;
  --grid-line:transparent; --glow:transparent;
}

html { font-size:14.5px; }
html[data-fs="1"] { font-size:16.5px; }
html[data-fs="2"] { font-size:19px; }

* { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:"IBM Plex Mono", Consolas, monospace;
  background:var(--bg); color:var(--ink); min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
/* Deck-Hintergrund: Glow + perspektivisches Raster */
body::before {
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(ellipse 75% 55% at 50% -5%, var(--glow), transparent 70%), var(--bg);
}
body::after {
  content:""; position:fixed; left:-25%; right:-25%; bottom:-40%; height:110%; z-index:-1; pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:54px 54px;
  transform:perspective(440px) rotateX(63deg); transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(transparent, #000 55%); mask-image:linear-gradient(transparent, #000 55%);
}
html[data-theme="kontrast"] body::before, html[data-theme="kontrast"] body::after { display:none; }

button { font:inherit; cursor:pointer; }
input, select, textarea {
  font:inherit; color:var(--ink); background:var(--panel);
  border:1px solid var(--border2); padding:.42rem .6rem;
}
/* Dropdowns im Deck-Look: dunkler Grund, orange Kontur, orange beim Hover */
select {
  background:var(--panel2); border:1px solid var(--orange); cursor:pointer;
  font-family:"Space Grotesk",sans-serif;
}
select:hover { background:color-mix(in srgb, var(--orange) 16%, var(--panel2)); color:var(--ink); }
select option, select optgroup { background:#06203b; color:#eef2f7; }
html[data-theme="hell"] select option { background:#ffffff; color:#0e2340; }
html[data-theme="kontrast"] select option { background:#000; color:#fff; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline:2px solid var(--orange); outline-offset:1px; }
a { color:var(--blue); }
h1,h2,h3 { font-family:"Space Grotesk", "Segoe UI", sans-serif; font-weight:400; letter-spacing:-.02em; }
h1 b, h2 b { color:var(--orange); font-weight:500; }

.mono { font-family:"IBM Plex Mono", Consolas, monospace; }
.sg { font-family:"Space Grotesk", sans-serif; }
.muted { color:var(--muted); }
.small { font-size:.78rem; }
.right { text-align:right; }
.nowrap { white-space:nowrap; }
.flex { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.grow { flex:1; }
.mt { margin-top:1rem; } .mts { margin-top:.5rem; }
.eyebrow { font-family:"Space Grotesk",sans-serif; font-size:.72rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; color:var(--orange); }

/* ---------- Login ---------- */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; }
.login-box { width:min(410px, 92vw); background:var(--panel); border:1px solid var(--border); padding:2.2rem; box-shadow:var(--shadow); }
.login-box h1 { font-size:1.55rem; font-weight:300; margin:1rem 0 .2rem; letter-spacing:-.03em; }
.login-box .sub { color:var(--muted); font-size:.8rem; margin-bottom:1.4rem; letter-spacing:.06em; }
.login-box label { display:block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:.9rem 0 .3rem; }
.login-box input { width:100%; }
.login-err { color:var(--red); font-size:.82rem; margin-top:.8rem; min-height:1.2em; }

.wordmark { font-family:"Space Grotesk",sans-serif; font-weight:500; letter-spacing:.22em; font-size:.8rem; text-transform:uppercase; }
.wordmark b { color:var(--orange); }

/* ---------- Shell ---------- */
.topbar {
  position:fixed; top:0; left:0; right:0; height:3.2rem; z-index:50;
  background:var(--topbar); color:var(--topbar-ink); backdrop-filter:blur(4px);
  display:flex; align-items:center; gap:1rem; padding:0 1rem;
  border-bottom:1px solid var(--orange);
}
.topbar .wordmark { color:var(--topbar-ink); }
.topbar .spacer { flex:1; }
.seg { display:flex; border:1px solid var(--border2); }
.seg button {
  background:transparent; color:var(--topbar-ink); border:none; padding:.3rem .6rem;
  font-size:.72rem; opacity:.7; font-family:"Space Grotesk",sans-serif; letter-spacing:.05em;
}
.seg button.on { background:var(--orange); color:var(--orange-ink); opacity:1; font-weight:500; }
.iconbtn { position:relative; background:transparent; border:1px solid transparent; color:var(--topbar-ink); font-size:1rem; padding:.3rem .45rem; }
.iconbtn:hover { border-color:var(--border2); }
.badge-dot { position:absolute; top:-2px; right:-2px; background:var(--orange); color:var(--orange-ink); font-size:.6rem; font-weight:700; padding:0 .32em; min-width:1.1em; font-family:"Space Grotesk",sans-serif; }
.userchip { font-size:.72rem; opacity:.8; letter-spacing:.02em; }

.topnav {
  position:fixed; top:3.2rem; left:0; right:0; height:2.55rem; z-index:48;
  background:var(--panel); backdrop-filter:blur(4px); border-bottom:1px solid var(--border);
  display:flex; align-items:stretch; justify-content:center; gap:.15rem; padding:0 .9rem;
  overflow-x:auto; scrollbar-width:thin;
}
.navlink {
  display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap;
  background:transparent; border:none; border-bottom:2px solid transparent; padding:0 .8rem;
  color:var(--muted); font-size:.8rem; font-family:"Space Grotesk",sans-serif; letter-spacing:.03em;
}
.navlink:hover { color:var(--ink); border-bottom-color:var(--border2); }
.navlink.on { color:var(--orange); border-bottom-color:var(--orange); font-weight:500; }
.navlink .ico { width:1.1em; text-align:center; }
.layout { display:flex; padding-top:5.75rem; min-height:100vh; }
.content { flex:1; padding:1.3rem 1.5rem 3rem; max-width:105rem; min-width:0; margin:0 auto; }
.content.wide { max-width:none; }
.page-h { display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap; margin-bottom:1rem; }
.page-h .eyebrow { width:100%; margin-bottom:-.35rem; }
.page-h h1 { font-size:1.5rem; font-weight:300; }
.page-h .sub { color:var(--muted); font-size:.78rem; letter-spacing:.04em; }

@media (max-width:880px){
  .content { padding:1rem; }
}
@media (max-width:980px){
  .topbar { gap:.45rem; }
  .topbar .userchip, .topbar .wordmark { display:none; }
}

/* ---------- Panels / Cards ---------- */
.panel { background:var(--panel); border:1px solid var(--border); box-shadow:var(--shadow); }
.panel .p-h { display:flex; align-items:center; gap:.7rem; padding:.65rem .95rem; border-bottom:1px solid var(--border);
  font-family:"Space Grotesk",sans-serif; font-weight:500; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.panel .p-h .sub { color:var(--orange); font-weight:400; font-size:.72rem; text-transform:none; letter-spacing:0; }
.panel .p-b { padding:.95rem; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); margin-bottom:1rem; }
.kpi { background:var(--panel); padding:.9rem 1rem; }
.kpi .n { font-family:"Space Grotesk",sans-serif; font-size:1.9rem; font-weight:300; color:var(--orange); line-height:1.05; }
.kpi .n.g { color:var(--ink); }
.kpi .l { font-size:.66rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); margin-top:.4rem; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:1100px){ .grid2 { grid-template-columns:1fr; } }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:.45rem; border:1px solid var(--border2);
  background:transparent; color:var(--ink); padding:.42rem .85rem; font-size:.8rem;
}
.btn:hover { border-color:var(--orange); color:var(--orange); }
.btn.primary { background:var(--orange); border-color:var(--orange); color:var(--orange-ink); font-weight:500; }
.btn.primary:hover { color:var(--orange-ink); filter:brightness(1.08); }
.btn.ok { background:var(--ok); border-color:var(--ok); color:#03101f; font-weight:500; }
.btn.ok:hover { color:#03101f; }
.btn.danger { background:var(--red); border-color:var(--red); color:#fff; }
.btn.danger:hover { color:#fff; }
.btn.ghost { border-color:transparent; color:var(--muted); }
.btn.ghost:hover { color:var(--orange); }
.btn.big { font-size:1.05rem; padding:.85rem 1.4rem; font-family:"Space Grotesk",sans-serif; letter-spacing:.06em; }
.btn:disabled { opacity:.45; cursor:not-allowed; }

.chip {
  display:inline-flex; align-items:center; gap:.3rem; border:1px solid var(--border); background:var(--panel);
  color:var(--muted); padding:.24rem .7rem; font-size:.74rem;
}
.chip.on { background:var(--orange); border-color:var(--orange); color:var(--orange-ink); font-weight:500; }
.chip:hover { border-color:var(--muted); color:var(--ink); }
.chip.on:hover { color:var(--orange-ink); }

/* ---------- Status & Tags ---------- */
.stat { display:inline-flex; align-items:center; gap:.45rem; font-size:.72rem; padding:.16rem .6rem;
  border:1px solid var(--border); background:var(--panel2); white-space:nowrap; font-family:"Space Grotesk",sans-serif; }
.stat i { width:.55rem; height:.55rem; border-radius:50%; display:inline-block; background:var(--muted); }
.abk { display:inline-block; font-family:"Space Grotesk",sans-serif; font-size:.7rem; padding:.1rem .4rem; margin:.08rem .18rem .08rem 0;
  background:color-mix(in srgb, var(--orange) 16%, transparent); border:1px solid color-mix(in srgb, var(--orange) 45%, transparent);
  color:var(--ink); cursor:help; }
.abk:hover { background:var(--orange); color:var(--orange-ink); }
html[data-theme="kontrast"] .abk { background:#332200; border-color:var(--orange); }
.arttag { font-family:"Space Grotesk",sans-serif; font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; padding:.12rem .45rem; border:1px solid var(--border2); color:var(--muted); }
.arttag.lager { border-color:var(--blue); color:var(--blue); }
.arttag.komponente { border-color:var(--ok); color:var(--ok); }
.wpcard.komponente { border-left-color:var(--ok); }

.ampel { display:inline-block; width:.65rem; height:.65rem; border-radius:50%; background:var(--ok); }
.ampel.amber { background:var(--warn); } .ampel.red { background:var(--red); } .ampel.off { background:var(--border2); }

/* ---------- Tabellen ---------- */
.tblwrap { overflow-x:auto; }
table.tbl { width:100%; border-collapse:collapse; font-size:.8rem; }
.tbl th { font-family:"Space Grotesk",sans-serif; font-weight:500; text-align:left; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  padding:.55rem .6rem; border-bottom:1px solid var(--border2); white-space:nowrap; user-select:none; }
.tbl th.sortable { cursor:pointer; } .tbl th.sortable:hover { color:var(--orange); }
.tbl th.sorted { color:var(--orange); }
.tbl td { padding:.55rem .6rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.tbl tbody tr:hover { background:color-mix(in srgb, var(--orange) 7%, transparent); }
.tbl tbody tr.clickable { cursor:pointer; }
.tbl .k { font-family:"Space Grotesk",sans-serif; font-weight:500; color:var(--orange); }
.tbl .vin { font-size:.72rem; color:var(--muted); }

/* ---------- Wochenplanung ---------- */
.wp { display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:.6rem; align-items:start; }
.wp.rows6 { grid-template-columns:repeat(6,1fr); }
@media (max-width:1100px){ .wp.rows6 { grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .wp.rows6 { grid-template-columns:repeat(2,1fr); } }
.poolstrip { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; border:1px dashed var(--border2);
  background:var(--panel); padding:.55rem .7rem; margin-bottom:.8rem; min-height:3rem; }
.poolstrip.dragover { border-color:var(--orange); background:color-mix(in srgb, var(--orange) 8%, var(--panel)); }
.poolstrip .lbl { font-family:"Space Grotesk",sans-serif; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-right:.4rem; }
.poolstrip .wpcard { margin:0; }
.wpcol { background:var(--panel); border:1px solid var(--border); min-height:14rem; display:flex; flex-direction:column; }
.wpcol.pool { background:transparent; border-style:dashed; }
.wpcol.dragover { border-color:var(--orange); background:color-mix(in srgb, var(--orange) 8%, var(--panel)); }
.wphead { padding:.55rem .7rem; border-bottom:1px solid var(--border); }
.wphead .kwt { font-family:"Space Grotesk",sans-serif; font-weight:500; font-size:.85rem; display:flex; justify-content:space-between; align-items:center; gap:.3rem; }
.wphead .cap { font-size:.68rem; color:var(--muted); display:flex; justify-content:space-between; margin-top:.25rem; }
.capbar { height:.28rem; background:var(--bg2); margin-top:.35rem; overflow:hidden; }
.capbar i { display:block; height:100%; background:var(--ok); transition:width .3s; }
.wpbody { padding:.5rem; display:flex; flex-direction:column; gap:.4rem; flex:1; min-height:3rem; }
.wpcard { background:var(--panel2); border:1px solid var(--border); border-left:3px solid var(--orange);
  padding:.45rem .6rem; cursor:grab; }
.wpcard:active { cursor:grabbing; }
.wpcard.dragging { opacity:.4; }
.wpcard .kom { font-family:"Space Grotesk",sans-serif; font-weight:500; font-size:.8rem; display:flex; justify-content:space-between; gap:.4rem; }
.wpcard .meta { font-size:.68rem; color:var(--muted); margin-top:.15rem; }
.wpcard.lager { border-left-color:var(--blue); }

/* ---------- Cockpit ---------- */
.ckkpis { display:flex; gap:1px; background:var(--border); border:1px solid var(--border); margin-bottom:1rem; flex-wrap:wrap; }
.ckkpi { background:var(--panel); padding:.8rem 1.1rem; flex:1; min-width:9rem; }
.ckkpi .n { font-family:"Space Grotesk",sans-serif; font-weight:300; font-size:1.7rem; color:var(--orange); line-height:1; }
.ckkpi .n.g { color:var(--ink); }
.ckkpi .l { font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-top:.35rem; }
.ckgrid { display:grid; grid-template-columns:repeat(12,1fr); gap:.8rem; }
.ckcard { background:var(--panel); border:1px solid var(--border); padding:.85rem 1rem; overflow:hidden; display:flex; flex-direction:column; min-height:11rem; }
.ckcard .ct { font-family:"Space Grotesk",sans-serif; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  margin-bottom:.7rem; display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex:0 0 auto; }
.ckcard .ct .sub { color:var(--orange); font-size:.68rem; text-transform:none; letter-spacing:0; }
.c-wp { grid-column:span 8; } .c-map { grid-column:span 4; }
.c-log { grid-column:span 4; }
.c-cal { grid-column:span 8; } .c-prog { grid-column:span 4; }
.c-list { grid-column:span 8; } .c-year { grid-column:span 4; }
.c-zeit { grid-column:span 4; } .c-qual { grid-column:span 4; } .c-pers { grid-column:span 4; }
@media (max-width:1150px){ .ckgrid > div { grid-column:span 12 !important; } }
.ckcard .wp { grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr)); }
.ckcard .wpcol { min-height:auto; }
.ckcard .wpcard { cursor:pointer; }

/* KW-Kalender (Gantt) */
.gantt { border:1px solid var(--border); }
.grow2 { display:grid; grid-template-columns:11rem 1fr; align-items:center; border-bottom:1px solid var(--border); }
.grow2:last-child { border-bottom:none; }
.gcols { display:grid; grid-template-columns:repeat(8,1fr); }
.gcols .kwh { padding:.45rem .2rem; text-align:center; font-size:.66rem; color:var(--muted); border-left:1px solid var(--border); font-family:"Space Grotesk",sans-serif; }
.gcols .kwh.now { color:var(--orange); }
.glab { padding:.5rem .7rem; font-family:"Space Grotesk",sans-serif; font-size:.76rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ghead .glab { color:var(--muted); text-transform:uppercase; font-size:.62rem; letter-spacing:.1em; }
.gtrack { position:relative; height:1.9rem; border-left:1px solid var(--border); }
.gtrack .nowline { position:absolute; top:0; bottom:0; width:2px; background:var(--orange); opacity:.55; z-index:3; }
.gbar { position:absolute; top:.32rem; height:1.26rem; display:flex; overflow:hidden; }
.gseg { height:100%; display:flex; align-items:center; justify-content:center; font-size:.58rem;
  font-family:"Space Grotesk",sans-serif; color:#03101f; white-space:nowrap; overflow:hidden; }
.minidot { display:inline-block; width:.6rem; height:.6rem; margin-right:.14rem; border:1px solid var(--border2); }

/* Deutschlandkarte */
.mapwrap { flex:1; display:flex; gap:.9rem; align-items:center; min-height:0; }
.gmap { height:100%; max-height:15rem; width:auto; display:block; flex:1; }
.gmap path.land { fill:color-mix(in srgb, var(--blue) 12%, transparent); stroke:var(--muted); stroke-width:1.3; stroke-linejoin:round; }
.gmap circle.mk { fill:var(--orange); stroke:var(--bg); stroke-width:1.6; cursor:help; }
.gmap text.mkn { fill:var(--orange-ink); font-family:"Space Grotesk",sans-serif; font-size:11px; font-weight:700; pointer-events:none; text-anchor:middle; }
.gmap text.mkl { fill:var(--ink); font-family:"Space Grotesk",sans-serif; font-size:9px; pointer-events:none; text-anchor:middle; }
.maplegend { font-size:.74rem; color:var(--muted); display:flex; flex-direction:column; gap:.45rem; min-width:8rem; }
.maplegend .ml { display:flex; justify-content:space-between; gap:.7rem; border-bottom:1px solid var(--border); padding-bottom:.3rem; }
.maplegend .ml b { color:var(--ink); font-family:"Space Grotesk",sans-serif; font-weight:500; }
.maplegend .ml .v { color:var(--orange); font-family:"Space Grotesk",sans-serif; }

/* Donut */
.donutwrap { flex:1; display:flex; align-items:center; justify-content:center; }
.donut { width:100%; max-width:10.5rem; display:block; }
.donut .dpct { fill:var(--ink); font-family:"Space Grotesk",sans-serif; font-size:23px; font-weight:500; }
.donut .dlbl { fill:var(--muted); font-size:8px; letter-spacing:.1em; text-transform:uppercase; }
/* Mini-Donuts: alle Wagen einer KW */
.donutgrid { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem .4rem; align-content:center; }
.mdon { text-align:center; cursor:pointer; }
.mdon svg { width:100%; max-width:4.6rem; display:block; margin:0 auto; }
.mdon .dpct { font-size:26px; }
.mdon .lbl { font-size:.62rem; color:var(--muted); font-family:"Space Grotesk",sans-serif; margin-top:.15rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mdon:hover .lbl { color:var(--orange); }
.auslast { margin-top:.6rem; flex:0 0 auto; }
.auslast .lbl { font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:.3rem;
  display:flex; justify-content:space-between; font-family:"Space Grotesk",sans-serif; }

/* Jahresproduktion */
.ybars { display:flex; align-items:flex-end; gap:.32rem; flex:1; min-height:5.5rem; }
.ybars span { flex:1; background:var(--orange); opacity:.85; align-self:flex-end; min-height:1px;
  transition:height .8s cubic-bezier(.22,1,.36,1); }
.ymon { display:flex; gap:.32rem; margin-top:.35rem; }
.ymon span { flex:1; text-align:center; font-size:.58rem; color:var(--muted); font-family:"Space Grotesk",sans-serif; }

/* Team-Chat */
.c-chat { grid-column:span 8; }
.chat { display:flex; flex-direction:column; gap:.45rem; flex:1; overflow-y:auto; max-height:13rem; padding-right:.2rem; }
.chat .msg { font-size:.78rem; color:var(--ink); background:var(--panel2); border:1px solid var(--border); padding:.45rem .65rem; max-width:82%; line-height:1.45; }
.chat .msg b { color:var(--orange); font-family:"Space Grotesk",sans-serif; font-weight:500; margin-right:.4rem; }
.chat .msg .mts2 { font-size:.62rem; color:var(--muted); margin-left:.5rem; }
.chat .msg.mine { align-self:flex-end; border-color:color-mix(in srgb, var(--ok) 45%, transparent); }
.chat .msg.mine b { color:var(--ok); }
.chatform { display:flex; gap:.4rem; margin-top:.6rem; flex:0 0 auto; }
.chatform input { flex:1; }

/* Qualität / Anwesenheit */
.qual { flex:1; display:flex; flex-direction:column; justify-content:center; gap:.55rem; }
.qrow { display:flex; justify-content:space-between; align-items:center; font-size:.8rem; border-bottom:1px solid var(--border); padding-bottom:.45rem; }
.qrow:last-child { border-bottom:none; }
.qrow .qn { font-family:"Space Grotesk",sans-serif; font-size:1.15rem; }
.qrow .qn.bad { color:var(--red); } .qrow .qn.ok { color:var(--ok); } .qrow .qn.warn { color:var(--warn); }
.pers { flex:1; display:flex; flex-direction:column; justify-content:center; gap:.5rem; }
.persbig { font-family:"Space Grotesk",sans-serif; font-weight:300; font-size:1.9rem; color:var(--ok); }
.persbig small { font-size:.85rem; color:var(--muted); }
.perslist { font-size:.74rem; color:var(--muted); line-height:1.7; }
.perslist b { color:var(--warn); font-family:"Space Grotesk",sans-serif; font-weight:500; }

/* ---------- Dashboard-Matrix (Auftragsliste im Cockpit) ---------- */
.steprow { display:grid; grid-template-columns:1fr repeat(4, 4.2rem) 5.2rem 1.6rem; gap:.45rem; align-items:center;
  padding:.4rem 0; border-bottom:1px solid var(--border); font-size:.78rem; }
.steprow.head { font-family:"Space Grotesk",sans-serif; font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); border-bottom:1px solid var(--border2); }
.stepcell { height:1.25rem; background:var(--bg2); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-size:.6rem; color:var(--muted); }
.stepcell.inarbeit, .stepcell.fertig { color:#03101f; }
@media (max-width:820px){ .steprow { grid-template-columns:1fr repeat(4,1fr); } .steprow > :nth-child(n+6){ display:none; } }

/* ---------- Terminal (Zeiterfassung) ---------- */
.term-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:1rem; }
@media (max-width:1000px){ .term-grid { grid-template-columns:1fr; } }
.term-state { font-size:.95rem; padding:.9rem; background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--orange); }
.term-state b { color:var(--orange); font-family:"Space Grotesk",sans-serif; }
.bigrow { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.8rem; }
.zbar { display:flex; height:2.1rem; overflow:hidden; border:1px solid var(--border); margin-top:.6rem; background:var(--bg2); }
.zseg { display:flex; align-items:center; justify-content:center; font-size:.66rem; font-family:"Space Grotesk",sans-serif; color:#03101f; white-space:nowrap; overflow:hidden;
  transition:width .8s cubic-bezier(.22,1,.36,1); }
.z-prod { background:var(--ok); } .z-neben { background:var(--blue); } .z-leer { background:#9aa7b5; }
.zleg { display:flex; gap:1rem; font-size:.72rem; color:var(--muted); margin-top:.45rem; flex-wrap:wrap; }
.zleg i { display:inline-block; width:.72rem; height:.72rem; vertical-align:-1px; margin-right:.3rem; }

/* ---------- Mitarbeiterkalender ---------- */
.mk td, .mk th { text-align:center; }
.mk td.name { text-align:left; font-family:"Space Grotesk",sans-serif; font-weight:500; white-space:nowrap; }
.mkcell { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:1.65rem;
  font-size:.74rem; font-weight:700; font-family:"Space Grotesk",sans-serif; border:1px solid transparent; cursor:default; }
.mkcell.edit { cursor:pointer; }
.mkcell.edit:hover { border-color:var(--orange); }
.mkcell.A { background:var(--okbg); color:var(--ok); }
.mkcell.U { background:var(--warnbg); color:var(--warn); }
.mkcell.K { background:var(--redbg); color:var(--red); }
.mkcell.we { background:transparent; color:var(--border2); cursor:default; }
.mk th .wd { display:block; font-size:.58rem; color:var(--muted); font-weight:400; }
.mk th.we, .mk td.wecol { background:color-mix(in srgb, var(--muted) 7%, transparent); }
.mk td { padding:.18rem .15rem; }
.mk th.sd { cursor:pointer; }
.mk th.sd:hover { color:var(--orange); }
.mk th.sd-F { background:var(--redbg); color:var(--red); }
.mk th.sd-B { background:color-mix(in srgb, var(--blue) 22%, transparent); color:var(--blue); }
.mk th.sd-FE { background:var(--warnbg); color:var(--warn); }
.mk td.d-F, .mk td.d-B { background:color-mix(in srgb, var(--muted) 12%, transparent); }

/* ---------- Auftrag Detail ---------- */
.odgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); }
.odf { background:var(--panel); padding:.6rem .8rem; }
.odf .k { font-size:.6rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); }
.odf .v { font-family:"Space Grotesk",sans-serif; font-weight:500; font-size:.86rem; margin-top:.25rem; word-break:break-word; }
.tabs { display:flex; gap:.2rem; border-bottom:1px solid var(--border2); margin:1.1rem 0 .9rem; flex-wrap:wrap; }
.tab { border:none; background:transparent; color:var(--muted); padding:.5rem .9rem; font-size:.8rem;
  font-family:"Space Grotesk",sans-serif; letter-spacing:.04em; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab.on { color:var(--orange); border-bottom-color:var(--orange); font-weight:500; }

.chk { list-style:none; }
.chk li { display:flex; gap:.6rem; align-items:flex-start; padding:.5rem 0; border-bottom:1px solid var(--border); font-size:.82rem; }
.chk .box { flex:0 0 auto; width:1.2rem; height:1.2rem; border:1px solid var(--border2);
  display:inline-flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; }
.chk .box.ok { background:var(--ok); border-color:var(--ok); color:#03101f; }
.chk .box.bad { background:var(--red); border-color:var(--red); color:#fff; }
.freigabe { margin-top:.9rem; padding:.75rem .95rem; font-size:.82rem;
  border:1px solid var(--red); background:var(--redbg); display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.freigabe.ok { border-color:var(--ok); background:var(--okbg); }
.freigabe b { font-family:"Space Grotesk",sans-serif; }

/* ---------- Modal ---------- */
.modal-bg { position:fixed; inset:0; background:rgba(3,16,31,.72); z-index:90; display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal { background:var(--panel); border:1px solid var(--border2); width:min(34rem, 96vw); max-height:90vh; overflow-y:auto; }
.modal .m-h { padding:.9rem 1.1rem; border-bottom:1px solid var(--border); font-family:"Space Grotesk",sans-serif; font-weight:500;
  display:flex; justify-content:space-between; align-items:center; }
.modal .m-b { padding:1.1rem; }
.modal label { display:block; font-size:.64rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin:.75rem 0 .28rem; }
.modal input, .modal select, .modal textarea { width:100%; }
.m-foot { display:flex; justify-content:flex-end; gap:.6rem; padding:.9rem 1.1rem; border-top:1px solid var(--border); }

/* ---------- Inbox ---------- */
.inbox-pop { position:fixed; top:3.4rem; right:.8rem; width:min(23rem,94vw); z-index:80; }
.inbox-pop .item { padding:.6rem .8rem; border-bottom:1px solid var(--border); font-size:.78rem; }
.inbox-pop .item.unread { border-left:3px solid var(--orange); background:var(--panel2); }
.inbox-pop .ts { font-size:.66rem; color:var(--muted); margin-top:.15rem; }

/* ---------- Toast ---------- */
#toast { position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%); z-index:99;
  background:var(--orange); color:var(--orange-ink); padding:.6rem 1.2rem; font-size:.82rem;
  font-family:"Space Grotesk",sans-serif; display:none; }
#toast.err { background:var(--red); color:#fff; }

/* ---------- Bars (Auswertung) ---------- */
.hbar { display:grid; grid-template-columns:10rem 1fr 3.2rem; gap:.6rem; align-items:center; font-size:.76rem; padding:.3rem 0; }
.hbar .track { height:.8rem; background:var(--bg2); overflow:hidden; }
.hbar .fill { height:100%; background:var(--orange); transition:width .8s cubic-bezier(.22,1,.36,1); }

/* ---------- Jahresplan ---------- */
.year-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(4.2rem,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); }
.ykw { padding:.45rem .45rem; text-align:center; background:var(--panel); }
.ykw.now { outline:2px solid var(--orange); outline-offset:-2px; }
.ykw .n { font-size:.62rem; color:var(--muted); font-family:"Space Grotesk",sans-serif; }
.ykw .c { font-family:"Space Grotesk",sans-serif; font-weight:500; font-size:.95rem; margin-top:.1rem; }
.ykw.over { background:var(--redbg); } .ykw.full { background:var(--warnbg); }

/* ---------- Druck (Laufzettel) ---------- */
.print-sheet { display:none; }
@media print {
  body::before, body::after { display:none; }
  body * { visibility:hidden; }
  .print-sheet, .print-sheet * { visibility:visible; }
  .print-sheet { display:block; position:absolute; inset:0; background:#fff; color:#000; padding:1.5cm; font-size:11pt; font-family:Arial, sans-serif; }
  .print-sheet h1 { font-size:16pt; margin-bottom:.4cm; font-family:Arial, sans-serif; }
  .print-sheet table { width:100%; border-collapse:collapse; margin-top:.4cm; }
  .print-sheet th, .print-sheet td { border:1px solid #000; padding:.18cm .25cm; text-align:left; font-size:10pt; }
  .print-sheet .sig { margin-top:1cm; display:flex; gap:1.2cm; }
  .print-sheet .sig div { flex:1; border-top:1px solid #000; padding-top:.15cm; font-size:9pt; }
}

@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; } }