/* ═══════════════════════════════════════════════════════════════════════════
   Carolin Mallmann — Design Addon  ·  v1.0.0
   Ergänzt das Haupt-Plugin. Enthält NUR neue Klassen, überschreibt nichts
   Bestehendes (Ausnahme: .cm-sticky ab Tablet — siehe Baustein C).

   Inhalt
   A · cm-host          Über-mich-Box im Stil der Autorenbox
   B · cm-gal-*         Drei Galerie-Varianten
   C · cm-sticky        Schwebender Gesprächs-Button ab Tablet
   D · cm-ico-*         Highlight-Kacheln mit Linien-Icons in Gold
   E · cm-variants      Ein Angebot mit mehreren Varianten
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fallback-Tokens: greifen nur, falls das Haupt-Plugin sie nicht gesetzt hat. */
:root{
  --cm-navy-900:#050F26;
  --cm-navy-800:#091A3E;
  --cm-gold-600:#A98A4B;
  --cm-gold-500:#C4A96A;
  --cm-gold-400:#D6BE86;
  --cm-ink-900:#091A3E;
  --cm-ink-700:#3A4152;
  --cm-ink-500:#5A6070;
  --cm-sand-050:#FAFAF7;
  --cm-sand-300:#E5E1D8;
  --cm-on-dark-100:#FAFAF7;
}


/* ═══ A · ÜBER-MICH-BOX  .cm-host ══════════════════════════════════════════
   Aufbau (native Blöcke):
   wp:group .cm-host
     └ wp:columns
         ├ wp:column .cm-host-photo   → wp:image
         └ wp:column .cm-host-body    → Eyebrow, H2/H3, Text,
                                         wp:list .cm-check, Buttons
   Optik orientiert sich an der Autorenbox unter den Blogartikeln:
   ruhiger Sandkasten, Porträt weich gerundet, Gold-Leiste links.
   ────────────────────────────────────────────────────────────────────────── */

.cm-host{
  background:var(--cm-sand-050);
  border:1px solid var(--cm-sand-300);
  border-left:4px solid var(--cm-gold-500);
  border-radius:28px;
  padding:34px 38px;
  margin-block:8px;
  box-shadow:0 10px 30px rgba(9,26,62,.06);
}

/* Spaltenabstand etwas großzügiger als der Theme-Standard */
.cm-host .wp-block-columns{ gap:38px; align-items:center; }

/* ── Porträt ── */
.cm-host .cm-host-photo{ flex-basis:230px !important; flex-grow:0 !important; }

.cm-host .cm-host-photo figure,
.cm-host .cm-host-photo .wp-block-image{ margin:0; }

.cm-host .cm-host-photo img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:center 22%;
  border-radius:24px;
  box-shadow:0 8px 24px rgba(9,26,62,.14);
}

/* Runde Variante: zusätzlich .cm-host-round auf die .cm-host-Gruppe */
.cm-host.cm-host-round .cm-host-photo img{ border-radius:50%; }

/* ── Textspalte ── */
.cm-host .cm-host-body > *:first-child{ margin-top:0; }
.cm-host .cm-host-body > *:last-child{ margin-bottom:0; }

.cm-host .cm-eyebrow{
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--cm-gold-600);
  margin:0 0 6px;
}

.cm-host h2,
.cm-host h3{
  color:var(--cm-ink-900);
  margin:0 0 4px;
  line-height:1.2;
}

/* Rollenzeile direkt unter dem Namen */
.cm-host .cm-host-role{
  font-size:14.5px;
  color:var(--cm-ink-500);
  margin:0 0 14px;
  font-style:italic;
}

.cm-host p{ color:var(--cm-ink-700); }

/* Qualifikations-Liste: kompakter als die normale cm-check-Liste */
.cm-host .cm-check{
  margin:16px 0 18px;
  padding-left:0;
  list-style:none;
  display:grid;
  gap:7px;
}

.cm-host .cm-check li{
  position:relative;
  padding-left:24px;
  font-size:14.5px;
  line-height:1.5;
  color:var(--cm-ink-700);
  margin:0;
}

.cm-host .cm-check li::before{
  content:"✦";
  position:absolute;
  left:0;
  top:0;
  color:var(--cm-gold-500);
  font-size:13px;
}

.cm-host .wp-block-buttons{ margin-top:4px; }

/* ── Mobil: Porträt oben, kleiner, Text darunter ── */
@media (max-width:781px){
  .cm-host{ padding:26px 22px; border-radius:22px; }
  .cm-host .wp-block-columns{ gap:20px; }
  .cm-host .cm-host-photo{
    flex-basis:auto !important;
    max-width:150px;
    margin-inline:auto;
  }
  .cm-host .cm-host-body{ text-align:left; }
}

