/* v5.18.0: Anker-Links (#cs-sek-{ID}) scrollen sanft zur Sektion */
html{scroll-behavior:smooth}
.cs-section[id^="cs-sek-"]{scroll-margin-top:90px} /* Platz fuer sticky Header */

/* =========================================================
   Stylepot Pagebuilder v5.2.1 - Frontend CSS
   (c) stylepot.de

   4 Themes:
   - Linien    (cs-theme-lines)     Feine Trennlinien, sauber, sortiert
   - Dicht     (cs-theme-dense)     Lueckenlos, reduziert, COS-Style
   - Statement (cs-theme-statement) Grosse Typografie, kraeftig, mit Luft
   - Magazin   (cs-theme-magazin)   Serifen, Collage-Versatz, Vogue-Look

   Backward-Compat: alte Klassen (clean/bold/editorial) werden vom
   Smarty-Template auf neue gemappt.
   ========================================================= */

:root {
    --cs-text: inherit;
    --cs-text-muted: #555;
    --cs-bg: #fff;
    --cs-accent: #000;
    --cs-accent-text: #fff;
    --cs-accent-hover: #333;
    --cs-border: #000;
    --cs-border-soft: #999;
}


/* =========================================================
   BASE
   ========================================================= */

.cs-wrapper {
    width: 100%;
    /* v5.21.1: max-width-Cap (1920px, v5.1.5) entfernt - der Wrapper ist
       volle Breite; die Breite steuert der Betreiber pro Sektion
       (Breite-Feld: Voll/1280/1024/768/px/%) bzw. per
       Wrapper-Zusatzklasse aus den Moduleinstellungen. */
    margin-left: auto;
    margin-right: auto;
    color: var(--cs-text);
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
.cs-section { margin-bottom: 0; }

.cs-grid { display: grid; gap: 1px; }
.cs-grid-1 { grid-template-columns: 1fr; }
.cs-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cs-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cs-grid-4 { grid-template-columns: repeat(4, 1fr); }
.cs-grid-5 { grid-template-columns: repeat(5, 1fr); }
.cs-grid-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 768px) {
    .cs-grid-3, .cs-grid-4, .cs-grid-5, .cs-grid-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .cs-grid-2, .cs-grid-3, .cs-grid-4, .cs-grid-5, .cs-grid-6 { grid-template-columns: 1fr; }
}


/* =========================================================
   CELL + Linking + Hover
   Bild-Zoom triggert weiterhin auf Cell-Hover.
   Button-Hover (Underline) ist jetzt button-lokal -
   nicht mehr pauschal beim Hover ueber die ganze Zelle.
   ========================================================= */

.cs-cell { overflow: hidden; position: relative; display: block; }

/* Für image_top / text_top: Bilder aller Cells auf gleicher Hoehe.
   Loesung: die Sektion-Grid definiert 2 Zeilen, und jede Cell verwendet
   subgrid damit ihr Bild und ihr Content in der gleichen Grid-Row landen
   wie die anderen Cells. */
.cs-style-image_top .cs-grid,
.cs-style-text_top .cs-grid {
    grid-auto-rows: min-content;
}
.cs-style-image_top .cs-grid > .cs-cell,
.cs-style-text_top .cs-grid > .cs-cell {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    row-gap: 0;
}
/* Fallback fuer Browser ohne subgrid (Safari < 16):
   wir setzen align-items: start damit Cells oben anliegen. Dann koennen
   Bilder zwar nicht perfekt aligned sein, aber der Inhalt bleibt sauber. */
@supports not (grid-template-rows: subgrid) {
    .cs-style-image_top .cs-grid > .cs-cell,
    .cs-style-text_top .cs-grid > .cs-cell {
        display: flex;
        flex-direction: column;
    }
    .cs-style-image_top .cs-grid > .cs-cell .cs-cell-content,
    .cs-style-text_top .cs-grid > .cs-cell .cs-cell-content {
        flex: 1;
    }
}

a.cs-cell-linked { text-decoration: none; color: inherit; display: block; cursor: pointer; }
a.cs-cell-linked:hover, a.cs-cell-linked:visited { color: inherit; text-decoration: none; }

