/* ============================================================
   scoremark — App-Styles
   Baut auf tokens.css (Marken-Variablen) und Bootstrap 5.3 auf.
   ============================================================ */

/* Inter lokal (variable Schrift, ein File für 400–700) — kein CDN (DSGVO) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../font/inter-var.woff2') format('woff2');
}

/* Bootstrap-Theming auf die scoremark-Tokens mappen */
:root {
  --bs-body-font-family: var(--font-sans);
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-primary: #2563EB;
  --bs-primary-rgb: 37, 99, 235;
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-primary-hover);
  --bs-border-color: var(--color-border);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-lg: var(--radius-lg);

}

/* Karten, Modale, Dropdowns und Tabellen WEISS auf dem hellgrauen Seitengrund.
   Bootstrap leitet ihren Grund von --bs-body-bg ab, und der ist hier der graue
   Seitengrund — Karte und Seite hatten damit exakt dieselbe Farbe, nur der
   sehr zurueckhaltende Schatten trennte sie (Fund 2026-08-28).

   WICHTIG, und mein erster Anlauf scheiterte genau daran: Diese Variablen
   werden von Bootstrap INNERHALB der jeweiligen Regel gesetzt (.card { --bs-card-bg: … }).
   Eine Angabe auf :root wird davon ueberschrieben — sie muss am selben
   Element stehen. Ausserdem laedt bootstrap.min NACH tokens.css, aber VOR
   scoremark.css; bei gleicher Spezifitaet gewinnt also diese Datei. */
.card { --bs-card-bg: var(--color-surface); }
.modal { --bs-modal-bg: var(--color-surface); }
.dropdown-menu { --bs-dropdown-bg: var(--color-surface); }
.list-group-item { background-color: var(--color-surface); }
.accordion { --bs-accordion-bg: var(--color-surface); }
.table { --bs-table-bg: var(--color-surface); }

.btn-primary {
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-border-color: var(--color-primary-hover);
  --bs-btn-active-bg: var(--color-primary-active);
  --bs-btn-active-border-color: var(--color-primary-active);
}

/* Modals IMMER vertikal zentriert (Projektstandard) — nie oben am Rand.
   Zentral statt per modal-dialog-centered an jedem Modal, damit auch künftige
   Modals automatisch mittig sitzen. Kompatibel mit modal-dialog-scrollable
   (gleiche Technik wie Bootstraps centered-Klasse). */
.modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100% - var(--bs-modal-margin, 1.75rem) * 2);
}

/* Status-Badges: dunkle scoremark-Schrift statt Bootstrap-Weiß.
   Bootstrap lädt NACH tokens.css und setzt in .badge ein color:#fff
   (--bs-badge-color) — bei gleicher Spezifität gewinnt Bootstrap, also
   weiße Schrift auf hellem Status-Hintergrund. Mit .badge.sm-badge--*
   (höhere Spezifität) ziehen wir die lesbare Textfarbe zurück. */
.badge.sm-badge--pass { color: var(--color-success-fg); }
.badge.sm-badge--warn { color: var(--color-warning-fg); }
.badge.sm-badge--fail { color: var(--color-danger-fg); }
.badge.sm-badge--info { color: var(--color-info-fg); }

/* Sehr kleine Marke — fuer die Labels an einer Frage in der Auswertung.
   Mehrere davon stehen je Zeile unter dem Fragetext; in normaler
   Badge-Groesse zoegen sie den Blick von der Frage weg. Hoehere
   Spezifitaet als Bootstraps .badge, sonst gewinnt dessen font-size.
   Nur Groesse, keine Farbe: Die kommt ueber text-bg-primary, damit ein
   Label ueberall gleich aussieht wie in der Label-Verwaltung. */
/* Anklickbare Zeile (Durchfuehrungen): Der Zeiger zeigt, dass die ganze
   Zeile fuehrt. position:relative ist noetig, damit der stretched-link in der
   ersten Spalte sich ueber die Zeile legt statt ueber die Seite. */
tr.sm-row-link { cursor: pointer; position: relative; }

/* Kopfzeile des Betreiber-Bereichs: dunkel und ohne Marken-Blau, damit auf
   den ersten Blick klar ist, dass man NICHT in der Kundenanwendung ist. */