/* Dunkle Variante für Navy-Sektionen: .cm-host.cm-host-dark */
.cm-host.cm-host-dark{
  background:var(--cm-navy-800);
  border-color:rgba(255,255,255,.12);
  border-left-color:var(--cm-gold-400);
}
.cm-host.cm-host-dark h2,
.cm-host.cm-host-dark h3{ color:var(--cm-on-dark-100); }
.cm-host.cm-host-dark p,
.cm-host.cm-host-dark .cm-check li{ color:rgba(255,255,255,.78); }
.cm-host.cm-host-dark .cm-host-role{ color:rgba(255,255,255,.6); }
.cm-host.cm-host-dark .cm-eyebrow{ color:var(--cm-gold-400); }


/* ═══ B · GALERIEN ═════════════════════════════════════════════════════════
   Alle drei Varianten arbeiten auf dem NORMALEN wp:gallery-Block.
   Bilder werden weiter ganz normal im Editor getauscht.
   ────────────────────────────────────────────────────────────────────────── */

/* ── B0 · Reset gegen das Basis-Galerie-CSS ──────────────────────────────
   Das Haupt-Plugin stylt `.cm-gallery.wp-block-gallery > .wp-block-image`
   mit border-radius:0 0 60px 60px und erzwingt am img aspect-ratio:4/5.
   Für die drei neuen Varianten muss beides zurückgesetzt werden, sonst
   erben die Kacheln die runden Unterkanten und die falsche Höhe.        */

.wp-block-gallery.cm-gal-rail > .wp-block-image,
.wp-block-gallery.cm-gal-mosaik > .wp-block-image,
.wp-block-gallery.cm-gal-trio > .wp-block-image,
.cm-gal-rail .wp-block-gallery > .wp-block-image,
.cm-gal-mosaik .wp-block-gallery > .wp-block-image,
.cm-gal-trio .wp-block-gallery > .wp-block-image{
  border-radius:20px !important;
  overflow:hidden;
  line-height:0;
}

.wp-block-gallery.cm-gal-rail > .wp-block-image > figure,
.wp-block-gallery.cm-gal-mosaik > .wp-block-image > figure,
.wp-block-gallery.cm-gal-trio > .wp-block-image > figure,
.cm-gal-rail .wp-block-gallery > .wp-block-image > figure,
.cm-gal-mosaik .wp-block-gallery > .wp-block-image > figure,
.cm-gal-trio .wp-block-gallery > .wp-block-image > figure{
  width:100% !important;
  height:100% !important;
  margin:0 !important;
}

.wp-block-gallery.cm-gal-rail > .wp-block-image img,
.wp-block-gallery.cm-gal-mosaik > .wp-block-image img,
.wp-block-gallery.cm-gal-trio > .wp-block-image img,
.cm-gal-rail .wp-block-gallery > .wp-block-image img,
.cm-gal-mosaik .wp-block-gallery > .wp-block-image img,
.cm-gal-trio .wp-block-gallery > .wp-block-image img{
  border-radius:0 !important;
}


/* ── B1 · Wisch-Schiene  .cm-gal-rail ────────────────────────────────────
   Horizontal scrollbar, Hochformate, rechts angeschnitten als Wisch-Hinweis.
   Auf die wp:gallery ODER eine umschließende wp:group setzen.            */

.cm-gal-rail .wp-block-gallery,
.wp-block-gallery.cm-gal-rail{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-left:2px;
  -webkit-overflow-scrolling:touch;
  padding-bottom:16px;
  /* dezente Scrollbar */
  scrollbar-width:thin;
  scrollbar-color:var(--cm-gold-500) transparent;
}

.cm-gal-rail .wp-block-gallery::-webkit-scrollbar,
.wp-block-gallery.cm-gal-rail::-webkit-scrollbar{ height:6px; }
.cm-gal-rail .wp-block-gallery::-webkit-scrollbar-track,
.wp-block-gallery.cm-gal-rail::-webkit-scrollbar-track{
  background:var(--cm-sand-300); border-radius:99px;
}
.cm-gal-rail .wp-block-gallery::-webkit-scrollbar-thumb,
.wp-block-gallery.cm-gal-rail::-webkit-scrollbar-thumb{
  background:var(--cm-gold-500); border-radius:99px;
}

.cm-gal-rail .wp-block-image,
.wp-block-gallery.cm-gal-rail .wp-block-image{
  flex:0 0 auto !important;
  width:clamp(210px, 27vw, 300px) !important;
  margin:0 !important;
  scroll-snap-align:start;
}

.cm-gal-rail .wp-block-image img,
.wp-block-gallery.cm-gal-rail .wp-block-image img{
  width:100%;
  height:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:20px;
  box-shadow:0 8px 24px rgba(9,26,62,.10);
  transition:transform .35s ease;
}

@media (hover:hover){
  .cm-gal-rail .wp-block-image:hover img,
  .wp-block-gallery.cm-gal-rail .wp-block-image:hover img{ transform:scale(1.025); }
}

