/* =============================================================================
   components.css — Kern-Komponenten (Schritt 3).
   Lädt NACH tokens.css + base.css (Dependency: lcc-base).
   Alle Werte via var(--…) aus tokens.css — keine Hardcodes.

   Hell-Dunkel-Atmung (Design-Sprache v1):
   - Mindestens 2 Petrol-(dunkle) Sektionen pro Seite: eine im mittleren Drittel,
     eine am Ende (Abschluss-CTA).
   - Nie zwei dunkle Sektionen direkt aufeinander.
   - Nie mehr als drei helle Sektionen ohne Petrol-Unterbrechung.
   (CSS kann die Reihenfolge nicht erzwingen — Klassen + diese Regel sind die Vorgabe.)
   ============================================================================= */

/* ===========================================================================
   1. Sektionen
   =========================================================================== */

.lcc-section {
  padding-block: var(--space-section);          /* 96px */
  padding-inline: var(--space-inline-x);        /* 40px */
}

.lcc-section > .lcc-container,
.lcc-section__inner {
  max-width: var(--content-max-width-max);      /* 1060px */
  margin-inline: auto;
}

/* Das seitliche Padding kommt hier bereits von .lcc-section (40px, mobil 24px).
   .lcc-container bringt in base.css denselben Wert nochmals mit — als direktes
   Kind einer Sektion wuerde er sich sonst auf 80px bzw. 48px verdoppeln.
   Bewusst nur diese Kombination: standalone .lcc-container (index.php,
   template-programm.php) behaelt sein eigenes Padding unveraendert.
   Hoehere Spezifitaet (0,2,0) als die Mobile-Regel in base.css (0,1,0),
   die Korrektur greift daher in beiden Breakpoints. */
.lcc-section > .lcc-container {
  padding-inline: 0;
}

/* Helle Sektionen */
.lcc-section--light {
  background-color: var(--color-bg-default);    /* Sand */
  color: var(--color-text-body);
}
.lcc-section--light-alt {
  background-color: var(--color-bg-alt);        /* Sand hell — Atemzug/Kontrast */
  color: var(--color-text-body);
}

/* Dunkle (Petrol-)Sektion — helle Schrift */
.lcc-section--dark {
  background-color: var(--color-bg-dark);       /* Petrol */
  color: var(--color-text-on-dark-body);
  padding-block: var(--space-petrol-section);   /* 112px */
}
.lcc-section--dark :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-text-on-dark-heading);     /* Weiß */
}
.lcc-section--dark .lcc-subheadline { color: var(--color-text-on-dark-muted); }
.lcc-section--dark .lcc-small,
.lcc-section--dark .lcc-phase-label { color: var(--color-text-on-dark-muted); }
/* Links auf dunkel: Weiß unterstrichen (v1 nennt keine eigene Dark-Link-Farbe — pragmatischer Default) */
.lcc-section--dark a {
  color: var(--color-text-on-dark-heading);
}
.lcc-section--dark a:hover,
.lcc-section--dark a:focus { color: var(--color-text-on-dark-body); }

/* Sondertypen */
.lcc-section--hero {
  padding-top: var(--space-hero-top);           /* 140px */
  padding-bottom: var(--space-hero-bottom);     /* 120px */
}
.lcc-section--atemzug {
  padding-block: var(--space-atemzug);          /* 80px */
  text-align: center;
}
.lcc-section--cta {
  padding-block: var(--space-cta-close);        /* 120px */
}

@media (max-width: 768px) {
  .lcc-section { padding-inline: var(--space-inline-x-mobile); }  /* 24px */
}

/* ===========================================================================
   2. Button / CTA — alle Zustände
   =========================================================================== */

.lcc-button,
.wp-block-button.is-style-lcc-primary > .wp-block-button__link,
.wp-block-button.is-style-lcc-secondary > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-inline-sm);                  /* 8px */
  background-color: var(--button-bg);           /* v2: Kupfer tief #A85B3D (Var. B) / Salbei (Var. A) */
  color: var(--button-text-color);              /* v2: Weiß (Var. B) / Anthrazit (Var. A) */
  font-family: var(--button-font), system-ui, sans-serif; /* Montserrat */
  font-weight: var(--button-font-weight);       /* 600 */
  font-size: var(--button-font-size);           /* >=16px */
  line-height: 1.2;
  min-height: var(--button-min-height);         /* 44px */
  padding: var(--space-4) var(--space-8);       /* 16px / 32px (aus der Spacing-Skala) */
  border: var(--button-border);                 /* 0 (Kupfer) / Petrol-Hairline (Salbei, Var. A) */
  border-radius: var(--button-radius);          /* md = 10px */
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-state);
}

.lcc-button:hover,
.wp-block-button.is-style-lcc-primary > .wp-block-button__link:hover {
  background-color: var(--button-hover);        /* v2: Kupfer ×0.8 #925137 */
  color: var(--button-text-color);
}

.lcc-button:active,
.wp-block-button.is-style-lcc-primary > .wp-block-button__link:active {
  background-color: var(--button-active);       /* v2: Kupfer ×0.7 #80472F */
}

.lcc-button:focus-visible,
.wp-block-button.is-style-lcc-primary > .wp-block-button__link:focus-visible,
.wp-block-button.is-style-lcc-secondary > .wp-block-button__link:focus-visible {
  outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
}

.lcc-button:disabled,
.lcc-button[aria-disabled="true"] {
  opacity: var(--button-disabled-opacity);      /* 0.5 */
  filter: grayscale(40%);                        /* entsättigt */
  cursor: not-allowed;
}

/* Sekundär-Button (Palette v2): ruhig — Salbei mit Anthrazit-Schrift (6.28:1 AA),
   NIE Weiß (2.13 FAIL). Petrol-Hairline als Kante (Entscheidung 06.07.2026 —
   Salbei hebt sich nur 1.86:1 vom Elfenbein ab). In Variante A (alle Buttons
   Salbei) sind Primär und Sekundär farbgleich — gewollt. Regeln: tokens.css / DESIGN.md. */
.lcc-button--secondary,
.wp-block-button.is-style-lcc-secondary > .wp-block-button__link {
  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-text-color);
  border: var(--button-secondary-border);
}

.lcc-button--secondary:hover,
.wp-block-button.is-style-lcc-secondary > .wp-block-button__link:hover {
  background-color: var(--button-secondary-hover);
  color: var(--button-secondary-text-color);
}

.lcc-button--secondary:active,
.wp-block-button.is-style-lcc-secondary > .wp-block-button__link:active {
  background-color: var(--button-secondary-active);
}

/* ===========================================================================
   3. Card
   =========================================================================== */

.lcc-card {
  background-color: var(--color-white);
  color: var(--color-text-body);                /* Karte setzt ihre Textfarbe SELBST */
  border: var(--border-hairline) solid var(--color-border-faint);
  border-radius: var(--radius-lg);              /* md–lg → lg (16px) */
  box-shadow: var(--shadow-md);                 /* zurückhaltend */
  padding: var(--space-6);                      /* 24px (Innen-Padding aus der Skala) */
}
.lcc-card > :first-child { margin-top: 0; }
.lcc-card > :last-child { margin-bottom: 0; }

.lcc-card__title {
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: var(--fs-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-stack-sm);            /* 12px */
}

/* Karten-Kontrast-Garantie: Eine Karte ist eine eigenständige helle Fläche
   (weißer BG) und MUSS auf jedem Sektions-Hintergrund lesbar sein — auch in
   dunklen Petrol-Sektionen (.lcc-section--dark), wo Inhalte sonst die helle
   Schrift erben würden. Darum setzt die Karte alle Textrollen explizit auf die
   hellen-Hintergrund-Token. Diese Regeln stehen NACH den .lcc-section--dark-
   Regeln (Abschnitt 1) und gewinnen den Spezifitäts-Gleichstand per Quellreihen-
   folge. Auf hellen Sektionen reproduzieren sie exakt das bestehende Aussehen
   (keine Regression). Kontrast auf Weiß (#FFFFFF), Palette v2: Body/Anthrazit
   #2C302F 13.37:1, Heading/Preis Pfauen-Petrol #175B5D 7.80:1, Sub-Headline
   Blaugrün #123F42 11.57:1, Link #175B5D 7.80:1 — alle ≥ WCAG-AA (4.5:1). */
.lcc-card :is(h1, h2, h3, h4, h5, h6),
.lcc-card .lcc-card__title { color: var(--color-text-heading); }
.lcc-card .lcc-price { color: var(--color-text-heading); }
.lcc-card .lcc-subheadline { color: var(--color-text-subheading); }
.lcc-card .lcc-phase-label { color: var(--color-label-phase); }
.lcc-card .lcc-small,
.lcc-card .lcc-quote,
.lcc-card blockquote { color: var(--color-text-body); }
.lcc-card a { color: var(--color-link-inline); }
.lcc-card a:hover,
.lcc-card a:focus { color: var(--color-link-inline-hover); }

/* ===========================================================================
   4. Typo-Mapping (ergänzt base.css; alle Werte aus den Tokens)
   =========================================================================== */

/* Sub-Headline — Montserrat 500 */
.lcc-subheadline {
  font-family: var(--font-display), system-ui, sans-serif;
  font-weight: var(--font-weight-medium);       /* 500 */
  font-size: var(--fs-subheadline);             /* 20px */
  line-height: var(--line-height-heading);
  color: var(--color-text-subheading);          /* Petrol dunkel */
  margin: 0 0 var(--space-stack-md);
}

/* Phase-Label — Montserrat 600, 11px Uppercase */
.lcc-phase-label {
  font-family: var(--font-display), system-ui, sans-serif;
  font-weight: var(--font-weight-semibold);     /* 600 */
  font-size: var(--fs-phase-label);             /* 11px */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-label-phase);              /* Petrol hell */
  display: inline-block;
  margin: 0 0 var(--space-stack-xs);
}

/* Atemzug-Einzeiler — Lora italic */
.lcc-atemzug {
  font-family: var(--font-body), Georgia, serif;
  font-style: italic;
  font-weight: var(--font-weight-regular);      /* 400 */
  font-size: var(--fs-atemzug);                 /* 20px */
  line-height: var(--line-height-body);
  color: var(--color-text-subheading);
  margin: 0;
}

/* Zitat — Lora italic. Border v2: Gold (Premium-Würde) statt Kupfer —
   Kupfer bleibt exklusiv CTA/Checkmark. Gold hier reine Deko (nicht-informativ). */
.lcc-quote,
blockquote {
  font-family: var(--font-body), Georgia, serif;
  font-style: italic;
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-quote);                   /* 16px */
  line-height: var(--line-height-body);
  color: var(--color-text-body);
  border-left: 3px solid var(--color-accent-premium);
  padding-left: var(--space-4);                 /* 16px */
  margin: 0 0 var(--space-stack-lg);
}

/* Gold-Divider (Palette v2): Premium-Linie auf dunklen Sektionen — sparsam.
   Gold auf Blaugrün 4.26:1 (Deko-Linie zulässig). Auf hellen Flächen KEIN Gold
   (2.37 FAIL) — dort bleibt border-faint der Trennlinien-Ton. */
.lcc-section--dark hr,
.lcc-divider--premium {
  border: 0;
  border-top: var(--border-hairline) solid color-mix(in srgb, var(--color-accent-premium) 55%, transparent);
  margin-block: var(--space-8);                 /* 32px */
}

/* Kleintext — Lora */
.lcc-small {
  font-family: var(--font-body), Georgia, serif;
  font-size: var(--fs-small);                   /* 14px */
  color: var(--color-text-body);
}

/* Preis/Zahl prominent — Montserrat 700 */
.lcc-price {
  font-family: var(--font-display), system-ui, sans-serif;
  font-weight: var(--font-weight-bold);         /* 700 */
  font-size: var(--fs-price);                   /* 48px */
  letter-spacing: var(--letter-spacing-heading-large);
  line-height: 1.1;
  color: var(--color-text-heading);
}

