/* Lumique-Branding — überschreibt die fruity_twentythree-Bootstrap-Variablen.
   Werte übernommen aus frontend/shared/css/tokens.css (LumiqueSurveys-Repo).

   ══════════════════════════════════════════════════════════════════════
   VERBINDLICHE FARBPALETTE DIESES THEMES (Stand 2026-08-14) — vor jeder
   neuen Farbentscheidung HIER nachsehen, nicht neu raten/erfinden:

     Schmuckfarbe/Akzent (Buttons, Fokusringe, H1, Progressbar, Links,
     Radiobutton-/Checkbox-Auswahl):        #2E3546  (Dunkelnavy = Bodyfarbe)
     Hover-Zustand (Buttons):                Ring-Effekt, keine Farbänderung
     Aktiv/Gedrückt-Zustand (Buttons):       #5C616F  (helleres Grau-Blau)
     Seitenhintergrund:                      #F7F5F0  (warmes Off-White)
     Fließtext:                              #1E1E1E  (Ausgangswert, nahezu
                                              Schwarz — bewusst NICHT auf die
                                              Schmuckfarbe umgestellt)
     Fehler/Pflichtfeld/Warnhinweise:        #C84218  (echtes Lumique-Orange,
                                              Nutzerentscheidung 2026-08-14)
     Erfolg (nicht angepasst, Theme-Default): #4DD753
     Info (nicht angepasst, Theme-Default):   #8146F6

   Nutzerentscheidung 2026-08-14: NICHT Orange als durchgängige Schmuckfarbe
   (lag zu nah an Warn-/Fehlerfarben, Verwechslungsgefahr) — stattdessen
   Dunkelblau für die Oberfläche, Orange gezielt für Fehler/Aufmerksamkeit
   reserviert. Beide als CSS-Variablen (--bs-primary, --bs-danger) gepflegt,
   NIE als literale Hex-Werte für neue Regeln neu erfinden.
   ══════════════════════════════════════════════════════════════════════

   Wichtig: fruity_twentythree stylt Radiobuttons/Checkboxes NICHT über
   Bootstraps .form-check (das käme über --bs-primary), sondern über ein
   eigenes Pseudo-Element-System (.radio-item/.checkbox-item, label::before/
   ::after) mit hartcodiertem Grün (#14AE5C) und einem violetten Focus-Ring
   (rgba(66,0,255,...)) — deshalb reicht die --bs-primary-Variable allein
   nicht, diese Selektoren müssen gezielt überschrieben werden. Ebenso
   .form-check-input:checked, .form-select:focus, .progress-bar und die
   Alert-Boxen (dicker schwarzer Rahmen + satte Flächenfarbe) sind über
   Literalfarben statt Variablen gesetzt. */

:root {
  /* Schmuckfarbe der Umfrage ist Dunkelblau (die bestehende Lumique-Bodyfarbe),
     nicht Orange — Nutzerentscheidung 2026-08-14: Orange lag farblich zu nah an
     den Warn-/Fehlerfarben (beide im Rot-Orange-Bereich), was im Browsertest zu
     Verwechslungen führte ("wirkt wie ein Fehler, obwohl nichts falsch ist").
     Bewusst der bestehende Body-Farbwert wiederverwendet statt neu erfunden. */
  --bs-primary: #2E3546;
  --bs-primary-rgb: 46, 53, 70;
  --bs-body-font-family: 'IBM Plex Sans', sans-serif;
  --bs-body-bg: #F7F5F0;
  --bs-body-bg-rgb: 247, 245, 240;
  --bs-body-color: #2E3546;
  --bs-body-color-rgb: 46, 53, 70;
  --bs-link-color: #2E3546;
  /* Bewusst HELLER statt dunkler für :hover — Primärfarbe ist schon sehr
     dunkel, ein weiteres Abdunkeln (wie es bei Orange funktionierte) war
     auf dem Button kaum wahrnehmbar. */
  --bs-link-hover-color: #5C616F;

  /* --bs-danger(-rgb) überschreiben statt nur einzelne Selektoren zu jagen:
     .ls-question-message.text-danger (Pflichtfeld-Fehlermeldung) setzt
     color über rgba(var(--bs-danger-rgb),...) mit !important — das lässt
     sich nicht mit einer normalen Regel überstimmen, wohl aber, indem die
     Variable selbst hier (später geladen) neu belegt wird. Gleicher Wert
     wie .alert-danger, schon auf 8.69:1 Kontrast geprüft. */
  --bs-danger: #C84218;
  --bs-danger-rgb: 200, 66, 24;

  /* Lumique-eigene Hilfstöne, aus Bodyfarbe/Primärfarbe abgeleitet statt neu erfunden.
     --lumique-border-strong: Alpha 0.6 statt ursprünglich 0.42, weil 0.42 gegen
     den Seitenhintergrund (#F7F5F0) nur 2.28:1 Kontrast ergibt — WCAG 1.4.11
     (Non-Text Contrast) verlangt 3:1 für UI-Bauteilgrenzen (Formularrahmen,
     Radiobutton-/Checkbox-Ringe). Bei 0.6 sind es 3.54:1, nachgerechnet. */
  --lumique-border: rgba(46, 53, 70, 0.2);
  --lumique-border-strong: rgba(46, 53, 70, 0.6);
  --lumique-surface-alt: rgba(46, 53, 70, 0.045);
  /* Alpha 0.45 statt 0.25 — auf dem dunklen Button-Fond wirkte der Ring bei
     0.25 zu blass/unklar erkennbar. */
  --lumique-focus-ring: rgba(46, 53, 70, 0.45);
}

