/* ============================================================
   Feelgood Face Yoga – Content-Seiten
   Komponenten-Bibliothek für die Wissens-, Kurs- und FAQ-Seiten.

   Baut auf den Tokens aus theme.json und den Basis-Utilities aus
   custom.css auf (--wp--preset--*, --wp--custom--*). BEM-Konvention.

   @author Marcus Kober <hello@marcuskober.de>
   ============================================================ */

/* ============================================================
   0. SEITEN-SEKTIONEN
   Inhaltsseiten bestehen aus alignfull-Sektionen mit Hintergrund
   und innerem Container. Lesetexte laufen in .container--narrow.
   ============================================================ */
.content-section {
  padding-block: var(--wp--custom--section-padding--default);
}
.content-section--sm {
  padding-block: var(--wp--custom--section-padding--sm);
}

/* Erste Sektion direkt nach dem Hero rückt näher heran –
   sonst addieren sich Hero-Unterpadding und Sektions-Oberpadding. */
.content-hero + .content-section {
  padding-block-start: var(--wp--preset--spacing--6);
}

/* Vertikaler Rhythmus innerhalb einer Prosa-Spalte.
   blockGap ist global 0 – hier setzen wir bewussten Fluss. */
.prose > * + * {
  margin-block-start: var(--wp--preset--spacing--4);
}
.prose > * + :where(h2, .prose__h2) {
  margin-block-start: var(--wp--preset--spacing--10);
}
.prose > * + :where(h3, .prose__h3) {
  margin-block-start: var(--wp--preset--spacing--8);
}

/* ============================================================
   1. CONTENT-HERO  (Seiten-Header der Unterseiten)
   ============================================================ */
.content-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 3.5rem + 7vw, 9rem) clamp(1rem, 0.75rem + 1vw, 2rem);
  padding-inline: var(--wp--custom--container-padding);
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--wp--preset--color--sage-mist) 0%, var(--wp--preset--color--warm-white) 62%);
}

/* Sehr dezenter, weich auslaufender Petrol-Schimmer rechts oben.
   inset:0 + weicher Radius => keine sichtbare Kante. */
.content-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(48% 58% at 88% 6%, var(--wp--preset--color--petrol-light) 0%, transparent 55%);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.content-hero__inner {
  position: relative;
  z-index: 1;
  max-inline-size: 52rem;
  margin-inline: auto;
}

.content-hero__title {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-weight: 300;
  font-size: var(--wp--preset--font-size--4-xl);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--text-headline);
  margin-block: var(--wp--preset--spacing--4);
  text-wrap: balance;
}
.content-hero__title em {
  font-style: italic;
  color: var(--wp--preset--color--petrol);
}

.content-hero__lead {
  font-family: var(--wp--preset--font-family--jost);
  font-weight: 300;
  font-size: var(--wp--preset--font-size--lg);
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--preset--color--text-body);
  max-inline-size: 42rem;
  margin-inline: auto;
}

/* Feine Trennlinie unter dem Hero-Lead, optional */
.content-hero__rule {
  inline-size: 3.5rem;
  block-size: 2px;
  border: 0;
  margin: var(--wp--preset--spacing--8) auto 0;
  background: var(--wp--preset--color--petrol);
  opacity: 0.6;
}

/* ============================================================
   2. PROSE  (Lesetypografie für Fließtext-Abschnitte)
   ============================================================ */
.prose {
  max-inline-size: var(--wp--style--global--content-size, 50rem);
  margin-inline: auto;
  font-family: var(--wp--preset--font-family--jost);
  font-weight: 300;
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--preset--color--text-body);
}

.prose :where(h2, .prose__h2) {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-weight: 400;
  font-size: var(--wp--preset--font-size--3-xl);
  line-height: var(--wp--custom--leading--snug);
  letter-spacing: var(--wp--custom--tracking--headline);
  color: var(--wp--preset--color--text-headline);
  text-wrap: balance;
}

.prose :where(h3, .prose__h3) {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--2-xl);
  line-height: var(--wp--custom--leading--snug);
  color: var(--wp--preset--color--text-headline);
}

.prose :where(h4) {
  font-family: var(--wp--preset--font-family--jost);
  font-weight: 500;
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--text-headline);
}

.prose strong { font-weight: 500; color: var(--wp--preset--color--text-headline); }
.prose em { font-style: italic; }

