/* ==========================================================================
   Herzlicht — Sektionen: Hero, Leistungen, Warum wir, Team, Kontakt, Content
   ========================================================================== */

section{ position: relative; }
.section{ padding-block: clamp(3.5rem, 7vw, 7rem); }
.section--tight{ padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section--sand{ background: var(--bg-soft); }
.section--dark{ background: var(--sage-dark); color: var(--on-dark-muted); }
.section--dark h2, .section--dark h3{ color: var(--on-dark); }
.section-head{ max-width: 46rem; margin-bottom: clamp(2.2rem, 4vw, 3.5rem); }
.section-head--center{ margin-inline: auto; text-align: center; }

/* Sonnenstrahl-Hintergrundornament (Signature-Element, dezent, nie dominant) */
.sunray-bg{
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
}

/* ---------- HERO ---------- */
.hero{
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}
.hero__grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}
.hero__content{ grid-column: 1 / span 6; position: relative; z-index: 2; }
.hero__media{ grid-column: 7 / span 6; position: relative; z-index: 1; }
@media (max-width: 1000px){
  .hero__content, .hero__media{ grid-column: 1 / -1; }
  .hero__media{ order: -1; max-width: 480px; margin-inline: auto; }
}

.hero__title{ margin-bottom: .5em; }
.hero__title em{
  font-style: normal;
  color: var(--terracotta);
  position: relative;
}
.hero__lead{ font-size: 1.18rem; color: var(--text-muted); max-width: 40ch; }

.hero__actions{ display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.8rem 0 2.2rem; }

.trustbar{ display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; }
.trustbar__item{ display: flex; align-items: center; gap: .6rem; font-size: .92rem; color: var(--text-muted); font-weight: 500; }
.trustbar__item .icon{ width: 1.3em; height: 1.3em; color: var(--sage); }

.hero-slider{
  position: relative;
  aspect-ratio: 4 / 4.6;
  border-radius: var(--radius-blob);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero-slide{
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1400ms var(--ease-out);
}
.hero-slide.is-active{ opacity: 1; z-index: 1; }
.hero-slide img{ width: 100%; height: 100%; object-fit: cover; }
.hero-slide::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, oklch(28% 0.05 155 / 0.5), transparent 45%);
}
.hero-slide__caption{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem 1.8rem;
  color: var(--on-dark);
  font-weight: 600;
  z-index: 2;
}
.hero-dots{ position: absolute; bottom: 1.4rem; right: 1.6rem; z-index: 3; display: flex; gap: .5rem; }
.hero-dots button{
  width: 9px; height: 9px; border-radius: 50%; border: none;
  background: oklch(96% 0.012 95 / 0.5); cursor: pointer; padding: 0;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.hero-dots button.is-active{ background: var(--on-dark); transform: scale(1.3); }

.hero__badge-float{
  position: absolute;
  bottom: -1.4rem; left: -1.6rem;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 1.1rem 1.4rem;
  display: flex; align-items: center; gap: .8rem;
  z-index: 4;
  max-width: 240px;
}
@media (max-width: 560px){ .hero__badge-float{ left: 0; bottom: -1rem; padding: .9rem 1.1rem; } }

/* ---------- LEISTUNGEN — asymmetrisches Grid ---------- */
.services-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.2rem, 2.6vw, 2rem);
}
.service-card{ position: relative; overflow: hidden; display: flex; flex-direction: column; }
.service-card--lg{ grid-column: span 7; }
.service-card--sm{ grid-column: span 5; }
.service-card--third{ grid-column: span 4; }
@media (max-width: 900px){
  .service-card--lg, .service-card--sm, .service-card--third{ grid-column: 1 / -1; }
}
.service-card__num{
  font-family: 'Fraunces', serif;
  font-size: 3.2rem;
  color: var(--sage-tint);
  position: absolute;
  top: .6rem; right: 1.2rem;
  z-index: 0;
  font-weight: 600;
}
.service-card > *{ position: relative; z-index: 1; }
.service-card__link{
  margin-top: auto;
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 700; color: var(--sage-dark); text-decoration: none;
  padding-top: .6rem;
}
.service-card__link .icon{ width: 1.1em; height: 1.1em; transition: transform var(--dur-base) var(--ease-out); }
.service-card__link:hover .icon{ transform: translateX(4px); }

