/* verplombt. – Aussehen nach docs/styleguide.md. Bootstrap bleibt das Gerüst; Farben, Formen und Schrift kommen
   aus tokens.css. Hier nur Token-Namen, keine rohen Hex-Werte. Keine Schatten, keine Verläufe. */

/* ---------- Bootstrap auf die Tokens umstellen (hell und dunkel) ---------- */
:root, [data-bs-theme] {
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: 17px;
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--text-primary);
  --bs-body-bg: var(--surface-page);
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-bg: var(--surface-raised);
  --bs-secondary-bg: var(--surface-raised);
  --bs-emphasis-color: var(--text-primary);
  --bs-heading-color: var(--text-primary);
  --bs-border-color: var(--border);
  --bs-border-color-translucent: var(--border);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-pill: var(--radius-full);
  --bs-link-color: var(--accent-text);
  --bs-link-hover-color: var(--text-primary);
  --bs-focus-ring-color: transparent;
  --bs-box-shadow: none;
  --bs-box-shadow-sm: none;
  --bs-box-shadow-lg: none;
}
body { background: var(--surface-page); color: var(--text-primary); font-family: var(--font-sans);
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); font-variant-numeric: tabular-nums; }
a { color: var(--accent-text); }
h1, .h1, h2, .h2, h3, .h3 { font-weight: 700; letter-spacing: -0.02em; }
h4, .h4, h5, .h5, h6, .h6 { font-weight: 700; letter-spacing: -0.01em; }
.small, small { font-size: 15px; }
.text-body-secondary { color: var(--text-secondary) !important; }
.fw-semibold { font-weight: 600 !important; }
.font-monospace { font-family: var(--font-mono) !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }

/* Fokus sichtbar: 2px Ring mit 2px Abstand */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: none !important; }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus, .nav-link:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: none; }

/* ---------- Logo (Wortmarke) ---------- */
.logo { display: inline-flex; align-items: baseline; font: 800 22px/1 var(--font-sans); letter-spacing: -.02em;
  color: inherit; text-decoration: none; }
.logo-dot { width: .32em; height: .32em; border-radius: var(--radius-full); background: var(--accent); margin-left: .06em; }

/* ---------- Kopfleiste: Anthrazit mit Wortmarke ---------- */
.navbar.kopf { background: var(--surface-inverse); color: var(--text-on-inverse); border-bottom: 0;
  --bs-navbar-color: var(--text-on-inverse); }
.kopf .navbar-brand, .kopf #btn-fz { color: var(--text-on-inverse) !important; }
.kopf .kontext { font-size: 15px; font-weight: 600; color: var(--text-on-inverse-muted); margin-left: var(--space-3); }
.kopf .btn-outline-secondary { --bs-btn-color: var(--text-on-inverse); --bs-btn-border-color: var(--text-on-inverse-muted);
  --bs-btn-hover-color: var(--on-accent); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-color: var(--on-accent); --bs-btn-active-bg: var(--accent); --bs-btn-disabled-color: var(--text-on-inverse-muted); }
.kopf :focus-visible { outline-color: var(--accent); }
.kopf .nav-pills .nav-link { color: var(--text-on-inverse-muted); font-weight: 600; }
.kopf .nav-pills .nav-link.active { background: var(--accent); color: var(--on-accent); }
.kopf .nav-pills .nav-link:not(.active):hover { color: var(--text-on-inverse); }

/* App-Breite auf großen Bildschirmen (Styleguide: app-max) */
.app-breite { max-width: var(--app-max) !important; }

/* Testsystem-Hinweis */
.testsystem { background: var(--accent); color: var(--on-accent); }

/* ---------- Buttons ---------- */
.btn { --bs-btn-font-size: 16px; --bs-btn-font-weight: 600; --bs-btn-line-height: 1.2; --bs-btn-padding-x: 22px;
  --bs-btn-border-radius: var(--radius-md); --bs-btn-border-width: 1.5px; --bs-btn-box-shadow: none;
  --bs-btn-focus-box-shadow: none; min-height: var(--tap-min); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); }
