/* ==========================================================================
   MANUFAKTUR — Theme-Stylesheet
   Übernommen aus der HTML-Vorlage (index.html, eingebettetes <style>).
   Zwei Eingriffe gegenüber der Vorlage:
     1. Die Google-Fonts-Einbindung ist entfernt — Schriften kommen über
        local_font_head() aus public/local-assets (DSGVO, doku/theme-bauen.html).
     2. Eine Token-Brücke unter :root, damit Core-Builder-Blöcke denselben
        Look bekommen, ohne dass jeder Block ein Override braucht.
   ========================================================================== */


    /* ==========================================================================
       MANUFAKTUR 2026 - COMPLETE ARTISAN LUXURY & NEXT-GEN SLIDING CHECKOUT
       ========================================================================== */
    :root {
      --bg-primary: #fcfbfa;
      --bg-secondary: #f4f1ec;
      --bg-tertiary: #ebe5dc;
      --bg-card: #ffffff;
      --bg-dark: #161514;
      --bg-dark-subtle: #22201e;
      --topbar-bg: #193324;

      --text-primary: #1e1d1b;
      --text-secondary: #5c5852;
      --text-muted: #8c867e;
      --text-light: #fbf9f6;
      --text-light-muted: #a39f99;

      --accent-terracotta: #b86b53;
      --accent-terracotta-dark: #964f3a;
      --accent-sage: #527357;
      --accent-ochre: #c9933e;
      --accent-warm-sand: #d8cbb8;

      --border-subtle: rgba(30, 29, 27, 0.08);
      --border-light: rgba(30, 29, 27, 0.14);
      --border-glass: rgba(255, 255, 255, 0.65);
      --border-dark-glass: rgba(255, 255, 255, 0.12);

      --glass-bg: rgba(255, 255, 255, 0.88);
      --glass-bg-card: rgba(255, 255, 255, 0.95);
      --glass-blur: blur(20px);
      --glass-shadow: 0 20px 40px -15px rgba(26, 25, 24, 0.07), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
      --glass-shadow-floating: 0 25px 60px -15px rgba(26, 25, 24, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.9) inset;

      --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-serif: 'Playfair Display', Georgia, serif;

      --radius-sm: 8px;
      --radius-md: 14px;
      --radius-lg: 22px;
      --radius-xl: 32px;
      --radius-full: 9999px;

      --container-max: 1440px;
      --container-pad: clamp(16px, 4vw, 48px);
      --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
      --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      --transition-fast: 0.2s ease;
    }

