/*
Theme Name: Divi 5 Child Theme | 2026
Theme URI: https://www.cordmedia.de
Version: 2.5
Description: Made with love by Cord Media Digital Services
Template: Divi
Author: Frank Oschatz
Author URI: https://www.cordmedia.de
*/


/* =============================================================================
   TABLE OF CONTENTS
   =============================================================================
   1. Navigation
   2. Layout & Content
   3. Sidebar & Archive
   4. WooCommerce / Produkte
   5. Breadcrumbs
   6. Merkliste / Wishlist
   7. Formulare (Gravity Forms, Klick-Tipp)
   8. Responsive
   ============================================================================= */


/* =============================================================================
   1. NAVIGATION
   ============================================================================= */

/* Hauptnavigation Dropdown */
#top-menu .sub-menu li a {
    font-size: 16px !important;
    line-height: 1.6em !important;
    border-bottom: 1px solid #efefef !important;
    margin-bottom: 5px !important;
}

#top-menu.nav li ul {
    width: 300px !important;
}

#top-menu li li a {
    padding: 3px 10px !important;
    width: 260px !important;
}

#top-menu li .menu-item-has-children > a:first-child:after {
    right: 10px;
    top: 0;
}

/* Produkt-Subnavigation */
#produktSubnavi li {
    list-style-type: none;
    margin-bottom: 2px;
}


/* =============================================================================
   2. LAYOUT & CONTENT
   ============================================================================= */

/* Zeiten-Modul */
.zeiten span {
    position: absolute !important;
    left: 90px;
}

/* Listen in Modulen */
.et_pb_module li {
    margin-bottom: 15px;
}

/* Container-Trenner ausblenden */
#main-content .container:before {
    display: none !important;
}


/* =============================================================================
   3. SIDEBAR & ARCHIVE
   ============================================================================= */

.archive #sidebar {
    background: #efefef;
    padding: 12px;
}

#sidebar h4 {
    color: #288c4c;
    font-size: 18px;
    margin-bottom: 5px;
}

#sidebar p,
#sidebar li,
#sidebar a {
    font-size: 14px;
    line-height: 1.2em;
}

#sidebar .et_pb_widget {
    margin-bottom: 30px;
}

/* Kategorie-Liste */
.cat-parent a,
.cat-item a {
    color: #288c4c !important;
    font-weight: bold;
}

.children {
    margin-top: 10px;
}

.cat-parent .children a {
    color: #333 !important;
    font-weight: normal;
}

li.cat-item {
    padding: 2px 0;
}


/* =============================================================================
   4. WOOCOMMERCE / PRODUKTE
   ============================================================================= */

/* Kategorie-Galerie */
#ExpoCatGallery {
    margin-bottom: 35px !important;
}

/* Warenkorb-Counter ausblenden (Shop ist nur Anfrage-System) */
mark.count,
.et-cart-info {
    display: none;
}

/* Print-Link ausblenden */
.woocommerce-print-products-print-link,
.expoBread .woocommerce-print-products {
    display: none;
}

/* Produktbeschreibung Tabellen (Spezifikationen) */
.woocommerce-product-details__short-description table,
.et_pb_wc_description table,
.et_pb_wc_tabs table,
.et_pb_tab_content table,
.product .entry-content table,
.woocommerce-product-attributes,
.woocommerce table.shop_attributes {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
}

.woocommerce-product-details__short-description table td,
.woocommerce-product-details__short-description table th,
.et_pb_wc_description table td,
.et_pb_wc_description table th,
.et_pb_wc_tabs table td,
.et_pb_wc_tabs table th,
.et_pb_tab_content table td,
.et_pb_tab_content table th,
.product .entry-content table td,
.product .entry-content table th,
.woocommerce-product-attributes td,
.woocommerce-product-attributes th,
.woocommerce table.shop_attributes td,
.woocommerce table.shop_attributes th {
    width: 50%;
    padding: 10px 12px !important;
    text-align: left;
    vertical-align: top;
    border: none !important;
}

/* Erste Spalte (Labels) */
.woocommerce-product-details__short-description table td:first-child,
.woocommerce-product-details__short-description table th,
.et_pb_wc_description table td:first-child,
.et_pb_wc_description table th,
.et_pb_wc_tabs table td:first-child,
.et_pb_wc_tabs table th,
.et_pb_tab_content table td:first-child,
.et_pb_tab_content table th,
.product .entry-content table td:first-child,
.product .entry-content table th,
.woocommerce-product-attributes th,
.woocommerce table.shop_attributes th {
    font-weight: 600;
    color: #333;
}

/* Zebra-Streifen */
.woocommerce-product-details__short-description table tr:nth-child(odd),
.et_pb_wc_description table tr:nth-child(odd),
.et_pb_wc_tabs table tr:nth-child(odd),
.et_pb_tab_content table tr:nth-child(odd),
.product .entry-content table tr:nth-child(odd),
.woocommerce-product-attributes tr:nth-child(odd),
.woocommerce table.shop_attributes tr:nth-child(odd) {
    background-color: #fff;
}

.woocommerce-product-details__short-description table tr:nth-child(even),
.et_pb_wc_description table tr:nth-child(even),
.et_pb_wc_tabs table tr:nth-child(even),
.et_pb_tab_content table tr:nth-child(even),
.product .entry-content table tr:nth-child(even),
.woocommerce-product-attributes tr:nth-child(even),
.woocommerce table.shop_attributes tr:nth-child(even) {
    background-color: #efefef;
}

/* WooCommerce Attributes: Zebra */
.woocommerce table.shop_attributes tr:nth-child(odd) td,
.woocommerce table.shop_attributes tr:nth-child(odd) th {
    background-color: #fff !important;
}

