/* =========================================================
   Stylepot Pagebuilder v5.1.2 - 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%;
    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;
}
.cs-overlay-content {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 2rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    color: #fff;
}
.cs-overlay-content .cs-heading { color: #fff; }
.cs-overlay-content .cs-text { color: rgba(255,255,255,0.9); }

/* 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 {
    margin: 0 0 0.6rem 0; padding: 0;
    font-weight: 600; line-height: 1.2;
    font-family: inherit; color: inherit;
    font-style: normal; text-indent: 0; text-align: left;
}
h1.cs-heading { font-size: 2.2rem; }
h2.cs-heading { font-size: 1.6rem; }
h3.cs-heading { font-size: 1.3rem; }

@media (max-width: 768px) {
    h1.cs-heading { font-size: 1.6rem; }
    h2.cs-heading { font-size: 1.3rem; }
    h3.cs-heading { font-size: 1.1rem; }
}

.cs-text {
    font-size: 1.05rem; line-height: 1.7;
    color: var(--cs-text-muted);
    margin-bottom: 0.75rem; 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: 24px; }
.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.8rem; padding: 0.65rem 1.8rem;
}
.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: 1rem; }
.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: 1.5rem 1.5rem;
    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: 16px; }
.cs-theme-statement .cs-carousel-track { gap: 16px; }

@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; }
.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: deutlicher Abstand zur Sektion +
   mehr Gap zwischen Items als in anderen Themes */
.cs-theme-magazin .cs-section .cs-cross-selling { margin-top: 40px; }
.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: 16px; }
.cs-theme-magazin .cs-carousel-track { gap: 16px; }

@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; }

@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: 1023px) {
    .cs-carousel-track .cs-cs-item { flex: 0 0 calc((100% - 8px) / 3.3); }
}
@media (max-width: 767px) {
    .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: 36px; height: 36px; }
}


/* =========================================================
   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; }
.cs-cs-item .lb_image img {
    width: 100%; height: auto; display: block;
    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%; height: 100%;
    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.
   ========================================================= */

/* LINIEN: Default H1=2.2 / H2=1.6 / H3=1.3 */
.cs-theme-lines .cs-heading.cs-h-xs { font-size: 0.95rem; }
.cs-theme-lines .cs-heading.cs-h-s  { font-size: 1.2rem; }
.cs-theme-lines .cs-heading.cs-h-m  { font-size: 1.6rem; }
.cs-theme-lines .cs-heading.cs-h-l  { font-size: 2.4rem; }
.cs-theme-lines .cs-heading.cs-h-xl { font-size: 3.2rem; }

/* DICHT: Default H1=1.3 / H2=1.1 / H3=1 - kleinere Skala */
.cs-theme-dense .cs-heading.cs-h-xs { font-size: 0.8rem; }
.cs-theme-dense .cs-heading.cs-h-s  { font-size: 1rem; }
.cs-theme-dense .cs-heading.cs-h-m  { font-size: 1.2rem; }
.cs-theme-dense .cs-heading.cs-h-l  { font-size: 1.6rem; }
.cs-theme-dense .cs-heading.cs-h-xl { font-size: 2.2rem; }

/* STATEMENT (ME+EM): Default H1=1.4 / H2=1.2 / H3=1.05 - feine Stufen */
.cs-theme-statement .cs-heading.cs-h-xs { font-size: 0.85rem; }
.cs-theme-statement .cs-heading.cs-h-s  { font-size: 1.1rem; }
.cs-theme-statement .cs-heading.cs-h-m  { font-size: 1.4rem; }
.cs-theme-statement .cs-heading.cs-h-l  { font-size: 1.8rem; }
.cs-theme-statement .cs-heading.cs-h-xl { font-size: 2.4rem; }

/* MAGAZIN: grosse Skala, Magazin-typisch */
.cs-theme-magazin .cs-heading.cs-h-xs { font-size: 1.2rem; }
.cs-theme-magazin .cs-heading.cs-h-s  { font-size: 2rem; }
.cs-theme-magazin .cs-heading.cs-h-m  { font-size: 3.2rem; }
.cs-theme-magazin .cs-heading.cs-h-l  { font-size: 4.5rem; }
.cs-theme-magazin .cs-heading.cs-h-xl { font-size: 6rem; }

/* Mobile: Heading-Sizes generell um 30% reduzieren */
@media (max-width: 768px) {
    .cs-heading.cs-h-xs { font-size: 0.8rem !important; }
    .cs-heading.cs-h-s  { font-size: 1rem !important; }
    .cs-heading.cs-h-m  { font-size: 1.4rem !important; }
    .cs-heading.cs-h-l  { font-size: 1.9rem !important; }
    .cs-heading.cs-h-xl { font-size: 2.6rem !important; }
}


