/* =============================================================================
   Leitindex für Security  |  LimeSurvey Survey Theme "ITKlub"
   Basis:  fruity_twentythree (LimeSurvey 7.0.10)
   CI:     IT Klub Mainz & Rheinhessen e.V.
           Rot #CB2031 · Text #252525 · Dunkel #303030 · Open Sans / Montserrat

   Alle Selektoren sind gegen theme_apple.css geprüft.
   custom.css lädt nach theme_apple.css und base.css, deshalb reicht meist
   das Präfix "html body" um die Spezifität zu heben. !important steht nur
   dort, wo die Basis selbst !important benutzt oder wo Theme-Optionen
   Inline-Styles ausgeben.
   ============================================================================= */


/* --- 1. Schriften --------------------------------------------------------------
   Die Microsite deklariert in fonts.css nur Namen und lädt keine Dateien:
     --font-body: "Open Sans", Arial, sans-serif
     --font-heading: Montserrat, Arial, sans-serif
   Keine der beiden Schriften ist auf Windows oder macOS vorinstalliert, es
   greift also bei den meisten Besuchern Arial. Hier steht bewusst derselbe
   Stack, damit Microsite und Fragebogen heute identisch aussehen.

   Sobald du die Dateien selbst hostest, beide Blöcke einkommentieren und die
   woff2-Dateien nach upload/themes/survey/ITKlub/files/ legen. Open Sans und
   Montserrat stehen unter der SIL Open Font License, Selbsthosting ist also
   erlaubt und erspart den Aufruf eines fremden CDN.
   -------------------------------------------------------------------------------- */
/*
@font-face { font-family:"Open Sans";  src:url("../files/OpenSans-Regular.woff2")  format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Open Sans";  src:url("../files/OpenSans-SemiBold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Open Sans";  src:url("../files/OpenSans-Bold.woff2")     format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("../files/Montserrat-SemiBold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Montserrat"; src:url("../files/Montserrat-Bold.woff2")     format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
*/


/* --- 2. Tokens und Umbiegen der Bootstrap-Variablen ---------------------------
   Die Basis definiert diese Variablen in :root. Gleiche Spezifität, wir laden
   später, also gewinnen wir. Wirkt auf alle .text-*, .bg-*, .alert-* Utilities.
   ---------------------------------------------------------------------------- */
:root {
  /* Marke. Werte aus main.css der Microsite.
     Hinweis: die Website rendert derzeit 2 Rottöne, weil --color-primary
     nirgends definiert ist und die Fallbacks auf #c12030 zeigen.
     Hier gilt das deklarierte Token --red. */
  --itk-red:        #CB2031;
  --itk-red-hover:  #A91929;
  --itk-red-active: #8E1522;
  --itk-red-rgb:    203, 32, 49;
  --itk-red-tint:   #FBEEF0;

  /* Neutrale */
  --itk-ink:        #252525;   /* --text */
  --itk-dark:       #303030;   /* --dark, Footer und dunkle Bänder */
  --itk-ink-600:    #555555;
  --itk-ink-400:    #767676;
  --itk-line:       #D7D7D7;   /* --border */
  --itk-card-line:  #DEDEDE;   /* --card-border */
  --itk-tint:       #F5F5F5;   /* --light */
  --itk-white:      #FFFFFF;

  /* Form */
  --itk-r-card:     0.875rem;  /* --card-radius */
  --itk-r-input:    0.3rem;
  --itk-r-pill:     999px;
  --itk-r-large:    28px;      /* --radius */
  --itk-shadow-card: 0 0.5rem 1.75rem rgba(0, 0, 0, .05);
  --itk-ease:       cubic-bezier(.2, .6, .3, 1);

  /* Maße.
     Die Website fährt --content-width 1320px, begrenzt Überschriften und
     Fließtext darin aber auf 42rem bis 48rem. 1060px für ein Formular liegt
     näher an diesem Leserhythmus als 1320px. Wer strikt angleichen will,
     trägt hier 1320px ein. */
  --itk-container:  1060px;
  --itk-pad:        28px;      /* --content-padding */

  /* Typografie, identisch zu fonts.css der Microsite */
  --itk-font-body:    "Open Sans", Arial, sans-serif;
  --itk-font-heading: Montserrat, Arial, sans-serif;
  --itk-font-mono:    ui-monospace, "Courier New", monospace;
  --itk-font:         var(--itk-font-body);

  /* Bootstrap-Variablen der Basis überschreiben */
  --bs-primary:      #CB2031;
  --bs-primary-rgb:  203, 32, 49;
  --bs-info:         #252525;   /* war #8146F6, das Lila der Hinweistexte */
  --bs-info-rgb:     37, 37, 37;
  --bs-danger:       #CB2031;
  --bs-danger-rgb:   203, 32, 49;
  --bs-dark:         #303030;
  --bs-dark-rgb:     48, 48, 48;
  --bs-body-color:   #252525;
  --bs-link-color:   #CB2031;
}


