/* ==========================================================================
   LOKANES CSS-Modul: produkt.css
   Lädt auf allen Produktseiten (is_product).
   Inhalt: Geschenkset- und Einzelprodukt-Seiten: Kaufbereich, Familiennavigation, Service,
   Produktstory, Empfehlungen, Galerie-Texte, schwebender Warenkorb-Button.

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

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



/* 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: 99 !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; }
}
/* ===================================================
   04. SHOP-BASICS & PRODUKT-GRID
=================================================== */



/* Zwingt das "Versandkostenfrei" millimetergenau an die linke Kante */
.single-product .legal-price-info p.wc-gzd-additional-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 0 !important;
}

/* Pseudo-Swatches (Varianten-Wechsel) */
.lokanes-swatch-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-family: 'Jost', sans-serif; }
.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); }
/* =========================================================
   NEU: Visualisierung Herkunft (Siegel - Dynamisch skalierend)
========================================================= */



/* Haupt-Hintergrund auf Lokanes-Schwarz setzen und eckige Ränder abschneiden */
.wd-nav-arrows .wd-btn-arrow {
    background-color: #1a1a1a !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 12px !important; /* Passt die Ecken an (Wert ggf. anpassen) */
    overflow: hidden !important;
    transition: all 0.3s ease;
}

/* Verhindern, dass WoodMart ein inneres weißes Feld lädt, und Kupfer setzen */
.wd-nav-arrows .wd-btn-arrow .wd-arrow-inner {
    background-color: transparent !important;
    color: #cc9e7e !important;
}

/* Hover-Effekt: Kupferner Hintergrund, schwarzer Pfeil */
.wd-nav-arrows .wd-btn-arrow:hover {
    background-color: #cc9e7e !important;
}

.wd-nav-arrows .wd-btn-arrow:hover .wd-arrow-inner {
    color: #1a1a1a !important;
}

/* Deaktivierte Pfeile (z.B. wenn man nicht weiter scrollen kann) */
.wd-nav-arrows .wd-btn-arrow.wd-disabled {
    opacity: 0.4 !important;
    pointer-events: none;
}

/* ===================================================
   05. PRODUKTSEITE (PDP)
=================================================== */
	
	.lokanes-delivery-time,
	.lokanes-base-price {
			margin-top: 1px;
	}
/* =========================================================
   LOKANES: Produkt-Addon (Grußbotschaft) - PLUGIN VERSION
========================================================= */

/* Weniger Abstand des gesamten Blocks nach oben und unten */
.wcpa_field_wrap.wcpa_type_textarea {
    margin-bottom: -20px !important; 
    margin-top: -30px !important; 
		width: 95%;
}
/* ------------------------------- */



/* 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%; }

/* ==========================================================================
   LOKANES – GESCHENKSET-PDP: EMPFEHLUNGS-KARUSSELLS
   1:1 an die Stylingwerte der SINGLE-PDP-Empfehlungen angelehnt.
   Gilt ausschließlich für die neue Renderer-Klasse .lokanes-setrec.

   Ersetzt den bisherigen Abschnitt „Set-Produktseiten: Empfehlungs-Karussells“
   in global.css vollständig. NICHT zusätzlich daneben einfügen.
   JS nutzt .lokanes-setrec--js und .is-overflowing unverändert.
========================================================================== */

.lokanes-setrec {
    --spdp-copper: #cc9e7e;
    --spdp-ink: #1a1a1a;
    --spdp-text: #4a4a4a;
    --spdp-line: rgba(204, 158, 126, 0.35);
    --spdp-muted: #888888;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    margin-top: 72px;
    padding-top: 56px;
    border-top: 1px solid var(--spdp-line);
    font-family: 'Jost', sans-serif;
    font-style: normal;
    color: var(--spdp-text);
}

.lokanes-setrec *,
.lokanes-setrec *::before,
.lokanes-setrec *::after {
    box-sizing: border-box;
}

/* Header und Typografie: wie bei Einzelprodukten */
.lokanes-setrec .lokanes-spdp-rec__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

/* Ohne JavaScript sind beide Panel-Überschriften sichtbar. */
.lokanes-setrec.lokanes-spdp-rec--tabs:not(.lokanes-setrec--js)
.lokanes-spdp-rec__head {
    display: none;
}

.lokanes-setrec .lokanes-spdp-rec__heading { min-width: 0; }

.lokanes-setrec .lokanes-spdp-rec__eyebrow {
    margin: 0 0 10px;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--spdp-copper);
}

.lokanes-setrec .lokanes-spdp-rec__title,
.lokanes-setrec .lokanes-spdp-rec__panel-title {
    margin: 0;
    font-family: 'Georgia', serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    color: var(--spdp-ink);
    text-wrap: balance;
}

.lokanes-setrec .lokanes-spdp-rec__panel-title { margin-bottom: 26px; }
.lokanes-setrec .lokanes-spdp-rec__panel { min-width: 0; }
.lokanes-setrec .lokanes-spdp-rec__panel + .lokanes-spdp-rec__panel { margin-top: 48px; }

/* Tabs erst aktivieren, wenn das Seitenskript erfolgreich initialisiert hat. */
.lokanes-setrec .lokanes-spdp-rec__tabs,
.lokanes-setrec .lokanes-spdp-rec__nav { display: none; }

.lokanes-setrec.lokanes-setrec--js .lokanes-spdp-rec__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 32px;
}

/* Bei der Set-Variante blendet JS Pfeile nur bei echtem Überlauf ein. */
.lokanes-setrec.lokanes-setrec--js.is-overflowing .lokanes-spdp-rec__nav {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.lokanes-setrec .lokanes-spdp-rec__nav[hidden],
.lokanes-setrec .lokanes-spdp-rec__panel[hidden] {
    display: none !important;
}

.lokanes-setrec.lokanes-setrec--js .lokanes-spdp-rec__panel + .lokanes-spdp-rec__panel {
    margin-top: 0;
}

/* Mit JS sind die Panel-Überschriften für Screenreader weiterhin vorhanden. */
.lokanes-setrec.lokanes-setrec--js .lokanes-spdp-rec__panel-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.lokanes-setrec .lokanes-spdp-rec__tab {
    position: relative;
    min-height: 44px;
    margin: 0;
    padding: 10px 0 9px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    font-family: 'Georgia', serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    color: #9a9a9a;
    cursor: pointer;
    transition: color .3s ease;
}

.lokanes-setrec .lokanes-spdp-rec__tab:hover,
.lokanes-setrec .lokanes-spdp-rec__tab:focus {
    background-color: transparent;
    box-shadow: none;
    color: var(--spdp-ink);
}

.lokanes-setrec .lokanes-spdp-rec__tab.is-active { color: var(--spdp-ink); }
.lokanes-setrec .lokanes-spdp-rec__tab.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--spdp-copper);
}

/* Pfeile: gleiche Form, Größe, Strichstärke und Hover-Farbe wie SINGLE-PDP. */
.lokanes-setrec .lokanes-spdp-rec__arrow {
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 0;
    padding: 0;
    border: 1px solid var(--spdp-line);
    border-radius: 50%;
    background-color: transparent;
    box-shadow: none;
    color: var(--spdp-ink);
    cursor: pointer;
    transition: border-color .3s ease, color .3s ease, opacity .3s ease;
}

.lokanes-setrec .lokanes-spdp-rec__arrow:hover:not(:disabled) {
    border-color: var(--spdp-copper);
    background-color: transparent;
    color: var(--spdp-copper);
}

.lokanes-setrec .lokanes-spdp-rec__arrow:disabled {
    border-color: var(--spdp-line);
    color: var(--spdp-ink);
    opacity: .3;
    cursor: default;
}

.lokanes-setrec .lokanes-spdp-rec__arrow svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lokanes-setrec button:focus-visible,
.lokanes-setrec a:focus-visible {
    outline: 2px solid var(--spdp-copper);
    outline-offset: 3px;
}

