﻿{"id":31510,"date":"2025-04-22T07:06:16","date_gmt":"2025-04-22T07:06:16","guid":{"rendered":"https:\/\/gobelka.com\/de\/?page_id=31510"},"modified":"2026-07-29T08:32:43","modified_gmt":"2026-07-29T08:32:43","slug":"belka-mix-naturtapete-diy-farbgestaltung","status":"publish","type":"page","link":"https:\/\/gobelka.com\/de\/belka-mix-naturtapete-diy-farbgestaltung\/","title":{"rendered":"Belka Mix"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"31510\" class=\"elementor elementor-31510\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0f10f0d e-con-full wd-section-stretch-content e-flex e-con e-parent\" data-id=\"0f10f0d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-59e070b elementor-widget elementor-widget-html\" data-id=\"59e070b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\r\n  BELKA Mix Hero \u00b7 Eigener Mix v2.0.0\r\n  Einsatz: WoodMart HTML Block \/ Elementor HTML-Widget\r\n  Position: Direkt vor dem Block #create-mix\r\n  Ziele:\r\n    1) Eigenen BELKA Mix erstellen -> #create-mix\r\n    2) Fertige BELKA Mixe entdecken -> https:\/\/gobelka.com\/de\/belka-mixe\/\r\n  Alle Styles und Scripts sind auf #belka-mix-hero-v1 begrenzt.\r\n-->\r\n\r\n<section id=\"belka-mix-hero-v1\" class=\"bmxh\" lang=\"de-DE\" aria-labelledby=\"bmxh-title\">\r\n  <div class=\"bmxh__inner\">\r\n    <div class=\"bmxh__card\">\r\n      <div class=\"bmxh__content\">\r\n        <span class=\"bmxh__kicker\">BELKA Mix \u00b7 Individuell gestalten<\/span>\r\n\r\n        <h1 id=\"bmxh-title\" class=\"bmxh__title\">\r\n          Gestalten Sie Ihren eigenen BELKA Mix.\r\n        <\/h1>\r\n\r\n        <p class=\"bmxh__lead\">\r\n          Kombinieren Sie Ihre pers\u00f6nlichen Lieblingsfarben und gestalten Sie eine\r\n          Wandoberfl\u00e4che, die genau zu Ihrem Raum, Ihrer Einrichtung und Ihrem Stil passt.\r\n        <\/p>\r\n\r\n        <div class=\"bmxh__paths\" aria-label=\"BELKA Mix Auswahlm\u00f6glichkeiten\">\r\n          <article class=\"bmxh__path bmxh__path--primary\">\r\n            <div class=\"bmxh__path-icon\" aria-hidden=\"true\">\r\n              <svg viewBox=\"0 0 24 24\" focusable=\"false\">\r\n                <circle cx=\"13.5\" cy=\"6.5\" r=\".7\"><\/circle>\r\n                <circle cx=\"17.5\" cy=\"10.5\" r=\".7\"><\/circle>\r\n                <circle cx=\"8.5\" cy=\"7.5\" r=\".7\"><\/circle>\r\n                <circle cx=\"6.5\" cy=\"12.5\" r=\".7\"><\/circle>\r\n                <path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c1 0 1.7-.8 1.7-1.7 0-.5-.2-.9-.5-1.2-.3-.3-.4-.7-.4-1.1 0-.9.7-1.7 1.7-1.7h2c3.1 0 5.5-2.5 5.5-5.5C22 6 17.5 2 12 2z\"><\/path>\r\n              <\/svg>\r\n            <\/div>\r\n\r\n            <div class=\"bmxh__path-copy\">\r\n              <span class=\"bmxh__path-label\">Individuell kombinieren<\/span>\r\n              <h2>Eigenen Mix erstellen<\/h2>\r\n              <p>Lieblingsfarben ausw\u00e4hlen, ihre Wirkung miteinander vergleichen und den pers\u00f6nlichen BELKA Mix zusammenstellen.<\/p>\r\n            <\/div>\r\n\r\n            <a class=\"bmxh__button bmxh__button--primary\" href=\"#create-mix\" data-bmxh-scroll>\r\n              Eigenen Mix gestalten\r\n              <span aria-hidden=\"true\">\u2192<\/span>\r\n            <\/a>\r\n          <\/article>\r\n\r\n          <article class=\"bmxh__path\">\r\n            <div class=\"bmxh__path-icon\" aria-hidden=\"true\">\r\n              <svg viewBox=\"0 0 24 24\" focusable=\"false\">\r\n                <path d=\"M4 5h16v14H4z\"><\/path>\r\n                <path d=\"M4 10h16M9 5v5m6 0v9\"><\/path>\r\n              <\/svg>\r\n            <\/div>\r\n\r\n            <div class=\"bmxh__path-copy\">\r\n              <span class=\"bmxh__path-label\">Fertig abgestimmt<\/span>\r\n              <h2>Fertige Mixe entdecken<\/h2>\r\n              <p>Professionell zusammengestellte Farbkombinationen entdecken und den passenden Mix direkt f\u00fcr die eigene Wandfl\u00e4che bestellen.<\/p>\r\n            <\/div>\r\n\r\n            <a class=\"bmxh__button bmxh__button--secondary\" href=\"https:\/\/gobelka.com\/de\/belka-mixe\/\">\r\n              Fertige Mixe ansehen\r\n              <span aria-hidden=\"true\">\u2192<\/span>\r\n            <\/a>\r\n          <\/article>\r\n        <\/div>\r\n\r\n        <ul class=\"bmxh__trust\" aria-label=\"BELKA Mix Vorteile\">\r\n          <li>\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m5 12 4 4L19 6\"><\/path><\/svg>\r\n            Lieblingsfarben frei kombinieren\r\n          <\/li>\r\n          <li>\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m5 12 4 4L19 6\"><\/path><\/svg>\r\n            Raumwirkung individuell gestalten\r\n          <\/li>\r\n          <li>\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m5 12 4 4L19 6\"><\/path><\/svg>\r\n            Einfach selbst aufzutragen\r\n          <\/li>\r\n        <\/ul>\r\n      <\/div>\r\n\r\n      <figure class=\"bmxh__visual\">\r\n        <img\r\n          class=\"bmxh__image\"\r\n          src=\"https:\/\/gobelka.com\/de\/wp-content\/uploads\/2025\/05\/belka-mix-belka-tapete.jpg\"\r\n          width=\"900\"\r\n          height=\"450\"\r\n          alt=\"Mehrfarbige BELKA Mix Wandgestaltung mit sichtbarer Baumwollstruktur\"\r\n          fetchpriority=\"high\"\r\n          decoding=\"async\"\r\n        >\r\n\r\n        <div class=\"bmxh__visual-shade\" aria-hidden=\"true\"><\/div>\r\n\r\n        <figcaption class=\"bmxh__visual-caption\">\r\n          <span class=\"bmxh__visual-eyebrow\">Ihr pers\u00f6nlicher BELKA Mix<\/span>\r\n          <strong>Ihre Farben. Ihre Kombination. Ihre Wand.<\/strong>\r\n          <span>Gestalten Sie eine Oberfl\u00e4che, die zu Ihrem pers\u00f6nlichen Wohnstil passt.<\/span>\r\n        <\/figcaption>\r\n\r\n        <div class=\"bmxh__palette\" aria-label=\"Beispiel einer BELKA Mix Farbpalette\">\r\n          <span style=\"--bmxh-color:#4f5d82\"><\/span>\r\n          <span style=\"--bmxh-color:#83a4c7\"><\/span>\r\n          <span style=\"--bmxh-color:#c9c2ba\"><\/span>\r\n          <span style=\"--bmxh-color:#e0dfdd\"><\/span>\r\n          <small>Ihre Farben \u00b7 Ihr Mix<\/small>\r\n        <\/div>\r\n      <\/figure>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  #belka-mix-hero-v1 {\r\n    --bmxh-red: #bd0f1b;\r\n    --bmxh-red-dark: #870b14;\r\n    --bmxh-ink: #15110f;\r\n    --bmxh-text: #554a44;\r\n    --bmxh-muted: #746963;\r\n    --bmxh-cream: #f7f4ee;\r\n    --bmxh-cream-2: #fcfaf7;\r\n    --bmxh-line: #ddd2c7;\r\n    --bmxh-white: #ffffff;\r\n    --bmxh-shadow: 0 18px 48px rgba(35, 23, 18, 0.12);\r\n    width: 100%;\r\n    position: relative;\r\n    overflow: hidden;\r\n    background:\r\n      radial-gradient(circle at 8% 10%, rgba(189, 15, 27, 0.075), transparent 30%),\r\n      linear-gradient(180deg, #fff 0%, var(--bmxh-cream-2) 100%);\r\n    color: var(--bmxh-ink);\r\n    padding: clamp(28px, 4vw, 58px) 0 clamp(42px, 6vw, 78px);\r\n    isolation: isolate;\r\n  }\r\n\r\n  #belka-mix-hero-v1,\r\n  #belka-mix-hero-v1 * {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  #belka-mix-hero-v1 h1,\r\n  #belka-mix-hero-v1 h2,\r\n  #belka-mix-hero-v1 p,\r\n  #belka-mix-hero-v1 figure,\r\n  #belka-mix-hero-v1 ul {\r\n    margin: 0;\r\n  }\r\n\r\n  #belka-mix-hero-v1 a {\r\n    text-decoration: none;\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__inner {\r\n    width: min(1240px, calc(100% - 40px));\r\n    margin-inline: auto;\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__card {\r\n    display: grid;\r\n    grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);\r\n    overflow: hidden;\r\n    border: 1px solid var(--bmxh-line);\r\n    border-radius: 12px;\r\n    background: var(--bmxh-white);\r\n    box-shadow: var(--bmxh-shadow);\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__content {\r\n    display: flex;\r\n    min-width: 0;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    padding: clamp(28px, 4.2vw, 58px);\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__kicker {\r\n    display: inline-flex;\r\n    width: fit-content;\r\n    align-items: center;\r\n    gap: 10px;\r\n    color: var(--bmxh-red);\r\n    font-size: 0.75rem;\r\n    font-weight: 900;\r\n    letter-spacing: 0.12em;\r\n    line-height: 1.35;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__kicker::before {\r\n    content: \"\";\r\n    width: 26px;\r\n    height: 3px;\r\n    border-radius: 999px;\r\n    background: currentColor;\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__title {\r\n    max-width: 780px;\r\n    margin-top: 13px;\r\n    color: var(--bmxh-ink);\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(2.25rem, 4.4vw, 4.25rem);\r\n    font-weight: 800;\r\n    letter-spacing: -0.047em;\r\n    line-height: 0.99;\r\n    text-wrap: balance;\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__lead {\r\n    max-width: 720px;\r\n    margin-top: 19px;\r\n    color: var(--bmxh-text);\r\n    font-size: clamp(1rem, 1.28vw, 1.13rem);\r\n    line-height: 1.66;\r\n    text-wrap: pretty;\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__paths {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    gap: 12px;\r\n    margin-top: clamp(24px, 3vw, 34px);\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__path {\r\n    display: flex;\r\n    min-width: 0;\r\n    flex-direction: column;\r\n    border: 1px solid var(--bmxh-line);\r\n    border-radius: 10px;\r\n    background: var(--bmxh-cream-2);\r\n    padding: 18px;\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__path--primary {\r\n    border-color: rgba(189, 15, 27, 0.22);\r\n    background: linear-gradient(145deg, rgba(189, 15, 27, 0.07), rgba(255, 255, 255, 0.96));\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__path-icon {\r\n    display: grid;\r\n    width: 42px;\r\n    height: 42px;\r\n    place-items: center;\r\n    border-radius: 9px;\r\n    background: #fff;\r\n    color: var(--bmxh-red);\r\n    box-shadow: 0 7px 18px rgba(35, 23, 18, 0.08);\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__path-icon svg {\r\n    width: 22px;\r\n    height: 22px;\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 1.8;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__path-copy {\r\n    flex: 1;\r\n    padding-top: 13px;\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__path-label {\r\n    display: block;\r\n    color: var(--bmxh-red);\r\n    font-size: 0.7rem;\r\n    font-weight: 900;\r\n    letter-spacing: 0.08em;\r\n    line-height: 1.3;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__path h2 {\r\n    margin-top: 5px;\r\n    color: var(--bmxh-ink);\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(1.25rem, 1.8vw, 1.55rem);\r\n    font-weight: 800;\r\n    letter-spacing: -0.025em;\r\n    line-height: 1.1;\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__path p {\r\n    margin-top: 8px;\r\n    color: var(--bmxh-text);\r\n    font-size: 0.86rem;\r\n    line-height: 1.5;\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__button {\r\n    display: inline-flex;\r\n    width: 100%;\r\n    min-height: 48px;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 9px;\r\n    margin-top: 16px;\r\n    border-radius: 7px;\r\n    padding: 13px 15px;\r\n    font-size: 0.84rem;\r\n    font-weight: 900;\r\n    line-height: 1.2;\r\n    text-align: center;\r\n    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__button--primary {\r\n    border: 1px solid var(--bmxh-red);\r\n    background: var(--bmxh-red);\r\n    color: #fff;\r\n    box-shadow: 0 10px 24px rgba(189, 15, 27, 0.22);\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__button--primary:hover {\r\n    transform: translateY(-1px);\r\n    border-color: var(--bmxh-red-dark);\r\n    background: var(--bmxh-red-dark);\r\n    color: #fff;\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__button--secondary {\r\n    border: 1px solid rgba(21, 17, 15, 0.18);\r\n    background: #fff;\r\n    color: var(--bmxh-ink);\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__button--secondary:hover {\r\n    transform: translateY(-1px);\r\n    border-color: var(--bmxh-ink);\r\n    background: var(--bmxh-ink);\r\n    color: #fff;\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__trust {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 9px 16px;\r\n    margin-top: 22px;\r\n    padding: 0;\r\n    list-style: none;\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__trust li {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 7px;\r\n    color: #443a34;\r\n    font-size: 0.76rem;\r\n    font-weight: 800;\r\n    line-height: 1.3;\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__trust svg {\r\n    width: 17px;\r\n    height: 17px;\r\n    fill: none;\r\n    stroke: var(--bmxh-red);\r\n    stroke-width: 2.4;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__visual {\r\n    position: relative;\r\n    min-height: 100%;\r\n    overflow: hidden;\r\n    background: #d9d0c7;\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__image {\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n    min-height: 620px;\r\n    object-fit: cover;\r\n    object-position: center;\r\n    transition: transform 0.6s ease;\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__card:hover .bmxh__image {\r\n    transform: scale(1.018);\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__visual-shade {\r\n    position: absolute;\r\n    inset: 0;\r\n    background:\r\n      linear-gradient(180deg, rgba(21, 17, 15, 0.04) 15%, rgba(21, 17, 15, 0.68) 100%),\r\n      linear-gradient(90deg, rgba(247, 244, 238, 0.12), transparent 45%);\r\n    pointer-events: none;\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__visual-caption {\r\n    position: absolute;\r\n    right: clamp(20px, 3vw, 34px);\r\n    bottom: clamp(78px, 9vw, 112px);\r\n    left: clamp(20px, 3vw, 34px);\r\n    z-index: 2;\r\n    color: #fff;\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__visual-eyebrow {\r\n    display: block;\r\n    margin-bottom: 8px;\r\n    color: rgba(255, 255, 255, 0.78);\r\n    font-size: 0.72rem;\r\n    font-weight: 900;\r\n    letter-spacing: 0.1em;\r\n    line-height: 1.3;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__visual-caption strong {\r\n    display: block;\r\n    max-width: 480px;\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(1.65rem, 3vw, 2.75rem);\r\n    letter-spacing: -0.03em;\r\n    line-height: 1.04;\r\n    text-wrap: balance;\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__visual-caption > span:last-child {\r\n    display: block;\r\n    max-width: 430px;\r\n    margin-top: 9px;\r\n    color: rgba(255, 255, 255, 0.82);\r\n    font-size: 0.88rem;\r\n    line-height: 1.5;\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__palette {\r\n    position: absolute;\r\n    right: clamp(16px, 2.4vw, 26px);\r\n    bottom: clamp(16px, 2.4vw, 26px);\r\n    left: clamp(16px, 2.4vw, 26px);\r\n    z-index: 3;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    border: 1px solid rgba(255, 255, 255, 0.3);\r\n    border-radius: 999px;\r\n    background: rgba(21, 17, 15, 0.72);\r\n    padding: 9px 12px;\r\n    backdrop-filter: blur(10px);\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__palette > span {\r\n    width: 26px;\r\n    height: 26px;\r\n    flex: 0 0 26px;\r\n    border: 2px solid rgba(255, 255, 255, 0.68);\r\n    border-radius: 50%;\r\n    background: var(--bmxh-color);\r\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\r\n  }\r\n\r\n  #belka-mix-hero-v1 .bmxh__palette small {\r\n    margin-left: auto;\r\n    color: #fff;\r\n    font-size: 0.72rem;\r\n    font-weight: 900;\r\n    letter-spacing: 0.04em;\r\n    line-height: 1.2;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  #belka-mix-hero-v1 :focus-visible {\r\n    outline: 3px solid #f3b63d;\r\n    outline-offset: 4px;\r\n  }\r\n\r\n  @media (max-width: 980px) {\r\n    #belka-mix-hero-v1 .bmxh__card {\r\n      grid-template-columns: 1fr;\r\n    }\r\n\r\n    #belka-mix-hero-v1 .bmxh__visual {\r\n      order: -1;\r\n      min-height: 390px;\r\n    }\r\n\r\n    #belka-mix-hero-v1 .bmxh__image {\r\n      min-height: 390px;\r\n      max-height: 520px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 700px) {\r\n    #belka-mix-hero-v1 {\r\n      padding: 18px 0 38px;\r\n    }\r\n\r\n    #belka-mix-hero-v1 .bmxh__inner {\r\n      width: min(100% - 24px, 640px);\r\n    }\r\n\r\n    #belka-mix-hero-v1 .bmxh__card {\r\n      border-radius: 10px;\r\n    }\r\n\r\n    #belka-mix-hero-v1 .bmxh__visual {\r\n      min-height: 280px;\r\n    }\r\n\r\n    #belka-mix-hero-v1 .bmxh__image {\r\n      min-height: 280px;\r\n      height: 280px;\r\n    }\r\n\r\n    #belka-mix-hero-v1 .bmxh__visual-caption {\r\n      bottom: 72px;\r\n    }\r\n\r\n    #belka-mix-hero-v1 .bmxh__visual-caption > span:last-child {\r\n      display: none;\r\n    }\r\n\r\n    #belka-mix-hero-v1 .bmxh__content {\r\n      padding: 25px 20px 26px;\r\n    }\r\n\r\n    #belka-mix-hero-v1 .bmxh__title {\r\n      font-size: clamp(2rem, 10vw, 3rem);\r\n      line-height: 1.02;\r\n    }\r\n\r\n    #belka-mix-hero-v1 .bmxh__lead {\r\n      margin-top: 15px;\r\n      font-size: 0.95rem;\r\n      line-height: 1.58;\r\n    }\r\n\r\n    #belka-mix-hero-v1 .bmxh__paths {\r\n      grid-template-columns: 1fr;\r\n      margin-top: 22px;\r\n    }\r\n\r\n    #belka-mix-hero-v1 .bmxh__path {\r\n      display: grid;\r\n      grid-template-columns: 42px minmax(0, 1fr);\r\n      column-gap: 13px;\r\n      padding: 16px;\r\n    }\r\n\r\n    #belka-mix-hero-v1 .bmxh__path-copy {\r\n      padding-top: 0;\r\n    }\r\n\r\n    #belka-mix-hero-v1 .bmxh__button {\r\n      grid-column: 1 \/ -1;\r\n      min-height: 50px;\r\n    }\r\n\r\n    #belka-mix-hero-v1 .bmxh__trust {\r\n      display: grid;\r\n      gap: 9px;\r\n      margin-top: 19px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 420px) {\r\n    #belka-mix-hero-v1 .bmxh__image {\r\n      min-height: 245px;\r\n      height: 245px;\r\n    }\r\n\r\n    #belka-mix-hero-v1 .bmxh__visual {\r\n      min-height: 245px;\r\n    }\r\n\r\n    #belka-mix-hero-v1 .bmxh__visual-caption {\r\n      bottom: 70px;\r\n    }\r\n\r\n    #belka-mix-hero-v1 .bmxh__visual-caption strong {\r\n      font-size: 1.55rem;\r\n    }\r\n\r\n    #belka-mix-hero-v1 .bmxh__palette > span {\r\n      width: 23px;\r\n      height: 23px;\r\n      flex-basis: 23px;\r\n    }\r\n\r\n    #belka-mix-hero-v1 .bmxh__palette small {\r\n      font-size: 0.65rem;\r\n    }\r\n  }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    #belka-mix-hero-v1 .bmxh__image,\r\n    #belka-mix-hero-v1 .bmxh__button {\r\n      transition: none;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  (() => {\r\n    \"use strict\";\r\n\r\n    const root = document.getElementById(\"belka-mix-hero-v1\");\r\n    if (!root || root.dataset.bmxhInitialized === \"true\") return;\r\n    root.dataset.bmxhInitialized = \"true\";\r\n\r\n    const getHeaderOffset = () => {\r\n      const candidates = [\r\n        document.querySelector(\".whb-header\"),\r\n        document.querySelector(\".elementor-location-header\"),\r\n        document.querySelector(\"header\")\r\n      ].filter(Boolean);\r\n\r\n      return candidates.reduce((height, element) => {\r\n        const rect = element.getBoundingClientRect();\r\n        const style = window.getComputedStyle(element);\r\n        const isFixed = style.position === \"fixed\" || style.position === \"sticky\";\r\n        return isFixed ? Math.max(height, rect.height) : height;\r\n      }, 0);\r\n    };\r\n\r\n    root.querySelectorAll(\"[data-bmxh-scroll]\").forEach((link) => {\r\n      link.addEventListener(\"click\", (event) => {\r\n        const selector = link.getAttribute(\"href\");\r\n        if (!selector || !selector.startsWith(\"#\")) return;\r\n\r\n        const target = document.querySelector(selector);\r\n        if (!target) return;\r\n\r\n        event.preventDefault();\r\n\r\n        const reducedMotion = window.matchMedia &&\r\n          window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n\r\n        const top = target.getBoundingClientRect().top + window.scrollY - getHeaderOffset() - 18;\r\n\r\n        window.scrollTo({\r\n          top: Math.max(0, top),\r\n          behavior: reducedMotion ? \"auto\" : \"smooth\"\r\n        });\r\n\r\n        if (window.history && typeof window.history.replaceState === \"function\") {\r\n          window.history.replaceState(null, \"\", selector);\r\n        }\r\n      });\r\n    });\r\n  })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-82f21fd elementor-widget elementor-widget-html\" data-id=\"82f21fd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"create-mix\" class=\"belka-create-mix-section\">\n  \t\t\t<link rel=\"stylesheet\" id=\"elementor-post-51591-css\" href=\"https:\/\/gobelka.com\/de\/wp-content\/uploads\/elementor\/css\/post-51591.css?ver=1787600141\" type=\"text\/css\" media=\"all\">\n\t\t\t<link rel='stylesheet' id='eu-vat-for-woocommerce-checkout-eu-vat-field-block-css' href='https:\/\/gobelka.com\/de\/wp-content\/plugins\/eu-vat-for-woocommerce\/includes\/blocks\/build\/checkout-eu-vat-field-block\/style-index.css?ver=4.8.0' media='all' \/>\n\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"51591\" class=\"elementor elementor-51591\" data-elementor-post-type=\"cms_block\">\n\t\t\t\t<div class=\"wd-negative-gap elementor-element elementor-element-d87ff2f e-flex e-con-boxed e-con e-parent\" data-id=\"d87ff2f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-99844c6 elementor-widget elementor-widget-html\" data-id=\"99844c6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- BELKA Mix v4 Production Rebuild \u2014 Elementor HTML Widget Ready -->\r\n<style>\r\n  .bmx4 {\r\n    --bmx-bg: #f6f7f5;\r\n    --bmx-surface: #ffffff;\r\n    --bmx-surface-soft: #f1f4f1;\r\n    --bmx-surface-warm: #f7f1ef;\r\n    --bmx-text: #1e1b17;\r\n    --bmx-muted: #5d625b;\r\n    --bmx-line: #d7ddd6;\r\n    --bmx-line-strong: #b7c0b7;\r\n    --bmx-red: #a60f1d;\r\n    --bmx-red-dark: #7d0a14;\r\n    --bmx-dark: #2a2722;\r\n    --bmx-success: #17633c;\r\n    --bmx-warning: #8a5a00;\r\n    --bmx-shadow: 0 10px 24px rgba(24, 28, 24, .07);\r\n    --bmx-shadow-soft: 0 4px 14px rgba(24, 28, 24, .05);\r\n    --bmx-radius: 5px;\r\n    --bmx-radius-sm: 4px;\r\n    --bmx-gap: clamp(12px, 1.8vw, 20px);\r\n    color: var(--bmx-text);\r\n    background: var(--bmx-bg);\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Arial, sans-serif;\r\n    line-height: 1.45;\r\n    inline-size: 100%;\r\n    padding: clamp(12px, 2.2vw, 22px) 0;\r\n    overflow-x: hidden;\r\n    overflow-x: clip;\r\n    isolation: isolate;\r\n  }\r\n\r\n  .bmx4 *,\r\n  .bmx4 *::before,\r\n  .bmx4 *::after {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .bmx4 button,\r\n  .bmx4 input {\r\n    font: inherit;\r\n  }\r\n\r\n  .bmx4 button {\r\n    -webkit-tap-highlight-color: transparent;\r\n    touch-action: manipulation;\r\n  }\r\n\r\n  .bmx4 img {\r\n    display: block;\r\n    max-inline-size: 100%;\r\n  }\r\n\r\n  .bmx4__anchor {\r\n    display: block;\r\n    block-size: 1px;\r\n    scroll-margin-top: 96px;\r\n  }\r\n\r\n  .bmx4__shell {\r\n    inline-size: min(1260px, calc(100% - 28px));\r\n    margin-inline: auto;\r\n  }\r\n\r\n  .bmx4__mobile-header {\r\n    display: none;\r\n    position: sticky;\r\n    inset-block-start: 8px;\r\n    z-index: 30;\r\n    padding: 10px;\r\n    margin-block-end: 12px;\r\n    background: rgba(255, 255, 255, .96);\r\n    border: 1px solid rgba(215, 221, 214, .92);\r\n    border-radius: var(--bmx-radius);\r\n    box-shadow: var(--bmx-shadow-soft);\r\n    -webkit-backdrop-filter: blur(10px);\r\n    backdrop-filter: blur(10px);\r\n  }\r\n\r\n  .bmx4__mobile-title-row,\r\n  .bmx4__card-header,\r\n  .bmx4__box-head,\r\n  .bmx4__selected-head,\r\n  .bmx4__modal-head {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    justify-content: space-between;\r\n    gap: 12px;\r\n  }\r\n\r\n  .bmx4__title-group {\r\n    min-inline-size: 0;\r\n  }\r\n\r\n  .bmx4__kicker {\r\n    display: block;\r\n    color: var(--bmx-red-dark);\r\n    font-size: .74rem;\r\n    font-weight: 850;\r\n    letter-spacing: .035em;\r\n    text-transform: uppercase;\r\n    margin-block-end: 3px;\r\n  }\r\n\r\n  .bmx4__title,\r\n  .bmx4__card-title,\r\n  .bmx4__modal-title {\r\n    margin: 0;\r\n    font-weight: 850;\r\n    line-height: 1.14;\r\n    letter-spacing: 0;\r\n  }\r\n\r\n  .bmx4__title {\r\n    font-size: clamp(1.2rem, 2.4vw, 1.65rem);\r\n  }\r\n\r\n  .bmx4__card-title {\r\n    font-size: clamp(1.08rem, 1.8vw, 1.34rem);\r\n  }\r\n\r\n  .bmx4__modal-title {\r\n    font-size: 1.06rem;\r\n  }\r\n\r\n  .bmx4__text {\r\n    margin: 6px 0 0;\r\n    color: var(--bmx-muted);\r\n    font-size: .92rem;\r\n  }\r\n\r\n  .bmx4__progress {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, minmax(0, 1fr));\r\n    gap: 6px;\r\n    margin-block-start: 10px;\r\n  }\r\n\r\n  .bmx4__step-pill {\r\n    min-block-size: 34px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    border: 1px solid var(--bmx-line);\r\n    border-radius: var(--bmx-radius-sm);\r\n    background: #fff;\r\n    color: var(--bmx-muted);\r\n    font-size: .78rem;\r\n    font-weight: 800;\r\n    text-align: center;\r\n  }\r\n\r\n  .bmx4[data-step=\"1\"] .bmx4__step-pill[data-step=\"1\"],\r\n  .bmx4[data-step=\"2\"] .bmx4__step-pill[data-step=\"2\"],\r\n  .bmx4[data-step=\"3\"] .bmx4__step-pill[data-step=\"3\"] {\r\n    color: #fff;\r\n    background: var(--bmx-red);\r\n    border-color: var(--bmx-red);\r\n  }\r\n\r\n  .bmx4__notices {\r\n    display: grid;\r\n    gap: 8px;\r\n    margin-block-end: 12px;\r\n  }\r\n\r\n  .bmx4__notice {\r\n    padding: 10px 12px;\r\n    border-radius: var(--bmx-radius);\r\n    border: 1px solid var(--bmx-line);\r\n    background: #fff;\r\n    color: var(--bmx-text);\r\n    font-size: .92rem;\r\n  }\r\n\r\n  .bmx4__notice--success {\r\n    border-color: rgba(23, 99, 60, .34);\r\n    background: #eff8f2;\r\n  }\r\n\r\n  .bmx4__notice--error {\r\n    border-color: rgba(179, 13, 27, .34);\r\n    background: #fff1f2;\r\n  }\r\n\r\n  .bmx4__notice--warning {\r\n    border-color: rgba(138, 90, 0, .36);\r\n    background: #fff8e8;\r\n  }\r\n\r\n  .bmx4__notice a {\r\n    color: var(--bmx-red-dark);\r\n    font-weight: 900;\r\n  }\r\n\r\n  .bmx4__layout {\r\n    display: grid;\r\n    grid-template-columns: minmax(300px, .9fr) minmax(0, 1.25fr);\r\n    gap: var(--bmx-gap);\r\n    align-items: start;\r\n  }\r\n\r\n  .bmx4__main {\r\n    display: grid;\r\n    gap: var(--bmx-gap);\r\n    min-inline-size: 0;\r\n  }\r\n\r\n  .bmx4__side,\r\n  .bmx4__section {\r\n    min-inline-size: 0;\r\n  }\r\n\r\n  .bmx4__card {\r\n    background: var(--bmx-surface);\r\n    border: 1px solid rgba(215, 221, 214, .94);\r\n    border-radius: var(--bmx-radius);\r\n    box-shadow: var(--bmx-shadow-soft);\r\n    padding: clamp(14px, 1.8vw, 20px);\r\n  }\r\n\r\n  .bmx4__card-header {\r\n    margin-block-end: 16px;\r\n  }\r\n\r\n  .bmx4__actions,\r\n  .bmx4__toolbar,\r\n  .bmx4__nav {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    align-items: center;\r\n    gap: 8px;\r\n  }\r\n\r\n  .bmx4__toolbar {\r\n    justify-content: flex-end;\r\n  }\r\n\r\n  .bmx4__side .bmx4__card-header {\r\n    display: block;\r\n  }\r\n\r\n  .bmx4__side .bmx4__actions {\r\n    margin-block-start: 12px;\r\n  }\r\n\r\n  .bmx4__side .bmx4__actions .bmx4__btn {\r\n    flex: 1 1 150px;\r\n  }\r\n\r\n  .bmx4__nav {\r\n    margin-block-start: 14px;\r\n  }\r\n\r\n  .bmx4__btn {\r\n    appearance: none;\r\n    min-block-size: 42px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 8px;\r\n    padding: 9px 15px;\r\n    border: 1px solid var(--bmx-line);\r\n    border-radius: var(--bmx-radius-sm);\r\n    background: var(--bmx-surface);\r\n    color: var(--bmx-text);\r\n    cursor: pointer;\r\n    font-size: .9rem;\r\n    font-weight: 800;\r\n    line-height: 1;\r\n    text-decoration: none;\r\n    transition: transform .16s ease, background-color .16s ease, border-color .16s ease, opacity .16s ease;\r\n  }\r\n\r\n  .bmx4__btn:hover:not(:disabled) {\r\n    transform: translateY(-1px);\r\n    border-color: var(--bmx-line-strong);\r\n    background: #f9faf8;\r\n  }\r\n\r\n  .bmx4__btn:focus-visible,\r\n  .bmx4__count-btn:focus-visible,\r\n  .bmx4__package-btn:focus-visible,\r\n  .bmx4__product-item:focus-visible,\r\n  .bmx4__search-input:focus-visible {\r\n    outline: 3px solid rgba(179, 13, 27, .22);\r\n    outline-offset: 2px;\r\n  }\r\n\r\n  .bmx4__btn:disabled,\r\n  .bmx4__count-btn:disabled,\r\n  .bmx4__package-btn:disabled,\r\n  .bmx4__product-item:disabled {\r\n    opacity: .48;\r\n    cursor: not-allowed;\r\n    transform: none;\r\n  }\r\n\r\n  .bmx4__btn--primary {\r\n    color: #fff;\r\n    background: var(--bmx-red);\r\n    border-color: var(--bmx-red);\r\n  }\r\n\r\n  .bmx4__btn--primary:hover:not(:disabled) {\r\n    background: var(--bmx-red-dark);\r\n    border-color: var(--bmx-red-dark);\r\n  }\r\n\r\n  .bmx4__btn--dark {\r\n    color: #fff;\r\n    background: var(--bmx-dark);\r\n    border-color: var(--bmx-dark);\r\n  }\r\n\r\n  .bmx4__btn--dark:hover:not(:disabled) {\r\n    color: #fff;\r\n    background: #171410;\r\n    border-color: #171410;\r\n  }\r\n\r\n  .bmx4__btn--ghost {\r\n    background: transparent;\r\n  }\r\n\r\n  .bmx4__btn--small {\r\n    min-block-size: 40px;\r\n    padding: 7px 11px;\r\n    font-size: .82rem;\r\n  }\r\n\r\n  .bmx4__icon-btn {\r\n    inline-size: 42px;\r\n    block-size: 42px;\r\n    padding: 0;\r\n  }\r\n\r\n  .bmx4__icon {\r\n    inline-size: 17px;\r\n    block-size: 17px;\r\n    flex: 0 0 auto;\r\n  }\r\n\r\n  .bmx4__preview-fullscreen {\r\n    min-block-size: 42px;\r\n    padding-inline: 13px;\r\n  }\r\n\r\n  .bmx4__label {\r\n    display: block;\r\n    margin-block-end: 6px;\r\n    font-weight: 900;\r\n  }\r\n\r\n  .bmx4__help {\r\n    margin: 0 0 10px;\r\n    color: var(--bmx-muted);\r\n    font-size: .88rem;\r\n  }\r\n\r\n  .bmx4__count-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(4, minmax(0, 1fr));\r\n    gap: 8px;\r\n    margin-block: 10px 16px;\r\n  }\r\n\r\n  .bmx4__count-btn {\r\n    appearance: none;\r\n    min-block-size: 44px;\r\n    border: 1px solid var(--bmx-line);\r\n    border-radius: var(--bmx-radius);\r\n    background: #fff;\r\n    color: var(--bmx-text);\r\n    cursor: pointer;\r\n    font-weight: 850;\r\n  }\r\n\r\n  .bmx4__count-btn[aria-pressed=\"true\"] {\r\n    color: #fff;\r\n    background: var(--bmx-dark);\r\n    border-color: var(--bmx-dark);\r\n  }\r\n\r\n  .bmx4__boxes,\r\n  .bmx4__selected-list,\r\n  .bmx4__product-list {\r\n    display: grid;\r\n    gap: 10px;\r\n  }\r\n\r\n  .bmx4__box,\r\n  .bmx4__selected-product {\r\n    padding: 11px;\r\n    border: 1px solid var(--bmx-line);\r\n    border-radius: var(--bmx-radius);\r\n    background: #fff;\r\n    box-shadow: 0 1px 0 rgba(24, 28, 24, .03);\r\n  }\r\n\r\n  .bmx4__box-head,\r\n  .bmx4__selected-head {\r\n    align-items: center;\r\n    margin-block-end: 8px;\r\n  }\r\n\r\n  .bmx4__box-title,\r\n  .bmx4__selected-title {\r\n    font-size: .92rem;\r\n    font-weight: 850;\r\n  }\r\n\r\n  .bmx4__mini-actions {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 4px;\r\n  }\r\n\r\n  .bmx4__mini-btn {\r\n    appearance: none;\r\n    inline-size: 34px;\r\n    block-size: 34px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 0;\r\n    border: 1px solid transparent;\r\n    border-color: var(--bmx-line);\r\n    border-radius: var(--bmx-radius-sm);\r\n    background: #fff;\r\n    color: var(--bmx-text);\r\n    cursor: pointer;\r\n  }\r\n\r\n  .bmx4__mini-btn:hover:not(:disabled) {\r\n    background: var(--bmx-surface-warm);\r\n  }\r\n\r\n  .bmx4__mini-btn[aria-pressed=\"true\"] {\r\n    color: var(--bmx-red);\r\n  }\r\n\r\n  .bmx4__product-row {\r\n    display: grid;\r\n    grid-template-columns: 64px minmax(0, 1fr);\r\n    gap: 12px;\r\n    align-items: center;\r\n  }\r\n\r\n  .bmx4__thumb {\r\n    inline-size: 64px;\r\n    block-size: 64px;\r\n    object-fit: cover;\r\n    border: 1px solid rgba(183, 192, 183, .76);\r\n    border-radius: var(--bmx-radius-sm);\r\n    background: var(--bmx-surface-soft);\r\n  }\r\n\r\n  .bmx4__product-name {\r\n    margin: 0 0 3px;\r\n    color: var(--bmx-text);\r\n    font-weight: 800;\r\n    overflow-wrap: anywhere;\r\n  }\r\n\r\n  .bmx4__product-meta {\r\n    margin: 0;\r\n    color: var(--bmx-muted);\r\n    font-size: .86rem;\r\n  }\r\n\r\n  .bmx4__product-tools {\r\n    margin-block-start: 8px;\r\n  }\r\n\r\n  .bmx4__empty-box,\r\n  .bmx4__note {\r\n    padding: 10px;\r\n    border: 1px dashed var(--bmx-line-strong);\r\n    border-radius: var(--bmx-radius);\r\n    background: var(--bmx-surface-soft);\r\n  }\r\n\r\n  .bmx4__empty-box .bmx4__btn {\r\n    inline-size: 100%;\r\n    min-block-size: 40px;\r\n  }\r\n\r\n  .bmx4__empty-box .bmx4__btn--dark {\r\n    color: var(--bmx-text);\r\n    background: #fff;\r\n    border-color: var(--bmx-line-strong);\r\n  }\r\n\r\n  .bmx4__empty-box .bmx4__btn--dark:hover:not(:disabled) {\r\n    color: #fff;\r\n    background: var(--bmx-dark);\r\n    border-color: var(--bmx-dark);\r\n  }\r\n\r\n  .bmx4__mineral {\r\n    margin-block-start: 14px;\r\n    padding-block-start: 14px;\r\n    border-block-start: 1px solid rgba(215, 221, 214, .86);\r\n  }\r\n\r\n  .bmx4__check {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 10px;\r\n    min-block-size: 44px;\r\n    padding-block: 5px;\r\n    color: var(--bmx-text);\r\n    cursor: pointer;\r\n    font-weight: 800;\r\n  }\r\n\r\n  .bmx4__check input {\r\n    appearance: none;\r\n    position: relative;\r\n    flex: 0 0 24px;\r\n    inline-size: 24px;\r\n    block-size: 24px;\r\n    margin: 0;\r\n    border: 1px solid var(--bmx-line-strong);\r\n    border-radius: var(--bmx-radius-sm);\r\n    background: #fff;\r\n  }\r\n\r\n  .bmx4__check input:checked {\r\n    background: var(--bmx-red);\r\n    border-color: var(--bmx-red);\r\n  }\r\n\r\n  .bmx4__check input:checked::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset-block-start: 4px;\r\n    inset-inline-start: 8px;\r\n    inline-size: 7px;\r\n    block-size: 12px;\r\n    border: solid #fff;\r\n    border-width: 0 2px 2px 0;\r\n    transform: rotate(45deg);\r\n  }\r\n\r\n  .bmx4__mineral-box {\r\n    margin-block-start: 10px;\r\n  }\r\n\r\n  .bmx4__mineral-box[hidden] {\r\n    display: none !important;\r\n  }\r\n\r\n  .bmx4__result-wrap {\r\n    position: relative;\r\n    min-block-size: clamp(290px, 42vw, 520px);\r\n    display: grid;\r\n    place-items: center;\r\n    overflow: hidden;\r\n    border: 1px solid var(--bmx-line);\r\n    border-radius: var(--bmx-radius);\r\n    background:\r\n      linear-gradient(0deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .78)),\r\n      repeating-linear-gradient(45deg, rgba(183, 192, 183, .16) 0, rgba(183, 192, 183, .16) 1px, transparent 1px, transparent 12px);\r\n  }\r\n\r\n  .bmx4__placeholder {\r\n    display: grid;\r\n    place-items: center;\r\n    gap: 8px;\r\n    padding: 24px;\r\n    color: var(--bmx-muted);\r\n    text-align: center;\r\n  }\r\n\r\n  .bmx4__placeholder strong {\r\n    color: var(--bmx-text);\r\n    font-size: 1rem;\r\n  }\r\n\r\n  .bmx4__result-image {\r\n    inline-size: 100%;\r\n    block-size: 100%;\r\n    max-block-size: 620px;\r\n    object-fit: contain;\r\n    transform-origin: center;\r\n    transition: transform .18s ease;\r\n  }\r\n\r\n  .bmx4__result-image[hidden],\r\n  .bmx4__placeholder[hidden] {\r\n    display: none !important;\r\n  }\r\n\r\n  .bmx4__processing {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 2;\r\n    display: grid;\r\n    place-items: center;\r\n    background: rgba(255, 255, 255, .86);\r\n    text-align: center;\r\n  }\r\n\r\n  .bmx4__processing[hidden] {\r\n    display: none !important;\r\n  }\r\n\r\n  .bmx4__spinner {\r\n    inline-size: 44px;\r\n    block-size: 44px;\r\n    margin-inline: auto;\r\n    border: 4px solid var(--bmx-line);\r\n    border-block-start-color: var(--bmx-red);\r\n    border-radius: 999px;\r\n    animation: bmx4-spin 1s linear infinite;\r\n  }\r\n\r\n  @keyframes bmx4-spin {\r\n    to {\r\n      transform: rotate(360deg);\r\n    }\r\n  }\r\n\r\n  .bmx4__disclaimer,\r\n  .bmx4__note {\r\n    margin-block-start: 12px;\r\n    color: var(--bmx-muted);\r\n    background: var(--bmx-surface-soft);\r\n    border: 1px solid rgba(183, 192, 183, .72);\r\n    border-radius: var(--bmx-radius);\r\n    padding: 9px 11px;\r\n    font-size: .88rem;\r\n  }\r\n\r\n  .bmx4__disclaimer strong,\r\n  .bmx4__note strong {\r\n    color: var(--bmx-text);\r\n  }\r\n\r\n  .bmx4__package-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, minmax(0, 1fr));\r\n    gap: 8px;\r\n    margin-block-start: 10px;\r\n  }\r\n\r\n  .bmx4__package-btn {\r\n    appearance: none;\r\n    min-block-size: 42px;\r\n    border: 1px solid var(--bmx-line);\r\n    border-radius: var(--bmx-radius);\r\n    background: #fff;\r\n    color: var(--bmx-text);\r\n    cursor: pointer;\r\n    font-weight: 850;\r\n  }\r\n\r\n  .bmx4__package-btn[aria-pressed=\"true\"] {\r\n    color: #fff;\r\n    background: var(--bmx-dark);\r\n    border-color: var(--bmx-dark);\r\n  }\r\n\r\n  .bmx4__qty-row {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 12px;\r\n    margin-block-start: 10px;\r\n    padding: 8px;\r\n    border: 1px solid rgba(183, 192, 183, .72);\r\n    border-radius: var(--bmx-radius);\r\n  }\r\n\r\n  .bmx4__qty-value {\r\n    min-inline-size: 2ch;\r\n    text-align: center;\r\n    font-weight: 950;\r\n  }\r\n\r\n  .bmx4__totals {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 10px;\r\n    margin-block: 14px;\r\n  }\r\n\r\n  .bmx4__total-box {\r\n    padding: 12px;\r\n    border: 1px solid rgba(183, 192, 183, .72);\r\n    border-radius: var(--bmx-radius);\r\n    background: var(--bmx-surface-soft);\r\n    text-align: center;\r\n  }\r\n\r\n  .bmx4__total-label {\r\n    margin: 0 0 4px;\r\n    color: var(--bmx-muted);\r\n    font-size: .86rem;\r\n  }\r\n\r\n  .bmx4__total-value {\r\n    margin: 0;\r\n    color: var(--bmx-text);\r\n    font-size: 1.18rem;\r\n    font-weight: 850;\r\n  }\r\n\r\n  .bmx4__cart-row {\r\n    display: grid;\r\n    gap: 8px;\r\n  }\r\n\r\n  .bmx4__cart-row > .bmx4__btn {\r\n    inline-size: 100%;\r\n  }\r\n\r\n  .bmx4__modal,\r\n  .bmx4__fullscreen {\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: 99999;\r\n  }\r\n\r\n  .bmx4__modal[hidden],\r\n  .bmx4__fullscreen[hidden] {\r\n    display: none !important;\r\n  }\r\n\r\n  .bmx4__modal {\r\n    display: grid;\r\n    place-items: center;\r\n    padding: 16px;\r\n    background: rgba(18, 17, 16, .62);\r\n  }\r\n\r\n  .bmx4__modal-panel {\r\n    inline-size: min(580px, 100%);\r\n    max-block-size: min(720px, 90vh);\r\n    display: flex;\r\n    flex-direction: column;\r\n    overflow: hidden;\r\n    background: #fff;\r\n    border-radius: var(--bmx-radius);\r\n    box-shadow: 0 18px 52px rgba(18, 17, 16, .22);\r\n  }\r\n\r\n  .bmx4__modal-head {\r\n    align-items: center;\r\n    padding: 16px;\r\n    border-block-end: 1px solid var(--bmx-line);\r\n  }\r\n\r\n  .bmx4__modal-body {\r\n    min-block-size: 0;\r\n    display: grid;\r\n    grid-template-rows: auto 1fr;\r\n    gap: 12px;\r\n    padding: 16px;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .bmx4__search-input {\r\n    inline-size: 100%;\r\n    min-block-size: 46px;\r\n    padding: 10px 12px;\r\n    border: 1px solid var(--bmx-line);\r\n    border-radius: var(--bmx-radius);\r\n    outline: none;\r\n  }\r\n\r\n  .bmx4__search-input:focus {\r\n    border-color: var(--bmx-red);\r\n  }\r\n\r\n  .bmx4__product-list {\r\n    max-block-size: 56vh;\r\n    overflow: auto;\r\n    padding-inline-end: 4px;\r\n  }\r\n\r\n  .bmx4__product-item {\r\n    appearance: none;\r\n    inline-size: 100%;\r\n    display: grid;\r\n    grid-template-columns: 58px minmax(0, 1fr) auto;\r\n    gap: 12px;\r\n    align-items: center;\r\n    padding: 10px;\r\n    border: 1px solid var(--bmx-line);\r\n    border-radius: var(--bmx-radius);\r\n    background: #fff;\r\n    color: var(--bmx-text);\r\n    cursor: pointer;\r\n    text-align: start;\r\n  }\r\n\r\n  .bmx4__product-item:hover:not(:disabled) {\r\n    background: #f8faf8;\r\n    border-color: var(--bmx-dark);\r\n  }\r\n\r\n  .bmx4__product-item .bmx4__thumb {\r\n    inline-size: 58px;\r\n    block-size: 58px;\r\n  }\r\n\r\n  .bmx4__badge {\r\n    white-space: nowrap;\r\n    color: var(--bmx-muted);\r\n    font-size: .78rem;\r\n    font-weight: 850;\r\n  }\r\n\r\n  .bmx4__fullscreen {\r\n    display: grid;\r\n    place-items: center;\r\n    padding: 56px 16px 16px;\r\n    background: rgba(255, 255, 255, .98);\r\n  }\r\n\r\n  .bmx4__fullscreen-close {\r\n    position: absolute;\r\n    inset-block-start: 14px;\r\n    inset-inline-end: 14px;\r\n  }\r\n\r\n  .bmx4__fullscreen-img {\r\n    max-inline-size: 100%;\r\n    max-block-size: calc(100vh - 86px);\r\n    object-fit: contain;\r\n    transform-origin: center;\r\n  }\r\n\r\n  .bmx4__mobile-only {\r\n    display: none !important;\r\n  }\r\n\r\n  .bmx4__mix-chips {\r\n    display: none;\r\n  }\r\n\r\n  @media (max-width: 900px) {\r\n    .bmx4__layout {\r\n      grid-template-columns: 1fr;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 767px) {\r\n    .bmx4 {\r\n      padding-block-start: 8px;\r\n    }\r\n\r\n    .bmx4__mobile-header {\r\n      display: block;\r\n    }\r\n\r\n    .bmx4__desktop-only {\r\n      display: none !important;\r\n    }\r\n\r\n    .bmx4__btn.bmx4__mobile-only {\r\n      display: inline-flex !important;\r\n    }\r\n\r\n    .bmx4__nav.bmx4__mobile-only {\r\n      display: flex !important;\r\n    }\r\n\r\n    .bmx4__section {\r\n      display: none;\r\n    }\r\n\r\n    .bmx4[data-step=\"1\"] .bmx4__section[data-section=\"1\"],\r\n    .bmx4[data-step=\"2\"] .bmx4__section[data-section=\"2\"],\r\n    .bmx4[data-step=\"3\"] .bmx4__section[data-section=\"3\"] {\r\n      display: block;\r\n    }\r\n\r\n    .bmx4__mobile-title-row,\r\n    .bmx4__card-header {\r\n      display: block;\r\n    }\r\n\r\n    .bmx4__actions,\r\n    .bmx4__toolbar {\r\n      margin-block-start: 10px;\r\n    }\r\n\r\n    .bmx4__mobile-header .bmx4__btn span {\r\n      display: none;\r\n    }\r\n\r\n    .bmx4__mobile-header .bmx4__btn--small {\r\n      inline-size: 40px;\r\n      min-block-size: 40px;\r\n      padding: 0;\r\n    }\r\n\r\n    .bmx4__mini-btn {\r\n      inline-size: 40px;\r\n      block-size: 40px;\r\n    }\r\n\r\n    .bmx4__result-wrap {\r\n      min-block-size: clamp(300px, 58vh, 390px);\r\n    }\r\n\r\n    .bmx4__totals {\r\n      grid-template-columns: 1fr;\r\n    }\r\n\r\n    .bmx4__product-item {\r\n      grid-template-columns: 54px minmax(0, 1fr);\r\n    }\r\n\r\n    .bmx4__badge {\r\n      grid-column: 2;\r\n    }\r\n  }\r\n\r\n  \/* 2026 UX polish layer: keeps the production logic intact, modernizes layout and touch behavior. *\/\r\n  .bmx4 {\r\n    --bmx-bg: #faf9f6;\r\n    --bmx-surface: #ffffff;\r\n    --bmx-surface-soft: #f4f1ea;\r\n    --bmx-surface-warm: #fff5f2;\r\n    --bmx-text: #201f1b;\r\n    --bmx-muted: #66655f;\r\n    --bmx-line: #e3dfd6;\r\n    --bmx-line-strong: #c8c1b4;\r\n    --bmx-red: #b30d1b;\r\n    --bmx-red-dark: #870914;\r\n    --bmx-dark: #24231f;\r\n    --bmx-shadow: 0 18px 44px rgba(34, 31, 25, .08);\r\n    --bmx-shadow-soft: 0 8px 24px rgba(34, 31, 25, .06);\r\n    --bmx-radius: 8px;\r\n    --bmx-radius-sm: 6px;\r\n    background:\r\n      linear-gradient(180deg, #fff 0, var(--bmx-bg) 34%, #fff 100%);\r\n    padding: clamp(18px, 3vw, 34px) 0;\r\n  }\r\n\r\n  .bmx4__shell {\r\n    inline-size: min(1240px, calc(100% - 32px));\r\n  }\r\n\r\n  .bmx4__layout {\r\n    grid-template-columns: minmax(330px, 380px) minmax(0, 1fr);\r\n    gap: clamp(14px, 2vw, 24px);\r\n  }\r\n\r\n  .bmx4__side {\r\n    position: sticky;\r\n    inset-block-start: 18px;\r\n  }\r\n\r\n  .bmx4__card {\r\n    border-color: rgba(210, 204, 193, .9);\r\n    box-shadow: var(--bmx-shadow-soft);\r\n    padding: clamp(16px, 2vw, 22px);\r\n  }\r\n\r\n  .bmx4__main {\r\n    gap: clamp(14px, 2vw, 22px);\r\n  }\r\n\r\n  .bmx4__card-header {\r\n    align-items: flex-start;\r\n    margin-block-end: 18px;\r\n  }\r\n\r\n  .bmx4__kicker {\r\n    color: var(--bmx-red);\r\n    font-size: .72rem;\r\n    letter-spacing: .08em;\r\n  }\r\n\r\n  .bmx4__card-title,\r\n  .bmx4__title {\r\n    color: var(--bmx-text);\r\n    font-weight: 900;\r\n  }\r\n\r\n  .bmx4__text,\r\n  .bmx4__help {\r\n    max-inline-size: 62ch;\r\n  }\r\n\r\n  .bmx4__btn,\r\n  .bmx4__count-btn,\r\n  .bmx4__package-btn,\r\n  .bmx4__mini-btn,\r\n  .bmx4__product-item {\r\n    border-color: var(--bmx-line);\r\n    transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;\r\n  }\r\n\r\n  .bmx4__btn {\r\n    min-block-size: 44px;\r\n    border-radius: var(--bmx-radius-sm);\r\n    font-weight: 850;\r\n  }\r\n\r\n  .bmx4__btn:hover:not(:disabled),\r\n  .bmx4__product-item:hover:not(:disabled) {\r\n    box-shadow: 0 8px 22px rgba(34, 31, 25, .08);\r\n  }\r\n\r\n  .bmx4__btn--primary,\r\n  .bmx4__count-btn[aria-pressed=\"true\"],\r\n  .bmx4__package-btn[aria-pressed=\"true\"] {\r\n    box-shadow: 0 10px 22px rgba(179, 13, 27, .16);\r\n  }\r\n\r\n  .bmx4__btn--dark {\r\n    background: var(--bmx-dark);\r\n  }\r\n\r\n  .bmx4__count-grid {\r\n    grid-template-columns: repeat(4, minmax(56px, 1fr));\r\n    gap: 6px;\r\n    padding: 4px;\r\n    border: 1px solid var(--bmx-line);\r\n    border-radius: var(--bmx-radius);\r\n    background: var(--bmx-surface-soft);\r\n  }\r\n\r\n  .bmx4__count-btn {\r\n    min-block-size: 42px;\r\n    border-color: transparent;\r\n    background: transparent;\r\n  }\r\n\r\n  .bmx4__box,\r\n  .bmx4__selected-product {\r\n    padding: 12px;\r\n    border-color: rgba(210, 204, 193, .92);\r\n    box-shadow: none;\r\n  }\r\n\r\n  .bmx4__box:has(.bmx4__product-row),\r\n  .bmx4__selected-product {\r\n    background: linear-gradient(180deg, #fff, #fffaf8);\r\n  }\r\n\r\n  .bmx4__product-row {\r\n    grid-template-columns: 58px minmax(0, 1fr);\r\n    gap: 10px;\r\n  }\r\n\r\n  .bmx4__thumb {\r\n    inline-size: 58px;\r\n    block-size: 58px;\r\n    border-radius: 7px;\r\n  }\r\n\r\n  .bmx4__product-name {\r\n    line-height: 1.25;\r\n  }\r\n\r\n  .bmx4__mini-btn,\r\n  .bmx4__icon-btn {\r\n    inline-size: 40px;\r\n    block-size: 40px;\r\n    min-block-size: 40px;\r\n  }\r\n\r\n  .bmx4__mini-btn {\r\n    color: var(--bmx-muted);\r\n    font-size: .78rem;\r\n    font-weight: 850;\r\n    line-height: 1;\r\n  }\r\n\r\n  .bmx4__result-wrap {\r\n    min-block-size: clamp(420px, 50vw, 640px);\r\n    border-color: rgba(210, 204, 193, .95);\r\n    background:\r\n      radial-gradient(circle at 50% 18%, rgba(255, 255, 255, .88), rgba(255, 255, 255, .55) 48%, rgba(244, 241, 234, .88) 100%),\r\n      linear-gradient(135deg, rgba(32, 31, 27, .04) 25%, transparent 25% 50%, rgba(32, 31, 27, .04) 50% 75%, transparent 75%);\r\n    background-size: auto, 22px 22px;\r\n  }\r\n\r\n  .bmx4__result-image {\r\n    padding: clamp(8px, 1.2vw, 16px);\r\n  }\r\n\r\n  .bmx4__placeholder {\r\n    max-inline-size: 360px;\r\n    margin-inline: auto;\r\n  }\r\n\r\n  .bmx4__placeholder strong {\r\n    font-size: 1.05rem;\r\n  }\r\n\r\n  .bmx4__disclaimer,\r\n  .bmx4__note {\r\n    border-style: solid;\r\n    background: #fffbf5;\r\n  }\r\n\r\n  .bmx4__package-grid {\r\n    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));\r\n  }\r\n\r\n  .bmx4__package-btn {\r\n    min-block-size: 44px;\r\n    padding-inline: 8px;\r\n  }\r\n\r\n  .bmx4__qty-row {\r\n    justify-content: space-between;\r\n    border-color: var(--bmx-line);\r\n    background: #fff;\r\n  }\r\n\r\n  .bmx4__qty-value {\r\n    font-size: 1.05rem;\r\n  }\r\n\r\n  .bmx4__total-box {\r\n    text-align: start;\r\n    background: #fff;\r\n  }\r\n\r\n  .bmx4__total-value {\r\n    font-size: clamp(1.12rem, 2vw, 1.35rem);\r\n  }\r\n\r\n  .bmx4__modal {\r\n    background: rgba(24, 23, 21, .58);\r\n    -webkit-backdrop-filter: blur(8px);\r\n    backdrop-filter: blur(8px);\r\n  }\r\n\r\n  .bmx4__modal-panel {\r\n    border-radius: var(--bmx-radius);\r\n    box-shadow: 0 28px 80px rgba(18, 17, 16, .28);\r\n  }\r\n\r\n  .bmx4__search-input {\r\n    min-block-size: 50px;\r\n    background: var(--bmx-surface-soft);\r\n  }\r\n\r\n  .bmx4__product-list {\r\n    scrollbar-width: thin;\r\n    scrollbar-color: var(--bmx-line-strong) transparent;\r\n  }\r\n\r\n  .bmx4__product-item {\r\n    min-block-size: 78px;\r\n    padding: 10px;\r\n  }\r\n\r\n  @media (max-width: 900px) {\r\n    .bmx4__side {\r\n      position: static;\r\n    }\r\n\r\n    .bmx4__result-wrap {\r\n      min-block-size: clamp(360px, 62vw, 560px);\r\n    }\r\n  }\r\n\r\n  @media (max-width: 767px) {\r\n    .bmx4 {\r\n      padding-block: 8px 18px;\r\n      background: #fff;\r\n    }\r\n\r\n    .bmx4__shell {\r\n      inline-size: min(100% - 18px, 560px);\r\n    }\r\n\r\n    .bmx4__mobile-header {\r\n      inset-block-start: max(6px, env(safe-area-inset-top));\r\n      padding: 9px;\r\n      margin-block-end: 10px;\r\n      border-radius: var(--bmx-radius);\r\n      box-shadow: 0 8px 26px rgba(31, 29, 24, .1);\r\n    }\r\n\r\n    .bmx4__mobile-title-row {\r\n      display: grid;\r\n      grid-template-columns: minmax(0, 1fr) auto;\r\n      align-items: center;\r\n      gap: 8px;\r\n    }\r\n\r\n    .bmx4__mobile-header .bmx4__title {\r\n      font-size: 1rem;\r\n      line-height: 1.16;\r\n    }\r\n\r\n    .bmx4__mobile-header .bmx4__kicker {\r\n      font-size: .66rem;\r\n      margin-block-end: 1px;\r\n    }\r\n\r\n    .bmx4__mobile-header .bmx4__actions {\r\n      margin: 0;\r\n      flex-wrap: nowrap;\r\n      gap: 6px;\r\n    }\r\n\r\n    .bmx4__progress {\r\n      gap: 4px;\r\n      padding: 4px;\r\n      border-radius: var(--bmx-radius);\r\n      background: var(--bmx-surface-soft);\r\n    }\r\n\r\n    .bmx4__step-pill {\r\n      min-block-size: 30px;\r\n      border-color: transparent;\r\n      background: transparent;\r\n      font-size: .72rem;\r\n    }\r\n\r\n    .bmx4[data-step=\"1\"] .bmx4__step-pill[data-step=\"1\"],\r\n    .bmx4[data-step=\"2\"] .bmx4__step-pill[data-step=\"2\"],\r\n    .bmx4[data-step=\"3\"] .bmx4__step-pill[data-step=\"3\"] {\r\n      background: var(--bmx-dark);\r\n      border-color: var(--bmx-dark);\r\n      box-shadow: none;\r\n    }\r\n\r\n    .bmx4__card {\r\n      padding: 14px;\r\n      box-shadow: none;\r\n    }\r\n\r\n    .bmx4__card-header {\r\n      margin-block-end: 14px;\r\n    }\r\n\r\n    .bmx4__card-title {\r\n      font-size: 1.12rem;\r\n    }\r\n\r\n    .bmx4__text,\r\n    .bmx4__help {\r\n      font-size: .86rem;\r\n    }\r\n\r\n    .bmx4__actions,\r\n    .bmx4__toolbar {\r\n      gap: 6px;\r\n    }\r\n\r\n    .bmx4__toolbar {\r\n      display: grid;\r\n      grid-template-columns: repeat(4, 1fr);\r\n    }\r\n\r\n    .bmx4__toolbar .bmx4__icon-btn {\r\n      inline-size: 100%;\r\n    }\r\n\r\n    .bmx4__count-grid {\r\n      margin-block: 8px 12px;\r\n    }\r\n\r\n    .bmx4__boxes,\r\n    .bmx4__selected-list,\r\n    .bmx4__product-list {\r\n      gap: 8px;\r\n    }\r\n\r\n    .bmx4__box,\r\n    .bmx4__selected-product {\r\n      padding: 10px;\r\n    }\r\n\r\n    .bmx4__product-row {\r\n      grid-template-columns: 52px minmax(0, 1fr);\r\n      gap: 9px;\r\n    }\r\n\r\n    .bmx4__thumb,\r\n    .bmx4__product-item .bmx4__thumb {\r\n      inline-size: 52px;\r\n      block-size: 52px;\r\n    }\r\n\r\n    .bmx4__product-tools .bmx4__btn {\r\n      inline-size: 100%;\r\n    }\r\n\r\n    .bmx4__empty-box .bmx4__btn,\r\n    .bmx4__mobile-only.bmx4__btn,\r\n    .bmx4__nav .bmx4__btn,\r\n    .bmx4__cart-row > .bmx4__btn {\r\n      inline-size: 100%;\r\n    }\r\n\r\n    .bmx4__nav {\r\n      gap: 8px;\r\n    }\r\n\r\n    .bmx4__result-wrap {\r\n      min-block-size: min(62dvh, 430px);\r\n      max-block-size: 430px;\r\n    }\r\n\r\n    .bmx4__result-image {\r\n      padding: 6px;\r\n    }\r\n\r\n    .bmx4__disclaimer,\r\n    .bmx4__note {\r\n      font-size: .82rem;\r\n    }\r\n\r\n    .bmx4__package-grid {\r\n      grid-template-columns: repeat(3, minmax(0, 1fr));\r\n    }\r\n\r\n    .bmx4__package-btn {\r\n      font-size: .82rem;\r\n      min-block-size: 42px;\r\n    }\r\n\r\n    .bmx4__modal {\r\n      align-items: end;\r\n      padding: 0;\r\n    }\r\n\r\n    .bmx4__modal-panel {\r\n      inline-size: 100%;\r\n      max-block-size: min(88dvh, 720px);\r\n      border-end-start-radius: 0;\r\n      border-end-end-radius: 0;\r\n    }\r\n\r\n    .bmx4__modal-head {\r\n      padding: 12px 12px 10px;\r\n    }\r\n\r\n    .bmx4__modal-body {\r\n      padding: 0 12px 12px;\r\n      gap: 10px;\r\n    }\r\n\r\n    .bmx4__product-list {\r\n      max-block-size: calc(88dvh - 128px);\r\n      padding-block-end: max(8px, env(safe-area-inset-bottom));\r\n    }\r\n\r\n    .bmx4__product-item {\r\n      grid-template-columns: 52px minmax(0, 1fr) auto;\r\n      min-block-size: 72px;\r\n    }\r\n\r\n    .bmx4__badge {\r\n      grid-column: auto;\r\n      font-size: .72rem;\r\n    }\r\n  }\r\n\r\n  \/* Overflow guard for narrow Elementor\/mobile containers. *\/\r\n  .bmx4,\r\n  .bmx4__shell,\r\n  .bmx4__layout,\r\n  .bmx4__main,\r\n  .bmx4__side,\r\n  .bmx4__section,\r\n  .bmx4__card,\r\n  .bmx4__box,\r\n  .bmx4__selected-product,\r\n  .bmx4__modal-panel,\r\n  .bmx4__product-row,\r\n  .bmx4__product-item,\r\n  .bmx4__title-group,\r\n  .bmx4__product-tools,\r\n  .bmx4__selected-list,\r\n  .bmx4__boxes {\r\n    max-inline-size: 100%;\r\n    min-inline-size: 0;\r\n  }\r\n\r\n  .bmx4__product-name,\r\n  .bmx4__product-meta,\r\n  .bmx4__text,\r\n  .bmx4__help,\r\n  .bmx4__badge,\r\n  .bmx4__btn,\r\n  .bmx4__package-btn {\r\n    overflow-wrap: anywhere;\r\n  }\r\n\r\n  @media (max-width: 767px) {\r\n    .bmx4__shell {\r\n      inline-size: calc(100% - 16px);\r\n      max-inline-size: calc(100dvw - 16px);\r\n    }\r\n\r\n    .bmx4__mobile-title-row {\r\n      grid-template-columns: minmax(0, 1fr) minmax(86px, auto);\r\n    }\r\n\r\n    .bmx4__mobile-header .bmx4__actions {\r\n      inline-size: 86px;\r\n      justify-content: end;\r\n    }\r\n\r\n    .bmx4__mobile-header .bmx4__btn--small {\r\n      flex: 0 0 40px;\r\n      inline-size: 40px;\r\n      max-inline-size: 40px;\r\n    }\r\n\r\n    .bmx4__product-item {\r\n      grid-template-columns: 52px minmax(0, 1fr);\r\n      column-gap: 9px;\r\n      row-gap: 6px;\r\n    }\r\n\r\n    .bmx4__product-item .bmx4__badge {\r\n      grid-column: 2;\r\n      justify-self: start;\r\n      white-space: normal;\r\n      line-height: 1.15;\r\n    }\r\n\r\n    .bmx4__package-grid {\r\n      grid-template-columns: repeat(3, minmax(0, 1fr));\r\n    }\r\n\r\n    .bmx4__package-btn,\r\n    .bmx4__count-btn {\r\n      padding-inline: 4px;\r\n      min-inline-size: 0;\r\n    }\r\n\r\n    .bmx4__modal-panel {\r\n      inline-size: 100%;\r\n      max-inline-size: 100dvw;\r\n    }\r\n  }\r\n\r\n  \/* Mobile redesign: compact wizard, full-screen picker, bottom actions. *\/\r\n  @media (max-width: 767px) {\r\n    .bmx4 {\r\n      --bmx-bg: #ffffff;\r\n      --bmx-surface-soft: #f7f5f0;\r\n      --bmx-line: #e7e1d7;\r\n      background: #fff;\r\n      padding: 0 0 calc(88px + env(safe-area-inset-bottom));\r\n      overflow-x: clip;\r\n    }\r\n\r\n    .bmx4__anchor {\r\n      scroll-margin-top: 0;\r\n    }\r\n\r\n    .bmx4__shell {\r\n      inline-size: 100%;\r\n      max-inline-size: 100%;\r\n      padding-inline: 10px;\r\n    }\r\n\r\n    .bmx4__mobile-header {\r\n      inset-block-start: 0;\r\n      margin: 0 -10px 10px;\r\n      padding: max(8px, env(safe-area-inset-top)) 10px 9px;\r\n      border-width: 0 0 1px;\r\n      border-radius: 0;\r\n      box-shadow: 0 8px 18px rgba(32, 31, 27, .08);\r\n    }\r\n\r\n    .bmx4__mobile-title-row {\r\n      grid-template-columns: minmax(0, 1fr) auto;\r\n      gap: 8px;\r\n    }\r\n\r\n    .bmx4__mobile-header .bmx4__title {\r\n      font-size: .98rem;\r\n      line-height: 1.12;\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n    }\r\n\r\n    .bmx4__mobile-header .bmx4__actions {\r\n      inline-size: auto;\r\n      max-inline-size: 164px;\r\n      gap: 5px;\r\n    }\r\n\r\n    .bmx4__mobile-header .bmx4__btn--small {\r\n      max-inline-size: none;\r\n      inline-size: auto;\r\n      block-size: 38px;\r\n      min-block-size: 38px;\r\n      flex-basis: auto;\r\n      gap: 4px;\r\n      padding-inline: 10px;\r\n      border-radius: 999px;\r\n      box-shadow: none;\r\n      font-size: .76rem;\r\n    }\r\n\r\n    .bmx4__mobile-header .bmx4__btn span {\r\n      display: inline !important;\r\n    }\r\n\r\n    .bmx4__mobile-header .bmx4__btn span[aria-hidden=\"true\"] {\r\n      font-size: .86rem;\r\n      line-height: 1;\r\n    }\r\n\r\n    .bmx4__progress {\r\n      grid-template-columns: repeat(3, minmax(0, 1fr));\r\n      gap: 5px;\r\n      margin-block-start: 8px;\r\n      padding: 3px;\r\n      border: 1px solid var(--bmx-line);\r\n      border-radius: 999px;\r\n      background: var(--bmx-surface-soft);\r\n    }\r\n\r\n    .bmx4__step-pill {\r\n      min-block-size: 30px;\r\n      border: 0;\r\n      border-radius: 999px;\r\n      background: transparent;\r\n      color: var(--bmx-muted);\r\n      font-size: .72rem;\r\n      font-weight: 900;\r\n    }\r\n\r\n    .bmx4[data-step=\"1\"] .bmx4__step-pill[data-step=\"1\"],\r\n    .bmx4[data-step=\"2\"] .bmx4__step-pill[data-step=\"2\"],\r\n    .bmx4[data-step=\"3\"] .bmx4__step-pill[data-step=\"3\"] {\r\n      background: var(--bmx-red);\r\n      border: 0;\r\n      color: #fff;\r\n    }\r\n\r\n    .bmx4__notices {\r\n      margin-block: 8px;\r\n    }\r\n\r\n    .bmx4__notice {\r\n      border-radius: 8px;\r\n      font-size: .86rem;\r\n    }\r\n\r\n    .bmx4__layout,\r\n    .bmx4__main {\r\n      display: block;\r\n    }\r\n\r\n    .bmx4__card {\r\n      padding: 14px 0 0;\r\n      border: 0;\r\n      border-radius: 0;\r\n      box-shadow: none;\r\n      background: transparent;\r\n    }\r\n\r\n    .bmx4__card-header {\r\n      display: block;\r\n      margin-block-end: 12px;\r\n    }\r\n\r\n    .bmx4__kicker {\r\n      font-size: .66rem;\r\n    }\r\n\r\n    .bmx4__card-title {\r\n      font-size: 1.18rem;\r\n      line-height: 1.12;\r\n    }\r\n\r\n    .bmx4__text,\r\n    .bmx4__help {\r\n      font-size: .84rem;\r\n      line-height: 1.42;\r\n    }\r\n\r\n    .bmx4__label {\r\n      font-size: .9rem;\r\n    }\r\n\r\n    .bmx4__count-grid {\r\n      gap: 4px;\r\n      margin-block: 8px 12px;\r\n      padding: 4px;\r\n      border-radius: 999px;\r\n    }\r\n\r\n    .bmx4__count-btn {\r\n      min-block-size: 40px;\r\n      border-radius: 999px;\r\n      font-size: .95rem;\r\n    }\r\n\r\n    .bmx4__boxes,\r\n    .bmx4__selected-list {\r\n      gap: 8px;\r\n    }\r\n\r\n    .bmx4__box,\r\n    .bmx4__selected-product {\r\n      padding: 11px;\r\n      border: 1px solid var(--bmx-line);\r\n      border-radius: 8px;\r\n      background: #fff;\r\n    }\r\n\r\n    .bmx4__box-head,\r\n    .bmx4__selected-head {\r\n      margin-block-end: 8px;\r\n    }\r\n\r\n    .bmx4__box-title {\r\n      font-size: .86rem;\r\n    }\r\n\r\n    .bmx4__mini-actions {\r\n      gap: 5px;\r\n    }\r\n\r\n    .bmx4__mini-btn {\r\n      inline-size: 36px;\r\n      block-size: 36px;\r\n      min-block-size: 36px;\r\n      border-radius: 999px;\r\n      font-size: .74rem;\r\n    }\r\n\r\n    .bmx4__product-row {\r\n      grid-template-columns: 54px minmax(0, 1fr);\r\n      gap: 10px;\r\n    }\r\n\r\n    .bmx4__thumb {\r\n      inline-size: 54px;\r\n      block-size: 54px;\r\n      border-radius: 8px;\r\n    }\r\n\r\n    .bmx4__product-name {\r\n      font-size: .92rem;\r\n      line-height: 1.2;\r\n    }\r\n\r\n    .bmx4__product-meta {\r\n      font-size: .8rem;\r\n    }\r\n\r\n    .bmx4__product-tools {\r\n      margin-block-start: 7px;\r\n    }\r\n\r\n    .bmx4__product-tools .bmx4__btn,\r\n    .bmx4__empty-box .bmx4__btn {\r\n      min-block-size: 40px;\r\n      inline-size: 100%;\r\n      border-radius: 999px;\r\n    }\r\n\r\n    .bmx4__mineral {\r\n      margin-block-start: 12px;\r\n      padding-block-start: 12px;\r\n    }\r\n\r\n    .bmx4__check {\r\n      align-items: center;\r\n      padding: 10px;\r\n      border: 1px solid var(--bmx-line);\r\n      border-radius: 8px;\r\n      background: var(--bmx-surface-soft);\r\n      font-size: .9rem;\r\n    }\r\n\r\n    .bmx4__result-wrap {\r\n      min-block-size: 0;\r\n      block-size: min(64dvh, 430px);\r\n      border-radius: 8px;\r\n    }\r\n\r\n    .bmx4__placeholder {\r\n      padding: 18px;\r\n    }\r\n\r\n    .bmx4__placeholder strong {\r\n      font-size: .98rem;\r\n    }\r\n\r\n    .bmx4__placeholder span {\r\n      font-size: .84rem;\r\n    }\r\n\r\n    .bmx4__toolbar {\r\n      display: grid;\r\n      grid-template-columns: 1fr;\r\n      gap: 6px;\r\n      margin-block-start: 10px;\r\n    }\r\n\r\n    .bmx4__toolbar .bmx4__zoom-btn {\r\n      display: none !important;\r\n    }\r\n\r\n    .bmx4__toolbar .bmx4__preview-fullscreen {\r\n      inline-size: 100%;\r\n      block-size: 40px;\r\n      min-block-size: 40px;\r\n      border-radius: 999px;\r\n    }\r\n\r\n    .bmx4__mix-chips.bmx4__mobile-only {\r\n      display: grid !important;\r\n      gap: 8px;\r\n      margin-block-start: 10px;\r\n    }\r\n\r\n    .bmx4__mix-chip {\r\n      width: 100%;\r\n      min-width: 0;\r\n      min-block-size: 58px;\r\n      display: grid;\r\n      grid-template-columns: 42px minmax(0, 1fr) auto;\r\n      align-items: center;\r\n      gap: 9px;\r\n      padding: 8px;\r\n      border: 1px solid var(--bmx-line);\r\n      border-radius: 8px;\r\n      background: #fff;\r\n      color: var(--bmx-text);\r\n      text-align: start;\r\n    }\r\n\r\n    .bmx4__mix-chip-img {\r\n      inline-size: 42px;\r\n      block-size: 42px;\r\n      object-fit: cover;\r\n      border: 1px solid var(--bmx-line);\r\n      border-radius: 7px;\r\n      background: var(--bmx-surface-soft);\r\n    }\r\n\r\n    .bmx4__mix-chip-title {\r\n      display: block;\r\n      overflow: hidden;\r\n      color: var(--bmx-text);\r\n      font-size: .86rem;\r\n      font-weight: 850;\r\n      line-height: 1.18;\r\n      text-overflow: ellipsis;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .bmx4__mix-chip-meta {\r\n      display: block;\r\n      margin-block-start: 2px;\r\n      color: var(--bmx-muted);\r\n      font-size: .72rem;\r\n      line-height: 1.2;\r\n    }\r\n\r\n    .bmx4__mix-chip-action {\r\n      padding: 5px 8px;\r\n      border-radius: 999px;\r\n      background: var(--bmx-surface-soft);\r\n      color: var(--bmx-text);\r\n      font-size: .7rem;\r\n      font-weight: 900;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .bmx4__disclaimer,\r\n    .bmx4__note {\r\n      margin-block-start: 10px;\r\n      border-radius: 8px;\r\n      font-size: .8rem;\r\n      line-height: 1.38;\r\n    }\r\n\r\n    .bmx4__package-grid {\r\n      grid-template-columns: repeat(3, minmax(0, 1fr));\r\n      gap: 6px;\r\n    }\r\n\r\n    .bmx4__package-btn {\r\n      min-block-size: 40px;\r\n      border-radius: 999px;\r\n      font-size: .78rem;\r\n    }\r\n\r\n    .bmx4__qty-row {\r\n      min-block-size: 44px;\r\n      margin-block-start: 8px;\r\n      border-radius: 999px;\r\n      background: var(--bmx-surface-soft);\r\n    }\r\n\r\n    .bmx4__totals {\r\n      grid-template-columns: 1fr 1fr;\r\n      gap: 8px;\r\n    }\r\n\r\n    .bmx4__total-box {\r\n      padding: 11px;\r\n      border-radius: 8px;\r\n    }\r\n\r\n    .bmx4__total-label {\r\n      font-size: .74rem;\r\n    }\r\n\r\n    .bmx4__total-value {\r\n      font-size: 1rem;\r\n    }\r\n\r\n    .bmx4__nav.bmx4__mobile-only,\r\n    .bmx4__cart-row {\r\n      position: sticky;\r\n      inset-block-end: 0;\r\n      z-index: 25;\r\n      margin-inline: -10px;\r\n      margin-block-start: 14px;\r\n      padding: 10px 10px max(10px, env(safe-area-inset-bottom));\r\n      border-block-start: 1px solid var(--bmx-line);\r\n      background: rgba(255, 255, 255, .96);\r\n      -webkit-backdrop-filter: blur(10px);\r\n      backdrop-filter: blur(10px);\r\n    }\r\n\r\n    .bmx4__btn.bmx4__mobile-only {\r\n      display: flex !important;\r\n      position: sticky;\r\n      inset-block-end: max(10px, env(safe-area-inset-bottom));\r\n      z-index: 25;\r\n      inline-size: 100%;\r\n      min-block-size: 50px;\r\n      margin-block-start: 14px;\r\n      border-radius: 999px;\r\n    }\r\n\r\n    .bmx4__nav.bmx4__mobile-only {\r\n      display: grid !important;\r\n      grid-template-columns: 1fr 1.4fr;\r\n      gap: 8px;\r\n    }\r\n\r\n    .bmx4__nav.bmx4__mobile-only .bmx4__btn,\r\n    .bmx4__cart-row > .bmx4__btn {\r\n      inline-size: 100%;\r\n      min-block-size: 48px;\r\n      border-radius: 999px;\r\n    }\r\n\r\n    .bmx4__cart-row {\r\n      gap: 8px;\r\n    }\r\n\r\n    .bmx4__cart-row .bmx4__nav.bmx4__mobile-only {\r\n      position: static;\r\n      margin: 0;\r\n      padding: 0;\r\n      border: 0;\r\n      background: transparent;\r\n      display: block !important;\r\n    }\r\n\r\n    .bmx4__cart-row .bmx4__nav.bmx4__mobile-only .bmx4__btn {\r\n      min-block-size: 44px;\r\n    }\r\n\r\n    .bmx4__modal {\r\n      display: block;\r\n      padding: 0;\r\n      background: #fff;\r\n    }\r\n\r\n    .bmx4__modal-panel {\r\n      inline-size: 100%;\r\n      max-inline-size: 100%;\r\n      block-size: 100dvh;\r\n      max-block-size: 100dvh;\r\n      border-radius: 0;\r\n      box-shadow: none;\r\n    }\r\n\r\n    .bmx4__modal-head {\r\n      padding: max(10px, env(safe-area-inset-top)) 10px 10px;\r\n      border-block-end: 1px solid var(--bmx-line);\r\n    }\r\n\r\n    .bmx4__modal-title {\r\n      font-size: 1rem;\r\n    }\r\n\r\n    .bmx4__modal-body {\r\n      grid-template-rows: auto 1fr;\r\n      gap: 8px;\r\n      padding: 10px 10px max(10px, env(safe-area-inset-bottom));\r\n    }\r\n\r\n    .bmx4__search-input {\r\n      min-block-size: 46px;\r\n      border-radius: 999px;\r\n      background: var(--bmx-surface-soft);\r\n    }\r\n\r\n    .bmx4__product-list {\r\n      max-block-size: none;\r\n      overflow: auto;\r\n      padding: 0;\r\n    }\r\n\r\n    .bmx4__product-item {\r\n      grid-template-columns: 54px minmax(0, 1fr) auto;\r\n      min-block-size: 74px;\r\n      gap: 10px;\r\n      padding: 10px;\r\n      border-radius: 8px;\r\n    }\r\n\r\n    .bmx4__product-item .bmx4__thumb {\r\n      inline-size: 54px;\r\n      block-size: 54px;\r\n    }\r\n\r\n    .bmx4__product-item .bmx4__badge {\r\n      grid-column: auto;\r\n      justify-self: end;\r\n      padding: 5px 7px;\r\n      border-radius: 999px;\r\n      background: var(--bmx-surface-soft);\r\n      white-space: nowrap;\r\n      font-size: .68rem;\r\n    }\r\n\r\n    .bmx4__fullscreen {\r\n      padding: max(58px, env(safe-area-inset-top) + 48px) 10px max(10px, env(safe-area-inset-bottom));\r\n    }\r\n  }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .bmx4 *,\r\n    .bmx4 *::before,\r\n    .bmx4 *::after {\r\n      animation-duration: .001ms !important;\r\n      scroll-behavior: auto !important;\r\n      transition-duration: .001ms !important;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<section\r\n  class=\"bmx4\"\r\n  data-belka-mix-root\r\n  data-ajax-url=\"\/de\/wp-admin\/admin-ajax.php\"\r\n  data-products-action=\"get_custom_woocommerce_products\"\r\n  data-cart-action=\"woodmart_ajax_add_to_cart\"\r\n  data-cart-url=\"\/warenkorb\/\"\r\n  data-store-api-base=\"\/de\/wp-json\/wc\/store\/v1\/products\"\r\n  data-step=\"1\"\r\n>\r\n  <span id=\"belka-mix-module-anchor\" class=\"bmx4__anchor\" data-role=\"anchor\" aria-hidden=\"true\"><\/span>\r\n\r\n  <div class=\"bmx4__shell\">\r\n    <header class=\"bmx4__mobile-header\" aria-label=\"BELKA Mix Schritte\">\r\n      <div class=\"bmx4__mobile-title-row\">\r\n        <div class=\"bmx4__title-group\">\r\n          <span class=\"bmx4__kicker\">BELKA Mix<\/span>\r\n          <h2 class=\"bmx4__title\">Mix erstellen<\/h2>\r\n        <\/div>\r\n        <div class=\"bmx4__actions\">\r\n          <button type=\"button\" class=\"bmx4__btn bmx4__btn--small\" data-action=\"reset\" aria-label=\"Auswahl zur\u00fccksetzen\">\r\n            <span aria-hidden=\"true\">\u00d7<\/span><span>Leeren<\/span>\r\n          <\/button>\r\n          <button type=\"button\" class=\"bmx4__btn bmx4__btn--small bmx4__btn--primary\" data-action=\"random\" aria-label=\"Zuf\u00e4llige Auswahl erstellen\">\r\n            <span aria-hidden=\"true\">\u21c4<\/span><span>Mix<\/span>\r\n          <\/button>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"bmx4__progress\" aria-hidden=\"true\">\r\n        <div class=\"bmx4__step-pill\" data-step=\"1\">1 Farben<\/div>\r\n        <div class=\"bmx4__step-pill\" data-step=\"2\">2 Vorschau<\/div>\r\n        <div class=\"bmx4__step-pill\" data-step=\"3\">3 Warenkorb<\/div>\r\n      <\/div>\r\n    <\/header>\r\n\r\n    <div class=\"bmx4__notices\" data-role=\"notices\" aria-live=\"polite\"><\/div>\r\n\r\n    <div class=\"bmx4__layout\">\r\n      <aside class=\"bmx4__side bmx4__section\" data-section=\"1\">\r\n        <div class=\"bmx4__card\">\r\n          <div class=\"bmx4__card-header\">\r\n            <div>\r\n              <span class=\"bmx4__kicker\">Schritt 1<\/span>\r\n              <h2 class=\"bmx4__card-title\">Farben ausw\u00e4hlen<\/h2>\r\n              <p class=\"bmx4__text\">W\u00e4hlen Sie 2 bis 5 BELKA Farben. Unsichtbare Farben werden aus Vorschau und Warenkorb herausgenommen.<\/p>\r\n            <\/div>\r\n            <div class=\"bmx4__actions bmx4__desktop-only\">\r\n              <button type=\"button\" class=\"bmx4__btn bmx4__btn--small\" data-action=\"reset\">\u21ba Zur\u00fccksetzen<\/button>\r\n              <button type=\"button\" class=\"bmx4__btn bmx4__btn--small bmx4__btn--primary\" data-action=\"random\">\u21c4 Zuf\u00e4llige Auswahl<\/button>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <label class=\"bmx4__label\">Wie viele Farben m\u00f6chten Sie kombinieren?<\/label>\r\n          <p class=\"bmx4__help\">Mindestens zwei sichtbare BELKA Farben sind f\u00fcr Mix-Vorschau und Warenkorb erforderlich.<\/p>\r\n          <div class=\"bmx4__count-grid\" role=\"group\" aria-label=\"Anzahl der Farben w\u00e4hlen\">\r\n            <button type=\"button\" class=\"bmx4__count-btn\" data-action=\"set-count\" data-count=\"2\" aria-pressed=\"true\">2<\/button>\r\n            <button type=\"button\" class=\"bmx4__count-btn\" data-action=\"set-count\" data-count=\"3\" aria-pressed=\"false\">3<\/button>\r\n            <button type=\"button\" class=\"bmx4__count-btn\" data-action=\"set-count\" data-count=\"4\" aria-pressed=\"false\">4<\/button>\r\n            <button type=\"button\" class=\"bmx4__count-btn\" data-action=\"set-count\" data-count=\"5\" aria-pressed=\"false\">5<\/button>\r\n          <\/div>\r\n\r\n          <div class=\"bmx4__boxes\" data-role=\"product-boxes\" aria-live=\"polite\"><\/div>\r\n\r\n          <div class=\"bmx4__mineral\">\r\n            <label class=\"bmx4__check\">\r\n              <input type=\"checkbox\" data-role=\"include-mineral\">\r\n              <span>Optional Lumika Mineralstein hinzuf\u00fcgen<\/span>\r\n            <\/label>\r\n            <p class=\"bmx4__help\">Lumika ist ein Effekt-Zusatz. F\u00fcr den Mix-Warenkorb bleiben mindestens zwei sichtbare BELKA Farben erforderlich.<\/p>\r\n            <div class=\"bmx4__mineral-box\" data-role=\"mineral-box\" hidden><\/div>\r\n          <\/div>\r\n\r\n          <button type=\"button\" class=\"bmx4__btn bmx4__btn--primary bmx4__mobile-only\" data-action=\"next\" data-role=\"mobile-next-selection\">\r\n            Vorschau ansehen\r\n          <\/button>\r\n        <\/div>\r\n      <\/aside>\r\n\r\n      <main class=\"bmx4__main\">\r\n        <section class=\"bmx4__section\" data-section=\"2\" aria-labelledby=\"bmx4-result-title\">\r\n          <div class=\"bmx4__card\">\r\n            <div class=\"bmx4__card-header\">\r\n              <div>\r\n                <span class=\"bmx4__kicker\">Schritt 2<\/span>\r\n                <h2 class=\"bmx4__card-title\" id=\"bmx4-result-title\">Vorschau pr\u00fcfen<\/h2>\r\n                <p class=\"bmx4__text\" data-role=\"status\">W\u00e4hlen Sie mindestens zwei sichtbare Farben, um den Mix zu sehen.<\/p>\r\n              <\/div>\r\n              <div class=\"bmx4__toolbar\" aria-label=\"Vorschau steuern\">\r\n                <button type=\"button\" class=\"bmx4__btn bmx4__icon-btn bmx4__zoom-btn\" data-action=\"zoom-in\" aria-label=\"Vorschau vergr\u00f6\u00dfern\">+<\/button>\r\n                <button type=\"button\" class=\"bmx4__btn bmx4__icon-btn bmx4__zoom-btn\" data-action=\"zoom-out\" aria-label=\"Vorschau verkleinern\">\u2212<\/button>\r\n                <button type=\"button\" class=\"bmx4__btn bmx4__icon-btn bmx4__zoom-btn\" data-action=\"zoom-reset\" aria-label=\"Zoom zur\u00fccksetzen\">1\u00d7<\/button>\r\n                <button type=\"button\" class=\"bmx4__btn bmx4__preview-fullscreen\" data-action=\"fullscreen\" aria-label=\"Vorschau im Vollbild \u00f6ffnen\">Vollbild<\/button>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"bmx4__result-wrap\">\r\n              <div class=\"bmx4__placeholder\" data-role=\"result-placeholder\">\r\n                <strong>Ihre Mix-Vorschau erscheint hier<\/strong>\r\n                <span>W\u00e4hlen Sie mindestens zwei sichtbare Farben. Die Vorschau dient als Orientierung.<\/span>\r\n              <\/div>\r\n              <img class=\"bmx4__result-image\" data-role=\"result-image\" alt=\"BELKA Mix Vorschau\" hidden>\r\n              <div class=\"bmx4__processing\" data-role=\"processing\" hidden>\r\n                <div>\r\n                  <div class=\"bmx4__spinner\" aria-hidden=\"true\"><\/div>\r\n                  <p>Vorschau wird erstellt\u2026<\/p>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"bmx4__mix-chips bmx4__mobile-only\" data-role=\"mix-chips\" aria-live=\"polite\"><\/div>\r\n\r\n            <div class=\"bmx4__disclaimer\">\r\n              <strong>Hinweis:<\/strong> Die digitale Vorschau dient zur Orientierung. Die tats\u00e4chliche Wirkung h\u00e4ngt von Licht, Bildschirm, Untergrund, Mischverh\u00e4ltnis und Auftragstechnik ab.\r\n            <\/div>\r\n\r\n            <div class=\"bmx4__nav bmx4__mobile-only\">\r\n              <button type=\"button\" class=\"bmx4__btn\" data-action=\"prev\">Zur\u00fcck<\/button>\r\n              <button type=\"button\" class=\"bmx4__btn bmx4__btn--primary\" data-action=\"next\">Warenkorb vorbereiten<\/button>\r\n            <\/div>\r\n          <\/div>\r\n        <\/section>\r\n\r\n        <section class=\"bmx4__section\" data-section=\"3\" aria-labelledby=\"bmx4-summary-title\">\r\n          <div class=\"bmx4__card\">\r\n            <div class=\"bmx4__card-header\">\r\n              <div>\r\n                <span class=\"bmx4__kicker\">Schritt 3<\/span>\r\n                <h2 class=\"bmx4__card-title\" id=\"bmx4-summary-title\">Warenkorb vorbereiten<\/h2>\r\n                <p class=\"bmx4__text\">Pr\u00fcfen Sie Paketgr\u00f6\u00dfen, Mengen, Fl\u00e4che und Gesamtbetrag vor dem Warenkorb.<\/p>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"bmx4__selected-list\" data-role=\"selected-products\" aria-live=\"polite\"><\/div>\r\n\r\n            <div class=\"bmx4__totals\" aria-live=\"polite\">\r\n              <div class=\"bmx4__total-box\">\r\n                <p class=\"bmx4__total-label\">Gesamtbetrag<\/p>\r\n                <p class=\"bmx4__total-value\" data-role=\"total-price\">\u2014<\/p>\r\n              <\/div>\r\n              <div class=\"bmx4__total-box\">\r\n                <p class=\"bmx4__total-label\">Gesamtfl\u00e4che<\/p>\r\n                <p class=\"bmx4__total-value\" data-role=\"total-area\">\u2014<\/p>\r\n              <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"bmx4__note\">\r\n              Verbrauchswerte sind Planungswerte. Untergrund, Schichtst\u00e4rke und Technik k\u00f6nnen den tats\u00e4chlichen Bedarf ver\u00e4ndern.\r\n            <\/div>\r\n\r\n            <div class=\"bmx4__cart-row\">\r\n              <button type=\"button\" class=\"bmx4__btn bmx4__btn--primary\" data-action=\"add-cart\" data-role=\"cart-button\" disabled>In den Warenkorb<\/button>\r\n              <div class=\"bmx4__nav bmx4__mobile-only\">\r\n                <button type=\"button\" class=\"bmx4__btn\" data-action=\"prev\">Zur\u00fcck<\/button>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/section>\r\n      <\/main>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"bmx4__modal\" data-role=\"search-modal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"bmx4-modal-title\" hidden>\r\n    <div class=\"bmx4__modal-panel\">\r\n      <div class=\"bmx4__modal-head\">\r\n        <h3 class=\"bmx4__modal-title\" id=\"bmx4-modal-title\" data-role=\"modal-title\">Farbe w\u00e4hlen<\/h3>\r\n        <button type=\"button\" class=\"bmx4__btn bmx4__icon-btn\" data-action=\"close-search\" aria-label=\"Auswahl schlie\u00dfen\">\u00d7<\/button>\r\n      <\/div>\r\n      <div class=\"bmx4__modal-body\">\r\n        <input class=\"bmx4__search-input\" type=\"search\" data-role=\"search-input\" placeholder=\"Produktname eingeben\u2026\" autocomplete=\"off\">\r\n        <div class=\"bmx4__product-list\" data-role=\"product-list\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"bmx4__fullscreen\" data-role=\"fullscreen\" hidden>\r\n    <button type=\"button\" class=\"bmx4__btn bmx4__icon-btn bmx4__fullscreen-close\" data-action=\"close-fullscreen\" aria-label=\"Vollbild schlie\u00dfen\">\u00d7<\/button>\r\n    <img class=\"bmx4__fullscreen-img\" data-role=\"fullscreen-image\" alt=\"BELKA Mix Vorschau im Vollbild\">\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function () {\r\n  'use strict';\r\n\r\n  document.querySelectorAll('[data-belka-mix-root]').forEach(initBelkaMix);\r\n\r\n  function initBelkaMix(root) {\r\n    if (!root || root.dataset.belkaMixInitialized === 'true') return;\r\n    root.dataset.belkaMixInitialized = 'true';\r\n    const instanceId = 'bmx4-' + Math.random().toString(36).slice(2, 9);\r\n    scopeLabel('bmx4-result-title', '[data-section=\"2\"]');\r\n    scopeLabel('bmx4-summary-title', '[data-section=\"3\"]');\r\n    scopeLabel('bmx4-modal-title', '[data-role=\"search-modal\"]');\r\n\r\n    const COVERAGE_M2 = Object.freeze({ '1kg': 3, '3kg': 9, '5kg': 15 });\r\n    const PACKAGE_ORDER = Object.freeze({ '1kg': 1, '3kg': 2, '5kg': 3 });\r\n    const PREVIEW_SIZE = Object.freeze({ width: 1000, height: 1334 });\r\n    const IMAGE_TIMEOUT_MS = 8000;\r\n    const MAX_QTY_FALLBACK = 9999;\r\n\r\n    const CONFIG = Object.freeze({\r\n      ajaxUrl: root.dataset.ajaxUrl || window.ajaxurl || '\/de\/wp-admin\/admin-ajax.php',\r\n      productsAction: root.dataset.productsAction || 'get_custom_woocommerce_products',\r\n      cartAction: root.dataset.cartAction || 'woodmart_ajax_add_to_cart',\r\n      cartUrl: root.dataset.cartUrl || '\/warenkorb\/',\r\n      storeApiBase: root.dataset.storeApiBase || '\/de\/wp-json\/wc\/store\/v1\/products'\r\n    });\r\n\r\n    const MINERAL_PRODUCTS = [\r\n      {\r\n        id: 15014,\r\n        variationId: 15016,\r\n        name: 'Belka Lumika Wei\u00df',\r\n        image: 'https:\/\/gobelka.com\/de\/wp-content\/uploads\/2025\/05\/beyaz.jpeg',\r\n        price: 32,\r\n        m2: 0,\r\n        isInStock: true,\r\n        availabilityKnown: false,\r\n        cartAttribute: 'attribute_groesse-waehlen',\r\n        cartAttributeValue: '600g'\r\n      },\r\n      {\r\n        id: 14998,\r\n        variationId: 15001,\r\n        name: 'Belka Lumika Gold',\r\n        image: 'https:\/\/gobelka.com\/de\/wp-content\/uploads\/2025\/05\/mineral.jpeg',\r\n        price: 32,\r\n        m2: 0,\r\n        isInStock: true,\r\n        availabilityKnown: false,\r\n        cartAttribute: 'attribute_groesse-waehlen',\r\n        cartAttributeValue: '600g'\r\n      }\r\n    ];\r\n\r\n    const MASKS = Object.freeze({\r\n      '2_low': ['https:\/\/gobelka.com\/de\/wp-content\/uploads\/2025\/05\/2.jpg'],\r\n      '3_low': ['https:\/\/gobelka.com\/de\/wp-content\/uploads\/2025\/05\/2-1.jpg', 'https:\/\/gobelka.com\/de\/wp-content\/uploads\/2025\/05\/3.jpg'],\r\n      '4_low': ['https:\/\/gobelka.com\/de\/wp-content\/uploads\/2025\/05\/2-2.jpg', 'https:\/\/gobelka.com\/de\/wp-content\/uploads\/2025\/05\/3-1.jpg', 'https:\/\/gobelka.com\/de\/wp-content\/uploads\/2025\/05\/4.jpg'],\r\n      '5_low': ['https:\/\/gobelka.com\/de\/wp-content\/uploads\/2025\/05\/1.jpg', 'https:\/\/gobelka.com\/de\/wp-content\/uploads\/2025\/05\/2-3.jpg', 'https:\/\/gobelka.com\/de\/wp-content\/uploads\/2025\/05\/3-2.jpg', 'https:\/\/gobelka.com\/de\/wp-content\/uploads\/2025\/05\/5.jpg'],\r\n      mineral: {\r\n        gold: 'https:\/\/gobelka.com\/de\/wp-content\/uploads\/2025\/10\/lumika-mineralsteine-mask.jpg',\r\n        weiss: 'https:\/\/gobelka.com\/de\/wp-content\/uploads\/2025\/10\/lumika-mineralsteine-mask.jpg'\r\n      }\r\n    });\r\n\r\n    const state = {\r\n      step: 1,\r\n      colorCount: 2,\r\n      selected: [null, null],\r\n      hidden: new Set(),\r\n      includeMineral: false,\r\n      selectedMineral: null,\r\n      mineralHidden: false,\r\n      products: [],\r\n      productsStatus: 'idle',\r\n      productsError: '',\r\n      mineralsHydrated: false,\r\n      mineralsHydrating: false,\r\n      activeSlot: null,\r\n      query: '',\r\n      zoom: 1,\r\n      resultImage: '',\r\n      resultObjectUrl: '',\r\n      isAddingToCart: false,\r\n      noticeTimer: 0,\r\n      lastFocus: null\r\n    };\r\n\r\n    const imageCache = new Map();\r\n    let previewTimer = 0;\r\n    let previewRunId = 0;\r\n\r\n    const qs = (selector, context = root) => context.querySelector(selector);\r\n    const qsa = (selector, context = root) => Array.from(context.querySelectorAll(selector));\r\n\r\n    function scopeLabel(id, ownerSelector) {\r\n      const el = root.querySelector('#' + id);\r\n      const owner = root.querySelector(ownerSelector);\r\n      if (!el || !owner) return;\r\n      const scopedId = id + '-' + instanceId;\r\n      el.id = scopedId;\r\n      if (owner.getAttribute('aria-labelledby') === id) owner.setAttribute('aria-labelledby', scopedId);\r\n    }\r\n\r\n    function formatMoney(value) {\r\n      const number = Number.isFinite(Number(value)) ? Number(value) : 0;\r\n      return new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number);\r\n    }\r\n\r\n    function formatArea(value) {\r\n      const number = Number.isFinite(Number(value)) ? Number(value) : 0;\r\n      return new Intl.NumberFormat('de-DE', { maximumFractionDigits: 2 }).format(number) + ' m\u00b2';\r\n    }\r\n\r\n    function parsePrice(value) {\r\n      if (typeof value === 'number') return value;\r\n      const normalized = String(value || '0').replace(',', '.').replace(\/[^\\d.-]\/g, '');\r\n      const number = Number.parseFloat(normalized);\r\n      return Number.isFinite(number) ? number : 0;\r\n    }\r\n\r\n    function cleanName(value) {\r\n      return String(value || '')\r\n        .replace(\/,\\s*Moderne Wandgestaltung\/gi, '')\r\n        .replace(\/\\s+\/g, ' ')\r\n        .trim();\r\n    }\r\n\r\n    function resolveUrl(value) {\r\n      const url = String(value || '').trim();\r\n      if (!url) return '';\r\n      if (\/^(data:image\\\/|blob:)\/i.test(url)) return url;\r\n      try {\r\n        return new URL(url, window.location.origin).toString();\r\n      } catch (error) {\r\n        return '';\r\n      }\r\n    }\r\n\r\n    function parseJsonText(text) {\r\n      return JSON.parse(String(text || '').replace(\/^\\uFEFF\/, ''));\r\n    }\r\n\r\n    function normalizePackageSize(value) {\r\n      return String(value || '').replace(\/\\s+\/g, '').toLowerCase();\r\n    }\r\n\r\n    function getAttributeEntries(variation) {\r\n      const attrs = variation && variation.attributes ? variation.attributes : {};\r\n      if (Array.isArray(attrs)) {\r\n        return attrs.map(attr => [\r\n          attr.slug || attr.name || attr.attribute || '',\r\n          attr.value || attr.option || attr.name || ''\r\n        ]);\r\n      }\r\n      return Object.entries(attrs);\r\n    }\r\n\r\n    function getPackageAttribute(variation) {\r\n      const entries = getAttributeEntries(variation);\r\n      const priorityKeys = ['pa_packmass', 'attribute_pa_packmass', 'packmass', 'attribute_pa_packma\u00df', 'attribute_packmass'];\r\n      for (const key of priorityKeys) {\r\n        const found = entries.find(entry => entry[0] === key);\r\n        if (found) return { key: found[0], value: found[1] };\r\n      }\r\n      const byValue = entries.find(entry => Object.prototype.hasOwnProperty.call(COVERAGE_M2, normalizePackageSize(entry[1])));\r\n      if (byValue) return { key: byValue[0], value: byValue[1] };\r\n      return { key: 'pa_packmass', value: variation.packageSize || variation.name || '' };\r\n    }\r\n\r\n    function toCartAttributeKey(attributeKey) {\r\n      const key = String(attributeKey || '').trim();\r\n      if (!key) return 'attribute_pa_packmass';\r\n      if (key.indexOf('attribute_') === 0) return key;\r\n      if (key.indexOf('pa_') === 0) return 'attribute_' + key;\r\n      if (key === 'packmass') return 'attribute_pa_packmass';\r\n      return 'attribute_' + key;\r\n    }\r\n\r\n    function normalizeVariation(variation) {\r\n      if (!variation) return null;\r\n      const attr = getPackageAttribute(variation);\r\n      const packageSize = normalizePackageSize(attr.value);\r\n      if (!Object.prototype.hasOwnProperty.call(COVERAGE_M2, packageSize)) return null;\r\n\r\n      const stockRaw = variation.stock_quantity ?? variation.stockQuantity;\r\n      const stockNumber = Number(stockRaw);\r\n      const hasNumericStock = Number.isFinite(stockNumber);\r\n      const explicitInStock = variation.is_in_stock === true || variation.is_in_stock === 'true' || variation.is_in_stock === 'yes' || variation.is_in_stock === 1;\r\n      const isInStock = explicitInStock || (hasNumericStock && stockNumber > 0);\r\n\r\n      return {\r\n        id: Number(variation.id || variation.variation_id || 0),\r\n        price: parsePrice(variation.price),\r\n        packageSize,\r\n        m2: COVERAGE_M2[packageSize],\r\n        isInStock,\r\n        stockQuantity: hasNumericStock && stockNumber > 0 ? stockNumber : (isInStock ? MAX_QTY_FALLBACK : 0),\r\n        cartAttributeKey: toCartAttributeKey(attr.key)\r\n      };\r\n    }\r\n\r\n    function chooseDefaultVariation(variations) {\r\n      return variations.find(v => v.packageSize === '1kg' && v.isInStock)\r\n        || variations.find(v => v.isInStock)\r\n        || variations[0];\r\n    }\r\n\r\n    function applyVariationToProduct(product, variation) {\r\n      product.selectedPackageSize = variation.packageSize;\r\n      product.selectedVariationId = variation.id;\r\n      product.quantity = 1;\r\n      product.unitPrice = variation.price;\r\n      product.linePrice = variation.price;\r\n      product.m2 = variation.m2;\r\n      product.cartAttributeKey = variation.cartAttributeKey;\r\n    }\r\n\r\n    function normalizeProduct(product) {\r\n      if (!product || !product.id) return null;\r\n      const variationsRaw = Array.isArray(product.variations) ? product.variations : [];\r\n      const variations = variationsRaw.map(normalizeVariation).filter(Boolean);\r\n      if (!variations.length) return null;\r\n\r\n      variations.sort((a, b) => (PACKAGE_ORDER[a.packageSize] || 9) - (PACKAGE_ORDER[b.packageSize] || 9));\r\n      const defaultVariation = chooseDefaultVariation(variations);\r\n      const normalized = {\r\n        id: Number(product.id),\r\n        name: cleanName(product.name),\r\n        image: resolveUrl(product.image),\r\n        color: product.color || '',\r\n        category: product.category || '',\r\n        bestseller: Boolean(product.bestseller),\r\n        variations,\r\n        hasAnyStock: variations.some(v => v.isInStock)\r\n      };\r\n      applyVariationToProduct(normalized, defaultVariation);\r\n      return normalized;\r\n    }\r\n\r\n    function cloneProduct(product) {\r\n      const copy = JSON.parse(JSON.stringify(product));\r\n      const defaultVariation = chooseDefaultVariation(copy.variations);\r\n      applyVariationToProduct(copy, defaultVariation);\r\n      return copy;\r\n    }\r\n\r\n    function getSelectedRegulars() {\r\n      return state.selected.filter(Boolean);\r\n    }\r\n\r\n    function getVisibleRegularEntries() {\r\n      return state.selected\r\n        .map((product, index) => ({ product, index }))\r\n        .filter(entry => entry.product && !state.hidden.has(entry.index));\r\n    }\r\n\r\n    function getVisibleRegulars() {\r\n      return getVisibleRegularEntries().map(entry => entry.product);\r\n    }\r\n\r\n    function hasVisibleMineral() {\r\n      return state.includeMineral && state.selectedMineral && !state.mineralHidden;\r\n    }\r\n\r\n    function canProceedFromSelection() {\r\n      return getSelectedRegulars().length >= 2;\r\n    }\r\n\r\n    function canBuildPreview() {\r\n      return getVisibleRegulars().length >= 2;\r\n    }\r\n\r\n    function canAddToCart() {\r\n      if (state.isAddingToCart) return false;\r\n      if (getVisibleRegulars().length < 2) return false;\r\n      if (hasVisibleMineral() && state.selectedMineral.isInStock === false) return false;\r\n      return getVisibleRegulars().every(product => {\r\n        const variation = product.variations.find(v => v.packageSize === product.selectedPackageSize);\r\n        return variation && variation.isInStock && Number(product.quantity || 0) >= 1;\r\n      });\r\n    }\r\n\r\n    function setNotice(type, message, persist) {\r\n      const container = qs('[data-role=\"notices\"]');\r\n      if (!container) return;\r\n      container.innerHTML = '';\r\n      if (state.noticeTimer) window.clearTimeout(state.noticeTimer);\r\n      if (!message) return;\r\n\r\n      const notice = document.createElement('div');\r\n      notice.className = 'bmx4__notice bmx4__notice--' + (type || 'warning');\r\n      notice.setAttribute('role', type === 'error' ? 'alert' : 'status');\r\n      notice.textContent = message;\r\n      container.appendChild(notice);\r\n\r\n      if (!persist) {\r\n        state.noticeTimer = window.setTimeout(() => {\r\n          notice.remove();\r\n        }, 5600);\r\n      }\r\n    }\r\n\r\n    function appendCartLink() {\r\n      const notice = qs('[data-role=\"notices\"] .bmx4__notice');\r\n      if (!notice) return;\r\n      const link = document.createElement('a');\r\n      link.href = CONFIG.cartUrl;\r\n      link.textContent = ' Warenkorb \u00f6ffnen';\r\n      notice.appendChild(link);\r\n    }\r\n\r\n    function createButton(className, text, attrs) {\r\n      const button = document.createElement('button');\r\n      button.type = 'button';\r\n      button.className = className;\r\n      if (text) button.textContent = text;\r\n      Object.entries(attrs || {}).forEach(([key, value]) => {\r\n        if (value === false || value === null || value === undefined) return;\r\n        if (value === true) button.setAttribute(key, '');\r\n        else button.setAttribute(key, String(value));\r\n      });\r\n      return button;\r\n    }\r\n\r\n    function renderCountButtons() {\r\n      qsa('[data-action=\"set-count\"]').forEach(button => {\r\n        button.setAttribute('aria-pressed', Number(button.dataset.count) === state.colorCount ? 'true' : 'false');\r\n      });\r\n    }\r\n\r\n    function renderProductBoxes() {\r\n      const container = qs('[data-role=\"product-boxes\"]');\r\n      if (!container) return;\r\n      container.innerHTML = '';\r\n\r\n      for (let i = 0; i < state.colorCount; i += 1) {\r\n        const product = state.selected[i];\r\n        const box = document.createElement('article');\r\n        box.className = 'bmx4__box';\r\n\r\n        const head = document.createElement('div');\r\n        head.className = 'bmx4__box-head';\r\n        const title = document.createElement('div');\r\n        title.className = 'bmx4__box-title';\r\n        title.textContent = 'Farbe ' + (i + 1);\r\n        head.appendChild(title);\r\n\r\n        if (product) {\r\n          const actions = document.createElement('div');\r\n          actions.className = 'bmx4__mini-actions';\r\n          const hidden = state.hidden.has(i);\r\n          actions.append(\r\n            createButton('bmx4__mini-btn', hidden ? 'An' : 'Aus', {\r\n              'data-action': 'toggle-visibility',\r\n              'data-slot': i,\r\n              'aria-label': hidden ? 'Farbe wieder anzeigen' : 'Farbe in Vorschau und Warenkorb ausblenden',\r\n              'aria-pressed': hidden ? 'true' : 'false'\r\n            }),\r\n            createButton('bmx4__mini-btn', '\u00d7', {\r\n              'data-action': 'remove-product',\r\n              'data-slot': i,\r\n              'aria-label': 'Farbe entfernen'\r\n            })\r\n          );\r\n          head.appendChild(actions);\r\n        }\r\n        box.appendChild(head);\r\n\r\n        if (product) {\r\n          const row = document.createElement('div');\r\n          row.className = 'bmx4__product-row';\r\n          const img = document.createElement('img');\r\n          img.className = 'bmx4__thumb';\r\n          img.src = product.image || '';\r\n          img.alt = product.name || 'BELKA Farbe';\r\n          img.loading = 'lazy';\r\n\r\n          const info = document.createElement('div');\r\n          const name = document.createElement('p');\r\n          name.className = 'bmx4__product-name';\r\n          name.textContent = product.name;\r\n          const meta = document.createElement('p');\r\n          meta.className = 'bmx4__product-meta';\r\n          meta.textContent = product.hasAnyStock\r\n            ? formatMoney(product.unitPrice) + ' \u00b7 ' + formatArea(product.m2)\r\n            : 'Nicht auf Lager';\r\n          const tools = document.createElement('div');\r\n          tools.className = 'bmx4__product-tools';\r\n          tools.appendChild(createButton('bmx4__btn bmx4__btn--small bmx4__btn--ghost', 'Wechseln', {\r\n            'data-action': 'open-search',\r\n            'data-slot': i\r\n          }));\r\n          info.append(name, meta, tools);\r\n          row.append(img, info);\r\n          box.appendChild(row);\r\n        } else {\r\n          const empty = document.createElement('div');\r\n          empty.className = 'bmx4__empty-box';\r\n          empty.appendChild(createButton('bmx4__btn bmx4__btn--dark', 'Farbe ausw\u00e4hlen', {\r\n            'data-action': 'open-search',\r\n            'data-slot': i\r\n          }));\r\n          box.appendChild(empty);\r\n        }\r\n\r\n        container.appendChild(box);\r\n      }\r\n    }\r\n\r\n    function renderMineralBox() {\r\n      const box = qs('[data-role=\"mineral-box\"]');\r\n      if (!box) return;\r\n      box.hidden = !state.includeMineral;\r\n      box.innerHTML = '';\r\n      if (!state.includeMineral) return;\r\n\r\n      const product = state.selectedMineral;\r\n      const article = document.createElement('article');\r\n      article.className = 'bmx4__box';\r\n      const head = document.createElement('div');\r\n      head.className = 'bmx4__box-head';\r\n      const title = document.createElement('div');\r\n      title.className = 'bmx4__box-title';\r\n      title.textContent = 'Lumika Mineralstein';\r\n      head.appendChild(title);\r\n\r\n      if (product) {\r\n        const actions = document.createElement('div');\r\n        actions.className = 'bmx4__mini-actions';\r\n        actions.append(\r\n          createButton('bmx4__mini-btn', state.mineralHidden ? 'An' : 'Aus', {\r\n            'data-action': 'toggle-mineral-visibility',\r\n            'aria-label': state.mineralHidden ? 'Mineralstein wieder anzeigen' : 'Mineralstein aus Vorschau und Warenkorb ausblenden',\r\n            'aria-pressed': state.mineralHidden ? 'true' : 'false'\r\n          }),\r\n          createButton('bmx4__mini-btn', '\u00d7', {\r\n            'data-action': 'remove-mineral',\r\n            'aria-label': 'Mineralstein entfernen'\r\n          })\r\n        );\r\n        head.appendChild(actions);\r\n      }\r\n      article.appendChild(head);\r\n\r\n      if (product) {\r\n        const row = document.createElement('div');\r\n        row.className = 'bmx4__product-row';\r\n        const img = document.createElement('img');\r\n        img.className = 'bmx4__thumb';\r\n        img.src = product.image || '';\r\n        img.alt = product.name;\r\n        img.loading = 'lazy';\r\n        const info = document.createElement('div');\r\n        const name = document.createElement('p');\r\n        name.className = 'bmx4__product-name';\r\n        name.textContent = product.name;\r\n        const meta = document.createElement('p');\r\n        meta.className = 'bmx4__product-meta';\r\n        meta.textContent = product.isInStock === false\r\n          ? 'Aktuell nicht verf\u00fcgbar'\r\n          : formatMoney(product.price) + ' \u00b7 600g';\r\n        const tools = document.createElement('div');\r\n        tools.className = 'bmx4__product-tools';\r\n        tools.appendChild(createButton('bmx4__btn bmx4__btn--small bmx4__btn--ghost', 'Wechseln', {\r\n          'data-action': 'open-search',\r\n          'data-slot': 'mineral'\r\n        }));\r\n        info.append(name, meta, tools);\r\n        row.append(img, info);\r\n        article.appendChild(row);\r\n      } else {\r\n        const empty = document.createElement('div');\r\n        empty.className = 'bmx4__empty-box';\r\n        empty.appendChild(createButton('bmx4__btn bmx4__btn--dark', 'Mineralstein w\u00e4hlen', {\r\n          'data-action': 'open-search',\r\n          'data-slot': 'mineral'\r\n        }));\r\n        article.appendChild(empty);\r\n      }\r\n\r\n      box.appendChild(article);\r\n    }\r\n\r\n    function renderSelectedProducts() {\r\n      const container = qs('[data-role=\"selected-products\"]');\r\n      if (!container) return;\r\n      container.innerHTML = '';\r\n\r\n      const visibleEntries = getVisibleRegularEntries();\r\n      if (!visibleEntries.length && !hasVisibleMineral()) {\r\n        const empty = document.createElement('div');\r\n        empty.className = 'bmx4__note';\r\n        empty.textContent = 'W\u00e4hlen Sie mindestens zwei sichtbare BELKA Farben. Danach k\u00f6nnen Sie Paketgr\u00f6\u00dfen und Mengen pr\u00fcfen.';\r\n        container.appendChild(empty);\r\n        return;\r\n      }\r\n\r\n      visibleEntries.forEach(({ product, index }) => {\r\n        const item = document.createElement('article');\r\n        item.className = 'bmx4__selected-product';\r\n\r\n        const head = document.createElement('div');\r\n        head.className = 'bmx4__selected-head';\r\n        const row = document.createElement('div');\r\n        row.className = 'bmx4__product-row';\r\n        const img = document.createElement('img');\r\n        img.className = 'bmx4__thumb';\r\n        img.src = product.image || '';\r\n        img.alt = product.name;\r\n        img.loading = 'lazy';\r\n        const info = document.createElement('div');\r\n        const name = document.createElement('p');\r\n        name.className = 'bmx4__product-name';\r\n        name.textContent = product.name;\r\n        const meta = document.createElement('p');\r\n        meta.className = 'bmx4__product-meta';\r\n        meta.textContent = formatMoney(product.linePrice) + ' \u00b7 ' + formatArea(product.m2);\r\n        info.append(name, meta);\r\n        row.append(img, info);\r\n        head.appendChild(row);\r\n        item.appendChild(head);\r\n\r\n        const packageGrid = document.createElement('div');\r\n        packageGrid.className = 'bmx4__package-grid';\r\n        product.variations.forEach(variation => {\r\n          packageGrid.appendChild(createButton('bmx4__package-btn', variation.packageSize + (variation.isInStock ? '' : ' \u00b7 aus'), {\r\n            'data-action': 'select-package',\r\n            'data-slot': index,\r\n            'data-package': variation.packageSize,\r\n            'aria-pressed': variation.packageSize === product.selectedPackageSize ? 'true' : 'false',\r\n            disabled: !variation.isInStock\r\n          }));\r\n        });\r\n        item.appendChild(packageGrid);\r\n\r\n        const selectedVariation = product.variations.find(v => v.packageSize === product.selectedPackageSize);\r\n        const qtyRow = document.createElement('div');\r\n        qtyRow.className = 'bmx4__qty-row';\r\n        qtyRow.append(\r\n          createButton('bmx4__mini-btn', '\u2212', {\r\n            'data-action': 'qty',\r\n            'data-slot': index,\r\n            'data-change': -1,\r\n            'aria-label': product.name + ' Menge reduzieren',\r\n            disabled: Number(product.quantity || 1) <= 1\r\n          })\r\n        );\r\n        const qty = document.createElement('span');\r\n        qty.className = 'bmx4__qty-value';\r\n        qty.textContent = String(product.quantity || 1);\r\n        qtyRow.appendChild(qty);\r\n        qtyRow.append(\r\n          createButton('bmx4__mini-btn', '+', {\r\n            'data-action': 'qty',\r\n            'data-slot': index,\r\n            'data-change': 1,\r\n            'aria-label': product.name + ' Menge erh\u00f6hen',\r\n            disabled: selectedVariation && Number(product.quantity || 1) >= selectedVariation.stockQuantity\r\n          })\r\n        );\r\n        item.appendChild(qtyRow);\r\n        container.appendChild(item);\r\n      });\r\n\r\n      if (hasVisibleMineral()) {\r\n        const product = state.selectedMineral;\r\n        const item = document.createElement('article');\r\n        item.className = 'bmx4__selected-product';\r\n        const row = document.createElement('div');\r\n        row.className = 'bmx4__product-row';\r\n        const img = document.createElement('img');\r\n        img.className = 'bmx4__thumb';\r\n        img.src = product.image || '';\r\n        img.alt = product.name;\r\n        img.loading = 'lazy';\r\n        const info = document.createElement('div');\r\n        const name = document.createElement('p');\r\n        name.className = 'bmx4__product-name';\r\n        name.textContent = product.name;\r\n        const meta = document.createElement('p');\r\n        meta.className = 'bmx4__product-meta';\r\n        meta.textContent = product.isInStock === false ? 'Aktuell nicht verf\u00fcgbar' : formatMoney(product.price) + ' \u00b7 600g';\r\n        info.append(name, meta);\r\n        row.append(img, info);\r\n        item.appendChild(row);\r\n        container.appendChild(item);\r\n      }\r\n    }\r\n\r\n    function updateTotals() {\r\n      let totalPrice = 0;\r\n      let totalArea = 0;\r\n      getVisibleRegulars().forEach(product => {\r\n        totalPrice += Number(product.linePrice || 0);\r\n        totalArea += Number(product.m2 || 0);\r\n      });\r\n      if (hasVisibleMineral() && state.selectedMineral.isInStock !== false) {\r\n        totalPrice += Number(state.selectedMineral.price || 0);\r\n      }\r\n\r\n      const priceEl = qs('[data-role=\"total-price\"]');\r\n      const areaEl = qs('[data-role=\"total-area\"]');\r\n      if (priceEl) priceEl.textContent = totalPrice > 0 ? formatMoney(totalPrice) : '\u2014';\r\n      if (areaEl) areaEl.textContent = totalArea > 0 ? formatArea(totalArea) : '\u2014';\r\n    }\r\n\r\n    function renderControls() {\r\n      root.dataset.step = String(state.step);\r\n      qsa('[data-role=\"mobile-next-selection\"]').forEach(btn => {\r\n        btn.disabled = !canProceedFromSelection();\r\n      });\r\n      qsa('[data-action=\"next\"]').forEach(btn => {\r\n        btn.disabled = !canProceedFromSelection();\r\n      });\r\n      qsa('[data-role=\"cart-button\"]').forEach(btn => {\r\n        btn.disabled = !canAddToCart();\r\n        btn.textContent = state.isAddingToCart ? 'Wird in den Warenkorb gelegt\u2026' : 'In den Warenkorb';\r\n      });\r\n      const checkbox = qs('[data-role=\"include-mineral\"]');\r\n      if (checkbox) checkbox.checked = state.includeMineral;\r\n    }\r\n\r\n    function renderPreviewStatus() {\r\n      const visible = getVisibleRegulars().length;\r\n      const status = qs('[data-role=\"status\"]');\r\n      if (!status) return;\r\n      if (visible === 0) {\r\n        status.textContent = 'W\u00e4hlen Sie mindestens zwei sichtbare Farben, um Ihren BELKA Mix zu erstellen.';\r\n      } else if (visible === 1) {\r\n        status.textContent = 'Eine sichtbare Farbe ist ausgew\u00e4hlt. F\u00fcr einen BELKA Mix ben\u00f6tigen Sie mindestens zwei sichtbare Farben.';\r\n      } else {\r\n        status.textContent = visible + ' sichtbare Farben ausgew\u00e4hlt. Vorschau und Warenkorb sind bereit.';\r\n      }\r\n    }\r\n\r\n    function renderMixChips() {\r\n      const container = qs('[data-role=\"mix-chips\"]');\r\n      if (!container) return;\r\n      container.innerHTML = '';\r\n\r\n      const entries = getVisibleRegularEntries();\r\n      if (!entries.length && !hasVisibleMineral()) return;\r\n\r\n      entries.forEach(({ product, index }) => {\r\n        const chip = createButton('bmx4__mix-chip', '', {\r\n          'data-action': 'open-search',\r\n          'data-slot': index,\r\n          'aria-label': product.name + ' \u00e4ndern'\r\n        });\r\n\r\n        const img = document.createElement('img');\r\n        img.className = 'bmx4__mix-chip-img';\r\n        img.src = product.image || '';\r\n        img.alt = product.name || 'BELKA Farbe';\r\n        img.loading = 'lazy';\r\n\r\n        const info = document.createElement('span');\r\n        const title = document.createElement('span');\r\n        title.className = 'bmx4__mix-chip-title';\r\n        title.textContent = product.name;\r\n        const meta = document.createElement('span');\r\n        meta.className = 'bmx4__mix-chip-meta';\r\n        meta.textContent = 'Farbe ' + (index + 1) + ' \u00b7 aktiv';\r\n        info.append(title, meta);\r\n\r\n        const action = document.createElement('span');\r\n        action.className = 'bmx4__mix-chip-action';\r\n        action.textContent = '\u00c4ndern';\r\n\r\n        chip.append(img, info, action);\r\n        container.appendChild(chip);\r\n      });\r\n\r\n      if (hasVisibleMineral()) {\r\n        const product = state.selectedMineral;\r\n        const chip = createButton('bmx4__mix-chip', '', {\r\n          'data-action': 'open-search',\r\n          'data-slot': 'mineral',\r\n          'aria-label': product.name + ' \u00e4ndern'\r\n        });\r\n\r\n        const img = document.createElement('img');\r\n        img.className = 'bmx4__mix-chip-img';\r\n        img.src = product.image || '';\r\n        img.alt = product.name || 'Lumika Mineralstein';\r\n        img.loading = 'lazy';\r\n\r\n        const info = document.createElement('span');\r\n        const title = document.createElement('span');\r\n        title.className = 'bmx4__mix-chip-title';\r\n        title.textContent = product.name;\r\n        const meta = document.createElement('span');\r\n        meta.className = 'bmx4__mix-chip-meta';\r\n        meta.textContent = 'Effekt-Zusatz \u00b7 aktiv';\r\n        info.append(title, meta);\r\n\r\n        const action = document.createElement('span');\r\n        action.className = 'bmx4__mix-chip-action';\r\n        action.textContent = '\u00c4ndern';\r\n\r\n        chip.append(img, info, action);\r\n        container.appendChild(chip);\r\n      }\r\n    }\r\n\r\n    function renderAll(options) {\r\n      const settings = options || {};\r\n      renderCountButtons();\r\n      renderProductBoxes();\r\n      renderMineralBox();\r\n      renderSelectedProducts();\r\n      updateTotals();\r\n      renderControls();\r\n      renderPreviewStatus();\r\n      renderMixChips();\r\n      if (settings.preview !== false) schedulePreview();\r\n    }\r\n\r\n    function setColorCount(count) {\r\n      const nextCount = Math.max(2, Math.min(5, Number(count) || 2));\r\n      state.colorCount = nextCount;\r\n      const next = Array(nextCount).fill(null);\r\n      for (let i = 0; i < Math.min(nextCount, state.selected.length); i += 1) {\r\n        next[i] = state.selected[i];\r\n      }\r\n      state.selected = next;\r\n      state.hidden = new Set(Array.from(state.hidden).filter(index => Number(index) < nextCount));\r\n      renderAll();\r\n    }\r\n\r\n    async function fetchProducts() {\r\n      state.productsStatus = 'loading';\r\n      state.productsError = '';\r\n      renderProductList();\r\n\r\n      try {\r\n        const url = new URL(CONFIG.ajaxUrl, window.location.origin);\r\n        url.searchParams.set('action', CONFIG.productsAction);\r\n        const response = await fetch(url.toString(), {\r\n          credentials: 'include',\r\n          headers: { Accept: 'application\/json' }\r\n        });\r\n        const text = await response.text();\r\n        if (!response.ok) throw new Error('Produktdaten konnten nicht geladen werden (' + response.status + ').');\r\n        const payload = parseJsonText(text);\r\n        const data = Array.isArray(payload)\r\n          ? payload\r\n          : (Array.isArray(payload.data) ? payload.data : (Array.isArray(payload.products) ? payload.products : null));\r\n        if (!Array.isArray(data)) throw new Error('Produktdaten haben kein g\u00fcltiges Array-Format.');\r\n        state.products = data.map(normalizeProduct).filter(Boolean).sort((a, b) => a.name.localeCompare(b.name, 'de'));\r\n        state.productsStatus = state.products.length ? 'ready' : 'empty';\r\n      } catch (error) {\r\n        state.productsStatus = 'error';\r\n        state.productsError = error && error.message ? error.message : 'Produktdaten konnten nicht geladen werden.';\r\n      } finally {\r\n        renderProductList();\r\n        renderAll({ preview: false });\r\n      }\r\n    }\r\n\r\n    async function ensureMineralProductsHydrated() {\r\n      if (state.mineralsHydrated || state.mineralsHydrating) return;\r\n      state.mineralsHydrating = true;\r\n      await Promise.all(MINERAL_PRODUCTS.map(async product => {\r\n        try {\r\n          const url = new URL(CONFIG.storeApiBase.replace(\/\\\/$\/, '') + '\/' + product.id, window.location.origin);\r\n          const response = await fetch(url.toString(), { headers: { Accept: 'application\/json' } });\r\n          const text = await response.text();\r\n          if (!response.ok) return;\r\n          const data = parseJsonText(text);\r\n          product.name = data.name || product.name;\r\n          product.isInStock = data.is_in_stock !== false;\r\n          product.availabilityKnown = true;\r\n          const prices = data.prices || {};\r\n          const minorUnit = Number(prices.currency_minor_unit || 2);\r\n          const divisor = Math.pow(10, minorUnit);\r\n          const maxAmount = prices.price_range && prices.price_range.max_amount;\r\n          if (maxAmount) product.price = Number(maxAmount) \/ divisor;\r\n          if (Array.isArray(data.images) && data.images[0] && data.images[0].src) {\r\n            product.image = resolveUrl(data.images[0].src);\r\n          }\r\n          if (Array.isArray(data.variations)) {\r\n            const variation = data.variations.find(item => {\r\n              return Array.isArray(item.attributes) && item.attributes.some(attr => normalizePackageSize(attr.value) === '600g');\r\n            });\r\n            if (variation && variation.id) product.variationId = Number(variation.id);\r\n          }\r\n        } catch (error) {\r\n          product.availabilityKnown = false;\r\n        }\r\n      }));\r\n      if (state.selectedMineral) {\r\n        const fresh = MINERAL_PRODUCTS.find(product => Number(product.id) === Number(state.selectedMineral.id));\r\n        if (fresh) state.selectedMineral = JSON.parse(JSON.stringify(fresh));\r\n      }\r\n      state.mineralsHydrated = true;\r\n      state.mineralsHydrating = false;\r\n      if (state.activeSlot === 'mineral') renderProductList();\r\n      renderAll({ preview: false });\r\n    }\r\n\r\n    function openSearch(slot) {\r\n      state.activeSlot = slot === 'mineral' ? 'mineral' : Number(slot);\r\n      state.query = '';\r\n      state.lastFocus = document.activeElement;\r\n      if (state.activeSlot === 'mineral') ensureMineralProductsHydrated();\r\n\r\n      const modal = qs('[data-role=\"search-modal\"]');\r\n      const title = qs('[data-role=\"modal-title\"]');\r\n      const input = qs('[data-role=\"search-input\"]');\r\n      if (!modal || !title || !input) return;\r\n\r\n      title.textContent = state.activeSlot === 'mineral' ? 'Lumika Mineralstein w\u00e4hlen' : 'Farbe ' + (Number(state.activeSlot) + 1) + ' w\u00e4hlen';\r\n      input.value = '';\r\n      modal.hidden = false;\r\n      document.documentElement.style.overflow = 'hidden';\r\n      renderProductList();\r\n      window.setTimeout(() => input.focus(), 30);\r\n    }\r\n\r\n    function closeSearch() {\r\n      const modal = qs('[data-role=\"search-modal\"]');\r\n      if (modal) modal.hidden = true;\r\n      document.documentElement.style.overflow = '';\r\n      state.activeSlot = null;\r\n      state.query = '';\r\n      if (state.lastFocus && typeof state.lastFocus.focus === 'function') state.lastFocus.focus();\r\n    }\r\n\r\n    function productAlreadySelected(productId) {\r\n      return state.selected.some(product => product && Number(product.id) === Number(productId));\r\n    }\r\n\r\n    function shouldAutoOpenNextSlot(slot, wasEmpty) {\r\n      if (!wasEmpty) return false;\r\n      if (state.step !== 1) return false;\r\n      if (!window.matchMedia('(max-width: 767px)').matches) return false;\r\n      const nextEmpty = state.selected.findIndex((product, index) => index > Number(slot) && !product);\r\n      return nextEmpty >= 0 ? nextEmpty : false;\r\n    }\r\n\r\n    function renderProductList() {\r\n      const container = qs('[data-role=\"product-list\"]');\r\n      if (!container) return;\r\n      container.innerHTML = '';\r\n\r\n      if (state.activeSlot !== 'mineral' && state.productsStatus === 'loading') {\r\n        const loading = document.createElement('div');\r\n        loading.className = 'bmx4__note';\r\n        loading.textContent = 'Produkte werden geladen\u2026';\r\n        container.appendChild(loading);\r\n        return;\r\n      }\r\n\r\n      if (state.activeSlot !== 'mineral' && state.productsStatus === 'error') {\r\n        const error = document.createElement('div');\r\n        error.className = 'bmx4__note';\r\n        error.textContent = state.productsError || 'Produktdaten konnten nicht geladen werden.';\r\n        error.appendChild(document.createElement('br'));\r\n        error.appendChild(createButton('bmx4__btn bmx4__btn--dark', 'Erneut laden', { 'data-action': 'retry-products' }));\r\n        container.appendChild(error);\r\n        return;\r\n      }\r\n\r\n      const query = state.query.trim().toLowerCase();\r\n      const source = state.activeSlot === 'mineral' ? MINERAL_PRODUCTS : state.products;\r\n      const filtered = source.filter(product => !query || product.name.toLowerCase().includes(query));\r\n\r\n      if (!filtered.length) {\r\n        const empty = document.createElement('div');\r\n        empty.className = 'bmx4__note';\r\n        empty.textContent = query ? 'Keine passenden Produkte gefunden.' : 'Keine Produkte verf\u00fcgbar.';\r\n        container.appendChild(empty);\r\n        return;\r\n      }\r\n\r\n      filtered.forEach(product => {\r\n        const isMineral = state.activeSlot === 'mineral';\r\n        const duplicate = !isMineral\r\n          && productAlreadySelected(product.id)\r\n          && (!state.selected[state.activeSlot] || Number(state.selected[state.activeSlot].id) !== Number(product.id));\r\n        const unavailable = isMineral ? product.isInStock === false : !product.hasAnyStock;\r\n        const disabled = unavailable || duplicate;\r\n\r\n        const item = createButton('bmx4__product-item', '', {\r\n          'data-action': 'select-product',\r\n          'data-product-id': product.id,\r\n          disabled\r\n        });\r\n        const img = document.createElement('img');\r\n        img.className = 'bmx4__thumb';\r\n        img.src = product.image || '';\r\n        img.alt = product.name;\r\n        img.loading = 'lazy';\r\n\r\n        const info = document.createElement('div');\r\n        const name = document.createElement('p');\r\n        name.className = 'bmx4__product-name';\r\n        name.textContent = product.name;\r\n        const meta = document.createElement('p');\r\n        meta.className = 'bmx4__product-meta';\r\n        if (isMineral) {\r\n          meta.textContent = product.isInStock === false ? 'Aktuell nicht verf\u00fcgbar' : formatMoney(product.price) + ' \u00b7 600g';\r\n        } else {\r\n          meta.textContent = product.hasAnyStock ? formatMoney(product.unitPrice) + ' \u00b7 ab ' + formatArea(product.m2) : 'Nicht auf Lager';\r\n        }\r\n        info.append(name, meta);\r\n\r\n        const badge = document.createElement('span');\r\n        badge.className = 'bmx4__badge';\r\n        badge.textContent = duplicate ? 'bereits gew\u00e4hlt' : (unavailable ? 'aus' : 'w\u00e4hlen');\r\n        item.append(img, info, badge);\r\n        container.appendChild(item);\r\n      });\r\n    }\r\n\r\n    function selectProduct(productId) {\r\n      if (state.activeSlot === 'mineral') {\r\n        const mineral = MINERAL_PRODUCTS.find(product => Number(product.id) === Number(productId));\r\n        if (!mineral || mineral.isInStock === false) {\r\n          setNotice('error', 'Dieser Mineralstein ist aktuell nicht verf\u00fcgbar.', false);\r\n          return;\r\n        }\r\n        state.selectedMineral = JSON.parse(JSON.stringify(mineral));\r\n        state.mineralHidden = false;\r\n        closeSearch();\r\n        renderAll();\r\n        return;\r\n      }\r\n\r\n      const slot = Number(state.activeSlot);\r\n      if (!Number.isInteger(slot) || slot < 0 || slot >= state.colorCount) return;\r\n      const product = state.products.find(item => Number(item.id) === Number(productId));\r\n      if (!product || !product.hasAnyStock) {\r\n        setNotice('error', 'Diese Farbe ist aktuell nicht verf\u00fcgbar.', false);\r\n        return;\r\n      }\r\n      if (productAlreadySelected(product.id) && (!state.selected[slot] || Number(state.selected[slot].id) !== Number(product.id))) {\r\n        setNotice('error', 'Diese Farbe ist bereits gew\u00e4hlt. Bitte w\u00e4hlen Sie eine andere Farbe.', false);\r\n        return;\r\n      }\r\n      const nextSlot = shouldAutoOpenNextSlot(slot, !state.selected[slot]);\r\n      state.selected[slot] = cloneProduct(product);\r\n      state.hidden.delete(slot);\r\n      closeSearch();\r\n      renderAll();\r\n      if (nextSlot !== false) {\r\n        window.setTimeout(() => openSearch(nextSlot), 180);\r\n      }\r\n    }\r\n\r\n    function removeProduct(slot) {\r\n      const index = Number(slot);\r\n      if (!Number.isInteger(index)) return;\r\n      state.selected[index] = null;\r\n      state.hidden.delete(index);\r\n      renderAll();\r\n    }\r\n\r\n    function resetSelection() {\r\n      state.step = 1;\r\n      state.colorCount = 2;\r\n      state.selected = [null, null];\r\n      state.hidden = new Set();\r\n      state.includeMineral = false;\r\n      state.selectedMineral = null;\r\n      state.mineralHidden = false;\r\n      state.zoom = 1;\r\n      state.resultImage = '';\r\n      hideResultImage();\r\n      setNotice('', '', false);\r\n      renderAll({ preview: false });\r\n    }\r\n\r\n    function selectPackage(slot, packageSize) {\r\n      const index = Number(slot);\r\n      const product = state.selected[index];\r\n      if (!product) return;\r\n      const variation = product.variations.find(v => v.packageSize === packageSize && v.isInStock);\r\n      if (!variation) return;\r\n      applyVariationToProduct(product, variation);\r\n      renderAll({ preview: false });\r\n    }\r\n\r\n    function updateQuantity(slot, change) {\r\n      const index = Number(slot);\r\n      const product = state.selected[index];\r\n      if (!product) return;\r\n      const variation = product.variations.find(v => v.packageSize === product.selectedPackageSize);\r\n      if (!variation) return;\r\n      const nextQty = Math.max(1, Math.min(variation.stockQuantity, Number(product.quantity || 1) + Number(change || 0)));\r\n      product.quantity = nextQty;\r\n      product.unitPrice = variation.price;\r\n      product.linePrice = Number((variation.price * nextQty).toFixed(2));\r\n      product.m2 = variation.m2 * nextQty;\r\n      renderAll({ preview: false });\r\n    }\r\n\r\n    function selectRandomProducts() {\r\n      if (state.productsStatus === 'loading') {\r\n        setNotice('warning', 'Produkte werden noch geladen. Bitte kurz warten.', false);\r\n        return;\r\n      }\r\n      const available = state.products.filter(product => product.hasAnyStock);\r\n      if (available.length < state.colorCount) {\r\n        setNotice('error', 'Nicht genug verf\u00fcgbare Farben f\u00fcr eine zuf\u00e4llige Auswahl.', false);\r\n        return;\r\n      }\r\n      const pool = available.slice();\r\n      const chosen = [];\r\n      for (let i = 0; i < state.colorCount; i += 1) {\r\n        const index = Math.floor(Math.random() * pool.length);\r\n        chosen.push(cloneProduct(pool.splice(index, 1)[0]));\r\n      }\r\n      state.selected = chosen;\r\n      state.hidden = new Set();\r\n      renderAll();\r\n    }\r\n\r\n    function nextStep() {\r\n      if (!canProceedFromSelection()) {\r\n        setNotice('error', 'Bitte w\u00e4hlen Sie zuerst mindestens zwei Farben.', false);\r\n        return;\r\n      }\r\n      state.step = Math.min(3, state.step + 1);\r\n      renderControls();\r\n      scrollToModuleTop();\r\n    }\r\n\r\n    function prevStep() {\r\n      state.step = Math.max(1, state.step - 1);\r\n      renderControls();\r\n      scrollToModuleTop();\r\n    }\r\n\r\n    function scrollToModuleTop() {\r\n      if (!window.matchMedia('(max-width: 767px)').matches) return;\r\n      const anchor = qs('[data-role=\"anchor\"]') || root;\r\n      const top = anchor.getBoundingClientRect().top + window.pageYOffset - 8;\r\n      window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });\r\n    }\r\n\r\n    function loadImage(src) {\r\n      const safe = resolveUrl(src);\r\n      if (!safe) return Promise.reject(new Error('Bild-URL fehlt.'));\r\n      if (imageCache.has(safe)) return imageCache.get(safe);\r\n\r\n      const promise = new Promise((resolve, reject) => {\r\n        const img = new Image();\r\n        if (\/^https?:\/i.test(safe)) img.crossOrigin = 'anonymous';\r\n        const timer = window.setTimeout(() => {\r\n          img.onload = null;\r\n          img.onerror = null;\r\n          reject(new Error('Bild-Ladezeit \u00fcberschritten: ' + safe));\r\n        }, IMAGE_TIMEOUT_MS);\r\n        img.onload = () => {\r\n          window.clearTimeout(timer);\r\n          resolve(img);\r\n        };\r\n        img.onerror = () => {\r\n          window.clearTimeout(timer);\r\n          reject(new Error('Bild konnte nicht geladen werden: ' + safe));\r\n        };\r\n        img.src = safe;\r\n      });\r\n      imageCache.set(safe, promise);\r\n      return promise;\r\n    }\r\n\r\n    function createSolidCanvas(width, height, fill) {\r\n      const canvas = document.createElement('canvas');\r\n      canvas.width = width;\r\n      canvas.height = height;\r\n      const ctx = canvas.getContext('2d');\r\n      ctx.fillStyle = fill || '#f7f4ee';\r\n      ctx.fillRect(0, 0, width, height);\r\n      return canvas;\r\n    }\r\n\r\n    function createFallbackProductCanvas(width, height, label) {\r\n      const canvas = createSolidCanvas(width, height, '#f7f4ee');\r\n      const ctx = canvas.getContext('2d');\r\n      ctx.fillStyle = '#c9c0b5';\r\n      ctx.font = '700 34px sans-serif';\r\n      ctx.textAlign = 'center';\r\n      ctx.fillText(label || 'BELKA', width \/ 2, height \/ 2);\r\n      return canvas;\r\n    }\r\n\r\n    async function loadProductImageOrFallback(src, label) {\r\n      try {\r\n        return await loadImage(src);\r\n      } catch (error) {\r\n        return createFallbackProductCanvas(PREVIEW_SIZE.width, PREVIEW_SIZE.height, label);\r\n      }\r\n    }\r\n\r\n    async function loadMaskOrTransparent(src) {\r\n      try {\r\n        return await loadImage(src);\r\n      } catch (error) {\r\n        return createSolidCanvas(PREVIEW_SIZE.width, PREVIEW_SIZE.height, '#000');\r\n      }\r\n    }\r\n\r\n    function drawCover(ctx, image, width, height) {\r\n      const imageWidth = image.naturalWidth || image.width || width;\r\n      const imageHeight = image.naturalHeight || image.height || height;\r\n      const ratio = Math.max(width \/ imageWidth, height \/ imageHeight);\r\n      const drawWidth = imageWidth * ratio;\r\n      const drawHeight = imageHeight * ratio;\r\n      ctx.drawImage(image, (width - drawWidth) \/ 2, (height - drawHeight) \/ 2, drawWidth, drawHeight);\r\n    }\r\n\r\n    function applyAlphaMask(image, mask, width, height) {\r\n      const canvas = document.createElement('canvas');\r\n      canvas.width = width;\r\n      canvas.height = height;\r\n      const ctx = canvas.getContext('2d', { willReadFrequently: true });\r\n      drawCover(ctx, image, width, height);\r\n\r\n      const maskCanvas = document.createElement('canvas');\r\n      maskCanvas.width = width;\r\n      maskCanvas.height = height;\r\n      const maskCtx = maskCanvas.getContext('2d', { willReadFrequently: true });\r\n      drawCover(maskCtx, mask, width, height);\r\n\r\n      const imageData = ctx.getImageData(0, 0, width, height);\r\n      const maskData = maskCtx.getImageData(0, 0, width, height);\r\n      const pixels = imageData.data;\r\n      const maskPixels = maskData.data;\r\n      for (let i = 0; i < pixels.length; i += 4) {\r\n        pixels[i + 3] = maskPixels[i];\r\n      }\r\n      ctx.putImageData(imageData, 0, 0);\r\n      return canvas;\r\n    }\r\n\r\n    function showProcessing(show) {\r\n      const overlay = qs('[data-role=\"processing\"]');\r\n      if (overlay) overlay.hidden = !show;\r\n    }\r\n\r\n    function hideResultImage() {\r\n      const placeholder = qs('[data-role=\"result-placeholder\"]');\r\n      const image = qs('[data-role=\"result-image\"]');\r\n      if (placeholder) placeholder.hidden = false;\r\n      if (image) {\r\n        image.hidden = true;\r\n        image.removeAttribute('src');\r\n      }\r\n      revokeResultObjectUrl();\r\n    }\r\n\r\n    function showResultImage(dataUrl) {\r\n      const placeholder = qs('[data-role=\"result-placeholder\"]');\r\n      const image = qs('[data-role=\"result-image\"]');\r\n      if (placeholder) placeholder.hidden = true;\r\n      if (image) {\r\n        image.src = dataUrl;\r\n        image.hidden = false;\r\n        image.style.transform = 'scale(' + state.zoom + ')';\r\n      }\r\n    }\r\n\r\n    function revokeResultObjectUrl() {\r\n      if (state.resultObjectUrl) {\r\n        URL.revokeObjectURL(state.resultObjectUrl);\r\n        state.resultObjectUrl = '';\r\n      }\r\n    }\r\n\r\n    function canvasToImageUrl(canvas) {\r\n      return new Promise(resolve => {\r\n        if (!canvas.toBlob) {\r\n          resolve(canvas.toDataURL('image\/png'));\r\n          return;\r\n        }\r\n        canvas.toBlob(blob => {\r\n          if (!blob) {\r\n            resolve(canvas.toDataURL('image\/png'));\r\n            return;\r\n          }\r\n          revokeResultObjectUrl();\r\n          state.resultObjectUrl = URL.createObjectURL(blob);\r\n          resolve(state.resultObjectUrl);\r\n        }, 'image\/png');\r\n      });\r\n    }\r\n\r\n    function schedulePreview() {\r\n      window.clearTimeout(previewTimer);\r\n      previewTimer = window.setTimeout(applyPreview, 160);\r\n    }\r\n\r\n    async function applyPreview() {\r\n      const runId = ++previewRunId;\r\n      const visibleProducts = getVisibleRegulars();\r\n      const visibleMineral = hasVisibleMineral() ? state.selectedMineral : null;\r\n\r\n      if (visibleProducts.length < 2) {\r\n        state.resultImage = '';\r\n        hideResultImage();\r\n        showProcessing(false);\r\n        return;\r\n      }\r\n\r\n      showProcessing(true);\r\n      try {\r\n        const canvas = await buildPreviewCanvas(visibleProducts, visibleMineral);\r\n        if (runId !== previewRunId) return;\r\n        state.resultImage = await canvasToImageUrl(canvas);\r\n        showResultImage(state.resultImage);\r\n      } catch (error) {\r\n        if (runId === previewRunId) {\r\n          state.resultImage = '';\r\n          hideResultImage();\r\n          setNotice('error', 'Die Vorschau konnte nicht erstellt werden. Bitte pr\u00fcfen Sie die Bilder oder versuchen Sie es erneut.', false);\r\n        }\r\n      } finally {\r\n        if (runId === previewRunId) showProcessing(false);\r\n      }\r\n    }\r\n\r\n    async function buildPreviewCanvas(products, mineral) {\r\n      const width = PREVIEW_SIZE.width;\r\n      const height = PREVIEW_SIZE.height;\r\n      const canvas = document.createElement('canvas');\r\n      canvas.width = width;\r\n      canvas.height = height;\r\n      const ctx = canvas.getContext('2d');\r\n      ctx.fillStyle = '#f7f4ee';\r\n      ctx.fillRect(0, 0, width, height);\r\n\r\n      const productImages = await Promise.all(products.map(product => loadProductImageOrFallback(product.image, product.name)));\r\n      if (productImages.length) drawCover(ctx, productImages[0], width, height);\r\n\r\n      const maskUrls = MASKS[Math.min(productImages.length, 5) + '_low'] || [];\r\n      const masks = await Promise.all(maskUrls.map(loadMaskOrTransparent));\r\n      for (let i = 1; i < productImages.length; i += 1) {\r\n        const mask = masks[i - 1];\r\n        if (!mask) continue;\r\n        const masked = applyAlphaMask(productImages[i], mask, width, height);\r\n        ctx.drawImage(masked, 0, 0);\r\n      }\r\n\r\n      if (mineral && mineral.isInStock !== false) {\r\n        const mineralImage = await loadProductImageOrFallback(mineral.image, mineral.name);\r\n        const maskUrl = mineral.name.toLowerCase().includes('gold') ? MASKS.mineral.gold : MASKS.mineral.weiss;\r\n        const mineralMask = await loadMaskOrTransparent(maskUrl);\r\n        const masked = applyAlphaMask(mineralImage, mineralMask, width, height);\r\n        ctx.drawImage(masked, 0, 0);\r\n      }\r\n\r\n      return canvas;\r\n    }\r\n\r\n    function updateZoom(delta) {\r\n      state.zoom = Math.max(.6, Math.min(2.4, Number((state.zoom + delta).toFixed(2))));\r\n      qsa('[data-role=\"result-image\"], [data-role=\"fullscreen-image\"]').forEach(image => {\r\n        image.style.transform = 'scale(' + state.zoom + ')';\r\n      });\r\n    }\r\n\r\n    function resetZoom() {\r\n      state.zoom = 1;\r\n      updateZoom(0);\r\n    }\r\n\r\n    function openFullscreen() {\r\n      if (!state.resultImage) return;\r\n      const overlay = qs('[data-role=\"fullscreen\"]');\r\n      const image = qs('[data-role=\"fullscreen-image\"]');\r\n      if (!overlay || !image) return;\r\n      image.src = state.resultImage;\r\n      image.style.transform = 'scale(' + state.zoom + ')';\r\n      overlay.hidden = false;\r\n      document.documentElement.style.overflow = 'hidden';\r\n    }\r\n\r\n    function closeFullscreen() {\r\n      const overlay = qs('[data-role=\"fullscreen\"]');\r\n      if (overlay) overlay.hidden = true;\r\n      document.documentElement.style.overflow = '';\r\n    }\r\n\r\n    function validateCartItems() {\r\n      const visibleEntries = getVisibleRegularEntries();\r\n      if (visibleEntries.length < 2) return ['Bitte w\u00e4hlen Sie mindestens zwei sichtbare Farben.'];\r\n      const errors = [];\r\n      visibleEntries.forEach(({ product }) => {\r\n        const variation = product.variations.find(v => v.packageSize === product.selectedPackageSize);\r\n        if (!variation || !variation.isInStock) errors.push(product.name + ' ist in der gew\u00e4hlten Gr\u00f6\u00dfe nicht verf\u00fcgbar.');\r\n        if (!Number(product.quantity || 0)) errors.push(product.name + ': Bitte Menge pr\u00fcfen.');\r\n      });\r\n      if (hasVisibleMineral() && state.selectedMineral.isInStock === false) {\r\n        errors.push(state.selectedMineral.name + ' ist aktuell nicht verf\u00fcgbar.');\r\n      }\r\n      return errors;\r\n    }\r\n\r\n    async function postAddToCart(formData) {\r\n      const response = await fetch(new URL(CONFIG.ajaxUrl, window.location.origin).toString(), {\r\n        method: 'POST',\r\n        credentials: 'include',\r\n        body: formData\r\n      });\r\n      const text = await response.text();\r\n      if (!response.ok) throw new Error(text || 'Add-to-cart request failed.');\r\n      const trimmed = text.trim();\r\n      if (trimmed === '0' || \/woocommerce-error|notices.*error|<ul class=\"woocommerce-error\/i.test(trimmed)) {\r\n        throw new Error(trimmed || 'WooCommerce returned an error.');\r\n      }\r\n      try {\r\n        const json = parseJsonText(trimmed);\r\n        if (json && (json.error || json.success === false)) throw new Error(json.message || 'WooCommerce returned an error.');\r\n      } catch (error) {\r\n        if (!(error instanceof SyntaxError)) throw error;\r\n      }\r\n      return text;\r\n    }\r\n\r\n    function appendRegularProductCartFields(formData, product, variation) {\r\n      formData.append('action', CONFIG.cartAction);\r\n      formData.append('product_id', String(product.id));\r\n      formData.append('variation_id', String(variation.id));\r\n      formData.append('quantity', String(product.quantity || 1));\r\n      formData.append('add-to-cart', String(product.id));\r\n      formData.append(variation.cartAttributeKey || product.cartAttributeKey || 'attribute_pa_packmass', variation.packageSize);\r\n      if ((variation.cartAttributeKey || product.cartAttributeKey) !== 'attribute_pa_packmass') {\r\n        formData.append('attribute_pa_packmass', variation.packageSize);\r\n      }\r\n    }\r\n\r\n    async function addToCart() {\r\n      const errors = validateCartItems();\r\n      if (errors.length) {\r\n        setNotice('error', errors.join(' '), false);\r\n        return;\r\n      }\r\n\r\n      state.isAddingToCart = true;\r\n      renderControls();\r\n      let completed = 0;\r\n\r\n      try {\r\n        for (const { product } of getVisibleRegularEntries()) {\r\n          const variation = product.variations.find(v => v.packageSize === product.selectedPackageSize);\r\n          const formData = new FormData();\r\n          appendRegularProductCartFields(formData, product, variation);\r\n          await postAddToCart(formData);\r\n          completed += 1;\r\n        }\r\n\r\n        if (hasVisibleMineral() && state.selectedMineral.isInStock !== false) {\r\n          const mineral = state.selectedMineral;\r\n          const formData = new FormData();\r\n          formData.append('action', CONFIG.cartAction);\r\n          formData.append('product_id', String(mineral.id));\r\n          formData.append('variation_id', String(mineral.variationId));\r\n          formData.append('add-to-cart', String(mineral.id));\r\n          formData.append('quantity', '1');\r\n          formData.append(mineral.cartAttribute, mineral.cartAttributeValue);\r\n          await postAddToCart(formData);\r\n          completed += 1;\r\n        }\r\n\r\n        if (window.jQuery) {\r\n          window.jQuery(document.body).trigger('added_to_cart').trigger('wc_fragment_refresh');\r\n        }\r\n\r\n        setNotice('success', completed + ' Produkt(e) wurden in den Warenkorb gelegt.', true);\r\n        appendCartLink();\r\n      } catch (error) {\r\n        const message = completed > 0\r\n          ? 'Ein Teil der Auswahl wurde m\u00f6glicherweise hinzugef\u00fcgt. Bitte Warenkorb pr\u00fcfen und fehlende Produkte erneut hinzuf\u00fcgen.'\r\n          : 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.';\r\n        setNotice('error', message, true);\r\n        if (window.console && window.console.error) window.console.error('BELKA Mix add-to-cart error:', error);\r\n      } finally {\r\n        state.isAddingToCart = false;\r\n        renderControls();\r\n      }\r\n    }\r\n\r\n    function trapModalFocus(event) {\r\n      const modal = qs('[data-role=\"search-modal\"]');\r\n      if (!modal || modal.hidden || event.key !== 'Tab') return;\r\n      const focusable = Array.from(modal.querySelectorAll('button:not(:disabled), input:not(:disabled), [href], [tabindex]:not([tabindex=\"-1\"])'));\r\n      if (!focusable.length) return;\r\n      const first = focusable[0];\r\n      const last = focusable[focusable.length - 1];\r\n      if (event.shiftKey && document.activeElement === first) {\r\n        event.preventDefault();\r\n        last.focus();\r\n      } else if (!event.shiftKey && document.activeElement === last) {\r\n        event.preventDefault();\r\n        first.focus();\r\n      }\r\n    }\r\n\r\n    function handleClick(event) {\r\n      if (event.target === qs('[data-role=\"search-modal\"]')) {\r\n        closeSearch();\r\n        return;\r\n      }\r\n\r\n      const button = event.target.closest('[data-action]');\r\n      if (!button || !root.contains(button) || button.disabled) return;\r\n      const action = button.dataset.action;\r\n      const slot = button.dataset.slot;\r\n\r\n      switch (action) {\r\n        case 'set-count': setColorCount(button.dataset.count); break;\r\n        case 'open-search': openSearch(slot); break;\r\n        case 'close-search': closeSearch(); break;\r\n        case 'select-product': selectProduct(button.dataset.productId); break;\r\n        case 'remove-product': removeProduct(slot); break;\r\n        case 'toggle-visibility':\r\n          state.hidden.has(Number(slot)) ? state.hidden.delete(Number(slot)) : state.hidden.add(Number(slot));\r\n          renderAll();\r\n          break;\r\n        case 'toggle-mineral-visibility':\r\n          state.mineralHidden = !state.mineralHidden;\r\n          renderAll();\r\n          break;\r\n        case 'remove-mineral':\r\n          state.selectedMineral = null;\r\n          state.mineralHidden = false;\r\n          renderAll();\r\n          break;\r\n        case 'reset': resetSelection(); break;\r\n        case 'random': selectRandomProducts(); break;\r\n        case 'next': nextStep(); break;\r\n        case 'prev': prevStep(); break;\r\n        case 'select-package': selectPackage(slot, button.dataset.package); break;\r\n        case 'qty': updateQuantity(slot, Number(button.dataset.change)); break;\r\n        case 'zoom-in': updateZoom(.2); break;\r\n        case 'zoom-out': updateZoom(-.2); break;\r\n        case 'zoom-reset': resetZoom(); break;\r\n        case 'fullscreen': openFullscreen(); break;\r\n        case 'close-fullscreen': closeFullscreen(); break;\r\n        case 'add-cart': addToCart(); break;\r\n        case 'retry-products': fetchProducts(); break;\r\n        default: break;\r\n      }\r\n    }\r\n\r\n    function handleInput(event) {\r\n      if (event.target.matches('[data-role=\"search-input\"]')) {\r\n        state.query = event.target.value || '';\r\n        renderProductList();\r\n      }\r\n    }\r\n\r\n    function handleChange(event) {\r\n      if (event.target.matches('[data-role=\"include-mineral\"]')) {\r\n        state.includeMineral = Boolean(event.target.checked);\r\n        if (!state.includeMineral) {\r\n          state.selectedMineral = null;\r\n          state.mineralHidden = false;\r\n        }\r\n        renderAll();\r\n      }\r\n    }\r\n\r\n    function handleKeydown(event) {\r\n      trapModalFocus(event);\r\n      if (event.key !== 'Escape') return;\r\n      const fullscreen = qs('[data-role=\"fullscreen\"]');\r\n      const modal = qs('[data-role=\"search-modal\"]');\r\n      if (fullscreen && !fullscreen.hidden) closeFullscreen();\r\n      else if (modal && !modal.hidden) closeSearch();\r\n    }\r\n\r\n    function handleInitialAnchor() {\r\n      if (window.location.hash !== '#create-mix' && window.location.hash !== '#belka-mix-module-anchor') return;\r\n      window.setTimeout(() => {\r\n        const anchor = qs('[data-role=\"anchor\"]') || root;\r\n        const top = anchor.getBoundingClientRect().top + window.pageYOffset - 12;\r\n        window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });\r\n      }, 120);\r\n    }\r\n\r\n    function init() {\r\n      root.addEventListener('click', handleClick);\r\n      root.addEventListener('input', handleInput);\r\n      root.addEventListener('change', handleChange);\r\n      document.addEventListener('keydown', handleKeydown);\r\n      renderAll({ preview: false });\r\n      fetchProducts();\r\n      handleInitialAnchor();\r\n    }\r\n\r\n    if (document.readyState === 'loading') {\r\n      document.addEventListener('DOMContentLoaded', init, { once: true });\r\n    } else {\r\n      init();\r\n    }\r\n  }\r\n}());\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4e27183 elementor-widget elementor-widget-html\" data-id=\"4e27183\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\r\nBELKA MIX \u00b7 Anwendung v4 \u00b7 Mix standardm\u00e4\u00dfig aktiv\r\nStandalone Elementor \/ WoodMart HTML Block\r\nScope: fully isolated to #belka-application-v3\r\n-->\r\n\r\n<section id=\"belka-application-v3\" class=\"bav3\" lang=\"de-DE\" aria-labelledby=\"bav3-title\">\r\n  <div class=\"bav3__shell\">\r\n\r\n    <header class=\"bav3__header\">\r\n      <span class=\"bav3__kicker\">Einfach vorbereitet. Individuell gestaltet.<\/span>\r\n      <h2 id=\"bav3-title\">So wird BELKA Tapete vorbereitet und als Mix aufgetragen.<\/h2>\r\n      <p>\r\n        Die Grundanwendung ist bei jeder BELKA Tapete gleich. F\u00fcr einen Mix werden\r\n        die Farben zun\u00e4chst separat vorbereitet und erst unmittelbar vor dem\r\n        Auftragen kontrolliert zusammengef\u00fchrt.\r\n      <\/p>\r\n    <\/header>\r\n\r\n    <!-- Large video stage -->\r\n    <div class=\"bav3__video-card\" data-bav3-video data-video-standard=\"WRwwbaCF87M\" data-video-mix=\"v1YznjNgEp4\">\r\n      <div class=\"bav3__video-stage\">\r\n        <img\r\n          class=\"bav3__video-thumb\"\r\n          src=\"https:\/\/i.ytimg.com\/vi\/v1YznjNgEp4\/maxresdefault.jpg\"\r\n          alt=\"BELKA Mix Anwendungsvideo\"\r\n          width=\"1280\"\r\n          height=\"720\"\r\n          loading=\"lazy\"\r\n          decoding=\"async\"\r\n          data-bav3-thumb\r\n        >\r\n        <div class=\"bav3__video-shade\" aria-hidden=\"true\"><\/div>\r\n\r\n        <div class=\"bav3__video-copy\">\r\n          <span>Video-Anleitung<\/span>\r\n          <strong>BELKA Mix richtig vorbereiten und auftragen<\/strong>\r\n        <\/div>\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"bav3__play\"\r\n          aria-label=\"BELKA Mix Anwendungsvideo abspielen\"\r\n          data-bav3-play\r\n        >\r\n          <span aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M8 5v14l11-7z\"><\/path>\r\n            <\/svg>\r\n          <\/span>\r\n          Video starten\r\n        <\/button>\r\n\r\n        <iframe\r\n          class=\"bav3__iframe\"\r\n          title=\"BELKA Tapete Anwendungsvideo\"\r\n          loading=\"lazy\"\r\n          allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\r\n          allowfullscreen\r\n          referrerpolicy=\"origin-when-cross-origin\"\r\n          data-bav3-iframe\r\n          hidden\r\n        ><\/iframe>\r\n      <\/div>\r\n\r\n      <a class=\"bav3__youtube-fallback\" href=\"https:\/\/www.youtube.com\/watch?v=v1YznjNgEp4\" target=\"_blank\" rel=\"noopener\" data-bav3-youtube-link>\r\n        Falls das Video nicht startet: direkt auf YouTube ansehen\r\n        <span aria-hidden=\"true\">\u2197<\/span>\r\n      <\/a>\r\n    <\/div>\r\n\r\n    <!-- Clear choice -->\r\n    <div class=\"bav3__choice\" aria-labelledby=\"bav3-choice-title\">\r\n      <div class=\"bav3__choice-intro\">\r\n        <span class=\"bav3__eyebrow\">Welche Anwendung m\u00f6chten Sie sehen?<\/span>\r\n        <h3 id=\"bav3-choice-title\">Standard oder Mix \u2013 der Unterschied liegt im letzten Schritt.<\/h3>\r\n      <\/div>\r\n\r\n      <div class=\"bav3__switch\" role=\"tablist\" aria-label=\"Anwendungsart ausw\u00e4hlen\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"bav3__switch-btn\"\r\n          role=\"tab\"\r\n          id=\"bav3-standard-tab\"\r\n          aria-selected=\"false\"\r\n          aria-controls=\"bav3-standard-panel\"\r\n          tabindex=\"-1\"\r\n          data-bav3-tab=\"standard\"\r\n        >\r\n          <span class=\"bav3__switch-no\">01<\/span>\r\n          <span>\r\n            <strong>Standardanwendung<\/strong>\r\n            <small>Eine Farbe gleichm\u00e4\u00dfig auftragen<\/small>\r\n          <\/span>\r\n        <\/button>\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"bav3__switch-btn is-active\"\r\n          role=\"tab\"\r\n          id=\"bav3-mix-tab\"\r\n          aria-selected=\"true\"\r\n          aria-controls=\"bav3-mix-panel\"\r\n          tabindex=\"0\"\r\n          data-bav3-tab=\"mix\"\r\n        >\r\n          <span class=\"bav3__switch-no\">02<\/span>\r\n          <span>\r\n            <strong>Mix-Anwendung<\/strong>\r\n            <small>Mehrere Farben sichtbar kombinieren<\/small>\r\n          <\/span>\r\n        <\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Standard panel -->\r\n    <section\r\n      class=\"bav3__panel\"\r\n      id=\"bav3-standard-panel\"\r\n      role=\"tabpanel\"\r\n      aria-labelledby=\"bav3-standard-tab\"\r\n      data-bav3-panel=\"standard\"\r\n      hidden\r\n    >\r\n      <div class=\"bav3__panel-top\">\r\n        <div>\r\n          <span class=\"bav3__eyebrow\">Standardanwendung<\/span>\r\n          <h3>Eine Farbe vorbereiten und fugenlos auftragen.<\/h3>\r\n        <\/div>\r\n        <p>\r\n          Geeignet, wenn die Wand eine einheitliche Farbe und eine ruhige,\r\n          gleichm\u00e4\u00dfige Oberfl\u00e4che erhalten soll.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <ol class=\"bav3__steps\">\r\n        <li class=\"bav3__step\">\r\n          <span class=\"bav3__step-index\">1<\/span>\r\n          <div class=\"bav3__step-icon\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M4 20h16M6 16l8-8 4 4-8 8H6z\"><\/path>\r\n            <\/svg>\r\n          <\/div>\r\n          <div>\r\n            <h4>Untergrund vorbereiten<\/h4>\r\n            <p>\r\n              Die Wand muss sauber, trocken, tragf\u00e4hig sowie frei von Staub,\r\n              Fett und losen Bestandteilen sein.\r\n            <\/p>\r\n          <\/div>\r\n        <\/li>\r\n\r\n        <li class=\"bav3__step\">\r\n          <span class=\"bav3__step-index\">2<\/span>\r\n          <div class=\"bav3__step-icon\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M7 3h10l2 5v10a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V8zM5 8h14\"><\/path>\r\n            <\/svg>\r\n          <\/div>\r\n          <div>\r\n            <h4>Mit Wasser ansetzen<\/h4>\r\n            <p>\r\n              Das Material in einen sauberen Beh\u00e4lter geben, die auf der\r\n              Produktanleitung genannte Wassermenge hinzuf\u00fcgen und von Hand kneten.\r\n            <\/p>\r\n          <\/div>\r\n        <\/li>\r\n\r\n        <li class=\"bav3__step\">\r\n          <span class=\"bav3__step-index\">3<\/span>\r\n          <div class=\"bav3__step-icon\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <circle cx=\"12\" cy=\"12\" r=\"8\"><\/circle>\r\n              <path d=\"M12 8v5l3 2\"><\/path>\r\n            <\/svg>\r\n          <\/div>\r\n          <div>\r\n            <h4>Ruhen lassen<\/h4>\r\n            <p>\r\n              Die Masse abgedeckt ruhen lassen und vor der Verarbeitung noch\r\n              einmal vollst\u00e4ndig durchkneten.\r\n            <\/p>\r\n          <\/div>\r\n        <\/li>\r\n\r\n        <li class=\"bav3__step\">\r\n          <span class=\"bav3__step-index\">4<\/span>\r\n          <div class=\"bav3__step-icon\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M3 17h10l8-8-4-4-8 8v4H3zM14 8l4 4\"><\/path>\r\n            <\/svg>\r\n          <\/div>\r\n          <div>\r\n            <h4>Mit der Gl\u00e4ttkelle auftragen<\/h4>\r\n            <p>\r\n              BELKA Tapete gleichm\u00e4\u00dfig und fugenlos verteilen. Die transparente\r\n              Gl\u00e4ttkelle dabei leicht angewinkelt f\u00fchren.\r\n            <\/p>\r\n          <\/div>\r\n        <\/li>\r\n      <\/ol>\r\n\r\n      <div class=\"bav3__keypoint\">\r\n        <span aria-hidden=\"true\">\u2713<\/span>\r\n        <div>\r\n          <strong>F\u00fcr ein gleichm\u00e4\u00dfiges Gesamtbild<\/strong>\r\n          <p>\r\n            Gr\u00f6\u00dfere zusammenh\u00e4ngende Fl\u00e4chen m\u00f6glichst ohne lange Unterbrechung\r\n            fertigstellen.\r\n          <\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- Mix panel -->\r\n    <section\r\n      class=\"bav3__panel is-active\"\r\n      id=\"bav3-mix-panel\"\r\n      role=\"tabpanel\"\r\n      aria-labelledby=\"bav3-mix-tab\"\r\n      data-bav3-panel=\"mix\"\r\n    >\r\n      <div class=\"bav3__panel-top\">\r\n        <div>\r\n          <span class=\"bav3__eyebrow\">Mix-Anwendung<\/span>\r\n          <h3>Farben separat vorbereiten und erst zuletzt kombinieren.<\/h3>\r\n        <\/div>\r\n        <p>\r\n          Die sichtbaren Farb\u00fcberg\u00e4nge entstehen nicht durch vollst\u00e4ndiges\r\n          Vermischen, sondern durch kontrolliertes Zusammenf\u00fchren.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <ol class=\"bav3__steps\">\r\n        <li class=\"bav3__step\">\r\n          <span class=\"bav3__step-index\">1<\/span>\r\n          <div class=\"bav3__step-icon bav3__step-icon--mix\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <circle cx=\"7\" cy=\"8\" r=\"3\"><\/circle>\r\n              <circle cx=\"17\" cy=\"8\" r=\"3\"><\/circle>\r\n              <circle cx=\"12\" cy=\"17\" r=\"3\"><\/circle>\r\n            <\/svg>\r\n          <\/div>\r\n          <div>\r\n            <h4>Jede Farbe einzeln vorbereiten<\/h4>\r\n            <p>\r\n              Jede ausgew\u00e4hlte BELKA Farbe wird in einem separaten Beh\u00e4lter\r\n              nach der jeweiligen Produktanleitung angesetzt.\r\n            <\/p>\r\n          <\/div>\r\n        <\/li>\r\n\r\n        <li class=\"bav3__step\">\r\n          <span class=\"bav3__step-index\">2<\/span>\r\n          <div class=\"bav3__step-icon bav3__step-icon--mix\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M4 18c4-6 12-6 16 0M5 10c3-4 11-4 14 0M8 4h8\"><\/path>\r\n            <\/svg>\r\n          <\/div>\r\n          <div>\r\n            <h4>Farben separat ruhen lassen<\/h4>\r\n            <p>\r\n              Nach der Ruhezeit jede Farbe noch einmal f\u00fcr sich durchkneten.\r\n              Bis zu diesem Punkt werden die Farben nicht miteinander vermischt.\r\n            <\/p>\r\n          <\/div>\r\n        <\/li>\r\n\r\n        <li class=\"bav3__step\">\r\n          <span class=\"bav3__step-index\">3<\/span>\r\n          <div class=\"bav3__step-icon bav3__step-icon--mix\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M5 7h6v6H5zM13 11h6v6h-6zM9 9l6 6\"><\/path>\r\n            <\/svg>\r\n          <\/div>\r\n          <div>\r\n            <h4>Ben\u00f6tigte Mengen zusammenf\u00fchren<\/h4>\r\n            <p>\r\n              Die vorbereiteten Farben in den gew\u00fcnschten Anteilen nebeneinander\r\n              in einen gro\u00dfen Beh\u00e4lter geben.\r\n            <\/p>\r\n          <\/div>\r\n        <\/li>\r\n\r\n        <li class=\"bav3__step\">\r\n          <span class=\"bav3__step-index\">4<\/span>\r\n          <div class=\"bav3__step-icon bav3__step-icon--mix\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M5 5c5 0 5 6 9 6 2 0 3-1 5-3M5 19c5 0 5-6 9-6 2 0 3 1 5 3\"><\/path>\r\n            <\/svg>\r\n          <\/div>\r\n          <div>\r\n            <h4>Nur leicht falten \u2013 nicht vollst\u00e4ndig kneten<\/h4>\r\n            <p>\r\n              Wenige vorsichtige Bewegungen reichen. So bleiben die einzelnen\r\n              Farbt\u00f6ne und ihre \u00dcberg\u00e4nge sichtbar.\r\n            <\/p>\r\n          <\/div>\r\n        <\/li>\r\n      <\/ol>\r\n\r\n      <div class=\"bav3__mix-result\">\r\n        <div class=\"bav3__mix-result-head\">\r\n          <span class=\"bav3__eyebrow\">Das Ergebnis gezielt steuern<\/span>\r\n          <h4>Wie stark sollen die Farben sichtbar bleiben?<\/h4>\r\n        <\/div>\r\n\r\n        <div class=\"bav3__mix-levels\">\r\n          <div class=\"bav3__mix-level\">\r\n            <img\r\n              class=\"bav3__mix-visual\"\r\n              src=\"https:\/\/gobelka.com\/de\/wp-content\/uploads\/2026\/07\/Belka-Tapete-Leicht-vermischt.jpg\"\r\n              alt=\"BELKA Tapete leicht vermischt mit deutlich sichtbaren Farbverl\u00e4ufen\"\r\n              width=\"2172\"\r\n              height=\"724\"\r\n              loading=\"lazy\"\r\n              decoding=\"async\"\r\n            >\r\n            <strong>Leicht vermischt<\/strong>\r\n            <p>Die Farben nur sehr leicht zusammenf\u00fchren und direkt auftragen.<\/p>\r\n          <\/div>\r\n\r\n          <div class=\"bav3__mix-level\">\r\n            <img\r\n              class=\"bav3__mix-visual\"\r\n              src=\"https:\/\/gobelka.com\/de\/wp-content\/uploads\/2026\/07\/Belka-tapete-Ausgewogen-vermischt.jpg\"\r\n              alt=\"BELKA Tapete ausgewogen vermischt mit harmonischen Farb\u00fcberg\u00e4ngen\"\r\n              width=\"2172\"\r\n              height=\"724\"\r\n              loading=\"lazy\"\r\n              decoding=\"async\"\r\n            >\r\n            <strong>Ausgewogen vermischt<\/strong>\r\n            <p>Die Farben einige Male vorsichtig falten, ohne sie homogen zu kneten.<\/p>\r\n          <\/div>\r\n\r\n          <div class=\"bav3__mix-level\">\r\n            <img\r\n              class=\"bav3__mix-visual\"\r\n              src=\"https:\/\/gobelka.com\/de\/wp-content\/uploads\/2026\/07\/Belka-Tapete-Stark-vermischt.jpg\"\r\n              alt=\"BELKA Tapete stark vermischt mit weichen und ruhigen Farb\u00fcberg\u00e4ngen\"\r\n              width=\"2172\"\r\n              height=\"724\"\r\n              loading=\"lazy\"\r\n              decoding=\"async\"\r\n            >\r\n            <strong>Stark vermischt<\/strong>\r\n            <p>Die Farben st\u00e4rker zusammenf\u00fchren, bis die \u00dcberg\u00e4nge deutlich weicher werden.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"bav3__keypoint bav3__keypoint--warning\">\r\n        <span aria-hidden=\"true\">!<\/span>\r\n        <div>\r\n          <strong>Nicht vollst\u00e4ndig vermischen<\/strong>\r\n          <p>\r\n            Wird die Masse vollst\u00e4ndig homogen geknetet, gehen die sichtbaren\r\n            Farb\u00fcberg\u00e4nge und damit der typische Mix-Effekt verloren.\r\n          <\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- Drying information -->\r\n    <div class=\"bav3__drying\">\r\n      <div class=\"bav3__drying-time\">\r\n        <span class=\"bav3__drying-number\">24\u201348<\/span>\r\n        <span class=\"bav3__drying-unit\">Stunden<\/span>\r\n      <\/div>\r\n\r\n      <div class=\"bav3__drying-copy\">\r\n        <span class=\"bav3__eyebrow\">Trocknung<\/span>\r\n        <h3>Nach dem Auftrag gut l\u00fcften und die Oberfl\u00e4che in Ruhe trocknen lassen.<\/h3>\r\n        <p>\r\n          Raumtemperatur, Luftfeuchtigkeit, Untergrund und Auftragsst\u00e4rke k\u00f6nnen\r\n          die Trocknungszeit beeinflussen. Die noch feuchte Fl\u00e4che w\u00e4hrenddessen\r\n          m\u00f6glichst nicht ber\u00fchren.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <a class=\"bav3__guide-link\" href=\"https:\/\/gobelka.com\/de\/anwendung\/\">\r\n        Ausf\u00fchrliche Anleitung\r\n        <span aria-hidden=\"true\">\u2192<\/span>\r\n      <\/a>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  #belka-application-v3,\r\n  #belka-application-v3 * {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  #belka-application-v3 {\r\n    --bav3-red: #bd0f1b;\r\n    --bav3-red-dark: #8d0b14;\r\n    --bav3-ink: #161311;\r\n    --bav3-text: #5e554f;\r\n    --bav3-muted: #81766f;\r\n    --bav3-cream: #f6f1e9;\r\n    --bav3-line: #ded4c8;\r\n    --bav3-white: #fff;\r\n    position: relative;\r\n    isolation: isolate;\r\n    overflow: hidden;\r\n    background: var(--bav3-cream);\r\n    color: var(--bav3-ink);\r\n    padding: clamp(62px, 8vw, 118px) 20px;\r\n  }\r\n\r\n  #belka-application-v3 h2,\r\n  #belka-application-v3 h3,\r\n  #belka-application-v3 h4,\r\n  #belka-application-v3 p {\r\n    margin: 0;\r\n  }\r\n\r\n  #belka-application-v3 button,\r\n  #belka-application-v3 a {\r\n    font: inherit;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__shell {\r\n    width: min(1240px, 100%);\r\n    margin: 0 auto;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__header {\r\n    max-width: 900px;\r\n    margin: 0 auto clamp(30px, 4vw, 52px);\r\n    text-align: center;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__kicker,\r\n  #belka-application-v3 .bav3__eyebrow {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 9px;\r\n    color: var(--bav3-red);\r\n    font-size: 0.74rem;\r\n    font-weight: 850;\r\n    letter-spacing: 0.12em;\r\n    line-height: 1.3;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__kicker::before,\r\n  #belka-application-v3 .bav3__eyebrow::before {\r\n    content: \"\";\r\n    width: 24px;\r\n    height: 3px;\r\n    border-radius: 999px;\r\n    background: currentColor;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__header h2 {\r\n    margin-top: 14px;\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(2.25rem, 5vw, 4.8rem);\r\n    font-weight: 800;\r\n    letter-spacing: -0.05em;\r\n    line-height: 0.98;\r\n    text-wrap: balance;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__header p {\r\n    max-width: 790px;\r\n    margin: 20px auto 0;\r\n    color: var(--bav3-text);\r\n    font-size: clamp(1rem, 1.35vw, 1.17rem);\r\n    line-height: 1.7;\r\n  }\r\n\r\n  \/* Large video *\/\r\n  #belka-application-v3 .bav3__video-card {\r\n    overflow: hidden;\r\n    border: 1px solid rgba(22, 19, 17, 0.12);\r\n    border-radius: 24px;\r\n    background: #111;\r\n    box-shadow: 0 28px 75px rgba(36, 24, 18, 0.18);\r\n  }\r\n\r\n  #belka-application-v3 .bav3__video-stage {\r\n    position: relative;\r\n    aspect-ratio: 16 \/ 9;\r\n    min-height: 360px;\r\n    overflow: hidden;\r\n    background: #111;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__video-thumb,\r\n  #belka-application-v3 .bav3__iframe {\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n    border: 0;\r\n    object-fit: cover;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__iframe {\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: 6;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__iframe[hidden] {\r\n    display: none !important;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__video-shade {\r\n    position: absolute;\r\n    inset: 0;\r\n    background:\r\n      linear-gradient(180deg, rgba(10, 8, 7, 0.12) 25%, rgba(10, 8, 7, 0.82) 100%);\r\n  }\r\n\r\n  #belka-application-v3 .bav3__video-copy {\r\n    position: absolute;\r\n    z-index: 2;\r\n    bottom: clamp(22px, 4vw, 48px);\r\n    left: clamp(22px, 4vw, 48px);\r\n    max-width: 500px;\r\n    color: #fff;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__video-copy span {\r\n    display: block;\r\n    margin-bottom: 7px;\r\n    color: rgba(255,255,255,0.75);\r\n    font-size: 0.72rem;\r\n    font-weight: 800;\r\n    letter-spacing: 0.1em;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__video-copy strong {\r\n    display: block;\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(1.55rem, 3vw, 3rem);\r\n    line-height: 1.08;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__play {\r\n    position: absolute;\r\n    z-index: 3;\r\n    top: 50%;\r\n    left: 50%;\r\n    display: inline-flex;\r\n    min-height: 60px;\r\n    align-items: center;\r\n    gap: 12px;\r\n    border: 0;\r\n    border-radius: 999px;\r\n    background: var(--bav3-red);\r\n    color: #fff;\r\n    padding: 10px 20px 10px 10px;\r\n    font-size: 0.92rem;\r\n    font-weight: 850;\r\n    cursor: pointer;\r\n    box-shadow: 0 17px 40px rgba(189, 15, 27, 0.38);\r\n    transform: translate(-50%, -50%);\r\n    transition: transform .18s ease, background-color .18s ease;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__play:hover {\r\n    background: var(--bav3-red-dark);\r\n    transform: translate(-50%, -50%) scale(1.04);\r\n  }\r\n\r\n  #belka-application-v3 .bav3__play > span {\r\n    display: grid;\r\n    width: 42px;\r\n    height: 42px;\r\n    place-items: center;\r\n    border-radius: 999px;\r\n    background: rgba(255,255,255,0.16);\r\n  }\r\n\r\n  #belka-application-v3 .bav3__play svg {\r\n    width: 22px;\r\n    height: 22px;\r\n    fill: currentColor;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__youtube-fallback {\r\n    display: flex;\r\n    min-height: 48px;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 8px;\r\n    border-top: 1px solid rgba(255,255,255,.12);\r\n    background: #171311;\r\n    color: rgba(255,255,255,.82);\r\n    padding: 12px 18px;\r\n    font-size: .82rem;\r\n    font-weight: 750;\r\n    line-height: 1.35;\r\n    text-align: center;\r\n    text-decoration: none;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__youtube-fallback:hover {\r\n    background: #211b18;\r\n    color: #fff;\r\n  }\r\n\r\n  \/* Choice *\/\r\n  #belka-application-v3 .bav3__choice {\r\n    display: grid;\r\n    grid-template-columns: minmax(0, .8fr) minmax(520px, 1.2fr);\r\n    gap: 38px;\r\n    align-items: end;\r\n    padding: clamp(48px, 7vw, 84px) 0 24px;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__choice-intro h3 {\r\n    margin-top: 9px;\r\n    max-width: 570px;\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(1.75rem, 3vw, 3rem);\r\n    letter-spacing: -0.035em;\r\n    line-height: 1.06;\r\n    text-wrap: balance;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__switch {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    gap: 10px;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__switch-btn {\r\n    display: grid;\r\n    grid-template-columns: 42px minmax(0, 1fr);\r\n    gap: 12px;\r\n    min-width: 0;\r\n    min-height: 94px;\r\n    align-items: center;\r\n    border: 1px solid var(--bav3-line);\r\n    border-radius: 16px;\r\n    background: rgba(255,255,255,.74);\r\n    color: var(--bav3-ink);\r\n    padding: 16px;\r\n    text-align: left;\r\n    cursor: pointer;\r\n    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__switch-btn:hover {\r\n    transform: translateY(-2px);\r\n    border-color: rgba(189,15,27,.28);\r\n    background: #fff;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__switch-btn.is-active {\r\n    border-color: var(--bav3-ink);\r\n    background: var(--bav3-ink);\r\n    color: #fff;\r\n    box-shadow: 0 14px 34px rgba(22,19,17,.16);\r\n  }\r\n\r\n  #belka-application-v3 .bav3__switch-no {\r\n    display: grid;\r\n    width: 40px;\r\n    height: 40px;\r\n    place-items: center;\r\n    border-radius: 12px;\r\n    background: var(--bav3-cream);\r\n    color: var(--bav3-red);\r\n    font-size: .75rem;\r\n    font-weight: 900;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__switch-btn.is-active .bav3__switch-no {\r\n    background: var(--bav3-red);\r\n    color: #fff;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__switch-btn strong,\r\n  #belka-application-v3 .bav3__switch-btn small {\r\n    display: block;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__switch-btn strong {\r\n    font-size: .98rem;\r\n    font-weight: 850;\r\n    line-height: 1.25;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__switch-btn small {\r\n    margin-top: 5px;\r\n    color: var(--bav3-muted);\r\n    font-size: .79rem;\r\n    line-height: 1.35;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__switch-btn.is-active small {\r\n    color: rgba(255,255,255,.64);\r\n  }\r\n\r\n  \/* Panels *\/\r\n  #belka-application-v3 .bav3__panel {\r\n    border: 1px solid var(--bav3-line);\r\n    border-radius: 24px;\r\n    background: #fff;\r\n    padding: clamp(24px, 4vw, 52px);\r\n    box-shadow: 0 20px 55px rgba(35, 24, 18, .08);\r\n  }\r\n\r\n  #belka-application-v3 .bav3__panel[hidden] {\r\n    display: none !important;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__panel.is-active {\r\n    animation: bav3-panel-in .28s ease both;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__panel-top {\r\n    display: grid;\r\n    grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr);\r\n    gap: 32px;\r\n    align-items: end;\r\n    padding-bottom: clamp(24px, 3vw, 36px);\r\n    border-bottom: 1px solid var(--bav3-line);\r\n  }\r\n\r\n  #belka-application-v3 .bav3__panel-top h3 {\r\n    margin-top: 10px;\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(1.85rem, 3.2vw, 3.35rem);\r\n    letter-spacing: -0.04em;\r\n    line-height: 1.02;\r\n    text-wrap: balance;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__panel-top > p {\r\n    color: var(--bav3-text);\r\n    font-size: .98rem;\r\n    line-height: 1.7;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__steps {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, minmax(0, 1fr));\r\n    gap: 0;\r\n    margin: 0;\r\n    padding: 12px 0 0;\r\n    list-style: none;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__step {\r\n    position: relative;\r\n    display: grid;\r\n    grid-template-columns: 52px minmax(0, 1fr);\r\n    gap: 15px;\r\n    min-height: 190px;\r\n    padding: 30px 30px 30px 0;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__step:nth-child(odd) {\r\n    border-right: 1px solid var(--bav3-line);\r\n  }\r\n\r\n  #belka-application-v3 .bav3__step:nth-child(even) {\r\n    padding-left: 30px;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__step:nth-child(-n+2) {\r\n    border-bottom: 1px solid var(--bav3-line);\r\n  }\r\n\r\n  #belka-application-v3 .bav3__step-index {\r\n    position: absolute;\r\n    top: 18px;\r\n    right: 22px;\r\n    color: rgba(22,19,17,.08);\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: 3.3rem;\r\n    font-weight: 800;\r\n    line-height: 1;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__step-icon {\r\n    display: grid;\r\n    width: 48px;\r\n    height: 48px;\r\n    place-items: center;\r\n    border-radius: 14px;\r\n    background: var(--bav3-ink);\r\n    color: #fff;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__step-icon--mix {\r\n    background: var(--bav3-red);\r\n  }\r\n\r\n  #belka-application-v3 .bav3__step-icon svg {\r\n    width: 24px;\r\n    height: 24px;\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 1.8;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__step h4 {\r\n    padding-right: 38px;\r\n    font-size: 1.02rem;\r\n    font-weight: 850;\r\n    line-height: 1.35;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__step p {\r\n    margin-top: 8px;\r\n    color: var(--bav3-text);\r\n    font-size: .92rem;\r\n    line-height: 1.62;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__keypoint {\r\n    display: grid;\r\n    grid-template-columns: 46px minmax(0, 1fr);\r\n    gap: 14px;\r\n    align-items: start;\r\n    margin-top: 10px;\r\n    border-radius: 16px;\r\n    background: var(--bav3-cream);\r\n    padding: 19px;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__keypoint > span {\r\n    display: grid;\r\n    width: 42px;\r\n    height: 42px;\r\n    place-items: center;\r\n    border-radius: 999px;\r\n    background: var(--bav3-ink);\r\n    color: #fff;\r\n    font-weight: 900;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__keypoint--warning {\r\n    background: rgba(189,15,27,.055);\r\n  }\r\n\r\n  #belka-application-v3 .bav3__keypoint--warning > span {\r\n    background: var(--bav3-red);\r\n  }\r\n\r\n  #belka-application-v3 .bav3__keypoint strong {\r\n    display: block;\r\n    font-size: .95rem;\r\n    font-weight: 850;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__keypoint p {\r\n    margin-top: 5px;\r\n    color: var(--bav3-text);\r\n    font-size: .88rem;\r\n    line-height: 1.55;\r\n  }\r\n\r\n  \/* Mix result *\/\r\n  #belka-application-v3 .bav3__mix-result {\r\n    margin-top: 24px;\r\n    border-top: 1px solid var(--bav3-line);\r\n    padding-top: 28px;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__mix-result-head h4 {\r\n    margin-top: 8px;\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(1.45rem, 2.4vw, 2.25rem);\r\n    letter-spacing: -0.03em;\r\n    line-height: 1.1;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__mix-levels {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, minmax(0, 1fr));\r\n    gap: 12px;\r\n    margin-top: 20px;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__mix-level {\r\n    border: 1px solid var(--bav3-line);\r\n    border-radius: 15px;\r\n    padding: 14px;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__mix-visual {\r\n    display: block;\r\n    width: 100%;\r\n    height: 112px;\r\n    margin-bottom: 14px;\r\n    border-radius: 11px;\r\n    background: #e6ded3;\r\n    object-fit: cover;\r\n    object-position: center;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__mix-level strong {\r\n    display: block;\r\n    font-size: .91rem;\r\n    font-weight: 850;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__mix-level p {\r\n    margin-top: 5px;\r\n    color: var(--bav3-text);\r\n    font-size: .81rem;\r\n    line-height: 1.5;\r\n  }\r\n\r\n  \/* Drying *\/\r\n  #belka-application-v3 .bav3__drying {\r\n    display: grid;\r\n    grid-template-columns: 180px minmax(0, 1fr) auto;\r\n    gap: 28px;\r\n    align-items: center;\r\n    margin-top: 20px;\r\n    border-radius: 22px;\r\n    background: var(--bav3-ink);\r\n    color: #fff;\r\n    padding: clamp(24px, 4vw, 42px);\r\n  }\r\n\r\n  #belka-application-v3 .bav3__drying-time {\r\n    display: grid;\r\n    gap: 3px;\r\n    padding-right: 28px;\r\n    border-right: 1px solid rgba(255,255,255,.18);\r\n  }\r\n\r\n  #belka-application-v3 .bav3__drying-number {\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(2.7rem, 5vw, 4.6rem);\r\n    font-weight: 800;\r\n    letter-spacing: -.045em;\r\n    line-height: .95;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__drying-unit {\r\n    color: rgba(255,255,255,.65);\r\n    font-size: .79rem;\r\n    font-weight: 800;\r\n    letter-spacing: .08em;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__drying .bav3__eyebrow {\r\n    color: #ff7c83;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__drying-copy h3 {\r\n    margin-top: 8px;\r\n    max-width: 690px;\r\n    font-family: Georgia, \"Times New Roman\", serif;\r\n    font-size: clamp(1.45rem, 2.4vw, 2.25rem);\r\n    letter-spacing: -.03em;\r\n    line-height: 1.1;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__drying-copy p {\r\n    margin-top: 9px;\r\n    max-width: 720px;\r\n    color: rgba(255,255,255,.66);\r\n    font-size: .87rem;\r\n    line-height: 1.6;\r\n  }\r\n\r\n  \/* Protect dark-section colors from WoodMart \/ Elementor heading rules *\/\r\n  #belka-application-v3 .bav3__drying,\r\n  #belka-application-v3 .bav3__drying h2,\r\n  #belka-application-v3 .bav3__drying h3,\r\n  #belka-application-v3 .bav3__drying h4,\r\n  #belka-application-v3 .bav3__drying strong,\r\n  #belka-application-v3 .bav3__drying span {\r\n    color: #ffffff;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__drying .bav3__eyebrow {\r\n    color: #ff8b91;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__drying .bav3__drying-unit,\r\n  #belka-application-v3 .bav3__drying .bav3__drying-copy p {\r\n    color: rgba(255,255,255,.72);\r\n  }\r\n\r\n  #belka-application-v3 .bav3__drying .bav3__guide-link,\r\n  #belka-application-v3 .bav3__drying .bav3__guide-link span {\r\n    color: #ffffff;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__guide-link {\r\n    display: inline-flex;\r\n    min-height: 50px;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 12px;\r\n    border-radius: 9px;\r\n    background: var(--bav3-red);\r\n    color: #fff;\r\n    padding: 13px 18px;\r\n    font-size: .87rem;\r\n    font-weight: 850;\r\n    text-decoration: none;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  #belka-application-v3 .bav3__guide-link:hover {\r\n    background: var(--bav3-red-dark);\r\n    color: #fff;\r\n  }\r\n\r\n  #belka-application-v3 :focus-visible {\r\n    outline: 3px solid #f0b337;\r\n    outline-offset: 4px;\r\n  }\r\n\r\n  @keyframes bav3-panel-in {\r\n    from { opacity: 0; transform: translateY(8px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n\r\n  @media (max-width: 980px) {\r\n    #belka-application-v3 .bav3__choice {\r\n      grid-template-columns: 1fr;\r\n      gap: 22px;\r\n    }\r\n\r\n    #belka-application-v3 .bav3__panel-top {\r\n      grid-template-columns: 1fr;\r\n      gap: 16px;\r\n    }\r\n\r\n    #belka-application-v3 .bav3__drying {\r\n      grid-template-columns: 150px minmax(0, 1fr);\r\n    }\r\n\r\n    #belka-application-v3 .bav3__guide-link {\r\n      grid-column: 1 \/ -1;\r\n      width: fit-content;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 720px) {\r\n    #belka-application-v3 {\r\n      padding: 50px 14px 68px;\r\n    }\r\n\r\n    #belka-application-v3 .bav3__header {\r\n      text-align: left;\r\n    }\r\n\r\n    #belka-application-v3 .bav3__header h2 {\r\n      font-size: clamp(2.05rem, 10vw, 3.05rem);\r\n    }\r\n\r\n    #belka-application-v3 .bav3__video-card {\r\n      border-radius: 16px;\r\n    }\r\n\r\n    #belka-application-v3 .bav3__video-stage {\r\n      min-height: 0;\r\n      aspect-ratio: 16 \/ 10;\r\n    }\r\n\r\n    #belka-application-v3 .bav3__video-copy {\r\n      right: 18px;\r\n      bottom: 18px;\r\n      left: 18px;\r\n    }\r\n\r\n    #belka-application-v3 .bav3__video-copy strong {\r\n      max-width: 75%;\r\n      font-size: 1.45rem;\r\n    }\r\n\r\n    #belka-application-v3 .bav3__play {\r\n      top: 44%;\r\n      min-height: 52px;\r\n      padding-right: 15px;\r\n      font-size: .8rem;\r\n    }\r\n\r\n    #belka-application-v3 .bav3__play > span {\r\n      width: 36px;\r\n      height: 36px;\r\n    }\r\n\r\n    #belka-application-v3 .bav3__switch {\r\n      grid-template-columns: 1fr;\r\n    }\r\n\r\n    #belka-application-v3 .bav3__panel {\r\n      border-radius: 17px;\r\n      padding: 21px 17px;\r\n    }\r\n\r\n    #belka-application-v3 .bav3__steps {\r\n      grid-template-columns: 1fr;\r\n      padding-top: 8px;\r\n    }\r\n\r\n    #belka-application-v3 .bav3__step,\r\n    #belka-application-v3 .bav3__step:nth-child(even) {\r\n      grid-template-columns: 46px minmax(0,1fr);\r\n      min-height: 0;\r\n      padding: 20px 0;\r\n      border-right: 0;\r\n      border-bottom: 1px solid var(--bav3-line);\r\n    }\r\n\r\n    #belka-application-v3 .bav3__step:last-child {\r\n      border-bottom: 0;\r\n    }\r\n\r\n    #belka-application-v3 .bav3__step-icon {\r\n      width: 42px;\r\n      height: 42px;\r\n      border-radius: 12px;\r\n    }\r\n\r\n    #belka-application-v3 .bav3__step-index {\r\n      top: 15px;\r\n      right: 2px;\r\n      font-size: 2.6rem;\r\n    }\r\n\r\n    #belka-application-v3 .bav3__mix-levels {\r\n      display: flex;\r\n      gap: 10px;\r\n      margin-right: -17px;\r\n      overflow-x: auto;\r\n      padding-right: 17px;\r\n      scroll-snap-type: x mandatory;\r\n      scrollbar-width: none;\r\n    }\r\n\r\n    #belka-application-v3 .bav3__mix-levels::-webkit-scrollbar {\r\n      display: none;\r\n    }\r\n\r\n    #belka-application-v3 .bav3__mix-level {\r\n      flex: 0 0 min(79vw, 280px);\r\n      scroll-snap-align: start;\r\n    }\r\n\r\n    #belka-application-v3 .bav3__mix-visual {\r\n      height: 104px;\r\n    }\r\n\r\n    #belka-application-v3 .bav3__drying {\r\n      grid-template-columns: 1fr;\r\n      gap: 20px;\r\n      border-radius: 17px;\r\n      padding: 24px 20px;\r\n    }\r\n\r\n    #belka-application-v3 .bav3__drying-time {\r\n      width: fit-content;\r\n      padding: 0 0 17px;\r\n      border-right: 0;\r\n      border-bottom: 1px solid rgba(255,255,255,.18);\r\n    }\r\n\r\n    #belka-application-v3 .bav3__guide-link {\r\n      width: 100%;\r\n    }\r\n  }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    #belka-application-v3 *,\r\n    #belka-application-v3 *::before,\r\n    #belka-application-v3 *::after {\r\n      scroll-behavior: auto !important;\r\n      animation-duration: .01ms !important;\r\n      animation-iteration-count: 1 !important;\r\n      transition-duration: .01ms !important;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n(() => {\r\n  \"use strict\";\r\n\r\n  const root = document.getElementById(\"belka-application-v3\");\r\n  if (!root || root.dataset.bav3Ready === \"true\") return;\r\n  root.dataset.bav3Ready = \"true\";\r\n\r\n  const tabs = Array.from(root.querySelectorAll(\"[data-bav3-tab]\"));\r\n  const panels = Array.from(root.querySelectorAll(\"[data-bav3-panel]\"));\r\n  const video = root.querySelector(\"[data-bav3-video]\");\r\n  const thumb = root.querySelector(\"[data-bav3-thumb]\");\r\n  const play = root.querySelector(\"[data-bav3-play]\");\r\n  const iframe = root.querySelector(\"[data-bav3-iframe]\");\r\n  const videoCopy = root.querySelector(\".bav3__video-copy strong\");\r\n  const youtubeLink = root.querySelector(\"[data-bav3-youtube-link]\");\r\n\r\n  let activeMode = \"mix\";\r\n\r\n  const videoIdForMode = (mode) => {\r\n    if (!video) return \"\";\r\n    return mode === \"mix\"\r\n      ? (video.dataset.videoMix || \"\")\r\n      : (video.dataset.videoStandard || \"\");\r\n  };\r\n\r\n  const videoTitleForMode = (mode) => {\r\n    return mode === \"mix\"\r\n      ? \"BELKA Mix richtig vorbereiten und auftragen\"\r\n      : \"BELKA Tapete Schritt f\u00fcr Schritt anwenden\";\r\n  };\r\n\r\n  const resetVideoForMode = (mode) => {\r\n    const videoId = videoIdForMode(mode);\r\n\r\n    if (iframe) {\r\n      iframe.src = \"\";\r\n      iframe.hidden = true;\r\n    }\r\n\r\n    if (thumb && videoId) {\r\n      thumb.hidden = false;\r\n      thumb.dataset.fallbackUsed = \"\";\r\n      thumb.src = \"https:\/\/i.ytimg.com\/vi\/\" + encodeURIComponent(videoId) + \"\/maxresdefault.jpg\";\r\n      thumb.alt = mode === \"mix\"\r\n        ? \"BELKA Mix Anwendungsvideo\"\r\n        : \"BELKA Tapete Anwendungsvideo\";\r\n    }\r\n\r\n    if (play) {\r\n      play.hidden = false;\r\n    }\r\n\r\n    if (videoCopy) {\r\n      videoCopy.textContent = videoTitleForMode(mode);\r\n    }\r\n\r\n    if (youtubeLink && videoId) {\r\n      youtubeLink.href = \"https:\/\/www.youtube.com\/watch?v=\" + encodeURIComponent(videoId);\r\n    }\r\n  };\r\n\r\n  const activateTab = (mode, moveFocus = false) => {\r\n    const selectedTab = tabs.find((tab) => tab.dataset.bav3Tab === mode);\r\n    const selectedPanel = panels.find((panel) => panel.dataset.bav3Panel === mode);\r\n\r\n    if (!selectedTab || !selectedPanel) return;\r\n\r\n    tabs.forEach((tab) => {\r\n      const active = tab === selectedTab;\r\n      tab.classList.toggle(\"is-active\", active);\r\n      tab.setAttribute(\"aria-selected\", active ? \"true\" : \"false\");\r\n      tab.tabIndex = active ? 0 : -1;\r\n    });\r\n\r\n    panels.forEach((panel) => {\r\n      const active = panel === selectedPanel;\r\n      panel.hidden = !active;\r\n      panel.classList.toggle(\"is-active\", active);\r\n    });\r\n\r\n    activeMode = mode;\r\n    resetVideoForMode(mode);\r\n\r\n    if (moveFocus) selectedTab.focus();\r\n\r\n    window.dataLayer = window.dataLayer || [];\r\n    window.dataLayer.push({\r\n      event: \"belka_application_mode\",\r\n      application_mode: mode\r\n    });\r\n  };\r\n\r\n  tabs.forEach((tab, index) => {\r\n    tab.addEventListener(\"click\", () => {\r\n      activateTab(tab.dataset.bav3Tab || \"standard\");\r\n    });\r\n\r\n    tab.addEventListener(\"keydown\", (event) => {\r\n      if (![\"ArrowLeft\", \"ArrowRight\", \"ArrowUp\", \"ArrowDown\", \"Home\", \"End\"].includes(event.key)) return;\r\n\r\n      event.preventDefault();\r\n      let nextIndex = index;\r\n\r\n      if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\r\n        nextIndex = (index + 1) % tabs.length;\r\n      } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\r\n        nextIndex = (index - 1 + tabs.length) % tabs.length;\r\n      } else if (event.key === \"Home\") {\r\n        nextIndex = 0;\r\n      } else if (event.key === \"End\") {\r\n        nextIndex = tabs.length - 1;\r\n      }\r\n\r\n      activateTab(tabs[nextIndex].dataset.bav3Tab || \"standard\", true);\r\n    });\r\n  });\r\n\r\n  if (thumb) {\r\n    thumb.addEventListener(\"error\", () => {\r\n      const videoId = videoIdForMode(activeMode);\r\n      if (videoId && !thumb.dataset.fallbackUsed) {\r\n        thumb.dataset.fallbackUsed = \"true\";\r\n        thumb.src = \"https:\/\/i.ytimg.com\/vi\/\" + encodeURIComponent(videoId) + \"\/hqdefault.jpg\";\r\n      }\r\n    });\r\n  }\r\n\r\n  if (video && play && iframe) {\r\n    play.addEventListener(\"click\", () => {\r\n      const videoId = videoIdForMode(activeMode);\r\n      if (!videoId) return;\r\n\r\n      const url = new URL(\"https:\/\/www.youtube.com\/embed\/\" + encodeURIComponent(videoId));\r\n      const pageUrl = window.location.href.split(\"#\")[0];\r\n\r\n      url.searchParams.set(\"autoplay\", \"1\");\r\n      url.searchParams.set(\"rel\", \"0\");\r\n      url.searchParams.set(\"playsinline\", \"1\");\r\n      url.searchParams.set(\"enablejsapi\", \"1\");\r\n      url.searchParams.set(\"hl\", \"de\");\r\n      url.searchParams.set(\"origin\", window.location.origin);\r\n      url.searchParams.set(\"widget_referrer\", pageUrl);\r\n\r\n      iframe.referrerPolicy = \"origin-when-cross-origin\";\r\n      iframe.src = url.toString();\r\n      iframe.hidden = false;\r\n      play.hidden = true;\r\n\r\n      window.dataLayer = window.dataLayer || [];\r\n      window.dataLayer.push({\r\n        event: \"belka_application_video_start\",\r\n        application_mode: activeMode,\r\n        video_id: videoId\r\n      });\r\n    });\r\n  }\r\n\r\n  resetVideoForMode(activeMode);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>BELKA Mix \u00b7 Individuell gestalten Gestalten Sie Ihren eigenen BELKA Mix. Kombinieren Sie Ihre pers\u00f6nlichen Lieblingsfarben und gestalten Sie eine<\/p>\n","protected":false},"author":7,"featured_media":34890,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-31510","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/gobelka.com\/de\/wp-json\/wp\/v2\/pages\/31510","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gobelka.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gobelka.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gobelka.com\/de\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/gobelka.com\/de\/wp-json\/wp\/v2\/comments?post=31510"}],"version-history":[{"count":1285,"href":"https:\/\/gobelka.com\/de\/wp-json\/wp\/v2\/pages\/31510\/revisions"}],"predecessor-version":[{"id":52668,"href":"https:\/\/gobelka.com\/de\/wp-json\/wp\/v2\/pages\/31510\/revisions\/52668"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gobelka.com\/de\/wp-json\/wp\/v2\/media\/34890"}],"wp:attachment":[{"href":"https:\/\/gobelka.com\/de\/wp-json\/wp\/v2\/media?parent=31510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}