/*
======================================
Theme Name: WordPress Child Theme Atomion
Theme URI: https://marketpress.de
Description: Atomion Child Theme – Designsystem & Layout-Optimierungen
Version: 1.3 – 05.08.2025 – Konsolidierung Warenkorb-/Logo-Logik
Author: MarketPress (angepasst von ChatGPT – OpenAI GPT-4.5 Turbo)
Template: wordpress-theme-atomion
License: GNU General Public License v3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
======================================
*/

/* ==========================================================================
   Farbkonzept Hohlweg – WCAG AA (Normaltext) konform
   Erstellt mit: GPT-5 · Datum: 2025-08-08
========================================================================== */
:root {
  /* Basisflächen (kommen aus theme.json Presets) */
  --color-bg:             var(--wp--preset--color--bg-primary);
  --color-beige:          var(--wp--preset--color--bg-secondary);
  --color-border:         var(--wp--preset--color--border-base);

  /* Grundtext */
  --color-text:           var(--wp--preset--color--text-base);

  /* Akzente */
  --color-accent:         var(--wp--preset--color--accent-primary);
  --color-orange:         var(--wp--preset--color--accent-secondary);
  --color-blue-light:     var(--wp--preset--color--accent-tertiary);
  --color-art-red:        var(--wp--preset--color--art-red);

  /* Status */
  --color-success:        var(--wp--preset--color--status-success);
  --color-error:          var(--wp--preset--color--status-error);

  /* Interaktion */
  --color-orange-dark:    var(--wp--preset--color--interactive-hover);

  /* Cart-Hintergrund (empty cart) */
  --color-cart-bg:        var(--wp--preset--color--cart-bg);

  /* =========================================================
     Text-auf-Farbe (On-Color) – AA ≥ 4.5:1 (Normaltext)
     ========================================================= */
  --on-bg:                #1a1a1a;
  --on-beige:             #1a1a1a;
  --on-accent:            #ffffff;
  --on-orange:            #1a1a1a;
  --on-blue-light:        #1a1a1a;
  --on-art-red:           #ffffff;
  --on-success:           #ffffff;
  --on-error:             #ffffff;
  --on-orange-dark:       #ffffff;
}

/* Body-Defaults (hilft, wenn Blöcke keine Farbe setzen) */
body { background: var(--color-bg); color: var(--on-bg); }

/* ==========================================================================
   Gutenberg-Farbklassen – Variablenbasiert (Slugs aus theme.json)
========================================================================== */
.has-bg-primary-color            { color: var(--color-bg); }
.has-text-base-color             { color: var(--color-text); }
.has-border-base-color           { color: var(--color-border); }
.has-accent-primary-color        { color: var(--color-accent); }
.has-accent-secondary-color      { color: var(--color-orange); }
.has-accent-tertiary-color       { color: var(--color-blue-light); }
.has-art-red-color               { color: var(--color-art-red); }
.has-bg-secondary-color          { color: var(--color-beige); }
.has-status-success-color        { color: var(--color-success); }
.has-status-error-color          { color: var(--color-error); }
.has-interactive-hover-color     { color: var(--color-orange-dark); }

.has-bg-primary-background-color        { background-color: var(--color-bg); }
.has-text-base-background-color         { background-color: var(--color-text); }
.has-border-base-background-color       { background-color: var(--color-border); }
.has-accent-primary-background-color    { background-color: var(--color-accent); }
.has-accent-secondary-background-color  { background-color: var(--color-orange); }
.has-accent-tertiary-background-color   { background-color: var(--color-blue-light); }
.has-art-red-background-color           { background-color: var(--color-art-red); }
.has-bg-secondary-background-color      { background-color: var(--color-beige); }
.has-status-success-background-color    { background-color: var(--color-success); }
.has-status-error-background-color      { background-color: var(--color-error); }
.has-interactive-hover-background-color { background-color: var(--color-orange-dark); }