/* Kartenreihe: Flex + Scroll-Snap statt des alten 3-Spalten-Grid-Autoflows. */
.lokanes-setrec ul.lokanes-spdp-carousel,
.lokanes-setrec ul.lokanes-spdp-carousel.lokanes-symbiose-container--hub {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 24px !important;
    width: 100%;
    max-height: none !important;
    margin: 0;
    padding: 6px 0 16px;
    list-style: none;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.lokanes-setrec ul.lokanes-spdp-carousel::-webkit-scrollbar { display: none; }

/* Desktop: vier sichtbare Karten, wie auf der Einzelprodukt-PDP. */
.lokanes-setrec .lokanes-spdp-carousel__item {
    display: flex;
    flex: 0 0 calc((100% - 72px) / 4);
    min-width: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    scroll-snap-align: start;
}

/* Gegen globale 55vw !important-Regel für .lokanes-hybrid-card-link. */
.lokanes-setrec .lokanes-spdp-carousel .lokanes-hybrid-card-link {
    flex: 1 1 auto;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto;
    scroll-snap-align: none;
}

.lokanes-setrec .lokanes-spdp-carousel .hybrid-image-wrapper {
    width: 100%;
    margin-bottom: 18px;
    border-radius: 14px;
}

.lokanes-setrec .lokanes-spdp-carousel .hybrid-image-wrapper > img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.lokanes-setrec .lokanes-spdp-carousel .hybrid-eyebrow {
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: .14em;
}

.lokanes-setrec .lokanes-spdp-carousel .hybrid-title {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.25;
}

.lokanes-setrec .lokanes-spdp-carousel .hybrid-price {
    margin: auto 0 16px;
    padding-top: 6px;
    font-size: 15px;
}

.lokanes-setrec .lokanes-spdp-carousel .hybrid-fake-btn {
    min-height: 44px !important;
    margin-top: 0;
    padding: 10px 26px !important;
    font-size: 12px !important;
    letter-spacing: .14em !important;
}

/* Nur eine Karte: auf großen Screens dieselbe ruhige Querkarte wie SINGLE-PDP.
   Die PHP-Set-Empfehlungen vergeben derzeit keine --one-Klasse, daher :has(). */
@media (min-width: 601px) {
    .lokanes-setrec ul.lokanes-spdp-carousel:has(> .lokanes-spdp-carousel__item:only-child)
    > .lokanes-spdp-carousel__item {
        flex: 0 0 min(100%, 780px);
    }

    .lokanes-setrec ul.lokanes-spdp-carousel:has(> .lokanes-spdp-carousel__item:only-child)
    .lokanes-hybrid-card-link {
        flex-direction: row;
        align-items: center;
        gap: 40px;
        text-align: left;
    }

    .lokanes-setrec ul.lokanes-spdp-carousel:has(> .lokanes-spdp-carousel__item:only-child)
    .hybrid-image-wrapper {
        flex: 0 0 46%;
        width: 46%;
        margin-bottom: 0;
    }

    .lokanes-setrec ul.lokanes-spdp-carousel:has(> .lokanes-spdp-carousel__item:only-child)
    .hybrid-content { align-items: flex-start; }

    .lokanes-setrec ul.lokanes-spdp-carousel:has(> .lokanes-spdp-carousel__item:only-child)
    .hybrid-title { font-size: 24px; }

    .lokanes-setrec ul.lokanes-spdp-carousel:has(> .lokanes-spdp-carousel__item:only-child)
    .hybrid-price { margin: 2px 0 18px; }
}

/* Kleiner Desktop: drei Karten. */
@media (max-width: 1099px) {
    .lokanes-setrec .lokanes-spdp-carousel__item {
        flex-basis: calc((100% - 48px) / 3);
    }
}

/* Tablet: zwei ganze Karten und ein Anschnitt der nächsten. */
@media (max-width: 899px) {
    .lokanes-setrec {
        margin-top: 56px;
        padding-top: 44px;
    }

    .lokanes-setrec ul.lokanes-spdp-carousel { gap: 20px !important; }
    .lokanes-setrec .lokanes-spdp-carousel__item { flex-basis: 40%; }
}

/* Smartphone: wie SINGLE-PDP wird gewischt statt mit Pfeilen navigiert. */
@media (max-width: 600px) {
    .lokanes-setrec .lokanes-spdp-rec__head { margin-bottom: 18px; }

    .lokanes-setrec .lokanes-spdp-rec__title,
    .lokanes-setrec .lokanes-spdp-rec__panel-title,
    .lokanes-setrec .lokanes-spdp-rec__tab { font-size: 24px; }

    .lokanes-setrec.lokanes-setrec--js .lokanes-spdp-rec__tabs {
        gap: 2px 22px;
    }

    .lokanes-setrec.lokanes-setrec--js .lokanes-spdp-rec__nav,
    .lokanes-setrec.lokanes-setrec--js.is-overflowing .lokanes-spdp-rec__nav {
        display: none;
    }

    .lokanes-setrec ul.lokanes-spdp-carousel {
        gap: 16px !important;
        padding-right: 16px;
        scroll-padding-left: 0;
    }

    .lokanes-setrec .lokanes-spdp-carousel__item { flex-basis: 72%; }
    .lokanes-setrec .lokanes-spdp-carousel__item:only-child { flex-basis: 100%; }
    .lokanes-setrec .lokanes-spdp-carousel .hybrid-title { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    .lokanes-setrec *,
    .lokanes-setrec *::before,
    .lokanes-setrec *::after { transition: none !important; }

    .lokanes-setrec ul.lokanes-spdp-carousel { scroll-behavior: auto; }
}


/* ==========================================================================
   GIFT-PDP
   Produktseite für Geschenksets. Pilot: Zeit zu zweit | Rotwein (ID 32181).
   Seitenblock: wordpress/page-blocks/gift-pdp.html
   Bausteine:   Snippet "Gift PDP: Komponenten"
   Alle Regeln unter .lokanes-gpdp gescoped. Andere Produktseiten enthalten
   diese Klasse nicht und sind von diesem Abschnitt nicht betroffen.
   Die bestehenden PDP-Regeln (Abschnitte 05 und 05b) bleiben unverändert.
========================================================================== */

.lokanes-gpdp .lokanes-gpdp-service__delivery,
.lokanes-gpdp .lokanes-gpdp-service__alcohol {
    display: block;
}

.lokanes-gpdp .lokanes-gpdp-service__alcohol {
    margin-top: 2px;
    color: #777;
}

.lokanes-gpdp {
    --gpdp-copper: #cc9e7e;
    --gpdp-ink: #1a1a1a;
    --gpdp-text: #4a4a4a;
    --gpdp-muted: #888888;
    --gpdp-line: rgba(204, 158, 126, 0.35);
    --gpdp-tint: rgba(204, 158, 126, 0.1);
    --gpdp-sand: #e6ddd7;
    box-sizing: border-box;
    font-family: 'Jost', sans-serif;
    color: var(--gpdp-text);
}

.lokanes-gpdp *,
.lokanes-gpdp *::before,
.lokanes-gpdp *::after {
    box-sizing: border-box;
}

.lokanes-gpdp ul,
.lokanes-gpdp ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lokanes-gpdp li {
    margin: 0;
}

.lokanes-gpdp a:focus-visible,
.lokanes-gpdp button:focus-visible,
.lokanes-gpdp .lokanes-gstory__panel:focus-visible {
    outline: 2px solid var(--gpdp-copper);
    outline-offset: 3px;
}

/* Sprungziele nicht unter dem Sticky-Header */
.lokanes-gpdp .lokanes-gstory,
.lokanes-gpdp .lokanes-gstory__panel,
.lokanes-gpdp .lokanes-gpdp-unboxing {
    scroll-margin-top: 100px;
}

/* Nur für Screenreader */
.lokanes-gpdp .lokanes-gstory__status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Rahmen der drei Teile --- */
.lokanes-gpdp.lokanes-gpdp--buy {
    width: 100%;
}

.lokanes-gpdp.lokanes-gpdp--main {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Volle Serviceleiste unter dem zweispaltigen Kaufbereich. */
.lokanes-gpdp.lokanes-gpdp--servicebar {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   GIFT-PDP: Für wen / welcher Moment
========================================================================== */

.lokanes-gpdp .lokanes-gpdp-intro {
    margin: 0 0 22px;
}

.lokanes-gpdp .lokanes-gpdp-intro__line {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--gpdp-ink);
    text-wrap: pretty;
}

.lokanes-gpdp .lokanes-gpdp-intro__occasions {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
}

.lokanes-gpdp .lokanes-gpdp-intro__label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gpdp-muted);
}

.lokanes-gpdp .lokanes-gpdp-intro__list {
    display: flex;
    flex-wrap: wrap;
}

/* Bewusst Fließtext mit Trennpunkten: keine Pillen, damit die Anlässe
   nicht wie die Familienauswahl darunter aussehen. */
.lokanes-gpdp .lokanes-gpdp-intro__item {
    font-size: 14px;
    line-height: 1.6;
    color: var(--gpdp-text);
}

.lokanes-gpdp .lokanes-gpdp-intro__item + .lokanes-gpdp-intro__item::before {
    content: "·";
    margin: 0 8px;
    color: var(--gpdp-copper);
}

/* ==========================================================================
   GIFT-PDP: Familiennavigation
   Optik wie die bisherigen Swatches: aktiv mit durchgezogenem Kupferrand
   und kräftigerer Schrift, Alternativen mit gestricheltem Rand.
========================================================================== */

.lokanes-gpdp .lokanes-gpdp-family {
    display: grid;
    gap: 10px;
    margin: 0 0 24px;
}

.lokanes-gpdp .lokanes-gpdp-family__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.lokanes-gpdp .lokanes-gpdp-family__label {
    min-width: 46px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gpdp-muted);
}

.lokanes-gpdp .lokanes-gpdp-family__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lokanes-gpdp .lokanes-gpdp-family__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    border: 1px dashed #b9b9b9;
    border-radius: 30px;
    background-color: transparent;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    color: #666666;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.lokanes-gpdp a.lokanes-gpdp-family__item:hover {
    border: 1px solid var(--gpdp-ink);
    color: var(--gpdp-ink);
}

.lokanes-gpdp .lokanes-gpdp-family__item.is-current {
    border: 1px solid var(--gpdp-copper);
    background-color: var(--gpdp-tint);
    font-weight: 500;
    color: var(--gpdp-ink);
}

/* ==========================================================================
   GIFT-PDP: Geschenk-Service am Kaufbereich
========================================================================== */

.lokanes-gpdp .lokanes-gpdp-service {
    margin: 24px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--gpdp-line);
}

.lokanes-gpdp .lokanes-gpdp-service__list {
    display: grid;
    gap: 12px;
}

.lokanes-gpdp .lokanes-gpdp-service__item {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}

.lokanes-gpdp .lokanes-gpdp-service__icon {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    fill: none;
    stroke: var(--gpdp-copper);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lokanes-gpdp .lokanes-gpdp-service__text {
    font-size: 13px;
    line-height: 1.45;
    color: var(--gpdp-text);
}

.lokanes-gpdp .lokanes-gpdp-service__title {
    display: block;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--gpdp-ink);
}

/* Lieferzeit kommt als fertiges Markup aus Germanized */
.lokanes-gpdp .lokanes-gpdp-service__delivery,
.lokanes-gpdp .lokanes-gpdp-service__delivery * {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
}

.lokanes-gpdp .lokanes-gpdp-service__note {
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--gpdp-muted);
}

.lokanes-gpdp .lokanes-gpdp-service__link {
    display: inline-block;
    padding: 4px 0;
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--gpdp-text);
}

.lokanes-gpdp .lokanes-gpdp-service__link:hover {
    color: var(--gpdp-copper);
}