/* --- 3. Grundfläche und Typografie -------------------------------------------- */
html body,
html body button,
html body input,
html body select,
html body textarea,
html body .form-control,
html body label {
  font-family: var(--itk-font) !important;
}

html body {
  color: var(--itk-ink) !important;
  background-color: var(--itk-tint) !important;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Fußzeile ans Seitenende.
   Die Basis setzt #outerframeContainer auf min-height 88%, das reicht nie
   ganz nach unten und der Footer hängt bei kurzen Seiten in der Luft.
   box-sizing border-box gilt global, deshalb rechnet 100vh die von
   LimeSurvey per JavaScript gesetzte Polsterung oben bereits mit ein. */
html, html body { height: auto; }
html body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
html body > article { flex: 1 0 auto; }
html body #outerframeContainer { min-height: auto; }
html body .itk-footer { flex: 0 0 auto; }   /* margin-top: auto steht im Fußzeilenabschnitt */

html body h1, html body .h1,
html body h2, html body .h2,
html body h3, html body .h3 {
  font-family: var(--itk-font-heading) !important;
  color: var(--itk-ink);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: 0;
}

html body a {
  color: var(--itk-red);
  text-decoration: none;
}
html body a:hover,
html body a:focus {
  color: var(--itk-red-hover);
  text-decoration: underline;
}
html body .btn-link,
html body .btn-link:hover,
html body .btn-link:focus { color: var(--itk-red); }

/* Lesebreite.
   Korrektur: die Breite kommt nicht von .container sondern von "col-xl-8"
   innerhalb von container-fluid. Auf einem 2560er Schirm sind das rund
   1700px, dadurch war die Matrixfrage so weit auseinandergezogen. */
html body #outerframeContainer > .row > [class*="col-"],
html body .top-container > .row > [class*="col-"] {
  max-width: var(--itk-container);
  float: none;
  margin-left: auto;
  margin-right: auto;
}
/* Damit der Dropdown-Button oben bündig zum Inhalt steht */
html body #survey-nav > .container-fluid {
  max-width: var(--itk-container);
  margin-left: auto;
  margin-right: auto;
}
html body #welcome-container { max-width: none; }


/* --- 4. Kopf, Logo, Sprachwahl ------------------------------------------------- */
html body .navbar {
  background-color: var(--itk-white) !important;
  box-shadow: none;
  border-bottom: 1px solid var(--itk-line);
}
html body .logo-container > img { max-height: 56px; padding: 6px 0; }

/* Kopfleiste im Maß der Website: .header-inner hat dort min-height 94px,
   das Logo eine feste Breite von 168px. Das Logo wird von custom.js
   eingesetzt, weil die Theme-Option gar keinen Container rendert. */
html body #survey-nav.navbar {
  min-height: 94px;
  padding-top: 0;
  padding-bottom: 0;
}
html body #survey-nav > .container-fluid {
  min-height: 94px;
  gap: 24px;
}
html body .itk-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity 150ms ease;
}
html body .itk-brand:hover { opacity: .8; }
html body .itk-brand:focus-visible {
  outline: 2px solid var(--itk-red);
  outline-offset: .25rem;
}
html body .itk-brand img {
  display: block;
  width: 168px;
  height: auto;
}

/* Die Basis setzt die obere Polsterung per JavaScript, gemessen wird aber
   bevor unser Logo im DOM ist. Deshalb hier fest, !important schlägt den
   Inline-Style. */
html body { padding-top: 94px !important; }

@media (max-width: 900px) {
  html body #survey-nav.navbar,
  html body #survey-nav > .container-fluid { min-height: 72px; }
  html body .itk-brand img { width: 132px; }
  html body { padding-top: 72px !important; }
}

html body .form-change-lang #language-changer-select { color: var(--itk-red); }
html body .form-change-lang #lang-select::after { color: var(--itk-red); }
html body #survey-nav .navbar-toggler .ri-more-fill { color: var(--itk-ink-400); }