/* ==========================================================================
   On-Color Utilities (AA-konform, Normaltext)
========================================================================== */
.u-text-on-bg            { color: var(--on-bg) !important; }
.u-text-on-beige         { color: var(--on-beige) !important; }
.u-text-on-accent        { color: var(--on-accent) !important; }
.u-text-on-orange        { color: var(--on-orange) !important; }
.u-text-on-blue-light    { color: var(--on-blue-light) !important; }
.u-text-on-art-red       { color: var(--on-art-red) !important; }
.u-text-on-success       { color: var(--on-success) !important; }
.u-text-on-error         { color: var(--on-error) !important; }
.u-text-on-orange-dark   { color: var(--on-orange-dark) !important; }

/* Beispiel-Buttons (AA-konform) */
.button--accent   { background: var(--color-accent);   color: var(--on-accent);  padding:.6rem 1rem; border:0; border-radius:.35rem; }
.button--orange   { background: var(--color-orange);   color: var(--on-orange);  padding:.6rem 1rem; border:0; border-radius:.35rem; }
.button--success  { background: var(--color-success);  color: var(--on-success); padding:.6rem 1rem; border:0; border-radius:.35rem; }
.button--error    { background: var(--color-error);    color: var(--on-error);   padding:.6rem 1rem; border:0; border-radius:.35rem; }
.button--outline  { border:1px solid var(--color-border); color: var(--on-bg); background: transparent; padding:.6rem 1rem; border-radius:.35rem; }


/* =========================================================
   Block-Styles → Farbvariablen-Mapping
   Erstellt: GPT-5 · 2025-08-08
   ========================================================= */

/* ----- Buttons ----- */
.wp-block-button.is-style-primary .wp-block-button__link {
  background: var(--color-accent);
  color: var(--on-accent);
}
.wp-block-button.is-style-secondary .wp-block-button__link {
  background: var(--color-orange);
  color: var(--on-orange);
}
.wp-block-button.is-style-success .wp-block-button__link {
  background: var(--color-success);
  color: var(--on-success);
}
.wp-block-button.is-style-error .wp-block-button__link {
  background: var(--color-error);
  color: var(--on-error);
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--on-bg);
  border: 1px solid var(--color-border);
}

/* ----- Badges (Group) ----- */
.wp-block-group.is-style-badge-blue {
  background: var(--color-blue-light);
  color: var(--on-blue-light);
  padding: .25em .6em;
  border-radius: .5em;
  display: inline-block;
}
.wp-block-group.is-style-badge-orange {
  background: var(--color-orange);
  color: var(--on-orange);
  padding: .25em .6em;
  border-radius: .5em;
  display: inline-block;
}
.wp-block-group.is-style-badge-art {
  background: var(--color-art-red);
  color: var(--on-art-red);
  padding: .25em .6em;
  border-radius: .5em;
  display: inline-block;
}

/* ----- Alerts (Paragraph) ----- */
.wp-block-paragraph.is-style-alert-success {
  background: var(--color-success);
  color: var(--on-success);
  padding: .75em 1em;
  border-radius: .35em;
}
.wp-block-paragraph.is-style-alert-error {
  background: var(--color-error);
  color: var(--on-error);
  padding: .75em 1em;
  border-radius: .35em;
}
.wp-block-paragraph.is-style-alert-info {
  background: var(--color-blue-light);
  color: var(--on-blue-light);
  padding: .75em 1em;
  border-radius: .35em;
}

/* ----- Navigation ----- */
.wp-block-navigation.is-style-nav-main a {
  color: var(--color-text);
}
.wp-block-navigation.is-style-nav-main a[aria-current="page"],
.wp-block-navigation.is-style-nav-main a:hover,
.wp-block-navigation.is-style-nav-main a:focus {
  background: var(--color-accent);
  color: var(--on-accent);
}

/* ----- Tabellen ----- */
.wp-block-table.is-style-table-basic th {
  background: var(--color-beige);
  color: var(--on-beige);
}
.wp-block-table.is-style-table-basic td,
.wp-block-table.is-style-table-basic th {
  border: 1px solid var(--color-border);
  padding: .5em;
}