/* ══════════════════════════════════════════════════════════════════════════
   BRÜCKE: wawum-Design-Tokens → Manufaktur-Variablen
   ------------------------------------------------------------------------
   Der Core emittiert die Katalog-Tokens (--color-*, --font-*, --radius-*)
   aus theme.json in :root. Damit Core-Blöcke, die NUR Tokens kennen, im
   Manufaktur-Look erscheinen, zeigen die Vorlagen-Variablen hier auf die
   Tokens — nicht umgekehrt. So bleibt „Themes → Anpassen" wirksam: Ändert
   der Betreiber den Akzent, wandert der Wert über settings_map ins Token
   und von dort in jede Regel dieser Datei.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --bg-primary:        var(--color-background, #fcfbfa);
  --bg-secondary:      var(--color-surface, #f4f1ec);
  --text-primary:      var(--color-text, #1e1d1b);
  --text-muted:        var(--color-text-muted, #8c867e);
  --border-light:      var(--color-border, rgba(30, 29, 27, 0.14));
  --accent-terracotta: var(--color-accent, #b86b53);
  --accent-sage:       var(--color-secondary, #527357);
  --font-sans:         var(--font-body, 'Plus Jakarta Sans', sans-serif);
  --font-serif:        var(--font-heading, 'Playfair Display', Georgia, serif);
}


    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 16px; scroll-behavior: smooth; }
    body {
      font-family: var(--font-sans);
      background-color: var(--bg-primary);
      color: var(--text-primary);
      line-height: 1.55;
      overflow-x: hidden;
    }

    img { max-width: 100%; height: auto; display: block; }
    a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
    button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; border: none; background: none; }
    button { cursor: pointer; }

    h1, h2, h3, h4, h5, h6 {
      font-family: var(--font-serif);
      font-weight: 600;
      line-height: 1.15;
      letter-spacing: -0.02em;
    }

    .container {
      width: 100%;
      max-width: var(--container-max);
      margin-left: auto;
      margin-right: auto;
      padding-left: var(--container-pad);
      padding-right: var(--container-pad);
    }

    .scroll-progress-bar {
      position: fixed;
      top: 0;
      left: 0;
      height: 3.5px;
      width: 0%;
      background: linear-gradient(90deg, var(--accent-terracotta), var(--accent-ochre), var(--accent-sage));
      z-index: 1000;
      transition: width 0.1s ease-out;
    }

    .reveal {
      opacity: 0;
      transform: translateY(45px);
      transition: opacity 0.85s var(--ease-out-expo), transform 0.85s var(--ease-out-expo);
      will-change: opacity, transform;
    }
    .reveal.reveal-left { transform: translateX(-45px); }
    .reveal.reveal-right { transform: translateX(45px); }
    .reveal.is-visible { opacity: 1; transform: translateY(0) translateX(0) scale(1); }

    .stagger-group > * {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
    }
    .stagger-group.is-visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
    .stagger-group.is-visible > *:nth-child(2) { transition-delay: 0.15s; opacity: 1; transform: translateY(0); }
    .stagger-group.is-visible > *:nth-child(3) { transition-delay: 0.25s; opacity: 1; transform: translateY(0); }
    .stagger-group.is-visible > *:nth-child(4) { transition-delay: 0.35s; opacity: 1; transform: translateY(0); }
    .stagger-group.is-visible > *:nth-child(5) { transition-delay: 0.45s; opacity: 1; transform: translateY(0); }
    .stagger-group.is-visible > *:nth-child(6) { transition-delay: 0.55s; opacity: 1; transform: translateY(0); }

    .top-announcement-bar {
      background-color: var(--topbar-bg);
      color: #ffffff;
      padding: 9px 0;
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      position: relative;
      z-index: 102;
    }
    .top-bar-inner {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
    }
    .top-bar-item { display: inline-flex; align-items: center; gap: 8px; }
    .top-bar-item svg { color: #7dd395; }

    .site-header {
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: var(--glass-bg);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border-bottom: 1px solid var(--border-light);
      transition: all var(--transition-smooth);
      padding: 14px 0;
    }
    .site-header.scrolled { padding: 10px 0; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.08); }
    .header-layout { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    
    .brand-logo {
      font-family: var(--font-serif);
      font-size: 1.65rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      color: var(--text-primary);
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .brand-logo .dot { width: 7px; height: 7px; background-color: var(--accent-terracotta); border-radius: 50%; }

    .main-nav { display: flex; align-items: center; gap: 28px; list-style: none; }
    .nav-item { position: relative; padding: 8px 0; }
    .nav-link {
      font-size: 0.925rem;
      font-weight: 500;
      color: var(--text-primary);
      padding: 6px 0;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .nav-link:hover, .nav-link.active { color: var(--accent-terracotta); }

    .mega-menu-wrapper {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      padding-top: 16px;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: all 0.25s var(--ease-out-expo);
      z-index: 200;
    }
    .nav-item.has-mega:hover .mega-menu-wrapper,
    .nav-item.has-mega.open .mega-menu-wrapper {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }
    .mega-menu {
      width: min(92vw, 920px);
      background: var(--glass-bg-card);
      backdrop-filter: blur(28px);
      -webkit-backdrop-filter: blur(28px);
      border: 1px solid var(--border-glass);
      border-radius: var(--radius-xl);
      box-shadow: var(--glass-shadow-floating);
      padding: 32px;
      display: grid;
      grid-template-columns: 1fr 1fr 280px;
      gap: 32px;
    }
    .mega-col-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 14px; }
    .mega-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .mega-list a { font-size: 0.95rem; font-weight: 500; padding: 8px 12px; border-radius: var(--radius-sm); display: flex; justify-content: space-between; }
    .mega-list a:hover { background: var(--bg-secondary); color: var(--accent-terracotta); }

    .header-actions { display: flex; align-items: center; gap: 12px; }
    .action-btn {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(30, 29, 27, 0.04);
      transition: all var(--transition-fast);
      position: relative;
    }
    .action-btn:hover { background: rgba(30, 29, 27, 0.1); transform: scale(1.05); }

    .action-badge {
      position: absolute;
      top: 2px;
      right: 2px;
      width: 18px;
      height: 18px;
      background: var(--accent-terracotta);
      color: #fff;
      font-size: 0.65rem;
      font-weight: 700;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .action-badge.bump { transform: scale(1.4); }

    .flying-cart-ghost {
      position: fixed;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      z-index: 9999;
      pointer-events: none;
      box-shadow: 0 10px 30px rgba(0,0,0,0.3);
      border: 2px solid #ffffff;
      transition: all 0.85s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .social-proof-popup {
      position: fixed;
      bottom: 24px;
      left: 24px;
      z-index: 1050;
      background: var(--glass-bg-card);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border: 1px solid var(--border-glass);
      border-radius: var(--radius-lg);
      padding: 14px 18px;
      display: flex;
      align-items: center;
      gap: 14px;
      box-shadow: var(--glass-shadow-floating);
      max-width: 340px;
      transform: translateY(120px) scale(0.9);
      opacity: 0;
      visibility: hidden;
      transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .social-proof-popup.show { transform: translateY(0) scale(1); opacity: 1; visibility: visible; }
    .social-proof-img { width: 52px; height: 52px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
    .social-proof-content { font-size: 0.85rem; line-height: 1.35; }
    .social-proof-content strong { color: var(--text-primary); display: block; }
    .social-proof-meta { font-size: 0.725rem; color: var(--text-muted); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
    .social-proof-verified { color: #2e7d32; font-weight: 600; }
    .social-proof-close { position: absolute; top: 6px; right: 8px; font-size: 0.8rem; color: var(--text-muted); cursor: pointer; }

    /* --------------------------------------------------------------------------
       NEXT-GEN MULTI-STEP SLIDING CHECKOUT (2026 Interactive Wizard)
       -------------------------------------------------------------------------- */
    .checkout-wizard-container {
      background: #fff;
      border-radius: var(--radius-xl);
      border: 1px solid var(--border-subtle);
      box-shadow: 0 15px 45px -10px rgba(0,0,0,0.06);
      overflow: hidden;
    }

    /* Checkout Breadcrumb Steps */
    .checkout-steps-bar {
      display: flex;
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border-subtle);
    }

    .checkout-step-tab {
      flex: 1;
      padding: 16px 20px;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text-muted);
      cursor: pointer;
      position: relative;
      transition: all var(--transition-fast);
      border-right: 1px solid var(--border-subtle);
    }

    .checkout-step-tab:last-child { border-right: none; }

    .step-num {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #fff;
      border: 1px solid var(--border-light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--text-secondary);
      transition: all var(--transition-fast);
    }

    .checkout-step-tab.active {
      color: var(--text-primary);
      background: #fff;
    }

    .checkout-step-tab.active .step-num {
      background: var(--accent-terracotta);
      color: #fff;
      border-color: var(--accent-terracotta);
    }

    .checkout-step-tab.completed .step-num {
      background: #2e7d32;
      color: #fff;
      border-color: #2e7d32;
    }

    /* Sliding Window & Track */
    .checkout-slide-window {
      overflow: hidden;
      position: relative;
      width: 100%;
    }

    .checkout-slide-track {
      display: flex;
      width: 300%; /* 3 Steps */
      transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .checkout-step-panel {
      width: 33.3333%;
      padding: 36px;
      flex-shrink: 0;
    }

    .form-group { margin-bottom: 16px; }
    .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .form-label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; color: var(--text-primary); }
    .form-input {
      width: 100%;
      padding: 13px 16px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-light);
      background: var(--bg-primary);
      font-size: 0.95rem;
      outline: none;
      transition: border-color 0.2s ease, background 0.2s ease;
    }
    .form-input:focus { border-color: var(--text-primary); background: #fff; }

    /* Shipping & Payment Options */
    .option-card-radio {
      border: 1px solid var(--border-light);
      border-radius: var(--radius-md);
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      margin-bottom: 12px;
      transition: all var(--transition-fast);
      background: var(--bg-primary);
    }
    .option-card-radio:hover { border-color: var(--text-primary); background: #fff; }
    .option-card-radio.selected {
      border-color: var(--accent-terracotta);
      background: rgba(184, 107, 83, 0.05);
      box-shadow: 0 4px 14px rgba(184, 107, 83, 0.12);
    }

    /* Checkout Summary Items */
    .summary-item-card {
      display: grid;
      grid-template-columns: 64px 1fr auto;
      gap: 14px;
      align-items: center;
      padding: 14px 0;
      border-bottom: 1px solid var(--border-subtle);
    }
    .summary-item-img {
      width: 64px;
      height: 72px;
      border-radius: var(--radius-sm);
      object-fit: cover;
    }

    /* Hero Slider & General Styles */
    .hero-slider-wrap { position: relative; width: 100%; height: clamp(540px, 82vh, 800px); overflow: hidden; background: #141312; }
    .hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.1s var(--ease-out-expo), transform 1.4s var(--ease-out-expo); transform: scale(1.06); }
    .hero-slide.active { opacity: 1; visibility: visible; transform: scale(1); }
    .hero-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .hero-slide-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,19,18,0.88) 0%, rgba(20,19,18,0.35) 50%, rgba(20,19,18,0.45) 100%); display: flex; align-items: center; justify-content: center; text-align: center; color: #ffffff; padding: 24px; }
    .hero-slide-box { max-width: 780px; }
    .hero-eyebrow { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; color: #e5a48f; margin-bottom: 14px; display: block; }
    .hero-title { font-size: clamp(2.4rem, 5.8vw, 4.6rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 18px; }
    .hero-desc { font-size: clamp(1rem, 1.6vw, 1.25rem); color: rgba(255, 255, 255, 0.9); max-width: 600px; margin: 0 auto 32px; }

    .slider-arrow-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(12px); color: #ffffff; display: flex; align-items: center; justify-content: center; z-index: 10; border: 1px solid rgba(255, 255, 255, 0.5); }
    .slider-arrow-btn:hover { background: #ffffff; color: #1a1918; transform: translateY(-50%) scale(1.08); }
    .slider-arrow-prev { left: 24px; }
    .slider-arrow-next { right: 24px; }
    .slider-dots { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; }
    .slider-dot { width: 36px; height: 4px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.4); cursor: pointer; }
    .slider-dot.active { background: #ffffff; width: 56px; }

    .marquee-strip { background: var(--bg-dark); color: var(--text-light-muted); padding: 16px 0; overflow: hidden; white-space: nowrap; border-bottom: 1px solid var(--border-dark-glass); }
    .marquee-content { display: inline-flex; gap: 48px; animation: marqueeScroll 28s linear infinite; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
    @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

    .section-pad { padding-top: clamp(56px, 7vw, 108px); padding-bottom: clamp(56px, 7vw, 108px); }
    .section-head { max-width: 680px; margin-bottom: clamp(32px, 4.5vw, 58px); }
    .section-head.center { text-align: center; margin-left: auto; margin-right: auto; }

    .category-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
    .category-visual-card { position: relative; height: 320px; border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; color: #ffffff; box-shadow: 0 12px 35px -10px rgba(0,0,0,0.12); transition: all var(--transition-smooth); }
    .category-visual-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out-expo); z-index: 0; }
    .category-visual-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, transparent 100%); z-index: 1; }
    .category-visual-card:hover img { transform: scale(1.08); }
    .category-visual-card:hover { transform: translateY(-6px); box-shadow: 0 25px 50px -10px rgba(0,0,0,0.22); }
    .category-card-content { position: relative; z-index: 2; }

    .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 32px; }
    .product-card { position: relative; background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); transition: all var(--transition-smooth); display: flex; flex-direction: column; height: 100%; }
    .product-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px -12px rgba(26, 25, 24, 0.14); border-color: var(--border-light); }
    .product-card-media { position: relative; width: 100%; padding-top: 115%; background: var(--bg-secondary); overflow: hidden; }
    .product-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out-expo), opacity 0.4s ease; }
    .product-card-media .img-hover { opacity: 0; }
    .product-card:hover .product-card-media .img-primary { opacity: 0; }
    .product-card:hover .product-card-media .img-hover { opacity: 1; transform: scale(1.06); }

    .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; background: rgba(184, 107, 83, 0.12); color: var(--accent-terracotta); border: 1px solid rgba(184, 107, 83, 0.25); backdrop-filter: blur(12px); }
    .product-card-badges { position: absolute; top: 12px; left: 12px; z-index: 3; }
    .btn-wishlist { position: absolute; top: 12px; right: 12px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
    .btn-wishlist:hover { background: #ffffff; transform: scale(1.1); }
    .btn-wishlist.active { color: #e53935; }
    .product-card-actions { position: absolute; bottom: 12px; left: 12px; right: 12px; z-index: 3; transform: translateY(15px); opacity: 0; transition: all var(--transition-smooth); }
    .product-card:hover .product-card-actions { transform: translateY(0); opacity: 1; }

    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 28px; border-radius: var(--radius-full); font-weight: 600; font-size: 0.95rem; transition: all var(--transition-fast); white-space: nowrap; }
    .btn-primary { background-color: var(--text-primary); color: #ffffff; box-shadow: 0 8px 24px -6px rgba(26, 25, 24, 0.3); }
    .btn-primary:hover { background-color: #000000; transform: translateY(-2px); }
    .btn-secondary { background: rgba(255, 255, 255, 0.92); color: var(--text-primary); border: 1px solid var(--border-light); backdrop-filter: blur(12px); }
    .btn-secondary:hover { background: #ffffff; border-color: var(--text-primary); transform: translateY(-2px); }
    .btn-terracotta { background-color: var(--accent-terracotta); color: #ffffff; }
    .btn-terracotta:hover { background-color: var(--accent-terracotta-dark); transform: translateY(-2px); }
    .btn-sm { padding: 8px 16px; font-size: 0.85rem; }
    .btn-lg { padding: 16px 36px; font-size: 1.05rem; }

    .product-card-body { padding: 22px; display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; }
    .product-card-colors { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
    .color-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15); display: inline-block; }
    .product-card-title { font-size: 1.15rem; margin-bottom: 4px; }
    .product-card-subtitle { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 12px; }
    .price-tag { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 700; }
    .price-current { font-size: 1.25rem; }
    .price-original { font-size: 0.95rem; color: var(--text-muted); text-decoration: line-through; font-weight: 400; }
    .legal-tax-notice { font-size: 0.725rem; color: var(--text-muted); line-height: 1.35; display: block; margin-top: 2px; }
    .legal-tax-notice a { text-decoration: underline; cursor: pointer; }

    .hotspot-stage { position: relative; border-radius: var(--radius-xl); overflow: hidden; height: 480px; box-shadow: var(--glass-shadow-floating); }
    .hotspot-stage img { width: 100%; height: 100%; object-fit: cover; }
    .hotspot-point { position: absolute; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.35); display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 800; color: var(--accent-terracotta); animation: pulsePoint 2s infinite ease-out; }
    .hotspot-point:hover { transform: scale(1.2); }
    @keyframes pulsePoint { 0%, 100% { box-shadow: 0 0 0 4px rgba(255,255,255,0.4); } 50% { box-shadow: 0 0 0 12px rgba(255,255,255,0.1); } }
    .hotspot-popover { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px); background: var(--bg-dark); color: #fff; padding: 14px 18px; border-radius: var(--radius-md); font-size: 0.85rem; width: 220px; pointer-events: none; opacity: 0; visibility: hidden; transition: all var(--transition-fast); box-shadow: 0 10px 25px rgba(0,0,0,0.3); z-index: 20; }
    .hotspot-point:hover .hotspot-popover { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

    .bento-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
    .bento-card { position: relative; background: var(--bg-card); border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-subtle); padding: 36px; display: flex; flex-direction: column; justify-content: space-between; transition: all var(--transition-smooth); }
    .bento-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px -15px rgba(30, 29, 27, 0.08); }
    .bento-card.col-8 { grid-column: span 8; }
    .bento-card.col-4 { grid-column: span 4; }
    .bento-card.dark-theme { background: var(--bg-dark); color: var(--text-light); border-color: var(--border-dark-glass); }
    .bento-bg-media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-smooth); }
    .bento-card:hover .bento-bg-media { transform: scale(1.04); }
    .bento-overlay-gradient { position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, rgba(20, 19, 18, 0.85) 0%, rgba(20, 19, 18, 0.3) 100%); }
    .bento-content { position: relative; z-index: 2; }

    .modal-backdrop { position: fixed; inset: 0; background: rgba(26, 25, 24, 0.6); backdrop-filter: blur(10px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: all var(--transition-smooth); }
    .modal-backdrop.open { opacity: 1; visibility: visible; }
    .modal-dialog { background: var(--bg-card); border-radius: var(--radius-xl); box-shadow: var(--glass-shadow-floating); max-width: 880px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; transform: scale(0.95) translateY(15px); transition: all var(--transition-smooth); }
    .modal-backdrop.open .modal-dialog { transform: scale(1) translateY(0); }
    .modal-close-btn { position: absolute; top: 18px; right: 18px; z-index: 10; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; }
    .modal-close-btn:hover { background: #000; color: #fff; }

    .cart-drawer-backdrop { position: fixed; inset: 0; background: rgba(26, 25, 24, 0.4); backdrop-filter: blur(6px); z-index: 1100; opacity: 0; visibility: hidden; transition: all var(--transition-smooth); }
    .cart-drawer-backdrop.open { opacity: 1; visibility: visible; }
    .cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(100vw, 440px); background: var(--bg-card); z-index: 1110; box-shadow: -20px 0 50px rgba(0,0,0,0.15); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--transition-smooth); }
    .cart-drawer-backdrop.open .cart-drawer { transform: translateX(0); }
    .cart-drawer-header { padding: 20px 24px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; }
    .free-shipping-bar { background: var(--bg-secondary); padding: 12px 24px; border-bottom: 1px solid var(--border-subtle); font-size: 0.85rem; }
    .progress-track { height: 6px; background: rgba(30, 29, 27, 0.08); border-radius: var(--radius-full); margin-top: 8px; overflow: hidden; }
    .progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent-terracotta), var(--accent-sage)); border-radius: var(--radius-full); transition: width 0.4s ease; }
    .cart-drawer-items { flex-grow: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
    .cart-item-row { display: grid; grid-template-columns: 68px 1fr auto; gap: 14px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle); }
    .cart-item-img { width: 68px; height: 76px; border-radius: var(--radius-sm); object-fit: cover; }
    .qty-control { display: inline-flex; align-items: center; border: 1px solid var(--border-light); border-radius: var(--radius-full); padding: 2px 8px; gap: 10px; font-size: 0.85rem; margin-top: 4px; }
    .cart-drawer-footer { padding: 20px 24px; border-top: 1px solid var(--border-subtle); background: var(--bg-secondary); }

    .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 1200; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
    .toast { background: var(--bg-dark); color: #fff; padding: 12px 24px; border-radius: var(--radius-full); font-size: 0.9rem; font-weight: 500; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); }

    .site-footer { background: var(--bg-dark); color: var(--text-light); padding-top: 70px; padding-bottom: 40px; border-top: 1px solid var(--border-dark-glass); }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px; margin-bottom: 48px; }
    .footer-col h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-light-muted); margin-bottom: 18px; }
    .footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .footer-links a { color: var(--text-light-muted); font-size: 0.9rem; }
    .footer-links a:hover { color: #fff; }
    .newsletter-form { display: flex; gap: 8px; margin-top: 14px; }
    .newsletter-input { flex-grow: 1; padding: 12px 18px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.1); border: 1px solid var(--border-dark-glass); color: #fff; }
    .footer-bottom { padding-top: 28px; border-top: 1px solid var(--border-dark-glass); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 0.8rem; color: var(--text-light-muted); }

    @media (max-width: 1024px) {
      .bento-card.col-8, .bento-card.col-4 { grid-column: span 12; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 768px) {
      .main-nav { display: none; }
      .footer-grid { grid-template-columns: 1fr; }
      .checkout-steps-bar { flex-direction: column; }
      .checkout-step-tab { border-right: none; border-bottom: 1px solid var(--border-subtle); padding: 12px 16px; }
      .checkout-step-panel { padding: 20px; }
      .form-row-2 { grid-template-columns: 1fr; }
    }
  
/* ══════════════════════════════════════════════════════════════════════════
   BLOCK-OVERRIDES — Ergänzungen zum Stylesheet der Vorlage
   Nur was in der Vorlage nicht als eigene Klasse existierte, weil dort
   alles in einem JS-Template stand.
   ══════════════════════════════════════════════════════════════════════════ */

/* Produktraster: Spaltenzahl kommt als Inline-Stil aus dem Block (Builder-
   Option „Spalten"), hier nur der Abstand und das mobile Verhalten. */
.product-grid { display: grid; gap: 26px; }
@media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px)  { .product-grid { grid-template-columns: 1fr !important; } }

/* Bildwechsel beim Darüberfahren. Radius und Seitenverhältnis stehen bewusst
   HIER als Stylesheet-Regel und nicht inline im Markup — inline gewinnt gegen
   den Builder, und „Form & Zuschnitt" wäre stumm wirkungslos (doku §0b). */
.product-card-media { position: relative; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 4 / 5; background: var(--bg-tertiary); }
.product-card-media img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--transition-smooth), transform var(--transition-smooth); }
.product-card-media .img-hover { position: absolute; inset: 0; opacity: 0; }
.product-card:hover .product-card-media .img-hover { opacity: 1; }
.product-card:hover .product-card-media img { transform: scale(1.04); }

