/* =============================================================================
   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;
}

/* 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 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-inline-sm);                  /* 8px */
  background-color: var(--button-bg);           /* #D26B2A */
  color: var(--button-text-color);              /* Weiß */
  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: 0;
  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);        /* #BD6026 (−10%) */
  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);       /* #A85622 (−20%) */
}

.lcc-button:focus-visible,
.wp-block-button.is-style-lcc-primary > .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;
}

/* ===========================================================================
   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): Body #555555 ~7.5:1,
   Heading/Preis #1A1A2E ~16:1, Sub-Headline #2E4654 ~9.7:1, Link #1E3A4F ~11.9: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 */
.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-cta);
  padding-left: var(--space-4);                 /* 16px */
  margin: 0 0 var(--space-stack-lg);
}

/* 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);
}
.lcc-site-header__brand { margin: 0; }
.lcc-site-header__brand a {
  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);
  text-decoration: none;
  letter-spacing: var(--letter-spacing-heading);
}
.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(--color-text-on-dark-body);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-state);
}
.lcc-nav a:hover,
.lcc-nav a:focus-visible { color: var(--color-text-on-dark-heading); }
.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. */
  .lcc-site-header__brand { flex: 1 1 auto; min-width: 0; }
  .lcc-site-header__brand a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(0.85rem, 3.6vw, var(--fs-h3)); /* skaliert; bei 390px voll lesbar */
    letter-spacing: 0;
  }

  /* 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(--color-white) 38%, transparent);
    border-radius: var(--radius-md);
    color: var(--color-white);
    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(--color-white);
    outline-offset: 2px;
  }
  details[open] > .lcc-mobile-nav__toggle {
    background-color: color-mix(in srgb, var(--color-white) 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(--color-white);
  }
  .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); }

/* ===========================================================================
   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; }
}