/* 0) Utility-Klasse zum Erzwingen von display:none */
.hidden {
  display: none !important;
}

/* 1) Alle Sprach-Container ausblenden */
.lang-de,
.lang-en,
.lang-es,
.lang-fr,
.lang-he,
.lang-it,
.lang-nl,
.lang-pl,
.lang-pt,
.lang-ro,
.lang-sq,
.lang-sr-Latn,
.lang-ca {
  display: none !important;
}

/* 2) Nur aktuell ausgewählte Sprache einblenden */
:lang(de)      .lang-de,
:lang(en)      .lang-en,
:lang(es)      .lang-es,
:lang(fr)      .lang-fr,
:lang(he)      .lang-he,
:lang(it)      .lang-it,
:lang(nl)      .lang-nl,
:lang(pl)      .lang-pl,
:lang(pt)      .lang-pt,
:lang(ro)      .lang-ro,
:lang(sq)      .lang-sq,
:lang(sr-Latn) .lang-sr-Latn,
:lang(ca)      .lang-ca {
  display: block !important;
}


/* Styling für Register message */
.intro-text p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.intro-text h2 {
  font-size: 16px;
  font-weight: bold;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.intro-text h3 {
  font-size: 16px;
  font-weight: bold;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

/* Styling für Info-Sheet und Consent-Form */
.info-sheet-container p,
.informed-consent-container p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.info-sheet-container h2,
.informed-consent-container h2 {
  font-size: 18px;
  font-weight: bold;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.info-sheet-container h3,
.informed-consent-container h3 {
  font-size: 16px;
  font-weight: bold;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

/* Optional: damit auch Listen & Abschnitte im Collapse hübsch aussehen */
.info-sheet-container ul,
.informed-consent-container ul {
  margin-left: 1.25rem;
  margin-bottom: 1rem;
}

.info-sheet-container ul li,
.informed-consent-container ul li {
  margin-bottom: 0.5rem;
}

/* Accordion-Body */
.panel-body {
  font-size: 14px;
  line-height: 1.6;
  padding: 1rem;
}

/* Accordion-Überschriften */
.panel-title a {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-left: 1.5em;
  cursor: pointer;
}

/* Caret-Icon vor den Links */
.panel-title a::before {
  content: "\25B6"; /* ▶ */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}

/* Caret drehen wenn offen */
.panel-collapse.in + .panel-heading .panel-title a::before,
.panel-title a[aria-expanded="true"]::before {
  transform: translateY(-50%) rotate(90deg);
}

/* Logo-Reihe */
.logo-row {
  text-align: center;
  margin-bottom: 1rem;
}

.logo-img {
  max-height: 60px;
  margin: 0 0.5rem;
  vertical-align: middle;
}

/* 1) Platz schaffen für den Pfeil links */
button.btn-info[data-toggle="collapse"],
a.btn-info[data-toggle="collapse"] {
  position: relative;
  padding-left: 2.2em;
}

/* 2) Pfeil als Pseudo-Element links vom Text */
button.btn-info[data-toggle="collapse"]::before,
a.btn-info[data-toggle="collapse"]::before {
  content: "▸";
  position: absolute;
  left: 0.5em;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  font-size: 1.4em;
  line-height: 1;
  transition: transform .2s ease;
}

/* 3) Pfeil drehen, wenn das Panel offen ist */
button.btn-info[aria-expanded="true"]::before,
a.btn-info[aria-expanded="true"]::before {
  transform: translateY(-50%) rotate(90deg);
}

/* 4) Optional: Hover-Farbe zur besseren Erkennbarkeit */
button.btn-info[data-toggle="collapse"]:hover,
a.btn-info[data-toggle="collapse"]:hover {
  background-color: #017bbd;
  border-color:    #017bbd;
}

/* ---------------------------------------------------
   Consent-Form Blöcke: bessere Abstände & klare Trennung
   --------------------------------------------------- */

/* Jede „required-star“-Überschrift als eigener Block */
.lang-en .required-star,
.lang-de .required-star,
.lang-sr-Latn .required-star {
  display: block;
  font-weight: bold;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

/* Wenn das Consent-Form zu Ende ist, noch zwei Leerräume einfügen */
#collapse-consent-en,
#collapse-consent-de,
#collapse-consent-sr-Latn {
  margin-bottom: 2rem;
}

/* Optional: ein leichter Hintergrund für die Consent-Container */
.lang-en .required-star + .form-check,
.lang-de .required-star + .form-check,
.lang-sr-Latn .required-star + .form-check {
  padding-left: 0.5rem;
}

/* Für alle Sprachen: Checkbox-/Radio-Labels klar als klickbar kennzeichnen */
.form-check-label {
  cursor: pointer;
}

/* Styling der Age-Intro-Linie und des Texts */
.age-intro-hr {
  border: none;
  border-top: 1px solid #ccc;
  margin: 1em 0 0.5em;
}

.age-intro-text {
  font-weight: bold;
  margin: 0 0 1em;
  line-height: 1.5;
}

/* Parent-Consent initial verstecken */
.parent-consent {
  display: none;
}

/* Stelle sicher, dass alle h2 in den Collapse-Containern dieselbe Größe haben */
.informed-consent-container h2,
.info-sheet-container     h2,
.assent-container         h2 {
  font-size: 1.75rem;  /* entspricht ungefähr Bootstrap’s Standard-h2 */
  line-height: 1.2;    /*/oder was in deinem Design passt */
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  text-align:left;
}

/* Dasselbe, falls du auch h3 hast, überall einheitlich: */
.informed-consent-container h3,
.info-sheet-container     h3,
.assent-container         h3 {
  font-size: 1.25rem;  /* entspricht ungefähr Bootstrap’s Standard-h3 */
  line-height: 1.3;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  text-align:left;
}