.product-card-badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.btn-wishlist { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--glass-bg-card);
  backdrop-filter: var(--glass-blur); border: 1px solid var(--border-glass); color: var(--text-primary);
  transition: all var(--transition-fast); }
.btn-wishlist:hover { color: var(--accent-terracotta); transform: scale(1.08); }
.btn-wishlist.active { color: var(--accent-terracotta); }

.product-card-actions { position: absolute; left: 12px; right: 12px; bottom: 12px; opacity: 0;
  transform: translateY(8px); transition: all var(--transition-smooth); }
.product-card:hover .product-card-actions { opacity: 1; transform: translateY(0); }
@media (hover: none) { .product-card-actions { opacity: 1; transform: none; } }

.product-card-body { padding-top: 14px; display: flex; flex-direction: column; justify-content: space-between; flex: 1; }
.product-card-title { font-size: 1.05rem; margin: 0; }
.product-card-subtitle { font-size: .82rem; color: var(--text-muted); margin: 4px 0 0; }
.wwb-card.product-card { display: flex; flex-direction: column; }

/* USP-Leiste */
.mf-usp { padding: 22px 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.mf-usp-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.mf-usp-item { display: flex; align-items: center; gap: 10px; font-size: .88rem; font-weight: 600; justify-content: center; }
.mf-usp-icon { display: inline-flex; color: var(--accent-terracotta); }

/* Kopfzeilen-Regionen: Desktop/Mobil-Umschaltung bei 900px (einheitlich) */
.mf-mheader { display: none; }
@media (max-width: 900px) { .mf-dheader { display: none; } .mf-mheader { display: block; } }

/* ── Hero ──────────────────────────────────────────────────────────────────
   Höhe, Abdunklung und Ecken kommen als CSS-Variablen aus dem Block, nicht
   als feste Werte: „Form & Zuschnitt" und die Hero-Optionen sollen wirken. */
.mf-hero { position: relative; isolation: isolate; }
.mf-hero-slide { position: relative; min-height: var(--mf-hero-h, 68vh); display: flex; align-items: center; }
.mf-hero[data-wwb-slider] .mf-hero-slide { position: absolute; inset: 0; }
.mf-hero[data-wwb-slider] .mf-hero-slide:first-child { position: relative; }
.mf-hero-media { position: absolute; inset: 0; z-index: -2; }
.mf-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.mf-hero-veil { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15,14,13,calc(var(--mf-hero-dark,.45) * .8)) 0%,
              rgba(15,14,13,var(--mf-hero-dark,.45)) 55%, rgba(15,14,13,calc(var(--mf-hero-dark,.45) * 1.25)) 100%); }