/* CI-Bausteine, direkt im Fragetext oder in der Gruppenbeschreibung einsetzbar */
/* Eyebrow wie in den Sektionen der Website: Fließtextschrift, Versalien,
   gesperrt, rot. Die Monospace-Variante gibt es dort nur im Footer-Abo-Block
   und beruht auf --font-monospace, das gar nicht definiert ist. */
.itk-eyebrow {
  display: inline-block;
  font-family: var(--itk-font-body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .09rem;
  text-transform: uppercase;
  color: var(--itk-red);
  margin-bottom: 10px;
}
/* Gefüllte Variante, wie im Footer der Website */
.itk-eyebrow--filled {
  color: var(--itk-white);
  background: var(--itk-red);
  padding: .08rem .18rem;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Section Divider der Website: durchgehende rote 2px-Linie mit Punkt in der
   Mitte. Als <hr class="itk-divider"> in Gruppenbeschreibungen einsetzbar. */
.itk-divider {
  position: relative;
  width: 100%;
  height: 2px;
  margin: 3rem 0;
  padding: 0;
  border: 0;
  background: var(--itk-red);
  opacity: 1;
}
.itk-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--itk-red);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}


/* --- 5. Fortschrittsbalken ------------------------------------------------------ */
html body .progress {
  background-color: var(--itk-line);
  border-radius: var(--itk-r-pill);
  overflow: hidden;
}
html body .top-container .progress { height: 6px; }
html body .progress-bar {
  background-color: var(--itk-red);
  box-shadow: none;
  min-width: 0;
}


/* --- 6. Gruppen und Frage-Karten ------------------------------------------------
   Die Gruppenüberschrift der Basis steht auf 2.85rem bei 52px Zeilenhöhe.
   Für einen Fragebogen zu groß, deshalb heruntergesetzt.
   ------------------------------------------------------------------------------- */
html body .group-container .group-title {
  font-family: var(--itk-font-heading) !important;
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--itk-ink);
  margin-top: .5em;
  margin-bottom: 12px;
}
html body .group-container .group-description {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--itk-ink-600);
  margin-bottom: 28px;
}

html body .question-container {
  background: var(--itk-white) !important;
  border: 1px solid var(--itk-card-line);
  border-radius: var(--itk-r-card);
  box-shadow: var(--itk-shadow-card);
  padding: 24px 28px;
  margin-bottom: 20px;
  transition: border-color .18s var(--itk-ease);
}
html body .question-container:focus-within {
  border-color: rgba(var(--itk-red-rgb), .45);
}

/* Fragetext. Die echte Klasse heißt ls-label-question. */
/* Fragetexte bleiben in der Fließtextschrift. Auf der Website steht Montserrat
   nur in kurzen Überschriften, Fragen sind ganze Sätze und lesen sich in
   Open Sans besser. Wer strikt angleichen will, setzt hier die Heading-Schrift. */
html body .question-container .ls-label-question {
  font-family: var(--itk-font-body) !important;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--itk-ink);
}
html body .question-container .question-title-container { margin-bottom: 8px; }

html body .ls-questionhelp,
html body .questionhelp,
html body .question-container .help-block {
  color: var(--itk-ink-400) !important;
  font-weight: 400;
  font-size: .9rem;
  line-height: 1.6;
}

html body .question-container .asterisk { color: var(--itk-red); }

/* Der Hinweis "Bitte wählen Sie eine der folgenden Antworten" lief über
   .text-info und damit über das Lila. Jetzt Ink und nicht mehr farbig. */
html body .question-container .ls-question-message,
html body .question-container .text-info {
  color: var(--itk-ink-600) !important;
  font-style: normal;
  font-size: .9rem;
}


/* --- 7. Radiobuttons ------------------------------------------------------------
   LimeSurvey versteckt das echte Input und zeichnet über ::before und ::after.
   Genau diese Regeln müssen getroffen werden.
   ------------------------------------------------------------------------------- */
