/*
 * LE CMS Content Library (ShopDesign 1.4.0) – wird nur auf Kategorieseiten mit .le-cms-Inhalt geladen (body.is--le-cms).
 * Gemeinsame Designbibliothek aus den drei Pilotlayouts (LE Cubes, Betonmöbel von efecto, Planika).
 * Bausteine, kein Universaltemplate: jede Seite wählt, lässt weg und ordnet an.
 *
 * Einsatzort: Kategorietext (cmstext) bzw. HTML-Element einer Einkaufswelt. Alles ist unter .le-cms gekapselt und
 * nutzt eigene Klassen (le-cms-*) – keine Kollision mit Theme-Klassen wie .btn, .card, .grid, .chip.
 * Überschriften: Die H1 ist die Kategorie-Überschrift (Template). Im CMS-Text beginnen Abschnitte mit H2, darunter H3.
 * Tokens = ShopDesign v2 (le-shop-design.css); hier mit Fallbacks, damit die Bibliothek auch allein rendert.
 */
.le-cms {
    --c-ink: var(--le-ink, #1b1b1b);
    --c-text: var(--le-text, #3b3934);
    --c-muted: var(--le-muted, #777164);
    --c-label: var(--le-label, #5f5a50);
    --c-gold: var(--le-gold, #dab44a);
    --c-gold-deep: var(--le-gold-deep, #9c7c25);
    --c-line: var(--le-line, #e6e0d2);
    --c-paper: var(--le-paper, #faf8f3);
    --c-serif: var(--le-serif, 'Cormorant Garamond', Georgia, serif);
    --c-sans: var(--le-sans, 'Raleway', Arial, sans-serif);
    color: var(--c-text);
    font: 400 16px/1.65 var(--c-sans);
    text-align: left;
}
.le-cms *, .le-cms *::before, .le-cms *::after { box-sizing: border-box; }
.le-cms a { color: inherit; }
.le-cms img { max-width: 100%; height: auto; display: block; }
.le-cms p { margin: 0 0 12px; }

/* 1 · Eyebrow – Einordnung über Überschriften (Marke, Linie, Kontext). Kein Heading-Element. */
.le-cms-eyebrow { font: 600 11.5px/1 var(--c-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--c-gold-deep); display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.le-cms-eyebrow::after { content: ''; width: 48px; height: 1px; background: var(--c-gold); }
.le-cms-eyebrow--plain::after { display: none; }

/* 2 · Kopf: Intro (+ optional Hero-Bild). Die H1 darüber liefert das Template. */
.le-cms-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; margin: 0 0 28px; }
.le-cms-head--text { grid-template-columns: 1fr; max-width: 820px; }
.le-cms-intro { font-size: 17px; line-height: 1.7; margin: 0; max-width: 640px; }
.le-cms-actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 22px; }

/* 3 · Hero-Bild (im Kopf oder allein). Echtes <img> mit Alt-Text; dekorativ nur mit alt="". */
.le-cms-hero { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-paper); }
.le-cms-hero img { width: 100%; height: 100%; object-fit: cover; }
.le-cms-hero--wide { aspect-ratio: 21 / 9; }
.le-cms-hero figcaption { font-size: 12.5px; color: var(--c-muted); padding-top: 6px; }

/* Aktionen */
.le-cms-button { display: inline-block; padding: 13px 22px; background: var(--c-ink); color: #fff !important; text-decoration: none; font: 600 12.5px var(--c-sans); letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--c-ink); }
.le-cms-button--ghost { background: transparent; color: var(--c-ink) !important; }
.le-cms-button:hover { background: var(--c-gold-deep); border-color: var(--c-gold-deep); color: #fff !important; }
.le-cms-textlink { font: 600 12.5px var(--c-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-gold-deep); text-decoration: none; border-bottom: 1px solid var(--c-gold); padding-bottom: 3px; }

/* 4 · Fact Strip – 2–4 belegbare Fakten (Zahl/Begriff + Erläuterung). Liste, keine Tabelle. */
.le-cms-facts { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); margin: 8px 0 36px; padding: 0; list-style: none; }
.le-cms-facts--3 { --n: 3; }
.le-cms-facts--2 { --n: 2; }
.le-cms-fact { padding: 18px 20px; border-left: 1px solid var(--c-line); }
.le-cms-fact:first-child { border-left: 0; padding-left: 0; }
.le-cms-fact strong { display: block; font: 500 24px/1.2 var(--c-serif); color: var(--c-ink); }
.le-cms-fact > span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--c-muted); margin-top: 4px; }

/* 5 · Abschnitt + Abschnittskopf (H2, optional Eyebrow + Lead + Link rechts) */
.le-cms-section { padding: 34px 0; }
.le-cms-section + .le-cms-section { border-top: 1px solid var(--c-line); }
.le-cms-section--flush { padding-top: 0; }
.le-cms-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 20px; }
.le-cms h2, .le-cms-h2 { font: 500 32px/1.2 var(--c-serif); color: var(--c-ink); margin: 0; letter-spacing: -.005em; }
.le-cms h3, .le-cms-h3 { font: 500 23px/1.25 var(--c-serif); color: var(--c-ink); margin: 0 0 8px; }
.le-cms-lead { max-width: 660px; margin: 10px 0 0; }

/* 6 · Text/Bild (Split). --reverse tauscht die Seiten auf Desktop. */
.le-cms-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.le-cms-split--reverse .le-cms-split__media { order: 2; }
.le-cms-split__media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-paper); }
.le-cms-split__media img { width: 100%; height: 100%; object-fit: cover; }
.le-cms-split__body h3 { margin-top: 18px; }
.le-cms-split__body > :first-child { margin-top: 0; }

/* 7 · Interne Links – a) Linien-Kacheln (Weichen in Unterseiten), b) Link-Chips (kompakt) */
.le-cms-lines { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); border-top: 1px solid var(--c-ink); margin: 0; padding: 0; list-style: none; }
.le-cms-lines--2 { --n: 2; }
.le-cms-lines--4 { --n: 4; }
.le-cms-line { border-bottom: 1px solid var(--c-line); }
.le-cms-line + .le-cms-line { border-left: 1px solid var(--c-line); }
.le-cms-line > a { display: block; height: 100%; padding: 22px 22px 24px; text-decoration: none; }
.le-cms-line:first-child > a { padding-left: 0; }
.le-cms-line > a:hover h3 { color: var(--c-gold-deep); }
.le-cms-line p { font-size: 15px; margin: 0 0 14px; }
.le-cms-line__img { aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 16px; background: var(--c-paper); }
.le-cms-line__img img { width: 100%; height: 100%; object-fit: cover; }
.le-cms-more { font: 600 12px var(--c-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-gold-deep); }
.le-cms-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.le-cms-chips a { display: inline-block; border: 1px solid var(--c-line); padding: 8px 14px; font-size: 13.5px; text-decoration: none; color: var(--c-ink); background: #fff; }
.le-cms-chips a::after { content: ' \2192'; color: var(--c-gold-deep); }
.le-cms-chips a:hover { border-color: var(--c-gold); }

/* 8 · Beratungsblock – persönlicher Kontakt, eine klare Handlung */
.le-cms-advice { background: var(--c-ink); color: #e9e5dc; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; padding: 40px 44px; margin: 10px 0; }
.le-cms-advice .le-cms-eyebrow { color: var(--c-gold); }
.le-cms-advice h2 { color: #fff; font-size: 30px; margin: 0 0 10px; }
.le-cms-advice p { margin: 0; }
.le-cms-advice__contact { border-left: 1px solid rgba(218, 180, 74, .45); padding-left: 32px; font-size: 15px; }
.le-cms-advice__contact strong { display: block; font: 500 26px var(--c-serif); color: #fff; margin: 4px 0 12px; }
.le-cms-advice .le-cms-button { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-ink) !important; }

/* 9 · FAQ – nur bei echtem Mehrwert; native <details>, kein JS */
.le-cms-faq { margin: 0; }
.le-cms-faq details { border-bottom: 1px solid var(--c-line); padding: 16px 0; }
.le-cms-faq details:first-of-type { border-top: 1px solid var(--c-ink); }
.le-cms-faq summary { font: 500 21px/1.3 var(--c-serif); color: var(--c-ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.le-cms-faq summary::-webkit-details-marker { display: none; }
.le-cms-faq summary::after { content: '+'; font: 300 24px var(--c-sans); color: var(--c-gold-deep); }
.le-cms-faq details[open] summary::after { content: '\2013'; }
.le-cms-faq details > div, .le-cms-faq details > p { margin: 10px 0 0; max-width: 760px; }

/* Optional · Schritte (Ablauf), Vergleich (Tabelle), Hintergrundtext */
.le-cms-steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 28px; counter-reset: le-step; margin: 0; padding: 0; list-style: none; }
.le-cms-steps--3 { --n: 3; }
.le-cms-steps > li { border-top: 1px solid var(--c-gold); padding-top: 16px; }
.le-cms-steps > li::before { counter-increment: le-step; content: '0' counter(le-step); font: 500 30px var(--c-serif); color: var(--c-gold-deep); display: block; margin-bottom: 6px; }
.le-cms-steps h3 { font: 600 15px var(--c-sans); letter-spacing: .02em; margin: 0 0 6px; }
.le-cms-steps p { font-size: 14.5px; margin: 0; }
.le-cms-compare { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.le-cms-compare th { text-align: left; font: 600 11px var(--c-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--c-label); border-bottom: 1px solid var(--c-ink); padding: 10px 14px 10px 0; }
.le-cms-compare td { border-bottom: 1px solid var(--c-line); padding: 14px 14px 14px 0; vertical-align: top; }
.le-cms-compare td:first-child { font: 500 19px var(--c-serif); color: var(--c-ink); }
.le-cms-compare-wrap { overflow-x: auto; }
/* Theme-Tabellenstile (dunkle Kopfzeile, weiße Zellrahmen) innerhalb der Bibliothek neutralisieren */
.le-cms .le-cms-compare th, .le-cms .le-cms-compare td { background: transparent !important; border-top: 0; border-left: 0; border-right: 0; }
.le-cms .le-cms-compare th { color: var(--c-label); border-bottom: 1px solid var(--c-ink); font-weight: 600; text-align: left; }
.le-cms .le-cms-compare td { color: var(--c-text); border-bottom: 1px solid var(--c-line); }
.le-cms .le-cms-compare td:first-child { color: var(--c-ink); }
.le-cms .le-cms-compare td a { text-decoration: underline; text-decoration-color: var(--c-gold); text-underline-offset: 4px; }
.le-cms .le-cms-compare td a:hover { color: var(--c-gold-deep); }
.le-cms-background { background: var(--c-paper); padding: 30px 34px; }
.le-cms-background h2 { font-size: 26px; margin-bottom: 10px; }
.le-cms-background h3 { font: 600 14px var(--c-sans); letter-spacing: .02em; margin: 18px 0 4px; }
.le-cms-background p { font-size: 15px; max-width: 820px; margin: 0 0 8px; }
.le-cms-note { font-size: 12.5px; color: var(--c-muted); margin-top: 10px; }

@media (max-width: 767px) {
    .le-cms-head { grid-template-columns: 1fr; gap: 20px; }
    .le-cms-head .le-cms-hero { order: -1; aspect-ratio: 16 / 9; }
    .le-cms-intro { font-size: 16px; }
    .le-cms-facts { --n: 2 !important; }
    .le-cms-fact { padding: 14px 12px; }
    .le-cms-fact:nth-child(odd) { border-left: 0; padding-left: 0; }
    .le-cms-fact:nth-child(n+3) { border-top: 1px solid var(--c-line); }
    .le-cms-fact strong { font-size: 20px; }
    .le-cms h2, .le-cms-h2 { font-size: 27px; }
    .le-cms-section-head { display: block; }
    .le-cms-split { grid-template-columns: 1fr; gap: 18px; }
    .le-cms-split--reverse .le-cms-split__media { order: 0; }
    .le-cms-lines { --n: 1 !important; }
    .le-cms-line + .le-cms-line { border-left: 0; }
    .le-cms-line > a { padding: 18px 0 20px; }
    .le-cms-advice { grid-template-columns: 1fr; padding: 28px 22px; gap: 20px; }
    .le-cms-advice__contact { border-left: 0; border-top: 1px solid rgba(218, 180, 74, .45); padding: 18px 0 0; }
    .le-cms-steps { --n: 2 !important; gap: 18px; }
    .le-cms-compare { font-size: 13.5px; }
    .le-cms-background { padding: 22px 18px; }
}

/* 1.4.2: Vergleichstabellen auf schmalen Displays ohne horizontalen Überlauf – nur Bibliotheks-Tabellen (.le-cms .le-cms-compare),
   nur unterhalb des Tablet-Breakpoints; Desktop/Tablet (ab 768 px) unverändert, Tabelleninhalt unverändert. */
@media (max-width: 767px) {
    .le-cms .le-cms-compare th { letter-spacing: .06em; padding-right: 8px; }
    .le-cms .le-cms-compare td { padding-right: 8px; }
}
@media (max-width: 479px) {
    .le-cms .le-cms-compare { font-size: 12px; }
    .le-cms .le-cms-compare td:first-child { font-size: 14px; }
    .le-cms .le-cms-compare th { font-size: 10px; letter-spacing: .02em; padding-right: 6px; }
    .le-cms .le-cms-compare td { padding-right: 6px; }
}

/* ================================================================ Seitenintegration (nur body.is--le-cms) */
/* Kopf: Eyebrow über der H1 (aus dem Kategorietext verschoben), H1 linksbündig wie die Bibliothek */
.is--le-cms .le-cms-pagehead { margin: 30px 0 0; }
.is--le-cms .le-cms-pagehead .le-cms-eyebrow { margin: 0; }
.is--le-cms .category--teaser .hero--headline,
.is--le-cms .category--teaser .hero--headline.panel--title {
    max-width: none;
    margin: 12px 0 20px;
    text-align: left;
    font: 500 44px/1.12 var(--le-serif, 'Cormorant Garamond', Georgia, serif);
    letter-spacing: -.005em;
}
.is--le-cms .category--teaser .hero--headline::after { display: none; }
.is--le-cms .category--teaser .hero--text { max-width: none; margin: 0; padding: 0; font: inherit; }
.is--le-cms .category--teaser .teaser--text-long .le-cms h2 { font-weight: 500; }
.is--le-cms .category--teaser .teaser--text-long .le-cms h3 { font-weight: 500; }
.is--le-cms .category--teaser .teaser--text-long .le-cms-steps h3 { font-family: var(--c-sans) !important; font-weight: 600; }
/* Theme-Listen neutralisieren */
.is--le-cms .le-cms ul, .is--le-cms .le-cms ol { margin-left: 0; }
.is--le-cms .le-cms li { margin-left: 0; }
/* Teil unter dem Listing */
.le-cms-after-listing { margin: 34px 0 40px; clear: both; }
.le-cms-after-listing > .le-cms > .le-cms-section:first-child { padding-top: 0; }
@media (max-width: 767px) {
    .is--le-cms .le-cms-pagehead { margin-top: 22px; }
    .is--le-cms .category--teaser .hero--headline,
    .is--le-cms .category--teaser .hero--headline.panel--title { font-size: 32px; margin: 10px 0 16px; }
    .is--le-cms .category--teaser .hero--text { padding: 0; }
    .le-cms-after-listing { margin: 24px 0 30px; }
}

/* 1.4.3: Linien-Kacheln (Weichen in Unterseiten) mobil kompakt – Bild als quadratisches Vorschaubild links, Text daneben.
   Gleicher Inhalt (Titel, Text, Linktext vollständig), gleiche Links, ganze Kachel bleibt Klickfläche; nur unter 768 px. */
@media (max-width: 767px) {
    .le-cms .le-cms-line > a { display: flow-root; padding: 16px 0 18px; }
    .le-cms .le-cms-line__img { float: left; width: 96px; aspect-ratio: 1 / 1; margin: 2px 14px 4px 0; }
    .le-cms .le-cms-line h3 { margin-top: 0; font-size: 20px; }
    .le-cms .le-cms-line p { font-size: 14.5px; margin: 0 0 8px; }
}

/* 1.5.0 · Einkaufswelt-Seiten (Schalter cmsEmotionPages): kurzer Kopf direkt vor der Einkaufswelt – dunkles Band in der
   Farbe der Einkaufswelt-Flächen, damit Kopf und Bühne zusammengehören –, redaktioneller Bereich direkt dahinter in
   Containerbreite. Die Einkaufswelt selbst bleibt unverändert. */
.le-cms-ewhead { background: #1b1b1b; }
.le-cms-ewhead__inner { max-width: 1160px; margin: 0 auto; padding: 26px 20px 24px; color: #d9d4c8; }
.le-cms-ewhead .le-cms-eyebrow { color: var(--c-gold); margin: 0 0 10px; }
.le-cms-ewhead .le-cms-ewhead__h1 { font: 500 40px/1.12 var(--c-serif); color: #fff; margin: 0 0 10px; letter-spacing: -.005em; text-align: left; text-transform: none; }
.le-cms-ewhead .le-cms { color: inherit; }
.le-cms-ewhead .le-cms-head { margin: 0; }
.le-cms-ewhead .le-cms-intro { color: #d9d4c8; font-size: 16px; line-height: 1.65; max-width: 780px; }
.le-cms-ewhead .le-cms-actions { margin-top: 12px; }
.le-cms-ewhead .le-cms-textlink { color: var(--c-gold); border-bottom-color: var(--c-gold-deep); }
.le-cms-after-emotion { max-width: 1160px; margin: 44px auto 40px; padding: 0 20px; clear: both; }
.le-cms-after-emotion > .le-cms > .le-cms-section:first-child { padding-top: 0; }
/* Storytelling-Abschnittsnavigation (fest am linken Rand): unter ~1210 px Breite rückt der Text daneben */
@media (max-width: 1209px) {
    .is--storytelling .le-cms-ewhead__inner, .is--storytelling .le-cms-after-emotion { padding-left: 46px; }
}
@media (max-width: 767px) {
    .le-cms-ewhead__inner { padding: 16px 16px 16px 46px; }
    .le-cms-ewhead .le-cms-eyebrow { margin-bottom: 6px; }
    .le-cms-ewhead .le-cms-ewhead__h1 { font-size: 26px; margin-bottom: 6px; }
    .le-cms-ewhead .le-cms-intro { font-size: 14.5px; line-height: 1.55; }
    .le-cms-after-emotion { margin: 30px auto 28px; padding: 0 16px 0 46px; }
}