/* Querformat-Variante: zusätzlich .cm-gal-wide */
.cm-gal-rail.cm-gal-wide .wp-block-image img,
.wp-block-gallery.cm-gal-rail.cm-gal-wide .wp-block-image img{ aspect-ratio:4/3; }
.cm-gal-rail.cm-gal-wide .wp-block-image,
.wp-block-gallery.cm-gal-rail.cm-gal-wide .wp-block-image{
  width:clamp(260px, 34vw, 400px) !important;
}


/* ── B2 · Mosaik  .cm-gal-mosaik ─────────────────────────────────────────
   Unterschiedlich große Kacheln statt gleichförmigem Raster.
   Sechs Bilder ergeben das schönste Ergebnis (Muster wiederholt sich).   */

.cm-gal-mosaik .wp-block-gallery,
.wp-block-gallery.cm-gal-mosaik{
  display:grid !important;
  /* 6 Spalten als feines Raster — die Kacheln belegen 2, 3 oder 4 davon.
     Das ergibt drei Kachelgrößen bei nur drei Grundbreiten pro Reihe. */
  grid-template-columns:repeat(6,1fr);
  /* FESTE Zeilenhöhe. Kein `auto` — sonst wächst die Zeile auf die
     natürliche Bildhöhe und die Kacheln werden riesig. */
  grid-auto-rows:172px;
  grid-auto-flow:dense;
  gap:16px;
  max-width:none !important;
  width:100% !important;
}

.cm-gal-mosaik .wp-block-image,
.wp-block-gallery.cm-gal-mosaik .wp-block-image{
  margin:0 !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  flex:none !important;
  flex-basis:auto !important;
  /* Grundkachel: ein Drittel der Breite, eine Reihe hoch */
  grid-column:span 2;
  grid-row:span 1;
}

/* Rhythmus über je 5 Bilder:
   1 → groß (2 Spalten breit, 2 Reihen hoch)
   2 → normal · 3 → normal
   4 → breit (4 Spalten)  · 5 → normal
   Ergibt eine ruhige, redaktionelle Anordnung ohne Löcher.            */
.cm-gal-mosaik .wp-block-image:nth-child(5n+1),
.wp-block-gallery.cm-gal-mosaik .wp-block-image:nth-child(5n+1){
  grid-column:span 2;
  grid-row:span 2;
}

.cm-gal-mosaik .wp-block-image:nth-child(5n+4),
.wp-block-gallery.cm-gal-mosaik .wp-block-image:nth-child(5n+4){
  grid-column:span 4;
}

.cm-gal-mosaik .wp-block-image img,
.wp-block-gallery.cm-gal-mosaik .wp-block-image img{
  width:100% !important;
  height:100% !important;
  max-height:100% !important;
  aspect-ratio:auto !important;   /* schlägt das 4/5 aus dem Haupt-Plugin */
  object-fit:cover;
  display:block;
  box-shadow:none;
}

@media (max-width:900px){
  .cm-gal-mosaik .wp-block-gallery,
  .wp-block-gallery.cm-gal-mosaik{
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:132px;
    gap:12px;
  }
  /* Auf schmalen Schirmen nur noch zwei Größen: halb und voll */
  .cm-gal-mosaik .wp-block-image,
  .wp-block-gallery.cm-gal-mosaik .wp-block-image{ grid-column:span 2; }
  .cm-gal-mosaik .wp-block-image:nth-child(5n+1),
  .wp-block-gallery.cm-gal-mosaik .wp-block-image:nth-child(5n+1){
    grid-column:span 2; grid-row:span 2;
  }
  .cm-gal-mosaik .wp-block-image:nth-child(5n+4),
  .wp-block-gallery.cm-gal-mosaik .wp-block-image:nth-child(5n+4){
    grid-column:span 4; grid-row:span 1;
  }
}


/* ── B3 · Trio-Streifen  .cm-gal-trio ────────────────────────────────────
   Drei gleich hohe Bilder nebeneinander, für Zwischensektionen.          */

.cm-gal-trio .wp-block-gallery,
.wp-block-gallery.cm-gal-trio{
  display:grid !important;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.cm-gal-trio .wp-block-image,
.wp-block-gallery.cm-gal-trio .wp-block-image{ margin:0 !important; width:auto !important; }

.cm-gal-trio .wp-block-image img,
.wp-block-gallery.cm-gal-trio .wp-block-image img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:20px;
  box-shadow:0 8px 22px rgba(9,26,62,.10);
}

@media (max-width:781px){
  .cm-gal-trio .wp-block-gallery,
  .wp-block-gallery.cm-gal-trio{ grid-template-columns:1fr 1fr; gap:10px; }
  .cm-gal-trio .wp-block-image:first-child,
  .wp-block-gallery.cm-gal-trio .wp-block-image:first-child{ grid-column:span 2; }
}