.sm-op-bar {
  background: var(--sm-ink);
  color: #fff;
  border-bottom: 3px solid var(--color-primary);
}
/* Menue-Eintraege im CRM: ruhig, der aktive deutlich. */
.sm-op-link {
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  font-size: .9rem;
  padding: .3rem .7rem;
  border-radius: var(--radius-md);
}
.sm-op-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.sm-op-link.active { color: #fff; background: rgba(255, 255, 255, .15); }

.badge.sm-badge--xs {
  font-size: .66rem;
  font-weight: 600;
  padding: .1rem .45rem;
}

/* ---------- Formulare: klarer Kontrast statt grau-auf-grau ---------- */
.form-label {
  font-weight: 600;
  font-size: .875rem;
  color: var(--color-text);
  margin-bottom: .4rem;
}
.form-control,
.form-select {
  background-color: var(--color-surface);        /* weiß, nicht der graue Seiten-BG */
  border: 1px solid var(--color-border-strong);  /* kräftigerer, sichtbarer Rand */
  border-radius: var(--radius-md);
  padding: .55rem .8rem;
  color: var(--color-text);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control::placeholder { color: var(--color-text-subtle); opacity: 1; }
.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) { border-color: var(--sm-neutral-400); }
.form-control:focus,
.form-select:focus {
  background-color: var(--color-surface);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .18);
}
textarea.form-control { min-height: 6rem; }
.form-text { color: var(--color-text-muted); }

/* Checkboxen / Radios sichtbar umranden */
.form-check-input {
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-surface);
}
.form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); }
.form-check-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .18);
}

/* Einheitliche Eingabemaske-Karte: weiße Fläche, klarer Rahmen, ruhiges Raster */
.sm-form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem 1.5rem 1.25rem;
}
.sm-form-card .form-actions {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

/* CakePHP-Validierungsfehler im Bootstrap-Look */
.error-message {
  display: block;
  margin-top: .25rem;
  font-size: .875em;
  color: var(--color-danger);
}
.form-control.form-error, input.form-error, select.form-error {
  border-color: var(--color-danger);
}

/* ---------- App-Shell: Topbar + Sidebar ---------- */
.sm-shell { display: flex; min-height: 100vh; }

.sm-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--sm-ink);
  color: var(--sm-neutral-300);
  display: flex;
  flex-direction: column;
  padding: 1rem .75rem;
}
.sm-sidebar .sm-brand { padding: .5rem .75rem 1.25rem; }
/* Logo-SVG die verfügbare Sidebar-Breite füllen lassen (skaliert per viewBox) */
.sm-sidebar .sm-brand svg { width: 100%; height: auto; display: block; }
.sm-sidebar .nav-link {
  color: var(--sm-neutral-300);
  border-radius: var(--radius-md);
  padding: .55rem .75rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 500;
}
.sm-sidebar .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sm-sidebar .nav-link.active { background: var(--sm-gradient); color: #fff; }
.sm-sidebar .nav-link.disabled { color: var(--sm-neutral-500); }
/* Gruppen-Überschrift in der Sidebar (z. B. „Konten & Zugriff") */
.sm-sidebar .sm-nav-heading {
  margin: 1rem .75rem .15rem;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255, 255, 255, .4);
}
.sm-sidebar .sm-soon {
  font-size: .68rem;
  font-weight: 700;
  background: rgba(255, 255, 255, .1);
  border-radius: var(--radius-full);
  padding: .1rem .5rem;
  margin-left: auto;
}
/* Navigation scrollt innerhalb der Sidebar, damit bei vielen Punkten oder
   kurzem Viewport (v. a. im Handy-Offcanvas) alle Einträge erreichbar bleiben.
   min-height:0 hebt die Flex-Mindesthöhe auf, sonst greift overflow nicht;
   flex-wrap:nowrap verhindert, dass Bootstraps .nav die Punkte bei knapper
   Höhe in eine zweite Spalte umbricht (statt vertikal zu scrollen). */
.sm-sidebar .nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; flex-wrap: nowrap; }
/* Bildlaufleiste der Navigation dezent (2026-08-27, Muster StationGuide):
   dort 6px breit. Uebernommen ist die Schmalheit, nicht die Farbe — auf dem
   dunklen Grund der Seitenleiste waere StationGuides heller Laufweg ein
   heller Balken. Deshalb durchsichtig, und der Griff nur als aufgehelltes
   Weiss, das beim Ueberfahren etwas deutlicher wird.
   scrollbar-width/-color ist der Standardweg (Firefox, Chrome ab 121), die
   ::-webkit-Regeln decken aeltere Chrome-Staende ab. */
