/* ==========================================================================
   LOKANES CSS-Modul: global.css
   Lädt auf allen Seiten.
   Inhalt: Basis, Header, Navigation, Buttons, Produktkarten und Raster, Hinweisboxen,
   Login und Mein Konto sowie alle Regeln, die auf mehreren Seitentypen gebraucht werden
   oder sich keinem Seitentyp eindeutig zuordnen lassen.

   Einbindung und Ladereihenfolge: ../lokanes-css.php (global, geschenkefinder, Seitenmodul).
   Ein Seitenmodul lädt immer nach global.css. Hinweise zur Pflege: ../README.md
   Hervorgegangen aus dem früheren WoodMart "Global Custom CSS" (Stand 12.10.2026);
   Regeln und Abschnittskommentare sind unverändert übernommen.
   ========================================================================== */

/* ============================a==============================================
   LOKANES GLOBAL CSS
   
   Inhaltsverzeichnis:
	 00. Cookie Banner
   01. Globale Basis & Typografie
   02. Header & Navigation
   03. Globale Buttons & Interaktion
   04. Shop-Basics & Produkt-Grid
   05. Produktseite (PDP)
   05b. Scrollytelling-Funnel (PDP)
   05c. Mainpage Premium Sektion
   06. Warenkorb (Off-Canvas & Main)
   07. Kasse (Checkout) - Tiefer Eingriff
   08. Thank You Page (Bestellbestätigung)
   09. B2B / B2C Spezial-Sektionen (Marketing)
	 10. Trust/Promise Bars
	 11. MEIN KONTO 
========================================================================== */

/* ===================================================
   00. Cookie Banner
=================================================== */

/* Macht das gesamte Banner weicher */
#c-inr {
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
    border: none !important;
}

/* Versteckt die Standard-Überschrift */
#c-ttl {
    display: none !important;
}

/* --- LINKER BUTTON (Alle akzeptieren) --- */
#c-p-bn {
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

/* Hover für den linken Button: Wird leicht abgedunkelt */
#c-p-bn:hover {
    filter: brightness(0.9) !important;
}

/* --- RECHTER BUTTON (Individuelle Auswahl) --- */
#c-s-bn {
    border: 1px solid #C89E82 !important; 
    border-radius: 6px !important;
    background-color: transparent !important;
    transition: all 0.3s ease !important;
}

/* Erzwingt dunkle Textfarbe (auch auf dem inneren span-Element) */
#c-s-bn, #c-s-bn span {
    color: #333 !important; 
}

/* Hover für den rechten Button: Leichter Grauton, Text bleibt zwingend dunkel */
#c-s-bn:hover {
    background-color: #f7f7f7 !important;
}
#c-s-bn:hover span {
    color: #333 !important; 
}

/* ===================================================
   01. GLOBALE BASIS & TYPOGRAFIE
=================================================== */

html {
    scroll-behavior: smooth !important;
    scroll-padding-top: 120px;
}


/* Globaler Papier-Hintergrund für alle Haupt-Wrapper */
body, 
.website-wrapper, 
.main-page-wrapper, 
.elementor-page {
    background-color: #f2f0ef !important;
    background-image: url("https://lokanes.de/wp-content/uploads/2026/03/handmade-paper.png") !important;
    background-repeat: repeat !important;
    background-attachment: scroll !important;
}

/* Kategorie-Überschriften */
.lokanes-category-header {
    text-align: center;
    margin: 60px auto 40px auto;
}

.category-title {
    font-family: 'Jost', sans-serif !important;
    font-size: 30px !important;
    font-weight: 500 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: #cc9e7e !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Sektions-Trenner (Linie - Text - Linie) */
.premium-section-divider {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 600px !important; 
    margin: 0 auto !important;
    gap: 25px !important; 
}

.premium-section-divider::before,
.premium-section-divider::after {
    content: "" !important;
    display: block !important;
    flex: 1 1 0% !important; 
    min-width: 40px !important; /* Verhindert das Kollabieren der Linie */
    height: 1px !important;
    background-color: #888 !important; 
}

.premium-divider-text {
    font-family: 'Jost', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.25em !important; 
    text-transform: uppercase !important;
    color: #888 !important; 
    white-space: nowrap !important; 
}

/* Globale Titel-Klasse */
.brand-title {
    font-family: 'Georgia', serif;
    font-size: 38px;
    color: #1a1a1a;
    font-weight: 400;
    margin: 0;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .category-title { font-size: 24px !important; }
    .lokanes-category-header { margin: 40px auto 30px auto; }
    .premium-section-divider::before,
    .premium-section-divider::after { display: none !important; }
    .brand-title { font-size: 30px; }
    
    /* FIX: Erlaubt den Zeilenumbruch auf Mobile */
    .premium-divider-text { 
        white-space: normal !important; 
        text-align: center !important; 
        line-height: 1.4 !important; 
    }
	
	.lokanes-hero-img {
        width: 125vw !important; /* 115% der eigentlichen Bildschirmbreite */
        max-width: none !important; /* Zwingt das Theme, die normale Bildbegrenzung aufzuheben */
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important; /* Zieht das überbreite Bild wieder exakt in die Mitte */
        border-radius: 20px !important; /* Bei überbreiten Bildern sehen kleinere Radien oft eleganter aus */
    }
}

/* ==========================================
   FIX 1: "Sticky Footer" - Verhindert weißen Raum unter dem Footer
=========================================== */
html, body {
    height: 100%;
}

.wd-page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Zwingt die Seite auf 100% Bildschirmhöhe */
}

.main-page-wrapper {
    flex-grow: 1; /* Dehnt den Content-Bereich aus und drückt den Footer nach unten */
}

/* ==========================================
   FIX 2: Teleport-Container schwerelos machen
=========================================== */
.lokanes-mig-teleport-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    pointer-events: none; /* Verhindert, dass der unsichtbare Container Klicks blockiert */
}

/* Verhindert das Scrollen im Hintergrund bei offenen Menüs ohne iOS-Bugs */
.lokanes-minicart-drawer,
.lokanes-offcanvas,
.lokanes-mig-tooltip {
    overscroll-behavior: contain;
}

/* ===================================================
   02. HEADER & NAVIGATION
=================================================== */

.whb-main-header, 
.whb-header::after {
    background-color: #1a1a1a !important;
    border-bottom: none !important;
}

/* Textur-Folie für den Header */
.whb-main-header::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.06'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    pointer-events: none;
    z-index: 0;
}

.whb-main-header .whb-flex-row {
    position: relative;
    z-index: 1;
}

/* Überstände für Wellenkante erlauben */
.whb-header, .whb-clone, .whb-main-header, .whb-row { overflow: visible !important; }

/* Wellenkante unter dem Header */
.whb-main-header::after {
    content: "";
    position: absolute;
    bottom: -19px; 
    left: 0;
    width: 100%;
    height: 20px; 
    z-index: 99; 
    background-color: #1a1a1a !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.06'/%3E%3C/svg%3E") !important;
    background-size: 200px 200px !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' preserveAspectRatio='none'%3E%3Cpath d='M0,0 A10,10 0 0,0 20,0 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: 55px 20px;
    -webkit-mask-repeat: repeat-x;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' preserveAspectRatio='none'%3E%3Cpath d='M0,0 A10,10 0 0,0 20,0 Z' fill='black'/%3E%3C/svg%3E");
    mask-size: 55px 20px;
    mask-repeat: repeat-x;
    pointer-events: none;
    transform: translateZ(0); 
}

/* Icon Farben & Hover-Effekte */
.whb-header .wd-header-cart > a,
.whb-header .wd-header-mobile-nav > a,
.whb-header .wd-header-mobile-nav .wd-tools-icon {
    color: #f2f0ef !important;
}

.whb-header a, .whb-header .wd-nav-main > li > a { transition: opacity 0.3s ease-in-out !important; }

.whb-header a:hover,
.whb-header .wd-nav-main > li > a:hover,
.whb-header .wd-header-cart:hover .wd-tools-icon,
.whb-header .wd-header-mobile-nav:hover .wd-tools-icon {
    color: #cc9e7e !important;
    opacity: 0.6 !important;
}

/* ===================================================
   LOKANES LOGO HOVER-EFFEKT (PURE CSS FILTER)
=================================================== */

/* 1. Weicher Übergang für das Original-Logo */
.wd-logo a img {
    transition: filter 0.4s ease, opacity 0.4s ease !important;
}

/* 2. Der Hover-Effekt */
.wd-logo a:hover img {
    /* Verhindert das Standard-Ausgrauen von WoodMart */
    opacity: 1 !important; 
    
    /* DIE MAGIE: Rechnet die Pixel deines Logos mathematisch exakt zu deinem Kupfer (#b06d3e) um */
    filter: brightness(0) saturate(100%) invert(45%) sepia(34%) saturate(1067%) hue-rotate(344deg) brightness(88%) contrast(89%) !important;
}

/* ===================================================
   MOBILE MENU PREMIUM POLISH
=================================================== */

/* 1. Weg mit dem schwarzen Kasten beim Aufklappen */
.wd-nav-mobile .wd-nav-opener,
.wd-nav-mobile .wd-nav-opener.wd-active,
.wd-nav-mobile .wd-nav-opener:hover {
    background-color: transparent !important;
    color: #cc9e7e !important; /* Kupferner Pfeil */
}

/* 2. Zartere Trennlinien für einen leichteren Look */
.wd-nav-mobile {
    border-top: none !important;
}
.wd-nav-mobile li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

/* 3. Sub-Menü (Unterpunkte) etwas einrücken und sanfter machen */
.wd-nav-mobile .sub-menu li a {
    padding-left: 30px !important;
    font-size: 14px !important;
    color: #666 !important;
    text-transform: none !important; 
}

/* 4. Hauptpunkte leicht anpassen */
.wd-nav-mobile > li > a {
    font-weight: 500 !important;
    letter-spacing: 1px;
}

/* 5. Aktiven Link (die Seite, auf der man gerade ist) kupfer färben */
.wd-nav-mobile li.current-menu-item > a {
    color: #cc9e7e !important;
}

/* ===================================================
   03. GLOBALE BUTTONS & INTERAKTION
=================================================== */