.cs-cell-image { overflow: hidden; }
.cs-cell-image img {
    width: 100%; height: auto; display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.cs-cell:hover .cs-cell-image img,
a.cs-cell-linked:hover .cs-cell-image img,
a.cs-cell-linked:hover .cs-overlay-media img,
a.cs-cell-linked:hover .cs-split-image img {
    transform: scale(1.03);
}

.cs-cell-content { padding: 1.25rem 1.5rem; }

/* Overlay */
.cs-cell-overlay { position: relative; overflow: hidden; }
.cs-overlay-media {
    display: block;
    width: 100%;
    line-height: 0;
}
.cs-overlay-media picture,
.cs-overlay-media img {
    width: 100%; height: auto; display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.cs-overlay-media .cs-video {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
/* v5.1.4: Spacing identisch zum Slider (3rem 4rem / mobil 1.5rem 1.3rem),
   ebenso die Innenabstaende (Heading/Text/Eyebrow/Buttons) - einheitlicher
   Look ueber Slider- und Overlay-Elemente. */
.cs-overlay-content {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 3rem 4rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    color: #fff;
}
.cs-overlay-content .cs-heading { color: #fff; margin-bottom: 0.8rem; }
.cs-overlay-content .cs-text { color: rgba(255,255,255,0.9); margin-bottom: 1.2rem; }
.cs-overlay-content .cs-eyebrow { margin-bottom: 0.5rem; }
.cs-overlay-content .cs-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

/* Split */
.cs-style-image_left .cs-grid,
.cs-style-image_right .cs-grid { gap: 0; }
.cs-split {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0; align-items: stretch; width: 100%;
}
.cs-split-image { overflow: hidden; min-width: 0; }
.cs-split-image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.cs-split-content {
    display: flex; flex-direction: column; justify-content: center;
    padding: 3rem; min-width: 0;
}
@media (max-width: 768px) {
    .cs-split { grid-template-columns: 1fr; }
    .cs-split-content { padding: 2rem 1.5rem; }
    .cs-style-image_right .cs-split-content { order: 2; }
    .cs-style-image_right .cs-split-image { order: 1; }
}


/* =========================================================
   HEADINGS + TEXT
   ========================================================= */

.cs-heading {
    /* v5.22.0: mehr Luft zur naechsten Ebene ("klebt nicht") */
    margin: 0 0 1.1rem 0; padding: 0;
    font-weight: 600; line-height: 1.2;
    font-family: inherit; color: inherit;
    font-style: normal; text-indent: 0; text-align: left;
}
/* v5.22.0 TYPO-SKALA (abgenommen): Sektions-Headlines skalieren mit dem
   Viewport (clamp deckt mobil mit ab - die alten Mobil-Overrides
   entfallen); Zellen bekommen eine EIGENE, deutlich kleinere Stufe. */
h1.cs-heading { font-size: clamp(2.4rem, 4vw, 3.5rem); }
h2.cs-heading { font-size: clamp(1.9rem, 3vw, 2.5rem); }
h3.cs-heading { font-size: clamp(1.5rem, 2.2vw, 1.8rem); }
.cs-cell h1.cs-heading { font-size: 1.6rem; }
.cs-cell h2.cs-heading { font-size: 1.375rem; }
.cs-cell h3.cs-heading { font-size: 1.125rem; }

.cs-text {
    /* v5.22.0: Standard SCHWARZ (statt #555), etwas groesser, mehr
       Luft nach unten (Text -> Button). Farbe pro Element weiterhin
       per Farbpunkt frei. */
    font-size: 1.1rem; line-height: 1.75;
    color: #000;
    margin-bottom: 1.6rem; font-family: inherit;
}
.cs-text b, .cs-text strong { font-weight: 600; color: inherit; }
.cs-text a { color: inherit; text-decoration: underline; }


/* =========================================================
   BUTTONS - 4 Styles
   Button-Hover ist jetzt button-lokal:
   :hover am Button selbst, nicht am Eltern-Link.
   ========================================================= */

.cs-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }

.cs-btn {
    display: inline-block; padding: 0.75rem 2rem;
    font-size: 0.95rem; font-weight: 500; font-family: inherit;
    text-decoration: none; border-radius: 0;
    transition: all 0.2s ease; cursor: pointer;
    line-height: 1.4; text-align: center;
    border: 1px solid transparent; letter-spacing: 0.02em;
}

.cs-btn-black { background: var(--cs-accent) !important; color: var(--cs-accent-text) !important; border-color: var(--cs-accent) !important; }
.cs-btn-white { background: #fff !important; color: #000 !important; border-color: #000 !important; }
.cs-btn-outline { background: transparent !important; color: inherit !important; border-color: var(--cs-border) !important; }
.cs-btn-outline-white { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.7) !important; }

/* Button-Hover NUR wenn Maus wirklich am Button ist */
.cs-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Overlay button overrides */
.cs-overlay-content .cs-btn-black { background: #fff !important; color: #000 !important; border-color: #fff !important; }
.cs-overlay-content .cs-btn-white { background: transparent !important; color: #fff !important; border-color: #fff !important; }
.cs-overlay-content .cs-btn-outline { color: #fff !important; border-color: rgba(255,255,255,.7) !important; background: transparent !important; }


/* =========================================================
   THEME 1: LINIEN (cs-theme-lines)
   Feine Trennlinien, sauber, sortiert.
   = aktuelles Verhalten, blieb erhalten.
   ========================================================= */

.cs-theme-lines .cs-grid { gap: 1px; }
.cs-theme-lines .cs-section { margin-bottom: 1px; }
.cs-theme-lines .cs-section .cs-cross-selling { margin-top: 1px; } /* v5.11.8: dichte Fuge wie die Kacheln */
.cs-theme-lines .cs-heading { font-weight: 500; letter-spacing: -0.01em; }
.cs-theme-lines .cs-cell-content { padding: 1.25rem 1.25rem; }
.cs-theme-lines .cs-btn {
    font-weight: 400; letter-spacing: 0.04em;
    text-transform: uppercase; font-size: 0.85rem; padding: 0.7rem 1.9rem; /* v5.22.0 */
}
.cs-theme-lines .cs-split-content { padding: 2.5rem 3rem; }


/* =========================================================
   THEME 2: DICHT (cs-theme-dense)
   Lueckenlos, reduziert, COS-Style.
   0 Gap, kleine Schrift, Hover = leichte Abdunkelung statt Zoom.
   ========================================================= */

.cs-theme-dense .cs-grid { gap: 0; }
.cs-theme-dense .cs-section { margin-bottom: 0; }

.cs-theme-dense .cs-heading {
    font-weight: 300; letter-spacing: 0.01em;
}
.cs-theme-dense h1.cs-heading { font-size: 1.3rem; }
.cs-theme-dense h2.cs-heading { font-size: 1.1rem; }
.cs-theme-dense h3.cs-heading { font-size: 1rem; }

.cs-theme-dense .cs-text { font-size: 0.85rem; line-height: 1.5; }
.cs-theme-dense .cs-cell-content { padding: 0.9rem 1rem; }

.cs-theme-dense .cs-btn {
    font-weight: 400; letter-spacing: 0.06em;
    text-transform: uppercase; font-size: 0.7rem; padding: 0.5rem 1.3rem;
    border-width: 1px;
}

.cs-theme-dense .cs-overlay-content { padding: 3rem 4rem; } /* v5.1.4: Spacing wie Slider */
.cs-theme-dense .cs-overlay-content .cs-heading { font-size: 1.1rem; font-weight: 300; }
.cs-theme-dense .cs-split-content { padding: 2rem 2rem; }
.cs-theme-dense .cs-split-content .cs-heading { font-size: 1.1rem; font-weight: 300; }

/* Dicht: kein Zoom, dafuer leichte Abdunkelung */
.cs-theme-dense .cs-cell-image img,
.cs-theme-dense .cs-overlay-img,
.cs-theme-dense .cs-split-image img {
    transition: filter 0.4s ease, transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.cs-theme-dense .cs-cell:hover .cs-cell-image img,
.cs-theme-dense a.cs-cell-linked:hover .cs-cell-image img,
.cs-theme-dense a.cs-cell-linked:hover .cs-overlay-img,
.cs-theme-dense a.cs-cell-linked:hover .cs-split-image img {
    transform: none;
    filter: brightness(0.92);
}

@media (max-width: 768px) {
    .cs-theme-dense h1.cs-heading { font-size: 1.2rem; }
    .cs-theme-dense h2.cs-heading { font-size: 1rem; }
}


/* =========================================================
   THEME 3: STATEMENT (cs-theme-statement)
   ME+EM-Style: edel-strukturiert, ruhige Typografie,
   mehr Padding zum Bildrand, rhythmische Section-Abstaende.
   Buttons als Text-Links mit Underline (à la "Shop Now").
   ========================================================= */

.cs-wrapper.cs-theme-statement { padding: 24px 0 12px; }

.cs-theme-statement .cs-grid { gap: 12px; }

/* Rhythmische Section-Abstaende: nicht uniform, sondern atmend.
   ME+EM hat unterschiedliche Distanzen zwischen Sektionen -
   Hero->Produkte knapp, Produkte->Bilder mittel, Quote->Bilder gross. */
.cs-theme-statement .cs-section { margin-bottom: 24px; }
.cs-theme-statement .cs-section:nth-child(3n+1) { margin-bottom: 40px; }
.cs-theme-statement .cs-section:nth-child(4n) { margin-bottom: 50px; }
.cs-theme-statement .cs-section:last-child { margin-bottom: 0; }
/* Footer-Abstand-Fix: gleiches Pattern wie Magazin */
.cs-theme-statement .cs-section:last-child .cs-cross-selling,
.cs-theme-statement .cs-section:last-child > .cs-grid:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.cs-theme-statement .cs-heading {
    font-weight: 400; letter-spacing: 0;
    line-height: 1.3;
    transition: none;
}
.cs-theme-statement h1.cs-heading { font-size: 1.4rem; }
.cs-theme-statement h2.cs-heading { font-size: 1.2rem; }
.cs-theme-statement h3.cs-heading { font-size: 1.05rem; }

.cs-theme-statement .cs-text {
    font-size: 0.95rem; line-height: 1.6;
    color: var(--cs-text-muted);
    margin-bottom: 0.5rem;
}

/* Mehr Padding zum Bildrand - Texte sitzen nicht knapp am Rand */
.cs-theme-statement .cs-cell-content { padding: 1.5rem 1.5rem 1.75rem; }

/* Buttons als Text-Links mit Underline, nicht als Plakat-Button */
.cs-theme-statement .cs-buttons { gap: 1.25rem; margin-top: 0.75rem; }
.cs-theme-statement .cs-btn {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    padding: 0 !important;
    font-weight: 400; font-size: 0.9rem;
    letter-spacing: 0.02em; text-transform: none;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}
.cs-theme-statement .cs-btn:hover {
    text-decoration-thickness: 1.5px;
}

/* Overlay-Texte: links unten, klein, weiss, schlicht (à la ME+EM) */
.cs-theme-statement .cs-overlay-content {
    padding: 3rem 4rem; /* v5.1.4: Spacing wie Slider */
    background: linear-gradient(transparent, rgba(0,0,0,0.45));
}
.cs-theme-statement .cs-overlay-content .cs-heading {
    font-size: 1.2rem; font-weight: 400;
    text-transform: none; letter-spacing: 0;
}
.cs-theme-statement .cs-overlay-content .cs-btn {
    color: #fff !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cs-theme-statement .cs-split-content { padding: 2.5rem 2.5rem; }
.cs-theme-statement .cs-split-content .cs-heading { font-size: 1.4rem; }

/* Statement: dezenter Bild-Zoom, kein Heading-Lift */
.cs-theme-statement .cs-cell:hover .cs-cell-image img,
.cs-theme-statement a.cs-cell-linked:hover .cs-cell-image img,
.cs-theme-statement a.cs-cell-linked:hover .cs-overlay-img,
.cs-theme-statement a.cs-cell-linked:hover .cs-split-image img {
    transform: scale(1.03);
}

/* Cross-Selling im Statement: knapper Abstand zur Sektion (ME+EM-Look),
   aber gleicher Item-Gap wie Magazin damit Produkte nicht aneinanderkleben */
.cs-theme-statement .cs-section .cs-cross-selling { margin-top: 16px; }
.cs-theme-statement .cs-cs-2_col,
.cs-theme-statement .cs-cs-3_col,
.cs-theme-statement .cs-cs-4_col,
.cs-theme-statement .cs-cs-5_col,
.cs-theme-statement .cs-cs-6_col { gap: 1px; } /* v5.10.2: dichte Systemfuge wie Magazin */
.cs-theme-statement .cs-carousel-track { gap: 1px; } /* v5.10.2 */

@media (max-width: 768px) {
    .cs-wrapper.cs-theme-statement { padding: 16px 0; }
    .cs-theme-statement .cs-grid { gap: 8px; }
    .cs-theme-statement .cs-section { margin-bottom: 18px; }
    .cs-theme-statement .cs-section:nth-child(3n+1) { margin-bottom: 28px; }
    .cs-theme-statement .cs-section:nth-child(4n) { margin-bottom: 32px; }
    .cs-theme-statement h1.cs-heading { font-size: 1.2rem; }
    .cs-theme-statement h2.cs-heading { font-size: 1.05rem; }
    .cs-theme-statement h3.cs-heading { font-size: 1rem; }
    .cs-theme-statement .cs-cell-content { padding: 1.1rem 1rem 1.4rem; }
    .cs-theme-statement .cs-split-content { padding: 1.8rem 1.5rem; }
}


/* =========================================================
   THEME 4: MAGAZIN (cs-theme-magazin)
   Vogue-Look: Collage-Versatz, asymmetrische Spaltenbreiten,
   grosse Headlines mit Eyebrow-Kontrast, animierte Underline.
   Nutzt die Shop-Schrift (kein Serifen-Override).
   ========================================================= */

.cs-wrapper.cs-theme-magazin { padding: 60px 0 30px; }

.cs-theme-magazin .cs-grid { gap: 30px; align-items: start; }
.cs-theme-magazin .cs-section { margin-bottom: 60px; }
.cs-theme-magazin .cs-section:last-child { margin-bottom: 0; }
/* Footer-Abstand-Fix: alle moeglichen letzten Elemente der letzten Sektion
   bekommen kein bottom-Padding/Margin mehr. Greift sowohl bei Cells
   als letztes Element als auch bei Cross-Selling als letztes Element. */
.cs-theme-magazin .cs-section:last-child .cs-cross-selling,
.cs-theme-magazin .cs-section:last-child > .cs-grid:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Asymmetrische Spaltenbreiten - das Herzstueck des Magazin-Looks.
   Ueberschreibt die Default-1fr-Spalten, damit Bilder
   unterschiedlich gross wirken (echtes Magazin-Layout). */
.cs-theme-magazin .cs-grid-2 { grid-template-columns: 2fr 1fr; }
.cs-theme-magazin .cs-grid-3 { grid-template-columns: 1fr 1.4fr 1fr; }
.cs-theme-magazin .cs-grid-4 { grid-template-columns: 1fr 1.3fr 1fr 1.3fr; }
.cs-theme-magazin .cs-grid-5 { grid-template-columns: 1fr 1.2fr 1fr 1.2fr 1fr; }
.cs-theme-magazin .cs-grid-6 { grid-template-columns: 1fr 1.2fr 1fr 1.2fr 1fr 1.2fr; }

/* H1 + H2: grosse Headlines mit der Shop-Schrift (kein Serifen-Override) */
.cs-theme-magazin .cs-heading {
    font-family: inherit;
    font-weight: 400; letter-spacing: -0.015em;
    line-height: 1.1;
}
.cs-theme-magazin h1.cs-heading { font-size: 4rem; }
.cs-theme-magazin h2.cs-heading { font-size: 3.2rem; }

/* H3: Eyebrow-Label (klein, uppercase, weit gesperrt, kraeftiger).
   Kontrastiert mit den grossen leichten H1/H2 - typischer Magazin-Trick. */
.cs-theme-magazin h3.cs-heading {
    font-family: inherit;
    font-size: 0.85rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.18em;
    line-height: 1.4;
}

.cs-theme-magazin .cs-text {
    font-family: inherit;
    font-size: 1.1rem; line-height: 1.85;
    max-width: 580px;
}
.cs-theme-magazin .cs-cell-content { padding: 1.75rem 1.75rem; }

.cs-theme-magazin .cs-btn {
    font-family: inherit;
    font-weight: 400; letter-spacing: 0.02em;
    text-transform: none; font-size: 0.95rem;
    padding: 0.7rem 1.8rem; border-width: 1px;
}

.cs-theme-magazin .cs-overlay-content { padding: 3rem 4rem; } /* v5.1.4: Spacing wie Slider */
.cs-theme-magazin .cs-overlay-content .cs-heading { font-size: 3.2rem; font-weight: 400; }
.cs-theme-magazin .cs-overlay-content h3.cs-heading {
    font-size: 0.85rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.18em;
    font-family: inherit;
}
.cs-theme-magazin .cs-split-content { padding: 4rem 4rem; }
.cs-theme-magazin .cs-split-content .cs-heading { font-size: 3rem; }

/* Magazin: KEIN Bild-Hover, dafuer animierte Underline am Heading */
.cs-theme-magazin .cs-cell-image img,
.cs-theme-magazin .cs-overlay-img,
.cs-theme-magazin .cs-split-image img {
    transition: none;
}
.cs-theme-magazin .cs-cell:hover .cs-cell-image img,
.cs-theme-magazin a.cs-cell-linked:hover .cs-cell-image img,
.cs-theme-magazin a.cs-cell-linked:hover .cs-overlay-img,
.cs-theme-magazin a.cs-cell-linked:hover .cs-split-image img {
    transform: none;
}

.cs-theme-magazin .cs-heading {
    display: inline;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.6s cubic-bezier(0.2, 0, 0.2, 1);
    padding-bottom: 2px;
}
.cs-theme-magazin .cs-cell:hover .cs-heading,
.cs-theme-magazin a.cs-cell-linked:hover .cs-heading {
    background-size: 100% 1px;
}

/* Collage-Versatz: verdoppelte Werte gegenueber v3.2.1.
   Mobile (< 768px) wird der Versatz zurueckgesetzt. */

.cs-theme-magazin .cs-grid-2 > *:nth-child(2) { margin-top: 160px; }

.cs-theme-magazin .cs-grid-3 > *:nth-child(2) { margin-top: 120px; }
.cs-theme-magazin .cs-grid-3 > *:nth-child(3) { margin-top: 60px; }

.cs-theme-magazin .cs-grid-4 > *:nth-child(2) { margin-top: 120px; }
.cs-theme-magazin .cs-grid-4 > *:nth-child(4) { margin-top: 160px; }

.cs-theme-magazin .cs-grid-5 > *:nth-child(2) { margin-top: 100px; }
.cs-theme-magazin .cs-grid-5 > *:nth-child(4) { margin-top: 100px; }
.cs-theme-magazin .cs-grid-5 > *:nth-child(5) { margin-top: 50px; }

.cs-theme-magazin .cs-grid-6 > *:nth-child(2) { margin-top: 80px; }
.cs-theme-magazin .cs-grid-6 > *:nth-child(4) { margin-top: 120px; }
.cs-theme-magazin .cs-grid-6 > *:nth-child(6) { margin-top: 60px; }

/* Cross-Selling im Magazin:
   v5.10.2 - die 16px-Theme-Gaps waren "der grosse Abstand" (DevTools-
   Fund des Users: Theme-Regel gewann per Spezifitaet ueber die
   1px-Basis). Jetzt ueberall die dichte 1px-Systemfuge. */
.cs-theme-magazin .cs-section .cs-cross-selling { margin-top: 24px; }
.cs-theme-magazin .cs-cs-2_col,
.cs-theme-magazin .cs-cs-3_col,
.cs-theme-magazin .cs-cs-4_col,
.cs-theme-magazin .cs-cs-5_col,
.cs-theme-magazin .cs-cs-6_col { gap: 1px; }
.cs-theme-magazin .cs-carousel-track { gap: 1px; }

@media (max-width: 768px) {
    .cs-wrapper.cs-theme-magazin { padding: 30px 0; }
    .cs-theme-magazin .cs-grid { gap: 20px; }
    .cs-theme-magazin .cs-section { margin-bottom: 30px; }
    .cs-theme-magazin h1.cs-heading { font-size: 2.4rem; }
    .cs-theme-magazin h2.cs-heading { font-size: 2rem; }
    .cs-theme-magazin h3.cs-heading { font-size: 0.8rem; }
    .cs-theme-magazin .cs-split-content { padding: 2.5rem 1.8rem; }
    /* Asymmetrie + Versatz auf Mobil aufheben - waere kaputt im Stack */
    .cs-theme-magazin .cs-grid-2,
    .cs-theme-magazin .cs-grid-3,
    .cs-theme-magazin .cs-grid-4,
    .cs-theme-magazin .cs-grid-5,
    .cs-theme-magazin .cs-grid-6 { grid-template-columns: 1fr; }
    .cs-theme-magazin .cs-grid > * { margin-top: 0 !important; }
    .cs-theme-magazin .cs-section .cs-cross-selling { margin-top: 24px; }
}


/* =========================================================
   CROSS SELLING - Shared
   ========================================================= */

.cs-cross-selling { margin-top: 0; position: relative; }

.cs-cs-1_large { display: grid; grid-template-columns: 1fr; gap: 1px; }
.cs-cs-1_large .cs-cs-item { display: flex; gap: 0; align-items: center; }
.cs-cs-1_large .lb_image { width: 50%; flex-shrink: 0; }
.cs-cs-2_col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; }
.cs-cs-3_col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.cs-cs-4_col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; }
.cs-cs-5_col { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; }
.cs-cs-6_col { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; }

/* v5.1.5: Tablet-Zwischenstufe - 5/6 Spalten sind auf iPad Landscape zu schmal */
@media (min-width: 769px) and (max-width: 1180px) {
    .cs-cs-5_col, .cs-cs-6_col { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
    .cs-cs-3_col, .cs-cs-4_col, .cs-cs-5_col, .cs-cs-6_col { grid-template-columns: repeat(2, 1fr); }
    .cs-cs-1_large .cs-cs-item { flex-direction: column; }
    .cs-cs-1_large .lb_image { width: 100%; }
}


/* =========================================================
   CAROUSEL - Thin arrows + draggable scrollbar
   Scrollbar: 2px sichtbar, ~10px greifbar (transparenter Hit-Bereich).
   Die Bar ist ein 10px hoher Container, die sichtbare Linie wird per
   ::before erzeugt und ist mittig zentriert. Selbes Prinzip beim Thumb.
   ========================================================= */

.cs-cs-carousel { position: relative; padding-bottom: 32px; }

.cs-carousel-track {
    display: flex; gap: 1px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
    scroll-behavior: smooth;
}
.cs-carousel-track::-webkit-scrollbar { display: none; }

.cs-carousel-track .cs-cs-item {
    flex: 0 0 calc((100% - 16px) / 5.3);
    scroll-snap-align: start;
}
@media (max-width: 1399px) {
    .cs-carousel-track .cs-cs-item { flex: 0 0 calc((100% - 12px) / 4.3); }
}
@media (max-width: 1180px) { /* v5.1.5: iPad Landscape -> 3.3 Karten (war 1023) */
    .cs-carousel-track .cs-cs-item { flex: 0 0 calc((100% - 8px) / 3.3); }
}
@media (max-width: 768px) { /* v5.1.5: Kante vereinheitlicht (war 767) */
    .cs-carousel-track .cs-cs-item { flex: 0 0 calc((100% - 3px) / 2.3); }
}
@media (max-width: 480px) {
    .cs-carousel-track .cs-cs-item { flex: 0 0 calc((100% - 1px) / 1.3); }
}

/* Thin minimal arrows - SVG-basiert, linienhaft */
.cs-carousel-arrow {
    position: absolute; top: 50%; transform: translateY(calc(-50% - 16px));
    z-index: 5; width: 44px; height: 44px;
    background: none; border: none;
    color: #000; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.2s, transform 0.3s;
    opacity: 0.5;
    padding: 0;
}
.cs-carousel-arrow svg { width: 100%; height: 100%; display: block; }
.cs-carousel-arrow:hover { opacity: 1; }
.cs-carousel-prev:hover { transform: translateY(calc(-50% - 16px)) translateX(-2px); }
.cs-carousel-next:hover { transform: translateY(calc(-50% - 16px)) translateX(2px); }
.cs-carousel-prev { left: 6px; }
.cs-carousel-next { right: 6px; }
.cs-carousel-prev { opacity: 0; pointer-events: none; }
.cs-carousel-prev.cs-visible { opacity: 0.5; pointer-events: auto; }
.cs-carousel-prev.cs-visible:hover { opacity: 1; }

/* Scrollbar - 2px sichtbar, 10px greifbar */
.cs-carousel-scrollbar {
    position: relative;
    height: 10px;
    margin: 14px 0 0;
    cursor: pointer;
    background: transparent;
}
.cs-carousel-scrollbar::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    margin-top: -1px;
    height: 2px;
    background: #ddd;
    pointer-events: none;
}

.cs-carousel-scrollbar-thumb {
    position: absolute;
    top: 0; height: 10px;
    min-width: 40px;
    transition: left 0.1s ease;
    cursor: grab;
    background: transparent;
}
.cs-carousel-scrollbar-thumb::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    margin-top: -1px;
    height: 2px;
    background: #000;
    pointer-events: none;
}
.cs-carousel-scrollbar-thumb:active { cursor: grabbing; }

@media (max-width: 768px) {
    .cs-carousel-arrow { width: 44px; height: 44px; } /* v5.1.5: Apple-HIG-Minimum */
}


/* =========================================================
   CS Items + Hover
   ========================================================= */

/* v4.3.5: cs-cs-item Container bleibt fuer Layout-Kontext (.cs-cs-3_col etc.).
   Inneres Markup nutzt Listing-Klassen (lb_image, lb_content, lb_price,
   new_price, old_price, lb_save, lb_new) die das globale Shop-CSS stylt.
   Hier nur minimaler Reset damit das Listing-CSS frei greifen kann. */
.cs-cs-item { overflow: hidden; background: #fff; }
.cs-cs-item .lb_image { position: relative; overflow: hidden; }
/* v5.1.4: Verzerrungs-Fix. Das globale Listing-CSS des Templates kann auf
   .lb_image bzw. dem img feste Hoehen oder height:100% setzen - in
   Kombination mit width:100% wird das Bild dann gestaucht/gestreckt.
   Hier hart neutralisieren: Hoehe IMMER dynamisch aus dem Bildverhaeltnis
   (height:auto), keine erzwungenen Ratios. Grid-Zellen duerfen dadurch
   unterschiedlich hoch sein - align-items:start verhindert Stretching. */
.cs-cs-1_large, .cs-cs-2_col, .cs-cs-3_col, .cs-cs-4_col, .cs-cs-5_col, .cs-cs-6_col { align-items: start; }
.cs-cs-item:not(.cs-hero-cs-item) .lb_image {
    height: auto !important;
    aspect-ratio: auto !important;
}
.cs-cs-item:not(.cs-hero-cs-item) .lb_image img {
    width: 100% !important; height: auto !important;
    aspect-ratio: auto !important;
    display: block;
}
.cs-cs-item .lb_image img {
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.4s ease;
}
.cs-cs-item:hover .lb_image .lb_image_main { transform: scale(1.03); }

/* v4.3.5: Hover-Bild (lb_image_alternate) - Cross-Fade beim Mouseover.
   Liegt absolut ueber dem Hauptbild, normal opacity:0, bei Hover opacity:1. */
.cs-cs-item .lb_image .lb_image_alternate {
    position: absolute;
    top: 0; left: 0;
    width: 100% !important; height: 100% !important; /* v5.1.4: muss den height:auto-Verzerrungs-Fix oben uebersteuern */
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
}
.cs-cs-item:hover .lb_image .lb_image_alternate { opacity: 1; }


/* =========================================================
   v3.3.0 - HEADING SIZE OVERRIDES (cs-h-xs ... cs-h-xl)
   Theme-relativ: jede Stufe skaliert proportional zur Theme-Default-Groesse,
   damit es nicht mit der Theme-Identitaet kollidiert.
   ========================================================= */

/* v5.1.5: Fluid-Skala via clamp() - EINE Regel pro Stufe statt vier
   Media-Query-Bloecke. Skaliert stufenlos von 390px-Viewport (Mobil-
   Minimum) bis 1600px (Theme-Maximum). Erste font-size-Zeile =
   Fallback fuer Browser ohne clamp() (iOS < 13.4). Stufe xxl = Riesig. */

.cs-theme-lines .cs-heading.cs-h-xs { font-size: 0.98rem; font-size: clamp(0.75rem, 0.676rem + 0.019vw, 0.98rem); }
.cs-theme-lines .cs-heading.cs-h-s { font-size: 1.38rem; font-size: clamp(0.95rem, 0.811rem + 0.036vw, 1.38rem); }
.cs-theme-lines .cs-heading.cs-h-m { font-size: 1.96rem; font-size: clamp(1.3rem, 1.087rem + 0.055vw, 1.96rem); }
.cs-theme-lines .cs-heading.cs-h-l { font-size: 2.99rem; font-size: clamp(1.85rem, 1.483rem + 0.094vw, 2.99rem); }
.cs-theme-lines .cs-heading.cs-h-xl { font-size: 4.37rem; font-size: clamp(2.6rem, 2.030rem + 0.146vw, 4.37rem); }
.cs-theme-lines .cs-heading.cs-h-xxl { font-size: 5.98rem; font-size: clamp(3.5rem, 2.701rem + 0.205vw, 5.98rem); }

.cs-theme-dense .cs-heading.cs-h-xs { font-size: 0.86rem; font-size: clamp(0.75rem, 0.715rem + 0.009vw, 0.86rem); }
.cs-theme-dense .cs-heading.cs-h-s { font-size: 1.15rem; font-size: clamp(0.95rem, 0.886rem + 0.017vw, 1.15rem); }
.cs-theme-dense .cs-heading.cs-h-m { font-size: 1.61rem; font-size: clamp(1.3rem, 1.200rem + 0.026vw, 1.61rem); }
.cs-theme-dense .cs-heading.cs-h-l { font-size: 2.3rem; font-size: clamp(1.85rem, 1.705rem + 0.037vw, 2.3rem); }
.cs-theme-dense .cs-heading.cs-h-xl { font-size: 3.34rem; font-size: clamp(2.6rem, 2.361rem + 0.061vw, 3.34rem); }
.cs-theme-dense .cs-heading.cs-h-xxl { font-size: 4.6rem; font-size: clamp(3.5rem, 3.145rem + 0.091vw, 4.6rem); }

.cs-theme-statement .cs-heading.cs-h-xs { font-size: 0.92rem; font-size: clamp(0.75rem, 0.695rem + 0.014vw, 0.92rem); }
.cs-theme-statement .cs-heading.cs-h-s { font-size: 1.27rem; font-size: clamp(0.95rem, 0.847rem + 0.026vw, 1.27rem); }
.cs-theme-statement .cs-heading.cs-h-m { font-size: 1.78rem; font-size: clamp(1.3rem, 1.145rem + 0.040vw, 1.78rem); }
.cs-theme-statement .cs-heading.cs-h-l { font-size: 2.53rem; font-size: clamp(1.85rem, 1.631rem + 0.056vw, 2.53rem); }
.cs-theme-statement .cs-heading.cs-h-xl { font-size: 3.57rem; font-size: clamp(2.6rem, 2.287rem + 0.080vw, 3.57rem); }
.cs-theme-statement .cs-heading.cs-h-xxl { font-size: 4.95rem; font-size: clamp(3.5rem, 3.033rem + 0.120vw, 4.95rem); }

.cs-theme-magazin .cs-heading.cs-h-xs { font-size: 1.27rem; font-size: clamp(0.75rem, 0.582rem + 0.043vw, 1.27rem); }
.cs-theme-magazin .cs-heading.cs-h-s { font-size: 2.19rem; font-size: clamp(0.95rem, 0.550rem + 0.102vw, 2.19rem); }
.cs-theme-magazin .cs-heading.cs-h-m { font-size: 3.45rem; font-size: clamp(1.3rem, 0.607rem + 0.178vw, 3.45rem); }
.cs-theme-magazin .cs-heading.cs-h-l { font-size: 5.18rem; font-size: clamp(1.85rem, 0.777rem + 0.275vw, 5.18rem); }
.cs-theme-magazin .cs-heading.cs-h-xl { font-size: 7.48rem; font-size: clamp(2.6rem, 1.027rem + 0.403vw, 7.48rem); }
.cs-theme-magazin .cs-heading.cs-h-xxl { font-size: 9.78rem; font-size: clamp(3.5rem, 1.476rem + 0.519vw, 9.78rem); }



/* =========================================================
   v3.3.0 - SECTION BACKGROUND
   Wenn eine Sektion eine eigene background-color hat (cs-has-bg),
   bekommt sie etwas Padding damit der Inhalt nicht am Rand klebt.
   Bei Themes ohne grossen Wrapper-Padding fuegen wir hier explizit
   padding hinzu, damit der gefaerbte Hintergrund Atemraum hat.
   ========================================================= */

.cs-section.cs-has-bg { padding: 32px; }
.cs-theme-dense .cs-section.cs-has-bg { padding: 24px; }
.cs-theme-magazin .cs-section.cs-has-bg { padding: 60px; }

@media (max-width: 768px) {
    .cs-section.cs-has-bg { padding: 20px; }
    .cs-theme-magazin .cs-section.cs-has-bg { padding: 30px; }
}


/* =========================================================
   v3.4.2 - HERO + CROSS-SELLING Style-Preset (cs-style-hero_cs)
   Layout skaliert mit der Anzahl der CS-Produkte (1-3):
   - 0 CS: Hero 100%
   - 1 CS: Hero 66% / CS 34%
   - 2 CS: Hero 50% / CS 25% / CS 25%
   - 3 CS: Hero 40% / CS 20% / CS 20% / CS 20%
   CS-Bildhoehe bestimmt die Reihenhoehe (3:4 Aspect-Ratio, hochkant).
   Hero-Bild wird auf diese Hoehe per cover zentriert zugeschnitten.
   ========================================================= */

.cs-hero-cs {
    display: grid;
    gap: 0;
    align-items: stretch;
    width: 100%;
}
/* Keine festen Container-Aspect-Ratios mehr.
   Die Hoehe kommt von den CS-Items (ueber aspect-ratio 3:4 auf dem Bild),
   Hero wird via stretch auf diese Hoehe gebracht und mit cover zugeschnitten.
   So bleibt alles sauber buendig auch bei unterschiedlichen Verhaeltnissen. */
.cs-hero-cs[data-cs-count="0"] { grid-template-columns: 1fr; }
.cs-hero-cs[data-cs-count="1"] { grid-template-columns: 2fr 1fr; }
.cs-hero-cs[data-cs-count="2"] { grid-template-columns: 2fr 1fr 1fr; }
.cs-hero-cs[data-cs-count="3"] { grid-template-columns: 2fr 1fr 1fr 1fr; }

/* Hero-Seite (Cell 1) - Bild/Video bekommt aspect-ratio 3:2.
   Das matched exakt die Hoehe der CS-Produktbilder (die 3:4 sind auf halber Breite).
   Dadurch enden Hero-Bild und CS-Bilder auf gleicher Linie, und der
   Hero-Content-Block unten laeuft parallel zum CS-Info-Block. */
.cs-hero-side {
    min-width: 0;
    min-height: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.cs-hero-side .cs-cell {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.cs-hero-side .cs-cell-image {
    width: 100%;
    /* v5.1.4: padding-Hack statt aspect-ratio (iOS < 15) - 3:2 = 66.67% */
    height: 0;
    padding-bottom: 66.667%;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    margin-bottom: -1px;
}
.cs-hero-side .cs-cell-image img,
.cs-hero-side .cs-cell-image picture,
.cs-hero-side .cs-cell-image video {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0; /* v5.1.4: statt inset (iOS < 14.5) */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}
.cs-hero-side .cs-cell-image img { transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); }
.cs-hero-side .cs-cell-content { padding: 1.5rem 1.5rem; flex-shrink: 0; }

/* CS-Items rechts - Produktbild hat festes 3:4-Verhaeltnis.
   Das bestimmt die Hoehe der Reihe, Hero streckt sich daran. */
.cs-hero-cs-item {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: transparent;
    display: flex;
    flex-direction: column;
}
.cs-hero-cs-item .lb_image {
    aspect-ratio: 3 / 4;
    width: 100%;
    overflow: hidden;
    background: transparent;
    display: block;
    flex-shrink: 0;
}
.cs-hero-cs-item .lb_image a {
    display: block;
    width: 100%;
    height: 100%;
}
.cs-hero-cs-item .lb_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.cs-hero-cs-item:hover .cs-cs-image img { transform: scale(1.03); }
.cs-hero-cs-item .cs-cs-info {
    flex-shrink: 0;
    padding: 0.9rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Bei nur 1 CS-Item: horizontales Layout (Bild links / Info rechts) -
   mehr Platz da, wirkt elegant statt schmal gequetscht. Hier greift
   kein aspect-ratio auf dem Bild (ist auf 55% Breite limitiert), die
   Item-Hoehe wird nicht durch das Bild erzwungen sondern durch das
   Hero-Bild via min-height. */
.cs-hero-cs[data-cs-count="1"] .cs-hero-cs-item {
    flex-direction: row;
    min-height: 420px;
}
.cs-hero-cs[data-cs-count="1"] .cs-hero-cs-item .lb_image {
    aspect-ratio: auto;
    width: 55%;
    flex: 0 0 auto;
    height: 100%;
}
.cs-hero-cs[data-cs-count="1"] .cs-hero-cs-item .cs-cs-info {
    flex: 1;
    justify-content: center;
    padding: 1.5rem 1.5rem;
}

/* Theme-spezifische Abstaende zwischen Items */
.cs-theme-dense .cs-hero-cs { gap: 0; }
.cs-theme-lines .cs-hero-cs { gap: 0; }
/* Border im Lines-Theme: nutzt currentColor mit niedriger Alpha damit er sich
   an helle/dunkle Backgrounds anpasst (currentColor ist via cs-text-dark/light
   schwarz oder weiss, Alpha macht ihn dezent). */
/* v4.3.6: Trennlinie zwischen Hero-CS-Items entfernt (war zu dominant). */
.cs-theme-statement .cs-hero-cs { gap: 12px; }
.cs-theme-magazin .cs-hero-cs { gap: 30px; }

/* Mobile: Hero voll-breit oben, CS-Items als horizontal-scroll Carousel drunter.
   Wir nutzen einen Wrapper (cs-hero-cs-mobile-wrap) der auf Mobile zum Carousel wird.
   Desktop: der Wrapper ist display: contents und verhaelt sich als waere er nicht da. */
@media (max-width: 768px) {
    .cs-hero-cs,
    .cs-hero-cs[data-cs-count="1"],
    .cs-hero-cs[data-cs-count="2"],
    .cs-hero-cs[data-cs-count="3"] {
        display: block;
        grid-template-columns: none;
    }
    .cs-hero-side {
        width: 100%;
        margin-bottom: 16px;
    }
    /* Auf Mobile: CS-Items in einem horizontal-scroll Container.
       Wir benutzen alle .cs-hero-cs-item Geschwister und setzen
       display: flex auf ihren Parent nur auf Mobile via Negation mit :has
       (modern) oder via Template-Anpassung. Einfacher Ansatz hier:
       nutze eine feste Regel dass alle .cs-hero-cs-item als Carousel-Items rendern. */
    .cs-hero-cs-item {
        display: flex;
        flex-direction: column;
        flex: 0 0 82%;
        scroll-snap-align: start;
    }
    .cs-hero-cs-item .lb_image {
        aspect-ratio: 3 / 4;
        width: 100%;
        height: auto;
    }
    .cs-hero-cs-item .cs-cs-info {
        padding: 0.7rem 0.4rem;
    }
    /* Den Carousel-Scroll machen wir NACH dem Hero-Side via flex-wrap.
       Die Hero-Side hat width:100%, die Items haben 82% - dadurch
       passen sie nicht auf eine Zeile, wrap bringt sie unter den Hero.
       Dann horizontales Scroll via overflow-x. */
    .cs-hero-cs[data-cs-count="1"],
    .cs-hero-cs[data-cs-count="2"],
    .cs-hero-cs[data-cs-count="3"] {
        display: flex;
        flex-wrap: wrap;
    }
    /* Scroll-Container-Effekt: wir erzeugen einen "Rest"-Flex-Bereich
       unter dem Hero-Side, in dem die Items leben. Dazu nutzen wir
       display: flex mit flex-direction: column auf dem Haupt-Container,
       und ein ::after das den scroll-Wrapper ist. Einfacher: Template
       bekommt einen echten Wrapper. Siehe <div class="cs-hero-cs-mobile-scroll">. */
}

/* Mobile-Scroll-Container (wird vom Template eingesetzt nur auf Mobile sichtbar) */
.cs-hero-cs-mobile-scroll {
    display: contents; /* Desktop: transparent, nicht im Layout */
}
@media (max-width: 768px) {
    .cs-hero-cs-mobile-scroll {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 10px;
        padding: 0 16px 12px 16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: 100%;
    }
    .cs-hero-cs-mobile-scroll::-webkit-scrollbar {
        display: none;
    }
}


/* =========================================================
   v3.4.0 - TEXT SIZE OVERRIDES (cs-t-xs ... cs-t-xl)
   Theme-relativ, gleiche Logik wie Heading-Sizes.
   ========================================================= */

/* LINIEN: Default 1.05rem */
/* v5.1.5: Fluid-Text-Skala via clamp() - siehe Heading-Kommentar */

.cs-theme-lines .cs-text.cs-t-xs { font-size: 0.9rem; font-size: clamp(0.72rem, 0.662rem + 0.015vw, 0.9rem); }
.cs-theme-lines .cs-text.cs-t-s { font-size: 1.06rem; font-size: clamp(0.85rem, 0.782rem + 0.017vw, 1.06rem); }
.cs-theme-lines .cs-text.cs-t-m { font-size: 1.27rem; font-size: clamp(1.0rem, 0.913rem + 0.022vw, 1.27rem); }
.cs-theme-lines .cs-text.cs-t-l { font-size: 1.55rem; font-size: clamp(1.2rem, 1.087rem + 0.029vw, 1.55rem); }
.cs-theme-lines .cs-text.cs-t-xl { font-size: 1.9rem; font-size: clamp(1.45rem, 1.305rem + 0.037vw, 1.9rem); }
.cs-theme-lines .cs-text.cs-t-xxl { font-size: 2.3rem; font-size: clamp(1.75rem, 1.573rem + 0.045vw, 2.3rem); }

.cs-theme-dense .cs-text.cs-t-xs { font-size: 0.78rem; font-size: clamp(0.72rem, 0.701rem + 0.005vw, 0.78rem); }
.cs-theme-dense .cs-text.cs-t-s { font-size: 0.92rem; font-size: clamp(0.85rem, 0.827rem + 0.006vw, 0.92rem); }
.cs-theme-dense .cs-text.cs-t-m { font-size: 1.09rem; font-size: clamp(1.0rem, 0.971rem + 0.007vw, 1.09rem); }
.cs-theme-dense .cs-text.cs-t-l { font-size: 1.32rem; font-size: clamp(1.2rem, 1.161rem + 0.010vw, 1.32rem); }
.cs-theme-dense .cs-text.cs-t-xl { font-size: 1.61rem; font-size: clamp(1.45rem, 1.398rem + 0.013vw, 1.61rem); }
.cs-theme-dense .cs-text.cs-t-xxl { font-size: 1.96rem; font-size: clamp(1.75rem, 1.682rem + 0.017vw, 1.96rem); }

.cs-theme-statement .cs-text.cs-t-xs { font-size: 0.86rem; font-size: clamp(0.72rem, 0.675rem + 0.012vw, 0.86rem); }
.cs-theme-statement .cs-text.cs-t-s { font-size: 1.01rem; font-size: clamp(0.85rem, 0.798rem + 0.013vw, 1.01rem); }
.cs-theme-statement .cs-text.cs-t-m { font-size: 1.21rem; font-size: clamp(1.0rem, 0.932rem + 0.017vw, 1.21rem); }
.cs-theme-statement .cs-text.cs-t-l { font-size: 1.5rem; font-size: clamp(1.2rem, 1.103rem + 0.025vw, 1.5rem); }
.cs-theme-statement .cs-text.cs-t-xl { font-size: 1.84rem; font-size: clamp(1.45rem, 1.324rem + 0.032vw, 1.84rem); }
.cs-theme-statement .cs-text.cs-t-xxl { font-size: 2.24rem; font-size: clamp(1.75rem, 1.592rem + 0.040vw, 2.24rem); }

.cs-theme-magazin .cs-text.cs-t-xs { font-size: 0.98rem; font-size: clamp(0.72rem, 0.636rem + 0.021vw, 0.98rem); }
.cs-theme-magazin .cs-text.cs-t-s { font-size: 1.15rem; font-size: clamp(0.85rem, 0.753rem + 0.025vw, 1.15rem); }
.cs-theme-magazin .cs-text.cs-t-m { font-size: 1.38rem; font-size: clamp(1.0rem, 0.878rem + 0.031vw, 1.38rem); }
.cs-theme-magazin .cs-text.cs-t-l { font-size: 1.73rem; font-size: clamp(1.2rem, 1.029rem + 0.044vw, 1.73rem); }
.cs-theme-magazin .cs-text.cs-t-xl { font-size: 2.13rem; font-size: clamp(1.45rem, 1.231rem + 0.056vw, 2.13rem); }
.cs-theme-magazin .cs-text.cs-t-xxl { font-size: 2.65rem; font-size: clamp(1.75rem, 1.460rem + 0.074vw, 2.65rem); }

/* =========================================================
   v3.4.0 - BUTTON SIZE OVERRIDES (cs-bs-s ... cs-bs-l)
   3 Stufen reichen: klein / mittel (= Standard) / gross.
   Theme-relativ - jedes Theme hat eigene Default-Buttons.
   ========================================================= */

/* LINIEN */
.cs-theme-lines .cs-btn.cs-bs-s { font-size: 0.7rem; padding: 0.5rem 1.4rem; }
.cs-theme-lines .cs-btn.cs-bs-m { font-size: 0.8rem; padding: 0.65rem 1.8rem; }
.cs-theme-lines .cs-btn.cs-bs-l { font-size: 0.95rem; padding: 0.85rem 2.4rem; }

/* DICHT */
.cs-theme-dense .cs-btn.cs-bs-s { font-size: 0.65rem; padding: 0.42rem 1.1rem; }
.cs-theme-dense .cs-btn.cs-bs-m { font-size: 0.7rem; padding: 0.5rem 1.3rem; }
.cs-theme-dense .cs-btn.cs-bs-l { font-size: 0.82rem; padding: 0.65rem 1.7rem; }

/* STATEMENT (Text-Link-Buttons - Padding bleibt 0, nur Font-Size variiert) */
.cs-theme-statement .cs-btn.cs-bs-s { font-size: 0.78rem; }
.cs-theme-statement .cs-btn.cs-bs-m { font-size: 0.9rem; }
.cs-theme-statement .cs-btn.cs-bs-l { font-size: 1.05rem; }

/* MAGAZIN */
.cs-theme-magazin .cs-btn.cs-bs-s { font-size: 0.82rem; padding: 0.55rem 1.5rem; }
.cs-theme-magazin .cs-btn.cs-bs-m { font-size: 0.95rem; padding: 0.7rem 1.8rem; }
.cs-theme-magazin .cs-btn.cs-bs-l { font-size: 1.1rem; padding: 0.85rem 2.2rem; }


/* =========================================================
   v3.5.0 - VIDEO-SUPPORT
   Videos werden im gleichen Container wie Bilder gerendert.
   Verhalten analog zu <img>: width/height 100%, object-fit.
   Auf Devices die keine passende <source> laden, zeigt das
   <video>-Element sein Poster (bzw. das Fallback-<img> drin).
   ========================================================= */

.cs-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #fff;
}
.cs-video-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bei Devices ohne passende Source laedt das Video nichts, aber
   das Poster bleibt stehen - erzeugt das gewuenschte statische Bild. */


/* =========================================================
   v4.3.5 - EYEBROW (kleines Label ueber der Ueberschrift)
   Default-Styling + Theme-spezifische Varianten.
   ========================================================= */

.cs-eyebrow {
    font-size: 0.72rem;
    font-weight: 500;
    
    letter-spacing: 0.15em;
    color: #6b6b67;
    margin-bottom: 0.6rem;
    line-height: 1.3;
    display: block;
}

/* LINIEN: dezent, grau, schmal */
.cs-theme-lines .cs-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: #8a8983;
}

/* DICHT: noch kleiner, monospace-artig */
.cs-theme-dense .cs-eyebrow {
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    color: #6b6b67;
    margin-bottom: 0.4rem;
    font-weight: 600;
}

/* STATEMENT (ME+EM-Style): etwas auffaelliger, Akzentfarbe */
.cs-theme-statement .cs-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: #d85a30;
    font-weight: 600;
    margin-bottom: 0.8rem;
}

/* MAGAZIN: Sans-Serif als Kontrast zur Serif-Ueberschrift */
.cs-theme-magazin .cs-eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    color: #1a1a18;
    font-weight: 500;
    margin-bottom: 0.9rem;
}

/* Overlay: Eyebrow-Text auf dunklem Hintergrund - hell */
.cs-overlay-content .cs-eyebrow {
    color: rgba(255, 255, 255, 0.85);
}
.cs-theme-statement .cs-overlay-content .cs-eyebrow {
    color: #fff;
}


/* =========================================================
   v4.3.5 - AUTO-TEXTFARBE (cs-text-dark / cs-text-light)
   Setzt Texte/Eyebrow/CS-Namen auf hell oder dunkel
   abhaengig vom Section-Background. PHP berechnet die Klasse
   via Luminanz oder liest sie aus dem manuellen Dropdown.
   Cell-spezifische Farb-Overrides (cell_heading_color etc.)
   ueberschreiben diese Defaults per inline-style - das ist
   gewollt und korrekt.
   ========================================================= */

/* Light: weisse Schrift auf dunklem Background */
.cs-text-light .cs-heading { color: #fff; }
.cs-text-light .cs-text { color: rgba(255, 255, 255, 0.9); }
.cs-text-light .cs-eyebrow { color: rgba(255, 255, 255, 0.85); }
.cs-text-light .cs-cs-name { color: #fff; }
.cs-text-light .cs-cs-name:hover { color: #fff; }
.cs-text-light .cs-cs-price { color: rgba(255, 255, 255, 0.75); }

/* Dark: ist Default, aber wir setzen es explizit damit cs-text-dark
   auch ohne Overrides greift (z.B. wenn eine Sektion nach einer
   light-Sektion folgt und wir explizit auf dunkel wechseln). */
.cs-text-dark .cs-heading { color: #1a1a18; }
.cs-text-dark .cs-text { color: var(--cs-text-muted, #6b6b67); }
.cs-text-dark .cs-cs-name { color: #1a1a18; }
.cs-text-dark .cs-cs-price { color: var(--cs-text-muted, #6b6b67); }

/* v5.1.3: Auto-Textfarbe deckt jetzt auch Section-Header, FAQ und Icon-Row ab.
   Vorher griffen diese Elemente (color:inherit bzw. --cs-text-muted) nicht aufs
   Scheme -> FAQ-Schrift blieb auf dunklem Background schwarz. Container-Basis-
   farbe deckt zusaetzlich alle inherit-basierten Kinder ab. Buttons bleiben
   unberuehrt (eigene Farbe). */
.cs-section.cs-text-light { color: #fff; }
.cs-text-light .cs-section-heading { color: #fff; }
.cs-text-light .cs-section-eyebrow { color: rgba(255, 255, 255, 0.85); }
.cs-text-light .cs-faq-q { color: #fff; }
.cs-text-light .cs-faq-a { color: rgba(255, 255, 255, 0.85); }
.cs-text-light .cs-faq-icon { color: rgba(255, 255, 255, 0.7); }
.cs-text-light .cs-faq-row.is-open .cs-faq-icon { color: #fff; }
.cs-text-light .cs-faq-row { border-color: rgba(255, 255, 255, 0.22); }
.cs-text-light .cs-icon-title { color: #fff; }
.cs-text-light .cs-icon-text { color: rgba(255, 255, 255, 0.8); }
.cs-text-light .cs-icon-svg { color: #fff; }

.cs-section.cs-text-dark { color: #1a1a18; }
.cs-text-dark .cs-section-heading { color: #1a1a18; }
.cs-text-dark .cs-section-eyebrow { color: var(--cs-text-muted, #6b6b67); }
.cs-text-dark .cs-faq-q { color: #1a1a18; }
.cs-text-dark .cs-icon-title { color: #1a1a18; }

/* Buttons bleiben bewusst unberuehrt - die haben ihre eigene
   Schwarz/Weiss/Outline-Logik und sollen sich nicht auto-invertieren. */


/* =========================================================
   v4.3.5 - RESPONSIVE TYPOGRAFIE
   Schriften werden auf grossen Bildschirmen spuerbar groesser.
   Breakpoints:
   - XL >= 1920px: +18% Headings, +10% Text
   - L  1440-1919px: +10% Headings, +5% Text
   - < 1440px: Default (bestehend)

   Da die Cell-Size-Overrides (.cs-h-xs bis cs-h-xl) mit Theme-
   Praefix eine Specificity von (0,3,0) haben, muessen die Media-
   Query-Regeln die gleiche Specificity nutzen um zu greifen.
   Mobile-Regeln haben !important, da gewinnen wir nicht gegen
   sie an - muessen wir auch nicht (Mobile bleibt kompakt).
   ========================================================= */

/* === L (Laptop/Desktop-Standard, 1280-1599px) +10% === */
@media (min-width: 1280px) and (max-width: 1599px) {
    /* Default-Basis ohne Override */
    h1.cs-heading { font-size: 2.42rem; }
    h2.cs-heading { font-size: 1.76rem; }
    h3.cs-heading { font-size: 1.43rem; }

    /* === Heading-Size-Overrides pro Theme === */
    /* Lines (default) */

    /* Dense */
    .cs-theme-dense h1.cs-heading { font-size: 1.43rem; }
    .cs-theme-dense h2.cs-heading { font-size: 1.21rem; }
    .cs-theme-dense h3.cs-heading { font-size: 1.1rem; }

    /* Statement */
    .cs-theme-statement h1.cs-heading { font-size: 1.54rem; }
    .cs-theme-statement h2.cs-heading { font-size: 1.32rem; }
    .cs-theme-statement h3.cs-heading { font-size: 1.15rem; }

    /* Magazin */
    .cs-theme-magazin h1.cs-heading { font-size: 4.4rem; }
    .cs-theme-magazin h2.cs-heading { font-size: 3.5rem; }

    /* === Text-Size-Overrides (+5%) === */
    .cs-theme-lines .cs-text { font-size: 1.1rem; }

    .cs-theme-dense .cs-text { font-size: 0.9rem; }
    .cs-theme-statement .cs-text { font-size: 1rem; }
    .cs-theme-magazin .cs-text { font-size: 1.15rem; }

    /* Eyebrow + CS-Items */
    .cs-eyebrow { font-size: 0.77rem; }
    .cs-cs-name { font-size: 0.95rem; }
    .cs-cs-price { font-size: 0.95rem; }
}

/* === XL (grosse Monitore, >=1600px) +18% === */
@media (min-width: 1600px) {
    /* Default-Basis */
    h1.cs-heading { font-size: 2.6rem; }
    h2.cs-heading { font-size: 1.89rem; }
    h3.cs-heading { font-size: 1.53rem; }

    /* === Heading-Overrides === */
    /* Lines */

    /* Dense */
    .cs-theme-dense h1.cs-heading { font-size: 1.53rem; }
    .cs-theme-dense h2.cs-heading { font-size: 1.3rem; }
    .cs-theme-dense h3.cs-heading { font-size: 1.18rem; }

    /* Statement */
    .cs-theme-statement h1.cs-heading { font-size: 1.65rem; }
    .cs-theme-statement h2.cs-heading { font-size: 1.42rem; }
    .cs-theme-statement h3.cs-heading { font-size: 1.24rem; }

    /* Magazin */
    .cs-theme-magazin h1.cs-heading { font-size: 4.7rem; }
    .cs-theme-magazin h2.cs-heading { font-size: 3.8rem; }

    /* === Text-Overrides (+10%) === */
    .cs-theme-lines .cs-text { font-size: 1.155rem; }

    .cs-theme-dense .cs-text { font-size: 0.94rem; }
    .cs-theme-statement .cs-text { font-size: 1.05rem; }
    .cs-theme-magazin .cs-text { font-size: 1.21rem; }

    /* Eyebrow + CS-Items */
    .cs-eyebrow { font-size: 0.82rem; letter-spacing: 0.18em; }
    .cs-cs-name { font-size: 1rem; }
    .cs-cs-price { font-size: 1rem; }

    /* Carousel-Arrows etwas groesser */
    .cs-carousel-arrow { width: 52px; height: 52px; }

    /* Cell-Content-Padding */
    .cs-cell-content { padding: 1.6rem 1.9rem; }
    .cs-hero-side .cs-cell-content { padding: 2rem 2rem; }
}

/* M-Breakpoint Magazin-Korrektur (1024-1279 bleibt sonst bei Default) */
@media (min-width: 1024px) and (max-width: 1279px) {
    .cs-theme-magazin h1.cs-heading { font-size: 3.4rem; }
    .cs-theme-magazin h2.cs-heading { font-size: 2.7rem; }
}


/* =========================================================
   v4.3.5 - SLIDER-PRESET
   Slider mit bis zu 4 Slides, Autoplay via JS.
   Slides stacken alle ubereinander absolut, aktiver Slide ist
   opacity: 1, andere opacity: 0 -> fade-Uebergang.
   Aspect-Ratios pro Device: 21:9 / 16:9 / 4:5
   ========================================================= */

.cs-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
    touch-action: pan-y; /* v5.1.5: horizontal swipt der Slider, vertikal scrollt die Seite */
    -webkit-tap-highlight-color: transparent;
}
/* v5.1.4: Hoehe via padding-bottom-Hack statt aspect-ratio.
   aspect-ratio wird von iOS Safari erst ab 15 unterstuetzt - auf aelteren
   iPhones/iPads kollabierte der Track auf 0px Hoehe -> Slider-Bilder
   unsichtbar. padding-bottom in % bezieht sich auf die Breite und
   funktioniert in jedem Browser. 16:9 = 56.25%, 4:5 = 125%. */
.cs-slider-track {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 */
}
@media (max-width: 768px) {
    .cs-slider-track { padding-bottom: 125%; } /* 4:5 - v5.1.5: Kante auf 768 (iPad Portrait = mobil) */
}
/* v5.1.5: grosse Screens -> 21:9, gedeckelt auf 85vh (min() ab iOS 13.4,
   aeltere Browser behalten die 42.857%-Zeile). Verhindert 1000px-Hero auf 27". */
@media (min-width: 1441px) {
    .cs-slider-track { padding-bottom: 42.857%; padding-bottom: min(42.857%, 85vh); }
}

/* Slide: alle uebereinander absolut, nur aktiver sichtbar */
.cs-slide {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0; /* v5.1.4: statt inset (iOS < 14.5) */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.cs-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.cs-slide-media {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0; /* v5.1.4: statt inset (iOS < 14.5) */
    overflow: hidden;
}
.cs-slide-media picture,
.cs-slide-media img,
.cs-slide-media video {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0; /* v5.1.4: statt inset (iOS < 14.5) */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Overlay + Content - 9 Positionen */
.cs-slide-overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0; /* v5.1.4: statt inset (iOS < 14.5) */
    display: flex;
    padding: 3rem 4rem;
    pointer-events: none;
}
.cs-slide-content {
    max-width: 500px;
    pointer-events: auto;
    position: relative;
    padding: 1.5rem;
    color: #fff;
}
/* Gradient-Abdunklung hinter dem Content fuer Lesbarkeit */
.cs-slide-content::before {
    content: "";
    position: absolute;
    top: -1rem; right: -1rem; bottom: -1rem; left: -1rem; /* v5.1.4: statt inset (iOS < 14.5) */
    background: linear-gradient(135deg, rgba(0,0,0,0.55), rgba(0,0,0,0.25));
    z-index: -1;
    border-radius: 2px;
}
.cs-slide-content .cs-heading { color: #fff; margin-bottom: 0.8rem; }
.cs-slide-content .cs-text { color: rgba(255,255,255,0.92); margin-bottom: 1.2rem; }
.cs-slide-content .cs-eyebrow { color: rgba(255,255,255,0.85); margin-bottom: 0.5rem; }
.cs-slide-content .cs-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

/* Button-Farb-Overrides im Slider (wegen dunklem Hintergrund) */
.cs-slide-content .cs-btn-black { background: #fff !important; color: #000 !important; border-color: #fff !important; }
.cs-slide-content .cs-btn-white { background: transparent !important; color: #fff !important; border-color: #fff !important; }
.cs-slide-content .cs-btn-outline { color: #fff !important; border-color: rgba(255,255,255,0.7) !important; background: transparent !important; }

/* 9 Text-Positionen via Flex-Ausrichtung des Overlays */
.cs-slide-pos-top-left    .cs-slide-overlay { justify-content: flex-start; align-items: flex-start; }
.cs-slide-pos-top-center  .cs-slide-overlay { justify-content: center; align-items: flex-start; }
.cs-slide-pos-top-right   .cs-slide-overlay { justify-content: flex-end; align-items: flex-start; }
.cs-slide-pos-middle-left .cs-slide-overlay { justify-content: flex-start; align-items: center; }
.cs-slide-pos-middle-center .cs-slide-overlay { justify-content: center; align-items: center; }
.cs-slide-pos-middle-right .cs-slide-overlay { justify-content: flex-end; align-items: center; }
.cs-slide-pos-bottom-left .cs-slide-overlay { justify-content: flex-start; align-items: flex-end; }
.cs-slide-pos-bottom-center .cs-slide-overlay { justify-content: center; align-items: flex-end; }
.cs-slide-pos-bottom-right .cs-slide-overlay { justify-content: flex-end; align-items: flex-end; }

.cs-slide-pos-top-center .cs-slide-content,
.cs-slide-pos-middle-center .cs-slide-content,
.cs-slide-pos-bottom-center .cs-slide-content { text-align: center; }
.cs-slide-pos-top-right .cs-slide-content,
.cs-slide-pos-middle-right .cs-slide-content,
.cs-slide-pos-bottom-right .cs-slide-content { text-align: right; }
.cs-slide-pos-top-right .cs-slide-content .cs-buttons,
.cs-slide-pos-middle-right .cs-slide-content .cs-buttons,
.cs-slide-pos-bottom-right .cs-slide-content .cs-buttons { justify-content: flex-end; }
.cs-slide-pos-top-center .cs-slide-content .cs-buttons,
.cs-slide-pos-middle-center .cs-slide-content .cs-buttons,
.cs-slide-pos-bottom-center .cs-slide-content .cs-buttons { justify-content: center; }

/* v4.3.5 Fix: Heading/Eyebrow/Text im Slider erben jetzt die text-align
   vom Slide-Content. Vorher wurde global text-align:left auf .cs-heading
   gesetzt (Zeile 172) was die Position-Klasse durchgekreuzt hat. */
.cs-slide-content .cs-heading,
.cs-slide-content .cs-text,
.cs-slide-content .cs-eyebrow { text-align: inherit; }

/* Mobile: Padding kompakter */
@media (max-width: 768px) {
    .cs-slide-overlay { padding: 1.5rem 1.3rem; }
    .cs-slide-content { padding: 1rem; max-width: 100%; }
}

/* Navigation-Pfeile */
.cs-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 48px;
    height: 48px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.3s;
    padding: 0;
}
.cs-slider-arrow svg { width: 70%; height: 70%; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.cs-slider-arrow:hover { opacity: 1; }
.cs-slider-prev { left: 16px; }
.cs-slider-next { right: 16px; }
.cs-slider-prev:hover { transform: translateY(-50%) translateX(-3px); }
.cs-slider-next:hover { transform: translateY(-50%) translateX(3px); }
@media (max-width: 768px) {
    .cs-slider-arrow { width: 44px; height: 44px; } /* v5.1.5: Apple-HIG-Minimum */
    .cs-slider-prev { left: 8px; }
    .cs-slider-next { right: 8px; }
}

/* Pager - dezente Linien */
.cs-slider-pager {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 10px;
    padding: 0;
}
/* v5.1.5: Dot = 22px hoher unsichtbarer Hit-Bereich (Touch-Target),
   sichtbare Linie via ::before - gleiches Prinzip wie die Carousel-Scrollbar. */
.cs-slider-pager-dot {
    position: relative;
    width: 36px;
    height: 22px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: block;
    -webkit-tap-highlight-color: transparent;
}
.cs-slider-pager-dot::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    margin-top: -1px;
    height: 2px;
    background: rgba(255,255,255,0.4);
    transition: background 0.3s, height 0.3s, margin-top 0.3s;
}
.cs-slider-pager-dot:hover::before { background: rgba(255,255,255,0.7); }
.cs-slider-pager-dot.is-active::before { background: #fff; height: 3px; margin-top: -1.5px; }
@media (max-width: 768px) {
    .cs-slider-pager { bottom: 6px; gap: 6px; }
    .cs-slider-pager-dot { width: 24px; } /* Hit-Hoehe bleibt 22px */
}

/* Bei dark-Scheme: Arrows und Pager in schwarz statt weiss.
   Schwierig weil der Slide-Content fast immer dunkel ueberlagert ist -
   daher bleiben Arrows und Pager standardmaessig weiss. */


/* v4.3.5: Preis-Klassen (new_price, old_price, etc.) werden vom globalen
   Shop-CSS gestylt - keine Defaults im Modul mehr noetig. */


/* =========================================================
   v4.3.5 - SECTION-LIBRARY (FAQ, Icon-Row, Category-Grid)
   Editorial-Stil, ruhig, viel Whitespace, sachliche Typografie.
   ========================================================= */

/* === Section-Header (Eyebrow + Heading) auf Section-Ebene === */
.cs-section-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 0 1rem;
}
.cs-section-eyebrow {
    font-size: 11px;
    
    letter-spacing: 0.15em;
    color: var(--cs-text-muted, #6b6b67);
    margin-bottom: 14px;
}
.cs-section-heading {
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 300;
    letter-spacing: -0.005em;
    line-height: 1.15;
    margin: 0;
    color: inherit;
}

/* === FAQ-ACCORDION === */
.cs-faq-list {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
}
.cs-faq-row {
    border-top: 1px solid var(--cs-border, #d4d3cc);
    padding: 22px 0;
    cursor: pointer;
}
.cs-faq-row:last-child {
    border-bottom: 1px solid var(--cs-border, #d4d3cc);
}
.cs-faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
.cs-faq-q {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
}
.cs-faq-icon {
    font-size: 22px;
    font-weight: 200;
    color: var(--cs-text-muted, #6b6b67);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    line-height: 1;
}
.cs-faq-row.is-open .cs-faq-icon {
    transform: rotate(45deg);
    color: inherit;
}
.cs-faq-a {
    margin-top: 14px;
    color: var(--cs-text-muted, #6b6b67);
    font-size: 14px;
    line-height: 1.7;
    max-width: 640px;
    display: none;
}
.cs-faq-row.is-open .cs-faq-a {
    display: block;
}

/* === ICON-FEATURE-ROW === */
.cs-icon-row {
    display: grid;
    gap: 24px;
    padding: 20px 0;
}
.cs-icon-row.cs-grid-1 { grid-template-columns: 1fr; }
.cs-icon-row.cs-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cs-icon-row.cs-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cs-icon-row.cs-grid-4 { grid-template-columns: repeat(4, 1fr); }
.cs-icon-row.cs-grid-5 { grid-template-columns: repeat(5, 1fr); }
.cs-icon-row.cs-grid-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 768px) { /* v5.1.5: Kante vereinheitlicht (war 720) */
    .cs-icon-row.cs-grid-3,
    .cs-icon-row.cs-grid-4,
    .cs-icon-row.cs-grid-5,
    .cs-icon-row.cs-grid-6 { grid-template-columns: repeat(2, 1fr); }
}
.cs-icon-item {
    text-align: center;
    padding: 16px;
}
.cs-icon-svg {
    width: 44px;
    height: 44px;
    margin: 0 auto 14px;
    color: inherit;
}
.cs-icon-svg svg {
    width: 100%;
    height: 100%;
    display: block;
}
.cs-icon-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
.cs-icon-text {
    font-size: 13px;
    color: var(--cs-text-muted, #6b6b67);
    line-height: 1.5;
}

/* === KATEGORIE-GRID === */
.cs-category-grid {
    display: grid;
    gap: 1px;
    background: var(--cs-border, #d4d3cc);
}
.cs-category-grid.cs-grid-1 { grid-template-columns: 1fr; }
.cs-category-grid.cs-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cs-category-grid.cs-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cs-category-grid.cs-grid-4 { grid-template-columns: repeat(4, 1fr); }
.cs-category-grid.cs-grid-5 { grid-template-columns: repeat(5, 1fr); }
.cs-category-grid.cs-grid-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 768px) { /* v5.1.5: Kante vereinheitlicht (war 720) */
    .cs-category-grid.cs-grid-3,
    .cs-category-grid.cs-grid-4,
    .cs-category-grid.cs-grid-5,
    .cs-category-grid.cs-grid-6 { grid-template-columns: repeat(2, 1fr); }
}
.cs-category-tile {
    background: #fff;
    /* v5.1.4: padding-Hack statt aspect-ratio (iOS < 15) - 3:4 = 133.33% */
    height: 0;
    padding-bottom: 133.333%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}
.cs-category-image {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0; /* v5.1.4: statt inset (iOS < 14.5) */
    overflow: hidden;
}
.cs-category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.cs-category-tile:hover .cs-category-image img {
    transform: scale(1.04);
}
.cs-category-label {
    position: absolute;
    bottom: 22px;
    left: 22px;
    right: 22px;
    color: #fff;
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 0.005em;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    z-index: 1;
}


/* =========================================================
   v4.3.5 - COUNTDOWN-Banner
   Vollbreiter dunkler Banner mit grossen Zahlen.
   Section-Eyebrow + Section-Heading kommen aus dem normalen
   cs-section-header (oben in der Section). Nur die Uhr und
   der CTA werden hier gerendert.
   Dark-Theme by default damit Sale-Banner sichtbar ist.
   ========================================================= */
.cs-section.cs-type-countdown {
    background: var(--cs-ink, #1a1a18);
    color: #fff;
    padding: clamp(40px, 6vw, 80px) clamp(20px, 6vw, 60px);
    text-align: center;
}
.cs-section.cs-type-countdown .cs-section-header {
    margin-bottom: 32px;
}
.cs-section.cs-type-countdown .cs-section-eyebrow {
    color: var(--cs-accent, #d85a30);
    letter-spacing: 0.2em;
}
.cs-section.cs-type-countdown .cs-section-heading {
    color: #fff;
    font-weight: 200;
}

.cs-countdown {
    text-align: center;
}
.cs-countdown-clock {
    display: flex;
    gap: clamp(16px, 4vw, 40px);
    justify-content: center;
    margin-bottom: 32px;
    font-variant-numeric: tabular-nums;
    flex-wrap: wrap;
}
.cs-countdown-cell {
    text-align: center;
    min-width: 60px;
}
.cs-countdown-num {
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 200;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
}
.cs-countdown-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.6);
    margin-top: 10px;
}
.cs-countdown-cta {
    display: inline-block;
    padding: 14px 36px;
    background: #fff;
    color: var(--cs-ink, #1a1a18);
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}
.cs-countdown-cta:hover {
    background: var(--cs-accent, #d85a30);
    color: #fff;
}

/* Mobile: kompaktere Abstaende */
@media (max-width: 640px) {
    .cs-countdown-clock { gap: 14px; }
    .cs-countdown-cell { min-width: 0; flex: 1; }
    .cs-countdown-num { font-size: 32px; }
    .cs-countdown-label { font-size: 9px; }
    .cs-countdown-cta { padding: 12px 28px; font-size: 11px; }
}


/* =========================================================
   v5.1.4 - OVERLAY MOBILE-SPACING (wie Slider)
   Steht bewusst am Dateiende, damit es die frueheren
   Theme-Overrides (dense/statement/magazin) sicher schlaegt.
   ========================================================= */
@media (max-width: 768px) {
    .cs-overlay-content,
    .cs-theme-dense .cs-overlay-content,
    .cs-theme-statement .cs-overlay-content,
    .cs-theme-magazin .cs-overlay-content { padding: 1.5rem 1.3rem; }
}


/* =========================================================
   v5.1.5 - TABLET-SPACING (769-1180px, iPad Portrait/Landscape)
   Slider-/Overlay-Padding eine Stufe kleiner als Desktop.
   Steht am Dateiende, um Theme-Overrides zu schlagen.
   ========================================================= */
@media (min-width: 769px) and (max-width: 1180px) {
    .cs-slide-overlay,
    .cs-overlay-content,
    .cs-theme-dense .cs-overlay-content,
    .cs-theme-statement .cs-overlay-content,
    .cs-theme-magazin .cs-overlay-content { padding: 2rem 2.5rem; }
}

/* =========================================================
   v5.1.5 - TOUCH: Sticky-Hover neutralisieren
   Auf Geraeten ohne echten Hover (iPhone/iPad) triggert der erste
   Tap den :hover-Zustand und er bleibt haengen (Scale, Hover-Bild).
   Hier alle Hover-Effekte fuer Touch abschalten und Pfeile dauerhaft
   sichtbar machen.
   ========================================================= */
@media (hover: none) {
    .cs-cs-item:hover .lb_image .lb_image_main,
    .cs-cell:hover .cs-cell-image img,
    a.cs-cell-linked:hover .cs-cell-image img,
    a.cs-cell-linked:hover .cs-overlay-media img,
    a.cs-cell-linked:hover .cs-split-image img,
    .cs-hero-cs-item:hover .cs-cs-image img,
    .cs-category-tile:hover .cs-category-image img { transform: none !important; }

    .cs-cs-item:hover .lb_image .lb_image_alternate { opacity: 0 !important; }

    .cs-slider-arrow,
    .cs-carousel-arrow { opacity: 0.9; }
    .cs-carousel-prev.cs-visible { opacity: 0.9; }
    .cs-btn:hover { text-decoration: none; }
}

/* =========================================================
   v5.1.5 - PREFERS-REDUCED-MOTION
   Slide-Fade + Bild-Transitions aus; Autoplay wird zusaetzlich
   im JS unterbunden. Accessibility/BFSG.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .cs-slide,
    .cs-cs-item .lb_image img,
    .cs-cell-image img,
    .cs-overlay-media img,
    .cs-split-image img,
    .cs-category-image img,
    .cs-slider-pager-dot::before { transition: none !important; }
    .cs-carousel-track { scroll-behavior: auto; }
}


/* =========================================================
   v5.2.1 - HTML-SEKTION (Typ "html")
   Roh-HTML 1:1; nur defensive Grundregeln, damit fremde
   Snippets das Layout nicht sprengen. Keine weiteren Styles -
   das Snippet bringt seine eigenen mit.
   ========================================================= */
.cs-section-html { width: 100%; min-width: 0; overflow-wrap: break-word; }
.cs-section-html img, .cs-section-html video, .cs-section-html iframe { max-width: 100%; }
.cs-section-html img, .cs-section-html video { height: auto; }

/* ===== v5.8.10: "Nur Text"-Preset zentriert (Statement-Look) ===== */
.cs-textonly { max-width: 760px; margin: 0 auto; } /* v5.26.2: Auto-Zentrierung entfernt - Nur-Text verhaelt sich wie jeder andere Zelltyp, Ausrichtung NUR ueber die Segmente */
.cs-textonly .cs-buttons { justify-content: center; }

/* ===== v5.8.11: Cross-Selling im Editorial-Look (randlos, dicht, ruhig) =====
   Gescopet auf .cs-cross-selling - globale Produktlisten bleiben unberuehrt. */
.cs-cross-selling .cs-cs-item { background: #fff; padding: 0; border: none; box-shadow: none; }
.cs-cross-selling .lb_image { margin: 0; position: relative; }
.cs-cross-selling .lb_image a { display: block; }
.cs-cross-selling .lb_image img {
    width: 100%; height: auto; display: block;
    /* v5.10.1: KEIN aspect-ratio/cover mehr - Produktbilder behalten
       ihr Original-Format; einheitliche Katalog-Ratios ergeben von
       selbst buendige Reihen. */
}
/* Reihen unten buendig, falls einzelne Bilder minimal abweichen */
.cs-cross-selling .cs-cs-item { display: flex; flex-direction: column; }
.cs-cross-selling .lb_content { margin-top: auto !important; }
.cs-cross-selling .lb_content { padding: 10px 2px 20px; text-align: left; }
.cs-cross-selling .lb_title {
    font-size: 13px; line-height: 1.4; color: #111;
    text-decoration: none; display: block; letter-spacing: .01em;
}
.cs-cross-selling .lb_title:hover { text-decoration: underline; text-underline-offset: 3px; }
.cs-cross-selling .lb_price { margin-top: 2px; }
.cs-cross-selling .lb_price .standard_price,
.cs-cross-selling .lb_price .new_price,
.cs-cross-selling .lb_price .old_price { font-size: 13px; font-weight: 400; color: #6d6b66; }
.cs-cross-selling .lb_price .old_price { text-decoration: line-through; margin-left: 6px; opacity: .7; }
.cs-cross-selling .lb_new {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    font-size: 9px; letter-spacing: .12em; background: #fff; color: #111;
    padding: 3px 8px; font-weight: 600;
}
.cs-cross-selling .lb_save { font-size: 9px; letter-spacing: .08em; }

/* ===== v5.9.0: Text-Position fuer Overlay-Preset (9 Positionen) =====
   Default bottom-left = bisheriges Verhalten, Bestand unveraendert. */
.cs-cell-overlay[class*="cs-ovpos-top"] .cs-overlay-content { bottom: auto; top: 0; background: linear-gradient(rgba(0,0,0,0.55), transparent); }
.cs-cell-overlay[class*="cs-ovpos-middle"] .cs-overlay-content { bottom: auto; top: 50%; transform: translateY(-50%); background: none; text-shadow: 0 1px 14px rgba(0,0,0,0.35); }
.cs-ovpos-top-center .cs-overlay-content, .cs-ovpos-middle-center .cs-overlay-content, .cs-ovpos-bottom-center .cs-overlay-content { text-align: center; }
.cs-ovpos-top-right .cs-overlay-content, .cs-ovpos-middle-right .cs-overlay-content, .cs-ovpos-bottom-right .cs-overlay-content { text-align: right; }
.cs-ovpos-top-center .cs-buttons, .cs-ovpos-middle-center .cs-buttons, .cs-ovpos-bottom-center .cs-buttons { justify-content: center; }
.cs-ovpos-top-right .cs-buttons, .cs-ovpos-middle-right .cs-buttons, .cs-ovpos-bottom-right .cs-buttons { justify-content: flex-end; }

/* ===== v5.9.0: Text-Position fuer Split (Bild links/rechts) =====
   Vertikal = Lage des Textblocks in der Spalte, horizontal = Ausrichtung. */
.cs-split .cs-split-content { display: flex; flex-direction: column; }
.cs-split[class*="cs-sppos-top"] .cs-split-content { justify-content: flex-start; }
.cs-split[class*="cs-sppos-middle"] .cs-split-content { justify-content: center; }
.cs-split[class*="cs-sppos-bottom"] .cs-split-content { justify-content: flex-end; }
.cs-sppos-top-center .cs-split-content, .cs-sppos-middle-center .cs-split-content, .cs-sppos-bottom-center .cs-split-content { text-align: center; }
.cs-sppos-top-right .cs-split-content, .cs-sppos-middle-right .cs-split-content, .cs-sppos-bottom-right .cs-split-content { text-align: right; }
.cs-sppos-top-center .cs-buttons, .cs-sppos-middle-center .cs-buttons, .cs-sppos-bottom-center .cs-buttons { justify-content: center; }
.cs-sppos-top-right .cs-buttons, .cs-sppos-middle-right .cs-buttons, .cs-sppos-bottom-right .cs-buttons { justify-content: flex-end; }

/* ===== v5.9.0: Cross-Selling-Haertung gegen Listing-Styles ===== */
.cs-cross-selling .cs-cs-item { padding: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; }
.cs-cross-selling .lb_image { margin: 0 !important; padding: 0 !important; }
.cs-cross-selling .lb_image img { border-radius: 0 !important; }
.cs-cross-selling .lb_content { padding: 10px 2px 20px !important; margin: 0 !important; }

/* ===== v5.9.1: Split-Zentrierung auch fuer Ueberschrift/Eyebrow erzwingen
   (Basisregeln der Headings gewannen sonst per Spezifitaet) ===== */
.cs-sppos-top-center .cs-split-content .cs-heading, .cs-sppos-middle-center .cs-split-content .cs-heading, .cs-sppos-bottom-center .cs-split-content .cs-heading,
.cs-sppos-top-center .cs-split-content .cs-eyebrow, .cs-sppos-middle-center .cs-split-content .cs-eyebrow, .cs-sppos-bottom-center .cs-split-content .cs-eyebrow { text-align: center; }
.cs-sppos-top-right .cs-split-content .cs-heading, .cs-sppos-middle-right .cs-split-content .cs-heading, .cs-sppos-bottom-right .cs-split-content .cs-heading,
.cs-sppos-top-right .cs-split-content .cs-eyebrow, .cs-sppos-middle-right .cs-split-content .cs-eyebrow, .cs-sppos-bottom-right .cs-split-content .cs-eyebrow { text-align: right; }

/* ===== v5.9.1: "Nur Text" horizontal ausrichtbar (Position-Icons) =====
   Default (bottom-left = ungesetzter Altwert) bleibt ZENTRIERT wie v5.8.10. */
.cs-textonly.cs-tpos-left { text-align: left; margin-left: 0; }
.cs-textonly.cs-tpos-left .cs-buttons { justify-content: flex-start; }
.cs-textonly.cs-tpos-left .cs-heading, .cs-textonly.cs-tpos-left .cs-eyebrow { text-align: left; }
.cs-textonly.cs-tpos-right { text-align: right; margin-right: 0; }
.cs-textonly.cs-tpos-right .cs-buttons { justify-content: flex-end; }
.cs-textonly.cs-tpos-right .cs-heading, .cs-textonly.cs-tpos-right .cs-eyebrow { text-align: right; }

/* ===== v5.9.3: Nur-Text - Ueberschrift/Eyebrow folgen der Zentrierung
   (Heading-Basisregeln gewannen sonst, wie beim Split) ===== */
/* (die tpos-left/right-Heading-Regeln aus v5.9.1 ueberschreiben dies gezielt) */

/* ===== v5.9.3: Cross-Selling Freisteller-Zoom =====
   Produktfreisteller tragen Weissraum IM BILD - der wirkte wie Abstand.
   Zoom-Crop schneidet den Bildrand ab, Kacheln schliessen optisch. */
.cs-cross-selling .lb_image { overflow: hidden; }
/* v5.10.1: Original-Format ist Gesetz - kein Grund-Beschnitt mehr.
   Nur dezenter Hover-Zoom (schneidet minimal, nur waehrend Hover). */
.cs-cross-selling .lb_image img { transform: none; }
.cs-cross-selling .cs-cs-item:hover .lb_image img { transform: scale(1.04); transition: transform .4s; }

/* ===== v5.10.3: "Bild unten" (text_top) - horizontale Ausrichtung ===== */
.cs-ttpos-center { text-align: center; }
.cs-ttpos-center .cs-heading, .cs-ttpos-center .cs-eyebrow { text-align: center; }
.cs-ttpos-center .cs-buttons { justify-content: center; }
.cs-ttpos-right { text-align: right; }
.cs-ttpos-right .cs-heading, .cs-ttpos-right .cs-eyebrow { text-align: right; }
.cs-ttpos-right .cs-buttons { justify-content: flex-end; }

/* ===== v5.10.6: Standard-Seitentitel weicht dem Pagebuilder (CSS,
   deterministisch) - DOM-Beweis GANG: das h1 der Content-Seite ist
   direktes Geschwister des cs-wrapper im selben Container
   (.layout_content_inner.cm_content > h1 + ... + .cs-wrapper).
   Regel: jedes h1, dessen Container direkt einen cs-wrapper enthaelt,
   ist die Titelzeile -> ausblenden. Kein JS-Timing, greift sofort
   ueber den CSS-Cache-Buster. Der JS-Sniper (v5.10.4/5) bleibt als
   Fallback fuer abweichende Strukturen bestehen. */
div:has(> .cs-wrapper) > h1 { display: none !important; }

/* ===== v5.12.0: Zeilenabstand (3 Stufen, explizite Nutzerwahl) ===== */
.cs-heading.cs-hlh-t { line-height: 1.05 !important; }
.cs-heading.cs-hlh-l { line-height: 1.3 !important; }
.cs-text.cs-tlh-t { line-height: 1.35 !important; }
.cs-text.cs-tlh-l { line-height: 1.9 !important; }

/* ===== v5.13.0: Eyebrow-Groesse (3 Stufen) ===== */
.cs-eyebrow.cs-eb-s { font-size: .82em; }
.cs-eyebrow.cs-eb-l { font-size: 1.22em; }

/* ===== v5.14.0: Sektions-Kopf-Formatierung ===== */
.cs-section-eyebrow.cs-seb-s { font-size: .82em; }
.cs-section-eyebrow.cs-seb-l { font-size: 1.22em; }
.cs-section-heading.cs-sh-sm { font-size: .8em; }
.cs-section-heading.cs-sh-lg { font-size: 1.25em; }
.cs-section-heading.cs-sh-xl { font-size: 1.55em; }
.cs-section-heading.cs-hlh-t { line-height: 1.05 !important; }
.cs-section-heading.cs-hlh-l { line-height: 1.3 !important; }

/* ===== v5.15.7: Abstand ueber der ersten Sektion (Header-Kollision) ===== */
.cs-wrapper { padding-top: 28px; }
.cs-wrapper .cs-section:first-child .cs-section-eyebrow { margin-top: 4px; }
/* ===== v5.15.7: Schreibweise Eyebrow - Standard normal, optional Uppercase ===== */
.cs-eyebrow.cs-eb-up, .cs-section-eyebrow.cs-seb-up { text-transform: uppercase; letter-spacing: .08em; }

/* ===== v5.15.8: Grossbuchstaben-Toggle fuer Ueberschrift + Text ===== */
.cs-heading.cs-h-up, .cs-section-heading.cs-h-up { text-transform: uppercase; letter-spacing: .04em; }
.cs-text.cs-t-up { text-transform: uppercase; letter-spacing: .05em; }

/* ===== v5.15.10: Zwischenueberschriften im Fliesstext (H-Button) ===== */
.cs-text h2, .cs-text h3 { font-size: 1.15em; font-weight: 600; letter-spacing: .01em; margin: 1.1em 0 .35em; line-height: 1.25; }
.cs-text h2:first-child, .cs-text h3:first-child { margin-top: 0; }

/* v5.15.12: Eyebrow-Zeilenabstand */
.cs-eyebrow.cs-elh-t, .cs-section-eyebrow.cs-elh-t { line-height: 1.15; }
.cs-eyebrow.cs-elh-l, .cs-section-eyebrow.cs-elh-l { line-height: 1.7; }

/* v5.18.3: Clean Play/Pause fuer manuelle Videos (statt Browser-Leiste) */
.cs-cell-image{position:relative}
.cs-vplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;border:0;padding:0;background:rgba(22,21,15,.55);cursor:pointer;transition:opacity .25s ease,background .2s ease;z-index:2}
.cs-vplay::before{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff}
.cs-vplay:hover{background:rgba(22,21,15,.78)}
.cs-playing .cs-vplay{opacity:0;pointer-events:none}
video.cs-vmanual{cursor:pointer}

/* =========================================================
   v5.20.0: MOBIL-SPALTEN pro Sektion (cs-mob-1 / cs-mob-2)
   Standard = 2 (leerer Wert). Wirkt auf Bild-/Icon-Grids und
   das Cross-Selling-Karussell unter 768px.
   ========================================================= */
@media (max-width: 768px) {
    .cs-section.cs-mob-2 .cs-grid-2, .cs-section.cs-mob-2 .cs-grid-3, .cs-section.cs-mob-2 .cs-grid-4, .cs-section.cs-mob-2 .cs-grid-5, .cs-section.cs-mob-2 .cs-grid-6 { grid-template-columns: repeat(2, 1fr); }
    .cs-section.cs-mob-1 .cs-grid-2, .cs-section.cs-mob-1 .cs-grid-3, .cs-section.cs-mob-1 .cs-grid-4, .cs-section.cs-mob-1 .cs-grid-5, .cs-section.cs-mob-1 .cs-grid-6 { grid-template-columns: 1fr; }
    .cs-section.cs-mob-2 .cs-carousel-track .cs-cs-item { flex: 0 0 calc((100% - 4px) / 2.15); }
    .cs-section.cs-mob-1 .cs-carousel-track .cs-cs-item { flex: 0 0 calc(100% / 1.15); }
}

/* =========================================================
   v5.21.0: MOBIL-BILD "Original" (kein Zuschnitt) pro Sektion
   und "Bild zuerst"-Reihenfolge fuer Grid-Sektionen
   ========================================================= */
@media (max-width: 768px) {
    .cs-section.cs-mobimg-orig .cs-split-image,
    .cs-section.cs-mobimg-orig .cs-overlay-media,
    .cs-section.cs-mobimg-orig .cs-grid [class*="-image"],
    .cs-section.cs-mobimg-orig .cs-grid [class*="-media"] { height: auto !important; aspect-ratio: auto !important; }
    .cs-section.cs-mobimg-orig .cs-grid img,
    .cs-section.cs-mobimg-orig .cs-split-image img,
    .cs-section.cs-mobimg-orig .cs-overlay-media img,
    .cs-section.cs-mobimg-orig .cs-grid video,
    .cs-section.cs-mobimg-orig .cs-overlay-media video { width: 100%; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; max-height: none !important; }
    /* Bild-Zellen vor Text-Zellen (Split-Styles erzwingen das bereits per order-Regel) */
    .cs-section.cs-mobfirst-img .cs-grid > *:has(img, video) { order: -1; }
}

/* =========================================================
   v5.22.0: TEXT-AUSRICHTUNG (links = Standard, keine Klasse)
   Sektions-Ebene: cs-al-* direkt am Element.
   Zellen-Ebene: cs-ale/alh/alt-* am Zell-Wrapper.
   ========================================================= */
.cs-al-left { text-align: left !important; } /* v5.25.9 */
.cs-al-center { text-align: center !important; }
.cs-al-right { text-align: right !important; }
.cs-al-justify { text-align: justify !important; }
/* v5.27.0: ZELL-Grundausrichtung (Kaskade). Ein Wert in der
   Container-Leiste richtet Eyebrow/Ueberschrift/Text/Listen der
   ganzen Zelle aus. Die Element-Regeln darunter stehen SPAETER
   im Stylesheet und gewinnen daher bei Gleichstand - Element
   ueberschreibt Zelle, Zelle ueberschreibt Theme. */
.cs-cell.cs-cellal-left .cs-eyebrow, .cs-cell.cs-cellal-left .cs-heading, .cs-cell.cs-cellal-left .cs-text { text-align: left !important; }
.cs-cell.cs-cellal-center .cs-eyebrow, .cs-cell.cs-cellal-center .cs-heading, .cs-cell.cs-cellal-center .cs-text { text-align: center !important; }
.cs-cell.cs-cellal-right .cs-eyebrow, .cs-cell.cs-cellal-right .cs-heading, .cs-cell.cs-cellal-right .cs-text { text-align: right !important; }
.cs-cell.cs-cellal-justify .cs-eyebrow, .cs-cell.cs-cellal-justify .cs-heading, .cs-cell.cs-cellal-justify .cs-text { text-align: justify !important; hyphens: auto; }
.cs-cell.cs-cellal-center ul { display: table; margin-left: auto !important; margin-right: auto !important; }
.cs-cell.cs-cellal-right ul { display: table; margin-left: auto !important; margin-right: 0 !important; }
/* v5.26.1: Explizite Nutzerwahl schlaegt ALLE Theme-/Preset-Regeln
   (z.B. ".cs-textonly .cs-heading { center }") - daher !important
   auf allen zwoelf Ausrichtungs-Regeln. */
.cs-cell.cs-ale-left .cs-eyebrow { text-align: left !important; }
.cs-cell.cs-ale-center .cs-eyebrow { text-align: center !important; }
.cs-cell.cs-ale-right .cs-eyebrow { text-align: right !important; }
.cs-cell.cs-ale-justify .cs-eyebrow { text-align: justify !important; }
.cs-cell.cs-alh-left .cs-heading { text-align: left !important; }
.cs-cell.cs-alh-center .cs-heading { text-align: center !important; }
.cs-cell.cs-alh-right .cs-heading { text-align: right !important; }
.cs-cell.cs-alh-justify .cs-heading { text-align: justify !important; }
.cs-cell.cs-alt-left .cs-text { text-align: left !important; }
.cs-cell.cs-alt-center .cs-text { text-align: center !important; }
.cs-cell.cs-alt-right .cs-text { text-align: right !important; }
.cs-cell.cs-alt-justify .cs-text { text-align: justify !important; hyphens: auto; }
/* v5.22.0: Eyebrow-Rhythmus */
.cs-eyebrow { margin-bottom: 0.85rem; }

/* v5.24.0: Zellen mit eigener Hintergrundfarbe bekommen im Grid
   automatisch Innenabstand (Split-Zellen haben ihn bereits). */
.cs-grid > .cs-cell-hasbg, .cs-grid > a.cs-cell-hasbg { padding: 1.4rem; }

/* v5.25.4: Listen im Fliesstext - DURCHSETZUNGSFAEHIG gegen
   Theme-Regeln hoeherer Spezifitaet (#content ul li u.ae.), die
   list-style/Einzuege zurueckbrachten (Trennlinien kamen durch,
   Bullets blieben - klassisches Spezifitaets-Duell). Punkte-Liste
   dezent, Linien-Liste = HAEKCHEN + Hairlines + linksbuendig
   (Referenz: Versand-Konzept-Karten). */
.cs-wrapper .cs-text ul, .cs-wrapper .cs-cell ul {
    list-style: none !important; margin: 0 0 1.2rem 0 !important; padding: 0 !important;
}
.cs-wrapper .cs-text ul li, .cs-wrapper .cs-cell ul li {
    list-style: none !important; background: none !important;
    position: relative; margin: 0 !important;
    padding: 0.45rem 0 0.45rem 1.6rem !important;
    text-align: left;
}
.cs-wrapper .cs-text ul li::marker, .cs-wrapper .cs-cell ul li::marker { content: "" !important; }
.cs-wrapper .cs-text ul li::before, .cs-wrapper .cs-cell ul li::before {
    content: "\2022"; position: absolute; left: 2px; top: 0.42rem;
    width: auto; height: auto; background: none; border-radius: 0;
    font-size: 1em; line-height: inherit; color: currentColor;
}
.cs-wrapper .cs-text ul.cs-ul-lines li, .cs-wrapper .cs-cell ul.cs-ul-lines li {
    border-top: 1px solid #e5e5e5;
    padding-top: 0.65rem !important; padding-bottom: 0.65rem !important;
}
.cs-wrapper .cs-text ul.cs-ul-lines li:first-child, .cs-wrapper .cs-cell ul.cs-ul-lines li:first-child { border-top: 0; }
.cs-wrapper .cs-text ul.cs-ul-lines li::before, .cs-wrapper .cs-cell ul.cs-ul-lines li::before {
    content: "\2713"; opacity: 0.55; font-size: 0.95em; top: 0.62rem;
}
/* Verschachtelungs-Reste aus Altbestand entschaerfen */
.cs-wrapper .cs-text ul ul, .cs-wrapper .cs-cell ul ul { margin: 0 !important; }
.cs-text h3 { font-size: 1.125rem; margin: 1.2rem 0 0.6rem; }

/* v5.24.2: Schriftgroessen INNERHALB des Fliesstextes (Editor-Buttons
   XL/L/S) - em-relativ, skaliert mit dem Umfeld. XL traegt das
   Preis-/Zahlen-Muster (gross + fett), S das Kleingedruckte. */
.cs-text .cs-fs-xl { font-size: 2.4em; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.cs-text .cs-fs-l { font-size: 1.45em; line-height: 1.3; }
.cs-text .cs-fs-s { font-size: 0.85em; opacity: 0.75; }

/* v5.25.5: Listen folgen der Zell-Ausrichtung ALS BLOCK - die
   Liste rueckt mittig/rechts, die Eintraege bleiben darin
   linksbuendig mit Haekchen (hochwertiger als zentrierte li). */
.cs-cell.cs-alt-center .cs-text ul, .cs-cell.cs-alt-center ul {
    display: table; margin-left: auto !important; margin-right: auto !important;
}
.cs-cell.cs-alt-right .cs-text ul, .cs-cell.cs-alt-right ul {
    display: table; margin-left: auto !important; margin-right: 0 !important;
}

/* v5.25.6: FARB-VERERBUNG im Fliesstext. (a) Editor-H2/H3 blieben
   schwarz, weil Theme-Regeln h2/h3 DIREKT einfaerben - direkte
   Regeln schlagen jede geerbte Farbe (weisser Text auf dunkler
   Karte -> schwarze H2). (b) Die Zell-GRUNDFARBE (Container-
   Leiste) drang nicht bis .cs-text durch (eigene #000-Regel).
   Beide Ketten jetzt geschlossen. */
.cs-wrapper .cs-text h1, .cs-wrapper .cs-text h2, .cs-wrapper .cs-text h3,
.cs-wrapper .cs-text h4, .cs-wrapper .cs-text strong, .cs-wrapper .cs-text a { color: inherit; }
.cs-cell.cs-cell-hascolor .cs-text,
.cs-cell.cs-cell-hascolor .cs-eyebrow,
.cs-cell.cs-cell-hascolor .cs-heading { color: inherit; }

/* v5.26.0: Tabellen im Fliesstext (Editor-Knopf "Tabelle",
   Spalten per |, erste Zeile = Kopf). Look der Versanduebersicht:
   Kopf klein/uppercase/muted mit kraeftiger Linie, Zeilen mit
   Hairline-Trennern, linksbuendig. Theme-fest per .cs-wrapper-
   Scope + !important-Resets (Lektion aus den Listen). Mobil
   scrollt die Tabelle horizontal statt zu brechen. */
.cs-wrapper .cs-text table.cs-table, .cs-wrapper .cs-cell table.cs-table {
    width: 100% !important; border-collapse: collapse !important;
    margin: 0 0 1.4rem 0 !important; border: 0 !important;
    background: none !important; text-align: left;
}
.cs-wrapper .cs-text .cs-table th, .cs-wrapper .cs-cell .cs-table th {
    font-size: 0.72rem !important; font-weight: 600 !important;
    letter-spacing: 0.14em !important; text-transform: uppercase !important;
    color: #8f8d84 !important; text-align: left !important;
    padding: 0 1rem 0.7rem 0 !important; border: 0 !important;
    border-bottom: 1px solid #16150f !important; background: none !important;
}
.cs-wrapper .cs-text .cs-table td, .cs-wrapper .cs-cell .cs-table td {
    padding: 1rem 1rem 1rem 0 !important; border: 0 !important;
    border-bottom: 1px solid #e5e5e5 !important; background: none !important;
    text-align: left !important; vertical-align: top;
}
.cs-cell.cs-cell-hascolor .cs-table th, .cs-cell.cs-cell-hascolor .cs-table td { color: inherit !important; }
@media (max-width: 767px) {
    .cs-wrapper .cs-text table.cs-table, .cs-wrapper .cs-cell table.cs-table {
        display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    }
    .cs-wrapper .cs-text .cs-table th, .cs-wrapper .cs-cell .cs-table th,
    .cs-wrapper .cs-text .cs-table td, .cs-wrapper .cs-cell .cs-table td {
        white-space: nowrap;
    }
}

/* v5.28.0: TIMELINE-Preset - nummerierte Schritte an einer
   vertikalen Linie, Zellen abwechselnd links/rechts (Referenz:
   GANG-Produktionsstrecke). Nutzt die normalen Zellen (Bild +
   Eyebrow/Ueberschrift/Text + Container-Leiste). Mobil:
   einspaltig, Linie links. */
.cs-grid.cs-timeline { display: block !important; position: relative; max-width: 1080px; margin-left: auto; margin-right: auto; counter-reset: cstl; padding: 1rem 0; }
.cs-grid.cs-timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #16150f; transform: translateX(-1px); }
/* v5.34.6: VERZAHNTER Zickzack wie die urspruengliche GANG-
   Firmengeschichte - Float-Technik: linke Eintraege stapeln nur
   unter linken (clear:left), rechte nur unter rechten
   (clear:right). Die Spalten fliessen dadurch UNABHAENGIG und
   verzahnen sich dicht, egal wie unterschiedlich hoch die Zellen
   sind (Hochformat-Bilder neben kurzen Text-Zellen) - keine
   Kollisionen, keine Loecher. Der pauschale -25%-Versatz ist raus. */
.cs-grid.cs-timeline .cs-cell { width: calc(50% - 56px); position: relative; counter-increment: cstl; margin: 0 0 1.5rem 0; }
.cs-grid.cs-timeline .cs-cell:nth-child(odd) { float: left; clear: left; }
.cs-grid.cs-timeline .cs-cell:nth-child(even) { float: right; clear: right; }
.cs-grid.cs-timeline .cs-cell:nth-child(2) { margin-top: 3.5rem; } /* v5.34.7: Start-Versatz der rechten Spalte - erzeugt den Stufenrhythmus der alten GANG-Seite und pflanzt sich durch die clear-Kette fort */
.cs-grid.cs-timeline::after { content: ""; display: block; clear: both; }
/* v5.34.8: Zellen OHNE Bild (reine Text-Eintraege) brauchen mehr
   Abstand, sonst kleben die Jahres-Bloecke aneinander. */
.cs-grid.cs-timeline .cs-cell:not(:has(.cs-cell-image)) { margin-bottom: 3rem; }
/* v5.34.9: Hochformat-Bilder deckeln OHNE Beschnitt - proportional
   verkleinern (max-height), Hochformate werden dadurch schmaler
   als die Karte und richten sich zur Mittellinie aus. Kein
   object-fit:cover mehr (schnitt Koepfe/Saeume ab). */
.cs-grid.cs-timeline .cs-cell-image img { display: block; max-height: 420px; width: auto; max-width: 100%; }
.cs-grid.cs-timeline .cs-cell:nth-child(odd) .cs-cell-image img { margin-left: auto; }
/* v5.34.7: Marker und Querstrich ankern am ZELL-KOPF (fixe Hoehe)
   statt bei 34% der Zellhoehe - der variable Anker liess Jahres-
   Pillen clustern, die Chronologie kippen (2021 ueber 2020) und
   den Bezug Marker<->Eintrag unlesbar werden. */
.cs-grid.cs-timeline .cs-cell::before { content: ""; position: absolute; top: 18px; width: 40px; height: 2px; background: #16150f; }
.cs-grid.cs-timeline .cs-cell:nth-child(odd)::before { right: -40px; }
/* v5.34.8: Deckungs-Schutz - bei gleich hohen Bild/Text-Paaren
   (Produktionsstrecke) konvergieren die Spaltenkoepfe und beide
   Marker landen auf identischer Linienhoehe (Nummern scheinbar
   "verschwunden"). Die rechte Spalte traegt Querstrich und Marker
   deshalb fest 40px tiefer: selbst bei exakter Paar-Deckung stehen
   die Nummern sauber untereinander, immer fortlaufend lesbar. */
.cs-grid.cs-timeline .cs-cell:nth-child(even)::before { left: -40px; top: 58px; }
.cs-grid.cs-timeline .cs-cell::after { content: counter(cstl); position: absolute; top: 4px; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid #16150f; line-height: 26px; text-align: center; font-size: 13px; font-weight: 600; z-index: 1; }
.cs-grid.cs-timeline .cs-cell:nth-child(odd)::after { right: -71px; }
.cs-grid.cs-timeline .cs-cell:nth-child(even)::after { left: -71px; top: 44px; }
.cs-grid.cs-timeline .cs-cell:last-child { margin-bottom: 0.5rem; }
@media (max-width: 900px) {
    .cs-grid.cs-timeline::before { left: 15px; transform: none; }
    .cs-grid.cs-timeline .cs-cell,
    .cs-grid.cs-timeline .cs-cell:nth-child(odd),
    .cs-grid.cs-timeline .cs-cell:nth-child(even),
    .cs-grid.cs-timeline .cs-cell:nth-child(2) { width: auto; margin: 0 0 2.6rem 64px; float: none; clear: none; }
    .cs-grid.cs-timeline .cs-cell::before,
    .cs-grid.cs-timeline .cs-cell:nth-child(odd)::before,
    .cs-grid.cs-timeline .cs-cell:nth-child(even)::before { left: -48px; right: auto; width: 32px; top: 18px !important; }
    .cs-grid.cs-timeline .cs-cell::after,
    .cs-grid.cs-timeline .cs-cell:nth-child(odd)::after,
    .cs-grid.cs-timeline .cs-cell:nth-child(even)::after { left: -64px; right: auto;  top: 4px; }
}

/* v5.28.2: Timeline-VERKETTUNG - zwei Timeline-Sektionen direkt
   hintereinander verschmelzen zu EINEM Strang (Linie zieht durch,
   kein Abstand). Fuer mehr als 6 Schritte: zweite Timeline-Sektion
   anlegen und "Start-Nr." z.B. auf 7 setzen. */
.cs-style-timeline + .cs-style-timeline { padding-top: 0 !important; margin-top: 0 !important; }
.cs-style-timeline + .cs-style-timeline .cs-grid.cs-timeline { padding-top: 0; }
.cs-style-timeline + .cs-style-timeline .cs-grid.cs-timeline::before { top: -3.5rem; }

/* v5.31.0: Eyebrow als KNOTEN-Beschriftung - z.B. Jahreszahl
   "1998" oder "01" statt der automatischen Nummer. Die Pille
   zentriert sich exakt auf der Mittellinie (transform), damit
   auch breite Beschriftungen sauber sitzen. Ohne Eyebrow
   weiterhin der nummerierte Kreis. */
.cs-grid.cs-timeline .cs-cell[data-tl-marker]::after { content: attr(data-tl-marker); width: auto; min-width: 30px; padding: 0 10px; border-radius: 15px; white-space: nowrap; letter-spacing: .04em; }
.cs-grid.cs-timeline .cs-cell[data-tl-marker]:nth-child(odd)::after { right: -56px; transform: translateX(50%); }
.cs-grid.cs-timeline .cs-cell[data-tl-marker]:nth-child(even)::after { left: -56px; transform: translateX(-50%); }
@media (max-width: 900px) {
    .cs-grid.cs-timeline .cs-cell[data-tl-marker]::after,
    .cs-grid.cs-timeline .cs-cell[data-tl-marker]:nth-child(odd)::after,
    .cs-grid.cs-timeline .cs-cell[data-tl-marker]:nth-child(even)::after { left: -48px; right: auto; transform: translateX(-50%); }
}

/* v5.32.0: FINALE Timeline-Architektur - normale ZELLEN, unbegrenzt
   ("+ Zelle"). Der Zell-EYEBROW wandert als Beschriftung an den
   Punkt auf der Linie (.cs-tl-node, z.B. Jahreszahl); die
   automatische Nummer weicht ihm per :has(). Im Zellinhalt wird
   der Eyebrow dafuer ausgeblendet - die Daten bleiben normal
   in der Zelle gepflegt. */
.cs-grid.cs-timeline .cs-cell { overflow: visible; }
.cs-grid.cs-timeline .cs-cell .cs-eyebrow { display: none; }
.cs-grid.cs-timeline .cs-cell:has(.cs-tl-node)::after { display: none; }
.cs-grid.cs-timeline .cs-cell .cs-tl-node { position: absolute; top: 4px; height: 30px; line-height: 26px; min-width: 30px; padding: 0 10px; background: #fff; border: 2px solid #16150f; border-radius: 15px; font-size: 13px; font-weight: 600; text-align: center; white-space: nowrap; letter-spacing: .04em; z-index: 1; box-sizing: border-box; }
.cs-grid.cs-timeline .cs-cell:nth-child(odd) .cs-tl-node { right: -56px; transform: translateX(50%); }
.cs-grid.cs-timeline .cs-cell:nth-child(even) .cs-tl-node { left: -56px; transform: translateX(-50%); top: 44px; }
@media (max-width: 900px) {
    .cs-grid.cs-timeline .cs-cell .cs-tl-node,
    .cs-grid.cs-timeline .cs-cell:nth-child(odd) .cs-tl-node,
    .cs-grid.cs-timeline .cs-cell:nth-child(even) .cs-tl-node { left: -48px; right: auto; transform: translateX(-50%);  top: 4px; }
}