/* ── B4 · Spezifitäts-Nachzug ────────────────────────────────────────────
   Das Haupt-Plugin adressiert die Kacheln mit
   `.cm-gallery.wp-block-gallery > .wp-block-image` — drei Klassen, teils
   mit !important. Damit schlägt es die kürzeren Selektoren oben. Diese
   Regeln haben dieselbe Spezifität, stehen aber später und gewinnen
   deshalb. Ohne diesen Block bleiben Breite und Seitenverhältnis der
   Basis-Galerie bestehen und die Varianten sehen falsch aus.        */

/* Schiene: feste Kachelbreite statt 100 % */
.wp-block-gallery.cm-gal-rail > .wp-block-image,
.cm-gal-rail .wp-block-gallery > .wp-block-image{
  width:clamp(210px,27vw,300px) !important;
  max-width:none !important;
  min-width:0 !important;
  flex:0 0 auto !important;
  flex-basis:auto !important;
  margin:0 !important;
  scroll-snap-align:start;
}

.wp-block-gallery.cm-gal-rail.cm-gal-wide > .wp-block-image,
.cm-gal-rail.cm-gal-wide .wp-block-gallery > .wp-block-image{
  width:clamp(260px,34vw,400px) !important;
}

.wp-block-gallery.cm-gal-rail > .wp-block-image img,
.cm-gal-rail .wp-block-gallery > .wp-block-image img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:3/4 !important;
  object-fit:cover;
  display:block;
}

.wp-block-gallery.cm-gal-rail.cm-gal-wide > .wp-block-image img,
.cm-gal-rail.cm-gal-wide .wp-block-gallery > .wp-block-image img{
  aspect-ratio:4/3 !important;
}

/* Trio: drei gleich hohe Kacheln */
.wp-block-gallery.cm-gal-trio > .wp-block-image,
.cm-gal-trio .wp-block-gallery > .wp-block-image{
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  flex:none !important;
  flex-basis:auto !important;
  margin:0 !important;
}

.wp-block-gallery.cm-gal-trio > .wp-block-image img,
.cm-gal-trio .wp-block-gallery > .wp-block-image img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:4/5 !important;
  object-fit:cover;
  display:block;
}

/* Mosaik: Kachelgröße kommt aus dem Raster, das Bild füllt sie aus */
.wp-block-gallery.cm-gal-mosaik > .wp-block-image,
.cm-gal-mosaik .wp-block-gallery > .wp-block-image{
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  flex:none !important;
  flex-basis:auto !important;
  margin:0 !important;
  min-height:0;
}

.wp-block-gallery.cm-gal-mosaik > .wp-block-image img,
.cm-gal-mosaik .wp-block-gallery > .wp-block-image img{
  width:100% !important;
  height:100% !important;
  max-height:100% !important;
  aspect-ratio:auto !important;
  object-fit:cover;
  display:block;
}


/* Bildunterschriften in allen Varianten dezent */
.cm-gal-rail figcaption,
.cm-gal-mosaik figcaption,
.cm-gal-trio figcaption{
  font-size:12.5px;
  color:var(--cm-ink-500);
  margin-top:7px;
  text-align:left;
}


/* ═══ C · SCHWEBENDER GESPRÄCHS-BUTTON ═════════════════════════════════════
   Die bestehende .cm-sticky-Leiste bleibt auf dem Handy unverändert.
   Ab Tablet wird sie zur kompakten goldenen Pille unten rechts.
   Kein zweites Element, kein zusätzliches JavaScript — das vorhandene
   Scroll-Script mit .cm-on wird weiterverwendet.
   ────────────────────────────────────────────────────────────────────────── */

@media (min-width:782px){

  .cm-sticky{
    left:auto !important;
    right:24px !important;
    bottom:24px !important;
    top:auto !important;
    width:auto !important;
    max-width:none !important;
    border-radius:99px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
    display:flex !important;
    justify-content:flex-end;
    pointer-events:none;      /* nur der Button selbst ist klickbar */
  }

  /* Begleittext auf dem Desktop ausblenden — die Pille spricht für sich */
  .cm-sticky .cm-sticky-txt{ display:none !important; }

  .cm-sticky a{
    pointer-events:auto;
    display:inline-flex !important;
    align-items:center;
    gap:10px;
    background:var(--cm-gold-600) !important;
    color:#fff !important;
    border-radius:99px !important;
    padding:15px 26px !important;
    font-size:15.5px;
    font-weight:700;
    letter-spacing:.01em;
    text-decoration:none !important;
    box-shadow:0 10px 28px rgba(9,26,62,.24);
    transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
    white-space:nowrap;
  }

  /* Kamera-Icon vor dem Text */
  .cm-sticky a::before{
    content:"";
    width:19px; height:19px;
    flex:0 0 19px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M4 6.5A2.5 2.5 0 0 1 6.5 4h6A2.5 2.5 0 0 1 15 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-6A2.5 2.5 0 0 1 4 17.5v-11Z'/%3E%3Cpath d='M16.5 10.2 20 8.05A.75.75 0 0 1 21 8.7v6.6a.75.75 0 0 1-1 .65l-3.5-2.15v-3.6Z'/%3E%3C/svg%3E");
  }

  .cm-sticky a:hover{
    background:var(--cm-navy-800) !important;
    transform:translateY(-2px);
    box-shadow:0 14px 34px rgba(9,26,62,.3);
  }

  /* Ohne Icon: .cm-sticky.cm-nopill-icon */
  .cm-sticky.cm-nopill-icon a::before{ display:none; }
}