/* Der schwarze Textur-Button (Primär) */
a.lokanes-texture-btn,
.lokanes-texture-btn .elementor-button,
.lokanes-texture-btn .single_add_to_cart_button,
.fake-button-span,
.split-fake-btn,
.hybrid-fake-btn {
    position: relative !important;
    z-index: 10 !important; 
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* Hitbox-Korrektur */
    height: auto !important;
    min-height: 55px !important; 
    line-height: normal !important;
    box-sizing: border-box !important;

    padding: 16px 45px !important;
    background-color: #1a1a1a !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E") !important;
    background-size: 200px 200px !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: #f2f0ef !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    border: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

/* Unsichtbare Pufferzone gegen Hover-Zucken */
a.lokanes-texture-btn::before,
.lokanes-texture-btn .elementor-button::before,
.lokanes-texture-btn .single_add_to_cart_button::before,
.fake-button-span::before,
.split-fake-btn::before,
.hybrid-fake-btn::before {
    content: "";
    position: absolute;
    top: -10px;
    bottom: -20px; 
    left: -10px;
    right: -10px;
    background: transparent;
    z-index: -1; 
}

/* Hover-Effekt: Textur-Button */
a.lokanes-texture-btn:hover,
.lokanes-texture-btn .elementor-button:hover,
.lokanes-texture-btn .single_add_to_cart_button:hover {
    transform: translateY(-2px) !important;
    background-color: #2a2a2a !important; 
    color: #cc9e7e !important; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important; 
}

/* ===================================================
   FOKUS-BLASE & WOODMART-RIPPLE ZERSTÖREN
=================================================== */

/* 1. Verhindert, dass WoodMart unseren Puffer für seine Klick-Animation nutzt */
a.lokanes-texture-btn::before,
.lokanes-texture-btn .elementor-button::before,
.lokanes-texture-btn .single_add_to_cart_button::before,
.fake-button-span::before,
.split-fake-btn::before,
.hybrid-fake-btn::before {
    box-shadow: none !important;
    border: none !important;
    animation: none !important;
    background-color: transparent !important;
}

/* 2. Entfernt die hartnäckigen WoodMart Focus-Schatten auf dem Button selbst */
a.lokanes-texture-btn:focus,
a.lokanes-texture-btn:active,
a.lokanes-texture-btn:focus-visible,
.lokanes-texture-btn .single_add_to_cart_button:focus,
.lokanes-texture-btn .single_add_to_cart_button:active,
.lokanes-texture-btn .single_add_to_cart_button:focus-visible,
.single_add_to_cart_button:focus,
.single_add_to_cart_button:active,
.single_add_to_cart_button:focus-visible {
    outline: none !important;
    /* Wir zwingen den Button, beim Klicken seinen normalen Look zu behalten */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important; 
}

/* 3. Mobile Tap-Highlights entfernen */
a.lokanes-texture-btn,
.lokanes-texture-btn .elementor-button,
.lokanes-texture-btn .single_add_to_cart_button,
.fake-button-span,
.split-fake-btn,
.hybrid-fake-btn,
.single_add_to_cart_button {
    -webkit-tap-highlight-color: transparent !important;
}

/* WoodMart Container befreien */
form.cart,
.woocommerce-variation-add-to-cart,
.wd-add-btn {
    overflow: visible !important;
}

/* ===================================================
   SEKUNDÄRE BUTTONS & FLOATING CART
=================================================== */

/* Der transparente Outline-Button (Sekundär) */
a.lokanes-outline-btn {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 14px 35px !important; 
    background-color: transparent !important;
    border: 1px solid #1a1a1a !important; 
    border-radius: 50px !important;
    color: #1a1a1a !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

a.lokanes-outline-btn:hover {
    background-color: #1a1a1a !important;
    color: #cc9e7e !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important; 
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
    
    /* Mobile Buttons volle Breite (ABER NICHT der Floating Button) */
    a.lokanes-outline-btn, 
    a.lokanes-texture-btn:not(.lokanes-floating-cart) { 
        width: 100% !important; 
        text-align: center; 
    }
}

/* =========================================
   TRANSITION SECTION (Edle Kupfer-Box)
========================================= */
.lokanes-transition-section {
    display: flex;
    flex-direction: column;
    align-items: center;    
    text-align: center;     
    
    /* Der semi-transparente Kasten */
    background-color: rgba(204, 158, 126, 0.12); /* Eure 12% Kupfer-Transparenz */
    border-radius: 30px; /* Weiche, harmonische Ecken */
    
    /* Layout & Abstände */
    max-width: 700px; /* Ein kleines bisschen breiter, damit der Text in der Box atmen kann */
    margin: 50px auto 80px auto; /* Außenabstand (Abstand zu den anderen Sektionen) */
    padding: 60px 50px; /* Innenabstand (Luft vom Box-Rand zum Text) */
}

/* --- MOBILE ANPASSUNG --- */
@media (max-width: 768px) {
    .lokanes-transition-section {
        padding: 40px 25px; /* Kompakterer Innenabstand auf dem Handy */
        margin: 60px 5% 80px 5%; /* 5% links und rechts, damit die Box nicht am Displayrand klebt! */
        border-radius: 20px; /* Minimal kleinere Ecken auf kleinen Bildschirmen */
    }
}

 .lokanes-transition-section2 {
    display: flex;
    flex-direction: column;
    align-items: center;    /* Zentriert alles perfekt in der Mitte */
    text-align: center;     
    padding-top: 0px;
    padding-bottom: 0px;
    padding-inline: 20px; /* links + rechts */
    max-width: 600px;       
    margin: 0 auto;         
}

/* =========================================
   STATISCHES PRODUKT-BILD (Premium Section)
========================================= */
.lokanes-static-visual {
    object-fit: contain;
    /* Wir nutzen exakt dieselbe Einblend-Animation wie beim Hero-Bild oben! */
    animation: fadeIn 1.2s ease-out; 
}
/* Die weiche CSS-Einblendung */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===================================================
   04. SHOP-BASICS & PRODUKT-GRID
=================================================== */

/* Edles Sternchen an allen Produktpreisen anfügen */
.price .woocommerce-Price-amount::after {
    content: "*";
    font-size: 0.75em;      /* Macht das Sternchen etwas kleiner und edler */
    vertical-align: top;    /* Setzt es schön nach oben wie ein echtes hochgestelltes Zeichen */
    margin-left: 2px;       /* Ein Hauch Abstand zum Euro-Zeichen */
    color: inherit;         /* Übernimmt exakt die Farbe deines Preises */
}

/* Versteckt den Kleinunternehmer-Text NUR auf der Produktseite */
.single-product .legal-price-info .small-business-info {
    display: none !important;
}

/* Germanized Steuer- & Versandtext (inkl. Z-Index Fix für Klickbarkeit) */
.wc-gzd-additional-info, .legal-price-info, .tax-info, .shipping-costs-info {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important; 
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #888888 !important;
    margin-top: 5px !important;
    display: inline-block !important;
    position: relative !important;
    z-index: 99 !important; /* Holt den Text in den Vordergrund */
    pointer-events: auto !important; /* Erzwingt, dass die Maus reagiert */
}

/* Versteckt NUR den kleinen redundanten MwSt-Schnipsel von Germanized */
span.wc-gzd-additional-info.tax-info {
    display: none !important;
}

.wc-gzd-additional-info a, .legal-price-info a, .shipping-costs-info a {
    color: #888888 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #dcdcdc !important; 
    transition: color 0.3s ease, border-color 0.3s ease !important;
    position: relative !important;
    z-index: 100 !important; /* Holt den Link ganz nach vorne */
    pointer-events: auto !important; /* Macht den Link klickbar */
}

.wc-gzd-additional-info a:hover, .legal-price-info a:hover, .shipping-costs-info a:hover {
    color: #cc9e7e !important;
    border-bottom-color: #cc9e7e !important;
}
.swatch-label { font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: #888; white-space: nowrap; }

/* Mengenauswahl (Quantity-Schalter Pill Style) */
.quantity {
    display: inline-flex !important;
    align-items: center !important; /* Zentriert die Elemente vertikal perfekt */
    border-radius: 50px !important;
    border: 1px solid #dcdcdc !important;
    overflow: hidden !important;
    height: 48px !important;
    padding: 0 10px !important;
    background-color: transparent !important;
}

/* Buttons (+ und -) */
.quantity button.btn,
.quantity input[type="button"] {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important; /* Verhindert Theme-eigene Schatten, die wie Rahmen wirken */
    color: #666 !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 20px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    padding: 0 10px !important;
}

.quantity button.btn:hover,
.quantity input[type="button"]:hover {
    color: #cc9e7e !important; 
    transform: scale(1.1);
}

/* Input field (die Zahl selbst) */
.quantity input[type=number].qty {
    border: none !important;
    box-shadow: none !important; /* Entfernt innere Standard-Schatten */
    background-color: transparent !important;
    color: #1a1a1a !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 0 5px !important;
    text-align: center !important;
    -moz-appearance: textfield !important; /* Versteckt Standard-Pfeile in Firefox */
}

.variations_form .reset_variations { 
    display: none !important; 
}

/* Grid Hover Effekte & Wasserzeichen */
.product-grid-item .product-element-top img { transition: transform 0.4s ease !important; }
.product-grid-item:hover .product-element-top img { transform: scale(1.05) !important; }
.product-grid-item .product-element-top::after, .product-grid-item .product-element-top::before { background-color: transparent !important; opacity: 0 !important; }

/* Out of Stock Badge - Korrektur für abgeschnittenen Text & größere Schrift */
.product-labels .out-of-stock.wd-shape-round {
    background-color: #1a1a1a !important; /* Mattes Tiefschwarz */
    color: #cc9e7e !important; /* Goldton */
    border: 1px solid #cc9e7e !important; 
    font-family: 'Jost', sans-serif !important;
    
    /* Zwingt die Box, sich dem Text anzupassen */
    width: auto !important; 
    height: auto !important; 
    min-width: unset !important;
    max-width: none !important; /* Hebt die Theme-Einschränkung auf */
    min-height: unset !important;
    padding: 12px 28px !important; /* Etwas mehr Platz für den größeren Text */
    border-radius: 50px !important; 
    
    /* Layout-Zentrierung */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Versteckt den alten Text */
    font-size: 0 !important; 
    text-transform: none !important;
    line-height: 1 !important;
    white-space: nowrap !important; /* Verhindert Zeilenumbruch der Box */
}

/* Der neue Text */
.product-labels .out-of-stock.wd-shape-round::before {
    content: "Bald wieder verfügbar" !important;
    font-size: 16px !important; /* Text vergrößert */
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important; 
}

/* Sale Badge Anpassung - gleiches Layout wie Out of Stock */
.product-labels .onsale.wd-shape-round {
    background-color: #1a1a1a !important; /* Mattes Tiefschwarz */
    color: #cc9e7e !important; /* Goldton */
    border: 1px solid #cc9e7e !important; 
    font-family: 'Jost', sans-serif !important;
    
    /* Zwingt die Box, sich dem Text anzupassen */
    width: auto !important; 
    height: auto !important; 
    min-width: unset !important;
    max-width: none !important; 
    min-height: unset !important;
    padding: 12px 28px !important; /* Gleiche Größe wie Out-of-Stock */
    border-radius: 50px !important; 
    
    /* Layout-Zentrierung */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Versteckt den alten Text "Verkauf" */
    font-size: 0 !important; 
    text-transform: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Der neue Text für das Sale-Badge */
.product-labels .onsale.wd-shape-round::before {
    content: "Summer Sale" !important; /* Hier kannst du den Text anpassen, z.B. "-10€" */
    font-size: 16px !important; 
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important; 
}

/* Erhöht den Abstand zwischen dem alten und dem neuen Preis */
body .elementor-widget-container p.price del,
body .woosb-price del,
body p.price del {
    margin-right: 10px !important; /* Schiebt den Strich und neuen Preis nach rechts */
}

body .elementor-widget-container p.price ins,
body .woosb-price ins,
body p.price ins {
    margin-left: 5px !important; /* Gibt dem neuen Preis noch etwas Luft nach links */
}

/* ==========================================
   HYBRID-RASTER (Desktop Grid / Mobile Swipe) 
========================================== */
.lokanes-hybrid-row {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 20px; padding-bottom: 30px; padding-right: 20px; scrollbar-width: none; width: 100%; box-sizing: border-box; 
    /* Einrasten aktiviert */
    scroll-snap-type: x mandatory; 
}
.lokanes-hybrid-row::-webkit-scrollbar { display: none; }

.lokanes-hybrid-row > *, .lokanes-hybrid-card-link { 
    /* Anschnitt auf 55vw für besseres Mobile-Feeling */
    width: 55vw !important; 
    min-width: 55vw !important; 
    max-width: 55vw !important; 
    flex-shrink: 0 !important; 
    /* Kacheln rasten mittig ein */
    scroll-snap-align: center; 
}

/* Hybrid Card Styling */
.lokanes-hybrid-card-link { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none !important; color: inherit; height: 100%; transition: all 0.4s ease; cursor: pointer; }

/* WICHTIG: position: relative hinzugefügt für das Siegel (Option 1) */
.hybrid-image-wrapper { width: 70%; margin-bottom: 25px; overflow: hidden; border-radius: 8px; position: relative; }
.hybrid-image-wrapper img { width: 100%; height: auto; display: block; transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }

.hybrid-content { display: flex; flex-direction: column; align-items: center; flex-grow: 1; width: 100%; }
.hybrid-eyebrow { display: block; font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: #888; margin-bottom: 6px; }
.hybrid-title { font-family: 'Georgia', serif; font-size: 26px; font-weight: 400; color: #cc9e7e; margin: 0 0 10px 0; }
.hybrid-price { font-family: 'Jost', sans-serif; font-size: 16px; color: #1a1a1a; margin: 0 0 25px 0; }
.hybrid-fake-btn { margin-top: auto; }

/* Hybrid Card Hover */
.lokanes-hybrid-card-link:hover .hybrid-image-wrapper img { transform: scale(1.04); }
.lokanes-hybrid-card-link:hover .hybrid-fake-btn {  background-color: #2a2a2a !important; color: #cc9e7e !important; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.12); }


/* =========================================================
   NEU: Visualisierung Herkunft (Siegel - Dynamisch skalierend)
========================================================= */

.hybrid-map-badge {
    position: absolute;
    /* 1. Relative Positionierung zum Rand des Bildes */
    top: 1%; 
    right: 1%; 
    
    /* 2. Dynamische Größe basierend auf der Kachelbreite */
    width: 22%; 
    
    /* 3. Sicherheits-Grenzen, damit es nicht extrem ausartet */
    max-width: 75px; /* Deckelung für riesige Kacheln (dein Desktop-Wunsch) */
    min-width: 40px; /* Untergrenze für sehr kleine Kacheln (z.B. im Finder) */
    
    /* 4. Der Magie-Trick: Hält das Element IMMER perfekt kreisrund! */
    aspect-ratio: 1 / 1; 
    
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(204, 158, 126, 0.4);
    z-index: 2;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.lokanes-hybrid-card-link:hover .hybrid-map-badge {
    transform: translateY(-3px) scale(1.05);
    border-color: #cc9e7e;
}

.hybrid-map-badge img {
    /* Auch das innere Bild skaliert jetzt relativ zum Siegel mit */
    width: 75%; 
    height: 75%;
    object-fit: contain;
    opacity: 1; 
}

@media (max-width: 768px) {
	.hybrid-map-badge {
			/* 2. Dynamische Größe basierend auf der Kachelbreite */
			width: 30%;
	}
}

/* Desktop Grid ganz am Ende */
@media (min-width: 993px) {
    .lokanes-hybrid-row { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 30px 30px !important; width: 100% !important; overflow: hidden !important; padding-bottom: 0 !important; padding-right: 0 !important; }
    .lokanes-hybrid-row > *, .lokanes-hybrid-card-link { width: 100% !important; min-width: 100% !important; max-width: 100% !important; flex-shrink: 1 !important; }
}

/*  GLOBALE BESTSELLER ÜBERSCHRIFT (Cart & Product Page) */
.lokanes-bestseller-header {
    text-align: center;
    margin-bottom: 50px;
}

.bestseller-eyebrow {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #666;
    display: block;
    margin-bottom: 15px;
    font-weight: 500;
}

.bestseller-title {
    font-family: 'Georgia', serif;
    font-size: 36px; /* Premium-Magazin-Look */
    color: #1a1a1a;
    margin: 0;
    font-weight: 400;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .lokanes-bestseller-header {
        margin-bottom: 35px;
    }
    .bestseller-title {
        font-size: 30px;
    }
}

/* =========================================================
   LOKANES SYMBIOSE-GRID FÜR Vorschlaege sets und produkte (Mit "Mehr anzeigen" Fade-Out)
========================================================= */
.lokanes-symbiose-wrapper {
    position: relative;
    margin: 60px 0;
}

.lokanes-symbiose-header {
    text-align: center;
    margin-bottom: 30px;
}

.lokanes-symbiose-toggle {
    text-align: center;
    margin-top: 15px;
}

/* Auf dem Desktop limitieren wir die Höhe */
@media (min-width: 993px) {
    .lokanes-symbiose-container {
        /* Exakt auf eine Kachelhöhe (380px) zugeschnitten */
        max-height: 470px; 
        overflow: hidden;
        transition: max-height 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Der aufgeklappte Zustand */
    .lokanes-symbiose-container.is-expanded {
        max-height: 2500px; 
    }
}

/* Auf Mobile verstecken wir den Button, da dort gewischt wird */
@media (max-width: 992px) {
    .lokanes-symbiose-toggle {
        display: none !important;
    }
    .lokanes-symbiose-container {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* =========================================================
   DIE SVG KARTE
========================================================= */
/* =========================================================
   FIX: Verhindert das Kollabieren der SVG-Karte auf Mobile
========================================================= */
.lokanes-map-wrapper { 
    width: 100%; 
    max-width: 380px; 
    margin: 0 auto 30px auto !important; /* Erzwingt 30px Abstand nach unten */
    flex-shrink: 0 !important; /* Die magische Zeile: Verbietet das Zusammenquetschen */
    display: block;
}

/* Stellt sicher, dass WoodMart-Blöcke und das SVG sich wie normale Boxen verhalten */
.lokanes-map-wrapper svg,
.lokanes-map-wrapper .wd-html-block {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
}

.lokanes-svg-map {
    width: 100%;
    height: auto;
    display: block;
}

.lokanes-svg-map .cls-1 {
    fill: none !important;
    stroke: none !important;
}

.gf-map-path path, 
.gf-map-path polygon {
    fill: rgba(204, 158, 126, 0.08) !important;
    stroke: rgba(204, 158, 126, 0.6) !important;
    stroke-width: 2.5px;
    transition: all 0.3s ease;
    cursor: pointer;
    pointer-events: all;
}

.gf-map-path:hover path, 
.gf-map-path:hover polygon {
    fill: rgba(204, 158, 126, 0.6) !important;
}

/* === 1. TOOLBAR LAYOUT (Button exakt mittig, Sorter rechts) === */
.lokanes-shop-toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Teilt die Leiste in 3 Spalten */
    align-items: flex-start;
    margin-bottom: 40px;
    width: 100%;
}

.lokanes-toolbar-filter {
    grid-column: 2; /* Zwingt den Button auf den Pixel genau in die Mitte */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.lokanes-reset-wrapper {
    min-height: 25px; 
}

/* === 2. DAS EDLE SELECT DROPDOWN === */
.lokanes-sorter-label {
    font-family: 'Jost', sans-serif;
    color: #666;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.lokanes-select-wrapper {
    position: relative;
}

/* Der eigene, elegante SVG-Pfeil in Kupfer */
.lokanes-select-wrapper::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 7px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23cc9e7e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none; 
}

.lokanes-elegant-select {
    appearance: none !important; /* WoodMart-Fix: Versteckt Standard-Pfeile */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important; /* WoodMart-Fix: Versteckt Hintergrund-Pfeile */
    background-color: transparent;
    border: 1px solid rgba(204, 158, 126, 0.4);
    border-radius: 8px; /* <-- NEU: Leicht abgerundete Ecken */
    padding: 10px 40px 10px 16px; /* Abstände optimiert */
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    color: #1a1a1a;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.lokanes-elegant-select:hover, 
.lokanes-elegant-select:focus {
    border-color: #cc9e7e;
    box-shadow: 0 8px 25px rgba(204, 158, 126, 0.15);
}

/* Mobile Anpassung (Untereinander stapeln, wenn der Platz eng wird) */
@media (max-width: 900px) {
    .lokanes-shop-toolbar {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
}
/* Premium Dark Button */
.lokanes-dark-filter-btn { background-color: #1a1a1a; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E"); color: #cc9e7e !important; display: inline-flex; align-items: center; justify-content: center; padding: 16px 45px; border-radius: 50px; font-family: 'Jost', sans-serif; font-size: 16px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; text-decoration: none !important; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); border: 1px solid rgba(204, 158, 126, 0.2); }
.lokanes-dark-filter-btn:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(204, 158, 126, 0.2); border-color: rgba(204, 158, 126, 0.6); color: #F2F0EF !important; }

/* =========================================================
   INSTAGRAM FEED
========================================================= */


/* =========================================================
   1. GRUNDSETUP DER KACHELN
========================================================= */

html body .wd-insta .wd-insta-item {
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;

    position: relative !important;
    overflow: hidden !important;

    border-radius: 0 !important;

    z-index: 1 !important;

    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;

    transition:
        transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        border-radius 0.4s ease,
        box-shadow 0.4s ease !important;
}


/* =========================================================
   2. WOODMART OVERLAYS / MASKEN ENTFERNEN
========================================================= */

html body .wd-insta .wd-insta-mask,
html body .wd-insta .wd-insta-item::before {
    display: none !important;

    content: none !important;

    opacity: 0 !important;

    background: transparent !important;
}


/* =========================================================
   3. WICHTIG:
   VOLLFÄCHIGEN INSTAGRAM-LINK NEUTRALISIEREN
========================================================= */

/*
   Woodmart legt über jedes Bild ein leeres <a>.
   Der Link bleibt vollständig klickbar,
   darf aber selbst keinerlei dunklen Hintergrund erzeugen.
*/

html body .wd-insta .wd-insta-item > a,
html body .wd-insta .wd-insta-item > a:hover,
html body .wd-insta .wd-insta-item > a:focus,
html body .wd-insta .wd-insta-item > a:active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    opacity: 1 !important;

    filter: none !important;
    -webkit-filter: none !important;

    box-shadow: none !important;

    mix-blend-mode: normal !important;
}


/* Auch sämtliche Pseudo-Elemente des Links ausschalten */

html body .wd-insta .wd-insta-item > a::before,
html body .wd-insta .wd-insta-item > a::after,
html body .wd-insta .wd-insta-item > a:hover::before,
html body .wd-insta .wd-insta-item > a:hover::after {
    display: none !important;

    content: none !important;

    opacity: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
}


/* =========================================================
   4. STANDARDZUSTAND DER BILDER
========================================================= */

html body .wd-insta .wd-insta-item > img {
    opacity: 1 !important;

    filter: none !important;
    -webkit-filter: none !important;

    border-radius: 0 !important;

    transform: none;

    transition:
        transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        filter 0.6s ease,
        opacity 0.6s ease,
        border-radius 0.4s ease !important;
}


/* =========================================================
   5. KUPFER-RAHMEN
========================================================= */

html body .wd-insta .wd-insta-item::after {
    content: "" !important;

    display: block !important;

    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    background: transparent !important;

    box-shadow:
        inset 0 0 0 0 #cc9e7e !important;

    border-radius: 0 !important;

    opacity: 1 !important;

    pointer-events: none !important;

    z-index: 20 !important;

    transition:
        box-shadow 0.4s ease,
        border-radius 0.4s ease !important;
}


/* =========================================================
   6. DESKTOP / MAUS-HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {

    /*
       SPOTLIGHT:

       Nur NICHT gehoverte Kacheln werden dunkler.
    */

    html body .wd-insta:hover
    .wd-insta-item:not(:hover) > img {
        opacity: 0.5 !important;

        filter: grayscale(60%) !important;
        -webkit-filter: grayscale(60%) !important;
    }


    /*
       Gehoverte Kachel
    */

    html body .wd-insta
    .wd-insta-item:hover {
        z-index: 100 !important;

        opacity: 1 !important;

        background: transparent !important;

        border-radius: 12px !important;

        transform: scale(1.06) !important;

        box-shadow:
            0 15px 30px rgba(0, 0, 0, 0.15) !important;
    }


    /*
       Gehovertes Bild:
       explizit ALLE möglichen Abdunkelungen zurücksetzen
    */

    html body .wd-insta
    .wd-insta-item:hover > img {
        opacity: 1 !important;

        filter: none !important;
        -webkit-filter: none !important;

        mix-blend-mode: normal !important;

        border-radius: 12px !important;
    }


    /*
       Auch die Link-Ebene auf Hover nochmals erzwingen
    */

    html body .wd-insta
    .wd-insta-item:hover > a {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

        opacity: 1 !important;

        filter: none !important;
        -webkit-filter: none !important;

        box-shadow: none !important;

        mix-blend-mode: normal !important;
    }


    /*
       Kupfer-Rahmen
    */

    html body .wd-insta
    .wd-insta-item:hover::after {
        background: transparent !important;

        box-shadow:
            inset 0 0 0 3px #cc9e7e !important;

        border-radius: 12px !important;

        opacity: 1 !important;
    }
}


/* =========================================================
   GRUNDPREIS
========================================================= */

.hybrid-base-price {
    display: block;

    margin-top: 3px;

    font-size: 0.78em;
    line-height: 1.3;

    font-weight: normal !important;

    color: #777777 !important;
}


.hybrid-base-price .woocommerce-Price-amount,
.hybrid-base-price .amount,
.hybrid-base-price bdi,
.hybrid-base-price span {
    font-weight: normal !important;

    color: inherit !important;
}


/* =========================================================
   Grundpreis
========================================================= */

/* Haupt-Container für den Grundpreis */
.hybrid-base-price {
    display: block;

    margin-top: 3px;

    font-size: 0.78em;
    line-height: 1.3;

    font-weight: normal !important;

    color: #777777 !important;
}


/* Erzwingt das Styling auch für innere WooCommerce-Elemente */
.hybrid-base-price .woocommerce-Price-amount,
.hybrid-base-price .amount,
.hybrid-base-price bdi,
.hybrid-base-price span {
    font-weight: normal !important;

    color: inherit !important;
}	

   /* =========================================================
       LOKANES: "Wird oft zusammen gekauft" Kompakt-Karussell
    ========================================================= */
    .lokanes-fbt-wrapper {
        margin: 15px 0 25px 0;
        padding: 15px; 
        background-color: rgba(204, 158, 126, 0.04); 
        border: 1px solid rgba(204, 158, 126, 0.2);
        border-radius: 12px;
    }

    .lokanes-fbt-topbar {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 15px;
        border-bottom: 1px solid rgba(204,158,126,0.2);
        padding-bottom: 8px;
    }

    /* Tabs Styling */
    .lokanes-fbt-tabs {
        display: flex;
        gap: 15px;
    }

    .lokanes-fbt-tab, .lokanes-fbt-title {
        background: none;
        border: none;
        font-family: 'Jost', sans-serif;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #888;
        cursor: pointer;
        padding: 0;
        margin: 0;
        position: relative;
        transition: color 0.3s ease;
    }

    .lokanes-fbt-title {
        color: #1a1a1a;
        font-weight: 500;
        cursor: default;
    }

    .lokanes-fbt-tab.active {
        color: #1a1a1a;
        font-weight: 500;
    }

    .lokanes-fbt-tab.active::after {
        content: '';
        position: absolute;
        bottom: -9px; 
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #cc9e7e;
    }

    /* Neu: Deine schwarzen Lokanes-Pfeile */
    .lokanes-fbt-nav button {
        background-color: #1a1a1a !important;
        border: none !important;
        box-shadow: none !important;
        color: #cc9e7e !important;
        border-radius: 8px !important; /* 8px wirkt bei 24px sehr modern */
        width: 24px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin-left: 6px;
        transition: all 0.3s ease;
        padding: 0;
    }

    .lokanes-fbt-nav button:hover {
        background-color: #cc9e7e !important;
        color: #1a1a1a !important;
    }

    /* Content Switching */
    .lokanes-fbt-content {
        display: none;
    }
    
    .lokanes-fbt-content.active {
        display: block;
        animation: fadeIn 0.4s ease;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(5px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Native CSS Scroll-Magie */
    .lokanes-fbt-carousel {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden; /* <--- DER FIX: Verbietet das vertikale Wackeln rigoros */
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding-bottom: 5px; 
        scrollbar-width: none; 
        -ms-overflow-style: none; 
        -webkit-overflow-scrolling: touch; /* Sorgt für butterweiches Einrasten auf dem iPhone */
    }
    .lokanes-fbt-carousel::-webkit-scrollbar {
        display: none; 
    }

    /* Kacheln nebeneinander erzwingen */
    .lokanes-fbt-slide {
        flex: 0 0 calc(50% - 6px); /* Exakt 2 Kacheln sichtbar */
        scroll-snap-align: start;
    }

    /* Ultra-kompakte Typografie für die Sidebar */
    .lokanes-fbt-slide .hybrid-content { padding: 10px 8px; }
    .lokanes-fbt-slide .hybrid-title { font-size: 12px !important; margin-bottom: 3px !important; line-height: 1.3 !important;}
    .lokanes-fbt-slide .hybrid-eyebrow { font-size: 9px !important; margin-bottom: 2px !important; }
    .lokanes-fbt-slide .hybrid-price { font-size: 11px !important; }
    .lokanes-fbt-slide .hybrid-fake-btn { padding: 6px 10px !important; font-size: 9.5px !important; margin-top: 6px !important; }
/* =========================================================
   LOKANES: Produkt-Addon (Grußbotschaft) - PLUGIN VERSION
========================================================= */



/* Das Label (Die Überschrift "Persönliche Grußbotschaft") */
.wcpa_field_wrap .wcpa_field_label {
    font-family: 'Jost', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #1a1a1a !important;
    margin-bottom: 5px !important; 
    display: block;
}

/* Die Text-Box selbst */
.wcpa_field_wrap textarea.wcpa_field {
    font-family: 'Jost', sans-serif !important;
    font-size: 14px !important;
    color: #1a1a1a !important;
    background-color: #ffffff !important; /* reinweiß */
    border: 1px solid rgba(204, 158, 126, 0.4) !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    width: 100% !important;
    box-sizing: border-box;
    line-height: 1.5;
    
    /* Die Höhe: Initial sehr schmal */
    min-height: 48px !important; 
    height: 48px !important; 
    
    /* Weiche Animation für das Ausfahren und den Rahmen */
    transition: all 0.3s ease !important;
    resize: vertical;
}

/* Platzhalter-Text (grau und kursiv für den edlen Look) */
.wcpa_field_wrap textarea.wcpa_field::placeholder {
    color: #999 !important;
    font-style: italic;
    opacity: 1;
}

/* Hover-Effekt: Wenn man mit der Maus drüber fährt */
.wcpa_field_wrap textarea.wcpa_field:hover {
    border-color: rgba(204, 158, 126, 0.8) !important;
}

/* Fokus-Effekt: Wenn der Kunde reinklickt (Premium UX) */
.wcpa_field_wrap textarea.wcpa_field:focus {
    border-color: #cc9e7e !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(204, 158, 126, 0.1) !important;
    
    /* Fährt beim Klicken butterweich aus! */
    min-height: 100px !important; 
    height: 100px !important; 
}

/* =========================================================
   LOKANES: Mobile-Anpassung für die Grußbotschaft
========================================================= */
@media (max-width: 768px) {
    /* Initialhöhe auf dem Smartphone etwas größer (ca. 2-3 Zeilen) */
    .wcpa_field_wrap textarea.wcpa_field {
        min-height: 50px !important; 
        height: 50px !important; 
    }
    
    /* Beim Hineinklicken auf dem Smartphone noch etwas weiter ausfahren */
    .wcpa_field_wrap textarea.wcpa_field:focus {
        min-height: 120px !important; 
        height: 120px !important; 
    }
}

/* ------------------------------- */


/* Zwingt die Lieferzeit in Elementor in eine neue Zeile */
.elementor-widget-container p.wc-gzd-additional-info.delivery-time-info {
    display: block !important;
    width: 100% !important;
    flex-basis: 100% !important;
    margin-top: 0px !important;
}

/* Daumenkino Hero */
.scroll-video-container { position: relative; width: 100%; max-width: 100vw; overflow: hidden; background-color: transparent; display: flex; flex-direction: column; align-items: center; padding-top: 0vh; }
.sticky-text-above { position: relative; z-index: 10; width: 100%; max-width: 1500px; margin: 0 auto -10vh auto; text-align: center; }
.sticky-text-above .serif-main { display: block; font-family: 'Cormorant Garamond', 'Playfair Display', serif; font-size: clamp(2.0rem, 4vw, 3.8rem); font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: #cc9e7e; line-height: 1.1; margin-top: 30px; }
.sticky-text-above .sans-sub { display: block; font-family: 'Jost', sans-serif; font-size: clamp(1.5rem, 1.5vw, 1.2rem); font-weight: 400; letter-spacing: 0.05em; color: #4a4a4a; margin-top: 0px; }
.sticky-text-above .lokanes-texture-btn { position: relative; z-index: 999 !important; pointer-events: auto; margin-top: 10px; display: inline-block; }
#video-canvas { position: relative; z-index: 1; max-width: 100%; max-height: 70vh; object-fit: contain; }

/* Sticky Buy Panel & Galerie */
.product-main-container { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.product-gallery { flex: 1 1 500px; max-width: 60%; }
.product-buy-panel { flex: 1 1 350px; max-width: 35%; position: sticky; top: 100px; }

/* Premium Product Info (Notizzettel) */
.premium-product-info { max-width: 380px; font-family: 'Jost', sans-serif; display: flex; flex-direction: column; align-items: flex-start; }
.eyebrow-text { font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: #888888 !important; margin-bottom: 3px; }
.product-headline { font-size: 32px; font-weight: 300; color: #cc9e7e; margin: 0 0 20px 0; line-height: 1.2; }
.product-description { font-size: 15px; line-height: 1.6; color: #4a4a4a; margin: 0 0 35px 0; }
.premium-product-info-panel { background-color: #e6ddd7; border-radius: 20px; padding: 30px; width: 45%; max-width: 450px; position: relative; z-index: 2; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 10px 30px rgba(0,0,0,0.03); transition: transform 0.4s ease, box-shadow 0.4s ease; }
.lokanes-info-link { cursor: pointer; color: inherit; transition: transform 0.4s ease, box-shadow 0.4s ease; display: block; }
.lokanes-info-link:hover { transform: translateY(-3px); }
.lokanes-info-link:hover .fake-button-span { background-color: #2a2a2a !important; color: #cc9e7e !important; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

/* Zwingt den Shortcode-Container auf volle Breite und entfernt alle Rest-Abstände */
.lokanes-info-link [class*="elementor"], 
.lokanes-info-link [class*="wpb_"],
.lokanes-info-link .vc_column-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important; /* Verhindert Inline-Verschiebungen */
}

/* Falls WordPress unsichtbare Absätze um den Shortcode baut */
.lokanes-info-link p:empty {
    display: none !important;
}

/* Set-Listen (Kupfer-Punkte) */
.lokanes-set-list-wrapper { margin: 25px 0; font-family: 'Jost', sans-serif; }
.lokanes-set-list { list-style: none !important; padding-left: 0 !important; margin: 10px 0 0 0 !important; }
.lokanes-set-list li { position: relative; margin-bottom: 2px; padding-left: 20px; font-size: 15px; font-weight: 400; line-height: 1.5; }
.lokanes-set-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; background-color: #cc9e7e; border-radius: 50%; transition: transform 0.3s ease; }
.lokanes-set-list li a { color: #4a4a4a !important; text-decoration: none !important; transition: all 0.3s ease !important; display: inline-block; }
.lokanes-set-list li:hover a { color: #cc9e7e !important; transform: translateX(5px); }
.lokanes-set-list li:hover::before { transform: scale(1.5); }

/* Mobile PDP Anpassungen */
@media (max-width: 768px) {
    .sticky-text-above { margin-bottom: 20px; }
    #video-canvas { margin-top: 20px; }
    .product-gallery, .product-buy-panel { max-width: 100%; flex: 1 1 100%; position: relative; top: 0; }
    .product-buy-panel { order: 2; }
    /* WoodMart Add to Cart Button Mobile Fix */
    .woocommerce div.product form.cart { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 15px !important; }
    .woocommerce div.product form.cart .single_add_to_cart_button { width: auto !important; flex: 0 1 auto !important; padding: 12px 24px !important; font-size: 13px !important; letter-spacing: 1px !important; }
}

/* ===================================================
   05b. SCROLLYTELLING-FUNNEL (PDP)
=================================================== */

.lokanes-scrolly-intro { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 10px; margin-bottom: -20px; font-family: 'Jost', sans-serif; }
.scrolly-intro-title { font-size: 13px; font-weight: 400; letter-spacing: 4px; text-align: center; text-transform: uppercase; color: #888888; margin: 0 0 20px 0; }
.scrolly-intro-line { width: 1px; height: 70px; background: linear-gradient(to bottom, #cc9e7e 0%, rgba(204, 158, 126, 0) 100%); position: relative; }
.scrolly-intro-line::after { content: ''; position: absolute; top: 0; left: -2px; width: 5px; height: 5px; background-color: #cc9e7e; border-radius: 50%; animation: scrollDrop 2.5s infinite cubic-bezier(0.15, 0.41, 0.69, 0.94); }
@keyframes scrollDrop { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(65px); opacity: 0; } 100% { transform: translateY(65px); opacity: 0; } }

.lokanes-scrolly-container { display: flex; justify-content: space-between; max-width: 1500px; margin: 0 auto; padding: 0 3%; box-sizing: border-box; }
.scrolly-sticky-col { width: 50%; position: sticky; display: flex; align-items: center; justify-content: center; top: 25vh; height: 75vh; }
.scrolly-scroll-col { width: 53%; padding: 25vh 0 25vh 0; }

.scrolly-image-stack { position: relative; width: 100%; max-width: 650px; aspect-ratio: 1 / 1; }
.scrolly-image-stack img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
.layer-opening-1, .layer-opening-2, .layer-opening-3, .layer-opening-4 { opacity: 0; transition: none !important; z-index: 100; }
.layer-opening-1 { opacity: 1; } 
.layer-item3.is-base-box { opacity: 0; transition: filter 0.6s ease !important; z-index: 10; }

.scrolly-image-stack img:not(.is-base-box):not(.flyer-visual) { filter: brightness(1) grayscale(0%); transform: scale(1) translateY(0); transition: filter 0.4s ease, transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); z-index: 10; }
.showcase-dimmed img:not(.is-base-box):not(.flyer-visual) { filter: brightness(0.5) grayscale(20%); }
.showcase-dimmed .is-base-box { filter: brightness(0.5) !important; transition: filter 0.6s ease; }
.scrolly-image-stack img.active-layer:not(.is-base-box):not(.flyer-visual) { filter: drop-shadow(0px 20px 30px rgba(0,0,0,0.45)) brightness(1.1) grayscale(0%) !important; transform: scale(1.06) translateY(-15px) !important; z-index: 50 !important; opacity: 1 !important; }

/* Die physischen Flyer */
.scrolly-image-stack .flyer-visual { position: absolute; width: var(--f-width, 48%); height: auto; opacity: 0; z-index: 15; top: var(--f-top, auto); bottom: var(--f-bottom, auto); left: var(--f-left, auto); right: var(--f-right, auto); transform: rotate(var(--f-rot-start, 0deg)) translateY(40px) scale(0.9); transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); filter: drop-shadow(0 15px 30px rgba(0,0,0,0.35)); }
.scrolly-image-stack .active-flyer { opacity: 1; transform: rotate(var(--f-rot-end, 0deg)) translateY(0) scale(1); }

/* Editorial Flyer Karte (Scroll-Spalte) */
.scrolly-flyer { position: relative; background-color: #e6ddd7; border-radius: 30px; box-shadow: 0 25px 60px rgba(0,0,0,0.08); padding: 40px 50px; margin-bottom: 30vh; display: flex; align-items: center; overflow: hidden; opacity: 0.15; transform: translateY(40px); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.scrolly-flyer:first-child { margin-top: 0; }
.scrolly-flyer.active { opacity: 1; transform: translateY(0); }

/* WICHTIG: Flexbox-Fix für Text-Umbruch */
.flyer-text-col { flex: 1 1 55%; padding-right: 30px; position: relative; z-index: 2; min-width: 0 !important; }
.flyer-text-col .product-description { white-space: normal !important; word-wrap: break-word !important; overflow-wrap: break-word !important; max-width: 100% !important; }
.flyer-map-col { flex: 1 1 35%; position: relative; z-index: 1; transform: scale(1.15); }

/* SVG Karte in Flyer */
.hybrid-map-container { width: 100%; aspect-ratio: 0.76 / 1; background-size: contain; background-repeat: no-repeat; background-position: center; position: relative; opacity: 0.99; }
.marker-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.scrolly-map-pin .pin-body { fill: #111; transition: all 0.4s ease; }
.scrolly-map-pin.active-pin .pin-body { fill: #cc9e7e; filter: drop-shadow(0px 0px 8px rgba(204, 158, 126, 0.8)); }
.flyer-header { display: flex; align-items: center; margin-bottom: 20px; }
.flyer-serif-title { font-family: 'Georgia', serif; font-size: 36px; color: #111; margin: 0 0 15px 0; font-weight: normal; line-height: 1.2; }

/* Responsive Scrollytelling (Isoliert) */
@media (max-width: 1100px) {
    .lokanes-scrolly-container { display: block; padding: 0; }
    .scrolly-sticky-col { width: 100%; height: 55vh; position: sticky; top: 60px; z-index: 5; padding: 20px; box-sizing: border-box; }
    .scrolly-image-stack { max-width: 100%; height: 100%; }
    .scrolly-scroll-col { width: 100%; position: relative; z-index: 10; padding: 2vh 15px 80px 15px; margin: 0; box-sizing: border-box; }
    .scrolly-flyer:last-child { margin-bottom: 40px !important; }
    
    .scrolly-flyer { position: relative !important; flex-direction: column; align-items: flex-start !important; padding: 40px 30px; border-radius: 20px; margin-bottom: 70vh; box-shadow: 0 -10px 40px rgba(0,0,0,0.1); background-color: #fdfbf9; background-image: linear-gradient(#cc9e7e30, #cc9e7e30); }
    .scrolly-flyer .flyer-text-col { position: relative !important; z-index: 2 !important; text-align: left !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 60% !important; min-width: 280px !important; }
    .scrolly-flyer .flyer-map-col { display: block !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; right: 30px !important; width: 160px !important; margin: 0 !important; opacity: 0.99 !important; z-index: 1 !important; } 
    .scrolly-image-stack .flyer-visual { width: calc(var(--f-width, 48%) * 1); }
}

@media (max-width: 600px) {
    .scrolly-sticky-col { padding-top: 0 !important; }
    .scrolly-image-stack { transform: translateY(-15px); }
    .scrolly-flyer { padding: 30px 20px !important; }
    .scrolly-flyer .flyer-text-col { max-width: 100% !important; padding: 0 !important; }
    .scrolly-flyer .flyer-text-col .flyer-header, .scrolly-flyer .flyer-text-col .flyer-serif-title { padding-right: 110px !important; }
    .scrolly-flyer .flyer-text-col .product-description { padding-left: 0 !important; padding-right: 15px !important; }
    .scrolly-flyer .flyer-map-col { top: 20px !important; right: 20px !important; transform: none !important; width: 100px !important; opacity: 0.99 !important; } 
/*    .scrolly-image-stack .flyer-visual { width: 30% !important; top: 10% !important; bottom: auto !important; left: 5% !important; right: auto !important; transform: translate(-50%, 40px) scale(0.9) rotate(0deg) !important; }
    .scrolly-image-stack .active-flyer { transform: translate(-50%, 0) scale(1) rotate(-4deg) !important; }
*/
}

/* ===================================================
   05c. MAINPAGE PREMIUM SEKTION (Semi-Transparent Hover)
=================================================== */

/* 1. Das Basis-Layout */
.lokanes-premium-section {
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    width: 100%; 
    min-height: 400px;
    padding: var(--abstand-aussen, 0 5%); 
    box-sizing: border-box;
}

/* Dreht die Anordnung um */
.lokanes-premium-section.is-reversed,
.lokanes-premium-section.is-re { 
    flex-direction: row-reverse !important; 
}

/* 2. Die Wasserzeichen-Karte */
.hover-watermark-map {
    position: absolute; 
    top: var(--karte-position-y, 50%); 
    left: var(--karte-position-x, 70%); 
    width: var(--karte-groesse, 400px);
    z-index: 0; 
    pointer-events: none;
    opacity: 0; 
    transform: translate(-50%, -45%) scale(0.95); 
    transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
            transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 3. Der Hover-Effekt */
.hover-watermark-map.is-visible,
.lokanes-premium-section:hover .hover-watermark-map {
    opacity: 0.2; 
    transform: translate(-50%, -50%) scale(1);
}

/* --- MOBILE & SCHMALE DESKTOPS ANPASSUNG --- */
@media (max-width: 768px) {
    .lokanes-premium-section, 
    .lokanes-premium-section.is-reversed, 
    .lokanes-premium-section.is-re { 
        flex-direction: column !important; 
        text-align: center; 
        gap: 15px !important; 
        padding: 40px 20px !important; 
    }
    
    /* HIER IST DIE ÄNDERUNG: Die Karte wird auf schmalen Screens komplett gelöscht */
    .hover-watermark-map { 
        display: none !important; 
    }
    
    .premium-product-info-panel { 
        width: 100% !important; 
        max-width: 100% !important; 
        padding: 30px 20px !important; 
        margin: -100px auto 0 auto !important; 
    }
}

@media (max-width: 768px) {
		/* Schiebt den Text innerhalb der beigen Box etwas nach unten, damit "Entdecke" unter dem Bild hervorkommt */
    .lokanes-premium-section .premium-product-info-panel {
        padding-top: 25px !important; 
    }
	.lokanes-hide-mobile {
        display: none !important;
    }
}
/* GLOBALES CSS FÜR LOKANES SETS */
.lokanes-split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    align-items: center;
    width: 100%;
}
.lokanes-set-grid { 
    display: grid; 
    grid-template-columns: 4fr 6fr; 
    gap: 0px; 
    align-items: center; 
    width: 100%; 
}

/* Hover-Effekte & Z-Index Magie */
.showcase-dimmed img { filter: brightness(0.6) grayscale(30%); }
img.active-layer {
    filter: brightness(1.1) grayscale(0%) !important; 
    transform: scale(1.03) translateY(-8px); 
    filter: drop-shadow(0px 15px 25px rgba(0,0,0,0.4)) !important; 
    z-index: 15 !important; 
}
.layer-item3.active-layer { z-index: 1 !important; }

/* Map Pins */
.interactive-hitbox { cursor: pointer; }
.map-pin {
    position: absolute; width: 28px; height: 28px; color: #1a1a1a;
    transform: translate(-50%, -100%); cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
    animation: gentle-pin-pulse 2.5s infinite ease-in-out;
}
.map-pin svg { width: 100%; height: 100%; filter: drop-shadow(0px 3px 4px rgba(0,0,0,0.2)); }
.map-pin:hover { color: #d49278; transform: translate(-50%, -100%) scale(1.15); animation: none; }
@keyframes gentle-pin-pulse { 
    0% { transform: translate(-50%, -100%) scale(1); } 
    50% { transform: translate(-50%, -100%) scale(1.25); } 
    100% { transform: translate(-50%, -100%) scale(1); } 
}

/* Responsive (Handy) */
@media (max-width: 768px) {
    .lokanes-split-layout, .lokanes-set-grid { grid-template-columns: 1fr; gap: 40px; }
    .lokanes-grid-left { order: 2; }
    .lokanes-grid-right { order: 1; }
    .unboxing-text-col { padding: 0 20px !important; text-align: center; }
}

/* ===================================================
  Einzelprodukte
=================================================== */
/* Übernimmt die exakte Optik von .premium-product-info-panel, aber flexibel für das Grid */
.lokanes-single-panel {
    background-color: #e6ddd7; 
    border-radius: 20px; 
    padding: 35px 40px; 
    border: 1px solid rgba(255, 255, 255, 0.4); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.03); 
    display: flex; 
    flex-wrap: wrap; 
    gap: 30px; 
    align-items: center; 
    width: 100%;
    box-sizing: border-box;
}

.lokanes-single-panel-text {
    flex: 1.5;
    min-width: 250px;
}

.lokanes-single-panel-map {
    flex: 1;
    min-width: 150px;
    position: relative;
    min-height: 220px;
}

/* Vergrößert die Pins, ohne ihre Position auf der Karte zu zerschießen */
.lokanes-single-panel-map .scrolly-map-pin {
    transform: scale(1.4); /* 1.6 bedeutet 60% größer. Du kannst den Wert beliebig anpassen! */
    transform-origin: center;
    transform-box: fill-box;
}


/* ===================================================
   06. WARENKORB (OFF-CANVAS & MAIN)
=================================================== */

/* =========================================================
   LOKANES: Warenkorb Feedback-Animation (Glow & Pulse)
========================================================= */

/* Die Puls-Animation definieren */
@keyframes lokanesCartGlowPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(204, 158, 126, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 18px 8px rgba(204, 158, 126, 0);
        transform: scale(1.15); /* Wird leicht größer */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(204, 158, 126, 0);
        transform: scale(1);
    }
}

/* Ziel: NUR das Icon innerhalb des WoodMart-Warenkorbs */
.lokanes-cart-glow-active .wd-tools-icon {
    animation: lokanesCartGlowPulse 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 2;
    border-radius: 50%; /* Wichtig, damit der Glow kreisrund ist */
    color: #cc9e7e !important; /* Das Icon wird kurzzeitig Kupfer */
    background-color: transparent !important;
}

/* ----------------------------------------------------------------------------------- */
/* --- FIX: Verhindert abgehackte Bilder beim Hover-Zoom --- */
.cart-widget-side ul.cart_list li.woocommerce-mini-cart__item,
.cart-widget-side ul.cart_list li.mini_cart_item,
.wd-cart-content ul.cart_list li.woocommerce-mini-cart__item,
.wd-cart-content ul.cart_list li.mini_cart_item,
.cart-widget-side ul.cart_list li a,
.wd-cart-content ul.cart_list li a,
body.woocommerce-cart table .product-thumbnail,
body.woocommerce-cart table .product-thumbnail a {
    overflow: visible !important;
}

/* --- OFF-CANVAS WARENKORB --- */
.cart-widget-side, .wd-side-hidden, .cart-widget-side .widget-heading, .wd-heading, .cart-widget-side .widget-cart-content, .wd-cart-content, .cart-widget-side .shopping-cart-widget-footer, .wd-cart-footer {
    background-color: #f2f0ef !important;
    background-image: url("https://lokanes.de/wp-content/uploads/2026/03/handmade-paper.png") !important;
    background-repeat: repeat !important;
    font-family: 'Jost', sans-serif;
}

.cart-widget-side .widget-heading, .wd-heading { border-bottom: 1px solid rgba(204, 158, 126, 0.4) !important; padding: 30px 20px 20px 20px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; }
.cart-widget-side .widget-heading .widget-title, .wd-heading .title { font-family: 'Georgia', serif !important; font-size: 2.2rem !important; color: #1a1a1a !important; font-weight: 400 !important; margin: 0 !important; }
.cart-widget-side .widget-heading .close-side-widget, .wd-heading .wd-close-side { color: #666666 !important; font-family: 'Jost', sans-serif !important; font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.15em !important; display: inline-flex !important; align-items: center !important; transition: color 0.3s ease !important; }
.cart-widget-side .widget-heading .close-side-widget:hover, .wd-heading .wd-close-side:hover { color: #cc9e7e !important; }

/* Off-Canvas Items */
.cart-widget-side ul.cart_list li.woocommerce-mini-cart__item, 
.cart-widget-side ul.cart_list li.mini_cart_item,
.wd-cart-content ul.cart_list li.woocommerce-mini-cart__item,
.wd-cart-content ul.cart_list li.mini_cart_item { 
    background-color: transparent !important; 
    border-bottom: 1px solid rgba(26, 26, 26, 0.05) !important; 
    padding: 15px 20px !important; 
    margin-bottom: 5px !important; 
    border-radius: 12px !important; 
    transition: background-color 0.3s ease, border-color 0.3s ease !important; 
}

.cart-widget-side ul.cart_list li.woocommerce-mini-cart__item:hover, 
.cart-widget-side ul.cart_list li.mini_cart_item:hover,
.wd-cart-content ul.cart_list li.woocommerce-mini-cart__item:hover,
.wd-cart-content ul.cart_list li.mini_cart_item:hover { 
    background-color: rgba(204, 158, 126, 0.2) !important; 
    border-bottom-color: transparent !important; 
}

/* ===================================================
   BILD ZOOM & SCHATTEN FIX (Off-Canvas & Main Cart)
=================================================== */
.cart-widget-side ul.cart_list li img, 
.wd-cart-content ul.cart_list li img,
body.woocommerce-cart table .product-thumbnail img { 
    background-color: transparent !important; /* Keine weiße Box mehr */
    box-shadow: none !important; /* Verhindert den eckigen Kasten */
    border: none !important;
    /* Der clevere Schatten, der sich der Produktform anpasst: */
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.06)) !important; 
    transition: transform 0.4s ease, filter 0.4s ease !important; 
}

.cart-widget-side ul.cart_list li:hover img, 
.wd-cart-content ul.cart_list li:hover img,
body.woocommerce-cart table tr.cart_item:hover .product-thumbnail img { 
    transform: scale(1.08) !important; 
    /* FIX: Wir blockieren den Theme-Schatten auch im Hover-Zustand rigoros */
    box-shadow: none !important; 
    background-color: transparent !important;
    border: none !important;
    /* Unser eigener, intelligenter Schatten übernimmt */
    filter: drop-shadow(0 8px 15px rgba(0,0,0,0.15)) !important; 
}

/* Off-Canvas Text Fixes */
.cart-widget-side ul.cart_list li .product-title a, .wd-cart-info > a:not(.remove) { 
    color: #1a1a1a !important; 
    font-family: 'Jost', sans-serif !important; 
    font-weight: 500 !important; 
    font-size: 1.1rem !important; 
    text-decoration: none !important; 
    transition: color 0.3s ease !important; 
    white-space: normal !important; 
    line-height: 1.3 !important; 
}
.cart-widget-side ul.cart_list li:hover .product-title a, .cart-widget-side ul.cart_list li:hover .cart-info > a:not(.remove) { 
    color: #cc9e7e !important; 
}

/* FIX: Der gesamte Container verbietet den Umbruch (hält Pille & Preis zusammen) */
.cart-widget-side .cart-info, .wd-cart-info, .cart-widget-side ul.cart_list li > div { 
    display: block !important; 
    white-space: nowrap !important; 
}

/* FIX: Der Titel ist die Ausnahme, ist ein eigener Block und DARF umbrechen (auch auf Mobile) */
.cart-widget-side .cart-info > a:not(.remove), 
.cart-widget-side ul.cart_list li .product-title,
.cart-widget-side ul.cart_list li .product-title a { 
    display: block !important; 
    white-space: normal !important; 
    word-wrap: break-word !important; 
    overflow-wrap: break-word !important;
    width: 100% !important; 
    max-width: 100% !important;
    margin-bottom: 12px !important; 
}

/* Menge (Pille) und Preis bleiben jetzt strikt auf der unteren Zeile */
.cart-widget-side div.quantity { display: inline-flex !important; vertical-align: middle !important; border-radius: 50px !important; border: 1px solid #dcdcdc !important; height: 36px !important; padding: 0 8px !important; margin: 0 12px 0 0 !important; align-items: center !important; }
.cart-widget-side span.quantity { display: inline-flex !important; vertical-align: middle !important; align-items: center !important; font-size: 1.05rem !important; color: #1a1a1a !important; font-weight: 500 !important; margin: 0 !important; }
.cart-widget-side div.quantity input[type="button"] { background: transparent !important; border: none !important; color: #666 !important; font-size: 18px !important; width: 25px !important; padding: 0 !important; transition: color 0.3s ease !important; }
.cart-widget-side div.quantity input[type="button"]:hover { color: #cc9e7e !important; }
.cart-widget-side div.quantity input[type="number"].qty { border: none !important; background: transparent !important; font-size: 15px !important; font-weight: 500 !important; width: 30px !important; text-align: center !important; box-shadow: none !important; }

/* Off-Canvas Footer */
.cart-widget-side .shopping-cart-widget-footer { padding: 30px 25px !important; border-top: 1px solid rgba(26, 26, 26, 0.08) !important; }
.cart-widget-side .woocommerce-mini-cart__total { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(26, 26, 26, 0.1) !important; padding-bottom: 25px !important; margin-bottom: 25px !important; }
.cart-widget-side .woocommerce-mini-cart__total strong { font-weight: 400 !important; text-transform: uppercase; letter-spacing: 1px; color: #4a4a4a !important; }
.cart-widget-side .woocommerce-mini-cart__total .amount { font-size: 1.5rem !important; color: #1a1a1a !important; font-weight: 500 !important; }
.cart-widget-side .shopping-cart-widget-footer .buttons { display: flex; flex-direction: column; gap: 15px; }

/* Off-Canvas Buttons (Warenkorb & Kasse) */
.cart-widget-side .shopping-cart-widget-footer a.btn-cart,
.wd-cart-footer a.btn-cart,
.cart-widget-side .widget_shopping_cart_content .buttons a:not(.checkout) {
    display: flex !important; justify-content: center !important; align-items: center !important; padding: 15px 40px !important; background-color: transparent !important; border: 1px solid #1a1a1a !important; border-radius: 30px !important; color: #1a1a1a !important; font-family: 'Jost', sans-serif !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; font-weight: 500 !important; font-size: 0.85rem !important; transition: all 0.3s ease !important; box-shadow: none !important; text-decoration: none !important; width: 100% !important; margin-bottom: 15px !important;
}
.cart-widget-side .shopping-cart-widget-footer a.btn-cart:hover,
.wd-cart-footer a.btn-cart:hover,
.cart-widget-side .widget_shopping_cart_content .buttons a:not(.checkout):hover { background-color: #1a1a1a !important; color: #cc9e7e !important; }

.cart-widget-side .shopping-cart-widget-footer a.checkout,
.wd-cart-footer a.checkout {
    display: flex !important; justify-content: center !important; align-items: center !important; padding: 15px 40px !important; background-color: #1a1a1a !important; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.06'/%3E%3C/svg%3E") !important; background-size: 200px 200px !important; border: none !important; border-radius: 30px !important; color: #f2f0ef !important; font-family: 'Jost', sans-serif !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; font-weight: 500 !important; font-size: 0.85rem !important; transition: all 0.3s ease !important; box-shadow: none !important; text-decoration: none !important; width: 100% !important; 
}
.cart-widget-side .shopping-cart-widget-footer a.checkout:hover,
.wd-cart-footer a.checkout:hover { transform: translateY(-2px) !important; background-color: #2a2a2a !important; color: #cc9e7e !important; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important; }

/* Off-Canvas Empty State */
.cart-widget-side .wd-empty-mini-cart a.btn, .cart-widget-side .cart-widget-empty a.btn { 
    display: flex !important; justify-content: center !important; align-items: center !important; padding: 15px 40px !important; background-color: #1a1a1a !important; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.06'/%3E%3C/svg%3E") !important; background-size: 200px 200px !important; border: none !important; border-radius: 30px !important; color: #f2f0ef !important; font-family: 'Jost', sans-serif !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; font-weight: 500 !important; transition: all 0.3s ease !important; width: 100% !important; text-decoration: none !important;
}
.cart-widget-side .wd-empty-mini-cart a.btn:hover, .cart-widget-side .cart-widget-empty a.btn:hover { background-color: #2a2a2a !important; color: #cc9e7e !important; transform: translateY(-2px) !important; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important; }
.widget_shopping_cart .cart-widget-empty { color: #4a4a4a !important; font-family: 'Jost', sans-serif !important; font-size: 16px !important; }
/* ===============================================================
   LOKANES / WARENKORB-POLISH v2 · STAGING (Karten- und X-Fix)
   Nur klassische WooCommerce-Warenkorbseite, kein Checkout,
   kein Custom-Minicart, keine Änderung an Versand-/Preislogik.
   DIESEN BLOCK statt des bisherigen MAIN CART PAGE Blocks einsetzen.
   =============================================================== */




/* Leerer WARENKORB: ZURÜCK-BUTTON */
.cart-return-wrapper {
    text-align: center;
    margin-bottom: 80px;
}

@media (max-width: 768px) {
    .cart-return-wrapper {
        margin-bottom: 50px;
    }
}

/* ===================================================
   07. KASSE (CHECKOUT) - Tiefer EINGRIFF
=================================================== */

/* Globale Abrundung für alle WooCommerce Produkt-Vorschaubilder */
img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
    border-radius: 10px !important;
}
body.woocommerce-checkout label { font-family: 'Jost', sans-serif !important; font-size: 0.9rem !important; color: #666 !important; margin-bottom: 4px !important; display: block !important; }

/* =========================================
   CHECKOUT: ZAHLUNGSARTEN & CHECKBOXEN
========================================= */

/* 1. Die Radio-Buttons (Kreise) vergrößern */
#payment .payment_methods li input[type="radio"] {
    transform: scale(1.4); /* Macht den Punkt 40% größer */
    margin-right: 15px; /* Etwas mehr Luft zum Text */
    cursor: pointer;
}

/* 2. Den Text der Zahlungsarten anpassen */
#payment .payment_methods li label {
    font-size: 16px !important; /* Etwas präsenter */
    color: #1a1a1a; /* Ein sattes, tiefes Dunkelgrau/Schwarz für besseren Kontrast */
    font-weight: 400; /* Je nach Font evtl. auf 500 setzen, falls es zu dünn wirkt */
    cursor: pointer;
    vertical-align: middle;
}

/* ===================================================
   BANKDATEN (VORKASSE) STYLING
=================================================== */

/* Gesamte Bankdaten-Sektion zentrieren und absetzen */
.woocommerce-bacs-bank-details {
    text-align: center !important;
    margin-top: 20px !important;
    margin-bottom: 60px !important;
    width: 100% !important;
}

/* Hauptüberschrift "Unsere Bankverbindung" */
.woocommerce-bacs-bank-details .wc-bacs-bank-details-heading {
    font-family: 'Georgia', serif !important;
    font-size: 32px !important;
    color: #1a1a1a !important;
    font-weight: 400 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

/* Unterüberschrift: Name der GbR */
.woocommerce-bacs-bank-details .wc-bacs-bank-details-account-name {
    font-family: 'Jost', sans-serif !important;
    font-size: 20px !important;
    color: #000000 !important;
    letter-spacing: 2px !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
}

/* Die Liste mit den Bankdaten (IBAN, BIC) */
.woocommerce-bacs-bank-details ul.bacs_details {
    display: inline-block !important; /* Zentriert den Block an sich */
    visibility: visible !important;
    opacity: 1 !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* Einzelne Zeilen der Bankdaten */
.woocommerce-bacs-bank-details ul.bacs_details li {
    display: block !important;
    margin-bottom: 12px !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 16px !important;
    color: #4a4a4a !important;
}

/* Die Werte (Zahlen) kräftig hervorheben */
.woocommerce-bacs-bank-details ul.bacs_details li strong {
    font-weight: 500 !important;
    color: #1a1a1a !important;
    margin-left: 8px !important;
}

/* Die Vorfreude Sektion */
.lokanes-vorfreude-wrapper {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 0px 0 120px 0 !important; 
    background-color: transparent !important;
}

.lokanes-ty-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center !important;
    max-width: 1200px;
    margin: 0 auto 120px auto;
    gap: 40px !important;
}

.lokanes-ty-image-col { width: 45%; display: flex; justify-content: flex-end !important; }
.lokanes-ty-image-col img { width: 100%; max-width: 500px; height: auto; object-fit: contain; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.15)); }
.lokanes-ty-flyer-col { width: 50%; }

/* Der statische Vorfreude-Flyer */
.lokanes-static-flyer { background-color: #e6ddd7; border-radius: 30px; box-shadow: 0 25px 60px rgba(0,0,0,0.08); padding: 40px 50px; display: flex; align-items: center; opacity: 1 !important; transform: translateY(0) !important; margin-bottom: 0 !important; }

/* Tabellen-Styles ganz unten auf der Seite */
.woocommerce-order-details__title, .woocommerce-customer-details h2 { font-family: 'Georgia', serif !important; font-size: 32px !important; color: #1a1a1a !important; font-weight: 400 !important; margin-bottom: 30px !important; margin-top: 60px !important; }
.woocommerce-table--order-details thead th { font-family: 'Jost', sans-serif !important; text-transform: uppercase !important; font-size: 12px !important; letter-spacing: 2px !important; color: #666 !important; border-bottom: 2px solid #1a1a1a !important; padding-bottom: 20px !important; }
.woocommerce-table--order-details tbody td, .woocommerce-table--order-details tfoot th, .woocommerce-table--order-details tfoot td { border-top: 1px solid rgba(0,0,0,0.06) !important; padding: 25px 0 !important; color: #4a4a4a !important; font-family: 'Jost', sans-serif !important; }
.woocommerce-table--order-details tbody td.product-name a { color: #1a1a1a !important; font-family: 'Georgia', serif !important; font-size: 18px !important; text-decoration: none !important; }
.woocommerce-table--order-details tfoot tr:last-child th, .woocommerce-table--order-details tfoot tr:last-child td { border-top: 2px solid #1a1a1a !important; }
.woocommerce-table--order-details tfoot tr:last-child .woocommerce-Price-amount { color: #cc9e7e !important; font-size: 24px !important; font-weight: 500 !important; }

/* Responsive Thank You Page */
@media (max-width: 1100px) {
    .lokanes-ty-wrapper { flex-direction: column !important; gap: 0px !important; margin-bottom: 80px !important; }
    .lokanes-ty-image-col { width: 80%; justify-content: center !important; }
    .lokanes-ty-flyer-col { width: 100%; }

    .lokanes-static-flyer { position: relative !important; flex-direction: column; align-items: flex-start !important; padding: 40px 30px; }
    .lokanes-static-flyer .flyer-text-col { position: relative !important; z-index: 2 !important; text-align: left !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 60% !important; min-width: 280px; }
    .lokanes-static-flyer .flyer-map-col { display: block !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; right: 30px !important; width: 160px !important; margin: 0 !important; opacity: 1 !important; z-index: 1 !important; } 
}

@media (max-width: 768px) {
    .lokanes-vorfreude-wrapper { padding-bottom: 80px !important; }
}

@media (max-width: 600px) {
    .lokanes-static-flyer { padding: 30px 20px !important; }
    .lokanes-static-flyer .flyer-text-col { max-width: 100% !important; padding: 0 !important; }
    .lokanes-static-flyer .flyer-text-col .flyer-header, .lokanes-static-flyer .flyer-text-col .flyer-serif-title { padding-right: 110px !important; }
    .lokanes-static-flyer .flyer-text-col .product-description { padding-left: 0 !important; padding-right: 15px !important; }
    .lokanes-static-flyer .flyer-map-col { top: 20px !important; right: 20px !important; transform: none !important; width: 100px !important; opacity: 1 !important; } 
}


/* =========================================
   VORFREUDE-FLYER: DEUTSCHLANDKARTE VERKLEINERN
========================================= */

/* 1. Desktop Ansicht */
.lokanes-static-flyer .flyer-map-col {
    flex: 1 1 25%; /* Gibt dem Text mehr Platz (vorher 35%) */
    transform: scale(0.85); /* Zoomt die Karte heraus (auf der Produktseite ist sie bei 1.15) */
}

/* 2. Tablet Ansicht (Bis 1100px) */
@media (max-width: 1100px) {
    .lokanes-static-flyer .flyer-map-col {
        width: 140px !important; /* Vorher 160px */
    }
}

/* 3. Smartphone Ansicht (Bis 600px) */
@media (max-width: 600px) {
    .lokanes-static-flyer .flyer-map-col {
        width: 75px !important; /* Vorher 100px */
    }
}

/* =========================================
   LOKANES DASHBOARD BUTTON (RECHNUNG)
========================================= */

/* Grundzustand des Buttons */
.woocommerce-button.button.invoice {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #1a1a1a !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E") !important;
    background-size: 200px 200px !important;
    color: #f2f0ef !important; /* Beige/Weiß */
    padding: 10px 24px !important;
    border-radius: 50px !important;
    border: none !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer !important;
}

/* Hover-Zustand */
.woocommerce-button.button.invoice:hover {
    background-color: #262626 !important;
    color: #cc9e7e !important; /* Lokanes Kupfer */
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25) !important;
}

/* Aktiver/Fokus Zustand */
.woocommerce-button.button.invoice:active {
    transform: translateY(-1px) !important;
}

/* Entfernt Standard-WooCommerce-Icons, falls vorhanden */
.woocommerce-button.button.invoice::after {
    display: none !important;
}

/* ===================================================
   09. B2B / B2C SPEZIAL-SEKTIONEN (Marketing)
=================================================== */

/* --- BRAND STORY TEASER --- */
.lokanes-brand-section { width: 100%; background-color: #cc9e7e15; padding: 80px 0; margin-top: 80px; margin-bottom: 80px; font-family: 'Jost', sans-serif; border-radius: 40px; }
.brand-container { max-width: 1100px; margin: 0 auto; padding: 0 5%; display: flex; align-items: center; gap: 70px; }
.brand-image-col { flex: 1; }
.brand-image-link { display: block; text-decoration: none; }
.brand-image-wrapper { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.08); cursor: pointer; }
.brand-image-wrapper img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1; /* Quadratisch: Zeigt links und rechts deutlich mehr vom Originalbild als vorher */
    object-fit: cover;
    object-position: center 15%; /* Fokus auf die obere Hälfte, Köpfe bleiben sicher im Bild */
    display: block;
	transition: transform 0.4s ease; /* Diese Zeile sorgt für den smoothen Zoom! */
}

.brand-image-wrapper:hover img { transform: scale(1.03); }
.brand-text-col { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.brand-description { font-size: 16px; color: #4a4a4a; line-height: 1.7; margin-bottom: 25px; font-weight: 400; }
.brand-signature { font-family: 'Georgia', serif; font-style: italic; font-size: 22px; color: #cc9e7e; margin-bottom: 35px; }
.brand-button-wrapper { width: 100%; display: flex; flex-direction: row; align-items: center; gap: 15px; flex-wrap: wrap; }
.btn-text-mobile { display: none; }

@media (max-width: 900px) {
    .brand-container { flex-direction: column; gap: 40px; }
    .brand-text-col { order: -1; padding-right: 0; align-items: center; text-align: center; }
    .brand-button-wrapper { justify-content: center; }
    .brand-image-col { order: 2; width: 100%; max-width: 500px; }
    .brand-image-wrapper img { 
        aspect-ratio: 4/3; /* Ein viel sanfteres Querformat, das nach oben und unten genug Platz für die Gesichter lässt */
    }
}
@media (max-width: 500px) {
    .btn-text-desktop { display: none !important; }
    .btn-text-mobile { display: inline !important; }
}

/* --- B2B SPLIT SECTION --- */
.lokanes-b2b-split-section { padding: 100px 0; width: 100%; }
.split-container { display: flex; justify-content: center; gap: 60px; max-width: 1200px; margin: 0 auto; padding: 0 30px; }
.split-card-link { flex: 1; display: flex; flex-direction: column; text-decoration: none !important; color: inherit; cursor: pointer; }
.split-image-wrapper { width: 100%; height: 380px; overflow: hidden; border-radius: 20px; }
.split-image-wrapper img, .split-image-wrapper canvas { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.split-content-wrapper { padding: 35px 0 0 0; display: flex; flex-direction: column; align-items: flex-start; flex-grow: 1; }
.split-title { font-size: 26px; font-weight: 600; color: #1a1a1a; margin: 0 0 20px 0; font-family: inherit; }
.split-text { font-size: 16px; color: #4a4a4a; line-height: 1.7; margin: 0 0 40px 0; flex-grow: 1; }

.split-card-link:hover .split-image-wrapper img, .split-card-link:hover .split-image-wrapper canvas, .split-card-link:hover .canvas-freestanding { transform: scale(1.05); }
.split-card-link:hover .split-fake-btn { background-color: #2a2a2a !important; 
    color: #cc9e7e !important; ; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.split-freestanding-wrapper { width: 100%; height: 380px; display: flex; align-items: center; justify-content: center; }
.canvas-freestanding { height: 140%; width: auto; max-width: 100%; object-fit: contain; display: block; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); filter: drop-shadow(0 15px 25px rgba(0,0,0,0.08)); }

@media (max-width: 900px) { 
    .split-container { flex-direction: column; gap: 60px; }
    .split-image-wrapper { height: 300px; }
    .split-title { font-size: 24px; }
}

/* --- B2C HIGHLIGHT BOXEN --- */
.lokanes-b2c-highlights { width: 100%; max-width: 1100px; margin: 60px auto 80px auto; padding: 0 20px; font-family: 'Jost', sans-serif; }
.highlight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.highlight-card { display: flex; flex-direction: column; align-items: flex-start; background-color: rgba(204, 158, 126, 0.12); border-radius: 30px; padding: 50px 45px; }
.highlight-icon { width: 45px; height: 45px; margin-bottom: 25px; color: #cc9e7e; }
.highlight-title { font-family: 'Georgia', serif; font-size: 24px; font-weight: 400; color: #1a1a1a; margin: 0 0 15px 0; line-height: 1.3; }
.highlight-text { font-size: 16px; color: #4a4a4a; line-height: 1.7; margin: 0; font-weight: 400; }

@media (max-width: 768px) {
    .highlight-grid { grid-template-columns: 1fr; gap: 30px; }
    .highlight-card { padding: 40px 35px; border-radius: 25px; }
    .lokanes-b2c-highlights { margin: 40px auto 60px auto; }
}

    /* =========================================
   B2C HIGHLIGHTS: HOVER & MODALS (POPUPS)
========================================= */

/* Der interaktive Hover für die Boxen */
.highlight-card.lokanes-modal-trigger {
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, background-color 0.4s ease;
}

.highlight-card.lokanes-modal-trigger:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    background-color: rgba(204, 158, 126, 0.18);
}

/* Das PopUp Fundament (Versteckt) */
.lokanes-premium-modal {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

/* Wenn das PopUp geöffnet wird */
.lokanes-premium-modal.is-open {
    opacity: 1;
    visibility: visible;
}

/* Der abgedunkelte, verschwommene Hintergrund */
.lokanes-modal-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(26, 26, 26, 0.4);
    backdrop-filter: blur(5px);
    cursor: pointer;
}

/* Die weiße Papier-Box in der Mitte */
.lokanes-modal-content {
    position: relative;
    z-index: 2;
    background-color: #f2f0ef;
    background-image: url("https://lokanes.de/wp-content/uploads/2026/03/handmade-paper.png");
    width: 90%;
    max-width: 550px;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
    
    /* Animations-Startpunkt (leicht nach unten verschoben) */
    transform: translateY(30px) scale(0.95);
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lokanes-premium-modal.is-open .lokanes-modal-content {
    transform: translateY(0) scale(1);
}

/* Schließen-Button (Das X oben rechts) */
.lokanes-modal-close {
    position: absolute;
    top: 15px; right: 20px;
    background: none; border: none;
    font-size: 32px; font-weight: 300;
    color: #1a1a1a;
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 0;
}
.lokanes-modal-close:hover { color: #cc9e7e; }

/* Inhalte im PopUp */
.lokanes-modal-image {
    width: 100%; height: 250px;
    margin-bottom: 25px;
    border-radius: 12px;
    overflow: hidden;
}
.lokanes-modal-image img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.modal-headline {
    font-family: 'Georgia', serif;
    font-size: 28px;
    color: #cc9e7e;
    margin: 0 0 15px 0;
    line-height: 1.2;
}
.modal-description {
    font-family: 'Jost', sans-serif;
    font-size: 16px; color: #4a4a4a;
    line-height: 1.6; margin: 0;
}

@media (max-width: 768px) {
    .lokanes-modal-content { padding: 30px 20px; }
    .lokanes-modal-image { height: 180px; }
    .modal-headline { font-size: 24px; }
}


/* ===================================================
   10. Trust / Promise Bars
=================================================== */
/* =========================================
   HERO TRUST BAR (Editorial Style)
   ========================================= */

.lokanes-hero-trust-bar {
    width: 100%;
    border-top: 1px solid rgba(204, 158, 126, 0.2);
    border-bottom: 1px solid rgba(204, 158, 126, 0.2);
    background-color: transparent;
    padding: 30px 0;
    font-family: 'Jost', sans-serif;
}

.hero-trust-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    align-items: center; /* Hält die linke Überschrift und das Grid auf einer Mittel-Linie */
    gap: 50px;
}

/* --- DIE NEUE INTRO-SPALTE LINKS --- */
.hero-trust-intro {
    flex: 0 0 250px;
    border-right: 1px solid rgba(204, 158, 126, 0.3);
    padding-right: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Zentriert die Überschrift auch vertikal */
}

.intro-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #cc9e7e;
    margin-bottom: 8px;
    font-weight: 500;
}

.intro-title {
    font-family: 'Georgia', serif;
    font-size: 26px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.1;
    margin: 0;
}

/* --- DAS GRID FÜR DIE 3 WERTE --- */
.hero-trust-grid {
    flex: 1; 
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: flex-start; /* WIEDER OBENBÜNDIG: Zieht eine unsichtbare Linie an der Oberkante */
}

.hero-trust-item {
    display: flex;
    align-items: flex-start; /* WIEDER OBENBÜNDIG */
    gap: 15px; 
}

.hero-trust-icon {
    width: 35px; 
    height: 35px;
    flex-shrink: 0;
    color: #cc9e7e; 
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3px; /* NEU: Schiebt das Icon exakt auf die Lesehöhe der ersten Textzeile */
}

.hero-trust-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.lokanes-de-map {
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
    transform: scale(1.25); 
    /* NEU: 4-Wege-Schatten, um die Linie künstlich, aber sauber anzudicken */
    filter: invert(72%) sepia(21%) saturate(692%) hue-rotate(339deg) brightness(88%) contrast(85%)
}

.hero-trust-title {
    font-family: 'Georgia', serif; 
    font-size: 18px; 
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.2;
    margin-bottom: 4px;
}

.hero-trust-text {
    display: flex;
    flex-direction: column;      /* Zwingt Titel und Subtitle exakt untereinander */
    justify-content: flex-start; /* NEU: Zieht den Textblock bündig nach oben zum Icon */
    padding-top: 2px;            /* Ein winziger Schubs, damit die Schrift-Oberkante perfekt zum Icon passt */
}

.hero-trust-subtitle {
    font-size: 15px; 
    font-weight: 300;
    color: #666;
    line-height: 1.4;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 1024px) {
    .hero-trust-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .hero-trust-intro {
        flex: auto;
        border-right: none;
        border-bottom: 1px solid rgba(204, 158, 126, 0.3);
        padding-right: 0;
        padding-bottom: 20px;
        width: 100%;
        justify-content: flex-start;
    }
    
    /* Die große Intro-Überschrift darf auf Mobile auch einen Hauch größer sein */
    .intro-title {
        font-size: 30px; 
    }

    .hero-trust-grid {
        grid-template-columns: 1fr;
        gap: 30px; /* Etwas mehr Luft zwischen den Blöcken auf dem Handy */
        width: 100%;
        align-items: flex-start; 
    }
    
    /* --- HIER WIRD ES AUF DEM HANDY GRÖSSER --- */
    
    /* 1. Die Icons etwas größer & Safari-Bug-Fix */
    .hero-trust-icon {
        width: 42px; 
        height: 42px;
        min-width: 42px; /* Zwingt Safari, die Box niemals kleiner zu machen */
        flex-shrink: 0;
    }
    
    /* 2. Die Titel der 3 Werte größer */
    .hero-trust-title {
        font-size: 21px; 
        margin-bottom: 6px; /* Etwas mehr Luft nach unten */
    }
    
    /* 3. Den Fließtext besser lesbar machen */
    .hero-trust-subtitle {
        font-size: 15px; 
        line-height: 1.5; /* Leicht erhöhter Zeilenabstand für besseren Lesefluss */
    }
}

/* =========================================
   PROMISE BAR (Service & Versand - Statisch)
========================================= */

.lokanes-promise-bar {
    width: 100%;
    border-top: 1px solid rgba(204, 158, 126, 0.2);
    border-bottom: 1px solid rgba(204, 158, 126, 0.2);
    background-color: transparent;
    padding: 40px 0;
    font-family: 'Jost', sans-serif;
}

.promise-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* --- INTRO SPALTE LINKS --- */
.promise-intro {
    flex: 0 0 250px;
    border-right: 1px solid rgba(204, 158, 126, 0.3);
    padding-right: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.promise-intro .intro-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #cc9e7e;
    margin-bottom: 8px;
    font-weight: 500;
}

.promise-intro .intro-title {
    font-family: 'Georgia', serif;
    font-size: 32px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.15;
    margin: 0;
}

/* --- DAS GRID RECHTS (2 Spalten) --- */
.promise-grid {
    flex: 1; 
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 50px; 
    align-items: flex-start;
}

/* Statisch: Kein Cursor, keine Hover-Transforms */
.promise-item {
    display: flex;
    align-items: flex-start;
    gap: 20px; 
}

.promise-icon {
    width: 40px; 
    height: 40px;
    flex-shrink: 0;
    color: #cc9e7e; 
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3px;
}

.promise-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.promise-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 2px;
}

.promise-title {
    font-family: 'Georgia', serif; 
    font-size: 22px; 
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.2;
    margin-bottom: 8px;
}

.promise-subtitle {
    font-size: 15px; 
    font-weight: 300;
    color: #666;
    line-height: 1.5;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 1024px) {
    .promise-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    .promise-intro {
        flex: auto;
        border-right: none;
        border-bottom: 1px solid rgba(204, 158, 126, 0.3);
        padding-right: 0;
        padding-bottom: 25px;
        width: 100%;
        justify-content: flex-start;
    }
    
    .promise-intro .intro-title { font-size: 34px; }

    .promise-grid {
        grid-template-columns: 1fr; 
        gap: 35px; 
        width: 100%;
    }
    
    .promise-icon { width: 45px; height: 45px; min-width: 45px; }
    .promise-title { font-size: 24px; margin-bottom: 6px; }
    .promise-subtitle { font-size: 16px; }
}

/* =========================================
   STANDALONE FLOATING KONTAKT BUTTON
   (Völlig unabhängig vom Warenkorb-Button)
========================================= */

.lokanes-floating-contact {
    /* 1. Die Floating-Eigenschaften */
    position: fixed !important;
    bottom: 40px !important;      
    right: 40px !important;        
    z-index: 99 !important; 
    gap: 12px !important; 

    /* 2. Das Lokanes-Textur-Design */
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 16px 45px !important;
    background-color: #1a1a1a !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E") !important;
    background-size: 200px 200px !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: #f2f0ef !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    border: none !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

/* Hover-Effekte */
.lokanes-floating-contact:hover {
    transform: translateY(-2px) !important;
    background-color: #2a2a2a !important; 
    color: #cc9e7e !important; 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important; 
}

.lokanes-floating-contact:hover svg {
    transform: scale(1.1) !important;
}

/* --- MOBILE ANSICHT: Perfekter Kreis --- */
@media (max-width: 768px) {
    .lokanes-floating-contact {
        bottom: 25px !important;
        right: 25px !important;
        
        /* Feste Maße statt Padding */
        width: 60px !important;
        height: 60px !important;
        min-height: 60px !important; /* Verhindert das Stauchen */
        padding: 0 !important; 
        border-radius: 50% !important; 
        
        justify-content: center !important;
        align-items: center !important;
    }
    
    .lokanes-floating-contact .floating-text {
        display: none !important; 
    }
    
    .lokanes-floating-contact svg {
        width: 26px !important; 
        height: 26px !important;
        margin: 0 !important; 
    }
}
/* ===================================================
   11. MEIN KONTO - PREMIUM BOUTIQUE LOOK (FINAL)
=================================================== */

/* 1. Die Seitenleiste (Navigation links) aufhübschen */
.woocommerce-MyAccount-navigation ul li a {
    font-family: 'Jost', sans-serif !important;
    font-size: 15px !important;
    color: #888 !important;
    background: transparent !important;
    padding: 10px 0 !important;
    border-radius: 0 !important;
    transition: all 0.3s ease !important;
    display: inline-block;
    position: relative;
}

/* Sanfter Hover-Effekt (leichtes Einrücken) */
.woocommerce-MyAccount-navigation ul li a:hover {
    color: #cc9e7e !important;
    transform: translateX(5px);
}

/* Der aktive Menüpunkt (Minimalistisch statt grauer Box) */
.woocommerce-MyAccount-navigation ul li.is-active a {
    color: #1a1a1a !important;
    font-weight: 500 !important;
}

/* Der edle Kupfer-Strich unter dem aktiven Punkt */
.woocommerce-MyAccount-navigation ul li.is-active a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 15px;
    height: 2px;
    background-color: #cc9e7e;
    transition: width 0.3s ease;
}
.woocommerce-MyAccount-navigation ul li.is-active a:hover::after {
    width: 30px;
}

/* =================================================== */
/* 2. Die Dashboard-Kacheln (Rechts) - ENDGÜLTIGER FIX */

.wd-my-account-links {
    gap: 20px !important; 
    margin-top: 30px !important;
}

/* 1. NUR DIE KACHELN (äußere Boxen) bekommen den Rahmen! */
div.woocommerce-MyAccount-content .wd-my-account-links a,
div.woocommerce-MyAccount-content .woodmart-my-account-links a {
    border: 1px solid rgba(204, 158, 126, 0.4) !important; /* Hier ist der zarte Kupfer-Rand wieder! */
    background-color: transparent !important; 
    border-radius: 8px !important;
    box-shadow: none !important; 
    transition: all 0.4s ease !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1a1a1a !important; /* Textfarbe grundlegend dunkel */
}

/* Kachel Hover-Effekt */
div.woocommerce-MyAccount-content .wd-my-account-links a:hover,
div.woocommerce-MyAccount-content .woodmart-my-account-links a:hover {
    border-color: #cc9e7e !important;
    background-color: rgba(204, 158, 126, 0.05) !important; 
    transform: translateY(-3px) !important;
}

/* 2. NUR DER TEXT (Absicherung gegen störende Rahmen) */
div.woocommerce-MyAccount-content .wd-my-account-links a span {
    color: #1a1a1a !important; 
    font-weight: 500 !important;
    border: none !important; 
    background: transparent !important;
}

/* 3. DIE ICONS AUF KUPFER ZWINGEN */
div.woocommerce-MyAccount-content .wd-my-account-links a::before,
div.woocommerce-MyAccount-content .wd-my-account-links a .wd-icon,
div.woocommerce-MyAccount-content .wd-my-account-links a svg,
div.woocommerce-MyAccount-content .wd-my-account-links a img {
    color: #cc9e7e !important; 
    fill: #cc9e7e !important; 
    stroke: #cc9e7e !important; 
    filter: brightness(0) saturate(100%) invert(45%) sepia(34%) saturate(1067%) hue-rotate(344deg) brightness(88%) contrast(89%) !important;
    opacity: 0.9 !important; 
    transition: transform 0.4s ease, opacity 0.4s ease !important;
    margin-bottom: 10px !important;
    border: none !important; /* Kein Rahmen um die Icons */
}

/* Icon Hover-Effekt */
div.woocommerce-MyAccount-content .wd-my-account-links a:hover::before,
div.woocommerce-MyAccount-content .wd-my-account-links a:hover .wd-icon,
div.woocommerce-MyAccount-content .wd-my-account-links a:hover svg,
div.woocommerce-MyAccount-content .wd-my-account-links a:hover img {
    transform: scale(1.1) !important;
    opacity: 1 !important;
}
/* =================================================== */
/* 3. Typografie im Textbereich verfeinern */
.woocommerce-MyAccount-content p {
    font-family: 'Jost', sans-serif !important;
    color: #666 !important;
    line-height: 1.7 !important;
    font-size: 15px !important;
}

/* Normale Text-Links im Fließtext kupfer färben */
.woocommerce-MyAccount-content a:not(.button):not(.wd-my-account-link) {
    color: #cc9e7e !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}
.woocommerce-MyAccount-content a:not(.button):not(.wd-my-account-link):hover {
    border-bottom-color: #cc9e7e !important;
}

/* =================================================== */
/* 4. MEIN KONTO - BUTTONS (LOKANES TEXTUR) */

/* Alle Buttons im Inhaltsbereich (Anzeigen, Speichern, etc.) */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button.button,
.woocommerce-MyAccount-content input.button,
.woocommerce-MyAccount-content .woocommerce-Button {
    background-color: #1a1a1a !important; /* Schwarze Basis */
    color: #ffffff !important; /* Heller Text im Normalzustand */
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 40px !important; /* Auf 30px ändern, falls ihr runde "Pill"-Buttons nutzt! */
    padding: 12px 24px !important;
    transition: all 0.4s ease !important;
    
    /* DIE MAGIE: Generiertes Bildrauschen (Noise) als Textur */
    background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.15"/%3E%3C/svg%3E') !important;
}

/* Hover-Effekt: Geht hoch, Text wird Kupfer, sanfter Schatten */
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content button.button:hover,
.woocommerce-MyAccount-content input.button:hover,
.woocommerce-MyAccount-content .woocommerce-Button:hover {
    background-color: #222222 !important; /* Hebt sich farblich ganz leicht ab */
    color: #cc9e7e !important; /* Euer Kupfer! */
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.15) !important;
}
/* =================================================== */

/* Standard-Begrüßung im Dashboard ausblenden */
.woocommerce-MyAccount-content > p:first-of-type,
.woocommerce-MyAccount-content > div > p:first-of-type {
    display: none !important;
}

/* Den nervigen Standard-Text im Dashboard rigoros ausblenden */
.woocommerce-MyAccount-content > p, 
.woocommerce-MyAccount-content > div > p {
    display: none !important;
}

/* ===================================================
   PUNKT 2: BESTELLUNGEN ALS PREMIUM-KARTEN
=================================================== */

/* 1. DESKTOP VEREDELUNG (Luftige, horizontale Karten) - KORREKTUR */
.woocommerce-MyAccount-content table.shop_table.my_account_orders {
    border: none !important;
    border-collapse: separate !important;
    border-spacing: 0 15px !important; 
    background: transparent !important;
}

/* Tabellenkopf veredeln */
.woocommerce-MyAccount-content table.shop_table.my_account_orders thead th {
    font-family: 'Jost', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 11px !important;
    color: #cc9e7e !important; 
    border-bottom: 1px solid rgba(204, 158, 126, 0.3) !important;
    padding: 10px 20px !important;
    background: transparent !important;
}

/* Den Hintergrund und die Ränder auf ALLE ZELLEN (th und td) legen */
.woocommerce-MyAccount-content table.shop_table.my_account_orders tbody td,
.woocommerce-MyAccount-content table.shop_table.my_account_orders tbody th {
    border: none !important;
    padding: 20px !important;
    background: rgba(255, 255, 255, 0.35) !important; 
    vertical-align: middle !important;
    color: #1a1a1a !important;
    border-top: 1px solid rgba(204, 158, 126, 0.15) !important;
    border-bottom: 1px solid rgba(204, 158, 126, 0.15) !important;
    transition: all 0.3s ease !important;
}

/* Linke Ecke der Karte abrunden (Hier versteckt sich das th-Element!) */
.woocommerce-MyAccount-content table.shop_table.my_account_orders tbody th:first-child,
.woocommerce-MyAccount-content table.shop_table.my_account_orders tbody td:first-child {
    border-left: 1px solid rgba(204, 158, 126, 0.15) !important;
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}

/* Rechte Ecke der Karte abrunden */
.woocommerce-MyAccount-content table.shop_table.my_account_orders tbody td:last-child {
    border-right: 1px solid rgba(204, 158, 126, 0.15) !important;
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* Hover-Effekt: Zellen werden milchiger */
.woocommerce-MyAccount-content table.shop_table.my_account_orders tbody tr:hover td,
.woocommerce-MyAccount-content table.shop_table.my_account_orders tbody tr:hover th {
    background: rgba(255, 255, 255, 0.6) !important;
    border-color: rgba(204, 158, 126, 0.4) !important;
}

/* Zeile schwebt leicht nach oben */
.woocommerce-MyAccount-content table.shop_table.my_account_orders tbody tr:hover {
    transform: translateY(-2px) !important;
}
/* 2. MOBILE APP-LOOK (Vertikale Karten) */
@media (max-width: 768px) {
    .woocommerce-MyAccount-content table.shop_table.my_account_orders thead {
        display: none !important; /* Versteckt die unnötige Kopfzeile auf dem Handy */
    }

    .woocommerce-MyAccount-content table.shop_table.my_account_orders tbody tr {
        display: block !important;
        margin-bottom: 25px !important;
        padding: 15px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(204, 158, 126, 0.3) !important;
        background: rgba(255, 255, 255, 0.6) !important;
    }

    .woocommerce-MyAccount-content table.shop_table.my_account_orders tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: right !important;
        padding: 12px 5px !important;
        border: none !important; /* Entfernt die Desktop-Ränder */
        border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    }

    /* Der Button ganz unten in der mobilen Karte */
    .woocommerce-MyAccount-content table.shop_table.my_account_orders tbody td:last-child {
        border-bottom: none !important;
        justify-content: center !important;
        margin-top: 15px !important;
        padding-bottom: 0 !important;
    }

    /* WooCommerce "Data-Title" Trick: Fügt Label (Bestellung, Datum etc.) links ein */
    .woocommerce-MyAccount-content table.shop_table.my_account_orders tbody td::before {
        content: attr(data-title);
        font-family: 'Jost', sans-serif !important;
        font-weight: 500 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        font-size: 10px !important;
        color: #cc9e7e !important;
        text-align: left !important;
        margin-right: 15px !important;
    }
}

/* ===================================================
   EINGABEFELDER & FORMULARE (PREMIUM LOOK)
=================================================== */

/* Das Standard-Grau entfernen und durch klares Weiß ersetzen */
.woocommerce-MyAccount-content form .input-text,
.woocommerce-MyAccount-content form input[type="text"],
.woocommerce-MyAccount-content form input[type="email"],
.woocommerce-MyAccount-content form input[type="password"],
.woocommerce-MyAccount-content form input[type="tel"] {
    background-color: #ffffff !important; /* Strahlendes Weiß */
    border: 1px solid rgba(204, 158, 126, 0.4) !important; /* Zarter Kupfer-Rahmen */
    border-radius: 8px !important;
    padding: 14px 18px !important;
    color: #1a1a1a !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 15px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02) !important; /* Hauchzarter Schatten */
    transition: all 0.3s ease !important;
    width: 100% !important; /* Zwingt die Felder auf volle Breite */
}

/* Hover-Effekt: Wenn die Maus über das Feld fährt */
.woocommerce-MyAccount-content form .input-text:hover,
.woocommerce-MyAccount-content form input[type="text"]:hover,
.woocommerce-MyAccount-content form input[type="email"]:hover,
.woocommerce-MyAccount-content form input[type="password"]:hover,
.woocommerce-MyAccount-content form input[type="tel"]:hover {
    border-color: rgba(204, 158, 126, 0.8) !important;
}

/* Fokus-Effekt: Wenn man in das Feld klickt und tippt */
.woocommerce-MyAccount-content form .input-text:focus,
.woocommerce-MyAccount-content form input[type="text"]:focus,
.woocommerce-MyAccount-content form input[type="email"]:focus,
.woocommerce-MyAccount-content form input[type="password"]:focus,
.woocommerce-MyAccount-content form input[type="tel"]:focus {
    border-color: #cc9e7e !important; /* Rahmen wird voll Kupfer */
    box-shadow: 0 4px 15px rgba(204, 158, 126, 0.15) !important; /* Kupfernes Leuchten */
    background-color: #ffffff !important;
    outline: none !important;
}

/* Fieldset (Die große Box um die Passwort-Änderung) unsichtbar machen */
.woocommerce-MyAccount-content fieldset {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 30px !important;
}

.woocommerce-MyAccount-content legend {
    font-family: 'Georgia', serif !important;
    font-size: 24px !important;
    color: #1a1a1a !important;
    margin-bottom: 15px !important;
}

/* ===================================================
   WOODMART NEWSLETTER-CHECKBOX AUSBLENDEN
=================================================== */

/* Versteckt genau dieses spezielle WoodMart-Feld mitsamt dem Absatz darum */
.woocommerce-MyAccount-content form p:has(input[name="wd_email_subscription_consent"]),
label:has(input[name="wd_email_subscription_consent"]) {
    display: none !important;
}

/* ===================================================
   LOGIN & REGISTRIERUNG - BUTTONS (LOKANES TEXTUR)
=================================================== */

/* Die Anmelde- und Registrierungs-Buttons zielsicher ansprechen */
form.woocommerce-form-login button.woocommerce-form-login__submit,
form.woocommerce-form-register button.woocommerce-form-register__submit,
form.login button.button,
form.register button.button,
.login-form-side button.button {
    background-color: #1a1a1a !important; /* Schwarze Basis */
    color: #ffffff !important; /* Heller Text im Normalzustand */
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 40px !important; /* Falls eure anderen Buttons runder sind, hier anpassen! */
    padding: 14px 24px !important;
    transition: all 0.4s ease !important;
    
    /* DIE MAGIE: Generiertes Bildrauschen (Noise) als Textur */
    background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.15"/%3E%3C/svg%3E') !important;
}

/* Hover-Effekt: Geht hoch, Text wird Kupfer, sanfter Schatten */
form.woocommerce-form-login button.woocommerce-form-login__submit:hover,
form.woocommerce-form-register button.woocommerce-form-register__submit:hover,
form.login button.button:hover,
form.register button.button:hover,
.login-form-side button.button:hover {
    background-color: #222222 !important; 
    color: #cc9e7e !important; /* Euer Kupfer! */
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.15) !important;
}

/* ===================================================
   WILLKOMMENS-BLOCK AUF UNTERSEITEN ABSOLUT VERSTECKEN
=================================================== */

/* Der Scanner blendet den Block aus, sobald Tabellen, Formulare oder Sendungen da sind */
body:has(.woocommerce-MyAccount-orders) .lokanes-dashboard-welcome,
body:has(.my_account_orders) .lokanes-dashboard-welcome,
body:has(.woocommerce-address-fields) .lokanes-dashboard-welcome,
body:has(.woocommerce-EditAccountForm) .lokanes-dashboard-welcome,
body:has(.woocommerce-order-details) .lokanes-dashboard-welcome,
body.woocommerce-view-order .lokanes-dashboard-welcome,
body.woocommerce-view-shipment .lokanes-dashboard-welcome, /* NEU: Sendungsdetails */
body:has(.woocommerce-MyAccount-shipments) .lokanes-dashboard-welcome {
    display: none !important;
}

/* ===================================================
   LOGIN & REGISTRIERUNG - EINGABEFELDER (PREMIUM)
=================================================== */

/* Felder auf der Anmelde- und Registrierungsseite ansprechen */
.woocommerce form.login .input-text,
.woocommerce form.register .input-text,
.login-form-side .input-text {
    background-color: #ffffff !important; 
    border: 1px solid rgba(204, 158, 126, 0.4) !important; 
    border-radius: 8px !important;
    padding: 14px 18px !important;
    color: #1a1a1a !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 15px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02) !important; 
    transition: all 0.3s ease !important;
    width: 100% !important; 
}

/* Hover-Effekt */
.woocommerce form.login .input-text:hover,
.woocommerce form.register .input-text:hover,
.login-form-side .input-text:hover {
    border-color: rgba(204, 158, 126, 0.8) !important;
}

/* Fokus-Effekt (Beim Reinklicken) */
.woocommerce form.login .input-text:focus,
.woocommerce form.register .input-text:focus,
.login-form-side .input-text:focus {
    border-color: #cc9e7e !important; 
    box-shadow: 0 4px 15px rgba(204, 158, 126, 0.15) !important; 
    background-color: #ffffff !important;
    outline: none !important;
}

/* ===================================================
   KAPUTTES PASSWORT-AUGE VERSTECKEN
=================================================== */

/* Das weiße Kästchen (Passwort anzeigen) überall rigoros ausblenden */
button.show-password-input,
.show-password-input {
    display: none !important;
}

/* ===================================================
   LOGIN & REGISTRIERUNG - KARTEN-LAYOUT & DETAILS
=================================================== */

/* 1. Die Premium-Karte für das Login (Notizzettel-Ästhetik) */
.woocommerce form.login {
    background-color: #e6ddd7 !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 20px !important;
    padding: 40px 50px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important;
    margin-bottom: 30px !important;
}

/* 2. Die Karte für die Registrierung (Zartes Kupfer) */
/* 2. Die Karte für die Registrierung (Notizzettel-Optik) */
.woocommerce form.register,
.woocommerce-MyAccount-content .col-register-text {
    background-color: #e6ddd7 !important; /* Der gleiche beige Ton wie beim Login */
    border: 1px solid rgba(255, 255, 255, 0.6) !important; /* Zarter, weißer Rand */
    border-radius: 20px !important;
    padding: 40px 50px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important;
    margin-bottom: 30px !important;
}

/* Die Texte in der Registrierungsbox für den hellen Hintergrund optimieren */
.woocommerce form.register > p:not(.form-row),
.woocommerce form.register .woocommerce-privacy-policy-text {
    color: #4a4a4a !important;
    font-family: 'Jost', sans-serif !important;
    line-height: 1.6 !important;
}

/* Mobile Anpassung für beide Karten (etwas weniger Innenabstand) */
@media (max-width: 768px) {
    .woocommerce form.login, 
    .woocommerce form.register,
    .woocommerce-MyAccount-content .col-register-text {
        padding: 30px 20px !important;
    }
}

/* 3. Typografie der Überschriften in den Karten */
.woocommerce form.login h2, 
.woocommerce form.register h2,
.woocommerce-MyAccount-content .col-register-text h2,
.u-columns h2 {
    font-family: 'Georgia', serif !important;
    font-size: 32px !important;
    color: #1a1a1a !important;
    font-weight: 400 !important;
    margin-bottom: 25px !important;
    text-align: center !important;
}

/* 4. ABSOLUTE BRECHSTANGE: Der Registrieren-Button */
html body a.wd-switch-to-register,
html body .wd-switch-to-register.btn,
html body .col-register-text a.btn {
    background-color: #1a1a1a !important; 
    color: #ffffff !important; 
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 40px !important; 
    padding: 14px 24px !important;
    transition: all 0.4s ease !important;
    background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.15"/%3E%3C/svg%3E') !important;
    display: inline-block !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

html body a.wd-switch-to-register:hover,
html body .wd-switch-to-register.btn:hover,
html body .col-register-text a.btn:hover {
    background-color: #222222 !important; 
    color: #cc9e7e !important; 
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.15) !important;
}

/* 5. Aufgeräumte Details (Passwort vergessen) */
.woocommerce form.login .woocommerce-LostPassword a {
    font-family: 'Jost', sans-serif !important;
    font-size: 14px !important;
    color: #666666 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    display: inline-block !important;
    margin-top: 10px !important;
}

.woocommerce form.login .woocommerce-LostPassword a:hover {
    color: #cc9e7e !important; /* Kupfer beim Hovern */
}

/* 6. Das "Angemeldet bleiben"-Häkchen aufräumen */
.woocommerce form.login label.woocommerce-form__label-for-checkbox {
    font-family: 'Jost', sans-serif !important;
    font-size: 14px !important;
    color: #666666 !important;
    margin-top: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ===================================================
   LOKANES WOOCOMMERCE INFO-BOXEN (KORRIGIERT)
=================================================== */

/* Die Box selbst in Kupfer */
.woocommerce-info {
    background-color: #cc9e7e !important; 
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    /* FIX: 60px Platz auf der linken Seite für das Icon! */
    padding: 15px 25px 15px 60px !important; 
    position: relative !important; 
}

/* Das Info-Icon perfekt ausrichten */
.woocommerce-info::before {
    color: #ffffff !important;
    position: absolute !important;
    left: 20px !important; /* Fixiert das Icon sicher am linken Rand */
    top: 50% !important;
    transform: translateY(-50%) !important; /* Zentriert es vertikal */
}

/* Den Button noch spezifischer anvisieren, damit das Theme überschrieben wird */
.woocommerce-info a,
.woocommerce-message a,
.woocommerce-error a {
    background-color: #1a1a1a !important; 
    color: #ffffff !important; /* Erzwingt den weißen Text im Button */
    padding: 8px 24px !important;
    margin-left: 15px !important;
    margin-right: 5px !important; /* Etwas Abstand zum nachfolgenden Punkt */
    border-radius: 30px !important; 
    text-decoration: none !important;
    text-transform: uppercase !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 1.5px !important;
    display: inline-block !important;
    transition: background-color 0.3s ease !important;
    border-bottom: none !important;
    vertical-align: middle !important; /* Zieht den Button auf eine schöne Texthöhe */
}

/* Hover-Effekt */
.woocommerce-info a:hover {
    background-color: #444444 !important; 
    color: #ffffff !important;
}

/* Responsive Anpassung für das Handy */
@media (max-width: 768px) {
    .woocommerce-info {
        padding: 15px 20px 15px 50px !important; /* Etwas kompakter auf dem Handy */
    }
    .woocommerce-info a,
    .woocommerce-message a,
    .woocommerce-error a {
        margin-left: 0 !important;
        margin-top: 15px !important;
        display: block !important;
        text-align: center !important;
    }
}

/* PASSWORT VERGESSEN SEITE FIXES */
/* Den "Schön, dass du da bist"-Block auf der Passwort-Seite verstecken */
body.woocommerce-lost-password .lokanes-dashboard-welcome,
body:has(.lost_reset_password) .lokanes-dashboard-welcome {
    display: none !important;
}

/* Das Eingabefeld auf der Passwort-Seite anpassen */
.woocommerce form.lost_reset_password .input-text {
    background-color: #ffffff !important; 
    border: 1px solid rgba(204, 158, 126, 0.4) !important; 
    border-radius: 8px !important;
    padding: 14px 18px !important;
    color: #1a1a1a !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 15px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02) !important; 
    transition: all 0.3s ease !important;
    width: 100% !important; 
}

.woocommerce form.lost_reset_password .input-text:focus {
    border-color: #cc9e7e !important; 
    box-shadow: 0 4px 15px rgba(204, 158, 126, 0.15) !important; 
    background-color: #ffffff !important;
    outline: none !important;
}

/* Der Passwort-Zurücksetzen Button (Lokanes Textur) */
.woocommerce form.lost_reset_password button.button,
.woocommerce-ResetPassword button[type="submit"] {
    background-color: #1a1a1a !important; 
    color: #ffffff !important; 
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 40px !important; 
    padding: 14px 24px !important;
    transition: all 0.4s ease !important;
    background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.15"/%3E%3C/svg%3E') !important;
    margin-top: 15px !important;
    width: 100% !important; /* Button auf volle Breite ziehen (sieht moderner aus) */
}

/* Button Hover Effekt */
.woocommerce form.lost_reset_password button.button:hover,
.woocommerce-ResetPassword button[type="submit"]:hover {
    background-color: #222222 !important; 
    color: #cc9e7e !important; 
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.15) !important;
}

/* Die Formular-Box im voll deckenden Look (exakt wie beim Login) */
.woocommerce form.lost_reset_password {
    background-color: #e6ddd7 !important; /* Der deckende Ton vom Login */
    border: 1px solid rgba(255, 255, 255, 0.6) !important; /* Zarter, weißer Rand */
    border-radius: 20px !important;
    padding: 40px 50px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important;
    margin-bottom: 30px !important;
    max-width: 600px !important; /* Hält die Box in der Mitte schön kompakt */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Den Standardtext in der Box elegant anpassen */
.woocommerce form.lost_reset_password > p:first-child {
    font-family: 'Jost', sans-serif !important;
    font-size: 15px !important;
    color: #4a4a4a !important; /* Dunkles Grau für perfekten Kontrast auf dem Hintergrund */
    line-height: 1.6 !important;
    text-align: center !important;
    margin-bottom: 25px !important;
    display: block !important; 
}

/* Mobile Anpassung */
@media (max-width: 768px) {
    .woocommerce form.lost_reset_password {
        padding: 30px 20px !important;
    }
}

/* FEHLERMELDUNGEN SICHERN & PREMIUM DESIGN */

/* 1. Schutzschild: Fehlermeldungen vor dem Dashboard-Ausblenden schützen */
.woocommerce-notices-wrapper,
.woocommerce-notices-wrapper p,
.woocommerce-error,
.woocommerce-error p,
.woocommerce-error li {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 2. Die rote Fehlermeldung auf Premium stylen */
.woocommerce-error {
    background-color: #fff3f3 !important; 
    color: #b30000 !important; 
    border: 1px solid rgba(179, 0, 0, 0.2) !important;
    border-radius: 8px !important;
    padding: 15px 25px 15px 50px !important; 
    position: relative !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 14px !important;
    margin-bottom: 30px !important;
    list-style: none !important;
    box-shadow: 0 4px 10px rgba(179, 0, 0, 0.05) !important;
    width: 100% !important;
}

/* Elegantes Ausrufezeichen */
.woocommerce-error::before {
    content: "!" !important;
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: 'Georgia', serif !important;
    font-weight: bold !important;
    font-size: 20px !important;
    color: #b30000 !important;
}
/* ==========================================================================
   GESCHENKEFINDER: ERGEBNISSE MOBIL
   Ergebniskarten des Finders (.lokanes-hybrid-row.lokanes-gf-results aus
   geschenkfinder-fragen-und-karte.code-snippets.php) stehen auf Mobile
   untereinander statt im horizontalen Swipe-Karussell. Gilt für B2C und
   Firmenkunden. Ab 768px bleibt das Karussell, ab 993px das Dreier-Grid.
========================================================================== */



/* --- Cross-Selling auf Produktseiten: Karten wie im Hub-Produktgrid ---
   [lokanes_crosssell] und [lokanes_andere_sets] setzen dafür
   .lokanes-symbiose-container--hub. Die Karte selbst bleibt [lokanes_set_card]:
   Eyebrow, Produkttyp, kreativer Setname als ruhigere dritte Zeile.
   Andere Grids mit [lokanes_set_card] sind nicht betroffen. */
.lokanes-symbiose-container--hub .hybrid-title {
    margin: 0 0 12px;
    font-size: 23px;
    line-height: 1.25;
}

.lokanes-symbiose-container--hub .lokanes-gift-hub__card-title-main,
.lokanes-symbiose-container--hub .lokanes-gift-hub__card-title-sub {
    display: block;
}

/* Werte wie .lokanes-gift-hub__card-title-sub (Farbe = --gift-hub-text). */
.lokanes-symbiose-container--hub .lokanes-gift-hub__card-title-sub {
    margin-top: 4px;
    font-size: 16px;
    font-style: italic;
    line-height: 1.35;
    color: #4a4a4a;
}

/* Preis und CTA stehen in einer Kartenreihe auf gleicher Höhe, auch wenn Titel umbrechen.
   height: auto lässt die Karten im mobilen Swipe-Karussell auf gleiche Höhe strecken. */
.lokanes-symbiose-container--hub .lokanes-hybrid-card-link {
    height: auto;
}

.lokanes-symbiose-container--hub .hybrid-price {
    margin: auto 0 22px;
}

.lokanes-symbiose-container--hub .hybrid-fake-btn {
    margin-top: 0;
}

/* Eingeklappt genau eine Kartenreihe, egal wie hoch die Karten sind.
   Die feste Höhe von 470px schneidet sonst je nach Fensterbreite den CTA ab
   oder zeigt schon ein Stück der zweiten Reihe. */
@media (min-width: 993px) {
    .lokanes-symbiose-container.lokanes-symbiose-container--hub,
    .lokanes-symbiose-container.lokanes-symbiose-container--hub.is-expanded {
        max-height: none;
    }

    .lokanes-symbiose-container--hub:not(.is-expanded) .lokanes-hybrid-row {
        grid-template-rows: auto;
        grid-auto-rows: 0;
        row-gap: 0 !important;
    }
}
    
/* LOKANES – Kennzeichnung KI-bearbeiteter Bildszenen
   Geschlossen: nur dezenter Text direkt im Bild
   Geöffnet: leichte Tooltip-Box für die Erklärung
*/

.lokanes-home__hero-frame,
.lokanes-b2b__hero-media {
    position: relative;
}

.lokanes-ai-label {
    --lokanes-ai-tooltip-bg: rgba(250, 248, 245, 0.88);

    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 5;
    margin: 0;
    color: rgba(26, 26, 26, 0.82);
    font-family: 'Jost', sans-serif;
    text-align: left;
    pointer-events: none;
}

/* Tooltip etwas transparenter mit backdrop-filter */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .lokanes-ai-label {
        --lokanes-ai-tooltip-bg: rgba(250, 248, 245, 0.74);
    }
}

/* Geschlossener Hinweis: keine Box */
.lokanes-ai-label .lokanes-ai-label__summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    max-width: 100%;
    padding: 0;

    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.02em;
    list-style: none;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;

    /* leichte Lesbarkeit direkt auf dem Bild */
    text-shadow:
        0 1px 2px rgba(250, 248, 245, 0.78),
        0 0 10px rgba(250, 248, 245, 0.42);
    pointer-events: auto;
}

.lokanes-ai-label .lokanes-ai-label__summary::-webkit-details-marker {
    display: none;
}

/* Fokus weiterhin gut sichtbar */
.lokanes-ai-label .lokanes-ai-label__summary:focus-visible {
    outline: 2px solid rgba(26, 26, 26, 0.8);
    outline-offset: 4px;
    border-radius: 6px;
}

/* Icon */
.lokanes-ai-label .lokanes-ai-label__icon {
    flex: none;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
}

/* Nur der geöffnete Text bekommt eine Box */
.lokanes-ai-label .lokanes-ai-label__text {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    width: max-content;
    max-width: min(340px, 100%);
    margin: 0;
    padding: 11px 14px 12px;

    border: 1px solid rgba(255, 255, 255, 0.24);
    background-color: var(--lokanes-ai-tooltip-bg);
    -webkit-backdrop-filter: blur(8px) saturate(1.05);
    backdrop-filter: blur(8px) saturate(1.05);
    box-shadow: 0 2px 9px rgba(26, 26, 26, 0.08);
    border-radius: 12px;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: #1a1a1a;
    pointer-events: auto;
}

/* Hover-Brücke */
.lokanes-ai-label .lokanes-ai-label__text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 9px;
}

.lokanes-ai-label[open] .lokanes-ai-label__text {
    animation: lokanes-ai-label-in 0.22s ease-out;
}

.lokanes-ai-label.is-closing .lokanes-ai-label__text {
    animation: lokanes-ai-label-out 0.16s ease-in forwards;
}

@keyframes lokanes-ai-label-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

@keyframes lokanes-ai-label-out {
    to {
        opacity: 0;
        transform: translateY(6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lokanes-ai-label[open] .lokanes-ai-label__text,
    .lokanes-ai-label.is-closing .lokanes-ai-label__text {
        animation: none;
    }
}

/* Mobil */
@media (max-width: 767px) {
    .lokanes-ai-label {
        left: 8px;
        right: 8px;
        bottom: 8px;
    }

    .lokanes-ai-label .lokanes-ai-label__summary {
        font-size: 11px;
    }

    .lokanes-ai-label .lokanes-ai-label__text {
        max-width: min(340px, calc(100% - 80px));
        padding: 10px 12px 11px;
        font-size: 12px;
        line-height: 1.45;
    }
}

/* ==========================================================================
   LOKANES PRIORITY: KURZER HINWEIS
   Ein Satz mit Kupferstern und Link auf /zahlung-und-versand/#priority, dort steht
   die ausführliche Erklärung. Kommt auf mehreren Seiten vor, deshalb hier:
     Seitenblöcke homepage.html, geschenkset-hub.html, geschenk-verschicken.html (<p>)
     Snippet "LOKANES Priority – Hinweis im Warenkorb" (<p>)
   Die Produktseiten haben einen eigenen Priority-Hinweis und nutzen diese Klasse nicht.
   Abstand, Ausrichtung und Größe je Seite im jeweiligen Seitenmodul.
========================================================================== */

.lokanes-priority-hint {
    margin: 0;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    font-style: normal;
    line-height: 1.55;
    color: #4a4a4a;
}

.lokanes-priority-hint__mark {
    margin-right: 6px;
    font-size: 0.9em;
    color: #a77355;
}

.lokanes-priority-hint strong {
    font-weight: 500;
    color: #1a1a1a;
}

.lokanes-priority-hint a {
    color: #1a1a1a;
    text-decoration: underline;
    text-decoration-color: #cc9e7e;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    white-space: nowrap;
}

.lokanes-priority-hint a:hover,
.lokanes-priority-hint a:focus-visible {
    color: #a77355;
}