/* =====================================================================
   custom.css  –  "sleek"-Variante für die KI-Nutzungsumfrage
   Theme:  schwarz89_fruity_twentythree  (LimeSurvey 6, Fruity TwentyThree)
   Ziel :  dünne Grundschrift, nur Keywords fett, ruhiges Layout,
           große Klickflächen, klarer Auswahl-Zustand  →  geringe
           kognitive Last.   Stand: 2026-05-31

   EINBAU
   1. Konfiguration → Designs (Themes) → "Theme-Editor" neben
      "schwarz89_fruity_twentythree".
   2. Datei  css/custom.css  öffnen, diesen Inhalt einfügen, speichern.
      (custom.css muss in den geladenen CSS-Dateien der Theme stehen –
       bei Fruity TwentyThree standardmäßig der Fall.)
   3. Theme der Umfrage zuweisen: Umfrageeinstellungen → Theme.
   4. Feinschliff: Live-Fragebogen öffnen, F12 (Entwicklertools),
      Element inspizieren, Selektor unten ggf. anpassen.

   HINWEIS Spezifität: Falls eine Regel nicht greift, liegt es an der
   Theme-Spezifität. Dann Selektor konkreter machen (z. B. ".ls-fruity "
   davorsetzen) – siehe LimeSurvey-Manual "Theme options".
   ===================================================================== */

:root {
  --akzent:        #2b6777;              /* ruhiger Akzent: Auswahl, Buttons, Progress */
  --akzent-soft:   rgba(43,103,119,.10); /* dezenter Auswahl-Hintergrund            */
  --text:          #232a2e;              /* Fließtext (weich-schwarz, hoher Kontrast)*/
  --text-muted:    #6b757b;              /* Hilfetexte                              */
  --linie:         #e7eaec;              /* sehr helle Trennlinien                  */
  --radius:        10px;
  --w-thin:        400;                  /* Grundschrift (etwas kräftiger als 300)  */
  --w-key:         600;                  /* nur Keywords / <strong>                 */
  --fs-base:       .95rem;               /* etwas kleinere Default-Schrift          */
}

/* 1) GRUNDTYPOGRAFIE – dünn, ruhig, gut lesbar ------------------------ */
body,
.ls-fruity {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: var(--fs-base);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: .1px;
}

/* dünn erzwingen (schlägt die fetteren Theme-Defaults) */
body, p, li, label, td, th, legend, dd, dt, span,
.question-title, .ls-question-text, .group-title,
.ls-group-title, .survey-name, h1, h2, h3, h4 {
  font-weight: var(--w-thin) !important;
}

/* 2) NUR KEYWORDS FETT – <strong>/<b> im Text heben sich ab ----------- */
strong, b {
  font-weight: var(--w-key) !important;
}

/* 3) FRAGETEXT – ruhig, etwas größer, NICHT komplett fett ------------- */
.question-title,
.ls-question-text {
  font-size: 1.05rem;
  line-height: 1.5;
  margin-bottom: .6rem;
}
.ls-question-help,
.question-help,
.hint,
.ls-em-tip {
  color: var(--text-muted) !important;
  font-size: .9rem;
}

/* 4) GRUPPEN-/TEIL-ÜBERSCHRIFT – dünn, groß, leicht gesperrt ---------- */
.group-title,
.ls-group-title,
.survey-name {
  font-size: 1.4rem;
  letter-spacing: .3px;
  margin-bottom: .4rem;
}

/* 5) WENIGER RAHMEN/SCHATTEN, MEHR WEISSRAUM -------------------------- */
.question-container {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--linie) !important;
}

/* 6) EINGABEFELDER – größere Klickflächen, Akzentfarbe, Cursor -------- */
input[type="radio"],
input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--akzent);   /* native Steuerelement-Farbe (moderne Browser) */
  cursor: pointer;
}
.form-check,
.answer-item {
  min-height: 2.4rem;
  padding-top: .25rem;
  padding-bottom: .25rem;
}
.form-check-label,
.answer-item label { cursor: pointer; }

/* 7) AUSWAHL-ZUSTAND klar hervorheben (Progressive Enhancement :has) --
   Moderne Browser (Baseline 2023+); ältere ignorieren es einfach.      */
.form-check:has(input:checked),
.answer-item:has(input:checked) {
  background: var(--akzent-soft);
  border-radius: var(--radius);
}

/* 8) MATRIX/ARRAY – Zebra, Hover, Auswahl, mehr Luft ------------------ */
table.subquestion-list td,
table.subquestion-list th { padding: .65rem .5rem; }