/* Desktop: Serviceversprechen über die volle Content-Breite. */
.lokanes-gpdp--servicebar .lokanes-gpdp-service {
    margin: 28px 0 0;
    padding: 24px 0 8px;
}

@media (min-width: 900px) {
    .lokanes-gpdp--servicebar .lokanes-gpdp-service__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px 28px;
    }

    .lokanes-gpdp--servicebar .lokanes-gpdp-service__item {
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 11px;
    }

    .lokanes-gpdp--servicebar .lokanes-gpdp-service__note {
        margin-top: 18px;
        text-align: center;
    }
}

@media (min-width: 601px) and (max-width: 899px) {
    .lokanes-gpdp--servicebar .lokanes-gpdp-service__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 24px;
    }
}

/* ==========================================================================
   GIFT-PDP: Was dich erwartet + Auspackerlebnis
========================================================================== */

.lokanes-gpdp .lokanes-gpdp__band {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: 56px;
    margin-top: 56px;
    padding-top: 56px;
    border-top: 1px solid var(--gpdp-line);
}

/* Ohne Teaser (z. B. spätere Rollen) steht die Liste allein */
.lokanes-gpdp .lokanes-gpdp__band > :only-child {
    grid-column: 1 / -1;
    max-width: 560px;
}

.lokanes-gpdp .lokanes-gpdp-contents__title {
    margin: 0 0 14px;
    font-family: 'Georgia', serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    color: var(--gpdp-ink);
}

.lokanes-gpdp .lokanes-gpdp-contents__list {
    border-top: 1px solid var(--gpdp-line);
}

.lokanes-gpdp .lokanes-gpdp-contents__item {
    border-bottom: 1px solid var(--gpdp-line);
}

.lokanes-gpdp .lokanes-gpdp-contents__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 8px 6px 8px 18px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    text-decoration: none;
    color: var(--gpdp-text);
    transition: color 0.3s ease;
}

/* Kupferpunkt wie in der bisherigen Liste */
.lokanes-gpdp .lokanes-gpdp-contents__link::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background-color: var(--gpdp-copper);
    transition: transform 0.3s ease;
}

.lokanes-gpdp a.lokanes-gpdp-contents__link:hover,
.lokanes-gpdp a.lokanes-gpdp-contents__link.is-current {
    color: var(--gpdp-ink);
}

.lokanes-gpdp a.lokanes-gpdp-contents__link:hover::before,
.lokanes-gpdp a.lokanes-gpdp-contents__link.is-current::before {
    transform: scale(1.6);
}

.lokanes-gpdp a.lokanes-gpdp-contents__link.is-current {
    font-weight: 500;
}

.lokanes-gpdp .lokanes-gpdp-contents__qty {
    flex: 0 0 auto;
    font-weight: 500;
    color: var(--gpdp-ink);
}

.lokanes-gpdp .lokanes-gpdp-contents__name {
    min-width: 0;
}

/* Statt Akkordeon-Chevron: klare Aktion in die Story bzw. zum Auspacken. */
.lokanes-gpdp .lokanes-gpdp-contents__action {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding-left: 14px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gpdp-muted);
    transition: color 0.3s ease;
}

.lokanes-gpdp .lokanes-gpdp-contents__action-arrow {
    font-size: 15px;
    line-height: 1;
    color: var(--gpdp-copper);
    transition: transform 0.3s ease;
}

.lokanes-gpdp a.lokanes-gpdp-contents__link:hover .lokanes-gpdp-contents__action,
.lokanes-gpdp a.lokanes-gpdp-contents__link.is-current .lokanes-gpdp-contents__action {
    color: var(--gpdp-ink);
}

.lokanes-gpdp a.lokanes-gpdp-contents__link:hover .lokanes-gpdp-contents__action-arrow {
    transform: translateX(3px);
}

.lokanes-gpdp .lokanes-gpdp-contents__details {
    display: inline-block;
    margin-top: 14px;
    padding: 4px 0;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--gpdp-muted);
}

.lokanes-gpdp .lokanes-gpdp-contents__details:hover {
    color: var(--gpdp-copper);
}

/* --- Basis für Auspackerlebnis-Komponenten --- */
.lokanes-gpdp .lokanes-gpdp-unboxing {
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 12fr);
    align-items: center;
    gap: 28px;
    padding: 20px;
    border-radius: 24px;
    background-color: var(--gpdp-tint);
}

.lokanes-gpdp .lokanes-gpdp-unboxing__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    object-fit: cover;
}

.lokanes-gpdp .lokanes-gpdp-unboxing__body {
    padding: 4px 8px 4px 0;
}

.lokanes-gpdp .lokanes-gpdp-unboxing__eyebrow,
.lokanes-gpdp .lokanes-gstory__eyebrow {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gpdp-copper);
}

.lokanes-gpdp .lokanes-gpdp-unboxing__title {
    margin: 0 0 10px;
    font-family: 'Georgia', serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: normal;
    text-transform: none;
    color: var(--gpdp-ink);
    text-wrap: balance;
}

.lokanes-gpdp .lokanes-gpdp-unboxing__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--gpdp-text);
}

.lokanes-gpdp .lokanes-gpdp-unboxing__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 6px 0 4px;
    border-bottom: 1px solid var(--gpdp-copper);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--gpdp-ink);
}

.lokanes-gpdp .lokanes-gpdp-unboxing__link:hover {
    color: var(--gpdp-copper);
}

.lokanes-gpdp .lokanes-gpdp-unboxing__arrow {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--gpdp-copper);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s ease;
}

.lokanes-gpdp .lokanes-gpdp-unboxing__link:hover .lokanes-gpdp-unboxing__arrow {
    transform: translateX(4px);
}


/* Set/Starter: kompakte Drei-Phasen-Vorschau der großen Auspackerlebnis-Seite. */
.lokanes-gpdp .lokanes-gpdp-unboxing--preview .lokanes-gpdp-unboxing__link {
    margin-top: 24px;
}

.lokanes-gpdp .lokanes-gpdp-unboxing--preview .lokanes-gpdp-steps__text {
    font-size: 13px;
    line-height: 1.5;
}

/* ==========================================================================
   GIFT-PDP: Produkt-Story
   Bühne mit dem kompletten Set, je Step wird ein Layer hervorgehoben.
   Ohne Skript stehen alle Steps untereinander; .lokanes-gstory--js
   (vom Skript im Seitenblock gesetzt) zeigt jeweils einen.
========================================================================== */

.lokanes-gpdp .lokanes-gstory {
    padding: 72px 0 24px;
}

.lokanes-gpdp .lokanes-gstory__head {
    margin-bottom: 36px;
    text-align: center;
}

.lokanes-gpdp .lokanes-gstory__h2 {
    margin: 0;
    font-family: 'Georgia', serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    color: var(--gpdp-ink);
    text-wrap: balance;
}


.lokanes-gpdp .lokanes-gstory__body {
    display: grid;
    grid-template-columns: minmax(0, 12fr) minmax(0, 8fr);
    align-items: center;
    gap: 40px;
}

.lokanes-gpdp .lokanes-gstory__stage-col,
.lokanes-gpdp .lokanes-gstory__content {
    min-width: 0;
}

/* --- Bühne: Grundbild und Layer deckungsgleich übereinander --- */
.lokanes-gpdp .lokanes-gstory__stage {
    position: relative;
    isolation: isolate;
    width: 100%;
    aspect-ratio: 4 / 3;
}

.lokanes-gpdp .lokanes-gstory__stage img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    transition: filter 0.45s ease, transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Ein Step ist gewählt: alles tritt zurück, sein Layer tritt hervor */
.lokanes-gpdp .lokanes-gstory.has-active .lokanes-gstory__stage img {
    filter: brightness(0.55) grayscale(20%);
}

.lokanes-gpdp .lokanes-gstory.has-active .lokanes-gstory__stage img.is-active {
    z-index: 2;
    filter: brightness(1.06) drop-shadow(0 18px 26px rgba(0, 0, 0, 0.4));
    transform: scale(1.05) translateY(-2%);
}

/* --- Pfeile unter dem Bild (nur mit Skript) --- */
.lokanes-gpdp .lokanes-gstory__pager {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;
}

.lokanes-gpdp .lokanes-gstory--js .lokanes-gstory__pager {
    display: flex;
}

.lokanes-gpdp .lokanes-gstory__pager-btn {
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 0;
    padding: 0;
    border: 1px solid var(--gpdp-line);
    border-radius: 50%;
    background-color: transparent;
    box-shadow: none;
    color: var(--gpdp-ink);
    cursor: pointer;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.lokanes-gpdp .lokanes-gstory__pager-btn:hover {
    border-color: var(--gpdp-copper);
    background-color: transparent;
    color: var(--gpdp-copper);
}

.lokanes-gpdp .lokanes-gstory__pager-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lokanes-gpdp .lokanes-gstory__count {
    min-width: 132px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;
    color: var(--gpdp-muted);
}

/* --- Auswahl der Steps --- */
.lokanes-gpdp .lokanes-gstory__nav {
    margin-bottom: 18px;
}

.lokanes-gpdp .lokanes-gstory__nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lokanes-gpdp .lokanes-gstory__nav-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 6px;
    border: 1px solid #c4c4c4;
    border-radius: 22px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    color: #666666;
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.lokanes-gpdp .lokanes-gstory__nav-link--set {
    padding: 0 18px;
    font-size: 14px;
}

.lokanes-gpdp .lokanes-gstory__nav-link:hover {
    border-color: var(--gpdp-ink);
    color: var(--gpdp-ink);
}

/* Gewählt: gefüllt und kräftiger, nicht nur eine andere Farbe */
.lokanes-gpdp .lokanes-gstory__nav-link.is-current {
    border-color: var(--gpdp-ink);
    background-color: var(--gpdp-ink);
    font-weight: 500;
    color: #ffffff;
}

/* Der Name eines nummerierten Steps steht im Text darunter; hier nur für Screenreader */
.lokanes-gpdp .lokanes-gstory__nav-num + .lokanes-gstory__nav-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Steps --- */
.lokanes-gpdp .lokanes-gstory__panels {
    display: grid;
    gap: 16px;
}

.lokanes-gpdp .lokanes-gstory__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 128px;
    align-items: center;
    gap: 24px;
    padding: 28px 30px;
    border-radius: 24px;
    background-color: var(--gpdp-sand);
}

