/* ============================================================
   wayvico – Design-System & Layout
   Farben & Schriften gemäß Styleguide
   ============================================================ */

:root {
  /* Markenfarben */
  --petrol:      #054546;
  --petrol-dark: #033233;
  --orange:      #EF630E;
  --orange-dark: #d1560b;
  --warmweiss:   #F5F1E8;
  --hellgrau:    #E9ECEC;
  --dunkelgrau:  #2D3436;
  --white:       #ffffff;

  /* Abgeleitete Töne */
  --petrol-tint: rgba(5, 69, 70, 0.08);
  --text:        var(--dunkelgrau);
  --text-muted:  #5b6466;

  /* Schriften */
  --font-head: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --maxw: 1180px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
  --radius: 14px;
  --shadow-sm: 0 4px 14px rgba(5, 69, 70, 0.07);
  --shadow-md: 0 12px 40px rgba(5, 69, 70, 0.12);
  --header-h: 84px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.12;
  color: var(--petrol);
  margin: 0 0 0.5em;
  letter-spacing: 0.2px;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }

p { margin: 0 0 1.1em; }

a { color: var(--petrol); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--orange); }

/* ---------- Utility ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section--tint { background: var(--warmweiss); }
.section--grey { background: var(--hellgrau); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1rem;
}

.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.lead { font-size: 1.15rem; color: var(--text-muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  padding: 0.95em 1.9em;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease),
              color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn--primary { background: var(--orange); color: var(--white); box-shadow: 0 8px 22px rgba(239, 99, 14, 0.28); }
.btn--primary:hover { background: var(--orange-dark); color: var(--white); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--petrol); border-color: var(--petrol); }
.btn--ghost:hover { background: var(--petrol); color: var(--white); transform: translateY(-2px); }
.btn--light { background: var(--white); color: var(--petrol); }
.btn--light:hover { background: var(--warmweiss); color: var(--petrol); transform: translateY(-2px); }

.btn--sm { padding: 0.3rem 1.5em; font-size: 0.92rem; }
.btn--lg { padding: 1.15em 2.4em; font-size: 1.05rem; }

.text-link {
  font-weight: 700;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.text-link::after { content: "\2192"; transition: transform 0.2s var(--ease); }
.text-link:hover { color: var(--orange-dark); }
.text-link:hover::after { transform: translateX(4px); }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: height 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.site-header.is-scrolled {
  height: 68px;
  box-shadow: var(--shadow-sm);
  background: rgba(255, 255, 255, 0.96);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
}
.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand img { width: 46px; height: 46px; transition: width 0.3s var(--ease), height 0.3s var(--ease); }
.is-scrolled .brand img { width: 40px; height: 40px; }
.brand__name {
  font-family: var(--font-head);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--petrol);
  letter-spacing: 0.5px;
  line-height: 1;
}
.brand__name b { color: var(--orange); font-weight: 600; }

.main-nav { display: flex; align-items: center; gap: 2rem; }
.main-nav ul {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav ul a {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--petrol);
  position: relative;
  padding-block: 0.3rem;
}
.main-nav ul a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--orange);
  transition: width 0.25s var(--ease);
}
.main-nav ul a:hover::after { width: 100%; }

.main-nav li.menu-item-has-children { position: relative; }
.main-nav .sub-menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0.6rem 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--petrol);
  border-radius: var(--radius);
  border-top-left-radius: 0;
  box-shadow: var(--shadow-md);
  gap: 0;
  z-index: 20;
}
.main-nav li.menu-item-has-children:hover > .sub-menu,
.main-nav li.menu-item-has-children:focus-within > .sub-menu {
  display: flex;
  flex-direction: column;
}
.main-nav .sub-menu li + li { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.main-nav .sub-menu a {
  display: block;
  padding: 0.65rem 1.4rem;
  color: var(--warmweiss);
  white-space: nowrap;
}
.main-nav .sub-menu a::after { display: none; }
.main-nav .sub-menu a:hover { background: rgba(255, 255, 255, 0.08); color: var(--orange); }
.theme-overlay .main-nav .sub-menu a,
.theme-solid .main-nav .sub-menu a { color: var(--warmweiss); }
.theme-overlay .main-nav .sub-menu a:hover,
.theme-solid .main-nav .sub-menu a:hover { color: var(--orange); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 10px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--petrol);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================================
   Theme: Overlay-Header (transparent über dem Hero, Petrol beim Scrollen)
   Scoped auf .theme-overlay, damit andere Seiten/Versionen unberührt bleiben.
   ============================================================ */