/* Inline-Links: konsistent mit base.css (Petrol unterstrichen, Hover Petrol-dunkel).
   Hier nur als Komponenten-Utility, falls außerhalb von Fließtext gebraucht. */
.lcc-link {
  color: var(--color-link-inline);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.lcc-link:hover,
.lcc-link:focus { color: var(--color-link-inline-hover); }

/* Mobile-Größen für die ergänzten Typo-Klassen */
@media (max-width: 768px) {
  .lcc-subheadline { font-size: var(--fs-subheadline-mobile); }  /* 18px */
  .lcc-atemzug     { font-size: var(--fs-atemzug-mobile); }      /* 18px */
  .lcc-quote, blockquote { font-size: var(--fs-quote-mobile); }  /* 16px */
  .lcc-small       { font-size: var(--fs-small-mobile); }        /* 14px */
  .lcc-price       { font-size: var(--fs-price-mobile); }        /* 40px */
}

/* ===========================================================================
   5. Hero — dunkle „Schwellen"-Bühne (A-Optik) + B-Headline
   Klassen am Element: .lcc-section .lcc-section--hero .lcc-hero
   (Padding-block 140/120 aus --hero, Padding-inline 40/24 aus .lcc-section)
   =========================================================================== */

.lcc-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-petrol);
  /* Petrol-Tiefe als Grundverlauf */
  background-image: linear-gradient(160deg, var(--color-petrol), var(--color-petrol-dark));
  color: var(--color-text-on-dark-body);
}

/* Atmosphärisches „goldenes Licht" als eigene Ebene (token-basiert via color-mix, kein Bild).
   Sehr dezentes „Atmen" über --motion-breath (Opacity-Drift). Reduced-motion: aus (siehe unten). */
.lcc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(120% 90% at 82% 18%, color-mix(in srgb, var(--color-orange) 18%, transparent), transparent 60%);
  animation: lcc-breath var(--motion-breath) ease-in-out infinite;
}

@keyframes lcc-breath {
  0%, 100% { opacity: 0.82; }
  50%      { opacity: 1; }
}

.lcc-hero__inner {
  position: relative;          /* über dem ::before-Schimmer */
  z-index: 1;
  max-width: var(--content-max-width-max);
  margin-inline: auto;
}

.lcc-hero .lcc-phase-label { color: var(--color-label-phase); margin-bottom: var(--space-stack-md); }

.lcc-hero h1 {
  color: var(--color-text-on-dark-heading);
  max-width: 20ch;                              /* Zeilenlänge, kein Designwert */
  margin: 0 0 var(--space-stack-lg);
}

.lcc-hero .lcc-subheadline {
  color: var(--color-text-on-dark-body);
  max-width: 54ch;
  margin: 0 0 var(--space-stack-xl);            /* großzügiger Abstand vor dem CTA */
}

.lcc-hero__note {
  font-family: var(--font-body), Georgia, serif;
  font-size: var(--fs-small);
  color: var(--color-text-on-dark-muted);
  margin: var(--space-stack-sm) 0 0;
}

@media (max-width: 768px) {
  /* Hero mobil reduziert — Oben-Padding klärt die feste Mobile-Header-Höhe (keine H1-Überlagerung) */
  .lcc-hero.lcc-section--hero { padding-block: calc(var(--lcc-header-h-mobile) + var(--space-8)) var(--space-12); } /* ~92 / 48 */
  .lcc-hero h1,
  .lcc-hero .lcc-subheadline { max-width: none; }
}

/* ===========================================================================
   6. Motion — Scroll-Reveal (Progressive Enhancement) + reduced-motion-Guard
   - .lcc-reveal startet NUR unter .js-motion versteckt (am <html>, Inline-Script
     vor dem Paint). Ohne JS: alles sofort sichtbar.
   - JS (assets/js/motion.js): IntersectionObserver → .is-visible (one-shot).
   - Reveal auf Sektion-Ebene, kein Element-Stagger.
   =========================================================================== */

.js-motion .lcc-reveal {
  opacity: 0;
  transform: translateY(var(--motion-reveal-distance));
  transition: opacity var(--motion-reveal) var(--ease-calm),
              transform var(--motion-reveal) var(--ease-calm);
  will-change: opacity, transform;
}

.js-motion .lcc-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Reveal sofort sichtbar */
  .js-motion .lcc-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* Zustands-Transitions neutralisiert */
  .lcc-button,
  .wp-block-button.is-style-lcc-primary > .wp-block-button__link {
    transition: none;
  }
  /* Hero-Atmen aus */
  .lcc-hero::before { animation: none; }
}

/* ===========================================================================
   Header + Footer (Site-Chrome) — überführt aus preview/seite-gesamt.html
   (Schritt 3b: Landing-Frame). Alle Werte via var(--…) aus tokens.css.
   =========================================================================== */

/* Header — transparent über dem dunklen Hero (Ruhezustand) */
.lcc-site-header {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: var(--space-section);             /* 96px — vollwertiges, ruhiges Header-Band */
  padding-block: var(--space-5);                /* 20px Luft o/u (vorher 16px); Inhalt via align-items zentriert */
  padding-inline: var(--space-inline-x);

  /* Der Header ist transparent und liegt über dem ersten Kopf der Seite. Dessen
     Helligkeit bestimmt die Schriftfarben — Default: dunkler Kopf (lcc-section--dark),
     wie auf allen Seiten außer der Startseite. Der Hell-Fall folgt weiter unten. */
  --hdr-brand:     var(--color-text-on-dark-heading);
  --hdr-nav:       var(--color-text-on-dark-body);
  --hdr-nav-hover: var(--color-text-on-dark-heading);
  --hdr-burger:    var(--color-white);
}

/* Heller Kopf direkt unter dem Header (Startseite: lcc-hero-foto auf Sand).
   Ohne diese Regel stünde die weiße Wortmarke mit 1,20:1 auf Sand. Die Bedingung hängt
   am Markup, nicht an der Seite — jede künftige Seite mit hellem Kopf ist mit abgedeckt.
   Browser ohne :has() behalten den Default; das ist der Stand vor diesem Fix, kein Rückschritt.

   Zweiter Selektor: Pillar-Seiten, die ihren Kopf selbst im Inhalt mitbringen
   (template-pillar.php gibt dann keinen dunklen Kopf aus). Dort liegt zwischen
   .lcc-main und der hellen Sektion noch das <article class="lcc-pillar">, der
   erste Selektor greift also nicht. Gleiche Bedingung, gleiche Werte — die
   Regel bleibt am Markup festgemacht, nicht an einer Seite. */
body:has(.lcc-main > .lcc-section--light:first-child) .lcc-site-header,
body:has(.lcc-main > .lcc-pillar > .lcc-section--light:first-child) .lcc-site-header {
  --hdr-brand:     var(--color-petrol);        /* 7,4:1 auf Sand */
  --hdr-nav:       var(--color-petrol);
  --hdr-nav-hover: var(--color-ink);           /* dunkler statt heller — Hervorhebung kehrt sich um */
  --hdr-burger:    var(--color-petrol);
}

.lcc-site-header__brand { margin: 0; }
.lcc-site-header__brand a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;                                /* erlaubt dem Text zu schrumpfen, nicht dem Symbol */
  font-family: var(--font-display), sans-serif;
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-h3);
  color: var(--hdr-brand);
  text-decoration: none;
  letter-spacing: var(--letter-spacing-heading);
}

/* Bildmarke: einfarbig via fill="currentColor", erbt damit --hdr-brand vom Link.
   Small-Size-Fassung — bei dieser Höhe wären Goldpunkt und Sage-Bogen der
   Vollfarb-Variante ohnehin nicht mehr unterscheidbar. Höhe an die Schrift
   gekoppelt, damit Symbol und Wortmarke gemeinsam skalieren. */
.lcc-brand-mark {
  flex: 0 0 auto;                              /* schrumpft nie — der Text kürzt zuerst */
  height: 1.75em;
  width: auto;
}
.lcc-brand-text { min-width: 0; }
.lcc-nav { display: flex; gap: var(--space-6); align-items: center; margin: 0; }
.lcc-nav p { margin: 0; }
.lcc-nav a {
  font-family: var(--font-display), sans-serif;
  font-weight: var(--font-weight-medium);
  font-size: var(--fs-small);
  color: var(--hdr-nav);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-state);
}
.lcc-nav a:hover,
.lcc-nav a:focus-visible { color: var(--hdr-nav-hover); }
.lcc-site-header__cta { margin: 0; }

/* Mobile-Cluster (Hamburger + kompakter CTA) — auf Desktop ausgeblendet */
.lcc-site-header__mobile { display: none; }

/* Lokale Header-Höhe für die Mobile-Variante (nur Theme, nicht im Tokens-SSoT) */
:root { --lcc-header-h-mobile: 60px; }

/* ===========================================================================
   Mobile-Header (≤1040px = dort, wo die Inline-Nav nicht mehr passt):
   Desktop-Nav + Desktop-CTA aus → Hamburger-Menü (details/summary) + kompakter,
   einzeiliger CTA. Marke bricht nicht (fluide Größe). Definierte Header-Höhe;
   Hero/Inhalt beginnt darunter (siehe Hero-Mobile-Padding). JS-frei, fokus-/
   tastaturzugänglich, prefers-reduced-motion respektiert (keine Animation).

   Schwelle 1040px (vorher 900px): Inline-Nav + langer CTA „Klarheitsgespräch
   buchen" + Marke passen empirisch erst ab ~1040px einzeilig (gemessen am Klon:
   1000px → Umbruch, Header 110px; 1040px → sauber, 96px). Bei 900px brach das
   Inline-Layout im Band 901–~1020px um. Burger-Cluster trägt jetzt bis 1040px,
   Inline-Layout erst darüber. Wortmarken-Schwellen (560/1200) unberührt. */