/* Sehr breite Schirme: etwas mehr Abstand zum Rand */
@media (min-width:1400px){
  .cm-sticky{ right:40px !important; bottom:34px !important; }
}


/* ═══ D · HIGHLIGHT-KACHELN MIT ICONS  .cm-ico-* ═══════════════════════════
   Auf eine bestehende .cm-card zusätzlich eine Icon-Klasse setzen.
   Das Icon erscheint als feine Goldlinie über der Überschrift.
   Beispiel: {"className":"cm-card cm-ico cm-ico-welle"}
   ────────────────────────────────────────────────────────────────────────── */

.cm-ico::before{
  content:"";
  display:block;
  width:34px; height:34px;
  margin:0 0 16px;
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;
  opacity:.95;
}

/* zentrierte Kacheln */
.cm-center .cm-ico::before,
.cm-ico.cm-ico-center::before{ margin-inline:auto; background-position:center; }

/* Welle · Wasser, Ozean, Fluss */
.cm-ico-welle::before{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23A98A4B' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 11c2.6 0 2.6 2.4 5.2 2.4S10.8 11 13.4 11s2.6 2.4 5.2 2.4S21.2 11 23.8 11 26.4 13.4 29 13.4'/%3E%3Cpath d='M3 18c2.6 0 2.6 2.4 5.2 2.4S10.8 18 13.4 18s2.6 2.4 5.2 2.4S21.2 18 23.8 18s2.6 2.4 5.2 2.4'/%3E%3Cpath d='M3 25c2.6 0 2.6 2.4 5.2 2.4'/%3E%3C/svg%3E");
}

/* Trommel · schamanische Arbeit, Reise */
.cm-ico-trommel::before{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23A98A4B' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='16' cy='16' r='11.5'/%3E%3Ccircle cx='16' cy='16' r='2.2'/%3E%3Cpath d='M16 4.5v9.3M16 18.2v9.3M4.5 16h9.3M18.2 16h9.3'/%3E%3C/svg%3E");
}

/* Feder · Intuition, Leichtigkeit, Schreiben */
.cm-ico-feder::before{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23A98A4B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M25.5 6.5c0 8.8-5.4 15.2-13.4 15.2H7.6C7.6 12.9 13.9 6.5 22.7 6.5h2.8Z'/%3E%3Cpath d='M6 27 17.5 14'/%3E%3C/svg%3E");
}

/* Sonne · Klarheit, Neubeginn, Energie */
.cm-ico-sonne::before{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23A98A4B' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='16' cy='16' r='6'/%3E%3Cpath d='M16 3v3.4M16 25.6V29M3 16h3.4M25.6 16H29M6.8 6.8l2.4 2.4M22.8 22.8l2.4 2.4M25.2 6.8l-2.4 2.4M9.2 22.8l-2.4 2.4'/%3E%3C/svg%3E");
}

/* Mond · Trance, Unterbewusstes, Nacht */
.cm-ico-mond::before{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23A98A4B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M26 19.4A11.5 11.5 0 0 1 12.6 6a11.5 11.5 0 1 0 13.4 13.4Z'/%3E%3C/svg%3E");
}

/* Herz · Selbstliebe, Beziehung, Öffnung */
.cm-ico-herz::before{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23A98A4B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 27S4.5 20.2 4.5 12.6A6.1 6.1 0 0 1 16 9.6a6.1 6.1 0 0 1 11.5 3c0 7.6-11.5 14.4-11.5 14.4Z'/%3E%3C/svg%3E");
}

/* Berg · Weg, Ausbildung, Etappen */
.cm-ico-berg::before{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23A98A4B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 25 12 9.5l5.5 9M15.5 25l6-10.5L29.5 25Z'/%3E%3C/svg%3E");
}

/* Kompass · Orientierung, Ziel, Klarheit */
.cm-ico-kompass::before{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23A98A4B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='16' r='12'/%3E%3Cpath d='m20.8 11.2-2.6 7-7 2.6 2.6-7Z'/%3E%3C/svg%3E");
}

