/* ═══════════════════════════════════════════════════════════════════════════
   CAROLIN MALLMANN — DESIGNSYSTEM  v6.0
   „Editorial · Warm & ruhig"
   1:1 aus dem Handoff-Paket: _ds/tokens/*.css + Komponenten aus dem Prototyp.
   Alle Klassen mit cm- vorangestellt, damit nichts mit Ona Pro kollidiert.

   EINBAU:  Wird vom Plugin „Carolin Mallmann — Design" automatisch geladen.
   Diese Datei NICHT in den Customizer kopieren — sie lebt im Plugin.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────────────
   1 · TOKENS
   ───────────────────────────────────────────────────────────────────────────── */
:root{
  /* Navy */
  --cm-navy-900:#050F26;
  --cm-navy-800:#091A3E;
  --cm-navy-700:#14264F;
  --cm-navy-600:#24365F;
  /* Gold */
  --cm-gold-600:#A98A4B;
  --cm-gold-500:#C4A96A;
  --cm-gold-400:#D6BE86;
  --cm-gold-200:#E7D9B6;
  /* Blau */
  --cm-blue-600:#1E6199;
  --cm-blue-500:#257ABE;
  --cm-blue-300:#7FB0DA;
  /* Moos */
  --cm-moss-600:#586A4B;
  --cm-moss-500:#6B7C5C;
  --cm-moss-300:#9DAA8C;
  /* Sand / Papier */
  --cm-sand-050:#FAFAF7;
  --cm-sand-100:#F0EBE3;
  --cm-sand-200:#EDE8DF;
  --cm-sand-300:#E1D9CC;
  --cm-sand-400:#C9BEAC;
  /* Tinte */
  --cm-ink-900:#091A3E;
  --cm-ink-700:#3A4152;
  --cm-ink-600:#4A5060;
  --cm-ink-500:#5A6070;
  --cm-ink-400:#888C96;
  /* Auf dunkel */
  --cm-on-dark-100:#FAFAF7;
  --cm-on-dark-75:rgba(255,255,255,.75);
  --cm-on-dark-50:rgba(255,255,255,.50);
  --cm-on-dark-35:rgba(255,255,255,.35);
  --cm-on-dark-line:rgba(255,255,255,.10);
  /* Pastell */
  --cm-mist-peach:#F4B79A;
  --cm-mist-blush:#F0A6C1;
  --cm-mist-lilac:#C6B7E8;
  --cm-mist-sky:#A9CBE9;

  /* Semantik */
  --cm-surface-page:var(--cm-sand-100);
  --cm-surface-card:var(--cm-sand-050);
  --cm-surface-sand:var(--cm-sand-200);
  --cm-surface-dark:var(--cm-navy-800);
  --cm-border-light:var(--cm-sand-300);

  /* Schrift */
  --cm-font-display:'Cormorant Garamond','Georgia',serif;
  --cm-font-body:'Lato','Helvetica Neue',Arial,sans-serif;

  /* Schatten */
  --cm-shadow-sm:0 2px 8px rgba(9,26,62,.06);
  --cm-shadow-md:0 10px 30px rgba(9,26,62,.08);
  --cm-shadow-lg:0 24px 60px rgba(9,26,62,.12);

  /* Verläufe */
  --cm-grad-navy:linear-gradient(120deg, #050F26 0%, #091A3E 45%, #1B4A7E 100%);
  --cm-grad-mist:linear-gradient(135deg, #A9CBE9 0%, #C6B7E8 38%, #F0A6C1 68%, #F4B79A 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   0 · DIE ZWEI THEME-FALLEN — hier zuerst, damit sie sicher greifen
   ═══════════════════════════════════════════════════════════════════════════ */

/* (a) DIE WEISSEN BALKEN.
   Ona setzt über "is-layout-flow" auf JEDES Geschwister-Element
   margin-block-start:24px. Zwischen unseren randlosen Sektionen blitzte
   dadurch der weiße Body-Hintergrund durch — 13 weiße Streifen auf einer Seite.
   Sektionen stoßen aneinander. Punkt. */
.cm-hero, .cm-facts, .cm-sec, .cm-dark, .cm-mist, .cm-split, .cm-fullsplit,
.cm-cta, .cm-pull, .cm-voice, .cm-gift, .cm-product, .cm-trust,
.cm-article-hero, .cm-sticky{
  margin-block:0 !important;
}
/* Und der Hintergrund darunter ist Sand, kein Weiß — falls doch mal
   ein Pixel durchscheint, fällt es niemandem auf. */
.wp-site-blocks, .entry-content{ background:var(--cm-sand-100); }

/* (b) DIE 720-PX-FESSEL.
   Das Theme deckelt direkte Kinder des Inhalts auf die "contentSize" (720 px).
   Unsere wp:group-Sektionen sind alignfull und entkommen dem. Alles, was in
   einem wp:html-Block steckt, aber nicht: Die Vertrauensleiste war 720 px breit
   und brach auf zwei Zeilen um, die Sticky-Bar klebte als Kästchen in der Mitte. */
.cm-trust, .cm-facts, .cm-newsletter{
  max-width:none !important;
  width:100% !important;
}
.cm-sticky{
  max-width:none !important;
  width:100vw !important;
  left:0 !important; right:auto !important;
  padding-left:24px !important; padding-right:24px !important;
  box-sizing:border-box;
}

/* (c) DAS HERO-BILD AUF BREITEN BILDSCHIRMEN.
   Die Seite geht über die volle Breite — so ist das Design gezeichnet, so bleibt es.
   Aber: Auf einem 2160-px-Monitor wird die Bildspalte 929 px breit. Das Porträt ist
   Hochformat (683 × 1024). "cover" skaliert dann auf die Breite — und bei nur 560 px
   Höhe sieht man von einem 1393 px hohen Bild ganze 40 %. Ergebnis: eine Nahaufnahme
   des Gesichts.

   Die Rechnung, die hier zählt: Sichtbarer Anteil = Rahmenhöhe / (Rahmenbreite × 1,5).
   Statt die Bühne zu verengen, lassen wir den Rahmen mitwachsen. Dann bleibt der
   Ausschnitt bei jeder Breite gleich großzügig. */
/* KORREKTUR: 42vw / 940px liess den Hero auf grossen Bildschirmen bis auf
   940 px Hoehe wachsen — das Portraet wurde zur Riesenflaeche und die Textspalte
   sah daneben schmal aus. Die Buehne bleibt jetzt in ruhigen Proportionen. */
.cm-hero .cm-hero-img{
  min-height:clamp(520px, 32vw, 700px);
}
.cm-hero .cm-hero-img img{ object-position:50% 18%; }

/* Das Podcast-Band ist im Design auf 1000 px begrenzt — es lief mit 2032 px
   über die ganze Seite. Der Hintergrund bleibt randlos, nur der Inhalt sitzt. */
.cm-mist > .wp-block-columns{ max-width:1000px; margin-inline:auto; }


/* (d) WARUM DIE SCHRIFT FETTER AUSSAH ALS IN DER VORLAGE.
   Es ist dieselbe Schrift (Cormorant Garamond 400) — aber macOS rendert Text
   standardmäßig mit Subpixel-Glättung. Die legt Farbsäume um jede Kante und
   lässt Buchstaben dicker wirken. Der Design-Prototyp stellt auf Graustufen-
   Glättung um; die Seite tat es nicht. Genau daher der Unterschied.

   Das ist kein Schönheitsfehler: Bei einer zarten Renaissance-Antiqua wie
   Cormorant frisst die Subpixel-Glättung die feinen Haarstriche zu. */
html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}


/* ─────────────────────────────────────────────────────────────────────────────
   2 · SEKTIONEN
   ───────────────────────────────────────────────────────────────────────────── */
.cm-sec,.cm-hero,.cm-dark,.cm-mist,.cm-split{
  font-family:var(--cm-font-body); color:var(--cm-ink-600);
  font-size:16px; line-height:1.8;
}
.cm-sec{ background:var(--cm-surface-page); padding:96px 64px; }
.cm-sec.cm-sand{ background:var(--cm-surface-sand); }
.cm-sec.cm-card-bg{ background:var(--cm-surface-card); }
.cm-sec.cm-tight{ padding:56px 64px; }
.cm-dark{ background:var(--cm-grad-navy); color:var(--cm-on-dark-75); padding:96px 64px; }
.cm-mist{ background:var(--cm-grad-mist); color:var(--cm-navy-800); padding:88px 64px; }

.cm-wrap{ max-width:1060px; margin-inline:auto; }
.cm-wrap-md{ max-width:1000px; margin-inline:auto; }
.cm-wrap-sm{ max-width:900px; margin-inline:auto; }
.cm-wrap-xs{ max-width:820px; margin-inline:auto; }
.cm-center{ text-align:center; }

/* ── Die Theme-Fessel lösen ─────────────────────────────────────────────────
   Ona legt auf verschachtelte Blöcke ein "constrained layout" mit eigener,
   kleinerer contentSize. Ergebnis: Ein Karten-Raster in einem 1060-px-Container
   bekam nur 720 px, die Karten wurden 221 px schmal.

   ACHTUNG — die Regel muss eng gefasst sein. Beim ersten Versuch habe ich auch
   dem Container selbst die max-width genommen; danach waren die Karten 659 px
   breit und liefen über die ganze Seite. Also: nur die KINDER befreien, der
   Container behält seine Breite. */
.cm-wrap, .cm-wrap-md, .cm-wrap-sm, .cm-wrap-xs{ width:100%; }

.cm-wrap > .wp-block-columns,
.cm-wrap-md > .wp-block-columns,
.cm-wrap-sm > .wp-block-columns,
.cm-wrap-xs > .wp-block-columns,
.cm-wrap > .wp-block-group,
.cm-wrap-sm > .wp-block-group,
.cm-wrap-xs > .wp-block-group{
  max-width:none;          /* volle Breite DES CONTAINERS, nicht der Seite */
  margin-left:0;
  margin-right:0;
}

/* Die zentrierten Köpfe bleiben schmal — sie sollen lesbar sein, nicht breit */
.cm-narrow{ max-width:820px; margin-inline:auto; }
.cm-wrap > .cm-narrow,
.cm-wrap > .cm-center,
.cm-wrap-sm > .cm-narrow,
.cm-wrap-sm > .cm-center{ max-width:820px; margin-inline:auto; }

/* ─────────────────────────────────────────────────────────────────────────────
   3 · SIGNATUR-MOTIV:  Goldlinie → Eyebrow → Cormorant-Titel
   ───────────────────────────────────────────────────────────────────────────── */
.cm-rule{
  width:48px; height:2px; border:0; background:var(--cm-gold-500);
  margin:0 0 22px; padding:0;
}
.cm-center .cm-rule{ margin-inline:auto; }

/* Der Eyebrow.
   Er war 17 px statt 12 — weil `.cm-sec p` (Spezifität 0-1-1) meine Regel
   `.cm-eyebrow` (0-1-0) überstimmt hat. Der Klassenname allein reicht nicht,
   sobald irgendwo eine Element-Regel danebensteht. Also p.cm-eyebrow (0-1-1)
   und die Sektionen ausdrücklich mitnennen. */
p.cm-eyebrow,
.cm-eyebrow,
.cm-sec p.cm-eyebrow,
.cm-hero p.cm-eyebrow,
.cm-dark p.cm-eyebrow,
.cm-mist p.cm-eyebrow,
.cm-split p.cm-eyebrow,
.cm-cta p.cm-eyebrow,
.cm-fullsplit p.cm-eyebrow,
.cm-mistcard p.cm-eyebrow,
.cm-article-hero p.cm-eyebrow{
  margin:0 0 14px; font-family:var(--cm-font-body);
  font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  line-height:1.4;
  color:var(--cm-gold-600);
}
.cm-dark p.cm-eyebrow,.cm-hero p.cm-eyebrow,.cm-cta p.cm-eyebrow,
.cm-article-hero p.cm-eyebrow,.cm-gift p.cm-eyebrow{ color:var(--cm-gold-400); }
.cm-mist p.cm-eyebrow{ color:var(--cm-navy-800); }

.cm-sec h1,.cm-sec h2,.cm-sec h3,.cm-sec h4,
.cm-dark h1,.cm-dark h2,.cm-dark h3,
.cm-hero h1,.cm-hero h2,.cm-hero h3,
.cm-mist h1,.cm-mist h2,.cm-mist h3,
.cm-split h1,.cm-split h2,.cm-split h3{
  font-family:var(--cm-font-display); font-weight:400;
  color:var(--cm-ink-900); letter-spacing:-.01em;
}
.cm-sec h2,.cm-split h2{ font-size:42px; line-height:1.14; margin:0 0 22px; }
.cm-sec h3,.cm-split h3{ font-size:26px; line-height:1.25; font-weight:500; margin:0 0 14px; }
.cm-dark h2{ font-size:46px; line-height:1.08; color:var(--cm-on-dark-100); margin:0 0 16px; }
.cm-dark h3{ color:var(--cm-on-dark-100); }
.cm-mist h2{ font-size:44px; color:var(--cm-navy-900); margin:0 0 16px; }

/* Kursiver Gold-Akzent im Titel — das Kernmotiv der Marke */
.cm-sec h2 em,.cm-sec h3 em,.cm-split h2 em{ font-style:italic; color:var(--cm-gold-600); }
.cm-dark h2 em,.cm-hero h1 em{ font-style:italic; color:var(--cm-gold-400); }
.cm-mist h2 em{ font-style:italic; }

.cm-sec p,.cm-split p{ font-size:17px; line-height:1.75; color:var(--cm-ink-600); margin:0 0 18px; }
.cm-lead{ font-size:20px; line-height:1.6; }
.cm-dark p{ color:var(--cm-on-dark-75); font-size:19px; line-height:1.6; }
.cm-mist p{ color:var(--cm-navy-800); font-size:18px; line-height:1.65; }
.cm-meta{ font-size:14px; color:var(--cm-ink-500); }

/* ✦ als Akzent-Glyphe */
.cm-star{ color:var(--cm-gold-500); }
.cm-dark .cm-star,.cm-hero .cm-star{ color:var(--cm-gold-400); }
.cm-stars{ color:var(--cm-gold-500); letter-spacing:.18em; font-size:12px; margin:0 0 14px; }
.cm-mist .cm-stars{ color:var(--cm-navy-800); letter-spacing:.16em; font-size:13px; }

/* ─────────────────────────────────────────────────────────────────────────────
   4 · BUTTONS & LINKS
   ───────────────────────────────────────────────────────────────────────────── */
/* WICHTIG: hier müssen ALLE Sektionsklassen stehen.
   .cm-fullsplit hatte gefehlt — der Button „Krafttiere von A–Z entdecken"
   bekam deshalb die olivgrüne Standardfarbe des Themes. */
.cm-sec .wp-block-button__link,
.cm-dark .wp-block-button__link,
.cm-hero .wp-block-button__link,
.cm-mist .wp-block-button__link,
.cm-split .wp-block-button__link,
.cm-fullsplit .wp-block-button__link,
.cm-cta .wp-block-button__link,
.cm-gift .wp-block-button__link,
.cm-product .wp-block-button__link,
.cm-pull .wp-block-button__link,
.cm-voice .wp-block-button__link,
a.cm-btn{
  display:inline-block; padding:15px 30px;
  background:var(--cm-gold-500); color:var(--cm-navy-900);
  font-family:var(--cm-font-body); font-weight:700; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  /* 1,5px TRANSPARENTER Rahmen statt border:0.
     Der Outline-Button hat 1,5 px Rahmen — ohne diesen unsichtbaren Rahmen
     wäre der Gold-Button 3 px flacher und die beiden stünden schief
     nebeneinander. */
  border:1.5px solid transparent;
  border-radius:2px;
  transition:background .24s ease;
  box-sizing:border-box;
}
/* Abstand wie im Original: 14 px, nicht die 24 px des Themes. */
.cm-hero .wp-block-buttons,
.cm-cta .wp-block-buttons,
.cm-dark .wp-block-buttons,
.cm-sec .wp-block-buttons,
.cm-split .wp-block-buttons,
.cm-mistcard .wp-block-buttons,
.cm-mist .wp-block-buttons,
.cm-fullsplit .wp-block-buttons{
  gap:14px !important;
  align-items:center;
}
.cm-sec .wp-block-button__link:hover,
.cm-dark .wp-block-button__link:hover,
.cm-hero .wp-block-button__link:hover,
.cm-mist .wp-block-button__link:hover,
.cm-split .wp-block-button__link:hover,
.cm-fullsplit .wp-block-button__link:hover,
.cm-cta .wp-block-button__link:hover,
.cm-gift .wp-block-button__link:hover,
.cm-product .wp-block-button__link:hover,
a.cm-btn:hover{ background:var(--cm-gold-400); color:var(--cm-navy-900); }

/* Navy-Variante */
.cm-btn-navy .wp-block-button__link, a.cm-btn-navy{
  background:var(--cm-navy-800); color:var(--cm-on-dark-100);
}
.cm-btn-navy .wp-block-button__link:hover, a.cm-btn-navy:hover{
  background:var(--cm-navy-700); color:var(--cm-on-dark-100);
}
/* Outline auf dunkel */
.cm-btn-out .wp-block-button__link, a.cm-btn-out{
  background:transparent; border:1.5px solid var(--cm-on-dark-50);
  color:var(--cm-on-dark-100); transition:all .24s ease;
}
.cm-btn-out .wp-block-button__link:hover, a.cm-btn-out:hover{
  background:transparent; border-color:var(--cm-gold-400); color:var(--cm-gold-400);
}

/* SICHERHEITSNETZ.
   Sollte ich je wieder eine Sektionsklasse in der Liste oben vergessen, fängt
   diese Regel den Button ab, statt ihn in Theme-Oliv laufen zu lassen.
   [class*="cm-"] trifft jede unserer Sektionen — auch die, die es noch gar
   nicht gibt. */
[class*="cm-"] .wp-block-button__link:not(.cm-keep){
  background:var(--cm-gold-500);
  color:var(--cm-navy-900);
  border-radius:2px;
  font-family:var(--cm-font-body); font-weight:700; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase;
}
/* … aber die Sonderformen behalten ihr Aussehen (spätere Regel gewinnt) */
[class*="cm-"] .cm-ghost .wp-block-button__link{ background:var(--cm-navy-800); color:var(--cm-on-dark-100); }
[class*="cm-"] .cm-btn-navy .wp-block-button__link{ background:var(--cm-navy-800); color:var(--cm-on-dark-100); }
[class*="cm-"] .cm-btn-out .wp-block-button__link{ background:transparent; color:var(--cm-on-dark-100); }
[class*="cm-"] .cm-btn-rose .wp-block-button__link{ background:var(--cm-rose-500); color:#fff; }
[class*="cm-"] .cm-grid .cm-card .wp-block-button__link{ background:var(--cm-navy-800); color:var(--cm-on-dark-100); }

/* Text-Link mit Pfeil */
a.cm-card-link{
  color:var(--cm-gold-600); font-family:var(--cm-font-body);
  font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
a.cm-card-link:hover{ color:var(--cm-gold-500); }

/* Lift-Hover */
.cm-lift{ transition:transform .28s ease, box-shadow .28s ease; }
.cm-lift:hover{ transform:translateY(-4px); box-shadow:var(--cm-shadow-md); }
@media (prefers-reduced-motion:reduce){
  .cm-lift,.cm-lift:hover{ transition:none; transform:none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   5 · HERO  (2-spaltig, Navy-Verlauf, Bild full-bleed rechts)
   ───────────────────────────────────────────────────────────────────────────── */
.cm-hero{
  background:var(--cm-grad-navy); color:var(--cm-on-dark-75);
  padding:0;
}
.cm-hero:has(.cm-hero-img) > .wp-block-columns{ gap:0; margin:0; align-items:stretch; }
.cm-hero .cm-hero-text{ padding:96px 56px 96px 64px; align-self:center; }
.cm-hero h1{
  margin:0; font-family:var(--cm-font-display); font-weight:400;
  font-size:66px; line-height:1.06; color:var(--cm-on-dark-100);
}
.cm-hero .cm-lead{
  margin:28px 0 12px; max-width:44ch; font-size:20px; line-height:1.6;
  color:var(--cm-on-dark-75);
}
.cm-hero .cm-hero-note{
  margin:0 0 34px; font-size:16px; letter-spacing:.04em; color:var(--cm-gold-200);
}
/* Höhe wächst mit der Breite mit — sonst beschneidet das Hochformat-Porträt
   auf breiten Bildschirmen bis zur Nahaufnahme. Siehe Erklärung ganz oben (c). */
.cm-hero .cm-hero-img{
  position:relative;
  min-height:clamp(560px, 42vw, 940px);
  background:#0d234a;
}
.cm-hero .cm-hero-img .wp-block-image,
.cm-hero .cm-hero-img figure{ margin:0; height:100%; }
.cm-hero .cm-hero-img img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 22%;
}
.cm-hero .cm-hero-img::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(9,26,62,.55) 0%, rgba(9,26,62,0) 30%);
}

/* Vertrauensleiste — im Design EINE durchgehende Zeile.
   Sie brach auf zwei um, weil das Theme sie auf 720 px deckelte (oben behoben)
   und weil "Ausgebildet & zertifiziert" mit den fünf Namen zusammen zu breit war. */
.cm-trust{
  background:var(--cm-navy-900); padding:22px 56px;
  display:flex; align-items:center; justify-content:center;
  gap:44px; flex-wrap:wrap;
}
.cm-trust .cm-trust-label{
  font-family:var(--cm-font-body); font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cm-on-dark-50);
  margin:0; white-space:nowrap; flex-shrink:0;
}
.cm-trust span:not(.cm-trust-label){
  font-family:var(--cm-font-display); font-size:17px; color:var(--cm-on-dark-75);
  white-space:nowrap;
  text-transform:none !important;   /* Ona setzt sonst Versalien */
  letter-spacing:0 !important;
}
@media (max-width:1100px){
  .cm-trust{ gap:24px; padding:20px 24px; }
  .cm-trust span:not(.cm-trust-label){ font-size:15px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   6 · SPLIT (2-spaltige Inhaltssektion mit Bild)
   ───────────────────────────────────────────────────────────────────────────── */
.cm-split{ padding:96px 64px; background:var(--cm-surface-page); }
.cm-split.cm-sand{ background:var(--cm-surface-sand); }
.cm-split .wp-block-columns{ gap:56px; align-items:center; max-width:1000px; margin-inline:auto; }
.cm-split .cm-photo img{
  border-radius:6px; box-shadow:var(--cm-shadow-md);
  width:100%; height:100%; object-fit:cover; display:block;
}
.cm-split .cm-photo-45 img{ aspect-ratio:4/5; }
.cm-split .cm-photo-book img{
  width:300px; max-width:100%; box-shadow:var(--cm-shadow-lg);
  margin-inline:auto; height:auto;
}

/* Vollflächiges Bild neben Text (Krafttiere A–Z) */
.cm-fullsplit{
  background:var(--cm-surface-card);
  border-top:1px solid var(--cm-border-light);
  border-bottom:1px solid var(--cm-border-light);
  padding:0;
}
.cm-fullsplit .wp-block-columns{ gap:0; margin:0; align-items:stretch; }
.cm-fullsplit .cm-fullimg{ position:relative; min-height:460px; }
.cm-fullsplit .cm-fullimg .wp-block-image,
.cm-fullsplit .cm-fullimg figure{ margin:0; height:100%; }
.cm-fullsplit .cm-fullimg img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.cm-fullsplit .cm-fullbody{ padding:88px 64px; align-self:center; }

/* ─────────────────────────────────────────────────────────────────────────────
   7 · KARTEN
   ───────────────────────────────────────────────────────────────────────────── */
/* Featured-Karte (Bild links, Text rechts) */
.cm-feature{
  background:var(--cm-surface-card); border-radius:14px; overflow:hidden;
  box-shadow:var(--cm-shadow-md); margin-bottom:28px;
}
.cm-feature.wp-block-columns{ gap:0; align-items:stretch; }
.cm-feature .cm-feature-img{ min-height:340px; }
.cm-feature .cm-feature-img .wp-block-image,
.cm-feature .cm-feature-img figure{ margin:0; height:100%; }
.cm-feature .cm-feature-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.cm-feature .cm-feature-body{ padding:44px; align-self:center; }
.cm-feature h3{ font-size:32px; margin:0 0 14px; }
.cm-badge{
  display:inline-block; background:var(--cm-gold-200); color:var(--cm-gold-600);
  font-family:var(--cm-font-body); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; margin-bottom:16px;
}

/* Kategorie-Karten (Bild oben, unten abgerundet) */
.cm-cards.wp-block-columns{ gap:28px; align-items:stretch; }
.cm-card{
  background:var(--cm-surface-card); border-radius:28px; overflow:hidden;
  box-shadow:var(--cm-shadow-sm); padding:0;
}
.cm-card .cm-card-img{ height:190px; border-radius:0 0 90px 90px; overflow:hidden; }
.cm-card .cm-card-img .wp-block-image,
.cm-card .cm-card-img figure{ margin:0; height:100%; }
.cm-card .cm-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.cm-card .cm-card-body{ padding:28px 30px 34px; }
.cm-card .cm-kicker{
  margin:0 0 8px; text-align:center; font-size:11px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cm-gold-600);
}
/* Nur die Kategorie-Karten der Startseite sind mittig gesetzt.
   Die Landingpage-Karten (.cm-grid) bleiben linksbündig — sonst liest sich
   ein dreizeiliger Titel wie ein Gedicht. */
.cm-cards .cm-card h3{ margin:0 0 18px; text-align:center; font-size:26px; font-weight:500; }
.cm-linklist{ display:grid; gap:10px; }
.cm-linklist a{
  font-family:var(--cm-font-body); font-size:15px; color:var(--cm-ink-700);
  text-decoration:none; transition:color .2s;
}
.cm-linklist a:hover{ color:var(--cm-gold-600); }

/* Stimmen-Karten */
/* Wie beim Kartenraster: WordPress legt Spalten nebeneinander in EINE Reihe.
   Bei sieben Stimmen wird jede 129 px schmal. Ein Raster laesst sie umbrechen —
   drei pro Reihe, alle gleich hoch, egal wie viele es sind. */
.cm-quotes.wp-block-columns{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:26px; align-items:stretch;
}
.cm-quotes.wp-block-columns > .cm-quote{
  width:auto !important; flex-basis:auto !important; margin:0 !important;
}
.cm-quote{
  background:var(--cm-surface-card); border:1px solid var(--cm-border-light);
  border-radius:28px; padding:34px 32px; box-shadow:var(--cm-shadow-sm);
}
.cm-quote p.cm-quote-text{
  margin:0 0 20px; font-family:var(--cm-font-display); font-size:20px;
  line-height:1.55; font-style:italic; color:var(--cm-ink-700);
}
.cm-quote p.cm-quote-name{ margin:0; font-size:13px; color:var(--cm-ink-900); font-weight:700; }
.cm-quote p.cm-quote-prog{
  margin:2px 0 0; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cm-gold-600);
}
/* Großes zentriertes Zitat */
.cm-bigquote{ text-align:center; max-width:780px; margin:0 auto 64px; }
.cm-bigquote .cm-stars{ font-size:15px; letter-spacing:.22em; margin:0 0 18px; }
.cm-bigquote p.cm-quote-text{
  margin:0 0 24px; font-family:var(--cm-font-display); font-weight:400;
  font-style:italic; font-size:31px; line-height:1.45; color:var(--cm-ink-900);
}
.cm-bigquote p.cm-quote-name{
  margin:0; font-size:13px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cm-ink-500);
}
/* Zitat-Karte auf Pastell */
.cm-mist .cm-quote{
  background:rgba(9,26,62,.07); border:1px solid rgba(9,26,62,.14);
  border-radius:16px; padding:40px; box-shadow:none;
}
.cm-mist .cm-quote p.cm-quote-text{
  font-size:25px; line-height:1.45; color:var(--cm-navy-900); margin:0 0 20px;
}
.cm-mist .cm-quote p.cm-quote-name{
  font-size:14px; letter-spacing:.08em; color:var(--cm-navy-800);
  font-weight:400; text-transform:none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8 · TERMINE
   ───────────────────────────────────────────────────────────────────────────── */
.cm-dates{ display:grid; }
.cm-date{
  display:grid; grid-template-columns:90px 2px 1fr; gap:28px; align-items:center;
  padding:28px 8px; border-bottom:1px solid var(--cm-border-light);
}
.cm-date:last-child{ border-bottom:0; }
.cm-date .cm-date-day{ text-align:center; }
.cm-date .cm-date-day p:first-child{
  margin:0; font-family:var(--cm-font-display); font-size:40px; line-height:1;
  color:var(--cm-ink-900);
}
.cm-date .cm-date-day p:last-child{
  margin:4px 0 0; font-size:12px; font-weight:700; letter-spacing:.2em;
  color:var(--cm-gold-600);
}
.cm-date .cm-date-bar{ background:var(--cm-gold-500); height:72px; }
.cm-date .cm-date-body a{
  font-family:var(--cm-font-display); font-size:24px; color:var(--cm-ink-900);
  text-decoration:none;
}
.cm-date .cm-date-body a:hover{ color:var(--cm-gold-600); }
.cm-date .cm-date-body p{ margin:6px 0 10px; font-size:15px; color:var(--cm-ink-600); }
.cm-pill{
  display:inline-block; border:1px solid var(--cm-gold-500); color:var(--cm-gold-600);
  font-family:var(--cm-font-body); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; padding:4px 12px; border-radius:999px;
}
/* Termin-Seite: Monatsüberschrift + Unterlinks + hervorgehobener nächster Termin */
.cm-dates .cm-month{
  margin:44px 0 4px; font-family:var(--cm-font-body); font-size:11px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--cm-gold-600);
  border-bottom:1px solid var(--cm-border-light); padding-bottom:12px;
}
.cm-dates .cm-month:first-child{ margin-top:0; }
.cm-dates .cm-date + .cm-month{ border-top:0; }
.cm-date.cm-next{ background:var(--cm-surface-card); border-radius:14px; }
.cm-date.cm-next .cm-date-bar{ height:118px; }
.cm-date .cm-date-body a.cm-sub{
  font-family:var(--cm-font-body); font-size:15px; color:var(--cm-ink-700);
  text-decoration:none;
}
.cm-date .cm-date-body a.cm-sub:hover{ color:var(--cm-gold-600); text-decoration:underline; }
.cm-date .cm-date-body p .cm-star{ margin-right:2px; }

/* ─────────────────────────────────────────────────────────────────────────────
   9 · FORMULARE (Freebie + Newsletter)
   ───────────────────────────────────────────────────────────────────────────── */
.cm-form-card{
  background:rgba(255,255,255,.07); border:1px solid var(--cm-on-dark-line);
  border-radius:16px; padding:40px 36px;
}
.cm-form-card p.cm-form-title{
  margin:0 0 6px; font-family:var(--cm-font-display); font-size:26px;
  color:var(--cm-on-dark-100);
}
.cm-form-card p.cm-form-sub{
  margin:0 0 22px; font-size:14px; line-height:1.6; color:var(--cm-on-dark-75);
}
.cm-form-card p.cm-form-fine{
  margin:16px 0 0; font-size:12px; line-height:1.6; color:var(--cm-on-dark-50);
}
.cm-form-card p.cm-form-fine a{ color:var(--cm-gold-400); text-decoration:underline; }
.cm-input{
  width:100%; box-sizing:border-box; padding:15px 16px; margin-bottom:14px;
  font-family:var(--cm-font-body); font-size:15px; color:var(--cm-ink-900);
  background:var(--cm-sand-050); border:1.5px solid var(--cm-sand-300);
  border-radius:6px; outline:none;
}
.cm-input:focus{ border-color:var(--cm-gold-500); }
.cm-submit{
  width:100%; padding:16px 24px; background:var(--cm-gold-500); color:var(--cm-navy-900);
  border:0; border-radius:6px; cursor:pointer;
  font-family:var(--cm-font-body); font-weight:700; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; transition:background .24s;
}
.cm-submit:hover{ background:var(--cm-gold-400); }

.cm-newsletter{
  background:var(--cm-grad-mist); border-radius:28px;
  padding:72px 64px; text-align:center; max-width:1060px; margin-inline:auto;
}
.cm-newsletter .cm-form-row{
  display:flex; gap:12px; justify-content:center; max-width:520px; margin:0 auto;
}
.cm-newsletter .cm-input{
  flex:1; margin:0; background:rgba(255,255,255,.75);
  border:1.5px solid rgba(9,26,62,.18);
}
.cm-newsletter .cm-submit{
  width:auto; padding:15px 28px; background:var(--cm-navy-800);
  color:var(--cm-on-dark-100); white-space:nowrap;
}
.cm-newsletter .cm-submit:hover{ background:var(--cm-navy-700); }

/* ── GOLD GEHOERT NICHT AUF PASTELL ────────────────────────────────────────
   Gold (#A98A4B) auf dem Flieder des Verlaufs ergibt rund 1,9:1 Kontrast.
   Lesbar ist ab 4,5:1. Gold traegt auf Navy und auf Sand — auf Pastell
   verschwindet es. Dort uebernimmt Navy die Betonung: 9,4:1. */
.cm-newsletter p.cm-eyebrow,
.cm-newsletter .cm-eyebrow,
.cm-mist p.cm-eyebrow,
.cm-mist .cm-eyebrow{
  color:var(--cm-navy-800);
}
.cm-newsletter h2 em,
.cm-mist h2 em{
  color:var(--cm-navy-800);
  font-style:italic;
}

.cm-freebie-list{
  display:grid; grid-template-columns:1fr 1fr; gap:10px 24px;
  margin:0 0 32px; max-width:460px; list-style:none; padding:0;
}
.cm-freebie-list li{ color:var(--cm-on-dark-75); font-size:15px; }
.cm-freebie-list li::before{ content:"✦"; color:var(--cm-gold-400); margin-right:8px; }

/* ─────────────────────────────────────────────────────────────────────────────
   10 · JOURNAL
   ───────────────────────────────────────────────────────────────────────────── */
.cm-journal-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:44px; flex-wrap:wrap; gap:16px;
}
.cm-posts.wp-block-columns{ gap:28px; align-items:stretch; }
.cm-post{
  background:var(--cm-surface-card); border-radius:28px; overflow:hidden;
  box-shadow:var(--cm-shadow-sm); padding:0; display:block; color:inherit;
  text-decoration:none;
}
.cm-post .cm-post-img{ height:180px; }
.cm-post .cm-post-img .wp-block-image,
.cm-post .cm-post-img figure{ margin:0; height:100%; }
.cm-post .cm-post-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.cm-post .cm-post-body{ padding:26px; }
.cm-post .cm-post-meta{
  margin:0 0 10px; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cm-ink-400);
}
.cm-post h3{
  margin:0 0 10px; font-family:var(--cm-font-display); font-weight:500;
  font-size:22px; line-height:1.25; color:var(--cm-ink-900);
}
.cm-post h3 a{ color:inherit; text-decoration:none; }
.cm-post h3 a:hover{ color:var(--cm-gold-600); }
.cm-post p{ margin:0; font-size:14px; line-height:1.65; color:var(--cm-ink-600); }