/* ==========================================================================
  3. Lokale Webfonts mit font-display: swap
========================================================================== */

/* === Poppins === */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/wp-content/themes/atomion-child-designsystem/assets/fonts/poppins/poppins-v5-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/wp-content/themes/atomion-child-designsystem/assets/fonts/poppins/poppins-v5-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/wp-content/themes/atomion-child-designsystem/assets/fonts/poppins/poppins-v5-latin-700.woff2') format('woff2');
}

/* === Source Sans Pro === */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/wp-content/themes/atomion-child-designsystem/assets/fonts/source-sans-pro-v11-latin/source-sans-pro-v11-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/wp-content/themes/atomion-child-designsystem/assets/fonts/source-sans-pro-v11-latin/source-sans-pro-v11-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/wp-content/themes/atomion-child-designsystem/assets/fonts/source-sans-pro-v11-latin/source-sans-pro-v11-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/wp-content/themes/atomion-child-designsystem/assets/fonts/source-sans-pro-v11-latin/source-sans-pro-v11-latin-700.woff2') format('woff2');
}

/* ==========================================================================
  4. Font Awesome 6 (lokal) – Free + Brands
========================================================================== */
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/wp-content/themes/atomion-child-designsystem/assets/fonts/font-awesome/fa-regular-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/wp-content/themes/atomion-child-designsystem/assets/fonts/font-awesome/fa-solid-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/wp-content/themes/atomion-child-designsystem/assets/fonts/font-awesome/fa-brands-400.woff2') format('woff2');
}


/* ==========================================================================
  5. Social Media Icons im Header
========================================================================== */
#masthead .social-item a {
  font-family: 'Font Awesome 6 Brands';
  font-weight: 400;
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  text-decoration: none;
  padding: 0.5rem;
  transition: color 0.2s ease;
}
#masthead .social-item a:hover {
  color: color-mix(in srgb, var(--color-accent), #000 15%);
}