@media (max-width: 1040px) {
  .lcc-site-header {
    min-height: var(--lcc-header-h-mobile);     /* feste, definierte Höhe */
    padding-block: var(--space-3);              /* 12px */
    gap: var(--space-2);                         /* 8px — knapper, damit alles passt */
    flex-wrap: nowrap;
  }
  /* Marke: nimmt Restbreite, bricht NIE; kürzt mit Ellipsis bevor sie den
     rechten Cluster (CTA+Burger) verdrängt — so bleibt der Hamburger immer erreichbar.
     Die Ellipsis sitzt auf .lcc-brand-text, nicht auf dem Link: sonst würde das
     Flex-Layout die Bildmarke mitkürzen, statt zuerst den Text zu beschneiden. */
  .lcc-site-header__brand { flex: 1 1 auto; min-width: 0; }
  .lcc-site-header__brand a {
    gap: var(--space-2);                            /* 8px — knapper neben dem Symbol */
    font-size: clamp(0.85rem, 3.6vw, var(--fs-h3)); /* skaliert; bei 390px voll lesbar */
    letter-spacing: 0;
  }
  .lcc-brand-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lcc-brand-mark { height: 1.6em; }                /* etwas kompakter im 60px-Header */

  /* Desktop-Nav + Desktop-CTA aus, Mobile-Cluster an */
  .lcc-nav,
  .lcc-site-header__cta { display: none; }
  .lcc-site-header__mobile {
    display: flex;
    align-items: center;
    gap: var(--space-2);                         /* 8px */
    margin: 0;
    flex: none;                                  /* nie schrumpfen / verdrängt werden */
  }

  /* Kompakter CTA — einzeilig. Spezifität muss die is-style-lcc-primary-Regel
     (16/32-Padding, 16px) schlagen, sonst wird der Button zu breit. */
  .lcc-site-header__cta-compact { margin: 0; }
  .lcc-site-header__cta-compact .wp-block-button.is-style-lcc-primary > .wp-block-button__link {
    min-height: 44px;                            /* Tap-Target ≥44 */
    padding: var(--space-2) var(--space-3);      /* 8 / 12 — kompakt */
    font-size: var(--fs-small);
    white-space: nowrap;
  }

  /* Hamburger-Toggle (summary) — Tap-Target 44px */
  .lcc-mobile-nav { margin: 0; }
  .lcc-mobile-nav__toggle {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid color-mix(in srgb, var(--hdr-burger) 38%, transparent);
    border-radius: var(--radius-md);
    color: var(--hdr-burger);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .lcc-mobile-nav__toggle::-webkit-details-marker { display: none; } /* Safari-Marker weg */
  .lcc-mobile-nav__toggle::marker { content: ""; }
  .lcc-mobile-nav__toggle:focus-visible {
    outline: var(--focus-outline-width) solid var(--hdr-burger);
    outline-offset: 2px;
  }
  details[open] > .lcc-mobile-nav__toggle {
    background-color: color-mix(in srgb, var(--hdr-burger) 12%, transparent);
  }

  /* Burger-Icon: 3 Balken (schriftunabhängig) */
  .lcc-burger,
  .lcc-burger::before,
  .lcc-burger::after {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--hdr-burger);
  }
  .lcc-burger { position: relative; }
  .lcc-burger::before,
  .lcc-burger::after { content: ""; position: absolute; left: 0; }
  .lcc-burger::before { top: -6px; }
  .lcc-burger::after  { top: 6px; }

  /* Menü-Panel: solides Petrol, unter dem Header, lesbar */
  .lcc-mobile-nav__panel {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--color-petrol);
    border-top: 1px solid color-mix(in srgb, var(--color-white) 14%, transparent);
    box-shadow: var(--shadow-md);
    padding-inline: var(--space-inline-x-mobile);
    padding-block: var(--space-2) var(--space-4);
  }
  .lcc-mobile-nav__panel a {
    display: flex;
    align-items: center;
    min-height: 48px;                            /* Tap-Target ≥44 */
    color: var(--color-white);
    text-decoration: none;
    font-family: var(--font-display), sans-serif;
    font-weight: var(--font-weight-medium);
    font-size: var(--fs-subheadline);
    border-block-end: 1px solid color-mix(in srgb, var(--color-white) 12%, transparent);
  }
  .lcc-mobile-nav__panel a:last-child { border-block-end: 0; }
  .lcc-mobile-nav__panel a:hover,
  .lcc-mobile-nav__panel a:focus-visible { color: var(--color-text-on-dark-body); }
}

@media (max-width: 768px) { .lcc-site-header { padding-inline: var(--space-inline-x-mobile); } }

/* CTA-Label-Schwelle: „Gespräch buchen" solange Platz ist; ab ≤480px auf
   „Gespräch" verkürzen — das passiert VOR der Marken-Ellipse, damit der
   Markenname bei gängigen Handy-Breiten (≥360px) voll lesbar bleibt.
   aria-label am <a> trägt den vollständigen Namen unabhängig vom sichtbaren Text. */
.lcc-site-header__cta-compact .lcc-cta-label-short { display: none; }
@media (max-width: 480px) {
  .lcc-site-header__cta-compact .lcc-cta-label-full  { display: none; }
  .lcc-site-header__cta-compact .lcc-cta-label-short { display: inline; }
}

/* Wortmarke-Schwelle (dreistufig, analog zum CTA-Two-Stage-Label):
     full „Life Change Management – Coaching"  — Desktop/breit (Default)
     mid  „Life Change Management"             — mittleres Band
     short „Life Change"                        — schmal (≤560px)
   Ersetzt die frühere Ellipsis-Kürzung des langen Blognamens — keine
   Trunkierung, kein Umbruch in keiner Stufe.

   Breakpoints empirisch (document.fonts.ready, Klon gemessen):
   - full→mid 1200px: der volle Name wrappt im Desktop-Layout (Brand flex-shrinkt
     neben Inline-Nav + langem CTA) bei ≤1120px; einzeilig sauber erst ab ~1160px.
     1200px gibt Marge und hält gängige Desktop-Breiten (1280/1366/1440+) auf der
     Vollform.
   - mid→short 560px: die mid-Form passt ab ~510px trunkierungsfrei; 560px gibt
     ~50px Marge gegen Font-Load-Jitter (unverändert ggü. v0.1.1).
   Ellipsis am Brand-<a> (≤1040px) bleibt nur als defensives Netz. */
.lcc-site-header__brand .lcc-brand-mid,
.lcc-site-header__brand .lcc-brand-short { display: none; }
@media (max-width: 1200px) {
  .lcc-site-header__brand .lcc-brand-full { display: none; }
  .lcc-site-header__brand .lcc-brand-mid  { display: inline; }
}
@media (max-width: 560px) {
  .lcc-site-header__brand .lcc-brand-mid   { display: none; }
  .lcc-site-header__brand .lcc-brand-short { display: inline; }
}

/* Footer — dunkel (Petrol-dark) */
.lcc-site-footer {
  background-color: var(--color-petrol-dark);
  color: var(--color-text-on-dark-muted);
  padding-block: var(--space-petrol-section) var(--space-section);
  padding-inline: var(--space-inline-x);
}
.lcc-footer-grid {
  max-width: var(--content-max-width-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-8);
}
.lcc-footer__brand {
  font-family: var(--font-display), sans-serif;
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-h3);
  color: var(--color-text-on-dark-heading);
  margin: 0 0 var(--space-stack-sm);
}
.lcc-footer__col-title {
  font-family: var(--font-display), sans-serif;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-on-dark-heading);
  margin: 0 0 var(--space-stack-sm);
}
.lcc-site-footer a { color: var(--color-text-on-dark-body); text-decoration: none; }
.lcc-site-footer a:hover,
.lcc-site-footer a:focus-visible { color: var(--color-text-on-dark-heading); }
.lcc-site-footer ul { list-style: none; margin: 0; padding: 0; }
.lcc-site-footer li { margin: 0 0 var(--space-stack-xs); }
.lcc-footer-note {
  max-width: var(--content-max-width-max);
  margin: var(--space-8) auto 0;
}
@media (max-width: 768px) {
  .lcc-footer-grid { grid-template-columns: 1fr 1fr; }
  .lcc-site-footer { padding-inline: var(--space-inline-x-mobile); }
}

/* ===========================================================================
   Pillar-Seiten (template-pillar.php)
   =========================================================================== */
/* Dunkler Kopf trägt den absoluten, transparenten Site-Header — genug Top-Raum
   wie beim Hero, damit die H1 nicht unter den Header rutscht. Gilt für Pillar-
   und Standard-Seiten (page.php). */
.lcc-pillar__head,
.lcc-page__head { padding-block-start: var(--space-hero-top); }

/* Kopf OHNE Fotomotiv traegt nur die H1. Der Hero-Wert (--space-hero-top,
   140px) ist fuer den Startseiten-Hero gedacht, der Eyebrow, Headline,
   Subheadline, Buttons, Microtrust und Bild traegt. Bei einer einzelnen
   Ueberschrift entsteht damit eine fast leere Flaeche. Ohne Bild genuegt der
   normale Sektionsrhythmus. Fotokoepfe bleiben unveraendert. */
.lcc-pillar__head:not(.lcc-pillar__head--foto),
.lcc-page__head:not(.lcc-page__head--foto) {
  padding-block-start: var(--space-section);
}

/* ===========================================================================
   Blog-Übersicht (home.php) + Einzelbeitrag (single.php)
   =========================================================================== */
.lcc-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-8);
}
.lcc-post-card { display: flex; flex-direction: column; gap: var(--space-stack-xs); }
.lcc-post-card .lcc-card__title { margin: 0; }
.lcc-post-card .lcc-card__title a { text-decoration: none; }
.lcc-post-card .lcc-card__title a:hover,
.lcc-post-card .lcc-card__title a:focus-visible { text-decoration: underline; }
.lcc-post-card__media { display: block; margin-block-end: var(--space-stack-sm); }
.lcc-post-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.lcc-single__featured { margin: 0 0 var(--space-8); }
.lcc-single__featured img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }

/* ===========================================================================
   Content-/Seitenbilder (Pillar-/Programm-Sektionen)
   Bisher stylte das Theme nur Blog-Bilder. Diese Regeln gelten für Bilder,
   die im nativen post_content einer Sektion stehen (z. B. Retreat-Seite).
   =========================================================================== */

/* Bild innerhalb einer Sektion: volle Spalten-/Inhaltsbreite, weicher Radius */
.lcc-section figure.wp-block-image { margin-block: var(--space-8) 0; }
.lcc-section figure.wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* Full-bleed Medien-Band — z. B. Retreat-Hero-Bild direkt unter dem dunklen
   Kopf. Höhe gedeckelt + object-fit cover, damit das Band unabhängig vom
   Quellformat ruhig und kinoartig bleibt. */
.lcc-media-band { margin: 0; }
.lcc-media-band img {
  display: block;
  width: 100%;
  height: clamp(260px, 42vh, 520px);
  object-fit: cover;
  border-radius: 0;
}

/* ===========================================================================
   Checkliste mit Terrakotta-Haken (Leistungslisten, Design-Sprache v1)
   =========================================================================== */
.lcc-checklist { list-style: none; margin: 0; padding: 0; }
.lcc-checklist li {
  position: relative;
  padding-inline-start: var(--space-8);          /* 32px Platz für den Haken */
  margin-block-end: var(--space-stack-md);        /* 16px */
}
.lcc-checklist li::before {
  content: "\2713";                                /* ✓ */
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  color: var(--color-accent-cta);                  /* Terrakotta #D26B2A */
  font-weight: var(--font-weight-bold);
}
/* Auch auf dunklem Petrol bleibt der Haken Terrakotta (genug Kontrast) */
.lcc-section--dark .lcc-checklist li::before { color: var(--color-accent-cta); }

/* ===========================================================================
   Podcast-Band „Zwischen den Zeiten" (Impulse-Sektion + Homepage-Teaser)
   Token-konforme Neufassung — ersetzt die alte hartcodierte Inline-CSS-Variante
   (#1E1E2E / #E8722A / Montserrat/Arial) aus op-minimal-theme. Plattform-Buttons
   sind SEKUNDÄR (Petrol-Outline); Orange bleibt dem Buchungs-CTA vorbehalten.
   =========================================================================== */
.lcc-podcast { text-align: center; max-width: 720px; margin-inline: auto; }
.lcc-podcast .lcc-phase-label { display: inline-block; }
.lcc-podcast__desc { max-width: 560px; margin: 0 auto var(--space-6); }
.lcc-podcast__player { margin: var(--space-8) auto var(--space-6); }
.lcc-podcast__links { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }

/* Sekundär-Button (Plattform-Links): Petrol-Outline, kein Orange */
.lcc-podcast__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background-color: transparent;
  color: var(--color-link-inline);
  font-family: var(--font-display), system-ui, sans-serif;
  font-weight: var(--font-weight-semibold);
  font-size: var(--fs-small);
  line-height: 1.2;
  min-height: 40px;
  padding: var(--space-2) var(--space-5);
  border: 2px solid var(--color-border-faint);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--motion-fast) var(--ease-state),
              background-color var(--motion-fast) var(--ease-state),
              color var(--motion-fast) var(--ease-state);
}
.lcc-podcast__btn:hover,
.lcc-podcast__btn:focus-visible {
  border-color: var(--color-petrol);
  background-color: var(--color-sand);
  color: var(--color-link-inline-hover);
}
.lcc-podcast__btn svg { width: 16px; height: 16px; flex: none; }

/* „Jetzt reinhören" — Sekundär-CTA, Petrol gefüllt (bewusst NICHT Orange) */
.lcc-podcast__btn--primary {
  background-color: var(--color-petrol);
  color: var(--color-white);
  border-color: var(--color-petrol);
}
.lcc-podcast__btn--primary:hover,
.lcc-podcast__btn--primary:focus-visible {
  background-color: var(--color-petrol-dark);
  border-color: var(--color-petrol-dark);
  color: var(--color-white);
}