/* =========================================================
   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%;
    aspect-ratio: 3 / 2;
    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;
    inset: 0;
    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 */
.cs-theme-lines .cs-text.cs-t-xs { font-size: 0.8rem; }
.cs-theme-lines .cs-text.cs-t-s  { font-size: 0.92rem; }
.cs-theme-lines .cs-text.cs-t-m  { font-size: 1.05rem; }
.cs-theme-lines .cs-text.cs-t-l  { font-size: 1.2rem; }
.cs-theme-lines .cs-text.cs-t-xl { font-size: 1.4rem; }

/* DICHT: Default 0.85rem */
.cs-theme-dense .cs-text.cs-t-xs { font-size: 0.7rem; }
.cs-theme-dense .cs-text.cs-t-s  { font-size: 0.78rem; }
.cs-theme-dense .cs-text.cs-t-m  { font-size: 0.9rem; }
.cs-theme-dense .cs-text.cs-t-l  { font-size: 1.05rem; }
.cs-theme-dense .cs-text.cs-t-xl { font-size: 1.2rem; }

/* STATEMENT (ME+EM): Default 0.95rem */
.cs-theme-statement .cs-text.cs-t-xs { font-size: 0.78rem; }
.cs-theme-statement .cs-text.cs-t-s  { font-size: 0.88rem; }
.cs-theme-statement .cs-text.cs-t-m  { font-size: 1rem; }
.cs-theme-statement .cs-text.cs-t-l  { font-size: 1.15rem; }
.cs-theme-statement .cs-text.cs-t-xl { font-size: 1.35rem; }

/* MAGAZIN: Default 1.1rem */
.cs-theme-magazin .cs-text.cs-t-xs { font-size: 0.85rem; }
.cs-theme-magazin .cs-text.cs-t-s  { font-size: 1rem; }
.cs-theme-magazin .cs-text.cs-t-m  { font-size: 1.15rem; }
.cs-theme-magazin .cs-text.cs-t-l  { font-size: 1.4rem; }
.cs-theme-magazin .cs-text.cs-t-xl { font-size: 1.7rem; }

@media (max-width: 768px) {
    .cs-text.cs-t-xs { font-size: 0.75rem !important; }
    .cs-text.cs-t-s  { font-size: 0.85rem !important; }
    .cs-text.cs-t-m  { font-size: 0.95rem !important; }
    .cs-text.cs-t-l  { font-size: 1.1rem !important; }
    .cs-text.cs-t-xl { font-size: 1.25rem !important; }
}