/* ==========================================================================
  6. CLS-Fixes & Designtool
========================================================================== */
.brlbs-cmpnt-non-eu-data-transfer {
  min-height: 2rem;
  line-height: 1.4;
  overflow: hidden;
}
.cart-contents-count {
  display: inline-block;
  min-width: 1.5ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.designsystem-color-swatch {
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.designsystem-color-label code {
  background: color-mix(in srgb, var(--color-bg), #000 4%);
}

/* ==========================================================================
  7. Header-Icons Sichtbarkeit
========================================================================== */
.search-item,
.account-item,
.search-item.mobile-search,
.account-item.mobile-account {
  display: flex !important;
  align-items: center;
}
.logo-top-nav .logo-top-nav-right:empty::after {
  content: "";
  display: inline-block;
  width: 2.5em;
  height: 1px;
  visibility: hidden;
}

/* ==========================================================================
  8. Logo-Layout Desktop
========================================================================== */
.logo-top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo-top-nav .site-branding {
  flex: 1 1 auto;
  min-width: 120px;
}
.logo-top-nav .logo-top-nav-right {
  flex-shrink: 0;
  display: flex;
  gap: 1em;
}

/* ==========================================================================
  9. Hero-Bild
========================================================================== */
.hero-image {
  max-height: 80vh;
  object-fit: cover;
}

/* ==========================================================================
  10. Logo-Typografie
========================================================================== */
.site-title,
.site-title a {
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--color-accent) !important;
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin: 0;
  text-align: center;
  text-decoration: none;
  transition: color 0.18s;
  width: 100%;
  display: block;
}
.site-title a:hover,
.site-title a:focus {
  color: var(--color-orange) !important;
}
@media (max-width: 800px) {
  .site-title,
  .site-title a { font-size: 1.2rem; }
}

/* ============================================================
 * 14. Header-Icons – Einheitliche Höhe & Ausrichtung + Cart-Sichtbarkeit
 * Erstellt mit GPT-4.5 am 05.08.2025 – 21:43 CEST
 * 
 * Ziel:
 * - Einheitliche vertikale Ausrichtung von Suche, Account, Cart
 * - Warenkorb bei "leer" im Hintergrundfarbton ausblenden
 * - Kein Layoutshift durch Ausblenden (Platz wird behalten)
 * ============================================================ */

/* 14.1 Einheitliche Flex-Ausrichtung für alle Header-Icons */
.header-icons .cart-item,
.header-icons .search-item,
.header-icons .account-item {
  display: flex;
  align-items: center;     /* vertikal mittig */
  justify-content: center; /* horizontal zentriert */
  height: 100%;            /* gleiche Höhe wie Headerzeile */
  padding: 0;              /* Padding resetten */
  margin: 0;               /* Margin resetten */
}

/* 14.2 Links innerhalb der Icons ebenfalls mittig halten */
.header-icons .cart-item a,
.header-icons .search-item a,
.header-icons .account-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* 14.3 Leerer Warenkorb – "unsichtbar" durch Hintergrundfarbe */
.cart-item .cart-status.empty ~ a .cart-icon,
.cart-item .cart-status.empty ~ a .cart-contents-count {
  color: var(--color-cart-bg) !important; /* gleiche Farbe wie Hintergrund */
}

/* 14.4 Sichtbar schlägt "leer" – wenn Klasse .cart-visible gesetzt ist */
body.cart-visible .cart-item .cart-status.empty ~ a .cart-icon,
body.cart-visible .cart-item .cart-status.empty ~ a .cart-contents-count {
  color: var(--color-text) !important; /* oder var(--color-accent) */
}

/* 14.5 Verhindert Layout-Shift, falls Cart temporär unsichtbar ist */
body.cart-empty:not(.cart-visible) .cart-item {
  visibility: hidden; /* behält Platz */
}

/* ============================================================
   Hohlweg – Link & Akzent-Fix für Atomion Child
   Greift nach Dequeue des Atomion Dynamic CSS
   ============================================================ */

/* 0) evtl. fehlende Töne (nur falls noch nicht vorhanden) */
:root{
  --color-accent-700: #2a6774;     /* Hover für Links/Buttons */
  --focus-outline:     #2a6774;     /* Tastaturfokus */
}

/* 1) Basis-Links (keine Buttons) */
a:not(.wp-element-button):not(.button):not(.woocommerce a.button):not(.wp-block-button__link) {
  color: var(--color-accent);
  text-decoration-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  text-underline-offset: .12em;
}
a:hover:not(.wp-element-button):not(.button):not(.woocommerce a.button):not(.wp-block-button__link),
a:focus-visible:not(.wp-element-button):not(.button):not(.woocommerce a.button):not(.wp-block-button__link) {
  color: var(--color-accent-700);
  text-decoration-color: var(--color-accent-700);
}

/* 2) Buttons (Gutenberg) */
.wp-block-button .wp-block-button__link {
  background: var(--color-accent);
  color: var(--on-accent);
  border: 2px solid var(--color-accent);
}
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus-visible {
  background: var(--color-accent-700);
  border-color: var(--color-accent-700);
  color: var(--on-accent);
}

/* 3) WooCommerce – Buttons & Links in Produktrastern */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--color-accent);
  border: 2px solid var(--color-accent);
  color: var(--on-accent);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible {
  background: var(--color-accent-700);
  border-color: var(--color-accent-700);
  color: var(--on-accent);
}

/* 4) Woo – Produkt-Titel/Links im Grid & Einzelansicht */
.wc-block-grid__product-title a,
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.woocommerce div.product .product_title {
  color: var(--color-text);
}
.wc-block-grid__product-title a:hover,
.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover {
  color: var(--color-accent-700);
}

/* 5) Woo – Sale-Badge & Preis-Highlights */
.woocommerce span.onsale,
.wc-block-components-product-badge {
  background: var(--color-accent);
  color: var(--on-accent);
}
.woocommerce div.product p.price,
.woocommerce ul.products li.product .price {
  color: var(--color-text);
}
.woocommerce .price ins {
  color: var(--color-accent);
  text-decoration: none;
}

/* 6) Header: aktuelle/hover Navigation akzentuieren (dezente Linie) */
#header #masthead [id*="primary-menu"] > li > a:hover,
#header #masthead [id*="primary-menu"] > li.current-menu-item > a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: .2em;
}