.woocommerce table.shop_attributes tr:nth-child(even) td,
.woocommerce table.shop_attributes tr:nth-child(even) th {
    background-color: #efefef !important;
}

/* Produkt-Grid: siehe unten "Produkt-Kacheln object-carpet" (CSS-Grid statt Float). */


/* =============================================================================
   5. BREADCRUMBS
   ============================================================================= */

.ExpoBreadProduct {
    color: #000;
    font-size: 14px !important;
}

.custom-breadcrumb,
.custom-breadcrumb a {
    color: #fff;
    font-size: 17px;
    color: #fff !important;
    text-shadow: 0.08em 0.08em 0 #000;
}


/* =============================================================================
   6. MERKLISTE / WISHLIST
   ============================================================================= */

.wishListExpoSingleRemove {
    line-height: 1em !important;
}

.wishListExpoSingleRemove p {
    display: block !important;
}

.textRemove {
    color: #278b4b;
    text-decoration: underline;
    position: relative !important;
    cursor: pointer;
    margin-left: 10px;
    padding-top: 0;
    margin-top: 0;
}


/* =============================================================================
   7. FORMULARE (Gravity Forms, Klick-Tipp)
   ============================================================================= */

/* Gravity Forms Button */
.gform_button.button {
    background: #297f49;
    color: #fff;
    border: none;
    padding: 10px 24px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease-out;
}

.gform_button.button:hover {
    background: #efefef;
    color: #297f49;
}

/* Klick-Tipp Newsletter */
.ktv2-form-element {
    margin-top: 10px;
}

.ktv2-form-element input {
    width: 100%;
    max-width: 400px;
    padding: 6px 12px;
}

#ktv2-form-340677 input[type="submit"] {
    background: #268b4b !important;
    border: none !important;
    padding: 12px 16px;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
}

#ktv2-form-340677 input[type="submit"]:hover {
    background: #efefef !important;
    color: #000;
}


/* =============================================================================
   8. RESPONSIVE
   ============================================================================= */

@media only screen and (max-width: 980px) {

    /* Spalten-Reihenfolge auf Mobile */
    .et_pb_row.changeOnMobile {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .changeOnMobile .et_pb_column:first-of-type {
        order: 2 !important;
    }

    .changeOnMobile .et_pb_column:last-of-type {
        order: 1 !important;
        margin-bottom: 30px !important;
    }

}

@media only screen and (max-width: 480px) {

    /* Produkttabellen: Zellen untereinander */
    .woocommerce-product-details__short-description table,
    .et_pb_wc_description table,
    .et_pb_wc_tabs table,
    .et_pb_tab_content table,
    .product .entry-content table,
    .woocommerce-product-attributes,
    .woocommerce table.shop_attributes {
        display: block;
    }

    .woocommerce-product-details__short-description table tbody,
    .et_pb_wc_description table tbody,
    .et_pb_wc_tabs table tbody,
    .et_pb_tab_content table tbody,
    .product .entry-content table tbody,
    .woocommerce-product-attributes tbody,
    .woocommerce table.shop_attributes tbody {
        display: block;
    }

    .woocommerce-product-details__short-description table tr,
    .et_pb_wc_description table tr,
    .et_pb_wc_tabs table tr,
    .et_pb_tab_content table tr,
    .product .entry-content table tr,
    .woocommerce-product-attributes tr,
    .woocommerce table.shop_attributes tr {
        display: block;
        margin-bottom: 15px;
    }

    .woocommerce-product-details__short-description table td,
    .woocommerce-product-details__short-description table th,
    .et_pb_wc_description table td,
    .et_pb_wc_description table th,
    .et_pb_wc_tabs table td,
    .et_pb_wc_tabs table th,
    .et_pb_tab_content table td,
    .et_pb_tab_content table th,
    .product .entry-content table td,
    .product .entry-content table th,
    .woocommerce-product-attributes td,
    .woocommerce-product-attributes th,
    .woocommerce table.shop_attributes td,
    .woocommerce table.shop_attributes th {
        display: block;
        width: 100% !important;
        padding: 4px 12px !important;
        border-bottom: none !important;
    }

}



/* === CM EXPOMOBIL DYNNAV START (Sub-Menue + Overlay + Scroll-Grafik, 2026-06-09) === */
/* Alles greift nur im Front-End (body:not(.et-fb)); im Divi 5 Visual Builder (body.et-fb)
   bleiben Overlay + Subs sichtbar/editierbar. */

/* --- Sub-Menues (id endet auf "sub") --- */
body:not(.et-fb) [id$="sub"]             { display: none !important; }
body:not(.et-fb) [id$="sub"].is-active   { display: flex !important; flex-direction: column; animation: cmNavFade .18s ease; }
body:not(.et-fb) .cm-nav-intro.is-hidden { display: none !important; }
@keyframes cmNavFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
body:not(.et-fb) a.cm-nav-main           { transition: opacity .15s ease; }
@media (max-width: 980px) {
  body:not(.et-fb) [id$="sub"].is-active { padding-left: 1em; margin-top: .25em; }
}

/* --- Overlay-Menue (.cm-nav-overlay) --- */
body:not(.et-fb) .cm-nav-overlay {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99999; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-24px);
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
body:not(.et-fb).cm-mainnavi-open .cm-nav-overlay {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .35s ease, transform .35s ease;
}
body:not(.et-fb).cm-mainnavi-open { overflow: hidden; }
body:not(.et-fb) #mainNaviOpener,
body:not(.et-fb) #mainNaviCloser { cursor: pointer; }

/* --- Scroll-weg-Grafik (#expoForm) --- */
body:not(.et-fb) #expoForm { will-change: translate, opacity; }
/* Octaform-Grafik UEBER dem Seiteninhalt halten (lag auf vielen Seiten hinter den
   Bildern: DOM-spaetere, positionierte Module malen sonst drueber). Rein dekorativ,
   deshalb pointer-events:none - faengt keine Klicks von darunterliegendem Inhalt ab. */
body:not(.et-fb) #expoForm { position: relative; z-index: 400; pointer-events: none; top: -17vw; right: -50px; }
/* Die Grafik steht rechts ueber den Viewport hinaus -> ohne Klipp horizontale
   Scroll-Leiste. Klipp am Seiten-Wrapper #page-container (volle Breite), NICHT
   an html: clip erzeugt keinen Scroll-Container (kein JS-/Touch-Querscrollen,
   position:sticky intakt) und laesst overflow-y unangetastet - die nach oben
   gezogene Grafik bleibt komplett sichtbar. html-hidden nur als Alt-Browser-
   Fallback ohne clip-Support. */
html { overflow-x: hidden; }
@supports (overflow-x: clip) {
  html { overflow-x: visible; }
  body:not(.et-fb) #page-container { overflow-x: clip; }
}
/* Die Header-SPALTE um die Grafik bildet einen eigenen Stacking-Kontext (Divi:
   position:relative + z-index:2) - der z-index der Grafik zaehlt nur innerhalb.
   Also die Spalte selbst anheben. Klicks: Spalte durchlaessig (sie ueberdeckt
   Produkt-Kacheln), nur der Menue-Opener faengt wieder. */
/* Der transparente Header ueberlappt den Content-Anfang; auf Seiten ohne
   Hero-Abstand (z. B. Suchergebnisse) blockierten seine Spalten die Klicks auf
   Produkte darunter. Ganze Header-Sektion klick-durchlaessig, nur echte
   Bedienelemente (Logo-Link, Suchformular, Menue-Opener) fangen wieder.
   Bewusst einfache Selektor-Liste (kein :is/:has - Alt-Browser-Invalidierung). */
body:not(.et-fb) .et-l--header .et_pb_section_0_tb_header { pointer-events: none; }
body:not(.et-fb) .et-l--header .et_pb_section_0_tb_header a,
body:not(.et-fb) .et-l--header .et_pb_section_0_tb_header button,
body:not(.et-fb) .et-l--header .et_pb_section_0_tb_header input,
body:not(.et-fb) .et-l--header .et_pb_section_0_tb_header select,
body:not(.et-fb) .et-l--header .et_pb_section_0_tb_header textarea,
body:not(.et-fb) .et-l--header .et_pb_section_0_tb_header label,
body:not(.et-fb) .et-l--header .et_pb_section_0_tb_header #mainNaviOpener {
  pointer-events: auto;
}

