@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//lokanes.de/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=8.4.1") format("woff2");
}

@font-face {
	font-family: "star";
	font-weight: 400;
	font-style: normal;
	src: url("//lokanes.de/wp-content/plugins/woocommerce/assets/fonts/star.eot?#iefix") format("embedded-opentype"), url("//lokanes.de/wp-content/plugins/woocommerce/assets/fonts/star.woff") format("woff"), url("//lokanes.de/wp-content/plugins/woocommerce/assets/fonts/star.ttf") format("truetype"), url("//lokanes.de/wp-content/plugins/woocommerce/assets/fonts/star.svg#star") format("svg");
}

@font-face {
	font-family: "WooCommerce";
	font-weight: 400;
	font-style: normal;
	src: url("//lokanes.de/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.eot?#iefix") format("embedded-opentype"), url("//lokanes.de/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff") format("woff"), url("//lokanes.de/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.ttf") format("truetype"), url("//lokanes.de/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.svg#WooCommerce") format("svg");
}

:root {
	--wd-text-font: "Jost", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: rgb(74,74,74);
	--wd-text-font-size: 15px;
	--wd-title-font: "Jost", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 300;
	--wd-title-color: rgb(204,158,126);
	--wd-entities-title-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: rgb(0,0,0);
	--wd-entities-title-color-hover: rgb(204, 158, 126);
	--wd-alternative-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: rgb(0,0,0);
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 700;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(0,0,0);
	--wd-alternative-color: rgb(0,0,0);
	--btn-default-bgcolor: rgb(239,239,239);
	--btn-default-bgcolor-hover: #efefef;
	--btn-default-color: rgb(0,0,0);
	--btn-accented-bgcolor: rgb(235,235,235);
	--btn-accented-bgcolor-hover: rgb(235,235,235);
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: rgb(0,0,0);
	--notices-warning-bg: #E0B252;
	--notices-warning-color: rgb(0,0,0);
	--wd-link-color: rgb(0,0,0);
	--wd-link-color-hover: rgb(204,158,126);
	--wd-link-decor-style: solid;
	--wd-link-decor-style-hover: solid;
	--wd-link-decor-color: rgb(204,158,126);
	--wd-link-decor-color-hover: rgb(204,158,126);
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: rgba(255,255,255,0);
	background-image: none;
}
.page :is(.wd-page-content, .whb-header) {
	background-image: none;
	background-repeat: repeat;
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
.woocommerce-product-gallery {
	--wd-gallery-gap: 15px;
}
.woocommerce-product-gallery.thumbs-position-left {
	--wd-thumbs-width: 100px;
	--wd-thumbs-height: 450px;
}
:root{
--wd-container-w: 1920px;
--wd-form-brd-radius: 0px;
--btn-default-color-hover: #333;
--btn-accented-color: #333;
--btn-accented-color-hover: #333;
--btn-default-brd-radius: 5px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 35px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--wd-brd-radius: 12px;
}



.wd-page-title {
background-color: #0a0a0a;
}

/* ==========================================================================
   LOKANES GLOBAL CSS
   
   Inhaltsverzeichnis:
   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 
========================================================================== */

/* ===================================================
   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; 
    }
}

/* ===================================================
   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; 
}

/* Floating Add-to-Cart Button (Sticky) */
/* NEU: Stärkere CSS-Regel (a.lokanes-texture-btn.lokanes-floating-cart) besiegt die Base-Regeln! */
a.lokanes-texture-btn.lokanes-floating-cart,
.lokanes-floating-cart {
    position: fixed !important; 
    bottom: 40px !important;      
    right: 40px !important;        
    z-index: 999 !important; 
    gap: 12px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* SCHUTZ-SCHILD: Keine unsichtbaren Puffer für den Floating-Button! */
a.lokanes-texture-btn.lokanes-floating-cart::before,
.lokanes-floating-cart::before {
    display: none !important;
}

a.lokanes-texture-btn.lokanes-floating-cart.is-visible,
.lokanes-floating-cart.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) !important; /* Verhindert, dass der normale Hover-Transform stört */
}

