.d35-section-header {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1.6fr) auto;
  align-items: end;
  padding: 1.75rem;
  border: 1px solid var(--d35-color-border);
  border-radius: var(--d35-radius);
  background: var(--d35-color-surface);
}

.d35-section-header--layout-stacked {
  grid-template-columns: minmax(0, 1fr);
}

/* Globaler Schalter (Allgemeine Einstellungen → „Section-Header-Box“): Body-
   Klasse schaltet Rahmen, Hintergrund und Card-Padding ab — nur der reine
   Header-Text bleibt. Höhere Spezifität (Body-Klasse) schlägt Basis-, Dark-
   Variant- und Mobile-Regeln, unabhängig von der Ladereihenfolge. */
.d35-no-section-header-box .d35-section-header {
  padding: 0;
  border: 0;
  background: transparent;
}

.d35-section-header--align-center {
  justify-items: center;
  text-align: center;
}

/* Dark variant: transparent card with a white border and light text, for use
   on dark section backgrounds. */
.d35-section-header--variant-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
}

.d35-section-header--variant-dark .d35-section-header__heading {
  color: #fff;
}

/* Blue preheading disappears on dark, so match it to the light-grey body copy. */
.d35-section-header--variant-dark .d35-section-header__preheading {
  color: rgba(255, 255, 255, 0.78);
}

.d35-section-header--variant-dark .d35-section-header__body {
  color: rgba(255, 255, 255, 0.78);
}

/* Secondary buttons on dark sections: transparent with a 2px white outline and
   white text. Covers headers with the dark variant and any dark section band
   (e.g. a standalone footer button inside a .d35-section-dark section). */
.d35-section-header--variant-dark .d35-button--secondary,
.d35-section-dark .d35-button--secondary {
  --d35-button-bg: transparent;
  --d35-button-color: #fff;
  --d35-button-border: #fff;
  --d35-button-bg-hover: rgba(255, 255, 255, 0.14);
  --d35-button-color-hover: #fff;
  --d35-button-border-hover: #fff;
  border-width: 2px;
}

.d35-section-header__content {
  display: grid;
  gap: 0.75rem;
  max-width: 46rem;
}

.d35-section-header__preheading {
  color: var(--d35-color-primary);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.d35-section-header__heading {
  margin: 0;
  color: var(--d35-color-text);
  font-size: clamp(1.45rem, 2.6vw, 2.15rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.d35-section-header__body {
  color: var(--d35-color-muted);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 42rem;
}

.d35-section-header__body > :first-child {
  margin-top: 0;
}

.d35-section-header__body > :last-child {
  margin-bottom: 0;
}

.d35-section-header__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* Gestapelte Header: die Buttons folgen der Textausrichtung — zentriert
   nur, wenn auch der Text zentriert ist; linksbündiger Text bekommt
   linksbündige Buttons. */
.d35-section-header--layout-stacked .d35-section-header__actions {
  justify-content: flex-start;
}

.d35-section-header--align-center .d35-section-header__actions {
  justify-content: center;
}

@media (max-width: 800px) {
  .d35-section-header {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding: 1.25rem;
  }

  .d35-section-header__actions {
    justify-content: flex-start;
  }

  .d35-section-header--align-center .d35-section-header__actions {
    justify-content: center;
  }
}