/* =========================================================
   DB Neo Sans local font registration
   Files must be located in: css/fonts/
   ========================================================= */

@font-face{
  font-family: "DB Neo Sans";
  src: url("fonts/DBNeoSans-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "DB Neo Sans";
  src: url("fonts/DBNeoSans-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face{
  font-family: "DB Neo Sans";
  src: url("fonts/DBNeoSans-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "DB Neo Sans";
  src: url("fonts/DBNeoSans-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face{
  font-family: "DB Neo Sans";
  src: url("fonts/DBNeoSans-Black.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "DB Neo Sans";
  src: url("fonts/DBNeoSans-BlackItalic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* ===========================
   DB / LimeSurvey – Custom Theme
   =========================== */

/* ---------- Brand & base ---------- */
:root{
  --db-red: #D40511;
  --db-red-600: #b2040f;
  --db-navy: #0E2A47;
  --db-ink: #1f2937;
  --db-muted: #6b7280;
  --db-bg: #f7f8fb;
  --db-card: #ffffff;
  --db-border: #e6e8ef;
  --db-shadow: 0 8px 18px rgba(17,24,39,.08);
  --focus: 0 0 0 3px rgba(212,5,17,.25);
}

html, body{
  background: var(--db-bg);
  color: var(--db-ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Reduce Bootstrap’s heavy bolds a bit */
h1,h2,h3,h4,h5,h6{ font-weight: 700; color: var(--db-navy); }

/* ---------- Welcome & survey header ---------- */
#welcome-container,
.group-outer-container{
  max-width: 1120px;
  margin: 0 auto;
}

.survey-name{
  font-size: 38px;
  font-weight: 800;
  color: var(--db-navy);
  margin: 1.25rem 0 1rem;
}

.survey-description,
.survey-welcome,
.number-of-questions{
  font-size: 12px;
  font-weight: 700;
  color: var(--db-navy);
  margin: 0.5rem auto 0;
}

.db-imagegroup{
  display:flex; gap:.75rem; justify-content:center; align-items:center; flex-wrap:wrap;
}
.db-imagegroup img{ max-height:64px; width:auto; }

/* ---------- “Card” primitives used everywhere ---------- */
.db-card{
  background: var(--db-card);
  border: 1px solid var(--db-border);
  border-radius: 18px;
  box-shadow: var(--db-shadow);
  padding: 1.1rem 1.25rem;
}
.db-card::before{
  content:"";
  display:block;
  height:4px;
  width:100%;
  margin:-1.1rem 0 0.9rem;
  border-top-left-radius:18px;
  border-top-right-radius:18px;
  background: linear-gradient(90deg,var(--db-red) 0%, #ff4d57 100%);
}
.db-headline{
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 800;
  color: var(--db-navy);
  margin-bottom:.35rem;
}
.db-subtitle{ font-size:1.05rem; color:var(--db-ink); }
.db-paragraph{ margin: .35rem 0; line-height:1.55; }
.db-list{ margin:.35rem 0 .35rem 1.05rem; }
.db-list li{ margin:.2rem 0; }

/* ---------- Group titles & description ---------- */
.group-title{
  margin: 1.25rem auto .75rem;
  font-weight: 800;
  color: var(--db-navy);
  position: relative;
}
.group-title::after{
  content:"";
  display:block;
  height:4px;
  width:140px;
  background: var(--db-red);
  border-radius: 4px;
  margin: .35rem auto 0;
}

.group-description .well{ padding:0; border:0; background:transparent; }

/* ---------- Question containers ---------- */
.question-container{
  margin: 1.1rem auto;
  padding: 0 .25rem;
}
.question-title-container{
  margin-bottom: .5rem;
}
.question-text .ls-label-question > .db-card{
  /* Make all question headings consistent */
  padding: .9rem 1rem;
}
.question-text .ls-label-question .db-headline{
  margin:0;
}

/* ---------- Inputs (text/textarea) ---------- */
.form-control{
  border: 2px solid var(--db-border);
  border-radius: 14px !important;
  padding: .7rem .9rem;
  background: #fff;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus{
  border-color: var(--db-red);
  outline: none;
  box-shadow: var(--focus);
}
textarea.form-control{ min-height: 9.5rem; resize: vertical; }

/* ---------- Radios & checkboxes (native lists) ---------- */
input[type="radio"],
input[type="checkbox"]{
  accent-color: var(--db-red); /* modern browsers */
}

/* Classic radio-list & checkbox-list (non-button style) */
.answers-list.radio-list li,
.answers-list.checkbox-list li{
  padding: .35rem .25rem;
}
.radio-label, .checkbox-label{
  padding: .55rem .7rem;
  border: 1.5px solid var(--db-border);
  border-radius: 10px;
  display: inline-block;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.answers-list input[type="radio"]:focus + .radio-label,
.answers-list input[type="checkbox"]:focus + .checkbox-label{
  box-shadow: var(--focus);
  border-color: var(--db-red);
}

/* ---------- Yes/No buttons ---------- */
.yes-no .ls-answers,
.yesno-button.btn-group-justified{
  display:flex; gap:.75rem; flex-wrap:wrap; align-items:stretch;
}
.yesno-button .ls-button-label{
  min-width: 150px;
}

/* ---------- Button-cards (Bootstrap .btn-check + label.btn) ----------
   Used by the “Weitere Trends” blocks and any multi-choice button toolbar */
.bootstrap-buttons-div .btn,
.ls-answers .btn{
  border-radius: 18px;
  border: 2px solid var(--db-border);
  background: #fff;
  color: var(--db-ink);
  font-weight: 700;
  text-align: left;
  padding: 1rem .95rem;
  line-height: 1.25;
  box-shadow: var(--db-shadow);
  transition: transform .08s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.bootstrap-buttons-div .btn:hover,
.ls-answers .btn:hover{
  border-color: var(--db-red);
  box-shadow: 0 6px 16px rgba(212,5,17,.18);
}

/* Selected (checked) → filled DB red with white text */
.btn-check:checked + .btn,
.btn.active,
.btn:active{
  background: var(--db-red) !important;
  border-color: var(--db-red) !important;
  color:#fff !important;
}
.btn-check:checked + .btn .db-headline,
.btn-check:checked + .btn span,
.btn-check:checked + .btn strong{ color:#fff !important; }

/* Focus ring for accessibility */
.btn-check:focus + .btn,
.btn:focus{
  box-shadow: var(--focus) !important;
}

/* Make button-cards grid breathe on wide screens */
.list-unstyled.form-inline.btn-toolbar{
  gap: 1rem 1.25rem;
}
.bootstrap-buttons-div{ padding:.25rem; }
.bootstrap-buttons-div .btn{ width:100%; height:100%; }

/* When you want outline-only (hover) and red fill on select */
.bootstrap-buttons-div .btn.btn-primary{
  /* neutral state is white, outline only (above) */
}

/* ---------- Array / Matrix tables ---------- */
.ls-table-wrapper{ overflow-x:auto; }
.table-array-radio{
  background:#fff;
  border: 1px solid var(--db-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--db-shadow);
}
.table-array-radio thead .ls-header{
  background:#f9fafb;
  color: var(--db-ink);
}
.table-array-radio th.answer-text{
  font-weight: 700;
  text-align: center;
  padding: .65rem .5rem;
  vertical-align: middle;
}
.table-array-radio th.control-label{
  font-weight: 600;
  color: var(--db-ink);
  background:#fff;
  border-right: 1px solid var(--db-border);
  padding: .9rem .8rem;
}
.table-array-radio td{
  text-align:center;
  vertical-align: middle;
  padding: .5rem .35rem;
}
.table-array-radio tr:nth-child(even){ background:#fcfcfd; }
.table-array-radio input[type="radio"]{ transform: scale(1.05); }

/* ---------- Validation & helper text ---------- */
.ls-questionhelp .ls-question-message{
  background: #eefcf0;
  border: 1px solid #b2f0bd;
  color: #0f5132;
  border-radius: 12px;
  padding: .4rem .6rem;
  display: inline-block;
  margin: .25rem 0 .35rem;
}

/* ---------- Alerts (top “Umfrage nicht aktiv …”) ---------- */
.alert, .alert-warning{
  border-radius: 12px;
  border: 1px solid #fde68a;
}

/* ---------- Misc polish ---------- */
.answer-container{ margin-top: .35rem; }
.mb-1{ margin-bottom: .35rem !important; }
.mb-3{ margin-bottom: .85rem !important; }

/* “Keine Antwort” radios in tables – keep neutral color */
.noanswer-item input[type="radio"]{ accent-color: var(--db-muted); }

/* Make icon colors inherit so they flip to white on red buttons */
.ls-icon, .ri-checkbox-circle-line, .ri-close-circle-line{ color: currentColor; }

/* ---------- Mobile tweaks ---------- */
@media (max-width: 768px){
  .db-card{ border-radius: 14px; }
  .table-array-radio th.control-label{ min-width: 240px; }
  .survey-name{ font-size: 1.6rem; }
  .list-unstyled.form-inline.btn-toolbar{ gap:.75rem; }
}

/* ---------- Nice vertical “rule” beside question blocks (if present) ---------- */
.question-container .card-border,
.group-container .card-border{
  position: relative;
}
.question-container .card-border::before,
.group-container .card-border::before{
  content:"";
  position:absolute;
  left:-12px; top:.5rem; bottom:.5rem;
  width:4px; border-radius:4px;
  background: linear-gradient(180deg, var(--db-navy), var(--db-red));
}
/* --- Darker question block background --- */
:root{
  /* tweak just these two if you want it lighter/darker later */
  --db-question-bg: #E7ECF3;   /* darker grey behind each question */
  --db-question-br: #D4DCE7;   /* subtle border */
}

.question-container{
  background: var(--db-question-bg);
  border: 1px solid var(--db-question-br);
  border-radius: 22px;
  padding: 1rem 1rem 1.25rem;
  box-shadow: 0 6px 16px rgba(14,42,71,.06);
}

/* keep the title card crisp on top of the grey panel */
.question-title-container .db-card{
  background:#fff;
  border: 1px solid #EBEEF5;
  box-shadow: 0 8px 22px rgba(14,42,71,.08);
  border-radius: 18px;
}

/* put the left “rail” inside the rounded panel nicely */
.question-container::before{
  left: 12px;           /* was -14px */
  top: 12px;
  bottom: 12px;
  border-radius: 4px;
}

/* optional: make the answer area float on the panel a bit less */
.answer-container{ background: transparent; }
/* ----- FIX: align list-style radios/checkboxes with their labels ----- */
/* Works for UL-based lists and the .checkbox-list/.radio-list variants  */
/* Safe-guard: never affect .btn-check (Ja/Nein, red cards, etc.)        */

.question-container .answer-container .answers-list ul > li .row{
  display:flex !important;
  align-items:center !important;
  margin:0 !important;
}

.question-container .answer-container .answers-list ul > li .row > .col-auto{
  display:flex !important;
  align-items:center !important;
  gap:.65rem !important;                  /* space between control and label */
  padding:0 !important;
}

/* Normalize the control so it doesn’t “float” above/below the label */
.question-container .answer-container .answers-list ul > li
  input[type="checkbox"]:not(.btn-check),
.question-container .answer-container .answers-list ul > li
  input[type="radio"]:not(.btn-check){
  width:18px !important;
  height:18px !important;
  margin:0 !important;
  position:static !important;
  vertical-align:middle !important;
  flex:0 0 auto !important;
}

/* Make labels sit on the same baseline and remove stray margins */
.question-container .answer-container .answers-list ul > li
  label.checkbox-label,
.question-container .answer-container .answers-list ul > li
  label.radio-label{
  display:inline-flex !important;
  align-items:center !important;
  line-height:1.25 !important;
  margin:0 !important;
}

/* Variant when LimeSurvey renders with .checkbox-list/.form-check */
.question-container .answer-container .checkbox-list .form-check{
  display:flex !important;
  align-items:center !important;
  gap:.65rem !important;
  margin:0 !important;
}
.question-container .answer-container .checkbox-list .form-check-input{
  margin:0 !important;
}

/* Do NOT alter button-group based questions */
.ls-answers.yesno-button .btn,
.ls-answers.yesno-button .btn-check,
.form-inline.btn-toolbar .btn,
.form-inline.btn-toolbar .btn-check{
  /* intentionally untouched */
}
/* =========================================================
   ANIMATIONS ONLY — safe add-on for your baseline
   (no layout/alignment overrides)
   ========================================================= */

/* Durations / easing */
:root{
  --anim-fast:.18s;
  --anim-med:.45s;
  --anim-slow:.9s;
  --anim-ease:cubic-bezier(.2,.6,.2,1);
  --db-shadow-raise:0 14px 30px rgba(17,24,39,.15);
}

/* ---------- Keyframes ---------- */
@keyframes db-fade-up{from{opacity:0; transform:translateY(6px);}to{opacity:1; transform:translateY(0);}}
@keyframes db-underline-in{from{transform:scaleX(0); opacity:.6;}to{transform:scaleX(1); opacity:1;}}
@keyframes db-wave{
  0%{ top:-160%; opacity:0; }
  12%{ opacity:.85; }
  60%{ top:-10%; opacity:.55; }
  100%{ top:140%; opacity:0; }
}
@keyframes db-shine{to{transform:translateX(120%);}}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important;}
}

/* =========================================================
   Titles — underline on load + wave on hover
   ========================================================= */

/* Survey name gets an animated underline (keeps your center layout) */
.survey-name{
  position:relative; overflow:hidden; /* contain the wave */
}
.survey-name::after{
  content:""; display:block; height:4px; width:220px; margin:.4rem auto 0;
  background:var(--db-red); border-radius:4px;
  transform-origin:left center; animation:db-underline-in .6s var(--anim-ease) both .05s;
}
/* Group title already has an underline; just animate it in */
.group-title{ overflow:hidden; position:relative; }
.group-title::after{
  transform-origin:left center; animation:db-underline-in .6s var(--anim-ease) both .05s;
}
/* Soft top→bottom wave sweep on hover for all main titles */
.survey-name::before,
.group-title::before,
.question-title-container .ls-label-question::before{
  content:""; position:absolute; left:-10%; right:-10%; top:-160%; height:160%;
  background:linear-gradient(180deg, transparent 0%, rgba(212,5,17,.14) 50%, transparent 100%);
  pointer-events:none; opacity:0; transform:skewY(-6deg);
}
.survey-name:hover::before,
.group-title:hover::before,
.question-title-container:hover .ls-label-question::before{
  animation:db-wave var(--anim-slow) var(--anim-ease) forwards; opacity:1;
}

/* =========================================================
   Cards & question panels — gentle lift + bar reveal
   ========================================================= */
.db-card{
  transition:transform var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease);
  animation:db-fade-up var(--anim-med) var(--anim-ease) both;
}
.db-card:hover{ transform:translateY(-2px); box-shadow:var(--db-shadow-raise); }
/* animate the red top bar that .db-card already renders */
.db-card::before{
  transform:scaleX(0); transform-origin:left center;
  animation:db-underline-in .5s var(--anim-ease) both .1s;
}

/* Question container subtle focus ring on interaction */
.question-container{
  transition:box-shadow var(--anim-fast) var(--anim-ease), border-color var(--anim-fast) var(--anim-ease);
}
.question-container:focus-within{
  box-shadow:0 0 0 3px rgba(212,5,17,.08), var(--db-shadow);
  border-color:#e9edf5;
}

/* =========================================================
   Inputs — polished focus and micro scale on check/select
   ========================================================= */
.form-control{
  transition:border-color var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease), background-color var(--anim-fast) var(--anim-ease);
}

/* radios / checkboxes: smooth micro-interaction */
input[type="radio"],
input[type="checkbox"]{
  transition:transform var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease), background-color var(--anim-fast) var(--anim-ease), border-color var(--anim-fast) var(--anim-ease);
}
input[type="radio"]:checked,
input[type="checkbox"]:checked{ transform:scale(1.08); }

/* =========================================================
   Button cards (incl. “Weitere Trends”) — shine & press
   ========================================================= */
.bootstrap-buttons-div .btn,
.ls-answers .btn{
  position:relative; overflow:hidden;
  transition:transform var(--anim-fast) var(--anim-ease), background var(--anim-fast) var(--anim-ease), color var(--anim-fast) var(--anim-ease), border-color var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease);
}
/* hover SHINE */
.bootstrap-buttons-div .btn::before,
.ls-answers .btn::before{
  content:""; position:absolute; inset:-40% -20%;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.6) 20%, transparent 40%);
  transform:translateX(-120%);
}
.bootstrap-buttons-div .btn:hover::before,
.ls-answers .btn:hover::before{ animation:db-shine var(--anim-slow) var(--anim-ease); }
/* subtle press ripple */
.bootstrap-buttons-div .btn::after,
.ls-answers .btn::after{
  content:""; position:absolute; left:50%; top:50%; width:260px; height:260px; margin:-130px 0 0 -130px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.35) 0%, rgba(255,255,255,.20) 32%, transparent 60%);
  transform:scale(0); opacity:0; transition:transform .45s var(--anim-ease), opacity .45s var(--anim-ease);
}
.bootstrap-buttons-div .btn:active::after,
.ls-answers .btn:active::after{ transform:scale(1); opacity:1; }

/* =========================================================
   Tables — light hover to guide the eye
   ========================================================= */
.ls-answers .table tbody tr{ transition:background-color var(--anim-fast) var(--anim-ease); }
.ls-answers .table tbody tr:hover td{ background:#fff7f7; }

/* =========================================================
   Nice extras that don’t change layout
   ========================================================= */
.number-of-questions .question-count-text{
  animation:db-fade-up var(--anim-med) var(--anim-ease) both .1s;
}
.alert, .alert-warning{ transition:box-shadow var(--anim-fast) var(--anim-ease); }
.alert:hover, .alert-warning:hover{ box-shadow:var(--db-shadow-raise); }
/* ==== Fix: confine the wave overlay to the question title ==== */
/* Make the title the positioning context and clip the effect */
.question-title-container .ls-label-question{
  position: relative !important;
  overflow: hidden !important;
  display: inline-block !important;   /* keeps wave width tight to the text */
  z-index: 0;
}

/* Redefine the wave pseudo-element here (scoped & clipped) */
.question-title-container .ls-label-question::before{
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: -160%;
  height: 160%;
  pointer-events: none;
  opacity: 0;
  transform: skewY(-6deg);
  background: linear-gradient(180deg, transparent 0%, rgba(212,5,17,.14) 50%, transparent 100%);
  z-index: -1;                          /* sit under the text */
}

/* Trigger only when hovering the title area (not the whole container) */
.question-title-container .ls-label-question:hover::before{
  animation: db-wave var(--anim-slow, .9s) var(--anim-ease, cubic-bezier(.2,.6,.2,1)) forwards;
  opacity: 1;
}
/* =========================================================
   WELCOME SCREEN — color + contained animation (no layout change)
   ========================================================= */

/* Make the welcome area its own, clipped animation surface */
#welcome-container{
  position: relative;
  text-align: center;
  border-radius: 28px;
  padding: 0.5rem 1rem 2rem;
  overflow: hidden;                 /* clips the animated backdrop */
  isolation: isolate;               /* ensure z-index layering stays local */
}

/* Subtle moving backdrop, scoped to the welcome container only */
#welcome-container::before{
  content:"";
  position:absolute;
  left:-12%; right:-12%;
  top:-6rem; height:16rem;
  z-index:-1;
  background:
    radial-gradient(70% 120% at 18% 30%, rgba(212,5,17,.08), transparent 60%),
    radial-gradient(60% 100% at 82% 35%, rgba(14,42,71,.07), transparent 62%);
  animation: welcome-drift 14s ease-in-out infinite alternate;
}

/* Welcome copy should be DB navy (override theme’s .text-info) */
#welcome-container .survey-description,
#welcome-container .survey-description.text-info,
#welcome-container .survey-welcome{
  color: var(--db-navy) !important;
  line-height: 1.6;
}

/* Gentle emphasis for <em> bits */
#welcome-container .survey-description em{
  font-style: normal;
  background: linear-gradient(transparent 68%, rgba(212,5,17,.18) 0);
  padding: 0 .06em;
  border-radius: 4px;
}

/* Logo row breathing room */
#welcome-container .db-imagegroup{ margin-top: .65rem; }

/* Question count pill—keep your look, fade-up nicely */
.number-of-questions .question-count-text{
  display:inline-block;
  background:#fff;
  border:1px solid var(--db-border);
  padding:.45rem .8rem;
  border-radius: 999px;
  box-shadow: var(--db-shadow);
  animation: db-fade-up var(--anim-med, .45s) var(--anim-ease, cubic-bezier(.2,.6,.2,1)) both .1s;
}

/* Underline for the main title already animates via db-underline-in.
   Add a tiny hover wave but confine it to the title only. */
.survey-name{
  position: relative;
  overflow: hidden;           /* keep wave clipped to the text area */
}
.survey-name::before{
  content:"";
  position:absolute;
  left:-10%; right:-10%; top:-160%; height:160%;
  pointer-events:none; opacity:0; transform:skewY(-6deg);
  background: linear-gradient(180deg, transparent 0%, rgba(212,5,17,.14) 50%, transparent 100%);
  z-index:-1;
}
.survey-name:hover::before{
  animation: db-wave var(--anim-slow, .9s) var(--anim-ease, cubic-bezier(.2,.6,.2,1)) forwards;
  opacity:1;
}

/* ===== Keyframes for the welcome-only backdrop ===== */
@keyframes welcome-drift{
  0%   { transform: translateX(-6%); filter: saturate(100%); }
  50%  { transform: translateX(6%);  filter: saturate(115%); }
  100% { transform: translateX(-6%); filter: saturate(100%); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #welcome-container::before{ animation: none; }
  .survey-name::before{ display:none; }
  .number-of-questions .question-count-text{ animation: none; }
}
/* =========================================================
   Uniform style for Text-display (boilerplate) questions
   ========================================================= */

/* 1) Make the boilerplate block itself be the white "title card"
      even if there's no .db-card in the HTML */
.question-container.boilerplate .question-title-container{
  text-align:left !important;
  position:relative;
  margin:.9rem .9rem .35rem;
  padding:1rem 1rem .9rem;
  background:#fff;
  border:1px solid var(--db-border);
  border-radius:16px;
  box-shadow:0 6px 16px rgba(14,42,71,.08);
  overflow:hidden;
}

/* slim red rule on top (matches other blocks) */
.question-container.boilerplate .question-title-container::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:4px;
  background:var(--db-red);
  border-radius:16px 16px 0 0;
}

/* 2) If the content already includes your .db-card, neutralize it
      so we don’t get “a card inside a card” */
.question-container.boilerplate .question-title-container .db-card{
  border:0; box-shadow:none; padding:0; background:transparent;
}

/* 3) Normalize any inline font and color styles from the editor */
.question-container.boilerplate .ls-label-question,
.question-container.boilerplate .ls-label-question *{
  color: var(--db-ink) !important;
  font-family: inherit !important;
}

/* Headline: first block element = navy, bold, larger */
.question-container.boilerplate .ls-label-question > :first-child{
  color: var(--db-navy) !important;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.35;
  margin: 0 0 .6rem;
}

/* If you already used .db-headline inside, keep it consistent */
.question-container.boilerplate .ls-label-question .db-headline{
  color: var(--db-navy) !important;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.35;
  margin: 0 0 .6rem;
}

/* Paragraphs and lists spacing */
.question-container.boilerplate .ls-label-question p{ margin:.5rem 0; line-height:1.6; }
.question-container.boilerplate .ls-label-question ul{ margin:.5rem 0 .8rem 1.25rem; }
.question-container.boilerplate .ls-label-question li{ margin:.25rem 0; }

/* Logos/images row tidy */
.question-container.boilerplate .ls-label-question img{
  max-height:56px; width:auto; vertical-align:middle;
  margin:.25rem .4rem;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.06));
}