a.lokanes-texture-btn.lokanes-floating-cart:hover,
.lokanes-floating-cart:hover {
    transform: translateY(-2px) !important; /* Eigener Hover-Lift für den Floating-Button */
}

.lokanes-floating-cart:hover svg { 
    transform: scale(1.1) !important; 
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
    a.lokanes-texture-btn.lokanes-floating-cart,
    .lokanes-floating-cart {
        bottom: 25px !important;
        right: 25px !important;
        width: 60px !important;
        height: 60px !important;
        min-height: 60px !important; 
        padding: 0 !important; 
        border-radius: 50% !important; 
        justify-content: center !important;
        align-items: center !important;
    }
    
    .lokanes-floating-cart .floating-text { display: none !important; }
    .lokanes-floating-cart svg { width: 26px !important; height: 26px !important; margin: 0 !important; }
    
    /* 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
=================================================== */

/* Germanized Steuer- & Versandtext */
.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: block !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;
}

.wc-gzd-additional-info a:hover, .legal-price-info a:hover, .shipping-costs-info a:hover {
    color: #cc9e7e !important;
    border-bottom-color: #cc9e7e !important;
}

/* Pseudo-Swatches (Varianten-Wechsel) */
.lokanes-swatch-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-family: 'Jost', sans-serif; }
.swatch-label { font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: #888; white-space: nowrap; }
.swatch-item { display: inline-flex; justify-content: center; align-items: center; padding: 10px 22px; font-size: 15px; font-weight: 400; border-radius: 30px; transition: all 0.3s ease; text-decoration: none !important; white-space: nowrap; }
.swatch-item.active { background-color: #cc9e7e15 !important; border: 1px solid #cc9e7e !important; color: #1a1a1a !important; font-weight: 500 !important; cursor: default !important; }
.swatch-item.inactive { background-color: transparent !important; border: 1px dashed #dcdcdc !important; color: #666 !important; }
.swatch-item.inactive:hover { border: 1px solid #1a1a1a !important; color: #cc9e7e !important; transform: translateY(-2px); }

/* Mengenauswahl (Quantity-Schalter Pill Style) */
.quantity {
    display: inline-flex !important;
    border-radius: 50px !important;
    border: 1px solid #dcdcdc !important;
    overflow: hidden !important;
    height: 48px !important;
    padding: 0 10px !important;
    background-color: transparent !important;
}
.quantity input[type=button] { background-color: transparent !important; border: none !important; color: #666 !important; font-family: 'Jost', sans-serif !important; font-size: 20px !important; cursor: pointer !important; transition: all 0.3s ease !important; }
.quantity input[type=button]:hover { color: #cc9e7e !important; transform: scale(1.1); }
.quantity input[type=number].qty { border: none !important; 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; }
.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; }

/* ==========================================
   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; }
.hybrid-image-wrapper { width: 70%; margin-bottom: 25px; overflow: hidden; border-radius: 8px; }
.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: 8px; }
.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); }

@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;
    }
}

/* ===================================================
   05. PRODUKTSEITE (PDP)
=================================================== */

/* 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: 8px; }
.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: 5px; 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); }

/* Akkordeon (Details) */
.lokanes-details-section { max-width: 800px; margin: 80px auto; font-family: 'Jost', sans-serif; padding: 0 20px; }
.lokanes-accordion { border-top: 1px solid #dcdcdc; }
.accordion-item { border-bottom: 1px solid #dcdcdc; }
.accordion-header { width: 100%; background: transparent; border: none; padding: 25px 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; text-align: left; transition: color 0.3s ease; }
.accordion-title { font-size: 16px; font-weight: 400; color: #1a1a1a; letter-spacing: 0.5px; }
.accordion-header:hover .accordion-title { color: #cc9e7e; }
.accordion-icon { position: relative; width: 14px; height: 14px; }
.accordion-icon::before, .accordion-icon::after { content: ''; position: absolute; background-color: #1a1a1a; transition: transform 0.3s ease; }
.accordion-icon::before { top: 6px; left: 0; width: 14px; height: 1.5px; } 
.accordion-icon::after { top: 0; left: 6px; width: 1.5px; height: 14px; } 
.accordion-item.active .accordion-icon::after { transform: rotate(90deg); opacity: 0; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important; }
/* --- NEU: Die Highlight-Box für den ausgeklappten Inhalt --- */
.accordion-inner { 
    padding: 25px; /* Innenabstand für die neue Box */
    margin-bottom: 25px; /* Abstand zur unteren Trennlinie des Akkordeons */
    background-color: rgba(204, 158, 126, 0.06); /* Sehr edle, transparente Kupfer-Tönung */
    border-radius: 12px; /* Sanft abgerundete Ecken */
		overflow-x: auto;
}

.detail-table { width: 100%; border-collapse: collapse; min-width: 300px;}

/* --- NEU: Sichtbarere, edle Trennlinien --- */
.detail-table td { 
    padding: 12px 0; /* Etwas mehr Luft zum Atmen zwischen den Zeilen */
    font-size: 14px; 
    color: #666; 
    border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* Durchgehende, gut sichtbare, aber sehr weiche Linie */
}

.detail-table tr:last-child td { border-bottom: none; }
.detail-table td:first-child { font-weight: 500; color: #1a1a1a; width: 35%; }

/* 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-visual { 
        order: -1 !important; 
        margin-bottom: 0 !important; 
        width: 100% !important; 
    }
    
    .premium-product-info-panel { 
        width: 100% !important; 
        max-width: 100% !important; 
        padding: 30px 20px !important; 
        margin: -100px auto 0 auto !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; }
}

/* ===================================================
   06. WARENKORB (OFF-CANVAS & MAIN)
=================================================== */

/* --- 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; }


/* --- MAIN CART PAGE --- */
.woocommerce-cart p.return-to-shop { display: none !important; }
.cart-empty.woocommerce-info { color: #1a1a1a !important; font-family: 'Georgia', serif !important; }

body.woocommerce-cart table th { font-family: 'Jost', sans-serif !important; font-size: 0.85rem !important; text-transform: uppercase !important; letter-spacing: 0.15em !important; color: #cc9e7e !important; border: none !important; padding-bottom: 20px !important; font-weight: 500 !important; }
body.woocommerce-cart table tr.cart_item td { border-top: 1px solid rgba(26, 26, 26, 0.05) !important; border-bottom: 1px solid rgba(26, 26, 26, 0.05) !important; padding: 25px 15px !important; vertical-align: middle !important; transition: all 0.3s ease !important; }
body.woocommerce-cart table tr.cart_item td:first-child { border-left: 1px solid rgba(26, 26, 26, 0.05) !important; border-radius: 15px 0 0 15px !important; }
body.woocommerce-cart table tr.cart_item td:last-child { border-right: 1px solid rgba(26, 26, 26, 0.05) !important; border-radius: 0 15px 15px 0 !important; }
body.woocommerce-cart table tr.cart_item:hover td { background-color: rgba(204, 158, 126, 0.15) !important; border-color: transparent !important; }

body.woocommerce-cart table .product-name a { font-family: 'Georgia', serif !important; font-size: 1.3rem !important; color: #1a1a1a !important; text-decoration: none !important; transition: color 0.3s ease !important; }
body.woocommerce-cart table tr.cart_item:hover .product-name a { color: #cc9e7e !important; }

/* Gutschein Feld Main Cart */
.woocommerce-cart table.cart td.actions .coupon .input-text { border-radius: 12px !important; border: 1px solid #eee !important; padding: 13px 20px !important; background-color: #fff !important; font-family: 'Jost', sans-serif !important; box-shadow: 0 4px 10px rgba(0,0,0,0.02) !important; transition: all 0.3s ease !important; }
.woocommerce-cart table.cart td.actions .coupon .input-text:focus { border-color: #cc9e7e !important; outline: none !important; box-shadow: 0 0 0 4px rgba(204, 158, 126, 0.1) !important; }
.woocommerce-cart table.cart td.actions .coupon .button { 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; border-radius: 30px !important; color: #f2f0ef !important; text-transform: uppercase !important; padding: 14px 30px !important; margin-left: 10px !important; transition: all 0.3s ease !important; border: none !important; }
.woocommerce-cart table.cart td.actions .coupon .button:hover { background-color: #2a2a2a !important; color: #cc9e7e !important; transform: translateY(-2px) !important; }

/* Main Cart Summen-Box */
body.woocommerce-cart .cart-collaterals .cart_totals { background-color: #ffffff !important; border-radius: 20px !important; padding: 35px 30px !important; box-shadow: 0 10px 40px rgba(0,0,0,0.03) !important; border: 1px solid rgba(204, 158, 126, 0.2) !important; }
/* Main Cart Summen-Box Überschrift in Schwarz */
body.woocommerce-cart .cart_totals h2 { 
    font-family: 'Georgia', serif !important; 
    font-size: 1.8rem !important; 
    color: #1a1a1a !important; /* <--- Hier ist das Schwarz! */
    border-bottom: 1px solid rgba(204, 158, 126, 0.4) !important; 
    padding-bottom: 20px !important; 
    margin-bottom: 25px !important; 
}
body.woocommerce-cart a.checkout-button { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; padding: 18px 40px !important; margin-top: 20px !important; background-color: #1a1a1a !important; border-radius: 30px !important; color: #f2f0ef !important; text-transform: uppercase !important; font-weight: 500 !important; transition: all 0.3s ease !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; }
body.woocommerce-cart a.checkout-button:hover { background-color: #2a2a2a !important; color: #cc9e7e !important; transform: translateY(-2px) !important; }

/* Trust Badges (Unter Button) */
.lokanes-cart-trust-badges { margin-top: 0px !important; padding-top: 0px !important; text-align: center !important; }
.lokanes-cart-trust-badges > div { transform: scale(0.9); transform-origin: center top; }
.lokanes-trust-badges { display: grid; grid-template-columns: 55fr 45fr; gap: 5px; margin-top: 30px; border-top: 5px solid #e5e5e5; font-family: 'Jost', sans-serif; }
.trust-item { display: flex; align-items: center; gap: 12px; padding-top: 15px; }
.trust-icon { color: #cc9e7e; width: 26px; height: 26px; flex-shrink: 0; }
.trust-text { display: flex; flex-direction: column; }
.trust-title { font-size: 12px; font-weight: 500; color: #1a1a1a; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.2; }
.trust-subtitle { font-size: 12px; font-weight: 300; color: #888; line-height: 1.4; margin-top: 2px; }
@media (max-width: 768px) { .lokanes-trust-badges { grid-template-columns: 1fr; gap: 20px; } }

/* Inline Manufaktur-Karte SVG in Cart */
.lokanes-inline-karte { margin-top: 15px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
.lokanes-inline-karte-text { font-family: 'Jost', sans-serif !important; font-size: 0.75rem !important; color: #cc9e7e !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin-bottom: 5px !important; }
.lokanes-inline-karte img { width: 90px !important; min-width: 90px !important; height: auto !important; border: none !important; box-shadow: none !important; background: transparent !important; transition: transform 0.4s ease !important; }
body.woocommerce-cart table tr.cart_item:hover .lokanes-inline-karte img { transform: scale(1.08) !important; box-shadow: none !important; }

@media (max-width: 768px) {
    body.woocommerce-cart table.shop_table tr.cart_item { padding-bottom: 20px !important; }
    body.woocommerce-cart table.cart td.product-name { text-align: left !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; padding-top: 15px !important; }
    .lokanes-inline-karte { position: static !important; margin-left: 0 !important; margin-top: 15px !important; align-items: flex-start !important; width: 100% !important; }
    .lokanes-inline-karte-text { display: block !important; visibility: visible !important; opacity: 1 !important; font-size: 0.7rem !important; margin-bottom: 8px !important; }
    .lokanes-inline-karte img { max-width: 80px !important; }
}


/* 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
=================================================== */

/* Oben links Störfaktoren killen */
body.woocommerce-checkout .wd-checkout-steps, body.woocommerce-checkout .woocommerce-info, body.woocommerce-checkout .woocommerce-error, body.woocommerce-checkout .woocommerce-message, body.woocommerce-checkout .woocommerce-notices-wrapper, body.woocommerce-checkout .woocommerce-form-login-toggle, body.woocommerce-checkout .woocommerce-form-coupon-toggle, body.woocommerce-checkout .checkout_coupon { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; }
body.woocommerce-checkout #customer_details, body.woocommerce-checkout form.checkout, body.woocommerce-checkout .col2-set { margin-top: 0 !important; padding-top: 0 !important; }

/* Abstand der Überschriften im Checkout */
body.woocommerce-checkout .woocommerce-billing-fields h3, 
body.woocommerce-checkout .woocommerce-shipping-fields h3, 
body.woocommerce-checkout h3#ship-to-different-address { 
    margin-top: 0 !important; 
    padding-top: 0 !important; 
    line-height: 1.2 !important; 
    margin-bottom: 10px !important; /* <--- HIER stellst du den Abstand nach unten ein */
}
/* Linke Spalte zwingend anheben */
body.woocommerce-checkout #customer_details { position: relative !important; top: -30px !important; }

/* Grid Layout Felder */
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: 100% !important; float: none !important; margin-bottom: 20px !important; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-gap: 12px 20px !important; }
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper p.form-row { margin-bottom: 0 !important; padding-bottom: 0 !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; }
body.woocommerce-checkout label .required { color: #cc9e7e !important; }

.woocommerce-checkout #billing_first_name_field { order: 1; grid-column: span 1 !important; }
.woocommerce-checkout #billing_last_name_field { order: 2; grid-column: span 1 !important; }
.woocommerce-checkout #billing_country_field { order: 3; grid-column: span 1 !important; width: 100% !important; }
.woocommerce-checkout #billing_phone_field { order: 4; grid-column: span 1 !important; width: 100% !important; } 
.woocommerce-checkout #billing_address_1_field { order: 5; grid-column: 1 / -1 !important; width: 100% !important; } 
.woocommerce-checkout #billing_address_2_field { order: 6; grid-column: 1 / -1 !important; width: 100% !important; }
.woocommerce-checkout #billing_city_field { order: 7; grid-column: span 1 !important; }
.woocommerce-checkout #billing_postcode_field { order: 8; grid-column: span 1 !important; }
.woocommerce-checkout #lokanes_grusskarte_field, .woocommerce-checkout #shipping_address_1_field, .woocommerce-checkout #shipping_address_2_field, .woocommerce-checkout #shipping_country_field { grid-column: 1 / -1 !important; width: 100% !important; }

/* Checkout Eingabefelder (Wieder strahlend weiß!) */
body.woocommerce-checkout input.input-text, 
body.woocommerce-checkout textarea.input-text, 
body.woocommerce-checkout select { 
    width: 100% !important; 
    padding: 14px 20px !important; 
    font-family: 'Jost', sans-serif !important; 
    font-size: 15px !important; 
    color: #1a1a1a !important;
    background-color: #ffffff !important; /* <--- Hier ist das magische Weiß zurück */
    border: 1px solid #eee !important; 
    border-radius: 12px !important; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.02) !important; 
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

/* RECHTE BOX (Order Review Kupfer) */
body.woocommerce-checkout .checkout-order-review, body.woocommerce-checkout .wd-checkout-order-review { background: transparent !important; padding: 0 !important; box-shadow: none !important; position: relative !important; top: -10px !important; }
body.woocommerce-checkout .checkout-order-review::before, body.woocommerce-checkout .checkout-order-review::after { display: none !important; }
body.woocommerce-checkout #order_review, body.woocommerce-checkout .woocommerce-checkout-review-order { background-color: rgba(204, 158, 126, 0.15) !important; border-radius: 20px !important; padding: 35px 30px !important; }
body.woocommerce-checkout #order_review div, body.woocommerce-checkout #order_review section, body.woocommerce-checkout #order_review ul, body.woocommerce-checkout #order_review li { background-color: transparent !important; box-shadow: none !important; }
body.woocommerce-checkout #order_review table { background-color: transparent !important; border: none !important; }
body.woocommerce-checkout .woocommerce-checkout-review-order input[type="text"], body.woocommerce-checkout .woocommerce-checkout-review-order input[type="email"], body.woocommerce-checkout .woocommerce-checkout-review-order textarea { background-color: #fff !important; border: 1px solid #eee !important; }
body.woocommerce-checkout .woocommerce-checkout-review-order .woocommerce-error { background-color: #eab459 !important; color: #fff !important; border-radius: 8px !important; padding: 15px !important; border: none !important; }

body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a, body.woocommerce-checkout form.checkout a { color: #1a1a1a !important; text-decoration: none !important; border-bottom: 1px solid #cc9e7e !important; transition: all 0.3s ease !important; }
body.woocommerce-checkout form.checkout a:hover { color: #cc9e7e !important; }
body.woocommerce-checkout #order_review table.shop_table th, body.woocommerce-checkout #order_review table.shop_table td { border-color: rgba(204, 158, 126, 0.2) !important; padding: 15px 0 !important; }

body.woocommerce-checkout #payment .place-order { border: none !important; background: transparent !important; box-shadow: none !important; }
body.woocommerce-checkout #payment .place-order::before, body.woocommerce-checkout #payment .place-order::after { display: none !important; }
.lokanes-checkout-trust-badges div, .lokanes-checkout-trust-badges section, .lokanes-checkout-trust-badges hr { background: transparent !important; border: none !important; box-shadow: none !important; }

/* Der "Jetzt kaufen" Button */
body.woocommerce-checkout #place_order { 
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
    width: 100% !important; 
    padding: 20px 40px !important; 
    margin-top: 25px !important; 
    background-color: #1a1a1a !important; 
    border-radius: 30px !important; 
    color: #f2f0ef !important; 
    text-transform: uppercase !important; 
    font-weight: 500 !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; 
    border: none !important; 
    transition: all 0.3s ease !important; /* Wichtig für die weiche Animation */
}

/* Der magische Hover-Effekt (Schweben & Kupfer-Schrift) */
body.woocommerce-checkout #place_order:hover {
    transform: translateY(-2px) !important;
    background-color: #2a2a2a !important; 
    color: #cc9e7e !important; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important; 
}

/* Styling für die dynamische Lieferadressen-Überschrift */
h3.lokanes-shipping-dynamic-title {
    font-family: 'Jost', sans-serif !important;
    font-size: 22px !important; 
    font-weight: 300 !important; 
    color: #cc9e7e !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    margin-top: 15px !important; 
    margin-bottom: 20px !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;
}

/* 3. Die Checkboxen unten (AGB etc.) vergrößern */
.woocommerce-checkout .form-row input[type="checkbox"] {
    transform: scale(1.3); /* Macht das Kästchen 30% größer */
    margin-right: 12px;
    margin-top: 5px; /* Richtet das Kästchen besser am mehrzeiligen Text aus */
    cursor: pointer;
}

/* 4. Den Text der AGB/Bestell-Bedingungen minimal anpassen */
.woocommerce-checkout .form-row label.checkbox {
    font-size: 15px;
    line-height: 1.6;
    color: #4a4a4a;
}

/* ===================================================
   08. THANK YOU PAGE (BESTELLBESTÄTIGUNG)
=================================================== */

/* Standard WooCommerce Meldungen verstecken */
.woocommerce-order .woocommerce-notice--success, 
.woocommerce-order ul.order_details { display: none !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 */
    }
}

/* ===================================================
   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; object-fit: cover; display: block; transition: transform 0.7s ease; }
.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: 16/9; }
}
@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; box-shadow: 0 15px 35px rgba(0,0,0,0.06); }
.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) */
/* (Wir sprechen sowohl das direkte Formular als auch den WoodMart-Textblock an) */
.woocommerce form.register,
.woocommerce-MyAccount-content .col-register-text {
    background-color: #cc9e7e10 !important; 
    border: 1px solid rgba(204, 158, 126, 0.25) !important;
    border-radius: 20px !important;
    padding: 40px 50px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02) !important;
    margin-bottom: 30px !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;
}