/* Getrennte Regeln (kein Selektor-Listen-Mix): :has() wuerde in aelteren
   Browsern sonst die GANZE Regel invalidieren. */
body:not(.et-fb) .et-l--header .et_pb_column_2_tb_header {
  z-index: 400;
  pointer-events: none;
}
body:not(.et-fb) .et-l--header .et_pb_column:has(> #expoForm) {
  z-index: 400;
  pointer-events: none;
}
body:not(.et-fb) .et-l--header .et_pb_column_2_tb_header #mainNaviOpener {
  pointer-events: auto;
}
body:not(.et-fb) .et-l--header .et_pb_column:has(> #expoForm) #mainNaviOpener {
  pointer-events: auto;
}
/* expoForm-980-hide: EXPOFORM-Grafik ab Tablet ausblenden */@media (max-width: 980px) { #expoForm { display: none !important; } }
/* === CM EXPOMOBIL DYNNAV END === */

/* === CM EXPOMOBIL SWATCHES (Pilot 2026-06-29) === */
.cm-swatches { margin: 1.4em 0; }
.cm-swatches__label { font-weight: 600; margin-bottom: .6em; }
.cm-swatches__grid { display: flex; flex-wrap: wrap; gap: 12px; }
.cm-swatch { border: 2px solid transparent; border-radius: 6px; padding: 0; background: none; cursor: pointer; width: 88px; text-align: center; line-height: 1.1; transition: border-color .2s ease; }
.cm-swatch img { display: block; width: 84px; height: 84px; object-fit: cover; border-radius: 4px; }
.cm-swatch__name { display: block; font-size: .72rem; margin-top: 5px; }
.cm-swatch:hover { border-color: #999; }
.cm-swatch.is-active { border-color: #278b4c; }

/* === CM EXPOMOBIL — Unterkategorien-Kacheln [cm_unterkategorien] (ExpoNews-Stil) === */
.cm-subcats {
    display: grid;
    grid-template-columns: repeat(var(--cm-subcat-cols, 4), 1fr);
    gap: 16px;
    margin: 1.5em 0;
}
.cm-subcat {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 6px;
    text-decoration: none;
    aspect-ratio: 1 / 1;
}
.cm-subcat__media { position: relative; width: 100%; height: 100%; }
.cm-subcat__img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.cm-subcat:hover .cm-subcat__img { transform: scale(1.05); }
.cm-subcat__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
    background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,0) 70%);
    color: #fff;
}
.cm-subcat__title { margin: 0; color: #fff !important; font-size: 1.1rem; line-height: 1.2; }
.cm-subcat__count { margin-top: 4px; color: #fff; font-size: .8rem; opacity: .85; }
@media (max-width: 980px) { .cm-subcats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cm-subcats { grid-template-columns: 1fr; } }

/* === CM EXPOMOBIL — Kategorie-Grid: WooCommerce-native Unterkategorie-Kacheln (object-carpet) === */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 1.5em 0;
    padding: 0;
    list-style: none;
}
.woocommerce ul.products li.product-category {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    list-style: none;
}
.woocommerce ul.products li.product-category > a {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 1 / 1;
    text-decoration: none;
}
.woocommerce ul.products li.product-category img {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0 !important;
    transition: transform .4s ease;
}
.woocommerce ul.products li.product-category > a:hover img { transform: scale(1.05); }
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,0) 70%);
    color: #fff !important;
    font-size: 1.1rem;
    line-height: 1.2;
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title .count {
    display: block;
    margin-top: 4px;
    font-size: .8rem;
    font-weight: 400;
    opacity: .85;
    color: #fff;
    background: none;
}
@media (max-width: 980px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .woocommerce ul.products { grid-template-columns: 1fr; } }