.mf-hero-inner { position: relative; color: var(--text-light); padding-top: 64px; padding-bottom: 64px; }
.mf-hero-inner--center { text-align: center; max-width: 860px; margin-inline: auto; }
.mf-hero-inner--right  { text-align: right; margin-left: auto; max-width: 780px; }
.mf-hero-inner--left   { max-width: 780px; }
.mf-hero-inner .headline-display { color: var(--text-light); }
.mf-hero-sub { color: rgba(251,249,246,.86); margin-top: 14px; }
.mf-hero-buttons { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.mf-hero-inner--center .mf-hero-buttons { justify-content: center; }
.mf-hero-inner--right  .mf-hero-buttons { justify-content: flex-end; }
.mf-hero-btn2 { color: var(--text-light); border: 1px solid rgba(255,255,255,.45); }
.mf-hero-btn2:hover { background: rgba(255,255,255,.12); }
.mf-hero-rating { margin-top: 20px; font-size: .8rem; color: rgba(251,249,246,.75); display: flex; gap: 7px; align-items: center; }
.mf-hero-inner--center .mf-hero-rating { justify-content: center; }
.mf-hero--rund { border-radius: var(--radius-xl); overflow: hidden; }

/* ── Bento-Kategorien ───────────────────────────────────────────────────── */
.mf-bento { display: grid; grid-template-columns: repeat(var(--mf-bento-cols, 4), 1fr); gap: 18px; }
.mf-bento--gross > .mf-bento-card:first-child { grid-column: span 2; grid-row: span 2; }
.mf-bento-card { position: relative; overflow: hidden; border-radius: var(--radius-lg);
  min-height: 240px; display: flex; align-items: flex-end; background: var(--bg-tertiary);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth); }
.mf-bento--gross > .mf-bento-card:first-child { min-height: 500px; }
.mf-bento-card:hover { transform: translateY(-3px); box-shadow: var(--glass-shadow-floating); }
.mf-bento-media { position: absolute; inset: 0; }
.mf-bento-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-smooth); }
.mf-bento-card:hover .mf-bento-media img { transform: scale(1.06); }
.mf-bento-veil { position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(15,14,13,.72) 100%); }
.mf-bento-body { position: relative; padding: 20px 22px; color: var(--text-light); display: flex; flex-direction: column; gap: 4px; }
.mf-bento-kicker { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-warm-sand); }
.mf-bento-title { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600; line-height: 1.15; }
.mf-bento--gross > .mf-bento-card:first-child .mf-bento-title { font-size: 2rem; }
.mf-bento-note { font-size: .78rem; opacity: .8; }
@media (max-width: 900px) {
  .mf-bento { grid-template-columns: repeat(2, 1fr); }
  .mf-bento--gross > .mf-bento-card:first-child { grid-column: span 2; grid-row: auto; min-height: 300px; }
}
@media (max-width: 560px) { .mf-bento { grid-template-columns: 1fr; } }