.btn-sm { --bs-btn-padding-x: var(--space-3); --bs-btn-font-size: 15px; --bs-btn-border-radius: var(--radius-md); min-height: 40px; }
.btn-lg { --bs-btn-font-size: 17px; }
/* Primär: Signalgelb, Schrift immer Anthrazit */
.btn-primary { --bs-btn-color: var(--on-accent); --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: var(--on-accent); --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-color: var(--on-accent); --bs-btn-active-bg: var(--accent-hover); --bs-btn-active-border-color: var(--accent-hover);
  --bs-btn-disabled-color: var(--on-accent); --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent); }
/* Sekundär: transparent, kräftiger Rand */
.btn-outline-primary, .btn-outline-secondary, .btn-secondary, .btn-outline-info {
  --bs-btn-color: var(--text-primary); --bs-btn-bg: transparent; --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--text-primary); --bs-btn-hover-bg: var(--surface-raised); --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-active-color: var(--text-primary); --bs-btn-active-bg: var(--surface-raised); --bs-btn-active-border-color: var(--text-primary);
  --bs-btn-disabled-color: var(--text-secondary); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--border); }
/* Gewählter Zustand (z. B. Filter) */
.btn-secondary { --bs-btn-bg: var(--surface-raised); --bs-btn-border-color: var(--text-primary); }
/* Verplombt / vorhanden: grün gefüllt */
.btn-success { --bs-btn-color: var(--on-status-ok); --bs-btn-bg: var(--status-ok-fill); --bs-btn-border-color: var(--status-ok-fill);
  --bs-btn-hover-color: var(--on-status-ok); --bs-btn-hover-bg: var(--status-ok-fill); --bs-btn-hover-border-color: var(--status-ok-fill);
  --bs-btn-active-color: var(--on-status-ok); --bs-btn-active-bg: var(--status-ok-fill); --bs-btn-active-border-color: var(--status-ok-fill);
  --bs-btn-disabled-color: var(--on-status-ok); --bs-btn-disabled-bg: var(--status-ok-fill); --bs-btn-disabled-border-color: var(--status-ok-fill); }
.btn-outline-success { --bs-btn-color: var(--status-ok-text); --bs-btn-bg: transparent; --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--status-ok-text); --bs-btn-hover-bg: var(--surface-raised); --bs-btn-hover-border-color: var(--status-ok);
  --bs-btn-active-color: var(--on-status-ok); --bs-btn-active-bg: var(--status-ok-fill); --bs-btn-active-border-color: var(--status-ok-fill);
  --bs-btn-disabled-color: var(--text-secondary); --bs-btn-disabled-border-color: var(--border); }
/* Mangel: Rot nur als Status – gewählt mit 2px Rand, Fläche nur für „Mangel melden“/Löschen */
.btn-danger { --bs-btn-color: var(--weiss); --bs-btn-bg: var(--rot-dunkel); --bs-btn-border-color: var(--rot-dunkel);
  --bs-btn-hover-color: var(--weiss); --bs-btn-hover-bg: var(--rot-dunkel); --bs-btn-hover-border-color: var(--rot-dunkel);
  --bs-btn-active-color: var(--weiss); --bs-btn-active-bg: var(--rot-dunkel); --bs-btn-active-border-color: var(--rot-dunkel);
  --bs-btn-disabled-color: var(--weiss); --bs-btn-disabled-bg: var(--rot-dunkel); --bs-btn-disabled-border-color: var(--rot-dunkel); }
.btn-outline-danger { --bs-btn-color: var(--status-broken-text); --bs-btn-bg: transparent; --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--status-broken-text); --bs-btn-hover-bg: var(--surface-raised); --bs-btn-hover-border-color: var(--status-broken);
  --bs-btn-active-color: var(--status-broken-text); --bs-btn-active-bg: transparent; --bs-btn-active-border-color: var(--status-broken);
  --bs-btn-disabled-color: var(--text-secondary); --bs-btn-disabled-border-color: var(--border); }