.theme-overlay .site-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.theme-overlay .site-header.is-scrolled {
  background: var(--petrol);
  box-shadow: 0 4px 20px rgba(3, 50, 51, 0.30);
}
/* Helle Marke, Links und Burger über dem Bild */
.theme-overlay .brand__name { color: var(--warmweiss); }
.theme-overlay .brand__name b { color: var(--orange); }
.theme-overlay .main-nav ul a { color: var(--warmweiss); }
.theme-overlay .main-nav ul a:hover { color: var(--orange); }
.theme-overlay .nav-toggle span { background: var(--warmweiss); }

/* Hero randlos unter dem transparenten Header */
.theme-overlay .hero { margin-top: 0; min-height: 100svh; }
.theme-overlay .hero__media img { object-position: center 34%; }
/* Overlay: oben dunkel (Header-Links lesbar), Mitte hell (Gesichter frei), unten dunkel (Text) */
.theme-overlay .hero.hero--bottom::before {
  background:
    linear-gradient(180deg,
      rgba(3, 50, 51, 0.58) 0%,
      rgba(3, 50, 51, 0.15) 12%,
      rgba(3, 50, 51, 0.08) 40%,
      rgba(3, 50, 51, 0.48) 55%,
      rgba(3, 50, 51, 0.82) 72%,
      rgba(3, 50, 51, 0.93) 100%);
}

/* ============================================================
   Theme: Solid-Header (Unterseiten) – Header von Anfang an Petrol
   ============================================================ */
.theme-solid .site-header {
  background: var(--petrol);
  box-shadow: 0 4px 20px rgba(3, 50, 51, 0.18);
}
.theme-solid .site-header.is-scrolled {
  background: var(--petrol);
  box-shadow: 0 4px 20px rgba(3, 50, 51, 0.30);
}
.theme-solid .brand__name { color: var(--warmweiss); }
.theme-solid .brand__name b { color: var(--orange); }
.theme-solid .main-nav ul a { color: var(--warmweiss); }
.theme-solid .main-nav ul a:hover { color: var(--orange); }
.theme-solid .nav-toggle span { background: var(--warmweiss); }
/* Inhalt nicht unter den fixen Header rutschen lassen */
.theme-solid .site-main { padding-top: var(--header-h); }
/* Sektionsvorlage ohne Titel (page-sections-no-title.php): erste Section
   sitzt direkt unter dem Header, ohne deren übliches großes Top-Padding
   zusätzlich zum Header-Schutzabstand oben drauf zu addieren. */
.theme-solid .site-main > .section:first-child { padding-top: clamp(1.5rem, 4vw, 2.5rem); }

/* ============================================================
   Seiten-Kopf & Fließtext (page-sections.php)
   ------------------------------------------------------------
   .page-head: schmaler Titelbereich der Sektionsvorlage – zeigt nur
   die H1, mit knappem Abstand nach unten, damit der folgende Inhalt
   eng anschließt statt „in der Luft zu hängen“. Zentriert wie die
   übrigen Abschnittsköpfe der Unterseiten (Formate/Für-wen/CTA), damit
   Titel und Einstieg nicht als Fremdkörper wirken.
   .prose: leichtgewichtiger Fließtext-Block als Alternative zu
   .section – für Absätze, die keine eigene Abschnittstrennung
   (Hintergrundwechsel, große Innenabstände) brauchen. Kein
   Eyebrow/H2/Grid nötig; ein einzelner Absatz oder .lead + Absätze
   genügen. Der einleitende .prose-Block direkt nach .page-head wird
   ebenfalls zentriert gesetzt (.section-head--center), damit er mit
   dem Titel als ein zusammenhängender Einstieg wirkt.
   Beide nutzen .section-head zur Zeilenlängen-Begrenzung (720px),
   überschreiben aber dessen für Abschnittsköpfe gedachten unteren
   Abstand vor einem Grid. Ein schmaler Orange-Akzent über der H1
   holt die Markenfarbe in den sonst text-only Kopfbereich – rein
   dekorativ, kommt automatisch aus dem Template, keine Seiteninhalte
   nötig.
   ============================================================ */