/* ── Laufband ───────────────────────────────────────────────────────────── */
.mf-marquee { overflow: hidden; white-space: nowrap; }
.mf-marquee-track { display: inline-flex; animation: mf-mq var(--mf-mq-dur, 22s) linear infinite; }
.mf-marquee-run { display: inline-flex; }
.mf-marquee-item { display: inline-flex; align-items: center; gap: 10px; padding: 0 22px;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.mf-marquee-sep { opacity: .55; }
.mf-marquee--pause:hover .mf-marquee-track { animation-play-state: paused; }
@keyframes mf-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mf-marquee-track { animation: none; } }

/* ── Abschnitts-Kopf zentriert wie in der Vorlage ───────────────────────── */
.section-head.center .text-eyebrow { text-align: center; }

/* ── Warenkorb-Auslöser im Header ─────────────────────────────────────────
   Der Zähler sitzt am Knopf, weil der fliegende Warenkorb ihn dort sucht
   und danach kurz aufploppen lässt. */
.mf-cart-btn { position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; text-decoration: none; color: inherit; border: 1px solid var(--border-light);
  border-radius: 9999px; transition: all var(--transition-fast); }
.mf-cart-btn:hover { border-color: var(--text-primary); transform: translateY(-1px); }
.mf-cart-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9999px; background: var(--accent-terracotta); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.mf-cart-badge.bump { animation: mf-bump .35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes mf-bump { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } }
[x-cloak] { display: none !important; }

/* ── Gratisversand-Balken in der Schublade ──────────────────────────────── */
.free-shipping-bar { padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); font-size: .82rem; }
.free-shipping-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.free-shipping-done { color: #2e7d32; font-weight: 700; }
.progress-track { height: 6px; border-radius: 9999px; background: var(--bg-tertiary); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 9999px; background: var(--accent-terracotta);
  transition: width var(--transition-smooth); }

/* ── Karten heben sich leicht an ────────────────────────────────────────── */
.wwb-card.product-card { transition: transform var(--transition-smooth); }
.wwb-card.product-card:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .wwb-card.product-card:hover { transform: none; } }

/* Fehlendes Bild darf kein Loch reißen (die Woo-Importe liefern gerade 403). */
.product-card-media img { background: var(--bg-tertiary); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { background: var(--bg-dark); color: var(--text-light); padding: 64px 0 28px; margin-top: 80px; }
.site-footer [data-block-id] { max-width: var(--container-max); margin-inline: auto;
  padding-left: var(--container-pad); padding-right: var(--container-pad); }
.site-footer h4 { color: var(--text-light); }
.footer-legal { max-width: var(--container-max); margin: 32px auto 0;
  padding: 20px var(--container-pad) 0; border-top: 1px solid var(--border-dark-glass);
  font-size: .8rem; color: var(--text-light-muted); }


/* ══════════════════════════════════════════════════════════════════════════
   ENTSCHÄRFT: .reveal und .stagger-group aus der Vorlage
   ------------------------------------------------------------------------
   Die Vorlage versteckt damit Elemente (opacity:0) und blendet sie über ein
   eigenes IntersectionObserver-Skript wieder ein, das `.is-visible` setzt.
   Dieses Skript gehört zur Vorlage und ist hier bewusst NICHT übernommen —
   im wawum-Theme macht das der Core über `data-block-anim` (Block-Option
   „Animation").
   Ohne diese Rücksetzung bleibt alles mit einer der beiden Klassen für immer
   unsichtbar: vorhanden, anklickbar, nicht zu sehen. Genau das ist am
   15.08.2026 mit den Bento-Kacheln und dem Bestseller-Raster passiert.
   Die Regeln stehen bewusst am ENDE der Datei, damit sie die Vorlage
   überschreiben, statt sie herauszuschneiden — so bleibt die Vorlage
   vergleichbar.
   ══════════════════════════════════════════════════════════════════════════ */
.reveal,
.reveal.reveal-left,
.reveal.reveal-right,
.stagger-group > * {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Bento: vier gleich große Kacheln wie in der Vorlage ───────────────── */
.mf-bento-card { min-height: 300px; }
.mf-bento-pill { align-self: flex-start; background: rgba(255,255,255,.22);
  backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radius-full); padding: 4px 12px; font-size: .72rem;
  font-weight: 600; color: var(--text-light); margin-bottom: 8px; }
.mf-bento-body { gap: 2px; }
.mf-bento-title { font-size: 1.25rem; }
.mf-bento-note { font-size: .8rem; opacity: .82; }

/* ── Produktkarte: ruhiger Preisblock ──────────────────────────────────── */
.product-card-price { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.product-card-price .price-tag { display: block; }
.product-card-price .price { font-size: 1.15rem; font-weight: 700; }
.product-card-price .wawum-de-taxnote,
.product-card-delivery { display: block !important; font-size: .72rem !important;
  line-height: 1.4; color: var(--text-muted) !important; margin-top: 3px; }
.product-card-delivery:empty { display: none !important; }


/* ══════════════════════════════════════════════════════════════════════════
   NACHTRAG 15.08.2026 — Optik-Feinschliff
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Flache Blockstruktur für die Core-Staffelung ──────────────────────────
   product_grid und category_grid rendern ihr Raster jetzt AUF dem Wurzel-
   element des Blocks (siehe Kommentar in den beiden Overrides). Damit sind
   die Kacheln direkte Kinder, und `> :first-child > *` — der Selektor, mit
   dem der Core auffächert — trifft sie einzeln statt eine Hülle.
   Alles, was über die volle Breite laufen soll, bekommt .mf-span-all. */
.mf-span-all { grid-column: 1 / -1; }
/* Der Rasterabstand trennt bereits; die alte Kopfhöhe wäre jetzt doppelt. */
.section-head.mf-span-all { margin-bottom: clamp(6px, 1.5vw, 18px); }

/* ── Klassen aus der Vorlage, die es nur im Markup gab ─────────────────────
   headline-display, headline-section, text-eyebrow, btn-ghost und
   badge-glass standen in den Overrides, waren aber nirgends definiert: Die
   Überschriften liefen auf der reinen h1–h6-Regel, die Überzeile war
   normaler Fließtext, und „Alle ansehen" sah aus wie ein nackter Link.
   Nichts davon meldet ein Prüfwerkzeug — Markup und CSS sind je für sich
   gültig. */
.headline-display { font-family: var(--font-serif); font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 600; line-height: 1.04; letter-spacing: -0.03em; }
.headline-section { font-family: var(--font-serif); font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; margin: 0; }
.text-eyebrow { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-terracotta); margin-bottom: 12px; }
.btn-ghost { background: transparent; color: var(--text-primary);
  border: 1px solid var(--border-light); }
.btn-ghost:hover { background: var(--bg-secondary); border-color: var(--text-primary); }
.badge-glass { background: rgba(255, 255, 255, .82); color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, .55); backdrop-filter: blur(10px); }

/* ── Bild-Box (Override) ──────────────────────────────────────────────────
   Der Radius steht hier und nicht inline, damit „Form & Zuschnitt" aus dem
   Builder ihn überschreiben kann. */
.mf-imagebox { display: block; position: relative; overflow: hidden;
  border-radius: var(--radius-xl); background: var(--bg-tertiary);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth); }