/* Optional: tiny entrance animation, matching the rest */
.question-container.boilerplate .question-title-container{
  animation: db-fade-up var(--anim-med, .45s) var(--anim-ease, cubic-bezier(.2,.6,.2,1)) both;
}

/* Keep the wave effect clipped to title text only (no screen-wide sweep) */
.question-container.boilerplate .ls-label-question{
  position:relative; overflow:hidden; z-index:0;
}
.question-container.boilerplate .ls-label-question::before{
  content:""; position:absolute; left:-10%; right:-10%; top:-160%; height:160%;
  pointer-events:none; opacity:0; transform:skewY(-6deg);
  background:linear-gradient(180deg, transparent 0%, rgba(212,5,17,.12) 50%, transparent 100%);
  z-index:-1;
}
.question-container.boilerplate .ls-label-question:hover::before{
  animation: db-wave var(--anim-slow, .9s) var(--anim-ease, cubic-bezier(.2,.6,.2,1)) forwards;
  opacity:1;
}
/* ===== Welcome hero: DB-red outline / border ===== */
#welcome-container{
  position: relative;           /* already set, but harmless to repeat */
  border-radius: 28px;          /* matches your existing radius */
  overflow: hidden;             /* keep internals clipped */
  isolation: isolate;           /* keep layers local */
}