/* Fix: Clearfix-Pseudoelemente am Grid-Container abschalten (sonst leere erste Zelle) */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content: none !important;
    display: none !important;
}

/* === CM EXPOMOBIL — Produkt-Kacheln object-carpet (Bild groß als Background, Titel-Overlay) ===
   Gilt für alle Produkt-Loops (li.product). Löst die alte Float-Spalten-Regel (Abschnitt 4) ab.
   Markup: li.product > div.dwe_wishlist_button_wrapper + a.woocommerce-loop-product__link
           ( span.et_shop_image > img + span.et_overlay ) + h2.woocommerce-loop-product__title */

/* Grid-Item: alte Float-/Breiten-Reste neutralisieren */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    padding: 0;
    position: relative;
    list-style: none;
}

/* Die Kachel selbst = der Produkt-Link (quadratisch, Bild als Fläche) */
.woocommerce ul.products li.product > a.woocommerce-loop-product__link {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 1 / 1;
    text-decoration: none;
}

/* Bild füllt die Kachel komplett */
.woocommerce ul.products li.product a.woocommerce-loop-product__link .et_shop_image,
.woocommerce ul.products li.product a.woocommerce-loop-product__link .et_shop_image img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    display: block;
    max-width: none;
}
.woocommerce ul.products li.product a.woocommerce-loop-product__link .et_shop_image img {
    object-fit: cover;
    transition: transform .4s ease;
}
.woocommerce ul.products li.product a.woocommerce-loop-product__link:hover .et_shop_image img {
    transform: scale(1.05);
}

/* Divi-Hover-Overlay aus (object-carpet = nur Zoom + Verlauf) */
.woocommerce ul.products li.product .et_overlay { display: none !important; }

/* Titel als Overlay unten auf dunklem Verlauf (deckt die ganze Kachel, klick-transparent) */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,0) 70%);
    color: #fff !important;
    font-size: 1.1rem;
    line-height: 1.2;
    pointer-events: none;
}

/* Merkliste-Herz oben rechts über der Kachel */
.woocommerce ul.products li.product .dwe_wishlist_button_wrapper {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    margin: 0;
}
.woocommerce ul.products li.product .dwe_wishlist_button_wrapper > a {
    display: block;
    width: 36px;
    height: 36px;
    padding: 8px;
    background: rgba(255,255,255,.88);
    border-radius: 50%;
    line-height: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    transition: background .2s ease;
}
.woocommerce ul.products li.product .dwe_wishlist_button_wrapper > a:hover {
    background: #fff;
}
.woocommerce ul.products li.product .dwe_wishlist_button_wrapper svg {
    width: 20px;
    height: 20px;
    fill: #278b4c;
    display: block;
}


/* === CM EXPOMOBIL — Einzelprodukt object-carpet-Layout (Pilot 2026-06-30) ===
   DOM: div.product > .clearfix ( .woocommerce-product-gallery + .summary )
        + .woocommerce-tabs. Grid sitzt auf .clearfix. Reines Hook-/CSS-Layout. */

/* Vollbreite: rechte Sidebar auf Einzelprodukten ausblenden, Container 90 % */
body.single-product #sidebar { display: none !important; }
body.single-product #left-area { width: 100% !important; float: none !important; padding-bottom: 0 !important; }
body.single-product #main-content .container { width: 90% !important; max-width: 90% !important; }
body.single-product #content-area { max-width: none; margin: 0; }

/* 3 Spalten: Bild | Info | Beschreibung.
   .clearfix wird transparent (display:contents) → Galerie + Summary werden direkte
   Grid-Items von div.product; die Beschreibung (Hook) ist das 3. Item. */
body.single-product #left-area div.product {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 48px;
    align-items: start;
}
body.single-product #left-area div.product > .clearfix { display: contents; }
body.single-product #left-area div.product > .clearfix::before,
body.single-product #left-area div.product > .clearfix::after { content: none !important; display: none !important; }
/* Ähnliche Produkte (falls vorhanden) über volle Breite unter das Grid */
body.single-product #left-area div.product > .related.products,
body.single-product #left-area div.product > .related { grid-column: 1 / -1; margin-top: 48px; }

/* Galerie links: großes, ruhiges Bild, mitscrollend */
body.single-product #left-area div.product .woocommerce-product-gallery {
    width: 100% !important; margin: 0 !important; float: none !important;
    opacity: 1 !important;
}
body.single-product #left-area div.product .woocommerce-product-gallery__wrapper,
body.single-product #left-area div.product .woocommerce-product-gallery__image { margin: 0 !important; }
body.single-product #left-area div.product .woocommerce-product-gallery__image img {
    border-radius: 10px; width: 100%; height: auto;
    box-shadow: 0 12px 32px rgba(0,0,0,.10);
}
body.single-product #left-area div.product .woocommerce-product-gallery__trigger { top: 1em; right: 1em; }

/* Info rechts */
body.single-product #left-area div.product .summary.entry-summary {
    width: 100% !important; margin: 0 !important; float: none !important; padding-top: 0;
}

/* Eyebrow (Blatt-Kategorie über dem Titel) */
/* Gleicher Stil wie die Beschreibungs-Überschrift (Spalte 3) → identisch + gleiche Höhe */
body.single-product .cm-eyebrow {
    font-family: "Aeonik Black", sans-serif;
    font-size: .82rem; text-transform: uppercase; letter-spacing: .12em;
    color: #999; font-weight: 600; margin: 0 0 16px; line-height: 1.2; padding: 0;
}

