/* ===============================
   MOBILE NAVBAR + FOOTER (Refactor)
   - Consolidates duplicate rules
   - Uses CSS variables for colors / sizing
   - Improves accessibility (focus-visible)
   - Safer SVG data-URIs (URL-encoded)
   - Minimizes !important (kept only where theme overrides likely)
   =============================== */

:root{
  /* Colors */
  --ce-dark:#14213D;
  --ce-accent:#2f7d0a;
  --ce-footer-grad-a:#fff6d9;
  --ce-footer-grad-b:#fff1c2;
  --ce-footer-border:#f1d79b;
  --ce-input-bg:#ffeec3;
  --ce-input-border:#f3dca1;
  --ce-input-border-focus:#e3b75e;
  --ce-button-bg:#8b5e21;
  --ce-button-fg:#fff;

  /* Sizing */
  --ce-topbar-h-mobile:52px;
  --ce-topbar-h-tablet:56px;
  --ce-icon:22px;
  --ce-hitpad:8px;
  --ce-gap-mobile:14px;
  --ce-gap-tablet:12px;
  --ce-badge-size:20px;
  --ce-badge-fz:12px;
}

/* ===== MOBILE NAVBAR REWORK ===== */
@media (max-width:768px){

  /* alte Header-Bausteine ausblenden (weißes Grid) */
  .main-header .logo,
  .main-header .woocommerce-product-search,
  .main-header .account,
  .main-header .cart_no{ display:none !important; }

  /* alter zusätzlicher Burger unter der grünen Leiste weg */
  .toggle-nav.mobile-menu{ display:none !important; }

  /* grüne Leiste als Container */
  #menu-box .header-menu{ position:relative; padding:0; }
  #menu-box .header-menu .container{
    padding-left:1px;
    padding-right:10px;
  }

  /* Topbar */
  .ce-mobile-topbar{
    display:flex; align-items:center; justify-content:space-between;
    min-height:var(--ce-topbar-h-mobile);
    padding:8px 6px;
	margin-left: 5px;
	  
  }

  /* Icons rechts */
  .ce-icons{ display:flex; align-items:center; gap:var(--ce-gap-mobile); }
  .ce-btn{
    background:none; border:0; padding:var(--ce-hitpad);
    line-height:1; position:relative; color:var(--ce-dark) !important;
    -webkit-tap-highlight-color:transparent;
  }

  /* CSS-Icons (falls keine <i>-Tags) */
  .ce-burger, .ce-search, .ce-cart-icon{
    display:inline-block; width:var(--ce-icon); height:var(--ce-icon);
    background:currentColor; opacity:.95;
    mask-repeat:no-repeat; mask-position:center; mask-size:contain;
    -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:contain;
  }

  /* URL-encoded SVGs to avoid parsing issues */
  .ce-burger{
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect y='3' width='24' height='3'/%3E%3Crect y='10' width='24' height='3'/%3E%3Crect y='17' width='24' height='3'/%3E%3C/svg%3E");
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect y='3' width='24' height='3'/%3E%3Crect y='10' width='24' height='3'/%3E%3Crect y='17' width='24' height='3'/%3E%3C/svg%3E");
  }
  .ce-search{
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Crect x='15' y='15' width='8' height='3' transform='rotate(45 15 15)'/%3E%3C/svg%3E");
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Crect x='15' y='15' width='8' height='3' transform='rotate(45 15 15)'/%3E%3C/svg%3E");
  }
  .ce-cart-icon{
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 4h2l2.5 10h9l2-6H7'/%3E%3Ccircle cx='10' cy='20' r='2'/%3E%3Ccircle cx='17' cy='20' r='2'/%3E%3C/svg%3E");
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 4h2l2.5 10h9l2-6H7'/%3E%3Ccircle cx='10' cy='20' r='2'/%3E%3Ccircle cx='17' cy='20' r='2'/%3E%3C/svg%3E");
  }

  /* falls FontAwesome-<i> genutzt wird */
  #menu-box .header-menu .ce-btn i{ color:var(--ce-dark) !important; }

  /* Warenkorb-Badge (position only; core styles unified below) */
  #menu-box .header-menu .ce-badge{ position:absolute; top:2px; right:2px; transform:translate(50%,-50%); }

  /* Suchpanel */
  .ce-search-panel[hidden]{ display:none !important; }
  .ce-search-panel{ background:#fff; padding:10px 0; }
  .ce-search-panel form{ margin:0; }
}

/* ===== TABLET ===== */
@media (min-width:769px) and (max-width:1024px){
  /* Container an Rand */
  #menu-box .header-menu .container{ padding-left:6px; padding-right:12px; }

  /* Topbar innen enger */
  .ce-mobile-topbar{ padding-left:0; padding-right:12px; min-height:var(--ce-topbar-h-tablet); }

  /* Icons */
  .ce-icons{ gap:var(--ce-gap-tablet); align-items:center; }
  .ce-btn{ padding:var(--ce-hitpad); color:var(--ce-dark) !important; line-height:1; }
  .ce-burger, .ce-search, .ce-cart-icon{ width:var(--ce-icon); height:var(--ce-icon); background:currentColor; }

  /* badge position (core styles unified below) */
  .ce-badge{ position:absolute; top:2px; right:2px; transform:translate(50%,-50%); }
}

/* ===== DESKTOP: mobile Elemente verstecken ===== */
@media (min-width:1025px){
  .ce-mobile-topbar,
  .ce-search-panel{ display:none !important; }
}

/* === Cart-Badge: Core Styles (shared) === */
/* Apply consistent size, typography, colors for both native and custom badges */
#menu-box .header-menu .ce-badge,
.main-header .cart_no .cart-value,
.header-menu .cart_no .cart-value{
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--ce-badge-size); min-width:var(--ce-badge-size);
  padding:0 6px; line-height:1; border-radius:999px;
  font-size:var(--ce-badge-fz); font-weight:700;
  background:var(--ce-accent); color:#fff; border:none;
}

/* Optional: Hover nicht umlackieren lassen */
.main-header .cart_no:hover .cart-value,
#menu-box .header-menu .ce-cart:hover .ce-badge{ background:var(--ce-accent) !important; color:#fff !important; }

/* ===== Accessibility: focus-visible for interactive controls ===== */
.ce-btn:focus-visible,
.ce-search-panel input:focus-visible,
.wpcf7 form.emil-form input[type="text"]:focus-visible,
.wpcf7 form.emil-form input[type="email"]:focus-visible,
.wpcf7 form.emil-form input[type="file"]:focus-visible,
.wpcf7 form.emil-form textarea:focus-visible{
  outline:2px solid var(--ce-input-border-focus);
  outline-offset:2px;
}

/* ===== Footer-Listen ===== */
footer .widget_block ul.wp-block-list,
#colophon .widget_block ul.wp-block-list,
.site-footer .widget_block ul.wp-block-list{
  list-style:none; padding-left:0; margin:0;
}

@media (min-width:768px) and (max-width:1199.98px){
  footer .widget_block ul.wp-block-list,
  #colophon .widget_block ul.wp-block-list,
  .site-footer .widget_block ul.wp-block-list{
    display:grid !important;
    grid-auto-flow:row;
    grid-template-columns:repeat(2, minmax(180px,1fr)) !important;
    gap:8px 40px; max-width:560px; margin:0 auto; text-align:left;
  }
  footer .widget_block ul.wp-block-list>li{ margin:0; padding:0; break-inside:avoid; }
  footer .widget_block ul.wp-block-list>li>a{ display:block; padding:4px 0; text-decoration:none; opacity:.9; }
  @media (hover:hover){
    footer .widget_block ul.wp-block-list>li>a:hover{ opacity:1; }
  }
}

@media (min-width:1200px){
  footer .widget_block ul.wp-block-list,
  #colophon .widget_block ul.wp-block-list,
  .site-footer .widget_block ul.wp-block-list{
    display:grid !important;
    grid-auto-flow:row;
    grid-template-columns:repeat(2, minmax(220px,1fr)) !important;
    gap:10px 56px; max-width:640px; margin:0 auto;
  }
  footer .widget_block ul.wp-block-list>li{ margin:0; padding:0; }
}

/* ===== Nur für das CF7-Formular mit html_class="emil-form" ===== */
/* Karte / Layout */
.wpcf7 form.emil-form .cf7-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px;
  border-radius:12px; background:linear-gradient(90deg,var(--ce-footer-grad-a) 0%, var(--ce-footer-grad-b) 100%);
  border:1px solid var(--ce-footer-border); max-width:760px;
}
.wpcf7 form.emil-form .cf7-col-full{ grid-column:1 / -1; }