/* Draw the red ring above the animated backdrop (uses ::after; ::before is your bg) */
#welcome-container::after{
  content:"";
  position:absolute;
  inset:0;                      /* full box */
  border:2px solid var(--db-red);
  border-radius: inherit;
  pointer-events:none;          /* never blocks clicks */
  box-shadow: 0 10px 24px rgba(17,24,39,.08);  /* subtle depth */
}

/* Optional: gentle glow on hover (remove if you prefer static) */
#welcome-container:hover::after{
  box-shadow:
    0 12px 28px rgba(17,24,39,.12),
    0 0 0 3px rgba(212,5,17,.12) inset;
  transition: box-shadow .2s ease;
}
/* Make any informational text inside the survey use DB navy */
#outerframeContainer .text-info,
#outerframeContainer p.text-info {
  color: var(--db-navy) !important;
}

/* Keep links inside those notices consistent too */
#outerframeContainer .text-info a {
  color: var(--db-navy) !important;
}
#outerframeContainer .text-info a:hover {
  color: var(--db-red) !important;
}

/* Force .text-info to DB navy inside the public survey runtime */
#outerframeContainer{
  /* For Bootstrap 5 utilities that use CSS vars */
  --bs-info-rgb: 14, 42, 71; /* DB navy */
}

#outerframeContainer .text-info,
#outerframeContainer p.text-info{
  color: var(--db-navy) !important;
}

