/* ===========================
   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;
}