/* „Fehlt (0)“ / „Nein“ gewählt: 2px roter Rand statt Fläche (Styleguide CheckItem „Mangel“) */
.item .btn-danger, .actionbar .btn-danger { --bs-btn-color: var(--status-broken-text); --bs-btn-bg: var(--surface-card);
  --bs-btn-border-color: var(--status-broken); --bs-btn-border-width: 2px;
  --bs-btn-hover-color: var(--status-broken-text); --bs-btn-hover-bg: var(--surface-card); --bs-btn-hover-border-color: var(--status-broken);
  --bs-btn-active-color: var(--status-broken-text); --bs-btn-active-bg: var(--surface-card); --bs-btn-active-border-color: var(--status-broken);
  --bs-btn-disabled-color: var(--status-broken-text); --bs-btn-disabled-bg: var(--surface-card); --bs-btn-disabled-border-color: var(--status-broken); }
.btn-link { --bs-btn-color: var(--accent-text); --bs-btn-hover-color: var(--text-primary); --bs-btn-active-color: var(--text-primary);
  --bs-btn-disabled-color: var(--text-secondary); font-weight: 600; }
.btn-close { min-height: auto; }
.btn-group > .btn { min-height: var(--tap-min); }

/* Prüfpunkt-Schaltflächen (Vollständig / Fehlt, Ja / Nein): Höhe tap-check */
.item [data-full], .item [data-zero], .item [data-antwort] { min-height: var(--tap-check); }

/* ---------- Formulare ---------- */
.form-control, .form-select { min-height: var(--tap-min); background-color: var(--surface-card); color: var(--text-primary);
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); font-size: 17px; }
.form-control::placeholder { color: var(--text-secondary); }
.form-control:focus, .form-select:focus { background-color: var(--surface-card); color: var(--text-primary); border-color: var(--text-primary); }
.form-control:disabled, .form-select:disabled { background-color: var(--surface-raised); }
.form-label { font-weight: 600; }
.form-text { color: var(--text-secondary); font-size: 15px; }
.form-check-input { width: 1.4em; height: 1.4em; border: 1.5px solid var(--border-strong); background-color: var(--surface-card); border-radius: var(--radius-sm); }
.form-check-input:checked { background-color: var(--status-ok-fill); border-color: var(--status-ok-fill); }
.form-check-label { padding-left: var(--space-1); }
.form-switch .form-check-input { border-radius: var(--radius-full); width: 2.6em; }
.input-group > .btn { min-height: var(--tap-min); }
.invalid-feedback, .text-danger { color: var(--status-broken-text) !important; }
.is-invalid { border-color: var(--status-broken) !important; }
.qty { max-width: 12rem; }
.qty .form-control { font-weight: 600; font-size: 1.25rem; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input[type=number] { -moz-appearance: textfield; }

/* ---------- Karten und Listen: flach, getrennt über Farbe ---------- */
.card { --bs-card-bg: var(--surface-card); --bs-card-border-color: var(--border); --bs-card-border-radius: var(--radius-lg);
  --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px); --bs-card-cap-bg: var(--surface-raised); --bs-card-color: var(--text-primary); }
.card-header { font-weight: 600; }
.bg-body-tertiary { background-color: var(--surface-raised) !important; }
.list-group { --bs-list-group-bg: var(--surface-card); --bs-list-group-color: var(--text-primary); --bs-list-group-border-color: var(--border);
  --bs-list-group-border-radius: var(--radius-lg); --bs-list-group-action-hover-bg: var(--surface-raised);
  --bs-list-group-action-active-bg: var(--surface-raised); --bs-list-group-action-color: var(--text-primary);
  --bs-list-group-action-hover-color: var(--text-primary); }
.list-group-item-action { cursor: pointer; min-height: var(--tap-min); }
.list-group-item-danger { background: var(--surface-raised); color: var(--status-broken-text); }

/* Artikelkarten: Zustand zusätzlich als linker Rand, nicht nur als Farbe des Textes */
.item { border-left-width: 5px; }
.item[data-s="open"] { border-left-color: var(--border); }
.item[data-s="ok"]   { border-left-color: var(--status-ok); }
.item[data-s="warn"] { border-left-color: var(--status-progress); }
.item[data-s="crit"] { border-left-color: var(--status-broken); }
.item .fw-semibold { font-size: 17px; }
.soll { min-width: 3.5rem; }
.fs-3, .fs-5.fw-bold, .fs-5.fw-semibold { font-weight: 800 !important; letter-spacing: -0.02em; }