/* If the theme colors children (links/strong) separately, catch those too */
#outerframeContainer .text-info *,
#outerframeContainer p.text-info *{
  color: var(--db-navy) !important;
}

/* =========================================================
   DB InfraGO final production overrides - 2026-06-22
   Purpose: apply DB meeting fixes without changing the working base theme.
   Keep this block at the very end of custom.css.
   ========================================================= */

:root{
  --db-brand-font: "DB Sans", "DB Screen Sans", "DB Screen Head", "Inter", Arial, Helvetica, sans-serif;
  --db-logo-max-width: min(100%, 520px);
  --db-logo-max-height: 96px;
}

html,
body,
button,
input,
select,
textarea,
.ls-answers,
.question-container,
#welcome-container{
  font-family: var(--db-brand-font) !important;
}

/* 1) Meeting requirement: remove the red top bar inside DB question cards.
   The original bar is generated by .db-card::before. Do not remove card borders,
   shadows or the special red rules used by dedicated boilerplate/info blocks. */
.db-card::before,
.question-title-container .db-card::before,
.question-text .ls-label-question > .db-card::before{
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  animation: none !important;
  transform: none !important;
}

/* 2) Group title underline - default case: underline follows the rendered text.
   This fixes short titles such as "Allgemeine Fragen" and remains robust when the
   title becomes longer, e.g. "Allgemeine Fragen zu Betriebskontinuität". */