.prose a {
  color: var(--wp--preset--color--petrol-deep);
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--petrol-light);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.prose a:hover {
  color: var(--wp--preset--color--petrol);
  text-decoration-color: var(--wp--preset--color--petrol);
}

/* Listen mit dezenten Petrol-Markern */
.prose :where(ul, ol) {
  padding-inline-start: var(--wp--preset--spacing--5);
}
.prose ul { list-style: none; padding-inline-start: 0; }
.prose ul > li {
  position: relative;
  padding-inline-start: var(--wp--preset--spacing--5);
  margin-block-start: var(--wp--preset--spacing--3);
}
.prose ul > li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.65em;
  inset-inline-start: 0;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: var(--wp--custom--radius--full);
  background: var(--wp--preset--color--sage);
}
.prose ol { padding-inline-start: var(--wp--preset--spacing--5); }
.prose ol > li { margin-block-start: var(--wp--preset--spacing--3); padding-inline-start: var(--wp--preset--spacing--2); }
.prose ol > li::marker { color: var(--wp--preset--color--petrol); font-weight: 500; }

/* Eröffnungs-Absatz größer setzen (optional über Klasse) */
.prose__intro {
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 300;
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--preset--color--text-body);
}

/* ============================================================
   3. CALLOUT  (Studien-Hinweis, "Wichtig"-Box, Disclaimer)
   ============================================================ */
.callout {
  position: relative;
  margin-block: var(--wp--preset--spacing--8);
  padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--6) var(--wp--preset--spacing--6) var(--wp--preset--spacing--8);
  background: var(--wp--preset--color--sage-mist);
  border-radius: var(--wp--custom--radius--lg);
  border-inline-start: 4px solid var(--wp--preset--color--petrol);
}
.callout--cream { background: var(--wp--preset--color--cream); border-inline-start-color: var(--wp--preset--color--sage); }
.callout--petrol {
  background: var(--wp--preset--color--petrol-deep);
  border-inline-start-color: var(--wp--preset--color--petrol-light);
  color: var(--wp--preset--color--text-on-dark);
}
.callout--petrol :where(p, strong, .callout__title) { color: var(--wp--preset--color--text-on-dark); }

.callout__label {
  display: inline-block;
  font-family: var(--wp--preset--font-family--jost);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: var(--wp--custom--tracking--wider);
  text-transform: uppercase;
  color: var(--wp--preset--color--petrol-deep);
  margin-block-end: var(--wp--preset--spacing--2);
}
.callout--petrol .callout__label { color: var(--wp--preset--color--petrol-light); }

.callout__title {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--xl);
  color: var(--wp--preset--color--text-headline);
  margin-block-end: var(--wp--preset--spacing--2);
}

.callout p {
  font-family: var(--wp--preset--font-family--jost);
  font-weight: 300;
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--preset--color--text-body);
}
.callout p + p { margin-block-start: var(--wp--preset--spacing--3); }

.callout__source {
  display: block;
  margin-block-start: var(--wp--preset--spacing--3);
  font-size: var(--wp--preset--font-size--sm);
  font-style: italic;
  color: var(--wp--preset--color--text-muted);
}

/* Großer Studien-Kennwert (z. B. "3 Jahre jünger") */
.callout__stat {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-weight: 300;
  font-size: var(--wp--preset--font-size--4-xl);
  line-height: 1;
  color: var(--wp--preset--color--petrol);
  display: block;
}

/* ============================================================
   4. R-STEPS  (5-R-Prinzip – nummerierte Schritt-Sequenz)
   ============================================================ */