/* Kreis/Gruppe · Gemeinschaft, kleine Gruppe */
.cm-ico-kreis::before{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23A98A4B' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='16' cy='6.5' r='2.6'/%3E%3Ccircle cx='25.5' cy='16' r='2.6'/%3E%3Ccircle cx='16' cy='25.5' r='2.6'/%3E%3Ccircle cx='6.5' cy='16' r='2.6'/%3E%3Ccircle cx='16' cy='16' r='11.5' stroke-dasharray='2.5 3.4'/%3E%3C/svg%3E");
}

/* Spirale · Transformation, Prozess, Tiefe */
.cm-ico-spirale::before{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23A98A4B' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M16 16a3 3 0 1 1 3 3 5.6 5.6 0 0 1-5.6-5.6 8.4 8.4 0 0 1 8.4-8.4 11.2 11.2 0 0 1 11.2 11.2'/%3E%3Cpath d='M16 16a3 3 0 1 0-3-3 5.6 5.6 0 0 0 5.6 5.6'/%3E%3C/svg%3E");
}

/* Auge · Wahrnehmung, Sehen, Bewusstsein */
.cm-ico-auge::before{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23A98A4B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 16s5-8.5 14-8.5S30 16 30 16s-5 8.5-14 8.5S2 16 2 16Z'/%3E%3Ccircle cx='16' cy='16' r='3.4'/%3E%3C/svg%3E");
}

/* Hand · Heilung, Handwerk, Berührung */
.cm-ico-hand::before{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23A98A4B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 15V6.8a2 2 0 0 1 4 0V14M15 14V5.5a2 2 0 0 1 4 0V14M19 14.5V8a2 2 0 0 1 4 0v10.5c0 5-3.4 8.5-8 8.5s-8-3.5-8-8.5V13a2 2 0 0 1 4 0v2'/%3E%3C/svg%3E");
}

/* Icon größer / kleiner */
.cm-ico.cm-ico-l::before{ width:44px; height:44px; }
.cm-ico.cm-ico-s::before{ width:26px; height:26px; margin-bottom:12px; }


/* ═══ E · EIN ANGEBOT MIT VARIANTEN  .cm-variants ══════════════════════════
   Für Angebote, die dasselbe kosten oder sich nur im Inhalt unterscheiden:
   eine Karte, mehrere wählbare Varianten, ein Preis, ein CTA.

   Aufbau (native Blöcke):
   wp:group .cm-variants
     ├ H3 + Preiszeile (.cm-amount, .cm-per)
     ├ wp:group .cm-variant  (je Variante: H4 + Text)   ← beliebig oft
     ├ wp:list .cm-check     (was immer dabei ist)
     └ wp:buttons
   ────────────────────────────────────────────────────────────────────────── */

.cm-variants{
  background:var(--cm-sand-050);
  border:1px solid var(--cm-sand-300);
  border-radius:28px;
  padding:34px 36px;
  box-shadow:0 10px 30px rgba(9,26,62,.07);
  max-width:720px;
  margin-inline:auto;
}

.cm-variants > h3{
  margin:0 0 2px;
  color:var(--cm-ink-900);
  line-height:1.2;
}

.cm-variants .cm-amount{
  font-family:var(--cm-font-display,'Cormorant Garamond',Georgia,serif);
  font-size:44px;
  line-height:1.1;
  color:var(--cm-navy-800);
  margin:10px 0 2px;
  font-weight:600;
}

.cm-variants .cm-per{
  font-size:14px;
  color:var(--cm-ink-500);
  margin:0 0 4px;
}