/* ---------- Status-Badges: Punkt plus Wort, nie Farbe allein ---------- */
.badge { --bs-badge-font-size: 14px; --bs-badge-font-weight: 600; --bs-badge-padding-x: var(--space-3); --bs-badge-padding-y: 5px;
  --bs-badge-border-radius: var(--radius-full); display: inline-flex; align-items: center; gap: var(--space-2); white-space: normal;
  text-align: left; border: 1px solid var(--border); line-height: 1.2; }
.badge.text-bg-success, .badge.text-bg-danger, .badge.text-bg-warning, .badge.text-bg-secondary, .badge.text-bg-info,
.badge.text-bg-primary, .badge.text-bg-light, .badge.text-bg-dark {
  background-color: var(--surface-card) !important; color: var(--text-primary) !important; }
.badge.text-bg-success::before, .badge.text-bg-danger::before, .badge.text-bg-warning::before, .badge.text-bg-secondary::before {
  content: ""; width: var(--dot-sm); height: var(--dot-sm); border-radius: var(--radius-full); flex: none; }
.badge.text-bg-success { color: var(--status-ok-text) !important; }
.badge.text-bg-success::before { background: var(--status-ok); }
.badge.text-bg-danger { color: var(--status-broken-text) !important; }
.badge.text-bg-danger::before { background: var(--status-broken); }
.badge.text-bg-warning { color: var(--status-progress-text) !important; }
.badge.text-bg-warning::before { background: var(--status-progress); }
.badge.text-bg-secondary { color: var(--text-secondary) !important; }
.badge.text-bg-secondary::before { background: transparent; border: 2px solid var(--border-strong); }
.badge.text-bg-primary { background-color: var(--accent) !important; color: var(--on-accent) !important; border-color: var(--accent); }
.badge.text-bg-info, .badge.text-bg-light { background-color: var(--surface-raised) !important; }
.badge .bi { font-size: 1em; }
/* Zähler in Reitern und Überschriften: schlicht, ohne Punkt */
.nav-link .badge, h1 .badge, h2 .badge, .card-header .badge.text-bg-secondary { border: 0; padding: 2px var(--space-2); }
.nav-link .badge::before { display: none; }
.nav-link .badge.text-bg-secondary, .nav-link .badge.text-bg-danger { background: var(--surface-raised) !important; color: var(--text-primary) !important; }
.kopf .nav-link .badge.text-bg-danger { background: var(--status-broken) !important; color: var(--weiss) !important; }
.status-text { white-space: nowrap; }

/* ---------- Hinweise: flach, Status über linken Rand ---------- */
.alert { --bs-alert-bg: var(--surface-card); --bs-alert-color: var(--text-primary); --bs-alert-border-color: var(--border);
  --bs-alert-border-radius: var(--radius-lg); --bs-alert-link-color: var(--accent-text); border-left-width: 5px; }
.alert-success { border-left-color: var(--status-ok); }
.alert-danger  { border-left-color: var(--status-broken); }
.alert-warning { border-left-color: var(--status-progress); }
.alert-info, .alert-secondary { border-left-color: var(--border-strong); background: var(--surface-raised); }
.text-success-emphasis { color: var(--status-ok-text) !important; }
.text-danger-emphasis, .text-danger { color: var(--status-broken-text) !important; }
.text-warning-emphasis { color: var(--status-progress-text) !important; }
.text-info-emphasis { color: var(--text-primary) !important; }

/* ---------- Fortschritt: Signalgelb, 8px ---------- */
.progress { --bs-progress-bg: var(--surface-raised); --bs-progress-border-radius: var(--radius-full); --bs-progress-bar-bg: var(--accent);
  --bs-progress-bar-color: var(--on-accent); --bs-progress-height: 8px; height: 8px !important; font-size: 0; }
.progress-bar.bg-success { background-color: var(--accent) !important; }