/* .large-heading (Umfragetitel auf der Startseite) hat im Ausgangstheme eine
   eigene, konkurrierende Regel mit "IBMPlexSerif" — Klassenselektor schlägt
   den reinen Typselektor h1, deshalb hier explizit mit aufgenommen. */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .large-heading {
  font-family: 'Space Grotesk', sans-serif;
}
/* h1/.h1 hatten eine eigene hartcodierte Farbe (#152536), unabhängig von jeder
   Variable — auf die Schmuckfarbe umgestellt, wie gewünscht. Der normale
   Fließtext bleibt bewusst beim Ausgangswert (#1E1E1E, nahezu Schwarz) —
   nur H1 soll die Schmuckfarbe tragen, nicht der ganze Text. */
h1, .h1 {
  color: var(--bs-primary);
}

/* ---------------------------------------------------------------------
   Header-Logo (brandlogo-Option). Tatsächliche CSS-Ursache gefunden (per
   DevTools nachgemessen): .img-fluid setzt max-width:100% + height:auto,
   eine zusätzliche eigene max-height führte dazu, dass der Browser Breite
   und Höhe unabhängig voneinander skalierte statt seitenverhältnistreu
   (sichtbar verzerrtes Logo). Deshalb hier bewusst KEINE Größenbegrenzung
   mehr — files/logo-header-final.png liegt selbst schon exakt in
   Zielgröße vor (215×108px: 215×28px-Logo mit 40px transparentem Rand
   oben/unten eingebacken, Original als logo-original.png.bak gesichert,
   files/logo.png bleibt unverändert für die Umfrageübersichtsseite via
   ls_logo_svg.twig). Bei künftigen Änderungen an dieser Datei: neuer
   Dateiname nötig (nicht wieder überschreiben!) UND Browser-Cache-Reset
   ("Clear site data" in DevTools) — Yiis Asset-Publishing hasht nach
   Dateipfad, nicht nach Inhalt, ein reines Ersetzen unter gleichem Namen
   wird von bereits geöffneten Tabs nicht zuverlässig bemerkt.
   --------------------------------------------------------------------- */
.logo-container {
  display: flex;
  align-items: center;
}
/* Ausgangstheme setzt hier max-height:84px + padding:8px 0 — das MUSS
   explizit neutralisiert werden (nicht nur weggelassen!), sonst kämpft
   dieses max-height weiterhin mit .img-fluids max-width:100%/height:auto
   und verzerrt das Bild non-proportional (exakt der Bug von vorhin, nur
   mit 84px statt unserem eigenen Wert). */