/* Die einzelnen Varianten */
.cm-variants .cm-variant{
  border:1px solid var(--cm-sand-300);
  border-radius:18px;
  background:#fff;
  padding:18px 20px;
  margin:14px 0 0;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.cm-variants .cm-variant:first-of-type{ margin-top:22px; }

@media (hover:hover){
  .cm-variants .cm-variant:hover{
    border-color:var(--cm-gold-500);
    box-shadow:0 8px 22px rgba(9,26,62,.08);
    transform:translateY(-1px);
  }
}

.cm-variants .cm-variant > *:first-child{ margin-top:0; }
.cm-variants .cm-variant > *:last-child{ margin-bottom:0; }

.cm-variants .cm-variant h4{
  font-size:16.5px;
  color:var(--cm-ink-900);
  margin:0 0 5px;
  font-weight:700;
  position:relative;
  padding-left:22px;
}

/* Marker vor der Überschrift: bewusst KEIN Ring/Radio-Look — sonst wirkt
   es wie ein Auswahlfeld, das man anklicken kann. Stattdessen der
   Stern-Akzent aus dem Basis-Design. */
.cm-variants .cm-variant h4::before{
  content:"✦";
  position:absolute;
  left:0; top:0;
  color:var(--cm-gold-500);
  font-size:13px;
  line-height:1.5;
}

.cm-variants .cm-variant p{
  font-size:14.5px;
  line-height:1.55;
  color:var(--cm-ink-700);
  margin:0;
}

/* Eigener Button pro Variante — jede Richtung führt zu ihrem Produkt. */
.cm-variants .cm-variant .wp-block-buttons{
  margin-top:16px;
}

.cm-variants .cm-variant .wp-block-button__link{
  font-size:13.5px;
  padding-block:11px;
}

/* Dauer-/Detailzeile innerhalb einer Variante */
.cm-variants .cm-variant .cm-variant-meta{
  font-size:13px;
  color:var(--cm-ink-500);
  margin:8px 0 0;
}

/* Hervorgehobene Variante: zusätzlich .cm-variant-top */
.cm-variants .cm-variant.cm-variant-top{
  border-color:var(--cm-gold-500);
  background:linear-gradient(180deg,#fff 0%,#FDFBF5 100%);
}

/* Trennlinie vor der „immer dabei"-Liste */
.cm-variants .cm-check{
  margin:24px 0 20px;
  padding-top:22px;
  border-top:1px solid var(--cm-sand-300);
}

.cm-variants .wp-block-buttons{ margin-top:6px; }

.cm-variants .cm-meta{
  font-size:13.5px;
  color:var(--cm-ink-500);
  margin:14px 0 0;
}

@media (max-width:781px){
  .cm-variants{ padding:26px 20px; border-radius:22px; }
  .cm-variants .cm-amount{ font-size:38px; }
  .cm-variants .cm-variant{ padding:16px 17px; }
}


/* ═══ F · ANGEBOTSKACHELN: Preiszeile & Button ausrichten ══════════════════
   Im Basis-Design liegt die Polsterung der Karte auf `.cm-card-body`,
   die Karte selbst hat `padding:0`. Ergänzt man einer `.cm-card` weitere
   Blöcke (Preiszeile, Button), sind sie Geschwister der Body-Box und
   kleben deshalb ohne Abstand am Kartenrand.

   Diese Regeln geben ihnen dieselbe seitliche Polsterung und schieben den
   Button ans untere Kartenende, damit die Buttons mehrerer Karten auf
   einer Linie sitzen — auch wenn die Karten unterschiedlich viel Inhalt
   haben.
   ────────────────────────────────────────────────────────────────────────── */

.cm-cards.wp-block-columns > .cm-card{
  display:flex;
  flex-direction:column;
}

/* Der Body füllt den Rest, damit alles Nachfolgende nach unten rutscht */
.cm-cards.wp-block-columns > .cm-card > .cm-card-body{
  flex:1 1 auto;
  padding-bottom:20px;   /* statt 34px — die Preiszeile folgt ja noch */
}

.cm-card > .cm-meta{
  padding-inline:30px;
  margin:0 0 14px;
  font-size:13.5px;
  color:var(--cm-ink-500);
}

.cm-card > .wp-block-buttons{
  padding-inline:30px;
  padding-bottom:30px;
  margin-top:auto;      /* schiebt den Button ans Kartenende */
}

.cm-card > .wp-block-buttons .wp-block-button{ width:100%; }

.cm-card > .wp-block-buttons .wp-block-button__link{
  display:block;
  width:100%;
  text-align:center;
}

@media (max-width:781px){
  .cm-card > .cm-meta,
  .cm-card > .wp-block-buttons{ padding-inline:24px; }
  .cm-cards.wp-block-columns > .cm-card > .cm-card-body{ padding-bottom:16px; }
}


/* ═══ Kleinigkeiten ════════════════════════════════════════════════════════ */

/* Sanftes Einblenden aller neuen Bausteine beim Scrollen —
   respektiert die Systemeinstellung „Bewegung reduzieren". */
@media (prefers-reduced-motion:no-preference){
  .cm-host,
  .cm-variants{
    animation:cm-addon-fade .6s ease both;
    animation-timeline:view();
    animation-range:entry 0% entry 42%;
  }
}

@keyframes cm-addon-fade{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}


/* ═══ Z · DURCHSETZUNGS-BLOCK  (ganz am Ende, absichtlich) ═════════════════
   Auf carolinmallmann.de wird das Haupt-Design-CSS teilweise NACH diesem
   Stylesheet ausgeliefert (das Cache-Plugin bettet es inline ein). Die
   Ladereihenfolge entscheidet dann gegen uns, obwohl dieses Addon mit
   Priorität 20 eingebunden ist.

   Deshalb hier dieselben Regeln noch einmal mit erhöhter Spezifität:
   die Variantenklasse wird dreifach genannt (0,4,0) und schlägt damit
   `.cm-gallery.wp-block-gallery` (0,2,0) unabhängig von der Reihenfolge.
   Kein schöner, aber der einzige verlässliche Weg ohne Eingriff ins
   Haupt-Plugin.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Schiene ── */
.wp-block-gallery.cm-gal-rail.cm-gal-rail.cm-gal-rail{
  display:flex !important;
  flex-wrap:nowrap !important;
  grid-template-columns:none !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory;
  gap:18px !important;
  padding-bottom:16px;

  /* Volle Fensterbreite (Full-Bleed).
     `calc(50% - 50vw)` ist selbstjustierend: Ist der Container ohnehin so
     breit wie das Fenster, rechnet es auf 0 und nichts bricht aus.
     Die seitliche Polsterung hält das erste Bild auf der Textkante —
     ab sehr breiten Schirmen bündig zur 1060px-Inhaltsspalte. */
  width:auto !important;
  max-width:none !important;
  margin-inline:calc(50% - 50vw) !important;
  padding-inline:max(24px, calc(50vw - 530px)) !important;
  scroll-padding-inline:max(24px, calc(50vw - 530px));
}

/* Opt-out: `cm-gal-inset` hält die Schiene in der Inhaltsspalte */
.wp-block-gallery.cm-gal-rail.cm-gal-inset.cm-gal-rail{
  margin-inline:0 !important;
  padding-inline:0 !important;
  scroll-padding-inline:0;
}

.wp-block-gallery.cm-gal-rail.cm-gal-rail.cm-gal-rail > .wp-block-image{
  flex:0 0 auto !important;
  width:clamp(300px,26vw,400px) !important;
  max-width:none !important;
  min-width:0 !important;
  flex-basis:auto !important;
  margin:0 !important;
  scroll-snap-align:start;
  border-radius:20px !important;
  overflow:hidden;
}

.wp-block-gallery.cm-gal-rail.cm-gal-rail.cm-gal-rail > .wp-block-image img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:3/4 !important;
  object-fit:cover !important;
  border-radius:0 !important;
  display:block;
}

.wp-block-gallery.cm-gal-rail.cm-gal-wide.cm-gal-rail > .wp-block-image img{
  aspect-ratio:4/3 !important;
}

@media (max-width:781px){
  .wp-block-gallery.cm-gal-rail.cm-gal-rail.cm-gal-rail{
    padding-inline:20px !important;
    scroll-padding-inline:20px;
    gap:12px !important;
  }
  .wp-block-gallery.cm-gal-rail.cm-gal-rail.cm-gal-rail > .wp-block-image{
    width:clamp(230px,68vw,290px) !important;
  }
}

/* ── Trio ── */
.wp-block-gallery.cm-gal-trio.cm-gal-trio.cm-gal-trio{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:16px !important;
  max-width:none !important;
  width:100% !important;
}

.wp-block-gallery.cm-gal-trio.cm-gal-trio.cm-gal-trio > .wp-block-image{
  width:auto !important;
  max-width:none !important;
  flex:none !important;
  margin:0 !important;
  border-radius:20px !important;
  overflow:hidden;
}

.wp-block-gallery.cm-gal-trio.cm-gal-trio.cm-gal-trio > .wp-block-image img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:4/5 !important;
  object-fit:cover !important;
  border-radius:0 !important;
}