a.mf-imagebox:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -15px rgba(30, 29, 27, .18); }
.mf-imagebox-media { position: relative; width: 100%; }
.mf-imagebox-media img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--transition-smooth); }
a.mf-imagebox:hover .mf-imagebox-media img { transform: scale(1.04); }
.mf-imagebox-leer { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: var(--text-muted); font-size: .85rem;
  border: 1px dashed var(--border-light); border-radius: inherit; }
.mf-imagebox-veil { position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(15, 14, 13, .78) 100%); }
.mf-imagebox--overlay .mf-imagebox-body { position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 34px; color: var(--text-light); }
.mf-imagebox--below .mf-imagebox-body { padding: 16px 4px 0; }
.mf-imagebox-title { display: block; font-family: var(--font-serif); font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  font-weight: 600; line-height: 1.12; }
.mf-imagebox-text { display: block; font-size: .86rem; opacity: .82; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) {
  a.mf-imagebox:hover, a.mf-imagebox:hover .mf-imagebox-media img { transform: none; }
}

/* ── Schnellansicht (Popup) ───────────────────────────────────────────────
   Hülle im Layout, Inhalt aus theme::partials.quickview. */
.mf-qv-backdrop { z-index: 1200; }
.mf-qv-loading { display: flex; justify-content: center; padding: 72px; }
.mf-qv-spinner { width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--border-light); border-top-color: var(--accent-terracotta);
  animation: mf-qv-spin .8s linear infinite; }
@keyframes mf-qv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mf-qv-spinner { animation-duration: 2.4s; } }

.mf-qv { display: grid; grid-template-columns: 1fr 1.05fr; gap: 34px; padding: 34px; }
.mf-qv-media { position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg-tertiary); aspect-ratio: 4 / 5; }
.mf-qv-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mf-qv-sale { position: absolute; top: 14px; left: 14px; }
.mf-qv-body { display: flex; flex-direction: column; gap: 10px; padding-right: 34px; }
.mf-qv-title { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600; line-height: 1.12; margin: 0; }
.mf-qv-rating { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-muted); }
.mf-qv-stars { color: var(--accent-ochre, var(--accent-terracotta)); letter-spacing: 2px; }
.mf-qv-price { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700;
  display: flex; align-items: baseline; gap: 7px; }
.mf-qv-ab { font-family: var(--font-body); font-size: .82rem; font-weight: 600; color: var(--text-muted); }
.mf-qv-group { margin-top: 4px; }
.mf-qv-group-name { display: block; font-size: .78rem; font-weight: 700; color: var(--text-muted);
  letter-spacing: .04em; margin-bottom: 8px; }
.mf-qv-options { display: flex; flex-wrap: wrap; gap: 8px; }
.mf-qv-opt { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--border-light);
  border-radius: var(--radius-full); padding: 7px 16px; font-size: .84rem; background: transparent;
  cursor: pointer; transition: all var(--transition-fast); }
.mf-qv-opt:hover { border-color: var(--text-primary); }
.mf-qv-opt.is-on { border-color: var(--accent-terracotta); background: rgba(184, 107, 83, .1); font-weight: 700; }
.mf-qv-dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--border-light); }
.mf-qv-plus { color: var(--text-muted); }
.mf-qv-delivery { font-size: .76rem; color: var(--text-muted); }
.mf-qv-delivery:empty { display: none; }
.mf-qv-desc { font-size: .88rem; line-height: 1.6; color: var(--text-secondary, var(--text-muted)); margin: 0; }
.mf-qv-actions { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.mf-qv-actions .btn { width: 100%; }
.mf-qv-actions .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
@media (max-width: 780px) {
  .mf-qv { grid-template-columns: 1fr; gap: 22px; padding: 22px; }
  .mf-qv-media { aspect-ratio: 16 / 10; }
  .mf-qv-body { padding-right: 0; }
}

/* ── Nachtrag 15.08.2026 (2) — Abschnitte aus der Vorlage nachgezogen ──────
   Der Seed hatte fünf der sechs Startseiten-Abschnitte der Vorlage nicht
   oder anders. Dazu kommen zwei Block-Overrides (banner, hotspots), die
   die Klassen der Vorlage benutzen — die standen im Stylesheet, wurden aber
   von keinem Block angesprochen. */

/* Kopfzeile des Produktrasters: Überschrift links, Link rechts. */
.mf-grid-head { display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 16px; margin-bottom: clamp(6px, 1.5vw, 18px); }

/* Banner = die große Bento-Karte. `.bento-card` liefert Radius, Polster und
   das Anheben; hier nur, was die Vorlage inline am Inhalt hatte. */
.mf-banner { justify-content: flex-end; }
.mf-banner .bento-overlay-gradient {
  background: linear-gradient(135deg,
    rgba(20, 19, 18, calc(0.30 + var(--mf-banner-dark, .3) * 0.62)) 0%,
    rgba(20, 19, 18, calc(var(--mf-banner-dark, .3) * 0.55)) 100%); }
.mf-banner-title { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.8vw, 2rem);
  margin: 16px 0 10px; line-height: 1.12; }
.mf-banner-text { max-width: 460px; font-size: .95rem; line-height: 1.6; margin-bottom: 20px; }
.mf-banner.dark-theme .mf-banner-title { color: #fff; }
.mf-banner.dark-theme .mf-banner-text { color: rgba(255, 255, 255, .85); }
.mf-banner-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.mf-banner.dark-theme .mf-banner-buttons .btn-secondary {
  background: rgba(255, 255, 255, .25); color: #fff; border-color: rgba(255, 255, 255, .4); }
.mf-banner.dark-theme .mf-banner-buttons .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .4); }
.mf-banner--center .bento-content { text-align: center; margin-inline: auto; }
.mf-banner--center .mf-banner-text { margin-inline: auto; }
.mf-banner--center .mf-banner-buttons { justify-content: center; }
.mf-banner--right .bento-content { text-align: right; margin-left: auto; }
.mf-banner--right .mf-banner-text { margin-left: auto; }
.mf-banner--right .mf-banner-buttons { justify-content: flex-end; }

/* Hotspots: die Vorlage öffnet die Sprechblase nur bei :hover. Mit :focus
   geht sie auch per Tastatur auf — sonst ist der Text ohne Maus unerreichbar. */
