/*
 * PICM — ein Stylesheet (Design-Lauf, Spec § 4). Vorlage: public/css/basis.css des LMS, damit beide Welten zusammengehören.
 *
 * Gliederung: Tokens · Grundlagen · Kopfzeile · Hinweisleiste · Seitenkopf · Bauteile · Vorgangsliste · Vorgangsakte ·
 * Aufgaben · Melden · Anlagen · Anleitung · Übrige Seiten · Bruchstellen.
 * Grundlage nach Anwesenheitssystem/DESIGN.md §§ 1–3 und der LMS-Ergänzung (LMS-Spec § 4.1). Die CSP erlaubt nur dieses
 * Stylesheet: kein Inline-Stil, kein style=-Attribut (Spec § 9). Ziele am Handy mindestens 44 px, beim Melden 48 px.
 */

/* ---------- Tokens ---------- */
:root {
  --color-bg: #f0f2f5;
  --color-card-bg: #ffffff;
  --color-white: #ffffff;
  --color-text: #1f2937;
  --color-text-muted: #6b7280;
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-gray-light: #f3f4f6;
  --color-gray-border: #e5e7eb;
  --color-gray: #9ca3af;
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --radius: 0.625rem;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.15);

  /* LMS-Ergänzung (LMS-Spec § 4.1), unverändert. */
  --color-text-strong: #111827;
  --color-nav: #374151;
  --color-text-soft: #4b5563;
  --warn-strong: #d97706;
  --color-primary-soft: #eff6ff;
  --color-line-soft: #eef0f3;
  --ok: #15803d; --ok-soft: #dcfce7;
  --warn: #b45309; --warn-soft: #fef3c7;
  --bad: #b91c1c; --bad-soft: #fee2e2;
  --info: #1d4ed8; --info-soft: #dbeafe;
  --neutral: #4b5563; --neutral-soft: #f3f4f6;
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);

  /* PICM: Mindestziele und Monospace für Nummern (Spec § 4.1). */
  --ziel: 44px;
  --ziel-halle: 48px;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, 'SFMono-Regular', Menlo, monospace;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Die stehende Kopfzeile darf Fokus und Sprungziele nicht verdecken (WCAG 2.2 SC 2.4.11). */
html { scroll-padding-top: 5.5rem; }
body { margin: 0; font-family: var(--font); font-size: 1rem; color: var(--color-text); background: var(--color-bg); line-height: 1.5; overflow-wrap: anywhere; }
/* Ein Element mit hidden bleibt verborgen, auch wenn eine Regel ihm display gibt (Handoff 05.11.). */
[hidden] { display: none !important; }
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }
/* Touch: kein Doppeltipp-Zoom-Verzug, eine ruhige Rückmeldung beim Tippen. */
a, button, summary, label, input, select, textarea { touch-action: manipulation; -webkit-tap-highlight-color: rgba(37, 99, 235, 0.12); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; box-shadow: var(--focus-ring); }
h1 { font-size: 1.5rem; font-weight: 600; color: var(--color-text-strong); letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 0.75rem; text-wrap: balance; }
h2 { font-size: 1.05rem; font-weight: 600; color: var(--color-text-strong); margin: 0 0 0.6rem; }
h3 { font-size: 0.95rem; font-weight: 600; color: var(--color-text-strong); margin: 0 0 0.4rem; }
p { margin: 0 0 0.75rem; }
p:last-child { margin-bottom: 0; }
.klein { font-size: 0.85rem; color: var(--color-text-muted); }
.mono, .nummer { font-family: var(--mono); font-size: 0.85em; letter-spacing: 0; }
.springen { position: absolute; left: -999px; top: 0; }
.springen:focus { left: 1rem; top: 0.5rem; background: var(--color-white); padding: 0.5rem 0.75rem; border-radius: var(--radius); z-index: 40; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -0.2em; }
svg.i-s { width: 15px; height: 15px; }
svg.i-l { width: 20px; height: 20px; }
main { display: block; max-width: 1200px; margin: 0 auto; padding: 1.5rem 1.5rem 2.5rem; }