/* ─────────────────────────────────────────────────────────────────────────────
   11 · FAQ
   ───────────────────────────────────────────────────────────────────────────── */
.cm-faq{ border-bottom:1px solid var(--cm-border-light); padding:22px 8px; }
.cm-faq summary{
  cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-family:var(--cm-font-display); font-size:23px; color:var(--cm-ink-900);
}
.cm-faq summary::-webkit-details-marker{ display:none; }
.cm-faq summary::after{
  content:"+"; color:var(--cm-gold-500); font-size:26px; font-weight:300;
  line-height:1; transition:transform .24s ease;
}
.cm-faq[open] summary::after{ content:"−"; }
.cm-faq p{
  margin:16px 0 0; font-size:16px; line-height:1.75;
  color:var(--cm-ink-600); max-width:60ch;
}

/* ─────────────────────────────────────────────────────────────────────────────
   12 · WISSENS-/ARTIKEL-SEITEN
   ───────────────────────────────────────────────────────────────────────────── */
.cm-article-hero{
  background:var(--cm-grad-navy); padding:96px 64px 80px; text-align:center;
  font-family:var(--cm-font-body);
}
.cm-article-hero h1{
  margin:0 auto 18px; max-width:900px;
  font-family:var(--cm-font-display); font-weight:400; font-size:56px;
  line-height:1.1; color:var(--cm-on-dark-100);
}
.cm-article-hero h1 em{ font-style:italic; color:var(--cm-gold-400); }
.cm-article-hero .cm-eyebrow{ color:var(--cm-gold-400); }
.cm-article-hero .cm-rule{ margin-inline:auto; }
.cm-article-hero .cm-meta{ color:var(--cm-on-dark-50); margin-top:18px; }