.lokanes-gpdp .lokanes-gstory__panel--set {
    grid-template-columns: minmax(0, 1fr);
}

/* Mit Skript liegen alle Steps in derselben Zelle. So bleibt die Höhe
   beim Wechsel gleich und nichts darunter springt. */
.lokanes-gpdp .lokanes-gstory--js .lokanes-gstory__panels {
    grid-template-areas: "step";
    gap: 0;
}

.lokanes-gpdp .lokanes-gstory--js .lokanes-gstory__panel {
    grid-area: step;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.lokanes-gpdp .lokanes-gstory--js .lokanes-gstory__panel.is-active {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.35s ease;
}

.lokanes-gpdp .lokanes-gstory__panel-eyebrow {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gpdp-muted);
}

.lokanes-gpdp .lokanes-gstory__panel-title {
    margin: 0 0 10px;
    font-family: 'Georgia', serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    color: var(--gpdp-ink);
}

.lokanes-gpdp .lokanes-gstory__panel-qty {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--gpdp-ink);
}

.lokanes-gpdp .lokanes-gstory__panel-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--gpdp-text);
}

.lokanes-gpdp .lokanes-gstory__hint {
    display: none;
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--gpdp-muted);
}

.lokanes-gpdp .lokanes-gstory--js .lokanes-gstory__hint {
    display: block;
}

/* --- Karte mit den Orten des Sets ---
   Im HTML steht sie vor dem Text, im Raster rechts daneben. */
.lokanes-gpdp .lokanes-gstory__panel-body {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.lokanes-gpdp .lokanes-gstory__map {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    aspect-ratio: 0.76 / 1;
    background: url('/wp-content/uploads/2026/04/DE_map.svg') center / contain no-repeat;
}

.lokanes-gpdp .lokanes-gstory__map-pins {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.lokanes-gpdp .lokanes-gstory__pin {
    fill: var(--gpdp-ink);
    opacity: 0.3;
}

.lokanes-gpdp .lokanes-gstory__pin.is-active {
    fill: var(--gpdp-copper);
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(204, 158, 126, 0.8));
}

/* ==========================================================================
   GIFT-PDP: Responsive
========================================================================== */

/* Tablet und schmaler: Bühne über dem Text, keine Sticky-Bühne, keine Scroll-Lücken */
@media (max-width: 899px) {
    .lokanes-gpdp .lokanes-gpdp__band {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
        margin-top: 44px;
        padding-top: 44px;
    }

    .lokanes-gpdp .lokanes-gstory {
        padding: 64px 0 24px;
    }

    .lokanes-gpdp .lokanes-gstory__h2 {
        font-size: 30px;
    }

    .lokanes-gpdp .lokanes-gstory__body {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .lokanes-gpdp .lokanes-gstory__stage-col {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }

    .lokanes-gpdp .lokanes-gstory__content {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }

    .lokanes-gpdp .lokanes-gstory__nav-list {
        justify-content: center;
    }

    /* Einspaltig darf der Text so hoch sein, wie er ist: Bild, Pfeile und
       Auswahl stehen darüber und bleiben beim Wechsel an ihrem Platz. */
    .lokanes-gpdp .lokanes-gstory--js .lokanes-gstory__panels {
        display: block;
    }

    .lokanes-gpdp .lokanes-gstory--js .lokanes-gstory__panel {
        display: none;
        visibility: visible;
        opacity: 1;
    }

    .lokanes-gpdp .lokanes-gstory--js .lokanes-gstory__panel.is-active {
        display: grid;
    }
}

@media (max-width: 600px) {
    .lokanes-gpdp.lokanes-gpdp--main {
        padding: 0 16px;
    }


    .lokanes-gpdp.lokanes-gpdp--servicebar {
        padding: 0 16px;
    }

    .lokanes-gpdp .lokanes-gpdp-intro__line {
        font-size: 16px;
    }

    .lokanes-gpdp .lokanes-gpdp-contents__title {
        font-size: 26px;
    }


    .lokanes-gpdp .lokanes-gpdp-contents__action-label {
        display: none;
    }

    .lokanes-gpdp .lokanes-gpdp-contents__action {
        padding-left: 8px;
    }

    .lokanes-gpdp .lokanes-gpdp-contents__action-arrow {
        font-size: 17px;
    }

    /* Gift-Service auf Mobile kompakter als 2x2-Grid */
    .lokanes-gpdp .lokanes-gpdp-service {
        margin-top: 20px;
        padding-top: 18px;
    }

    .lokanes-gpdp .lokanes-gpdp-service__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 14px;
    }

    .lokanes-gpdp .lokanes-gpdp-service__item {
        grid-template-columns: 20px minmax(0, 1fr);
        gap: 9px;
        align-items: start;
    }

    .lokanes-gpdp .lokanes-gpdp-service__icon {
        width: 18px;
        height: 18px;
    }

    .lokanes-gpdp .lokanes-gpdp-service__title {
        font-size: 13px;
        line-height: 1.3;
    }

    .lokanes-gpdp .lokanes-gpdp-service__text {
        font-size: 12px;
        line-height: 1.4;
    }

    .lokanes-gpdp .lokanes-gpdp-service__note {
        margin-top: 14px;
        font-size: 12px;
        line-height: 1.45;
    }

    .lokanes-gpdp .lokanes-gpdp-unboxing {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 16px 16px 22px;
    }

    .lokanes-gpdp .lokanes-gpdp-unboxing__body {
        padding: 0 4px;
    }

    .lokanes-gpdp .lokanes-gpdp-unboxing__title {
        font-size: 22px;
    }

    .lokanes-gpdp .lokanes-gstory {
        padding: 52px 0 16px;
    }

    .lokanes-gpdp .lokanes-gstory__head {
        margin-bottom: 30px;
    }

    .lokanes-gpdp .lokanes-gstory__h2 {
        font-size: 26px;
    }

    .lokanes-gpdp .lokanes-gstory__pager {
        margin-top: 10px;
    }

    .lokanes-gpdp .lokanes-gstory__nav-list {
        flex-wrap: nowrap;
        gap: 6px;
    }

    .lokanes-gpdp .lokanes-gstory__nav-link {
        min-width: 42px;
    }

    .lokanes-gpdp .lokanes-gstory__nav-link--set {
        padding: 0 12px;
        white-space: nowrap;
    }

    /* Schmal: Karte klein oben rechts, der Text fließt um sie herum und darunter in voller Breite */
    .lokanes-gpdp .lokanes-gstory__panel,
    .lokanes-gpdp .lokanes-gstory--js .lokanes-gstory__panel.is-active {
        display: flow-root;
        padding: 24px 20px;
        border-radius: 20px;
    }

    .lokanes-gpdp .lokanes-gstory__map {
        float: right;
        width: 84px;
        margin: 0 0 8px 14px;
    }

    .lokanes-gpdp .lokanes-gstory__panel-title {
        font-size: 24px;
    }
}



/* Weniger Bewegung: Zustände wechseln ohne Animation, nichts verschiebt sich */
@media (prefers-reduced-motion: reduce) {
    .lokanes-gpdp *,
    .lokanes-gpdp *::before,
    .lokanes-gpdp *::after {
        transition: none !important;
    }

    .lokanes-gpdp .lokanes-gstory.has-active .lokanes-gstory__stage img.is-active {
        transform: none;
    }

    .lokanes-gpdp .lokanes-gpdp-unboxing__link:hover .lokanes-gpdp-unboxing__arrow,
    .lokanes-gpdp a.lokanes-gpdp-contents__link:hover .lokanes-gpdp-contents__action-arrow {
        transform: none;
    }
}

/* ==========================================================================
   GIFT-PDP: Rollout (alle Geschenksets, Starter, Entdeckerpost)
   Ergänzungen zum Pilot. Der Block steht am Ende des Abschnitts GIFT-PDP
   und ist in sich vollständig (eigene Media Queries).
========================================================================== */

/* --- Familiennavigation: Bezeichner aller Zeilen gleich breit ---
   Die Bezeichner sind unterschiedlich lang ("Für", "Getränk", "Mit").
   Als Raster stehen die Auswahlen aller Zeilen bündig untereinander.
   Der Bezeichner steht auf Höhe der ersten Zeile seiner Auswahl, auch
   wenn sie auf sehr schmalen Bildschirmen umbricht. */
.lokanes-gpdp .lokanes-gpdp-family {
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    gap: 10px 14px;
}

.lokanes-gpdp .lokanes-gpdp-family__row {
    display: contents;
}

.lokanes-gpdp .lokanes-gpdp-family__label {
    min-width: 0;
    line-height: 44px;
}

/* Mobile: "Rot / Weiß / Traubensaft" bleibt neben "Getränk" in einer Zeile */
@media (max-width: 600px) {
    .lokanes-gpdp .lokanes-gpdp-family {
        column-gap: 12px;
    }

    .lokanes-gpdp .lokanes-gpdp-family__options {
        gap: 8px 6px;
    }

    .lokanes-gpdp .lokanes-gpdp-family__item {
        padding: 0 16px;
    }
}

/* --- Entdeckerpost: Auspacken in drei Schritten direkt auf der Seite ---
   Statisch, ohne Skript. Nutzt die Fläche des Auspack-Teasers. */
.lokanes-gpdp .lokanes-gpdp-unboxing--steps {
    display: block;
    padding: 26px 26px 28px;
}

/* Die Schritte sind höher als die Inhaltsliste daneben: beide beginnen oben,
   statt die Liste mittig mit Leerraum darüber zu setzen. */
.lokanes-gpdp .lokanes-gpdp__band:has(.lokanes-gpdp-unboxing--steps) {
    align-items: start;
}

.lokanes-gpdp .lokanes-gpdp-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 20px;
}