.group-title,
.group-title.text-center.h3.space-col{
  display: table !important;
  width: auto !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
}

.group-title::after,
.group-title.text-center.h3.space-col::after{
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 4px !important;
  margin: .4rem auto 0 !important;
  border-radius: 4px !important;
  background: var(--db-red) !important;
  transform-origin: left center !important;
}

/* Optional full-row variant for the second case from the meeting.
   Add class "db-underline-full" to a group title only when the rule should span
   the full group container instead of only the title text. */
.group-title.db-underline-full,
.group-title.text-center.h3.space-col.db-underline-full{
  display: block !important;
  width: 100% !important;
}
.group-title.db-underline-full::after,
.group-title.text-center.h3.space-col.db-underline-full::after{
  width: 100% !important;
}

/* 3) MarketingPool / question-count marker: replace the empty white pill/dot with
   a DB-red rule. If LimeSurvey later writes text into .question-count-text, the
   text inherits the welcome-copy size, color and normal weight. */
.number-of-questions,
.number-of-questions.text-muted{
  color: var(--db-navy) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

.number-of-questions .question-count-text{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: .45rem auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--db-navy) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  text-align: center !important;
  animation: none !important;
}

.number-of-questions .question-count-text::before{
  content: "";
  display: block;
  width: min(220px, 45vw);
  height: 4px;
  margin: 0 auto .35rem;
  border-radius: 4px;
  background: var(--db-red);
}

/* 4) Anonymous survey/privacy text: integrate it with the DB visual system.
   The block keeps the same typography family and navy text as the survey intro,
   but uses a subtle red tint so it belongs to the theme without becoming noisy. */
.privacy.row{
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 1.25rem auto 1.75rem !important;
  color: var(--db-navy) !important;
}

.privacy.row .col-12.col-centered{
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 1.6rem 1.8rem !important;
  border: 1px solid rgba(212, 5, 17, .14) !important;
  border-radius: 22px !important;
  background: linear-gradient(0deg, rgba(212, 5, 17, .045), rgba(212, 5, 17, .045)), #fff !important;
  box-shadow: 0 6px 16px rgba(14, 42, 71, .06) !important;
  text-align: center !important;
}