.logo-container > img {
  max-height: none;
  padding: 0;
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */

.btn {
  border-radius: 0.4rem;
}

.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
/* Farbring statt Aufhellen/Abdunkeln fürs Hover — auf einer so dunklen
   Grundfarbe war jede Farbverschiebung kaum wahrnehmbar. Ring funktioniert
   unabhängig von der Basis-Helligkeit, gleiches Prinzip wie der Fokus-Ring,
   nur dezenter und nicht nur bei Tastatur-Fokus sichtbar. */
.btn-primary:hover {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.2rem var(--lumique-focus-ring);
}
.btn-primary:active {
  background-color: var(--bs-link-hover-color) !important;
  border-color: var(--bs-link-hover-color) !important;
}
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-check:focus + .btn-primary {
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--lumique-focus-ring);
}

.btn-secondary,
.btn-outline-secondary {
  color: var(--bs-body-color);
  background-color: transparent;
  border-color: var(--lumique-border-strong);
}
.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-secondary:focus,
.btn-outline-secondary:focus {
  color: var(--bs-body-color);
  background-color: var(--lumique-surface-alt);
  border-color: var(--lumique-border-strong);
  box-shadow: 0 0 0 0.2rem rgba(46, 53, 70, 0.12);
}

/* ---------------------------------------------------------------------
   Textfelder, Dropdowns — einheitlicher, ruhiger Focus-Ring statt des
   violetten "Hard-Shadow"-Effekts aus dem Ausgangstheme
   --------------------------------------------------------------------- */

.form-control,
.form-select {
  border-color: var(--lumique-border-strong);
  border-radius: 0.4rem;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem var(--lumique-focus-ring);
}

/* ---------------------------------------------------------------------
   Radiobuttons & Checkboxes (Einfachauswahl, Mehrfachauswahl, Matrix,
   Datenschutz-Zustimmung) — fruity_twentythrees eigenes .radio-item/
   .checkbox-item-System, keine Bootstrap .form-check-Klassen
   --------------------------------------------------------------------- */

.radio-item label::before,
.checkbox-item label::before {
  border-color: var(--lumique-border-strong);
}

.radio-item label::after,
.radio-item input[type=radio] + label::after {
  background-color: var(--bs-primary);
}
.radio-item input[type=radio]:checked + label::before {
  border-color: var(--bs-primary);
}
.radio-item input[type=radio]:checked + label::after {
  background-color: var(--bs-primary);
}
.radio-item input[type=radio]:checked + label {
  color: var(--bs-primary);
}
.radio-item input[type=radio]:focus-visible + label::before {
  box-shadow: 0 0 0 0.2rem var(--lumique-focus-ring);
}

.checkbox-item input[type=checkbox]:checked + label::before {
  border-color: var(--bs-primary);
}
.checkbox-item input[type=checkbox]:checked + label::after {
  color: var(--bs-primary);
}
.checkbox-item input[type=checkbox]:checked + label {
  color: var(--bs-primary);
}
.checkbox-item input[type=checkbox]:focus-visible + label::before {
  box-shadow: 0 0 0 0.2rem var(--lumique-focus-ring);
}

/* Klassische Bootstrap .form-check-Fallback (falls an anderer Stelle genutzt) */
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem var(--lumique-focus-ring);
}

/* Datenschutz-Zustimmungs-Checkbox (privacy_text.twig): einziges Element, das
   GLEICHZEITIG .checkbox-item (Pseudo-Element-System) UND Bootstraps
   .form-check-input-Klasse trägt — zwei konkurrierende Styling-Systeme auf
   einem Element. #id-Selektor + !important als bewusste, eng begrenzte
   Ausnahme, weil die genaue Kollisionsursache in der Kaskade nicht
   zweifelsfrei aufzulösen war. */
/* Label trägt im Ausgangsmarkup dauerhaft die Bootstrap-Klasse .text-primary
   (mit !important) — das färbt Box+Text UNABHÄNGIG vom Ankreuz-Status ein.
   #6E748C ist der Grauton, den Überschrift ("DATENSCHUTZERKLÄRUNG") und
   Fließtext des Datenschutzblocks bereits von Haus aus verwenden
   (#datasecurity_notice/-_label, .datasecurity-checkbox-label) — Box+Label
   sollen dieses Grau nur verlassen, wenn tatsächlich angehakt ist. */