.r-steps {
  max-inline-size: 52rem;
  margin-inline: auto;
  list-style: none;
  padding: 0;
  counter-reset: r-step;
}
.r-step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--wp--preset--spacing--6);
  padding-block: var(--wp--preset--spacing--6);
}
/* Verbindungslinie zwischen den Schritten */
.r-step:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--wp--preset--spacing--6) + 3.5rem);
  inset-block-end: calc(var(--wp--preset--spacing--6) * -1 + var(--wp--preset--spacing--6));
  inset-inline-start: 1.75rem;
  inline-size: 1px;
  background: linear-gradient(var(--wp--preset--color--petrol-light), transparent);
}
.r-step__num {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--wp--custom--radius--full);
  background: var(--wp--preset--color--warm-white);
  border: 1.5px solid var(--wp--preset--color--petrol);
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-weight: 500;
  font-size: var(--wp--preset--font-size--2-xl);
  line-height: 1;
  color: var(--wp--preset--color--petrol);
  /* Cormorant-Ziffern sitzen tinten-technisch ~2.5px unter der em-Mitte
     (gemessen: ascent 4.9px, descent 9.94px). Nach oben ausgleichen. */
  padding-block-end: 0.14em;
}
.r-step__body { padding-block-start: var(--wp--preset--spacing--1); }
.r-step__title {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--2-xl);
  line-height: var(--wp--custom--leading--snug);
  color: var(--wp--preset--color--text-headline);
  margin-block-end: var(--wp--preset--spacing--1);
}
.r-step__kicker {
  display: block;
  font-family: var(--wp--preset--font-family--jost);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 400;
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--sage);
  margin-block-end: var(--wp--preset--spacing--2);
}
.r-step__text {
  font-family: var(--wp--preset--font-family--jost);
  font-weight: 300;
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--preset--color--text-body);
}

/* ============================================================
   5. TARIFF  (Kurs-/Coaching-Preiskarten)
   ============================================================ */
.tariff-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--custom--gap--cards);
  max-inline-size: 60rem;
  margin-inline: auto;
  margin-block-start: var(--wp--preset--spacing--8);
}
@media (min-width: 48rem) {
  .tariff-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .tariff-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.tariff {
  display: flex;
  flex-direction: column;
  padding: var(--wp--preset--spacing--6);
  background: var(--wp--preset--color--warm-white);
  border: 1px solid var(--wp--preset--color--sand);
  border-radius: var(--wp--custom--radius--xl);
  box-shadow: var(--wp--custom--shadow--card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tariff:hover { transform: translateY(-4px); box-shadow: var(--wp--custom--shadow--cardHover); }

.tariff--featured {
  border-color: var(--wp--preset--color--petrol);
  border-width: 1.5px;
  background: linear-gradient(180deg, var(--wp--preset--color--sage-mist) 0%, var(--wp--preset--color--warm-white) 30%);
}

.tariff__badge {
  align-self: flex-start;
  font-family: var(--wp--preset--font-family--jost);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--text-on-dark);
  background: var(--wp--preset--color--petrol);
  padding: 0.35em 0.9em;
  border-radius: var(--wp--custom--radius--full);
  margin-block-end: var(--wp--preset--spacing--4);
}

.tariff__category {
  font-family: var(--wp--preset--font-family--jost);
  font-size: var(--wp--preset--font-size--sm);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--sage);
  margin-block-end: var(--wp--preset--spacing--2);
}
.tariff__title {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--2-xl);
  line-height: var(--wp--custom--leading--snug);
  color: var(--wp--preset--color--text-headline);
  margin-block-end: var(--wp--preset--spacing--2);
}
.tariff__text {
  font-family: var(--wp--preset--font-family--jost);
  font-weight: 300;
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--preset--color--text-body);
  margin-block-end: var(--wp--preset--spacing--5);
}

/* Preiszeilen-Liste */
.tariff__prices { list-style: none; padding: 0; margin-block: 0 var(--wp--preset--spacing--5); }
.tariff__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--3);
  padding-block: var(--wp--preset--spacing--3);
  border-block-end: 1px solid var(--wp--preset--color--cream);
}
.tariff__price-row:last-child { border-block-end: 0; }
.tariff__price-label {
  font-family: var(--wp--preset--font-family--jost);
  font-weight: 400;
  color: var(--wp--preset--color--text-body);
}
.tariff__price-value {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--xl);
  color: var(--wp--preset--color--petrol-deep);
  white-space: nowrap;
}

/* Großer Einzelpreis (z. B. Gesichtsanalyse) */
.tariff__price-hero {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-weight: 300;
  font-size: var(--wp--preset--font-size--4-xl);
  line-height: 1;
  color: var(--wp--preset--color--petrol);
  margin-block: var(--wp--preset--spacing--2);
}
.tariff__price-hero small {
  font-family: var(--wp--preset--font-family--jost);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 300;
  color: var(--wp--preset--color--text-muted);
}