.cm-article{
  max-width:780px; margin-inline:auto; padding:72px 24px 0;
  font-family:var(--cm-font-body);
}
.cm-article p{ font-size:17px; line-height:1.85; color:var(--cm-ink-600); margin:0 0 24px; }
.cm-article h2{
  font-family:var(--cm-font-display); font-weight:400; font-size:38px; line-height:1.2;
  color:var(--cm-ink-900); margin:72px 0 22px; padding-top:28px;
  border-top:1px solid var(--cm-border-light); scroll-margin-top:90px;
}
.cm-article h2 em{ font-style:italic; color:var(--cm-gold-600); }
.cm-article h3{
  font-family:var(--cm-font-display); font-weight:500; font-size:27px;
  color:var(--cm-ink-900); margin:46px 0 14px; scroll-margin-top:90px;
}
.cm-article h4{
  font-family:var(--cm-font-body); font-size:12px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--cm-gold-600);
  margin:34px 0 12px; scroll-margin-top:90px;
}
.cm-article ul,.cm-article ol{ margin:0 0 28px; padding-left:22px; }
.cm-article li{ line-height:1.85; margin-bottom:11px; font-size:17px; color:var(--cm-ink-600); }
.cm-article a{ color:var(--cm-gold-600); text-decoration:underline; text-underline-offset:3px; }
.cm-article a:hover{ color:var(--cm-navy-800); }
.cm-article strong{ color:var(--cm-ink-900); font-weight:700; }
.cm-article img{ border-radius:6px; }
.cm-article figure{ margin:38px 0; }

.cm-definition{
  background:var(--cm-surface-sand); border-left:3px solid var(--cm-gold-500);
  border-radius:0 6px 6px 0; padding:28px 32px; margin:0 0 38px;
}
.cm-definition p{
  margin:0; font-family:var(--cm-font-display); font-size:22px; line-height:1.6;
  color:var(--cm-ink-900);
}
.cm-toc{
  background:var(--cm-surface-card); border:1px solid var(--cm-border-light);
  border-radius:14px; padding:32px 36px; margin:0 0 52px; box-shadow:var(--cm-shadow-sm);
}
.cm-toc-title{
  margin:0 0 18px; font-size:11px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cm-gold-600);
}
.cm-toc ol{ margin:0; padding-left:20px; }
.cm-toc li{ margin-bottom:10px; line-height:1.5; font-size:16px; }
.cm-toc a{ color:var(--cm-ink-700); text-decoration:none; }
.cm-toc a:hover{ color:var(--cm-gold-600); text-decoration:underline; }
.cm-toc ol ol{ margin-top:10px; }

.cm-inline-cta{
  background:var(--cm-grad-navy); border-radius:14px; padding:40px 44px; margin:56px 0;
}
.cm-inline-cta h3{
  margin:0 0 12px !important; font-family:var(--cm-font-display); font-weight:500;
  font-size:27px; color:var(--cm-on-dark-100);
}
.cm-inline-cta p{ margin:0 0 24px; color:var(--cm-on-dark-75); font-size:16px; }
.cm-inline-cta a.cm-btn-inline{
  display:inline-block; background:var(--cm-gold-500); color:var(--cm-navy-900);
  text-decoration:none; padding:15px 30px; border-radius:2px;
  font-family:var(--cm-font-body); font-weight:700; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; transition:background .24s;
}
.cm-inline-cta a.cm-btn-inline:hover{ background:var(--cm-gold-400); }

.cm-note{
  background:var(--cm-surface-sand); border:1px solid var(--cm-border-light);
  border-radius:14px; padding:28px 32px; margin:56px 0 0;
}
.cm-note p{ font-size:14px; line-height:1.75; color:var(--cm-ink-500); margin:0 0 14px; }
.cm-note p:last-child{ margin:0; }
.cm-note strong{ color:var(--cm-ink-900); }

/* Fakten-Leiste (Landingpages)
   Das Ona-Theme erzwingt hier Versalien und Sperrung. Beides zurücknehmen —
   sonst bricht „Erstgespräch" mitten im Wort um. */
.cm-facts{ background:var(--cm-navy-900); padding:34px 56px; }
.cm-facts .wp-block-columns{
  gap:0; margin:0; max-width:1060px; margin-inline:auto; width:100%;
}
.cm-fact{ text-align:center; padding:6px 14px; border-left:1px solid var(--cm-navy-600); }
.cm-fact:first-child{ border-left:0; }
.cm-fact strong{
  display:block; font-family:var(--cm-font-display); font-size:20px;
  color:var(--cm-on-dark-100); font-weight:500; line-height:1.25;
  text-transform:none !important;      /* Theme-Versalien zurücknehmen */
  letter-spacing:0 !important;
  hyphens:none; overflow-wrap:normal;  /* keine Trennung mitten im Wort */
}
.cm-fact p{
  margin:8px 0 0; font-family:var(--cm-font-body); font-size:10px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cm-on-dark-50);
  line-height:1.5;
}

/* Schritte */
/* Dieselbe Falle wie bei Karten und Stimmen: WordPress legt Spalten in EINE
   Reihe. Bei sieben Modulen wird jedes so schmal, dass die Woerter senkrecht
   stehen. Ein Raster laesst sie umbrechen — und counter-reset bleibt hier
   oben, damit die Nummern 1 bis 7 durchlaufen statt bei jeder Reihe neu zu
   beginnen. */
.cm-steps.wp-block-columns{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
  gap:28px; align-items:stretch; counter-reset:cmstep;
}
.cm-steps.wp-block-columns > .cm-step{
  width:auto !important; flex-basis:auto !important; margin:0 !important;
}
.cm-step{
  background:var(--cm-surface-card); border:1px solid var(--cm-border-light);
  border-radius:28px; padding:36px 32px; box-shadow:var(--cm-shadow-sm);
}
.cm-step::before{
  counter-increment:cmstep; content:counter(cmstep);
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-bottom:20px; border-radius:50%;
  background:var(--cm-navy-800); color:var(--cm-gold-400);
  font-family:var(--cm-font-display); font-size:20px;
}
.cm-step h3{ font-size:24px; margin:0 0 12px; }
.cm-step p{ margin:0; font-size:16px; }

/* Checkliste */
.cm-check{ list-style:none; padding:0; margin:0 0 28px; }
.cm-check li{
  position:relative; padding-left:26px; margin-bottom:12px;
  font-size:16px; line-height:1.75; color:var(--cm-ink-600);
}
.cm-check li::before{
  content:"✦"; position:absolute; left:0; top:0; color:var(--cm-gold-500);
}
.cm-dark .cm-check li{ color:var(--cm-on-dark-75); }
.cm-dark .cm-check li::before{ color:var(--cm-gold-400); }

/* Preise */
.cm-prices.wp-block-columns{ gap:28px; align-items:stretch; }
.cm-price{
  background:var(--cm-surface-card); border:1px solid var(--cm-border-light);
  border-radius:28px; padding:40px 36px; box-shadow:var(--cm-shadow-sm);
  position:relative;
}
.cm-price.cm-featured{ border:2px solid var(--cm-gold-500); box-shadow:var(--cm-shadow-md); }
/* Die Beschriftung stand fest im CSS — auf einer Seite mit nur EINEM Angebot
   ist „Empfehlung" sinnlos. Jetzt frei setzbar im Block:
       <div class="cm-price cm-featured" data-label="Nur 10 Plätze">
   Ohne data-label bleibt es bei „Empfehlung“.
   Kein Label gewuenscht? Dann einfach die Klasse cm-featured weglassen. */
.cm-price.cm-featured::before{
  content:"Empfehlung"; position:absolute; top:-13px; left:36px;
  background:var(--cm-gold-500); color:var(--cm-navy-900);
  font-family:var(--cm-font-body); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  padding:5px 14px; border-radius:999px;
}
.cm-price.cm-featured[data-label]::before{ content:attr(data-label); }
.cm-price h3{ margin:0 0 6px; font-size:26px; }
.cm-amount{
  font-family:var(--cm-font-display); font-size:52px; font-weight:400;
  color:var(--cm-ink-900); line-height:1.05; margin:14px 0 4px;
}
.cm-per{ font-size:14px; color:var(--cm-ink-500); margin:0 0 26px; }

/* Video-Stimmen.
   FRUEHER: 1fr als Obergrenze. Auf Seiten mit nur EINEM Video (Portugal) hat
   die eine Karte damit die ganzen 1060 px eingenommen — ein riesiges
   Hochkantvideo mitten auf der Seite. Eine Kachel ist eine Kachel, egal wie
   viele daneben stehen. Also feste Obergrenze und mittig ausrichten. */
.cm-videos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 330px));
  justify-content:center;
  gap:28px; margin-bottom:44px;
}
/* Video-Stimmen.
   Die Videos hatten schwarze Icon-PNGs als Vorschaubild (poster) — deshalb der
   Diamant hinter dem Abspielknopf. Die sind raus; preload="metadata" holt jetzt
   das erste Einzelbild des Videos. Es sind Hochkant-Handyvideos, deshalb 4:5. */