/* ---------- WARUM WIR ---------- */
.values-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 2.2rem);
}
.value-item{ grid-column: span 6; display: flex; gap: 1.1rem; }
@media (min-width: 900px){ .value-item:nth-child(odd){ grid-column: 2 / span 5; } .value-item:nth-child(even){ grid-column: 7 / span 5; } }
@media (max-width: 700px){ .value-item{ grid-column: 1 / -1; } }
.value-item__body h3{ margin-bottom: .3em; }
.value-item__body p{ margin-bottom: 0; color: var(--text-muted); }

.stats-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: clamp(3rem, 5vw, 4.5rem);
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px solid oklch(34% 0.05 155 / 0.14);
}
@media (max-width: 700px){ .stats-row{ grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1.2rem; } }

/* ---------- TEAM ---------- */
.team-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 3vw, 2.6rem);
}
.team-card{ grid-column: span 4; text-align: left; }
.team-card:nth-child(2){ margin-top: 2.4rem; }
@media (max-width: 900px){ .team-card{ grid-column: span 6; } .team-card:nth-child(2){ margin-top: 0; } }
@media (max-width: 560px){ .team-card{ grid-column: 1 / -1; } }
.team-card .blob-frame{ aspect-ratio: 1/1.05; margin-bottom: 1.2rem; }
.team-card__role{ color: var(--terracotta); font-weight: 600; font-size: .92rem; margin-bottom: .5rem; }

/* ---------- TESTIMONIAL ---------- */
.testimonial{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.testimonial__media{ grid-column: span 4; }
.testimonial__body{ grid-column: span 8; }
@media (max-width: 800px){ .testimonial__media, .testimonial__body{ grid-column: 1/-1; } .testimonial__media{ max-width: 220px; } }
.testimonial__author{ margin-top: 1.2rem; font-weight: 700; color: var(--sage-dark); }
.testimonial__author span{ display: block; font-weight: 500; color: var(--text-muted); font-size: .9rem; }

/* ---------- KONTAKT / CTA ---------- */
.contact-band{
  background: var(--sage-dark);
  color: var(--on-dark-muted);
  border-radius: var(--radius-lg);
  padding: clamp(2.4rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
}
.contact-band h2{ color: var(--on-dark); }
.contact-band__grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 4vw, 4rem);
  position: relative; z-index: 1;
}
@media (max-width: 860px){ .contact-band__grid{ grid-template-columns: 1fr; } }
.contact-methods{ display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.6rem; }
.contact-method{
  display: flex; align-items: center; gap: .9rem;
  color: var(--on-dark);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.08rem;
}
.contact-method .icon-tile{ background: oklch(96% 0.012 95 / 0.14); color: var(--on-dark); }
.contact-band .sunray-bg{ color: oklch(96% 0.012 95 / 0.12); }

.contact-page-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 860px){ .contact-page-grid{ grid-template-columns: 1fr; } }
.contact-map{ border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); border: 0; width: 100%; aspect-ratio: 4/3; }

/* ---------- Inner-Page Hero ---------- */
.page-hero{
  padding-block: clamp(2.8rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
}
.page-hero__lead{ font-size: 1.1rem; color: var(--text-muted); max-width: 56ch; }
.breadcrumb{ display: flex; align-items: center; gap: .5em; font-size: .88rem; color: var(--text-soft); margin-bottom: 1.2rem; }
.breadcrumb a{ color: var(--text-soft); text-decoration: none; }
.breadcrumb a:hover{ color: var(--sage-dark); }

/* ---------- Gutenberg-Content Grundtypografie ---------- */
.entry-content{ font-size: 1.05rem; }
.entry-content > *{ max-width: var(--container-narrow); margin-inline: auto; }
.entry-content > .alignwide{ max-width: min(100%, 1080px); }
.entry-content > .alignfull{ max-width: none; }
.entry-content .wp-block-columns{ gap: 2.5rem; }
.entry-content .wp-block-group{ padding: clamp(1.6rem, 3vw, 2.4rem); border-radius: var(--radius-md); background: var(--bg-soft); }
.entry-content h2{ margin-top: 1.6em; }
.entry-content ul li::marker{ color: var(--terracotta); }
.entry-content .wp-block-separator{ border-color: oklch(34% 0.05 155 / 0.18); margin-block: 2.5rem; }

/* CPT-Übersichtsraster (Leistungen-Seite) */
.leistungen-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.4rem, 2.6vw, 2rem);
}
.leistungen-grid .service-card{ grid-column: span 6; }
@media (max-width: 700px){ .leistungen-grid .service-card{ grid-column: 1/-1; } }

@media (max-width: 600px){
  .contact-band{ border-radius: var(--radius-md); padding: 1.8rem; }
  .section{ padding-block: 2.6rem; }
}