/* // ------------------------------------------------------------------- // wps-section-content-produktgruppe-standalone.css // ------------------------------------------------------------------- // HTML Struktur // ------------------------------------------------------------------- // SECTION wps-section-produktgruppe-standalone // ROW Headline // - wps-section-produktgruppe-standalone-row-headline // ROW Video + Logos // - wps-section-produktgruppe-standalone-row-video-and-logo // ROW Produkte // - wps-section-produktgruppe-standalone-row-produkte // ------------------------------------------------------------------- // SECTION wps-section-produktgruppe-standalone // ROW Cards Verkauf + Reparatur // - wps-section-produktgruppe-standalone-row-cards // ------------------------------------------------------------------- */ /* // ------------------------------------------------------------------- // STARTSEITE // ------------------------------------------------------------------- // Debug // ------------------------------------------------------------------- */ /* .et_pb_section.wps-section-produktgruppe-standalone { outline: 5px dashed olivedrab } .et_pb_section.wps-section-produktgruppe-standalone .et_pb_row.wps-section-produktgruppe-standalone-row-headline, .et_pb_section.wps-section-produktgruppe-standalone .et_pb_row.wps-section-produktgruppe-standalone-row-video-and-logo, .et_pb_section.wps-section-produktgruppe-standalone .et_pb_row.wps-section-produktgruppe-standalone-row-produkte, .et_pb_section.wps-section-produktgruppe-standalone .et_pb_row.wps-section-produktgruppe-standalone-row-cards { outline: 5px dashed orchid; } */ /* Cols der Cards */ /* .et_pb_section.wps-section-produktgruppe-standalone .et_pb_row.wps-section-produktgruppe-standalone-row-cards .et_pb_column { outline: 5px dashed yellow; } */ /* .et_pb_section.wps-section-produktgruppe-standalone { border-bottom: 8px solid var(--wps-orange1); } */ .et_pb_section.wps-section-produktgruppe-standalone .et_pb_row.wps-section-produktgruppe-standalone-row-cards { border-bottom: 8px solid var(--wps-orange1); /* border-bottom: 8px solid; border-image: linear-gradient(to right, var(--wps-dunkelbraun-opacity-dark), var(--wps-dunkelbraun-opacity-light)) 1; border-image: linear-gradient(to right, var(--wps-dunkelbraun), var(--wps-orange1)) 1; border-image: linear-gradient(to right, var(--wps-orange1), var(--wps-dunkelbraun)) 1; */ padding-bottom:0; } /* // ------------------------------------------------------------------- // STARTSEITE // ------------------------------------------------------------------- // .et_pb_column // ------------------------------------------------------------------- // - Remove unwanted DIVI float // ------------------------------------------------------------------- */ .et_pb_section.wps-section-produktgruppe-standalone .et_pb_row.wps-section-produktgruppe-standalone-row-headline > .et_pb_column, .et_pb_section.wps-section-produktgruppe-standalone .et_pb_row.wps-section-produktgruppe-standalone-row-video-and-logo > .et_pb_column, .et_pb_section.wps-section-produktgruppe-standalone .et_pb_row.wps-section-produktgruppe-standalone-row-produkte > .et_pb_column, .et_pb_section.wps-section-produktgruppe-standalone .et_pb_row.wps-section-produktgruppe-standalone-row-cards > .et_pb_column { float: none; } /* // ------------------------------------------------------------------- // STARTSEITE // ------------------------------------------------------------------- // Layout // ------------------------------------------------------------------- // - Adjust unwanted spacing // ------------------------------------------------------------------- */ .et_pb_section.wps-section-produktgruppe-standalone .et_pb_row.wps-section-produktgruppe-standalone-row-headline { padding-top:0; padding-bottom:0; } /* // ------------------------------------------------------------------- // STARTSEITE // ------------------------------------------------------------------- // Layout // ------------------------------------------------------------------- // - Headline "Top Angebote" // ------------------------------------------------------------------- */ .et_pb_section.wps-section-produktgruppe-standalone .et_pb_row.wps-section-produktgruppe-standalone-row-produkte { padding-bottom:0; } /* .et_pb_module adds unwanted margins for headers */ .et_pb_section.wps-section-produktgruppe-standalone .et_pb_row.wps-section-produktgruppe-standalone-row-produkte .et_pb_module { margin-bottom: 0; } /* // ------------------------------------------------------------------- // STARTSEITE // ------------------------------------------------------------------- // Theme // ------------------------------------------------------------------- // Standalone Subhead // ------------------------------------------------------------------- */ .et_pb_module.et_pb_heading.wps-section-produktgruppe-standalone-subhead .et_pb_module_heading { font-family: var(--wps-font-family-main-header); font-size: var(--wps-font-size-section-head2-standalone-desktop); line-height: 1; padding-top: 20px; padding-bottom: 20px; } .et_pb_module.et_pb_heading.wps-section-produktgruppe-standalone-subhead .et_pb_module_heading > b { font-family: var(--wps-font-family-headlines-extrabold); } /* In der Card row groesseren Abstand zum Text */ /* S.u. special handling first h3 */ .et_pb_section.wps-section-produktgruppe-standalone .et_pb_row.wps-section-produktgruppe-standalone-row-cards > .et_pb_column .et_pb_module.et_pb_heading.wps-section-produktgruppe-standalone-subhead .et_pb_module_heading { padding-bottom: 60px; font-family: var(--wps-font-family-headlines-extrabold); } /* // ------------------------------------------------------------------- // STARTSEITE // ------------------------------------------------------------------- // .et_pb_column // ------------------------------------------------------------------- // - Background colors // ------------------------------------------------------------------- */ .et_pb_section.wps-section-produktgruppe-standalone .et_pb_row.wps-section-produktgruppe-standalone-row-cards > .et_pb_column:nth-child(odd) { background-color: var(--wps-dunkelbraun-opacity-dark); } .et_pb_section.wps-section-produktgruppe-standalone .et_pb_row.wps-section-produktgruppe-standalone-row-cards > .et_pb_column:nth-child(even) { background-color: var(--wps-dunkelbraun-opacity-light); /* border-right: 8px solid var(--wps-orange1); */ } /* // ------------------------------------------------------------------- // STARTSEITE // ------------------------------------------------------------------- // .et_pb_column // ------------------------------------------------------------------- // - Padding // - Text color // ------------------------------------------------------------------- */ .et_pb_section.wps-section-produktgruppe-standalone .et_pb_row.wps-section-produktgruppe-standalone-row-cards > .et_pb_column .et_pb_module.et_pb_text { /* Remove unwanted DIVI-margin-bottom (13%)from pb_module */ margin-bottom:1em; } .et_pb_section.wps-section-produktgruppe-standalone .et_pb_row.wps-section-produktgruppe-standalone-row-cards > .et_pb_column .et_pb_module.et_pb_text ul { /* Remove unwanted padding from ul */ padding-bottom:0; } /* // ------------------------------------------------------------------- // STARTSEITE // ------------------------------------------------------------------- // Theme // ------------------------------------------------------------------- // - Text weiss // ------------------------------------------------------------------- // .et_pb_row // .et_pb_column // .et_pb_module.et_pb_heading // .et_pb_heading_container.et_pb_module_heading // ------------------------------------------------------------------- */ /* Font color head + copy */ .et_pb_row.wps-section-produktgruppe-standalone-row-cards > .et_pb_column .et_pb_module_heading, .et_pb_row.wps-section-produktgruppe-standalone-row-cards > .et_pb_column .et_pb_module.et_pb_text, .et_pb_row.wps-section-produktgruppe-standalone-row-cards > .et_pb_column .et_pb_module.et_pb_text ul, .et_pb_row.wps-section-produktgruppe-standalone-row-cards > .et_pb_column .et_pb_module.et_pb_text li { color: var(--wps-white); } /* Font size copy */ .et_pb_row.wps-section-produktgruppe-standalone-row-cards > .et_pb_column .et_pb_module.et_pb_text, .et_pb_row.wps-section-produktgruppe-standalone-row-cards > .et_pb_column .et_pb_module.et_pb_text ul, .et_pb_row.wps-section-produktgruppe-standalone-row-cards > .et_pb_column .et_pb_module.et_pb_text li { font-size: var(--wps-font-size-section-content-copy-desktop); line-height: 1.25; } /* // ------------------------------------------------------------------- // STARTSEITE // ------------------------------------------------------------------- // Theme // ------------------------------------------------------------------- // - Headline groesser // - Copy groesser // ------------------------------------------------------------------- */ /* Card H3 Headlines */ .et_pb_row.wps-section-produktgruppe-standalone-row-cards > .et_pb_column h3.et_pb_module_heading { font-family: var(--wps-font-family-headlines); font-size: var(--wps-font-size-section-content-heading-h3-desktop); margin-bottom:8px; } /* * SIMPLIFIED: Target all h3s EXCEPT the first one in each column * * How it works: * 1. .et_pb_heading:has(h3) * = Find the first .et_pb_heading div that contains an h3 * * 2. ~ (general sibling combinator) * = Select all .et_pb_heading siblings that come AFTER the first one * * 3. h3 * = Target the h3 inside those later .et_pb_heading divs * * Result: First h3 is excluded (acts as anchor), all subsequent h3s are selected * * Why this works when :first-of-type doesn't: * - Each h3 is wrapped in .et_pb_heading_container, making it the "first" in its parent * - So we target the wrapper (.et_pb_heading) sibling relationships instead */ .et_pb_row.wps-section-produktgruppe-standalone-row-cards > .et_pb_column .et_pb_heading:has(h3) ~ .et_pb_heading h3 { /* outline: 5px dashed limegreen; */ margin-top: 80px!important; } /* For comparison: show first h3 in orange */ .et_pb_row.wps-section-produktgruppe-standalone-row-cards > .et_pb_column .et_pb_heading:has(h3):first-of-type h3 { /* outline: 5px dashed orange; */ margin-bottom: 10px!important; } /* // ------------------------------------------------------------------- // STARTSEITE // ------------------------------------------------------------------- // Theme // ------------------------------------------------------------------- // - LI // - Mehr Abstand dazwischen // ------------------------------------------------------------------- */ .et_pb_row.wps-section-produktgruppe-standalone-row-cards > .et_pb_column .et_pb_module.et_pb_text li { margin-bottom: 10px; } /* // ------------------------------------------------------------------- // STARTSEITE // ------------------------------------------------------------------- // Layout // ------------------------------------------------------------------- // - Card Padding // ------------------------------------------------------------------- */ .et_pb_section.wps-section-produktgruppe-standalone .et_pb_row.wps-section-produktgruppe-standalone-row-cards > .et_pb_column { /* padding: var(--wps-grid-gap-desktop) !important; */ padding: 60px !important; padding-bottom: 100px !important; } /* // ------------------------------------------------------------------- // STARTSEITE // ------------------------------------------------------------------- // Section Content Produktgruppe // ------------------------------------------------------------------- // Align items (FLEXBOX FROM DIVI COLUMN) // ------------------------------------------------------------------- // 1) Headlines: Remove DIVIs margin bottom: 30px // ------------------------------------------------------------------- // 2) Headlines stretch to same height // - Workaround with min-height // --> Flexbox cannot solve this // --> Grid cannot solve this // --> Because the headings don't communicate, they are in // different columns // ------------------------------------------------------------------- // 3) Content does what it wants // 4) Button is always at the bottom // ------------------------------------------------------------------- // Do not switch it on in DIVI row settings: Same height // Do it here, so we have control // ------------------------------------------------------------------- */ /* // ------------------------------------------------------------------- // 2x Button // ------------------------------------------------------------------- // See /assets/divi/button/wps-divi-button.css // ------------------------------------------------------------------- // USAGE: // Add class to divi button: // wps-divi-button-2x // ------------------------------------------------------------------- */ /* // ------------------------------------------------------------------- // - Mobile // ------------------------------------------------------------------- */ @media (max-width: 1024px) { /* // ------------------------------------------------------------------- // - Mobile // ------------------------------------------------------------------- // Grid // - Einspalter // ------------------------------------------------------------------- */ .et_pb_row.wps-section-content-module-row-as-grid { /* 1 col on mobile */ grid-template-columns: 1fr !important; } /* // ------------------------------------------------------------------- // Mobile // ------------------------------------------------------------------- // Grid Item // - Hintergrundfarbe abwechseld // ------------------------------------------------------------------- */ .et_pb_row.wps-section-content-module-row-as-grid > .et_pb_column:nth-child(odd) { background-color: var(--wps-dunkelbraun-opacity-light); } .et_pb_row.wps-section-content-module-row-as-grid > .et_pb_column:nth-child(even) { background-color: var(--wps-dunkelbraun-opacity-dark); } /* // ------------------------------------------------------------------- // Mobile // ------------------------------------------------------------------- // Zweispalter // - Collapse on mobile // ------------------------------------------------------------------- */ .et_pb_row.wps-section-produktgruppe-standalone-row-cards { display: block!important; } } /* // ------------------------------------------------------------------- // Section // ------------------------------------------------------------------- // Used as Separator // ------------------------------------------------------------------- // A section with a full width background // - No! Without BG Color, to make it transparent // ------------------------------------------------------------------- // THEME // ------------------------------------------------------------------- */ /* The divi section - for the background */ .et_pb_section.wps-section-separator-produktgruppe { /* No bg color - keep it transparent */ /* outline: 5px dashed hotpink; */ /* background-color: var(--wps-dunkelbraun); */ /* background-color: var(--wps-graylight1); */ background-color: transparent; /* Make the gap smaller */ /* DIVI Default is 50+50 = 100px */ padding-top:10px; padding-bottom:10px; } /* Abstand zwischen buttons */ .et_pb_section.wps-section-produktgruppe-standalone .et_pb_module.et_pb_button_module_wrapper { margin-bottom: 1rem; }