/* ── Mosaik ── */
.wp-block-gallery.cm-gal-mosaik.cm-gal-mosaik.cm-gal-mosaik{
  display:grid !important;
  grid-template-columns:repeat(6,1fr) !important;
  grid-auto-rows:172px !important;
  grid-auto-flow:dense;
  gap:16px !important;
  max-width:none !important;
  width:100% !important;
}

.wp-block-gallery.cm-gal-mosaik.cm-gal-mosaik.cm-gal-mosaik > .wp-block-image{
  width:auto !important;
  max-width:none !important;
  flex:none !important;
  margin:0 !important;
  grid-column:span 2;
  grid-row:span 1;
  border-radius:20px !important;
  overflow:hidden;
  min-height:0;
}

.wp-block-gallery.cm-gal-mosaik.cm-gal-mosaik.cm-gal-mosaik > .wp-block-image:nth-child(5n+1){
  grid-column:span 2; grid-row:span 2;
}
.wp-block-gallery.cm-gal-mosaik.cm-gal-mosaik.cm-gal-mosaik > .wp-block-image:nth-child(5n+4){
  grid-column:span 4;
}

.wp-block-gallery.cm-gal-mosaik.cm-gal-mosaik.cm-gal-mosaik > .wp-block-image img{
  width:100% !important;
  height:100% !important;
  max-height:100% !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  border-radius:0 !important;
  display:block;
}

/* ── Angebotskacheln: Button-Ausrichtung ── */
.cm-cards.wp-block-columns > .cm-card.cm-card{
  display:flex !important;
  flex-direction:column !important;
}
.cm-cards.wp-block-columns > .cm-card.cm-card > .cm-card-body{
  flex:1 1 auto !important;
}
.cm-card.cm-card > .wp-block-buttons{
  margin-top:auto !important;
}