@media (prefers-reduced-motion: reduce) {
  .lcc-podcast__btn { transition: none; }
}

/* ===========================================================================
   TEST Design-Pass (Branch experiment/fraunces-display):
   Schwellen-Signatur „Türschwelle" + Textur (Sand-Grain) + Petrol-Tiefe.
   - Sitzt AUF den Übergängen/Sektionen — ändert den Hell-Dunkel-RHYTHMUS NICHT.
   - Alle Overlays: pointer-events:none + z-index:-1 unter isolation:isolate →
     liegen HINTER dem Content (über der Sektions-Bg, unter Text/Karten) →
     Kartenkontrast-Fix & WCAG unberührt.
   - Token-basiert (--color-threshold-*, --shadow-threshold, --grain-*,
     --glow-petrol, --vignette-petrol). Reversibel: diesen Block + Tokens raus.
   - Noise = CSS-only inline-SVG feTurbulence (kein Asset).
   =========================================================================== */
:root {
  --lcc-grain-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Eigener Stacking-Kontext, damit Overlays hinter dem Content bleiben */
.lcc-section--light,
.lcc-section--light-alt,
.lcc-section--dark { position: relative; isolation: isolate; }

/* (2b) Hauch warme Tiefe auf Sand-Sektionen — sehr dezenter Verlauf am oberen
   Rand, liegt auf der Sektions-Bg (hinter Grain & Content). Balanciert den
   Rhythmus, damit Sand nicht flacher wirkt als die Petrol-Tiefe. */
.lcc-section--light,
.lcc-section--light-alt {
  background-image: radial-gradient(125% 100% at 50% 0%, var(--sand-depth), transparent 72%);
}

/* (2) Sand-Grain auf hellen Sektionen */
.lcc-section--light::before,
.lcc-section--light-alt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--lcc-grain-svg);
  background-size: 180px 180px;
  opacity: var(--grain-opacity);
}

/* (3) Petrol-Tiefe: weicher Glow (oben) + Vignette (Ränder) ::before, Grain ::after */
.lcc-section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--glow-petrol), transparent 60%),
    radial-gradient(135% 130% at 50% 50%, transparent 52%, var(--vignette-petrol) 100%);
}
.lcc-section--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--lcc-grain-svg);
  background-size: 180px 180px;
  opacity: var(--grain-opacity-dark);
}

/* (1) Türschwelle an dunkel→hell-Übergängen: Doppellinie (Sims) + weicher
   Schatten, der nach unten auf die helle „Boden"-Sektion fällt. Auf das ::after
   der HELLEN Folgesektion gelegt (Schatten als Gradient → kein Bleed nach oben). */
.lcc-section--dark + .lcc-section--light::after,
.lcc-section--dark + .lcc-section--light-alt::after,
.lcc-section--hero + .lcc-section--light::after,
.lcc-section--hero + .lcc-section--light-alt::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 36px; /* Feinschliff: präsenter Schatten-Fall (vorher 28px) */
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--shadow-threshold), transparent);
  border-top: 1px solid var(--color-threshold-line);
  box-shadow: inset 0 3px 0 -2px var(--color-threshold-line-2); /* zweite Sims-Linie */
}

/* ===========================================================================
   Retreat-Komponenten — Eyebrow, Hero-Fakten-Karte, Timeline, Sticky-CTA
   Eingeführt für /retreat-andalusien/. Strikt token-konform (keine Hex/px-Hardcodes
   außer Tap-Targets/Badge-Maße). Reveal nutzt das bestehende .lcc-reveal-System.
   =========================================================================== */

/* --- Eyebrow / Kicker-Label über H1/H2 --- */
.lcc-eyebrow {
  display: block;
  margin: 0 0 var(--space-4);
  font-family: var(--font-display), sans-serif;
  font-size: var(--fs-small);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-subheading);
}
.lcc-section--dark .lcc-eyebrow { color: var(--color-text-on-dark-muted); }

/* --- Retreat-Hero mit Hintergrundbild (Bild-URL inline via style) --- */
.lcc-retreat-hero { position: relative; overflow: hidden; background-size: cover; background-position: center; }
.lcc-retreat-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg,
    color-mix(in srgb, var(--color-petrol) 95%, transparent) 0%,
    color-mix(in srgb, var(--color-petrol) 86%, transparent) 46%,
    color-mix(in srgb, var(--color-petrol) 45%, transparent) 100%);
}
.lcc-retreat-hero > * { position: relative; z-index: 1; }
.lcc-retreat-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) 360px;
  gap: var(--space-12); align-items: center;
}
.lcc-retreat-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
@media (max-width: 900px) {
  .lcc-retreat-hero__grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* --- Fakten-Karte (Eckdaten auf einen Blick) --- */
.lcc-facts-card {
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-sand-light);
  color: var(--color-text-heading);
  box-shadow: var(--shadow-md);
}
.lcc-facts-card__title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display), sans-serif;
  font-size: var(--fs-small); font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-subheading);
}
.lcc-facts-card dl { display: grid; gap: var(--space-3); margin: 0; }
.lcc-fact {
  display: grid; grid-template-columns: 116px 1fr; gap: var(--space-3);
  align-items: baseline; padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-faint);
}
.lcc-fact:last-child { border-bottom: 0; padding-bottom: 0; }
.lcc-fact dt {
  margin: 0; font-family: var(--font-display), sans-serif; font-size: var(--fs-small);
  font-weight: var(--font-weight-bold); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-body);
}
.lcc-fact dd {
  margin: 0; font-family: var(--font-headline), serif; font-size: var(--fs-h3);
  line-height: 1.2; color: var(--color-text-heading);
}

/* --- Timeline „Die sechs Tage" --- */
.lcc-timeline { display: grid; gap: var(--space-4); margin-top: var(--space-10); }
.lcc-day {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-white) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-white) 14%, transparent);
}
.lcc-day__num {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background: var(--color-accent-cta); color: var(--color-white);
  font-family: var(--font-display), sans-serif; font-weight: var(--font-weight-bold);
  font-size: var(--fs-small); line-height: 1.1;
}
.lcc-day__body h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-headline), serif; font-size: var(--fs-h3);
  color: var(--color-text-on-dark-heading);
}
.lcc-day__body p { margin: 0; color: var(--color-text-on-dark-body); }
@media (max-width: 560px) {
  .lcc-day { grid-template-columns: 1fr; gap: var(--space-4); }
  .lcc-day__num { width: 52px; height: 52px; }
}

/* Gestaffelter Reveal der Timeline-Karten (sanfte Kaskade) */
.js-motion .lcc-timeline .lcc-reveal:nth-child(2) { transition-delay: 90ms; }
.js-motion .lcc-timeline .lcc-reveal:nth-child(3) { transition-delay: 180ms; }
.js-motion .lcc-timeline .lcc-reveal:nth-child(4) { transition-delay: 270ms; }
.js-motion .lcc-timeline .lcc-reveal:nth-child(5) { transition-delay: 360ms; }
.js-motion .lcc-timeline .lcc-reveal:nth-child(6) { transition-delay: 450ms; }
@media (prefers-reduced-motion: reduce) {
  .js-motion .lcc-timeline .lcc-reveal { transition-delay: 0ms; }
}

/* --- Mobiler Sticky-Buchungs-CTA (≤560px) --- */
.lcc-sticky-cta { display: none; }
@media (max-width: 560px) {
  .lcc-sticky-cta {
    position: fixed; left: var(--space-3); right: var(--space-3); bottom: var(--space-3);
    z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-petrol) 95%, transparent);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  .lcc-sticky-cta__label {
    font-family: var(--font-display), sans-serif; font-size: var(--fs-small);
    line-height: 1.25; color: var(--color-text-on-dark-body);
  }
  .lcc-sticky-cta .wp-block-button { margin: 0; }
  .lcc-sticky-cta .wp-block-button.is-style-lcc-primary > .wp-block-button__link {
    min-height: 42px; padding: var(--space-2) var(--space-4); white-space: nowrap;
  }
  /* Platz schaffen, damit die Bar nichts überdeckt — nur auf Seiten MIT Sticky-Bar */
  body:has(.lcc-sticky-cta) { padding-bottom: 76px; }
}

/* ===========================================================================
   Startseite „Boden" (Welle 1, 07.07.2026) — Foto-Sektionen aus dem
   abgenommenen Prototyp (Documents/HP Coach/prototypes/…petrol-conversion…).
   Token-normalisiert ggü. Prototyp: Radius md/lg statt Pill/34px, Buttons über
   bestehende .lcc-button-Ketten (Kupfer tief), Gold NUR Deko, Montserrat ≤700.
   Bilder: assets/img/*.webp (27–91 KB). Bild-URLs kommen inline aus den
   Patterns (Konvention wie .lcc-retreat-hero).
   =========================================================================== */

/* --- Foto-Hero (hell): Text links, gerahmtes Foto rechts, Score-Karte darunter --- */
.lcc-hero-foto {
  padding-top: var(--space-16);                 /* 64px — Header ist in-flow */
  padding-bottom: var(--space-12);              /* 48px */
}
.lcc-hero-foto__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-12);
  align-items: center;
  max-width: var(--content-max-width-max);
  margin-inline: auto;
}
.lcc-hero-foto h1 {
  max-width: 16ch;
  margin: 0 0 var(--space-stack-lg);
}
.lcc-hero-foto .lcc-subheadline { max-width: 46ch; }
.lcc-hero-foto__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Mikro-Vertrauen: ruhige Inline-Liste mit Gold-Punkten (kein Pill-Chip) */
.lcc-microtrust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}
.lcc-microtrust li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display), sans-serif;
  font-size: var(--fs-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-body);
}
.lcc-microtrust li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-premium);      /* Gold — Deko-Punkt, kein Text */
}

/* Gerahmtes Foto mit Caption-Plakette (wiederverwendbar, auch Welle 2) */
.lcc-photo-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: var(--border-hairline) solid var(--color-border-faint);
  box-shadow: var(--shadow-md);
}
.lcc-photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}
.lcc-photo-frame__caption {
  position: absolute;
  left: var(--space-5);
  right: auto;
  bottom: var(--space-5);
  max-width: 320px;
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-sand) 92%, transparent);
  color: var(--color-text-subheading);
  font-family: var(--font-headline), Georgia, serif;
  font-size: var(--fs-subheadline);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
}

/* Score-Karte unter dem Hero-Foto (weiße Karte, Kicker in Petrol — AA) */
.lcc-score-card { margin-top: var(--space-4); }
.lcc-score-card__kicker {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display), sans-serif;
  font-size: var(--fs-phase-label);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-heading);
}
.lcc-score-card .lcc-button,
.lcc-score-card .wp-block-button,
.lcc-score-card .wp-block-button__link { width: 100%; }
.lcc-score-card .wp-block-buttons { margin-top: var(--space-4); }

/* --- Trust-Strip: 4 Kennwerte mit Gold-Hairline links --- */
.lcc-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  max-width: var(--content-max-width-max);
  margin-inline: auto;
}
/* MVP: Trust-Strip mit drei Kennwerten (die Erfahrungsangabe ist entfallen,
   solange sie nicht bestaetigt ist) — sonst bliebe im 4er-Grid eine Luecke. */
.lcc-trust-strip--drei {
  grid-template-columns: repeat(3, 1fr);
}
.lcc-trust-strip__item {
  padding: var(--space-3) var(--space-4);
  border-left: var(--border-hairline) solid color-mix(in srgb, var(--color-accent-premium) 45%, transparent);
}
.lcc-trust-strip__item strong {
  display: block;
  font-family: var(--font-display), sans-serif;
  font-size: var(--fs-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
}
.lcc-trust-strip__item span {
  font-family: var(--font-display), sans-serif;
  font-size: var(--fs-small);
  color: var(--color-text-body);
}

/* --- Bild-Ribbon: 3 Motive mit Caption-Plaketten --- */
.lcc-bild-ribbon {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 1fr;
  gap: var(--space-4);
  align-items: stretch;
  max-width: var(--content-max-width-max);
  margin-inline: auto;
}
.lcc-bild-ribbon figure {
  position: relative;
  margin: 0;
  min-height: 260px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.lcc-bild-ribbon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lcc-bild-ribbon figcaption {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-sand) 90%, transparent);
  color: var(--color-text-subheading);
  font-family: var(--font-display), sans-serif;
  font-size: var(--fs-small);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
}

