/* Zentrale Laufzeitregeln für ContentEngine-Blöcke – unabhängig vom Theme. */
.dwp-content-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}

.dwp-content-block {
  min-width: 0;
}

.dwp-content-block > :first-child {
  margin-block-start: 0;
}

.dwp-content-block > :last-child {
  margin-block-end: 0;
}

.dwp-content-block > .ce-component,
.dwp-content-block > .ce-component > * {
  width: 100%;
  max-width: none;
}

.dwp-content-block--table > *,
.dwp-content-block--comparison > *,
.dwp-content-block--comparison_table > *,
.dwp-content-block--data_table > *,
.dwp-content-block--schedule_table > *,
.dwp-content-block--vertical_table > * {
  width: 100%;
  max-width: none;
}

/* Die Palette des gewählten CP24-Themes steuert auch die zentralen UI-Blöcke. */
.theme-cp24-discovery {
  --ui-brand: var(--ink);
  --ui-accent: var(--tomato);
  --ui-soft: var(--cream);
  --ui-line: var(--line);
}

.theme-cp24-category {
  --ui-brand: var(--forest);
  --ui-accent: var(--orange);
  --ui-soft: var(--sand);
  --ui-line: var(--line);
}

.theme-cp24-sub-journey {
  --ui-brand: var(--navy);
  --ui-accent: var(--coral);
  --ui-soft: var(--mist);
  --ui-line: var(--line);
}

.theme-cp24-legacy-affiliate {
  --ui-brand: var(--ink);
  --ui-accent: var(--orange);
  --ui-soft: var(--surface, #f4f6f8);
  --ui-line: var(--line);
}

/* Der ContentEngine-Hero bleibt als geschlossene, kontrastreiche Einheit stabil. */
.dwp-content-block .ce-hero {
  color: #fff;
  background: linear-gradient(135deg, var(--ui-brand), color-mix(in srgb, var(--ui-brand) 72%, #000));
  box-shadow: var(--ui-shadow);
}

.dwp-content-block .ce-hero h2 {
  color: #fff;
}

.dwp-content-block .ce-hero > .ui-kicker {
  color: rgba(255, 255, 255, .82);
}

.dwp-content-block .ce-hero > p:not(.ui-kicker) {
  color: rgba(255, 255, 255, .78);
}

/* Verschachtelte Navigation für alle Themes. */
.dwp-nav-item--parent {
  position: relative;
}

.dwp-nav-dropdown > summary {
  display: flex;
  gap: 6px;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 750;
  list-style: none;
  white-space: nowrap;
}

.dwp-nav-dropdown > summary::-webkit-details-marker {
  display: none;
}

.dwp-nav-dropdown > summary::after {
  content: "⌄";
  color: currentColor;
  font-size: 12px;
}

.dwp-subnav {
  position: absolute;
  z-index: 80;
  top: calc(100% + 13px);
  left: 0;
  width: max-content;
  min-width: 220px;
  padding: 9px;
  display: grid;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  color: var(--ui-ink);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
}

.dwp-subnav a {
  padding: 9px 11px;
  border-radius: 7px;
  text-decoration: none;
}

.dwp-subnav a:hover,
.dwp-subnav a[aria-current="page"] {
  color: var(--ui-brand);
  background: var(--ui-soft);
}

.dwp-subnav__overview {
  margin-bottom: 4px;
  border-bottom: 1px solid var(--ui-line);
  font-weight: 850;
}

.dwp-mobile-nav-group {
  border-bottom: 1px solid var(--ui-line);
}

.dwp-mobile-nav-group > summary {
  padding: 16px 0;
  cursor: pointer;
  font: inherit;
  font-weight: 750;
  list-style: none;
}

.dwp-mobile-nav-group > summary::after {
  content: "+";
  float: right;
}

.dwp-mobile-nav-group[open] > summary::after {
  content: "−";
}

.dwp-mobile-nav-group > div {
  padding: 0 0 15px 14px;
  display: grid;
  gap: 4px;
}

.dwp-mobile-nav-group a {
  padding: 6px 0;
  text-decoration: none;
}

.dwp-footer-subitem {
  padding-left: 13px !important;
  opacity: .82;
}

@media (min-width: 900px) {
  .dwp-content-flow--columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dwp-content-flow--columns > .dwp-content-block--wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .dwp-content-block :is(.ce-audience > div, .ce-costs > div, .ce-related, .ce-service-faq > div, .ce-governance > div) {
    grid-template-columns: minmax(0, 1fr);
  }

  .dwp-content-block .ce-myth {
    grid-template-columns: minmax(0, 1fr);
  }

  .dwp-content-block .ce-myth > i {
    justify-self: center;
    transform: rotate(90deg);
  }
}