/* Anlagenstatus & Störungs-Workflow
 *
 * Eine Oberfläche für drei Hüllen: /anlagen (Tablet/Handy), SPA-Modul
 * Betrieb → Anlagenstatus (#anlagenView) und den Meldedialog im Chargen-Kiosk.
 * Deshalb tragen ALLE Klassen das Präfix "an-" und die Farben hängen an
 * .an-root / .an-melden - style.css der SPA (globale .btn, .card …) und
 * chargenverfolgung.css des Kiosks greifen hier nicht hinein.
 *
 * Optik nach portal.css / wawe.css (Karten, Pillen, Kacheln), Tippflächen
 * ≥ 56 px für Handschuhe und Tablets in der Halle.
 */

.an-root, .an-melden {
  --an-primary: #4f46e5;
  --an-primary-dark: #3730a3;
  --an-primary-light: #eef2ff;
  --an-accent: #7c3aed;
  --an-ink: #1e293b;
  --an-muted: #64748b;
  --an-border: #e2e8f0;
  --an-bg: #f1f5f9;
  --an-surface: #ffffff;
  --an-rot: #dc2626;     --an-rot-bg: #fef2f2;     --an-rot-rand: #fecaca;
  --an-gelb: #d97706;    --an-gelb-bg: #fffbeb;    --an-gelb-rand: #fcd34d;
  --an-gruen: #16a34a;   --an-gruen-bg: #f0fdf4;   --an-gruen-rand: #86efac;
  --an-grau: #64748b;    --an-grau-bg: #f1f5f9;    --an-grau-rand: #cbd5e1;
  --an-blau: #2563eb;    --an-blau-bg: #eff6ff;
  --an-orange: #ea580c;  --an-orange-bg: #fff7ed;
  --an-lila: #7c3aed;    --an-lila-bg: #f5f3ff;
  --an-radius: 16px;
  --an-tipp: 56px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--an-ink);
  -webkit-text-size-adjust: 100%;
}
.an-root *, .an-melden * { box-sizing: border-box; }
.an-melden { font-size: 16px; line-height: 1.4; }
.an-root button, .an-melden button { font-family: inherit; }

/* Rücksetzung der globalen Element-Regeln aus style.css (SPA: button 100 % breit,
 * Verlauf, Schatten, margin-bottom; table mit Farbkopf) und chargenverfolgung.css
 * (Kiosk: button min. 80 px / 28 px, input 74 px). :where() hat Spezifität 0 -
 * gewinnt nur gegen die nackten Element-Regeln (diese Datei lädt danach), jede
 * .an-…-Klasse darunter setzt ihre Werte trotzdem durch. */
:where(.an-root, .an-melden) button {
  margin: 0; padding: 0; width: auto; min-width: 0; min-height: 0; box-shadow: none;
  background: none; border: none; color: inherit; font-size: inherit; font-weight: inherit;
  border-radius: 0; transition: none;
}
:where(.an-root, .an-melden) button:hover,
:where(.an-root, .an-melden) button:active { transform: none; box-shadow: none; }
:where(.an-root, .an-melden) input,
:where(.an-root, .an-melden) select,
:where(.an-root, .an-melden) textarea { margin: 0; }
:where(.an-root, .an-melden) input[type="checkbox"] { width: auto; min-height: 0; padding: 0; }
:where(.an-root) table { margin: 0; box-shadow: none; border-radius: 0; overflow: visible; background: none; }
:where(.an-root) thead { background: none; color: inherit; }
:where(.an-root) th { text-transform: none; letter-spacing: 0; position: static; cursor: default; user-select: auto; }
:where(.an-root) tbody tr:hover { transform: none; background: none; }
.an-versteckt { display: none !important; }