/* ---------- Kopfzeile (Spec § 3.1–3.4): eine Zeile, stehend ---------- */
.kopf { position: sticky; top: 0; z-index: 20; background: var(--color-white); box-shadow: 0 1px 0 var(--color-gray-border), 0 2px 3px rgba(15, 23, 42, 0.05); }
/* Testsystem: eine 4-px-Kante über der ganzen Zeile, kein Band (Spec § 3.1). */
.testsystem { height: 4px; background: var(--warn-strong); }
.kopf-inhalt { display: flex; align-items: center; gap: 1.25rem; min-height: 3.75rem; padding: 0 1.5rem; position: relative; }
.marke { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--color-text-strong); flex: none; }
.marke:hover { color: var(--color-text-strong); }
.marke-zeichen { width: 34px; height: 34px; border-radius: 9px; background: var(--color-primary); color: var(--color-white); display: grid; place-items: center; }
.marke-zeichen svg.i { width: 20px; height: 20px; }
.marke-name { font-weight: 700; font-size: 1.05rem; line-height: 1.05; letter-spacing: 0.02em; }
.marke-zusatz { display: block; font-size: 0.7rem; color: var(--color-text-muted); font-weight: 500; letter-spacing: 0; }
.instanz { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn-strong); padding: 0.12rem 0.5rem; border-radius: 999px; flex: none; white-space: nowrap; }
.instanz .kurz { display: none; }
.trenner { width: 1px; height: 28px; background: var(--color-gray-border); flex: none; }
.hauptnav { display: flex; align-items: center; gap: 0.15rem; flex-wrap: nowrap; }
.nav-punkt { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.7rem; border-radius: 0.5rem; font-size: 0.9rem; font-weight: 500; color: var(--color-nav); text-decoration: none; cursor: pointer; white-space: nowrap; list-style: none; user-select: none; }
.nav-punkt::-webkit-details-marker { display: none; }
.nav-punkt::marker { content: ""; }
.nav-punkt:hover { background: var(--color-gray-light); color: var(--color-text-strong); }
.nav-punkt[aria-current] { color: var(--color-primary); background: var(--color-primary-soft); font-weight: 600; }
.nav-punkt .pfeil { transition: transform 0.15s; color: var(--color-text-muted); }
details[open] > .nav-punkt { background: var(--color-gray-light); color: var(--color-text-strong); }
details[open] > .nav-punkt .pfeil { transform: rotate(180deg); }
.aufgaben-zahl { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem; border-radius: 999px; background: var(--color-primary); color: var(--color-white); font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.handy-zahl { display: none; }

.menue { position: relative; }
.menue-panel { position: absolute; top: calc(100% + 6px); left: 0; width: 22rem; background: var(--color-white); border: 1px solid var(--color-gray-border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 0.5rem; z-index: 30; }
.menue-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.menue-eintrag { display: flex; gap: 0.6rem; padding: 0.5rem 0.55rem; border-radius: 0.5rem; text-decoration: none; color: inherit; }
.menue-eintrag:hover { background: var(--color-gray-light); color: inherit; }
.menue-eintrag[aria-current] { background: var(--color-primary-soft); }
.menue-eintrag .ez { width: 30px; height: 30px; border-radius: 8px; background: var(--color-primary-soft); color: var(--color-primary); display: grid; place-items: center; flex: none; }
.menue-eintrag-titel { display: block; font-size: 0.9rem; font-weight: 600; color: var(--color-text-strong); line-height: 1.3; }
.menue-eintrag-satz { display: block; font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.35; margin-top: 0.1rem; }

.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 0.35rem; }
/* Melden ohne QR (F-02): der Hauptknopf vor Anleitung und Person, am Handy vor Aufgabenzahl und Menü. */
.kopf-melden { margin-left: auto; flex: none; white-space: nowrap; }
.kopf-melden ~ .kopf-rechts, .kopf-melden ~ .handy-zahl { margin-left: 0; }
.kopf-melden[aria-current] { background: var(--color-primary-hover); }
.person-menue { position: relative; }
.person-knopf { padding: 0.3rem 0.5rem 0.3rem 0.3rem; }
.person-name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--info-soft); color: var(--info); font-size: 0.75rem; font-weight: 700; display: grid; place-items: center; flex: none; letter-spacing: 0.02em; }
.avatar-klein { width: 26px; height: 26px; font-size: 0.68rem; }
.person-panel { position: absolute; right: 0; top: calc(100% + 10px); width: 17.5rem; background: var(--color-white); border: 1px solid var(--color-gray-border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 0.5rem; z-index: 30; }
.person-kopf, .hm-person { display: flex; gap: 0.7rem; align-items: center; padding: 0.6rem 0.6rem 0.75rem; border-bottom: 1px solid var(--color-gray-border); margin-bottom: 0.35rem; }
.person-kopf-name { display: block; font-size: 0.95rem; font-weight: 600; color: var(--color-text-strong); overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.chip { font-size: 0.8rem; font-weight: 600; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--color-gray-light); color: var(--color-nav); border: 1px solid var(--color-gray-border); }
.panel-form { margin: 0; }
.panel-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 0.5rem; font: inherit; font-size: 0.9rem; color: var(--color-nav); text-decoration: none; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; min-height: 40px; }
.panel-link:hover { background: var(--color-gray-light); color: var(--color-text-strong); }
.panel-trenner { height: 1px; background: var(--color-gray-border); margin: 0.35rem 0; }

.handy-menue { display: none; }
.menue-knopf { border: 1px solid #d1d5db; min-height: var(--ziel); }
.menue-knopf .wenn-zu, .menue-knopf .wenn-offen { display: inline-flex; align-items: center; gap: 0.45rem; }
.menue-knopf .wenn-offen, .handy-menue[open] .menue-knopf .wenn-zu { display: none; }
.handy-menue[open] .menue-knopf .wenn-offen { display: inline-flex; }
.handy-panel { overscroll-behavior: contain; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 4rem); overflow-y: auto; background: var(--color-white); border-top: 1px solid var(--color-gray-border); border-bottom: 1px solid var(--color-gray-border); box-shadow: var(--shadow-lg); padding: 0.5rem 0.75rem 1rem; z-index: 30; }
.hm-liste { list-style: none; margin: 0; padding: 0; }
.hm-gruppe { font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 700; margin: 0.8rem 0.5rem 0.25rem; }
.hm-link { display: flex; align-items: center; gap: 0.75rem; min-height: var(--ziel); padding: 0.6rem 0.5rem; border-radius: 0.5rem; font-size: 0.95rem; font-weight: 500; color: var(--color-nav); text-decoration: none; }
.hm-link:hover { background: var(--color-gray-light); color: var(--color-text-strong); }
.hm-link[aria-current] { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; }
.hm-link .aufgaben-zahl { margin-left: auto; }
.hm-abmelden { margin: 0.75rem 0 0; }
.btn-breit { width: 100%; min-height: var(--ziel); }