.privacy.row .ls-privacy-head.h4.text-primary,
.privacy.row .ls-privacy-head{
  width: 100% !important;
  margin: 0 0 .8rem !important;
  padding: 0 0 .65rem !important;
  border-bottom: 2px solid rgba(212, 5, 17, .28) !important;
  color: var(--db-navy) !important;
  font-family: var(--db-brand-font) !important;
  font-size: clamp(1.15rem, 2vw, 1.55rem) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

.privacy.row .ls-privacy-head::before{
  content: none !important;
}

.privacy.row .ls-privacy-body,
.privacy.row .col-12.col-centered > div:last-child,
.privacy.row .col-12.col-centered > div:last-child p{
  color: var(--db-navy) !important;
  font-family: var(--db-brand-font) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  text-align: center !important;
}

.privacy.row .ls-privacy-body{
  margin: .45rem 0 0 !important;
}

/* 5) New DB InfraGO + ITN logo: safe presentation for the uploaded PNG.
   This assumes the image is inserted in the question/welcome HTML or selected in
   Theme options with the exact file name DB_InfraGo+ITN_positiv_AUSNAHME_RGB.png. */
.db-imagegroup{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .9rem !important;
  flex-wrap: wrap !important;
}

.db-imagegroup img,
.question-container.boilerplate .ls-label-question img[src*="DB_InfraGo+ITN_positiv_AUSNAHME_RGB"],
#welcome-container img[src*="DB_InfraGo+ITN_positiv_AUSNAHME_RGB"],
img[src*="DB_InfraGo+ITN_positiv_AUSNAHME_RGB"]{
  display: inline-block !important;
  max-width: var(--db-logo-max-width) !important;
  max-height: var(--db-logo-max-height) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  vertical-align: middle !important;
  margin: .35rem auto !important;
  filter: none !important;
}

/* Keep text-display/boilerplate pages such as Pestel Methodik visually consistent.
   These info blocks intentionally keep a red rule; the DB card rule above is still removed. */
.question-container.boilerplate .question-title-container::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 4px !important;
  background: var(--db-red) !important;
  border-radius: 16px 16px 0 0 !important;
}

/* 6) "Welche Trends waren das?" fallback. The page currently renders this question
   without the .db-card/.db-headline wrapper used by the previous question, so style
   the generated LimeSurvey label directly. If the HTML is corrected later, the inner
   .db-card is neutralized to avoid nested-card styling. */
#question3358 .question-title-container{
  margin-bottom: .5rem !important;
}

#ls-question-text-844154X76X3358{
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: .9rem 1rem !important;
  border: 1px solid #EBEEF5 !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(14, 42, 71, .08) !important;
  color: var(--db-navy) !important;
  font-family: var(--db-brand-font) !important;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

#ls-question-text-844154X76X3358 > .db-card{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#ls-question-text-844154X76X3358 > .db-card > .db-headline,
#ls-question-text-844154X76X3358 .db-headline{
  margin: 0 !important;
  color: var(--db-navy) !important;
  font-size: inherit !important;
  font-weight: 800 !important;
  line-height: inherit !important;
}

/* 7) sid/844154/gid/72/qid/1081 alignment and spacing fix.
   Scope tightly to this rendered SGQA question so other working answer lists stay intact. */
#question1081 .question-title-container{
  margin-bottom: .35rem !important;
}

#question1081 .answer-container,
#question1081 .ls-answers{
  margin-top: 0 !important;
  padding-top: .35rem !important;
}

li[id^="javatbd844154X72X1081"] .row,
#question1081 .answers-list ul > li .row{
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

li[id^="javatbd844154X72X1081"] .row > .col-auto,
#question1081 .answers-list ul > li .row > .col-auto{
  display: flex !important;
  align-items: center !important;
  gap: .65rem !important;
  padding: 0 !important;
}

li[id^="javatbd844154X72X1081"] input[type="checkbox"]:not(.btn-check),
li[id^="javatbd844154X72X1081"] input[type="radio"]:not(.btn-check),
#question1081 input[type="checkbox"]:not(.btn-check),
#question1081 input[type="radio"]:not(.btn-check){
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  position: static !important;
  vertical-align: middle !important;
}

li[id^="javatbd844154X72X1081"] label.checkbox-label,
li[id^="javatbd844154X72X1081"] label.radio-label,
#question1081 label.checkbox-label,
#question1081 label.radio-label{
  display: inline-flex !important;
  align-items: center !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding-top: 0 !important;
  line-height: 1.25 !important;
}

/* 8) Mobile safety. */
@media (max-width: 768px){
  .privacy.row .col-12.col-centered{
    padding: 1.2rem 1rem !important;
    border-radius: 18px !important;
  }

  #ls-question-text-844154X76X3358{
    text-align: left !important;
  }

  .db-imagegroup img,
  img[src*="DB_InfraGo+ITN_positiv_AUSNAHME_RGB"]{
    max-width: 100% !important;
    max-height: 74px !important;
  }
}
/* =========================================================
   DB InfraGO final production overrides - 2026-06-22 / DB Neo fix
   Keep this block at the very end of custom.css.
   Purpose:
   - Use local DB Neo Sans .otf files.
   - Remove red top bars from question/text-display cards.
   - Keep robust title underlines.
   - Make group 64 and group 75 text-display content non-bold only.
   ========================================================= */

:root{
  --db-brand-font: "DB Neo Sans", Arial, Helvetica, sans-serif;
  --db-logo-max-width: min(100%, 520px);
  --db-logo-max-height: 96px;
}

html,
body,
button,
input,
select,
textarea,
.ls-answers,
.question-container,
#welcome-container,
#outerframeContainer{
  font-family: var(--db-brand-font) !important;
}

/* Main survey title: underline follows each rendered text line.
   This avoids fixed pseudo-element widths and keeps wrapped titles robust. */
.survey-name{
  text-decoration-line: underline !important;
  text-decoration-color: var(--db-red) !important;
  text-decoration-thickness: 4px !important;
  text-underline-offset: .30em !important;
  text-decoration-skip-ink: none !important;
}

.survey-name::after{
  content: none !important;
  display: none !important;
}

/* Remove red top bars above normal question cards.
   The old red line was generated by .db-card::before. */
.db-card::before,
.question-title-container .db-card::before,
.question-text .ls-label-question > .db-card::before{
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  animation: none !important;
  transform: none !important;
}

/* Remove red top bars from text-display / boilerplate cards as well.
   This intentionally overrides the older boilerplate rule that re-added the red
   top border through .question-title-container::before. */
.question-container.boilerplate .question-title-container::before{
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  border: 0 !important;
}

/* Group title underline - default case: underline follows the rendered group title text. */
.group-title,
.group-title.text-center.h3.space-col{
  display: table !important;
  width: auto !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
}