html body .radio-item label::before { border: 2px solid #9A9A9A; background-color: #fff; }
html body .radio-item label::after,
html body .radio-item input[type=radio] + label::after { background-color: var(--itk-red); }

html body .radio-item input[type=radio]:checked + label::before { border-color: var(--itk-red); }
html body .radio-item input[type=radio]:checked + label::after  { background-color: var(--itk-red); }
html body .radio-item input[type=radio]:checked + label         { color: var(--itk-red); }
html body .radio-item input[type=radio]:focus-visible + label::before {
  box-shadow: 0 0 0 3px rgba(var(--itk-red-rgb), .3);
}


/* --- 8. Checkboxen --------------------------------------------------------------- */
html body .checkbox-item label::before { border: 2px solid #9A9A9A; background-color: #fff; border-radius: 3px; }
html body .checkbox-item input[type=checkbox]:checked + label::before { border-color: var(--itk-red); }
html body .checkbox-item input[type=checkbox]:checked + label::after  { color: var(--itk-red); background-color: transparent; }
html body .checkbox-item input[type=checkbox]:checked + label         { color: var(--itk-red); }
html body .checkbox-item input[type=checkbox]:focus-visible + label::before {
  box-shadow: 0 0 0 3px rgba(var(--itk-red-rgb), .3);
}

/* Die Basis setzt das global über "body .answer-item label::after" */
html body .answer-item label::after { background-color: var(--itk-red); }

/* Einwilligungs-Checkbox im Datenschutzblock */
html body .privacy .checkbox-item label::before { border: 2px solid var(--itk-red); }


/* --- 9. Antwortlabels und Eingabefelder ------------------------------------------ */
html body .answer-item label,
html body .ls-answers label,
html body .control-label {
  color: var(--itk-ink);
  font-weight: 500;
}

html body .form-control,
html body .form-select {
  border: 2px solid #9A9A9A;
  border-radius: var(--itk-r-input);
  color: var(--itk-ink);
  font-size: 1rem;
}
html body .form-control:focus,
html body .form-select:focus {
  border-color: var(--itk-ink);
  box-shadow: 4px 4px 0 rgba(var(--itk-red-rgb), .22);
}
html body .form-control.ls-important-field { border: 2px solid var(--itk-ink) !important; box-shadow: 8px 8px 0 var(--itk-tint); }
html body .form-control.ls-important-field:focus { box-shadow: 8px 8px 0 rgba(var(--itk-red-rgb), .22); }

html body .input-group-text,
html body label .input-group-text {
  background-color: var(--itk-ink);
  border-color: var(--itk-ink);
  color: var(--itk-white);
}


/* --- 10. Matrixfragen, Reifegradskala 0 bis 5 -------------------------------------
   Zebrastreifen liefert die Basis bereits als .ls-even.
   Kopfzeile ist .ls-heading. Kopf in Schwarz, damit Rot dem Weiter-Button bleibt.
   --------------------------------------------------------------------------------- */
html body table.ls-answers { table-layout: fixed; width: 100%; }

html body .ls-answers { margin-bottom: 0; }

/* Kopfzeile.
   Satzschreibung statt Versalien in Mono, sonst sind lange Spaltentitel
   wie "Kunden oder Projekte, kein eigener Standort" nicht lesbar.
   Die erste Zelle der Kopfzeile ist ein td und kein th, deshalb beide. */
html body .ls-answers .ls-heading th,
html body .ls-answers .ls-heading td,
html body .ls-answers thead th {
  background: var(--itk-white);
  color: var(--itk-ink);
  font-family: var(--itk-font) !important;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
  text-align: center;
  vertical-align: bottom;
  padding: 0 8px 10px;
  border-bottom: 2px solid var(--itk-red);
}
html body .ls-answers .ls-heading td:first-child { text-align: left; }

/* Zeilenbeschriftung */
html body .ls-answers tbody .answertext,
html body .ls-answers tbody th.answertext {
  color: var(--itk-ink);
  font-weight: 500;
  font-size: .95rem;
  line-height: 1.4;
  text-align: left;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Zebrastreifen. LimeSurvey liefert ls-even und ls-odd im Markup mit. */
html body .ls-even { background-color: #FAFAFA; }
html body .ls-odd  { background-color: var(--itk-white); }

/* Spaltentrenner. Ohne sie verrutscht man bei 4 Optionen in die Nachbarspalte.
   Nur vertikale Polsterung anfassen, die horizontale zentriert den Radiobutton. */
html body .ls-answers tbody td.radio-item,
html body .ls-answers tbody td.checkbox-item {
  padding-top: 9px;
  padding-bottom: 9px;
  border-left: 1px solid #EDEDED;
}

/* Fadenkreuz: Zeile plus Zelle, damit die Zuordnung eindeutig bleibt */
html body .ls-answers tbody tr:hover { background-color: rgba(var(--itk-red-rgb), .05); }
html body .ls-answers tbody td.radio-item:hover,
html body .ls-answers tbody td.checkbox-item:hover { background-color: rgba(var(--itk-red-rgb), .13); }

/* Klebende Kopfzeile am Desktop, hilft bei den langen Reifegradmatrizen */
@media only screen and (min-width: 761px) {
  html body .ls-answers .ls-heading th,
  html body .ls-answers .ls-heading td,
  html body .ls-answers thead th { position: sticky; top: 0; z-index: 2; }
}

/* Blockdarstellung. Die Media Query ist absichtlich identisch mit der
   der Basis, sonst kippt die Darstellung auf dem iPad auseinander. */
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
  html body .ls-answers tbody tr {
    border: 1px solid var(--itk-line);
    border-radius: var(--itk-r-input);
    padding: 12px 14px;
    margin-bottom: 14px;
    background-color: var(--itk-white);
  }
  html body .ls-answers tbody th.answertext {
    font-weight: 700;
    font-size: 1rem;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--itk-line);
    margin-bottom: 6px;
  }
  html body .ls-answers tbody td.radio-item,
  html body .ls-answers tbody td.checkbox-item {
    border-left: none;
    padding-top: 7px;
    padding-bottom: 7px;
  }
}


/* --- 11. Buttons -----------------------------------------------------------------
   Pillenform, Rot gefüllt für die Primäraktion.
   Die violetten Glow-Schatten der Basis werden entfernt.
   --------------------------------------------------------------------------------- */
html body .btn {
  border-radius: var(--itk-r-pill);
  font-weight: 700;
  font-size: 1rem;
  min-height: auto;
  padding: .72rem 1.35rem;
  transition: background-color .16s var(--itk-ease),
              border-color .16s var(--itk-ease),
              transform .12s var(--itk-ease),
              box-shadow .16s var(--itk-ease);
}
html body .btn:active { transform: scale(.99); }

html body .btn-primary,
html body .btn-primary:focus,
html body .btn-primary:active,
html body .btn-primary.active,
html body .btn-primary:active:focus {
  background-color: var(--itk-red);
  border-color: var(--itk-red);
  color: var(--itk-white);
  box-shadow: none;
}
html body .btn-primary:hover {
  background-color: var(--itk-red-hover);
  border-color: var(--itk-red-hover);
  color: var(--itk-white);
  box-shadow: none;
  transform: translateY(-1px);
}

/* Der Pfeil ist auf der Website Teil der Primäraktion, siehe
   "Jetzt Platz sichern ... →". Nur am Weiter- und Absenden-Button,
   nicht am Sprachwechsler, der ebenfalls btn-primary trägt. */
html body .ls-move-next-btn::after,
html body .ls-move-submit-btn::after {
  content: " \2192";
  margin-left: .5em;
  font-weight: 400;
}
html body .btn-primary:active,
html body .btn-primary:active:focus {
  background-color: var(--itk-red-active);
  border-color: var(--itk-red-active);
}

/* Zurück und Abbrechen: Outline, füllt sich rot */
html body .btn-outline-secondary,
html body .btn-secondary {
  background-color: transparent;
  border: 1.5px solid var(--itk-red);
  color: var(--itk-red);
  box-shadow: none;
}
html body .btn-outline-secondary:hover,
html body .btn-secondary:hover {
  background-color: var(--itk-red);
  border-color: var(--itk-red);
  color: var(--itk-white);
  box-shadow: none;
  transform: translateY(-1px);
}
html body .btn-outline-secondary:focus,
html body .btn-outline-secondary:active,
html body .btn-secondary:focus,
html body .btn-secondary:active { box-shadow: none; }

html body .btn-dark {
  background-color: var(--itk-ink);
  border-color: var(--itk-ink);
  color: var(--itk-white);
}

html body #navigator-container {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--itk-line);
}
html body #navigator-container > hr { display: none; }


/* --- 12. Hinweise und Fehler -------------------------------------------------------
   Rot ist Markenfarbe, deshalb werden Fehler nicht über den Farbton getrennt
   sondern über die Behandlung: getönte Fläche, Randbalken, fette Schrift.
   Die einzige große rote Fläche auf der Seite bleibt der Weiter-Button.
   ----------------------------------------------------------------------------------- */
html body .alert {
  background-color: var(--itk-red-tint);
  border: 1px solid rgba(var(--itk-red-rgb), .25);
  border-left: 4px solid var(--itk-red);
  border-radius: var(--itk-r-input);
  color: var(--itk-ink);
  font-weight: 600;
}
html body .alert-info,
html body .alert-primary {
  background-color: var(--itk-tint);
  border-left-color: var(--itk-ink);
  color: var(--itk-ink);
  font-weight: 400;
}

/* Warnungen sind keine Fehler. Bernstein liegt außerhalb der Markenpalette,
   das Design System lässt funktionale Feedbackfarben dafür ausdrücklich zu.
   Sonst sieht "Diese Umfrage ist momentan nicht aktiv" aus wie ein Abbruch. */
html body .alert-warning {
  background-color: #FFF8E6;
  border: 1px solid #F0DDA8;
  border-left: 4px solid #D99B00;
  color: var(--itk-ink);
  font-weight: 400;
}

html body .has-error .form-control,
html body .input-error .form-control { box-shadow: 4px 4px 0 var(--itk-red); }
html body .has-error .help-block,
html body .has-error .control-label { color: var(--itk-red); }

html body .has-success .form-control { box-shadow: 4px 4px 0 var(--itk-ink); }
html body .has-success .help-block,
html body .has-success .control-label { color: var(--itk-ink); }


/* --- 13. Datenschutzblock ------------------------------------------------------------ */
html body .privacy {
  background: var(--itk-white);
  border: 1px solid var(--itk-line);
  border-top: 3px solid var(--itk-red);
  border-radius: var(--itk-r-card);
  padding: 20px 24px;
  margin-top: 32px;
  font-size: .875rem;
  line-height: 1.65;
}
html body #datasecurity_notice,
html body #datasecurity_notice_label,
html body .datasecurity-checkbox-label { color: var(--itk-ink-600); }
html body .datasecurity-checkbox-label a.show-policy { color: var(--itk-red); text-decoration: underline; }

/* LimeSurvey hängt text-primary an das Einwilligungslabel. Seit --bs-primary
   auf Markenrot steht, leuchtet der Satz rot und liest sich wie eine
   Fehlermeldung. Hier wieder auf Ink zurück. */
html body .datasecurity-checkbox-label.text-primary,
html body label.datasecurity-checkbox-label {
  color: var(--itk-ink) !important;
  font-weight: 600;
}


/* --- 13b. Fußzeile ------------------------------------------------------------------
   Nachbau des Website-Footers: dunkles Band #303030, Markenblock links mit
   Logo, senkrechtem Trenner und Claim, darunter eine Beschreibung, rechts die
   Rollentrennung. Abschließend die schmale Zeile mit Trennlinie oben,
   Copyright links und Rechtslinks rechts. Werte aus main.css.
   Wird von custom.js eingefügt, weil das Seitengerüst von LimeSurvey auf den
   Teilnehmerseiten gar keinen Footer enthält.
   ------------------------------------------------------------------------------------- */
html body .itk-footer {
  /* auto statt eines festen Werts: schiebt die Fußzeile bei kurzen Seiten ans
     Ende, rechnet bei langen Seiten zu 0. Ein fester Wert an dieser Stelle
     würde das margin-top: auto der Sticky-Regeln überschreiben, weil die
     Kurzschreibweise margin alle vier Seiten setzt. */
  margin: auto 0 0;
  color: var(--itk-white);
  background: var(--itk-dark);
  font-family: var(--itk-font-body);
}
html body .itk-footer p,
html body .itk-footer ul { margin: 0; padding: 0; }
html body .itk-footer li { list-style: none; }

/* Hauptbereich */
html body .itk-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr);
  width: 100%;
  max-width: var(--itk-container);
  margin: 0 auto;
  padding: 3rem var(--itk-pad) 2.25rem;
  gap: clamp(2rem, 5vw, 4rem);
}