/* =========================================================
   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;
    text-transform: uppercase;
    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); }

/* 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) */
    .cs-theme-lines .cs-heading.cs-h-xs { font-size: 1.05rem; }
    .cs-theme-lines .cs-heading.cs-h-s  { font-size: 1.32rem; }
    .cs-theme-lines .cs-heading.cs-h-m  { font-size: 1.76rem; }
    .cs-theme-lines .cs-heading.cs-h-l  { font-size: 2.64rem; }
    .cs-theme-lines .cs-heading.cs-h-xl { font-size: 3.52rem; }

    /* 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; }
    .cs-theme-dense .cs-heading.cs-h-xs { font-size: 0.88rem; }
    .cs-theme-dense .cs-heading.cs-h-s  { font-size: 1.1rem; }
    .cs-theme-dense .cs-heading.cs-h-m  { font-size: 1.32rem; }
    .cs-theme-dense .cs-heading.cs-h-l  { font-size: 1.76rem; }
    .cs-theme-dense .cs-heading.cs-h-xl { font-size: 2.42rem; }

    /* 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; }
    .cs-theme-statement .cs-heading.cs-h-xs { font-size: 0.94rem; }
    .cs-theme-statement .cs-heading.cs-h-s  { font-size: 1.21rem; }
    .cs-theme-statement .cs-heading.cs-h-m  { font-size: 1.54rem; }
    .cs-theme-statement .cs-heading.cs-h-l  { font-size: 1.98rem; }
    .cs-theme-statement .cs-heading.cs-h-xl { font-size: 2.64rem; }

    /* Magazin */
    .cs-theme-magazin h1.cs-heading { font-size: 4.4rem; }
    .cs-theme-magazin h2.cs-heading { font-size: 3.5rem; }
    .cs-theme-magazin .cs-heading.cs-h-xs { font-size: 1.32rem; }
    .cs-theme-magazin .cs-heading.cs-h-s  { font-size: 2.2rem; }
    .cs-theme-magazin .cs-heading.cs-h-m  { font-size: 3.52rem; }
    .cs-theme-magazin .cs-heading.cs-h-l  { font-size: 4.95rem; }
    .cs-theme-magazin .cs-heading.cs-h-xl { font-size: 6.6rem; }

    /* === Text-Size-Overrides (+5%) === */
    .cs-theme-lines .cs-text { font-size: 1.1rem; }
    .cs-theme-lines .cs-text.cs-t-xs { font-size: 0.84rem; }
    .cs-theme-lines .cs-text.cs-t-s  { font-size: 0.97rem; }
    .cs-theme-lines .cs-text.cs-t-m  { font-size: 1.1rem; }
    .cs-theme-lines .cs-text.cs-t-l  { font-size: 1.26rem; }
    .cs-theme-lines .cs-text.cs-t-xl { font-size: 1.47rem; }

    .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 */
    .cs-theme-lines .cs-heading.cs-h-xs { font-size: 1.12rem; }
    .cs-theme-lines .cs-heading.cs-h-s  { font-size: 1.42rem; }
    .cs-theme-lines .cs-heading.cs-h-m  { font-size: 1.89rem; }
    .cs-theme-lines .cs-heading.cs-h-l  { font-size: 2.83rem; }
    .cs-theme-lines .cs-heading.cs-h-xl { font-size: 3.78rem; }

    /* 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; }
    .cs-theme-dense .cs-heading.cs-h-xs { font-size: 0.94rem; }
    .cs-theme-dense .cs-heading.cs-h-s  { font-size: 1.18rem; }
    .cs-theme-dense .cs-heading.cs-h-m  { font-size: 1.42rem; }
    .cs-theme-dense .cs-heading.cs-h-l  { font-size: 1.89rem; }
    .cs-theme-dense .cs-heading.cs-h-xl { font-size: 2.6rem; }

    /* 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; }
    .cs-theme-statement .cs-heading.cs-h-xs { font-size: 1rem; }
    .cs-theme-statement .cs-heading.cs-h-s  { font-size: 1.3rem; }
    .cs-theme-statement .cs-heading.cs-h-m  { font-size: 1.65rem; }
    .cs-theme-statement .cs-heading.cs-h-l  { font-size: 2.12rem; }
    .cs-theme-statement .cs-heading.cs-h-xl { font-size: 2.83rem; }

    /* Magazin */
    .cs-theme-magazin h1.cs-heading { font-size: 4.7rem; }
    .cs-theme-magazin h2.cs-heading { font-size: 3.8rem; }
    .cs-theme-magazin .cs-heading.cs-h-xs { font-size: 1.42rem; }
    .cs-theme-magazin .cs-heading.cs-h-s  { font-size: 2.36rem; }
    .cs-theme-magazin .cs-heading.cs-h-m  { font-size: 3.78rem; }
    .cs-theme-magazin .cs-heading.cs-h-l  { font-size: 5.31rem; }
    .cs-theme-magazin .cs-heading.cs-h-xl { font-size: 7.08rem; }

    /* === Text-Overrides (+10%) === */
    .cs-theme-lines .cs-text { font-size: 1.155rem; }
    .cs-theme-lines .cs-text.cs-t-xs { font-size: 0.88rem; }
    .cs-theme-lines .cs-text.cs-t-s  { font-size: 1.01rem; }
    .cs-theme-lines .cs-text.cs-t-m  { font-size: 1.155rem; }
    .cs-theme-lines .cs-text.cs-t-l  { font-size: 1.32rem; }
    .cs-theme-lines .cs-text.cs-t-xl { font-size: 1.54rem; }

    .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;
}
.cs-slider-track {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}
@media (max-width: 1023px) {
    .cs-slider-track { aspect-ratio: 16 / 9; }
}
@media (max-width: 767px) {
    .cs-slider-track { aspect-ratio: 4 / 5; }
}

/* Slide: alle uebereinander absolut, nur aktiver sichtbar */
.cs-slide {
    position: absolute;
    inset: 0;
    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;
    inset: 0;
    overflow: hidden;
}
.cs-slide-media picture,
.cs-slide-media img,
.cs-slide-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Overlay + Content - 9 Positionen */
.cs-slide-overlay {
    position: absolute;
    inset: 0;
    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;
    inset: -1rem;
    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: 767px) {
    .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: 767px) {
    .cs-slider-arrow { width: 36px; height: 36px; }
    .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;
}
.cs-slider-pager-dot {
    width: 36px;
    height: 2px;
    background: rgba(255,255,255,0.4);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.3s, height 0.3s;
    display: block;
}
.cs-slider-pager-dot:hover { background: rgba(255,255,255,0.7); }
.cs-slider-pager-dot.is-active { background: #fff; height: 3px; }
@media (max-width: 767px) {
    .cs-slider-pager { bottom: 12px; gap: 6px; }
    .cs-slider-pager-dot { width: 24px; }
}

/* 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;
    text-transform: uppercase;
    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: 720px) {
    .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: 720px) {
    .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;
    aspect-ratio: 3 / 4;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}
.cs-category-image {
    position: absolute;
    inset: 0;
    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; }
}