table.subquestion-list tbody tr:nth-child(even) { background: #fafbfb; }
table.subquestion-list tbody tr:hover           { background: var(--akzent-soft); }
table.subquestion-list tbody tr:has(input:checked) { background: var(--akzent-soft); }

table.subquestion-list thead th {
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--linie);
}
/* Optional: Skalen-Kopf beim Scrollen sichtbar halten.
   (Sauberer ist das Frage-Attribut "Kopfzeilen wiederholen" / repeat_header.)
table.subquestion-list thead th {
  position: sticky; top: 0; background: #fff; z-index: 2;
} */

/* 8b) GESTAPELTE LIKERT-/MATRIX-BLÖCKE ruhiger (z. B. Teil 7) ----------
   Rein visuell, keine Wort-Hervorhebung -> kein Antwort-Bias.            */
.question-container { margin-bottom: 1.1rem; }            /* klare Trennung der Matrizen */
table.subquestion-list thead th {                         /* Skala-Kopf tritt zurück */
  font-size: .82rem;
  line-height: 1.15;
  font-weight: var(--w-thin) !important;
}
table.subquestion-list tbody td,
table.subquestion-list tbody th {                         /* luftigere Zeilen */
  padding-top: .7rem;
  padding-bottom: .7rem;
}

/* 9) BUTTONS – flach, klarer Primär-Akzent --------------------------- */
.btn-primary,
#ls-button-submit {
  background: var(--akzent) !important;
  border-color: var(--akzent) !important;
  color: #fff !important;
  font-weight: 500 !important;
  border-radius: var(--radius);
  padding: .55rem 1.4rem;
}
.btn-outline-secondary {
  border-radius: var(--radius);
  font-weight: 400 !important;
}

/* 10) FORTSCHRITTSBALKEN – schlank, dezent --------------------------- */
.progress      { height: 6px; border-radius: 999px; background: var(--linie); }
.progress-bar  { background: var(--akzent) !important; }

/* 11) PFLICHT-STERNCHEN dezenter (nur die Einwilligung ist Pflicht) --- */
.asterisk, .ls-asterisk, .required-star { color: #c0626b !important; font-weight: 400 !important; }

/* 12) MOBIL – lesbare Größen ----------------------------------------- */
@media (max-width: 600px) {
  .question-title, .ls-question-text { font-size: 1.0rem; }
  .question-container { padding: 1.1rem 0; }
  .group-title, .ls-group-title, .survey-name { font-size: 1.25rem; }
}

/* 13) MEHRSPALTIGE ANTWORTEN reihenweise (links -> rechts) statt spaltenweise.
   Das Antwort-<ul> trägt je nach LimeSurvey-Version  data-column-count="N",
   nbcol-N  und/oder  ls-column-count-N  und füllt per CSS-`column-count`
   SENKRECHT (1‑4 / 2‑5 / 3‑6). Wir treffen alle drei Marker, schalten
   column-count ab und rendern als Grid (grid-auto-flow:row = WAAGERECHT,
   1‑2‑3 / 4‑5‑6). Markup verifiziert an listradio/answer.twig.              */
ul[data-column-count],
ul[class*="nbcol-"],
ul[class*="ls-column-count-"] {
  columns: unset !important;
  column-count: unset !important;
  -webkit-column-count: unset !important;
  display: grid !important;
  grid-auto-flow: row;                /* Reihe für Reihe                     */
  gap: .15rem 1.5rem;
  align-items: start;
}
ul[data-column-count="2"], ul.nbcol-2, ul.ls-column-count-2 { grid-template-columns: repeat(2, 1fr); }
ul[data-column-count="3"], ul.nbcol-3, ul.ls-column-count-3 { grid-template-columns: repeat(3, 1fr); }
ul[data-column-count="4"], ul.nbcol-4, ul.ls-column-count-4 { grid-template-columns: repeat(4, 1fr); }
ul[data-column-count="5"], ul.nbcol-5, ul.ls-column-count-5 { grid-template-columns: repeat(5, 1fr); }
ul[data-column-count="6"], ul.nbcol-6, ul.ls-column-count-6 { grid-template-columns: repeat(6, 1fr); }
ul[data-column-count="7"], ul.nbcol-7, ul.ls-column-count-7 { grid-template-columns: repeat(7, 1fr); }
ul[data-column-count="8"], ul.nbcol-8, ul.ls-column-count-8 { grid-template-columns: repeat(8, 1fr); }

@media (max-width: 600px) {           /* mobil: eine Spalte (sonst zu eng)   */
  ul[data-column-count],
  ul[class*="nbcol-"],
  ul[class*="ls-column-count-"] { grid-template-columns: 1fr; }
}