/* Markenblock */
html body .itk-footer__brand { max-width: 28rem; }
html body .itk-footer__logo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .875rem;
}
html body .itk-footer__logo img {
  display: block;
  width: 8.5rem;
  height: auto;
}
html body .itk-footer__claim a {
  color: inherit;
  text-decoration: none;
}
html body .itk-footer__claim a:hover,
html body .itk-footer__claim a:focus-visible {
  text-decoration: underline;
  text-underline-offset: .2rem;
}
html body .itk-footer__role a {
  color: rgba(255, 255, 255, .74);
  text-decoration: none;
}
html body .itk-footer__role a:hover,
html body .itk-footer__role a:focus-visible {
  color: var(--itk-white);
  text-decoration: underline;
  text-underline-offset: .2rem;
}
html body .itk-footer__claim {
  padding-left: .875rem;
  color: var(--itk-white);
  border-left: 1px solid rgba(255, 255, 255, .35);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
}
html body .itk-footer__description {
  max-width: 30rem;
  margin: 1.5rem 0 0 !important;
  color: rgba(255, 255, 255, .74);
  font-size: .8125rem;
  line-height: 1.7;
}

/* Rollen */
html body .itk-footer__heading {
  margin: 0 0 1rem !important;
  color: var(--itk-white);
  font-family: var(--itk-font-body);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12rem;
  line-height: 1.4;
  text-transform: uppercase;
}
html body .itk-footer__roles {
  display: grid;
  gap: .85rem;
}
html body .itk-footer__role {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  color: rgba(255, 255, 255, .74);
  font-size: .8125rem;
  line-height: 1.45;
}
html body .itk-footer__role-key {
  display: inline-block;
  min-width: 6.5rem;
  color: var(--itk-white);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .11rem;
  text-transform: uppercase;
}
html body .itk-footer__role-logo {
  height: 2.25rem;
  width: auto;
  display: block;
}