.cm-vid{
  background:var(--cm-surface-card); border:1px solid var(--cm-border-light);
  border-radius:28px; overflow:hidden; box-shadow:var(--cm-shadow-sm);
  display:flex; flex-direction:column;
}
.cm-vid video{
  display:block; width:100%; aspect-ratio:4/5; object-fit:cover;
  background:var(--cm-navy-900);
  border-radius:0 0 60px 60px;   /* dasselbe Motiv wie bei den Karten */
}
.cm-vid-body{ padding:26px 28px 30px; }
.cm-vid-body .cm-stars{ color:var(--cm-gold-500); font-size:12px; letter-spacing:.18em; margin:0 0 12px; }
.cm-vid-body .cm-cite{
  margin:0; font-family:var(--cm-font-display); font-size:22px; font-weight:500;
  color:var(--cm-ink-900); font-style:normal; letter-spacing:0; text-transform:none;
}
.cm-vid-body .cm-role{
  margin:4px 0 0; font-family:var(--cm-font-body); font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--cm-gold-600);
}

/* Zertifikats-Logos.
   Vorher: grau gefiltert und auf 55 % Deckkraft — sie sahen aus wie ein
   Wasserzeichen. Deine Zertifikate sind das Gegenteil eines Wasserzeichens:
   Sie sind der Beweis. Also volle Farbe, volle Deckkraft, größer. */
.cm-logos{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:64px; max-width:1060px; margin-inline:auto;
}
.cm-logos .wp-block-image,
.cm-logos figure{ margin:0; display:flex; align-items:center; }
.cm-logos img{
  height:82px; width:auto; max-width:190px; object-fit:contain;
  opacity:1; filter:none;
}
@media (max-width:900px){
  .cm-logos{ gap:36px; }
  .cm-logos img{ height:56px; }
}

/* Geschenk-/Produktbänder auf Landingpages */
.cm-gift{ background:var(--cm-grad-navy); padding:96px 64px; }
.cm-gift h2{ color:var(--cm-on-dark-100); }
.cm-gift h2 em{ color:var(--cm-gold-400); }
.cm-gift p{ color:var(--cm-on-dark-75); }
.cm-gift .cm-eyebrow{ color:var(--cm-gold-400); }
.cm-price-free{
  display:inline-block; background:var(--cm-gold-500); color:var(--cm-navy-900);
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 14px; border-radius:999px; margin-bottom:16px;
}
.cm-product{ background:var(--cm-surface-sand); padding:96px 64px; }
.cm-product.cm-dark{ background:var(--cm-grad-navy); }
.cm-product .wp-block-image img{ border-radius:6px; box-shadow:var(--cm-shadow-md); }

/* ── ZITAT-BÄNDER — Pastell statt Oliv ─────────────────────────────────────
   Das Oliv ist raus. An seine Stelle kommt der Pastell-Verlauf aus deinen
   Tokens (sky → lilac → blush → peach) — dort steckt auch das Rosé drin,
   das bisher gar nicht vorkam. */
.cm-voice,.cm-pull{
  background:var(--cm-grad-mist); padding:96px 64px; text-align:center;
}
.cm-voice p,.cm-pull p{
  margin:0 auto 22px; max-width:880px;
  font-family:var(--cm-font-display); font-style:italic; font-weight:400;
  font-size:31px; line-height:1.45; color:var(--cm-navy-900);
}
.cm-voice cite,.cm-pull cite{
  display:block; font-family:var(--cm-font-body); font-style:normal;
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cm-navy-800);
}
.cm-voice blockquote,.cm-pull blockquote{ border:0; margin:0; padding:0; }
/* Der schwarze Strich, den Ona vor jedes Zitat setzt — weg damit. */
.cm-voice blockquote,.cm-pull blockquote,
.cm-voice .wp-block-quote,.cm-pull .wp-block-quote{
  border-left:0 !important; border-inline-start:0 !important; padding-left:0 !important;
}
/* ── GALERIE ───────────────────────────────────────────────────────────────
   Vorher: Ona-Standard. Jedes Bild behielt sein eigenes Seitenverhaeltnis,
   also standen die Kacheln unterschiedlich hoch und die Reihen franste unten
   aus. Eine Galerie wirkt ruhig, wenn ALLE Kacheln gleich gross sind und das
   Bild in den Rahmen geschnitten wird — nicht der Rahmen ans Bild.
   Dazu dasselbe Motiv wie ueberall: unten abgerundet. */
.cm-gallery.wp-block-gallery{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  /* Das Theme sperrt Inhalte auf 720 px. Eine Galerie ist ein Bildband,
     kein Fliesstext — sie darf die ganze Buehne nutzen. */
  max-width:none !important; width:100% !important;
  margin-block:10px 38px !important;   /* der Text darunter klebte an den Bildern */
}
@media (max-width:900px){ .cm-gallery.wp-block-gallery{ grid-template-columns:repeat(2,1fr); } }
/* WICHTIG: WordPress gibt jedem Galeriebild selbst eine Breite mit
   (columns-3 -> width: calc(33.33% - gap)). In einem Raster schrumpft das Bild
   damit auf ein Drittel SEINER ZELLE — daher die Briefmarken mit Riesenluecken.
   Die Zelle bestimmt die Breite, nicht das Bild. */
.cm-gallery.wp-block-gallery > .wp-block-image{
  margin:0 !important;
  width:100% !important; max-width:none !important; min-width:0 !important;
  flex:none !important; flex-basis:auto !important;
  overflow:hidden; border-radius:0 0 60px 60px; line-height:0;
}
.cm-gallery.wp-block-gallery > .wp-block-image > figure{
  width:100% !important; height:100% !important; margin:0 !important;
}
.cm-gallery.wp-block-gallery > .wp-block-image img{
  width:100%; height:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  border-radius:0; transition:transform .6s ease;
}
.cm-gallery.wp-block-gallery > .wp-block-image:hover img{ transform:scale(1.05); }
@media (max-width:640px){
  .cm-gallery.wp-block-gallery{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .cm-gallery.wp-block-gallery > .wp-block-image{ border-radius:0 0 34px 34px; }
}

/* ── ROSÉ-AKZENTE ──────────────────────────────────────────────────────────
   Aus dem Prototyp deines Designs (--rose-500 #C98A9E). Für alles, was
   Nähe und Wärme braucht statt Autorität: Selbstliebe, Gratis-Angebote,
   Herzensthemen. */
:root{
  --cm-rose-700:#A5687C;
  --cm-rose-500:#C98A9E;
  --cm-rose-300:#E7C3CF;
  --cm-rose-100:#F6E9ED;
}
.cm-badge-rose{
  display:inline-block; background:var(--cm-rose-100); color:var(--cm-rose-700);
  font-family:var(--cm-font-body); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; margin-bottom:16px;
}
.cm-btn-rose .wp-block-button__link, a.cm-btn-rose{
  background:var(--cm-rose-500); color:#fff; border-radius:999px;
}
.cm-btn-rose .wp-block-button__link:hover, a.cm-btn-rose:hover{
  background:var(--cm-rose-700); color:#fff;
}
.cm-sec.cm-rose{ background:var(--cm-rose-100); }
.cm-sec.cm-rose .cm-eyebrow{ color:var(--cm-rose-700); }
.cm-sec.cm-rose h2 em{ color:var(--cm-rose-700); }
.cm-card.cm-rose-line{ border-left:3px solid var(--cm-rose-500); }

/* ── PASTELL-KARTE ─────────────────────────────────────────────────────────
   Derselbe Baustein wie Newsletter und Podcast auf der Startseite: der
   Pastell-Verlauf als abgerundete Karte auf Sand. Für Gratis-Angebote und
   alles, was Nähe statt Autorität braucht. */
.cm-mistcard{
  background:var(--cm-grad-mist);
  border-radius:28px;
  padding:72px 64px;
  max-width:1060px;
  margin-inline:auto;
  color:var(--cm-navy-800);
}
/* Der Eyebrow brach um („· 0" / „€"). Bei 0,22 em Sperrung und 12 px reicht
   die Spalte nicht — also darf er nicht umbrechen. */
.cm-mistcard p.cm-eyebrow{
  color:var(--cm-navy-800);
  white-space:nowrap;
  letter-spacing:.16em;
  font-size:11px;
}
.cm-mistcard h2,
.cm-mistcard h3{
  font-family:var(--cm-font-display); font-weight:400;
  color:var(--cm-navy-900); font-size:44px; line-height:1.14; margin:0 0 18px;
}
.cm-mistcard h2 em{ font-style:italic; color:var(--cm-navy-900); }
.cm-mistcard p{ color:var(--cm-navy-800); font-size:18px; line-height:1.65; }
.cm-mistcard .cm-lead{ font-size:19px; }
.cm-mistcard .cm-meta{ color:var(--cm-navy-800); opacity:.75; font-size:14px; }
/* Häkchenliste auf Pastell */
.cm-mistcard .cm-check li{ color:var(--cm-navy-800); font-size:16px; }
.cm-mistcard .cm-check li::before{ color:var(--cm-navy-900); }
/* Button: Navy gefüllt — wie „Auf Spotify hören" im Podcast-Band */
.cm-mistcard .wp-block-button__link{
  background:var(--cm-navy-800) !important;
  color:var(--cm-on-dark-100) !important;
  border:0;
}
.cm-mistcard .wp-block-button__link:hover{
  background:var(--cm-navy-700) !important;
  color:var(--cm-on-dark-100) !important;
}
/* Die eingelassene Karte auf dem Verlauf — wie die Zitat-Karte beim Podcast */
.cm-mistcard .cm-inset{
  background:rgba(9,26,62,.07);
  border:1px solid rgba(9,26,62,.14);
  border-radius:16px;
  padding:40px;
}
/* In der eingelassenen Karte standen fünf Sterne — mitkopiert aus der
   Zitat-Karte des Podcasts. Über einer Inhaltsliste bedeuten die nichts.
   Stattdessen eine schlichte Überschrift. */
.cm-mistcard .cm-inset .cm-inset-title{
  margin:0 0 18px;
  font-family:var(--cm-font-body); font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--cm-navy-800); opacity:.72;
}
.cm-mistcard .cm-inset p{ color:var(--cm-navy-900); }
@media (max-width:781px){
  .cm-mistcard{ padding:48px 26px; border-radius:20px; }
  .cm-mistcard h2{ font-size:32px; }
}

/* ── ICONS ─────────────────────────────────────────────────────────────────
   Linienicons statt schwarzer Rasterbilder — Vorbild One Shamanism.
   stroke:currentColor heißt: Die Farbe kommt vom Elternelement. */
.cm-icon{
  width:34px; height:34px;
  stroke:currentColor; fill:none;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  display:block;
}
.cm-ico{
  color:var(--cm-gold-600);
  margin:0 0 20px;
}
.cm-card .cm-ico{ padding:0; }
.cm-grid .cm-card > .cm-ico{ padding:34px 30px 0; margin-bottom:14px; }
.cm-dark .cm-ico, .cm-cta .cm-ico, .cm-hero .cm-ico{ color:var(--cm-gold-400); }
.cm-ico-rose{ color:var(--cm-rose-500); }
.cm-ico-blue{ color:var(--cm-blue-500); }
/* Icon in der Mitte (für zentrierte Karten) */
.cm-center .cm-ico, .cm-ico-center{ margin-inline:auto; }
.cm-ico-center .cm-icon{ margin-inline:auto; }

/* Sticky Bar */
.cm-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap;
  background:var(--cm-navy-900); color:var(--cm-on-dark-75);
  font-family:var(--cm-font-body); font-size:14px; padding:14px 24px;
  border-top:1px solid var(--cm-navy-600);
  transform:translateY(110%); transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.cm-sticky.cm-on{ transform:translateY(0); }
.cm-sticky a{
  background:var(--cm-gold-500); color:var(--cm-navy-900); text-decoration:none;
  padding:12px 26px; border-radius:2px;
  font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap; transition:background .24s;
}
.cm-sticky a:hover{ background:var(--cm-gold-400); }

/* ─────────────────────────────────────────────────────────────────────────────
   13 · HEADER / FOOTER (Template-Parts)
   ───────────────────────────────────────────────────────────────────────────── */
/* Der Theme-Header ist selbst nur 1170 px breit (alignwide) und sitzt mit
   471 px Rand in der Mitte. Topbar und Navi-Balken landeten darin als zwei
   schwebende Navy-Kästen.

   Erst habe ich versucht, die Kästen mit negativen Rändern herauszubrechen —
   das erzeugte nur neue Verschiebungen. Richtig ist, den Header selbst
   freizugeben. Eine Ursache, eine Regel. */
header.site-header,
.wp-block-template-part.site-header{
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}
.cm-topbar, .cm-nav{
  width:100% !important;
  max-width:none !important;
  margin-inline:0 !important;
  box-sizing:border-box;
}

/* Der Header steckt in einer Gruppe mit Creme-Hintergrund und Innenabstand.
   Die erzeugte einen 164-px-Streifen zwischen Navi und Hero.

   Und selbst mit padding:0 blieben 40 px übrig — ein reiner Leerzeichen-
   Textknoten hinter </header>. Der bildet eine Zeilenbox, und die ist so hoch
   wie die Zeilenhöhe. Auf cremefarbenem Grund sieht man sie. line-height:0
   nimmt ihr die Höhe. */
.wp-site-blocks > .wp-block-group:has(header.site-header){
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  line-height:0;
  font-size:0;
}
.wp-site-blocks > .wp-block-group:has(header.site-header) header{
  line-height:normal; font-size:16px;
}
/* Der Inhaltsbereich bringt oben 80 px Polster und unten 40 px mit.
   Oben erzeugte das den Creme-Streifen unter der Navi, unten den über dem
   Footer. Beide weg — die Sektionen bringen ihren Abstand selbst mit. */
.wp-site-blocks > main{
  padding-top:0 !important;
  padding-bottom:0 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}
/* Die Theme-Vorlage setzt außerdem Spacer-Blöcke davor und dahinter.
   Nicht :first-child/:last-child benutzen — hinter dem unteren Spacer steht noch
   ein leerer .ona-container, dadurch griff der Selektor nicht. Einfach ALLE
   direkten Spacer im Vorlagenrahmen ausblenden; die Spacer INNERHALB unserer
   Sektionen sind davon nicht betroffen. */
.wp-site-blocks > main > .wp-block-spacer{ display:none !important; }
/* Und der Footer soll direkt anschließen. */
.wp-site-blocks > footer.site-footer{
  margin:0 !important;
  padding:0 !important;
  max-width:none !important;
  width:100% !important;
}

/* Social-Topbar */
.cm-topbar{
  background:var(--cm-navy-900); padding:9px 44px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:var(--cm-font-body);
}
.cm-topbar a{
  color:var(--cm-on-dark-75); font-size:12px; letter-spacing:.08em; text-decoration:none;
}
.cm-topbar a:hover{ color:var(--cm-on-dark-100); }
.cm-topbar .cm-topbar-mail{ color:var(--cm-gold-400); }
.cm-topbar .cm-topbar-social{ display:flex; gap:20px; flex-wrap:wrap; }

/* ── NAVIGATIONSLEISTE ─────────────────────────────────────────────────────
   Im Design: Navy-Balken, weißes Logo-Zeichen, „Carolin Mallmann" in Cormorant,
   Menü in Weiß, „One Shamanism" in Gold, rechts der goldene Erstgespräch-Knopf. */