/* Mit „Melden“ (08.11.) braucht die Kopfzeile am PC mehr Platz: Anleitung und Name zeigen schon unter 90em nur ihr
   Zeichen, unter 80em die Pille ihre Kurzform und die Punkte engere Ränder; bis 100em kürzt ein langer Name früher. Gemessen je Rolle mit Menü „Verwaltung“
   (Admin, Auditorin), mit Pille und langem Namen (Prüfdatei 2026-11-08-melden-ohne-qr). */
@media (max-width: 99.99em) {
  .person-name { max-width: 7rem; }
}
@media (max-width: 89.99em) {
  .kopf-rechts .nav-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 79.99em) {
  .kopf-inhalt { gap: 0.625rem; padding: 0 1rem; }
  .marke-zusatz { display: none; }
  .instanz .lang { display: none; }
  .instanz .kurz { display: inline; }
  .hauptnav .nav-punkt { padding-left: 0.55rem; padding-right: 0.55rem; }
}
/* Unter 64em (1024 px bei 100 % Schrift, bei Textvergrößerung früher): Marke, Pille, Aufgabenzahl, Knopf „Menü“. */
@media (max-width: 63.99em) {
  .kopf-inhalt { min-height: 3.25rem; gap: 0.5rem; padding: 0 0.75rem; }
  .trenner, .hauptnav, .kopf-rechts { display: none; }
  .handy-zahl { display: inline-flex; margin-left: auto; min-height: var(--ziel); min-width: var(--ziel); justify-content: center; }
  .btn.kopf-melden { min-height: var(--ziel); padding: 0.45rem 0.8rem; }
  .handy-menue { display: block; }
  .instanz .lang { display: none; }
  .instanz .kurz { display: inline; }
  .marke-zeichen { width: 30px; height: 30px; }
}
/* Schmale Handys: Damit „Melden“ mit Text in die Zeile passt, zeigen „Menü“ und dann die Marke nur ihr Zeichen; der Text
   bleibt für Screenreader (Melden ohne QR, gemessen bei 320 bis 400 px). */
@media (max-width: 29.99em) {
  .menue-knopf .knopf-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menue-knopf { padding: 0.45rem 0.6rem; min-width: var(--ziel); justify-content: center; }
  .btn.kopf-melden { padding: 0.45rem 0.7rem; }
  /* „Andere Anlage“ rutscht unter den Namen, statt ihn zusammenzudrücken. */
  .melden .melden-anlage { flex-wrap: wrap; row-gap: 0; }
  .melden-anlage-text { flex: 1 1 12rem; }
  .melden-anlage .melden-andere { margin-left: calc(40px + 0.75rem); }
}
@media (max-width: 24.99em) {
  .marke-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Hinweisleiste (Wächter-Befunde): ein Band unter der Kopfzeile ---------- */
.hinweisleiste { background: #fef2f2; border-bottom: 1px solid var(--bad-soft); }
.hinweisleiste p { max-width: 1200px; margin: 0 auto; padding: 0.55rem 1.5rem; display: flex; gap: 0.5rem; align-items: center; font-size: 0.9rem; }
.hinweisleiste svg.i { color: var(--bad); }

/* ---------- Seitenkopf (Spec § 3.5) ---------- */
.brotkrumen { margin: 0 0 0.4rem; font-size: 0.85rem; color: var(--color-text-soft); }
.brotkrumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.brotkrumen li { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; }
.brotkrumen svg.i { color: var(--color-gray); }
.brotkrumen a { color: var(--color-text-soft); text-decoration: none; }
.brotkrumen a:hover, .brotkrumen a:focus-visible { color: var(--color-primary); text-decoration: underline; }
.brotkrumen [aria-current] { color: var(--color-text-strong); overflow-wrap: anywhere; }
.seitenkopf { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.seitentitel { display: flex; align-items: center; gap: 0.8rem; min-width: 0; flex: 1 1 24rem; }
.seiten-zeichen { width: 42px; height: 42px; border-radius: var(--radius); background: var(--color-primary-soft); color: var(--color-primary); display: grid; place-items: center; flex: none; }
.seitentitel h1 { margin: 0; overflow-wrap: anywhere; }
.seiten-satz { margin: 0.15rem 0 0; font-size: 0.9rem; color: var(--color-text-soft); max-width: 75ch; }
.aktionen { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- Bauteile (Spec § 4.2) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; font: inherit; font-size: 0.9rem;
  font-weight: 600; line-height: 1.35; padding: 0.55rem 1rem; min-height: 40px; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background 0.15s;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background: var(--color-primary-hover); color: var(--color-white); }
.btn-secondary { background: var(--color-white); color: var(--color-text); border-color: #d1d5db; }
.btn-secondary:hover { background: var(--color-gray-light); color: var(--color-text-strong); }
.btn-danger { background: var(--color-danger); color: var(--color-white); }
.btn-gross { font-size: 1rem; padding: 0.75rem 1.5rem; min-height: var(--ziel-halle); }
.btn-klein { padding: 0.3rem 0.7rem; font-size: 0.85rem; min-height: 34px; white-space: nowrap; }
.btn:disabled, button:disabled { opacity: 0.55; cursor: not-allowed; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.karte { position: relative; background: var(--color-card-bg); border: 1px solid var(--color-line-soft); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem 1.5rem; margin-bottom: 1rem; overflow-x: auto; }
.karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; padding-bottom: 0.75rem; margin-bottom: 1rem; border-bottom: 1px solid var(--color-gray-border); }
.karte-kopf h2, .karte-kopf h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1rem; }
.karte-tabelle { padding: 0; }
.karte-tabelle > .karte-kopf { padding: 0.85rem 1.5rem; margin: 0; }
.abschnitt + .abschnitt { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--color-line-soft); }
.anzahl { font-size: 0.8rem; font-weight: 700; padding: 0 0.45rem; border-radius: 999px; background: var(--color-gray-border); color: var(--color-nav); font-variant-numeric: tabular-nums; }

/* Formulare: Felder, Namen und Ziele bleiben; nur die Form (Spec § 2). */
.formular { display: grid; gap: 0.75rem; max-width: 40rem; }
.feld { display: grid; gap: 0.3rem; align-content: start; min-width: 0; }
.feld label, .formular label, .feld-titel { font-weight: 600; font-size: 0.9rem; color: var(--color-nav); margin: 0; }
input, select, textarea { font: inherit; font-size: 1rem; min-height: var(--ziel); padding: 0.45rem 0.7rem; border: 1px solid #d1d5db; border-radius: 0.375rem; background: var(--color-white); color: var(--color-text); width: 100%; max-width: 40rem; }
input:focus, select:focus, textarea:focus { border-color: var(--color-primary); box-shadow: var(--focus-ring); outline: none; }
input[type=file] { padding: 0.5rem; }
input[type=radio], input[type=checkbox] { width: auto; min-height: 0; }
textarea { min-height: 5rem; }
.feld-hinweis { font-size: 0.85rem; color: var(--color-text-muted); }
.filter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem 1rem; margin: 0; }
.filter-mehr { grid-column: 1 / -1; }
.filter-mehr > summary { cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--color-nav); min-height: var(--ziel); display: inline-flex; align-items: center; gap: 0.4rem; }
.filter-mehr .filter { margin-top: 0.5rem; }
.werkzeugleiste { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.werkzeugleiste > form { flex: 1 1 36rem; min-width: 0; }
.werkzeugleiste > form.csv { flex: 0 1 19rem; display: grid; gap: 0.35rem; justify-items: end; text-align: right; }
/* „Weitere Filter“ und „Filter anwenden“ teilen sich eine Zeile; aufgeklappt stehen die Felder darunter. */
.filter > .filter-mehr { grid-column: 1 / -2; }
.filter-knoepfe { margin: 0; grid-column: -2 / -1; justify-self: end; align-self: start; padding-top: 0.25rem; }
.treffer-mehr { margin: 0.75rem 1.5rem 0; }
.filter-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--color-text-soft); }
.filter-stand strong { color: var(--color-text-strong); }

