.sub_page_headline_container {
  display: none;
}

.legal-container-wrapper {
  display: flex;
  width: 100%;
  min-height: 85vh;
  justify-content: center;
  align-items: center;
  background: var(--utility-grey-0);
  padding: var(--spacing-07);
}

.legal-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-06);
  max-width: 54.125rem;
  padding-bottom: var(--spacing-11);
  padding-top: var(--spacing-07);
  width: 100%;
}

.legal-titel-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-05);
}

.legal-titel-inner-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-04);
}

.legal-description-text {
  max-width: 26.3125rem;
}

/* Nummerierung für AGB-Listen */
.legal-information-container > div > ol {
  counter-reset: main-counter;
  list-style: none;
  padding-left: 0;
}

.legal-information-container > div > ol > li {
  counter-increment: main-counter;
  margin-bottom: var(--spacing-05);
  padding-left: 2.5rem;
  position: relative;
  list-style: none;
}

.legal-information-container > div > ol > li::before {
  content: counter(main-counter) ". ";
  font-weight: bold;
  position: absolute;
  left: 0;
}

.legal-information-container > div > ol > li > ol {
  counter-reset: sub-counter;
  list-style: none;
  margin-top: var(--spacing-03);
  padding-left: 0;
}

.legal-information-container > div > ol > li > ol > li {
  counter-increment: sub-counter;
  margin-bottom: var(--spacing-03);
  padding-left: 3rem;
  position: relative;
}

.legal-information-container > div > ol > li > ol > li::marker {
  content: "";
}

.legal-information-container > div > ol > li > ol > li::before {
  content: counter(main-counter) "." counter(sub-counter) " ";
  font-weight: normal;
  position: absolute;
  left: 0;
}

/* Spezielle Nummerierung für verschachtelte Listen (a, b, c oder i, ii, iii) */
.legal-information-container > div > ol > li > ol > li > ol[type="a"],
.legal-information-container > div > ol > li > ol > li > ol[type="i"] {
  margin-top: var(--spacing-02);
  padding-left: 2rem;
}

.legal-information-container > div > ol > li > ol > li > ol[type="a"] > li,
.legal-information-container > div > ol > li > ol > li > ol[type="i"] > li {
  margin-bottom: var(--spacing-02);
  padding-left: 2rem;
}

/* Dritte Ebene: Nummerierung wie 4.2.1, 4.2.2 etc. */
.legal-information-container > div > ol > li > ol > li > ol:not([type]) {
  counter-reset: subsub-counter;
  list-style: none;
  margin-top: var(--spacing-03);
  padding-left: 0;
}

.legal-information-container > div > ol > li > ol > li > ol:not([type]) > li {
  counter-increment: subsub-counter;
  margin-bottom: var(--spacing-03);
  padding-left: 3.5rem;
  position: relative;
}

.legal-information-container
  > div
  > ol
  > li
  > ol
  > li
  > ol:not([type])
  > li::marker {
  content: "";
}

.legal-information-container
  > div
  > ol
  > li
  > ol
  > li
  > ol:not([type])
  > li::before {
  content: counter(main-counter) "." counter(sub-counter) "."
    counter(subsub-counter) " ";
  font-weight: normal;
  position: absolute;
  left: 0;
}

/* Unordered Lists innerhalb der Listen - generalisiert für alle Ebenen */
.legal-information-container ul {
  margin-top: var(--spacing-02);
  padding-left: 2rem;
}

.legal-information-container ul > li {
  margin-bottom: var(--spacing-02);
  padding-left: 0.5rem;
}

/* Spezielle Anpassung: ul direkt unter ol > li auf erster Ebene */
.legal-information-container > div > ol > li > ul {
  margin-top: var(--spacing-02);
}

/* Paragraphen innerhalb der Listen normalisieren */
.legal-information-container > div > ol > li > p,
.legal-information-container > div > ol > li > ol > li > p {
  margin-top: 0;
  margin-bottom: var(--spacing-03);
}

.legal-information-container > div > ol > li > p:last-child,
.legal-information-container > div > ol > li > ol > li > p:last-child {
  margin-bottom: 0;
}

/* Überschriften innerhalb der Listen */
.legal-information-container > div > ol > li > b,
.legal-information-container > div > ol > li > ol > li > b {
  display: block;
  margin-bottom: var(--spacing-02);
}

@media only screen and (min-width: 1280px) and (max-width: 1535px) {
}

@media only screen and (min-width: 640px) and (max-width: 1279px) {
  .legal-titel {
    font-size: 2rem;
    letter-spacing: -0.03rem;
  }

  .legal-container-wrapper {
    padding: var(--spacing-05) var(--spacing-06) var(--spacing-06)
      var(--spacing-04);
  }
}

@media only screen and (max-width: 639px) {
  .legal-titel {
    font-size: 2rem;
    letter-spacing: -0.03rem;
  }

  .legal-container-wrapper {
    padding: var(--spacing-05) var(--spacing-04) var(--spacing-07)
      var(--spacing-04);
  }
}