/* --- Signale („Kennst du das?"): 4 weiße Karten mit Nummern-Kreis --- */
.lcc-signale {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  max-width: var(--content-max-width-max);
  margin-inline: auto;
}
.lcc-signal__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-sage) 40%, var(--color-white));
  color: var(--color-text-subheading);
  font-family: var(--font-display), sans-serif;
  font-weight: var(--font-weight-bold);
}
.lcc-signal__quote {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display), sans-serif;
  font-size: var(--fs-h3);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-body);
}

/* --- Ergebnis-Band: dunkle Zitat-Karte + „Nicht lauter. Klarer."-Liste --- */
.lcc-ergebnis {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-16);
  align-items: center;
  max-width: var(--content-max-width-max);
  margin-inline: auto;
}
.lcc-ergebnis__quote {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 400px;
  margin: 0;
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-petrol-dark);   /* Fallback; Bild inline im Pattern */
  background-size: cover;
  background-position: center;
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}
.lcc-ergebnis__quote::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-petrol-dark) 90%, transparent),
    color-mix(in srgb, var(--color-petrol-dark) 72%, transparent));
}
.lcc-ergebnis__quote p {
  position: relative;
  margin: 0;
  padding-left: var(--space-5);
  border-left: 2px solid var(--color-accent-premium); /* Gold-Border: Zitat-Regel */
  font-family: var(--font-headline), Georgia, serif;
  font-size: var(--fs-h2);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading-large);
}
.lcc-ergebnis__list {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.lcc-ergebnis__list li {
  display: grid;
  grid-template-columns: var(--space-4) 1fr;
  gap: var(--space-3);
  align-items: baseline;
}
.lcc-ergebnis__list li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-sage), color-mix(in srgb, var(--color-sage) 40%, var(--color-white)));
  border: var(--border-hairline) solid var(--color-border-faint);
}

/* --- Wege-Karten: 3 Angebote mit Bildkopf, Mitte = featured (Kupfer-Kante) --- */
.lcc-wege {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  align-items: stretch;
  max-width: var(--content-max-width-max);
  margin-inline: auto;
}
.lcc-wege-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: var(--border-hairline) solid var(--color-border-faint);
  box-shadow: var(--shadow-md);
}
.lcc-wege-card--featured {
  border-color: var(--color-accent-cta);        /* Kupfer-Kante = Empfehlung */
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-accent-cta) 18%, transparent);
}
.lcc-wege-card figure {
  margin: 0;
  height: 160px;
  overflow: hidden;
  border-bottom: var(--border-hairline) solid var(--color-border-faint);
}
.lcc-wege-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lcc-wege-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-6);
}
.lcc-wege-card__label {
  align-self: flex-start;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-sage) 34%, var(--color-white));
  color: var(--color-text-subheading);
  font-family: var(--font-display), sans-serif;
  font-size: var(--fs-phase-label);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lcc-wege-card--featured .lcc-wege-card__label {
  background: color-mix(in srgb, var(--color-accent-cta) 13%, var(--color-white));
  color: var(--color-accent-cta-active);        /* Kupfer ×0.7 — 7.3:1 auf Weiß */
}
.lcc-wege-card h3 {
  margin: var(--space-4) 0 0;
  font-family: var(--font-headline), Georgia, serif;
  font-size: var(--fs-h2-mobile);               /* 28px aus der Token-Skala */
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-heading);
}
.lcc-wege-card p { margin: var(--space-3) 0 0; }
.lcc-wege-card__rahmen {
  margin: var(--space-4) 0 0;
  font-family: var(--font-display), sans-serif;
  font-size: var(--fs-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body);
}
.lcc-wege-card .wp-block-buttons { margin-top: auto; padding-top: var(--space-5); }
.lcc-wege-card .wp-block-button,
.lcc-wege-card .wp-block-button__link { width: 100%; }

/* --- Prozess: 3 Schritte (echte Sequenz → Zähler in Petrol, AA) --- */
.lcc-prozess {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  counter-reset: lcc-schritt;
  max-width: var(--content-max-width-max);
  margin-inline: auto;
}
.lcc-prozess__card {
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
  border: var(--border-hairline) solid var(--color-border-faint);
}
.lcc-prozess__card::before {
  counter-increment: lcc-schritt;
  content: "0" counter(lcc-schritt);
  display: block;
  margin-bottom: var(--space-8);
  font-family: var(--font-display), sans-serif;
  font-size: var(--fs-small);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.18em;
  color: var(--color-text-heading);
}
.lcc-prozess__card h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display), sans-serif;
  font-size: var(--fs-h3);
  color: var(--color-text-heading);
}
.lcc-prozess__card p { margin: 0; }

/* --- Proof: dunkles Band mit Hintergrundbild + 2 Zitat-Karten --- */
.lcc-proof {
  background-size: cover;
  background-position: 72% center;              /* Bild inline im Pattern */
}
/* Semantischer Modifier: Hintergrundmotiv aus dem Theme, relativ zu dieser
   Datei aufgeloest. Notwendig, weil post_content in der Datenbank liegt und
   dort weder PHP noch eine domainunabhaengige Bild-URL zur Verfuegung steht.
   Groesse, Position, Scrim und Kontrast kommen unveraendert aus .lcc-proof. */
.lcc-proof--reflexion {
  background-image: url("../img/reflexion-bg.webp");
}
.lcc-proof.lcc-section--dark {
  position: relative;
  isolation: isolate;
}
/* Petrol-Verlauf ÜBER dem Bild, unter dem Content (eigene Ebene statt Sektions-Bg) */
.lcc-proof .lcc-proof__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-petrol-dark) 97%, transparent) 0%,
    color-mix(in srgb, var(--color-petrol-dark) 92%, transparent) 48%,
    color-mix(in srgb, var(--color-petrol-dark) 78%, transparent) 100%);
}
.lcc-proof__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.lcc-proof__card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-white) 7%, transparent);
  border: var(--border-hairline) solid color-mix(in srgb, var(--color-white) 14%, transparent);
}
.lcc-proof__card p {
  margin: 0;
  font-family: var(--font-body), Georgia, serif;
  font-style: italic;
  font-size: var(--fs-subheadline);
  color: var(--color-text-on-dark-body);
}
.lcc-proof__card strong {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-display), sans-serif;
  font-size: var(--fs-small);
  color: var(--color-text-on-dark-heading);
}

/* --- Über Martin: Portrait-Collage + Text --- */
.lcc-martin {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: var(--space-16);
  align-items: center;
  max-width: var(--content-max-width-max);
  margin-inline: auto;
}
/* MVP: Vorstellung ohne Portrait — solange kein freigegebenes lokales Portrait
   vorliegt, faellt die Bildspalte weg und der Text nutzt die volle Breite. */
.lcc-martin--ohne-portrait {
  grid-template-columns: 1fr;
}
.lcc-portrait-collage {
  position: relative;
  min-height: 540px;
}
.lcc-portrait-collage__main {
  position: absolute;
  inset: 0 var(--space-10) var(--space-16) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background-size: cover;
  background-position: center 18%;              /* Bild inline im Pattern */
  background-color: var(--color-border-faint);
}
.lcc-portrait-collage__detail {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58%;
  height: 200px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 8px solid var(--color-sand);
  box-shadow: var(--shadow-md);
  background-size: cover;
  background-position: center;                  /* Bild inline im Pattern */
}
.lcc-martin__titel {
  font-family: var(--font-display), sans-serif;
  font-size: var(--fs-subheadline);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-subheading);
  margin: 0 0 var(--space-4);
}

/* --- Finaler CTA: dunkles Panel mit Fenster-Motiv --- */
.lcc-cta-panel {
  position: relative;
  overflow: hidden;
  max-width: var(--content-max-width-max);
  margin-inline: auto;
  padding: var(--space-12);
  border-radius: var(--radius-lg);
  background-size: cover;
  background-position: 74% center;              /* Bild inline im Pattern */
  background-color: var(--color-petrol-dark);
  color: var(--color-text-on-dark-body);
  box-shadow: var(--shadow-md);
}
/* Semantischer Modifier, gleiche Begruendung wie .lcc-proof--reflexion.
   Overlay (::before), Rundung und Schatten kommen aus .lcc-cta-panel. */
.lcc-cta-panel--fenster {
  background-image: url("../img/fenster-neubeginn-bg.webp");
}
.lcc-cta-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg,
    color-mix(in srgb, var(--color-petrol-dark) 96%, transparent) 38%,
    color-mix(in srgb, var(--color-petrol-dark) 62%, transparent) 100%);
}
.lcc-cta-panel > * { position: relative; }
.lcc-cta-panel h2 {
  max-width: 24ch;
  color: var(--color-text-on-dark-heading);
}
.lcc-cta-panel p {
  max-width: 56ch;
  color: var(--color-text-on-dark-body);
}
.lcc-cta-panel .lcc-eyebrow { color: var(--color-text-on-dark-muted); }
.lcc-cta-panel .lcc-hero-foto__actions { margin-top: var(--space-6); }

/* --- Responsive: Startseiten-Sektionen --- */
@media (max-width: 1024px) {
  .lcc-hero-foto__grid,
  .lcc-ergebnis,
  .lcc-martin { grid-template-columns: 1fr; }
  .lcc-hero-foto h1 { max-width: none; }
  .lcc-martin { gap: var(--space-10); }
  .lcc-portrait-collage { max-width: 480px; }
  .lcc-trust-strip,
  .lcc-signale { grid-template-columns: repeat(2, 1fr); }
  .lcc-bild-ribbon,
  .lcc-wege,
  .lcc-prozess { grid-template-columns: repeat(2, 1fr); }
  .lcc-proof__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .lcc-hero-foto { padding-top: var(--space-10); }
  .lcc-hero-foto__actions { display: grid; }
  .lcc-hero-foto__actions .wp-block-button,
  .lcc-hero-foto__actions .wp-block-button__link { width: 100%; }
  .lcc-photo-frame img { min-height: 360px; }
  .lcc-trust-strip,
  .lcc-signale,
  .lcc-bild-ribbon,
  .lcc-wege,
  .lcc-prozess { grid-template-columns: 1fr; }
  .lcc-trust-strip__item {
    border-left: 0;
    border-top: var(--border-hairline) solid color-mix(in srgb, var(--color-accent-premium) 45%, transparent);
  }
  .lcc-ergebnis { gap: var(--space-8); }
  .lcc-ergebnis__quote { min-height: 300px; }
  .lcc-portrait-collage { min-height: 460px; }
  .lcc-cta-panel { padding: var(--space-6); }
}

/* ===========================================================================
   Welle 2 (07.07.2026) — Pillar-Foto-Kopf.
   Bild = Sektions-Background (Template setzt Inline-URL), Scrim = eigener DIV
   (NICHT ::before — das belegt der Design-Pass-Glow auf .lcc-section--dark).
   Ohne Bild bleibt der bisherige Petrol-Kopf 1:1 erhalten.
   =========================================================================== */