.sm-sidebar .nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.sm-sidebar .nav::-webkit-scrollbar { width: 6px; }
.sm-sidebar .nav::-webkit-scrollbar-track { background: transparent; }
.sm-sidebar .nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .22);
  border-radius: var(--radius-full);
}
.sm-sidebar .nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .38); }

.sm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sm-topbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: .65rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}
.sm-content { padding: 1.75rem; max-width: 1100px; }
/* Breitere Spalte fuer die Seiten mit den grossen Tabellen (2026-08-27).
   1100px reichten fuer die Fragen-Tabelle nicht mehr: Erfuellungsgrad, Typ,
   Antworten und K.O. binden zusammen ueber 500px, fuer den Fragetext blieben
   rund 200px - drei Zeilen je Frage. Bewusst 1400 statt gar keiner Grenze:
   Auf einem breiten Bildschirm zoege sich sonst das Label-Diagramm auf
   sinnlose Balkenlaengen und der Fragetext auf eine Zeilenlaenge, die
   niemand mehr liest. */
.sm-content--wide { max-width: 1400px; }

/* Globaler Footer: trägt die OpenStreetMap-Attribution (Pflicht, dezent).
   margin-top:auto schiebt ihn in der Flex-Spalte an den unteren Bildrand. */
.sm-footer {
  margin-top: auto;
  padding: .7rem 1.75rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-subtle);
  font-size: .72rem;
}
.sm-footer a { color: inherit; text-decoration: underline; }
.sm-footer a:hover { color: var(--color-text-muted); }

.sm-page-title { font-weight: 600; letter-spacing: -.02em; margin-bottom: 1.25rem; }

/* KPI-Kacheln auf dem Dashboard */
.sm-kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.5rem;
  height: 100%;
}
.sm-kpi .sm-kpi-value { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sm-kpi .sm-kpi-label { color: var(--color-text-muted); font-size: .9rem; font-weight: 500; }
.sm-kpi.sm-kpi-soon { opacity: .65; }

/* ---------- Auth-Seiten (Login/Registrierung) ---------- */
.sm-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 140% at 85% -20%, var(--sm-blue-50) 0%, var(--color-bg) 55%);
  padding: 1.5rem;
}
.sm-auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 2.25rem;
}
.sm-auth-card .sm-brand { display: block; margin: 0 auto 1.5rem; }

/* Einheitlicher Tabellen-Look im Stil der Struktur-Seite (2026-07-17):
   Kopfzeile auf dem hellen Blaugrau des Bereichs-Headers mit blauem
   Akzent-Balken links und blauen Uppercase-Labels; Zeilen mit feinen
   Trennlinien. Gilt zentral für ALLE Listen (Klasse sm-table). */
table.sm-table thead th {
  background: #EAEEF4;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-primary);
  border-bottom: 1px solid var(--sm-neutral-200);
  padding-top: .65rem;
  padding-bottom: .65rem;
}
table.sm-table thead th:first-child { border-left: 4px solid var(--color-primary); }
table.sm-table tbody td { border-color: var(--sm-neutral-100); }

/* Trenner-Überschriften im „Frage hinzufügen"-Modal (Variante B: Suche + Typen) */
.sm-qtype-divider {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: .9rem 0 .6rem;
  color: var(--color-text-subtle);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.sm-qtype-divider:first-child { margin-top: 0; }
.sm-qtype-divider::before,
.sm-qtype-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

/* Typ-Kacheln im „Frage anlegen"-Modal (Flow: Typ wählen → inline ausfüllen) */
.sm-qtype-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: .7rem .85rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.sm-qtype-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 .15rem rgba(37, 99, 235, .15);
}
.sm-qtype-card .bi {
  color: var(--color-primary);
  font-size: 1.15rem;
}

/* ---- „Frage hinzufügen"-Modal: Katalog-Treffer + Vorlagen-Explorer (2026-07-24) ---- */
/* Katalog-Suchtreffer: klare Kacheln mit Hover statt grau-auf-grau. Klickbare
   heben sich blau ab; schon enthaltene sind dezent gedämpft mit Haken. */