.group-title::after,
.group-title.text-center.h3.space-col::after{
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 4px !important;
  margin: .4rem auto 0 !important;
  border-radius: 4px !important;
  background: var(--db-red) !important;
  transform-origin: left center !important;
}

/* Optional full-row underline variant.
   Use only if you manually add db-underline-full to a group title. */
.group-title.db-underline-full,
.group-title.text-center.h3.space-col.db-underline-full{
  display: block !important;
  width: 100% !important;
}

.group-title.db-underline-full::after,
.group-title.text-center.h3.space-col.db-underline-full::after{
  width: 100% !important;
}

/* Group 64 and Group 75 text-display content must not be bold.
   This changes only font weight. It does not change font size, padding, spacing,
   card size, title sizing, logo sizing, or layout. */
#outerframeContainer [id^="ls-question-text-844154X64X"],
#outerframeContainer [id^="ls-question-text-844154X64X"] *,
#outerframeContainer [id^="ls-question-text-844154X75X"],
#outerframeContainer [id^="ls-question-text-844154X75X"] *{
  font-weight: 400 !important;
}

/* In case those two text-display questions contain the custom DB classes,
   keep them non-bold without touching the existing size rules. */
#outerframeContainer [id^="ls-question-text-844154X64X"] .db-headline,
#outerframeContainer [id^="ls-question-text-844154X64X"] .db-subtitle,
#outerframeContainer [id^="ls-question-text-844154X64X"] strong,
#outerframeContainer [id^="ls-question-text-844154X64X"] b,
#outerframeContainer [id^="ls-question-text-844154X75X"] .db-headline,
#outerframeContainer [id^="ls-question-text-844154X75X"] .db-subtitle,
#outerframeContainer [id^="ls-question-text-844154X75X"] strong,
#outerframeContainer [id^="ls-question-text-844154X75X"] b{
  font-weight: 400 !important;
}

/* MarketingPool / question-count marker:
   remove the empty white pill and use a DB-red rule. If text appears later, keep
   it aligned with the welcome text: DB navy, 12px, normal weight. */
.number-of-questions,
.number-of-questions.text-muted{
  color: var(--db-navy) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

.number-of-questions .question-count-text{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: .45rem auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--db-navy) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  text-align: center !important;
  animation: none !important;
}

.number-of-questions .question-count-text::before{
  content: "";
  display: block;
  width: min(220px, 45vw);
  height: 4px;
  margin: 0 auto .35rem;
  border-radius: 4px;
  background: var(--db-red);
}

/* Anonymous survey/privacy text integrated with the DB visual system. */
.privacy.row{
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 1.25rem auto 1.75rem !important;
  color: var(--db-navy) !important;
}

.privacy.row .col-12.col-centered{
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 1.6rem 1.8rem !important;
  border: 1px solid rgba(212, 5, 17, .14) !important;
  border-radius: 22px !important;
  background: linear-gradient(0deg, rgba(212, 5, 17, .045), rgba(212, 5, 17, .045)), #fff !important;
  box-shadow: 0 6px 16px rgba(14, 42, 71, .06) !important;
  text-align: center !important;
}

.privacy.row .ls-privacy-head.h4.text-primary,
.privacy.row .ls-privacy-head{
  width: 100% !important;
  margin: 0 0 .8rem !important;
  padding: 0 0 .65rem !important;
  border-bottom: 2px solid rgba(212, 5, 17, .28) !important;
  color: var(--db-navy) !important;
  font-family: var(--db-brand-font) !important;
  font-size: clamp(1.15rem, 2vw, 1.55rem) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

.privacy.row .ls-privacy-head::before{
  content: none !important;
}

.privacy.row .ls-privacy-body,
.privacy.row .col-12.col-centered > div:last-child,
.privacy.row .col-12.col-centered > div:last-child p{
  color: var(--db-navy) !important;
  font-family: var(--db-brand-font) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  text-align: center !important;
}

.privacy.row .ls-privacy-body{
  margin: .45rem 0 0 !important;
}

/* New DB InfraGO + ITN logo presentation. */
.db-imagegroup{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .9rem !important;
  flex-wrap: wrap !important;
}

.db-imagegroup img,
.question-container.boilerplate .ls-label-question img[src*="DB_InfraGo+ITN_positiv_AUSNAHME_RGB"],
#welcome-container img[src*="DB_InfraGo+ITN_positiv_AUSNAHME_RGB"],
img[src*="DB_InfraGo+ITN_positiv_AUSNAHME_RGB"]{
  display: inline-block !important;
  max-width: var(--db-logo-max-width) !important;
  max-height: var(--db-logo-max-height) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  vertical-align: middle !important;
  margin: .35rem auto !important;
  filter: none !important;
}

/* "Welche Trends waren das?" fallback. */
#question3358 .question-title-container{
  margin-bottom: .5rem !important;
}

#ls-question-text-844154X76X3358{
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: .9rem 1rem !important;
  border: 1px solid #EBEEF5 !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(14, 42, 71, .08) !important;
  color: var(--db-navy) !important;
  font-family: var(--db-brand-font) !important;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

#ls-question-text-844154X76X3358 > .db-card{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#ls-question-text-844154X76X3358 > .db-card > .db-headline,
#ls-question-text-844154X76X3358 .db-headline{
  margin: 0 !important;
  color: var(--db-navy) !important;
  font-size: inherit !important;
  font-weight: 800 !important;
  line-height: inherit !important;
}

/* sid/844154/gid/72/qid/1081 alignment and spacing fix. */
#question1081 .question-title-container{
  margin-bottom: .35rem !important;
}

#question1081 .answer-container,
#question1081 .ls-answers{
  margin-top: 0 !important;
  padding-top: .35rem !important;
}

li[id^="javatbd844154X72X1081"] .row,
#question1081 .answers-list ul > li .row{
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

li[id^="javatbd844154X72X1081"] .row > .col-auto,
#question1081 .answers-list ul > li .row > .col-auto{
  display: flex !important;
  align-items: center !important;
  gap: .65rem !important;
  padding: 0 !important;
}