.lcc-pillar__head--foto {
  /* Bezugsrahmen fuer .lcc-pillar__scrim (inset: 0) — fehlte, der Scrim hing
     dadurch am naechsten positionierten Vorfahren statt am Kopf selbst. */
  position: relative;
  /* Eigener Stacking-Kontext: haelt z-index: -1 des Scrims innerhalb des Kopfs,
     also ueber dem Hintergrundbild und hinter dem Text. */
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(300px, 36vh, 420px);
  background-size: cover;
  background-position: center 60%;
}
.lcc-pillar__head--foto .lcc-section__inner {
  width: 100%;
}
.lcc-pillar__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-petrol-dark) 62%, transparent) 0%,
    color-mix(in srgb, var(--color-petrol-dark) 42%, transparent) 45%,
    color-mix(in srgb, var(--color-petrol-dark) 88%, transparent) 100%);
}
.lcc-pillar__head--foto h1 {
  max-width: 22ch;
  text-shadow: 0 2px 18px color-mix(in srgb, var(--color-petrol-dark) 55%, transparent);
}

@media (max-width: 640px) {
  .lcc-pillar__head--foto { min-height: clamp(240px, 32vh, 320px); }
}


/* ===========================================================================
   Prosa-Spalte + Karten-Paar (Unterseiten)
   =========================================================================== */

/* --- .lcc-prose: lesbare Zeilenlaenge fuer Volltextseiten -------------------
   Die Klasse wird von page.php und 404.php bereits gesetzt, war aber nie
   definiert — Fliesstext lief ueber die vollen 1060px des Containers
   (rund 130 Zeichen pro Zeile). 68ch liegt im empfohlenen Bereich 60–75.
   Die Schriftgroesse gilt nur lokal in dieser Spalte; --fs-body bleibt global
   unveraendert. Auf kleinen Displays begrenzt 100% die Breite, nicht 68ch. */
.lcc-prose {
  max-width: min(68ch, 100%);
  font-size: 17px;
}
.lcc-prose > * + * {
  margin-block-start: var(--space-stack-md);
}
.lcc-prose > * + h2 {
  margin-block-start: var(--space-12);
}
.lcc-prose > * + h3 {
  margin-block-start: var(--space-8);
}

/* --- .lcc-duo: zwei gleichwertige Karten nebeneinander ----------------------
   Ergaenzung zu .lcc-wege (fix dreispaltig) fuer Gegenueberstellungen, etwa
   die beiden Kernprogramme oder „Gedacht fuer / Nicht gedacht fuer".
   Nutzt ausschliesslich bestehende Spacing-Tokens. */
.lcc-duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  align-items: stretch;
  max-width: var(--content-max-width-max);
  margin-inline: auto;
}

@media (max-width: 780px) {
  .lcc-duo { grid-template-columns: 1fr; }
}

/* ===========================================================================
   PILOTSEITE /begleitung/ — Angleichung an Begleitung.dc.html
   ===========================================================================
   Referenz: Begleitung.dc.html aus dem Designsystem-ZIP
   (SHA-256 ec9b3a78…b8bac9). Massgeblich ist ausschliesslich diese fertige
   Einzelseite, nicht die Modulbibliothek — aus ihr kommen nur Farben,
   Typografie, Abstaende, Karten, Schaltflaechen, Rahmen und Radien.

   Der gesamte Block ist auf `.lcc-pillar` gescopet, den Wrapper, den allein
   template-pillar.php ausgibt. Notwendig, weil `.lcc-hero-foto`,
   `.lcc-wege-card`, `.lcc-card`, `.lcc-cta-panel` und `.lcc-proof` auch von
   den Startseiten-Patterns benutzt werden — ungescopet wuerde jede Angleichung
   die live gestellte Startseite mitverändern. Die Startseite rendert ohne
   `.lcc-pillar` und bleibt damit unberuehrt.

   Keine neuen Farb-Tokens: alle Werte des Exports entsprechen exakt den
   bestehenden Tokens (#FAF6EC sand-light · #F4EFE4 sand · #175B5D petrol ·
   #123F42 petrol-dark · #8FB5B0 petrol-light · #CDDCD9 petrol-pale ·
   #A85B3D orange-strong · #925137 orange-hover · #A7B6A3 sage · #B69A52 gold ·
   #2C302F ink). #E7DFCE bleibt unbenutzt (Platzhalter), Google Fonts und
   support.js aus dem Export werden nicht uebernommen.
   =========================================================================== */

/* --- Sektionsrhythmus: Export 96px/88px Desktop, 48px/24px Mobil ---------- */
.lcc-pillar .lcc-section {
  padding-block: clamp(48px, 7vw, var(--space-section));   /* 48 → 96 */
  padding-inline: clamp(24px, 6vw, 88px);                  /* 24 → 88 */
}
/* Dunkles Band steht im Export hoeher: 112px statt 96px */
.lcc-pillar .lcc-proof {
  padding-block: clamp(56px, 8vw, var(--space-petrol-section));
}
/* Der Export gibt den Modulen 1180px Innenbreite; nur der Einleitungsblock
   bleibt auf 1060px. `.lcc-container` traegt hier kein eigenes Padding mehr
   (siehe Regel weiter oben), die Breite kommt allein aus max-width. */
.lcc-pillar .lcc-section > .lcc-container {
  max-width: 1180px;
}

/* --- Modul 2: Hero Variante A -------------------------------------------- */
/* Export: zwei Spalten 1fr / 1.02fr, randabfallendes Motiv rechts, Textspalte
   84px oben/unten und 88px aussen. Bewusst kein `align-items: center` —
   `stretch` laesst die Bildspalte die volle Sektionshoehe fuellen. */
.lcc-pillar .lcc-hero-foto {
  padding-block: 0;
  padding-inline: 0;
  border-bottom: var(--border-hairline) solid var(--color-border-faint);
}
.lcc-pillar .lcc-hero-foto__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  /* Benannte Bereiche statt `order`: derselbe Markup-Block der Programmleiste
     wird auf Desktop ueber das Motiv gelegt und mobil in die Lesereihenfolge
     einsortiert — ohne zweiten Markup-Baum. */
  grid-template-areas: "text visual";
  align-items: stretch;
  gap: 0;
  max-width: none;
}
.lcc-pillar .lcc-hero-foto__text   { grid-area: text; }
.lcc-pillar .lcc-hero-foto__visual { grid-area: visual; }
.lcc-pillar .lcc-hero-foto__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  padding: 84px clamp(24px, 4vw, 56px) 84px clamp(24px, 6vw, 88px);
}
/* Die Abstaende kommen im Export aus dem Flex-gap, nicht aus Element-Margins. */
.lcc-pillar .lcc-hero-foto__text > * { margin: 0; }
.lcc-pillar .lcc-hero-foto h1 {
  max-width: none;
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.lcc-pillar .lcc-hero-foto .lcc-subheadline {
  font-size: 19px;
  line-height: 1.5;
  max-width: 44ch;
}
.lcc-pillar .lcc-hero-foto__actions {
  gap: 14px;
  margin-top: 6px;
}

/* Bildspalte: im Export ein randabfallendes Motiv, kein gerahmtes Foto.
   Rahmen, Radius und Schatten des Frames werden hier zuruecknahmen — die
   Klasse selbst bleibt unveraendert, damit die Startseite ihren Rahmen behaelt. */
.lcc-pillar .lcc-hero-foto__visual { position: relative; }
.lcc-pillar .lcc-hero-foto__visual .lcc-photo-frame {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  height: 100%;
}
.lcc-pillar .lcc-hero-foto__visual .lcc-photo-frame img {
  min-height: 640px;
  object-position: 62% center;
}
/* Weicher Uebergang zur Textspalte — im Export ein Gradient über dem Motiv,
   von Sand deckend auf transparent bei 22 %. */
.lcc-pillar .lcc-hero-foto__visual .lcc-photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--color-sand-light) 0%,
    color-mix(in srgb, var(--color-sand-light) 0%, transparent) 22%);
  pointer-events: none;
}

/* Programmleiste im Hero: Desktop als dunkle Leiste ueber dem unteren Rand des
   Motivs — sie liegt dafuer im selben Rasterfeld wie das Bild und wird unten
   ausgerichtet. Werte aus Begleitung.dc.html. */
.lcc-pillar .lcc-hero-foto__meta {
  grid-area: visual;
  align-self: end;
  z-index: 1;
  display: flex;
  gap: 32px;
  margin: 40px;
  padding: 22px 26px;
  list-style: none;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-petrol-dark) 92%, transparent);
  color: var(--color-white);
  font-family: var(--font-body), Georgia, serif;
  font-size: 15px;
}
/* Jede Angabe bleibt einzeilig — sonst trennt der Umbruch Betrag und
   Waehrungszeichen ("499" / "€"). */
.lcc-pillar .lcc-hero-foto__meta li { margin: 0; white-space: nowrap; }
.lcc-pillar .lcc-hero-foto__meta li + li {
  padding-left: 32px;
  border-left: var(--border-hairline) solid
    color-mix(in srgb, var(--color-gold) 50%, transparent);
}
.lcc-pillar .lcc-hero-foto__meta strong {
  /* Bewusst inline: der freigegebene Wortlaut traegt das Trennzeichen " · "
     zwischen Name und Rahmen. Als Blockelement bliebe es verwaist am Anfang
     der zweiten Zeile stehen — der Text darf dafuer nicht umgebaut werden. */
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: var(--fs-phase-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-on-dark-muted);
}

/* --- Modul 3: Einleitung „Für wen" --------------------------------------- */
/* Export: 1060px, Label in eigener 200px-Spalte links neben dem Textblock. */
.lcc-pillar .lcc-mod-intro > .lcc-container {
  max-width: 1060px;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 0 56px;
  align-items: start;
}
.lcc-pillar .lcc-mod-intro .lcc-phase-label {
  margin: 14px 0 0;                        /* optische Grundlinie zum Text */
}
.lcc-pillar .lcc-mod-intro .lcc-prose { max-width: 720px; }
/* Ueberschrift und Textblock stehen rechts neben der Marginalspalte. */
.lcc-pillar .lcc-mod-intro > .lcc-container > h2 { grid-column: 2; margin: 0 0 20px; }
.lcc-pillar .lcc-mod-intro > .lcc-container > .lcc-prose { grid-column: 2; }

/* --- Modul 4: Orientierung als Text-Bild-Modul --------------------------- */
.lcc-pillar .lcc-mod-orientierung > .lcc-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "kicker media" "head media" "prose media" "cta media";
  gap: 0 72px;
  align-items: start;
}
.lcc-pillar .lcc-mod-orientierung .lcc-phase-label { grid-area: kicker; }
.lcc-pillar .lcc-mod-orientierung h2 { grid-area: head; margin: 22px 0 0; }
.lcc-pillar .lcc-mod-orientierung .lcc-prose { grid-area: prose; margin-top: 22px; }
.lcc-pillar .lcc-mod-orientierung .wp-block-buttons { grid-area: cta; margin-top: 6px; }
/* Einziger Inhaltsschatten der Seite (Handoff §4). Rahmen zurueckgenommen —
   der Export zeigt das Motiv ohne Kante. */
.lcc-pillar .lcc-mod-orientierung__media {
  grid-area: media;
  align-self: center;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 28px color-mix(in srgb, var(--color-petrol) 14%, transparent);
}
.lcc-pillar .lcc-mod-orientierung__media img {
  height: 460px;
  min-height: 0;
  object-fit: cover;
}

/* --- Fliesstext: Export Lora 17px/1.75 Desktop, 16px/1.75 Mobil ---------- */
.lcc-pillar .lcc-prose {
  font-size: 17px;
  line-height: 1.75;
}
.lcc-pillar .lcc-prose > * + * { margin-block-start: 20px; }

/* --- Modul 5: Programmkarten --------------------------------------------- */
/* Export: Raster-Abstand 32px, Motivhoehe 250px, Karteninneres 34/36/36,
   Rahmenzeile mit Trennlinie darueber, Textlink mit Kupfer-Unterkante. */