/* Notlösung, solange keine weiße Logodatei vorliegt: das dunkle Logo wird
   rechnerisch zu Weiß. Funktioniert bei ein- und mehrfarbigen Logos, die
   Farbe geht dabei verloren. Sobald eine echte weiße PNG im files-Ordner
   liegt, in custom.js den Namen eintragen und invertieren auf false setzen. */
html body .itk-footer__logo--invert {
  filter: brightness(0) invert(1);
}
html body .itk-footer__logo-link,
html body .itk-footer__role-logo-link {
  display: inline-flex;
  align-items: center;
  transition: opacity 150ms ease;
}
html body .itk-footer__logo-link:hover,
html body .itk-footer__role-logo-link:hover { opacity: .75; }
html body .itk-footer__logo-link:focus-visible,
html body .itk-footer__role-logo-link:focus-visible {
  outline: 2px solid var(--itk-white);
  outline-offset: .25rem;
}

/* Untere Zeile */
html body .itk-footer__bottom {
  width: 100%;
  max-width: var(--itk-container);
  margin: 0 auto;
  padding-left: var(--itk-pad);
  padding-right: var(--itk-pad);
}
html body .itk-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4rem;
  padding: 1rem 0;
  gap: 2rem;
  color: rgba(255, 255, 255, .48);
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: .6875rem;
}
html body .itk-footer__bottom-inner nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
html body .itk-footer__bottom-inner a {
  color: rgba(255, 255, 255, .62);
  text-decoration: none;
}
html body .itk-footer__bottom-inner a:hover,
html body .itk-footer__bottom-inner a:focus-visible {
  color: var(--itk-white);
  text-decoration: underline;
  text-underline-offset: .2rem;
}
html body .itk-footer a:focus-visible {
  outline: 2px solid var(--itk-white);
  outline-offset: .2rem;
}

