/* ==========================================================
   MARKE: LESEZIRKEL BECKER+STAHL
   Wird automatisch nach style.css geladen, wenn der Shop
   „beckerstahl“ ist (siehe inc/shop-config.php).
   Farben aus der Astra-Globalpalette von lesezirkel-becker-stahl.de (gleich wie Zeitspiegel).
   ========================================================== */

:root {
    --brand: #DD183B;
    --brand-rgb: 221, 24, 59;
    --brand-hover: #CC1939;
    --brand-mid: #E8475F;
    --brand-dark: #8F0F26;
    --brand-muted: #F0B8C2;
    --brand-soft: #FFEDE6;
    --brand-softer: #FFF6F2;
    --brand-initial: "B";

    --menu-drop-active: #FFF6F2;
}

/* Telefon-Symbol im mobilen Astra-Header (HTML-Element, siehe
   BeckerStahl/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;
}

/* Warenkorb im Header: eigene „I ♥ Lesezirkel“-Tasche 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='%23DD183B'/%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;
}

/* Shop-Kopf: dunkles Navy statt Liesmapp-Blau, Rot kommt über den Verlauf */
.lzz-shop-header {
    --lzz-banner-overlay: rgba(15, 23, 42, .84);
}