.lokanes-gpdp .lokanes-gpdp-steps__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    object-fit: cover;
}

.lokanes-gpdp .lokanes-gpdp-steps__title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 12px 0 4px;
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: normal;
    text-transform: none;
    color: var(--gpdp-ink);
}

.lokanes-gpdp .lokanes-gpdp-steps__num {
    flex: 0 0 auto;
    font-family: 'Georgia', serif;
    font-size: 17px;
    font-weight: 400;
    color: var(--gpdp-copper);
}

.lokanes-gpdp .lokanes-gpdp-steps__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--gpdp-text);
}

/* Schmale Fläche (rechte Spalte auf kleinen Desktops, Mobile): Bild links, Text rechts */
@media (min-width: 900px) and (max-width: 1139px), (max-width: 600px) {
    .lokanes-gpdp .lokanes-gpdp-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .lokanes-gpdp .lokanes-gpdp-steps__item {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        align-items: center;
        gap: 14px;
    }

    .lokanes-gpdp .lokanes-gpdp-steps__title {
        margin-top: 0;
    }
}

@media (max-width: 600px) {
    .lokanes-gpdp .lokanes-gpdp-unboxing--steps {
        padding: 20px 16px 22px;
    }

    .lokanes-gpdp .lokanes-gpdp-steps__text {
        font-size: 13px;
    }
}

/* ==========================================================================
   SINGLE-PDP
   Gemeinsame Produktseite für Einzelprodukte (Default-Layout), auch für
   Grußkarte und Geschenkboxen.
   Seitenblock: wordpress/page-blocks/single-pdp.html
   Bausteine:   Snippet "Product Page Erstellung für Einzelprodukten
                automatisieren", Abschnitt "EINZELPRODUKT-SEITE V2"
   Alle Regeln unter .lokanes-spdp gescoped. Geschenkset-Seiten (.lokanes-gpdp),
   das bisherige Default-Layout und die eigenen Layouts von Grußkarte und
   Geschenkboxen enthalten diese Klasse nicht und sind nicht betroffen.
   Designsprache wie GIFT-PDP: gleiche Farben, Schriften, Radien und Abstände.
========================================================================== */

.lokanes-spdp {
    --spdp-copper: #cc9e7e;
    --spdp-ink: #1a1a1a;
    --spdp-text: #4a4a4a;
    --spdp-muted: #888888;
    --spdp-line: rgba(204, 158, 126, 0.35);
    --spdp-tint: rgba(204, 158, 126, 0.1);
    --spdp-sand: #e6ddd7;
    box-sizing: border-box;
    font-family: 'Jost', sans-serif;
    /* Aufrecht, auch wenn weiter oben auf der Seite ein <em> offen bleibt (der Hinweis
       "Du planst eine größere Bestellung?" unter dem Warenkorb schließt sein <em> nicht,
       dadurch erbt sonst alles darunter die Kursivschrift). Bewusste Kursive wie der
       kreative Setname auf den Karten setzen font-style selbst und bleiben kursiv. */
    font-style: normal;
    color: var(--spdp-text);
}

.lokanes-spdp *,
.lokanes-spdp *::before,
.lokanes-spdp *::after {
    box-sizing: border-box;
}

.lokanes-spdp a:focus-visible,
.lokanes-spdp button:focus-visible {
    outline: 2px solid var(--spdp-copper);
    outline-offset: 3px;
}

/* --- Rahmen der drei Teile --- */
.lokanes-spdp.lokanes-spdp--buy {
    width: 100%;
}

.lokanes-spdp.lokanes-spdp--main {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   SINGLE-PDP: Kurzer Einstieg am Kaufbereich
========================================================================== */

.lokanes-spdp .lokanes-spdp-intro {
    margin: 0 0 22px;
}

.lokanes-spdp .lokanes-spdp-intro__line {
    margin: 0;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--spdp-ink);
    text-wrap: pretty;
}

/* ==========================================================================
   SINGLE-PDP: Familiennavigation (bestehende Swatches, z. B. "Sorte")
   Markup und Daten bleiben die des Shortcodes lokanes_produkt_swatches.
   Optik wie die Familiennavigation der Geschenkset-Seite: aktiv mit
   Kupferrand, Alternativen gestrichelt. Die Selektoren sind bewusst
   spezifischer als der Style-Block, den der Shortcode selbst ausgibt.
   Mehrere Zeilen (Geschenkboxen: Größe und Grußkarte) stehen als Raster,
   damit die Auswahlen bündig untereinander beginnen.
========================================================================== */

.lokanes-spdp .lokanes-swatch-group {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    gap: 10px 14px;
    margin: 0 0 24px;
}

.lokanes-spdp .lokanes-swatch-group .lokanes-swatch-row {
    display: contents;
}

.lokanes-spdp .lokanes-swatch-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0 0 24px;
}

.lokanes-spdp .lokanes-swatch-row .swatch-label {
    font-size: 12px;
    font-weight: 400;
    line-height: 44px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--spdp-muted);
}

.lokanes-spdp .lokanes-swatch-row .swatch-items-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lokanes-spdp .lokanes-swatch-row .swatch-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    border: 1px dashed #b9b9b9;
    border-radius: 30px;
    background-color: transparent;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    color: #666666;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.lokanes-spdp .lokanes-swatch-row a.swatch-item:hover {
    border: 1px solid var(--spdp-ink);
    background-color: transparent;
    color: var(--spdp-ink);
}

.lokanes-spdp .lokanes-swatch-row .swatch-item.active {
    border: 1px solid var(--spdp-copper);
    background-color: var(--spdp-tint);
    font-weight: 500;
    color: var(--spdp-ink);
}

/* ==========================================================================
   SINGLE-PDP: Vorteile unter dem Warenkorb
   Keine Links in der Liste. Die Sprünge zu Herkunft und Details stehen
   einmal darunter.
========================================================================== */

.lokanes-spdp .lokanes-spdp-benefits {
    margin: 24px 0 20px;
    padding: 20px 0 0;
    border-top: 1px solid var(--spdp-line);
}

.lokanes-spdp .lokanes-spdp-benefits__list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lokanes-spdp .lokanes-spdp-benefits__item {
    position: relative;
    margin: 0;
    padding-left: 28px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--spdp-ink);
}

/* Kupferner Haken */
.lokanes-spdp .lokanes-spdp-benefits__item::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0.42em;
    width: 11px;
    height: 6px;
    border-left: 1.5px solid var(--spdp-copper);
    border-bottom: 1.5px solid var(--spdp-copper);
    transform: rotate(-45deg);
}

.lokanes-spdp .lokanes-spdp-benefits__links {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 22px;
    margin: 14px 0 0;
}

.lokanes-spdp .lokanes-spdp-benefits__link {
    display: inline-block;
    padding: 4px 0;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--spdp-text);
}

.lokanes-spdp .lokanes-spdp-benefits__link:hover {
    color: var(--spdp-copper);
}

/* ==========================================================================
   SINGLE-PDP: Service-Zeile (Versand und Zahlung)
   Ersetzt die bisherige Trust-Zeile. Aufbau und Maße wie der Service-Block
   der Geschenkset-Seite: Symbol, Titel, kurze Zeilen. Die beiden Einträge
   stehen nebeneinander, solange jeder mindestens 210px bekommt, sonst
   untereinander (schmale Kaufspalte auf Tablets, Smartphone).
========================================================================== */

.lokanes-spdp .lokanes-spdp-service {
    margin: 0 0 6px;
    padding: 20px 0 0;
    border-top: 1px solid var(--spdp-line);
}

.lokanes-spdp .lokanes-spdp-service__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lokanes-spdp .lokanes-spdp-service__item {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    margin: 0;
}

.lokanes-spdp .lokanes-spdp-service__icon {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    fill: none;
    stroke: var(--spdp-copper);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lokanes-spdp .lokanes-spdp-service__text {
    font-size: 13px;
    line-height: 1.45;
    color: var(--spdp-text);
}

.lokanes-spdp .lokanes-spdp-service__title {
    display: block;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--spdp-ink);
}

.lokanes-spdp .lokanes-spdp-service__line {
    display: block;
}

/* Lieferzeit kommt als fertiges Markup aus Germanized */
.lokanes-spdp .lokanes-spdp-service__delivery,
.lokanes-spdp .lokanes-spdp-service__delivery * {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
}

.lokanes-spdp .lokanes-spdp-service__alcohol {
    margin-top: 2px;
    color: #777777;
}

/* Zahlungsarten als kleine Plaketten mit feiner Kupferlinie, ohne Fläche:
   dieselbe Sprache wie die Familiennavigation darüber. Jede Plakette ist ein
   Link zur Seite "Zahlung und Versand" und reagiert wie die Logos im Footer
   (Kupferrand, leichtes Anheben, Schatten, Logo wird etwas größer).
   Die Logo-Dateien sind die des Footers und für dunklen Grund gezeichnet
   (hell, einfarbig); der Filter zeigt sie hier dunkel. */
