/* ==========================================================
   MARKE: LËTZEBUERGER LIESMAPP
   Die Standardwerte in style.css entsprechen bereits Liesmapp.
   Hier nur, was es ausschließlich bei Liesmapp gibt.
   ========================================================== */

:root {
    /* Luxemburg-Flagge im Kicker der Liefergebiet-Seite */
    --flag-1: #ED2939;
    --flag-2: #ffffff;
    --flag-3: #00A1DE;
}

/* Warenkorb im Header: Tasche mit Herz in Liesmapp-Lila statt Korb
   (Handy: Astras SVG-Symbol, Desktop: gezeichnete Tasche – beide ersetzt) */
:root {
    --lzz-cart-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4.5h14l1 17a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z' fill='%23fff' stroke='%231f2937' stroke-width='1.4' stroke-linejoin='round'/%3E%3Crect x='9.3' y='6.2' width='5.4' height='1.9' rx='.95' fill='none' stroke='%231f2937' stroke-width='1.2'/%3E%3Ccircle cx='12' cy='14.6' r='5.3' fill='%23312783'/%3E%3Cpath d='M12 17.3c-2.2-1.6-3.2-2.6-3.2-3.7 0-.9.7-1.6 1.6-1.6.7 0 1.2.4 1.6.9.4-.5.9-.9 1.6-.9.9 0 1.6.7 1.6 1.6 0 1.1-1 2.1-3.2 3.7z' fill='%23fff'/%3E%3C/svg%3E");
}

.ast-site-header-cart .ast-addon-cart-wrap .astra-icon {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    background: var(--lzz-cart-icon) center / contain no-repeat;
}

.ast-site-header-cart .ast-addon-cart-wrap .astra-icon > * {
    visibility: hidden;
}

.ast-site-header-cart .ast-cart-menu-wrap {
    width: 30px !important;
    height: 30px !important;
}

.ast-site-header-cart .ast-cart-menu-wrap::before {
    -webkit-mask: none !important;
            mask: none !important;
    background: var(--lzz-cart-icon) center / contain no-repeat !important;
}

/* Telefon-Symbol im mobilen Astra-Header (HTML-Element, siehe
   liesmapp/Header/astra-header-telefon.html) */
.lzz-header-call {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand) !important;
    text-decoration: none !important;
    transition: background-color .2s ease, color .2s ease;
}

.lzz-header-call:hover,
.lzz-header-call:focus-visible {
    background: var(--brand);
    color: #fff !important;
}

.lzz-header-call:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

/* Symbol per CSS-Maske: Das Astra-HTML-Element filtert <svg> heraus. */
.lzz-header-call::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center / contain no-repeat;
}