@media (max-width: 900px) {
  html body .itk-footer__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
@media (max-width: 560px) {
  html body .itk-footer__inner { padding: 2.5rem var(--itk-pad) 2rem; }
  html body .itk-footer__logo { flex-direction: column; align-items: flex-start; }
  html body .itk-footer__claim {
    padding-top: .5rem;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .35);
    border-left: 0;
  }
  html body .itk-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }
}


/* --- 14. Abschlussseite --------------------------------------------------------------- */
html body .completed-wrapper .completed-heading {
  font-family: var(--itk-font-heading) !important;
  color: var(--itk-ink);
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.02em;
}
html body .completed-wrapper .completed-Content { color: var(--itk-ink-600); font-size: 1.05rem; }
html body .well .thankyou { font-size: 2rem; line-height: 1.2; font-weight: 700; }


/* --- 14b. Umfragenliste ---------------------------------------------------------
   Die Seite ohne Token. Nur Selektoren, die in der Basis-CSS belegt sind.
   --------------------------------------------------------------------------------- */

/* LimeSurvey-Logo und Fußzeile weg, den Platz übernimmt der eigene Kopf */
html body #surveys-list-jumbotron img.site-surveylist-logo,
html body img.site-surveylist-logo,
html body .ls-logo { display: none !important; }
html body #surveyListFooter { display: none !important; }