/* Feature-Liste mit Häkchen */
.tariff__features { list-style: none; padding: 0; margin-block: 0 var(--wp--preset--spacing--5); }
.tariff__features li {
  position: relative;
  padding-inline-start: var(--wp--preset--spacing--6);
  margin-block-start: var(--wp--preset--spacing--3);
  font-family: var(--wp--preset--font-family--jost);
  font-weight: 300;
  line-height: var(--wp--custom--leading--normal);
  color: var(--wp--preset--color--text-body);
}
.tariff__features li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.45em;
  inline-size: 0.9rem;
  block-size: 0.5rem;
  border-inline-start: 2px solid var(--wp--preset--color--petrol);
  border-block-end: 2px solid var(--wp--preset--color--petrol);
  transform: rotate(-45deg);
}
.tariff__cta { margin-block-start: auto; }

/* Fußnoten zu Preisen (§19 UStG, Anfahrt) */
.price-footnote {
  max-inline-size: 60rem;
  margin: var(--wp--preset--spacing--6) auto 0;
  font-family: var(--wp--preset--font-family--jost);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 300;
  line-height: var(--wp--custom--leading--normal);
  color: var(--wp--preset--color--text-muted);
}

/* Beispielrechnung (Gruppenkurs) */
.price-example {
  max-inline-size: 60rem;
  margin: var(--wp--preset--spacing--6) auto 0;
  padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--6);
  background: var(--wp--preset--color--cream);
  border-radius: var(--wp--custom--radius--lg);
  font-family: var(--wp--preset--font-family--jost);
  font-weight: 300;
  color: var(--wp--preset--color--text-body);
}
.price-example strong { font-weight: 500; color: var(--wp--preset--color--petrol-deep); }

/* ============================================================
   6. FAQ  (natives details/summary-Akkordeon, barrierefrei)
   ============================================================ */
.faq {
  max-inline-size: 50rem;
  margin-inline: auto;
}
.faq__item {
  border-block-end: 1px solid var(--wp--preset--color--sand);
  padding-inline: var(--wp--preset--spacing--5);
}
.faq__item[open] {
  background: linear-gradient(var(--wp--preset--color--sage-mist), transparent);
  border-radius: var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0 0;
}

.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--4);
  padding-block: var(--wp--preset--spacing--5);
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--xl);
  line-height: var(--wp--custom--leading--snug);
  color: var(--wp--preset--color--text-headline);
  transition: color 0.2s ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__item[open] .faq__q,
.faq__q:hover { color: var(--wp--preset--color--petrol); }

/* Plus/Minus-Indikator */
.faq__icon {
  position: relative;
  flex: 0 0 auto;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin-block-start: 0.2em;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  background: var(--wp--preset--color--petrol);
  transition: transform 0.25s ease;
}
.faq__icon::before { inline-size: 1rem; block-size: 1.5px; transform: translate(-50%, -50%); }
.faq__icon::after { inline-size: 1.5px; block-size: 1rem; transform: translate(-50%, -50%); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq__a {
  padding-block: 0 var(--wp--preset--spacing--5);
  padding-inline-end: var(--wp--preset--spacing--8);
  font-family: var(--wp--preset--font-family--jost);
  font-weight: 300;
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--preset--color--text-body);
}
.faq__a p + p { margin-block-start: var(--wp--preset--spacing--3); }

/* ============================================================
   7. CONTENT-CTA  (Abschluss-Aufruf mit Mail-Kontakt)
   ============================================================ */
.content-cta {
  text-align: center;
  max-inline-size: 44rem;
  margin-inline: auto;
}
.content-cta .wp-block-buttons {
  margin-block-start: var(--wp--preset--spacing--6);
  justify-content: center;
}
.content-cta__title {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-weight: 400;
  font-size: var(--wp--preset--font-size--3-xl);
  line-height: var(--wp--custom--leading--snug);
  color: var(--wp--preset--color--text-headline);
  margin-block-end: var(--wp--preset--spacing--4);
}
.content-cta__claim {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-style: italic;
  font-weight: 400;
  font-size: var(--wp--preset--font-size--2-xl);
  color: var(--wp--preset--color--petrol);
  margin-block-start: var(--wp--preset--spacing--6);
}

/* ============================================================
   8. SEKTIONS-ÜBERSCHRIFT (zentriert, für Content-Seiten)
   ============================================================ */