/* Titel */
.wpcf7 form.emil-form .cf7-title{ margin:0 0 10px; font-weight:800; color:#5a3a12; }

/* Labels – SICHTBAR machen */
.wpcf7 form.emil-form .cf7-label{ display:block; margin:0 0 6px; color:#5a3a12; font-weight:700; }

/* Inputs */
.wpcf7 form.emil-form input[type="text"],
.wpcf7 form.emil-form input[type="email"],
.wpcf7 form.emil-form input[type="file"],
.wpcf7 form.emil-form textarea{
  width:100%; box-sizing:border-box; background:var(--ce-input-bg);
  border:2px solid var(--ce-input-border); border-radius:10px; padding:10px 12px; font-size:16px; outline:none;
}
.wpcf7 form.emil-form textarea{ min-height:120px; resize:vertical; }

/* Fokus */
.wpcf7 form.emil-form input[type="text"]:focus,
.wpcf7 form.emil-form input[type="email"]:focus,
.wpcf7 form.emil-form input[type="file"]:focus,
.wpcf7 form.emil-form textarea:focus{ border-color:var(--ce-input-border-focus); }

/* File-Button kompakter */
.wpcf7 form.emil-form input[type="file"]::file-selector-button,
.wpcf7 form.emil-form input[type="file"]::-webkit-file-upload-button{
  padding:6px 12px; font-size:14px; border-radius:8px;
  background:var(--ce-button-bg); color:var(--ce-button-fg); font-weight:700; cursor:pointer; margin-right:10px;
}

/* Submit */
.wpcf7 form.emil-form input[type="submit"]{
  border:none; padding:10px 18px; border-radius:10px;
  background:var(--ce-button-bg); color:var(--ce-button-fg); font-weight:700; cursor:pointer;
}
@media (hover:hover){
  .wpcf7 form.emil-form input[type="submit"]:hover{ filter:brightness(1.05); }
}

/* Responsiv: einspaltig auf kleinen Screens */
@media (max-width:640px){
  .wpcf7 form.emil-form .cf7-grid{ grid-template-columns:1fr; }
}

/* ===== Reduced Motion preference ===== */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}


/* =====================================
   MOBILE: Seiten-Gutter für Textinhalte
   - Zieht Inhalte auf Smartphones links/rechts etwas ein
   - Lässt Header/Navi/Footer unverändert (keine Doppel-Paddings)
   - Bewahrt Full‑Bleed-Elemente (.alignfull) weiterhin randlos
   ===================================== */
@media (max-width:768px){
  :root{ --ce-gutter:14px; }

  /* Globaler Einzug für typische WP-Wrapper */
  .site-content,
  .content-area,
  .site-main,
  .entry-content,
  .wp-site-blocks,
  .wrap,
  .container:not(#menu-box .container){
    padding-inline:var(--ce-gutter);
  }

  /* Full‑bleed Bereiche weiterhin randlos lassen */
  .alignfull,
  .wp-block-cover.alignfull,
  .wp-block-group.alignfull,
  .wp-block-media-text.alignfull,
  .wp-block-image.alignfull{
    margin-inline:calc(-1 * var(--ce-gutter));
    max-width:calc(100% + (var(--ce-gutter) * 2));
    width:auto;
  }

  /* Navigation/Header/Footer nicht beeinflussen */
  header, footer, #menu-box{ padding-inline:0 !important; }
}

/* ALTERNATIVE (Scoped): Nur anwenden, wo du die Klasse vergibst)
.u-mobile-gutters{ padding-inline:var(--ce-gutter); }
.u-mobile-gutters .alignfull{ margin-inline:calc(-1 * var(--ce-gutter)); max-width:calc(100% + (var(--ce-gutter) * 2)); }
*/

@media (max-width: 768px) {
  .ce-mobile-topbar .ce-logo {
    margin-left: calc(var(--ce-gutter) + 5px);
  }
}


/* ===== Produkt-Highlight (Bild links, Text rechts) ===== */
.ce-offer{
  display:grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  gap: 18px 28px;
  align-items: start;
  margin: 24px 0 8px;
}

.ce-offer__media img{
  width:100%; height:auto; display:block;
  border-radius:4px;
}

.ce-offer__title{ margin:0 0 8px; font-weight:800; }
.ce-accent-text{ color:#e67e22; } /* „Lesebuch“ orange, gern anpassen */

.ce-offer__lead{ margin:0 0 12px; opacity:.95; }

.ce-offer__badges{ display:flex; gap:10px; align-items:center; margin:6px 0 10px; }
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px; border-radius:999px; font-weight:700; font-size:13px; line-height:1;
}
.badge.-green{ background:#2f7d0a; color:#fff; }
.badge.-yellow{ background:#ffd34d; color:#263238; }

.ce-offer__cta{
  display:flex; flex-wrap:wrap; gap:12px 14px; align-items:center; margin-top:8px;
}
.ce-price{ font-weight:1000; }

.ce-buy-btn{
  border:none; border-radius:999px;
  padding:10px 16px; font-weight:800;
  background:#f4bf2a; color:#fff; cursor:pointer;
}
@media (hover:hover){
  .ce-buy-btn:hover{ filter:brightness(1.05); }
}

/* Responsive: auf Mobile stapeln */
@media (max-width:768px){
  .ce-offer{ grid-template-columns: 1fr; gap:14px; }
}

/* Shop-Seite: Standard-Produktliste + Sortierung ausblenden */
body.woocommerce-shop .woocommerce-result-count,
body.woocommerce-shop .woocommerce-ordering,
body.woocommerce-shop ul.products,
body.woocommerce-shop nav.woocommerce-pagination{
  display: none !important;
}

/* Bild-Badges innerhalb des Offer-Blocks */
.ce-offer__badges{
  display:flex;
  gap:10px;
  align-items:center;
  margin:6px 0 10px;
}

/* Grundstil für beide Badge-Bilder */
.ce-offer__badges .badge-img{
  display:block;
  height:44px;     /* visuelle Zielgröße der Badges */
  width:auto;
}

/* Falls die beiden Dateien unterschiedlich groß wirken, kannst du feinjustieren */
.ce-offer__badges .badge-img--age{ height:44px; }   /* "ab 3 Jahre" */
.ce-offer__badges .badge-img--pages{ height:44px; } /* "56 Seiten" */

@media (max-width:768px){
  .ce-offer__badges .badge-img{ height:38px; }      /* etwas kleiner auf Mobile */
}

/* --- CTA-Button im Offer-Block: gelbe Pille mit Text --- */
.ce-offer .ce-buy-btn,
.ce-offer a.add_to_cart_button,
.ce-offer a.button.product_type_simple,
.ce-offer .button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 10px 18px !important;
  min-height: 40px;
  min-width: 140px;                   /* macht ihn zur Pille statt Kreis */
  border: none !important;
  border-radius: 999px !important;
  background: #f4bf2a !important;     /* Gelb */
  color: #fff !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  white-space: nowrap;
  width: auto !important;             /* Theme-Festwerte überschreiben */
  height: auto !important;
  text-decoration: none !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
}

/* Theme-Overlays/Icons killen (machen sonst den runden Kreis) */
.ce-offer .ce-buy-btn::before,
.ce-offer .ce-buy-btn::after,
.ce-offer a.add_to_cart_button::before,
.ce-offer a.add_to_cart_button::after,
.ce-offer .button::before,
.ce-offer .button::after {
  content: none !important;
}

/* Falls das Theme das Icon als <i> oder <svg> im Button einfügt */
.ce-offer .button i,
.ce-offer .button svg {
  display: none !important;
}

/* Button-Text exakt zentrieren (Offer-Bereich) */
.ce-offer .ce-buy-btn,
.ce-offer a.add_to_cart_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;   /* horizontal zentrieren */
  text-align: center !important;
  text-indent: 0 !important;
  gap: 0 !important;

  /* Theme-Reservierung für Icon/Spinner neutralisieren */
  padding-left: 18px !important;
  padding-right: 18px !important;
  min-width: 140px;                     /* Pillenform beibehalten */
}

/* Eventuelle Pseudo-Icons / Spinner komplett entfernen */
.ce-offer .ce-buy-btn::before,
.ce-offer .ce-buy-btn::after,
.ce-offer a.add_to_cart_button::before,
.ce-offer a.add_to_cart_button::after {
  content: none !important;
}

/* Falls das Theme ein <span> im Button mit Abständen einfügt */
.ce-offer .ce-buy-btn > span,
.ce-offer a.add_to_cart_button > span {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== Produkt-Highlight gemäß Vorlage ===== */
.ce-offer{
  max-width: 1100px;
  margin: 0 auto 28px;
  padding-inline: var(--ce-gutter, 14px);
}

.ce-offer__title{
  margin: 0 0 8px;
  font-weight: 800;
  line-height: 1.15;
}
.t-orange{ color:#e67e22; }
.t-green{ color:#2f7d0a; }

.ce-offer__grid{
  display: grid;
  grid-template-columns: minmax(240px, 360px) 1fr; /* links Bild, rechts Text */
  gap: 18px 28px;
  align-items: start;
}

/* Linke Spalte: Bild + CTA untereinander */
.ce-offer__left{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.ce-offer__media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* Rechte Spalte: Text + Badges */
.ce-offer__lead{
  margin: 0 0 10px;
  color: #8c8c8c;           /* hellgrau wie Vorlage */
  line-height: 1.5;
  max-width: 72ch;
}
.ce-offer__text{ margin: 0 0 10px; line-height: 1.55; }

/* Bild-Badges */
.ce-offer__badges{
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 6px 0 10px;
}
.ce-offer__badges .badge-img{
  display: block;
  height: 44px;
  width: auto;
}
@media (max-width:768px){
  .ce-offer__badges .badge-img{ height: 38px; }
}

/* CTA unter dem Bild */
.ce-offer__cta{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 4px;
}
.ce-price{
  font-weight: 1000;
  color: #2b6cb0;          /* Blau wie Vorlage */
}

/* Gelber „Jetzt kaufen“-Button (Text mittig, keine Theme-Icons) */
.ce-offer .ce-buy-btn,
.ce-offer a.add_to_cart_button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 18px !important;
  min-width: 140px;
  border: none !important;
  border-radius: 999px !important;
  background: #f4bf2a !important;
  color: #fff !important;
  font-weight: 800 !important;
  line-height: 0.3 !important;
  text-decoration: none !important;
}
.ce-offer .ce-buy-btn::before,
.ce-offer .ce-buy-btn::after,
.ce-offer a.add_to_cart_button::before,
.ce-offer a.add_to_cart_button::after{ content: none !important; }
.ce-offer .ce-buy-btn i,
.ce-offer .ce-buy-btn svg{ display: none !important; }

@media (max-width:768px){
  .ce-offer__grid{ grid-template-columns: 1fr; gap: 14px; }
}

/* CTA-Reihe: Preis & Button auf derselben Linie */
.ce-offer .ce-offer__cta{
  align-items: baseline;   /* statt center */
}

/* Button: normale Zeilenhöhe, damit die Baseline stimmt */
.ce-offer .ce-buy-btn,
.ce-offer a.add_to_cart_button{
  line-height: 1.1 !important;   /* vorher 0.3 -> macht Schieflage */
}

/* Feintuning (optional): minimal nach unten schubsen */
@media (min-width: 769px){
  .ce-offer .ce-buy-btn{ margin-top: 2px; } /* 0–4px je nach Optik anpassen */
}

.ce-offer .ce-offer__cta{ align-items: center; }

/* Button: absolut mittiger Text via fixe Höhe */
.ce-offer .ce-buy-btn,
.ce-offer a.add_to_cart_button{
  height: 48px;                         /* fixe Pillenhöhe */
  padding: 0 22px !important;           /* vertikal 0, horizontal 22 */
  line-height: 1 !important;            /* saubere Vertikalmitte */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle;
}

/* Preis & Button auf Linie + feiner Down-Nudge */
.ce-offer .ce-offer__cta{ align-items: baseline; }
.ce-offer .ce-buy-btn{ transform: translateY(2px); } /* bei Bedarf 1–3px justieren */

/* Button bleibt als Pille, Text wird fein nach oben geschoben */
.ce-offer .ce-buy-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:48px;                 /* fix, damit die Form stabil bleibt */
  padding:0 22px !important;
  border-radius:999px !important;
  background:#f4bf2a !important;
  color:#fff !important;
  font-weight:800 !important;
  line-height:1 !important;
  text-decoration:none !important;
}

/* Text-Feinjustierung: -1px bis -2px je nach Optik */
.ce-offer .ce-buy-btn .btn-label{
  display:block;
  transform: translateY(-1px); /* falls nötig: -2px */
}

/* CTA-Reihe auf Grundlinie, Button ggf. minimal runter */
.ce-offer .ce-offer__cta{ align-items: baseline; }
.ce-offer .ce-buy-btn{ transform: translateY(2px); } /* 1–3px je nach Optik */

/* === STRUCTURE OVERRIDE: Vorlage exakt nachbauen (ohne vorherigen Code zu löschen) === */
.ce-offer{
  display: block !important;                         /* frühere .ce-offer{display:grid} neutralisieren */
  max-width: 1100px;
  margin: 0 auto 28px;
  padding-inline: var(--ce-gutter, 14px);
}
.ce-offer__grid{
  display: grid !important;
  grid-template-columns: minmax(240px, 360px) 1fr;   /* links Bild, rechts Text */
  column-gap: 28px;
  row-gap: 18px;
  align-items: start;
}
.ce-offer__left{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.ce-offer__media img{ display:block; width:100%; height:auto; border-radius:6px; }

.ce-offer__title{ margin:0 0 8px; font-weight:800; line-height:1.15; }
.t-orange{ color:#e67e22; } .t-green{ color:#2f7d0a; }

.ce-offer__lead{ margin:0 0 10px; color:#8c8c8c; line-height:1.5; max-width:72ch; }
.ce-offer__text{ margin:0 0 10px; line-height:1.55; }

.ce-offer__badges{ display:flex; gap:10px; align-items:center; margin:6px 0 10px; }
.ce-offer__badges .badge-img{ display:block; height:44px; width:auto; }
@media (max-width:768px){
  .ce-offer__grid{ grid-template-columns: 1fr; row-gap:14px; }
  .ce-offer__badges .badge-img{ height:38px; }
}

/* CTA unter dem Bild (Preis + Button auf einer Linie) */
.ce-offer .ce-offer__cta{ display:flex; flex-wrap:wrap; gap:14px; align-items:baseline; }
.ce-price{ font-weight:1000; color:#2b6cb0; }

/* Gelber Button – Text mittig, kleiner Down-Nudge für Linie mit Preis */
.ce-offer .ce-buy-btn{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  height:48px; padding:0 22px !important; min-width:140px;
  border:none !important; border-radius:999px !important;
  background:#f4bf2a !important; color:#fff !important; font-weight:800 !important; line-height:1 !important;
  text-decoration:none !important; box-shadow:0 6px 0 rgba(0,0,0,.10);
  transform: translateY(2px);               /* 1–3px je nach Optik */
}
.ce-offer .ce-buy-btn::before,
.ce-offer .ce-buy-btn::after{ content:none !important; }
.ce-offer .ce-buy-btn .btn-label{ display:block; transform: translateY(-1px); } /* Text minimal höher */


/* ===== Vorlage-Layout mit Grid-Areas (ohne alten Code zu löschen) ===== */
.ce-offer--layout{
  /* Wrapper-Breite & Einzug */
  max-width: 1100px;
  margin: 0 auto 28px;
  padding-inline: var(--ce-gutter, 14px);

  /* Der Wrapper selbst ist das Grid */
  display: grid !important;
  grid-template-columns: minmax(240px, 360px) 1fr;     /* links Bild, rechts Text */
  grid-template-areas:
    "title title"
    "lead  lead"
    "left  right";
  column-gap: 28px;
  row-gap: 16px;
  align-items: start;
}

/* Bereiche zuweisen */
.ce-offer--layout .ce-offer__title { grid-area: title; margin:0 0 6px; font-weight:800; line-height:1.15; }
.ce-offer--layout .ce-offer__lead  { grid-area: lead;  margin:0 0 6px; color:#8c8c8c; line-height:1.5; max-width:72ch; }
.ce-offer--layout .ce-offer__left  { grid-area: left;  display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.ce-offer--layout .ce-offer__right { grid-area: right; }

.t-orange{ color:#e67e22; } .t-green{ color:#2f7d0a; }

/* Bild */
.ce-offer--layout .ce-offer__media img{
  display:block; width:100%; height:auto; border-radius:6px;
}

/* Fließtext rechts */
.ce-offer--layout .ce-offer__text{ margin:0 0 10px; line-height:1.55; }

/* Badges rechts unter dem Text */
.ce-offer--layout .ce-offer__badges{
  display:flex; gap:10px; align-items:center; margin:6px 0 10px;
}
.ce-offer--layout .ce-offer__badges .badge-img{ display:block; height:44px; width:auto; }

/* CTA unter dem Bild: Preis + Button auf Grundlinie */
.ce-offer--layout .ce-offer__cta{
  display:flex; flex-wrap:wrap; gap:14px; align-items:baseline;
}
.ce-offer--layout .ce-price{ font-weight:1000; color:#2b6cb0; }

/* Gelber Button, Text leicht höher + minimaler Down-Nudge gesamt */
.ce-offer--layout .ce-buy-btn{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  height:48px; padding:0 22px !important; min-width:140px;
  border:none !important; border-radius:999px !important;
  background:#f4bf2a !important; color:#fff !important; font-weight:800 !important; line-height:1 !important;
  text-decoration:none !important; box-shadow:0 6px 0 rgba(0,0,0,.10);
  transform: translateY(2px);
}
.ce-offer--layout .ce-buy-btn::before,
.ce-offer--layout .ce-buy-btn::after{ content:none !important; }
.ce-offer--layout .ce-buy-btn .btn-label{ display:block; transform: translateY(-1px); }

@media (max-width: 768px){
  .ce-offer--layout{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "lead"
      "left"
      "right";
    row-gap: 14px;
  }
  .ce-offer--layout .ce-offer__badges .badge-img{ height:56px; }
}

/* Preis + Button näher ans Bild UND mittig unter dem Bild */
.ce-offer--layout .ce-offer__left{
  gap: 8px; /* vorher 14px – kleiner Abstand zwischen Bild und CTA */
}

.ce-offer--layout .ce-offer__cta{
  width: 100%;                 /* volle Spaltenbreite einnehmen */
  justify-content: center;     /* Inhalt horizontal zentrieren */
  align-items: baseline;       /* Preis & Button auf einer Linie */
  text-align: center;          /* Fallback für Themes ohne Flex-JS */
}

/* Mini-Feintuning: Button 1px nach unten, Text 1px nach oben */
.ce-offer--layout .ce-buy-btn{ transform: translateY(1px); }
.ce-offer--layout .ce-buy-btn .btn-label{ transform: translateY(-1px); }

/* CTA (Preis + Button) vertikal nach oben schieben – feinjustierbar */
.ce-offer--layout{ --cta-up: 12px; }                  /* 8–16px probieren */

.ce-offer--layout .ce-offer__left{ gap: 6px; }        /* enger an das Bild ran */
.ce-offer--layout .ce-offer__cta{
  transform: translateY(calc(-1 * var(--cta-up)));
  justify-content: center;                            /* mittig unter dem Bild */
  align-items: baseline;                              /* Preis & Button auf Linie */
}

/* Verhindert doppelten Versatz, falls der Button schon „genudged“ wurde */
.ce-offer--layout .ce-buy-btn{ transform: none; }     /* Button selbst nicht mehr verschieben */
.ce-offer--layout .ce-buy-btn .btn-label{ transform: translateY(-1px); } /* Text minimal höher */

/* Auf Mobile lieber ohne Up-Shift */
@media (max-width:768px){
  .ce-offer--layout .ce-offer__cta{ transform: none; }
}

/* Badges in der rechten Spalte horizontal zentrieren */
.ce-offer--layout .ce-offer__right{
  display: flex;                 /* nur für den Inhalt dieser Spalte */
  flex-direction: column;
}

.ce-offer--layout .ce-offer__badges{
  align-self: center;            /* Block zentrieren */
  justify-content: center;       /* Items in der Mitte anordnen */
  width: 100%;
  margin-top: 8px;               /* ggf. 4–12px anpassen */
}

/* Badges unter dem Text zentrieren – Mitte bezogen auf Textbreite */
.ce-offer--layout .ce-offer__text{ max-width:72ch; }   /* gleiche Breite wie Lead */
.ce-offer--layout .ce-offer__badges{
  justify-content: center;         /* Inhalte zentrieren */
  max-width: 72ch;                 /* gleiche Breite wie der Text darüber */
  margin: 6px auto 10px;           /* auto = horizontal mittig */
}

/* Nur rechten Text + Badges vertikal nach unten schieben */
.ce-offer--layout{ --right-nudge: 60px; } /* nach Bedarf 10–24px */

.ce-offer--layout .ce-offer__right{
  transform: translateY(var(--right-nudge));
}

/* Auf Mobile nicht verschieben */
@media (max-width:768px){
  .ce-offer--layout .ce-offer__right{ transform: none; }
}

/* Normaler Fließtext im Offer-Bereich: 18px & schwarz */
.ce-offer--layout .ce-offer__lead,
.ce-offer--layout .ce-offer__text,
.ce-offer--layout p,
.ce-offer--layout li{
  font-size: 18px;
  color: #000;
  line-height: 1.55;
}

/* Links im Text übernehmen die gleiche Farbe (optional) */
.ce-offer--layout .ce-offer__right a{
  color: #000;
}

/* Titelgröße im Offer-Block */
.ce-offer--layout .ce-offer__title{
  font-size: 30px !important;
  line-height: 1.15;
}

/* ===== Malbücher – Abschnitt ===== */
.ce-malbuecher{
  max-width: 1100px;
  margin: 0 auto 36px;
  padding-inline: var(--ce-gutter, 14px);
}
.ce-malbuecher__title{
  font-size: 30px;
  font-weight: 800;
  margin: 0 0 6px;
  line-height: 1.15;
}
.t-pink{ color:#d94aa6; }
.t-green{ color:#2f7d0a; }

.ce-malbuecher__lead{
  margin: 0 0 16px;
  color: #8c8c8c;
  line-height: 1.5;
}

/* Grid mit zwei Büchern nebeneinander */
.ce-malbuecher__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 40px;
  align-items: start;
}
.ce-book{
  position: relative;
  padding-top: 28px; /* Platz für das Tag */
}
.ce-book__tag{
  position: absolute;
  top: 0; left: 0;
  transform: translateY(-50%);
  background: #2f7d0a;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Inhalt: links Text, rechts Bild */
.ce-book__content{
  display: grid;
  grid-template-columns: 1fr minmax(180px, 280px);
  gap: 14px 20px;
  align-items: start;
}
.ce-book__media img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* Typo & Textfarben gemäß Vorgaben */
.ce-book__text{ color:#000; }
.ce-book__text,
.ce-book__desc{ font-size: 18px; line-height: 1.55; }
.ce-book__name{ margin: 0; font-weight: 800; font-size: 18px; }
.ce-book__subtitle{ margin: 0 0 6px; }
.ce-book__desc{ margin: 0 0 8px; }

/* Meta: Preis + Bild-Badges */
.ce-book__meta{
  display: flex; flex-wrap: wrap;
  gap: 10px 12px; align-items: center;
  margin-top: 6px;
}
.ce-book__price{ font-weight: 700; color: #2b6cb0; }
.badge-img{ height: 36px; width: auto; display: block; }

/* Responsive */
@media (max-width: 900px){
  .ce-malbuecher__grid{ grid-template-columns: 1fr; gap: 24px; }
  .ce-book__content{ grid-template-columns: 1fr; }
  .ce-book__media{ order: -1; } /* Bild vor Text auf Mobile */
  .badge-img{ height: 32px; }
}

/* ===== Malbücher v2 – Struktur exakt wie Vorlage ===== */
.ce-malbuecher.v2{
  max-width: 1100px;
  margin: 0 auto 36px;
  padding-inline: var(--ce-gutter, 14px);
}
.ce-malbuecher__title{ font-size:30px; font-weight:800; margin:0 0 6px; line-height:1.15; }
.ce-malbuecher__lead{ margin:0 0 18px; color:#8c8c8c; line-height:1.5; }
.t-pink{ color:#d94aa6; } .t-green{ color:#2f7d0a; }

/* 2 Spalten: links Buch 1, rechts Buch 2 */
.mb-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px 44px;
  align-items:start;
}

/* Jede Kachel */
.mb-item{ position:relative; padding-top:32px; }

/* Demnächst-Pille zentriert über der Kachel */
.mb-tag{
  position:absolute; left:50%; top:0; transform:translate(-50%,-50%);
  background:#2f7d0a; color:#fff; font-weight:700; font-size:16px;
  padding:10px 18px; border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.08);
}

/* Inneres 2-Spalten-Layout je Buch */
.mb-card{
  display:grid;
  grid-template-columns: 1fr minmax(220px, 300px); /* Text | Cover */
  gap: 18px 24px;
  align-items:center;
}
.mb-card.is-reverse{
  grid-template-columns: minmax(220px, 300px) 1fr;  /* Cover | Text */
}

/* Cover */
.mb-media img{
  display:block; width:100%; height:auto; border-radius:8px;
}

/* Typo im Eintrag (18 px, schwarz) */
.mb-text, .mb-desc{ font-size:18px; line-height:1.55; color:#000; }
.mb-name{ margin:0; font-weight:800; font-size:18px; }
.mb-sub{ margin:2px 0 8px; }

/* Preis + runde Badges */
.mb-meta{
  display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center; margin-top:8px;
}
.mb-price{ font-weight:700; color:#2b6cb0; }
.badge-img{ height:36px; width:auto; display:block; }

/* Responsive */
@media (max-width: 980px){
  .mb-grid{ grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px){
  .mb-card,
  .mb-card.is-reverse{ grid-template-columns: 1fr; gap: 12px; }
  .mb-media{ order:-1; }             /* Cover zuerst auf Mobile */
  .badge-img{ height:32px; }
}

/* ===========================
   MALBÜCHER (nur Layout/Optik)
   =========================== */

/* Section-Breite & Typo */
.ce-malbuecher.v2{
  max-width: 1100px;
  margin: 0 auto 36px;
  padding-inline: var(--ce-gutter, 14px);
}
.ce-malbuecher.v2 .ce-malbuecher__title{ font-size:30px; font-weight:800; line-height:1.15; margin:0 0 6px; }
.ce-malbuecher.v2 .ce-malbuecher__lead{ margin:0 0 18px; color:#8c8c8c; line-height:1.5; }
.t-pink{ color:#d94aa6; }
.t-green{ color:#2f7d0a; }

/* 2 Spalten – links Buch 1, rechts Buch 2 (großzügige Abstände) */
.ce-malbuecher.v2 .mb-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  row-gap: 44px;
  align-items:start;
}

/* Jede Buch-Kachel reserviert Platz fürs Tag oben */
.ce-malbuecher.v2 .mb-item{
  position:relative;
  padding-top: 36px; /* Platz für "Demnächst" */
}

/* "Demnächst"-Pille zentriert über der Kachel, groß wie in der Vorlage */
.ce-malbuecher.v2 .mb-tag{
  position:absolute;
  left:50%; top:0;
  transform: translate(-50%,-50%);
  background:#2f7d0a; color:#fff;
  font-weight:700; font-size:18px;
  padding:10px 22px;
  border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  white-space:nowrap;
}

/* Inneres Layout je Buch:
   Buch 1 = Text | Cover, Buch 2 (is-reverse) = Cover | Text */
.ce-malbuecher.v2 .mb-card{
  display:grid;
  grid-template-columns: 1fr minmax(260px, 340px); /* Text | Cover */
  column-gap: 28px;
  row-gap: 16px;
  align-items:center; /* vertikal schön mittig */
}
.ce-malbuecher.v2 .mb-card.is-reverse{
  grid-template-columns: minmax(260px, 340px) 1fr;  /* Cover | Text */
}

/* Covers groß & einheitlich */
.ce-malbuecher.v2 .mb-media{ width:100%; max-width: 340px; }
.ce-malbuecher.v2 .mb-media img{
  display:block; width:100%; height:auto;
  border-radius:8px;
}

/* Textseite: 18px schwarz wie gewünscht */
.ce-malbuecher.v2 .mb-text,
.ce-malbuecher.v2 .mb-desc{
  font-size:18px; line-height:1.55; color:#000;
}
.ce-malbuecher.v2 .mb-name{ margin:0; font-weight:800; font-size:18px; }
.ce-malbuecher.v2 .mb-sub{ margin:2px 0 8px; }
.ce-malbuecher.v2 .mb-desc{ margin:0 0 10px; }

/* Preis + Badges darunter (wie links in der Vorlage) */
.ce-malbuecher.v2 .mb-meta{
  display:flex; flex-wrap:wrap;
  gap:10px 12px; align-items:center;
  margin-top:8px;
}
.ce-malbuecher.v2 .mb-price{ font-weight:700; color:#2b6cb0; }
.ce-malbuecher.v2 .badge-img{ height:44px; width:auto; display:block; }

/* RESPONSIVE – untereinander stapeln */
@media (max-width: 980px){
  .ce-malbuecher.v2 .mb-grid{ grid-template-columns:1fr; column-gap:0; row-gap:32px; }
}
@media (max-width: 640px){
  .ce-malbuecher.v2 .mb-card,
  .ce-malbuecher.v2 .mb-card.is-reverse{ grid-template-columns:1fr; }
  .ce-malbuecher.v2 .mb-media{ order:-1; margin-inline:auto; } /* Cover zuerst & mittig */
  .ce-malbuecher.v2 .badge-img{ height:36px; }
}

/* ===== MALBÜCHER: harte Layout-Overrides (ohne HTML-Änderung) ===== */
section.ce-malbuecher.v2{
  max-width: 1100px;
  margin: 0 auto 36px;
  padding-inline: var(--ce-gutter, 14px);
}

/* 2 Spalten nebeneinander – erzwingen */
section.ce-malbuecher.v2 > .mb-grid{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  column-gap: 56px !important;
  row-gap: 44px !important;
  align-items: start !important;
}

/* Jedes Buch: Platz fürs Tag oben */
section.ce-malbuecher.v2 .mb-item{
  position: relative;
  padding-top: 40px !important;
}

/* "Demnächst"-Pille zentriert über der Kachel */
section.ce-malbuecher.v2 .mb-tag{
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -50%);
  background: #2f7d0a; color:#fff;
  font-weight: 700; font-size: 18px;
  padding: 10px 22px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  white-space: nowrap;
}

/* Inneres Grid je Buch */
section.ce-malbuecher.v2 .mb-card{
  display: grid !important;
  grid-template-columns: 1fr minmax(260px,340px) !important; /* Text | Cover */
  column-gap: 28px !important;
  row-gap: 16px !important;
  align-items: start !important;  /* Cover oben ausrichten */
}
section.ce-malbuecher.v2 .mb-card.is-reverse{
  grid-template-columns: minmax(260px,340px) 1fr !important; /* Cover | Text */
}

/* Cover groß und konsistent */
section.ce-malbuecher.v2 .mb-media{
  width: 100% !important;
  max-width: 340px !important;
  justify-self: center;          /* in seiner Spalte mittig */
}
section.ce-malbuecher.v2 .mb-media img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 8px;
}

/* Typo (18 px, schwarz) */
section.ce-malbuecher.v2 .mb-text,
section.ce-malbuecher.v2 .mb-desc{
  font-size: 18px !important;
  line-height: 1.55 !important;
  color: #000 !important;
}
section.ce-malbuecher.v2 .mb-name{ margin:0; font-weight:800; font-size:18px; }
section.ce-malbuecher.v2 .mb-sub{ margin:2px 0 8px; }
section.ce-malbuecher.v2 .mb-desc{ margin:0 0 10px; }

/* Preis + Badges unter dem Text */
section.ce-malbuecher.v2 .mb-meta{
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  margin-top: 8px;
}
section.ce-malbuecher.v2 .mb-price{ font-weight:700; color:#2b6cb0; }
section.ce-malbuecher.v2 .badge-img{ height: 44px; width: auto; display: block; }

/* Responsive – untereinander */
@media (max-width: 980px){
  section.ce-malbuecher.v2 > .mb-grid{ grid-template-columns: 1fr !important; row-gap: 32px !important; }
}
@media (max-width: 640px){
  section.ce-malbuecher.v2 .mb-card,
  section.ce-malbuecher.v2 .mb-card.is-reverse{ grid-template-columns: 1fr !important; }
  section.ce-malbuecher.v2 .mb-media{ order: -1; margin-inline: auto; }
  section.ce-malbuecher.v2 .badge-img{ height: 36px; }
}

/* Nur dieser Button: im Block unter "Erweitert" die Klasse 'btn-zum-buch' eintragen */
.btn-zum-buch.wp-block-button__link {
  background: var(--wp--preset--color--luminous-vivid-amber, #f4bf2a);
  color: #ffffff !important;
  border: none;
  border-radius: 9999px;         /* macht die Pille */
  padding: 8px 16px;             /* ~38–40px Höhe bei normaler Schrift */
  font-weight: 700;
  font-size: 16px;
  line-height: 1;                /* kompakt */
  text-decoration: none !important;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;                   /* Platz, falls ein Icon kommt */
  transition: transform .08s ease, background-color .15s ease, filter .15s ease;
}

/* Hover/Focus für etwas Feedback */
.btn-zum-buch.wp-block-button__link:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}
.btn-zum-buch.wp-block-button__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* 1) Grüne "Demnächst"-Pille */
.badge-pill .wp-block-button__link{
 
/* Grün anpassen */
  color: #fff !important;
  border-radius: 9999px;         /* Pille */
  padding: 6px 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
}

/* 2) Blaue Preiszeile */
.price-blue{
  color: #2a73d9;                /* Blau anpassen */
  font-weight: 700;
}

/* ===================== MALBÜCHER: CSS ===================== */
.mb-section{
  --blue: #1f86e0;
  --green: #26c083;
  --text: #263238;
  --muted: #5b6b75;

  color: var(--text);
}
.mb-title{ margin: 0 0 .25rem; font-size: 1.6rem; line-height: 1.25; }
.mb-lead{ margin: 0 0 1.25rem; color: var(--muted); }

.t-blue{ color: var(--blue); }
.t-green{ color: var(--green); }

/* row mit zwei Karten */
.mb-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1.75rem;
  align-items: start;
}

/* Karte */
.mb-card{ display: block; }
.mb-card__badge{ margin-bottom: .5rem; text-align: left; }

/* „Demnächst“-Pille */
.pill{
  display: inline-block;
  padding: .5rem .9rem;
  border-radius: 9999px;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  line-height: 1;
}

/* Grid: Bild + Text */
.mb-card__grid{
  display: grid;
  grid-template-columns: auto 1fr; /* Bild links, Text rechts */
  gap: 1.25rem;
  align-items: start;
}
.mb-card--media-right .mb-card__grid{
  grid-template-columns: 1fr auto; /* Text links, Bild rechts */
}
.mb-card--media-right .mb-card__media{ order: 2; }

/* Bild */
.mb-card__media{ margin: 0; }
.mb-card__media img{ display:block; height:auto; max-width: 210px; }

/* Textbereich */
.mb-card__body{ display: flex; flex-direction: column; gap: .35rem; }
.mb-card__title{ margin: 0; }
.mb-card__subtitle{
  color: var(--blue);
  text-decoration: none;
  font-weight: 700;
}
.mb-card__subtitle:hover{ text-decoration: underline; }
.mb-card__desc{ margin: 0; }

/* Preis in Blau */
.price-blue{
  margin: .35rem 0 0;
  color: var(--blue);
  font-weight: 800;
}

/* Badges nebeneinander, zentriert am Textblock */
.mb-card__badges{
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-top: .35rem;
}
.badge-img{ width: 56px; height: 56px; }

/* ----------------- Responsive ----------------- */
@media (max-width: 860px){
  .mb-row{ grid-template-columns: 1fr; }
  .mb-card__badge{ text-align: center; }
  .mb-card__grid{
    grid-template-columns: 1fr;          /* Bild über Text */
    justify-items: center;
    text-align: left;
  }
  .mb-card--media-right .mb-card__media{ order: 0; }
}

/* ===== Emil – Malbücher: Struktur & Ausrichtung ===== */
.mb-section .mb-row{
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.mb-section .mb-card{
  flex: 1 1 0;
  max-width: 560px;
}

/* Bild + Text in der Karte */
.mb-section .mb-card__grid{
  display: grid;
  grid-template-columns: 220px 1fr; /* Bild links, Text rechts */
  column-gap: 24px;
  align-items: start;
}
.mb-section .mb-card__media img{
  width: 220px;
  height: auto;
  display: block;
}

/* Zweite Karte: Bild rechts */
.mb-section .mb-card--media-right .mb-card__grid{
  grid-template-columns: 1fr 220px;
}

/* „Demnächst“-Pille exakt über dem Cover */
.mb-section .mb-card__badge{
  width: 220px;
  text-align: center;
  margin: 0 0 10px 0;
}
.mb-section .mb-card--media-right .mb-card__badge{
  margin-left: auto;  /* schiebt die Pille zur Bildspalte (rechts) */
}

/* Badges unter dem Text */
.mb-section .mb-card__badges{
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 6px;
}
.mb-section .badge-img{ width:56px; height:56px; }

/* Responsive */
@media (max-width: 860px){
  .mb-section .mb-row{ flex-direction: column; gap: 28px; }
  .mb-section .mb-card{ max-width: none; }
  .mb-section .mb-card__grid{
    grid-template-columns: 1fr;   /* Bild über Text */
    justify-items: center;
    text-align: left;
  }
  .mb-section .mb-card__badge{ width:auto; margin-left:0; }
}

/* ===== Typografie-Anpassung für den Malbücher-Block ===== */
.mb-section{
  --text: #000;        /* Normaler Text: schwarz */
  font-size: 18px;     /* Basis/Fließtext */
}

.mb-section .mb-title{
  font-size: 30px;     /* Überschrift */
  line-height: 1.25;
  margin-bottom: .25rem;
}

/* Einleitung & Fließtexte sicher auf schwarz und 18px */
.mb-section .mb-lead,
.mb-section .mb-card__desc,
.mb-section .mb-card__body p{
  color: var(--text);
  font-size: 18px;
}

/* optional: Untertitel-Link behält Blau, nur Größe angleichen */
.mb-section .mb-card__subtitle{
  font-size: 18px;
}

/* Preis bleibt blau, nur Größe angleichen */
.mb-section .price-blue{ font-size: 18px; }

/* Rechter Block (2. Karte) wie der linke: Badge oben, Bild links, Text rechts */
.mb-section .mb-row .mb-card:nth-child(2){
  margin-top: 32px; /* Block etwas weiter nach unten versetzen */
}

/* Grid wieder Bild links / Text rechts */
.mb-section .mb-row .mb-card:nth-child(2) .mb-card__grid{
  grid-template-columns: 220px 1fr;   /* gleiche Spalten wie links */
}

/* Bild nicht mehr nach rechts umordnen */
.mb-section .mb-row .mb-card:nth-child(2) .mb-card__media{
  order: 0;
}
.mb-section .mb-row .mb-card:nth-child(2) .mb-card__media img{
  width: 220px; height: auto; display: block;
}

/* "Demnächst"-Pille exakt über dem Cover zentriert */
.mb-section .mb-row .mb-card:nth-child(2) .mb-card__badge{
  width: 220px;
  text-align: center;
  margin: 0 0 30px 0;
}

/* Desktop: rechten Inhalt der 1. Karte vertikal zentrieren */
@media (min-width: 861px){
  .mb-section .mb-row .mb-card:first-child .mb-card__body{
    align-self: center;              /* zentriert in Höhe des Covers */
  }
}

/* Feintuning (optional): ein klein wenig weiter nach unten schieben */
@media (min-width: 861px){
  .mb-section .mb-row .mb-card:first-child .mb-card__body{
    transform: translateY(6px);      /* Wert 0–12px nach Geschmack anpassen */
  }
  .mb-section .mb-row .mb-card:first-child .mb-card__badges{
    margin-top: 10px;                /* Abstand unter dem Preis */
  }
}

/* ===== Vertikal zentrieren: Text/Braches neben dem Cover ===== */
@media (min-width: 861px){
  /* Nur Karte 1 (linkes Buch): rechten Inhalt vertikal mittig */
  .mb-section .mb-row .mb-card:first-child .mb-card__grid{
    align-items: center !important;     /* Grid-Kinder dürfen mittig sitzen */
  }
  .mb-section .mb-row .mb-card:first-child .mb-card__media{
    align-self: start !important;       /* Cover bleibt oben */
  }
  .mb-section .mb-row .mb-card:first-child .mb-card__body{
    align-self: center !important;      /* Text+Badges mittig zur Cover-Höhe */
    transform: translateY(6px);         /* Feintuning: +/- anpassen (0–12px) */
  }
}

/* === rechte Karte bündig wie linke === */
.mb-section .mb-row .mb-card:nth-child(2){
  margin-top: 0;                 /* Versatz weg */
}

/* Pille-Abstand identisch wie links */
.mb-section .mb-row .mb-card:nth-child(2) .mb-card__badge{
  margin: 0 0 10px 0;            /* statt 30px */
}

/* Layout der 2. Karte bleibt Bild links | Text rechts */
.mb-section .mb-row .mb-card:nth-child(2) .mb-card__grid{
  grid-template-columns: 220px 1fr;
}
.mb-section .mb-row .mb-card:nth-child(2) .mb-card__media{ order: 0; }
.mb-section .mb-row .mb-card:nth-child(2) .mb-card__media img{
  width: 220px; height: auto; display: block;
}

/* Abstand UNTER der gesamten Section verkleinern */
.ce-offer--layout{
  margin: 0 auto 12px !important;   /* statt 28px */
  padding-bottom: 0 !important;     /* falls Padding gesetzt wurde */
  row-gap: 10px;                     /* optional: Reihenabstand im Grid kleiner */
}

/* Letztes Element innen ohne zusätzlichen Margin */
.ce-offer--layout > *:last-child{ margin-bottom: 0 !important; }
.ce-offer--layout .ce-offer__right > *:last-child{ margin-bottom: 0 !important; }

/* Malbücher: Preis wie unten (schwarz, größer) */
.mb-section .price-blue .ce-price{
  color: #000 !important;      /* statt blau */
  font-size: 22px !important;  /* größer – bei Bedarf 20–24px */
  font-weight: 800;
  letter-spacing: 0 !important; /* überschreibt Theme: 1px */
  margin: 6px 0 6px;           /* etwas Luft oben/unten */
}

/* (Optional) auf sehr kleinen Screens minimal kleiner */
@media (max-width: 400px){
  .mb-section .price-blue{ font-size: 20px !important; }
}

/* Lesebuch: Preis schwarz & größer */
section.ce-offer.ce-offer--layout .ce-offer__cta .ce-price{
  color:#000 !important;
  font-size:18px !important;   /* bei Bedarf 20–24px */
  letter-spacing:0 !important; /* Theme setzt 1px -> zurücksetzen */
  font-weight:1000;            /* darf bleiben, wenn gewünscht */
  margin: 0 0 0 0;             /* optional: Abstand justieren */
}

/* Gleiche Badge-Größe oben & unten (56 × 56) */
.ce-offer--layout .ce-offer__badges img,
.mb-section .mb-card__badges img {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain;
  display: inline-block;
}

/* =========================================
   MOBILE (≤700px): Preis + Badges unterm Bild
   ========================================= */
@media (max-width: 700px){
  /* 1) Karte einspaltig */
  .mb-section .mb-card__grid{
    grid-template-columns: 1fr !important;
  }

  /* 2) Bild zuerst, mittig */
  .mb-section .mb-card__media{
    order: 1 !important;
    justify-self: center;
  }

  /* 3) Textcontainer als kleines Grid -> Reihenfolge festlegen */
  .mb-section .mb-card__body{
    order: 2 !important;
    display: grid !important;
    grid-template-areas:
      "price"
      "badges"
      "title"
      "desc";
    justify-items: center;          /* zentriert unter dem Bild */
    row-gap: 6px;
  }

  .mb-section .mb-card__body .price-blue{ grid-area: price; margin-top: 10px; }
  .mb-section .mb-card__body .mb-card__badges{
    grid-area: badges;
    justify-content: center;        /* Badges zentriert */
  }
  .mb-section .mb-card__body .mb-card__title{ grid-area: title; }
  .mb-section .mb-card__body .mb-card__desc{  grid-area: desc; }
}

/* --- Falls du statt zentriert lieber linksbündig unter dem Bild willst:
@media (max-width:700px){
  .mb-section .mb-card__body{ justify-items: start; }
  .mb-section .mb-card__body .mb-card__badges{ justify-content: flex-start; }
}
*/

/* =========================================
   MOBILE (≤700px) – Pillen-Button zentriert
   & Reihenfolge: Preis → Text → Badges
   ========================================= */
@media (max-width:700px){
  /* 0) Karte einspaltig */
  .mb-section .mb-card__grid{
    grid-template-columns: 1fr !important;
  }

  /* 1) "Demnächst"-Pille ÜBER dem Bild zentrieren */
  .mb-section .mb-card__badge{
    order: 0 !important;          /* vor das Bild */
    justify-self: center;          /* horizontal mittig */
    text-align: center;
    width: auto;                   /* nicht auf fixe 220px begrenzen */
    margin: 0 0 10px 0;            /* kleiner Abstand zum Bild */
  }

  /* 2) Bild mittig darunter */
  .mb-section .mb-card__media{
    order: 1 !important;
    justify-self: center;
  }

  /* 3) Inhalt: Preis → Text (Titel+Sub/Desc) → Badges */
  .mb-section .mb-card__body{
    order: 2 !important;
    display: grid !important;
    grid-template-areas:
      "price"
      "title"
      "desc"
      "badges";
    row-gap: 8px;
    justify-items: center;         /* alles unter dem Bild mittig */
  }
  .mb-section .mb-card__body .price-blue     { grid-area: price;  margin-top: 10px; }
  .mb-section .mb-card__body .mb-card__title { grid-area: title; }
  .mb-section .mb-card__body .mb-card__desc  { grid-area: desc;  }
  .mb-section .mb-card__body .mb-card__badges{
    grid-area: badges;
    justify-content: center;       /* die runden Badges mittig */
  }
}

/* =========================================
   MALBÜCHER — MOBILE FIXES (append at end)
   Ziel: Demnächst zentriert über Bild,
        Reihenfolge: Preis → Text → Badges,
        Badges 56×56, Preis schwarz & größer
   ========================================= */

/* Tablet/Desk: 2. Karte bündig wie 1. (keine Versätze) */
@media (min-width: 861px){
  .mb-section .mb-row .mb-card:nth-child(2){ margin-top:0 !important; }
  .mb-section .mb-row .mb-card:nth-child(2) .mb-card__grid{
    grid-template-columns:220px 1fr !important;
  }
  .mb-section .mb-row .mb-card:nth-child(2) .mb-card__badge{
    margin:0 0 10px 0 !important;
  }
}

/* Mobile: Struktur exakt wie beim oberen Beispiel */
@media (max-width: 860px){
  /* Einspaltig + zentriert arbeiten */
  .mb-section .mb-row{ display:block; }
  .mb-section .mb-card{ max-width:720px; margin:0 auto 32px; }
  .mb-section .mb-card__grid{
    grid-template-columns:1fr !important;
    justify-items:center;
    text-align:left;
  }

  /* 1) Demnächst-Pille zentriert ÜBER dem Bild */
  .mb-section .mb-card__badge{
    order:0 !important;
    width:auto !important;
    text-align:center !important;
    justify-self:center !important;
    margin:0 0 10px 0 !important;
  }

  /* 2) Bild mittig darunter */
  .mb-section .mb-card__media{
    order:1 !important;
    justify-self:center !important;
  }

  /* 3) Inhalt als Grid: Preis → Titel → Beschreibung → Badges */
  .mb-section .mb-card__body{
    order:2 !important;
    display:grid !important;
    grid-template-areas:
      "price"
      "title"
      "desc"
      "badges";
    row-gap:8px;
    justify-items:center;           /* alles unter dem Bild mittig */
    text-align:center;               /* Textblöcke mittig */
  }
  .mb-section .mb-card__body .price-blue { grid-area:price;  margin-top:12px; }
  .mb-section .mb-card__body .mb-card__title { grid-area:title; }
  .mb-section .mb-card__body .mb-card__desc  { grid-area:desc;  max-width:36rem; }
  .mb-section .mb-card__body .mb-card__badges{
    grid-area:badges;
    justify-content:center;
    margin-top:10px;
  }

  /* Preis-Optik wie im „perfekten“ Block (schwarz, größer) */
  .mb-section .price-blue{
    color:#000 !important;
    font-size:22px !important;
    font-weight:800 !important;
    letter-spacing:0 !important;
  }

  /* Badges überall konsistent 56×56 */
  .mb-section .mb-card__badges img{
    width:56px !important;
    height:56px !important;
    object-fit:contain;
  }
}

/* Mini-Finetuning sehr kleine Screens */
@media (max-width: 400px){
  .mb-section .price-blue{ font-size:20px !important; }
}

/* Mobile: Abstand zwischen "Demnächst"-Pille und Bild kleiner */
@media (max-width: 860px){
  .mb-section .mb-card__badge{
    margin: 0 0 2px 0 !important;   /* vorher ~10px */
  }
}

/* Desktop: Lesebuch-Block linksbündig statt zentriert */
@media (min-width: 861px){
  /* Variante A: gleiche max-width behalten, aber links bündig */
  .ce-offer--layout{
    /* links 0, rechts auto -> Block bleibt max 1100px breit, sitzt aber bündig links */
    margin: 0 auto 28px 0 !important;
    padding-inline: 0 !important;  /* Innenabstand an Seite angleichen */
  }
}

/* Falls du lieber volle Content-Breite (nicht auf 1100px begrenzt) möchtest,
   dann nutze diese Variante B statt A:

@media (min-width: 861px){
  .ce-offer--layout{
    max-width: none !important;
    width: 100% !important;
    margin: 0 0 28px 0 !important;  /* vollständig linksbündig, keine Zentrierung */
    padding-inline: 0 !important;
  }
}
*/

/* Theme-Icon/Platzhalter in leerem Warenkorb entfernen */
.woocommerce-cart .cart-empty::before,
.woocommerce .cart-empty::before {
  content: none !important;
  background: none !important;
  display: none !important;
}

/* optional: Return-to-shop-Button des Themes verstecken, wenn du einen eigenen hast */
.woocommerce .return-to-shop { display: none; }

/* dein Bild schön zentrieren */
.empty-cart-illustration img {
  max-width: 420px; width: 100%; height: auto;
  display: block; margin: 0 auto 1rem;
}

/* Cart-Block: leeres-Warenkorb-Icon entfernen */
.wp-block-woocommerce-empty-cart-block__title.with-empty-cart-icon::before,
.wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-empty-cart-block__title.with-empty-cart-icon::before {
  content: none !important;
  display: none !important;
  background: none !important;
  mask: none !important;
}

/* Cart-Block: Standard-Icon durch eigenes Bild ersetzen */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before,
.wp-block-woocommerce-cart .with-empty-cart-icon::before {
  content: "" !important;
  display: block !important;
  width: 420px !important;
  max-width: 90vw !important;
  height: 240px !important;                /* bei Bedarf anpassen */
  margin: 0 auto 1rem !important;
  background: url("https://www.emilderelch.com/wp-content/uploads/2025/10/fritzi_new.png")
              no-repeat center / contain !important;
  /* die Masken vom Original-Icon ausschalten */
  -webkit-mask: none !important;
  mask: none !important;
  background-color: transparent !important;
}

/* Link-Klick im Offer-Block deaktivieren */
.ce-offer__media a{ pointer-events:none; cursor:default; }

/* Bild-Link deaktivieren */
.ce-offer__media {
  pointer-events: none;   /* fängt Klicks ab */
  cursor: default;        /* normaler Cursor */
}

/* === "Zum Buch" komplett restylen und alles überstimmen === */
.wp-block-buttons .wp-block-button .wp-block-button__link,
.wp-block-button .wp-block-button__link,
a.wp-block-button__link.wp-element-button {
  /* Layout */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;            /* überschreibt width:100% */
  min-height: 48px !important;
  padding: 12px 28px !important;

  /* Optik: gelbe Pille, weiße Schrift */
  background: #f4b521 !important;    /* gelb wie im Screenshot */
  color: #ffffff !important;
  border: none !important;
  border-radius: 9999px !important;
  box-shadow: none !important;
  text-decoration: none !important;

  /* Typo */
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;

  /* Cursor & Box */
  box-sizing: border-box !important;
  cursor: pointer !important;
}

/* Farbvorgaben der WP-Utility-Klassen sicher überschreiben */
.wp-block-button .wp-block-button__link.has-background,
.wp-block-button .wp-block-button__link.has-text-color,
.wp-block-button .wp-block-button__link.has-white-color,
.wp-block-button .wp-block-button__link.has-link-color {
  background: #f4b521 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Hover */
.wp-block-button .wp-block-button__link:hover,
a.wp-block-button__link.wp-element-button:hover {
  filter: brightness(0.95) !important; /* leicht dunkler */
  text-decoration: none !important;
}

/* Focus (Tastatur) */
.wp-block-button .wp-block-button__link:focus-visible,
a.wp-block-button__link.wp-element-button:focus-visible {
  outline: 2px solid #ffffff !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(244, 181, 33, 0.5) !important; /* weicher Fokus */
}

/* Active (Klick) */
.wp-block-button .wp-block-button__link:active,
a.wp-block-button__link.wp-element-button:active {
  transform: translateY(0) scale(0.99) !important;
  filter: brightness(0.92) !important;
}

/* Optional: auf schmalen Screens volle Breite */
@media (max-width: 480px) {
  .wp-block-button .wp-block-button__link {
    width: 100% !important;
  }
}

/* Typografie für "Zum Buch" wie "Demnächst" */
.wp-block-button .wp-block-button__link,
a.wp-block-button__link.wp-element-button {
  font-family: "Montserrat", "Nunito", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 800 !important;   /* richtig fett */
  font-size: 18px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: #fff !important;        /* weiße Schrift wie beim Beispiel */
}

/* Schrift für den "Jetzt kaufen"-Button angleichen */
.ce-offer .button.ce-buy-btn.add_to_cart_button,
.ce-offer a.add_to_cart_button,
.ce-offer .ce-buy-btn,
.ce-offer .ce-buy-btn .btn-label {
  font-family: "Montserrat", "Nunito", system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 800 !important;   /* fett wie im Beispiel */
  font-size: 18px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #fff !important;        /* weiße Schrift */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Falls Woo ein inneres <span> stylt, erbt es dennoch die Typo */
.ce-offer .button.ce-buy-btn.add_to_cart_button .btn-label,
.ce-offer a.add_to_cart_button .btn-label {
  all: unset;                    /* räumt Fremdstyles ab */
  font: inherit !important;
  color: inherit !important;
}

/* nur auf Handy/kleine Screens anwenden */
@media (max-width: 768px) {
  /* Bildblock mittig */
  .wp-block-image.alignwide {
    text-align: center;
  }

  /* das Bild selbst */
  .wp-block-image.alignwide img {
    display: inline-block;
    margin: 0;                   /* keine Auto-Margins -> Größe bleibt */
    width: auto !important;      /* überschreibt evtl. width:100% */
    max-width: 100%;             /* verhindert Überlaufen */
    height: auto !important;
  }
}

/* ===== WooCommerce Warenkorb: bessere Lesbarkeit ===== */

/* Labels (z. B. "Geschätzte Gesamtsumme", "Zwischensumme") */
.wc-block-components-totals-item__label {
  color: #000000 !important; /* reines Schwarz */
  font-weight: 600; /* etwas kräftiger für bessere Lesbarkeit */
}

/* Werte (z. B. Preise) */
.wc-block-components-totals-item__value {
  color: #111111 !important; /* sehr dunkles Grau */
  font-weight: 700;
}

/* Beschreibungstexte (z. B. "inkl. Steuer") */
.wc-block-components-totals-item__description {
  color: #333333 !important; /* dunkles Grau, dezent aber gut lesbar */
}

/* Optional: Produktbeschreibung im Warenkorb dunkler machen */
.wc-block-cart-item__product-name,
.wc-block-cart-item__product-price,
.wc-block-cart-item__meta {
  color: #111111 !important;
}

/* =============================
   WooCommerce Warenkorb – Lesbarkeit verbessern
   ============================= */

/* --- Allgemeine Schriftfarbe --- */
.woocommerce,
.wc-block-cart,
.wc-block-components-sidebar,
.wc-block-cart-item {
  color: #111111 !important;
}

/* --- Produktnamen im Warenkorb --- */
.wc-block-cart-item__product-name {
  color: #000000 !important;
  font-weight: 600;
}

/* --- Produktpreis --- */
.wc-block-cart-item__product-price {
  color: #111111 !important;
  font-weight: 500;
}

/* --- Produktbeschreibung (z. B. "Ein fröhliches Abenteuer ...") --- */
.wc-block-cart-item__meta {
  color: #333333 !important;
}

/* --- Buttons (z. B. + / – für Menge) --- */
.wc-block-components-quantity-selector__button {
  color: #000000 !important;
}

/* --- "Artikel entfernen" Link --- */
.wc-block-cart-item__remove-link {
  color: #1a1a1a !important;
  text-decoration: underline;
}

/* --- Abschnitt "Warenkorbsumme" rechts --- */
.wc-block-components-totals-item__label {
  color: #000000 !important;
  font-weight: 600;
}

.wc-block-components-totals-item__value {
  color: #111111 !important;
  font-weight: 700;
}

.wc-block-components-totals-item__description {
  color: #333333 !important;
}

/* --- Abschnittsüberschrift "Warenkorbsumme" --- */
.wc-block-cart__totals-title,
.wp-block-woocommerce-cart-order-summary-heading-block {
  color: #000000 !important;
  font-weight: 700;
}

/* --- Gutscheinfeld --- */
.wc-block-components-text-input input {
  color: #111111 !important;
}

/* --- Optional: Hover-Farbe für Links etwas dunkler machen --- */
.wc-block-cart-item__remove-link:hover {
  color: #000000 !important;
}