.lcc-pillar .lcc-duo {
  gap: 32px;
  max-width: none;
}
.lcc-pillar .lcc-wege-card figure { height: 250px; }
.lcc-pillar .lcc-wege-card__body {
  padding: 34px 36px 36px;
  gap: 16px;
}
.lcc-pillar .lcc-wege-card__body > * { margin: 0; }
.lcc-pillar .lcc-wege-card__body h3 {
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--color-text-heading);
}
.lcc-pillar .lcc-wege-card__body p { line-height: 1.7; }
.lcc-pillar .lcc-wege-card__rahmen {
  margin-top: 4px;
  padding-top: 18px;
  border-top: var(--border-hairline) solid var(--color-border-faint);
  line-height: 1.6;
  color: var(--color-text-subheading);
}
.lcc-pillar .lcc-wege-card__body > p:last-child { margin-top: auto; }
.lcc-pillar .lcc-wege-card__body a {
  font-family: var(--font-display), sans-serif;
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
  text-decoration: none;
  border-bottom: var(--border-hairline) solid var(--color-orange-strong);
  padding-bottom: 3px;
}
.lcc-pillar .lcc-wege-card__body a:hover { color: var(--color-text-subheading); }

/* Handoff §4: In diesen beiden Modulen der Pilotseite tragen die Karten keinen
   Schatten. Bewusst ueber die Modulklassen statt ueber `.lcc-pillar` allein —
   letzteres wuerde jede kuenftige Pillar-Seite mitnehmen. Die globalen Regeln
   zu `.lcc-wege-card` und `.lcc-card` bleiben unveraendert. */
.lcc-pillar .lcc-mod-programme .lcc-wege-card,
.lcc-pillar .lcc-mod-einordnung .lcc-card {
  box-shadow: none;
}

/* --- Modul 6: Gegenüberstellung ------------------------------------------ */
/* Export: Karten mit 36px Innenabstand, Titel 24px, Punkte in Kupfer. */
.lcc-pillar .lcc-card { padding: 36px; }
.lcc-pillar .lcc-card .lcc-card__title {
  font-size: 24px;
  margin: 0 0 20px;
}
.lcc-pillar .lcc-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lcc-pillar .lcc-card li {
  position: relative;
  padding-left: 26px;
  line-height: 1.7;
}
.lcc-pillar .lcc-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-orange-strong);
}

/* --- Modul 7: dunkles Arbeitsweise-/Grenzen-Band ------------------------- */
/* Export: zwei Spalten 0.8fr / 1.2fr — Label und Ueberschrift links,
   Fliesstext rechts. Die Zwischenueberschrift „Wo Coaching endet" tritt dort
   als Label auf, nicht als grosse H3; die Ebene im Markup bleibt H3. */
.lcc-pillar .lcc-mod-grenzen > .lcc-container {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 72px;
  align-items: start;
}
/* Label und Ueberschrift stehen im Export in einem gemeinsamen Block der
   linken Spalte. Ohne diesen Wrapper muesste der Fliesstext rechts zwei
   Gitterzeilen spannen — dabei waechst die Label-Zeile mit und die
   Ueberschrift rutscht in die Mitte der Sektion. */
.lcc-pillar .lcc-mod-grenzen__lead {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.lcc-pillar .lcc-mod-grenzen__lead > * { margin: 0; }
.lcc-pillar .lcc-mod-grenzen__lead h2 { line-height: 1.15; }
.lcc-pillar .lcc-mod-grenzen .lcc-prose { max-width: none; }
.lcc-pillar .lcc-mod-grenzen .lcc-prose h3 {
  font-family: var(--font-display), sans-serif;
  font-size: var(--fs-phase-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-on-dark-muted);
  margin-block-start: 16px;
  padding-top: 22px;
  border-top: var(--border-hairline) solid
    color-mix(in srgb, var(--color-gold) 40%, transparent);
}

/* --- Modul 8: Abschluss-CTA ---------------------------------------------- */
/* Export: Panel 1180px, Radius 16px, Innenabstand 80/64, Textspalte 720px,
   Ueberschrift 44px. */
.lcc-pillar .lcc-cta-panel--fenster {
  padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 64px);
  border-radius: var(--radius-lg);
}
.lcc-pillar .lcc-cta-panel--fenster > * { max-width: 720px; }
.lcc-pillar .lcc-cta-panel--fenster h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.lcc-pillar .lcc-cta-panel--fenster p { max-width: 54ch; }

/* --- Mobil (Export: Ansicht 390) ----------------------------------------- */
@media (max-width: 1024px) {
  /* Einleitung und dunkles Band fallen auf eine Spalte zurueck. */
  .lcc-pillar .lcc-mod-intro > .lcc-container,
  .lcc-pillar .lcc-mod-grenzen > .lcc-container {
    /* minmax(0, 1fr) statt 1fr: `1fr` entspricht minmax(auto, 1fr), und die
       min-content-Breite unteilbarer Inhalte (Schaltflaechen-Beschriftung)
       weitet den Track dann ueber den Viewport hinaus. */
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .lcc-pillar .lcc-mod-intro .lcc-phase-label { margin: 0; }
  .lcc-pillar .lcc-mod-intro > .lcc-container > h2,
  .lcc-pillar .lcc-mod-intro > .lcc-container > .lcc-prose { grid-column: 1; }
  .lcc-pillar .lcc-mod-grenzen__lead { gap: 12px; }
}

@media (max-width: 640px) {
  /* Export mobil: Motiv 240px hoch ueber dem Text, Verlauf nach unten. */
  .lcc-pillar .lcc-hero-foto__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "visual" "text" "meta";
  }
  /* Gleicher Block, andere Position: unter den Aktionen in der Lesereihenfolge,
     dort schlicht als Textzeilen ueber einer Haarlinie statt als dunkle Leiste. */
  .lcc-pillar .lcc-hero-foto__meta {
    grid-area: meta;
    flex-direction: column;
    gap: 8px;
    margin: 0 24px 36px;
    padding: 18px 0 0;
    border-radius: 0;
    background: none;
    color: var(--color-text-body);
    border-top: var(--border-hairline) solid var(--color-border-faint);
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: var(--fs-small);
  }
  .lcc-pillar .lcc-hero-foto__meta li + li { padding-left: 0; border-left: 0; }
  .lcc-pillar .lcc-hero-foto__meta strong {
    display: inline;
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
  }
  /* Orientierung mobil: Bild zwischen Ueberschrift und Fliesstext (Handoff §8). */
  .lcc-pillar .lcc-mod-orientierung > .lcc-container {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kicker" "head" "media" "prose" "cta";
    gap: 16px 0;
  }
  .lcc-pillar .lcc-mod-orientierung h2,
  .lcc-pillar .lcc-mod-orientierung .lcc-prose { margin-top: 0; }
  .lcc-pillar .lcc-mod-orientierung__media { border-radius: 12px; }
  .lcc-pillar .lcc-mod-orientierung__media img { height: 200px; }
  .lcc-pillar .lcc-hero-foto__visual .lcc-photo-frame img {
    min-height: 240px;
    height: 240px;
    object-position: 60% center;
  }
  .lcc-pillar .lcc-hero-foto__visual .lcc-photo-frame::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--color-sand-light) 0%, transparent) 55%,
      var(--color-sand-light) 100%);
  }
  .lcc-pillar .lcc-hero-foto__text {
    padding: 8px 24px 36px;
    gap: 18px;
  }
  .lcc-pillar .lcc-hero-foto .lcc-subheadline { font-size: 17px; }
  /* Beide Schaltflaechen ueber die volle Breite, wie im Export. */
  .lcc-pillar .lcc-hero-foto__actions .wp-block-buttons { width: 100%; }

  .lcc-pillar .lcc-prose { font-size: 16px; }
  .lcc-pillar .lcc-wege-card figure { height: 180px; }
  .lcc-pillar .lcc-wege-card__body { padding: 24px; gap: 14px; }
  .lcc-pillar .lcc-wege-card__body h3 { font-size: 24px; }
  .lcc-pillar .lcc-card { padding: 24px; }
  .lcc-pillar .lcc-card .lcc-card__title { font-size: 20px; }
  /* Auch hier minmax(0, …): die geerbte Regel `.lcc-duo { grid-template-columns:
     1fr }` liesse den Track auf min-content wachsen. Nur fuer die Pilotseite
     ueberschrieben, damit die Startseite unveraendert bleibt. */
  .lcc-pillar .lcc-duo {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

/* --- Schriftzuordnung der Pilotseite ------------------------------------- */
/* Im Export tragen auch die Karten-H3 die Headline-Serif; global bleiben
   H3–H6 bei Montserrat (base.css), damit andere Seiten unveraendert bleiben.
   Die Zwischenueberschrift im dunklen Band ist davon ausgenommen — sie tritt
   dort als Label auf und behaelt deshalb Montserrat (Regel weiter oben). */
.lcc-pillar .lcc-wege-card__body h3,
.lcc-pillar .lcc-card .lcc-card__title {
  font-family: var(--font-headline), Georgia, serif;
  font-optical-sizing: auto;
  font-weight: var(--font-weight-semibold);
}
/* Die beiden Hinweiszeilen unter den Kartenrastern stehen im Export in
   Montserrat, nicht in der Fliesstext-Serif. */
.lcc-pillar .lcc-small {
  font-family: var(--font-display), system-ui, sans-serif;
  line-height: 1.7;
}

/* --- Korrekturen aus dem Bildabgleich mit Begleitung.dc.html -------------- */
/* Dunkles Band: ohne feste Zeilenhoehen streckt der lange Fliesstext in
   Spalte 2 die beiden impliziten Zeilen, und die Ueberschrift rutscht in die
   Mitte. Zeile 1 traegt das Label, Zeile 2 nimmt den Rest — die Ueberschrift
   bleibt mit align-self oben, wie im Export direkt unter dem Label. */
/* Abschluss-Panel: der Export gibt ihm die volle Modulbreite von 1180px. */
.lcc-pillar .lcc-cta-panel { max-width: 1180px; }

/* Die Programm-Links im Panel erben sonst die Fliesstext-Link-Farbe (Petrol)
   und stehen damit dunkel auf dunklem Grund — im Export sind sie hell und
   unterstrichen. Die Zeile selbst tritt dort gedaempft in Montserrat auf. */
.lcc-pillar .lcc-cta-panel p:last-child {
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: var(--fs-small);
  color: var(--color-text-on-dark-muted);
}
.lcc-pillar .lcc-cta-panel a:not(.wp-block-button__link) {
  color: var(--color-text-on-dark-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lcc-pillar .lcc-cta-panel a:not(.wp-block-button__link):hover {
  color: var(--color-white);
}

/* --- Labels der Pilotseite ------------------------------------------------ */
/* Im Export tragen Eyebrow und Phase-Labels links einen 28px langen Goldstrich
   und stehen auf hellem Grund in Petrol, nicht im blassen Teal. Der Strich ist
   reine Dekoration (::before, kein Text), das Petrol hebt zugleich den Kontrast
   von rund 2:1 auf 7,4:1. Auf dunklem Grund bleibt das helle Teal. */
.lcc-pillar .lcc-phase-label,
.lcc-pillar .lcc-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: var(--fs-phase-label);              /* 11px */
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.18em;
  color: var(--color-text-heading);              /* Petrol */
}
.lcc-pillar .lcc-phase-label::before,
.lcc-pillar .lcc-eyebrow::before {
  content: "";
  flex: 0 0 28px;
  height: 1px;
  background: var(--color-accent-premium);       /* Gold, nur Deko */
}
/* Dunkle Flaechen: Label im hellen Teal, wie im Export. */
.lcc-pillar .lcc-section--dark .lcc-phase-label,
.lcc-pillar .lcc-cta-panel .lcc-eyebrow {
  color: var(--color-text-on-dark-muted);
}
@media (max-width: 640px) {
  /* Export mobil: Strich 22px statt 28px. */
  .lcc-pillar .lcc-phase-label::before,
  .lcc-pillar .lcc-eyebrow::before { flex-basis: 22px; }
  .lcc-pillar .lcc-phase-label,
  .lcc-pillar .lcc-eyebrow { gap: 10px; }
}

/* --- Skip-Link ------------------------------------------------------------ */
/* Global, direkt nach wp_body_open() in header.php. Ziel ist das einzige
   Hauptinhaltselement des Themes, `<main id="content">`. Standardmaessig
   ausserhalb des Viewports und ohne Platzbedarf, damit kein Layoutversatz
   entsteht; erst der Tastaturfokus holt ihn sichtbar in die linke obere Ecke.
   Der globale Fokusring aus base.css bleibt wirksam. */
.lcc-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  transform: translateY(-200%);
  padding: var(--space-3) var(--space-5);
  background: var(--color-petrol-dark);
  color: var(--color-white);
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: var(--fs-small);
  text-decoration: none;
  border-bottom-right-radius: var(--radius-md);
}
.lcc-skip-link:focus-visible {
  transform: translateY(0);
  color: var(--color-white);
}

/* --- Header auf Pillar-Seiten -------------------------------------------- */
/* Der Header ist global transparent und liegt absolut ueber dem ersten Kopf der
   Seite (Startseite: Foto-Hero). Auf Pillar-Seiten traegt der Seitenkopf jetzt
   selbst Inhalt bis an die Oberkante — Wortmarke und Navigation lagen dort ohne
   eigenen Grund auf dem Hero. Hier bekommt der Header deshalb eine eigene
   Flaeche in Elfenbein hell, eine Hairline nach unten und einen Platz im
   Textfluss: `position: relative` nimmt ihn aus der Ueberlagerung, der Hero
   beginnt darunter statt dahinter.

   Zwei Selektoren, weil die WordPress-Body-Klasse hier nicht verifizierbar war
   (kein Zugriff auf die Installation): `page-template-template-pillar` ist die
   von get_body_class() erzeugte Klasse, `:has(.lcc-main > .lcc-pillar)` derselbe
   Zustand am Markup festgemacht. Greift eine von beiden, sitzt die Regel.
   Die Startseite rendert ueber front-page.php ohne Page-Template und ohne
   .lcc-pillar — sie behaelt ihren transparenten Header unveraendert. */
body.page-template-template-pillar .lcc-site-header,
body:has(.lcc-main > .lcc-pillar) .lcc-site-header {
  position: relative;
  background: var(--color-sand-light);
  border-bottom: var(--border-hairline) solid var(--color-border-faint);
  /* Dieselben Werte wie die Hell-Kopf-Regel weiter oben. Bei Pillar-Seiten mit
     hellem ersten Abschnitt greifen beide Regeln; identische Werte verhindern,
     dass die Navigationsfarbe je nach Spezifitaet zwischen Petrol und Anthrazit
     kippt. Noetig sind sie hier trotzdem: Pillar-Seiten mit dunklem Seitenkopf
     erfuellt die :has()-Bedingung nicht, ihre Schrift bliebe sonst weiss auf
     dem neuen hellen Grund. */
  --hdr-brand:     var(--color-petrol);        /* 7,4:1 auf Elfenbein hell */
  --hdr-nav:       var(--color-petrol);
  --hdr-nav-hover: var(--color-ink);
  --hdr-burger:    var(--color-petrol);
}
/* Aktiver Navigationspunkt: Petrol mit Goldkante, wie im Designsystem. Haengt
   am aria-current-Attribut, das header.php dynamisch setzt — keine zweite
   Quelle fuer denselben Zustand. */
body.page-template-template-pillar .lcc-nav a[aria-current="page"],
body:has(.lcc-main > .lcc-pillar) .lcc-nav a[aria-current="page"],
body.page-template-template-pillar .lcc-mobile-nav__panel a[aria-current="page"],
body:has(.lcc-main > .lcc-pillar) .lcc-mobile-nav__panel a[aria-current="page"] {
  color: var(--color-petrol);
  border-bottom: 2px solid var(--color-accent-premium);
  padding-bottom: 2px;
}

/* ===========================================================================
   PROGRAMMSEITEN /neustart/ und /wieder-boden-finden/
   ===========================================================================
   Referenz: NeuStart.dc.html und "Wieder Boden finden.dc.html" aus dem
   Designsystem-ZIP. Beide Entwuerfe haben dieselbe Modulfolge — Hero ·
   Einstieg · Worum es geht · Rahmen · Arbeitsweise · Grenzen · CTA — und
   unterscheiden sich nur in Motiven, Eckdaten und Text. Die Gestaltung ist
   deshalb bewusst als gemeinsame Komponente umgesetzt, nicht zweimal.

   Wiederverwendet aus der freigegebenen Pilotseite, ohne sie zu veraendern:
   Sektionsrhythmus, Labels mit Goldstrich, .lcc-hero-foto samt Raster und
   randabfallendem Motiv, .lcc-mod-intro als Marginalspalte (hier fuer
   "Einstieg" und "Arbeitsweise"), .lcc-mod-orientierung als Text-Bild-Modul
   (hier "Worum es geht"), .lcc-cta-panel--fenster und .lcc-prose. Neu sind nur
   die drei Bausteine, die es im Bestand nicht gibt: die Eckdatenleiste im Hero,
   die Rahmenkarte und die Grenzen-Variante mit zwei Karten.
   =========================================================================== */

/* --- Eckdaten im Hero (Dauer · Umfang · Beitrag) -------------------------- */
/* Anders als die Programmleiste der Pilotseite steht diese Leiste in der
   Textspalte unter den Schaltflaechen, nicht ueber dem Motiv. */
.lcc-pillar .lcc-hero-foto__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin: 10px 0 0;
  padding-top: 24px;
  list-style: none;
  border-top: var(--border-hairline) solid var(--color-border-faint);
}
.lcc-pillar .lcc-hero-foto__facts li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}
.lcc-pillar .lcc-hero-foto__facts strong {
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: var(--fs-phase-label);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-subheading);
}
.lcc-pillar .lcc-hero-foto__facts span {
  font-family: var(--font-headline), Georgia, serif;
  font-optical-sizing: auto;
  font-weight: var(--font-weight-semibold);
  /* 22px statt der 24px des Entwurfs: dort steht die Kurzform "3 × 90 Min.",
     hier der freigegebene Wortlaut "3 Sessions à 90 Minuten". Mit 22px halten
     alle drei Angaben eine Zeile, ohne den Text zu kuerzen. */
  font-size: 22px;
  color: var(--color-text-heading);
}