.hotspot-point:focus-visible { outline: 2px solid var(--accent-terracotta); outline-offset: 4px; }
.hotspot-point:focus-visible .hotspot-popover { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.hotspot-popover strong { color: var(--accent-terracotta); display: block; margin-bottom: 4px; }
@media (max-width: 700px) { .hotspot-stage { height: 340px; } }

/* Eine Sektion mit eigener Fläche soll ihre Kinder nicht doppelt einrücken. */
.wwb-section .container { padding-left: 0; padding-right: 0; }

/* ── Nachtrag 15.08.2026 (3) — Variantenwahl im Popup ─────────────────────
   Die Beschriftung einer Option steht in `value`, nicht in `name`; mit dem
   falschen Feld waren alle Knöpfe leer. Dazu kommen jetzt Farbfelder,
   ausverkaufte Optionen, das Wunschtext-Feld und die Bestätigung des
   Widerrufsausschlusses — alles IM Popup statt „geh auf die Produktseite". */
.mf-qv-chosen { font-style: normal; font-weight: 400; color: var(--text-muted); }
.mf-qv-opt[disabled] { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.mf-qv-opt[disabled]:hover { border-color: var(--border-light); }
.mf-qv-opt--color { padding: 4px; border-radius: 50%; }
.mf-qv-opt--color .mf-qv-dot { width: 26px; height: 26px; }
.mf-qv-opt--color.is-on { background: transparent; border-width: 2px; }
.mf-qv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.mf-qv-textfeld { margin-top: 4px; }
.mf-qv-textfeld textarea { width: 100%; border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 10px 12px; font: inherit; font-size: .88rem;
  resize: vertical; background: var(--bg-card); }
.mf-qv-textfeld textarea:focus { outline: 2px solid var(--accent-terracotta); outline-offset: 1px; }

.mf-qv-exclrev { display: flex; align-items: flex-start; gap: 9px; margin-top: 4px;
  font-size: .78rem; line-height: 1.45; color: var(--accent-terracotta); cursor: pointer; }
.mf-qv-exclrev input { width: 16px; height: 16px; margin-top: 1px; flex: none;
  accent-color: var(--accent-terracotta); }

/* ── Nachtrag 15.08.2026 (4) — nicht lieferbare Kombinationen ─────────────
   Ausgegraut, aber NICHT gesperrt: Wer sehen will, warum Schwarz nicht geht,
   muss Schwarz anklicken können. Ein gesperrter Knopf ist eine Sackgasse. */
.mf-qv-opt.is-out { opacity: .38; }
.mf-qv-opt.is-out:not(.mf-qv-opt--color) { text-decoration: line-through; }
.mf-qv-opt.is-out.is-on { opacity: .6; border-color: var(--color-danger, #964f3a); }
.mf-qv-opt--color.is-out { position: relative; }
.mf-qv-opt--color.is-out::after { content: ''; position: absolute; inset: 4px;
  border-radius: 50%; background: linear-gradient(to top left, transparent 46%,
  var(--text-primary) 46%, var(--text-primary) 54%, transparent 54%); opacity: .55; }

/* ── Nachtrag 15.08.2026 (5) — Popup = zweite Kaufstrecke ─────────────────
   Menge, Gravur und Bestandshinweis, damit im Popup dieselben Regeln gelten
   wie auf der Produktseite. */
.mf-qv-kaufzeile { display: flex; gap: 12px; align-items: stretch; }
.mf-qv-kaufzeile .btn { flex: 1; }
.qty-control.mf-qv-qty { display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--border-light); border-radius: var(--radius-full);
  padding: 0 6px; background: var(--bg-card); flex: none; }
.qty-btn { width: 32px; height: 38px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 1.05rem; background: none; border: none;
  cursor: pointer; color: var(--text-primary); }
.qty-btn:hover { color: var(--accent-terracotta); }
.mf-qv-qty > [data-qv-qty] { min-width: 22px; text-align: center; font-weight: 700; }

.mf-qv-perso { border: 1px solid var(--border-light); border-radius: var(--radius-md);
  padding: 14px 16px; background: var(--bg-secondary); }
.mf-qv-perso-kopf { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; font-size: .84rem; font-weight: 700; }
.mf-qv-perso input { width: 100%; margin-top: 10px; border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 10px 12px; font: inherit; font-size: .88rem;
  background: var(--bg-card); }
.mf-qv-perso input:focus { outline: 2px solid var(--accent-terracotta); outline-offset: 1px; }
.mf-qv-perso-fuss { display: flex; justify-content: space-between; gap: 10px;
  margin-top: 6px; font-size: .7rem; color: var(--text-muted); }
.mf-qv-perso-warn { margin: 10px 0 0; font-size: .74rem; line-height: 1.5;
  color: #8a5a2a; background: #fbf3e4; border: 1px solid #eedcb8;
  border-radius: var(--radius-sm); padding: 9px 11px; }

.mf-qv-lowstock { margin: 0; font-size: .78rem; font-weight: 700; color: var(--color-danger, #964f3a); }

@media (max-width: 480px) {
  .mf-qv-kaufzeile { flex-wrap: wrap; }
  .mf-qv-kaufzeile .btn { flex: 1 1 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   KASSE (16.08.2026)
   ------------------------------------------------------------------------
   Die Vorlage bringt für die Kasse fertige Klassen mit — .checkout-steps-bar,
   .checkout-step-tab, .option-card-radio, .form-input, .summary-item-card.
   Sie standen alle schon im Stylesheet und wurden von keinem Block benutzt;
   dieselbe Lücke wie bei .bento-card und .hotspot-stage (offene-punkte §7,
   Punkt 7). Die Overrides in views/blocks/checkout_*.blade.php sprechen sie
   jetzt an. Hier steht nur, was dort fehlte.

   Die Formularblöcke (Adresse, Kontakt, Notizen, Rechtstexte) werden BEWUSST
   nicht überschrieben: Ihre Feldnamen muss der Server exakt so sehen. Statt
   sie nachzubauen, werden die --wcb-*-Variablen des Cores auf die Tokens
   dieses Themes gestellt — dieselbe Optik, kein Risiko am Formular.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Core-Kassenblöcke an die Marke hängen ──────────────────────────────── */
.wawum-checkout .wcb,
.mf-co-block .wcb {
  --wcb-radius: var(--radius-md);
  --wcb-border: var(--border-light);
  --wcb-muted: var(--text-muted);
  --wcb-accent: var(--accent-terracotta);
  --wcb-surface: var(--bg-card);
  --wcb-page: var(--bg-primary);
  --wcb-text: var(--text-primary);
  --wcb-btn-bg: var(--text-primary);
  --wcb-btn-fg: #fff;
  --wcb-input-bg: var(--bg-secondary);
  font-family: var(--font-sans, inherit);
}
.wawum-checkout .wcb-h { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600; }
.wawum-checkout .wcb-label { font-size: .85rem; font-weight: 600; }
.wawum-checkout .wcb-input { border-radius: var(--radius-sm); padding: 12px 14px; }
.wawum-checkout .wcb-input:focus { background: #fff; }
.wawum-checkout .wcb-btn { border-radius: var(--radius-full); font-weight: 600; }
.wawum-checkout .wcb-card { border-radius: var(--radius-xl); padding: 26px; }

/* ── Hülle ──────────────────────────────────────────────────────────────── */
.wawum-checkout { max-width: var(--container-max); padding-inline: var(--container-pad); }
.wawum-checkout--wizard .wawum-wizard__bar { margin-bottom: 26px; }

/* ── Schritt-Leiste (Vorlage: .checkout-steps-bar) ──────────────────────── */
.mf-co-steps { display: flex; }
.mf-co-steps .checkout-step-tab { flex: 1; text-decoration: none; color: inherit; }
.mf-co-steps a.checkout-step-tab:hover { background: var(--bg-secondary); }

/* ── Auswahlkarten für Versand und Zahlung ──────────────────────────────── */
.mf-co-h { font-family: var(--font-serif); font-size: 1.3rem; margin: 0 0 14px; }
.mf-co-block + .mf-co-block .mf-co-h { margin-top: 28px; }
.mf-co-opt { display: flex; align-items: flex-start; gap: 14px; }
/* Der Radio-Knopf bleibt sichtbar — ein verstecktes Pflichtfeld bricht die
   Absendung wortlos ab (ThemeDoctor Regel 14). */
.mf-co-opt input[type="radio"] { width: 18px; height: 18px; flex: none; margin-top: 2px;
  accent-color: var(--accent-terracotta); cursor: pointer; }
.mf-co-opt-text { flex: 1; min-width: 0; display: block; }
.mf-co-opt-sub { display: block; font-size: .8rem; color: var(--text-muted); margin-top: 2px; }
.mf-co-opt-preis { white-space: nowrap; }
.mf-co-opt-preis.is-frei { color: #2e7d32; }
.option-card-radio:has(input:checked) { border-color: var(--text-primary); background: #fff;
  box-shadow: 0 4px 16px -8px rgba(30, 29, 27, .25); }
.mf-co-leer { color: var(--text-muted); font-size: .9rem; margin: 0; }

/* Erkennungszeichen der Zahlungsart — angedeutet, kein Logo-Nachbau. */
.mf-co-mark { font-size: .8rem; font-weight: 700; white-space: nowrap; padding: 4px 10px;
  border-radius: var(--radius-full); }
.mf-co-mark--paypal { color: #003087; font-style: italic; }
.mf-co-mark--klarna { background: #fce4ec; color: #c2185b; }
.mf-co-mark--card   { background: var(--bg-tertiary); color: var(--text-primary); }
.mf-co-mark--sepa   { background: var(--bg-tertiary); color: var(--text-secondary); }

/* ── Bestellübersicht ───────────────────────────────────────────────────── */
.mf-co-summary { background: var(--bg-secondary); padding: 28px; border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle); }
.mf-co-summary.is-sticky { position: sticky; top: 120px; }
.mf-co-summary-h { font-family: var(--font-serif); font-size: 1.25rem; margin: 0 0 14px; }
.mf-co-summary-liste { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px;
  max-height: 280px; overflow-y: auto; }
.mf-co-summary-text { min-width: 0; }
.mf-co-summary-text strong { font-size: .9rem; display: block; }
.mf-co-summary-sub { display: block; font-size: .75rem; color: var(--text-muted); }
.mf-co-summary-menge { display: block; font-size: .8rem; color: var(--text-secondary); }
.mf-co-summary-preis { white-space: nowrap; font-size: .95rem; }
.mf-co-summary-rechnung { border-top: 1px solid var(--border-light); padding-top: 14px; }
.mf-co-line { display: flex; justify-content: space-between; gap: 12px; font-size: .88rem;
  margin-bottom: 6px; }
.mf-co-line span:first-child { color: var(--text-muted); }
.mf-co-line.is-rabatt span { color: var(--accent-sage, #527357); }
.mf-co-line.is-gesamt { font-weight: 700; font-size: 1.05rem; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border-light); }
.mf-co-line.is-gesamt span:first-child { color: var(--text-primary); }
.mf-co-coupon { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-light); }
.mf-co-coupon-zeile { display: flex; gap: 8px; }
.mf-co-coupon-zeile .form-input { flex: 1; }

/* ── Navigation und Bestellabsendung ────────────────────────────────────── */
.mf-co-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 28px; }
.mf-co-order { margin-top: 24px; }
.mf-co-order-zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mf-co-order-btn { background: var(--accent-terracotta); box-shadow: 0 10px 28px rgba(184, 107, 83, .35); }
.mf-co-order-btn:hover { background: var(--accent-terracotta-dark, #a35c47); }
.mf-co-order-note { text-align: right; font-size: .75rem; color: var(--text-muted); margin: 8px 0 0; }

@media (max-width: 640px) {
  .mf-co-nav, .mf-co-order-zeile { flex-direction: column-reverse; align-items: stretch; }
  .mf-co-order-note { text-align: center; }
  .mf-co-summary.is-sticky { position: static; }
}

/* ── Nachtrag 16.08.2026 — Prüfschritt wie in der Vorlage ────────────────── */

/* „Deine Angaben": graue Zusammenfassung, Beschriftung links, Wert rechts. */
.mf-co-angaben { background: var(--bg-secondary); border-radius: var(--radius-md);
  padding: 16px 20px; margin-bottom: 20px; }
.mf-co-angaben .mf-co-h { font-size: 1.05rem; margin: 0 0 10px; }
.mf-co-angaben-liste { margin: 0; }
.mf-co-angaben-zeile { display: flex; justify-content: space-between; gap: 16px;
  align-items: baseline; padding: 5px 0; font-size: .85rem; }
.mf-co-angaben-zeile dt { color: var(--text-muted); flex: none; margin: 0; }
.mf-co-angaben-zeile dd { margin: 0; text-align: right; min-width: 0; }
.mf-co-angaben-zeile dd a { margin-left: 10px; font-size: .78rem;
  color: var(--accent-terracotta); text-decoration: underline; white-space: nowrap; }

/* Übersicht: die wesentlichen Merkmale je Artikel. */
.mf-co-summary-lieferzeit { display: block; font-size: .75rem; font-weight: 600;
  color: var(--accent-sage, #527357); }
.mf-co-line.is-klein { font-size: .75rem; margin-top: 2px; }
.mf-co-line.is-klein span { color: var(--text-muted); }
.mf-co-line .is-frei { color: #2e7d32; font-weight: 600; }
.mf-co-summary-recht { margin: 14px 0 0; font-size: .68rem; line-height: 1.5;
  color: var(--text-muted); }

/* Gutscheinfeld über der Rechnung, wie in der Vorlage. */
.mf-co-coupon { margin: 4px 0 16px; padding: 0; border: 0; }

/* ── Nachtrag 16.08.2026 (2) — Kasse wie in der Vorlage ──────────────────
   Vorher lag die Leiste 1·2·3 über der GANZEN Breite, und der Warenkorb
   begann darunter. In der Vorlage sitzt die Leiste OBEN IN der linken Karte
   (.checkout-wizard-container > .checkout-steps-bar), und der Warenkorb
   steht als eigene, gleich breite Spalte daneben — beide oben bündig.

   Das Umhängen macht die Hülle (partials/checkout-hoist); hier steht nur,
   wie es danach aussieht. */

.wawum-checkout__layout { gap: 36px; }

/* Die linke Spalte IST die Karte aus der Vorlage. */
.wawum-checkout--zweispaltig .wawum-checkout__main {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: 0 15px 45px -10px rgba(0, 0, 0, .06);
  overflow: hidden;
}

/* Leiste bündig an der Oberkante, mit Trennlinie zum Inhalt. */
.wawum-checkout--zweispaltig .wawum-wizard__bar,
.wawum-checkout--zweispaltig .wawum-checkout__bar { margin: 0; }
.wawum-checkout--zweispaltig .mf-co-steps { border-bottom: 1px solid var(--border-subtle); }

/* Der Innenabstand sitzt am Panel, NICHT am Gleitfenster: das Fenster
   schneidet ab (overflow), und ein Abstand dort ließe beim Blättern das
   Nachbar-Panel im Rand aufblitzen. */
.wawum-checkout--zweispaltig [data-wwb-co-inhalt] { padding: 28px; }
.wawum-checkout--zweispaltig [data-wwb-co-errors] { margin: 24px 28px 0; }

/* Die Blöcke stehen ohne eigene Karte (Seeds: card_style = plain) —
   der Abstand zwischen ihnen kommt von hier, sonst kleben sie. */
.wawum-checkout--zweispaltig [data-wwb-co-inhalt] [data-block-id] + [data-block-id] { margin-top: 26px; }

/* Rechte Spalte: dieselbe Kartenkante wie links. */
.mf-co-summary { border: 1px solid var(--border-subtle); }

@media (max-width: 720px) {
  .wawum-checkout--zweispaltig [data-wwb-co-inhalt] { padding: 20px; }
  .wawum-checkout--zweispaltig [data-wwb-co-errors] { margin: 18px 20px 0; }
}

/* ── Nachtrag 16.08.2026 (3) — Knöpfe: Umbrechen statt abschneiden ───────
   Befund Holger: Der Knopf „Weiter zu Versand & Zahlung" wurde an der
   Kartenkante abgeschnitten.

   Grund: Die linke Spalte ist seit dem zweispaltigen Umbau nur noch halb so
   breit. „Zurück zum Warenkorb" und „Weiter zu …" nebeneinander brauchten
   mehr Platz, als da war — und weil die Karte `overflow: hidden` hat (sonst
   ragte die Schritt-Leiste über die runden Ecken), war der Rest einfach weg.

   Zwei Sachen dagegen: kürzere Beschriftungen wie in der Vorlage (Seeds),
   UND diese Regel als Netz. Text im Knopf darf umbrechen; damit schrumpft
   der Knopf auf das längste Wort statt über den Rand zu wachsen. Wenn beide
   dann immer noch nicht nebeneinander passen, rutscht einer in die nächste
   Zeile. Abgeschnitten wird nie wieder. */
.mf-co-nav, .mf-co-order-zeile { flex-wrap: wrap; row-gap: 12px; }
.mf-co-nav > *, .mf-co-order-zeile > * { min-width: 0; max-width: 100%; }
.mf-co-nav .btn, .mf-co-order-zeile .btn { white-space: normal; text-align: center; }