/* 7) Mini-Cart Icon & „gefüllt“-Zustand (Atomion Selektoren) */
#masthead .cart-item > a.header-cart-link { color: var(--color-text); }
#masthead .cart-item .filled + a.header-cart-link {
  background: var(--color-accent);
  color: var(--on-accent);
}
#masthead .cart-item .filled + a.header-cart-link:hover {
  background: var(--color-accent-700);
}

/* 8) Tastaturfokus – gut sichtbar, AA-konform */
:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

/* 9) Suchbutton/Filter (Gutenberg Search & Woo Widgets) */
html .wp-block-search .wp-block-search__button {
  background: var(--color-accent);
  border: 2px solid var(--color-accent);
  color: var(--on-accent);
}
html .wp-block-search .wp-block-search__button:hover,
html .wp-block-search .wp-block-search__button:focus-visible {
  background: var(--color-accent-700);
  border-color: var(--color-accent-700);
}

/* 10) Kleine Helfer – Badge/Label auf Akzent */
.badge--accent { background: var(--color-accent); color: var(--on-accent); padding:.25em .5em; border-radius:.25rem; }

/* =========
 * 1) Globale Link-Unterstreichung (Inhalt)
 * ========= */
a:where(:not(.wp-element-button)) {
  text-decoration-color: var(--wp--preset--color--accent-primary) !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}
a:where(:not(.wp-element-button)):hover,
a:where(:not(.wp-element-button)):focus {
  text-decoration-color: var(--wp--preset--color--accent-secondary) !important;
}

/* =========
 * 2) Menü-Unterstreichungen & Hover-Effekte (Atomion Nav-Hover Varianten)
 * ========= */
/* Standard-Hover-Bar unter Menüpunkten */
#header #masthead[class*="nav-hover"] [id*="primary-menu"] li.menu-item a:after {
  background-color: var(--wp--preset--color--accent-primary) !important;
}

/* Varianten, die Rahmen/Border nutzen */
#masthead.nav-hover-2 [id*="primary-menu"] > li.menu-item > a:before,
#masthead.nav-hover-2 [id*="primary-menu"] > li.menu-item > a:after,
#masthead.nav-hover-6 [id*="primary-menu"] > li.menu-item > a:before,
#masthead.nav-hover-6 [id*="primary-menu"] > li.menu-item > a:after,
#masthead.nav-hover-8 [id*="primary-menu"] > li.menu-item > a:before,
#masthead.nav-hover-8 [id*="primary-menu"] > li.menu-item > a:after,
#masthead.nav-hover-3 [id*="primary-menu"] li.menu-item a:before,
#masthead.nav-hover-4 [id*="primary-menu"] li.menu-item a:before,
#masthead.nav-hover-5 [id*="primary-menu"] li.menu-item a:before,
#masthead.nav-hover-5 [id*="primary-menu"] li.menu-item a:after {
  border-color: var(--wp--preset--color--accent-primary) !important;
  background: var(--wp--preset--color--accent-primary) !important;
}

/* Aktiver/aktueller Menüpunkt farblich angleichen */
#header #masthead [id*="primary-menu"] li.current-menu-item > a,
#header #masthead [id*="primary-menu"] li.current_page_item > a {
  color: var(--wp--preset--color--text-base) !important;
}
#header #masthead [id*="primary-menu"] li.current-menu-item > a:after,
#header #masthead [id*="primary-menu"] li.current_page_item > a:after {
  background-color: var(--wp--preset--color--accent-primary) !important;
}