#datasecurity_accepted + label::before {
  border-color: #6E748C !important;
  background-color: #fff !important;
}
#datasecurity_accepted + label {
  color: #6E748C !important;
}
#datasecurity_accepted:checked + label::before {
  border-color: var(--bs-primary) !important;
}
#datasecurity_accepted:checked + label::after {
  color: var(--bs-primary) !important;
}
#datasecurity_accepted:checked + label {
  color: var(--bs-primary) !important;
}

/* Abstand zwischen gestapelten Antwortoptionen: Ausgangswert 1em (~18px bei
   1.14rem Body-Schrift) wirkte bei 5+ Optionen weitläufig. 0.625rem (10px)
   entspricht govuk-spacing(2), dem in GOV.UK Design System-Radios/Checkboxen
   verwendeten (produktiv erprobten) Abstand zwischen Listenelementen. */
li.radio-item,
li.checkbox-item,
li.radio-text-item,
li.checkbox-text-item {
  margin-bottom: 0.625rem;
}

/* ---------------------------------------------------------------------
   Fortschrittsbalken
   --------------------------------------------------------------------- */

.progress {
  background-color: var(--lumique-surface-alt);
}
.progress-bar {
  background-color: var(--bs-primary);
}

/* ---------------------------------------------------------------------
   Warn-/Fehlerhinweise — ruhigere, getönte Variante statt dicker
   schwarzer Rahmen mit satter Flächenfarbe
   --------------------------------------------------------------------- */

.alert {
  border-width: 1px;
  border-radius: 0.5rem;
  font-family: var(--bs-body-font-family);
}

/* Rahmenfarbe = Textfarbe (nicht color-mix Richtung transparent): eine
   Rahmenfarbe aus zwei hellen Tönen (Signalfarbe + Seitenhintergrund) blieb
   bei der Kontrollrechnung bei 1.1–2.2:1 hängen, weit unter den von WCAG
   1.4.11 geforderten 3:1. Die bereits als Text geprüfte, dunklere Farbe
   erreicht 6.3–9.0:1 und funktioniert auch als Rahmen. */
.alert-warning {
  background-color: color-mix(in srgb, var(--bs-warning) 20%, var(--bs-body-bg));
  border-color: #6B5600;
  color: #6B5600;
}
.alert-danger {
  background-color: color-mix(in srgb, var(--bs-danger) 14%, var(--bs-body-bg));
  border-color: #C84218;
  color: #C84218;
}
.alert-success {
  background-color: color-mix(in srgb, var(--bs-success) 16%, var(--bs-body-bg));
  border-color: #1D5C22;
  color: #1D5C22;
}
.alert-info {
  background-color: color-mix(in srgb, var(--bs-info) 14%, var(--bs-body-bg));
  border-color: #3F2380;
  color: #3F2380;
}

/* Feld-Validierung (Pflichtfeld nicht beantwortet): Ausgangstheme mischt hier
   DREI verschiedene Rottöne (Bootstrap-Standard #dc3545 am Dropdown-Rahmen,
   Theme-eigenes --bs-danger #FF515F am Fehlertext, dazu ein bei 4px/4px
   hart versetzter Schatten) — und #FF515F hat als Text nur 2.92:1 Kontrast
   gegen den Seitenhintergrund, unter den von WCAG 1.4.3 geforderten 4.5:1.
   Vereinheitlicht auf dieselbe geprüfte Farbe wie .alert-danger (8.69:1). */
.was-validated .form-control:invalid,
.form-control.is-invalid,
.was-validated .form-select:invalid,
.form-select.is-invalid {
  border-color: #C84218;
}
.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus,
.was-validated .form-select:invalid:focus,
.form-select.is-invalid:focus {
  border-color: #C84218;
  box-shadow: 0 0 0 0.2rem rgba(200, 66, 24, 0.25);
}
.has-error .form-control,
.input-error .form-control {
  box-shadow: 0 0 0 0.15rem rgba(200, 66, 24, 0.3);
}
.has-error .form-control:focus,
.input-error .form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(200, 66, 24, 0.35);
}
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox {
  color: #C84218;
}

/* ---------------------------------------------------------------------
   Matrix-/Array-Fragen (Tabellenlayout)
   --------------------------------------------------------------------- */

