/* Uebernommen aus dem Brinkmann Digitaltool (app/static/brinkmann.css),
   Stand 27.07.2026. Einzige Aenderung: Schriftpfade von /static/fonts/
   auf fonts/ umgestellt. Siehe DESIGN.md Abschnitt 9.
   NICHT hier eigene Regeln ergaenzen - dafuer gibt es konfigurator.css. */
/* ============================================================
   Brinkmann Design System – Anwendung "Brinkmann Fertigungsplanung"
   Abgeleitet aus dem Intranet-UI-Kit (Tokens, Komponenten, Shell).
   Marke: Ralf Brinkmann GmbH – Signalgelb, Tiefnavy, Industriegrau.
   ============================================================ */
/* Schriften SELBST gehostet (statt Google-Fonts-CDN): kein Datenabfluss an
   Dritte (DSGVO), funktioniert offline und erlaubt eine strikte
   Content-Security-Policy. Variable Fonts (ein File je Familie/Subset). */
@font-face {
  font-family: "League Spartan"; font-style: normal; font-weight: 400 900;
  font-display: swap; src: url("fonts/league-spartan-latin.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: "League Spartan"; font-style: normal; font-weight: 400 900;
  font-display: swap; src: url("fonts/league-spartan-latin-ext.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-weight: 400 700; font-stretch: 100%;
  font-display: swap; src: url("fonts/archivo-latin.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-weight: 400 700; font-stretch: 100%;
  font-display: swap; src: url("fonts/archivo-latin-ext.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 {
  /* Markenkern */
  --brink-yellow: #fae800;
  --brink-navy:   #041f3c;
  --brink-grey:   #d3d3d3;
  /* Navy-Skala */
  --navy-900:#02121f; --navy-800:#041f3c; --navy-700:#0a2e54; --navy-600:#123e6c;
  --navy-500:#1e5288; --navy-400:#3d6fa3; --navy-300:#7298c0; --navy-200:#aec6dd; --navy-100:#dde8f2;
  /* Gelb-Skala */
  --yellow-700:#b8aa00; --yellow-600:#d9c800; --yellow-500:#fae800; --yellow-400:#fbee3d;
  --yellow-300:#fdf48a; --yellow-200:#fef9c4; --yellow-100:#fffce8;
  /* Stahl/Neutral */
  --steel-950:#0d1117; --steel-900:#1a1f26; --steel-800:#2b313a; --steel-700:#434b56;
  --steel-600:#5d6470; --steel-500:#7b828d; --steel-400:#9aa0aa; --steel-300:#bfc4cb;
  --steel-200:#d3d3d3; --steel-150:#e2e4e7; --steel-100:#eef0f2; --steel-50:#f6f7f8;
  --white:#fff; --black:#000;
  /* Semantik */
  --success:#2e7d32; --warning:#e8a400; --danger:#c62828; --info:var(--navy-500);
  --surface-page:var(--steel-50); --surface-card:var(--white); --surface-sunken:var(--steel-100);
  --text-strong:var(--navy-800); --text-body:var(--steel-800); --text-muted:var(--steel-600);
  --text-faint:var(--steel-500); --text-inverse:var(--white); --text-link:var(--navy-600);
  --border-subtle:var(--steel-150); --border-default:var(--steel-300); --border-strong:var(--navy-800);
  --accent:var(--yellow-500); --accent-hover:var(--yellow-600); --accent-active:var(--yellow-700);
  /* Typo */
  --font-display:"League Spartan","Arial Narrow",sans-serif;
  --font-body:"Archivo","Segoe UI",system-ui,sans-serif;
  /* Radien / Abstände */
  --radius-sm:2px; --radius-md:4px; --radius-lg:8px; --radius-pill:999px;
  /* Schatten (navy getönt) */
  --shadow-xs:0 1px 2px rgba(4,31,60,.08);
  --shadow-sm:0 1px 3px rgba(4,31,60,.10),0 1px 2px rgba(4,31,60,.06);
  --shadow-md:0 4px 10px rgba(4,31,60,.10),0 2px 4px rgba(4,31,60,.06);
  --shadow-lg:0 12px 28px rgba(4,31,60,.14),0 4px 8px rgba(4,31,60,.06);
  --ring:0 0 0 3px rgba(30,82,136,.40);
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-standard:cubic-bezier(.4,0,.2,1);
  --dur-fast:120ms; --dur-base:180ms; --dur-slow:280ms;
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  font-family:var(--font-body);
  background:var(--surface-page);
  color:var(--text-body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--text-link); text-decoration:none; }
a:hover { text-decoration:underline; }
::selection { background:var(--yellow-300); color:var(--navy-900); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline:none; box-shadow:var(--ring); border-radius:var(--radius-sm);
}
/* dezente, markengerechte Scrollbars */
* { scrollbar-width:thin; scrollbar-color:var(--steel-300) transparent; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--steel-300); border-radius:var(--radius-pill); border:2px solid var(--surface-page); }
::-webkit-scrollbar-thumb:hover { background:var(--steel-400); }
h2, h3, h4 { font-family:var(--font-display); color:var(--text-strong); letter-spacing:-.01em; line-height:1.1; }
h2 { font-weight:800; text-transform:uppercase; font-size:1.55rem; margin:0 0 .2rem; }
h3 { font-weight:700; font-size:1.15rem; margin:1.4rem 0 .6rem; }
small { color:var(--text-muted); }

/* Eyebrow / Kicker */
.eyebrow {
  font-family:var(--font-display); font-weight:700; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--navy-600);
}

/* (Marken-Speed-Stripe vorerst entfernt – wird ggf. später als Original-Asset ergänzt.) */

/* ============================================================
   App-Shell: navy Sidebar + sticky Topbar
   ============================================================ */
.app-shell { display:flex; min-height:100vh; }
.sidebar {
  width:256px; flex:none; background:var(--navy-800); color:#fff;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.sidebar-brand { padding:22px 22px 16px; }
.sidebar-brand .row { display:flex; align-items:center; gap:11px; }
.sidebar-brand img { height:30px; width:auto; display:block; }
.sidebar-brand .name { font-family:var(--font-display); font-weight:800; font-size:20px; letter-spacing:-.01em; line-height:1; white-space:nowrap; }
.sidebar-brand .name span { font-weight:600; }
.sidebar-claim {
  margin:14px 22px 0; padding-top:13px; border-top:1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; gap:9px;
}
.sidebar-claim .dot { flex:none; width:6px; height:6px; border-radius:50%; background:var(--yellow-500); }
.sidebar-claim .txt { font-family:var(--font-display); font-weight:700; font-size:12.5px; color:rgba(255,255,255,.66); font-style:italic; }
.nav { display:flex; flex-direction:column; gap:3px; padding:14px 12px; flex:1; min-height:0; overflow-y:auto; }
.nav-gruppe { font-family:var(--font-display); font-weight:700; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.40); padding:14px 14px 4px; }
.nav-gruppe:first-child { padding-top:6px; }
.nav-item {
  display:flex; align-items:center; gap:11px; padding:11px 14px;
  background:transparent; border:none; border-left:3px solid transparent; border-radius:0 4px 4px 0;
  color:rgba(255,255,255,.74); font-family:var(--font-display); font-weight:600; font-size:14px;
  letter-spacing:.02em; cursor:pointer; text-align:left; text-decoration:none;
  transition:background var(--dur-fast), color var(--dur-fast);
}
.nav-item:hover { background:rgba(255,255,255,.06); color:#fff; text-decoration:none; }
.nav-item.active { background:rgba(250,232,0,.14); border-left-color:var(--yellow-500); color:#fff; }
.nav-item .ic { flex:none; opacity:.78; transition:opacity var(--dur-fast), color var(--dur-fast); }
.nav-item:hover .ic { opacity:1; }
.nav-item.active .ic { color:var(--yellow-500); opacity:1; }
.nav-item .mk { flex:none; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.5; }
.nav-item.active .mk { background:var(--yellow-500); opacity:1; }
.sidebar-user {
  padding:14px 16px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; gap:11px;
}
.avatar {
  flex:none; width:38px; height:38px; border-radius:50%;
  background:var(--yellow-500); color:var(--navy-800);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:15px;
}
.sidebar-user .who { line-height:1.25; min-width:0; flex:1; }
.sidebar-user .who .n { font-weight:700; font-size:14px; color:#fff; white-space:normal; overflow-wrap:anywhere; }
.sidebar-user .who .r { font-size:11.5px; font-weight:600; color:var(--yellow-500); text-transform:capitalize; }
.sidebar-user .logout { margin-left:auto; color:rgba(255,255,255,.7); font-size:12px; white-space:nowrap; }
.sidebar-user .logout:hover { color:#fff; }

/* Versionsstand + „Was ist neu?" unten in der Seitenleiste */
.sidebar-version { padding:8px 16px 14px; font-size:11.5px; color:rgba(255,255,255,.55); }
.sidebar-version .version-link {
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:var(--yellow-500); font-weight:600; text-decoration:underline;
}
.sidebar-version .version-link:hover { color:#fff; }

/* Umgebungs-Banner: unübersehbarer Hinweis, wenn NICHT Produktivbetrieb */
.umgebung-banner {
  background:var(--danger); color:#fff; text-align:center;
  padding:7px 14px; font-family:var(--font-display); font-weight:800;
  font-size:.82rem; letter-spacing:.04em; text-transform:uppercase;
}
.umgebung-banner strong { text-decoration:underline; }

/* „Was ist neu?"-Overlay (Patchlog beim ersten Login nach einem Update) */
.neu-overlay {
  position:fixed; inset:0; z-index:210; background:rgba(4,31,60,.55);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:1.5rem;
  animation:brinkFade var(--dur-base) ease;
}
.neu-panel {
  background:var(--surface-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  border-top:4px solid var(--accent); max-width:560px; width:100%; max-height:86vh;
  display:flex; flex-direction:column; overflow:hidden; animation:modalPop var(--dur-slow) var(--ease-out);
}
.neu-head { padding:1.4rem 1.6rem .6rem; }
.neu-eyebrow {
  font-family:var(--font-display); font-weight:800; font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent);
}
.neu-head h2 { margin:.2rem 0 0; font-size:1.25rem; }
.neu-body { padding:.4rem 1.6rem 1rem; overflow:auto; }
.neu-release + .neu-release { margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--steel-100); }
.neu-release-kopf { display:flex; align-items:baseline; gap:.6rem; }
.neu-ver { font-family:var(--font-display); font-weight:800; font-size:.9rem; color:var(--navy-800); }
.neu-datum { font-size:.78rem; color:var(--steel-500); }
.neu-titel { margin-top:.15rem; font-weight:700; color:var(--navy-800); }
.neu-liste { margin:.55rem 0 0; padding-left:1.15rem; display:flex; flex-direction:column; gap:.5rem; }
.neu-liste li { line-height:1.5; }
.neu-fuss { padding:1rem 1.6rem 1.4rem; border-top:1px solid var(--steel-100); text-align:right; }

/* Globale Suche (Strg/Cmd+K): Palette oben mittig, Treffer gruppiert. */
.suche-overlay {
  position:fixed; inset:0; z-index:220; background:rgba(4,31,60,.5);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:9vh 1.5rem 1.5rem; animation:brinkFade var(--dur-base) ease;
}
.suche-overlay[hidden] { display:none; }
.suche-panel {
  background:var(--surface-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  border-top:4px solid var(--accent); width:100%; max-width:640px; max-height:72vh;
  display:flex; flex-direction:column; overflow:hidden; animation:modalPop var(--dur-slow) var(--ease-out);
}
.suche-input {
  border:none; border-bottom:1px solid var(--steel-100); border-radius:0;
  padding:1rem 1.3rem; font-size:1.05rem; outline:none; width:100%;
}
.suche-liste { overflow:auto; padding:.4rem 0 .6rem; }
.suche-liste .s-titel {
  font-family:var(--font-display); font-weight:800; font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--steel-500); padding:.7rem 1.3rem .25rem;
}
.suche-liste .s-treffer {
  display:block; padding:.45rem 1.3rem; text-decoration:none; color:var(--text-strong);
}
.suche-liste .s-treffer:hover, .suche-liste .s-treffer.aktiv { background:var(--steel-100); }
.suche-liste .s-label { font-weight:600; }
.suche-liste .s-meta { display:block; font-size:.8rem; color:var(--text-muted); }
.suche-liste .s-leer { padding:1rem 1.3rem; color:var(--text-muted); font-size:.9rem; }

/* Segmentierter Regler (z. B. „Eigene / Alle Aufträge" in der Übersicht) */
.uebersicht-steuer { display:flex; align-items:center; gap:1rem 1.2rem; flex-wrap:wrap; justify-content:space-between; }
.uebersicht-steuer .suche { margin:0; }
.regler { display:inline-flex; background:var(--surface-sunken); border:1px solid var(--border-subtle); border-radius:var(--radius-pill); padding:3px; gap:2px; }
.regler a {
  padding:.42rem .95rem; border-radius:var(--radius-pill); text-decoration:none;
  font-family:var(--font-display); font-weight:700; font-size:.82rem; letter-spacing:.01em;
  color:var(--text-muted); white-space:nowrap; transition:background var(--dur-base) ease, color var(--dur-base) ease;
}
.regler a:hover { color:var(--text-strong); }
.regler a.an { background:var(--navy-800); color:#fff; }

/* Schiebe-Regler (Toggle) für binäre Ja/Nein-Entscheidungen statt Häkchen */
.schalter { display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; user-select:none; }
.schalter > input { position:absolute; opacity:0; width:1px; height:1px; }
.schalter .track {
  position:relative; flex:none; width:42px; height:24px; border-radius:var(--radius-pill);
  background:var(--steel-300); transition:background var(--dur-base) ease;
}
.schalter .knob {
  position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(4,31,60,.35); transition:transform var(--dur-base) ease;
}
.schalter > input:checked + .track { background:var(--navy-800); }
.schalter > input:checked + .track .knob { transform:translateX(18px); }
.schalter > input:focus-visible + .track { outline:2px solid var(--navy-800); outline-offset:2px; }
.schalter > input:disabled + .track { opacity:.5; cursor:not-allowed; }
.schalter .schalter-text { font-size:.92rem; line-height:1.35; }
.schalter .schalter-text small { color:var(--text-muted); }

/* Admin-Sicht-Schalter (Topbar, nur Projektmodul): kippt die pauschale
   Admin-Vollsicht. AN = prominent (Navy/Gelb), AUS = zurückhaltend. */
.admin-schalter {
  display:inline-flex; align-items:center; gap:.45rem; background:none;
  border:1px solid var(--border-default); border-radius:var(--radius-pill);
  padding:3px 11px 3px 5px; cursor:pointer; font:inherit; font-size:12.5px;
  font-weight:700; color:var(--text-muted); letter-spacing:.01em;
  transition:border-color var(--dur-base) ease, color var(--dur-base) ease, background var(--dur-base) ease;
}
.admin-schalter:hover { border-color:var(--navy-500); color:var(--text-strong); }
.admin-schalter:focus-visible { outline:2px solid var(--navy-800); outline-offset:2px; }
.admin-schalter .track {
  position:relative; flex:none; width:34px; height:19px; border-radius:var(--radius-pill);
  background:var(--steel-300); transition:background var(--dur-base) ease;
}
.admin-schalter .knob {
  position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(4,31,60,.35); transition:transform var(--dur-base) ease;
}
.admin-schalter.an { background:var(--navy-800); border-color:var(--navy-800); }
.admin-schalter.an .as-label { color:#fff; }
.admin-schalter.an .track { background:var(--yellow-500); }
.admin-schalter.an .knob { transform:translateX(15px); background:var(--navy-800); }

/* ---- Auswertungen: Zeitfilter, Reiter, Diagramme ---- */
.zeitfilter { display:flex; align-items:center; gap:.7rem 1rem; flex-wrap:wrap; margin:.3rem 0 1.1rem; }
.zeit-frei { display:flex; align-items:center; gap:.4rem; margin:0; }
.zeit-frei input[type=date] { padding:.34rem .5rem; border:1px solid var(--border-default); border-radius:var(--radius-md); font:inherit; }
.zeit-frei .bis { color:var(--text-muted); }
.zeit-label { color:var(--text-muted); font-size:.85rem; margin-left:auto; }

.tabs { display:flex; gap:.2rem; border-bottom:2px solid var(--border-subtle); margin:0 0 1.3rem; flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; }
.tabs a { padding:.55rem 1.05rem; text-decoration:none; font-family:var(--font-display); font-weight:700;
  font-size:.9rem; letter-spacing:.01em; color:var(--text-muted); border-bottom:3px solid transparent; margin-bottom:-2px; }
.tabs a:hover { color:var(--text-strong); }
.tabs a.an { color:var(--navy-800); border-bottom-color:var(--accent); }

.ausw-hint { color:var(--text-muted); font-size:.9rem; margin:.2rem 0 1rem; }

/* Säulendiagramm (HTML/CSS) */
.saeulen { display:flex; align-items:flex-end; gap:.5rem; height:var(--saeulen-h,180px); padding-top:1.3rem; }
.saeule { flex:1 1 0; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; min-width:0; height:100%; }
.saeule-wert { font-size:.72rem; font-weight:700; color:var(--text-muted); margin-bottom:2px; white-space:nowrap; }
.saeule-bar { width:100%; max-width:52px; border-radius:4px 4px 0 0; min-height:2px; }
.saeule-label { font-size:.7rem; color:var(--text-muted); margin-top:5px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }

/* Donut/Ring */
.donut-wrap { display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.donut { width:150px; height:150px; flex:none; }
.donut-zahl { font-family:var(--font-display); font-weight:800; font-size:26px; fill:var(--navy-800); }
.donut-lab { font-size:9px; fill:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; }
.donut-legende { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; font-size:.88rem; }
.donut-legende .dot { display:inline-block; width:11px; height:11px; border-radius:2px; margin-right:.45rem; }
.donut-legende small { color:var(--text-muted); }

/* Linien-/Flächendiagramm */
.linie-chart { width:100%; height:auto; display:block; }
.lc-achse { stroke:var(--border-subtle); stroke-width:1; }
.lc-flaeche { fill:rgba(30,82,136,.14); }
.lc-linie { fill:none; stroke:var(--navy-500); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.lc-pkt { fill:var(--navy-800); }
.lc-xlabel { fill:var(--text-muted); font-size:9px; }

/* Detailauswertung: Person-Auswahl + Heatmap */
.detail-person { margin:.2rem 0 1.1rem; }
.detail-person select { padding:.35rem .5rem; border:1px solid var(--border-default); border-radius:var(--radius-md); font:inherit; margin-left:.4rem; }
.heatmap-wrap { overflow-x:auto; }
.heatmap { border-collapse:separate; border-spacing:3px; }
.heatmap th { font-size:.72rem; font-weight:700; color:var(--text-muted); padding:2px 8px; text-align:center; }
.heatmap tbody th { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.heatmap td { width:58px; height:26px; border-radius:3px; text-align:center; background:var(--steel-50); }
.heatmap td.hm-kein { background:repeating-linear-gradient(45deg,var(--steel-100),var(--steel-100) 4px,var(--steel-150) 4px,var(--steel-150) 8px); color:var(--text-faint); font-size:.8rem; }
.hm-legende { display:flex; align-items:center; gap:.5rem; margin-top:.8rem; font-size:.8rem; color:var(--text-muted); flex-wrap:wrap; }
.hm-skala { display:inline-block; width:130px; height:12px; border-radius:3px; background:linear-gradient(90deg,rgba(4,31,60,.08),rgba(4,31,60,1)); }
.hm-kein-lg { color:var(--text-faint); }

.app-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar {
  position:sticky; top:0; z-index:30; background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-subtle);
  display:flex; align-items:center; gap:20px; padding:12px 32px; min-height:68px;
}
.topbar .title h1 { margin:0; font-family:var(--font-display); font-weight:800; font-size:22px; text-transform:uppercase; letter-spacing:-.01em; color:var(--text-strong); line-height:1.05; }
.topbar .right { margin-left:auto; display:flex; align-items:center; gap:14px; font-size:13px; color:var(--text-muted); }
.topbar .right a { color:var(--navy-600); font-weight:600; }
/* Abmelden ist aus CSRF-Gründen ein POST-Formular, soll aber wie die
   Nachbar-Links aussehen. */
.topbar .right .abmelden-form { margin:0; display:inline; }
.topbar .right .abmelden-knopf { background:none; border:none; padding:0; cursor:pointer;
  color:var(--navy-600); font-weight:600; font:inherit; }
.topbar .right .abmelden-knopf:hover { text-decoration:underline; }
.content { padding:30px 32px 60px; flex:1; animation:brinkFade var(--dur-slow) var(--ease-out); }
/* Benachrichtigungs-Glocke */
.topbar .right .bell { position:relative; background:transparent; border:none; cursor:pointer; color:var(--navy-700); padding:6px; border-radius:var(--radius-md); display:inline-flex; align-items:center; }
.topbar .right .bell:hover { background:var(--steel-100); }
.bell-badge { position:absolute; top:-3px; right:-3px; min-width:17px; height:17px; padding:0 4px; border-radius:var(--radius-pill); background:var(--yellow-500); color:var(--navy-800); font-family:var(--font-display); font-weight:800; font-size:10px; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }
/* Posteingang */
.bn-liste { display:flex; flex-direction:column; }
.bn-item { display:flex; gap:.7rem; align-items:flex-start; padding:.75rem .2rem; border-top:1px solid var(--border-subtle); text-decoration:none; color:inherit; transition:background var(--dur-fast); }
.bn-item:first-child { border-top:none; }
.bn-item:hover { background:var(--steel-50); text-decoration:none; }
.bn-dot { flex:none; width:10px; height:10px; border-radius:50%; margin-top:.35rem; background:var(--navy-600); }
.bn-ueberfaellig .bn-dot { background:var(--danger); }
.bn-fertig .bn-dot { background:var(--success); }
.bn-haupt { display:block; color:var(--text-strong); }
.bn-zeit { display:block; font-size:.78rem; color:var(--text-faint); margin-top:.15rem; }

/* ============================================================
   Komponenten
   ============================================================ */
/* Knöpfe */
.knopf {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; font-family:var(--font-display); font-weight:700; font-size:.9rem;
  letter-spacing:.06em; text-transform:uppercase; line-height:1;
  background:var(--navy-800); color:#fff; border:2px solid var(--navy-800);
  border-radius:var(--radius-md); cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard),
             border-color var(--dur-base), transform var(--dur-fast), box-shadow var(--dur-base);
}
.knopf:hover { background:var(--navy-700); border-color:var(--navy-700); color:#fff; text-decoration:none; transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.knopf:active { transform:translateY(0); }
.knopf:focus-visible { outline:none; box-shadow:var(--ring); }
.knopf-gelb { background:var(--accent); color:var(--navy-800); border-color:var(--accent); }
.knopf-gelb:hover { background:var(--accent-hover); border-color:var(--accent-hover); color:var(--navy-800); }
.knopf-klein { padding:7px 13px; font-size:.78rem; gap:6px; }
.knopf-gross { padding:15px 26px; font-size:1.05rem; gap:10px; }
.knopf-warn { background:var(--danger); color:#fff; border-color:var(--danger); }
.knopf-warn:hover { background:#a51f1f; border-color:#a51f1f; color:#fff; }

/* Karten */
.karte {
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
  padding:1.1rem 1.2rem; margin:.9rem 0;
  transition:box-shadow var(--dur-base), transform var(--dur-base), border-color var(--dur-base);
}

/* Verlinkte Karte / Kacheln (Dashboard) */
.karte-link { display:block; text-decoration:none; color:inherit; cursor:pointer; }
.karte-link:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); border-color:var(--border-default); text-decoration:none; }
.kachel-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1rem; margin-top:1.2rem; }
.kachel .et { font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:1.05rem; color:var(--text-strong); letter-spacing:-.01em; }
.kachel .ds { color:var(--text-muted); font-size:.85rem; margin-top:.35rem; line-height:1.45; }
.willkommen { font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:1.7rem; color:var(--text-strong); letter-spacing:-.02em; margin:0; }

/* Hinweis / Fehler */
.hinweis { background:var(--yellow-100); border-left:4px solid var(--yellow-500); padding:.7rem .9rem; border-radius:var(--radius-md); color:var(--navy-800); }
.fehler { background:#fdecec; border-left:4px solid var(--danger); padding:.7rem .9rem; border-radius:var(--radius-md); color:#7a1f1f; }

/* Formulare */
label { display:block; margin:.7rem 0 .25rem; font-weight:700; color:var(--text-strong); font-size:.9rem; }
input[type=text], input[type=date], input[type=password], input[type=datetime-local],
input[type=number], input[type=email], select, textarea {
  width:100%; padding:.6rem .7rem; border:1px solid var(--border-default);
  border-radius:var(--radius-md); font-family:var(--font-body); font-size:1rem;
  color:var(--text-strong); background:#fff; transition:border-color var(--dur-base), box-shadow var(--dur-base);
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--navy-500); box-shadow:var(--ring); }
fieldset { border:1px solid var(--border-subtle); border-radius:var(--radius-lg); margin:1.1rem 0; padding:1.1rem 1.2rem; background:var(--surface-card); box-shadow:var(--shadow-xs); }
legend { font-family:var(--font-display); font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--navy-600); padding:0 .4rem; }
.schritte label { display:inline-flex; align-items:center; gap:.35rem; font-weight:500; margin:.25rem 1rem .25rem 0; color:var(--text-body); text-transform:none; }
.rechts { text-align:right; }
.position { border:1px dashed var(--border-default); border-radius:var(--radius-lg); padding:1rem; margin:.8rem 0; background:var(--steel-50); }

/* Tabellen */
.tabelle { width:100%; border-collapse:collapse; }
.tabelle th { text-align:left; padding:.6rem .6rem; font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); background:var(--steel-50); border-bottom:2px solid var(--border-default); }
.tabelle td { text-align:left; padding:.6rem .6rem; border-bottom:1px solid var(--border-subtle); vertical-align:top; }
.tabelle tbody tr { transition:background var(--dur-fast); }
.tabelle tbody tr:hover { background:var(--steel-50); }

/* Fortschrittsbalken */
.balken { background:var(--steel-200); border-radius:var(--radius-pill); height:8px; overflow:hidden; min-width:120px; }
.balken-fuellung { background:linear-gradient(90deg,var(--navy-700),var(--navy-500)); height:100%; border-radius:var(--radius-pill); transition:width var(--dur-slow) var(--ease-out); }

/* Badges */
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--radius-sm); font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; background:var(--steel-100); color:var(--steel-700); border:1px solid var(--steel-150); }
.badge-neu { background:var(--yellow-500); color:var(--navy-800); border-color:var(--yellow-500); }
/* Semantische Badge-Varianten (statt wiederholter Inline-Styles). */
.badge-danger { background:var(--danger); color:#fff; border-color:var(--danger); }
.badge-warn { background:var(--warning); color:#3a2c00; border-color:var(--warning); }
.badge-ok { background:var(--success); color:#fff; border-color:var(--success); }
.dringend { color:var(--danger); font-weight:700; }

/* Status-Pills (offen / in Arbeit / abgeschlossen) */
.pill { display:inline-flex; align-items:center; gap:.4rem; padding:3px 11px; border-radius:var(--radius-pill); font-family:var(--font-display); font-weight:700; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }
.pill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.pill-offen { background:var(--steel-100); color:var(--steel-600); }
.pill-arbeit { background:var(--navy-100); color:var(--navy-600); }
.pill-fertig { background:#e3f3e4; color:var(--success); }
.pill-laeuft { background:#fdecec; color:var(--danger); }
.pill-begonnen { background:#e3f3e4; color:var(--success); }
.pill-gesperrt { background:var(--steel-100); color:var(--steel-500); }
.pill-warn { background:#fff6e0; color:#a9761a; }
.pill-rot { background:#fdecec; color:var(--danger); }

/* Suche */
.suche { display:flex; gap:.5rem; margin-bottom:1rem; }
.suche input[type=text] { flex:1; }

/* Sticky Listen-Kopf: Titel + Primäraktion + Suche bleiben beim Scrollen sichtbar,
   egal wie viele Tabelleneinträge folgen. Blutet über die Content-Innenabstände. */
.listen-kopf { position:sticky; top:68px; z-index:20; background:var(--surface-page); margin:-30px -32px 1.2rem; padding:1.05rem 32px .85rem; border-bottom:1px solid var(--border-subtle); box-shadow:0 6px 12px -9px rgba(4,31,60,.22); }
.listen-kopf .lk-zeile { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.listen-kopf h2 { margin:0; }
.listen-kopf .lk-aktionen { display:flex; gap:.5rem; flex-wrap:wrap; }
.listen-kopf .lk-hinweis { margin:.5rem 0 0; color:var(--text-muted); font-size:.9rem; }
/* Verteilte Zeile (Titel links, Badge rechts) für Inhalt IN Panels – die
   .lk-zeile oben ist bewusst auf .listen-kopf gescoped. */
.zeile-verteilt { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
/* Abschnitts-Überschrift zwischen Panel-Gruppen (statt Inline-margin-h3). */
.abschnitt-titel { margin:1.4rem 0 .6rem; }
.listen-kopf .suche { margin:.8rem 0 0; }
@media (max-width:880px) { .listen-kopf { position:static; margin:-20px -16px 1rem; padding:.9rem 16px .8rem; } }

/* Laufendes Banner (Schritt / Pulvergang) */
.laufend-banner { position:relative; overflow:hidden; background:linear-gradient(135deg,var(--navy-800),var(--navy-700)); color:#fff; border-radius:var(--radius-lg); padding:1.2rem 1.4rem; margin-bottom:1.2rem; box-shadow:var(--shadow-md); }
.laufend-banner .timer { font-family:var(--font-display); font-size:2.4rem; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:.02em; margin:.1rem 0; }
.laufend-banner .timer-paar { display:flex; gap:2.2rem; flex-wrap:wrap; margin:.1rem 0 .3rem; }
.laufend-banner .timer-paar .timer { font-size:1.9rem; margin:0; }
.laufend-banner .timer-block .tl { font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; color:rgba(255,255,255,.7); }
.ub-form { display:flex; flex-wrap:wrap; align-items:end; gap:.7rem; margin-top:.5rem; background:rgba(255,255,255,.10); padding:.7rem .8rem; border-radius:var(--radius-md); }
.ub-form .ub-label { color:#fff; font-size:.8rem; font-weight:600; display:flex; flex-direction:column; gap:.25rem; margin:0; text-transform:none; }
.ub-form select, .ub-form input { min-width:190px; }
/* Wichtig: das hidden-Attribut muss die display-Regel schlagen (Menü erst nach Klick). */
.ub-form[hidden], .ub-form .ub-label[hidden] { display:none; }
/* Abschluss-Panel (optionaler Kommentar + ggf. Foto) – analog zum Unterbrechen-Menü. */
.ab-form { display:flex; flex-direction:column; gap:.5rem; margin-top:.5rem; background:rgba(255,255,255,.10); padding:.7rem .8rem; border-radius:var(--radius-md); }
.ab-form .ub-label { color:#fff; font-size:.8rem; font-weight:600; display:flex; flex-direction:column; gap:.25rem; margin:0; text-transform:none; }
.ab-form textarea { width:100%; resize:vertical; }
/* Geführte Foto-Aufnahme: Knopf öffnet das versteckte capture-Input (Kamera);
   das Input bleibt fokussierbar (nicht display:none), ist aber unsichtbar. */
.ab-form .ab-foto {
  position:absolute; width:1px; height:1px; opacity:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.ab-form .ab-foto-block { display:flex; flex-direction:column; gap:.45rem; position:relative; }
.ab-form .ab-foto-status { display:flex; align-items:center; gap:.6rem; }
.ab-form .ab-foto-status[hidden] { display:none; }
.ab-form .ab-foto-vorschau {
  width:96px; height:72px; object-fit:cover; border-radius:var(--radius-md);
  border:2px solid rgba(255,255,255,.55); background:rgba(255,255,255,.12); display:block;
}
.ab-form .ab-foto-ok { color:#d9f2df; font-size:.85rem; font-weight:600; }
.ab-form .ab-foto-fehler { color:#ffd7d0; font-size:.85rem; font-weight:700; margin:0; }
.ab-form .ab-foto-fehler[hidden], .ab-form .ab-foto-block[hidden] { display:none; }
.ab-form .ab-skip { color:#fff; font-size:.85rem; display:flex; align-items:center; gap:.4rem; text-transform:none; font-weight:600; }
.ab-form .ab-skip input { width:auto; }
.ab-form[hidden], .ab-form .ab-skip-grund[hidden] { display:none; }
.laufend-banner .badge { background:var(--yellow-500); color:var(--navy-800); border-color:var(--yellow-500); }

/* Kalender */
.kalender { width:100%; border-collapse:collapse; table-layout:fixed; }
.kalender th { padding:.45rem; border:1px solid var(--border-subtle); background:var(--navy-800); color:#fff; font-family:var(--font-display); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
.kalender td { border:1px solid var(--border-subtle); vertical-align:top; height:5.6rem; padding:.3rem; font-size:.8rem; background:#fff; }
.kalender td.fremd { background:var(--steel-50); color:var(--steel-400); }
.kalender td.pulvertag { background:var(--yellow-100); }
.kalender td.verzinktag { background:var(--navy-100); }
.kalender td.pulvertag.verzinktag { background:linear-gradient(135deg, var(--yellow-100) 0 50%, var(--navy-100) 50% 100%); }
.kalender td.heute { outline:2px solid var(--navy-700); outline-offset:-2px; }
.kalender .tagzahl { font-family:var(--font-display); font-weight:800; display:block; margin-bottom:.2rem; color:var(--text-strong); }
/* Eintraege als weisse Pillen mit farbiger Kante – lesbar auf jedem Tages-Ton. */
.kalender .eintrag { display:block; margin:.16rem 0; padding:.14rem .4rem; background:#fff; font-weight:600; font-size:.74rem; line-height:1.25; color:var(--navy-800); border:1px solid var(--border-subtle); border-left:3px solid var(--steel-400); border-radius:var(--radius-sm); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kalender .eintrag.pulver { border-left-color:var(--yellow-500); }
.kalender .eintrag.verzinken { border-left-color:var(--navy-600); }
.kalender .eintrag.stahl { border-left-color:var(--navy-500); }
.kal-legende { display:inline-flex; align-items:center; gap:.35rem; margin-right:1rem; color:var(--text-muted); }
.lg-swatch { display:inline-block; width:.8rem; height:.8rem; border-radius:2px; border-left:3px solid; background:#fff; }
.lg-swatch.stahl { border-left-color:var(--navy-500); }
.lg-swatch.pulver { border-left-color:var(--yellow-500); }
a.eintrag { transition:box-shadow var(--dur-fast), border-color var(--dur-fast); }
a.eintrag:hover { text-decoration:none; box-shadow:var(--shadow-xs); border-color:var(--border-default); }

/* Filterleiste + Legende ueber dem Beschichtungskalender. */
.kal-leiste { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:.2rem 0 .9rem; }
.kal-filter { display:inline-flex; border:1px solid var(--border-default); border-radius:var(--radius-pill); overflow:hidden; }
.kal-filter .kf { padding:.4rem 1rem; font-family:var(--font-display); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; color:var(--navy-700); background:#fff; border-left:1px solid var(--border-subtle); text-decoration:none; transition:background var(--dur-fast); }
.kal-filter .kf:first-child { border-left:none; }
.kal-filter .kf:hover { background:var(--steel-100); text-decoration:none; }
.kal-filter .kf.aktiv { background:var(--navy-800); color:#fff; }
.kal-filter .kf.kf-pulver.aktiv { background:var(--yellow-500); color:var(--navy-800); }
.kal-filter .kf.kf-verzinken.aktiv { background:var(--navy-700); color:#fff; }
.kal-legende { display:inline-flex; gap:1.1rem; font-size:.8rem; color:var(--text-muted); }
.kal-legende .lg { display:inline-flex; align-items:center; gap:.45rem; font-weight:600; }
.kal-legende .lg::before { content:""; width:15px; height:15px; background:#fff; border:1px solid var(--border-subtle); border-left:3px solid var(--steel-400); border-radius:var(--radius-sm); }
.kal-legende .lg-pulver::before { border-left-color:var(--yellow-500); }
.kal-legende .lg-verzinken::before { border-left-color:var(--navy-600); }

/* ============================================================
   Login (Split-Layout mit animierten Verläufen)
   ============================================================ */
.auth-main { min-height:100vh; }
.login-grid { min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; background:var(--surface-page); }
.login-brand { position:relative; overflow:hidden; background:var(--navy-800); color:#fff; display:flex; flex-direction:column; justify-content:space-between; padding:48px 56px; }
.login-aurora { position:absolute; border-radius:50%; filter:blur(16px); pointer-events:none; }
.login-aurora.a { width:540px; height:540px; left:-160px; top:-180px; background:radial-gradient(circle at 50% 50%, rgba(250,232,0,.20), rgba(250,232,0,0) 62%); animation:brinkAuroraA 16s ease-in-out infinite; }
.login-aurora.b { width:600px; height:600px; right:-200px; bottom:-220px; background:radial-gradient(circle at 50% 50%, rgba(42,111,219,.34), rgba(42,111,219,0) 64%); animation:brinkAuroraB 20s ease-in-out infinite; }
.login-grid-overlay { position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(circle at 30% 30%,#000 0%,transparent 78%); mask-image:radial-gradient(circle at 30% 30%,#000 0%,transparent 78%); }
.login-brand .top, .login-brand .mid, .login-brand .bottom { position:relative; z-index:1; }
.login-brand .logo-row { display:flex; align-items:center; gap:13px; }
.login-brand .logo-row img { height:40px; }
.login-brand .logo-row .name { font-family:var(--font-display); font-weight:800; font-size:24px; letter-spacing:-.01em; }
.login-brand .logo-row .name span { font-weight:600; }
.login-brand .headline { font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,3.4vw,3rem); line-height:1.04; text-transform:uppercase; letter-spacing:-.02em; margin:0; }
.login-brand .claim { display:flex; align-items:center; gap:12px; margin-top:18px; animation:brinkClaimIn 620ms var(--ease-out) both; }
.login-brand .claim .bar { flex:none; width:3px; align-self:stretch; border-radius:2px; background:var(--yellow-500); }
.login-brand .claim .t { font-size:1.05rem; color:rgba(255,255,255,.85); font-style:italic; }
.login-brand .since { display:flex; align-items:center; gap:9px; font-size:.85rem; color:rgba(255,255,255,.6); }
.login-brand .since .dot { width:6px; height:6px; border-radius:50%; background:var(--yellow-500); }
.login-form-panel { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:40px; }
.login-card { width:100%; max-width:380px; }
.login-card h2 { margin:0 0 .3rem; }
.login-card .sub { color:var(--text-muted); margin:0 0 1.4rem; }

/* ============================================================
   Dashboard: Hero, Statistik-Kacheln, Diagramme
   ============================================================ */
.hero { position:relative; overflow:hidden; background:linear-gradient(135deg,var(--navy-800) 0%,var(--navy-700) 70%,var(--navy-600) 100%); color:#fff; border-radius:var(--radius-lg); padding:2rem 2.2rem; box-shadow:var(--shadow-md); }
.hero .datum { font-family:var(--font-display); font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow-500); }
.hero h2 { color:#fff; font-size:clamp(1.7rem,3vw,2.3rem); margin:.35rem 0 .25rem; }
.hero .witz { color:rgba(255,255,255,.82); font-size:1.05rem; max-width:46ch; }
.hero .aktionen { margin-top:1.3rem; display:flex; gap:.6rem; flex-wrap:wrap; }
.hero .ring { position:absolute; right:-60px; top:50%; transform:translateY(-50%); width:300px; height:300px; opacity:.07; pointer-events:none; animation:loginSpin 70s linear infinite; }
.hero .knopf { transform:none; }

.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1rem; margin:1.2rem 0; }
.stat { background:#fff; border:1px solid var(--border-subtle); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); padding:1.1rem 1.2rem; transition:box-shadow var(--dur-base), transform var(--dur-base); }
.stat:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.stat .num { font-family:var(--font-display); font-weight:800; font-size:2.1rem; color:var(--text-strong); line-height:1; }
.stat .num.warn { color:var(--danger); }
.stat .lab { color:var(--text-muted); font-size:.85rem; margin-top:.35rem; }
.stat .top { display:flex; align-items:center; justify-content:space-between; }
.stat .chip { font-family:var(--font-display); font-weight:700; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--navy-600); background:var(--steel-100); border-radius:var(--radius-sm); padding:2px 7px; }

.dash-cols { display:grid; grid-template-columns:1.4fr 1fr; gap:1.2rem; align-items:start; }
@media (max-width:960px){ .dash-cols { grid-template-columns:1fr; } }
.panel-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.2rem; margin-top:1.2rem; align-items:start; }

/* Aktuelle Arbeitsgänge (Live-Überblick auf der Startseite) */
.panel + .dash-cols { margin-top:1.2rem; }
.lauf-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
@media (max-width:900px){ .lauf-grid { grid-template-columns:1fr; } }
.lauf-titel { margin:0 0 .5rem; font-family:var(--font-display); font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--navy-600); display:flex; align-items:center; gap:.45rem; }
.lauf-liste { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.65rem; }
.lauf-liste li { padding-bottom:.6rem; border-bottom:1px solid var(--border-subtle); }
.lauf-liste li:last-child { border-bottom:none; padding-bottom:0; }
.lauf-liste .pill, .lauf-liste .ral-badge { margin-right:.4rem; }
.lauf-meta { color:var(--text-muted); font-size:.82rem; margin-top:.2rem; }
.panel { background:#fff; border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:1.3rem 1.4rem; }
.panel h3 { margin:0 0 .2rem; }
.panel .ph { display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem; }

/* Balkendiagramm (horizontal) */
.bars { display:flex; flex-direction:column; gap:.55rem; }
.bar-row { display:flex; align-items:center; gap:.7rem; }
.bar-row .bl { width:128px; flex:none; font-size:.85rem; color:var(--text-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-track { flex:1; background:var(--steel-100); border-radius:var(--radius-pill); height:14px; overflow:hidden; }
.bar-fill { height:100%; background:linear-gradient(90deg,var(--navy-700),var(--navy-500)); border-radius:var(--radius-pill); transform-origin:left center; animation:barGrow .9s var(--ease-out) both; }
.bar-fill.accent { background:linear-gradient(90deg,var(--yellow-600),var(--yellow-500)); }
.bar-row .bv { width:72px; flex:none; text-align:right; font-variant-numeric:tabular-nums; font-size:.85rem; color:var(--text-muted); }

/* Säulendiagramm (vertikal, z. B. 7 Tage) */
.cols { display:flex; align-items:flex-end; gap:.5rem; height:130px; margin-top:.4rem; }
.col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:.35rem; height:100%; }
.col .cbar { width:70%; min-height:3px; background:linear-gradient(180deg,var(--navy-500),var(--navy-700)); border-radius:4px 4px 0 0; transform-origin:bottom; animation:barRise .9s var(--ease-out) both; }
.col .cbar.today { background:linear-gradient(180deg,var(--yellow-500),var(--yellow-600)); }
.col .cl { font-size:.7rem; color:var(--text-muted); }
/* Auswertungs-Charts mit wenigen Säulen (z. B. 3 Monate): Säulen nicht auf
   Panelbreite aufblasen, sondern schlank und mittig wie im Dashboard. */
.cols-schmal { justify-content:center; gap:1.4rem; }
.cols-schmal .col { flex:0 1 64px; }

.leer-zustand { padding:1.4rem; text-align:center; color:var(--text-faint); }

/* Tablet-Stempelansicht: große, touch-freundliche Karten */
/* (#4) Schritt-Filter über „Meine Schritte" – große, touch-freundliche Chips (10"-Tablet). */
.schritt-filter { display:flex; flex-wrap:wrap; gap:.5rem; margin:.3rem 0 1rem; }
.schritt-filter .sf-chip { font:inherit; font-weight:700; font-size:1rem; min-height:46px;
  border:1px solid var(--border-subtle); background:#fff; color:var(--text-strong);
  padding:.5rem 1.15rem; border-radius:var(--radius-pill); cursor:pointer;
  transition:background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.schritt-filter .sf-chip:hover { border-color:var(--navy-400); }
.schritt-filter .sf-chip.an { background:var(--navy-800); color:#fff; border-color:var(--navy-800); }
.t-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:1rem; margin-top:.6rem; }
.t-card { background:#fff; border:1px solid var(--border-subtle); border-left:4px solid var(--steel-200); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:1.2rem 1.3rem; display:flex; flex-direction:column; gap:.9rem; animation:brinkRise .45s var(--ease-out) both; transition:box-shadow var(--dur-base), transform var(--dur-base), border-color var(--dur-base); }
.t-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.t-card.neu { border-left-color:var(--yellow-500); }
/* Angepinnt: laufender Schritt rot, begonnener (pausierter) grün hervorgehoben. */
.t-card.laeuft { border-left-color:var(--danger); border-left-width:5px; box-shadow:var(--shadow-md); }
.t-card.begonnen { border-left-color:var(--success); border-left-width:5px; }
/* Gesperrt: durch offene Vorgänger blockierter Folgeschritt – vollständig ausgegraut,
   nicht bedienbar, steht ganz hinten. */
.t-card.gesperrt { opacity:.6; background:var(--steel-50); border-left-color:var(--steel-300); box-shadow:none; }
.t-card.gesperrt:hover { box-shadow:none; transform:none; }
.gesperrt-hinweis { margin-top:.55rem; font-size:.85rem; font-weight:600; color:var(--steel-600); }
.t-card .kopf { font-family:var(--font-display); font-weight:800; font-size:1.2rem; color:var(--text-strong); line-height:1.15; }
/* (#5) 10"-Tablet: Meta-Zeile etwas größer für gute Lesbarkeit auf Armlänge. */
.t-card .meta { color:var(--text-muted); font-size:.95rem; line-height:1.45; }
.t-card .aktion { margin-top:auto; display:flex; gap:.6rem; flex-wrap:wrap; }
.t-card .aktion .knopf { flex:1; }
/* (#5) Kiosk-Politur: ruhige Tap-Rückmeldung, keine Text-Markierung beim Tippen
   (ausschließliche Tablet-Nutzung durch gewerbliche Mitarbeiter). */
.t-card, .sf-chip, .laufend-banner .knopf, .t-card .knopf { -webkit-tap-highlight-color:transparent; }
.t-card .knopf, .sf-chip, .laufend-banner .aktion .knopf { user-select:none; -webkit-user-select:none; }
/* Detailansicht eines noch gesperrten Schritts + Materialeingangs-Quittierung im
   navy Lauf-Banner (signalgelbe Aufmerksamkeitsfläche). */
.karte-gesperrt { border-left:4px solid var(--steel-300); background:var(--steel-50); }
.start-mit-material { flex-basis:100%; }
.mat-quittung { display:flex; gap:.6rem; align-items:flex-start; background:rgba(250,232,0,.14); border:1px solid var(--yellow-500); border-radius:var(--radius-md); padding:.7rem .85rem; margin:0 0 .8rem; color:#fff; font-size:.92rem; line-height:1.35; cursor:pointer; }
.mat-quittung input[type=checkbox] { margin-top:.15rem; width:20px; height:20px; flex:0 0 auto; accent-color:var(--yellow-500); }
.knopf:active { transform:scale(.98); }
/* Live-Anzeige im laufenden Banner */
.laufend-banner { box-shadow:var(--shadow-md); }
.laufend-banner .live { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; color:var(--yellow-500); }
.laufend-banner .live .dot { width:10px; height:10px; border-radius:50%; background:var(--yellow-500); animation:livePuls 1.6s ease-out infinite; }
.laufend-banner .aktion { margin-top:1rem; display:flex; gap:.6rem; flex-wrap:wrap; }
/* „ruht" = Schritt-Detailseite ohne laufende Buchung: Statuslabel dezent (nicht signalgelb). */
.laufend-banner.ruht .live { color:rgba(255,255,255,.7); }
@keyframes livePuls { 0% { box-shadow:0 0 0 0 rgba(250,232,0,.55); } 70% { box-shadow:0 0 0 13px rgba(250,232,0,0); } 100% { box-shadow:0 0 0 0 rgba(250,232,0,0); } }

/* Modal / Lightbox (Detail-Overlay) */
body.modal-open { overflow:hidden; }
.modal-backdrop { position:fixed; inset:0; z-index:200; background:rgba(4,31,60,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); display:flex; align-items:flex-start; justify-content:center; padding:4vh 16px; overflow-y:auto; animation:brinkFade var(--dur-base) ease; }
.modal-backdrop[hidden] { display:none; }
.modal-panel { background:var(--surface-page); width:100%; max-width:840px; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; animation:modalPop var(--dur-slow) var(--ease-out); }
.modal-head { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; background:var(--navy-800); color:#fff; }
.modal-head .t { font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:1.05rem; }
.modal-close { flex:none; background:rgba(255,255,255,.12); border:none; color:#fff; width:32px; height:32px; border-radius:var(--radius-md); cursor:pointer; font-size:20px; line-height:1; transition:background var(--dur-fast); }
.modal-close:hover { background:rgba(255,255,255,.24); }
.modal-body { padding:18px 20px 24px; }
.zeile-klick { cursor:pointer; }
@keyframes modalPop { from { opacity:0; transform:translateY(14px) scale(.97); } to { opacity:1; transform:none; } }

/* Hilfe / Light-Tutorial: dezenter Fragezeichen-Knopf unten rechts + Overlay */
.hilfe-knopf { position:fixed; right:22px; bottom:22px; z-index:90; width:44px; height:44px; border-radius:var(--radius-pill); background:var(--navy-800); color:#fff; border:none; cursor:pointer; box-shadow:var(--shadow-md); display:inline-flex; align-items:center; justify-content:center; opacity:.6; transition:opacity var(--dur-fast), transform var(--dur-fast), background var(--dur-fast), color var(--dur-fast); }
.hilfe-knopf .ic { width:22px; height:22px; }
.hilfe-knopf:hover, .hilfe-knopf:focus-visible { opacity:1; transform:translateY(-2px); background:var(--accent); color:var(--navy-800); box-shadow:var(--shadow-lg); }
.hilfe-overlay { position:fixed; inset:0; z-index:190; background:rgba(4,31,60,.45); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; padding:1.5rem; animation:brinkFade var(--dur-base) ease; }
.hilfe-overlay[hidden] { display:none; }
.hilfe-panel { position:relative; background:var(--surface-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); border-top:4px solid var(--accent); max-width:470px; width:100%; max-height:85vh; overflow:auto; padding:1.6rem 1.7rem 1.8rem; animation:modalPop var(--dur-slow) var(--ease-out); }
.hilfe-close { position:absolute; top:.55rem; right:.7rem; background:none; border:none; font-size:1.7rem; line-height:1; color:var(--text-muted); cursor:pointer; padding:.1rem .3rem; }
.hilfe-close:hover { color:var(--text-strong); }
.hilfe-kopf { display:flex; gap:.85rem; align-items:center; margin-bottom:.75rem; }
.hilfe-mark { flex:none; width:38px; height:38px; border-radius:var(--radius-pill); background:var(--accent); color:var(--navy-800); font-family:var(--font-display); font-weight:800; font-size:1.35rem; display:inline-flex; align-items:center; justify-content:center; }
.hilfe-eyebrow { font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:.68rem; color:var(--navy-500); }
.hilfe-titel { margin:.05rem 0 0; font-size:1.3rem; }
.hilfe-intro { color:var(--text-body); margin:.2rem 0 .95rem; line-height:1.5; }
.hilfe-liste { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem; }
.hilfe-liste li { position:relative; padding-left:1.55rem; color:var(--text-body); font-size:.92rem; line-height:1.45; }
.hilfe-liste li::before { content:""; position:absolute; left:0; top:.42rem; width:9px; height:9px; border-radius:2px; background:var(--accent); box-shadow:inset 0 0 0 1px var(--navy-800); }
.hilfe-liste strong { color:var(--text-strong); }
.hilfe-tipp { margin:1.05rem 0 0; padding:.6rem .85rem; background:var(--yellow-100); border-left:3px solid var(--accent); border-radius:var(--radius-md); font-size:.88rem; color:var(--navy-800); }

/* Artikel-Auswahl (filterbares Overlay im Anlege-Formular) */
.artikel-wahl { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.artikel-wahl .artikel-anzeige { font-weight:700; color:var(--text-strong); }
.picker-overlay { position:fixed; inset:0; z-index:200; background:rgba(4,31,60,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px; overflow-y:auto; animation:brinkFade var(--dur-base) ease; }
.picker-overlay[hidden] { display:none; }
.picker-box { background:#fff; width:100%; max-width:560px; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; animation:modalPop var(--dur-slow) var(--ease-out); }
.picker-kopf { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:var(--navy-800); color:#fff; font-family:var(--font-display); }
.picker-filter { display:flex; gap:.5rem; padding:14px 18px; border-bottom:1px solid var(--border-subtle); }
.picker-filter input { flex:1; }
.picker-liste { max-height:55vh; overflow-y:auto; }
.picker-eintrag { width:100%; display:flex; align-items:baseline; gap:.7rem; padding:.7rem 18px; background:transparent; border:none; border-top:1px solid var(--steel-100); cursor:pointer; text-align:left; transition:background var(--dur-fast); }
.picker-eintrag:first-child { border-top:none; }
.picker-eintrag:hover { background:var(--steel-50); }
.picker-eintrag .pe-nr { font-family:var(--font-display); font-weight:800; color:var(--navy-700); min-width:92px; }
.picker-eintrag .pe-bez { flex:1; color:var(--text-strong); }
.picker-eintrag .pe-kat { font-size:.78rem; color:var(--text-muted); }
.picker-eintrag .pe-zeit { font-size:.75rem; font-weight:700; color:var(--navy-600); background:var(--navy-100);
  padding:1px 7px; border-radius:var(--radius-sm); white-space:nowrap; }

/* Willkommens-Übergang nach dem Login (2 s, ruhig): das Rundlogo gleitet aus
   der unteren Ecke (wie auf der Login-Seite) in die Mitte, verweilt kurz mit
   einem weichen Lichtschein und übergibt dann an die Sidebar-Logo-Ecke.
   Für saubere Frames laufen alle Bewegungen ausschließlich über transform/
   opacity/clip-path (kein left/top, kein animierter filter). */
.welcome-overlay { position:fixed; inset:0; z-index:1000; overflow:hidden; pointer-events:none;
  /* Glow dort, wo das Login-Rundlogo saß, damit das Logo scheinbar von dort aufsteigt. */
  background:radial-gradient(circle at 44% 90%, rgba(42,111,219,.34), rgba(42,111,219,0) 55%),
             linear-gradient(135deg,var(--navy-900) 0%,var(--navy-800) 60%,var(--navy-700) 100%);
  /* Radialer Reveal: das Overlay zieht sich zur Sidebar-Logo-Ecke zusammen –
     die Oberfläche "schält" sich aus dem Markenmoment, statt flach zu faden. */
  clip-path:circle(160% at 44px 44px);
  will-change:clip-path;
  animation:welcomeReveal 2s cubic-bezier(.45,0,.2,1) forwards; }
.welcome-overlay .mark { position:absolute; left:50%; top:50%; width:118px; height:118px;
  will-change:transform,opacity;
  animation:logoIntro 2s cubic-bezier(.3,0,.2,1) both; }
/* Weicher Lichtschein hinter dem Logo (eigener Layer statt filter-Blitz). */
.welcome-overlay .mark-glow { position:absolute; left:50%; top:50%; width:260px; height:260px;
  border-radius:50%; pointer-events:none; opacity:0; will-change:transform,opacity;
  background:radial-gradient(circle, rgba(255,255,255,.5), rgba(255,255,255,0) 68%);
  animation:logoGlanz 2s var(--ease-out) both; }

/* Transparenz-Choreografie: SOLANGE der Splash im DOM ist (body:has), baut die
   eigentliche Oberfläche ihre Deckkraft unsichtbar UNTER dem Vorhang auf.
   WICHTIG (Timing): Der Vorhang zieht sich zur Ecke oben links zusammen und
   gibt ENTFERNTE Bereiche (Sidebar-Fuß, rechtes Topbar-Ende) schon kurz nach
   Kollaps-Beginn (60 % = 1,2 s) frei – deshalb müssen alle Aufbau-Fades VOR
   1,2 s abgeschlossen sein, sonst blitzen halbtransparente (weißliche) Balken
   auf. Der Vorhang selbst ist ein DIREKTES body-Kind (base.html-Block) – nur
   so liegt er garantiert über der sticky Topbar (z-index 30) und der Sidebar,
   auch während .content beim Seitenaufbau per brinkFade-Opacity kurz einen
   eigenen Stacking-Kontext bildet (das hat fixierte Kinder dort eingesperrt).
   Ohne :has-Unterstützung bleibt schlicht das bisherige Verhalten; bei
   prefers-reduced-motion gilt animation:none -> sofort sichtbar. */
body:has(#willkommen) .sidebar { animation:shellRein .6s var(--ease-out) .5s both; }
body:has(#willkommen) .topbar { animation:shellRein .58s var(--ease-out) .58s both; }
body:has(#willkommen) .content > * { animation:shellRein .58s var(--ease-out) .62s both; }
body:has(#willkommen) .hilfe-knopf { animation:shellRein .5s var(--ease-out) .7s both; }
/* Das Sidebar-Logo „empfängt" die Übergabe: kurzer Aufnahme-Puls, wenn das
   fliegende Logo in seiner Ecke ankommt (die Ecke wird zuletzt freigegeben). */
body:has(#willkommen) .sidebar-brand img { animation:logoEmpfang .35s var(--ease-out) 1.8s both; }

/* Startseite nach dem Login: Inhalte gestaffelt einblenden (Übergabe statt Standbild). */
.intro > * { animation:introRein .6s var(--ease-out) both; }
.intro > *:nth-child(1) { animation-delay:1.15s; }
.intro > *:nth-child(2) { animation-delay:1.27s; }
.intro > *:nth-child(3) { animation-delay:1.39s; }
.intro > *:nth-child(4) { animation-delay:1.51s; }
.intro > *:nth-child(5) { animation-delay:1.63s; }
.intro > *:nth-child(n+6) { animation-delay:1.75s; }
@keyframes introRein { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* Login: animiertes Rundlogo – sitzt in der blau aufgehellten Ecke unten rechts
   (passend zum Logo oben links im gelben Backlight), Ton-in-Ton.
   Subtiles, unregelmäßiges Schwingen statt voller Drehung. */
.login-float { position:absolute; right:-46px; bottom:-64px; opacity:.08; pointer-events:none; animation:loginFloatY 13s ease-in-out infinite; z-index:0; }
.login-float img { display:block; width:300px; height:300px; animation:logoWobble 22s ease-in-out infinite; }

/* Einstellungen: Themen-Fieldsets als zweispaltiges Raster (weniger Scrollen) */
.einst-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:0 1.6rem; align-items:start; }
.einst-grid fieldset { margin-top:1.2rem; }

/* Login-Schmalansicht: kompakte Wortmarke statt völlig nackter Form */
.login-marke { display:none; align-items:center; gap:.6rem; margin-bottom:1.2rem; }
.login-marke img { width:34px; height:34px; }
.login-marke .wm { font-family:var(--font-display); font-weight:800; font-size:1.05rem; color:var(--navy-900); }
.login-marke .wm small { display:block; font-weight:600; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }

/* Detail-Karte: sauberes Key-Value-Raster (statt loser Divs) */
.infogrid { display:grid; grid-template-columns:auto 1fr; gap:.35rem 1rem; align-items:baseline; }
.infogrid dt { font-family:var(--font-display); font-weight:700; font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); margin:0; white-space:nowrap; }
.infogrid dd { margin:0; color:var(--text-strong); }
.karte .kopf-zeile { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.7rem; }
.karte .kopf-zeile .titel { font-family:var(--font-display); font-weight:800; font-size:1.15rem; color:var(--text-strong); line-height:1.1; }

/* Tablet: Personen-Auswahl als einladendes Kachelraster */
.ma-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1rem; margin-top:1rem; }
.ma-card { display:flex; align-items:center; gap:.9rem; padding:1.1rem 1.2rem; background:#fff; border:1px solid var(--border-subtle); border-left:4px solid var(--steel-200); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); text-decoration:none; color:var(--text-strong); transition:box-shadow var(--dur-base), transform var(--dur-base), border-color var(--dur-base); }
.ma-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); border-left-color:var(--yellow-500); text-decoration:none; color:var(--text-strong); }
.ma-card .av { flex:none; width:44px; height:44px; border-radius:50%; background:var(--navy-800); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:1.05rem; }
.ma-card:hover .av { background:var(--yellow-500); color:var(--navy-800); }
.ma-card .nm { font-family:var(--font-display); font-weight:700; font-size:1.05rem; line-height:1.15; }

/* RAL-Farbton: Badge, Abfrage-Zeile (Pulvern) und Planungs-Übersicht (FL) */
.ral-badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:var(--radius-sm); font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.03em; background:var(--navy-100); color:var(--navy-700); border:1px solid var(--navy-200); white-space:nowrap; }
/* Aktuelle Fertigungsstufe (laufender Schritt) – hebt sich deutlich ab */
.stufe-badge { display:inline-flex; align-items:center; gap:.4rem; padding:3px 11px; border-radius:var(--radius-pill); font-family:var(--font-display); font-weight:800; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; background:var(--navy-800); color:var(--yellow-500); white-space:nowrap; }
.stufe-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--yellow-500); flex:none; animation:livePuls 1.6s ease-out infinite; }
.ral-zeile { margin:.6rem 0 .2rem; padding:.7rem .9rem; background:var(--yellow-100); border-left:4px solid var(--yellow-500); border-radius:var(--radius-md); animation:brinkRise .25s var(--ease-out); }
.ral-zeile label { margin-top:0; }
.ral-zeile input { background:#fff; }
.ral-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.8rem; }
.ral-karte { border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:.8rem .9rem; background:var(--surface-card); }
.ral-kopf { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.5rem; }
.ral-termine { display:flex; flex-wrap:wrap; gap:.2rem 1rem; font-size:.82rem; color:var(--text-muted); margin-bottom:.5rem; }
.ral-termine .vorschlag { color:var(--navy-600); }
.gang-anlage { display:flex; flex-wrap:wrap; gap:1.4rem; }
.gang-form { display:flex; align-items:end; gap:.7rem; flex-wrap:wrap; background:var(--surface-sunken); padding:.7rem .9rem; border-radius:var(--radius-md); }
.gang-form strong { align-self:center; }
.gang-form label { font-weight:600; color:var(--text-muted); font-size:.82rem; display:flex; flex-direction:column; gap:.2rem; margin:0; }
.gang-form input[type=date] { width:auto; }
.einst-dauer { display:flex; flex-wrap:wrap; gap:1rem; margin-top:.5rem; }
.einst-dauer label { display:flex; flex-direction:column; gap:.2rem; font-weight:600; color:var(--text-strong); font-size:.9rem; }
.einst-dauer input { width:5.5rem; }
.einst-dauer small { font-weight:400; color:var(--text-muted); }
.einst-std { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.8rem; margin-top:.5rem; }
.einst-std label { display:flex; flex-direction:column; gap:.25rem; font-weight:600; color:var(--text-strong); font-size:.9rem; }
.einst-std small { font-weight:400; color:var(--text-muted); }
/* Fertigungsunterlagen (Dokumente) */
.dok-block { margin-top:.9rem; padding-top:.7rem; border-top:1px solid var(--border-subtle); }
.dok-titel { font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); margin-bottom:.4rem; }
.dok-liste { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.35rem; }
.dok-link { display:flex; align-items:center; gap:.6rem; padding:.45rem .7rem; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-card); text-decoration:none; color:var(--text-strong); transition:border-color var(--dur-fast), background var(--dur-fast); }
.dok-link:hover { border-color:var(--yellow-500); background:var(--yellow-100); text-decoration:none; }
.dok-typ { flex:none; font-family:var(--font-display); font-weight:800; font-size:.62rem; letter-spacing:.04em; padding:2px 7px; border-radius:var(--radius-sm); background:var(--navy-800); color:var(--yellow-500); }
.dok-name { flex:1 1 auto; font-weight:600; word-break:break-word; }
.dok-kat { flex:none; font-size:.62rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
           padding:2px 7px; border-radius:var(--radius-sm); background:var(--navy-100); color:var(--navy-700); }
.dok-kat-wahl { margin-bottom:.4rem; }
.dok-akt { flex:none; font-size:.78rem; color:var(--text-muted); }
.dok-eintrag { display:flex; flex-direction:column; gap:.25rem; }
.dok-rev { margin:0 0 .2rem .2rem; }
.dok-rev > summary { cursor:pointer; font-size:.8rem; color:var(--navy-600); }
.dok-verlauf { margin-top:.4rem; font-size:.82rem; }
.dok-verlauf ul { margin:.2rem 0 0; padding-left:1.1rem; }
.dok-upload { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.5rem; }
.dok-upload input[type=text] { flex:1 1 220px; margin:0; }
.dok-upload input[type=file] { flex:1 1 200px; font-size:.85rem; }
.dok-neu { padding-top:.6rem; border-top:1px dashed var(--border-default); }
.dok-hinweis { margin:.4rem 0 0; color:var(--text-muted); }
.dok-leer { margin:.2rem 0; color:var(--text-muted); }
/* Tablet: Unterlagen an Schritt-Karte / Banner */
.t-dok { margin:.5rem 0; }
.t-dok-titel { display:block; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); margin-bottom:.25rem; }
.laufend-banner .dok-link { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); color:#fff; }
.laufend-banner .dok-link:hover { background:rgba(255,255,255,.2); border-color:var(--yellow-500); }
.laufend-banner .t-dok-titel { color:rgba(255,255,255,.75); }
/* Drag-and-drop-Uploadfeld */
.dropzone { display:block; position:relative; border:2px dashed var(--border-default); border-radius:var(--radius-md); background:var(--surface-sunken); padding:.85rem 1rem; margin:.2rem 0; cursor:pointer; text-align:center; transition:border-color var(--dur-fast), background var(--dur-fast); }
.dropzone:hover { border-color:var(--navy-300); }
.dropzone.dz-over { border-color:var(--accent); background:var(--yellow-100); }
.dropzone.hat-datei { border-style:solid; border-color:var(--navy-300); background:var(--surface-card); }
.dz-input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.dz-inner { display:flex; align-items:center; justify-content:center; gap:.55rem; color:var(--text-muted); font-size:.9rem; }
.dz-ic { color:var(--navy-400); flex:none; }
.dz-link { color:var(--navy-600); font-weight:700; text-decoration:underline; }
.dz-liste { display:block; margin-top:.4rem; font-size:.82rem; color:var(--text-strong); font-weight:600; word-break:break-word; }
.dz-liste:empty { display:none; }
/* Enthaltene Positionen eines Gangs (Tablet) */
.gang-pos { margin:.5rem 0 .2rem; }
.gang-pos > summary { cursor:pointer; font-size:.85rem; color:var(--navy-600); font-weight:700; }
.gang-pos-liste { list-style:none; padding:0; margin:.5rem 0 0; display:flex; flex-direction:column; gap:.5rem; }
.gang-pos-liste li { border-left:3px solid var(--border-default); padding:.4rem .65rem; background:var(--surface-sunken); border-radius:var(--radius-sm); }
.gp-kopf { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.gp-lt { font-size:.78rem; color:var(--text-muted); }
.gp-menge { font-size:.78rem; font-weight:700; color:var(--navy-800); background:var(--accent);
            padding:.05rem .4rem; border-radius:.3rem; }
/* Liefertermin-Vorschlag bei der Auftragsanlage */
.termin-box { background:var(--surface-muted, #f5f7fa); border:1px solid var(--border-subtle);
              border-radius:var(--radius-md); padding:.7rem .85rem; margin:.3rem 0 .6rem; font-size:.9rem; }
.termin-box[hidden] { display:none; }
.termin-box .ampel { font-weight:700; padding:.3rem .6rem; border-radius:var(--radius-sm); margin-bottom:.5rem; }
.termin-box .ampel-gruen { background:#e3f3e4; color:var(--success); }
.termin-box .ampel-gelb { background:#fff6e0; color:var(--warning); }
.termin-box .ampel-rot { background:#fdecec; color:var(--danger); }
.termin-fenster { display:flex; gap:.6rem; flex-wrap:wrap; margin:.5rem 0; }
.termin-fenster .tf { flex:1 1 8rem; text-align:center; background:#fff; border:1px solid var(--border-subtle);
                      border-radius:var(--radius-sm); padding:.5rem; font-size:.85rem; }
/* Dashboard: Einplanungs-Konflikte („Aufmerksamkeit erforderlich") – rot markiert. */
.konflikt-panel { border-left:4px solid var(--danger); background:#fdecec33; }
.konflikt-panel .ph h3 { color:var(--danger); }
.gp-meta { font-size:.85rem; color:var(--text-body); margin-top:.15rem; }
.gp-kom { font-size:.82rem; color:var(--navy-600); margin-top:.15rem; }
/* Folgeschritte auf der Schritt-Detailseite */
.folge-liste { list-style:none; padding:0; margin:.4rem 0 0; display:flex; flex-direction:column; gap:.4rem; }
.folge-liste li { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.folge-termin { color:var(--navy-600); font-size:.9rem; }
.laufend-banner .gang-pos > summary { color:rgba(255,255,255,.85); }
.laufend-banner .gang-pos-liste li { background:rgba(255,255,255,.1); border-left-color:rgba(255,255,255,.3); }
.laufend-banner .gp-meta { color:rgba(255,255,255,.85); }
.laufend-banner .gp-kom { color:var(--yellow-400); }
.laufend-banner .gp-lt { color:rgba(255,255,255,.7); }

/* Schlanke Planungs-Tabellen (offene Pulver-/Verzink-Positionen) */
.plan-tabelle td { vertical-align:middle; }
.plan-tabelle .plan-auftraege { display:block; color:var(--text-muted); max-width:34rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plan-vorschlag { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; background:var(--yellow-100); border-left:4px solid var(--accent); border-radius:var(--radius-md); padding:.6rem .9rem; margin-bottom:.9rem; }
.plan-vorschlag div { color:var(--navy-800); }
/* Hinweis-Variante (kein echter Vorschlag, z. B. Liefertermin fehlt): dezent statt Signalgelb. */
.plan-vorschlag-hinweis { background:var(--surface-sunken); border-left-color:var(--border-default); }
.plan-vorschlag-hinweis div { color:var(--text-body); }
/* Gefahr-Variante: Stahlbau zu spät -> Liefertermin reißt. */
.plan-vorschlag-warn { background:#fdecec; border-left-color:var(--danger); }
.ral-pos { margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.25rem; }
.ral-pos li { color:var(--text-body); }

/* Präfix-Eingabefeld (fester Präfix „AB26" / „RAL" + Eingabe) */
.prefix-feld { display:flex; align-items:stretch; max-width:420px; border:1px solid var(--border-default); border-radius:var(--radius-md); overflow:hidden; background:#fff; }
.prefix-feld:focus-within { border-color:var(--navy-500); box-shadow:var(--ring); }
.prefix-feld .pf-prefix { flex:none; display:flex; align-items:center; padding:0 .8rem; background:var(--navy-800); color:#fff; font-family:var(--font-display); font-weight:800; letter-spacing:.04em; font-size:.95rem; }
.prefix-feld input { border:none; box-shadow:none !important; border-radius:0; flex:1; min-width:0; }
.prefix-feld input:focus { box-shadow:none; }
.prefix-feld .pf-hinweis { display:flex; align-items:center; padding:0 .8rem; color:var(--text-faint); font-size:.85rem; }

/* RAL-Live-Vorschau: Farbquadrat + Name */
.ral-eingabe { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.ral-vorschau { display:inline-flex; align-items:center; gap:.5rem; min-height:28px; }
.ral-swatch { width:26px; height:26px; border-radius:var(--radius-sm); border:1px solid rgba(4,31,60,.25); box-shadow:var(--shadow-xs); flex:none; }
.ral-name { font-weight:600; color:var(--text-faint); font-size:.9rem; }
.ral-name.treffer { color:var(--text-strong); }
.pv-hinweis { display:block; margin-top:.2rem; color:var(--text-faint); }

/* Zuweisen & Planen: Schnell-Zeitraum + Schritt-Zeilen */
.plan-schnell { display:flex; align-items:end; gap:.8rem; flex-wrap:wrap; margin:.2rem 0 .4rem; }
.plan-schnell label, .plan-zeile label { font-weight:600; color:var(--text-muted); font-size:.82rem; }
.plan-schnell input { width:auto; }
.plan-zeile { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; padding:.5rem 0; border-top:1px solid var(--border-subtle); }
.plan-zeile:first-of-type { border-top:none; }
.plan-zeile .pz-name { min-width:180px; font-weight:700; color:var(--text-strong); }
.plan-zeile select { width:auto; min-width:180px; }
.plan-zeile .pz-datum { display:inline-flex; align-items:center; gap:.3rem; text-transform:none; }
.plan-zeile .pz-datum input { width:auto; }
.plan-zeile .pz-gang { color:var(--text-muted); font-size:.88rem; }
.plan-zeile .pz-gang a { font-weight:600; }
.plan-zeile .pz-empf { display:inline-flex; align-items:center; flex-wrap:wrap; gap:.4rem; font-size:.82rem; color:var(--navy-600); background:var(--yellow-100); border-radius:var(--radius-md); padding:.15rem .5rem; }
.plan-zeile .pz-empf .pz-kap { font-style:italic; }
/* (#6) Abgeschlossene Schritte in der Zuweisung ausgegraut (keine Umplanung nötig). */
.plan-zeile.zeile-fertig { opacity:.6; }
.plan-zeile .pz-fertig { color:var(--text-muted); font-size:.9rem; }
/* (#12) Gang-Positionsauswahl: zwei Buckets (Stahlbau planmäßig durch / später fertig). */
.bucket-titel { font-family:var(--font-display); font-weight:800; font-size:.95rem; text-transform:uppercase;
  letter-spacing:.06em; margin:1.4rem 0 .5rem; padding-left:.6rem; border-left:4px solid var(--steel-300); }
.bucket-titel small { text-transform:none; letter-spacing:0; color:var(--text-muted); font-weight:600; }
.bucket-titel.bucket-bereit { border-left-color:var(--success); color:var(--success); }
.bucket-titel.bucket-spaeter { border-left-color:var(--warning); color:var(--navy-700); }
.sb-bis { color:var(--warning); font-weight:600; }

/* Auslastung: Bereichs-Heatmap + Mitarbeiter-Kalender */
.heat { width:100%; border-collapse:collapse; table-layout:fixed; }
.heat th, .heat td { border:1px solid var(--border-subtle); padding:.35rem .3rem; text-align:center; font-size:.8rem; }
.heat th.bereich, .heat td.bereich { text-align:left; font-family:var(--font-display); font-weight:700; white-space:nowrap; background:var(--steel-50); }
.heat th.we, .heat td.we { background:var(--steel-100); }
.heat td.heute { outline:2px solid var(--navy-700); outline-offset:-2px; }
.heat .last { display:block; border-radius:var(--radius-sm); font-weight:700; font-variant-numeric:tabular-nums; padding:.25rem 0; }
.heat .l0 { color:var(--text-faint); }
.heat .l1 { background:var(--navy-100); color:var(--navy-700); }
.heat .l2 { background:var(--navy-300); color:#fff; }
.heat .l3 { background:var(--navy-600); color:#fff; }
.heat .l4 { background:var(--navy-800); color:var(--yellow-500); }
.ma-picker { display:flex; gap:.5rem; flex-wrap:wrap; margin:.6rem 0 1rem; }
.ma-pick { padding:7px 13px; border:1px solid var(--border-default); border-radius:var(--radius-pill); text-decoration:none; color:var(--text-body); font-weight:600; font-size:.85rem; }
.ma-pick.aktiv { background:var(--navy-800); color:#fff; border-color:var(--navy-800); }
.kalender td.frei { background:var(--yellow-100); }
.kalender .kal-schritt { display:block; margin:.12rem 0; font-size:.72rem; color:var(--navy-700); font-weight:600; }
.kalender .kal-abw { display:block; margin:.12rem 0; font-size:.72rem; color:var(--danger); font-weight:700; }

/* ============================================================
   Animationen
   ============================================================ */
@keyframes barGrow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes barRise { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes loginSpin { to { transform:rotate(360deg); } }
@keyframes loginFloatY { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-16px); } }
/* Unregelmäßiges, dezentes Schwingen (kleine Winkel, keine volle Umdrehung) */
@keyframes logoWobble {
  0%   { transform:rotate(0deg); }
  14%  { transform:rotate(6deg); }
  31%  { transform:rotate(-3deg); }
  48%  { transform:rotate(8deg); }
  63%  { transform:rotate(1deg); }
  79%  { transform:rotate(-5deg); }
  100% { transform:rotate(0deg); }
}
@keyframes welcomeReveal {
  0%   { clip-path:circle(160% at 44px 44px); opacity:1; }
  60%  { clip-path:circle(160% at 44px 44px); opacity:1; }
  84%  { opacity:1; }
  100% { clip-path:circle(0% at 44px 44px); opacity:0; visibility:hidden; }
}
/* Oberfläche (Sidebar/Topbar/Inhalt) baut ihre Deckkraft unter dem Vorhang auf. */
@keyframes shellRein { from { opacity:0; } to { opacity:1; } }
/* Sidebar-Logo nimmt das ankommende Splash-Logo mit einem kurzen Puls auf. */
@keyframes logoEmpfang {
  0%   { opacity:0; transform:scale(.6); }
  55%  { opacity:1; transform:scale(1.1); }
  100% { opacity:1; transform:scale(1); }
}
/* Logo: steigt ruhig von der Login-Position auf, verweilt kurz in der Mitte
   (Lichtschein, s. logoGlanz) und übergibt dann an die Sidebar-Logo-Ecke
   (dorthin zieht sich auch der Reveal). Alle Keyframes tragen dieselbe
   transform-Kette (translate/translate/scale/rotate) -> saubere Interpolation. */
@keyframes logoIntro {
  0%   { transform:translate(-50%,-50%) translate(-6vw,38vh) scale(.6) rotate(-8deg); opacity:0; }
  16%  { opacity:1; }
  44%  { transform:translate(-50%,-50%) translate(0,0) scale(1) rotate(0deg); opacity:1; }
  58%  { transform:translate(-50%,-50%) translate(0,0) scale(1) rotate(0deg); opacity:1; }
  100% { transform:translate(-50%,-50%) translate(calc(44px - 50vw), calc(44px - 50vh)) scale(.32) rotate(0deg); opacity:0; }
}
/* Lichtschein: baut sich zum Ankunftsmoment auf und löst sich weich wieder. */
@keyframes logoGlanz {
  0%, 32% { opacity:0; transform:translate(-50%,-50%) scale(.55); }
  48%     { opacity:.85; transform:translate(-50%,-50%) scale(1); }
  62%     { opacity:0; transform:translate(-50%,-50%) scale(1.3); }
  100%    { opacity:0; transform:translate(-50%,-50%) scale(1.3); }
}
@keyframes brinkFade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes brinkRise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes brinkToast { from { opacity:0; transform:translate(-50%,12px); } to { opacity:1; transform:translate(-50%,0); } }
@keyframes brinkAuroraA { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(42px,32px) scale(1.1); } }
@keyframes brinkAuroraB { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(-42px,-30px) scale(1.12); } }
@keyframes brinkClaimIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce) {
  .welcome-overlay { display:none !important; }
  .intro > * { animation:none !important; }

  * { animation:none !important; transition:none !important; }
}

/* ============================================================
   Responsiv (Tablet / schmale Bildschirme)
   ============================================================ */
@media (max-width: 880px) {
  .app-shell { flex-direction:column; }
  .sidebar { width:100%; height:auto; position:static; }
  .sidebar-brand { padding:16px 18px 12px; }
  .sidebar-claim { display:none; }
  .nav { flex-direction:row; flex-wrap:wrap; gap:6px; padding:10px 12px; }
  .nav-gruppe { display:none; }
  .nav-item { border-left:none; border-radius:var(--radius-md); padding:9px 12px; background:rgba(255,255,255,.05); }
  .nav-item.active { border-left:none; }
  .topbar { padding:10px 16px; min-height:0; }
  .content { padding:20px 16px 48px; }
  .login-grid { grid-template-columns:1fr; }
  .login-brand { display:none; }
  .login-marke { display:flex; }
}

/* ============================================================
   Digitaltool: Modul-Hub, Modul-Wechsler und Organisation (v1.15)
   ============================================================ */

/* Modul-Wechsler in der Seitenleiste (navy Kontext) */
.modul-chip {
  display:flex; align-items:center; gap:.55rem; margin:12px 14px 2px;
  padding:.5rem .6rem; border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg); background:rgba(255,255,255,.05);
  color:#fff; text-decoration:none;
  transition:background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.modul-chip:hover { background:rgba(255,255,255,.1); border-color:var(--yellow-500); }
.modul-chip .mc-ic { display:grid; place-items:center; width:30px; height:30px; flex:none;
  border-radius:var(--radius-md); background:var(--yellow-500); color:var(--navy-800); }
.modul-chip .mc-ic .ic { width:16px; height:16px; }
.modul-chip .mc-eyebrow { display:block; font-family:var(--font-display); font-size:.58rem;
  font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.modul-chip .mc-name { font-family:var(--font-display); font-weight:700; font-size:.95rem; line-height:1.05; }
.modul-chip .mc-hint { margin-left:auto; font-size:.68rem; color:rgba(255,255,255,.45); }
.modul-chip:hover .mc-hint { color:var(--yellow-500); }
.nav-item.nav-bald { opacity:.4; cursor:default; }
.nav-item.nav-bald:hover { background:transparent; color:inherit; }

/* Modul-Kacheln im Hub */
.modul-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:14px; margin:18px 0; }
.modul-karte {
  position:relative; display:flex; flex-direction:column; gap:.5rem; overflow:hidden;
  padding:1.05rem 1.1rem .95rem; background:var(--surface-card);
  border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs); text-decoration:none; color:var(--text-body);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) ease,
             border-color var(--dur-base) ease;
}
a.modul-karte:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg);
  border-color:var(--navy-200); }
a.modul-karte:focus-visible { outline:none; box-shadow:var(--ring); }
/* Wasserzeichen-Initiale (Markenmuster wie der Hero-Ring) */
.mk-wz { position:absolute; right:-6px; bottom:-30px; font-family:var(--font-display);
  font-weight:800; font-size:6.5rem; line-height:1; color:var(--steel-100);
  pointer-events:none; user-select:none; }
.mk-ic { position:relative; display:grid; place-items:center; width:42px; height:42px;
  border-radius:var(--radius-lg); background:var(--navy-800); color:var(--yellow-500); }
.mk-ic .ic { width:21px; height:21px; }
.mk-titel { position:relative; font-family:var(--font-display); font-weight:800;
  font-size:1.2rem; color:var(--text-strong); letter-spacing:.01em; }
.mk-claim { position:relative; font-size:.83rem; color:var(--text-muted); min-height:2.1em; }
.mk-stats { position:relative; display:flex; flex-wrap:wrap; gap:.35rem .9rem;
  font-size:.78rem; color:var(--text-muted); }
.mk-stats strong { color:var(--text-strong); font-size:.95rem; }
.mk-warn { color:var(--danger); font-weight:700; }
.mk-cta { position:relative; margin-top:auto; padding-top:.35rem; font-size:.83rem;
  font-weight:700; color:var(--text-link); }
.mk-cta::after { content:'›'; margin-left:.3rem; display:inline-block;
  transition:transform var(--dur-base) var(--ease-out); }
a.modul-karte:hover .mk-cta::after { transform:translateX(3px); }
.modul-karte.bald { border-style:dashed; background:var(--surface-page); box-shadow:none; }
.modul-karte.bald .mk-ic { background:var(--steel-150); color:var(--steel-500); }
.modul-karte.bald .mk-titel { color:var(--steel-600); }
.modul-karte.bald .mk-wz { color:var(--steel-150); opacity:.5; }
.mk-bald-badge { position:absolute; top:.85rem; right:.9rem; font-family:var(--font-display);
  font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:.28rem .55rem; border-radius:var(--radius-pill);
  background:var(--steel-150); color:var(--steel-600); }

/* Hub: Aktuelles + Termine */
.hub-cols { display:grid; grid-template-columns:3fr 2fr; gap:14px; align-items:start; }
@media (max-width: 1100px) { .hub-cols { grid-template-columns:1fr; } }

/* News */
.news-liste, .termin-liste { list-style:none; margin:0; padding:0; }
.news-item { padding:.65rem 0; border-bottom:1px solid var(--border-subtle); }
.news-item:last-child { border-bottom:none; }
.news-item h4 { margin:.15rem 0 .2rem; font-family:var(--font-display); font-size:1rem;
  color:var(--text-strong); }
.news-item p { margin:0; font-size:.86rem; color:var(--text-body); }
.news-meta { font-size:.75rem; color:var(--text-muted); display:flex; align-items:center; gap:.45rem; }
.news-artikel .news-titel { margin:.25rem 0 .3rem; font-family:var(--font-display);
  font-size:1.25rem; color:var(--text-strong); text-wrap:balance; }
.news-text { margin:0; max-width:70ch; white-space:pre-line; }
.news-form label { max-width:640px; }
.news-form input[type=text], .news-form textarea { width:100%; max-width:640px; }
.news-form-fuss { display:flex; align-items:center; justify-content:space-between;
  gap:1rem; max-width:640px; margin-top:.7rem; }
.news-pin { display:inline-flex; align-items:center; gap:.4rem; font-weight:500;
  margin:0; color:var(--text-body); }
.news-pflege { margin-top:.7rem; border-top:1px dashed var(--border-subtle); padding-top:.5rem; }
.news-pflege summary { cursor:pointer; font-size:.82rem; font-weight:600; color:var(--text-link); }
.news-pflege form + form { margin-top:.6rem; }

/* Firmenkalender */
.termin-zeile { display:flex; gap:.9rem; align-items:flex-start; padding:.7rem 0;
  border-bottom:1px solid var(--border-subtle); }
.termin-zeile:last-child { border-bottom:none; }
.termin-zeile.vergangen { opacity:.6; }
.termin-datum { flex:none; min-width:86px; display:flex; flex-direction:column; }
.termin-datum .td-tag { font-family:var(--font-display); font-weight:800; font-size:1rem;
  color:var(--text-strong); font-variant-numeric:tabular-nums; }
.termin-datum .td-bis { font-size:.72rem; color:var(--text-muted);
  font-variant-numeric:tabular-nums; }
.termin-text { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.termin-meta { font-size:.78rem; color:var(--text-muted); display:flex; flex-wrap:wrap;
  align-items:center; gap:.35rem; }
.termin-beschreibung { font-size:.83rem; color:var(--text-body); white-space:pre-line; }
.termin-aktion { margin-left:auto; flex:none; }
.termin-form label { margin-top:.5rem; }
.termin-form textarea, .news-form textarea { display:block; margin-top:.25rem; }
.termin-form textarea { width:100%; max-width:640px; }
.termin-form-zeile { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:.7rem; max-width:640px; }
.termin-form-zeile input, .termin-form-zeile select { width:100%; }

/* Rechte-Matrix (Benutzerverwaltung) */
.rechte-liste { list-style:none; margin:0; padding:0; }
.recht-zeile { display:flex; align-items:flex-start; gap:.9rem; padding:.65rem 0;
  border-bottom:1px solid var(--border-subtle); }
.recht-zeile:last-child { border-bottom:none; }
.recht-zeile .schalter { margin-top:.1rem; flex:none; }
.recht-text { display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.recht-text small { color:var(--text-muted); }
.recht-status { margin-left:auto; flex:none; text-align:right; }
.recht-status small { color:var(--text-faint); }
.recht-an { flex:none; width:38px; text-align:center; color:var(--success); font-weight:700; }

/* Formular-Zeile mit zwei Feldern nebeneinander (Reklamation u. a.) */
.infozeile { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.infozeile > label { margin-top:.6rem; }
@media (max-width:640px) { .infozeile { grid-template-columns:1fr; } }

/* Fehlerbild-Galerie (Reklamation) */
.foto-galerie { display:flex; flex-wrap:wrap; gap:.6rem; margin:.3rem 0 .2rem; }
.foto-kachel { display:block; width:120px; height:90px; border:1px solid var(--border-default);
  border-radius:var(--radius-md); overflow:hidden; background:var(--surface-sunken);
  text-decoration:none; }
.foto-kachel img { width:100%; height:100%; object-fit:cover; display:block; }
.foto-kachel .foto-datei { display:flex; align-items:center; justify-content:center; height:100%;
  padding:.4rem; font-size:.72rem; color:var(--text-muted); text-align:center; word-break:break-word; }
.foto-kachel-wrap { position:relative; }
.foto-kachel-wrap .foto-weg { position:absolute; top:-6px; right:-6px; width:22px; height:22px;
  border-radius:50%; border:none; background:var(--danger); color:#fff; font-size:.9rem; line-height:1;
  cursor:pointer; box-shadow:var(--shadow-sm); }
.foto-kachel-wrap form { margin:0; }

/* Modul-Freischalter (Modulverwaltung) */
.modul-schalter { list-style:none; margin:0; padding:0; }
.ms-zeile { display:flex; align-items:center; gap:.9rem; padding:.7rem 0;
  border-bottom:1px solid var(--border-subtle); }
.ms-zeile:last-child { border-bottom:none; }
.ms-ic { display:grid; place-items:center; width:38px; height:38px; flex:none;
  border-radius:var(--radius-md); background:var(--navy-800); color:var(--yellow-500); }
.ms-ic .ic { width:20px; height:20px; }
.ms-text { display:flex; flex-direction:column; min-width:0; }
.ms-text small { color:var(--text-muted); }
.ms-toggle { margin-left:auto; flex:none; }

/* Feste Kundennummer: „D"-Präfix + Zifferneingabe */
.kundennr-eingabe { display:inline-flex; align-items:stretch; max-width:220px; }
.kundennr-eingabe .kn-praefix { display:grid; place-items:center; padding:0 .7rem;
  background:var(--surface-sunken); border:1px solid var(--border-default); border-right:none;
  border-radius:var(--radius-md) 0 0 var(--radius-md); font-family:var(--font-display);
  font-weight:800; color:var(--text-strong); }
.kundennr-eingabe input { border-radius:0 var(--radius-md) var(--radius-md) 0; }

/* Filter-Panel (Reklamations-Auswertung) */
.filter-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:.7rem; }
.filter-grid > label { margin-top:0; }
.filter-grid input, .filter-grid select { width:100%; }

/* Kategorie-Pills (Semantik: Marke fürs Fest, Navy fürs Audit, neutral sonst) */
.kat-pill { display:inline-block; padding:.14rem .5rem; border-radius:var(--radius-pill);
  font-family:var(--font-display); font-size:.62rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; }

/* ---- Telefonliste (Organisation): Notfallnummern + interne Liste ---------- */
.notfall-panel { padding:0; overflow:hidden; }
.notfall-kopf { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:var(--danger); color:#fff; padding:.75rem 1.1rem; }
.notfall-kopf h3 { margin:0; color:#fff; display:flex; align-items:center; gap:.55rem;
  font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:1.05rem; }
.notfall-kopf h3 .ic { width:20px; height:20px; }
.nf-add-btn { flex:none; cursor:pointer; font-family:var(--font-body); font-weight:700; font-size:.85rem;
  color:#fff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.55);
  border-radius:var(--radius-md); padding:.4rem .8rem; transition:background var(--dur-fast); }
.nf-add-btn:hover { background:rgba(255,255,255,.28); }
.nummer-add-strip { margin:0; padding:.8rem 1.1rem; background:var(--steel-50); border-bottom:1px solid var(--border-subtle); }

.nummer-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:.7rem; padding:1rem 1.1rem 1.1rem; }
.nummer-karte { display:flex; align-items:flex-start; gap:.7rem; padding:.7rem .8rem;
  border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:#fff; }
.nummer-karte .nk-ic { display:grid; place-items:center; width:40px; height:40px; flex:none;
  border-radius:var(--radius-md); background:var(--steel-100); color:var(--navy-700); }
.nummer-karte .nk-ic .ic { width:20px; height:20px; }
.nummer-karte.notfall .nk-ic { background:#fde8e8; color:var(--danger); }
.nk-text { display:flex; flex-direction:column; min-width:0; flex:1; gap:.1rem; }
.nk-label { font-size:.85rem; color:var(--text-muted); }
.nk-nummer { font-family:var(--font-display); font-weight:800; font-size:1.05rem;
  color:var(--navy-800); letter-spacing:.01em; overflow-wrap:anywhere; }
.nummer-karte.notfall .nk-nummer { color:var(--danger); }
.nk-aktion { display:flex; gap:.25rem; align-items:flex-start; flex:none; }
.nk-aktion form { margin:0; }

/* kleine, quadratische Icon-Knöpfe (Bearbeiten/Entfernen) */
.ikon-knopf { display:inline-grid; place-items:center; width:30px; height:30px; box-sizing:border-box;
  border:1px solid var(--border-default); border-radius:var(--radius-sm); background:#fff;
  color:var(--navy-600); cursor:pointer; transition:border-color var(--dur-fast), color var(--dur-fast); list-style:none; }
.ikon-knopf::-webkit-details-marker { display:none; }
.ikon-knopf:hover { border-color:var(--navy-400); color:var(--navy-800); }
.ikon-knopf .ic { width:16px; height:16px; }
.ikon-warn { color:var(--danger); }
.ikon-warn:hover { border-color:var(--danger); color:var(--danger); }
.nummer-edit { position:relative; }
.nummer-edit > summary { list-style:none; }

.nummer-form { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.nummer-edit .nummer-form { margin-top:.6rem; flex-basis:100%; }
.nummer-form input[type=text] { width:auto; flex:1 1 150px; padding:.42rem .55rem; }
.nummer-check { display:flex; align-items:center; gap:.35rem; font-size:.85rem; color:var(--text-muted); margin:0; white-space:nowrap; }
.nummer-check input { width:auto; margin:0; }

/* Interne Liste */
.tel-suche { width:auto; flex:1 1 240px; max-width:340px; }
.tel-tabelle td { vertical-align:middle; }
.tel-name { display:inline-flex; align-items:center; gap:.6rem; }
.tel-avatar { flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--navy-700); color:#fff; font-family:var(--font-display); font-weight:800; font-size:12.5px; }
.tel-leer { color:var(--text-faint); }

.nummer-form[hidden] { display:none; }  /* sonst ueberschreibt display:flex das hidden-Attribut */

/* ---- Organisation: Monatskalender, News-Freigabe, Kategorie-Verwaltung ----- */
.kal-panel { padding-bottom:1rem; }
.kal-kopf { display:flex; align-items:center; gap:.8rem; margin-bottom:.8rem; }
.kal-kopf h3 { margin:0; min-width:12ch; font-family:var(--font-display); }
.kal-kopf .ikon-knopf { font-size:1.2rem; line-height:1; font-weight:800; }
.kal-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; }
.kal-wt { text-align:center; font-size:.75rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-muted); padding-bottom:.2rem; }
.kal-tag { min-height:92px; border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  background:#fff; padding:.3rem; display:flex; flex-direction:column; gap:3px; overflow:hidden; }
.kal-tag.kal-aus { background:var(--steel-50); }
.kal-tag.kal-aus .kal-tagnr { color:var(--text-faint); }
.kal-tag.kal-heute { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.kal-tagnr { font-size:.8rem; font-weight:700; color:var(--navy-700); text-align:right; }
.kal-tag.kal-heute .kal-tagnr { color:var(--navy-900); }
.kal-event { display:block; font-size:.72rem; line-height:1.25; padding:2px 6px; border-radius:var(--radius-sm);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none; font-weight:600; }
.kal-event:hover { filter:brightness(.94); }
.kal-legende { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.9rem;
  padding-top:.8rem; border-top:1px solid var(--border-subtle); }

/* Termin-Anmeldung (Firmenkalender): Button + Teilnehmerliste kompakt. */
/* Umwelttipp des Monats – hervorgehobener Hinweis mit Glüh­birnen-Icon */
.umwelt-tipp { display:flex; gap:.9rem; align-items:flex-start;
  border-left:4px solid var(--accent); background:var(--yellow-100); }
.umwelt-tipp .ut-ic { flex:none; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; background:#fff; color:var(--navy-800); }
.umwelt-tipp .ut-ic .ic { width:22px; height:22px; }
/* v2.25: Monats-Tipps blätterbar – Slides gleiten seitlich ein, Pfeile rund. */
.ut-slider { flex:1; min-width:0; overflow:hidden; }
.ut-slide { display:none; }
.ut-slide.an { display:block; animation:utVonRechts .32s var(--ease-out, ease-out); }
.ut-slide.von-links.an { animation-name:utVonLinks; }
@keyframes utVonRechts { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:none; } }
@keyframes utVonLinks  { from { opacity:0; transform:translateX(-16px); } to { opacity:1; transform:none; } }
.ut-nav { flex:none; display:flex; gap:.35rem; align-self:center; }
.ut-pfeil { width:32px; height:32px; border-radius:50%; border:1px solid var(--border-default);
  background:#fff; color:var(--navy-700); cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; padding:0;
  transition:background .18s ease, color .18s ease, transform .18s ease, opacity .18s ease; }
.ut-pfeil:hover:not(:disabled) { background:var(--navy-800); color:#fff; transform:translateY(-1px); }
.ut-pfeil:disabled { opacity:.35; cursor:default; }
@media (prefers-reduced-motion: reduce) { .ut-slide.an { animation:none; } }

/* AVV-Register-Suche (Abfallarten-Einstellungen) */
.avv-suche { display:block; width:100%; max-width:520px; margin:.5rem 0; padding:.45rem .6rem;
  border:1px solid var(--border-default); border-radius:var(--radius-md); font:inherit; }
.avv-liste { max-height:280px; overflow-y:auto; display:flex; flex-direction:column; gap:2px;
  border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:.3rem; }
.avv-treffer { text-align:left; background:transparent; border:none; cursor:pointer;
  padding:.35rem .5rem; border-radius:var(--radius-sm); font:inherit; color:var(--text-body); }
.avv-treffer:hover { background:var(--surface-sunken); }
.avv-treffer strong { color:var(--navy-800); font-variant-numeric:tabular-nums; margin-right:.3rem; }

/* Foto-Sammler: Knopfreihe „Aufnehmen"/„Hochladen" */
.foto-knoepfe { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.3rem; }

.termin-anmeldung { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }
.termin-anmeldung .news-pflege { margin:0; }
.anmelde-liste { margin:.3rem 0 0; padding-left:1.1rem; columns:2; font-size:.9rem; }
@media (max-width:600px) { .anmelde-liste { columns:1; } }

/* Responsiv: auf schmalen Screens kompaktere Zellen */
@media (max-width:720px) {
  .kal-tag { min-height:64px; }
  .kal-event { font-size:.62rem; padding:1px 4px; }
}

/* News: Freigabe */
.badge-wartend { background:var(--warning); color:#3a2c00; }
.news-artikel.news-wartend { box-shadow:none; border:1px dashed var(--border-default); margin:.6rem 0; }
.news-aktionen { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:.4rem; }
.news-aktionen form { margin:0; }
.org-news-mini { padding:.5rem 0; border-bottom:1px solid var(--steel-100); }
.org-news-mini:last-child { border-bottom:none; }
.org-news-mini .news-text { margin:.25rem 0 0; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; color:var(--text-muted); }

/* Kategorie-Verwaltung (Organisationseinstellungen) */
.kat-verwalt { list-style:none; margin:.4rem 0 .8rem; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.kat-zeile { display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.4rem .2rem; border-bottom:1px solid var(--steel-100); }
.kat-aktion { display:flex; gap:.3rem; align-items:center; }
.kat-aktion form { margin:0; }
.kat-form { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:.6rem; }
.kat-form input[type=text] { width:auto; flex:1 1 180px; padding:.42rem .55rem; }
.farb-wahl { display:inline-flex; flex-wrap:wrap; gap:.3rem; }
.farb-swatch { cursor:pointer; margin:0; }
.farb-swatch input { position:absolute; opacity:0; width:0; height:0; }
.farb-swatch span { display:block; width:24px; height:24px; border-radius:50%;
  border:2px solid var(--border-default); box-sizing:border-box; }
.farb-swatch input:checked + span { border-color:var(--navy-800); box-shadow:0 0 0 2px var(--accent); }
.nummer-add-details > summary { list-style:none; cursor:pointer; display:inline-block; }
.nummer-add-details > summary::-webkit-details-marker { display:none; }

/* Gefahrenzone (Datensicherung: Betriebsdaten leeren) */
.gefahr-panel { border:1px solid var(--danger); box-shadow:none; }
.gefahr-panel .ph h3 { color:var(--danger); }

/* Telefonliste: Bearbeiten-Formular als eigene volle Kartenzeile (statt
   details-Popup, das die Grid-Karte sprengte); Karten per Suche filterbar. */
.nummer-karte { flex-wrap:wrap; }
.nummer-karte .nummer-edit-strip { flex-basis:100%; margin-top:.45rem; }
.nummer-karte[hidden] { display:none; }
.nummer-karte .nk-nummer { text-decoration:none; }
.nummer-karte .nk-nummer:hover { text-decoration:underline; }

/* Breite Tabellen scrollen im eigenen Container statt die Seite zu sprengen. */
.tabelle-scroll { overflow-x:auto; }

/* Abschnitts-Überschrift zwischen Panels (z. B. Statuswand der Projekte). */
.abschnitt-titel { font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.02em; font-size:1.02rem; color:var(--text-strong); margin:1.6rem 0 .6rem; }

/* Verlinkte Kacheln/Karten ohne Unterstreichung (Stat-Kacheln, Statuswand). */
a.stat, .karten-link { text-decoration:none; color:inherit; }
/* Dezente Formular-Fußnote (Ersatz für zweckentfremdetes .lk-hinweis). */
.feld-hinweis { color:var(--text-muted); font-size:.85rem; margin:.4rem 0 0; }
/* Ampel-Pills (Projekt-Dashboard u. a.) statt Inline-Farben. */
.pill-ampel-rot { background:#fdecec; color:#c0392b; font-weight:700; }
.pill-ampel-gelb { background:#fff6e0; color:#a9761a; font-weight:700; }
.pill-ampel-gruen { background:#e3f3e4; color:#1e7a44; font-weight:700; }

/* Bonuspool-Leiter (Qualität-Startseite): aktuell gültige Stufe hervorheben. */
.bonus-leiter tr.aktiv td { background:rgba(250, 232, 0, .16); }
.bonus-leiter tr.aktiv td:first-child { border-left:4px solid var(--yellow-500); font-weight:700; }

/* --- Konfektionierung: Arbeitsplatz-Board (tablet-tauglich) -------------- */
.konf-jobs { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); align-items:start; }
.konf-job .ph { display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; }
.konf-fortschritt { font-family:var(--font-display); font-weight:700; color:var(--navy-700); white-space:nowrap; }
.konf-meta { color:var(--text-muted); font-size:.9rem; margin:.1rem 0 .5rem; display:flex; flex-wrap:wrap; gap:.3rem; }
.konf-konfig { white-space:pre-line; background:var(--surface-sunken); border-radius:var(--radius-sm); padding:.6rem .7rem; margin:.3rem 0; }
.konf-teil { font-size:.92rem; margin:.2rem 0; }
.konf-melden { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.7rem; margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--border-default); }
.konf-melden label { display:flex; flex-direction:column; gap:.2rem; font-size:.82rem; font-weight:600; color:var(--navy-700); }
.konf-melden select, .konf-melden input { min-height:46px; font-size:1rem; padding:.3rem .5rem; }
.konf-wer select { min-width:180px; }
.konf-anzahl input { width:88px; }
.konf-hinweis { flex-basis:100%; color:var(--text-muted); font-size:.8rem; margin-top:-.2rem; }

/* --- Konfektionierung: Typenschild-Vorschau (druckbar) ------------------ */
.typenschild-blatt { display:flex; flex-wrap:wrap; gap:10px; }
.typenschild { width:8cm; min-height:4.6cm; border:2px solid var(--navy-800); border-radius:6px; padding:.5cm .55cm; background:#fff; color:var(--navy-900); display:flex; flex-direction:column; gap:2px; }
.ts-marke { font-family:var(--font-display); font-weight:800; letter-spacing:.12em; font-size:.8rem; color:var(--navy-800); }
.ts-produkt { font-weight:700; font-size:1.02rem; margin:.15cm 0 .1cm; }
.ts-serie { margin-top:auto; font-size:1.05rem; }
.ts-zeile { font-size:.85rem; color:var(--navy-700); }

@media print {
  .sidebar, .topbar, .no-print { display:none !important; }
  .app-main, .content { margin:0 !important; padding:0 !important; }
  .typenschild { break-inside:avoid; page-break-inside:avoid; border-color:#000; color:#000; }
}

/* Dokumente: eingebetteter Reader (PDF/Bild live in der App, kein neuer Tab) */
.dok-viewer { border:1px solid var(--border-default); border-radius:var(--radius-md); overflow:hidden; background:var(--steel-100); }
.dok-viewer iframe { display:block; width:100%; height:78vh; min-height:420px; border:0; }
.dok-viewer-bild { text-align:center; padding:1rem; }
.dok-viewer-bild img { max-width:100%; height:auto; }
/* Serverseitig gerenderte PDF-Seiten (geräteunabhängiger Reader) */
.dok-seiten { display:flex; flex-direction:column; gap:14px; align-items:center;
  background:var(--steel-100); padding:14px; border:1px solid var(--border-default);
  border-radius:var(--radius-md); max-height:82vh; overflow-y:auto; }
.dok-seite { width:100%; max-width:900px; height:auto; background:#fff;
  box-shadow:0 2px 10px rgba(4,31,60,.18); }
.dok-download { margin:.6rem 0 0; font-size:.9rem; }
/* Lesebestätigungs-Modus: klar sichtbare Karten-Auswahl */
.modus-fieldset { margin-top:1rem; border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:.9rem; }
.modus-fieldset legend { font-family:var(--font-display); font-weight:700; padding:0 .4rem; }
.modus-wahl { display:flex; flex-direction:column; gap:.5rem; }
.modus-opt { display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem; cursor:pointer;
  border:2px solid var(--border-default); border-radius:var(--radius-md); background:var(--surface, #fff);
  transition:border-color var(--dur-fast), background var(--dur-fast); }
.modus-opt:hover { border-color:var(--steel-400); }
.modus-opt.aktiv { border-color:var(--accent); background:var(--yellow-100); }
.modus-opt-titel { font-weight:600; }
.modus-opt.aktiv .modus-opt-titel { font-weight:700; }
/* v2.25: Grid statt CSS-Spalten – `columns` in einem höhenbegrenzten Container
   erzeugt unsichtbare Überlauf-Spalten nach rechts (Personen „fehlten" ab ~18
   Einträgen). Das Grid bricht nach unten um und scrollt sauber vertikal. */
.kreis-liste { max-height:260px; overflow-y:auto; border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm); padding:.5rem;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); column-gap:.8rem; }
/* Zertifikate je Mitarbeiter (aufklappbar) */
.ma-zert { border:1px solid var(--border-subtle); border-radius:var(--radius-md); margin-top:.6rem; background:var(--surface,#fff); }
.ma-zert > summary { display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.7rem .9rem; cursor:pointer; list-style:none; }
.ma-zert > summary::-webkit-details-marker { display:none; }
.ma-zert-name { font-family:var(--font-display); font-weight:700; }
.ma-zert-meta { color:var(--text-muted); font-size:.85rem; white-space:nowrap; }
.ma-zert[open] > summary { border-bottom:1px solid var(--border-subtle); }
.ma-zert .tabelle-scroll { padding:.2rem .6rem .6rem; }
.ma-zert-leer { color:var(--text-muted); margin:0; padding:.3rem .9rem .7rem; }
/* Beinaheunfall: Rückmeldung an den Melder */
.beinahe-antwort { margin-top:.5rem; padding:.6rem .8rem; background:var(--yellow-100);
  border-left:4px solid var(--accent); border-radius:var(--radius-sm); }
.beinahe-antwort .ic { width:16px; height:16px; vertical-align:-3px; }
/* Entsorgung: Farbauswahl (eigene efarb-Klassen – .farb-swatch gehört der
   Organisations-Farbwahl und darf nicht überschrieben werden) */
.efarb-wahl { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.efarb-opt { cursor:pointer; line-height:0; }
.efarb-opt input { position:absolute; opacity:0; width:0; height:0; }
.efarb-swatch { display:inline-block; width:26px; height:26px; border-radius:50%;
  border:2px solid var(--border-default); box-sizing:border-box; }
.efarb-opt input:checked + .efarb-swatch { outline:2px solid var(--navy-800); outline-offset:2px; }
.efarb-auto { display:inline-block; padding:.3rem .6rem; border:2px solid var(--border-default);
  border-radius:var(--radius-sm); font-size:.85rem; line-height:1; }
.efarb-opt input:checked + .efarb-auto { border-color:var(--accent); background:var(--yellow-100); font-weight:700; }
/* Umwelt-Dashboard: KPI-Kacheln mit Trend-Sparkline */
.umwelt-kacheln { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:1rem; margin-bottom:1.3rem; }
.uk { background:var(--surface, #fff); border:1px solid var(--border-default); border-radius:var(--radius-md);
  padding:1rem; box-shadow:0 1px 3px rgba(4,31,60,.08); }
.uk-kopf { font-family:var(--font-display); font-weight:700; color:var(--navy-800); }
.uk-einheit { color:var(--text-muted); font-weight:400; font-size:.85rem; }
.uk-wert { font-family:var(--font-display); font-weight:800; font-size:2rem; line-height:1.1; margin:.15rem 0; color:var(--navy-800); }
.uk-delta { font-size:.83rem; color:var(--text-muted); }
.uk-pfeil { font-weight:700; color:var(--navy-800); }
.uk-ziel { margin-top:.6rem; }
.uk-ziel-kopf { display:flex; justify-content:space-between; font-size:.76rem; color:var(--text-muted); margin-bottom:3px; }
.uk-bar { height:8px; background:var(--steel-100); border-radius:5px; overflow:hidden; }
.uk-bar-fill { height:100%; background:var(--accent); border-radius:5px; }
.uk-bar-fill.ueber { background:var(--danger); }
.uk-spark { width:100%; height:40px; margin-top:.7rem; display:block; }
.uk-spark rect { fill:var(--navy-300); }
.uk-spark rect.akt { fill:var(--accent); }
.uk-muted { color:var(--text-muted); }
/* Dokumente-Startseite: Übersichtsband */
.dok-uebersicht { display:flex; gap:1rem; flex-wrap:wrap; margin:0 0 1.2rem; }
.dok-uebersicht .stat { min-width:118px; border:1px solid var(--border-default); border-radius:var(--radius-md); padding:.7rem .9rem; text-decoration:none; }
.dok-uebersicht .stat.stat-akzent { border-color:var(--accent); background:var(--yellow-100); }
.dok-uebersicht .stat.stat-alarm { border-color:var(--danger); background:#fdecec; }
.dok-tab .mk-bald-badge { font-size:.66rem; padding:1px 7px; margin-left:.2rem; }

/* Betriebliche Funktionen (Sifa/Ersthelfer/Brandschutz) – Karten je Funktion.
   Spalten-Layout (statt Grid): Karten packen sich unabhängig von ihrer Höhe
   dicht, sonst reißt eine volle Karte (12 Namen) neben einer kurzen (1 Name)
   große Lücken in die Zeile. */
/* Echtes Raster statt CSS-Mehrspalten: Mehrspalten (columns) zerteilte hohe Karten
   über Spaltengrenzen (Kopf/Körper getrennt → „Zahl verschoben", chaotisch). */
.funktion-karten { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:1.2rem; align-items:start; margin-top:1.2rem; }
.funktion-karte { display:flex; flex-direction:column; gap:.9rem; margin:0; }
/* „Verfassen"-Umschalter: ein Button (summary) öffnet erst auf Klick das
   Formular (News, Kalender …). CSP-konform ohne JS via <details>. Das Label
   wechselt zwischen „verfassen" (zu) und „schließen" (offen). */
.verfassen-box { margin:0 0 1.2rem; }
.verfassen-box > summary { list-style:none; width:auto; }
.verfassen-box > summary::-webkit-details-marker { display:none; }
.verfassen-box > summary::marker { content:""; }
.verfassen-box[open] > summary { margin-bottom:1rem; }
.verfassen-box[open] .vb-zu,
.verfassen-box:not([open]) .vb-auf { display:none; }

/* Linkliste (Organisation): kuratierte Verweise auf externe Websites. */
.linkliste { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1.2rem; margin-top:1.2rem; }
.link-karte { background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm); transition:box-shadow var(--dur-base), transform var(--dur-fast); }
.link-karte:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.link-inaktiv { opacity:.6; }
.link-ziel { display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.link-ziel:hover { text-decoration:none; }
/* Banner wird IMMER VOLLSTÄNDIG gezeigt (kein Beschnitt): natürliches Seitenverhältnis
   auf volle Kachelbreite, Höhe auf 240px gedeckelt (sehr hohe Bilder werden dann
   proportional eingepasst). Empfohlenes Format 3:1 (z. B. 1200×400) nur für ein
   einheitliches Bild – jedes Format wird aber komplett dargestellt. */
.link-banner { display:block; background:var(--navy-100); overflow:hidden; }
.link-banner img { width:100%; height:auto; max-height:240px; object-fit:contain;
  display:block; }
.link-banner-leer { aspect-ratio:3 / 1; display:grid; place-items:center; font-family:var(--font-display);
  font-weight:800; font-size:2.6rem; color:var(--navy-700);
  background:linear-gradient(135deg, var(--navy-100), var(--navy-200)); }
.link-text { padding:.85rem 1rem 1.05rem; display:flex; flex-direction:column; gap:.3rem; }
.link-titel { font-size:1.05rem; color:var(--navy-800); display:flex; align-items:center; gap:.5rem; }
.link-besch { color:var(--text-muted); font-size:.9rem; line-height:1.35; }
.link-extern { color:var(--navy-500); font-size:.78rem; font-weight:600; margin-top:.15rem; }
.link-sort { display:flex; gap:.4rem; padding:.4rem 1rem 0; }
.link-pflege { padding:0 1rem .95rem; }

/* Abstimmungen (Modul „Mitwirkung") */
.ab-karte.ab-zu { opacity:.85; }
.ab-meta { color:var(--text-muted); font-size:.82rem; margin:.1rem 0 .5rem; }
.ab-besch { margin:0 0 .7rem; }
.ab-optionen { display:flex; flex-direction:column; gap:.5rem; margin:.2rem 0 .3rem; }
.ab-option { position:relative; display:block; width:100%; text-align:left;
  border:1.5px solid var(--border-subtle); border-radius:var(--radius-md);
  background:var(--surface-card); padding:.7rem .9rem; overflow:hidden; cursor:pointer;
  font:inherit; color:inherit; transition:border-color var(--dur-base), box-shadow var(--dur-base); }
button.ab-option:hover { border-color:var(--navy-400); box-shadow:var(--shadow-sm); }
.ab-option.ab-static { cursor:default; }
.ab-option.ab-ich { border-color:var(--accent); }
.ab-bar-fill { position:absolute; left:0; top:0; height:100%; width:0;
  background:var(--navy-100); z-index:0; transition:width var(--dur-base) var(--ease-standard); }
.ab-option.ab-ich .ab-bar-fill { background:rgba(250,232,0,.30); }
.ab-opt-inhalt { position:relative; z-index:1; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; }
.ab-opt-text { font-weight:600; color:var(--navy-800); }
.ab-opt-zahl { color:var(--text-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ab-namen { font-size:.78rem; color:var(--text-muted); margin:-.2rem 0 .3rem .3rem; }
.ab-tipp { margin:.4rem 0 0; }
.ab-aktionen { display:flex; gap:.6rem; margin-top:.9rem; }
.ab-opt-felder { border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  padding:.7rem .9rem; margin:.2rem 0; }
.ab-opt-felder legend { font-weight:700; font-size:.85rem; padding:0 .4rem; }
#ab-opt-liste { display:flex; flex-direction:column; gap:.5rem; margin-bottom:.6rem; }
.ab-opt-eingabe { width:100%; }

/* Organigramm (Organisation): Aufbauorganisation als Baum (oben nach unten).
   Klassische CSS-Baumtechnik mit Pseudo-Element-Verbindungslinien. */
.og-zoom { display:flex; gap:.35rem; }
.og-viewport { overflow-x:auto; padding-bottom:1rem; }
.og-buehne { display:inline-block; min-width:100%; transform-origin:top center;
  transition:transform var(--dur-base) var(--ease-standard); position:relative; }
/* SVG-Overlay für Zusatz-Unterstellungen (mehrere Vorgesetzte): liegt hinter dem
   Baum; die Linien laufen oben am Knoten zusammen. */
.og-linien { position:absolute; left:0; top:0; overflow:visible; pointer-events:none; z-index:0; }
.og-linie { fill:none; stroke:var(--accent); stroke-width:2; stroke-dasharray:5 4; opacity:.9; }
.og-baum, .og-baum ul { position:relative; padding:1.1em 0 0; white-space:nowrap;
  margin:0 auto; text-align:center; list-style:none; }
.og-baum { z-index:1; }
.og-legende-linie { border-bottom:2px dashed var(--accent); padding-bottom:1px; }
.og-li { display:inline-block; vertical-align:top; text-align:center; list-style:none;
  position:relative; padding:1.1em .5em 0; }
.og-li::before, .og-li::after { content:''; position:absolute; top:0; right:50%;
  border-top:2px solid #9fabb9; width:50%; height:1.1em; }
.og-li::after { right:auto; left:50%; border-left:2px solid #9fabb9; }
.og-li:only-child::before, .og-li:only-child::after { display:none; }
.og-li:only-child { padding-top:.4em; }
.og-li:first-child::before, .og-li:last-child::after { border:0 none; }
.og-li:last-child::before { border-right:2px solid #9fabb9; border-radius:0 6px 0 0; }
.og-li:first-child::after { border-radius:6px 0 0 0; }
.og-baum ul::before { content:''; position:absolute; top:0; left:50%;
  border-left:2px solid #9fabb9; width:0; height:1.1em; }
.og-baum > .og-li { padding-top:0; }
.og-baum > .og-li::before, .og-baum > .og-li::after { display:none; }
/* Führungsgruppe: Köpfe nebeneinander, Kinder mittig darunter; die Gabel
   (Köpfe -> Sammelpunkt -> Kinder) zeichnet das SVG-Overlay durchgezogen. */
.og-linie-voll { fill:none; stroke:#9fabb9; stroke-width:2; }
.og-baum .og-gruppe { display:inline-flex; flex-direction:column; align-items:center; }
.og-baum .og-gruppe-koepfe { display:flex; gap:1.8rem; align-items:flex-start;
  justify-content:center; }
/* Kinder-Zeile der Gruppe: BEWUSST das normale Baum-Layout (inline-block +
   nowrap aus der .og-baum-ul-Basisregel) statt Flex – Flex-Shrink hatte breite
   Teilbäume unter die Nachbarkacheln laufen lassen (Überlappung). */
.og-baum ul.og-gruppe-kinder { padding:4em 0 0; }
.og-baum ul.og-gruppe-kinder::before { display:none; }
.og-baum .og-gruppe-kinder > .og-li { padding-top:0; }
.og-baum .og-gruppe-kinder > .og-li::before,
.og-baum .og-gruppe-kinder > .og-li::after { display:none; }
.og-knoten { display:inline-flex; align-items:center; gap:.55rem; text-align:left;
  white-space:normal; background:var(--surface-card); border:1.5px solid var(--border-subtle);
  border-radius:var(--radius-md); padding:.5rem .7rem; min-width:150px; max-width:230px;
  box-shadow:var(--shadow-sm); position:relative; }
.og-knoten.og-extern { border-style:dashed; border-color:var(--navy-400); background:var(--surface-muted); }
.og-knoten.og-leer { opacity:.8; }
.og-avatar { flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--navy-700); color:#fff; font-family:var(--font-display); font-weight:700; font-size:.78rem; }
.og-extern .og-avatar { background:var(--navy-300); color:var(--navy-800); }
.og-info { display:flex; flex-direction:column; gap:1px; min-width:0; }
.og-titel { font-weight:700; color:var(--navy-800); font-size:.88rem; }
.og-name { color:var(--text-muted); font-size:.8rem; }
.og-kontakt { color:var(--navy-500); font-size:.72rem; }
.og-badge { position:absolute; top:-8px; right:8px; background:var(--navy-300); color:var(--navy-800);
  font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:1px 6px; border-radius:6px; }
.og-badge-mehrfach { right:auto; left:8px; background:var(--accent); color:var(--navy-800); }
.og-toggle { flex:none; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--border-subtle);
  background:var(--surface); color:var(--navy-700); cursor:pointer; line-height:1; font-weight:700;
  font-size:.9rem; display:grid; place-items:center; margin-left:.2rem; padding:0; }
.og-li.og-zu > ul { display:none; }
.og-verwalt-liste { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.og-verwalt { border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:.55rem .8rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.og-verwalt-kopf { flex:1 1 auto; display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap; }
.og-verwalt-name { color:var(--text-muted); font-size:.85rem; }
.og-verwalt-sort { flex:none; display:inline-flex; gap:.3rem; }
.og-verwalt > .news-pflege { flex-basis:100%; }
.og-extern-felder { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.6rem; }
.og-form-zeile { display:flex; gap:.8rem; flex-wrap:wrap; }

.fk-kopf { display:flex; align-items:center; gap:.7rem;
  padding-bottom:.7rem; border-bottom:1px solid var(--border-subtle); min-height:44px; }
.fk-medaillon { flex:none; width:44px; height:44px; border-radius:var(--radius-lg); display:grid; place-items:center; }
.fk-medaillon .ic { width:23px; height:23px; }
.fk-medaillon.fk-sicherheit { background:var(--navy-100); color:var(--navy-700); }
.fk-medaillon.fk-ersthelfer { background:#e3f3e4; color:#1e7a44; }
.fk-medaillon.fk-brandschutz { background:#fdecec; color:#c0392b; }
/* Lange Einzelwörter (z. B. „Fremdfirmenkoordinator:in") sauber per Silben-
   trennung umbrechen statt unter das Zahl-Badge zu laufen. */
.fk-titel { flex:1 1 auto; min-width:0; font-weight:700; color:var(--navy-800); line-height:1.2;
  overflow-wrap:break-word; hyphens:auto; }
.fk-anzahl { flex:none; margin-left:auto; min-width:26px; height:26px; padding:0 .55rem; border-radius:var(--radius-pill);
  background:var(--surface-sunken); color:var(--text-muted); font-weight:800; font-size:.82rem;
  display:inline-flex; align-items:center; justify-content:center; }
.fk-personen { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.fk-person { display:flex; align-items:center; gap:.6rem; }
.fk-person .tel-avatar { width:30px; height:30px; font-size:11.5px; }
.fk-pname { font-weight:600; color:var(--text-body); }
.fk-pmeta { margin-left:auto; display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap; }
.fk-datum { font-size:.85rem; color:var(--text-muted); }

/* ===== Umwelt-Dashboard: kuratierte Leistungs-KPIs + kompakte Detaillisten ===== */
.uw-abschnitt { font-family:var(--font-display); font-weight:700; color:var(--navy-800);
  margin:1.4rem 0 .2rem; font-size:1.15rem; }
.uw-intro { color:var(--text-body); font-size:1.02rem; max-width:70ch; margin:.1rem 0 1rem; }
.uw-kpis { margin:.4rem 0 1.2rem; }
.uw-kpis .stat { position:relative; }
.uw-kpis .stat .num.gut { color:var(--success); }
.uw-kpi-ic { display:grid; place-items:center; width:30px; height:30px; flex:none;
  border-radius:50%; background:var(--steel-100); color:var(--navy-700); }
.uw-kpi-ic .ic { width:16px; height:16px; }
/* Ruhige Mini-Listen in den Detailpanels */
.uw-mini { list-style:none; margin:.2rem 0 0; padding:0; }
.uw-mini li { display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.45rem 0; border-top:1px solid var(--border-subtle); font-size:.92rem; color:var(--text-muted); }
.uw-mini li:first-child { border-top:0; }
.uw-mini .v { font-family:var(--font-display); font-weight:700; color:var(--text-strong); white-space:nowrap; }
/* Aufklappbare Monatswerte-Matrix statt zweiter Volltabelle */
.uw-monate { margin-top:1.2rem; }
.uw-monate > summary { cursor:pointer; list-style:none; display:flex; align-items:center;
  font-family:var(--font-display); font-weight:700; color:var(--navy-800); }
.uw-monate > summary::-webkit-details-marker { display:none; }
.uw-monate > summary::after { content:'▾'; margin-left:auto; color:var(--text-muted); font-size:.9rem; }
.uw-monate[open] > summary::after { content:'▴'; }

/* ===== Dokumente-Startseite: Aufgaben-Karten + ruhige Bibliothek ===== */
.dokstart-h { display:flex; align-items:center; gap:.5rem; margin:0; }
.dokstart-h svg { width:20px; height:20px; flex:none; }
/* 1) Persönliche Aufgabe – einladende Handlungskarten */
.dokstart-aufgaben { margin:1.2rem 0 0; }
.dokstart-karten { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; margin-top:.8rem; }
.dokstart-karte { display:flex; flex-direction:column; gap:.45rem; padding:1rem 1.1rem;
  background:var(--surface-card); border:1px solid var(--border-default);
  border-left:4px solid var(--accent); border-radius:var(--radius-md); box-shadow:var(--shadow-xs); }
.dokstart-karte.ueber { border-left-color:var(--danger); }
.dokstart-kat { font-family:var(--font-display); font-weight:700; font-size:.62rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-muted); }
.dokstart-titel { font-family:var(--font-display); font-weight:700; font-size:1.02rem; line-height:1.2;
  color:var(--text-strong); text-decoration:none; word-break:break-word; }
.dokstart-titel:hover { color:var(--navy-600); text-decoration:underline; }
.dokstart-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .6rem; font-size:.8rem; color:var(--text-muted); }
.dokstart-akt { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:auto; padding-top:.35rem; }
.dokstart-akt form { margin:0; }
/* 2) Bibliothek – ruhige Kategorie-Panels mit Status-Chip */
.dokstart-biblio-kopf { margin-top:1.6rem; }
.dokstart-kat-panel { margin-top:1rem; }
.dokstart-liste { display:flex; flex-direction:column; }
.dokstart-eintrag { border-top:1px solid var(--border-subtle); padding:.15rem 0; }
.dokstart-eintrag:first-child { border-top:0; }
.dokstart-zeile { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem .8rem; padding:.6rem .1rem; }
.dokstart-txt { flex:1 1 220px; min-width:0; }
.dokstart-z-titel { font-weight:600; color:var(--text-strong); text-decoration:none; word-break:break-word; }
.dokstart-z-titel:hover { color:var(--navy-600); text-decoration:underline; }
.dokstart-sub { margin-top:2px; font-size:.78rem; color:var(--text-muted); }
.dokstart-status { flex:none; margin-left:auto; }
.dokstart-na { font-size:.78rem; color:var(--text-faint); }
/* Pflege je Zeile – dezent hinter Aufklapp, überlädt die Leseansicht nicht */
.dokstart-verw { margin:0 .1rem .35rem; }
.dokstart-verw > summary { cursor:pointer; list-style:none; display:inline-block;
  font-size:.78rem; font-weight:600; color:var(--navy-600); padding:.1rem 0 .5rem; }
.dokstart-verw > summary::-webkit-details-marker { display:none; }
.dokstart-verw > summary::before { content:"\2699  "; opacity:.6; }
.dokstart-verw[open] > summary { color:var(--text-strong); }
.dokstart-verw-in { margin-top:.2rem; padding:.75rem; border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); background:var(--surface-sunken); display:flex; flex-direction:column; gap:.8rem; }
.dokstart-verw-in form { margin:0; }
.dokstart-verw-akt { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.dokstart-verform { display:flex; flex-direction:column; gap:.3rem; }
.dokstart-verform label { font-weight:600; font-size:.78rem; }
.dokstart-verform input[type=text], .dokstart-verform textarea { width:100%; max-width:420px; margin:0; }
.dokstart-verform input[type=file] { margin:.15rem 0; font-size:.85rem; }
.dokstart-verform button { align-self:flex-start; }

/* Checkbox-Zeile in Formularen (Kästchen neben dem Text) */
.check-zeile { display:flex; align-items:flex-start; gap:.5rem; font-weight:600; }
/* Tagesplan: Mittagspause als eigene Band-Zeile (nicht Teil der 12–13-Stunde) */
.tp-pause td { text-align:center; font-size:.82rem; font-weight:600; color:var(--navy-700);
  background:repeating-linear-gradient(135deg, var(--surface-sunken), var(--surface-sunken) 10px,
    var(--navy-100) 10px, var(--navy-100) 20px); padding:.35rem .6rem; letter-spacing:.02em; }

/* Änderungshistorie (historie_box-Makro): dezente Versions-Nummer */
.historie-box summary { color: var(--navy-700); }
.hist-ver { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Dokumente: Unterkategorie-Überschrift innerhalb eines Kategorie-Panels */
.dokstart-untergruppe { display:flex; align-items:center; gap:.4rem; margin:1rem 0 .3rem;
  padding:0 0 .25rem; font-size:.9rem; font-weight:600; color:var(--navy-700);
  border-bottom:1px dashed var(--border-subtle); }
.dokstart-untergruppe svg { width:15px; height:15px; opacity:.6; }
.kat-einzug { color:var(--text-muted); margin-right:.25rem; }

/* Nacharbeit-Liste (Büro-Reiter) */
.na-liste { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem; }
.na-zeile { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;
  border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:.6rem .8rem; }
.na-info { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.na-grund { font-style:italic; color:var(--navy-700); }
.na-meta { color:var(--text-muted); font-size:.85rem; }
.na-aktion { display:flex; gap:.4rem; flex:none; align-items:center; }

/* Verzinkungs-Vorlaufzeit-Hinweis bei der Auftragsanlage */
.verzink-vorlauf-hinweis { margin:.5rem 0 0; padding:.55rem .8rem; border-radius:var(--radius-md);
  background:var(--navy-100); color:var(--navy-800); font-size:.88rem;
  border-left:3px solid var(--accent); }
.check-zeile input[type=checkbox] { margin-top:.25rem; flex:none; width:auto; }
.check-zeile small { font-weight:400; color:var(--text-muted); }

/* Betriebliche Funktionen verwalten: Symbol-/Farbwahl */
.fa-wahl-block { margin:.8rem 0; }
.fa-label { font-family:var(--font-display); font-weight:700; font-size:.85rem; color:var(--navy-800); margin-bottom:.35rem; }
.ikon-wahl, .farb-wahl { display:flex; flex-wrap:wrap; gap:.5rem; }
.ikon-wahl label, .farb-wahl label { cursor:pointer; position:relative; margin:0; }
.ikon-wahl input, .farb-wahl input { position:absolute; opacity:0; width:0; height:0; }
.ikon-wahl .fk-medaillon { width:40px; height:40px; border-radius:var(--radius-md);
  background:var(--steel-100); color:var(--navy-700); border:2px solid transparent; transition:border-color var(--dur-fast); }
.ikon-wahl .fk-medaillon .ic { width:20px; height:20px; }
.ikon-wahl input:checked + .fk-medaillon { border-color:var(--navy-800); box-shadow:var(--ring); }
.farb-swatch { display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  font-family:var(--font-display); font-weight:800; border:2px solid transparent; transition:border-color var(--dur-fast); }
.farb-wahl input:checked + .farb-swatch { border-color:var(--navy-800); box-shadow:var(--ring); }
.fk-medaillon.fk-mini { width:32px; height:32px; border-radius:var(--radius-md); }
.fk-medaillon.fk-mini .ic { width:17px; height:17px; }

/* Auftragsanlage: Schritt-Auswahl mit QK-Mini-Toggle (Qualitätskontrolle je Schritt). */
.schritt-wahl { display:inline-flex; align-items:center; gap:.45rem; margin-right:.4rem; }
.qk-mini { display:inline-flex; align-items:center; gap:.25rem; font-size:.72rem; font-weight:700;
  color:var(--navy-500); background:var(--navy-100); border-radius:var(--radius-pill);
  padding:2px 8px; cursor:pointer; }
.qk-mini input { margin:0; }

/* ============ Projekt-Zeitplan (Gantt light, v2.6) ============ */
.gantt { position: relative; }
.gantt-svg { position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 3; }
.gantt-kante { fill: none; stroke: var(--navy-600, #33507a); stroke-width: 1.6;
  opacity: .75; }
.gantt-kopfzeile { position: relative; height: 1.4rem; margin-left: 220px; }
.gantt-tick { position: absolute; transform: translateX(-50%);
  font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
.gantt-koerper { position: relative; }
.gantt-ueberzug { position: absolute; top: 0; bottom: 0; left: 220px; right: 0;
  pointer-events: none; }
.gantt-gitter { position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1px dashed var(--border, #d7dce3); z-index: 0; }
.gantt-zeile { display: grid; grid-template-columns: 220px 1fr;
  align-items: center; min-height: 2.5rem; position: relative; z-index: 1;
  border-radius: var(--radius-md); transition: background var(--dur-fast); }
.gantt-zeile:nth-child(odd) { background: color-mix(in srgb,
  var(--surface-2, #f4f6f9) 55%, transparent); }
.gantt-zeile:hover { background: color-mix(in srgb, var(--navy-100, #dde8f2) 55%, transparent); }
.gantt-label { font-size: .84rem; font-weight: 600; padding: .15rem .6rem .15rem 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-strong); }
.gantt-label small { color: var(--text-muted); margin-left: .3rem; font-weight: 500; }
.gantt-label small.puffer-neg { color: var(--danger, #c22f2f); font-weight: 700; }
.gantt-spur { position: relative; height: 2rem; }
.gantt-balken { position: absolute; top: .28rem; height: 1.45rem; min-width: .55rem;
  border-radius: var(--radius-md); background: var(--steel-400, #8b99ab);
  border: 1.5px solid transparent; font-size: .72rem; line-height: 1.45rem;
  text-align: center; color: #fff; overflow: hidden;
  box-shadow: var(--shadow-xs); transition: filter var(--dur-fast), transform var(--dur-fast); }
.gantt-balken:hover { filter: brightness(1.06); transform: translateY(-1px); }
.gantt-balken.st-offen { background: linear-gradient(180deg, #a6b2c1, #8b99ab); }
.gantt-balken.st-in_arbeit { background: linear-gradient(180deg, var(--navy-500, #1e5288), var(--navy-700, #0a2e54)); }
.gantt-balken.st-erledigt { background: linear-gradient(180deg, #3a9a53, var(--success, #2e7d32)); }
.gantt-balken.kritisch { border-color: var(--yellow-500, #fae800);
  box-shadow: 0 0 0 2px var(--yellow-500, #fae800), var(--shadow-sm); }
.gantt-balken.verzug { border-color: var(--danger, #c22f2f);
  box-shadow: 0 0 0 2px var(--danger, #c22f2f), var(--shadow-sm); }
.gantt-raute { position: absolute; top: .34rem; width: 1rem; height: 1rem;
  background: linear-gradient(135deg, var(--navy-500, #1e5288), var(--navy-700, #0a2e54));
  transform: translateX(-50%) rotate(45deg); border-radius: .14rem;
  box-shadow: var(--shadow-xs); }
.gantt-raute.erreicht { background: linear-gradient(135deg, #3a9a53, var(--success, #2e7d32)); }
.gantt-heute { position: absolute; top: 0; bottom: 0;
  border-left: 2px solid var(--danger, #c22f2f); z-index: 2; }
.gantt-heute span { position: absolute; top: -1.15rem; left: -1.1rem;
  font-size: .68rem; color: var(--danger, #c22f2f); }
.gantt-legende { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .7rem;
  font-size: .78rem; color: var(--text-muted); }
.gantt-legende .lg { display: inline-block; width: .85rem; height: .6rem;
  border-radius: .2rem; vertical-align: baseline; margin-right: .25rem; }
.lg-offen { background: var(--steel-400, #8b99ab); }
.lg-arbeit { background: var(--navy-500, #16385f); }
.lg-fertig { background: var(--success, #2e7d43); }
.lg-kritisch { background: transparent; box-shadow: 0 0 0 1.5px var(--yellow-500, #fae800); }
.lg-verzug { background: transparent; box-shadow: 0 0 0 1.5px var(--danger, #c22f2f); }
@media print {
  .sidebar, .topbar, .lk-aktionen, .hilfe-fab { display: none !important; }
  .gantt-balken { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* v2.7: Soll-Ist (Basisplan) + Fortschritt */
.gantt-soll { position: absolute; top: 1.32rem; height: .28rem;
  border-radius: .15rem; background: var(--steel-300, #c2cbd6);
  border: 1px solid var(--steel-400, #8b99ab); opacity: .9; }
.gantt-raute.soll { background: transparent;
  border: 1.5px dashed var(--steel-400, #8b99ab); }
.lg-soll { background: var(--steel-300, #c2cbd6);
  border: 1px solid var(--steel-400, #8b99ab); }
.fortschritt { display: flex; align-items: center; gap: .5rem; }
.fortschritt-balken { flex: 1; height: .55rem; border-radius: .3rem;
  background: var(--surface-2, #e8ecf1); overflow: hidden; max-width: 22rem; }
.fortschritt-balken > i { display: block; height: 100%;
  background: var(--navy-500, #16385f); border-radius: .3rem; }
.fortschritt small { font-variant-numeric: tabular-nums; }

/* v2.13: sortierbare Nav-Gruppen (Einheit aus Überschrift + Links) */
.nav-sub { display: flex; flex-direction: column; gap: 3px; }

/* --- AP-Detailkarte (v2.17): Aufgabenstrom mit Meilenstein-Zeilen --------- */
.strom-ms { background: #fffbe6; }
.strom-ms td { border-bottom: 2px solid var(--yellow-500, #fae800); }
.strom-raute { color: #b3a400; font-size: 1.05rem; }
.strom-erledigt td { color: var(--text-muted); }
.strom-erledigt td:nth-child(2) strong { text-decoration: line-through; }
.strom-check { width: 1.55rem; height: 1.55rem; border-radius: .35rem;
  border: 2px solid var(--steel-300, #b8c2cc); background: #fff; cursor: pointer;
  font-weight: 700; line-height: 1; color: #fff; }
.strom-check.an { background: var(--success, #1e7a44); border-color: var(--success, #1e7a44); }
.strom-add { display: flex; flex-direction: column; gap: .5rem; margin-top: .8rem; }
.strom-add-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.strom-add-form input[type="text"] { flex: 1; min-width: 200px; }
.strom-add-form input[type="number"] { width: 110px; }
.strom-edit { display: inline-block; }
.strom-edit[open] { display: block; margin-top: .4rem; }
.strom-edit-form { display: flex; flex-direction: column; gap: .35rem; margin: .4rem 0; }
.strom-feed { margin: 0; padding-left: 1.2rem; }
.strom-feed li { margin: .45rem 0; }

/* === Projekt-Detailseite v2.22: Hero, Fortschrittsring, In-Page-Reiter ===== */
.fring { position:relative; display:inline-flex; flex:none; align-items:center; justify-content:center; }
.fring svg { display:block; }
.fring-z { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; color:var(--navy-800); line-height:1; }
.fring-z small { font-size:.5em; font-weight:700; color:var(--text-muted); margin-left:1px; }

.pd-hero { display:flex; gap:1.3rem; align-items:center; flex-wrap:wrap;
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-left:5px solid var(--navy-700); border-radius:var(--radius-lg);
  padding:1.05rem 1.25rem; box-shadow:var(--shadow-sm); margin:0 0 .5rem; }
.pd-hero.st-beauftragt { border-left-color:var(--warning); }
.pd-hero.st-abgeschlossen { border-left-color:var(--success); }
.pd-hero.st-abgebrochen { border-left-color:var(--danger); }
.pd-hero.st-antrag, .pd-hero.st-zurueckgestellt, .pd-hero.st-abgelehnt { border-left-color:var(--steel-300); }
.pd-hero-haupt { flex:1; min-width:240px; }
.pd-hero-titel { font-family:var(--font-display); font-weight:800; font-size:1.5rem;
  color:var(--text-strong); margin:.05rem 0; line-height:1.08; text-wrap:balance; }
.pd-hero-nr { color:var(--text-faint); font-weight:600; font-size:.9rem; }
.pd-hero-pills { margin:.45rem 0 0; display:flex; gap:.35rem; flex-wrap:wrap; align-items:center; }
.pd-facts { display:flex; flex-wrap:wrap; gap:.55rem 1.5rem; margin:.7rem 0 0; padding:0; }
.pd-facts > div { min-width:0; }
.pd-facts dt { color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em;
  font-size:.6rem; font-weight:700; margin:0; }
.pd-facts dd { margin:0; font-weight:600; font-size:.9rem; color:var(--text-body); }

.pd-tabs { display:flex; gap:.1rem; flex-wrap:nowrap; overflow-x:auto; white-space:nowrap;
  border-bottom:2px solid var(--border-subtle); margin:.2rem 0 1.1rem;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.pd-tabs button { appearance:none; border:0; background:none; cursor:pointer; font:inherit;
  font-family:var(--font-display); font-weight:700; font-size:.92rem; color:var(--text-muted);
  padding:.6rem 1rem; border-bottom:3px solid transparent; margin-bottom:-2px;
  border-radius:var(--radius-md) var(--radius-md) 0 0; transition:color .12s, background .12s; }
.pd-tabs button:hover { color:var(--text-strong); background:var(--steel-50); }
.pd-tabs button.an { color:var(--navy-800); border-bottom-color:var(--accent); }
.pd-tabs button:focus-visible { outline:2px solid var(--navy-500); outline-offset:-2px; }
.pd-tab-zahl { display:inline-block; min-width:1.15rem; padding:0 .32rem; margin-left:.3rem;
  font-size:.68rem; font-weight:800; line-height:1.35; border-radius:var(--radius-pill);
  background:var(--steel-100); color:var(--navy-700); text-align:center; }
.pd-tabs button.warn .pd-tab-zahl { background:#fdecec; color:var(--danger); }
.pd-pane[hidden] { display:none; }
.pd-pane > .panel:first-child, .pd-pane > .karte:first-child { margin-top:0; }

/* Projekt-Dashboard-Karten v2.22: Status-Streifen links, aufgeräumte Hierarchie */
.pk-karte { position:relative; display:block; background:var(--surface-card);
  border:1px solid var(--border-subtle); border-left:5px solid var(--steel-300);
  border-radius:var(--radius-lg); padding:.85rem 1rem; box-shadow:var(--shadow-xs);
  text-decoration:none; color:inherit; transition:box-shadow .12s, transform .12s; }
.pk-karte:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.pk-karte.st-laufend { border-left-color:var(--navy-600); }
.pk-karte.st-beauftragt { border-left-color:var(--warning); }
.pk-karte.st-abgeschlossen { border-left-color:var(--success); }
.pk-karte.st-abgebrochen { border-left-color:var(--danger); }
.pk-kopf { display:flex; justify-content:space-between; align-items:flex-start; gap:.6rem; }
.pk-titel { font-family:var(--font-display); font-weight:800; font-size:1.05rem;
  color:var(--text-strong); line-height:1.12; }
.pk-meta { color:var(--text-muted); font-size:.8rem; margin:.15rem 0 0; }
.pk-chips { display:flex; gap:.3rem; flex-wrap:wrap; margin:.5rem 0 0; }
.pk-ziel { margin:.5rem 0 0; font-size:.88rem; color:var(--text-body); }
.projekt-filter { display:flex; gap:.35rem; flex-wrap:wrap; margin:.2rem 0 1rem; }
.projekt-filter button { appearance:none; cursor:pointer; font:inherit; font-weight:700;
  font-size:.82rem; padding:.32rem .8rem; border-radius:var(--radius-pill);
  border:1px solid var(--border-default); background:var(--surface-card); color:var(--text-muted); }
.projekt-filter button.an { background:var(--navy-700); border-color:var(--navy-700); color:#fff; }
.pk-karte[hidden] { display:none; }

/* ==== v2.26: Sperrbildschirm (PIN-Kurzsperre) + Erstanmeldung ============ */
.sperre-card .sub { margin-top:.6rem; }
.sperre-nutzer { display:flex; align-items:center; gap:.8rem; margin:.9rem 0 .2rem; }
.sperre-nutzer strong { display:block; font-family:var(--font-display); font-size:1.05rem; color:var(--text-strong); }
.sperre-nutzer small { color:var(--text-muted); }
.sperre-avatar { flex:none; width:46px; height:46px; border-radius:50%;
  background:var(--yellow-500); color:var(--navy-800); display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:1rem; letter-spacing:.02em; }
.sperre-pin { text-align:center; font-size:1.5rem; letter-spacing:.6em; font-weight:700; }
.sperre-abmelden { background:none; border:none; padding:0; cursor:pointer; font:inherit;
  font-size:.85rem; color:var(--text-muted); text-decoration:underline; }
.sperre-abmelden:hover { color:var(--text-strong); }
.sperre-abmelden.hell { color:rgba(255,255,255,.75); }
.sperre-abmelden.hell:hover { color:#fff; }

.el-body { background:var(--steel-100); min-height:100vh; display:flex; flex-direction:column; }
.el-kopf { display:flex; align-items:center; gap:.7rem; padding:.8rem 1.4rem;
  background:var(--navy-800); color:#fff; }
.el-kopf img { width:30px; height:30px; }
.el-kopf .wm { font-family:var(--font-display); font-weight:800; line-height:1.05; }
.el-kopf .wm small { display:block; font-family:var(--font-text, inherit); font-weight:400;
  font-size:.72rem; color:rgba(255,255,255,.65); letter-spacing:.06em; text-transform:uppercase; }
.el-kopf form { margin-left:auto; }
.el-main { flex:1; display:grid; place-items:start center; padding:2rem 1rem 3rem; }
.el-card { width:100%; max-width:760px; background:#fff; border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:0 10px 34px rgba(4,31,60,.10); padding:1.6rem 1.8rem 1.8rem; }
.el-card h2 { margin:.2rem 0 .3rem; font-family:var(--font-display); font-weight:800;
  font-size:1.5rem; color:var(--text-strong); }
.el-card .sub { color:var(--text-muted); margin:0 0 .9rem; max-width:56ch; }
.el-form label { display:block; margin-top:.7rem; }
.el-schritte { display:flex; align-items:center; gap:.5rem; margin-bottom:1.1rem; }
.el-punkt { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem;
  font-weight:700; color:var(--text-faint); letter-spacing:.02em; }
.el-punkt i { font-style:normal; width:24px; height:24px; border-radius:50%; display:grid;
  place-items:center; background:var(--steel-150); color:var(--steel-600); font-size:.78rem; }
.el-punkt.an { color:var(--text-strong); }
.el-punkt.an i { background:var(--yellow-500); color:var(--navy-800); }
.el-punkt.fertig { color:var(--navy-600); }
.el-punkt.fertig i { background:var(--navy-800); color:#fff; }
.el-linie { flex:1; height:2px; background:var(--steel-150); border-radius:1px; min-width:18px; }
.el-linie.fertig { background:var(--navy-800); }

/* Rundgang: eine Karte im Fokus, die übrigen gedimmt (ohne JS: alle sichtbar). */
.el-tour { display:flex; flex-direction:column; gap:.7rem; margin:.4rem 0 1rem; }
.el-mod { display:flex; gap:.9rem; align-items:flex-start; padding:.9rem 1rem;
  border:1px solid var(--border-subtle); border-radius:var(--radius-lg); background:#fff;
  transition:opacity .25s ease, transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.el-mod h3 { margin:0 0 .2rem; font-family:var(--font-display); font-weight:800; font-size:1.02rem; }
.el-mod p { margin:0; color:var(--text-body); font-size:.92rem; }
.el-mod-ic { flex:none; width:42px; height:42px; border-radius:var(--radius-md);
  background:var(--navy-800); color:var(--yellow-500); display:grid; place-items:center; }
.el-mod-ic .ic { width:22px; height:22px; }
.el-mod.an { border-color:var(--yellow-500); box-shadow:0 8px 26px rgba(4,31,60,.14);
  transform:scale(1.015); }
.el-mod.leise { opacity:.35; }
.el-mod.el-extra { background:var(--yellow-100); border-color:var(--yellow-400); }
.el-tour-nav { display:flex; align-items:center; gap:.7rem; justify-content:flex-end; }
.el-tour-stand { color:var(--text-faint); font-size:.85rem; font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion: reduce) { .el-mod { transition:none; } }