.sm-qhit {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .5rem .7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: inherit;
  text-align: left;
}
.sm-qhit + .sm-qhit { margin-top: .35rem; }
.sm-qhit__text { flex: 1; min-width: 0; }
.sm-qhit__icon { flex: none; font-size: 1rem; }
.sm-qhit__action { flex: none; font-size: .75rem; font-weight: 600; white-space: nowrap; }
button.sm-qhit { cursor: pointer; transition: border-color .12s ease, background .12s ease, box-shadow .12s ease; }
button.sm-qhit .sm-qhit__icon, button.sm-qhit .sm-qhit__action { color: var(--color-primary); }
button.sm-qhit:hover {
  border-color: var(--color-primary);
  background: rgba(37, 99, 235, .05);
  box-shadow: 0 0 0 .12rem rgba(37, 99, 235, .12);
}
.sm-qhit--used { border-style: dashed; background: var(--sm-neutral-100); color: var(--color-text-muted); }
.sm-qhit--used .sm-qhit__icon { color: var(--color-text-subtle); }
.sm-qhit--used .sm-qhit__action {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: .1rem .55rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Vorlagen-Explorer: aufgeräumter Baum mit rotierenden Chevrons (statt roher
   <details>-Dreiecke), Zähler-Pills und Schiebereglern je Frage. */
.sm-qexp summary { list-style: none; outline: none; }
.sm-qexp summary::-webkit-details-marker { display: none; }
.sm-qexp-area { border-radius: var(--radius-md); }
.sm-qexp-area + .sm-qexp-area { margin-top: .15rem; }
.sm-qexp-head {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .5rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
}
.sm-qexp-head:hover { background: var(--sm-neutral-100); }
.sm-qexp-chev { flex: none; font-size: .7rem; color: var(--color-text-subtle); transition: transform .15s ease; }
details[open] > .sm-qexp-head .sm-qexp-chev { transform: rotate(90deg); }
.sm-qexp-area > .sm-qexp-head { font-weight: 600; }
.sm-qexp-area > .sm-qexp-head .sm-qexp-ico { color: var(--color-primary); flex: none; }
.sm-qexp-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-qexp-count {
  flex: none;
  font-size: .68rem;
  color: var(--color-text-muted);
  background: var(--sm-neutral-100);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: .02rem .5rem;
}
.sm-qexp-sec { padding-left: 1.1rem; }
.sm-qexp-secbody { padding: .1rem 0 .35rem 1.9rem; }
.sm-qexp-allwrap { flex: none; margin: 0; min-height: auto; padding-left: 2.4em; }
.sm-qexp-allwrap .form-check-label { font-size: .72rem; color: var(--color-text-muted); }
.sm-qexp-q {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .28rem .5rem;
  border-radius: var(--radius-md);
}
.sm-qexp-q:hover { background: var(--sm-neutral-100); }
.sm-qexp-q--used { color: var(--color-text-muted); cursor: default; }
.sm-qexp-switch { flex: none; margin: 0; min-height: auto; }
.sm-qexp-qtext { flex: 1; min-width: 0; }
.sm-qexp-tag {
  flex: none;
  font-size: .66rem;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: .02rem .5rem;
}

/* Fragen-Maske der Vorlage (2026-07-18): Karten-Liste im TABELLEN-Look —
   dieselbe Optik wie sm-table (Kopf #EAEEF4 mit Blau-Balken links und blauen
   Uppercase-Labels, Zeilen mit feinen Trennlinien und Hover). Die Zeilen sind
   Grid statt <table>, weil der Inline-Editor darunter aufklappt. */
.sm-qlist {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.sm-qlist-grid {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr) 9.5rem 3.4rem 4.5rem 6rem 7.2rem;
  align-items: center;
  column-gap: .5rem;
}
/* Drag & Drop (ersetzt die Pfeile, 2026-07-18): Griff-Symbol direkt vor dem
   Namen; die gezogene Zeile wird abgeschwächt dargestellt. */
.sm-drag-handle { cursor: grab; }
.sm-dragging { opacity: .45; }
/* Fragetext: bis zu zwei Zeilen umbrechen, erst danach abschneiden —
   der volle Text steht im Tooltip und im aufgeklappten Editor. */
.sm-qlist-qtext {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  line-height: 1.35;
}
.sm-qlist-head {
  background: #EAEEF4;
  border-left: 4px solid var(--color-primary);
  border-bottom: 1px solid var(--sm-neutral-200);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-primary);
  padding: .65rem 1rem .65rem calc(1rem - 4px);
}
.sm-qlist-row {
  border-left: 4px solid transparent;
  border-bottom: 1px solid var(--sm-neutral-100);
  padding: .45rem 1rem .45rem calc(1rem - 4px);
}
/* Zebra-Streifen (Wahl 2026-07-18): jede zweite Frage-Zeile getönt — die
   Klasse setzt der Server, weil zwischen den Zeilen die Collapse-Container
   liegen (nth-child würde bei Fragen ohne Editor aus dem Takt geraten). */