/* --- Text-Bild-Modul mit Motiv links ------------------------------------- */
/* Die Programmentwuerfe stellen das Motiv im Modul "Worum es geht" links neben
   den Text. Nur die Spaltenzuordnung dreht sich; alles andere kommt aus
   .lcc-mod-orientierung, das die Pilotseite bereits mitbringt. Die DOM-Folge
   bleibt Kicker → H2 → Bild → Text, damit die Lesereihenfolge mobil stimmt. */
.lcc-pillar .lcc-mod-orientierung--media-start > .lcc-container {
  grid-template-areas: "media kicker" "media head" "media prose" "media cta";
}

/* --- Rahmenkarte: Eckdaten neben Erlaeuterung ----------------------------- */
.lcc-pillar .lcc-mod-rahmen__karte {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  overflow: hidden;
  background: var(--color-white);
  border: var(--border-hairline) solid var(--color-border-faint);
  border-radius: var(--radius-lg);
}
.lcc-pillar .lcc-mod-rahmen__daten {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin: 0;
  padding: 40px;
  list-style: none;
  background: var(--color-sand-light);
  border-right: var(--border-hairline) solid var(--color-border-faint);
}
.lcc-pillar .lcc-mod-rahmen__daten li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}
.lcc-pillar .lcc-mod-rahmen__daten strong {
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: var(--fs-phase-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-subheading);
}
.lcc-pillar .lcc-mod-rahmen__daten span {
  font-family: var(--font-headline), Georgia, serif;
  font-optical-sizing: auto;
  font-weight: var(--font-weight-semibold);
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text-heading);
}
/* Der Beitrag steht im Entwurf groesser als Dauer und Umfang. */
.lcc-pillar .lcc-mod-rahmen__daten li:last-child span {
  font-size: 42px;
  letter-spacing: -0.02em;
}
.lcc-pillar .lcc-mod-rahmen__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 44px 48px;
}
.lcc-pillar .lcc-mod-rahmen__text p {
  margin: 0;
  font-size: 18px;
  line-height: 1.8;
}

/* --- Grenzen als zwei Karten auf dunklem Grund ---------------------------- */
/* Variante zum zweispaltigen Grenzen-Band der Pilotseite: hier stehen Label und
   Ueberschrift oben, darunter zwei Karten und zuletzt die Transparenzhinweise. */
.lcc-pillar .lcc-mod-grenzen-karten > .lcc-container {
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.lcc-pillar .lcc-mod-grenzen-karten__lead {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 720px;
}
.lcc-pillar .lcc-mod-grenzen-karten__lead > * { margin: 0; }
.lcc-pillar .lcc-mod-grenzen-karten__paar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.lcc-pillar .lcc-mod-grenzen-karten__paar > div {
  padding: 32px 34px;
  background: color-mix(in srgb, var(--color-white) 5%, transparent);
  border: var(--border-hairline) solid
    color-mix(in srgb, var(--color-gold) 35%, transparent);
  border-radius: var(--radius-lg);
}
.lcc-pillar .lcc-mod-grenzen-karten__paar h3 {
  margin: 0 0 20px;
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: var(--fs-phase-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-premium);
}
.lcc-pillar .lcc-mod-grenzen-karten__paar ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lcc-pillar .lcc-mod-grenzen-karten__paar li {
  position: relative;
  padding-left: 24px;
  line-height: 1.7;
  color: var(--color-text-on-dark-body);
}
/* Zwei Marker, die den Unterschied auch ohne Farbe lesbar machen: ein Punkt
   fuer "Gedacht fuer", ein Strich fuer "Nicht gedacht fuer". */
.lcc-pillar .lcc-mod-grenzen-karten__paar > div:first-child li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-sage);
}
.lcc-pillar .lcc-mod-grenzen-karten__paar > div:last-child li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 9px;
  height: 1px;
  background: var(--color-text-on-dark-muted);
}
.lcc-pillar .lcc-mod-grenzen-karten__hinweis {
  max-width: 860px;
  padding-top: 12px;
  border-top: var(--border-hairline) solid
    color-mix(in srgb, var(--color-gold) 40%, transparent);
}
.lcc-pillar .lcc-mod-grenzen-karten__hinweis p { margin: 16px 0 0; }
.lcc-pillar .lcc-mod-grenzen-karten__hinweis p + p { margin-top: 16px; }

@media (max-width: 1024px) {
  .lcc-pillar .lcc-mod-orientierung--media-start > .lcc-container {
    grid-template-areas: "kicker" "head" "media" "prose" "cta";
  }
  .lcc-pillar .lcc-mod-rahmen__karte { grid-template-columns: minmax(0, 1fr); }
  .lcc-pillar .lcc-mod-rahmen__daten {
    border-right: 0;
    border-bottom: var(--border-hairline) solid var(--color-border-faint);
  }
}

@media (max-width: 640px) {
  .lcc-pillar .lcc-hero-foto__facts {
    gap: 18px 32px;
    margin: 0 24px;
    padding-top: 18px;
  }
  .lcc-pillar .lcc-hero-foto__facts span { font-size: 20px; }
  .lcc-pillar .lcc-mod-rahmen__daten { padding: 24px; gap: 18px; }
  .lcc-pillar .lcc-mod-rahmen__daten span { font-size: 24px; }
  .lcc-pillar .lcc-mod-rahmen__daten li:last-child span { font-size: 32px; }
  .lcc-pillar .lcc-mod-rahmen__text { padding: 24px; }
  .lcc-pillar .lcc-mod-rahmen__text p { font-size: 16px; line-height: 1.75; }
  .lcc-pillar .lcc-mod-grenzen-karten > .lcc-container { gap: 28px; }
  .lcc-pillar .lcc-mod-grenzen-karten__paar {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .lcc-pillar .lcc-mod-grenzen-karten__paar > div { padding: 24px; }
}