.content-heading {
  text-align: center;
  max-inline-size: 44rem;
  margin: 0 auto var(--wp--preset--spacing--10);
}
.content-heading h2 {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-weight: 400;
  font-size: var(--wp--preset--font-size--3-xl);
  line-height: var(--wp--custom--leading--snug);
  letter-spacing: var(--wp--custom--tracking--headline);
  color: var(--wp--preset--color--text-headline);
  margin-block-end: var(--wp--preset--spacing--4);
}

/* ============================================================
   9. RESPONSIVE
   ============================================================ */
@media (max-width: 47.99rem) {
  .r-step { column-gap: var(--wp--preset--spacing--4); }
  .r-step__num { inline-size: 2.75rem; block-size: 2.75rem; font-size: var(--wp--preset--font-size--xl); }
  .r-step:not(:last-child)::before { inset-inline-start: 1.375rem; }
  .tariff__price-value { font-size: var(--wp--preset--font-size--lg); }
}

/* ============================================================
   11. CONTENT-FIGURE – Bilder im Fließtext der Content-Seiten
   ============================================================ */
figure.wp-block-image.content-figure {
  inline-size: fit-content;
  margin-inline: auto;
  margin-block: var(--wp--preset--spacing--6);
  max-inline-size: 60rem;
  border-radius: var(--wp--custom--radius--xl);
  overflow: hidden;
  box-shadow: var(--wp--custom--shadow--card);
}
/* Angrenzende Sektionen rücken ans Bild heran – moderater, symmetrischer
   Abstand ober- und unterhalb (sonst addiert sich das Sektions-Padding). */
.content-section:has(+ .content-figure) {
  padding-block-end: var(--wp--preset--spacing--5);
}
.content-figure + .content-section {
  padding-block-start: var(--wp--preset--spacing--5);
}
figure.wp-block-image.content-figure img {
  display: block;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  /* Hohe (Hochformat-)Bilder begrenzen – Breite passt sich automatisch an */
  max-block-size: 60vh;
}
figure.wp-block-image.content-figure figcaption {
  margin: 0;
  padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
  font-family: var(--wp--preset--font-family--jost);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-muted);
  text-align: center;
  background: var(--wp--preset--color--warm-white);
}
/* Schmälere Variante – in Lesebreite */
figure.wp-block-image.content-figure--narrow { max-inline-size: 46rem; }

/* ============================================================
   12. BLOG – Übersicht (Karten-Grid) & Einzelbeitrag
   ============================================================ */
.blog-query { margin-block-start: var(--wp--preset--spacing--4); }

/* Grid (wp:post-template rendert <ul> mit <li class="wp-block-post">) */
ul.wp-block-post-template.blog-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--custom--gap--cards);
}
@media (min-width: 40rem) { ul.wp-block-post-template.blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { ul.wp-block-post-template.blog-grid { grid-template-columns: repeat(3, 1fr); } }
ul.wp-block-post-template.blog-grid > li.wp-block-post { margin: 0; }

.blog-card {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  background: var(--wp--preset--color--warm-white);
  border: 1px solid var(--wp--preset--color--sand);
  border-radius: var(--wp--custom--radius--xl);
  overflow: hidden;
  box-shadow: var(--wp--custom--shadow--card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--wp--custom--shadow--cardHover); }

.blog-card__image { margin: 0; }
.blog-card__image img,
.blog-card__image .wp-block-post-featured-image__placeholder {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.blog-card__image a { display: block; line-height: 0; }

.blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--wp--preset--spacing--6);
}
.blog-card__date {
  font-family: var(--wp--preset--font-family--jost);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--sage);
  margin-block-end: var(--wp--preset--spacing--2);
}
.blog-card__title {
  font-family: var(--wp--preset--font-family--cormorant-garamond);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--xl);
  line-height: var(--wp--custom--leading--snug);
  color: var(--wp--preset--color--text-headline);
  margin-block: 0 var(--wp--preset--spacing--3);
}
.blog-card__title a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.blog-card__title a:hover { color: var(--wp--preset--color--petrol); }
.blog-card__excerpt {
  font-family: var(--wp--preset--font-family--jost);
  font-weight: 300;
  line-height: var(--wp--custom--leading--normal);
  color: var(--wp--preset--color--text-body);
  margin-block-end: var(--wp--preset--spacing--4);
}
.blog-card__more {
  margin-block-start: auto;
}
.blog-card__more a {
  font-family: var(--wp--preset--font-family--jost);
  font-weight: 500;
  font-size: var(--wp--preset--font-size--sm);
  letter-spacing: var(--wp--custom--tracking--wide);
  color: var(--wp--preset--color--petrol-deep);
  text-decoration: none;
}
.blog-card__more a:hover { color: var(--wp--preset--color--petrol); }