.lokanes-spdp .lokanes-spdp-service__pay {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.lokanes-spdp .lokanes-spdp-service__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 40px;
    padding: 0 7px;
    border: 1px solid rgba(204, 158, 126, 0.6);
    border-radius: 6px;
    background-color: transparent;
    color: var(--spdp-ink);
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.lokanes-spdp .lokanes-spdp-service__logo:hover,
.lokanes-spdp .lokanes-spdp-service__logo:focus-visible {
    border-color: var(--spdp-copper);
    background-color: rgba(204, 158, 126, 0.12);
    color: var(--spdp-ink);
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
}

.lokanes-spdp .lokanes-spdp-service__logo img {
    display: block;
    width: 24px;
    height: 24px;
    filter: brightness(0);
    opacity: 0.82;
    transition: transform 0.3s ease;
}

.lokanes-spdp .lokanes-spdp-service__logo:hover img,
.lokanes-spdp .lokanes-spdp-service__logo:focus-visible img {
    transform: scale(1.08);
}

.lokanes-spdp .lokanes-spdp-service__logo--text {
    gap: 6px;
    font-size: 12px;
    line-height: 1;
    padding: 0 10px;
    white-space: nowrap;
    color: var(--spdp-ink);
}

.lokanes-spdp .lokanes-spdp-service__logo--text svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--spdp-ink);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ==========================================================================
   SINGLE-PDP: Produktstory / Herkunft
   Mit Bild: Bild links, Text-Karte rechts.
   Ohne eigenes Bild: nur die Text-Karte, mittig. Das Hauptbild steht schon
   oben in der Galerie und wird nicht wiederholt.
========================================================================== */

.lokanes-spdp .lokanes-spdp-story {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 40px;
    margin-top: 56px;
    padding-top: 56px;
    border-top: 1px solid var(--spdp-line);
    scroll-margin-top: 100px;
}

.lokanes-spdp .lokanes-spdp-story--media {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.lokanes-spdp .lokanes-spdp-story__media {
    margin: 0;
}

.lokanes-spdp .lokanes-spdp-story__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 24px;
    object-fit: cover;
}

.lokanes-spdp .lokanes-spdp-story__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 128px;
    align-items: center;
    gap: 28px;
    padding: 36px 40px;
    border-radius: 24px;
    background-color: var(--spdp-sand);
}

/* Ohne Karte (kein Herkunfts-Pin im Master) nimmt der Text die ganze Breite */
.lokanes-spdp .lokanes-spdp-story__panel--nomap {
    grid-template-columns: minmax(0, 1fr);
}

.lokanes-spdp .lokanes-spdp-story--text .lokanes-spdp-story__panel {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr) 148px;
    gap: 44px;
    padding: 44px 52px;
}

.lokanes-spdp .lokanes-spdp-story--text .lokanes-spdp-story__panel--nomap {
    grid-template-columns: minmax(0, 1fr);
}

/* Im HTML steht die Karte vor dem Text, im Raster rechts daneben */
.lokanes-spdp .lokanes-spdp-story__body {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.lokanes-spdp .lokanes-spdp-story__eyebrow {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--spdp-muted);
}

.lokanes-spdp .lokanes-spdp-story__title {
    margin: 0 0 12px;
    font-family: 'Georgia', serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    color: var(--spdp-ink);
    text-wrap: balance;
}

.lokanes-spdp .lokanes-spdp-story__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--spdp-text);
}

/* Karte: klein, sie belegt die Herkunft und trägt nicht die Story */
.lokanes-spdp .lokanes-spdp-story__map {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    aspect-ratio: 0.76 / 1;
    background: url('/wp-content/uploads/2026/04/DE_map.svg') center / contain no-repeat;
}

.lokanes-spdp .lokanes-spdp-story__map-pins {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.lokanes-spdp .lokanes-spdp-story__pin {
    fill: var(--spdp-copper);
    filter: drop-shadow(0 0 4px rgba(204, 158, 126, 0.8));
}

/* ==========================================================================
   SINGLE-PDP: Details & Pflichtangaben
   Markup, Inhalt und Skript bleiben die des bestehenden Akkordeons.
   Hier nur der Abstand im neuen Seitenfluss.
========================================================================== */

.lokanes-spdp .lokanes-details-section {
    margin: 72px auto 0;
    scroll-margin-top: 100px;
}

/* ==========================================================================
   SINGLE-PDP: Empfehlungen
   "Passt gut dazu" / "Aus der Region" und "Auch in diesen Geschenksets
   enthalten". Eine horizontale Kartenreihe mit scroll-snap, kein Slider-
   Framework. Ohne Skript stehen beide Reihen mit Überschrift untereinander;
   .lokanes-spdp-rec--js (vom Skript im Seitenblock gesetzt) schaltet auf
   Tabs um und zeigt die Pfeile, wenn eine Reihe breiter ist als ihr Platz.
========================================================================== */

.lokanes-spdp .lokanes-spdp-rec {
    margin-top: 72px;
    padding-top: 56px;
    border-top: 1px solid var(--spdp-line);
}

.lokanes-spdp .lokanes-spdp-rec__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

/* Zwei Reihen ohne Skript: Der Kopf ist leer, jede Reihe trägt ihre Überschrift */
.lokanes-spdp .lokanes-spdp-rec--tabs:not(.lokanes-spdp-rec--js) .lokanes-spdp-rec__head {
    display: none;
}

.lokanes-spdp .lokanes-spdp-rec__heading {
    min-width: 0;
}

.lokanes-spdp .lokanes-spdp-rec__eyebrow {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--spdp-copper);
}

.lokanes-spdp .lokanes-spdp-rec__title,
.lokanes-spdp .lokanes-spdp-rec__panel-title {
    margin: 0;
    font-family: 'Georgia', serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    color: var(--spdp-ink);
    text-wrap: balance;
}

.lokanes-spdp .lokanes-spdp-rec__panel-title {
    margin-bottom: 26px;
}

.lokanes-spdp .lokanes-spdp-rec__panel + .lokanes-spdp-rec__panel {
    margin-top: 48px;
}

/* --- Tabs und Pfeile: nur mit Skript --- */
.lokanes-spdp .lokanes-spdp-rec__tabs,
.lokanes-spdp .lokanes-spdp-rec__nav {
    display: none;
}

.lokanes-spdp .lokanes-spdp-rec--js .lokanes-spdp-rec__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 32px;
}

.lokanes-spdp .lokanes-spdp-rec--js .lokanes-spdp-rec__nav {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.lokanes-spdp .lokanes-spdp-rec--js .lokanes-spdp-rec__nav[hidden],
.lokanes-spdp .lokanes-spdp-rec--js .lokanes-spdp-rec__panel[hidden] {
    display: none;
}

.lokanes-spdp .lokanes-spdp-rec--js .lokanes-spdp-rec__panel + .lokanes-spdp-rec__panel {
    margin-top: 0;
}

/* Mit Skript benennen die Tabs die Reihen; die Überschriften bleiben für Screenreader */
.lokanes-spdp .lokanes-spdp-rec--js .lokanes-spdp-rec__panel-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Die Tabs sind die Überschrift des Bereichs: gewählt in Schwarz mit Kupferlinie */
.lokanes-spdp .lokanes-spdp-rec__tab {
    position: relative;
    min-height: 44px;
    margin: 0;
    padding: 0 0 9px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    font-family: 'Georgia', serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    color: #9a9a9a;
    cursor: pointer;
    transition: color 0.3s ease;
}

.lokanes-spdp .lokanes-spdp-rec__tab:hover,
.lokanes-spdp .lokanes-spdp-rec__tab:focus {
    background-color: transparent;
    box-shadow: none;
    color: var(--spdp-ink);
}

.lokanes-spdp .lokanes-spdp-rec__tab.is-active {
    color: var(--spdp-ink);
}

.lokanes-spdp .lokanes-spdp-rec__tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--spdp-copper);
}

