/**
 * HTH — Brücke zwischen Elementor-Struktur und bestehenden HTH-Section-Styles.
 * Sektionen bekommen im Editor die CSS-Klassen: hth-el-hero, hth-el-mission, …
 */

/* Hero (Burgunder-Gradient; Hintergrundbild optional später im Builder setzen) */
.elementor-element.hth-el-hero {
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(
      135deg,
      rgba(80, 4, 35, 0.88) 0%,
      rgba(126, 1, 53, 0.5) 70%
    ),
    linear-gradient(rgba(80, 4, 35, 0.75), rgba(80, 4, 35, 0.85));
  background-size: cover;
  background-position: center;
  border-radius: 0 0 var(--hth-radius-lg, 28px) var(--hth-radius-lg, 28px);
  color: #fff;
}

.elementor-element.hth-el-hero .elementor-heading-title,
.elementor-element.hth-el-hero .elementor-widget-text-editor {
  color: #fff;
}

.elementor-element.hth-el-hero .elementor-heading-title {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.elementor-element.hth-el-hero .hth-hero-label .elementor-heading-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.95;
}

/* Primär-/Outline-Buttons im Hero (Elementor Button-Widget) */
.elementor-element.hth-el-hero .elementor-button {
  border-radius: var(--hth-radius-btn, 12px);
  font-weight: 600;
  padding: 14px 28px;
}

.elementor-element.hth-el-hero .hth-btn-primary .elementor-button {
  background-color: var(--hth-burgundy);
  color: #fff;
  border: none;
}

.elementor-element.hth-el-hero .hth-btn-primary .elementor-button:hover {
  background-color: var(--hth-burgundy-dark);
}

.elementor-element.hth-el-hero .hth-btn-outline .elementor-button {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.85);
}

.elementor-element.hth-el-hero .hth-btn-outline .elementor-button:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Mission: wie .hth-mission */
.elementor-element.hth-el-mission {
  background: var(--hth-bg-alt);
}

.elementor-element.hth-el-mission .elementor-heading-title {
  color: var(--hth-burgundy-dark);
}

.elementor-element.hth-el-mission .hth-mission-label .elementor-heading-title {
  color: var(--hth-burgundy);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.elementor-element.hth-el-mission .elementor-widget-text-editor {
  color: var(--hth-text);
}

/* Karten-Spalten in Mission */
.elementor-element.hth-el-mission .hth-mission-card {
  background: var(--hth-bg-alt);
  border-radius: var(--hth-radius-card, 20px);
  box-shadow: var(--hth-shadow-card);
  padding: 28px 24px;
}

.elementor-element.hth-el-mission .hth-mission-card .elementor-heading-title {
  color: var(--hth-burgundy);
  font-size: 1.25rem;
}

/* Import: Sektions-HTML im Text-Editor volle Breite nutzen */
.elementor-element.hth-import-wrap .elementor-widget-text-editor {
  max-width: 100%;
}

/* Seiteninhalt unter der Header-Shell (verhindert, dass Hero über Burger/Overlay liegt) */
.site-main,
.site-content,
#content,
main {
  position: relative;
  z-index: 0;
}

/* Hero: kein Überstand des Hintergrunds über den Text-Editor-Container (Rundungen) */
.elementor-widget-text-editor .elementor-widget-container:has(.hth-hero) {
  overflow: hidden;
  border-radius: var(--hth-radius-lg, 28px);
  max-width: var(--hth-content-max, 1200px);
  width: calc(100% - 32px);
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .elementor-widget-text-editor .elementor-widget-container:has(.hth-hero) {
    width: calc(100% - 48px);
  }
}