/* ==========================================================================
   Seiten-Sektionen — Hero, Slider, Breakout-Band, Leistungen, Kontakt, Content
   ========================================================================== */

.section { padding-block: var(--space-m); }
.section-s { padding-block: var(--space-s); }
.section-l { padding-block: var(--space-l); }
.section-xl { padding-block: var(--space-xl); }
.section-head { max-width: 46rem; margin-bottom: var(--space-s); }
.section-head p { color: var(--fg-muted); }

/* -------- Hero (vollflächig, Text-Overlay unten links) -------- */
.hero {
  position: relative;
  min-height: min(88vh, 860px);
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, oklch(22% 0.015 255 / 0.86) 0%, oklch(22% 0.015 255 / 0.3) 46%, oklch(22% 0.015 255 / 0.08) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
  padding-block: var(--space-l) var(--space-m);
  max-width: 44rem;
}
.hero .eyebrow { color: oklch(85% 0.1 70); }
.hero h1 { color: #fff; }
.hero p { color: oklch(97% 0.004 90 / 0.86); font-size: 1.15rem; max-width: 36rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: var(--space-xs); }
.hero .btn-ghost { border-color: oklch(97% 0.004 90 / 0.5); color: #fff; }
.hero .btn-ghost:hover { border-color: #fff; }

/* -------- Intro-Split (dominante Spalte + schmale Fakten-Spalte) -------- */
.intro-split {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  align-items: start;
}
.intro-main { grid-column: span 8; }
.intro-aside {
  grid-column: span 4;
  border-left: 1px solid var(--border);
  padding-left: var(--space-xs);
}
.intro-aside h6 { color: var(--fg-muted); }

/* -------- Slider (CPT slide) -------- */
.hero-slider { position: relative; }
.hero-slider .hero-media img { transition: opacity 900ms var(--ease-out); }
.slide-dots {
  position: absolute;
  z-index: 3;
  right: var(--gutter);
  bottom: var(--space-s);
  display: flex;
  gap: 0.6rem;
}
.slide-dots button {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1.5px solid oklch(97% 0.004 90 / 0.7);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background var(--duration-ui) var(--ease-out);
}
.slide-dots button.is-active { background: var(--accent); border-color: var(--accent); }
/* Jede Slide füllt den Hero vollständig (inset:0 relativ zu .hero-slide selbst, nicht zu .hero) —
   deshalb braucht .hero-slide dieselbe flex-end-Ausrichtung wie .hero für den Text-Overlay. */
.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms var(--ease-out);
}
.hero-slide.is-active { opacity: 1; pointer-events: auto; }

/* -------- Leistungen-Grid (asymmetrisch) -------- */
.leistungen-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
}
.leistungen-grid .service-card:nth-child(1) { grid-column: span 7; }
.leistungen-grid .service-card:nth-child(2) { grid-column: span 5; }
.leistungen-grid .service-card:nth-child(3) { grid-column: span 5; }
.leistungen-grid .service-card:nth-child(4) { grid-column: span 7; }
.leistungen-grid .service-card:nth-child(5) { grid-column: span 12; }
.leistungen-grid .service-card:nth-child(5) .service-card-media { aspect-ratio: 21 / 9; }
.leistungen-grid .service-card-media { aspect-ratio: 3 / 2; }

.leistungen-grid-compact { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--grid-gap); }
.leistungen-grid-compact .service-card { grid-column: span 4; }

/* -------- Breakout-Band (bewusster überbreiter Bruch) -------- */
.breakout-band {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  color: #fff;
  clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
  margin-block: var(--space-xl);
}
.breakout-band .hero-media::after { background: oklch(22% 0.015 255 / 0.58); }
.breakout-band-content {
  position: relative;
  z-index: 2;
  width: min(100% - (var(--gutter) * 2), 60rem);
  margin-inline: auto;
  text-align: center;
}
.breakout-band h2 { color: #fff; }
.breakout-band p { color: oklch(97% 0.004 90 / 0.9); margin-inline: auto; }

/* -------- Mini-Hero für Unterseiten -------- */
.page-hero {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
}
.page-hero.no-image { background: var(--primary); min-height: 32vh; }
.page-hero-content {
  position: relative; z-index: 2;
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
  padding-block: var(--space-m) var(--space-s);
  max-width: 42rem;
}
.page-hero h1 { color: #fff; }

/* -------- Kontakt -------- */
.kontakt-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  align-items: start;
}
.kontakt-main { grid-column: span 7; }
.kontakt-aside { grid-column: span 5; display: flex; flex-direction: column; gap: var(--space-xs); position: sticky; top: calc(var(--header-h) + var(--space-xs)); }

/* -------- Editorial Content (Gutenberg) -------- */
.entry-content { max-width: 68ch; }
.entry-content.is-wide { max-width: none; }
.entry-content > * + * { margin-top: 1.3em; }
.entry-content h2 { margin-top: var(--space-m); }
.entry-content h3 { margin-top: var(--space-s); }
.entry-content .wp-block-columns { gap: var(--grid-gap); }
.entry-content .wp-block-group.has-background {
  padding: var(--space-xs);
  border-radius: var(--radius);
}
.entry-content ul li::marker,
.entry-content ol li::marker { color: var(--accent); }
.wp-block-separator { border: none; border-top: 1px solid var(--border); margin-block: var(--space-m); }

@media (max-width: 900px) {
  .intro-main, .intro-aside { grid-column: span 12; }
  .intro-aside { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: var(--space-xs); margin-top: var(--space-xs); }
  .leistungen-grid .service-card,
  .leistungen-grid-compact .service-card { grid-column: span 12 !important; }
  .kontakt-main, .kontakt-aside { grid-column: span 12; }
  .kontakt-aside { position: static; }
  .breakout-band { clip-path: none; min-height: 420px; }
}