.page-head { padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(0.5rem, 2vw, 1rem); }
.prose { padding-block: clamp(1.25rem, 4vw, 2.5rem); }
.page-head .section-head,
.prose .section-head { margin-bottom: 0; }
.page-head h1 { margin-bottom: 0; }
.page-head .section-head::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 0 auto 1.25rem;
  background: var(--orange);
}

/* ============================================================
   Hero als Group-Block mit Hintergrundbild (block-editierbar) – .wv-hero
   Reproduziert die Optik von .hero--bottom mit robustem Core-Markup.
   ============================================================ */
.wv-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;      /* Inhalt unten */
  color: var(--white);
  isolation: isolate;
  overflow: hidden;
  background-color: var(--petrol-dark); /* Fallback hinter dem Bild */
  background-size: cover;
  background-position: 50% 34%;
}
/* Overlay: oben dunkel (Header lesbar), Mitte hell (Gesichter frei), unten dunkel (Text) */
.wv-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(3, 50, 51, 0.58) 0%,
      rgba(3, 50, 51, 0.15) 12%,
      rgba(3, 50, 51, 0.08) 40%,
      rgba(3, 50, 51, 0.48) 55%,
      rgba(3, 50, 51, 0.82) 72%,
      rgba(3, 50, 51, 0.93) 100%);
}
.wv-hero .wv-hero-inner {
  text-align: left;
  padding-block: 1rem clamp(2rem, 5vw, 3.5rem);
}
.wv-hero-title {
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.12;
  font-size: clamp(2.2rem, 6.6vw, 5.6rem);
  letter-spacing: 1px;
  margin: 0 0 0.25em;
  text-shadow: 0 2px 20px rgba(3, 50, 51, 0.6);
}
@media (min-width: 700px) { .wv-hero-title { white-space: nowrap; } }
.wv-hero .hero__claim { text-shadow: 0 2px 20px rgba(3, 50, 51, 0.6); }
.wv-hero .hero__sub { max-width: 64ch; }
/* CTA-Buttons (Core-Buttons-Block) etwas Abstand nach oben */
.wv-hero .wp-block-buttons { margin-top: 1.6rem; }

/* Mobile: Textblock in den unteren Bildbereich schieben, damit die Gesichter
   frei bleiben. Der Hero darf dabei höher als der Viewport werden – der untere
   Teil (Fließtext + Buttons) scrollt bewusst unter die Falz. */
@media (max-width: 820px) {
  .wv-hero .wv-hero-inner {
    padding-block: 52vh 2.5rem;   /* Fallback für Browser ohne svh */
    padding-block: 52svh 2.5rem;
  }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  /* Hero beginnt unterhalb des fixierten Headers, damit das Bild vollständig sichtbar ist */
  margin-top: var(--header-h);
  min-height: min(calc(100vh - var(--header-h)), 780px);
  display: flex;
  align-items: center;
  color: var(--white);
  isolation: isolate;
}
/* Variante: Text beginnt im unteren Bildbereich, damit die Gesichter frei bleiben.
   Kompakter, tiefer sitzender Block, damit die einzeilige Überschrift unter den
   Gesichtern startet. */