.cm-nav{
  background:var(--cm-navy-800);
  border-bottom:1px solid var(--cm-navy-600);
  padding:16px 44px;
  /* KEIN width hier! Die Breite kommt aus der 100vw-Regel weiter oben.
     Stand hier vorher width:100%, gewann diese spätere Regel — und die Navi
     war wieder 1170 px schmal. (Briefing §5.5) */
}
.cm-nav .cm-logo{ gap:12px; align-items:center; flex-wrap:nowrap; }
.cm-nav .cm-logo img,
.cm-nav .wp-block-site-logo img{ height:38px; width:auto; }
.cm-nav .cm-logo-text,
.cm-nav .wp-block-site-title{
  font-family:var(--cm-font-display); font-size:21px; font-weight:500;
  letter-spacing:.03em; white-space:nowrap; margin:0;
}
.cm-nav .cm-logo-text a,
.cm-nav .wp-block-site-title a{
  color:var(--cm-on-dark-100) !important; text-decoration:none;
}
.cm-nav .cm-nav-right{ gap:16px; align-items:center; flex-wrap:nowrap; }

/* Das Menü darf NICHT umbrechen — „One Shamanism" rutschte sonst in Zeile 2. */
.cm-nav .wp-block-navigation__container,
.cm-nav .wp-block-navigation{
  flex-wrap:nowrap !important;
  gap:20px !important;
}
.cm-nav .wp-block-navigation .wp-block-navigation-item{ white-space:nowrap; }
@media (max-width:1500px){
  .cm-nav .wp-block-navigation{ gap:14px !important; }
  .cm-nav .wp-block-navigation a{ font-size:12px !important; }
}

/* Das Menü — Ona färbt es dunkel; auf Navy braucht es Weiß. */
.cm-nav .wp-block-navigation,
.cm-nav .wp-block-navigation a,
.cm-nav .wp-block-navigation .wp-block-navigation-item__content{
  color:var(--cm-on-dark-75) !important;
  font-family:var(--cm-font-body); font-size:13px; font-weight:500;
  text-decoration:none;
}
.cm-nav .wp-block-navigation a:hover,
.cm-nav .wp-block-navigation .wp-block-navigation-item__content:hover{
  color:var(--cm-on-dark-100) !important;
}
.cm-nav .wp-block-navigation__submenu-icon svg{ fill:currentColor; }
/* Dropdowns */
.cm-nav .wp-block-navigation .wp-block-navigation__submenu-container{
  background:var(--cm-navy-700) !important;
  border:1px solid var(--cm-navy-600) !important;
  border-radius:6px; padding:8px 0;
  box-shadow:0 18px 40px rgba(5,15,38,.4);
}
.cm-nav .wp-block-navigation .wp-block-navigation__submenu-container a{
  color:var(--cm-on-dark-75) !important; padding:9px 20px !important;
}
.cm-nav .wp-block-navigation .wp-block-navigation__submenu-container a:hover{
  color:var(--cm-gold-400) !important;
}
/* „One Shamanism" — im Design golden hervorgehoben */
.cm-nav .wp-block-navigation a[href*="shamanism.one"]{
  color:var(--cm-gold-400) !important; font-weight:600;
}
@media (max-width:900px){
  .cm-nav{ padding:14px 20px; }
  .cm-nav .cm-logo-text{ font-size:17px; }
  .cm-topbar{ padding:8px 20px; font-size:11px; }
  .cm-topbar .cm-topbar-social{ gap:14px; }
}

.cm-footer{
  background:var(--cm-navy-900);
  padding:64px 64px 40px;
  border-top:1px solid var(--cm-navy-600);
  font-family:var(--cm-font-body);
  width:100%; max-width:none;
}
/* Der Footer-Inhalt saß auf 1020 px — schmaler als der Rest der Seite und
   dadurch sichtbar aus der Flucht. Jetzt dieselbe Bühne wie überall: 1060. */