/* Pagination */
.blog-pagination {
  margin-block-start: var(--wp--preset--spacing--10);
  gap: var(--wp--preset--spacing--3);
  align-items: center;
  font-family: var(--wp--preset--font-family--jost);
}
.blog-pagination a, .blog-pagination .current {
  color: var(--wp--preset--color--text-body);
  text-decoration: none;
}
.blog-pagination a:hover, .blog-pagination .current { color: var(--wp--preset--color--petrol); }

/* Einzelbeitrag: Absatz-Abstände im constrained post-content erzwingen
   (WordPress' Layout-Margin nutzt blockGap 0 – hier bewusst setzen). */
.prose.is-layout-constrained > * + * { margin-block-start: var(--wp--preset--spacing--4); }
.prose.is-layout-constrained > * + :where(h2, h3, .wp-block-heading) { margin-block-start: var(--wp--preset--spacing--8); }

/* Einzelbeitrag */
.single-hero .content-hero__inner { max-inline-size: 46rem; }
figure.wp-block-image.single-featured,
.wp-block-post-featured-image.single-featured {
  inline-size: fit-content;
  margin-inline: auto;
  margin-block: var(--wp--preset--spacing--6) var(--wp--preset--spacing--8);
  max-inline-size: 60rem;
  border-radius: var(--wp--custom--radius--xl);
  overflow: hidden;
  box-shadow: var(--wp--custom--shadow--card);
}
.single-featured img { display: block; inline-size: auto; max-inline-size: 100%; block-size: auto; max-block-size: 70vh; }
.single-back { margin-block-start: var(--wp--preset--spacing--10); }
.single-back a { color: var(--wp--preset--color--petrol-deep); text-decoration: none; font-family: var(--wp--preset--font-family--jost); }
.single-back a:hover { color: var(--wp--preset--color--petrol); }

/* ============================================================
   10. DUNKLE SEKTIONEN – Schrift aufhellen
   Greift für Sektionen mit petrol-deep-Hintergrund und für
   callout--petrol. Der schöne dunkle Hintergrund bleibt, nur
   die Schrift wird hell. Muss am Dateiende stehen, damit es die
   Basis-Farbregeln (gleiche Spezifität) sicher überschreibt.
   ============================================================ */
/* :is() (nicht :where()) – sonst schlägt die Basisregel `.callout p`
   (Spezifität 0,1,1) die Aufhellung. :is() erbt die Klassen-Spezifität. */
.has-petrol-deep-background-color :is(p, li, h1, h2, h3, h4, h5, h6, strong, em, .lead, .prose__intro, .callout__title, .content-cta__title, .content-cta__claim, .content-heading h2),
.callout--petrol :is(p, li, h2, h3, h4, strong, em, .lead, .callout__title) {
  color: var(--wp--preset--color--text-on-dark);
}

/* Akzent-Elemente auf Petrol-Light statt reinweiß (Hierarchie) */
.has-petrol-deep-background-color :is(.overline, .callout__label, .callout__stat, .r-step__kicker, .tariff__category),
.callout--petrol :is(.callout__label, .callout__stat) {
  color: var(--wp--preset--color--petrol-light);
}

.has-petrol-deep-background-color :is(.callout__source),
.callout--petrol :is(.callout__source) {
  color: var(--wp--preset--color--petrol-light);
  opacity: 0.8;
}

/* Links in dunklen Sektionen hell + heller Unterstrich */
.has-petrol-deep-background-color a,
.callout--petrol a {
  color: var(--wp--preset--color--text-on-dark);
  text-decoration-color: var(--wp--preset--color--petrol-light);
}
.has-petrol-deep-background-color a:hover,
.callout--petrol a:hover {
  color: var(--wp--preset--color--petrol-light);
  text-decoration-color: var(--wp--preset--color--petrol-light);
}