.lokanes-spdp .lokanes-spdp-rec__arrow {
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 0;
    padding: 0;
    border: 1px solid var(--spdp-line);
    border-radius: 50%;
    background-color: transparent;
    box-shadow: none;
    color: var(--spdp-ink);
    cursor: pointer;
    transition: border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.lokanes-spdp .lokanes-spdp-rec__arrow:hover {
    border-color: var(--spdp-copper);
    background-color: transparent;
    color: var(--spdp-copper);
}

.lokanes-spdp .lokanes-spdp-rec__arrow:disabled {
    border-color: var(--spdp-line);
    color: var(--spdp-ink);
    opacity: 0.3;
    cursor: default;
}

.lokanes-spdp .lokanes-spdp-rec__arrow svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Kartenreihe --- */
.lokanes-spdp .lokanes-spdp-carousel {
    display: flex;
    gap: 24px;
    margin: 0;
    padding: 6px 0 16px;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.lokanes-spdp .lokanes-spdp-carousel::-webkit-scrollbar {
    display: none;
}

/* Desktop: vier Karten nebeneinander */
.lokanes-spdp .lokanes-spdp-carousel__item {
    display: flex;
    flex: 0 0 calc((100% - 72px) / 4);
    min-width: 0;
    margin: 0;
    scroll-snap-align: start;
}

/* Die Karte bleibt die bestehende Produktkarte (lokanes_set_card).
   Hier nur Größe und Typografie für die Reihe. Die globalen Kartenregeln
   setzen Breiten mit !important, deshalb auch hier. */
.lokanes-spdp .lokanes-spdp-carousel .lokanes-hybrid-card-link {
    flex: 1 1 auto;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto;
    scroll-snap-align: none;
}

.lokanes-spdp .lokanes-spdp-carousel .hybrid-image-wrapper {
    width: 100%;
    margin-bottom: 18px;
    border-radius: 14px;
}

.lokanes-spdp .lokanes-spdp-carousel .hybrid-image-wrapper > img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.lokanes-spdp .lokanes-spdp-carousel .hybrid-eyebrow {
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: 0.14em;
}

.lokanes-spdp .lokanes-spdp-carousel .hybrid-title {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.25;
}

/* Preis und Button stehen in einer Reihe auf gleicher Höhe, auch wenn Titel umbrechen */
.lokanes-spdp .lokanes-spdp-carousel .hybrid-price {
    margin: auto 0 16px;
    padding-top: 6px;
    font-size: 15px;
}

.lokanes-spdp .lokanes-spdp-carousel .hybrid-fake-btn {
    min-height: 44px !important;
    margin-top: 0;
    padding: 10px 26px !important;
    font-size: 12px !important;
    letter-spacing: 0.14em !important;
}

/* --- Geschenksets: genau ein Set als ruhige Querkarte --- */
@media (min-width: 601px) {
    .lokanes-spdp .lokanes-spdp-rec--one .lokanes-spdp-carousel__item {
        flex: 0 0 min(100%, 780px);
    }

    .lokanes-spdp .lokanes-spdp-rec--one .lokanes-spdp-carousel .lokanes-hybrid-card-link {
        flex-direction: row;
        align-items: center;
        gap: 40px;
        text-align: left;
    }

    .lokanes-spdp .lokanes-spdp-rec--one .lokanes-spdp-carousel .hybrid-image-wrapper {
        flex: 0 0 46%;
        width: 46%;
        margin-bottom: 0;
    }

    .lokanes-spdp .lokanes-spdp-rec--one .lokanes-spdp-carousel .hybrid-content {
        align-items: flex-start;
    }

    .lokanes-spdp .lokanes-spdp-rec--one .lokanes-spdp-carousel .hybrid-title {
        font-size: 24px;
    }

    .lokanes-spdp .lokanes-spdp-rec--one .lokanes-spdp-carousel .hybrid-price {
        margin: 2px 0 18px;
    }
}

/* ==========================================================================
   SINGLE-PDP: Responsive
========================================================================== */

/* Kleiner Desktop: drei Karten */
@media (max-width: 1099px) {
    .lokanes-spdp .lokanes-spdp-carousel__item {
        flex-basis: calc((100% - 48px) / 3);
    }
}

/* Tablet und schmaler: Story einspaltig, zwei Karten plus Anschnitt */
@media (max-width: 899px) {
    .lokanes-spdp .lokanes-spdp-story {
        gap: 24px;
        margin-top: 44px;
        padding-top: 44px;
    }

    .lokanes-spdp .lokanes-spdp-story--media {
        grid-template-columns: minmax(0, 1fr);
    }

    .lokanes-spdp .lokanes-spdp-story__media,
    .lokanes-spdp .lokanes-spdp-story--media .lokanes-spdp-story__panel {
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
    }

    .lokanes-spdp .lokanes-details-section {
        margin-top: 56px;
    }

    .lokanes-spdp .lokanes-spdp-rec {
        margin-top: 56px;
        padding-top: 44px;
    }

    .lokanes-spdp .lokanes-spdp-carousel {
        gap: 20px;
    }

    .lokanes-spdp .lokanes-spdp-carousel__item {
        flex-basis: 40%;
    }
}

@media (max-width: 600px) {
    .lokanes-spdp.lokanes-spdp--main {
        padding: 0 16px;
    }

    .lokanes-spdp .lokanes-spdp-intro__line {
        font-size: 16px;
    }

    .lokanes-spdp .lokanes-swatch-row,
    .lokanes-spdp .lokanes-swatch-group {
        gap: 8px 12px;
    }

    .lokanes-spdp .lokanes-swatch-row .swatch-items-container {
        gap: 8px 6px;
    }

    .lokanes-spdp .lokanes-swatch-row .swatch-item {
        padding: 0 16px;
    }

    /* Schmal: Karte klein oben rechts, der Text fließt um sie herum */
    .lokanes-spdp .lokanes-spdp-story__panel,
    .lokanes-spdp .lokanes-spdp-story--text .lokanes-spdp-story__panel {
        display: flow-root;
        padding: 26px 22px;
        border-radius: 20px;
    }

    .lokanes-spdp .lokanes-spdp-story__map {
        float: right;
        width: 84px;
        margin: 0 0 8px 14px;
    }

    .lokanes-spdp .lokanes-spdp-story__img {
        border-radius: 20px;
    }

    .lokanes-spdp .lokanes-spdp-story__title {
        font-size: 26px;
    }

    .lokanes-spdp .lokanes-spdp-story__text {
        font-size: 15px;
    }

    .lokanes-spdp .lokanes-spdp-rec__head {
        margin-bottom: 18px;
    }

    .lokanes-spdp .lokanes-spdp-rec__title,
    .lokanes-spdp .lokanes-spdp-rec__panel-title,
    .lokanes-spdp .lokanes-spdp-rec__tab {
        font-size: 24px;
    }

    .lokanes-spdp .lokanes-spdp-rec--js .lokanes-spdp-rec__tabs {
        gap: 2px 22px;
    }

    /* Auf dem Handy wird gewischt: keine Pfeile */
    .lokanes-spdp .lokanes-spdp-rec--js .lokanes-spdp-rec__nav {
        display: none;
    }

    /* Eine große Karte plus Anschnitt der nächsten; die Reihe läuft bis an den rechten Rand */
    .lokanes-spdp .lokanes-spdp-carousel {
        gap: 16px;
        margin-right: -16px;
        padding-right: 16px;
        scroll-padding-left: 0;
    }

    .lokanes-spdp .lokanes-spdp-carousel__item {
        flex-basis: 72%;
    }

    /* Eine einzelne Karte füllt die Breite */
    .lokanes-spdp .lokanes-spdp-carousel__item:only-child {
        flex-basis: 100%;
    }

    .lokanes-spdp .lokanes-spdp-carousel .hybrid-title {
        font-size: 19px;
    }
}

/* Weniger Bewegung: Zustände wechseln ohne Animation */
@media (prefers-reduced-motion: reduce) {
    .lokanes-spdp *,
    .lokanes-spdp *::before,
    .lokanes-spdp *::after {
        transition: none !important;
    }

    .lokanes-spdp .lokanes-spdp-carousel {
        scroll-behavior: auto;
    }

    /* Plaketten der Zahlungsarten: Rand und Fläche wechseln, nichts bewegt sich */
    .lokanes-spdp .lokanes-spdp-service__logo:hover,
    .lokanes-spdp .lokanes-spdp-service__logo:focus-visible,
    .lokanes-spdp .lokanes-spdp-service__logo:hover img,
    .lokanes-spdp .lokanes-spdp-service__logo:focus-visible img {
        transform: none;
    }
}

/* Set-Karussells: gleiche Inhaltsbreite wie Einzelproduktseiten */
.lokanes-setrec {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

@media (max-width: 600px) {
    .lokanes-setrec {
        padding-left: 16px;
        padding-right: 16px;
    }

    .lokanes-setrec ul.lokanes-spdp-carousel {
        margin-right: -16px;
    }
}

/* ==========================================================================
   GALLERY-EDITORIAL
   Kurze atmosphärische Texte auf einzelnen Bildern der WoodMart-Produktgalerie.
   Bausteine: Snippet "Galerie: Editorial-Texte"
   Pflege:    Master, Feld 'gallery_editorial'
   Die Klassen entstehen nur an Galeriebildern mit einem Eintrag im Master.
   Alle anderen Bilder, die Thumbnails und alle Produkte ohne Einträge sind von
   diesem Abschnitt nicht betroffen. An der Galerie selbst wird nichts gestylt.
========================================================================== */

.woocommerce-product-gallery .lokanes-gallery-editorial-host {
    position: relative;
}

/* Fläche genau über dem Bild. Sie fängt keine Klicks und keine Wischgesten ab.
   container-type macht die Bildfläche zum Maß für Schrift und Textbreite (cqw),
   damit der Text bei jeder Galeriegröße im selben Verhältnis zum Motiv steht. */
.woocommerce-product-gallery .lokanes-gallery-editorial {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    margin: 0;
    padding: 0;
    pointer-events: none;
    container-type: size;
}

.woocommerce-product-gallery .lokanes-gallery-editorial__text {
    position: absolute;
    display: block;
    max-width: 46%;
    max-width: max(44cqw, 150px);
    margin: 0;
    padding: 0;
    font-family: 'Georgia', serif;
    /* Erste Zeile für Browser ohne Container-Einheiten, zweite für alle anderen */
    font-size: clamp(12px, 1.6vw, 24px);
    font-size: clamp(12px, 3.3cqw, 26px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.32;
    letter-spacing: 0.005em;
    text-transform: none;
    /* Zeilenumbrüche aus dem Master (senkrechter Strich) gelten; ohne Vorgabe
       verteilt der Browser den Text gleichmäßig auf die Zeilen */
    white-space: pre-line;
    text-wrap: balance;
    color: #1a1a1a;
    opacity: 0.86;
}

/* Feine Kupferlinie über dem Text, wie die Linien der Produktseite */
.woocommerce-product-gallery .lokanes-gallery-editorial__text::before {
    content: "";
    display: block;
    width: 1.5em;
    height: 1px;
    margin-bottom: 0.7em;
    background: #cc9e7e;
}

/* Positionen im freien Bildraum */
.woocommerce-product-gallery .lokanes-gallery-editorial--top-left .lokanes-gallery-editorial__text {
    top: 9%;
    left: 7%;
}

.woocommerce-product-gallery .lokanes-gallery-editorial--top-right .lokanes-gallery-editorial__text {
    top: 9%;
    right: 7%;
    text-align: right;
}

.woocommerce-product-gallery .lokanes-gallery-editorial--bottom-left .lokanes-gallery-editorial__text {
    bottom: 9%;
    left: 7%;
}

.woocommerce-product-gallery .lokanes-gallery-editorial--bottom-right .lokanes-gallery-editorial__text {
    bottom: 9%;
    right: 7%;
    text-align: right;
}

.woocommerce-product-gallery .lokanes-gallery-editorial--top-right .lokanes-gallery-editorial__text::before,
.woocommerce-product-gallery .lokanes-gallery-editorial--bottom-right .lokanes-gallery-editorial__text::before {
    margin-left: auto;
}

/* ==========================================================================
   GESCHENKSET-HEADER: HERKUNFTSBLOCK
   Made-in-Germany+-Siegel und Herkunftskarte des Sets als gemeinsame, dezente
   Kachel im Set-Header. Die Karte mit "Herkunft entdecken" führt in die
   Produkt-Story, Übersicht "Das Set" (#story-set). Markup:
   Snippet "Lokanes Set Header + Set Akkordeon", lokanes_set_origin_html().
   Die Karte in der Story-Übersicht: Abschnitt "Story-Übersicht" weiter unten.

   Alle Regeln hängen an eigenen Klassen (lokanes-set-origin*) oder an den
   Modifikatoren, die der Header nur bei vorhandenem Herkunftsblock setzt
   (lokanes-price-badge-row--origin, lokanes-mig-col--origin). Siegel und
   MIG-Drawer selbst bleiben unberührt; Siegel und Karte sind getrennt
   anklickbar, die Kachel ist kein Link.

   Platz: Die Kachel nutzt nur den freien Raum der Siegel-Spalte. Preis,
   Lieferinfos und Kaufbutton rutschen nicht nach unten, und die Zeile
   "Eiliger? Wähle Priority im Checkout", die auf schmalen Breiten unter das
   Siegel reicht, bleibt frei (gemessen auf 32181 bei 390 bis 1920px).
   Der Linktext richtet sich nach der Breite der Zeile aus Preis und Siegel
   (Container-Abfrage, nicht Fensterbreite):
     Grundstufe      Karte und "Herkunft ↓" (Smartphones)
     ab 397px        Karte und "Herkunft / entdecken ↓" zweizeilig, nur bei
                     Fenstern über 480px (Desktop ab 1024px); so bleibt die
                     Kachel überall so schmal wie das Siegel
     sehr schmal     Karte über "Herkunft ↓" (unter 365px Zeilenbreite; bei
                     Fenstern über 480px, wo der Abstand zum Siegel größer ist,
                     unter 390px: Tablet-Spalte)
   Browser ohne Container-Abfragen zeigen die Grundstufe. "entdecken" bleibt
   für Screenreader immer im Link.
   ========================================================================== */

.lokanes-price-badge-row.lokanes-price-badge-row--origin {
    container: lokanes-set-head / inline-size;
}

/* Die Kachel: Siegel oben, Karte und Link darunter */
.lokanes-mig-col.lokanes-mig-col--origin {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    box-sizing: border-box;
    padding: 5px 5px 5px;
    border: 1px solid rgba(204, 158, 126, 0.3);
    border-radius: 14px;
    background-color: rgba(204, 158, 126, 0.07);
}

.lokanes-set-origin,
.lokanes-set-origin:hover,
.lokanes-set-origin:focus,
.lokanes-set-origin:visited {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 0;
    color: #1a1a1a;
    font-family: 'Jost', sans-serif;
    text-decoration: none;
}

.lokanes-set-origin:focus-visible {
    outline: 2px solid #cc9e7e;
    outline-offset: 3px;
    border-radius: 6px;
}

/* Runde Karte: Optik wie .hybrid-map-badge im Produktgrid, feste Größe */
.lokanes-set-origin .lokanes-set-origin__map {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 25px;
    height: 25px;
    border: 1px solid rgba(204, 158, 126, 0.4);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.95);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.lokanes-set-origin .lokanes-set-origin__map img {
    display: block;
    width: 80%;
    height: 80%;
    max-width: none;
    margin: 0;
    object-fit: contain;
}

.lokanes-set-origin .lokanes-set-origin__link {
    color: #1a1a1a;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: rgba(204, 158, 126, 0.75);
    text-underline-offset: 2px;
    transition: color 0.3s ease;
}

/* Grundstufe: "entdecken" nur für Screenreader */
.lokanes-set-origin .lokanes-set-origin__more {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.lokanes-set-origin:hover .lokanes-set-origin__map,
.lokanes-set-origin:focus-visible .lokanes-set-origin__map {
    border-color: #cc9e7e;
    transform: translateY(-1px) scale(1.06);
}

.lokanes-set-origin:hover .lokanes-set-origin__link,
.lokanes-set-origin:focus-visible .lokanes-set-origin__link {
    color: #ab8167;
}

/* Smartphones: Die Priority-Zeile reicht hier unter das Siegel, die Kachel bleibt flach.
   Karte und Link etwas größer; knappere Innenabstände gleichen die Höhe aus. */
@media (max-width: 480px) {

    .lokanes-mig-col.lokanes-mig-col--origin {
        gap: 1px;
        padding: 3px 4px;
    }

    .lokanes-set-origin .lokanes-set-origin__map {
        width: 30px;
        height: 30px;
    }

    .lokanes-set-origin .lokanes-set-origin__link {
        font-size: 11.5px;
    }
}

/* Desktop: "Herkunft / entdecken ↓" zweizeilig, die Kachel bleibt so schmal wie das Siegel */
@media (min-width: 481px) {

    @container lokanes-set-head (min-width: 397px) {

        .lokanes-set-origin .lokanes-set-origin__map {
            width: 27px;
            height: 27px;
        }

        .lokanes-set-origin .lokanes-set-origin__link {
            white-space: normal;
        }

        .lokanes-set-origin .lokanes-set-origin__more {
            position: static;
            width: auto;
            height: auto;
            overflow: visible;
            clip: auto;
            clip-path: none;
        }

        .lokanes-set-origin .lokanes-set-origin__more::before {
            content: "\A";
            white-space: pre;
        }
    }

    /* Ab 430px Zeilenbreite (Desktop ab 1280px) ist unter dem Siegel Platz für eine größere Karte */
    @container lokanes-set-head (min-width: 430px) {

        .lokanes-set-origin,
        .lokanes-set-origin:hover,
        .lokanes-set-origin:focus,
        .lokanes-set-origin:visited {
            gap: 6px;
        }

        .lokanes-set-origin .lokanes-set-origin__map {
            width: 36px;
            height: 36px;
        }

        .lokanes-set-origin .lokanes-set-origin__link {
            font-size: 12px;
        }
    }
}

/* Sehr schmale Zeile (Tablet-Spalte, kleine Smartphones): Karte über "Herkunft ↓" */
@container lokanes-set-head (max-width: 364px) {

    .lokanes-mig-col.lokanes-mig-col--origin {
        padding: 3px 3px 5px;
    }

    .lokanes-set-origin,
    .lokanes-set-origin:hover,
    .lokanes-set-origin:focus,
    .lokanes-set-origin:visited {
        flex-direction: column;
        gap: 2px;
    }

    .lokanes-set-origin .lokanes-set-origin__map {
        width: 27px;
        height: 27px;
    }

    .lokanes-set-origin .lokanes-set-origin__link {
        font-size: 10.5px;
    }
}

@media (min-width: 481px) {

    @container lokanes-set-head (max-width: 389px) {

        .lokanes-mig-col.lokanes-mig-col--origin {
            padding: 3px 3px 5px;
        }

        .lokanes-set-origin,
        .lokanes-set-origin:hover,
        .lokanes-set-origin:focus,
        .lokanes-set-origin:visited {
            flex-direction: column;
            gap: 2px;
        }

        .lokanes-set-origin .lokanes-set-origin__map {
            width: 29px;
            height: 29px;
        }

        .lokanes-set-origin .lokanes-set-origin__link {
            font-size: 11px;
        }
    }
}

/* --------------------------------------------------------------------------
   Story-Übersicht "Das Set": Herkunftskarte des Sets mit allen Orten.
   Markup: [lokanes_gift_story], Snippet "Porduct Page: Komponenten".
   Desktop und Tablet rechts neben dem Text wie die Karte der Steps (etwas
   größer, weil sie alle Orte zeigt), schmal klein oben rechts im Textfluss.
   -------------------------------------------------------------------------- */

.lokanes-gpdp .lokanes-gstory__panel--set.lokanes-gstory__panel--set-map {
    grid-template-columns: minmax(0, 1fr) 150px;
}

.lokanes-gpdp .lokanes-gstory__set-map {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
}

.lokanes-gpdp .lokanes-gstory__set-map img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
}

@media (max-width: 600px) {

    .lokanes-gpdp .lokanes-gstory__set-map {
        float: right;
        width: 96px;
        margin: 0 0 8px 14px;
    }
}

/* Landeposition beim Sprung in die Story (Herkunftslink, "Was dich erwartet",
   Direktlink mit #story-…): Das Story-Skript scrollt den ganzen Abschnitt ins
   Bild. global.css hält mit html { scroll-padding-top: 120px } Platz für den
   Sticky-Header frei, der Abschnitt hatte zusätzlich scroll-margin-top 100px:
   Die Überschrift landete gut 300px tief, auf Smartphones lag die Übersicht
   dann unter dem Rand. Der negative Rand gleicht den oberen Innenabstand des
   Abschnitts aus: Eyebrow und Überschrift stehen direkt unter den 120px. */
.lokanes-gpdp .lokanes-gstory#gift-story {
    scroll-margin-top: -72px;
}

@media (max-width: 899px) {

    .lokanes-gpdp .lokanes-gstory#gift-story {
        scroll-margin-top: -64px;
    }
}

@media (max-width: 600px) {

    .lokanes-gpdp .lokanes-gstory#gift-story {
        scroll-margin-top: -52px;
    }
}

/* --------------------------------------------------------------------------
   Bewegung reduzieren: Sprünge per Link (Herkunft -> Story, "Was dich
   erwartet") ohne Scroll-Animation. global.css setzt
   html { scroll-behavior: smooth !important; } für alle; das Story-Skript
   wählt bei reduzierter Bewegung schon "auto", erst diese Regel lässt das
   wirken. Gilt nur auf Produktseiten (Modul produkt.css).
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto !important;
    }

    .lokanes-set-origin .lokanes-set-origin__map,
    .lokanes-set-origin .lokanes-set-origin__link {
        transition: none;
    }

    .lokanes-set-origin:hover .lokanes-set-origin__map,
    .lokanes-set-origin:focus-visible .lokanes-set-origin__map {
        transform: none;
    }
}