.cm-footer .cm-wrap{ max-width:1060px; margin-inline:auto; width:100%; }
/* Platz für die Sticky-Bar, damit sie das Impressum nicht überdeckt */
.cm-footer .cm-foot-bottom{ padding-bottom:56px; }
.cm-footer a{ color:var(--cm-on-dark-75); font-size:13px; text-decoration:none; }
.cm-footer a:hover{ color:var(--cm-on-dark-100); }
.cm-footer .cm-foot-title{
  font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cm-gold-400); margin:0 0 4px;
}
.cm-footer .cm-foot-quote{
  margin:0; font-family:var(--cm-font-display); font-style:italic;
  font-size:17px; line-height:1.6; color:var(--cm-on-dark-75);
}
.cm-footer .cm-foot-name{
  margin:0; font-family:var(--cm-font-display); font-size:22px;
  color:var(--cm-on-dark-100);
}
.cm-footer .cm-foot-bottom{
  border-top:1px solid var(--cm-navy-600); padding-top:22px; margin-top:36px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
/* Die Copyright-Zeile stand auf 50 % Weiß — auf Navy-900 ist das zu dunkel
   zum Lesen. 75 % ist der Wert, den dein Design für Fließtext auf Dunkel
   vorsieht. */
.cm-footer .cm-foot-bottom span,
.cm-footer .cm-foot-bottom a{
  font-size:13px; letter-spacing:.06em; color:var(--cm-on-dark-75);
}
.cm-footer .cm-foot-bottom a:hover{ color:var(--cm-gold-400); }

/* ─────────────────────────────────────────────────────────────────────────────
   14 · MOBIL
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width:781px){
  .cm-sec,.cm-split,.cm-dark,.cm-mist,.cm-gift,.cm-product,.cm-voice,.cm-pull{
    padding:64px 24px;
  }
  .cm-sec.cm-tight{ padding:40px 24px; }
  .cm-hero .cm-hero-text{ padding:64px 24px 56px; }
  .cm-hero h1{ font-size:40px; }
  .cm-hero .cm-lead{ font-size:18px; }
  .cm-hero .cm-hero-img{ min-height:340px; }
  .cm-hero .cm-hero-img img{ position:relative; height:340px; }
  .cm-sec h2,.cm-split h2,.cm-dark h2,.cm-mist h2{ font-size:32px; }
  .cm-bigquote p.cm-quote-text{ font-size:24px; }
  .cm-article-hero{ padding:64px 24px 52px; }
  .cm-article-hero h1{ font-size:36px; }
  .cm-article{ padding-top:48px; }
  .cm-article h2{ font-size:29px; margin-top:52px; }
  .cm-article h3{ font-size:23px; }
  .cm-feature .cm-feature-body{ padding:32px 26px; }
  .cm-feature h3{ font-size:26px; }
  .cm-fullsplit .cm-fullbody{ padding:56px 24px; }
  .cm-fullsplit .cm-fullimg{ min-height:300px; }
  .cm-fullsplit .cm-fullimg img{ position:relative; height:300px; }
  .cm-split .wp-block-columns{ gap:36px; }
  .cm-cards.wp-block-columns,.cm-quotes.wp-block-columns,
  .cm-posts.wp-block-columns,.cm-prices.wp-block-columns,
  .cm-steps.wp-block-columns{ gap:24px; }
  .cm-date{ grid-template-columns:64px 2px 1fr; gap:18px; }
  .cm-date .cm-date-day p:first-child{ font-size:30px; }
  .cm-date .cm-date-body a{ font-size:20px; }
  .cm-newsletter{ padding:48px 26px; border-radius:20px; }
  .cm-newsletter .cm-form-row{ flex-direction:column; }
  .cm-newsletter .cm-submit{ width:100%; }
  .cm-freebie-list{ grid-template-columns:1fr; }
  .cm-journal-head{ flex-direction:column; align-items:flex-start; }
  .cm-fact{ border-left:0; border-top:1px solid var(--cm-navy-600); padding:16px; }
  .cm-fact:first-child{ border-top:0; }
  .cm-trust{ gap:20px; padding:22px 24px; }
  .cm-logos{ gap:28px; }
  .cm-logos img{ max-height:40px; }
  .cm-inline-cta{ padding:30px 24px; }
  .cm-footer{ padding:44px 24px; }
  .cm-sticky .cm-sticky-txt{ display:none; }
  .cm-faq summary{ font-size:20px; }
}

/* Hit-Targets */
@media (max-width:781px){
  .cm-sec .wp-block-button__link,.cm-dark .wp-block-button__link,
  .cm-hero .wp-block-button__link,a.cm-btn{ min-height:44px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   15 · LANDINGPAGES  (die 22 Unterseiten)
   Eigene Bausteine dieser Seiten — im selben Designsystem.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Flächen */
.cm-sec.cm-cream{ background:var(--cm-surface-sand); }
.cm-narrow{ max-width:820px; margin-inline:auto; }

/* Landingpage-Hero (mittig, ohne Bildspalte) */
.cm-hero.cm-sec,
.cm-hero:not(:has(.cm-hero-img)){ padding:96px 64px 88px; }
.cm-hero .cm-wrap{ max-width:1060px; }
.cm-hero .cm-lead{ color:var(--cm-on-dark-75); }
.cm-hero p{ color:var(--cm-on-dark-75); }
.cm-hero strong{ color:var(--cm-on-dark-100); font-weight:700; }
.cm-hero .cm-meta{ color:var(--cm-on-dark-50); }
.cm-hero .cm-check li{ color:var(--cm-on-dark-75); }
.cm-hero .cm-check li::before{ color:var(--cm-gold-400); }
.cm-hero h2,.cm-hero h3{ color:var(--cm-on-dark-100); }
.cm-hero .wp-block-image img{ border-radius:6px; box-shadow:var(--cm-shadow-lg); }
.cm-hero a:not(.wp-block-button__link){ color:var(--cm-gold-400); }

/* Dunkles CTA-Band */
.cm-cta{
  background:var(--cm-grad-navy); color:var(--cm-on-dark-75);
  font-family:var(--cm-font-body); padding:104px 64px;
}
.cm-cta h2,.cm-cta h3{
  font-family:var(--cm-font-display); font-weight:400;
  color:var(--cm-on-dark-100); font-size:46px; line-height:1.1; margin:0 0 18px;
}
.cm-cta h2 em{ font-style:italic; color:var(--cm-gold-400); }
.cm-cta .cm-eyebrow{ color:var(--cm-gold-400); }
.cm-cta p,.cm-cta .cm-lead{ color:var(--cm-on-dark-75); font-size:19px; line-height:1.6; }

/* ── NIEMALS DUNKLE SCHRIFT AUF DUNKLEM GRUND ──────────────────────────────
   Der Fliesstext erbt seine Farbe aus der Grundregel (Tinte, fuer helle
   Flaechen gedacht). Auf den dunklen Baendern wurde er dadurch fast
   unlesbar — grau auf Navy. Diese Regel steht bewusst am Ende: Sie ist das
   letzte Wort und faengt jede Sektion ab, die dunkel ist.
   Kontrast hier: #E7E4DE auf #0B1F45 = 12,4:1 (WCAG AAA verlangt 7:1). */
.cm-article-hero,
.cm-article-hero p,
.cm-article-hero .cm-lead,
.cm-dark p, .cm-dark .cm-lead,
.cm-hero p, .cm-hero .cm-lead,
.cm-cta p, .cm-cta .cm-lead,
.cm-sticky p{
  color:var(--cm-on-dark-75);
}
.cm-article-hero h1,.cm-article-hero h2,.cm-article-hero h3,
.cm-dark h1,.cm-dark h2,.cm-dark h3{
  color:var(--cm-on-dark-100);
}
.cm-article-hero strong,.cm-dark strong,.cm-cta strong,.cm-hero strong{
  color:var(--cm-on-dark-100);
}
.cm-cta .cm-check li{ color:var(--cm-on-dark-75); }
.cm-cta .cm-check li::before{ color:var(--cm-gold-400); }
.cm-cta a:not(.wp-block-button__link){ color:var(--cm-gold-400); }
.cm-cta .cm-rule{ margin-inline:auto; }

/* SEKUNDÄRE BUTTONS.
   Dein Design kennt auf hellem Grund KEINE Umriss-Buttons — die sahen aus wie
   das alte Theme. Die Sprache ist:
       primär   = Gold gefüllt, Navy-Text
       sekundär = Navy gefüllt, Creme-Text
       Umriss   = nur auf dunklem Grund
   Also werden alle .cm-ghost auf hellem Grund zu Navy-Buttons. */
.cm-ghost .wp-block-button__link{
  background:var(--cm-navy-800); border:1px solid var(--cm-navy-800);
  color:var(--cm-on-dark-100);
}
.cm-ghost .wp-block-button__link:hover{
  background:var(--cm-navy-700); border-color:var(--cm-navy-700);
  color:var(--cm-on-dark-100);
}
.cm-hero .cm-ghost .wp-block-button__link,
.cm-cta .cm-ghost .wp-block-button__link,
.cm-dark .cm-ghost .wp-block-button__link,
.cm-gift .cm-ghost .wp-block-button__link{
  background:transparent; border:1.5px solid var(--cm-on-dark-50); color:var(--cm-on-dark-100);
}
.cm-hero .cm-ghost .wp-block-button__link:hover,
.cm-cta .cm-ghost .wp-block-button__link:hover,
.cm-dark .cm-ghost .wp-block-button__link:hover,
.cm-gift .cm-ghost .wp-block-button__link:hover{
  background:transparent; border-color:var(--cm-gold-400); color:var(--cm-gold-400);
}

/* Karten-Raster der Landingpages.
   Bewusst CSS-Grid statt Flex: Gutenberg-Spalten teilen die Breite gleichmäßig
   auf — bei fünf Kacheln wären das 200 px pro Karte. Mit auto-fit brechen sie
   sauber auf drei pro Reihe um, egal ob es 3, 5 oder 6 Angebote sind. */
.cm-grid.wp-block-columns{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:28px;
  align-items:stretch;
}
.cm-grid.wp-block-columns > .wp-block-column{
  flex-basis:auto !important;
  width:auto !important;
  margin:0 !important;
}
.cm-grid + .cm-grid{ margin-top:28px; }
@media (max-width:781px){
  .cm-grid.wp-block-columns{ grid-template-columns:1fr; }
}
.cm-grid .cm-card{
  background:var(--cm-surface-card); border:1px solid var(--cm-border-light);
  border-radius:28px; overflow:hidden; box-shadow:var(--cm-shadow-sm);
  padding:0; transition:transform .28s ease, box-shadow .28s ease;
}
.cm-grid .cm-card:hover{ transform:translateY(-4px); box-shadow:var(--cm-shadow-md); }
/* Kartenbilder: unten mit 90 px abgerundet — das Signaturmotiv deines Designs.
   (Im Handoff: border-radius: 0 0 90px 90px auf dem Bildbehälter.) */
.cm-grid .cm-card > .wp-block-image{
  margin:0;
  border-radius:0 0 90px 90px;
  overflow:hidden;
  line-height:0;
}
.cm-grid .cm-card > .wp-block-image img{
  width:100%; height:190px; object-fit:cover; border-radius:0; display:block;
}
@media (max-width:781px){
  .cm-grid .cm-card > .wp-block-image{ border-radius:0 0 60px 60px; }
}
.cm-grid .cm-card > *:not(.wp-block-image){ padding-inline:30px; }
.cm-grid .cm-card > .wp-block-image + *{ padding-top:28px; }
.cm-grid .cm-card > *:first-child:not(.wp-block-image){ padding-top:34px; }
.cm-grid .cm-card > *:last-child{ padding-bottom:34px; }
.cm-grid .cm-card h3{ font-size:24px; margin:0 0 12px; font-weight:500; }
.cm-grid .cm-card p{ font-size:16px; line-height:1.7; margin:0 0 18px; }
/* Karten-Buttons: Navy gefüllt, nicht Umriss (siehe Button-Sprache oben) */
.cm-grid .cm-card .wp-block-button__link{
  background:var(--cm-navy-800); border:1px solid var(--cm-navy-800);
  color:var(--cm-on-dark-100);
  padding:13px 26px; font-size:12px;
}
.cm-grid .cm-card .wp-block-button__link:hover{
  background:var(--cm-gold-500); border-color:var(--cm-gold-500); color:var(--cm-navy-900);
}
/* Textkarte ohne Bild — Goldstrich oben */
.cm-card.cm-dot h3::before{
  content:""; display:block; width:32px; height:2px;
  background:var(--cm-gold-500); margin:0 0 16px;
}

/* Zitat-Karten der Landingpages.
   ACHTUNG: Diese Regel traf vorher JEDEN Absatz der Karte — auch die
   Namenszeile und die Sterne. Die Namen wurden dadurch zu großer kursiver
   Serifenschrift in Versalien. Der :not()-Ausschluss ist entscheidend, weil
   `.cm-quotes .cm-quote > p` spezifischer ist als `.cm-quote .cm-cite`. */
.cm-quotes .cm-quote > p:not(.cm-cite):not(.cm-stars):not(.cm-role){
  font-family:var(--cm-font-display); font-size:20px; line-height:1.55;
  font-style:italic; color:var(--cm-ink-700); margin:0 0 20px;
}
.cm-quotes .cm-quote > p.cm-cite,
.cm-quote .cm-cite{
  margin:0; font-family:var(--cm-font-body); font-style:normal;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cm-gold-600); line-height:1.5;
}
.cm-quotes .cm-quote > p.cm-stars{
  font-family:var(--cm-font-body); font-style:normal; font-size:12px;
  color:var(--cm-gold-500); letter-spacing:.18em; margin:0 0 14px;
}
.cm-vid-body .cm-cite{
  font-family:var(--cm-font-display); font-size:22px; font-weight:500;
  letter-spacing:0; text-transform:none; color:var(--cm-ink-900);
}

/* Termin-Liste der Landingpages */
.cm-datelist{ display:grid; gap:12px; }
.cm-dateitem{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  background:var(--cm-surface-card); border:1px solid var(--cm-border-light);
  border-radius:14px; padding:22px 28px; transition:.25s;
}
.cm-dateitem:hover{ border-color:var(--cm-gold-500); transform:translateX(3px); }
.cm-dateitem.cm-next{ border:2px solid var(--cm-gold-500); }
.cm-dateitem-when{
  font-family:var(--cm-font-display); font-weight:500; font-size:22px;
  color:var(--cm-ink-900); min-width:170px;
}
.cm-dateitem-what{ color:var(--cm-ink-600); font-size:15px; flex:1; }
.cm-dateitem-price{
  font-family:var(--cm-font-display); font-size:22px; font-weight:500;
  color:var(--cm-gold-600);
}
.cm-dateitem a{
  background:var(--cm-gold-500); color:var(--cm-navy-900); text-decoration:none;
  padding:12px 24px; border-radius:2px;
  font-family:var(--cm-font-body); font-weight:700; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  transition:background .24s;
}
.cm-dateitem a:hover{ background:var(--cm-gold-400); }
.cm-dateitem .cm-badge{
  background:var(--cm-navy-800); color:var(--cm-gold-400);
  font-size:10px; padding:5px 12px; margin:0;
}

@media (max-width:781px){
  .cm-cta{ padding:64px 24px; }
  .cm-cta h2{ font-size:32px; }
  .cm-hero.cm-sec,.cm-hero:not(:has(.cm-hero-img)){ padding:64px 24px 56px; }
  .cm-dateitem{ padding:20px 22px; }
  .cm-dateitem-when{ min-width:100%; }
  .cm-grid.wp-block-columns{ gap:24px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   RASTER DUERFEN DIE GANZE BUEHNE NUTZEN
   Das Theme sperrt Inhalte auf 720 px — sinnvoll fuer Fliesstext, falsch fuer
   Raster: Sieben Module passen dann nur zweispaltig. Die Buehne (cm-wrap) ist
   1060 px breit, also drei Spalten. Diese Regel steht am Ende und ist damit
   das letzte Wort.
   ───────────────────────────────────────────────────────────────────────────── */
.cm-steps.wp-block-columns,
.cm-quotes.wp-block-columns,
.cm-grid.wp-block-columns,
.cm-cards.wp-block-columns{
  max-width:none !important;
  width:100% !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILES MENUE
   Der Fehler: Die Links im Kopf sind weiss — richtig, denn der Kopf ist Navy.
   Das Overlay-Menue von WordPress kommt aber mit WEISSEM Hintergrund. Damit
   standen weisse Links auf weissem Grund: die Navigation war unsichtbar.
   Loesung: Das Overlay bekommt denselben Navy-Grund wie der Kopf. Dann stimmt
   die Farblogik ueberall — und es sieht aus wie aus einem Guss.
   Kontrast: #FFFFFF auf #050F26 = 18,9:1.
   ───────────────────────────────────────────────────────────────────────────── */
.wp-block-navigation__responsive-container.is-menu-open{
  background-color:var(--cm-navy-900) !important;
  color:var(--cm-on-dark-100) !important;
  padding:26px 24px 40px !important;
}
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon{
  color:var(--cm-on-dark-100) !important;
  font-family:var(--cm-font-body);
  font-size:17px !important;
  font-weight:400;
  letter-spacing:.03em;
  text-transform:none !important;
  opacity:1;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  gap:4px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
  border-bottom:1px solid rgba(255,255,255,.10);
  padding:4px 0;
  width:100%;
}
/* Untermenues sind im Overlay ausgeklappt — sie brauchen keinen eigenen Kasten. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{
  background:transparent !important;
  border:0 !important;
  padding-left:14px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a{
  font-size:15px !important;
  color:var(--cm-on-dark-75) !important;
}
/* Schliessen-Kreuz und Burger: Gold auf Navy, damit man sie ueberhaupt sieht. */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open{
  color:var(--cm-gold-400) !important;
}
.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-open svg{
  fill:currentColor;
  width:26px; height:26px;
}

/* Die Schriftgroesse im Overlay kam aus einer Media-Query des Themes. Regeln in
   Media-Queries schlagen gleichrangige Regeln ausserhalb — also muss meine
   Korrektur ebenfalls in einer Media-Query stehen. Sonst gewinnt das Theme,
   und man sucht den Fehler in der Spezifitaet, wo keiner ist.
   12 px sind auf dem Handy zu klein: Apple und Google empfehlen mindestens
   44 x 44 px Tippflaeche. */
@media (max-width:781px){
  .wp-block-navigation__responsive-container.is-menu-open a,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
    font-size:17px !important;
    line-height:1.5 !important;
    padding:11px 0 !important;
    min-height:44px;
    display:flex;
    align-items:center;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a{
    font-size:15px !important;
    min-height:40px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ZWEI KORREKTUREN AM HERO
   ───────────────────────────────────────────────────────────────────────────── */

/* (1) Die Vertrauensleiste lief nicht ueber die volle Breite: Sie sitzt in einem
   Block, dem das Theme 24 px Innenabstand gibt. max-width:none hilft dagegen
   nicht — der Platz ist schon weg, bevor die Leiste beginnt. Sie muss aus dem
   Abstand herauswachsen. */
.cm-trust{
  margin-left:calc(-1 * var(--wp--style--root--padding-left, 24px)) !important;
  margin-right:calc(-1 * var(--wp--style--root--padding-right, 24px)) !important;
  width:auto !important;
  max-width:none !important;
}

/* (2) Der Hero war 605 px hoch — die Hoehe kam nicht aus dem Bild, sondern aus
   dem Innenabstand der Textspalte (96 px oben und unten). Das Bild wuchs nur
   mit. Weniger Luft im Text = ruhigeres Bild. */
.cm-hero .cm-hero-text{
  padding:72px 56px 72px 64px;
}
.cm-hero .cm-hero-img{
  min-height:clamp(440px, 27vw, 560px);
}
.cm-hero h1{ font-size:58px; }
@media (max-width:900px){
  .cm-hero h1{ font-size:40px; }
  .cm-trust{ margin-left:0 !important; margin-right:0 !important; }
}

/* Nachtrag: width:auto reichte nicht — eine fruehere Regel setzt width:100%,
   und 100 % meint die Breite OHNE den Innenabstand. Die Leiste muss den
   Abstand auf beiden Seiten zusaetzlich einnehmen. Also ausrechnen statt hoffen. */
.cm-trust{
  width:calc(100% + var(--wp--style--root--padding-left, 24px) + var(--wp--style--root--padding-right, 24px)) !important;
}
@media (max-width:900px){
  .cm-trust{ width:100% !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   2.1.0 · Fixes 14.07.2026
   1) Vertrauensleiste volle Breite  2) Kartenbilder (verlinkte Bilder)
   3) Hero kompakter  4) Mobile Navigation
   ═══════════════════════════════════════════════════════════════════ */

/* 1) Vertrauensleiste: der Container (.entry-content) hat KEIN Padding —
      die früheren Negativ-Margins schoben die Leiste 24px nach links und
      ließen rechts 72px frei. margin 0 + width 100% = exakt bündig. */
.cm-trust{
  margin-left:0 !important;
  margin-right:0 !important;
  width:100% !important;
  max-width:none !important;
}

/* 2) Kartenbilder: der Link um das Bild ist inline-block und schrumpft
      auf die natürliche Bildbreite (schmaler Streifen). Als Block füllt
      das Bild die Karte, object-fit:cover greift wieder. */
.cm-card .wp-block-image a,
.cm-grid .cm-card > .wp-block-image a,
.cm-card .cm-card-img a{
  display:block;
  width:100%;
  height:100%;
}

/* 3) Hero: Bildspalte flacher, Textspalte weniger Luft. */
.cm-hero .cm-hero-img{ min-height:clamp(380px, 24vw, 480px); }
.cm-hero .cm-hero-text{ padding:56px 56px 56px 64px; }

/* 4) Mobile Navigation */
/* 4a) Overlay über alles legen (Jetpack-Icons kollidierten mit dem X) */
.wp-block-navigation__responsive-container.is-menu-open{
  z-index:99999 !important;
  padding:76px 24px 40px !important;
}
.wp-block-navigation__responsive-container-close{
  top:22px !important;
  right:18px !important;
}
/* 4b) Linksbündig statt flex-end (Ursache der riesigen Einrückung) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  align-items:flex-start !important;
  gap:0 !important;
}
/* 4c) Oberpunkte als goldene Abschnitts-Überschriften, kompakt */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item{
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:8px 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content{
  color:var(--cm-gold-400) !important;
  font-size:13px !important;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  min-height:40px !important;
}
/* 4d) Untermenü: volle Breite, dezente Linie, gut tippbar */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{
  width:100% !important;
  margin:0 !important;
  padding-left:12px !important;
  border-left:1px solid rgba(255,255,255,.14) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a{
  font-size:16px !important;
  min-height:42px !important;
  color:var(--cm-on-dark-100) !important;
}
/* 4e) Kopfzeile schmal: Erstgespräch-Button lief rechts aus dem Bild */
@media (max-width:600px){
  .cm-nav .wp-block-button__link,
  header .wp-block-button__link,
  .wp-block-template-part .wp-block-button__link{
    padding:10px 14px !important;
    font-size:11px !important;
    letter-spacing:.08em !important;
    white-space:nowrap;
  }
}

/* 2.1.0b · Vertrauensleiste: Theme-Regel '.wp-block-post-content.alignfull > :where(...)'
   (Spezifität 0,2,0) zieht 2x block-gap ab — hier mit 0,3,0 übertrumpfen: */
.wp-block-post-content.alignfull > .cm-trust,
.wp-block-post-content.alignfull > .cm-facts,
.wp-block-post-content.alignfull > .cm-newsletter,
.entry-content > .cm-trust{
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  max-width:none !important;
}

/* 2.1.2 · Mobile Kopfzeile: Erstgespräch-Button (a.cm-btn, nicht wp-block-button!)
   lief 4px über den rechten Rand; Social-Leiste kompakter, eine Zeile. */
@media (max-width:600px){
  a.cm-btn{ padding:10px 12px !important; font-size:11px !important; letter-spacing:.06em !important; white-space:nowrap; }
  .cm-nav-right{ padding-right:10px; }
  .cm-topbar-social{ gap:10px !important; }
  .cm-topbar a{ font-size:11px !important; }
}

/* ═══ 2.1.3 · Native Pattern-Blöcke: Element-Anpassungen ═══
   Die Patterns ②⑤⑦⑧⑩⑫⑯⑰⑱ sind jetzt native Gutenberg-Blöcke.
   Wo vorher span/div stand, stehen nun p/group — hier die Angleichungen. */
.cm-trust p{margin:0}
.cm-trust p:not(.cm-trust-label){font-family:var(--cm-font-display);font-size:17px;color:var(--cm-on-dark-75);white-space:nowrap;text-transform:none !important;letter-spacing:0 !important}
@media (max-width:1100px){ .cm-trust p:not(.cm-trust-label){font-size:15px} }
.cm-inset .wp-block-list{margin:0}
.cm-vid .wp-block-video{margin:0}
.cm-vid .wp-block-video video{display:block;width:100%}
.cm-date-day p,.cm-date-body p{margin:0}
p.cm-pill{display:inline-block}
.cm-sticky p{margin:0}
.cm-more{margin:8px 0 0}
.cm-more a{color:var(--cm-gold-600);font-family:var(--cm-font-body);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.cm-more a:hover{color:var(--cm-gold-500)}
.cm-logos .wp-block-image{margin:0}

/* 2.1.4 · Trust-Leiste: Theme-Flow-Abstand zwischen den p-Einträgen neutralisieren */
.cm-trust > *{margin:0 !important}

/* ═══ 2.1.5 · Blog-Übersicht /wissen/: Query-Loop-Karten ═══ */
.cm-blog{max-width:none}
.cm-blog .cm-post-card{background:var(--cm-surface-card);border:1px solid var(--cm-border-light);border-radius:28px;overflow:hidden;box-shadow:var(--cm-shadow-sm);transition:transform .28s,box-shadow .28s;height:100%}
.cm-blog .cm-post-card:hover{transform:translateY(-4px);box-shadow:var(--cm-shadow-md)}
.cm-blog .cm-post-card .wp-block-post-featured-image{margin:0;border-radius:0 0 90px 90px;overflow:hidden;line-height:0}
.cm-blog .cm-post-card .wp-block-post-featured-image img{width:100%;height:190px;object-fit:cover;display:block}
.cm-blog .cm-post-card h3{font-size:22px;line-height:1.3;margin:22px 26px 8px;font-weight:500}
.cm-blog .cm-post-card h3 a{color:var(--cm-navy-800);text-decoration:none}
.cm-blog .cm-post-card h3 a:hover{color:var(--cm-gold-600)}
.cm-blog .cm-post-card .wp-block-post-date{display:block;margin:0 26px 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cm-ink-500,#8a8578)}
.cm-blog .cm-post-card .wp-block-post-excerpt{margin:0 26px 26px;font-size:15px;line-height:1.7;color:var(--cm-ink-600)}
.cm-blog .cm-post-card .wp-block-post-excerpt p{margin:0}
.cm-blog .cm-post-card .wp-block-post-excerpt__more-link{color:var(--cm-gold-600);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;display:inline-block;margin-top:8px}
.cm-blog .wp-block-query-pagination{margin-top:44px;font-family:var(--cm-font-body);justify-content:center}
.cm-blog .wp-block-query-pagination a,.cm-blog .wp-block-query-pagination .page-numbers{color:var(--cm-navy-800);text-decoration:none;padding:6px 10px}
.cm-blog .wp-block-query-pagination .current{color:var(--cm-gold-600);font-weight:700}
/* Werkzeugzeile: Suche + Kategorien */
.cm-blog-tools{margin-bottom:36px}
.cm-blog-tools .wp-block-search__input{border:1px solid var(--cm-border-light);border-radius:8px;padding:10px 14px;font-size:15px;font-family:var(--cm-font-body)}
.cm-blog-tools .wp-block-search__button{background:var(--cm-navy-800);color:var(--cm-on-dark-100);border:0;border-radius:8px;padding:10px 18px;font-size:13px;letter-spacing:.06em}
.cm-blog-tools select{border:1px solid var(--cm-border-light);border-radius:8px;padding:10px 14px;font-size:15px;background:var(--cm-surface-card);font-family:var(--cm-font-body)}

/* 2.1.6 · ActiveCampaign-Formulare: kein Oliv, Marken-Stil */
._form, ._form * { font-family: var(--cm-font-body) !important; }
._form input[type="submit"], ._form button[type="submit"], ._form ._submit {
  background: var(--cm-navy-800) !important;
  border: 1px solid var(--cm-navy-800) !important;
  color: var(--cm-on-dark-100) !important;
  border-radius: 8px !important;
  padding: 13px 26px !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  cursor: pointer;
}
._form input[type="submit"]:hover, ._form button[type="submit"]:hover, ._form ._submit:hover {
  background: var(--cm-gold-500) !important;
  border-color: var(--cm-gold-500) !important;
  color: var(--cm-navy-900) !important;
}
._form input[type="text"], ._form input[type="email"], ._form input[type="tel"], ._form textarea, ._form select {
  border: 1px solid var(--cm-border-light) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  background: var(--cm-surface-card) !important;
}

/* 2.1.7 · Carolins Porträt im Hero nie anschneiden (contain statt cover) */
.cm-hero .cm-hero-img img[src*="carolin-mallmann-life-coaching"],
.cm-hero img[src*="carolin-mallmann-life-coaching"]{
  object-fit:contain !important;
  object-position:50% 100% !important;
}

/* 2.1.8 · Selbstliebe-Formular (AC #25) ans Design anpassen — body-Prefix schlägt die Inline-Styles des Embeds */
body #_form_25_{background:transparent !important;border:0 !important;max-width:520px !important;margin:10px auto 0 !important;padding:0 !important;font-family:var(--cm-font-body) !important}
body #_form_25_ input[type="text"],body #_form_25_ input[type="email"]{background:var(--cm-surface-card) !important;border:1px solid var(--cm-border-light) !important;border-radius:8px !important;padding:13px 16px !important;font-size:15px !important;color:var(--cm-ink-600) !important}
body #_form_25_ ._submit{background:var(--cm-navy-800) !important;border:1px solid var(--cm-navy-800) !important;color:var(--cm-on-dark-100) !important;border-radius:8px !important;padding:14px 26px !important;font-family:var(--cm-font-body) !important;font-size:13px !important;letter-spacing:.08em !important;text-transform:uppercase !important;width:100%}
body #_form_25_ ._submit:hover{background:var(--cm-gold-500) !important;border-color:var(--cm-gold-500) !important;color:var(--cm-navy-900) !important}
body #_form_25_ ._html-code p, body #_form_25_ ._html-code a{color:var(--cm-ink-500,#6b6657) !important;font-family:var(--cm-font-body) !important}
body #_form_25_ ._form-branding{display:none}

/* 2.1.8 · Selbstliebe-Formular (AC #25) ans Design anpassen — body-Prefix schlägt die Inline-Styles des Embeds */
body #_form_25_{background:transparent !important;border:0 !important;max-width:520px !important;margin:10px auto 0 !important;padding:0 !important;font-family:var(--cm-font-body) !important}
body #_form_25_ input[type="text"],body #_form_25_ input[type="email"]{background:var(--cm-surface-card) !important;border:1px solid var(--cm-border-light) !important;border-radius:8px !important;padding:13px 16px !important;font-size:15px !important;color:var(--cm-ink-600) !important}
body #_form_25_ ._submit{background:var(--cm-navy-800) !important;border:1px solid var(--cm-navy-800) !important;color:var(--cm-on-dark-100) !important;border-radius:8px !important;padding:14px 26px !important;font-family:var(--cm-font-body) !important;font-size:13px !important;letter-spacing:.08em !important;text-transform:uppercase !important;width:100%}
body #_form_25_ ._submit:hover{background:var(--cm-gold-500) !important;border-color:var(--cm-gold-500) !important;color:var(--cm-navy-900) !important}
body #_form_25_ ._html-code p, body #_form_25_ ._html-code a{color:var(--cm-ink-500,#6b6657) !important;font-family:var(--cm-font-body) !important}
body #_form_25_ ._form-branding{display:none}

/* ═══ 2.1.9 · Blogbeitrags-Template (single-Part) ═══ */
.cm-article-hero .wp-block-post-title{color:var(--cm-on-dark-100);font-family:var(--cm-font-display);font-weight:400;font-size:46px;line-height:1.15;margin:10px 0 14px}
.cm-article-hero .cm-post-cats{margin:0}
.cm-article-hero .cm-post-cats a{color:var(--cm-gold-400);font-family:var(--cm-font-body);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;text-decoration:none}
.cm-article-hero .wp-block-post-date{color:var(--cm-on-dark-50);font-family:var(--cm-font-body);font-size:13px;letter-spacing:.06em}
.cm-article .cm-article-img{margin:0 0 40px}
.cm-article .cm-article-img img{width:100%;height:auto;border-radius:12px;box-shadow:var(--cm-shadow-md)}
.cm-article .wp-block-post-content > *:first-child{margin-top:0}

/* ═══ 2.2.0 · AC-Formulare generisch (auch dynamisch geladene) + dezente Breadcrumbs ═══ */
body ._form{background:transparent !important;border:0 !important;max-width:520px !important;margin:10px auto 0 !important;padding:0 !important;font-family:var(--cm-font-body) !important}
body ._form input[type="text"],body ._form input[type="email"],body ._form input[type="tel"]{background:var(--cm-surface-card) !important;border:1px solid var(--cm-border-light) !important;border-radius:8px !important;padding:13px 16px !important;font-size:15px !important;color:var(--cm-ink-600) !important;font-family:var(--cm-font-body) !important}
body ._form ._submit,body ._form button[type="submit"]{background:var(--cm-navy-800) !important;border:1px solid var(--cm-navy-800) !important;color:var(--cm-on-dark-100) !important;border-radius:8px !important;padding:14px 26px !important;font-family:var(--cm-font-body) !important;font-size:13px !important;letter-spacing:.08em !important;text-transform:uppercase !important;width:100%;cursor:pointer}
body ._form ._submit:hover,body ._form button[type="submit"]:hover{background:var(--cm-gold-500) !important;border-color:var(--cm-gold-500) !important;color:var(--cm-navy-900) !important}
body ._form ._form-branding{display:none !important}
body ._form ._html-code p,body ._form ._html-code a{color:var(--cm-ink-500,#6b6657) !important;font-family:var(--cm-font-body) !important}
/* Yoast-Breadcrumbs: klein und unaufdringlich, einheitlich */
.wp-block-yoast-seo-breadcrumbs,#breadcrumbs{font-family:var(--cm-font-body) !important;font-size:12.5px !important;font-weight:400 !important;letter-spacing:.04em;line-height:1.6;color:var(--cm-ink-500,#8a8578) !important;margin:18px auto 0 !important;max-width:720px;padding:0 24px}
.wp-block-yoast-seo-breadcrumbs *{font-size:12.5px !important;font-weight:400 !important}
.wp-block-yoast-seo-breadcrumbs a{color:var(--cm-navy-700,#14264F) !important;text-decoration:none}
.wp-block-yoast-seo-breadcrumbs a:hover{color:var(--cm-gold-600) !important}

/* ═══ 2.2.1 · Mobiles Menü: Untermenüs als Akkordeon (zu Beginn eingeklappt) ═══ */
.wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container{display:none !important}
.wp-block-navigation__responsive-container.is-menu-open .has-child.cm-sub-open > .wp-block-navigation__submenu-container{display:flex !important;flex-direction:column;width:100%}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child{display:flex !important;flex-wrap:wrap;align-items:center}
.wp-block-navigation__responsive-container.is-menu-open .has-child > button.wp-block-navigation__submenu-icon{display:inline-flex !important;margin-left:auto;padding:8px;background:transparent;border:0;color:var(--cm-gold-400) !important;cursor:pointer;transition:transform .2s ease}
.wp-block-navigation__responsive-container.is-menu-open .has-child.cm-sub-open > button.wp-block-navigation__submenu-icon{transform:rotate(180deg)}

/* 2.2.2 · Mobiles Menü: Label und Pfeil in einer Zeile */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content{width:auto !important;flex:1 1 auto !important}
.wp-block-navigation__responsive-container.is-menu-open .has-child > button.wp-block-navigation__submenu-icon{margin-left:auto !important;flex:0 0 auto !important;width:auto !important;min-height:44px}
.wp-block-navigation__responsive-container.is-menu-open .has-child > button.wp-block-navigation__submenu-icon svg{width:16px;height:16px}

/* 2.2.3 · Logo-Bildmarke: mobil kollabierte das img auf 0px Breite — feste Größe */
header img[src*="logo-mark"], .site-header img[src*="logo-mark"]{width:34px !important;min-width:34px !important;height:auto !important;flex:0 0 34px}
@media (max-width:781px){
  header img[src*="logo-mark"], .site-header img[src*="logo-mark"]{width:28px !important;min-width:28px !important;flex:0 0 28px}
}

/* ═══ 2.2.4 · Inhaltsverzeichnis (cm-toc) + Autorenbox (cm-author) + Mobile-Feinschliff ═══ */
.cm-toc{background:var(--cm-surface-card);border:1px solid var(--cm-border-light);border-radius:14px;padding:22px 26px;margin:8px 0 36px;font-family:var(--cm-font-body)}
.cm-toc-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:12px}
.cm-toc-titel{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cm-gold-600)}
.cm-toc-zeit{font-size:12.5px;color:var(--cm-ink-500,#8a8578)}
.cm-toc-liste{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:8px}
.cm-toc-liste li{font-size:15px;line-height:1.5}
.cm-toc-liste li::marker{color:var(--cm-gold-600);font-weight:700}
.cm-toc-liste a{color:var(--cm-navy-800);text-decoration:none}
.cm-toc-liste a:hover{color:var(--cm-gold-600)}
.cm-author{margin:56px 0 0}
.cm-author-inner{display:flex;gap:24px;align-items:flex-start;background:var(--cm-surface-card);border:1px solid var(--cm-border-light);border-radius:16px;padding:28px 30px}
.cm-author-img{width:96px !important;height:96px !important;min-width:96px;border-radius:50%;object-fit:cover;object-position:50% 15%}
.cm-author-eyebrow{display:block;font-family:var(--cm-font-body);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cm-gold-600);margin-bottom:4px}
.cm-author-name{font-family:var(--cm-font-display);font-size:24px;color:var(--cm-navy-900);margin:0 0 2px}
.cm-author-role{font-size:13px;letter-spacing:.04em;color:var(--cm-ink-500,#8a8578);margin:0 0 12px}
.cm-author-bio{font-size:15px;line-height:1.7;color:var(--cm-ink-600);margin:0 0 14px}
.cm-author-creds{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:5px}
.cm-author-creds li{font-size:13.5px;color:var(--cm-ink-600);padding-left:20px;position:relative}
.cm-author-creds li::before{content:"✦";position:absolute;left:0;color:var(--cm-gold-500);font-size:11px}
.cm-author-link{margin:0}
.cm-author-link a{color:var(--cm-gold-600);font-family:var(--cm-font-body);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.cm-author-link a:hover{color:var(--cm-gold-500)}
@media (max-width:600px){
  .cm-author-inner{flex-direction:column;align-items:center;text-align:center;padding:26px 20px}
  .cm-author-creds li{text-align:left}
}
/* Mobile Kopfzeile: alles in eine Zeile bei sehr schmalen Screens */
@media (max-width:480px){
  header .wp-block-site-title a, .site-header .wp-block-site-title a{font-size:16px !important;white-space:nowrap}
  a.cm-btn{padding:8px 10px !important;font-size:10px !important;letter-spacing:.04em !important}
}
/* Mobiles Menü: Oberpunkt-Zeile nowrap, offen wrappt fürs Untermenü */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child{flex-wrap:nowrap !important}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child.cm-sub-open{flex-wrap:wrap !important}
.wp-block-navigation__responsive-container.is-menu-open .has-child > button.wp-block-navigation__submenu-icon svg{display:block;width:14px;height:14px}

/* ═══ 2.2.5 · Krafttier-Finder (cm-animals) ═══ */
.cm-animals{margin:36px 0 0}
.cm-animals-tools{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.cm-animals-suche{flex:1;border:1px solid var(--cm-border-light);border-radius:10px;padding:13px 18px;font-size:15px;font-family:var(--cm-font-body);background:var(--cm-surface-card);color:var(--cm-ink-600)}
.cm-animals-count{font-size:12.5px;color:var(--cm-ink-500,#8a8578);white-space:nowrap}
.cm-animals-az{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:26px}
.cm-az-btn{border:1px solid var(--cm-border-light);background:var(--cm-surface-card);color:var(--cm-navy-800);font-family:var(--cm-font-body);font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:8px;cursor:pointer}
.cm-az-btn:hover{border-color:var(--cm-gold-500);color:var(--cm-gold-600)}
.cm-az-btn.is-active{background:var(--cm-navy-800);border-color:var(--cm-navy-800);color:var(--cm-on-dark-100)}
.cm-animals-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.cm-animal{display:block;background:var(--cm-surface-card);border:1px solid var(--cm-border-light);border-radius:14px;overflow:hidden;text-decoration:none;box-shadow:var(--cm-shadow-sm);transition:transform .22s,box-shadow .22s}
.cm-animal:hover{transform:translateY(-3px);box-shadow:var(--cm-shadow-md)}
.cm-animal-img{display:block;line-height:0}
.cm-animal-img img{width:100%;height:110px;object-fit:cover;display:block}
.cm-animal-name{display:block;text-align:center;font-family:var(--cm-font-body);font-size:13.5px;font-weight:600;color:var(--cm-navy-800);padding:9px 6px}
.cm-animals-leer{margin-top:20px;font-size:15px;color:var(--cm-ink-500,#8a8578);text-align:center}
@media (max-width:600px){ .cm-animals-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))} .cm-animals-tools{flex-direction:column;align-items:stretch} .cm-animals-count{text-align:right} }
/* Breadcrumbs: letzte Krume nicht fett */
.wp-block-yoast-seo-breadcrumbs .breadcrumb_last, .wp-block-yoast-seo-breadcrumbs strong{font-weight:400 !important}

/* ═══ 2.2.6 · Mobil: Menü kompakt (eine Zeile pro Punkt, weniger Abstände) + Texte volle Breite ═══ */
/* Menü: Label und Pfeil erzwungen nebeneinander */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child{flex-direction:row !important;align-items:center !important}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child.cm-sub-open{flex-wrap:wrap !important}
.wp-block-navigation__responsive-container.is-menu-open .has-child.cm-sub-open > .wp-block-navigation__submenu-container{flex-basis:100%}
/* Kompakter: weniger Luft */
.wp-block-navigation__responsive-container.is-menu-open{padding:60px 22px 32px !important}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item{padding:2px 0 !important}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content{min-height:38px !important;font-size:12px !important}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a{min-height:38px !important;font-size:15px !important}
.wp-block-navigation__responsive-container.is-menu-open .has-child > button.wp-block-navigation__submenu-icon{min-height:38px !important;padding:4px 6px !important}
/* Startseiten-Texte mobil: volle Breite (späte Desktop-Regeln hatten die frühen @media-Overrides ausgehebelt — Falle 2) */
@media (max-width:781px){
  .cm-hero .cm-hero-text{padding:56px 24px 48px !important}
  .cm-hero .cm-wrap, .cm-sec .cm-narrow, .cm-wrap.cm-narrow, .cm-narrow{max-width:100% !important}
  .cm-sec, .cm-dark, .cm-mist{padding-left:24px !important;padding-right:24px !important}
}

/* === 2.2.7: Artikel-Buttons vereinheitlicht + Breadcrumb dezent === */
.wp-block-post-content .wp-block-button__link{background:#c4a96a !important;background-image:none !important;color:#050f26 !important;border:none !important;border-radius:2px !important;padding:12px 22px !important;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:13px}
.wp-block-post-content .wp-block-button__link:hover{background:#b3985c !important;color:#050f26 !important}
.wp-block-post-content .wp-block-buttons{gap:12px}
.yoast-breadcrumbs{font-size:12.5px !important;font-weight:400 !important;line-height:1.5;opacity:.72;letter-spacing:.02em}
.yoast-breadcrumbs a{font-weight:400 !important;text-decoration:none}
.yoast-breadcrumbs .breadcrumb_last,.yoast-breadcrumbs strong,.yoast-breadcrumbs span{font-weight:400 !important;font-size:12.5px !important}
@media(max-width:781px){.yoast-breadcrumbs{font-size:12px !important}}

/* === 2.2.8: Blogkarten-Innenabstand + Breadcrumb-Feinschliff + Glossar + Vollbild-Hero + Galerie === */
.cm-post-card{padding-bottom:22px !important}
.cm-post-card > :not(.wp-block-post-featured-image){margin-left:22px !important;margin-right:22px !important}
.cm-post-card .wp-block-post-title{margin-top:18px !important}
.yoast-breadcrumbs,.yoast-breadcrumbs a{color:#8a8a8a !important}
.yoast-breadcrumbs .breadcrumb_last{color:#5c5c5c}
.single-encyclopedia .wp-block-post-date{display:none !important}
.cm-vollhero{position:relative}
.cm-vollhero .wp-block-cover__inner-container{max-width:1140px;margin:0 auto;padding:110px 24px 90px}
.cm-vollhero .cm-kicker{color:#c4a96a;letter-spacing:.22em;text-transform:uppercase;font-size:12px;font-weight:600}
.cm-vollhero h1{color:#fff;font-size:clamp(40px,5.6vw,64px);line-height:1.08;max-width:780px}
.cm-vollhero h1 em{color:#c4a96a}
.cm-vollhero .cm-vollhero-lead{color:rgba(255,255,255,.88);max-width:640px;font-size:17px;line-height:1.65}
.cm-vollhero .cm-hero-meta{color:rgba(255,255,255,.72);font-size:13.5px}
@media(max-width:781px){.cm-vollhero .wp-block-cover__inner-container{padding:72px 24px 56px}.cm-vollhero h1{font-size:clamp(34px,9vw,44px)}}
.cm-galerie figure{margin:0}
.cm-galerie img{border-radius:14px;aspect-ratio:4/3;object-fit:cover;width:100%;height:100%}

/* === 2.2.9: Vollbild-Hero randlos === */
.wp-block-cover.cm-vollhero{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-top:0 !important}

/* === 2.3.0: Breadcrumb-Links klein (Theme-a-Regel schlug Container) + Enzyklopädie-Buchstabenleiste nicht auf Blog-Kategorien === */
.yoast-breadcrumbs a,.yoast-breadcrumbs span a{font-size:12.5px !important;font-weight:400 !important}
.category .encyclopedia-prefix-filters{display:none !important}

/* === 2.3.2: Artikel-Header als Cover (One-Shamanism-Stil) === */
.wp-block-cover.cm-article-cover{border-radius:18px;overflow:hidden;max-width:1140px;margin:28px auto 36px}
.cm-article-cover .wp-block-cover__inner-container{padding:56px 48px}
.cm-article-cover h1{color:#fff;font-size:clamp(30px,3.6vw,44px);line-height:1.15;max-width:640px}
.cm-article-cover .cm-post-cats,.cm-article-cover .cm-post-cats a{color:#fff !important;font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.cm-article-cover .cm-post-cats a{background:rgba(255,255,255,.16);padding:5px 14px;border-radius:999px;display:inline-block;margin:0 6px 6px 0}
.cm-article-cover .cm-meta{color:rgba(255,255,255,.75);font-size:13px}
@media(max-width:781px){.cm-article-cover{margin:12px 16px 24px;border-radius:14px}.cm-article-cover .wp-block-cover__inner-container{padding:36px 22px}}

/* 2.3.3: Artikel-Cover-Titel in Serif wie restliche Headings */
.cm-article-cover h1{font-family:"Cormorant Garamond",Georgia,serif !important;font-weight:600}

/* === 2.3.4: kein Seitwaerts-Ueberlauf (Header wirkt sonst schmaler) + mobile Luecke unter dem Header zu === */
html,body{overflow-x:clip}
@media(max-width:781px){
  .wp-site-blocks{gap:0 !important}
  .wp-site-blocks > main{margin-top:0 !important}
  .cm-hero,.wp-block-cover.cm-vollhero{margin-top:0 !important}
  .cm-nav-right{padding-right:0 !important;max-width:100%}
}


/* 2.3.8: Artikel-Cover 16:9 wie One Shamanism */
@media (min-width: 782px){.wp-block-cover.cm-article-cover{min-height:0 !important;aspect-ratio:16 / 9 !important}}
@media (max-width: 781px){.wp-block-cover.cm-article-cover{min-height:360px !important}}

/* === 2.3.9: "Weitere Krafttiere" als Chip-Raster === */
ul.cm-weitere{display:grid !important;grid-template-columns:repeat(3,1fr);gap:10px 16px;padding:0;list-style:none;max-width:920px;margin:10px auto 0}
ul.cm-weitere li{margin:0}
ul.cm-weitere li a{display:block;background:#fff;border:1px solid rgba(196,169,106,.5);border-radius:10px;padding:10px 14px;font-size:13.5px;line-height:1.45;color:#050f26 !important;text-decoration:none}
ul.cm-weitere li a:hover{background:#c4a96a;border-color:#c4a96a;color:#050f26 !important}
@media(max-width:781px){ul.cm-weitere{grid-template-columns:1fr 1fr}}

/* === 2.4.0: Vollbild-Hero mobil wirklich randlos === */
@media(max-width:781px){.wp-block-cover.cm-vollhero{width:100vw !important;max-width:100vw !important;margin-left:calc(50% - 50vw) !important;margin-right:0 !important;border-radius:0 !important}}

/* === 2.4.1: Alt-Design-Einschuebe in Artikeln vereinheitlicht === */
.wp-block-post-content .has-secondary-background-color{background:#faf7f2 !important;border:1px solid rgba(196,169,106,.35);border-radius:16px;padding:28px 24px !important}
.wp-block-post-content h2.is-style-ona-alt-font,.wp-block-post-content h3.is-style-ona-alt-font{font-family:"Cormorant Garamond",Georgia,serif !important}
.wp-block-post-content .has-secondary-background-color > h2:first-child:not(.is-style-ona-alt-font){font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:#8a7743;margin-bottom:2px;font-family:Montserrat,sans-serif}

/* === 2.4.2: Artikel-Cover mobil direkt unter der Navi === */
@media(max-width:781px){.wp-block-cover.cm-article-cover{margin-top:0 !important;border-radius:0 0 14px 14px !important}}

/* === 2.4.3: Zitate im Artikel === */
.wp-block-post-content blockquote{position:relative;border-left:3px solid #c4a96a !important;background:transparent;margin:36px auto;padding:8px 8px 8px 30px;max-width:640px}
.wp-block-post-content blockquote::before{content:"\201E";position:absolute;left:-14px;top:-38px;font-family:"Cormorant Garamond",Georgia,serif;font-size:96px;line-height:1;color:rgba(196,169,106,.35);pointer-events:none}
.wp-block-post-content blockquote p{font-family:"Cormorant Garamond",Georgia,serif !important;font-style:italic;font-size:22px;line-height:1.5;color:#050f26;margin:0 0 10px}
.wp-block-post-content blockquote cite,.wp-block-post-content blockquote footer,.wp-block-post-content blockquote .wp-block-quote__citation{font-family:Montserrat,sans-serif !important;font-style:normal;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#8a7743}
.wp-block-post-content blockquote cite::before{content:"— "}

/* === 2.4.4: Boxen ohne Linien, Steckbrief-Styling, Bilder in Boxen === */
.wp-block-post-content .has-secondary-background-color .wp-block-separator,.wp-block-post-content .has-secondary-background-color hr{display:none !important}
.wp-block-post-content .has-secondary-background-color > .wp-block-spacer:first-child{display:none}
.wp-block-post-content .has-secondary-background-color p strong{color:#050f26}
.wp-block-post-content .has-secondary-background-color p{margin-bottom:14px;line-height:1.6}
.wp-block-post-content .has-secondary-background-color img{max-width:100% !important;height:auto;border-radius:12px;display:block}
.wp-block-post-content .has-secondary-background-color .wp-block-column{min-width:0}

/* 2.4.5: Formular-Buttons in Artikel-Boxen gold statt AC-blau */
.wp-block-post-content .has-secondary-background-color input[type="submit"],.wp-block-post-content .has-secondary-background-color form button{background:#c4a96a !important;color:#050f26 !important;border:none !important;letter-spacing:.06em;font-weight:600}

/* 2.4.6: Krafttier-Chips - display robust erzwingen */
ul.cm-weitere li a{display:block !important;box-decoration-break:unset}
ul.cm-weitere li{break-inside:avoid}

/* 2.4.7: Chips volle Spaltenbreite */
ul.cm-weitere li{width:100% !important;max-width:100% !important;margin:0 !important}

/* === 2.4.8: Trennlinien in Artikeln aus, Formular-Buttons ueberall gold === */
.wp-block-post-content .wp-block-separator,.wp-block-post-content hr{display:none !important}
.wp-block-post-content input[type="submit"],.wp-block-post-content form button,.wp-block-post-content ._form ._submit{background:#c4a96a !important;color:#050f26 !important;border:none !important;font-weight:600;letter-spacing:.06em}
.wp-block-post-content input[type="submit"]:hover,.wp-block-post-content ._form ._submit:hover{background:#b3985c !important}

/* === 2.4.9: Heading-Border (Linie in Boxen) weg + AC-Button mit hoher Spezifitaet gold === */
.wp-block-post-content .wp-block-heading{border:none !important}
html body .wp-block-post-content ._form ._submit,html body .wp-block-post-content ._form button,html body .wp-block-post-content form input[type="submit"]{background:#c4a96a !important;background-image:none !important;color:#050f26 !important;border:none !important;font-weight:600;letter-spacing:.06em}
html body .wp-block-post-content ._form ._submit:hover{background:#b3985c !important}

/* === 2.5.0: Boxen kompakt - kein Leerraum am Kopf === */
.wp-block-post-content .has-secondary-background-color > :first-child{margin-top:0 !important}
.wp-block-post-content .has-secondary-background-color .wp-block-heading{margin-top:20px;margin-bottom:12px}
.wp-block-post-content .has-secondary-background-color > .wp-block-heading:first-child{margin-top:0 !important}


/* 2.5.2: Zitat-Wasserzeichen entfernt (ueberlappte Text), Gradient-Karten bleiben Original */
.wp-block-post-content blockquote::before{display:none !important}

/* === 2.5.3: AC-Formulare (u.a. 52-Wochen-Selbstliebe) luftig statt roh === */
html body ._form input[type="text"],html body ._form input[type="email"]{font-size:15px !important;padding:13px 16px !important;border-radius:8px !important;border:1px solid rgba(196,169,106,.55) !important;background:#fff !important;box-shadow:none !important;width:100% !important}
html body ._form ._field-wrapper{margin-bottom:10px !important}
html body ._form p,html body ._form small,html body ._form label,html body ._form ._form-label{font-size:12.5px !important;line-height:1.55 !important;letter-spacing:0 !important}
html body ._form a{color:inherit !important;text-decoration:underline}
html body ._form ._button-wrapper{margin-top:14px !important}
html body ._form ._submit{width:100%;padding:13px 18px !important;border-radius:8px !important;font-size:13px !important;letter-spacing:.08em;text-transform:uppercase}

/* === 2.5.4: Podcast-Rezensions-Screenshot im Herzvermoegen-Hero als Karte === */
img[alt="HERZvermögen – der Podcast von Carolin Mallmann"]{border-radius:14px;box-shadow:0 14px 36px rgba(5,15,38,.35);border:1px solid rgba(196,169,106,.35);background:#fff;padding:6px}

/* 2.5.5: Newsletter-Hinweiszeile */
.cm-newsletter .cm-form-note{font-size:12.5px;color:#5c5c5c;margin:12px auto 0;max-width:52ch;line-height:1.55}
.cm-newsletter .cm-form-note a{color:inherit;text-decoration:underline}

/* 2.5.6: Vollhero heller (dim 50) + Textschatten fuer Lesbarkeit */
.cm-vollhero h1,.cm-vollhero .cm-vollhero-lead,.cm-vollhero .cm-kicker,.cm-vollhero .cm-hero-meta{text-shadow:0 1px 22px rgba(5,15,38,.6)}

/* 2.5.7: Vollhero auch auf Desktop komplett randlos */
.wp-block-cover.cm-vollhero{width:100vw !important;max-width:100vw !important;margin-left:calc(50% - 50vw) !important;margin-right:0 !important}

/* 2.5.8: Orakelkarten-Foto in Spalten nicht mehr hochkant quetschen */
.wp-block-column img[src*="the-path-of-the-paws-orakelkarten"], .wp-block-column figure:has(> img[src*="the-path-of-the-paws-orakelkarten"]){height:auto !important;min-height:0 !important}
.wp-block-column img[src*="the-path-of-the-paws-orakelkarten"]{aspect-ratio:4/3;object-fit:cover;width:100% !important;border-radius:14px;margin:24px}
.wp-block-column img[src*="the-path-of-the-paws-orakelkarten"]{max-width:calc(100% - 48px)}