.hero--bottom { align-items: flex-end; }
.hero--bottom .hero__inner { max-width: none; padding-block: 1rem 2rem; }
/* Overlay: oben hell (Gesichter sichtbar), unten dunkler (Text lesbar) */
.hero.hero--bottom::before {
  background:
    linear-gradient(180deg,
      rgba(3, 50, 51, 0.18) 0%,
      rgba(3, 50, 51, 0.26) 28%,
      rgba(3, 50, 51, 0.72) 48%,
      rgba(3, 50, 51, 0.88) 74%,
      rgba(3, 50, 51, 0.94) 100%),
    linear-gradient(90deg, rgba(5, 69, 70, 0.45) 0%, rgba(5, 69, 70, 0.05) 60%);
}
.hero--bottom h1,
.hero--bottom .hero__claim { text-shadow: 0 2px 20px rgba(3, 50, 51, 0.6); }
/* Überschrift breiter und – ab Tablet-Breite – auf einer Zeile */
.hero--bottom h1 { font-size: clamp(2.2rem, 6.6vw, 5.6rem); letter-spacing: 1px; margin-bottom: 0.25em; }
.hero--bottom .hero__claim { margin-bottom: 0.7em; }
.hero--bottom .hero__sub { max-width: 62ch; margin-bottom: 1.4rem; }
@media (min-width: 700px) { .hero--bottom h1 { white-space: nowrap; } }

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(3, 50, 51, 0.30) 0%, rgba(3, 50, 51, 0.55) 55%, rgba(3, 50, 51, 0.78) 100%),
    linear-gradient(90deg, rgba(5, 69, 70, 0.65) 0%, rgba(5, 69, 70, 0.15) 65%);
}
.hero__inner { max-width: 760px; padding-block: 3rem; }
.hero h1 { color: var(--white); margin-bottom: 0.35em; }
.hero h1 .accent { color: var(--warmweiss); }
.hero__claim {
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-style: italic;
  color: var(--warmweiss);
  margin-bottom: 1.2em;
  opacity: 0.95;
}
.hero__sub { font-size: 1.2rem; max-width: 46ch; margin-bottom: 2rem; color: rgba(255,255,255,0.92); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ============================================================
   Bild & Text
   ============================================================ */
.image-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.image-text--reverse .image-text__col { order: 2; }
.image-text__col { min-width: 0; }
.image-text__media {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
}
.image-text__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 820px) {
  .image-text { grid-template-columns: 1fr; }
  .image-text--reverse .image-text__col { order: 0; }
  /* ID-Selektoren oben (Coach-Profile) schlagen sonst diesen Reset. */
  #ulrike .image-text,
  #christa .image-text,
  #giotto .image-text { grid-template-columns: 1fr; }
}

/* ============================================================
   Intro / Über wayvico
   ============================================================ */
.intro__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.name-meaning {
  display: grid;
  gap: 1rem;
  background: var(--petrol);
  color: var(--white);
  padding: clamp(1.8rem, 4vw, 2.6rem);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.name-meaning__item { display: grid; grid-template-columns: 3.5rem 1fr; column-gap: 1.75rem; align-items: baseline; }
.name-meaning__item + .name-meaning__item { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.15); }
.name-meaning__key {
  font-family: var(--font-head);
  font-size: 2rem;
  color: var(--orange);
  font-weight: 600;
}
.name-meaning__val { color: rgba(255,255,255,0.9); font-size: 1rem; align-self: center; }
.name-meaning__val b { color: var(--white); font-weight: 700; }

/* ============================================================
   Werte
   ============================================================ */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.value-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.7rem 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(5, 69, 70, 0.06);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.value-card__num {
  font-family: var(--font-head);
  font-size: 1.4rem;
  color: var(--orange);
  font-weight: 600;
}
.value-card h3 { font-size: 1.35rem; margin: 0.3rem 0 0.4rem; }
.value-card p { font-size: 0.96rem; color: var(--text-muted); margin: 0; }