li[id^="javatbd844154X72X1081"] input[type="checkbox"]:not(.btn-check),
li[id^="javatbd844154X72X1081"] input[type="radio"]:not(.btn-check),
#question1081 input[type="checkbox"]:not(.btn-check),
#question1081 input[type="radio"]:not(.btn-check){
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  position: static !important;
  vertical-align: middle !important;
}

li[id^="javatbd844154X72X1081"] label.checkbox-label,
li[id^="javatbd844154X72X1081"] label.radio-label,
#question1081 label.checkbox-label,
#question1081 label.radio-label{
  display: inline-flex !important;
  align-items: center !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding-top: 0 !important;
  line-height: 1.25 !important;
}

/* Mobile safety. */
@media (max-width: 768px){
  .privacy.row .col-12.col-centered{
    padding: 1.2rem 1rem !important;
    border-radius: 18px !important;
  }

  #ls-question-text-844154X76X3358{
    text-align: left !important;
  }

  .db-imagegroup img,
  img[src*="DB_InfraGo+ITN_positiv_AUSNAHME_RGB"]{
    max-width: 100% !important;
    max-height: 74px !important;
  }
}

/* =========================================================
   DB InfraGO final production overrides - round 2 - 2026-06-22
   Purpose:
   - Reduce help-text to answer-list gap across LimeSurvey question types.
   - Align checkbox/radio controls with their text labels generically.
   - Ensure the welcome title red underline appears under every wrapped line.
   Keep this block at the very end of custom.css.
   ========================================================= */

/* A) Welcome title underline: paint a red underline on every visual line.
   Using inline background + box-decoration-break avoids fixed pseudo-element
   widths and prevents the first-line-only underline problem on wrapped titles. */
#welcome-container{
  text-align: center !important;
}

#welcome-container .survey-name,
.survey-name{
  display: inline !important;
  margin: 1.25rem auto 1rem !important;
  padding: 0 .02em .05em !important;
  background-image: linear-gradient(var(--db-red), var(--db-red)) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 4px !important;
  background-position: 0 calc(100% - .06em) !important;
  -webkit-box-decoration-break: clone !important;
  box-decoration-break: clone !important;
  text-decoration: none !important;
}

#welcome-container .survey-name::after,
.survey-name::after{
  content: none !important;
  display: none !important;
}

/* Preserve spacing below the now-inline survey title. */
#welcome-container .survey-description,
#welcome-container .survey-welcome,
#welcome-container .number-of-questions{
  margin-top: 1.4rem !important;
}

/* B) Help text spacing: close the visual gap between LimeSurvey help text and
   answer options without changing question titles or answer content size. */
.question-container .question-help-container,
.question-container .question-help-container.text-info,
.question-container .ls-questionhelp,
.question-container .ls-question-help,
.question-container [id^="ls-questionhelp"],
.question-container [id^="ls-question-help"]{
  margin-top: 0 !important;
  margin-bottom: .25rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  color: var(--db-navy) !important;
  font-family: var(--db-brand-font) !important;
  font-size: .95rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

.question-container .question-help-container p,
.question-container .ls-questionhelp p,
.question-container .ls-question-help p{
  margin-top: 0 !important;
  margin-bottom: .25rem !important;
}

.question-container .answer-container,
.question-container .ls-answers{
  margin-top: 0 !important;
  padding-top: .25rem !important;
}

.question-container .question-help-container + .answer-container,
.question-container .question-help-container + .ls-answers,
.question-container .ls-questionhelp + .answer-container,
.question-container .ls-question-help + .answer-container{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* C) Generic checkbox/radio alignment for LimeSurvey list-style questions.
   Scope to non-button list questions, avoiding bootstrap button cards and
   yes/no button groups. */
.question-container.multiple-opt .answers-list li .row,
.question-container.list-radio .answers-list li .row,
.question-container .checkbox-list li .row,
.question-container .radio-list li .row,
.question-container .answers-list.checkbox-list li .row,
.question-container .answers-list.radio-list li .row{
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  min-height: 0 !important;
}

.question-container.multiple-opt .answers-list li .row > .col-auto,
.question-container.list-radio .answers-list li .row > .col-auto,
.question-container .checkbox-list li .row > .col-auto,
.question-container .radio-list li .row > .col-auto,
.question-container .answers-list.checkbox-list li .row > .col-auto,
.question-container .answers-list.radio-list li .row > .col-auto{
  display: flex !important;
  align-items: center !important;
  gap: .65rem !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.question-container.multiple-opt .answer-item,
.question-container.list-radio .answer-item,
.question-container .checkbox-item,
.question-container .radio-item,
.question-container .answers-list.checkbox-list li,
.question-container .answers-list.radio-list li{
  margin: 0 !important;
  padding-top: .28rem !important;
  padding-bottom: .28rem !important;
}

.question-container.multiple-opt input[type="checkbox"]:not(.btn-check),
.question-container.list-radio input[type="radio"]:not(.btn-check),
.question-container .checkbox-list input[type="checkbox"]:not(.btn-check),
.question-container .radio-list input[type="radio"]:not(.btn-check),
.question-container .checkbox-item input[type="checkbox"]:not(.btn-check),
.question-container .radio-item input[type="radio"]:not(.btn-check){
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  position: static !important;
  vertical-align: middle !important;
  transform: none !important;
}

.question-container.multiple-opt label.checkbox-label,
.question-container.list-radio label.radio-label,
.question-container .checkbox-list label.checkbox-label,
.question-container .radio-list label.radio-label,
.question-container .checkbox-item label,
.question-container .radio-item label{
  display: inline-flex !important;
  align-items: center !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding-top: .15rem !important;
  padding-bottom: .15rem !important;
  line-height: 1.3 !important;
  vertical-align: middle !important;
}

/* Guardrail: keep Bootstrap button-card and yes/no questions out of the generic
   radio/checkbox alignment rules above. */
.question-container .bootstrap-buttons-div input.btn-check,
.question-container .yesno-button input.btn-check,
.question-container .btn-check{
  position: absolute !important;
}

.question-container .bootstrap-buttons-div label.btn,
.question-container .yesno-button label.btn,
.question-container .ls-answers.yesno-button .btn,
.question-container .form-inline.btn-toolbar .btn{
  display: inline-block !important;
  align-items: initial !important;
  min-height: initial !important;
  padding: 1rem .95rem !important;
}