html body #surveys-list-jumbotron { text-align: left; }

html body #surveys-list-container {
  width: 100%;
  max-width: var(--itk-container);
  margin: 0 auto;
  padding: 0 var(--itk-pad) 48px;
  /* Das Theme-Skript setzt hier per Inline-Style eine Mindesthöhe in
     Viewporthöhe. Zusammen mit der eigenen Fußzeile wird die Seite dadurch
     zu lang und der Footer rutscht unter die Falz. Inline schlägt CSS,
     deshalb !important. */
  min-height: 0 !important;
}

/* Der Jumbotron enthält nur noch ausgeblendete Reste, seine Zeile würde
   sonst eine leere Lücke lassen. */
html body #surveys-list-jumbotron { display: none !important; }

/* Überschrift über der Liste als schlichte Zeile, der eigentliche Titel
   steht bereits im Kopfbereich. */
html body .survey-list-heading h2 {
  margin: 28px 0 4px !important;
  font-family: var(--itk-font-body) !important;
  font-size: .95rem;
  font-weight: 600;
  color: var(--itk-ink-600);
}

/* Kontaktzeile unter der Liste */
html body .survey-contact {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--itk-line);
  font-size: .85rem;
  line-height: 1.6;
  color: var(--itk-ink-400);
}

/* Eigener Kopf, von custom.js eingesetzt */
html body .itk-list-head {
  width: 100%;
  max-width: var(--itk-container);
  margin: 0 auto;
  padding: 48px var(--itk-pad) 8px;
}
html body .itk-list-head__logo { display: inline-block; margin-bottom: 28px; }
html body .itk-list-head__logo img { display: block; width: 168px; height: auto; }
html body .itk-list-head__title {
  margin: 0 0 12px;
  font-family: var(--itk-font-heading) !important;
  font-size: 1.9rem;
  line-height: 1.16;
  font-weight: 700;
  color: var(--itk-ink);
}
html body .itk-list-head__text {
  max-width: 42rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--itk-ink-600);
}
html body .itk-list-head__text a { color: var(--itk-red); }

/* Die Liste selbst als Karten statt als Aufzählung */
html body .surveys-list {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
html body .surveys-list li {
  padding: 0;
  margin: 0 0 12px;
  background: var(--itk-white);
  border: 1px solid var(--itk-card-line);
  border-radius: var(--itk-r-card);
  box-shadow: var(--itk-shadow-card);
  transition: border-color .16s var(--itk-ease);
}
html body .surveys-list li:hover { border-color: rgba(var(--itk-red-rgb), .45); }
html body .surveys-list li a { margin-left: 0; }

html body .surveytitle.btn {
  display: block;
  width: 100%;
  text-align: left;
  white-space: normal;
  border-radius: var(--itk-r-card);
  padding: 18px 22px;
  font-family: var(--itk-font-heading) !important;
  font-weight: 700;
}

@media (min-width: 761px) {
  html body .surveys-list .btn-group { width: 100%; }
}


/* --- 15. Mobil -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  html body { font-size: 1rem; }
  html body .question-container {
    padding: 20px 16px;
    border-radius: 0;
    border-left: none; border-right: none;
    margin-left: -12px; margin-right: -12px;
  }
  html body .group-container .group-title { font-size: 1.45rem; }
  html body .question-container .ls-label-question { font-size: 1.1rem; }
  html body .btn { width: 100%; margin-bottom: 10px; }
}


/* --- 16. Barrierefreiheit ---------------------------------------------------------------- */
html body a:focus-visible,
html body button:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible {
  outline: 2px solid var(--itk-red);
  outline-offset: .25rem;
}

@media (prefers-reduced-motion: reduce) {
  html body *, html body *::before, html body *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html body .btn:hover { transform: none !important; }
}


/* --- 17. Druck, für die Freigabe im Beirat ------------------------------------------------ */
@media print {
  html body { background: #fff !important; font-size: 11pt; }
  html body .question-container {
    box-shadow: none;
    border: 1px solid #CCC;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  html body #navigator-container,
  html body .progress,
  html body .form-change-lang { display: none !important; }
  html body .ls-answers .ls-heading th {
    position: static;
    background: #EEE;
    color: #111;
  }
}