.table-array-radio {
  border-color: var(--lumique-border);
}
.table-array-radio thead th {
  color: var(--bs-body-color);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  padding: 0.75rem 0.5rem;
}
.table-array-radio tbody th.answertext {
  text-align: left;
  font-weight: 500;
  padding: 0.65rem 0.75rem;
}
/* Gleiche Logik wie bei Einfach-/Mehrfachauswahl: Label wechselt zur
   Schmuckfarbe, sobald in der Zeile eine Antwort gewählt ist. Zeilenlabel
   (th) und Radios (in den td-Zellen) sind keine Geschwister im Markup —
   :has() verbindet sie (breit unterstützt; ohne :has()-Unterstützung bleibt
   die Zeile schlicht in der Standardfarbe, kein harter Fehler). */
.table-array-radio tbody tr:has(input[type=radio]:checked) th.answertext {
  color: var(--bs-primary);
}
.table-array-radio td.answer-item {
  text-align: center;
  vertical-align: middle;
  padding: 0.5rem;
}
.table-array-radio .ls-even {
  background-color: var(--lumique-surface-alt);
}
.table-array-radio.table-hover > tbody > tr:hover > td,
.table-array-radio.table-hover > tbody > tr:hover > th {
  background-color: rgba(46, 53, 70, 0.06);
  color: inherit;
}
.table-array-radio,
.table-array-radio > :not(caption) > * > * {
  border-color: var(--lumique-border);
}

/* ---------------------------------------------------------------------
   Frage-/Hilfetexte — zwei unterschiedliche, aus dem Ausgangstheme stammende
   Quellen landen hier nebeneinander: .ls-questionhelp (der von uns beim
   Fragenanlegen eingegebene Hilfetext) ist unstyled/erbt Body-Standard
   (nicht kursiv, normale Textgröße). .ls-question-message (LimeSurveys
   automatischer "Bitte wählen Sie..."-Hinweis) hatte eine eigene, kleinere,
   kursive Regel. Auf das Format von .ls-questionhelp vereinheitlicht.
   --------------------------------------------------------------------- */

/* LimeSurveys eigener automatischer Hinweis ist jetzt vollständig durch
   einen eigenen Theme-Override ersetzt (survey_question_help.twig in
   lumique/views/...), der ALLE Fragetypen einheitlich abdeckt (nicht nur
   die 8, die LimeSurvey selbst kennt) und durchgängig mit Punkt endet.
   Der eingebaute Hinweis wird daher hier ausgeblendet, sonst erschienen
   beide gleichzeitig. */
.question-container .ls-question-message {
  display: none;
}

.question-help-text,
.ls-answers + .help-block,
.help-block {
  color: rgba(46, 53, 70, 0.75);
}

/* ---------------------------------------------------------------------
   "..."-Menü (Umfrageoptionen): mehrere verschiedene Links darin
   ("Zwischengespeicherte Umfrage laden" = .ls-link-loadall, "Später
   fortfahren" = schlichtes .nav-link ohne weitere Klasse) erschienen in
   Theme-Grün — genaue Ursprungsregel nicht auffindbar (mehrere separat
   geladene CSS-Bundles, auch außerhalb von theme_apple.css/custom.css),
   daher direkt am Menü mit hoher Priorität erzwungen, statt jeden
   einzelnen Link separat zu jagen.
   --------------------------------------------------------------------- */
/* a.nav-link.ls-link-action.ls-link-loadall (per DevTools) — Kombination
   aller drei Klassen für maximale Spezifität, da eine noch spezifischere
   Gegen-Regel unsere einzelnen Klassen-Selektoren trotz !important schlug. */
#main-dropdown .nav-link,
.ls-link-action,
.ls-link-loadall,
a.nav-link.ls-link-action.ls-link-loadall {
  background-color: transparent !important;
  color: var(--bs-body-color) !important;
}
#main-dropdown .nav-link:hover,
#main-dropdown .nav-link:focus,
.ls-link-action:hover,
.ls-link-action:focus,
.ls-link-loadall:hover,
.ls-link-loadall:focus,
a.nav-link.ls-link-action.ls-link-loadall:hover,
a.nav-link.ls-link-action.ls-link-loadall:focus {
  /* Hier bewusst Orange statt Dunkelblau, auf Nutzerwunsch. */
  background-color: color-mix(in srgb, var(--bs-danger) 10%, transparent) !important;
  color: var(--bs-danger) !important;
}