/* Tabelle: Kopf in Großbuchstaben, erste Spalte als blauer Link; breite Tabellen rollen in ihrer Karte. */
.tabelle-huelle { overflow-x: auto; position: relative; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabelle th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); font-weight: 600; text-align: left; padding: 0.7rem 1rem; background: #fafbfc; border-bottom: 1px solid var(--color-gray-border); white-space: nowrap; }
.tabelle td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-line-soft); vertical-align: middle; text-align: left; }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover { background: #f9fafb; }
.tabelle td:first-child > a, .zelle-titel a { font-weight: 600; color: var(--color-primary); text-decoration: none; }
.tabelle td:first-child > a:hover, .zelle-titel a:hover { text-decoration: underline; }
.zelle-satz { display: block; font-size: 0.85rem; color: var(--color-text-muted); }
.zahl { font-variant-numeric: tabular-nums; }
.person-zelle { display: inline-flex; align-items: center; gap: 0.5rem; }

/* Status-Pille: Fläche, Zeichen und Text — nie nur Farbe. Ton am Code (lib/anzeige.js), nie am gepflegten Text. */
.pille { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; line-height: 1.45; background: var(--neutral-soft); color: var(--neutral); }
.ton-ok { background: var(--ok-soft); color: var(--ok); }
.ton-info { background: var(--info-soft); color: var(--info); }
.ton-warn { background: var(--warn-soft); color: var(--warn); }
.ton-bad { background: var(--bad-soft); color: var(--bad); }
.ton-neutral { background: var(--neutral-soft); color: var(--neutral); }
.pille-zeichen { font-size: 0.8em; line-height: 1; }
/* Priorität: Text „P1“ plus Kante an der Zeile (Spec § 4.2). */
.prio { display: inline-flex; align-items: center; justify-content: center; min-width: 2.1rem; padding: 0.05rem 0.4rem; border-radius: 0.375rem; font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; border: 1px solid var(--color-gray-border); color: var(--color-text-soft); background: var(--color-white); }
.prio-1 { color: var(--bad); border-color: #fca5a5; background: var(--bad-soft); }
.prio-2 { color: var(--warn); border-color: #fcd34d; background: var(--warn-soft); }
.prio-3 { color: var(--neutral); border-color: var(--color-gray-border); background: var(--neutral-soft); }
.kante-1 { box-shadow: inset 4px 0 0 var(--bad); }
.kante-2 { box-shadow: inset 4px 0 0 var(--warn-strong); }
.kante-3 { box-shadow: inset 4px 0 0 var(--color-gray); }
/* Frist: relativ und mit Termin (Spec § 4.2). */
.frist { display: inline-grid; line-height: 1.25; }
.frist-text { font-weight: 600; color: var(--color-text-strong); font-size: 0.9rem; white-space: nowrap; }
.frist-termin { font-size: 0.8rem; color: var(--color-text-muted); white-space: nowrap; }
.frist-ueber .frist-text { color: var(--bad); display: inline-flex; align-items: center; gap: 0.3rem; }

/* Zähler über der Liste: zwei Gruppen „Meine“ und „Alle sichtbaren“ (Spec § 5.1). */
.zaehler-gruppen { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 0 0 1rem; }
.zaehler-gruppe { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.zaehler-gruppe-titel { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--color-text-soft); margin-right: 0.15rem; }
.zaehler { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; min-height: 40px; background: var(--color-white); border: 1px solid var(--color-line-soft); border-radius: 999px; box-shadow: var(--shadow); text-decoration: none; color: var(--color-nav); font-size: 0.9rem; }
.zaehler:hover { box-shadow: var(--shadow-md); color: var(--color-text-strong); }
.zaehler[aria-current] { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); }
.zaehler-zahl { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text-strong); }
.zaehler.ton-bad .zaehler-zahl { color: var(--bad); }

/* Leerzustand, Fehler, Fußzeile. */
.leer { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 1.75rem 1rem; color: var(--color-text-muted); }
.leer-zeichen { width: 44px; height: 44px; border-radius: 50%; background: var(--neutral-soft); color: var(--neutral); display: grid; place-items: center; }
.leer p { margin: 0; max-width: 46ch; }
.mitte-karte { max-width: 38rem; margin: 2rem auto; text-align: center; padding: 2rem 1.5rem; }
.mitte-karte .leer-zeichen { margin: 0 auto 0.75rem; }
.mitte-karte .gruende { text-align: left; display: inline-block; }
.fuss { max-width: 1200px; margin: 1rem auto 0; padding: 0 1.5rem 1.5rem; display: flex; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--color-text-soft); }
.fuss a { color: var(--color-text-soft); }
.hinweis { background: var(--color-primary-soft); border: 1px solid var(--info-soft); padding: 0.5rem 0.75rem; border-radius: 0.5rem; }
.hinweis-gefahr { background: #fef2f2; border: 1px solid var(--bad-soft); padding: 0.5rem 0.75rem; border-radius: 0.5rem; }
.gruende { margin: 0.25rem 0; padding-left: 1.25rem; color: var(--warn); }
.angaben { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; margin: 0; }
.angaben dt { color: var(--color-text-muted); font-size: 0.85rem; }
.angaben dd { margin: 0; overflow-wrap: anywhere; font-size: 0.9rem; }

/* ---------- Vorgangsliste (Spec § 5.1): Kurztext zuerst, P plus Kante, Frist relativ ---------- */
.vorgang-zelle { display: grid; gap: 0.1rem; min-width: 14rem; }
.vorgang-titel { font-weight: 600; color: var(--color-primary); text-decoration: none; }
.vorgang-titel:hover { text-decoration: underline; }
.vorgang-ort { font-size: 0.85rem; color: var(--color-text-soft); }
.vorgang-nummer { font-family: var(--mono); font-size: 0.78rem; color: var(--color-text-muted); }
.niemand { font-size: 0.85rem; color: var(--color-text-muted); font-style: italic; }
.vorgangsliste td:first-child { padding-left: 1.25rem; }

/* ---------- Vorgangsakte (Spec § 5.2) ---------- */
.akte-kopf { margin-bottom: 1rem; }
.akte-marken { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; margin-bottom: 0.35rem; }
.akte-titel { margin: 0 0 0.3rem; font-size: 1.45rem; }
.akte-unter { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.9rem; color: var(--color-text-soft); }
.akte-unter > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.gmp { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; font-weight: 700; color: var(--warn); }
/* Phasenleiste: grau, keine Fortschrittsfarbe (Spec § 5.2, Astra 4). */
.runde { font-size: 0.85rem; color: var(--color-text-soft); margin: 0 0 0.4rem; }
.runde strong { color: var(--warn); }
.phasen { list-style: none; margin: 0 0 1.25rem; padding: 0.6rem 0.75rem; display: flex; gap: 0.35rem; overflow-x: auto; background: var(--color-white); border: 1px solid var(--color-line-soft); border-radius: var(--radius); box-shadow: var(--shadow); }
.phase { flex: 1 0 7.5rem; display: grid; gap: 0.1rem; padding: 0.35rem 0.5rem; border-radius: 0.5rem; color: var(--color-text-muted); font-size: 0.8rem; position: relative; }
.phase-name { font-weight: 600; color: var(--color-text-soft); font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.3rem; }
.phase-erledigt .phase-name { color: var(--color-nav); }
.phase-jetzt { background: var(--color-primary-soft); }
.phase-jetzt .phase-name { color: var(--color-primary); }
.phase-tor .phase-name::before { content: "◆"; color: var(--warn); font-size: 0.75em; }
.phase-zeit, .phase-pause { font-size: 0.78rem; color: var(--color-text-muted); }
.phase-pause { color: var(--warn); font-weight: 600; }
.phase-uebersprungen .phase-name { color: var(--color-text-muted); font-weight: 400; font-style: italic; }
/* Zwei Spalten ab 1024 px: links die Reiter, rechts Arbeitsstand und Steckbrief; darunter Arbeitsstand, Reiter, Steckbrief. */
.akte-raster { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; grid-template-areas: "haupt stand" "haupt steckbrief"; grid-template-rows: auto 1fr; gap: 1rem 1.25rem; align-items: start; }
.akte-haupt { grid-area: haupt; min-width: 0; }
.akte-stand { grid-area: stand; margin: 0; }
.akte-steckbrief { grid-area: steckbrief; margin: 0; }
.akte-steckbrief .as-aktion form { margin: 0; }
.sprungmarken { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; font-size: 0.9rem; margin: 0 0 1rem; }
.sprungmarken [data-aufklappen] { margin-left: auto; }
.massnahme > p { margin-bottom: 0.5rem; }
figure.anhang { margin: 0; display: grid; gap: 0.35rem; align-content: start; font-size: 0.85rem; }
figure.anhang figcaption { display: grid; gap: 0.1rem; }
/* Reiter nach ARIA-Muster (picm.js); ohne Skript stehen die Bereiche untereinander, die Leiste sind Sprungmarken. */
.reiter-leiste { display: flex; gap: 1.25rem; box-shadow: inset 0 -1px 0 var(--color-gray-border); margin: 0 0 1rem; overflow-x: auto; overflow-y: hidden; }
.reiter-leiste a, .reiter-leiste button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.05rem; min-height: var(--ziel); font: inherit; font-size: 0.9rem; font-weight: 500; color: var(--color-text-soft); text-decoration: none; border: 0; border-bottom: 2px solid transparent; background: none; white-space: nowrap; cursor: pointer; }
.reiter-leiste a:hover { color: var(--color-text-strong); }
.reiter-leiste [aria-selected="true"] { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }
.reiter-leiste :focus-visible { outline-offset: -2px; box-shadow: none; }
.reiter-bereich { scroll-margin-top: 5.5rem; }
.reiter-bereich + .reiter-bereich { margin-top: 1.5rem; }
.mit-reitern .reiter-bereich + .reiter-bereich { margin-top: 0; }
.bereich-titel { font-size: 1.05rem; margin: 0 0 0.75rem; }
.mit-reitern .bereich-titel { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.eintrag-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.eintrag-zeile { padding: 0.65rem 0; border-top: 1px solid var(--color-line-soft); display: grid; gap: 0.2rem; }
.eintrag-zeile:first-child { border-top: 0; padding-top: 0; }
.eintrag-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
.eintrag-satz { font-size: 0.85rem; color: var(--color-text-muted); }
.unterformular { margin-top: 0.5rem; padding: 0.75rem; border: 1px solid var(--color-line-soft); border-radius: 0.5rem; background: #fafbfc; display: grid; gap: 0.5rem; }
.unterformular > summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--color-nav); min-height: 36px; display: flex; align-items: center; gap: 0.4rem; }
.frueher { color: var(--color-text-muted); }
.frueher .eintrag-kopf::after { content: attr(data-runde); font-size: 0.75rem; font-weight: 700; color: var(--color-text-muted); }
.anhang-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.75rem; }
.vorschau { display: block; max-width: 100%; max-height: 18rem; height: auto; border-radius: 0.375rem; background: var(--color-gray-light); }
.scan-sauber { color: var(--ok); font-weight: 600; } .scan-befallen, .scan-gesperrt, .scan-fehler { color: var(--bad); font-weight: 600; } .scan-ungeprueft, .scan-wartet { color: var(--warn); }
/* Arbeitsstand (Spec § 6): was gemeldet ist, was für das Hauptziel fehlt, wer am Zug ist. */
.arbeitsstand-kopf { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.75rem; font-size: 1rem; }
.as-abschnitt { padding: 0.6rem 0; border-top: 1px solid var(--color-line-soft); }
.as-abschnitt:first-of-type { border-top: 0; padding-top: 0; }
.as-titel { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--color-text-muted); margin: 0 0 0.35rem; }
.voraussetzungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.voraussetzung { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.4rem; font-size: 0.9rem; }
.voraussetzung-zeichen { font-weight: 700; color: var(--bad); text-align: center; }
.voraussetzung.erfuellt .voraussetzung-zeichen { color: var(--ok); }
.voraussetzung-wer { display: block; font-size: 0.8rem; color: var(--color-text-muted); }
.am-zug { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.as-aktion { margin-top: 0.75rem; display: grid; gap: 0.5rem; }
.as-aktion > .btn, .as-aktion > form > .btn, .as-aktion > .status-wahl > .btn { width: 100%; }
.am-zug-zeile { display: none; }
/* Dialog „Status ändern“: <dialog> mit Skript, ohne Skript ein <details> mit demselben Formular. */
.status-dialog { border: 0; padding: 0; border-radius: 12px; box-shadow: var(--shadow-lg); width: min(34rem, calc(100vw - 2rem)); }
.status-dialog::backdrop { background: rgba(15, 23, 42, 0.35); }
.status-dialog .karte { margin: 0; box-shadow: none; border: 0; }
.ziele { border: 0; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.status-dialog { padding: 1.25rem 1.5rem; overscroll-behavior: contain; max-height: calc(100vh - 2rem); overflow-y: auto; }
.status-dialog-inhalt { display: grid; gap: 0.75rem; }
.status-dialog-inhalt .karte-kopf { margin-bottom: 0; }
.status-wahl { margin: 0; }
.status-wahl > summary { list-style: none; width: 100%; }
.status-wahl > summary::-webkit-details-marker { display: none; }
.status-wahl[open] > summary { margin-bottom: 0.75rem; }
.ziel { display: grid; gap: 0.25rem; padding: 0.6rem 0.75rem; border: 1px solid var(--color-gray-border); border-radius: 0.5rem; }
.ziel label { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem; align-items: start; margin: 0; font-weight: 500; cursor: pointer; }
.ziel label input { margin-top: 0.3rem; }
.ziel:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.ziel.gesperrt { background: #fafbfc; color: var(--color-text-muted); }
.ziel.gesperrt label { cursor: not-allowed; }
.ziel-satz { grid-column: 2; font-size: 0.85rem; color: var(--color-text-muted); }
.ziel .gruende { margin: 0 0 0 1.85rem; font-size: 0.85rem; }
.abschluss-felder { display: grid; gap: 0.5rem; padding: 0.6rem 0.75rem; border: 1px dashed #d1d5db; border-radius: 0.5rem; }
.arbeitsstand-kopf svg.i { color: var(--color-primary); }

/* ---------- Meine Aufgaben (Spec § 5.3) ---------- */
.aufgaben-gruppe { margin-top: 1.5rem; scroll-margin-top: 5rem; }
.aufgaben-gruppe-titel { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; font-size: 0.95rem; }
.aufgaben-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.aufgabe { display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem 1rem; min-height: var(--ziel-halle); background: var(--color-white); border: 1px solid var(--color-line-soft); border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; color: inherit; }
a.aufgabe:hover { border-color: #bfdbfe; box-shadow: var(--shadow-md); color: inherit; }
.aufgabe-text { flex: 1; min-width: 0; display: grid; gap: 0.1rem; }
.aufgabe-titel { font-weight: 600; color: var(--color-text-strong); }
.aufgabe-auftrag { font-size: 0.85rem; color: var(--color-text-soft); }
.aufgabe-kopf { display: flex; gap: 0.4rem; align-items: center; font-size: 0.78rem; color: var(--color-text-muted); }

/* ---------- Melden am Handy (Spec § 5.4) ---------- */
.melden { max-width: 34rem; margin: 0 auto; }
.melden-anlage { display: flex; gap: 0.75rem; align-items: center; }
.melden-anlage .typ-zeichen { width: 40px; height: 40px; border-radius: 10px; background: var(--color-primary-soft); color: var(--color-primary); display: grid; place-items: center; flex: none; }
.kachelwahl { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.kachelwahl legend { grid-column: 1 / -1; font-weight: 600; font-size: 0.9rem; color: var(--color-nav); padding: 0; margin-bottom: 0.35rem; }
.kachel { position: relative; display: flex; align-items: center; gap: 0.6rem; min-height: var(--ziel-halle); padding: 0.6rem 0.75rem; border: 1px solid #d1d5db; border-radius: var(--radius); background: var(--color-white); cursor: pointer; font-weight: 600; font-size: 0.95rem; color: var(--color-nav); }
.kachel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kachel:hover, .datei-knopf:hover, .ziel:not(.gesperrt):hover { border-color: #9ca3af; }
.kachel:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.kachel:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.foto-knoepfe { display: grid; grid-template-columns: 2fr 1fr; gap: 0.6rem; }
.datei-knopf { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; min-height: var(--ziel-halle); border: 1px dashed #9ca3af; border-radius: var(--radius); background: var(--color-white); font-weight: 600; color: var(--color-nav); cursor: pointer; text-align: center; padding: 0.5rem; }
.datei-knopf.haupt { border-style: solid; border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-soft); }
.datei-knopf input { flex-basis: 100%; font-size: 0.8rem; min-height: 0; padding: 0; border: 0; background: transparent; max-width: 100%; }
/* Mit Skript liegt das Dateifeld unsichtbar über dem ganzen Knopf; die gewählten Dateien nennt die Zeile darunter. */
.dateien-mit-skript .datei-knopf input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.melden-titel { font-size: 1.3rem; margin: 0 0 0.75rem; }
.melden-anlage-text { display: grid; gap: 0.1rem; min-width: 0; }
.meldung { max-width: none; }
.datei-knopf:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Anlagenwahl (Melden ohne QR, F-02): Suche, je Werk und Linie eine Gruppe, jede Anlage eine Fläche zum Tippen. */
.melden-satz { margin: -0.25rem 0 1rem; color: var(--color-text-soft); font-size: 0.95rem; }
.melden-andere { margin-left: auto; flex: none; display: inline-flex; align-items: center; min-height: var(--ziel); font-size: 0.9rem; font-weight: 600; }
.anlagen-suche { display: grid; gap: 0.3rem; margin-bottom: 1rem; }
.anlagen-suche label { font-weight: 600; font-size: 0.9rem; color: var(--color-nav); }
.such-zeile { display: flex; gap: 0.5rem; }
.such-zeile input { flex: 1 1 auto; min-width: 0; min-height: var(--ziel-halle); }
.such-zeile .btn { flex: none; min-height: var(--ziel-halle); }
.melden-treffer { margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--color-text-soft); }
.anlagen-gruppe { margin-bottom: 1rem; }
.anlagen-gruppe h2 { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 700; margin: 0 0 0.4rem; }
.anlagen-wahl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.anlage-ziel { display: flex; align-items: center; gap: 0.75rem; min-height: var(--ziel-halle); padding: 0.65rem 0.9rem; background: var(--color-white); border: 1px solid #d1d5db; border-radius: var(--radius); color: var(--color-text); text-decoration: none; }
.anlage-ziel:hover { border-color: #9ca3af; color: var(--color-text-strong); }
.anlage-ziel-text { display: grid; gap: 0.1rem; min-width: 0; flex: 1 1 auto; }
.anlage-ziel > svg.i { color: var(--color-gray); flex: none; }
.melden-nicht-gefunden { display: flex; gap: 0.4rem; align-items: center; margin-top: 1rem; }
.mehr-angeben > summary { cursor: pointer; font-weight: 600; min-height: var(--ziel-halle); display: flex; align-items: center; gap: 0.4rem; color: var(--color-nav); }

/* ---------- Anlagen (Spec § 5.5) ---------- */
.qr-zelle { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.qr-link { font-family: var(--mono); font-size: 0.8rem; color: var(--color-text-soft); max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; }
.ist-kopiert { color: var(--ok); border-color: var(--ok); }
.einzeilig { white-space: nowrap; }
.mehr-menue { position: relative; }
.mehr-menue > summary { list-style: none; cursor: pointer; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 0.5rem; color: var(--color-nav); }
.mehr-menue > summary::-webkit-details-marker { display: none; }
.mehr-menue > summary:hover { background: var(--color-gray-light); }
.qr-zelle .mehr-panel { position: static; width: min(19rem, 100%); margin-top: 0.4rem; box-shadow: var(--shadow-md); }
.mehr-panel { position: absolute; right: 0; top: calc(100% + 4px); width: 19rem; background: var(--color-white); border: 1px solid var(--color-gray-border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 0.75rem; z-index: 25; display: grid; gap: 0.5rem; }
.warnsatz { font-size: 0.85rem; color: var(--warn); }

/* ---------- Anleitung je Rolle (Spec § 7) ---------- */
.hilfe-wege { margin: 0 0 0.75rem; padding-left: 1.25rem; display: grid; gap: 0.4rem; }
.hilfe-unter { margin: 0.75rem 0 0.35rem; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--color-text-muted); }
.hilfe-hinweis { margin: 0 0 1rem; color: var(--color-text-soft); }
.hilfe-zwischentitel { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-soft); margin: 1.5rem 0 0.6rem; }
.hilfe-ablauf { margin: 0 0 0.75rem; padding-left: 1.25rem; display: grid; gap: 0.45rem; }
.rolle-weitere > summary { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: 600; color: var(--color-text-strong); min-height: var(--ziel); }

/* ---------- Übrige Seiten (Spec § 5.6) ---------- */
.raster-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.raster-karten > .karte { margin: 0; }
.karte-leer { padding: 1rem 1.5rem; margin: 0; }
.tabelle .zahl, .tabelle th.zahl { text-align: right; width: 6rem; }
.bericht-zeile { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; }
.bericht-zeile > :not(.frist) { grid-column: 1; }
.bericht-zeile > .frist { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.rolle-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin: 0.2rem 0; }
.rolle-zeile .unterformular { margin: 0; padding: 0.25rem 0.6rem; }
.einstellung-form { max-width: none; }
.auswahl { border: 0; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.auswahl label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.matrix select { min-width: 4.5rem; }
.matrix th[scope="row"] { font-size: 0.85rem; text-transform: none; letter-spacing: 0; color: var(--color-text); background: var(--color-white); }
.mitte-karte h1 { margin-top: 0.25rem; }
.fingerabdruck code { word-break: break-all; font-family: var(--mono); font-size: 0.85rem; }
.protokoll-eintrag .karte-kopf h3 { font-size: 0.95rem; }
summary { cursor: pointer; }
progress { width: 100%; max-width: 32rem; height: 0.75rem; }
.hochladen-meldung[data-art=fehler] { color: var(--bad); }
.hochladen-meldung[data-art=laeuft] { color: var(--color-text-soft); }

/* ---------- Bruchstellen: Seitenlayout bei 768 px (Verbund) ---------- */
@media (max-width: 63.99em) {
  .filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .akte-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stand" "haupt" "steckbrief"; grid-template-rows: none; }
  .filter > .filter-mehr { grid-column: 1 / -1; }
  .filter-knoepfe { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 768px) {
  main { padding: 1rem 1rem 2rem; }
  .hinweisleiste p { padding-left: 1rem; padding-right: 1rem; }
  .karte { padding: 1rem; }
  .karte-tabelle { padding: 0; }
  .karte-tabelle > .karte-kopf { padding-left: 1rem; padding-right: 1rem; }
  .seitenkopf { align-items: flex-start; }
  .seiten-zeichen { width: 36px; height: 36px; }
  h1, .seitentitel h1, .akte-titel { font-size: 1.3rem; }
  .filter { grid-template-columns: 1fr; }
  .angaben { grid-template-columns: 1fr; gap: 0; }
  .angaben dd { margin-bottom: 0.5rem; }
  .fuss { padding: 0 1rem 1.5rem; }
  /* Breite Listen werden Karten je Zeile (Spec § 4.2). */
  .tabelle.karten, .tabelle.karten tbody, .tabelle.karten tr, .tabelle.karten td { display: block; }
  .tabelle.karten thead { display: none; }
  .tabelle.karten tr { padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-line-soft); }
  .tabelle.karten td { padding: 0.15rem 0; border: 0; }
  .tabelle.karten td[class*="kante-"] { padding-left: 0.75rem; }
  .werkzeugleiste > form.csv { justify-items: start; text-align: left; }
  .tabelle.karten td[data-label]::before { content: attr(data-label) " "; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); font-weight: 600; margin-right: 0.35rem; }
  .phase { flex-basis: 6.5rem; }
  .akte-raster { grid-template-areas: "zeile" "haupt" "stand" "steckbrief"; }
  /* Ziele am Handy mindestens 44 px (Spec § 0, 6), gemessen im Rundgang T11. */
  .marke, .zaehler, .btn, .btn-klein, .unterformular > summary { min-height: var(--ziel); }
  .mehr-menue > summary { width: var(--ziel); height: var(--ziel); }
  .am-zug-zeile { grid-area: zeile; display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.65rem 0.8rem; margin: 0 0 1rem; border-radius: var(--radius); background: var(--warn-soft); color: var(--color-text-strong); font-size: 0.9rem; text-decoration: none; }
  .am-zug-zeile.fertig { background: var(--ok-soft); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .btn:active { transform: none; }
}