/* ============================================================
   Angebote
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.service-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(5, 69, 70, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.service-card__icon {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--petrol-tint);
  color: var(--petrol);
  margin-bottom: 0.4rem;
}
.service-card__icon svg { width: 28px; height: 28px; }
.service-card h3 { margin: 0; }
.service-card p { color: var(--text-muted); margin: 0; flex-grow: 1; }
.service-card .text-link { margin-top: 0.6rem; }

/* ============================================================
   Coaching-Detailseite (Angebots-Sections mit Typische-Anliegen-Karte)
   ============================================================ */
.offer-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.offer-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(5, 69, 70, 0.06);
}
.offer-card__label {
  font-weight: 700;
  color: var(--petrol);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.check-list { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.check-list li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
.program-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.program-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2rem);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(5, 69, 70, 0.06);
}
.program-card__meta { font-weight: 700; color: var(--orange); font-size: 0.85rem; letter-spacing: 0.02em; margin-bottom: 0.4rem; }
.program-card h4 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.program-card p { color: var(--text-muted); margin: 0; font-size: 0.95rem; }
/* Karten-Hintergrund an die Section anpassen: auf weißen (nicht getönten)
   Sections in Beige (warmweiss) für Kontrast/Abhebung, auf getönten
   Sections (section--tint, bereits beige) bleibt Weiß – sonst würden Karte
   und Section optisch verschmelzen. */
.section:not(.section--tint) .offer-card,
.section:not(.section--tint) .program-card {
  background: var(--warmweiss);
  /* --shadow-sm (0.07 Deckkraft) verläuft hier über weißem Section-Grund
     fast unsichtbar, weil helle Karte + heller Schatten + weiße Seite kaum
     Kontrast ergeben. Auf getönten Sections wirkt derselbe Schatten unter
     einer weißen Karte deutlich sichtbarer (dunklerer Untergrund). Hier
     daher kräftiger, damit die Karte optisch genauso "abhebt" wie die
     anderen Boxen. */
  box-shadow: 0 6px 22px rgba(5, 69, 70, 0.14);
}
/* Überschrift "Unsere Maßnahme-Angebote" direkt an die darunter liegenden
   Karten koppeln (statt des für große Section-Intros gedachten weiten
   .section-head-Abstands), damit sie als Titel der Karten-Gruppe wirkt. */
.section-head:has(+ .program-grid) {
  margin-bottom: 1.1rem;
}
.section-head:has(+ .program-grid) h3 {
  margin-bottom: 0;
}
.section-head:has(+ .program-grid) + .program-grid {
  margin-top: 0;
}
@media (max-width: 820px) {
  .offer-grid { grid-template-columns: 1fr; }
  .program-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Zielgruppen-Band
   ============================================================ */
.audience {
  background: var(--petrol);
  color: var(--white);
}
.audience h2 { color: var(--white); }
.audience .lead { color: rgba(255,255,255,0.82); }
.audience-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
  list-style: none;
  padding: 0;
}
.audience-list li {
  padding: 1.4rem;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  font-weight: 600;
}
.audience-list li span {
  display: block;
  font-family: var(--font-head);
  font-size: 1.6rem;
  color: var(--orange);
  margin-bottom: 0.4rem;
}