/* ── Seite (/anlagen) ── */
body.an-seite { margin: 0; background: var(--an-bg, #f1f5f9); min-height: 100vh; }
.an-kopf {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #fff; padding: 14px 16px; position: sticky; top: 0; z-index: 50;
}
.an-kopf-innen { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.an-kopf-logo { height: 28px; filter: brightness(0) invert(1); }
.an-kopf-text { flex: 1; min-width: 0; }
.an-kopf-text h1 { margin: 0; font-size: 19px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-kopf-text p { margin: 2px 0 0; font-size: 12.5px; opacity: .85; }
.an-kopf-knopf {
  background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
  white-space: nowrap; min-height: 40px;
}
.an-kopf-knopf:hover { background: rgba(255,255,255,.28); }
.an-kopf-knopf.an-an { background: #fff; color: var(--an-primary-dark, #3730a3); }
/* Konto-Fenster (/anlagen, js/anlagen/anlagen-seite.js) */
.an-konto-wer { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.an-konto-icon {
  width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--an-bg); font-size: 24px;
}
.an-konto-text { min-width: 0; }
.an-konto-text b { display: block; font-size: 17px; overflow-wrap: anywhere; }
.an-konto-text small { display: block; margin-top: 2px; color: var(--an-muted); font-size: 13.5px; }

.an-reiter {
  max-width: 1280px; margin: 0 auto; display: flex; gap: 6px; padding: 10px 16px 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.an-reiter a {
  display: inline-flex; align-items: center; gap: 6px; padding: 12px 16px; border-radius: 12px 12px 0 0;
  font-size: 15px; font-weight: 600; color: var(--an-muted); text-decoration: none; white-space: nowrap;
  min-height: 48px; background: transparent;
}
.an-reiter a.an-aktiv { background: var(--an-surface); color: var(--an-primary); box-shadow: 0 -2px 10px rgba(15,23,42,.05); }
.an-reiter .an-zahl {
  background: var(--an-rot); color: #fff; border-radius: 999px; font-size: 12px; padding: 1px 8px; min-width: 22px; text-align: center;
}
.an-inhalt { max-width: 1280px; margin: 0 auto; padding: 16px; }
.an-root.an-in-spa .an-inhalt { padding: 16px 0; }
.an-root.an-in-spa .an-reiter { padding: 0; }

/* ── Login / Zustände ── */
.an-karte {
  background: var(--an-surface); border-radius: var(--an-radius); box-shadow: 0 4px 24px rgba(79,70,229,.08);
  padding: 20px; margin-bottom: 16px;
}
.an-karte h2 { margin: 0 0 4px; font-size: 18px; }
.an-karte h3 { margin: 0 0 10px; font-size: 16px; }
.an-hinweis { font-size: 14px; color: var(--an-muted); line-height: 1.5; margin: 0; }
.an-zustand { text-align: center; padding: 36px 16px; }
.an-zustand-icon { font-size: 44px; }
.an-zustand-titel { font-size: 19px; font-weight: 650; margin: 10px 0 6px; }
.an-login { max-width: 420px; margin: 40px auto; }
.an-feld-gruppe { margin-bottom: 14px; }
.an-feld-label { display: block; font-size: 13px; font-weight: 600; color: var(--an-muted); margin-bottom: 6px; }
.an-feld {
  width: 100%; padding: 14px; font-size: 16px; border: 1.5px solid var(--an-border); border-radius: 12px;
  background: #fff; color: var(--an-ink); font-family: inherit; font-weight: 400; min-height: 0;
}
.an-feld:focus { outline: none; border-color: var(--an-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
textarea.an-feld { min-height: 90px; resize: vertical; }
.an-fehler { background: var(--an-rot-bg); color: #991b1b; border: 1px solid var(--an-rot-rand); border-radius: 12px; padding: 12px 14px; font-size: 14px; margin: 10px 0; }

/* ── Knöpfe ── */
.an-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 18px; border-radius: 12px; border: 1.5px solid var(--an-border);
  background: #fff; color: var(--an-ink); font-size: 15px; font-weight: 650; cursor: pointer;
  text-decoration: none; width: auto; line-height: 1.2;
}
.an-btn:hover { border-color: var(--an-primary); }
.an-btn:disabled { opacity: .5; cursor: not-allowed; }
.an-btn-primaer { background: linear-gradient(135deg, var(--an-primary), var(--an-accent)); border-color: transparent; color: #fff; }
.an-btn-gruen { background: var(--an-gruen); border-color: var(--an-gruen); color: #fff; }
.an-btn-rot { background: var(--an-rot); border-color: var(--an-rot); color: #fff; }
.an-btn-xl { min-height: var(--an-tipp); font-size: 17px; padding: 14px 22px; border-radius: 14px; }
.an-btn-voll { width: 100%; }
.an-melde-knopf {
  width: 100%; min-height: 72px; font-size: 20px; border-radius: 16px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #dc2626, #b91c1c); color: #fff; font-weight: 750;
  box-shadow: 0 6px 20px rgba(220,38,38,.3); display: flex; align-items: center; justify-content: center; gap: 12px;
}
.an-melde-knopf:active { transform: scale(.99); }
.an-knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; }
.an-knopfreihe > .an-btn { flex: 1 1 200px; }

/* ── Werkzeugleiste ── */
.an-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.an-leiste .an-spacer { flex: 1; }
.an-schalter {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px;
  border: 1.5px solid var(--an-border); background: #fff; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 44px;
}
.an-schalter.an-an { border-color: var(--an-primary); background: var(--an-primary-light); color: var(--an-primary-dark); }
.an-zusammenfassung { display: flex; gap: 10px; flex-wrap: wrap; }
.an-zf { border-radius: 12px; padding: 8px 14px; font-weight: 700; font-size: 15px; }
.an-zf-rot { background: var(--an-rot-bg); color: var(--an-rot); }
.an-zf-gelb { background: var(--an-gelb-bg); color: var(--an-gelb); }
.an-zf-gruen { background: var(--an-gruen-bg); color: var(--an-gruen); }
.an-stand { font-size: 12.5px; color: var(--an-muted); }

/* ── Anlagen-Kacheln ── */
.an-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.an-kachel {
  background: #fff; border-radius: var(--an-radius); border: 2px solid var(--an-border); border-left-width: 10px;
  padding: 14px 14px 12px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 6px;
  min-height: 150px; color: inherit; text-decoration: none; transition: transform .1s, box-shadow .1s;
}
.an-kachel:hover { box-shadow: 0 6px 20px rgba(15,23,42,.08); transform: translateY(-1px); }
.an-kachel-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.an-kachel-name { font-size: 20px; font-weight: 750; }
.an-kachel-status { font-size: 13px; font-weight: 700; }
.an-kachel-zeile { font-size: 13px; color: var(--an-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-kachel-zeile strong { color: var(--an-ink); font-weight: 600; }
.an-kachel-werte { display: flex; gap: 12px; margin-top: auto; padding-top: 6px; border-top: 1px dashed var(--an-border); font-size: 12.5px; color: var(--an-muted); }
.an-kachel-werte b { display: block; color: var(--an-ink); font-size: 15px; }
.an-ampel-rot  { border-color: var(--an-rot-rand);   border-left-color: var(--an-rot);   background: var(--an-rot-bg); }
.an-ampel-gelb { border-color: var(--an-gelb-rand);  border-left-color: var(--an-gelb);  background: var(--an-gelb-bg); }
.an-ampel-gruen{ border-left-color: var(--an-gruen); }
.an-ampel-grau { border-left-color: var(--an-grau-rand); background: var(--an-grau-bg); opacity: .8; }
.an-ampel-rot .an-kachel-status { color: var(--an-rot); }
.an-ampel-gelb .an-kachel-status { color: var(--an-gelb); }
.an-ampel-gruen .an-kachel-status { color: var(--an-gruen); }
.an-ampel-grau .an-kachel-status { color: var(--an-grau); }
.an-punkt { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: none; }
.an-punkt-rot { background: var(--an-rot); box-shadow: 0 0 0 4px rgba(220,38,38,.18); animation: an-puls 1.6s infinite; }
.an-punkt-gelb { background: var(--an-gelb); }
.an-punkt-gruen { background: var(--an-gruen); }
.an-punkt-grau { background: var(--an-grau-rand); }
@keyframes an-puls { 50% { box-shadow: 0 0 0 8px rgba(220,38,38,.05); } }
@media (prefers-reduced-motion: reduce) { .an-punkt-rot { animation: none; } }

/* ── Pillen / Chips ── */
.an-pille {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 10px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap; background: var(--an-grau-bg); color: var(--an-grau);
}
.an-pille-rot { background: var(--an-rot-bg); color: var(--an-rot); }
.an-pille-orange { background: var(--an-orange-bg); color: var(--an-orange); }
.an-pille-gelb { background: var(--an-gelb-bg); color: var(--an-gelb); }
.an-pille-gruen { background: var(--an-gruen-bg); color: var(--an-gruen); }
.an-pille-blau { background: var(--an-blau-bg); color: var(--an-blau); }
.an-pille-lila { background: var(--an-lila-bg); color: var(--an-lila); }
.an-pille-grau { background: var(--an-grau-bg); color: var(--an-grau); }
.an-pille-steht { background: var(--an-rot); color: #fff; }

/* ── Vorgangs-Karten (Aufgaben, offene Probleme) ── */
.an-liste { display: flex; flex-direction: column; gap: 10px; }
.an-vorgang {
  background: #fff; border-radius: 14px; border: 1.5px solid var(--an-border); border-left-width: 8px;
  padding: 14px 16px; display: flex; gap: 14px; align-items: center; cursor: pointer;
}
.an-vorgang:hover { border-color: var(--an-primary); }
.an-vorgang.an-steht { border-left-color: var(--an-rot); background: #fffafa; }
.an-vorgang.an-offen { border-left-color: var(--an-gelb); }
.an-vorgang.an-zu { border-left-color: var(--an-grau-rand); }
.an-vorgang-haupt { flex: 1; min-width: 0; }
.an-vorgang-titel { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.an-vorgang-meta { font-size: 13.5px; color: var(--an-muted); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.an-vorgang-aktion { flex: none; }
/* Aufgaben: übernommen (seit 28.10.2026) */
.an-pille-wer b { font-weight: 700; }
.an-vorgang.an-vorgang-meine { box-shadow: 0 0 0 2px rgba(79, 70, 229, .22); }
.an-vorgang.an-vorgang-kollege { background: var(--an-grau-bg); border-left-color: var(--an-grau-rand); opacity: .62; filter: grayscale(.75); transition: opacity .15s, filter .15s; }
.an-vorgang.an-vorgang-kollege .an-vorgang-titel { font-weight: 600; }
.an-vorgang.an-vorgang-kollege:hover, .an-vorgang.an-vorgang-kollege:focus-visible { opacity: 1; filter: none; }
.an-auf-gruppe { display: flex; align-items: center; gap: 8px; margin: 18px 2px 8px; font-size: 13px; font-weight: 700; color: var(--an-muted); text-transform: uppercase; letter-spacing: .03em; }
.an-auf-gruppe span { background: var(--an-grau-bg); color: var(--an-grau); border-radius: 999px; padding: 1px 8px; font-size: 12px; letter-spacing: 0; }
.an-auf-kollegen > summary { cursor: pointer; list-style: none; }
.an-auf-kollegen > summary::-webkit-details-marker { display: none; }
.an-auf-kollegen > summary::before { content: "\25B8"; font-size: 12px; transition: transform .15s; }
.an-auf-kollegen[open] > summary::before { transform: rotate(90deg); }
.an-neu-markiert { animation: an-aufblinken 1.2s ease 2; }
@keyframes an-aufblinken { 50% { box-shadow: 0 0 0 6px rgba(220,38,38,.25); } }

/* ── Detail ── */
.an-detail-kopf { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.an-root .an-detail-titel { font-size: 28px; font-weight: 800; margin: 0; }
.an-karte.an-kopfkarte { border-left-width: 10px; border-left-style: solid; }
.an-detail-ampel { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; }
.an-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.an-fakten { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 14.5px; margin: 0; }
.an-fakten dt { color: var(--an-muted); }
.an-fakten dd { margin: 0; font-weight: 600; word-break: break-word; }
.an-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.an-kpi { background: var(--an-bg); border-radius: 12px; padding: 12px; }
.an-kpi-wert { font-size: 22px; font-weight: 800; }
.an-kpi-label { font-size: 12.5px; color: var(--an-muted); margin-top: 2px; }
.an-kpi-gut { color: var(--an-gruen); } .an-kpi-mittel { color: var(--an-gelb); } .an-kpi-schlecht { color: var(--an-rot); }
.an-balken { display: flex; align-items: flex-end; gap: 4px; height: 90px; padding-top: 8px; }
.an-balken-tag { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.an-balken-saeule { width: 100%; max-width: 28px; background: var(--an-primary); border-radius: 6px 6px 2px 2px; min-height: 2px; }
.an-balken-saeule.an-null { background: var(--an-border); }
.an-balken-label { font-size: 10.5px; color: var(--an-muted); }
.an-zeitleiste { list-style: none; margin: 0; padding: 0 0 0 4px; }
.an-zeitleiste li { position: relative; padding: 0 0 14px 24px; border-left: 2px solid var(--an-border); margin-left: 6px; }
.an-zeitleiste li:last-child { border-left-color: transparent; }
.an-zeitleiste li::before {
  content: ''; position: absolute; left: -8px; top: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--an-primary); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--an-primary);
}
.an-zeitleiste .an-zl-zeit { font-weight: 800; font-variant-numeric: tabular-nums; margin-right: 8px; }
.an-zeitleiste .an-zl-dauer { font-size: 12.5px; color: var(--an-muted); }
.an-verlauf { list-style: none; margin: 0; padding: 0; }
.an-verlauf li { padding: 10px 0; border-bottom: 1px solid var(--an-border); font-size: 14px; }
.an-verlauf li:last-child { border-bottom: none; }
.an-verlauf-kopf { display: flex; justify-content: space-between; gap: 10px; color: var(--an-muted); font-size: 12.5px; margin-bottom: 2px; }
.an-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.an-fotos a { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--an-bg); }
.an-fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.an-aktionen { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }

/* ── Bottom-Sheet / Dialog (auch Meldedialog im Kiosk) ── */
.an-sheet-hg {
  position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 10050;
  display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 760px) { .an-sheet-hg { align-items: center; } }
.an-sheet {
  background: #fff; width: 100%; max-width: 760px; max-height: 94vh; overflow-y: auto;
  border-radius: 20px 20px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 40px rgba(0,0,0,.2); color: var(--an-ink);
}
@media (min-width: 760px) { .an-sheet { border-radius: 20px; } }
.an-sheet-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.an-sheet-kopf h2 { flex: 1; margin: 0; font-size: 20px; }
.an-sheet-zu {
  width: 48px; height: 48px; min-width: 0; min-height: 0; border-radius: 50%; border: none; background: var(--an-bg); font-size: 22px; cursor: pointer; flex: none;
}
.an-sheet-fuss { display: flex; gap: 10px; margin-top: 18px; position: sticky; bottom: -18px; background: #fff; padding-top: 10px; }
.an-sheet-fuss .an-btn { flex: 1; }
.an-schritte { display: flex; gap: 6px; margin-bottom: 14px; }
.an-schritte span { flex: 1; height: 6px; border-radius: 3px; background: var(--an-border); }
.an-schritte span.an-fertig { background: var(--an-primary); }
.an-frage { font-size: 18px; font-weight: 700; margin: 4px 0 12px; }
.an-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.an-wahl-gross { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.an-wahl button {
  min-height: var(--an-tipp); padding: 12px; border-radius: 14px; border: 2px solid var(--an-border); background: #fff;
  font-size: 16px; font-weight: 650; cursor: pointer; color: var(--an-ink); text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.an-wahl button .an-wahl-icon { font-size: 26px; }
.an-wahl button small { font-size: 12px; font-weight: 500; color: var(--an-muted); }
.an-wahl button:hover { border-color: var(--an-primary); }
.an-wahl button.an-gewaehlt { border-color: var(--an-primary); background: var(--an-primary-light); color: var(--an-primary-dark); box-shadow: 0 0 0 2px var(--an-primary) inset; }
.an-wahl button.an-wahl-rot.an-gewaehlt { border-color: var(--an-rot); background: var(--an-rot-bg); color: var(--an-rot); box-shadow: 0 0 0 2px var(--an-rot) inset; }
.an-wahl button.an-wahl-gelb.an-gewaehlt { border-color: var(--an-gelb); background: var(--an-gelb-bg); color: #92400e; box-shadow: 0 0 0 2px var(--an-gelb) inset; }
.an-wahl button.an-wahl-gruen.an-gewaehlt { border-color: var(--an-gruen); background: var(--an-gruen-bg); color: var(--an-gruen); box-shadow: 0 0 0 2px var(--an-gruen) inset; }
.an-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.an-chips button {
  min-height: 46px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--an-border); background: #fff;
  font-size: 15px; font-weight: 600; cursor: pointer; color: var(--an-ink);
}
.an-chips button.an-gewaehlt { border-color: var(--an-primary); background: var(--an-primary-light); color: var(--an-primary-dark); }
/* Schritt-Fenster (Vorgang): Auswahl-Felder als große Kacheln wie „Was wurde gemacht?“ (seit 28.10.2026) */
[data-schritt-felder] .an-feld-gruppe > .an-feld-label { font-size: 18px; font-weight: 700; color: var(--an-ink); margin: 4px 0 12px; }
[data-schritt-felder] .an-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
[data-schritt-felder] .an-chips button { min-height: var(--an-tipp); padding: 12px; border-radius: 14px; border: 2px solid var(--an-border); font-size: 16px; font-weight: 650; text-align: center; }
[data-schritt-felder] .an-chips button.an-gewaehlt { border-color: var(--an-primary); box-shadow: 0 0 0 2px var(--an-primary) inset; }
.an-foto-leiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.an-foto-mini { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; border: 1px solid var(--an-border); }
.an-foto-btn { position: relative; overflow: hidden; }
.an-foto-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.an-zusammen { background: var(--an-bg); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; }
.an-zusammen div { padding: 3px 0; }

/* ── Hauptschalter / Testbetrieb ── */
.an-testbanner {
  max-width: 1280px; margin: 10px auto 0; padding: 10px 16px; border-radius: 12px; font-size: 14px;
  background: #fffbeb; border: 1.5px dashed #f59e0b; color: #92400e;
}
.an-root.an-in-spa .an-testbanner { margin: 10px 0 0; }
.an-testbanner a { color: inherit; font-weight: 700; }
.an-hauptschalter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 14px;
  border-radius: 14px; border: 2px solid;
}
.an-hauptschalter.an-test { background: #fffbeb; border-color: #f59e0b; }
.an-hauptschalter-knopf { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 260px; cursor: pointer; }
.an-hauptschalter-knopf input { width: 30px; height: 30px; margin: 0; flex: none; accent-color: #16a34a; }
.an-hauptschalter-text b { display: block; font-size: 16px; }
.an-hauptschalter-text small { display: block; color: var(--an-muted); font-size: 13px; margin-top: 2px; line-height: 1.4; }
.an-kiosk-test { flex: none; padding: 6px 10px; border-radius: 10px; background: #fffbeb; border: 1.5px dashed #f59e0b; color: #92400e; font-size: 13px; font-weight: 700; }

/* ── Geplanter Stillstand (blau) ── */
.an-ampel-blau { border-color: #bfdbfe; border-left-color: var(--an-blau); background: var(--an-blau-bg); }
.an-ampel-blau .an-kachel-status { color: var(--an-blau); }
.an-punkt-blau { background: var(--an-blau); box-shadow: 0 0 0 4px rgba(37,99,235,.18); }
.an-zf-blau { background: var(--an-blau-bg); color: var(--an-blau); }
.an-pille-blau-voll { background: var(--an-blau); color: #fff; }

/* ── Schritte eines Vorgangs ── */
.an-schrittleiste { display: flex; gap: 6px; margin-top: 14px; overflow-x: auto; padding-bottom: 2px; }
.an-schrittpunkt {
  flex: 1 1 0; min-width: 140px; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px;
  background: var(--an-bg); border: 2px solid transparent; font-size: 13px;
}
.an-schrittpunkt .an-schritt-nr {
  width: 26px; height: 26px; border-radius: 50%; background: var(--an-border); display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
}
.an-schritt-name { font-weight: 700; font-size: 14px; }
.an-schritt-team { color: var(--an-muted); }
.an-schrittpunkt.an-fertig .an-schritt-nr { background: var(--an-gruen); color: #fff; }
.an-schrittpunkt.an-aktuell { border-color: var(--an-primary); background: var(--an-primary-light); }
.an-schrittpunkt.an-aktuell .an-schritt-nr { background: var(--an-primary); color: #fff; }
.an-checkliste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.an-check {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--an-border); border-radius: 12px;
  font-size: 16px; font-weight: 600; cursor: pointer; min-height: var(--an-tipp); background: #fff;
}
.an-check input { width: 26px; height: 26px; min-height: 0; flex: none; margin: 0; accent-color: var(--an-gruen); }
.an-check:has(input:checked) { border-color: var(--an-gruen); background: var(--an-gruen-bg); }

/* ── Einstellungen ── */
.an-unterreiter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.an-unterreiter a {
  padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--an-border); background: #fff; color: var(--an-ink);
  text-decoration: none; font-weight: 600; font-size: 14px;
}
.an-unterreiter a.an-aktiv { border-color: var(--an-primary); background: var(--an-primary-light); color: var(--an-primary-dark); }
.an-zweispaltig { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .an-zweispaltig { grid-template-columns: 1fr; } }
.an-ablauf-liste { display: flex; flex-direction: column; gap: 8px; }
.an-ablauf-wahl {
  display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 12px;
  border: 1.5px solid var(--an-border); background: #fff; cursor: pointer; width: 100%;
}
.an-ablauf-wahl .an-wahl-icon { font-size: 24px; }
.an-ablauf-wahl small { display: block; color: var(--an-muted); font-size: 12px; font-weight: 500; }
.an-ablauf-wahl.an-aktiv { border-color: var(--an-primary); background: var(--an-primary-light); }
.an-formular { display: flex; flex-wrap: wrap; gap: 12px; }
.an-formular > label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--an-muted); flex: 1 1 180px; }
.an-formular > label.an-breit { flex-basis: 100%; }
.an-check-klein { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; margin: 4px 14px 4px 0; cursor: pointer; }
.an-check-klein input { width: 18px; height: 18px; margin: 0; }
.an-schritte-edit { display: flex; flex-direction: column; }
.an-schritt-pfeil { text-align: center; color: var(--an-muted); font-size: 18px; line-height: 1.4; }
.an-schritt-edit { border: 1.5px solid var(--an-border); border-radius: 14px; padding: 12px; background: #fafbff; }
.an-schritt-edit-kopf { display: flex; gap: 8px; align-items: center; }
.an-schritt-edit-kopf .an-feld { flex: 1; }
.an-schritt-edit-kopf .an-btn { min-height: 44px; padding: 6px 12px; }
.an-schritt-edit-kopf .an-schritt-nr {
  width: 30px; height: 30px; border-radius: 50%; background: var(--an-primary); color: #fff; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 800; flex: none;
}
.an-schritt-edit-felder { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.an-schritt-edit-felder label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--an-muted); flex: 1 1 160px; }
.an-schritt-edit-optionen { display: flex; flex-wrap: wrap; margin-top: 6px; }
.an-mitglied.an-aus { background: var(--an-grau-bg); color: var(--an-grau); text-decoration: line-through; }
.an-zeile { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--an-border); }
.an-zeile:last-child { border-bottom: none; }
.an-zeile-icon { font-size: 22px; }
.an-zeile-text { flex: 1; min-width: 0; }

/* ── Chargen-Kiosk: Leiste über der Erfassung (feste Farben, liegt außerhalb .an-root) ── */
.an-kiosk-leiste {
  display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; margin: 0 0 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px;
}
.an-kiosk-leiste > button { flex: none; white-space: nowrap; }
.an-kiosk-melden {
  min-height: 52px; padding: 10px 18px; border-radius: 14px; border: none; cursor: pointer;
  background: #dc2626; color: #fff; font-size: 17px; font-weight: 750; box-shadow: 0 4px 14px rgba(220,38,38,.25);
}
.an-kiosk-melden:active { transform: scale(.98); }
.an-kiosk-chip {
  min-height: 52px; padding: 8px 14px; border-radius: 14px; cursor: pointer; text-align: left;
  background: #fffbeb; border: 1.5px solid #fcd34d; color: #92400e; font-size: 14.5px; font-weight: 600;
}
.an-kiosk-chip.an-steht { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.an-kiosk-chip.an-geplant { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.an-kiosk-chip.an-aufgabe { background: #4f46e5; border-color: #4f46e5; color: #fff; font-weight: 750; }

/* ── Toast ── */
.an-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 10100;
  background: #1e293b; color: #fff; padding: 14px 20px; border-radius: 14px; font-size: 15px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: calc(100vw - 32px);
}
.an-toast.an-toast-fehler { background: #991b1b; }
.an-toast.an-toast-ok { background: #166534; }
.an-lade { padding: 40px; text-align: center; color: var(--an-muted); }

/* ── Einstellungen ── */
.an-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.an-tabelle th { text-align: left; font-size: 12px; color: var(--an-muted); font-weight: 650; padding: 8px; border-bottom: 2px solid var(--an-border); }
.an-tabelle td { padding: 8px; border-bottom: 1px solid var(--an-border); vertical-align: middle; }
.an-tabelle input[type="text"], .an-tabelle select { width: 100%; padding: 8px 10px; border: 1.5px solid var(--an-border); border-radius: 8px; font-size: 14px; font-family: inherit; }
.an-tabelle .an-schmal { width: 70px; }
.an-mitglieder { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.an-mitglied { display: inline-flex; align-items: center; gap: 6px; background: var(--an-primary-light); color: var(--an-primary-dark); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 13.5px; font-weight: 600; }
.an-mitglied button { border: none; background: rgba(79,70,229,.15); color: inherit; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; }

@media (max-width: 600px) {
  /* minmax(0,…): lange einzeilige Texte dürfen die Spalte nicht über den Rand drücken */
  .an-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .an-kachel { min-height: 130px; padding: 10px; min-width: 0; }
  .an-kachel-status { font-size: 12.5px; }
  .an-kachel-zeile { font-size: 12px; }
  .an-kachel-werte { font-size: 11px; }
  .an-kachel-werte b { font-size: 14px; }
  .an-kachel-name { font-size: 17px; }
  .an-kachel-werte { gap: 8px; }
  .an-root .an-detail-titel { font-size: 23px; }
  .an-vorgang { flex-wrap: wrap; }
  .an-vorgang-aktion { width: 100%; }
  .an-vorgang-aktion .an-btn { width: 100%; }
}

/* Varianten eines Ablaufs (maschinenspezifische Schritte) */
.an-varianten { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.an-variante-wahl {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 8px 12px; border-radius: 12px;
  border: 1.5px solid var(--an-border); background: #fff; cursor: pointer; max-width: 280px; font-size: 14px; color: var(--an-ink);
}
.an-variante-wahl small { color: var(--an-muted); font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 250px; }
.an-variante-wahl.an-aktiv { border-color: var(--an-primary); background: var(--an-primary-light); }
.an-variante-wahl.an-aus { opacity: .6; }
.an-variante-edit { margin-top: 10px; padding: 12px; border-radius: 12px; border: 1.5px dashed var(--an-primary); background: var(--an-primary-light); }
/* Häkchen in einer Formularzeile: nebeneinander, unten bündig zu den Feldern */
.an-formular > label.an-check-klein { flex: 0 0 auto; flex-direction: row; align-items: center; align-self: flex-end; min-height: 44px; color: var(--an-ink); font-weight: 500; font-size: 14px; }

/* Melde-Dialog: Pflichtfeld */
.an-pflicht { color: var(--an-rot); font-weight: 700; }
.an-schritt-edit-felder > label.an-check-klein { flex: 0 0 auto; flex-direction: row; align-items: center; align-self: flex-end; min-height: 44px; color: var(--an-ink); font-weight: 500; font-size: 14px; }
.an-md-tabelle td { vertical-align: middle; }
.an-md-tabelle .an-chips { flex-wrap: wrap; }

/* ── Handy (/anlagen): Kopf einzeilig, Reiter als gleich breite Tab-Leiste ── */
.an-nur-schmal { display: none; }
.an-kopf-text p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Testhinweis auf der Seite mit Rand wie der Inhalt (in der SPA eigener Rand) */
body.an-seite .an-testbanner { margin-left: max(16px, calc(50% - 640px)); margin-right: max(16px, calc(50% - 640px)); }
@media (max-width: 600px) {
  .an-kopf { padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); }
  .an-kopf-innen { gap: 8px; }
  .an-kopf-logo { height: 20px; }
  .an-kopf-text h1 { font-size: 17px; }
  .an-kopf-text p { font-size: 12px; }
  .an-kopf-knopf { min-height: 38px; min-width: 38px; padding: 6px 10px; }
  .an-nur-breit { display: none; }
  .an-nur-schmal { display: inline; }
  .an-reiter { padding: 8px 12px 0; gap: 4px; }
  .an-reiter a {
    flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 2px;
    padding: 8px 4px; min-height: 58px; font-size: 12.5px; position: relative;
  }
  .an-reiter-icon { font-size: 20px; line-height: 1; }
  .an-reiter-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .an-reiter .an-zahl { position: absolute; top: 4px; right: calc(50% - 26px); font-size: 11px; padding: 0 6px; min-width: 18px; }
  .an-inhalt { padding: 12px; }
  body.an-seite .an-testbanner { margin: 8px 12px 0; font-size: 13px; padding: 8px 12px; }
  .an-root .an-leiste .an-schalter { padding: 8px 12px; font-size: 14px; }
}
@media (max-width: 600px) {
  .an-kachel-werte { gap: 6px; }
  .an-kachel-werte > * { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Unterreiter der Einstellungen: eine wischbare Zeile statt vier */
  .an-unterreiter { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; scrollbar-width: none; }
  .an-unterreiter::-webkit-scrollbar { display: none; }
  .an-unterreiter a { flex: 0 0 auto; padding: 8px 12px; font-size: 13.5px; }
  .an-hauptschalter { padding: 12px; }
  /* Melde-Dialog-Editor: Feld, Auswahl und Ergebnis untereinander */
  .an-md-tabelle, .an-md-tabelle tbody, .an-md-tabelle tr, .an-md-tabelle td { display: block; width: 100%; }
  .an-md-tabelle tr { padding: 8px 0; border-bottom: 1px solid var(--an-border); }
  .an-md-tabelle td { border: 0; padding: 2px 0; }
  .an-md-tabelle .an-chips button { padding: 6px 10px; font-size: 13px; min-height: 36px; }
}
@media (max-width: 600px) {
  .an-kachel-werte b { font-size: 13.5px; }
  .an-hauptschalter code { white-space: nowrap; }
}

/* Fälligkeiten (Aufgaben → 📈): Fortschritt je Auslöser und Anlage */
.an-faellig { padding: 14px 16px; }
.an-faellig-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.an-faellig-anlage { font-size: 18px; font-weight: 750; color: var(--an-ink); text-decoration: none; }
.an-faellig-wann { margin-left: auto; font-size: 13.5px; font-weight: 650; color: var(--an-muted); }
.an-faellig-wann.an-fs-rot { color: var(--an-rot); }
.an-faellig-faellig { border-left: 6px solid var(--an-rot); }
.an-faellig-wartet { border-left: 6px solid var(--an-blau); }
.an-fortschritt { height: 12px; border-radius: 999px; background: var(--an-bg); overflow: hidden; margin-bottom: 6px; }
.an-fortschritt span { display: block; height: 100%; border-radius: 999px; background: var(--an-gruen); transition: width .3s; }
.an-fortschritt.an-fs-orange span { background: var(--an-orange); }
.an-fortschritt.an-fs-rot span { background: var(--an-rot); }
.an-fortschritt.an-fs-blau span { background: var(--an-blau); }
.an-faellig-aktionen { margin-top: 10px; gap: 8px; }
@media (max-width: 600px) {
  .an-faellig-wann { margin-left: 0; width: 100%; }
  .an-faellig-aktionen .an-btn { flex: 1 1 auto; }
}
/* kompakter: viele Anlagen untereinander */
.an-faellig { padding: 10px 14px; margin-bottom: 0; }
.an-liste > .an-faellig + .an-faellig { margin-top: 0; }
.an-faellig .an-faellig-kopf { margin-bottom: 6px; }
.an-faellig-aktionen { margin-top: 8px; flex-wrap: wrap; }
.an-faellig-aktionen .an-btn { min-height: 36px; padding: 6px 12px; font-size: 13.5px; }

/* Fortschrittsbalken mit Prozentzahl (AN.fortschrittBalken) */
.an-fs-zeile { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; }
.an-fs-zeile .an-fortschritt { flex: 1; margin: 0; height: 14px; position: relative;
  background: repeating-linear-gradient(90deg, var(--an-bg) 0, var(--an-bg) calc(10% - 1px), #e2e8f0 calc(10% - 1px), #e2e8f0 10%); }
.an-fs-prozent { min-width: 52px; text-align: right; font-size: 14px; font-weight: 750; white-space: nowrap; }
.an-fs-prozent.an-fs-gruen { color: var(--an-gruen); }
.an-fs-prozent.an-fs-orange { color: var(--an-orange); }
.an-fs-prozent.an-fs-rot { color: var(--an-rot); }
.an-fs-prozent.an-fs-blau { color: var(--an-blau); }
.an-fs-ueber { position: absolute; right: 0; top: 0; bottom: 0; width: 4px; background: #7f1d1d; }
.an-fs-klein { gap: 6px; margin: 2px 0 0; }
.an-fs-klein .an-fortschritt { height: 8px; }
.an-fs-klein .an-fs-prozent { min-width: 38px; font-size: 12px; }
.an-kachel-zaehler { margin-top: 2px; }
.an-zeile-fs .an-zeile-text { flex: 1; min-width: 0; }
.an-zeile-fs .an-faellig-wann { margin-left: 6px; font-size: 12.5px; }
.an-h3-link { float: right; font-size: 13px; font-weight: 600; color: var(--an-primary); text-decoration: none; }

/* Auslöser-Dialog: Abweichungen je Anlage */
.an-abw-zeile { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--an-border); flex-wrap: wrap; }
.an-abw-zeile b { min-width: 110px; }
.an-abw-zeile .an-feld { max-width: 150px; min-height: 38px; padding: 6px 10px; }

/* Übersicht: OEE-Farbe, Sortierauswahl, Gruppenköpfe (Schichtplan-Gruppen) */
.an-kachel-werte b.an-oee-gut { color: var(--an-gruen); }
.an-kachel-werte b.an-oee-mittel { color: var(--an-gelb); }
.an-kachel-werte b.an-oee-schlecht { color: var(--an-rot); }
.an-segment { display: inline-flex; border: 1.5px solid var(--an-border); border-radius: 999px; overflow: hidden; background: #fff; }
.an-segment button { border: 0; background: transparent; padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--an-muted); cursor: pointer; min-height: 40px; white-space: nowrap; }
.an-segment button + button { border-left: 1px solid var(--an-border); }
.an-segment button.an-aktiv { background: var(--an-primary-light); color: var(--an-primary-dark); }
.an-gruppen { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.an-gruppe {
  background: rgba(255,255,255,.55); border: 1.5px solid var(--an-border); border-radius: 16px; padding: 8px 10px 10px;
  flex: 0 1 auto; max-width: 100%;
}
.an-gruppe-rot { border-color: #fca5a5; } .an-gruppe-blau { border-color: #93c5fd; } .an-gruppe-gelb { border-color: #fcd34d; }
.an-gruppe-kopf { display: flex; align-items: center; gap: 8px; padding: 2px 4px 8px; font-size: 16px; }
.an-gruppe-kacheln { display: grid; grid-template-columns: repeat(var(--an-spalten, 1), 230px); gap: 10px; }
@media (max-width: 600px) {
  .an-gruppe { flex: 1 1 100%; }
  .an-gruppe-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-segment { width: 100%; }
  .an-segment button { flex: 1 1 0; padding: 8px 6px; font-size: 12.5px; }
}
.an-kachel-werte b { white-space: nowrap; }

/* Feld-Editor (Startfenster, Eingaben je Schritt) */
.an-ein-editor { display: flex; flex-direction: column; gap: 6px; }
.an-ein-zeile { background: #fff; border: 1px solid var(--an-border); border-radius: 10px; padding: 8px; }
.an-ein-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.an-ein-kopf .an-feld { min-height: 38px; padding: 6px 10px; }
.an-ein-kopf input[data-ein="text"] { flex: 2 1 200px; }
.an-ein-kopf select { flex: 1 1 150px; max-width: 260px; }
.an-ein-kopf .an-btn { min-height: 36px; padding: 4px 10px; }
.an-ein-zeile textarea { margin-top: 6px; }
/* Eingaben im Vorgang: groß und gut lesbar */
.an-eingaben { border-left: 6px solid var(--an-primary); }
.an-eingaben-liste { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 6px 0 0; font-size: 17px; }
.an-eingaben-liste dt { color: var(--an-muted); font-weight: 600; }
.an-eingaben-liste dd { margin: 0; font-weight: 750; }
@media (max-width: 600px) { .an-eingaben-liste { grid-template-columns: 1fr; gap: 0 0; } .an-eingaben-liste dd { margin-bottom: 8px; } }
.an-ein-editor > .an-btn { align-self: flex-start; width: auto; }

/* Start-Eingaben auf der Vorgangs-Karte + Platzhalter-Knöpfe im Editor */
.an-vorgang-eingaben { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; padding: 6px 10px; border-radius: 10px;
  background: var(--an-primary-light); color: var(--an-primary-dark); font-size: 14.5px; }
.an-vorgang-eingaben b { font-weight: 600; }
/* Eingebettet in /wawe (Register Aufgaben) + Ort ohne Sprungziel */
.an-root.an-eingebettet .an-inhalt { padding: 0; }
.an-root.an-eingebettet .an-testbanner { margin: 0 0 10px; }
.an-btn.an-btn-still { cursor: default; background: transparent; border-color: transparent; font-weight: 700; }
/* Verpackung nachbestellen: mehrere Sorten mit Lagerstand/Bestellmenge */
.an-vp-gruppen button { position: relative; }
.an-vp-zahl { position: absolute; top: 6px; right: 8px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--an-primaer, #4f46e5); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.an-vp-sorten button.an-vp-fremd { opacity: .45; cursor: not-allowed; }
.an-vp-positionen { display: grid; gap: 8px; }
.an-vp-pos { display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px auto; gap: 8px; align-items: end; padding: 8px 10px; border: 1px solid var(--an-border, #e2e8f0); border-radius: 10px; background: #fff; }
.an-vp-name { display: flex; flex-direction: column; align-self: center; min-width: 0; }
.an-vp-name small { color: #64748b; font-size: 12px; }
.an-vp-pos label { display: flex; flex-direction: column; font-size: 12px; color: #64748b; gap: 2px; }
.an-vp-pos .an-feld { min-height: 40px; padding: 6px 8px; text-align: center; font-weight: 700; }
.an-vp-pos .an-btn { width: auto; min-height: 40px; }
@media (max-width: 480px) { .an-vp-pos { grid-template-columns: 1fr 1fr auto; } .an-vp-name { grid-column: 1 / -1; } }
/* Team-Rechte (Einstellungen → Teams) */
.an-team-rechte td { border-top: none; padding-top: 0; padding-bottom: 14px; }
.an-team-rechte .an-chips button { font-size: 13px; min-height: 32px; padding: 4px 10px; }
/* KI-Assistent im Ablauf-Editor */
.an-btn.an-btn-ki { width: auto; background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: #fff; border-color: transparent; }
.an-btn.an-btn-ki.an-btn-voll { width: 100%; }
.an-ki-hinweis { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: #f5f3ff; border: 1px solid #c4b5fd; color: #4c1d95; font-size: 14px; }
/* Weiterleiten je Antwort (Auswahlfeld → Team) */
.an-wegweiser { display: grid; gap: 6px; margin-top: 8px; padding: 8px; border-radius: 8px; background: #f5f3ff; }
.an-wegweiser label { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; font-size: 14px; }
.an-wegweiser label span { overflow-wrap: anywhere; }
.an-wegweiser .an-feld { min-height: 36px; padding: 4px 8px; }
@media (max-width: 560px) { .an-wegweiser label { grid-template-columns: 1fr; gap: 2px; } .an-wegweiser label b { display: none; } }
.an-platzhalter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.an-platzhalter .an-btn { min-height: 32px; padding: 4px 10px; font-size: 13px; width: auto; }
/* ---------- Team-Chat (💬 Chat, js/anlagen/anlagen-chat.js) ---------- */
.an-chat { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; align-items: start; }
.an-chat-kanaele { display: flex; flex-direction: column; gap: 4px; background: var(--an-surface); border-radius: var(--an-radius); padding: 8px; box-shadow: 0 4px 24px rgba(79,70,229,.08); position: sticky; top: 8px; }
.an-chat-kanal { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 10px; color: var(--an-ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.an-chat-kanal:hover { background: var(--an-bg); }
.an-chat-kanal.an-aktiv { background: var(--an-primary-light); color: var(--an-primary-dark); }
.an-chat-kanal-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-chat-kanal .an-zahl { background: var(--an-rot); color: #fff; border-radius: 999px; font-size: 12px; padding: 1px 8px; }
.an-chat-slack { font-size: 10px; font-weight: 800; color: var(--an-lila); border: 1px solid currentColor; border-radius: 4px; padding: 0 3px; }
/* Zugriff je Kanal + Direktnachrichten (23.10.2026) */
.an-chat-schloss { font-size: 12px; opacity: .75; }
.an-chat-kanaele-titel { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; padding: 6px 12px 2px; border-top: 1px solid var(--an-border); font-size: 12px; font-weight: 700; color: var(--an-muted); text-transform: uppercase; letter-spacing: .03em; }
:where(.an-chat-kanaele-titel) .an-chat-dm-neu { width: 26px; height: 26px; min-height: 0; padding: 0; border: 1px solid var(--an-border); border-radius: 8px; background: #fff; color: var(--an-primary); font-size: 16px; line-height: 1; cursor: pointer; }
.an-chat-dm-neu:hover { border-color: var(--an-primary); }
.an-chat-nurlesen { padding: 12px 16px; border-top: 1px solid var(--an-border); color: var(--an-muted); font-size: 14px; background: var(--an-bg); border-radius: 0 0 var(--an-radius) var(--an-radius); }
.an-chat-zugriff { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.an-chat-zugriff-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 170px 36px; gap: 6px; align-items: center; padding: 6px 8px; border: 1px solid var(--an-border); border-radius: 10px; }
.an-chat-zugriff-neu { display: grid; grid-template-columns: minmax(0, 1fr) 170px auto; gap: 6px; align-items: center; }
.an-chat-zugriff .an-feld, .an-chat-zugriff-neu .an-feld { min-height: 36px; padding: 4px 8px; font-size: 14px; }
@media (max-width: 560px) {
  .an-chat-zugriff-zeile { grid-template-columns: minmax(0, 1fr) 36px; }
  .an-chat-zugriff-zeile select { grid-column: 1; }
  .an-chat-zugriff-neu { grid-template-columns: 1fr; }
}
.an-chat-haupt { background: var(--an-surface); border-radius: var(--an-radius); box-shadow: 0 4px 24px rgba(79,70,229,.08); display: flex; flex-direction: column; min-height: 420px; }
.an-chat-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--an-border); font-size: 16px; }
.an-chat-verlauf { flex: 1; overflow-y: auto; padding: 8px 16px 12px; max-height: calc(100vh - 330px); min-height: 260px; }
.an-chat-leer { text-align: center; padding: 40px 16px; color: var(--an-muted); }
.an-chat-leer .an-zustand-icon { font-size: 36px; }
.an-chat-tag-trenner { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; color: var(--an-muted); font-size: 12px; font-weight: 700; }
.an-chat-tag-trenner::before, .an-chat-tag-trenner::after { content: ''; flex: 1; height: 1px; background: var(--an-border); }
.an-chat-gruppe { padding: 4px 0; }
.an-chat-msg { display: flex; gap: 10px; padding: 6px 6px; border-radius: 10px; position: relative; }
.an-chat-msg:hover { background: #f8fafc; }
.an-chat-msg-system { background: #f8fafc; border-left: 3px solid var(--an-gelb); }
.an-chat-msg-ki .an-chat-body { background: var(--an-lila-bg); border-radius: 10px; padding: 6px 10px; }
.an-chat-avatar { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.an-chat-avatar-ki { background: linear-gradient(135deg, #4f46e5, #7c3aed); font-size: 16px; }
.an-chat-avatar-system { background: #fde68a; font-size: 16px; }
.an-chat-body { flex: 1; min-width: 0; }
.an-chat-kopfzeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 14px; }
.an-chat-autor { font-weight: 700; }
.an-chat-ki { color: var(--an-lila); }
.an-chat-zeit, .an-chat-leise { color: var(--an-muted); font-size: 12px; }
.an-chat-tag { font-size: 11px; font-weight: 700; color: var(--an-lila); background: var(--an-lila-bg); border-radius: 4px; padding: 0 5px; }
.an-chat-text { font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; margin-top: 2px; }
.an-chat-text a { color: var(--an-primary); }
.an-chat-md p { margin: 4px 0; }
.an-chat-md table { border-collapse: collapse; font-size: 13.5px; margin: 6px 0; display: block; overflow-x: auto; }
.an-chat-md th, .an-chat-md td { border: 1px solid var(--an-border); padding: 4px 8px; text-align: left; white-space: nowrap; }
.an-chat-md th { background: #f8fafc; font-weight: 700; }
.an-chat-md ul, .an-chat-md ol { margin: 4px 0; padding-left: 20px; }
.an-chat-md pre { background: #0f172a; color: #e2e8f0; padding: 8px 10px; border-radius: 8px; overflow-x: auto; font-size: 13px; }
.an-chat-md canvas { max-width: 100%; }
.an-chat-at { color: var(--an-primary-dark); }
.an-chat-st { display: inline-flex; align-items: baseline; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.an-chat-st small { font-weight: 600; opacity: .85; }
.an-chat-aktionen { margin-left: auto; display: none; gap: 2px; }
.an-chat-msg:hover .an-chat-aktionen, .an-chat-msg:focus-within .an-chat-aktionen { display: inline-flex; }
.an-chat-aktionen button { width: 30px; height: 28px; border-radius: 6px; cursor: pointer; color: var(--an-muted); font-size: 14px; }
.an-chat-aktionen button:hover { background: var(--an-border); color: var(--an-ink); }
.an-chat-fehler { color: var(--an-rot); font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: underline; }
.an-chat-anhaenge { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.an-chat-anhang { border: 1px solid var(--an-border); background: #fff; border-radius: 8px; padding: 4px 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.an-chat-anhang:hover { border-color: var(--an-primary); }
.an-chat-denkt { display: flex; align-items: center; gap: 4px; color: var(--an-lila); font-size: 14px; padding: 4px 0; }
.an-chat-denkt span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: an-chat-punkt 1.2s infinite ease-in-out; }
.an-chat-denkt span:nth-child(2) { animation-delay: .15s; }
.an-chat-denkt span:nth-child(3) { animation-delay: .3s; margin-right: 4px; }
@keyframes an-chat-punkt { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .an-chat-denkt span { animation: none; } }
.an-chat-geloescht { opacity: .6; }
.an-chat-thread { margin-left: 44px; }
.an-chat-thread-knopf { color: var(--an-primary); font-weight: 700; font-size: 13px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.an-chat-thread-knopf:hover { background: var(--an-primary-light); }
.an-chat-antworten { border-left: 2px solid var(--an-border); padding-left: 8px; margin-top: 4px; }
.an-chat-antworten .an-chat-avatar { flex-basis: 28px; width: 28px; height: 28px; font-size: 11px; }
.an-chat-eingabe { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--an-border); }
.an-chat-eingabe textarea { flex: 1; min-height: 44px; max-height: 180px; resize: vertical; padding: 10px 12px; font-size: 15px; line-height: 1.4; }
.an-chat-eingabe-thread { border-top: none; padding: 6px 0 4px; }
.an-chat-eingabe-knoepfe { display: flex; gap: 6px; }
.an-btn.an-chat-klein { min-height: 42px; padding: 8px 12px; font-size: 14px; width: auto; }
.an-chat-auswahl { display: grid; gap: 6px; margin-top: 10px; max-height: 60vh; overflow-y: auto; }
.an-chat-auswahl-zeile { text-align: left; border: 1px solid var(--an-border); border-radius: 10px; padding: 10px 12px; background: #fff; cursor: pointer; font-size: 14px; }
.an-chat-auswahl-zeile:hover { border-color: var(--an-primary); }
.an-chat-kanaltab .an-feld { min-height: 38px; padding: 6px 8px; font-size: 14px; }
.an-chat-kanaltab td { padding: 4px; vertical-align: middle; }
@media (max-width: 760px) {
  .an-chat { grid-template-columns: 1fr; gap: 8px; }
  .an-chat-kanaele { flex-direction: row; overflow-x: auto; position: static; padding: 6px; }
  .an-chat-kanal { flex: 0 0 auto; padding: 8px 12px; }
  .an-chat-verlauf { max-height: calc(100vh - 300px); padding: 6px 10px 10px; }
  .an-chat-thread { margin-left: 12px; }
  .an-chat-aktionen { display: inline-flex; }
  .an-chat-eingabe { flex-wrap: wrap; }
  .an-chat-eingabe textarea { flex-basis: 100%; }
  .an-chat-eingabe-knoepfe { margin-left: auto; }
  .an-chat-kanaltab thead { display: none; }
  .an-chat-kanaltab tr { display: grid; grid-template-columns: 56px 1fr; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--an-border); }
  .an-chat-kanaltab td { padding: 0; }
}
/* Team-Chat: Fotos und @-Erwähnungen */
.an-chat-fotos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.an-chat-foto { display: block; width: 160px; height: 120px; border-radius: 10px; overflow: hidden; background: var(--an-grau-bg); border: 1px solid var(--an-border); }
.an-chat-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.an-chat-vorschau { display: flex; gap: 6px; flex-basis: 100%; margin-bottom: 2px; }
.an-chat-vorschau span { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--an-border); }
.an-chat-vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.an-chat-vorschau button { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; background: rgba(15,23,42,.75); color: #fff; font-size: 14px; line-height: 22px; cursor: pointer; }
.an-chat-eingabe { position: relative; flex-wrap: wrap; }
.an-chat-eingabe textarea { flex: 1 1 260px; }
.an-chat-at-ich { background: #fef3c7; color: #92400e; border-radius: 4px; padding: 0 3px; }
.an-chat-msg-ich { background: #fffbeb; box-shadow: inset 3px 0 0 #f59e0b; }
.an-chat-popup { position: absolute; left: 12px; bottom: calc(100% - 4px); z-index: 20; min-width: 240px; max-width: calc(100% - 24px); max-height: 260px; overflow-y: auto;
  background: #fff; border: 1px solid var(--an-border); border-radius: 12px; box-shadow: 0 10px 30px rgba(15,23,42,.15); padding: 4px; }
.an-chat-popup-zeile { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14.5px; }
.an-chat-popup-zeile small { color: var(--an-muted); }
.an-chat-popup-zeile.an-aktiv, .an-chat-popup-zeile:hover { background: var(--an-primary-light); color: var(--an-primary-dark); }
.an-chat-popup-av { width: 24px; height: 24px; border-radius: 50%; background: var(--an-primary); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 760px) {
  .an-chat-foto { width: 120px; height: 90px; }
  .an-chat-popup { left: 0; right: 0; max-width: none; }
}
/* Bildansicht: Fotos groß in der App (AN.bildAnsicht, anlagen-kern.js) - über allen Dialogen */
.an-bildansicht { position: fixed; inset: 0; z-index: 10200; background: #0b1120; display: flex; flex-direction: column; color: #fff; }
.an-bild-kopf { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; min-height: 60px; }
.an-bild-titel { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-bild-zahl { font-size: 14px; color: #cbd5e1; font-variant-numeric: tabular-nums; }
.an-bildansicht .an-bild-knopf { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1; color: #fff; background: rgba(255,255,255,.12); cursor: pointer; text-decoration: none; }
.an-bildansicht .an-bild-knopf:hover { background: rgba(255,255,255,.24); }
.an-bildansicht .an-bild-zu { font-size: 32px; }
.an-bild-buehne { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 12px 16px; }
.an-bild-buehne img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.5); user-select: none; -webkit-user-drag: none; }
.an-bildansicht .an-bild-pfeil { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%;
  font-size: 40px; line-height: 1; color: #fff; background: rgba(255,255,255,.14); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.an-bildansicht .an-bild-pfeil:hover { background: rgba(255,255,255,.28); }
.an-bildansicht .an-bild-zurueck { left: 14px; }
.an-bildansicht .an-bild-weiter { right: 14px; }
[data-an-bild] { cursor: zoom-in; }
@media (max-width: 600px) {
  .an-bildansicht .an-bild-pfeil { top: auto; bottom: 18px; transform: none; width: 52px; height: 52px; }
  .an-bild-buehne { padding: 0 4px 84px; }
}

/* Melde-Dialog: abgeschaltete Antworten (Einstellungen) */
.an-chips button.an-md-aus { opacity: .6; text-decoration: line-through; border-style: dashed; }

/* ── iPhone / iOS Safari (13.10.2026) ────────────────────────────────────────
   Chrome am PC zeigt das alles nicht - nur am echten iPhone:
   - Felder unter 16 px Schrift: iOS zoomt beim Antippen hinein und bleibt gezoomt
   - 100vh = Höhe OHNE eingeblendete Safari-Leisten: Knöpfe unten im Dialog verschwinden dahinter
   - Notch / Home-Leiste (viewport-fit=cover): Abstände über env(safe-area-inset-*)
   - Doppeltipp-Zoom auf Knöpfen, grauer Tipp-Schatten */
.an-root a, .an-root button, .an-root label, .an-sheet button, .an-sheet label, .an-bildansicht button {
  touch-action: manipulation; -webkit-tap-highlight-color: rgba(79,70,229,.12);
}
.an-sheet-hg, .an-sheet { overscroll-behavior: contain; }
.an-sheet { max-height: 94vh; max-height: 94dvh; -webkit-overflow-scrolling: touch; }
/* Fußleiste klebt bis ganz unten, die Knöpfe bleiben über der Home-Leiste */
.an-sheet-fuss {
  bottom: calc(-18px - env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  margin-bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
}
.an-toast { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.an-kopf {
  padding-top: max(14px, env(safe-area-inset-top, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
body.an-seite .an-inhalt { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.an-bild-kopf { padding-top: max(10px, env(safe-area-inset-top, 0px)); }
.an-chat-verlauf { max-height: calc(100vh - 330px); max-height: calc(100dvh - 330px); }
@media (max-width: 600px) {
  .an-kopf { padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top, 0px)); }
  body.an-seite .an-inhalt { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  .an-bildansicht .an-bild-pfeil { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .an-bild-buehne { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 760px) {
  .an-chat-verlauf { max-height: calc(100vh - 300px); max-height: calc(100dvh - 300px); }
}
@supports (-webkit-touch-callout: none) {
  /* nur iOS: 16 px verhindert den Auto-Zoom (am PC bleiben die kleineren Felder) */
  .an-root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .an-root select, .an-root textarea,
  .an-sheet input:not([type="checkbox"]):not([type="radio"]), .an-sheet select, .an-sheet textarea { font-size: 16px !important; }
  /* Datum/Zeit/Auswahl: iOS-Eigenformat aus, sonst fallen die Felder flach oder schief aus */
  .an-root input[type="date"], .an-root input[type="time"], .an-root input[type="datetime-local"],
  .an-sheet input[type="date"], .an-sheet input[type="time"], .an-sheet input[type="datetime-local"] {
    -webkit-appearance: none; appearance: none; min-height: 48px; display: block; text-align: left;
  }
  .an-root select, .an-sheet select {
    -webkit-appearance: none; appearance: none; padding-right: 34px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  }
}
/* Handy: Kategorien im Melde-Dialog zweispaltig (weniger Scrollen), "Steht die Anlage?" bleibt groß untereinander */
@media (max-width: 600px) {
  .an-wahl-gross:has(> [data-m="kat"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .an-wahl-gross:has(> [data-m="kat"]) button { min-height: 84px; padding: 10px 8px; font-size: 14.5px; }
  .an-sheet { padding-left: 14px; padding-right: 14px; }
}

/* Team-Chat: Nachrichtenbereich mit "↓ Neueste" (alle Breiten) */
.an-chat-verlauf-huelle { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.an-chat-runter {
  position: absolute; right: 14px; bottom: 12px; z-index: 5; border: 0; cursor: pointer;
  background: var(--an-primary); color: #fff; font-weight: 700; font-size: 14px; border-radius: 999px; padding: 8px 14px;
  box-shadow: 0 6px 18px rgba(79,70,229,.35);
}
.an-chat-runter[hidden] { display: none; }
/* Handy: Chat wie eine Messenger-App - füllt den Bildschirm, nur die Nachrichten scrollen.
   Grauer Nachrichtenbereich + weiße Karten: man sieht sofort, was scrollt; Kanäle bleiben oben. */
@media (max-width: 760px) {
  .an-chat {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-height: 380px; min-width: 0; width: 100%;
    height: calc(100vh - var(--an-chat-oben, 220px) - 16px - env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - var(--an-chat-oben, 220px) - 16px - env(safe-area-inset-bottom, 0px));
  }
  .an-chat-kanaele { flex: none; min-width: 0; max-width: 100%; gap: 6px; padding: 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .an-chat-kanaele::-webkit-scrollbar { display: none; }
  .an-chat-kanal { scroll-snap-align: start; border: 1.5px solid var(--an-border); background: #fff; font-size: 14px; }
  .an-chat-kanaele-titel { flex: none; margin: 0; padding: 0 2px 0 8px; border-top: 0; border-left: 1px solid var(--an-border); }
  .an-chat-kanaele-titel > span { display: none; }
  .an-chat-kanal.an-aktiv { border-color: var(--an-primary); box-shadow: 0 0 0 1px var(--an-primary) inset; }
  /* nie breiter als der Bildschirm: lange Kanalbeschreibung, Slack-Pille, E-Mail-Namen (iPhone zeigte sonst rechts abgeschnitten) */
  .an-chat > * { min-width: 0; max-width: 100%; }
  .an-chat-haupt { flex: 1; min-height: 0; overflow: hidden; width: 100%; }
  .an-chat-kopf, .an-chat-verlauf-huelle, .an-chat-verlauf, .an-chat-eingabe { min-width: 0; max-width: 100%; }
  .an-chat-kopf .an-pille { flex: none; }
  .an-chat-eingabe textarea { flex: 1 1 100%; min-width: 0; }
  .an-chat-autor { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; }
  .an-chat-aktionen button { width: 26px; height: 26px; font-size: 13px; }
  .an-chat-kopf { padding: 8px 12px; font-size: 15px; }
  .an-chat-kopf > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .an-chat-verlauf {
    flex: 1; min-height: 0; max-height: none; padding: 4px 8px 10px;
    background: #e8ecf3; overscroll-behavior: contain;
    box-shadow: inset 0 7px 8px -7px rgba(15,23,42,.22), inset 0 -7px 8px -7px rgba(15,23,42,.16);
  }
  .an-chat-gruppe { background: #fff; border-radius: 12px; padding: 4px 4px; margin: 6px 0; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
  .an-chat-msg:hover { background: transparent; }
  .an-chat-msg-system { background: #fffdf5; }
  .an-chat-tag-trenner { margin: 10px 0 2px; }
  .an-chat-tag-trenner span { background: #fff; border-radius: 999px; padding: 2px 10px; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
  .an-chat-tag-trenner::before, .an-chat-tag-trenner::after { background: #cfd6e2; }
  .an-chat-leer { background: transparent; }
  .an-chat-eingabe { flex: none; background: #fff; }
}

/* Aufgaben-Kopf kompakt (15.10.2026): Ansicht | Filter | 🔔 statt vier Zeilen Schalter */
.an-akopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.an-akopf-zeile { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.an-segment a { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--an-muted);
  text-decoration: none; min-height: 40px; white-space: nowrap; }
.an-segment a + a { border-left: 1px solid var(--an-border); }
.an-segment a.an-aktiv { background: var(--an-primary-light); color: var(--an-primary-dark); }
.an-seg-zahl { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--an-bg); color: var(--an-ink);
  font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; }
.an-segment .an-aktiv .an-seg-zahl { background: #fff; color: var(--an-primary-dark); }
.an-akopf-knopf { min-height: 40px; padding: 6px 14px; width: auto; }
.an-glocke { flex: none; width: 40px; height: 40px; min-height: 0; margin-left: auto; border-radius: 50%; border: 1.5px solid var(--an-border);
  background: #fff; font-size: 18px; line-height: 1; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.an-glocke.an-an { border-color: var(--an-primary); background: var(--an-primary-light); }
.an-akopf-chips { margin: -4px 0 10px; }
.an-akopf-chips button { min-height: 34px; padding: 4px 12px; font-size: 13px; }
.an-glocke-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--an-border); }
.an-glocke-zeile small { display: block; color: var(--an-muted); font-size: 13px; margin-top: 2px; }
.an-glocke-zeile .an-schalter { flex: none; }
@media (max-width: 600px) {
  .an-akopf { gap: 6px; margin-bottom: 10px; }
  .an-akopf-ansicht { width: 100%; }
  .an-akopf-ansicht a { flex: 1 1 0; justify-content: center; padding: 6px 8px; font-size: 13px; min-height: 38px; }
  .an-akopf-zeile { width: 100%; }
  .an-akopf-filter { flex: 1 1 auto; width: auto; }
  .an-akopf-filter button { min-height: 38px; font-size: 13px; }
  .an-akopf-knopf { min-height: 38px; padding: 6px 10px; }
  .an-glocke { width: 38px; height: 38px; margin-left: 0; }
  .an-akopf-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .an-akopf-chips::-webkit-scrollbar { display: none; }
  .an-akopf-chips button { flex: none; }
}

/* ── 📊 Auswertung (20.10.2026, js/anlagen/anlagen-auswertung.js) ── */
.an-aw-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.an-aw-zeit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; flex: 1 1 auto; }
.an-aw-zeit .an-check-klein { margin: 0; }
.an-aw-datum { width: auto; min-height: 40px; padding: 6px 10px; font-size: 14px; }
.an-aw-neu { margin-left: auto; min-height: 40px; padding: 6px 12px; width: auto; }
.an-aw-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.an-aw-kpi { background: var(--an-surface); border-radius: 14px; padding: 12px 14px; box-shadow: 0 4px 18px rgba(79,70,229,.07); display: flex; flex-direction: column; gap: 2px; }
.an-aw-kpi > span { font-size: 12.5px; font-weight: 650; color: var(--an-muted); }
.an-aw-kpi > b { font-size: 24px; line-height: 1.15; color: var(--an-ink); }
.an-aw-kpi > small { font-size: 12px; color: var(--an-muted); }
.an-aw-delta { font-weight: 700; }
.an-aw-kpi .an-aw-delta { color: var(--an-muted); }
.an-aw-kpi .an-aw-gut { color: var(--an-gruen); }
.an-aw-kpi .an-aw-schlecht { color: var(--an-rot); }
.an-aw-hinweise { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.an-aw-link { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 10px;
  font-size: 14.5px; color: var(--an-ink); cursor: pointer; line-height: 1.4; }
.an-aw-link:hover, .an-aw-klick:hover { background: var(--an-primary-light); }
.an-aw-klick { cursor: pointer; }
.an-aw-klick.an-aktiv { background: var(--an-primary-light); }
.an-aw-felder > .an-btn { align-self: end; width: auto; justify-self: start; }
.an-aw-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.an-aw-raster > .an-karte { margin: 0; min-width: 0; }
@media (max-width: 1000px) { .an-aw-raster { grid-template-columns: minmax(0, 1fr); } }
.an-aw-tabelle-huelle { overflow-x: auto; }
.an-aw-rang td { vertical-align: middle; }
.an-aw-balken { position: relative; display: flex; align-items: center; gap: 6px; min-width: 90px; }
.an-aw-balken span { display: block; height: 10px; border-radius: 999px; background: var(--an-rot); opacity: .75; min-width: 4px; }
.an-aw-balken b { font-size: 13.5px; }
.an-aw-mini { float: right; font-weight: 600; }
.an-aw-mini button { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
.an-aw-matrix th, .an-aw-matrix td { text-align: center; padding: 6px 4px; font-size: 13px; }
.an-aw-matrix tbody th { text-align: left; white-space: nowrap; font-weight: 700; color: var(--an-ink); }
.an-aw-matrix thead th span { display: inline-block; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.an-aw-matrix td[style] { background: rgba(220, 38, 38, calc(.1 + var(--an-aw-h) * .65)); color: #fff; font-weight: 700; }
.an-aw-matrix td[style*="--an-aw-h:0.0"], .an-aw-matrix td[style*="--an-aw-h:0.1"], .an-aw-matrix td[style*="--an-aw-h:0.2"], .an-aw-matrix td[style*="--an-aw-h:0.3"] { color: #7f1d1d; }
.an-aw-wochen { display: flex; align-items: flex-end; gap: 4px; height: 150px; overflow-x: auto; padding-bottom: 2px; }
.an-aw-woche { flex: 1 0 22px; display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; }
.an-aw-saeule { flex: 1; width: 100%; max-width: 34px; display: flex; flex-direction: column-reverse; justify-content: flex-start; background: var(--an-bg); border-radius: 6px; overflow: hidden; }
.an-aw-saeule span { display: block; width: 100%; }
.an-aw-s-stoer { background: var(--an-rot); }
.an-aw-s-geplant { background: var(--an-blau); opacity: .55; }
.an-aw-woche b { font-size: 11.5px; min-height: 14px; }
.an-aw-woche small { font-size: 10.5px; color: var(--an-muted); }
.an-aw-legende { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 2px 0 8px; vertical-align: middle; }
.an-aw-filter { padding: 12px 14px; }
.an-aw-suchzeile { display: flex; gap: 8px; }
.an-aw-suchzeile .an-feld { flex: 1; }
.an-aw-suchzeile .an-btn { width: auto; flex: none; }
.an-aw-mehr { margin-top: 8px; }
.an-aw-mehr summary { cursor: pointer; font-weight: 650; color: var(--an-muted); font-size: 14px; padding: 4px 0; }
.an-aw-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 10px; margin-top: 6px; }
.an-aw-feld { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; font-weight: 650; color: var(--an-muted); min-width: 0; }
.an-aw-feld .an-feld { min-height: 40px; padding: 6px 10px; font-size: 14px; }
.an-aw-wfilter .an-aw-feld { min-width: 170px; }
.an-aw-trefferzeile { margin: 4px 0 8px; gap: 8px 12px; }
.an-aw-trefferzeile .an-btn { width: auto; min-height: 38px; padding: 6px 12px; }
.an-aw-liste { display: flex; flex-direction: column; gap: 6px; }
.an-aw-zeile { display: block; background: var(--an-surface); border-radius: 12px; box-shadow: 0 2px 10px rgba(15,23,42,.05); color: inherit; text-decoration: none; border-left: 4px solid var(--an-primary); }
.an-aw-zeile.an-aw-sheet { border-left-color: var(--an-grau-rand, #cbd5e1); }
a.an-aw-zeile, .an-aw-zeilenknopf { display: grid; grid-template-columns: 110px 110px minmax(0, 1fr) 170px 150px; gap: 4px 12px; align-items: center; padding: 10px 14px; }
.an-aw-zeilenknopf { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; font: inherit; color: inherit; }
a.an-aw-zeile:hover, .an-aw-zeilenknopf:hover { background: #f8fafc; border-radius: 12px; }
.an-aw-z-datum { font-size: 13px; color: var(--an-muted); white-space: nowrap; }
.an-aw-z-anlage { font-weight: 700; }
.an-aw-z-titel { min-width: 0; }
.an-aw-z-titel b { display: block; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-aw-z-titel small, .an-aw-z-wer small { display: block; font-size: 12px; color: var(--an-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-aw-z-erg { white-space: nowrap; }
.an-aw-z-wer { font-size: 13px; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-aw-details { display: none; padding: 0 14px 12px; font-size: 14px; }
.an-aw-zeile.an-offen .an-aw-details { display: block; }
.an-aw-erg { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.an-aw-erg-gruen { background: var(--an-gruen-bg); color: var(--an-gruen); }
.an-aw-erg-gelb { background: var(--an-gelb-bg); color: #92400e; }
.an-aw-erg-rot { background: var(--an-rot-bg); color: var(--an-rot); }
.an-aw-erg-blau { background: var(--an-blau-bg); color: var(--an-blau); }
.an-aw-erg-grau { background: var(--an-grau-bg); color: var(--an-grau); }
.an-aw-rot { color: var(--an-rot); }
.an-aw-wliste { display: flex; flex-direction: column; gap: 6px; }
.an-aw-wzeile { border: 1px solid var(--an-border); border-radius: 12px; background: #fff; }
.an-aw-wzeile.an-aw-ueber { border-color: var(--an-rot-rand, #fecaca); background: #fffafa; }
.an-aw-wkopf { width: 100%; display: grid; grid-template-columns: minmax(0, 1.1fr) 150px 190px minmax(0, 1.6fr) 20px; gap: 6px 12px; align-items: center;
  padding: 10px 12px; border: 0; background: transparent; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.an-aw-wkopf small { display: block; font-size: 12px; color: var(--an-muted); }
.an-aw-w-pfeil { color: var(--an-muted); text-align: right; }
.an-aw-historie { border-top: 1px solid var(--an-border); padding: 6px 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.an-aw-hzeile { padding: 6px 120px 6px 0; border-bottom: 1px dashed var(--an-border); position: relative; }
.an-aw-hzeile:last-child { border-bottom: 0; }
.an-aw-hzeile a { color: var(--an-primary-dark); text-decoration: none; }
.an-aw-messwerte { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 13.5px; }
.an-aw-messwerte span { background: var(--an-bg); border-radius: 8px; padding: 2px 8px; }
.an-aw-messwerte small { color: var(--an-muted); }
.an-aw-druck { position: absolute; right: 0; top: 4px; width: auto; min-height: 34px; padding: 4px 10px; font-size: 13px; }
@media (max-width: 760px) {
  .an-aw-kopf .an-aw-unter { width: 100%; }
  .an-aw-unter a { flex: 1 1 0; justify-content: center; padding: 6px 8px; font-size: 13px; min-height: 38px; }
  .an-aw-zeit .an-segment { width: 100%; overflow-x: auto; }
  .an-aw-zeit .an-segment button { padding: 6px 8px; font-size: 12.5px; }
  .an-aw-neu { margin-left: 0; }
  .an-aw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .an-aw-kpi { padding: 10px 12px; }
  .an-aw-kpi > b { font-size: 20px; }
  a.an-aw-zeile, .an-aw-zeilenknopf { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 12px; }
  .an-aw-z-datum { grid-column: 1; grid-row: 1; }
  .an-aw-z-erg { grid-column: 2; grid-row: 1; text-align: right; }
  .an-aw-z-anlage { grid-column: 1 / -1; grid-row: 2; }
  .an-aw-z-titel { grid-column: 1 / -1; grid-row: 3; }
  .an-aw-z-wer { grid-column: 1 / -1; grid-row: 4; text-align: left; }
  .an-aw-wkopf { grid-template-columns: minmax(0, 1fr) auto 20px; gap: 4px 8px; }
  .an-aw-w-anlage { grid-column: 1 / 3; grid-row: 1; }
  .an-aw-w-pfeil { grid-column: 3; grid-row: 1; }
  .an-aw-w-letzte { grid-column: 1; grid-row: 2; }
  .an-aw-w-erg { grid-column: 2 / 4; grid-row: 2; text-align: right; }
  .an-aw-w-naechste { grid-column: 1 / 4; grid-row: 3; }
  .an-aw-w-anlage small, .an-aw-w-letzte small { display: inline; margin-left: 6px; }
  .an-aw-rang th:nth-child(4), .an-aw-rang td:nth-child(4), .an-aw-rang th:nth-child(5), .an-aw-rang td:nth-child(5) { display: none; }
  .an-aw-rang td { white-space: nowrap; }
  .an-aw-balken { min-width: 56px; }
  .an-aw-hzeile { padding-right: 0; }
  .an-aw-druck { position: static; margin-top: 6px; }
  .an-aw-mini { float: none; display: flex; margin-top: 6px; }
}

/* Fälligkeiten: Suche + Auswahl der Kachel-Balken (20.10.2026) */
.an-fl-suche { display: flex; gap: 8px; align-items: center; margin: -2px 0 10px; }
.an-fl-suche .an-feld { flex: 1; min-height: 42px; padding: 8px 12px; }
.an-fl-suche .an-schalter { flex: none; min-height: 42px; }
.an-kw-zeile { cursor: pointer; }
.an-kw-zeile input { width: 22px; height: 22px; flex: none; }
.an-kw-liste { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 0 4px; }
.an-kw-liste .an-check-klein { margin: 4px 0; }
@media (max-width: 600px) {
  .an-fl-suche .an-schalter { padding: 8px 10px; font-size: 13px; }
}

/* Fotos per Drag & Drop / Strg+V (20.10.2026, anlagen-melden.js) */
.an-sheet.an-drop-aktiv, .an-chat-haupt.an-drop-aktiv { outline: 3px dashed var(--an-primary); outline-offset: -6px; background-color: #f5f3ff; }
.an-sheet.an-drop-aktiv .an-foto-btn, .an-chat-haupt.an-drop-aktiv .an-chat-eingabe { box-shadow: 0 0 0 3px rgba(79,70,229,.35); }
@media (pointer: fine) {
  .an-foto-btn::after { content: ' · oder Bild hierher ziehen / Strg+V'; font-weight: 500; font-size: 13px; color: var(--an-muted); }
}

/* Planen statt automatisch (23.10.2026, anlagen-faellig.js): Zahl, Planungsfenster, Wochenplan */
.an-reiter .an-planzahl, .an-seg-plan { background: var(--an-blau); color: #fff; border-radius: 999px; font-size: 12px; padding: 1px 7px; font-weight: 700; }
.an-seg-zahl.an-seg-plan { background: var(--an-blau); color: #fff; }
@media (max-width: 760px) {
  .an-reiter .an-planzahl { position: absolute; top: 4px; left: calc(50% - 30px); font-size: 10.5px; padding: 0 5px; }
}
.an-faellig-wann.an-fs-blau { color: var(--an-blau); }
.an-fl-ansicht { margin: 0 0 10px; }
.an-plan-wochen { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.an-plan-woche { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; min-height: 64px; border: 1.5px solid var(--an-border);
  border-radius: 12px; background: #fff; cursor: pointer; text-align: left; font: inherit; color: var(--an-ink); }
.an-plan-woche:hover { border-color: var(--an-primary); }
.an-plan-woche.an-gewaehlt { border-color: var(--an-primary); background: var(--an-primary-light); box-shadow: 0 0 0 2px var(--an-primary) inset; }
.an-plan-woche small { color: var(--an-muted); font-size: 12px; }
.an-plan-last { font-size: 12px; font-weight: 700; color: var(--an-gruen); }
.an-plan-last.an-plan-voll { color: var(--an-rot); }
.an-plan-tafel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.an-plan-spalte { background: var(--an-bg); border: 1.5px solid var(--an-border); border-radius: 14px; padding: 8px; min-height: 160px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 6px; }
.an-plan-spalte.an-plan-zu { background: var(--an-rot-bg); border-color: var(--an-rot-rand); }
.an-plan-spalte.an-plan-jetzt { border-color: var(--an-primary); }
.an-plan-spalte.an-plan-ueber { outline: 3px dashed var(--an-primary); outline-offset: -4px; background: var(--an-primary-light); }
.an-plan-kopf { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 6px; padding: 2px 4px 4px; }
.an-plan-kopf small { grid-column: 1 / -1; }
.an-plan-kopf b { font-size: 14px; }
.an-plan-kopf small { color: var(--an-muted); font-size: 12px; }
.an-plan-kopf .an-plan-last { color: var(--an-ink); background: #fff; border-radius: 999px; padding: 0 8px; }
.an-plan-kopf .an-plan-last.an-plan-voll { color: #fff; background: var(--an-rot); }
.an-plan-voraus { font-size: 12px; color: var(--an-muted); padding: 0 4px; cursor: help; }
.an-plan-liste { display: flex; flex-direction: column; gap: 6px; }
.an-plan-liste > .an-stand { padding: 4px; }
.an-plan-karte { background: #fff; border: 1px solid var(--an-border); border-left: 5px solid var(--an-blau); border-radius: 10px; padding: 7px 9px;
  display: flex; flex-direction: column; gap: 1px; font-size: 13px; cursor: pointer; }
.an-plan-karte[draggable="true"] { cursor: grab; }
.an-plan-karte.an-plan-dringend { border-left-color: var(--an-rot); }
.an-plan-karte.an-plan-zieht { opacity: .45; }
.an-plan-karte b { font-size: 14px; }
.an-plan-karte span { color: var(--an-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-plan-karte small { color: var(--an-muted); font-size: 12px; }
@media (max-width: 760px) {
  .an-plan-tafel { grid-auto-columns: 78%; }
}

/* Pfade: „🔀 Nur wenn …“ am Schritt (23.10.2026) */
.an-pfad { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 4px; padding: 8px 10px; border-radius: 10px;
  background: #faf5ff; border: 1px dashed #c4b5fd; font-size: 13.5px; }
.an-pfad label { display: flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; margin: 0; }
.an-pfad select { min-width: 200px; }
.an-pfad-gleich { font-weight: 700; color: var(--an-muted); }
.an-pfad .an-chips { margin: 0; }
.an-schritt-edit.an-schritt-pfad { border-left: 4px solid #8b5cf6; }
.an-schrittpunkt.an-entfaellt { opacity: .55; }
.an-schrittpunkt.an-entfaellt .an-schritt-name { text-decoration: line-through; }

/* Kiosk: Rückfrage „An welcher Anlage?“ vor dem Melden (23.10.2026) */
.an-ks-frage { max-width: 560px; }
.an-ks-frage-text { font-size: 19px; font-weight: 700; margin: 4px 0 12px; }
.an-ks-frage-klein { font-size: 16px; color: var(--an-muted); margin-top: 18px; }
.an-ks-anlage { display: block; width: 100%; min-height: 64px; border: 0; border-radius: 16px; color: #fff; font-size: 20px; font-weight: 700;
  cursor: pointer; text-shadow: 0 1px 2px rgba(0,0,0,.35); box-shadow: 0 4px 14px rgba(15,23,42,.18); }
.an-ks-anlage-gross { min-height: 92px; font-size: 26px; }
.an-ks-anlage b { font-size: 1.15em; letter-spacing: .02em; }
.an-ks-andere { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.an-ks-anlage:active { transform: scale(.98); }
.an-ks-abbrechen { width: 100%; margin-top: 18px; }

/* ── Einstellungen → 🗃️ Alle Vorgänge (anlagen-vorgaenge.js) ── */
.an-vv-filter { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(140px, 1fr)) auto auto; gap: 8px; align-items: center; margin: 12px 0; }
.an-vv-filter .an-feld { margin: 0; }
.an-vv-datum { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--an-muted); white-space: nowrap; }
.an-vv-leiste { position: sticky; top: 0; z-index: 2; background: var(--an-surface); padding: 8px 0; margin-bottom: 4px; }
.an-vv-check { width: 20px !important; height: 20px; min-width: 0 !important; margin: 0; cursor: pointer; accent-color: var(--an-rot); }
.an-vv-tabelle td { vertical-align: top; }
.an-vv-tabelle tr.an-vv-gewaehlt td { background: var(--an-rot-bg); }
.an-vv-titel b { display: block; font-weight: 650; }
.an-vv-titel small { display: block; color: var(--an-muted); margin-top: 2px; }
.an-vv-nowrap { white-space: nowrap; }
@media (max-width: 900px) {
  .an-vv-filter { grid-template-columns: 1fr 1fr; }
  .an-vv-filter [data-vv-f="suche"] { grid-column: 1 / -1; }
}

/* Anlagen-Übersicht: Suchfeld (27.10.2026) */
.an-ue-suche { max-width: 420px; margin: 0 0 10px; }
@media (max-width: 760px) { .an-ue-suche { max-width: none; } }

/* Prüfprotokoll (Feldart „protokoll“, 27.10.2026): Formular wie FM 7.1.022 */
.an-pp-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 8px; }
.an-pp-zahl { font-weight: 700; color: var(--an-primary-dark, #3730a3); }
.an-pp-abschnitt { margin: 12px 0 4px; padding: 6px 10px; border-radius: 8px; background: var(--an-primary-light, #eef2ff); font-weight: 750; }
.an-pp-zeile { display: grid; grid-template-columns: minmax(220px, 1.3fr) 1fr 1fr; gap: 6px 8px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--an-border, #e5e7eb); }
.an-pp-zeile.an-pp-erledigt .an-pp-ok b { color: var(--an-gruen, #16a34a); }
.an-pp-ok { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0; }
.an-pp-ok input { width: 26px; height: 26px; flex: none; margin: 2px 0 0; accent-color: var(--an-gruen, #16a34a); }
.an-pp-ok span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.an-pp-ok small { color: var(--an-muted); font-size: 12px; }
.an-pp-zeile .an-feld { min-height: 40px; padding: 7px 10px; font-size: 14px; }
@media (max-width: 760px) {
  .an-pp-zeile { grid-template-columns: 1fr 1fr; }
  .an-pp-ok { grid-column: 1 / -1; }
}
.an-pp-editor { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
/* Prüfprotokoll je Spur (Prüfmittelkontrolle, seit 28.10.2026) */
.an-pp-mit-spuren .an-pp-spurzeile { grid-template-columns: minmax(200px, 1.2fr) auto minmax(180px, 1.2fr); }
.an-pp-spuren { display: flex; gap: 6px; flex-wrap: wrap; }
.an-pp-spur { min-width: 52px; min-height: 48px; padding: 2px 6px; border-radius: 10px; border: 2px solid var(--an-border, #e5e7eb); background: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; color: var(--an-muted); }
.an-pp-spur small { font-size: 11px; font-weight: 600; }
.an-pp-spur b { font-size: 20px; }
.an-pp-ok small.an-pp-dummy { align-self: flex-start; margin-top: 3px; padding: 1px 8px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 13px; }
.an-pp-ok small.an-pp-dummy b { font-size: 14px; font-weight: 800; color: #78350f; letter-spacing: .02em; }
.an-pp-spur.an-pp-spur-ok { border-color: var(--an-gruen, #16a34a); background: var(--an-gruen-bg, #dcfce7); color: var(--an-gruen, #16a34a); }
.an-pp-spur.an-pp-spur-nio { border-color: var(--an-rot, #dc2626); background: var(--an-rot-bg, #fee2e2); color: var(--an-rot, #dc2626); }
.an-pp-zeile.an-pp-nio .an-pp-ok b { color: var(--an-rot, #dc2626); }
.an-pp-tabelle td.an-pp-nio-zelle { color: var(--an-rot, #dc2626) !important; background: var(--an-rot-bg, #fee2e2); }
@media (max-width: 760px) {
  .an-pp-mit-spuren .an-pp-spurzeile { grid-template-columns: 1fr; }
  .an-pp-mit-spuren .an-pp-ok, .an-pp-mit-spuren .an-pp-spuren { grid-column: 1 / -1; }
}
/* Editor: Prüfpunkte je Anlage */
.an-ja { border: 1px solid var(--an-border, #e5e7eb); border-radius: 10px; padding: 4px 10px; margin: 4px 0; background: #fff; }
.an-ja > summary { cursor: pointer; font-weight: 650; padding: 4px 0; }
.an-ja-kopf { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.an-pp-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; margin: 4px 0; }
.an-pp-tabelle th, .an-pp-tabelle td { border: 1px solid var(--an-border, #e5e7eb); padding: 4px 6px; text-align: left; vertical-align: top; }
.an-pp-tabelle thead th { background: #f8fafc; font-size: 12px; }
.an-pp-abschnitt-zeile th { background: var(--an-primary-light, #eef2ff); }
.an-pp-haken { text-align: center !important; font-weight: 800; color: var(--an-gruen, #16a34a); }

/* Prüfprotokoll „nur abhaken“ (z. B. Anlagenliste, 27.10.2026): Kästchen in Spalten */
.an-pp-zeile.an-pp-einfach { grid-template-columns: 1fr; padding: 6px 0; }
.an-pp:has(.an-pp-einfach) { --an-pp-sp: 3; }
@supports selector(:has(*)) {
  .an-pp:has(.an-pp-einfach) .an-pp-zeile { display: inline-grid; width: calc(33.3% - 8px); margin-right: 8px; border-bottom: 0; }
  @media (max-width: 760px) { .an-pp:has(.an-pp-einfach) .an-pp-zeile { width: calc(50% - 8px); } }
}

/* Auswertung: Produktion, Merkmale, Abläufe & Teams (seit 29.10.2026, js/anlagen/anlagen-analyse.js) */
.an-aw-sorttab th { padding: 0; white-space: nowrap; }
.an-aw-sort { border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--an-muted); padding: 8px 8px; cursor: pointer; width: 100%; text-align: inherit; min-height: 0; }
.an-aw-sort:hover, .an-aw-sort.an-aktiv { color: var(--an-primary-dark, #3730a3); }
.an-aw-sorttab td { vertical-align: middle; }
.an-aw-sorttab .an-aw-zahl, .an-aw-sorttab th.an-aw-zahl .an-aw-sort { text-align: right; white-space: nowrap; }
.an-aw-balken-blau span { background: var(--an-primary); opacity: .55; }
.an-aw-balken-rot span { background: var(--an-rot); opacity: .75; }
.an-aw-balken-blau > i, .an-aw-balken-rot > i { flex: 1 1 auto; min-width: 40px; display: block; font-style: normal; }
.an-aw-balken-blau b, .an-aw-balken-rot b { white-space: nowrap; }
.an-aw-gruen { color: var(--an-gruen) !important; }
.an-aw-gelb { color: #b45309 !important; }
.an-aw-rot { color: var(--an-rot) !important; }
.an-aw-wert { font-weight: 800; }
.an-aw-breit { grid-column: 1 / -1; }
.an-aw-merkmale > .an-karte { margin: 0; }
.an-aw-ort { font-weight: 500; font-size: 12.5px; margin-left: 6px; }
.an-aw-h4 { font-size: 13.5px; margin: 12px 0 6px; color: var(--an-muted); }
.an-aw-verteilung { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.an-aw-verteilung li { display: grid; grid-template-columns: minmax(90px, 38%) 1fr; gap: 10px; align-items: center; font-size: 14px; }
.an-aw-verteilung li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-aw-zahlen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.an-aw-zahlen > div { flex: 1 1 90px; background: var(--an-bg); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.an-aw-zahlen span { font-size: 12px; color: var(--an-muted); font-weight: 650; }
.an-aw-zahlen b { font-size: 20px; }
.an-aw-spark-huelle { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 6px; }
.an-aw-spark { width: 100%; height: 48px; }
.an-aw-spark polyline { fill: none; stroke: var(--an-primary); stroke-width: 2; vector-effect: non-scaling-stroke; }
.an-aw-texte { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.an-aw-dummy { display: inline-block; padding: 0 7px; border-radius: 999px; background: #fef3c7; color: #78350f; font-weight: 800; font-size: 12.5px; }
.an-aw-matrix-blau td[style] { background: rgba(79, 70, 229, calc(.08 + var(--an-aw-h) * .6)); color: #fff; }
.an-aw-matrix-blau td[style*="--an-aw-h:0.0"], .an-aw-matrix-blau td[style*="--an-aw-h:0.1"], .an-aw-matrix-blau td[style*="--an-aw-h:0.2"], .an-aw-matrix-blau td[style*="--an-aw-h:0.3"] { color: #312e81; }
.an-aw-artikel { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 10px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--an-border); }
.an-aw-artikel small { display: block; }
.an-aw-schichten { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.an-aw-schichten > div { display: grid; grid-template-columns: 80px 1fr; gap: 10px; align-items: center; font-size: 14px; font-weight: 650; }
.an-aw-muster { display: grid; grid-template-columns: 26px repeat(24, minmax(0, 1fr)); gap: 2px; font-size: 11px; }
.an-aw-muster em { font-style: normal; color: var(--an-muted); }
.an-aw-muster b { font-size: 11.5px; color: var(--an-muted); align-self: center; }
.an-aw-muster i { display: block; aspect-ratio: 1; min-height: 12px; border-radius: 3px; background: var(--an-bg); }
.an-aw-muster i[style] { background: rgba(220, 38, 38, calc(.15 + var(--an-aw-h) * .8)); }
.an-aw-schritte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.an-aw-schritt-kopf { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.an-aw-stapel { display: flex; height: 14px; background: var(--an-bg); border-radius: 999px; overflow: hidden; margin: 4px 0 2px; }
.an-aw-stapel span { display: block; height: 100%; }
.an-aw-st-liege { background: #f59e0b; }
.an-aw-st-bearb { background: var(--an-primary); opacity: .7; }
@media (max-width: 760px) { .an-aw-artikel { grid-template-columns: 1fr; } .an-aw-verteilung li { grid-template-columns: 1fr; gap: 2px; } }
/* Alle Vorgänge: sortierbare Spalten */
.an-vv-tabelle th .an-aw-sort { padding: 6px 4px; white-space: nowrap; }
.an-vv-tabelle td:nth-child(2) { white-space: nowrap; }

/* Betrieb → Störungen = Auswertung (seit 29.10.2026) */
.an-reiter.an-sto-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0 10px; border: 0; background: transparent; box-shadow: none; }
.an-sto-kopf h2 { margin: 0; font-size: 20px; }
.an-sto-kopf .an-spacer { flex: 1 1 auto; }
.an-sto-kopf .an-btn { width: auto; min-height: 38px; padding: 6px 12px; font-size: 14px; }

/* 📦 Wartungspaket bestellen (seit 03.11.2026): Fälligkeiten + Einstellungen → Wartungspakete */
.an-wp-rot { color: var(--an-rot); }
.an-wp-huelle { overflow-x: auto; max-height: 55vh; overflow-y: auto; border: 1px solid var(--an-border); border-radius: 10px; }
.an-wp-huelle .an-tabelle th { position: sticky; top: 0; background: #fff; z-index: 1; }
.an-wp-tabelle td { font-size: 13px; vertical-align: top; }
.an-wp-tabelle .an-wp-menge { width: 64px; text-align: right; white-space: nowrap; font-weight: 600; }
.an-wp-edit td { padding: 4px; }
.an-wp-edit input[type="text"] { min-width: 90px; padding: 6px 8px; }
.an-wp-edit .an-wp-menge input { width: 56px; min-width: 0; text-align: right; }
.an-wp-edit .an-btn { width: auto; min-height: 34px; padding: 4px 10px; }
.an-wp-ausl { display: flex; flex-direction: column; gap: 6px; }
.an-wp-unsicher td { background: var(--an-gelb-bg); }
.an-wp-fehlt td { background: var(--an-rot-bg); }
.an-faellig-aktionen [data-fa="wartungspaket"] { white-space: nowrap; }
/* ✅ Paket ist da: Schild an Kachel/Anlage/Vorgang, Knopf und „zurücknehmen“ in den Fälligkeiten */
.an-wp-gruen { color: var(--an-gruen); font-weight: 600; }
.an-faellig-aktionen .an-wp-da { border-color: var(--an-gruen); color: var(--an-gruen); }
.an-wp-zurueck { all: unset; cursor: pointer; margin-left: 6px; font-size: 12px; color: var(--an-muted); text-decoration: underline; }
.an-wp-zurueck:hover { color: var(--an-text, #111827); }
.an-wp-schild { white-space: nowrap; }
.an-wp-vorgang.an-wp-bereit { color: var(--an-gruen); font-weight: 600; }
.an-wp-vorgang.an-wp-bestellt { color: var(--an-blau); }

/* Lager im Griff: Ersatzteile im Fenster „Erledigen“ und am Vorgang (js/anlagen/anlagen-lig.js) */
.an-lig-suche { display: flex; gap: 8px; }
.an-lig-suche .an-feld { flex: 1 1 auto; min-width: 0; }
.an-lig-suche .an-btn { flex: 0 0 48px; width: 48px; padding-left: 0; padding-right: 0; }
.an-lig-liste { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; margin-top: 6px; padding: 0 6px 6px; border: 1px solid var(--an-grau-rand); border-radius: 10px; }
.an-lig-treffer { display: block; width: 100%; text-align: left; padding: 10px 12px; margin-top: 6px; background: #fff; color: var(--an-text, #111827); border: 1px solid var(--an-grau-rand); border-radius: 8px; cursor: pointer; font: inherit; }
.an-lig-treffer:hover:not(:disabled) { border-color: var(--an-blau); }
.an-lig-treffer:disabled { opacity: .6; cursor: not-allowed; }
.an-lig-bestand { display: block; font-size: 13px; color: var(--an-muted); margin-top: 2px; }
.an-lig-teil { padding: 10px 0; border-bottom: 1px solid var(--an-grau-rand); }
.an-lig-teil-name { overflow-wrap: anywhere; }
.an-lig-teil-felder { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.an-lig-teil-felder select.an-feld { flex: 1 1 200px; min-width: 0; width: auto; }
.an-lig-teil-felder .an-btn { width: auto; }
.an-lig-menge.an-feld { width: 90px; flex: 0 0 90px; }
.an-lig-warnung { margin: 6px 0 0; font-size: 13px; color: var(--an-orange); }
.an-lig-zeile { padding: 10px 0; border-bottom: 1px solid var(--an-grau-rand); overflow-wrap: anywhere; }
.an-lig-zeile:last-child { border-bottom: 0; }
.an-lig-fehlertext { margin-top: 4px; font-size: 13px; color: var(--an-rot); }
.an-lig-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.an-lig-knoepfe .an-btn { width: auto; }
.an-lig-filter { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 14px; }
.an-lig-filter input { width: auto; }