/* =========
 * 3) Unterstrich-Balken bei Überschriften & Widgets
 * (Atomion setzt hier :after-Balken)
 * ========= */
h1:after,
h2:after,
.widget-title:after,
.product-page-sections .section-headding:after,
#atomion-more-latest-posts h3:after {
  background-color: var(--wp--preset--color--accent-primary) !important;
}

/* Falls Zitate Balken vor/nach haben */
blockquote:before,
blockquote:after {
  background-color: var(--wp--preset--color--accent-primary) !important;
}

/* =========
 * 4) Breadcrumbs & diverse Link-Akzente
 * ========= */
#atomion-breadcrumbs a:hover,
#atomion-breadcrumbs a:focus {
  color: var(--wp--preset--color--accent-primary) !important;
  text-decoration-color: var(--wp--preset--color--accent-primary) !important;
}

/* =========
 * 5) Sicherheitsnetz gegen alte Primärfarbe (#37B9E3)
 * (falls irgendwo noch hart codiert)
 * ========= */
:root {
  /* optional: Falls Atomion irgendwo auf currentColor für Deko setzt */
  --atomion-primary: var(--wp--preset--color--accent-primary);
}

/* ============================================================
 * Bildunterschriften (Figcaption) – Akzent-Hintergrund + a11y
 * ============================================================ */

/* 1) Theme-Variablen mit sinnvollen Defaults */
:root{
  /* Standard: heller Akzent-Hintergrund + dunkler Text */
  --mh-caption-bg: var(--wp--preset--color--accent-tertiary);
  --mh-caption-text: var(--wp--preset--color--text-base);

  /* Alternative: dunkler Akzent-Hintergrund + heller Text (Opt-in) */
  --mh-caption-bg-dark: var(--wp--preset--color--accent-primary);
  --mh-caption-text-light: #fff;
}

/* 2) Basis-Stil für alle Bildunterschriften */
figure.wp-block-image,
figure { margin: 0; }

figure.wp-block-image img { display:block; margin:0; }

figure.wp-block-image figcaption,
figcaption.wp-element-caption{
  margin: .5rem auto 0;
  padding: .5rem .75rem;
  background: var(--mh-caption-bg);
  color: var(--mh-caption-text);
  font: 500 0.95rem/1.4 var(--font-base, "Source Sans Pro", system-ui, sans-serif);
  text-align: center;
  border-radius: .375rem;
}

/* Links im Figcaption */
figure.wp-block-image figcaption a,
figcaption.wp-element-caption a{
  color: inherit;                 /* erbt Textfarbe -> Kontrast bleibt */
  text-decoration: underline;
}
figure.wp-block-image figcaption a:hover,
figcaption.wp-element-caption a:hover{
  text-decoration: none;
}

/* 3) Opt-in für dunklen Akzent (weiße Schrift) – z. B. wenn Bild sehr hell ist */
figure.wp-block-image.is-style-caption-dark figcaption,
figcaption.wp-element-caption.is-caption-dark{
  background: var(--mh-caption-bg-dark);
  color: var(--mh-caption-text-light);
}

/* 4) Kollisionen mit Theme-Styles neutralisieren */
figure.wp-block-image figcaption,
figcaption.wp-element-caption{
  box-shadow: none !important;
  border: 0 !important;
}
/* ============================================================
 * Medien & Text: Textspalte auf volle Höhe + zentriert
 * (nur für den Wrapper .custom-product-wrapper.schutzgebuehr-produkt)
 * ============================================================ */

/* Medien & Text: gleiche Höhe am Desktop */
.wp-block-media-text {
  align-items: stretch;
}

/* Bild füllt nur am Desktop die Spaltenhöhe */
.wp-block-media-text:not(.is-stacked-on-mobile) .wp-block-media-text__media img {
  height: 100%;
  object-fit: cover;
  display: block;
}