/* ============================================================
   Team
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.team-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
  align-content: start;
  justify-items: center;
  text-align: center;
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(5, 69, 70, 0.06);
}
/* Platzhalter-Avatar mit Initialen – hier später echtes Foto einsetzen */
.avatar {
  width: 92px; height: 92px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.team-card:nth-child(2) .avatar { background: linear-gradient(135deg, var(--orange), var(--orange-dark)); }
.team-card h3 { margin: 0 0 0.15rem; }
.team-card__role { font-weight: 700; color: var(--orange); font-size: 0.9rem; letter-spacing: 0.02em; margin-bottom: 0.7rem; }
.team-card p { color: var(--text-muted); font-size: 0.98rem; margin: 0 0 0.9rem; }

/* ============================================================
   Coach-Profile (Bild & Text, abwechselnd)
   ------------------------------------------------------------
   Scoped auf die Profil-Sections (#ulrike/#christa/#giotto), damit das
   generische .image-text-Pattern (bild-text.php) anderswo unverändert
   bleibt: Foto und Text starten oben bündig statt vertikal zentriert,
   und die Bildspalte ist schmaler als die Textspalte.
   ============================================================ */
/* Nur ab der Breite, ab der .image-text überhaupt zweispaltig ist (siehe
   @media (max-width: 820px) oben). Ohne diese Einschränkung haben die
   ID-Selektoren hier dieselbe Spezifität wie der Mobile-Reset, stehen aber
   später im Quellcode und würden ihn auf Mobile überschreiben – dadurch
   blieb die Zweispaltigkeit (und bei Christa die vertauschte Spaltenbreite)
   fälschlich auch unterhalb von 820px aktiv. */
@media (min-width: 821px) {
  #ulrike .image-text,
  #christa .image-text,
  #giotto .image-text {
    grid-template-columns: 0.82fr 1.18fr;
    /* stretch statt start: Foto und Textspalte starten weiterhin oben bündig
       (stretch ändert nur die Höhe, nicht die Startposition), aber das Foto
       füllt jetzt die volle Zeilenhöhe aus, statt bei kürzerem Text darunter
       Weißraum stehen zu lassen. */
    align-items: stretch;
  }
  /* image-text--reverse setzt die Bildspalte per order:2 an zweite Stelle;
     dadurch würde sie sonst die breite 1.18fr-Spur statt der schmalen bekommen.
     Für gespiegelte Sections die fr-Werte mitspiegeln, damit das Bild gleich
     groß bleibt wie bei den nicht gespiegelten Profilen. */
  #christa .image-text.image-text--reverse {
    grid-template-columns: 1.18fr 0.82fr;
  }
  #ulrike .image-text__media,
  #christa .image-text__media,
  #giotto .image-text__media {
    height: 100%;
  }
}
.coach-section__role { font-weight: 700; color: var(--orange); font-size: 0.9rem; letter-spacing: 0.02em; margin: 0 0 0.9rem; }
/* Gutenberg setzt via :root :where(.is-layout-flow) > :first-child
   { margin-block-start: 0 } bereits margin-top:0 auf das erste Kind – diese
   Regel hat durch :root+:first-child (0,2,0) mehr Spezifität als eine reine
   Klasse (0,1,0) und würde jeden margin-top hier unbemerkt überschreiben
   (deshalb hatte "margin: -0.5rem 0 …" zuvor keine Wirkung). Daher hier über
   die ID-Sections skopiert mit passend höherer Spezifität: gleicht den
   Zeilendurchschuss (line-height) der kleinen Schrift aus, damit die Zeile
   optisch – nicht nur als Box – bündig mit der Bildoberkante beginnt. */
#ulrike .coach-section__role,
#christa .coach-section__role,
#giotto .coach-section__role {
  margin-top: -1.5rem;
}
.coach-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.6rem;
}
/* .social-link wird zusammen mit btn/btn--ghost/btn--sm gesetzt, damit
   Padding, Schriftgröße, Border-Breite und Radius exakt von dort geerbt
   werden (gleiche Höhe wie der Mailto-Button) – hier nur die abweichende,
   dezentere Randfarbe. */
.social-link {
  border-color: rgba(5, 69, 70, 0.25);
}
.social-link:hover {
  color: var(--orange);
  border-color: var(--orange);
  background: rgba(239, 99, 14, 0.06);
}
/* Generische Icon-Klasse für alle Button-Icons (Mail, LinkedIn, XING).
   Größe an die Versalhöhe (Cap-Height) der Button-Schrift gekoppelt, nicht
   an die volle em-Box: 1em (14.72px) war sichtbar größer als die Versalhöhe
   von "X" in dieser Schrift (gemessen: 11px, Faktor ~0.75). Jedes Icon-SVG
   bekommt eine eng um die tatsächliche Zeichnung zentrierte viewBox (per
   getBBox() vermessen), damit alle Icons optisch gleich groß wirken. */
