/*
 * LE ShopDesign 1.6.0 – Einkaufswelten im Storytelling-Modus, Design v2 (freigegeben im Pilot LE Projects).
 *
 * Reine Darstellung: Inhalte, Links, Elementreihenfolge und Storytelling-Funktion bleiben unverändert. Wird nur für
 * Einkaufswelten mit aktivem Schalter geladen und greift nur mit body.le-ew-v2 (setzt le-emotion-design.js). Die Klassen le-ew-* vergibt
 * das Skript je Abschnitt und Bildschirmklasse anhand der Raster-Geometrie (Text neben / unter / über dem Bild).
 * Digital-Publishing-Texte tragen Inline-Stile → Typografie-Regeln mit !important.
 */
.le-ew-v2 {
    --ew-ink: var(--le-ink, #1b1b1b);
    --ew-black: #111;
    --ew-gold: var(--le-gold, #dab44a);
    --ew-gold-deep: var(--le-gold-deep, #9c7c25);
    --ew-on-dark: #d9d4c8;
    --ew-muted-dark: #a9a397;
    --ew-paper: var(--le-paper, #faf8f3);
    --ew-line: var(--le-line, #e6e0d2);
    --ew-serif: var(--le-serif, 'LE Cormorant', 'Cormorant Garamond', Georgia, serif);
    --ew-sans: var(--le-sans, 'Raleway', 'Open Sans', Arial, sans-serif);
    --ew-outer: 96px;   /* Außenkante Text (Abstand zum Bildschirmrand, rechts der Abschnittsnavigation) */
    --ew-inner: 64px;   /* Abstand Text ↔ Bildkante */
    --ew-base: 72px;    /* gemeinsame Grundlinie unten: Text-Block und „Produkte“ */
    --ew-tw: 42%;       /* Textspalte im Split (Bild 58 %) */
}
@media (max-width: 1259px) { .le-ew-v2 { --ew-outer: 76px; --ew-inner: 44px; --ew-base: 56px; --ew-tw: 42%; } }
@media (max-width: 1023px) { .le-ew-v2 { --ew-outer: 64px; --ew-inner: 36px; --ew-base: 44px; --ew-tw: 46%; } }
@media (max-width: 767px) { .le-ew-v2 { --ew-outer: 20px; --ew-inner: 20px; --ew-base: 24px; } }

/* ---------------------------------------------------------------- Kopf (Variante C: kompakter Intro-Kopf, Bühne direkt darunter) */
.le-ew-v2 .le-cms-ewhead { background: var(--ew-ink); }
.le-ew-v2 .le-cms-ewhead__inner { max-width: none; padding: 38px var(--ew-outer) 40px; }
.le-ew-v2 .le-cms-ewhead .le-cms-eyebrow { margin: 0 0 14px; letter-spacing: .26em; }
.le-ew-v2 .le-cms-ewhead .le-cms-ewhead__h1 { font: 500 clamp(30px, 3.2vw, 46px)/1.08 var(--ew-serif); max-width: 1180px; margin: 0 0 14px; }
.le-ew-v2 .le-cms-ewhead .le-cms-intro { font-size: 17px; line-height: 1.7; max-width: 660px; color: var(--ew-on-dark); }

/* ---------------------------------------------------------------- Bühne: 60/40-Split (Text neben Bild) */
.le-ew-v2 .emotion--container.emotion--mode-storytelling { background: var(--ew-ink); }
.le-ew-v2 .le-ew-split.le-ew-text--left { left: 0 !important; right: auto !important; width: var(--ew-tw) !important; }
.le-ew-v2 .le-ew-split.le-ew-text--right { left: auto !important; right: 0 !important; width: var(--ew-tw) !important; }
.le-ew-v2 .le-ew-split.le-ew-media--right { left: var(--ew-tw) !important; right: auto !important; width: calc(100% - var(--ew-tw)) !important; }
.le-ew-v2 .le-ew-split.le-ew-media--left { left: 0 !important; right: auto !important; width: calc(100% - var(--ew-tw)) !important; }

/* ---------------------------------------------------------------- Textfläche (Digital Publishing) */
.le-ew-v2 .le-ew-text .bg--color { background: var(--ew-ink) !important; }
.le-ew-v2 .le-ew-text .dig-pub--layer {
    display: flex !important; flex-direction: column; justify-content: flex-end; align-items: flex-start;
    inset: 0 !important; width: auto !important; height: auto !important; transform: none !important;
    padding: 0 var(--ew-inner) var(--ew-base) var(--ew-outer) !important; text-align: left !important; box-sizing: border-box;
}
.le-ew-v2 .le-ew-text--right .dig-pub--layer { padding: 0 var(--ew-outer) var(--ew-base) var(--ew-inner) !important; }
.le-ew-v2 .le-ew-text .dig-pub--layer::before, .le-ew-v2 .le-ew-text .dig-pub--layer::after { display: none !important; }
.le-ew-v2 .le-ew-text .layer--wrapper { display: block !important; flex: 0 0 auto; width: 100% !important; max-width: 470px; height: auto !important; }
.le-ew-v2 .le-ew-text .layer--content { overflow: visible; text-align: left !important; }
.le-ew-v2 .le-ew-text .dig-pub--text { padding: 0 !important; text-align: left !important; }
/* oberhalb des Bildes (mobil Text über Bild): Text an die Bildkante */
.le-ew-v2 .le-ew-text--above .dig-pub--layer { justify-content: flex-end; }
/* unter dem Bild (mobil): Text direkt unter dem Bild beginnen */
.le-ew-v2 .le-ew-text--below .dig-pub--layer { justify-content: flex-start; padding: 26px var(--ew-outer) 72px !important; } /* unten: Zone der mobilen Navigation */
.le-ew-v2 .le-ew-text--above .dig-pub--layer { padding-top: 32px !important; }

/* Eyebrow (Abschnittsnummer, dekorativ) */
.le-ew-v2 .le-ew-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font: 700 11px/1 var(--ew-sans); letter-spacing: .26em; color: var(--ew-gold); text-transform: uppercase; font-variant-numeric: lining-nums tabular-nums; }
.le-ew-v2 .le-ew-eyebrow::after { content: ''; width: 48px; height: 1px; background: var(--ew-gold); opacity: .8; }
.le-ew-v2 .le-ew-eyebrow__of { color: var(--ew-muted-dark); letter-spacing: .14em; margin-left: -4px; }

/* Überschrift + Text */
.le-ew-v2 .le-ew-text .dig-pub--text .le-ew-h,
.le-ew-v2 .le-ew-text .dig-pub--text .le-ew-h a {
    font-family: var(--ew-serif) !important; font-weight: 500 !important; font-size: clamp(30px, 2.9vw, 42px) !important; line-height: 1.1 !important;
    color: #fff !important; text-align: left !important; text-shadow: none !important; letter-spacing: -.005em; white-space: normal !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; text-decoration: none;
}
.le-ew-v2 .le-ew-text .dig-pub--text + .dig-pub--text { margin-top: 16px; }
.le-ew-v2 .le-ew-text .dig-pub--text .le-ew-body {
    font-family: var(--ew-sans) !important; font-weight: 400 !important; font-size: 16px !important; line-height: 1.65 !important;
    color: var(--ew-on-dark) !important; text-align: left !important; text-shadow: none !important; white-space: normal !important; margin: 0 !important; max-width: 430px;
}

/* Primär-CTA (Anthrazit/Schwarz, weiße Schrift, Gold-Akzent). Visuelle Kennzeichnung des bestehenden Panel-Links. */
.le-ew-v2 .le-ew-cta {
    display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; min-height: 48px; box-sizing: border-box; padding: 0 22px;
    background: var(--ew-black); color: #fff; border: 1px solid var(--ew-gold);
    font: 700 11.5px/1 var(--ew-sans); letter-spacing: .22em; text-transform: uppercase; transition: background-color .2s ease, color .2s ease;
}
.le-ew-v2 .le-ew-cta::after { content: '\2192'; color: var(--ew-gold); font-size: 15px; letter-spacing: 0; transition: transform .2s ease, color .2s ease; }
.le-ew-v2 .le-ew-text .layer--content:hover .le-ew-cta,
.le-ew-v2 .le-ew-media--banner:hover .le-ew-cta { background: var(--ew-gold); color: var(--ew-ink); }
.le-ew-v2 .le-ew-text .layer--content:hover .le-ew-cta::after,
.le-ew-v2 .le-ew-media--banner:hover .le-ew-cta::after { color: var(--ew-ink); transform: translateX(3px); }
/* Klickfläche bleibt der bestehende Link über dem ganzen Text-Block; Fokus sichtbar */
.le-ew-v2 .le-ew-text .dig-pub--link:focus-visible,
.le-ew-v2 .le-ew-media .banner--link:focus-visible { outline: 2px solid var(--ew-gold); outline-offset: 6px; }

/* ---------------------------------------------------------------- Bildfläche: Sideview („Produkte“ = Sekundär-CTA) */
.le-ew-v2 .le-ew-media .side-view--trigger {
    left: var(--ew-trigger-x, 40px) !important; right: auto !important; top: 0 !important; bottom: auto !important;
    transform: translateY(calc(-100% - var(--ew-base))) !important;
    display: inline-flex !important; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 0 18px !important; width: auto !important; height: auto !important;
    background: rgba(17, 17, 17, .55) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .6) !important; border-radius: 0 !important; color: #fff !important;
    font: 700 11.5px/1 var(--ew-sans) !important; letter-spacing: .22em; text-transform: uppercase; cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}
.le-ew-v2 .le-ew-media--left .side-view--trigger { left: auto !important; right: 40px !important; }
.le-ew-v2 .le-ew-media .side-view--trigger:hover { border-color: var(--ew-gold) !important; background: rgba(17, 17, 17, .75) !important; }
.le-ew-v2 .le-ew-media .side-view--trigger:focus-visible { outline: 2px solid var(--ew-gold); outline-offset: 3px; }
.le-ew-v2 .le-ew-media .side-view--trigger .trigger--icon { color: var(--ew-gold) !important; top: 0 !important; font-size: 8px !important; line-height: 1 !important; order: 2; }
.le-ew-v2 .le-ew-media .side-view--trigger .trigger--label { color: inherit !important; font: inherit !important; }
/* geöffnetes Produkt-Panel: Papierton, feine Goldlinie, Typografie wie Listing v2 */
.le-ew-v2 .le-ew-media .side-view--view, .le-ew-v2 .le-ew-media .product-slider { background: var(--ew-paper) !important; }
.le-ew-v2 .le-ew-media .side-view--view { border-top: 1px solid var(--ew-gold); }
.le-ew-v2 .le-ew-media .product--box .product--title { font: 500 19px/1.2 var(--ew-serif) !important; color: var(--ew-ink) !important; }
.le-ew-v2 .le-ew-media .product--box .product--price { border: 0 !important; border-radius: 0 !important; padding: 4px 0 0 !important; font: 600 14px/1.3 var(--ew-sans) !important; color: var(--ew-ink) !important; }
.le-ew-v2 .le-ew-media .product--box .product--badge { border-radius: 0 !important; }

/* Bildfläche: Banner als gerahmte Karte statt Vollflächenbild – nur mit Profil-Option bannerCard (z. B. Übersichtsgrafik mit
   viel Kleintext, LE Projects). Andere Banner bleiben vollflächige Fotos. */
.le-ew-v2 .le-ew-media--card .emotion--banner { background: var(--ew-ink); }
.le-ew-v2 .le-ew-media--card .banner--content {
    position: absolute !important; inset: 56px var(--ew-outer) calc(var(--ew-base) + 72px) 56px !important; width: auto !important; height: auto !important;
    transform: none !important; margin: 0 !important;
}
.le-ew-v2 .le-ew-media--card.le-ew-media--left .banner--content { inset: 56px 56px calc(var(--ew-base) + 72px) var(--ew-outer) !important; }
.le-ew-v2 .le-ew-media--card .banner--image, .le-ew-v2 .le-ew-media--card .banner--image img, .le-ew-v2 .le-ew-media--card .banner--image-src {
    width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: left center; background: none !important; display: block;
}
.le-ew-v2 .le-ew-media--card .banner--content::after { content: ''; position: absolute; inset: -12px; border: 1px solid rgba(218, 180, 74, .35); pointer-events: none; }
.le-ew-v2 .le-ew-media--card .le-ew-cta { position: absolute; left: -12px; top: calc(100% + 28px); margin: 0; z-index: 2; }
.le-ew-v2 .le-ew-media--card .banner--link { position: absolute; inset: 0; z-index: 3; }

/* Banner als Foto (vollflächig): „Entdecken“ unten an der Bildkante zum Text, wie „Produkte“ */
.le-ew-v2 .le-ew-media--banner:not(.le-ew-media--card) .banner--link { position: absolute; inset: 0; z-index: 3; }
.le-ew-v2 .le-ew-media--banner:not(.le-ew-media--card) .emotion--banner { position: relative; }
.le-ew-v2 .le-ew-media--banner:not(.le-ew-media--card) .le-ew-cta { position: absolute; left: 40px; bottom: var(--ew-base); margin: 0; z-index: 4; pointer-events: none; }
.le-ew-v2 .le-ew-media--banner.le-ew-media--left:not(.le-ew-media--card) .le-ew-cta { left: auto; right: 40px; }

/* ---------------------------------------------------------------- Abschnittsnavigation (Funktion unverändert) */
.le-ew-v2 .emotion--section-nav {
    left: 22px; width: 34px; padding: 8px 0; box-sizing: border-box;
    background: rgba(17, 17, 17, .58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(218, 180, 74, .3); border-radius: 18px; box-shadow: 0 6px 22px rgba(0, 0, 0, .18);
}
.le-ew-v2 .emotion--section-nav .section-nav--link {
    display: flex; align-items: center; justify-content: center; width: 32px; height: 26px; padding: 0; box-sizing: border-box;
    color: rgba(255, 255, 255, .72); font-size: 11px; line-height: 1; transition: color .2s ease;
}
.le-ew-v2 .emotion--section-nav .section-nav--link:hover { color: #fff; }
.le-ew-v2 .emotion--section-nav .section-nav--link.is--active { color: var(--ew-gold); }
.le-ew-v2 .emotion--section-nav .link--prev, .le-ew-v2 .emotion--section-nav .link--next { font-size: 9px; height: 28px; }
.le-ew-v2 .emotion--section-nav .link--start { font-size: 12px; }
.le-ew-v2 .emotion--section-nav .link--section i { display: none; }
.le-ew-v2 .emotion--section-nav .link--section::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .5); transition: background-color .2s ease, transform .2s ease;
}
.le-ew-v2 .emotion--section-nav .link--section:hover::before { background: #fff; }
.le-ew-v2 .emotion--section-nav .link--section.is--active::before { background: var(--ew-gold); transform: scale(1.35); box-shadow: 0 0 0 3px rgba(218, 180, 74, .22); }
.le-ew-v2 .emotion--section-nav .section-nav--link:focus-visible { outline: 2px solid var(--ew-gold); outline-offset: -2px; border-radius: 13px; color: #fff; }

/* ---------------------------------------------------------------- nach der Einkaufswelt */
.le-ew-v2 .emotion--show-listing { padding: 34px 0 0; background: #fff; }
.le-ew-v2 .emotion--show-listing .link--show-listing {
    display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 24px; border: 1px solid var(--ew-gold); border-radius: 0;
    background: #fff; color: var(--ew-ink); font: 700 11.5px/1 var(--ew-sans); letter-spacing: .2em; text-transform: uppercase;
}
.le-ew-v2 .emotion--show-listing .link--show-listing:hover { background: var(--ew-paper); border-color: var(--ew-gold-deep); color: var(--ew-ink); }
@media (max-width: 1209px) {
    .le-ew-v2.is--storytelling .le-cms-after-emotion { padding-left: 72px; }
}

/* ---------------------------------------------------------------- mobil (Bild oben / Text unten, Navigation unten rechts) */
@media (max-width: 767px) {
    .le-ew-v2 .le-cms-ewhead__inner { padding: 22px 20px 24px; }
    .le-ew-v2 .le-cms-ewhead .le-cms-eyebrow { margin-bottom: 10px; }
    .le-ew-v2 .le-cms-ewhead .le-cms-ewhead__h1 { font-size: 30px; line-height: 1.08; margin-bottom: 10px; }
    .le-ew-v2 .le-cms-ewhead .le-cms-intro { font-size: 15px; line-height: 1.6; }
    .le-ew-v2 .le-ew-eyebrow { margin-bottom: 12px; }
    .le-ew-v2 .le-ew-text .dig-pub--text .le-ew-h, .le-ew-v2 .le-ew-text .dig-pub--text .le-ew-h a { font-size: 30px !important; }
    .le-ew-v2 .le-ew-text .dig-pub--text + .dig-pub--text { margin-top: 10px; }
    .le-ew-v2 .le-ew-text .dig-pub--text .le-ew-body { font-size: 15px !important; line-height: 1.6 !important; }
    .le-ew-v2 .le-ew-cta { margin-top: 18px; min-height: 44px; }
    .le-ew-v2 .le-ew-media .side-view--trigger { left: 20px !important; --ew-base: 16px; min-height: 40px; padding: 0 14px !important; }
    .le-ew-v2 .le-ew-media--left .side-view--trigger { left: 20px !important; right: auto !important; }
    .le-ew-v2 .emotion--section-nav {
        top: auto; bottom: 16px; left: auto; right: 12px; transform: none !important; width: auto; height: auto;
        display: flex; flex-direction: row; align-items: center; padding: 0 6px; border-radius: 20px;
    }
    .le-ew-v2 .emotion--section-nav .section-nav--link { width: 36px; height: 40px; }
    .le-ew-v2 .emotion--section-nav .link--section { display: none; } /* wie bisher mobil: nur zurück / Start / weiter */
    .le-ew-v2 .emotion--section-nav .link--prev i, .le-ew-v2 .emotion--section-nav .link--next i { display: inline-block; }
    .le-ew-v2.is--storytelling .le-cms-after-emotion { padding: 0 20px; }
}
/* Seitenende (Footer im Bild): Navigation ausblenden, damit Footer- und Rechtslinks frei bleiben. Zurück per Wischen,
   Mausrad oder Tastatur blendet sie wieder ein. */
.le-ew-v2.le-ew-at-bottom .emotion--section-nav { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }

/* ---------------------------------------------------------------- 1.6.3 Komposition „text“ (textorientierte Einkaufswelten, z. B. Über uns)
   Breitere Textspalte, Text mittig statt an der Grundlinie, Lesetypografie für längeren Fließtext; Bilder bleiben daneben. */
.le-ew-v2.le-ew-variant-text { --ew-tw: 52%; }
@media (max-width: 1259px) { .le-ew-v2.le-ew-variant-text { --ew-tw: 54%; } }
@media (max-width: 1023px) { .le-ew-v2.le-ew-variant-text { --ew-tw: 56%; } }
.le-ew-v2.le-ew-variant-text .le-ew-split .dig-pub--layer { justify-content: center; padding-top: 48px !important; padding-bottom: 48px !important; }
.le-ew-v2.le-ew-variant-text .le-ew-text .layer--wrapper { max-width: 620px; }
.le-ew-v2.le-ew-variant-text .le-ew-text .dig-pub--text .le-ew-body { font-size: 16.5px !important; line-height: 1.75 !important; max-width: 38em; }
.le-ew-v2.le-ew-variant-text .le-ew-text .dig-pub--text .le-ew-body p { margin: 0 0 .85em !important; }
.le-ew-v2.le-ew-variant-text .le-ew-text .dig-pub--text .le-ew-body p:last-child { margin-bottom: 0 !important; }
@media (max-width: 767px) {
    .le-ew-v2.le-ew-variant-text .le-ew-text .dig-pub--text .le-ew-body { font-size: 15.5px !important; line-height: 1.7 !important; }
}

/* ---------------------------------------------------------------- 1.6.4 Kopf mit eigenem Bild (figure.le-cms-hero--ew)
   Vollflächiges Bild unter dem Einleitungstext; mit Skript füllt der Kopf die Startansicht (--le-ew-start), ohne Skript
   feste Höhe. Der erste Storytelling-Abschnitt beginnt darunter. */
.le-ew-v2 .le-cms-ewhead .le-cms-hero--ew { position: relative; aspect-ratio: auto; height: clamp(240px, 50vh, 620px); margin: 30px calc(-1 * var(--ew-outer)) -40px; background: var(--ew-ink); }
/* Bild absolut in der Fläche: füllt sie auch dann, wenn ihre Höhe aus dem Flex-Layout stammt (mobil löst height: 100% dort nicht auf) */
.le-ew-v2 .le-cms-ewhead .le-cms-hero--ew img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.le-ew-v2 .le-ew-head--hero { display: flex; flex-direction: column; min-height: var(--le-ew-start, 0px); }
.le-ew-v2 .le-ew-head--hero .le-cms-ewhead__inner,
.le-ew-v2 .le-ew-head--hero .le-cms-ewhead__inner > .le-cms { display: flex; flex-direction: column; flex: 1 0 auto; }
/* in der Flex-Spalte wirken margin: auto als Zentrierung (schmale Spalte) – Kopf und Inhalt volle Breite wie ohne Bild */
.le-ew-v2 .le-ew-head--hero .le-cms-ewhead__inner,
.le-ew-v2 .le-ew-head--hero .le-cms-ewhead__inner > .le-cms { align-self: stretch; margin-left: 0; margin-right: 0; }
.le-ew-v2 .le-ew-head--hero .le-cms-hero--ew { flex: 1 0 auto; height: auto; min-height: 220px; }
@media (max-width: 767px) {
    .le-ew-v2 .le-cms-ewhead .le-cms-hero--ew { margin: 22px -20px -24px; height: clamp(220px, 56vw, 420px); }
    .le-ew-v2 .le-ew-head--hero .le-cms-hero--ew { height: auto; min-height: 200px; }
}