.sm-qlist-row--alt { background: var(--sm-neutral-50); }
.sm-qlist-row:hover { background: var(--sm-neutral-100); }
.sm-qlist > :last-child { border-bottom: none; }
/* Aufgeklappter Inline-Editor: Blau-Balken markiert die offene Frage. */
.sm-qlist-editor {
  border-left: 4px solid var(--color-primary);
  border-bottom: 1px solid var(--sm-neutral-100);
  padding: 1rem calc(1rem - 4px);
}

/* Label-Picker (2026-07-18): NUR zugewiesene Labels als Pills mit ×;
   neue (noch ungespeicherte) Labels gestrichelt markiert. */
.sm-labelpick-pills .badge { font-size: .8rem; font-weight: 500; padding: .45em .7em; }
.sm-labelpick-pill--new {
  background: var(--color-surface);
  border: 1px dashed var(--color-primary);
  color: var(--color-primary);
}
.sm-labelpick-x { font-size: .55em; }

/* Sternebewertung im Frage-Formular: jeder Stern ist eine feste Antwortzeile —
   Stern-Icon (amber, wie die Status-Warnfarbe) mit der Sternzahl mittig darin. */
.sm-star-opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  vertical-align: middle;
}
.sm-star-opt .bi {
  font-size: 1.9rem;
  line-height: 1;
  color: var(--color-warning, #F59E0B);
}
.sm-star-opt .sm-star-num {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: .68rem;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* Struktur-Seite der Audit-Vorlagen — Design „Blauer Akzent-Balken"
   (gewähltes Mockup 2026-07-17): eine durchgehende Liste; Bereichs-Header
   mit markenblauem Balken links und BEREICH-N-Eyebrow über dem Namen,
   Abschnitte als ausgerichtete Spalten (Nummer · Name · Fragen · Aktionen). */
.sm-structure {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.sm-structure .sm-arow {
  border-left: 4px solid var(--color-primary);
  /* Heller Zwischenton mit leichtem Blaustich (zwischen neutral-100 und
     neutral-200) — per User-Feedback 2026-07-17 austariert. */
  background: #EAEEF4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .7rem 1rem;
  border-top: 1px solid var(--sm-neutral-200);
  border-bottom: 1px solid var(--sm-neutral-200);
}
.sm-structure .sm-arow:first-child { border-top: none; }
.sm-structure .sm-eyebrow {
  display: block;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: .05rem;
}
.sm-structure .sm-aname { font-weight: 650; font-size: 1.02rem; }
.sm-structure .sm-srow {
  display: grid;
  /* 4.6rem: Platz für Drag-Griff + Nummer (2026-07-18) */
  grid-template-columns: 4.6rem 1fr 6.5rem auto;
  align-items: center;
  padding: .55rem 1rem .55rem 1.75rem;
  border-bottom: 1px solid var(--sm-neutral-100);
  border-left: 4px solid transparent;
}
.sm-structure .sm-sno { color: var(--color-text-subtle); font-size: .82rem; }
.sm-structure a.sm-sname {
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted var(--sm-neutral-300);
}
.sm-structure a.sm-sname:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.sm-structure .sm-qcount { color: var(--color-text-muted); font-size: .82rem; text-align: right; white-space: nowrap; padding-right: 1.25rem; }
.sm-structure .sm-actions { justify-self: end; white-space: nowrap; }
.sm-structure .sm-addrow {
  padding: .45rem 1rem .55rem 1.75rem;
  border-bottom: 1px solid var(--sm-neutral-100);
  border-left: 4px solid transparent;
}
.sm-structure > :last-child { border-bottom: none; }

/* ---- Mobile-Umbau (2026-07-18): Sidebar als Offcanvas, kompakte Abstände ---- */
/* Unter md übernimmt Bootstraps offcanvas-md die Sidebar (Hamburger in der
   Topbar); die Breite kommt aus der Offcanvas-Variablen, nicht aus width. */
.sm-sidebar { --bs-offcanvas-width: 260px; }
/* Bootstrap setzt .offcanvas-md ab md auf background-color: transparent
   !important (statischer Modus soll den Seiten-BG durchscheinen lassen) —
   das zerstört die dunkle Sidebar-Fläche auf dem Desktop. Mit gleicher
   Härte zurückholen. */
.sm-sidebar.offcanvas-md { background-color: var(--sm-ink) !important; }
/* Ab Tablet/Desktop bleibt die statische Sidebar beim Seiten-Scroll im Blick
   und scrollt bei Bedarf selbst (nav-overflow oben), statt mit dem Inhalt
   wegzuscrollen. Unter md übernimmt das Offcanvas — dort nicht anfassen. */
@media (min-width: 768px) {
  .sm-sidebar.offcanvas-md {
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: flex-start;
  }
}
@media (max-width: 767.98px) {
  .sm-topbar { padding: .55rem 1rem; }
  .sm-content { padding: 1rem; }
  .sm-footer { padding: .7rem 1rem; }
}

/* ---- Check-Durchführung: Übersicht + Frage-Wizard (2026-07-18) ---- */
.sm-checkfill, .sm-wizard { max-width: 40rem; }
/* Zurück/Weiter kleben am unteren Rand — auf dem Handy immer erreichbar,
   ohne den Inhalt zu verdecken (sticky statt fixed). */
.sm-wizard .sm-wiz-nav {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding: .6rem 0 calc(.6rem + env(safe-area-inset-bottom));
}
.sm-wizard .sm-photo-preview,
.sm-wizard .sm-sign-preview { display: block; max-width: 100%; max-height: 14rem; }

/* Foto-Anhänge (Büroklammer) im Wizard (2026-07-19) */
.sm-att-thumb { position: relative; }
.sm-att-thumb img {
  display: block;
  width: 5.5rem;
  height: 5.5rem;
  object-fit: cover;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.sm-att-thumb .sm-att-del {
  position: absolute;
  top: -0.45rem;
  right: -0.45rem;
  /* Feste QUADRAT-Größe → border-radius:50% ergibt einen echten Kreis (nicht
     oval); Icon per Flex mittig, damit das Minus nicht verzerrt/gestreckt wird. */
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  line-height: 1;
  font-size: 1rem;
}
.sm-att-thumb .sm-att-del > i { line-height: 1; }
/* Lade-Platzhalter während des Foto-Uploads (2026-07-22): grauer Kasten mit
   mittigem Spinner an der künftigen Thumbnail-Stelle — Feedback ohne Blockieren.
   Die Kern-Optik setzt das JS zusätzlich inline (cache-fest). */
.sm-att-uploading {
  width: 5.5rem;
  height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #E2E8F0;
}

/* Unterfragen in der Fragen-Maske (2026-07-19): eingerueckt, leicht blau
   hinterlegt — sie kleben an ihrer Elternfrage (kein Drag-Griff). */
.sm-qlist-row--sub { background: #EFF4FE; }

/* Unterfragen im Wizard (2026-07-19): eingerueckter Block in der
   Eltern-Karte, sichtbar nur bei ausgeloester Antwort. */
.sm-wizard .sm-subq {
  border-left: 3px solid var(--color-primary);
  background: #EFF4FE;
  border-radius: 0 10px 10px 0;
  padding: .7rem .8rem;
  margin: .6rem 0 .25rem .5rem;
}
.sm-wizard .sm-subq .sm-subq-label {
  font-size: .68rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .35rem;
}
.sm-wizard .sm-subq .btn-check + .btn { background: #fff; }
.sm-wizard .sm-subq .btn-check:checked + .btn { background: var(--color-primary); }

/* Filterleiste der Auswertung (2026-08-27): Knoepfe und Eingabefelder auf
   dieselbe Hoehe. Rechnerisch sind btn-sm und form-control-sm gleich hoch,
   praktisch nicht: Chrome gibt input[type=date] ueber sein Kalendersymbol ein
   paar Pixel mehr. Nebeneinander in einer Reihe faellt genau das auf. */
.sm-analysis-filter .btn-sm,
.sm-analysis-filter .form-control-sm,
.sm-analysis-filter .form-select-sm {
  min-height: 2rem;
}

/* Bedeutungen einer Antwort (2026-08-28): Knopf mit Anzahl statt Auswahlfeld
   — eine Antwort darf mehrere tragen, und ein Auswahlfeld kann nur eine. Der
   Knopf fuellt seine Spalte und ist so hoch wie die Felder daneben. */
.sm-opt-labels-btn {
  width: 100%;
  min-height: calc(1.5em + .5rem + 2px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .15rem;
}