.btn__icon {
  width: 0.75em;
  height: 0.75em;
  fill: currentColor;
  flex-shrink: 0;
}
/* Mail-Icon ist breiter als hoch (Tinten-Seitenverhältnis 20:16 = 1.25);
   in eine quadratische Box gezwängt füllt seine Tinte die Höhe nur zu 80%
   und wirkt dadurch kleiner als die Textversalhöhe. Breite proportional
   berechnet (0.75em * 20/16), Höhe bleibt 0.75em – so füllt die Tinte bei
   der eng zugeschnittenen viewBox exakt die Cap-Height, ohne Verzerrung. */
.btn__icon--mail {
  width: 0.9375em;
}
.tag-list {
  display: grid;
  gap: 0.55rem;
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  list-style: none;
  border-top: 1px solid rgba(5, 69, 70, 0.12);
}
.tag-list li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}
.tag-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}

/* ============================================================
   Coach-Details (Qualifikationen & Berufserfahrung)
   Zweispaltiger Block unterhalb des Bild-Text-Profils je Coach.
   ============================================================ */
.coach-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(5, 69, 70, 0.12);
}
.coach-details__title {
  font-size: 1.25rem;
  color: var(--petrol);
  margin: 0 0 1rem;
}
.coach-details .tag-list {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
@media (max-width: 820px) {
  .coach-details { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ============================================================
   Karussell
   Generisches Layout-Element für beliebigen Slide-Inhalt.
   Anzahl gleichzeitig sichtbarer Slides über Modifier-Klasse steuerbar:
   ohne Modifier = 1 Slide (volle Breite), .carousel--2-up / --3-up / --4-up
   für entsprechend mehr Slides nebeneinander. Wird responsive automatisch
   reduziert (siehe Responsive-Sektion).
   ============================================================ */
.carousel { --carousel-gap: 1.5rem; --carousel-visible: 1; position: relative; }
.carousel--2-up { --carousel-visible: 2; }
.carousel--3-up { --carousel-visible: 3; }
.carousel--4-up { --carousel-visible: 4; }

.carousel__track {
  display: flex;
  gap: var(--carousel-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }

.carousel__slide {
  flex: 0 0 calc((100% - (var(--carousel-visible) - 1) * var(--carousel-gap)) / var(--carousel-visible));
  min-width: 0;
  scroll-snap-align: start;
}

/* Optionale Karten-Optik für einen Slide – kann jederzeit durch anderen Inhalt ersetzt werden. */
.carousel__slide-card {
  height: 100%;
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(5, 69, 70, 0.06);
}
.carousel__slide-card .wp-block-image { margin-bottom: 1rem; }
.carousel__slide-card img { border-radius: calc(var(--radius) - 6px); }
.carousel__slide-card h3 { margin: 0 0 0.4rem; }
.carousel__slide-card p { color: var(--text-muted); margin: 0; }

.carousel__nav { display: flex; justify-content: center; gap: 0.75rem; margin-top: 1.75rem; }
.carousel__btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(5, 69, 70, 0.15);
  background: var(--white);
  color: var(--petrol);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.carousel__btn svg { width: 20px; height: 20px; }
.carousel__btn:hover:not(:disabled) { background: var(--petrol); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.carousel__btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }

/* ============================================================
   Kontakt
   ============================================================ */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact-info { display: grid; gap: 1.4rem; align-content: start; }
.contact-info__item { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.contact-info__item .ic {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--petrol-tint);
  color: var(--petrol);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.contact-info__item .ic svg { width: 20px; height: 20px; }
.contact-info__item strong { display: block; color: var(--petrol); font-family: var(--font-body); }
.contact-info__item a { color: var(--text); font-weight: inherit; }
.contact-info__item a:hover { color: var(--orange); }

.contact-form {
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 2.6rem);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(5, 69, 70, 0.06);
}
.form-row { margin-bottom: 1.2rem; }
.form-row label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--petrol);
  margin-bottom: 0.4rem;
}
.form-row input,
.form-row textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  padding: 0.85em 1em;
  border: 1.5px solid var(--hellgrau);
  border-radius: 10px;
  background: var(--warmweiss);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: var(--white);
}
.form-row textarea { resize: vertical; min-height: 130px; }
.form-note {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  min-height: 1.2em;
}
.form-note.is-visible { color: var(--orange); font-weight: 600; }
.form-hint { font-size: 0.82rem; color: var(--text-muted); }

.map-frame {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(5, 69, 70, 0.06);
}
.map-frame iframe { width: 100%; height: 100%; min-height: 320px; display: block; border: 0; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--petrol-dark);
  color: rgba(255,255,255,0.78);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: 0.95rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-brand { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.footer-brand img { width: 42px; height: 42px; }
.footer-brand .brand__name { color: var(--white); }
.footer-brand .brand__name b { color: var(--orange); }
.site-footer h4 { color: var(--white); font-family: var(--font-body); font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.site-footer a { color: rgba(255,255,255,0.78); }
.site-footer a:hover { color: var(--orange); }
.footer-claim { font-family: var(--font-head); font-style: italic; font-size: 1.25rem; color: var(--warmweiss); max-width: 34ch; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
}
.footer-bottom nav { display: flex; gap: 1.5rem; }

/* ============================================================
   Platzhalter-Unterseiten
   ============================================================ */
.placeholder-page {
  min-height: calc(100vh - var(--header-h));
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8rem 1.5rem 5rem;
  background: var(--warmweiss);
}
.placeholder-page .inner { max-width: 560px; }
.placeholder-page .eyebrow { margin-bottom: 1.5rem; }
.placeholder-page p { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 2rem; }

/* ============================================================
   Scroll-Reveal
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .audience-list { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand-col { grid-column: 1 / -1; }
  .carousel--3-up, .carousel--4-up { --carousel-visible: 2; }
}

@media (max-width: 820px) {
  :root { --header-h: 68px; }
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    box-shadow: var(--shadow-md);
    padding: 1rem 1.5rem 1.5rem;
    /* Vollständig über den Viewport-Rand schieben: eigene Höhe + Header-Offset.
       Ein reines -120 % reicht nicht, weil das Panel bei top:var(--header-h)
       verankert ist – sonst lugt ein Streifen (Petrol-Balken) unter der Oberkante hervor. */
    transform: translateY(calc(-100% - var(--header-h) - 8px));
    visibility: hidden;
    transition: transform 0.35s var(--ease), visibility 0s linear 0.35s;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .main-nav.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.35s var(--ease), visibility 0s;
  }
  /* Overlay-/Solid-Theme: aufgeklapptes Menü in Petrol mit hellen Links */
  .theme-overlay .main-nav,
  .theme-solid .main-nav { background: var(--petrol); }
  .theme-overlay .main-nav li,
  .theme-solid .main-nav li { border-bottom-color: rgba(255, 255, 255, 0.14); }
  .main-nav ul { flex-direction: column; gap: 0; width: 100%; }
  .main-nav li { border-bottom: 1px solid var(--hellgrau); }
  .main-nav a { display: block; padding: 0.9rem 0; }
  .main-nav .btn {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 1rem;
    padding: 0.95em 1.9em;
  }
  .main-nav .sub-menu {
    display: flex;
    flex-direction: column;
    position: static;
    box-shadow: none;
    background: transparent;
    padding: 0 0 0.5rem 1rem;
    min-width: 0;
  }
  .main-nav .sub-menu a { padding: 0.6rem 0; }
  .theme-overlay .main-nav .sub-menu a,
  .theme-solid .main-nav .sub-menu a { color: var(--warmweiss); }
  .intro__grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .values-grid { grid-template-columns: 1fr; }
  .audience-list { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero__inner { padding-block: 2.5rem; }
  .carousel--2-up, .carousel--3-up, .carousel--4-up { --carousel-visible: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

.values-grid > *,
.services-grid > *,
.coach-details > *,
.program-grid > *,
.team-grid > * {
  margin-block-start: 0 !important;
}