/* ---------- Reiter, Tabellen, Dialoge, Hinweis unten ---------- */
.nav-pills { --bs-nav-pills-border-radius: var(--radius-md); }
.nav-pills .nav-link { padding: .6rem .25rem; min-height: var(--tap-min); }
.nav-tabs { --bs-nav-tabs-border-color: var(--border); --bs-nav-tabs-link-active-color: var(--text-primary);
  --bs-nav-tabs-link-active-bg: var(--surface-card); --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--surface-card);
  --bs-nav-link-color: var(--accent-text); --bs-nav-link-hover-color: var(--text-primary); --bs-nav-link-font-weight: 600; }
.nav-tabs .nav-link { min-height: var(--tap-min); border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
.nav-tabs .nav-link.active { border-top: 3px solid var(--accent); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--text-primary); --bs-table-border-color: var(--border);
  --bs-table-striped-bg: var(--surface-raised); --bs-table-striped-color: var(--text-primary); }
.table td, .table th { vertical-align: middle; }
.table thead th { font-size: 15px; color: var(--text-secondary); font-weight: 600; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--text-secondary); --bs-breadcrumb-item-active-color: var(--text-secondary); font-size: 15px; }
.modal { --bs-modal-bg: var(--surface-card); --bs-modal-color: var(--text-primary); --bs-modal-border-color: var(--border);
  --bs-modal-border-radius: var(--radius-lg); --bs-modal-header-border-color: var(--border); --bs-modal-footer-border-color: var(--border);
  --bs-modal-box-shadow: none; }
.modal-title { font-weight: 700; letter-spacing: -0.01em; }
.toast { --bs-toast-bg: var(--surface-inverse); --bs-toast-color: var(--text-on-inverse); --bs-toast-border-radius: var(--radius-lg);
  --bs-toast-box-shadow: none; font-size: 15px; }
.toast.text-bg-dark { background-color: var(--surface-inverse) !important; color: var(--text-on-inverse) !important; }
.toast #toast-undo { color: var(--accent) !important; }

/* Untere Aktionsleiste: primäre Aktion im Daumenbereich */
.actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; background: var(--surface-card) !important;
  border-top: 1px solid var(--border) !important; padding-bottom: env(safe-area-inset-bottom, 0px); }
.actionbar .container-md { max-width: var(--app-max); }

/* Eyebrow/Kicker */
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
h2.text-uppercase { font-size: 13px !important; letter-spacing: .08em; color: var(--accent-text) !important; font-weight: 600; }

/* Wortmarke nie ausgegraut, auch wenn der Kopf-Knopf (Teilnehmer-Seite) deaktiviert ist */
.kopf #btn-fz:disabled { opacity: 1; }
/* Status-Badges: Punkt plus Wort – kein zusätzliches Icon */
.badge.text-bg-success .bi, .badge.text-bg-danger .bi, .badge.text-bg-warning .bi, .badge.text-bg-secondary .bi { display: none; }

/* Verschachtelung Kreisverband → Einheit → Material: Einheit als Rahmen, Material als weiße Karten darin */
.einheit > .card-header { background: var(--surface-card); border-bottom: 1px solid var(--border); padding: var(--space-3) var(--space-4); }
.einheit > .card-header .eyebrow { margin-bottom: 2px; }
.einheit > .card-body { background: var(--surface-raised); border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg);
  padding: var(--space-3); }
.einheit > .card-body > .card:last-of-type { margin-bottom: var(--space-3) !important; }
.btn-check:checked + .btn-outline-secondary { background: var(--surface-raised); border-color: var(--text-primary); color: var(--text-primary); }

/* Startseite: Material als kompakte Zeile mit Ampel; Rand links zeigt den Zustand zusätzlich zum Wort */
.objekt { border-left-width: 5px; }
.objekt[data-a="secondary"] { border-left-color: var(--border); }
.objekt[data-a="warning"] { border-left-color: var(--status-progress); }
.objekt[data-a="danger"] { border-left-color: var(--status-broken); }
.objekt[data-a="success"] { border-left-color: var(--status-ok); }
.objekt-kopf, .einheit-kopf { background: none; border: 0; color: inherit; padding: 0; text-align: left; }
.einheit-kopf { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3) var(--space-4); }
.einheit-kopf[aria-expanded="true"] { border-bottom: 1px solid var(--border); }
.objekt-kopf { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3); }
.einheit-kopf { min-height: var(--tap-min); }