/* Titel groß, leicht */
body.single-product #left-area div.product .product_title {
    font-size: 2.6rem; line-height: 1.12; font-weight: 300;
    margin: 0 0 18px; color: #1a1a1a;
}

/* Kurzbeschreibung */
body.single-product .woocommerce-product-details__short-description {
    font-size: 1.05rem; line-height: 1.65; color: #555; margin-bottom: 26px;
}

/* Swatches eleganter */
body.single-product .cm-swatches { margin: 0 0 22px; border-top: 1px solid #ececec; padding-top: 22px; }
body.single-product .cm-swatches__label { font-size: .95rem; color: #333; margin-bottom: .9em; }
body.single-product .cm-swatches__current { font-weight: 600; }
body.single-product .cm-swatches__grid { gap: 14px; }
body.single-product .cm-swatch { width: 100px; padding: 4px; box-sizing: border-box; }
body.single-product .cm-swatch img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; }
body.single-product .cm-swatch__name { font-size: .72rem; color: #666; }

/* Breadcrumb: mehrzeilig erlauben, ruhige Zeilenhoehe wenn sie mobil umbricht (04.08.2026) */
body.single-product .woocommerce-breadcrumb { white-space: normal; line-height: 1.7; }

/* Farb-Swatches auf Mobil: Breite ausfuellen statt fester 100px-Kacheln —
   das Grid verteilt die Kacheln gleichmaessig, kein Weissraum rechts (04.08.2026) */
@media (max-width: 767px) {
    body.single-product .cm-swatches__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
        gap: 12px;
    }
    body.single-product .cm-swatch { width: auto; }
}

/* Technisches Datenblatt — Button direkt unter der Kurzbeschreibung (04.08.2026).
   Gleicher Look wie der Merkliste-Button unten; danach folgt der Teiler
   (border-top an .cm-swatches) und die Farben. */
body.single-product .cm-datenblatt-cta { margin: 6px 0 22px; }
body.single-product .cm-datenblatt-button {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    background: #278b4c; color: #fff !important;
    padding: 16px 24px; border-radius: 8px;
    font-size: 1.05rem; letter-spacing: .02em; text-decoration: none;
    transition: background .2s ease;
}
body.single-product .cm-datenblatt-button:hover { background: #1f7340; }

/* Merkliste-CTA (nur variable Produkte) */
body.single-product .cm-merkliste-cta { margin: 4px 0 24px; }
/* Plugin macht den Wrapper zu flex/row-reverse → auf Block + Vollbreite zwingen, sonst schrumpft der Button */
body.single-product .cm-merkliste-cta .dwe_wishlist_button_wrapper {
    display: block !important; width: 100% !important; margin: 0;
}
body.single-product .cm-merkliste-cta .dwe_add_to_wishlist_button {
    display: block !important; width: 100% !important; box-sizing: border-box; text-align: center;
    background: #278b4c !important; color: #fff !important;
    padding: 16px 24px !important; border-radius: 8px !important;
    font-size: 1.05rem !important; letter-spacing: .02em; box-shadow: none !important;
    transition: background .2s ease;
}
body.single-product .cm-merkliste-cta .dwe_add_to_wishlist_button:hover { background: #1f7340 !important; }

/* Gemerkt-Zustand: zwei Buttons untereinander (04.08.2026) —
   "Von der Merkliste entfernen" (Sekundär) + "Zum Mustershop" (Primär).
   [hidden] toggelt child_js.js (syncCta) pro Farbe und nach Add/Remove. */
body.single-product .cm-merkliste-cta .cm-wl-add[hidden],
body.single-product .cm-merkliste-cta .cm-wl-actions[hidden] { display: none !important; }
body.single-product .cm-merkliste-cta .cm-wl-actions {
    display: flex; flex-direction: column; gap: 10px;
}
body.single-product .cm-merkliste-cta .cm-wl-remove,
body.single-product .cm-merkliste-cta .cm-wl-shop {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    padding: 16px 24px; border-radius: 8px;
    font-size: 1.05rem; letter-spacing: .02em; text-decoration: none;
    cursor: pointer; transition: background .2s ease;
}
body.single-product .cm-merkliste-cta .cm-wl-remove {
    background: #f3f7f3; border: 1px solid #cfe3d5; color: #24513a !important;
}
body.single-product .cm-merkliste-cta .cm-wl-remove:hover { background: #e6efe8; }
body.single-product .cm-merkliste-cta .cm-wl-shop {
    background: #278b4c; color: #fff !important;
}
body.single-product .cm-merkliste-cta .cm-wl-shop:hover { background: #1f7340; }
body.single-product .cm-merkliste-cta .wishListExpoSingleRemove {
    background: #f3f7f3; border: 1px solid #cfe3d5; border-radius: 8px; padding: 14px 18px;
}
body.single-product .cm-merkliste-cta .wishListExpoSingleRemove p { margin: 0; }

/* Spalte 3: Beschreibung (Inhalt aus ehemaligem Tab 1) als saubere Daten-Liste */
body.single-product .cm-product-desc { padding-top: 0; }
body.single-product .cm-product-desc__title {
    font-size: .82rem; text-transform: uppercase; letter-spacing: .12em;
    color: #999; font-weight: 600; margin: 0 0 16px; line-height: 1.2; padding: 0;
}
body.single-product .cm-product-desc__body p {
    font-size: .95rem; line-height: 1.6; color: #555; margin: 0 0 16px;
}
body.single-product .cm-product-desc table { width: 100%; border-collapse: collapse; margin: 0; }
body.single-product .cm-product-desc table td {
    padding: 9px 0; border-bottom: 1px solid #eee; font-size: .92rem;
    vertical-align: top; background: none !important;
}
body.single-product .cm-product-desc table td:first-child { color: #888; padding-right: 14px; width: 50%; }
body.single-product .cm-product-desc table td:last-child { color: #222; font-weight: 500; }
body.single-product .cm-product-desc table tr:last-child td { border-bottom: none; }
body.single-product .cm-product-desc .cm-merkliste-cta { margin: 30px 0 0; }

/* Responsive: 3 → 2 (Bild oben voll) → 1 */
@media (max-width: 1100px) {
  body.single-product #left-area div.product { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 36px; }
  body.single-product #left-area div.product .woocommerce-product-gallery { grid-column: 1 / -1; position: static; }
}
@media (max-width: 760px) {
  body.single-product #left-area div.product { grid-template-columns: 1fr; gap: 28px; }
  body.single-product #left-area div.product .product_title { font-size: 2rem; }
}

/* === CM EXPOMOBIL — Aufklapp-Karte "cm-aufklapp" (Blurb-Umbau, 2026-07-28) ===
   Wunsch Jasmin Essler (Mail 15.07.2026): Kachel wie octanorm.com — Bild als Fläche,
   Titel immer sichtbar, Fließtext fährt beim Hovern aus ("bottom sheet").

   ANWENDUNG (Divi 5.9 hat KEIN "CSS-ID & Klassen"-Feld mehr!):
     Blurb-Modul → Erweitert → Attribute → "+ Attribut hinzufügen"
     Name: class     Wert: cm-aufklapp

   Blurb-Markup, auf dem das aufsetzt:
     .et_pb_blurb
       .et_pb_blurb_content
         .et_pb_main_blurb_image > span.et_pb_image_wrap > img
         .et_pb_blurb_container
           h4.et_pb_module_header      <- immer sichtbar
           .et_pb_blurb_description    <- klappt auf

   Hinweis für Redaktion: Text kurz halten (2-3 Zeilen wie bei octanorm).
   Sehr lange Texte werden vom Kartenrand beschnitten.
   ========================================================================== */

/* --- die Karte --- */
.et_pb_blurb.cm-aufklapp {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 4 / 3;
    padding: 0 !important;
}

.et_pb_blurb.cm-aufklapp .et_pb_blurb_content {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
}

/* --- Bild füllt die Karte --- */
.et_pb_blurb.cm-aufklapp .et_pb_main_blurb_image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 !important;
}

.et_pb_blurb.cm-aufklapp .et_pb_main_blurb_image .et_pb_image_wrap,
.et_pb_blurb.cm-aufklapp .et_pb_main_blurb_image img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
}

.et_pb_blurb.cm-aufklapp .et_pb_main_blurb_image img {
    object-fit: cover;
    transition: transform .5s ease;
}

.et_pb_blurb.cm-aufklapp:hover .et_pb_main_blurb_image img {
    transform: scale(1.05);
}

/* --- Textfeld am unteren Rand --- */
.et_pb_blurb.cm-aufklapp .et_pb_blurb_container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 18px 48px 18px 20px;
    text-align: left;
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.65) 55%, rgba(0,0,0,0) 100%);
}

.et_pb_blurb.cm-aufklapp h4.et_pb_module_header,
.et_pb_blurb.cm-aufklapp h4.et_pb_module_header a {
    margin: 0;
    padding: 0;
    color: #fff !important;
    font-size: 1.15rem;
    line-height: 1.35;
}

/* Chevron rechts oben im Textfeld */
.et_pb_blurb.cm-aufklapp .et_pb_blurb_container::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 23px;
    width: 10px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    transform-origin: 60% 60%;
    transition: transform .4s ease;
}

/* --- Beschreibung: eingeklappt. grid-template-rows animiert die ECHTE Höhe
       (sauberer als der max-height-Hack, kein Springen bei kurzen Texten) --- */
.et_pb_blurb.cm-aufklapp .et_pb_blurb_description {
    display: grid;
    grid-template-rows: 0fr;
    grid-auto-rows: 0fr;
    opacity: 0;
    margin-top: 0;
    transition: grid-template-rows .45s ease, grid-auto-rows .45s ease,
                opacity .3s ease, margin-top .45s ease;
}

.et_pb_blurb.cm-aufklapp .et_pb_blurb_description > * {
    overflow: hidden;
    min-height: 0;
    margin: 0;
    color: #fff !important;
    font-size: .95rem;
    line-height: 1.5;
}

/* --- aufgeklappt: Maus-Hover oder Tastatur-Fokus (nur Geräte MIT Hover) --- */
@media (hover: hover) and (pointer: fine) {
    .et_pb_blurb.cm-aufklapp:hover .et_pb_blurb_description,
    .et_pb_blurb.cm-aufklapp:focus-within .et_pb_blurb_description {
        grid-template-rows: 1fr;
        grid-auto-rows: 1fr;
        opacity: 1;
        margin-top: 10px;
    }

    .et_pb_blurb.cm-aufklapp:hover .et_pb_blurb_container::after,
    .et_pb_blurb.cm-aufklapp:focus-within .et_pb_blurb_container::after {
        transform: rotate(225deg);
    }
}

/* --- Touch (Handy/Tablet): kein Hover vorhanden -> Aufklappen per Tipp.

       Progressive Enhancement in zwei Stufen:
       1) OHNE JavaScript  -> Text steht dauerhaft offen. Der Inhalt ist damit
          auch dann lesbar, wenn child_js.js nicht lädt.
       2) MIT JavaScript   -> child_js.js setzt .cm-tap auf die Karte; erst dann
          wird eingeklappt und das Textfeld per Tipp bedienbar (.cm-open).
       --- */
@media (hover: none), (pointer: coarse) {

    /* Stufe 1 — Fallback ohne JS: offen */
    .et_pb_blurb.cm-aufklapp .et_pb_blurb_description {
        grid-template-rows: 1fr;
        grid-auto-rows: 1fr;
        opacity: 1;
        margin-top: 10px;
    }

    .et_pb_blurb.cm-aufklapp .et_pb_blurb_container::after {
        display: none;
    }

    /* Stufe 2 — mit JS: eingeklappt, Textfeld ist der Schalter */
    .et_pb_blurb.cm-aufklapp.cm-tap .et_pb_blurb_description {
        grid-template-rows: 0fr;
        grid-auto-rows: 0fr;
        opacity: 0;
        margin-top: 0;
    }

    .et_pb_blurb.cm-aufklapp.cm-tap .et_pb_blurb_container {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .et_pb_blurb.cm-aufklapp.cm-tap .et_pb_blurb_container::after {
        display: block;
        transform: rotate(45deg);
    }

    /* aufgetippt */
    .et_pb_blurb.cm-aufklapp.cm-tap.cm-open .et_pb_blurb_description {
        grid-template-rows: 1fr;
        grid-auto-rows: 1fr;
        opacity: 1;
        margin-top: 10px;
    }

    .et_pb_blurb.cm-aufklapp.cm-tap.cm-open .et_pb_blurb_container::after {
        transform: rotate(225deg);
    }

    /* sichtbarer Fokusring für Tastatur-/Screenreader-Bedienung */
    .et_pb_blurb.cm-aufklapp.cm-tap .et_pb_blurb_container:focus-visible {
        outline: 2px solid #fff;
        outline-offset: -4px;
    }
}

/* --- Barrierefreiheit: Animationen abschaltbar --- */
@media (prefers-reduced-motion: reduce) {
    .et_pb_blurb.cm-aufklapp .et_pb_blurb_description,
    .et_pb_blurb.cm-aufklapp .et_pb_main_blurb_image img,
    .et_pb_blurb.cm-aufklapp .et_pb_blurb_container::after {
        transition: none;
    }
}

/* === CM EXPOMOBIL — Aufklapp-Karte ENDE === */

/* === CM EXPOMOBIL — Umschalter "octaStyle" (Divi-5-Toggle, 2026-08-01) ===
   Zweck (Frank): Inhalte aufklappen, bei denen NUR die Titelzeile einen
   Hintergrund traegt — der Inhalt liegt frei darunter. Prinzip von
   octanorm.com/de/nachhaltigkeit/, Optik aber Expomobil: Hausfarbe ueber
   die Global-Color-Variable, Radius 6px, Titel-Masse der Aufklapp-Karte
   (18px/20px, 1.15rem) — bewusst ruhiger als octanorms 152px-Balken.

   Divi legt den Hintergrund sonst auf das GANZE Toggle-Modul (Titel UND
   Inhalt). Deshalb: Modul transparent, Farbe wandert auf den Titel, der
   Inhalt bekommt sein Padding selbst.

   Bewusst OHNE body:not(.et-fb): Die Optik soll auch im Visual Builder
   stimmen, damit man beim Bauen sieht, was herauskommt.
   ============================================================ */

.et_pb_toggle.octaStyle {
    position: relative;
    background-color: transparent;
    padding: 0;
    border: 0;
    margin-bottom: 20px;
}

/* Die Titelzeile ist der farbige Balken.
   Rechts 48px Luft, damit der Text nicht unter das Icon laeuft.
   Farbe: Standard = Expo-Gruen (Global Color). Eine EIGENE Balkenfarbe
   pro Umschalter kommt ueber die Variable --octa-color — gesetzt vom
   child_js (Zusatzklasse octa-color-XXXXXX oder Attribut data-color).
   Ohne Angabe und ohne JS bleibt immer das Expo-Gruen. */
.et_pb_toggle.octaStyle .et_pb_toggle_title {
    position: relative;
    background-color: var(--octa-color, var(--gcid-primary-color, #37875e));
    color: #fff;
    border-radius: 6px;
    padding: 18px 48px 18px 20px;
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.3;
    cursor: pointer;
}

/* Das Aufklapp-Icon kommt aus dem Modul selbst (Divi-Icon, Farbe ueber die
   Global Color gesetzt). Hier nur einruecken und mittig stellen — NICHT
   ausblenden: ein eigener Chevron per ::after wird auf dem h5 nicht
   gerendert (nachgemessen), Divis Icon dagegen schon. */
.et_pb_toggle.octaStyle .et_pb_toggle_title::before {
    /* !important: sobald im Modul eigene Icon-Einstellungen gesetzt sind
       (Jasmins Umschalter auf /nachhaltigkeit), schreibt Divi dafuer
       Seiten-CSS wie ".et_pb_toggle_2… :before { right:-5px }" — das Icon
       klebte am rechten Rand. Die POSITION gehoert fest zur octaStyle-Optik
       und gewinnt jetzt immer; Icon-Auswahl und -Groesse bleiben frei. */
    right: 20px !important;
    top: 50% !important;
    margin-top: 0 !important;
    transform: translateY(-50%) !important;
}

/* Der Inhalt des Umschalters: kein Hintergrund, nur Abstand zum Balken.
   Links buendig zum Titeltext (20px), damit die Kante durchlaeuft. */
.et_pb_toggle.octaStyle .et_pb_toggle_content {
    background-color: transparent;
    padding: 18px 20px 6px;
}

/* --- Die Reihe direkt nach dem Umschalter klappt mit auf ---------------
   Ein Divi-5-Toggle kann KEINE Reihe aufnehmen (sein Inhalt ist ein reines
   Textfeld). Wer ganze Layouts aufklappen will, legt die Reihe deshalb
   direkt unter den Umschalter — im DOM sind beide Geschwister. Divi
   wechselt am Modul die Klasse (et_pb_toggle_close / _open), darauf kann
   die Reihe per Geschwister-Selektor reagieren. Kein JavaScript noetig.

   Animiert wird ueber max-height, NICHT ueber grid-template-rows oder
   height:auto: Die Divi-Reihe ist selbst ein Flex-Container mit Spalten —
   ein Umbau auf Grid wuerde ihr Layout (Spaltenbreiten, Umbrueche auf
   Mobil) zerlegen, und interpolate-size+height:auto laesst sie hier auf
   0 haengen (im Frontend nachgemessen). max-height fasst das Layout nicht
   an. Der Wert 1500px ist die Obergrenze: hoehere Reihen bitte anpassen,
   sonst werden sie beschnitten.

   Gilt fuer JEDE Reihe, die auf einen octaStyle-Umschalter folgt —
   Muster ist also: Umschalter + Reihe direkt darunter, sonst nichts. */
.et_pb_toggle.octaStyle + .et_pb_row {
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height .4s cubic-bezier(.4, 0, .2, 1);
}

.et_pb_toggle.octaStyle.et_pb_toggle_open + .et_pb_row {
    max-height: 1500px;
}

/* Der Umschalter sitzt direkt auf seiner Reihe — der Abstand kommt erst
   unter der aufgeklappten Reihe. */
.et_pb_toggle.octaStyle:has(+ .et_pb_row) {
    margin-bottom: 0;
}

.et_pb_toggle.octaStyle + .et_pb_row {
    margin-bottom: 20px;
}

/* === CM EXPOMOBIL — Umschalter "octaStyle" ENDE === */

/* === CM EXPOMOBIL — Vollbreite Sektion "cm-vollbreit" (2026-08-01) ===
   Ausnahmefall fuer Jasmin: Eine Sektion soll wirklich ueber die ganze
   Bildschirmbreite laufen, ohne weissen Rand links und rechts.

   ➜ SO WIRD ES ANGEWENDET (Frank, 01.08.2026 — nur diese Kombination geht):
     1. Klasse "cm-vollbreit" auf die SEKTION *und* auf die REIHE setzen
     2. Bei beiden im Preset die Breite auf 100vw stellen
     Ohne die Presets bleibt die Reihe in ihrer Standardbreite stehen —
     Divi setzt Modulbreiten mit !important aus dem Body-CSS und schlaegt
     damit jede Regel aus dieser Datei.
     (Eine frueher gebaute Zusatzklasse "cm-vollbreit-inhalt" ist deshalb
     wieder entfallen — sie konnte sich gegen die Preset-Werte nicht
     durchsetzen.)

   Warum die Einstellung "100%" im Builder allein nicht reicht:
   Der weisse Rand entsteht nicht an der Sektion, sondern eine Ebene
   hoeher an der Theme-Builder-Body-Sektion (max-width: 90% + margin:auto).
   Alle Seiteninhalte stecken darin. "100%" bezieht sich also auf einen
   bereits beschnittenen Rahmen (1715 statt 1920px) — und bleibt 1715px.

   Der Ausbruch laeuft ueber negative Raender relativ zum Viewport: Die
   Sektion dehnt sich von ihrer eigenen Mitte auf volle Bildschirmbreite,
   egal wie eng der Elternrahmen ist.

   Voraussetzung ist erfuellt: #page-container traegt overflow-x: clip
   (seit 10.07.2026, urspruenglich fuers Octaform). 100vw schliesst die
   Scrollbar mit ein — ohne das clip gaebe es einen waagerechten
   Scrollbalken von ~15px.
   ============================================================ */


.et_pb_section.cm-vollbreit {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

.et_pb_section.cm-vollbreit > .et_pb_row {
    max-width: 100vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
}



/* === CM EXPOMOBIL — Vollbreite Sektion ENDE === */


/* ============================================================
   MOBIL — Hero-Ueberschriften der Unterseiten (07.08.2026)

   Befund: Auf den Unterseiten steht die Hero-H1 bei 390 px immer
   noch auf 50 px (die Startseite hat Frank bereits auf 36 px
   gestellt). Die Spalte ist dort aber nur 304 px breit, und die
   Titel sind EINZELWOERTER ("Nachhaltigkeit.", "Kettelservice.")
   — die koennen nicht umbrechen. Ergebnis: Die Ueberschrift ragt
   bis x=400 (Viewport 390) und ist ausserhalb des Hero-Bildes
   weiss auf weiss, also faktisch abgeschnitten.

   Auffaellig war das NICHT im Overflow-Test — der Container hat
   overflow:visible, es entsteht also keine Scrollbar.

   Fix: gleiche Groesse wie auf der Startseite + Umbruch-Netz fuer
   lange Einzelwoerter (gleiches Muster wie bei AKAI am 06.08.).
   ============================================================ */
@media (max-width: 767px) {

    body .et_pb_heading h1.et_pb_module_header,
    body h1.et_pb_module_header {
        font-size: 36px;
        line-height: 1.15;
    }

    /* Sicherheitsnetz fuer lange Woerter.
       Abgewogen: OHNE hyphens bricht "wiedereinsetzbaren" hart als
       "wiedereinsetzbare|n" um — typografisch falsch. MIT hyphens
       trennt der Browser korrekt ("wiederein-setzbaren"); dass er
       dabei auch mal trennt, wo es knapp gepasst haette, ist das
       kleinere Uebel. Voraussetzung geprueft: <html lang="de">,
       die Trennung folgt also deutschen Regeln. */
    body h1,
    body h2,
    body h1.et_pb_module_header,
    body h2.et_pb_module_header {
        overflow-wrap: break-word;
        hyphens: auto;
    }
}