/* ============================================================= DAZZLETIC – Divi-Adapter (Divi 5) ------------------------------------------------------------- Damit dieselben Klassen wie im Shortcode-Markup auch auf Divi- Elementen greifen. Keine Werte – die kommen aus 02/06/07 und den Presets (08-blocks.css). Hier steht nur, was Divi sonst verhindert: • Wrap-Modus: Auf Einzelseiten eigener Beitragstypen mit Builder-Inhalt (z. B. spotify_playlist) stellt Divi JEDER eigenen Regel „.et-db #et-boc .et-l" voran (et_builder_should_wrap_styles). Dann verlieren unsere Regeln (0,2,0 … 0,3,0) gegen Divi (1,2,0 …). Das Plugin setzt dort die Body-Klasse dz-divi-wrapped; die Footer- und Preset-Regeln stehen darum zusätzlich mit „.dz-divi-wrapped #et-boc .et-l …" (gleiche Spezifität wie Divis Präfix → gleiches Kräfteverhältnis wie auf Seiten ohne Wrap). Ohne die Klasse sind diese Zwillinge wirkungslos. Neue Footer-Regeln hier und in 06-components.css immer mit Zwilling anlegen. • Divis Preset- und Modul-CSS lädt NACH dem Design-System (et-critical-inline-css) → gezielt höhere Spezifität. • Divis Text-Preset setzt Schrift und Farbe (!important) direkt an .et_pb_text_inner → Innenelemente erben vom Modul. • Divi 5 baut Sections/Rows/Spalten als Flexbox mit eigenen Breiten/Abständen → für Raster und Karten neutralisiert. Welche Klasse an welches Divi-Element gehört: Anleitung „Dazzletic Divi-Klassen" (Artifact) bzw. Kopf von 07-articles.css. ============================================================= */ /* ---------- SECTION ---------- Gutter aus 02-layout, stärker als Divi-Modul-CSS. In Preset- Sections schlagen die Block-Abstände Divis Spacing-Presets, und Divis Section-Gap entfällt (den Abstand macht die Überschrift). */ .et_pb_section.dz-section{ padding-inline: var(--_sec-x); } .et_pb_section.dz-section[class*="dz-section--"], .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section[class*="dz-section--"]{ --module-gutter: 0px; /* Divis Modul-Abstand (30px auf :root) – Abstände kommen aus dem Preset */ margin: var(--sec-margin, 0); padding-top: var(--sec-pt, var(--space-section)); padding-bottom: var(--sec-pb, var(--space-section)); row-gap: 0; } .et_pb_section.dz-section[class*="dz-section--"]:last-of-type, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section[class*="dz-section--"]:last-of-type{ padding-bottom: var(--sec-end, var(--sec-pb, var(--space-section))); /* wie 02-layout */ } /* Wrap-Modus: Gutter, Rahmen und Hintergrund liefert sonst 02-layout (0,2,0) – gegen Divis präfixierte Section-Regeln (Rahmenstil „dashed", Hintergrundlage) reicht das nicht. */ .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section[class*="dz-section--"]{ padding-inline: var(--_sec-x); border-style: solid; border-color: var(--sec-bc, transparent); border-width: var(--sec-bw, 0); background: var(--sec-bg, transparent); } /* ---------- ROW ---------- In Preset-Sections: volle Breite des Section-Inhalts (Section- Padding begrenzt), gestreckt statt zentriert – so funktionieren auch negative Ränder für randlose Slider. */ .et_pb_section.dz-section[class*="dz-section--"] > .et_pb_row, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section[class*="dz-section--"] > .et_pb_row{ align-self: stretch; width: auto; max-width: none; } /* Divi-Row auf volle Inhaltsbreite bzw. Lesespalte (ohne Preset) */ .et_pb_row.dz-row{ box-sizing: border-box; width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: 0; } .et_pb_row.dz-row--text{ max-width: 720px; } /* ---------- RASTER · Row als .dz-articles ---------- Divi-Flex-Row → Grid; Divis Spaltenbreiten (et_flex_column_*_24) und Spalten-Ränder entfallen, die Spaltenzahl kommt aus --grid-cols. */ .et_pb_row.dz-articles{ display: grid; } .et_pb_row.dz-articles > .et_pb_column{ width: auto; max-width: none; margin: 0; } /* ---------- BILD-MODUL · .dz-img / .dz-article__media ---------- Wrapper füllt den Rahmen, Bild wird beschnitten statt gestreckt. .dz-img = allgemeines Bild (Ratio/Radius über Modifier bzw. --media-ratio/--media-radius), .dz-article__media = Kartenbild. */ .et_pb_image.dz-img{ width: 100%; max-width: none; margin-inline: 0; } .et_pb_image.dz-article__media{ width: auto; max-width: none; margin-inline: calc(-1 * var(--media-bleed, 0px)); line-height: 0; } .et_pb_image:is(.dz-img, .dz-article__media) .et_pb_image_wrap{ display: block; width: 100%; height: 100%; } .et_pb_image.dz-img .et_pb_image_wrap{ overflow: hidden; aspect-ratio: var(--media-ratio, auto); border-radius: var(--media-radius, var(--r-md)); } .et_pb_image:is(.dz-img, .dz-article__media) img{ display: block; width: 100%; height: 100%; object-fit: cover; } .dz-img--4x3 { --media-ratio: 4 / 3; } .dz-img--3x4 { --media-ratio: 3 / 4; } .dz-img--16x9 { --media-ratio: 16 / 9; } .dz-img--square{ --media-ratio: 1 / 1; } .dz-img--r-sm { --media-radius: var(--r-sm); } .dz-img--r-none{ --media-radius: 0; } .et_pb_image.dz-img.dz-img--contain img{ object-fit: contain; } /* Logos, Grafiken */ /* ---------- SECTION-ÜBERSCHRIFT als Modul ---------- Divi nullt margin-bottom von Modulen in Flex-Spalten (.et_pb_section .et_pb_row .et_flex_column > .et_pb_module, 0,4,0) → Abstand zu den Karten und Ausrichtung der Box hier mit 0,5,0. */ .et_pb_section .et_pb_row .et_pb_column > .et_pb_module.dz-section__title, .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_row .et_pb_column > .et_pb_module.dz-section__title{ margin-bottom: var(--head-mb, var(--space-heading-gap)); margin-inline: var(--head-mx, 0 auto); } .et_pb_section .et_pb_row .et_pb_column > .et_pb_module.dz-lead, .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_row .et_pb_column > .et_pb_module.dz-lead{ margin-bottom: var(--lead-mb, 0); } /* ---------- TEXT-, ÜBERSCHRIFT-, CODE-MODUL ---------- Klasse am Modul → Divis Innenelemente übernehmen Schrift, Farbe und Ausrichtung vom Modul (Divi-Preset setzt sie sonst direkt). Typo-Einstellungen im Builder daher leer lassen. */ :is(.et_pb_text, .et_pb_heading, .et_pb_code):is( .dz-section__title, .dz-article__cat, .dz-article__title, .dz-article__credit, .dz-article__excerpt, .dz-hero-title, .dz-page-title, .dz-quote, .dz-credit, .dz-link, .dz-footer-link, .dz-more, .dz-footer-col__title, .dz-lead, .dsp-hero__title, .dsp-hero__excerpt, .dsp-hero__credit ) :is(.et_pb_text_inner, .et_pb_heading_container, .et_pb_code_inner, h1, h2, h3, h4, h5, h6, p), .dz-divi-wrapped #et-boc .et-l :is(.et_pb_text, .et_pb_heading, .et_pb_code):is( .dz-section__title, .dz-article__cat, .dz-article__title, .dz-article__credit, .dz-article__excerpt, .dz-hero-title, .dz-page-title, .dz-quote, .dz-credit, .dz-link, .dz-footer-link, .dz-more, .dz-footer-col__title, .dz-lead, .dsp-hero__title, .dsp-hero__excerpt, .dsp-hero__credit ) :is(.et_pb_text_inner, .et_pb_heading_container, .et_pb_code_inner, h1, h2, h3, h4, h5, h6, p){ margin: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; color: inherit !important; } /* Links in Titeln/Texten: erben statt Divi-Linkfarbe + Unterstrich */ :is(.et_pb_text, .et_pb_heading):is( .dz-section__title, .dz-article__title, .dz-article__credit, .dz-article__excerpt, .dz-hero-title, .dz-page-title, .dz-quote ) :is(.et_pb_text_inner, .et_pb_heading_container) a, .dz-divi-wrapped #et-boc .et-l :is(.et_pb_text, .et_pb_heading):is( .dz-section__title, .dz-article__title, .dz-article__credit, .dz-article__excerpt, .dz-hero-title, .dz-page-title, .dz-quote ) :is(.et_pb_text_inner, .et_pb_heading_container) a{ color: inherit; text-decoration: none; } .et_pb_module.dz-article__title :is(.et_pb_text_inner, .et_pb_heading_container) a:hover{ text-decoration: underline; text-decoration-color: var(--c-green); text-underline-offset: 3px; } /* Kategorie-Labels (Code- oder Text-Modul mit Kategorie-Links) */ .et_pb_module:is(.dz-article__cat, .tags) :is(.et_pb_text_inner, .et_pb_code_inner, ul) a{ color: var(--chip-color, var(--c-black)); text-decoration: none; } /* ---------- BUTTON-MODUL ---------- Divi: body .et_pb_button (Schrift/Rahmen), line-height !important, Hover mit anderem Padding + transparentem Rahmen, Pfeil-Icon. */ .et_pb_button.dz-btn{ font-size: var(--_btn-fs); font-weight: var(--_btn-fw); line-height: var(--lh-tight) !important; padding: var(--_btn-pad); border: var(--_btn-border); border-radius: var(--_btn-radius); background: var(--_btn-bg); color: var(--_btn-color); } .et_pb_button.dz-btn:hover, .et_pb_module .et_pb_button.dz-btn:hover{ padding: var(--_btn-pad); border: var(--_btn-border); } .et_pb_button.dz-btn::after{ content: none; display: none; } /* ---------- FOOTER (Theme Builder) ---------- Row der Footer-Section wird zum Raster (--footer-cols), Divis Spaltenbreiten und Row-Abstände entfallen. */ .et_pb_section.dz-section--footer > .et_pb_row, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--footer > .et_pb_row{ display: grid; grid-template-columns: var(--footer-cols, 1fr); gap: var(--footer-gap-y, 0) var(--footer-gap-x, 0); } .et_pb_section.dz-section--footer > .et_pb_row > .et_pb_column, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--footer > .et_pb_row > .et_pb_column{ width: auto; max-width: none; margin-block: 0; /* seitlich nicht: Akkordeon-Linien laufen per negativem Rand bis zum Rahmen */ } /* Abstände im Newsletter-Teil macht der Inhalt (Überschrift, Einleitung) */ .et_pb_section.dz-section--footer-newsletter > .et_pb_row, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--footer-newsletter > .et_pb_row{ row-gap: 0; } .et_pb_section.dz-section--footer-newsletter > .et_pb_row + .et_pb_row, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--footer-newsletter > .et_pb_row + .et_pb_row{ margin-top: 0; } /* Brand-Spalte: Divis Spalten-Gap durch den Preset-Abstand ersetzen */ .et_pb_column.dz-footer__brand, .dz-divi-wrapped #et-boc .et-l .et_pb_column.dz-footer__brand{ row-gap: var(--footer-brand-gap, 24px); padding-bottom: var(--footer-brand-pb, 0); } .et_pb_image.dz-footer__logo .et_pb_image_wrap, .dz-divi-wrapped #et-boc .et-l .et_pb_image.dz-footer__logo .et_pb_image_wrap{ display: block; width: auto; } .et_pb_image.dz-footer__logo .et_pb_image_wrap img, .dz-divi-wrapped #et-boc .et-l .et_pb_image.dz-footer__logo .et_pb_image_wrap img{ /* schlägt feste Modulgrößen */ width: auto; max-width: 100%; height: var(--footer-logo-h, 30px); } /* Social-Row: Link-Module nebeneinander, nur Icon (Linktext = Netzwerk- name bleibt für Screenreader lesbar, ist aber unsichtbar) */ .dz-footer__social, .et_pb_row.dz-footer__social > .et_pb_column, .dz-divi-wrapped #et-boc .et-l .dz-footer__social, .dz-divi-wrapped #et-boc .et-l .et_pb_row.dz-footer__social > .et_pb_column{ display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--footer-icon-gap, 24px); width: auto; padding: 0; } .dz-footer__social .et_pb_link, .dz-divi-wrapped #et-boc .et-l .dz-footer__social .et_pb_link{ display: inline-flex; align-items: center; gap: 0; font-size: 0; line-height: 0; color: var(--footer-icon-color, var(--c-black)); text-decoration: none; } .dz-footer__social .et_pb_link .et-pb-icon, .dz-divi-wrapped #et-boc .et-l .dz-footer__social .et_pb_link .et-pb-icon{ font-size: var(--footer-icon, 20px); line-height: 1; color: inherit; } .dz-footer__social .et_pb_link:hover, .dz-divi-wrapped #et-boc .et-l .dz-footer__social .et_pb_link:hover{ color: var(--c-purple); } /* Link-Spalten: Divis Menü-Modul ohne Hamburger (≤980), immer als senkrechte Linkliste */ .dz-footer__nav .et_pb_menu .et_mobile_nav_menu, .dz-divi-wrapped #et-boc .et-l .dz-footer__nav .et_pb_menu .et_mobile_nav_menu{ display: none; } .dz-footer__nav .et_pb_menu .et_pb_menu__menu, .dz-footer__nav .et_pb_menu .et_pb_menu__menu > nav, .dz-divi-wrapped #et-boc .et-l .dz-footer__nav .et_pb_menu .et_pb_menu__menu, .dz-divi-wrapped #et-boc .et-l .dz-footer__nav .et_pb_menu .et_pb_menu__menu > nav{ display: block; } .dz-footer__nav .et_pb_menu, .dz-divi-wrapped #et-boc .et-l .dz-footer__nav .et_pb_menu{ margin: 0; padding: 0; background: none; text-align: left; } .dz-footer__nav .et_pb_menu .et-menu, .dz-divi-wrapped #et-boc .et-l .dz-footer__nav .et_pb_menu .et-menu{ display: flex; flex-direction: column; align-items: flex-start; gap: var(--footer-link-gap, 10px); margin: 0; padding: 0; } .dz-footer__nav .et_pb_menu .et-menu > li, .dz-divi-wrapped #et-boc .et-l .dz-footer__nav .et_pb_menu .et-menu > li{ display: block; margin: 0; padding: 0; line-height: 1.4; } .dz-footer__nav .et_pb_menu .et-menu > li > a, .dz-divi-wrapped #et-boc .et-l .dz-footer__nav .et_pb_menu .et-menu > li > a{ padding: 0; font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--footer-link-fs, 16px); line-height: 1.4; color: var(--footer-link-color, var(--c-black)); text-decoration: none; transition: none; } .dz-footer__nav .et_pb_menu .et-menu > li > a:hover, .dz-divi-wrapped #et-boc .et-l .dz-footer__nav .et_pb_menu .et-menu > li > a:hover{ opacity: 1; text-decoration: underline; text-decoration-color: var(--c-green); text-underline-offset: 3px; } .dz-footer__nav .dz-footer-col__title .et_pb_text_inner p, .dz-divi-wrapped #et-boc .et-l .dz-footer__nav .dz-footer-col__title .et_pb_text_inner p{ font-weight: var(--weight-semi); } /* ---------- MIXTAPE-BEITRAG · HERO ---------- Presets mixtape-hero / mixtape-title (08-blocks.css 21–22), Regeln fürs Template: dsp.css. In Divi: Section-Klasse dz-section dz-section--mixtape-hero; die Row ist das schwarze Band (Klasse dsp-hero__band), ihre erste Spalte das Bild (dsp-hero__media), die zweite die Textspalte (dsp-hero__text dz-section--mixtape-title); Titel, Kurzbeschreibung und Credits sind Text-Module mit den Klassen dsp-hero__title / dsp-hero__excerpt / dsp-hero__credit (Schrift kommt vom Modul, s. o.). Divi 5 setzt Row-Abstände per Preset mit !important und gibt Spalten feste Breiten (et_flex_column_*) → hier gezielt höhere Spezifität, im Wrap-Modus mit Zwilling. Builder-Einstellungen für Abstand, Hintergrund, Rundung und Typografie an diesen Elementen leer lassen. */ .et_pb_section .et_pb_row.dsp-hero__band, .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_row.dsp-hero__band{ box-sizing: border-box; display: flex; flex-direction: var(--hero-dir, column); align-items: var(--hero-align, stretch); gap: var(--hero-gap, 0); width: auto; max-width: none !important; /* Divi: globale Zeilenbreite (1400px !important) */ margin: 0; padding: var(--hero-pad, 0) !important; border-radius: var(--hero-radius, 0); background: var(--hero-bg, var(--c-black, #000)); box-shadow: var(--hero-shadow, none); } .et_pb_section .et_pb_row.dsp-hero__band > .et_pb_column, .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_row.dsp-hero__band > .et_pb_column{ box-sizing: border-box; width: auto; max-width: none; margin: 0; } .et_pb_section .et_pb_row.dsp-hero__band > .et_pb_column.dsp-hero__media, .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_row.dsp-hero__band > .et_pb_column.dsp-hero__media{ display: block; flex: 0 0 auto; width: var(--media-w, 100%); max-width: 100%; padding: 0; aspect-ratio: var(--media-ratio, auto); overflow: hidden; border-radius: var(--media-radius, 0); } .dsp-hero__media :is(.et_pb_module, .et_pb_code_inner, .et_pb_image_wrap){ display: block; width: 100%; height: 100%; margin: 0; padding: 0; max-width: none; } .dsp-hero__media :is(.et_pb_code_inner, .et_pb_image_wrap) img{ display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } .et_pb_section .et_pb_row.dsp-hero__band > .et_pb_column.dsp-hero__text, .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_row.dsp-hero__band > .et_pb_column.dsp-hero__text{ display: block; flex: 0 1 var(--hero-text-w, auto); min-width: 0; padding: var(--text-pad, 0); } /* Text-Module der Textspalte: Abstände kommen aus dem Preset (Divi nullt die Modul-Ränder in Flex-Spalten) */ .et_pb_section .et_pb_row .et_pb_column.dsp-hero__text > .et_pb_module.dsp-hero__excerpt, .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_row .et_pb_column.dsp-hero__text > .et_pb_module.dsp-hero__excerpt{ margin: var(--text-gap-1, 20px) 0 0 !important; } .et_pb_section .et_pb_row .et_pb_column.dsp-hero__text > .et_pb_module.dsp-hero__credit, .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_row .et_pb_column.dsp-hero__text > .et_pb_module.dsp-hero__credit{ margin: var(--text-gap-2, 24px) 0 0 var(--credit-ml, 0) !important; } /* Credits: der gestrichelte Unterstrich liegt am Absatz im Text-Modul */ .et_pb_text.dsp-hero__credit .et_pb_text_inner > p, .dz-divi-wrapped #et-boc .et-l .et_pb_text.dsp-hero__credit .et_pb_text_inner > p{ display: inline-block; max-width: 100%; padding: 0 var(--credit-px, 0) var(--credit-line-gap, 12px); background: repeating-linear-gradient(90deg, var(--credit-line-color, var(--c-purple-credit, #903DFC)) 0 var(--credit-dash, 4px), transparent var(--credit-dash, 4px) calc(var(--credit-dash, 4px) + var(--credit-dash-gap, 4px))) left bottom / 100% var(--credit-line-w, 2px) no-repeat; } /* Typografie der Hero-Text-Module am Modul selbst: Divis „.et_pb_text { line-height: 1.7em }" (1,3,0) schlägt die Regeln aus dsp.css; die inneren h1/p erben sie per font: inherit (Liste oben). */ .et_pb_text.dsp-hero__title, .dz-divi-wrapped #et-boc .et-l .et_pb_text.dsp-hero__title{ margin: 0; padding: 0; font-family: var(--font-body, "Lexend", sans-serif); font-weight: var(--title-fw, var(--fw-semibold, 600)); font-size: var(--title-fs, 24px); line-height: var(--title-lh, 28px); letter-spacing: var(--title-ls, 0); text-transform: none; color: var(--title-color, var(--c-white, #fff)); } .et_pb_text.dsp-hero__excerpt, .dz-divi-wrapped #et-boc .et-l .et_pb_text.dsp-hero__excerpt{ padding: 0; font-family: var(--font-body, "Lexend", sans-serif); font-weight: var(--excerpt-fw, var(--fw-regular, 400)); font-size: var(--excerpt-fs, 19px); line-height: var(--excerpt-lh, 23px); color: var(--excerpt-color, var(--c-white, #fff)); } .et_pb_text.dsp-hero__credit, .dz-divi-wrapped #et-boc .et-l .et_pb_text.dsp-hero__credit{ padding: 0; font-family: var(--font-heading, "League Spartan", sans-serif); font-weight: var(--fw-light, 300); font-size: var(--credit-fs, var(--fs-credit-article, 13px)); line-height: var(--credit-lh, 1.2); text-align: var(--credit-align, center); color: var(--credit-color, var(--c-white, #fff)); } /* ---------- MIXTAPE-BEITRAG · LESESPALTE aus mehreren Text-Modulen ---------- In Divi ist meist jeder Absatz und jeder Zwischentitel ein eigenes Text-Modul (Klasse dsp-body__text am Modul ist optional: es gilt für jedes Text-Modul einer Body-Section); die Abstände dazwischen liegen darum am Modul: h2-Modul nach einem Modul = --sub-mt (nach dem Einleitungsabsatz = --sub-mt-intro), Absatz-Modul nach Absatz-Modul = --txt-gap. Der Abstand h2 → Absatz steckt im unteren Rand des h2 (dsp.css). Mit !important, weil Divi-Module oft eigene Abstände aus dem Builder mitbringen („margin-top: 49px !important" am Modul). */ .et_pb_section .et_pb_row .et_pb_column > .et_pb_text:is(.dsp-body__text, .dz-section--mixtape-body *):has(> .et_pb_text_inner > p) + .et_pb_text:is(.dsp-body__text, .dz-section--mixtape-body *):has(> .et_pb_text_inner > p), .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_row .et_pb_column > .et_pb_text:is(.dsp-body__text, .dz-section--mixtape-body *):has(> .et_pb_text_inner > p) + .et_pb_text:is(.dsp-body__text, .dz-section--mixtape-body *):has(> .et_pb_text_inner > p){ margin-top: var(--txt-gap, 33px) !important; } .et_pb_section .et_pb_row .et_pb_column > .et_pb_text:is(.dsp-body__text, .dz-section--mixtape-body *) + .et_pb_text:is(.dsp-body__text, .dz-section--mixtape-body *):has(> .et_pb_text_inner > h2), .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_row .et_pb_column > .et_pb_text:is(.dsp-body__text, .dz-section--mixtape-body *) + .et_pb_text:is(.dsp-body__text, .dz-section--mixtape-body *):has(> .et_pb_text_inner > h2){ margin-top: var(--sub-mt, 34px) !important; } .et_pb_section .et_pb_row .et_pb_column > .et_pb_text:is(.dsp-body__text, .dz-section--mixtape-body *):first-child:has(> .et_pb_text_inner > p) + .et_pb_text:is(.dsp-body__text, .dz-section--mixtape-body *):has(> .et_pb_text_inner > h2), .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_row .et_pb_column > .et_pb_text:is(.dsp-body__text, .dz-section--mixtape-body *):first-child:has(> .et_pb_text_inner > p) + .et_pb_text:is(.dsp-body__text, .dz-section--mixtape-body *):has(> .et_pb_text_inner > h2){ margin-top: var(--sub-mt-intro, var(--sub-mt, 34px)) !important; } /* erstes Text-Modul einer Spalte der Lesespalte: kein Abstand nach oben (Divi-Builder setzt oft 49px !important am Zwischentitel-Modul; die Section-Abstände tragen die Presets) */ .et_pb_section .et_pb_row .et_pb_column > .et_pb_text:is(.dsp-body__text, .dz-section--mixtape-body *):first-child, .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_row .et_pb_column > .et_pb_text:is(.dsp-body__text, .dz-section--mixtape-body *):first-child{ margin-top: 0 !important; } /* ---------- MIXTAPE-BEITRAG · SEITENRAHMEN ---------- Divis Standard-Beitragslayout legt den Inhalt in #main-content > .container (80 % Breite, 58 px Innenabstand oben, #left-area 79,125 %). Das randlose Band und die Breiten der Presets brauchen die volle Seitenbreite; die Abstände zwischen den Blöcken tragen die Presets selbst. Nur für die Einzelseite des Mixtape-Beitrags (Divi-Body-Template nicht nötig). */ body.single-spotify_playlist #main-content .container, body.single-spotify_playlist #main-content #content-area, body.single-spotify_playlist #main-content #left-area{ float: none; width: 100%; max-width: none; margin: 0; padding: 0; } body.single-spotify_playlist #main-content .container::before{ display: none; } /* Divis Beitragstitel (

in .et_post_meta_wrapper) steht sonst als zweiter, schwarzer Titel über dem Band – in Figma gibt es ihn nicht. Nur optisch ausgeblendet: er bleibt die h1 der Seite, solange der Hero-Titel ein

ist. */ body.single-spotify_playlist #main-content .et_post_meta_wrapper{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Hero-Section: Hintergrund und Rundung gehören an das Band (Row, oben), nicht an die Section. Eine Hintergrundfarbe oder ein Eckenradius an der Section im Builder (!important) färbt sonst den Abstand rund ums Band schwarz und rundet die Section ab. Der Builder-Wert wird hier zurückgesetzt. */ .et-l--post > .et_builder_inner_content .et_pb_section.dz-section.dz-section--mixtape-hero, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section.dz-section--mixtape-hero{ background: var(--sec-bg, transparent) !important; border-radius: 0 !important; overflow: visible !important; } /* Bild-Spalte: Die Rundung kommt aus dem Preset (--media-radius, Mobile 0) und liegt an der Spalte (oben). Ein Radius am Bild- oder Code-Modul im Builder (z. B. 30px) würde ihn auch auf Mobile erzwingen, wo das Bild randlos sein soll. */ .dsp-hero__media :is(.et_pb_module, .et_pb_code_inner, .et_pb_image_wrap, img), .dz-divi-wrapped #et-boc .et-l .dsp-hero__media :is(.et_pb_module, .et_pb_code_inner, .et_pb_image_wrap, img){ border-radius: 0 !important; } /* ---------- MIXTAPE-BEITRAG · CREDITS aus mehreren Text-Modulen ---------- Oft ein Modul je Angabe (Text by · Photos by · Datum, z. B. mit Dynamic Content) in einer verschachtelten Row: die Row ist die Zeile unter der Kurzbeschreibung, ihre Spalte der Block mit der gestrichelten Linie, die Module stehen mit dem Abstand eines Leerzeichens nebeneinander. Ein einzelnes Modul in der Textspalte (oben) braucht das nicht. */ .et_pb_section .et_pb_row_nested:has(> .et_pb_column > .et_pb_text.dsp-hero__credit), .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_row_nested:has(> .et_pb_column > .et_pb_text.dsp-hero__credit){ display: flex; justify-content: var(--credit-align, center); width: auto; max-width: 100%; margin: var(--text-gap-2, 24px) 0 0 var(--credit-ml, 0) !important; padding: 0 !important; border: 0 !important; /* Linie zeichnet die Spalte (unten); ein Rahmen aus dem Builder läge doppelt darunter */ } .et_pb_section .et_pb_row_nested > .et_pb_column:has(> .et_pb_text.dsp-hero__credit), .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_row_nested > .et_pb_column:has(> .et_pb_text.dsp-hero__credit){ display: flex; flex-flow: row wrap; column-gap: .25em; flex: 0 1 auto; width: auto; max-width: 100%; margin: 0; padding: 0 var(--credit-px, 0) var(--credit-line-gap, 12px); background: repeating-linear-gradient(90deg, var(--credit-line-color, var(--c-purple-credit, #903DFC)) 0 var(--credit-dash, 4px), transparent var(--credit-dash, 4px) calc(var(--credit-dash, 4px) + var(--credit-dash-gap, 4px))) left bottom / 100% var(--credit-line-w, 2px) no-repeat; } .et_pb_section .et_pb_row_nested > .et_pb_column > .et_pb_text.dsp-hero__credit, .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_row_nested > .et_pb_column > .et_pb_text.dsp-hero__credit{ flex: 0 1 auto; width: auto; margin: 0 !important; } .et_pb_section .et_pb_row_nested > .et_pb_column > .et_pb_text.dsp-hero__credit .et_pb_text_inner > p, .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_row_nested > .et_pb_column > .et_pb_text.dsp-hero__credit .et_pb_text_inner > p{ display: block; padding: 0; background: none; } /* ---------- MIXTAPE-BEITRAG · EMBED-ÜBERSTAND ---------- Video-/Playlist-Modul: --embed-bleed (Preset mixtape-video) verlängert das Modul nach rechts; Divi setzt die Modulbreite auf 100 % (Video: .et_flex_column > .et_pb_video). */ .et_pb_section .et_pb_row .et_pb_column > .et_pb_module.dsp-embed, .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_row .et_pb_column > .et_pb_module.dsp-embed{ width: calc(100% + var(--embed-bleed, 0px)); max-width: none; } /* ---------- MIXTAPE-BEITRAG · ABSATZ 2 ---------- Zweites Absatz-Modul der Einleitung (Modul 1 = Absatz, Modul 2 = Zwischentitel, Modul 3 = dieser Absatz): Breite der Textbox --p2-w, Schriftgröße --p2-fs (Figma weicht dort ab, s. 08-blocks.css, 23). */ .et_pb_section .et_pb_row .et_pb_column > .et_pb_text:is(.dsp-body__text, .dz-section--mixtape-body *):first-child:has(> .et_pb_text_inner > p) + .et_pb_text:has(> .et_pb_text_inner > h2) + .et_pb_text:has(> .et_pb_text_inner > p), .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_row .et_pb_column > .et_pb_text:is(.dsp-body__text, .dz-section--mixtape-body *):first-child:has(> .et_pb_text_inner > p) + .et_pb_text:has(> .et_pb_text_inner > h2) + .et_pb_text:has(> .et_pb_text_inner > p){ max-width: var(--p2-w, none); } .et_pb_section .et_pb_row .et_pb_column > .et_pb_text:is(.dsp-body__text, .dz-section--mixtape-body *):first-child:has(> .et_pb_text_inner > p) + .et_pb_text:has(> .et_pb_text_inner > h2) + .et_pb_text:has(> .et_pb_text_inner > p) .et_pb_text_inner > p, .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_row .et_pb_column > .et_pb_text:is(.dsp-body__text, .dz-section--mixtape-body *):first-child:has(> .et_pb_text_inner > p) + .et_pb_text:has(> .et_pb_text_inner > h2) + .et_pb_text:has(> .et_pb_text_inner > p) .et_pb_text_inner > p{ font-size: var(--p2-fs, var(--txt-fs, var(--fs-body, 18px))); } /* ---------- MIXTAPE-BEITRAG · LOAD MORE ("WEITERE MIXTAPES") ---------- Preset mixtape-more (08-blocks.css, 26): Section-Klasse dz-section dz-section--mixtape-more, Button-Modul mit Klasse dz-more. Divis Button-Modul bringt Rahmen, Hintergrund, Innenabstand, Schatten, Hover und Pfeil-Icon mit (auch aus Builder-Einstellungen, teils !important) – hier zurückgesetzt, damit nur der unterstrichene Link bleibt (.dz-more in 06-components.css). */ .et_pb_section.dz-section--mixtape-more .et_pb_button_module_wrapper, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--mixtape-more .et_pb_button_module_wrapper{ margin: 0 !important; padding: 0 !important; text-align: center !important; } .et_pb_section.dz-section--mixtape-more .et_pb_button.dz-more, .et_pb_section.dz-section--mixtape-more .et_pb_button.dz-more:hover, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--mixtape-more .et_pb_button.dz-more, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--mixtape-more .et_pb_button.dz-more:hover{ display: inline-block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; font-family: var(--font-heading) !important; font-weight: var(--fw-semibold) !important; font-size: var(--more-fs, 26px) !important; line-height: var(--more-lh, 1) !important; letter-spacing: var(--more-ls, 0) !important; text-transform: uppercase !important; text-decoration: underline !important; text-underline-offset: var(--more-ul-offset, 2px) !important; text-decoration-color: var(--c-black) !important; color: var(--c-black) !important; transition: none !important; } .et_pb_section.dz-section--mixtape-more .et_pb_button.dz-more:hover, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--mixtape-more .et_pb_button.dz-more:hover{ text-decoration-color: var(--c-green) !important; } .et_pb_section.dz-section--mixtape-more .et_pb_button.dz-more::before, .et_pb_section.dz-section--mixtape-more .et_pb_button.dz-more::after, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--mixtape-more .et_pb_button.dz-more::before, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--mixtape-more .et_pb_button.dz-more::after{ content: none !important; display: none !important; } /* ---------- BEITRAG · DETAILSEITE ---------- Presets post-title / post-hero / post-body / post-related (08-blocks.css, 27–30). Der Beitrag steckt im Divi Theme Builder (Body-Vorlage), Klassen im Builder (Feld „CSS-Klasse"): Section dz-section dz-section--post-title | -post-hero | -post-body | -post-related Titel Post-Title-Modul dsp-body__title Byline (Text-Modul) dsp-body__title_info Bild Bild-Module des Beitrags dsp-body__image (+ dsp-body__image_portrait / dsp-body__image_landscape beim versetzten Paar) Nachweis Text-Modul unter dem Bild dsp-body__image_copyright Text Text-Module der Lesespalte brauchen keine Klasse (gelten in post-body); Zitat = H2 (oder dsp-body__quote), Zwischentitel = H3 (oder dsp-body__subtitle) Divi 5 gibt Sections, Rows und Spalten Flexbox mit festen Breiten, Modulen Abstände aus dem Builder (oft !important) und dem Text-Preset Schrift/Farbe direkt am .et_pb_text_inner → hier gezielt höhere Spezifität; die Builder-Einstellungen für Abstand, Typografie und Rahmen an diesen Modulen leer lassen. Die Seite ist ein Standard-Beitrag (kein Wrap-Modus) – keine Zwillings-Selektoren. */ /* Rows/Spalten der Beitrags-Sections: kein Divi-Abstand */ .et_pb_section.dz-section--post-title > .et_pb_row, .et_pb_section.dz-section--post-hero > .et_pb_row, .et_pb_section.dz-section--post-body > .et_pb_row, .et_pb_section.dz-section--post-related > .et_pb_row{ margin: 0; padding: 0; } .et_pb_section.dz-section--post-title .et_pb_column, .et_pb_section.dz-section--post-hero .et_pb_column, .et_pb_section.dz-section--post-body .et_pb_column, .et_pb_section.dz-section--post-related .et_pb_column{ margin: 0; padding: 0; } .et_pb_section.dz-section--post-body{ overflow-x: clip; } /* randlose Bilder (100vw) ragen um die halbe Scrollbar über */ /* Titel (Post-Title-Modul) */ .et_pb_section .et_pb_row .et_pb_column > .et_pb_post_title.dsp-body__title{ width: 100%; margin: 0 !important; padding: 0 !important; font-family: var(--font-body); font-weight: var(--title-fw, var(--fw-semibold)); font-size: var(--title-fs, 32px); line-height: var(--title-lh, 1.1); letter-spacing: var(--title-ls, 0); text-align: center; text-transform: none; color: var(--title-color, var(--c-black)); } .et_pb_post_title.dsp-body__title .et_pb_title_container, .et_pb_post_title.dsp-body__title h1.entry-title{ margin: 0; padding: 0 !important; font: inherit !important; letter-spacing: inherit !important; text-align: center !important; text-transform: none !important; color: inherit !important; } .et_pb_post_title.dsp-body__title h1.entry-title{ max-width: var(--title-w, none); margin-inline: auto; } /* Divi setzt Größe/Zeilenhöhe am Titel mit !important und der Modulnummer (.et_pb_post_title_0_tb_body …) → höhere Spezifität */ .et_pb_section .et_pb_row .et_pb_column > .et_pb_post_title.dsp-body__title .et_pb_title_container h1.entry-title{ font-family: var(--font-body) !important; font-weight: var(--title-fw, var(--fw-semibold)) !important; font-size: var(--title-fs, 32px) !important; line-height: var(--title-lh, 1.1) !important; letter-spacing: var(--title-ls, 0) !important; } /* Byline: eine Zeile, lila Strichlinie nur unter dem Text */ .et_pb_section .et_pb_row .et_pb_column > .et_pb_text.dsp-body__title_info{ align-self: center; width: auto; max-width: 100%; margin: var(--text-gap-2, 24px) 0 0 !important; padding: 0 !important; border: 0 !important; font-family: var(--font-heading); font-weight: var(--fw-light); font-size: var(--credit-fs, 13px); line-height: var(--credit-lh, 1.2); text-align: center; color: var(--credit-color, var(--c-black)); } .et_pb_text.dsp-body__title_info .et_pb_text_inner{ margin: 0; padding: 0; font: inherit !important; text-align: inherit !important; color: inherit !important; } .et_pb_text.dsp-body__title_info .et_pb_text_inner > p{ display: inline-block; max-width: 100%; margin: 0; padding: 0 0 var(--credit-line-gap, 8px) !important; font: inherit !important; letter-spacing: inherit; color: inherit !important; background: repeating-linear-gradient(90deg, var(--credit-line-color, var(--c-purple-credit, #903DFC)) 0 var(--credit-dash, 4px), transparent var(--credit-dash, 4px) calc(var(--credit-dash, 4px) + var(--credit-dash-gap, 4px))) left bottom / 100% var(--credit-line-w, 2px) no-repeat; } /* Bilder: Beitragsbild (post-hero) und Bilder der Lesespalte (post-body) – Zuschnitt per Seitenverhältnis */ .et_pb_section.dz-section--post-hero .et_pb_image, .et_pb_section.dz-section--post-body .et_pb_image{ width: 100%; max-width: none; margin: 0 !important; padding: 0; line-height: 0; } .et_pb_section.dz-section--post-hero .et_pb_image .et_pb_image_wrap, .et_pb_section.dz-section--post-body .et_pb_image .et_pb_image_wrap{ display: block; width: 100%; overflow: hidden; border-radius: var(--img-radius, var(--media-radius, 0)); } .et_pb_section.dz-section--post-hero .et_pb_image .et_pb_image_wrap{ aspect-ratio: var(--media-ratio, auto); } .et_pb_section.dz-section--post-hero .et_pb_image img, .et_pb_section.dz-section--post-body .et_pb_image img{ display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } /* Bildnachweis unter dem Bild */ .et_pb_section .et_pb_row .et_pb_column > .et_pb_text.dsp-body__image_copyright{ align-self: flex-start; width: auto; max-width: 100%; margin: var(--cap-gap, 6px) 0 0 !important; padding: 0 !important; font-family: var(--font-heading); font-weight: var(--fw-regular); font-size: var(--cap-fs, 11px); line-height: 1.2; letter-spacing: 0; text-align: left; text-transform: uppercase; color: var(--cap-color, var(--c-gray-1)); } .et_pb_text.dsp-body__image_copyright .et_pb_text_inner, .et_pb_text.dsp-body__image_copyright .et_pb_text_inner > p{ margin: 0; padding: 0 !important; font: inherit !important; letter-spacing: inherit !important; text-align: inherit !important; text-transform: inherit !important; color: inherit !important; } /* Lesespalte: Text-Module der Body-Section (ohne Bildnachweis) */ .et_pb_section.dz-section--post-body .et_pb_column > .et_pb_text:not(.dsp-body__image_copyright){ width: 100%; max-width: var(--txt-w, 720px); margin: 0 auto !important; padding: 0 !important; font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--txt-fs, 18px); line-height: var(--txt-lh, 33px); letter-spacing: var(--txt-ls, .01em); text-align: left; text-transform: none; color: var(--c-black); } .et_pb_section.dz-section--post-body .et_pb_text:not(.dsp-body__image_copyright) .et_pb_text_inner{ margin: 0; padding: 0; font: inherit !important; letter-spacing: inherit !important; text-align: inherit !important; text-transform: inherit !important; color: inherit !important; } .et_pb_section.dz-section--post-body .et_pb_text:not(.dsp-body__image_copyright) .et_pb_text_inner > :is(p, h2, h3, h4){ margin: 0; padding: 0 !important; font: inherit !important; letter-spacing: inherit !important; text-align: inherit !important; text-transform: inherit !important; color: inherit !important; } .et_pb_section.dz-section--post-body .et_pb_text .et_pb_text_inner > p + p{ margin-top: var(--txt-gap, 33px); } .et_pb_section.dz-section--post-body .et_pb_text:not(.dsp-body__image_copyright) .et_pb_text_inner a{ color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } /* Absatz-Modul nach Absatz-Modul */ .et_pb_section.dz-section--post-body .et_pb_column > .et_pb_text:has(> .et_pb_text_inner > p) + .et_pb_text:has(> .et_pb_text_inner > p){ margin-top: var(--txt-gap, 33px) !important; } /* Zitat (H2) */ .et_pb_section.dz-section--post-body .et_pb_column > .et_pb_text:is(.dsp-body__quote, :has(> .et_pb_text_inner > h2):not(.dsp-body__subtitle)){ max-width: var(--quote-w, 720px); margin-bottom: var(--quote-mb, 34px) !important; font-weight: var(--quote-fw, var(--fw-semibold)); font-size: var(--quote-fs, 28px); line-height: var(--quote-lh, 34px); letter-spacing: 0; text-align: center; } /* Zwischentitel (H3 / H4) */ .et_pb_section.dz-section--post-body .et_pb_column > .et_pb_text:is(.dsp-body__subtitle, :has(> .et_pb_text_inner > :is(h3, h4))){ margin-bottom: var(--sub-mb, 14px) !important; font-weight: var(--sub-fw, var(--fw-semibold)); font-size: var(--sub-fs, 24px); line-height: var(--sub-lh, 30px); letter-spacing: 0; text-transform: uppercase; } /* Abstand oben: nur wenn ein Modul davor steht (das erste einer Spalte trägt die Row bzw. Section) */ .et_pb_section.dz-section--post-body .et_pb_column > .et_pb_module + .et_pb_text:is(.dsp-body__quote, :has(> .et_pb_text_inner > h2):not(.dsp-body__subtitle)){ margin-top: var(--quote-mt, 40px) !important; } .et_pb_section.dz-section--post-body .et_pb_column > .et_pb_module + .et_pb_text:is(.dsp-body__subtitle, :has(> .et_pb_text_inner > :is(h3, h4))){ margin-top: var(--sub-mt, 36px) !important; } /* Bild-Rows: Abstand zum Text davor/danach */ .et_pb_section.dz-section--post-body > .et_pb_row:has(.et_pb_image){ margin-block: var(--full-mt, 24px) var(--full-mb, 24px); } .et_pb_section.dz-section--post-body > .et_pb_row:has(> .et_pb_column + .et_pb_column){ margin-block: var(--eq-mt, 28px) var(--eq-mb, 24px); } .et_pb_section.dz-section--post-body > .et_pb_row:has(> .et_pb_column + .et_pb_column):has(.dsp-body__image_portrait, .dsp-body__image_landscape){ margin-block: var(--pair-mt, 28px) var(--pair-mb, 24px); } /* Bild allein in der Row: randlos über die ganze Seitenbreite */ .et_pb_section.dz-section--post-body > .et_pb_row > .et_pb_column:only-child > .et_pb_image{ width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) !important; } .et_pb_section.dz-section--post-body > .et_pb_row > .et_pb_column:only-child > .et_pb_image .et_pb_image_wrap{ aspect-ratio: var(--full-ratio, auto); } .et_pb_section.dz-section--post-body > .et_pb_row > .et_pb_column:only-child > .et_pb_text.dsp-body__image_copyright{ margin-left: calc(50% - 50vw) !important; } /* Zwei Spalten mit Bildern: eine Reihe */ .et_pb_section.dz-section--post-body > .et_pb_row:has(> .et_pb_column + .et_pb_column){ display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; width: 100%; max-width: var(--pair-w, 100%); margin-inline: auto; } .et_pb_section.dz-section--post-body > .et_pb_row:has(> .et_pb_column + .et_pb_column) > .et_pb_column{ display: flex; flex-direction: column; flex: 0 1 auto; width: auto; min-width: 0; max-width: none; } /* versetztes Paar: Hochformat links, Querformat rechts (Querformat zur Mitte verschoben) */ .et_pb_section.dz-section--post-body > .et_pb_row:has(> .et_pb_column + .et_pb_column) > .et_pb_column:has(> .dsp-body__image_portrait){ flex-basis: var(--img-a-w, 50%); } .et_pb_section.dz-section--post-body > .et_pb_row:has(> .et_pb_column + .et_pb_column) > .et_pb_column:has(> .dsp-body__image_landscape){ flex-basis: var(--img-b-w, 50%); transform: translateY(var(--img-b-dy, 0px)); } .et_pb_section.dz-section--post-body .et_pb_image.dsp-body__image_portrait .et_pb_image_wrap{ aspect-ratio: var(--img-a-ratio, 3 / 4); } .et_pb_section.dz-section--post-body .et_pb_image.dsp-body__image_landscape .et_pb_image_wrap{ aspect-ratio: var(--img-b-ratio, 16 / 9); } /* gleich große Bilder: Desktop nebeneinander, bis 1024 px untereinander */ .et_pb_section.dz-section--post-body > .et_pb_row:has(> .et_pb_column + .et_pb_column):not(:has(.dsp-body__image_portrait, .dsp-body__image_landscape)){ max-width: 100%; gap: var(--eq-gap, 40px); } .et_pb_section.dz-section--post-body > .et_pb_row:has(> .et_pb_column + .et_pb_column):not(:has(.dsp-body__image_portrait, .dsp-body__image_landscape)) > .et_pb_column{ flex: 1 1 0; } .et_pb_section.dz-section--post-body > .et_pb_row:has(> .et_pb_column + .et_pb_column):not(:has(.dsp-body__image_portrait, .dsp-body__image_landscape)) .et_pb_image .et_pb_image_wrap{ aspect-ratio: var(--eq-ratio, 4 / 3); } @media (max-width: 1024px){ .et_pb_section.dz-section--post-body > .et_pb_row:has(> .et_pb_column + .et_pb_column):not(:has(.dsp-body__image_portrait, .dsp-body__image_landscape)){ flex-direction: column; align-items: center; } .et_pb_section.dz-section--post-body > .et_pb_row:has(> .et_pb_column + .et_pb_column):not(:has(.dsp-body__image_portrait, .dsp-body__image_landscape)) > .et_pb_column{ flex: 0 0 auto; width: var(--eq-w, 100%); max-width: 100%; } } /* Weitere Artikel: Überschrift + grünes Band (Shortcode [dazzletic_related_posts]) */ :is(.dz-section--post-related, .dz-section--recipe-related) .dazzletic-related-heading{ margin: 0 0 var(--head-mb, 40px); padding: 0; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--more-fs, 28px); line-height: var(--more-lh, 1); letter-spacing: var(--more-ls, 0); text-align: center; text-transform: uppercase; text-decoration: underline; text-underline-offset: var(--more-ul-offset, 2px); text-decoration-color: var(--c-black); color: var(--c-black); } /* Karten-Container – zwei Modi wie bei [dazzletic_articles]: • Klasse .dz-article-slider (am Wrapper .dazzletic-related-posts, Shortcode scrollable="yes" = Default; alternativ an der Section): Wisch-Slider, CSS-only, ohne Navi. Scrollfläche bis zum Fensterrand (rechts wie links). Liegen Karten außerhalb des sichtbaren Bereichs, zeigt der Slider --peek-k volle Karten plus den Anteil --peek-p der nächsten (angeschnitten, damit weitere Karten erkennbar sind): Folienbreite = (Breite + Rand − k·Lücke) / (k + p) – bei jeder Fensterbreite, nicht nur an den Figma-Frames (dort exakt deren Werte). • ohne die Klasse (scrollable="no"): Raster mit --grid-cols Spalten, Zeilen umbrechen. Wenige Karten füllen die Breite selbstständig (Klassen dz-related--n1 … n5 vom Shortcode, s. unten). */ :is(.dz-section--post-related, .dz-section--recipe-related){ overflow-x: clip; } /* der Rand-Überstand des Sliders (100vw) darf die Seite nicht verbreitern */ :is(.dz-section--post-related, .dz-section--recipe-related) .dazzletic-related-posts{ --_g3: calc(var(--card-gap, 12px) * 3); --_g4: calc(var(--card-gap, 12px) * 4); --_t11: calc(var(--title-fs, 16px) * 1.1); --_t12: calc(var(--title-fs, 16px) * 1.2); --_t15: calc(var(--title-fs, 16px) * 1.5); --_l11: calc(var(--title-lh, 1.1) * 1.1); /* Zeilenhöhe wächst mit der Schrift (Preset: px im fließenden Bereich, sonst Faktor) */ --_l12: calc(var(--title-lh, 1.1) * 1.2); --_l15: calc(var(--title-lh, 1.1) * 1.5); } :is(.dz-section--post-related, .dz-section--recipe-related) .dazzletic-related-grid{ --_bleed: 0px; box-sizing: border-box; display: grid; grid-template-columns: repeat(var(--_cols, var(--grid-cols, 1)), minmax(0, 1fr)); gap: var(--grid-gap-y, var(--grid-gap-x, 32px)) var(--grid-gap-x, 32px); align-items: start; padding: var(--band-pt, 40px) 0 var(--band-pb, 48px); background: var(--band-bg, var(--c-green)); box-shadow: 0 0 0 100vmax var(--band-bg, var(--c-green)); clip-path: inset(0 -100vmax); scrollbar-width: none; } :is(:is(.dz-section--post-related, .dz-section--recipe-related).dz-article-slider, :is(.dz-section--post-related, .dz-section--recipe-related) .dz-article-slider) .dazzletic-related-grid{ --_bleed: max(var(--sec-px, 0px), calc((100vw - var(--sec-max, 100vw)) / 2)); /* Abstand Container → Fensterrand */ grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: var(--_slide-fill, max(var(--peek-min, 0px), calc((100% + var(--_bleed) - var(--peek-k, 1) * var(--grid-gap-x, 32px)) / (var(--peek-k, 1) + var(--peek-p, .5))))); margin-inline: calc(-1 * var(--_bleed)); padding-inline: var(--_bleed); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--_bleed); } :is(.dz-section--post-related, .dz-section--recipe-related) .dazzletic-related-grid::-webkit-scrollbar{ display: none; } :is(.dz-section--post-related, .dz-section--recipe-related) .dazzletic-related-grid > *{ min-width: 0; scroll-snap-align: start; } :is(.dz-section--post-related, .dz-section--recipe-related) .dazzletic-related-grid > .et_pb_row{ width: auto; max-width: none; margin: 0; padding: 0; } /* Wenige Karten: Darstellung nach Anzahl (Klassen am Wrapper). Passen alle Karten ohne Scrollen in die Zeile – Slider: Desktop 4, Landscape 3, Portrait/Mobile 1; Raster: --grid-cols –, nehmen sie die ganze Breite ein (n Spalten statt Folienbreite). Bei 1 Karte ab 768 px breit (Bild | Text), bei 2 Karten ab 769 px zwei Spalten mit Bild | Text, bei 3 Karten drei gestreckte Spalten. Größen leiten sich aus den fließenden Preset-Werten ab (Faktor am Titel/Abstand). */ :is(.dz-section--post-related, .dz-section--recipe-related) .dz-related--n1{ --_slide-fill: 100%; --_cols: 1; } @media (min-width: 768px){ :is(.dz-section--post-related, .dz-section--recipe-related) .dz-related--n2{ --_cols: 2; } :is(.dz-section--post-related, .dz-section--recipe-related) .dz-related--n1 .dz-article{ --card-dir: row; --card-align: center; --media-w: 50%; --media-ratio: 4 / 3; --card-gap: var(--_g4); --title-fs: var(--_t15); --title-lh: var(--_l15); --title-lines: 3; } } @media (min-width: 769px){ :is(.dz-section--post-related, .dz-section--recipe-related) .dz-related--n2{ --_slide-fill: calc((100% - var(--grid-gap-x, 32px)) / 2); } :is(.dz-section--post-related, .dz-section--recipe-related) .dz-related--n3{ --_slide-fill: calc((100% - 2 * var(--grid-gap-x, 32px)) / 3); --_cols: 3; } :is(.dz-section--post-related, .dz-section--recipe-related) .dz-related--n2 .dz-article{ --card-dir: row; --card-align: center; --media-w: 46%; --card-gap: var(--_g3); --title-fs: var(--_t12); --title-lh: var(--_l12); } :is(.dz-section--post-related, .dz-section--recipe-related) .dz-related--n3 .dz-article{ --title-fs: var(--_t11); --title-lh: var(--_l11); } } @media (min-width: 1025px){ :is(.dz-section--post-related, .dz-section--recipe-related) .dz-related--n4{ --_slide-fill: calc((100% - 3 * var(--grid-gap-x, 32px)) / 4); } } /* Karten im Raster: jede Row des Library-Items ist eine Karte (Bild, Label, Titel untereinander) */ :is(.dz-section--post-related, .dz-section--recipe-related) .dazzletic-related-grid > .et_pb_row > .et_pb_column{ display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; max-width: none; margin: 0; padding: 0; } :is(.dz-section--post-related, .dz-section--recipe-related) .dazzletic-related-grid .et_pb_module{ margin: 0 !important; } :is(.dz-section--post-related, .dz-section--recipe-related) .dazzletic-related-grid .et_pb_image.dz-article__media{ align-self: stretch; } :is(.dz-section--post-related, .dz-section--recipe-related) .dazzletic-related-grid .et_pb_module.dz-article__cat{ margin-top: var(--card-gap, 12px) !important; } :is(.dz-section--post-related, .dz-section--recipe-related) .dazzletic-related-grid .et_pb_module.dz-article__title{ margin-top: var(--body-gap, 10px) !important; } /* Keine verwandten Beiträge: Überschrift plus Hinweis (Shortcode: .dazzletic-related-empty > h3.dazzletic-related-heading + .dazzletic-related-empty__text). Der Hinweis steht in der Optik der Zutaten-Box der Rezeptkarte: lila Rahmen 1 px, Radius 20, Hintergrund lila-tint, zentriert, Lexend Light in Textgröße (Token --fs-body). Breite / Innenabstand / Schrift lassen sich im Preset über --empty-w / -pad / -fs / -lh setzen. Mit Wrap-Zwilling. */ :is(.dz-section--post-related, .dz-section--recipe-related) .dazzletic-related-empty__text, .dz-divi-wrapped #et-boc .et-l :is(.dz-section--post-related, .dz-section--recipe-related) .dazzletic-related-empty__text{ box-sizing: border-box; max-width: min(100%, var(--empty-w, 760px)); margin: 0 auto; padding: var(--empty-pad, clamp(20px, 2.6vw, 32px) clamp(20px, 3.4vw, 40px)); border: 1px solid var(--c-purple); border-radius: var(--r-sm); background: var(--c-purple-tint); font-family: var(--font-body); font-weight: var(--fw-light); font-size: var(--empty-fs, var(--fs-body)); line-height: var(--empty-lh, 1.5); letter-spacing: 0; text-align: center; color: var(--c-black); } /* ---------- REZEPT · DETAILSEITE ---------- Presets recipe-hero / recipe-body / recipe-card / recipe-related (08-blocks.css, 31–34). Beitragstyp rezept (Plugin „Dazzletic Rezepte"): Divi-Builder am Rezept bzw. Theme-Builder-Body. Klassen im Builder (Feld „CSS-Klasse"): Titelblock Section dz-section dz-section--recipe-hero; Row dsp-hero__band (2 Spalten: erst Text, dann Bild); Spalten dsp-hero__text / dsp-hero__media; Text-Module dsp-hero__title, dsp-hero__excerpt, dsp-hero__credit dsp-hero__credit_box (Byline im lila Strichrahmen) Lesespalte Section dz-section dz-section--recipe-body; Text-Module ohne Klasse (Absätze), dsp-body__intro (Einleitung), dsp-body__subtitle_text (Zwischentitel); Row dz-recipe__actions mit Button dz-btn dz-btn--secondary dz-recipe__jump; Bild-Module dsp-body__image (+ dsp-body__image_wide / dsp-body__image_tall); Bilder nebeneinander = zwei Spalten je Row Rezeptkarte Section dz-section dz-section--recipe-card + CSS-ID rezept; Text-Module dz-recipe__title, dz-recipe__servings; Row dz-recipe__grid mit den Spalten dz-recipe__ingredients / dz-recipe__preparation (Module dz-recipe__heading, dz-recipe__list bzw. dz-recipe__steps); Row dz-recipe__actions mit den Buttons dz-btn dz-btn--secondary dz-recipe__print / dz-recipe__pin Weitere Section dz-section dz-section--recipe-related; Code-Modul [dazzletic_related_posts] (Regeln: „Weitere Artikel" unten, gemeinsam mit post-related) Wie bei den anderen Seiten: Builder-Einstellungen für Abstand, Typografie, Rahmen und Hintergrund an diesen Elementen leer lassen. Jede Regel steht zweimal (normal + Wrap-Modus „.dz-divi-wrapped #et-boc .et-l …"), weil Divi auf Einzelseiten eigener Beitragstypen mit Builder-Inhalt sein CSS so präfixt (siehe Kopf dieser Datei). */ /* Rows/Spalten der Rezept-Sections: kein Divi-Abstand */ .et_pb_section.dz-section--recipe-hero > .et_pb_row, .et_pb_section.dz-section--recipe-body > .et_pb_row, .et_pb_section.dz-section--recipe-card > .et_pb_row, .et_pb_section.dz-section--recipe-related > .et_pb_row, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-hero > .et_pb_row, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body > .et_pb_row, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-card > .et_pb_row, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-related > .et_pb_row{ margin: 0; padding: 0; } .et_pb_section.dz-section--recipe-body .et_pb_column, .et_pb_section.dz-section--recipe-card .et_pb_column, .et_pb_section.dz-section--recipe-related .et_pb_column, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body .et_pb_column, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-card .et_pb_column, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-related .et_pb_column{ margin: 0; padding: 0; row-gap: 0; } /* row-gap: Divis Spaltenabstand (--vertical-gap) – Abstände tragen die Presets */ /* ---- Titelblock ---- Band, Spalten, Titel, Kurzbeschreibung und Byline-Grundform kommen aus „MIXTAPE-BEITRAG · HERO" (dsp-hero__*). Hier nur, was die Rezeptseite anders macht: Textspalte als Flex-Spalte, damit die Byline unten bündig zum Bild sitzt (margin-top: auto), mit Mindestabstand --text-gap-2 zur Kurzbeschreibung. */ .et_pb_section.dz-section--recipe-hero .et_pb_row.dsp-hero__band > .et_pb_column.dsp-hero__text, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-hero .et_pb_row.dsp-hero__band > .et_pb_column.dsp-hero__text{ display: flex; flex-direction: column; } .et_pb_section.dz-section--recipe-hero .et_pb_row .et_pb_column.dsp-hero__text > .et_pb_module.dsp-hero__excerpt, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-hero .et_pb_row .et_pb_column.dsp-hero__text > .et_pb_module.dsp-hero__excerpt{ margin: var(--text-gap-1, 20px) 0 var(--text-gap-2, 24px) !important; } .et_pb_section.dz-section--recipe-hero .et_pb_row .et_pb_column.dsp-hero__text > .et_pb_module.dsp-hero__credit.dsp-hero__credit_box, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-hero .et_pb_row .et_pb_column.dsp-hero__text > .et_pb_module.dsp-hero__credit.dsp-hero__credit_box{ align-self: flex-start; width: var(--credit-box-w, auto); max-width: 100%; margin: auto 0 0 var(--credit-ml, 0) !important; } /* Byline im Rahmen aus lila Strichen (gleiche Striche wie die Credit-Linie: --credit-dash / -dash-gap / -line-w) */ .et_pb_section.dz-section--recipe-hero .et_pb_text.dsp-hero__credit.dsp-hero__credit_box .et_pb_text_inner > p, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-hero .et_pb_text.dsp-hero__credit.dsp-hero__credit_box .et_pb_text_inner > p{ --_d: var(--credit-dash, 4px); --_g: var(--credit-dash-gap, 4px); --_w: var(--credit-line-w, 2px); --_c: var(--credit-line-color, var(--c-purple-credit, #903DFC)); display: block; box-sizing: border-box; width: 100%; max-width: 100%; margin: 0; padding: var(--credit-box-py, 16px) var(--credit-box-px, 10px); background: repeating-linear-gradient(90deg, var(--_c) 0 var(--_d), transparent var(--_d) calc(var(--_d) + var(--_g))) left top / 100% var(--_w) no-repeat, repeating-linear-gradient(90deg, var(--_c) 0 var(--_d), transparent var(--_d) calc(var(--_d) + var(--_g))) left bottom / 100% var(--_w) no-repeat, repeating-linear-gradient(180deg, var(--_c) 0 var(--_d), transparent var(--_d) calc(var(--_d) + var(--_g))) left top / var(--_w) 100% no-repeat, repeating-linear-gradient(180deg, var(--_c) 0 var(--_d), transparent var(--_d) calc(var(--_d) + var(--_g))) right top / var(--_w) 100% no-repeat; } /* Bildspalte: Divis Flex-Bildmodul macht den Wrapper „fit-content" (".et-db #et-boc .et-l .et_pb_image:where(.et_flex_module) > .et_pb_image_wrap", gewinnt gegen die Regel .dsp-hero__media :is(…) oben) – das Bild blieb 5 px schmaler als die Spalte. Volle Spaltenbreite wie im Preset (--media-w). */ .et_pb_section.dz-section--recipe-hero .et_pb_column.dsp-hero__media .et_pb_image .et_pb_image_wrap, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-hero .et_pb_column.dsp-hero__media .et_pb_image .et_pb_image_wrap{ width: 100%; max-width: none; } /* ---- Lesespalte: Text-Module ---- */ .et_pb_section.dz-section--recipe-body .et_pb_column > .et_pb_text, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body .et_pb_column > .et_pb_text{ width: 100%; max-width: var(--txt-w, 720px); margin: 0 auto !important; padding: 0 !important; font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--txt-fs, 18px); line-height: var(--txt-lh, 33px); letter-spacing: var(--txt-ls, .01em); text-align: left; text-transform: none; color: var(--c-black); } .et_pb_section.dz-section--recipe-body .et_pb_text .et_pb_text_inner, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body .et_pb_text .et_pb_text_inner{ margin: 0; padding: 0; font: inherit !important; letter-spacing: inherit !important; text-align: inherit !important; text-transform: inherit !important; color: inherit !important; } .et_pb_section.dz-section--recipe-body .et_pb_text .et_pb_text_inner > :is(p, h1, h2, h3, h4), .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body .et_pb_text .et_pb_text_inner > :is(p, h1, h2, h3, h4){ margin: 0; padding: 0 !important; font: inherit !important; letter-spacing: inherit !important; text-align: inherit !important; text-transform: inherit !important; color: inherit !important; } .et_pb_section.dz-section--recipe-body .et_pb_text .et_pb_text_inner > p + p, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body .et_pb_text .et_pb_text_inner > p + p{ margin-top: var(--txt-gap, 33px); } .et_pb_section.dz-section--recipe-body .et_pb_text .et_pb_text_inner :is(strong, b), .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body .et_pb_text .et_pb_text_inner :is(strong, b){ font-weight: var(--strong-fw, 600); } .et_pb_section.dz-section--recipe-body .et_pb_text .et_pb_text_inner a, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body .et_pb_text .et_pb_text_inner a{ color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } /* Absatz-Modul nach Absatz-Modul (Einleitung, Absätze) */ .et_pb_section.dz-section--recipe-body .et_pb_column > .et_pb_text:has(> .et_pb_text_inner > p):not(.dsp-body__subtitle_text) + .et_pb_text:has(> .et_pb_text_inner > p):not(.dsp-body__subtitle_text), .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body .et_pb_column > .et_pb_text:has(> .et_pb_text_inner > p):not(.dsp-body__subtitle_text) + .et_pb_text:has(> .et_pb_text_inner > p):not(.dsp-body__subtitle_text){ margin-top: var(--txt-gap, 33px) !important; } /* Einleitungsabsatz und Zwischentitel in Textgröße: Semibold */ .et_pb_section.dz-section--recipe-body .et_pb_column > .et_pb_text.dsp-body__intro, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body .et_pb_column > .et_pb_text.dsp-body__intro{ font-weight: var(--strong-fw, 600); } .et_pb_section.dz-section--recipe-body .et_pb_column > .et_pb_text.dsp-body__subtitle_text, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body .et_pb_column > .et_pb_text.dsp-body__subtitle_text{ margin-bottom: var(--sub-mb, 33px) !important; font-weight: var(--strong-fw, 600); font-size: var(--sub-fs, var(--txt-fs, 18px)); line-height: var(--sub-lh, 33px); } /* Abstand oben: nur wenn ein Modul davor steht (das erste einer Spalte trägt die Row bzw. Section) */ .et_pb_section.dz-section--recipe-body .et_pb_column > .et_pb_module + .et_pb_text.dsp-body__subtitle_text, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body .et_pb_column > .et_pb_module + .et_pb_text.dsp-body__subtitle_text{ margin-top: var(--sub-mt, 33px) !important; } .et_pb_section.dz-section--recipe-body .et_pb_column > .et_pb_text:first-child, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body .et_pb_column > .et_pb_text:first-child{ margin-top: 0 !important; } /* Text-Row nach Text-Row (Absätze auf mehrere Rows verteilt) */ .et_pb_section.dz-section--recipe-body > .et_pb_row:has(> .et_pb_column > .et_pb_text) + .et_pb_row:has(> .et_pb_column > .et_pb_text), .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body > .et_pb_row:has(> .et_pb_column > .et_pb_text) + .et_pb_row:has(> .et_pb_column > .et_pb_text){ margin-top: var(--txt-gap, 33px); } /* ---- Button-Zeile (Lesespalte und Rezeptkarte) ---- Row dz-recipe__actions: Buttons zentriert, nebeneinander (--actions-dir: row) bzw. untereinander (column), Abstand --actions-gap. */ .et_pb_section .et_pb_row.dz-recipe__actions, .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_row.dz-recipe__actions{ display: flex; flex-direction: var(--actions-dir, row); flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--actions-gap, 24px); } .et_pb_section .et_pb_row.dz-recipe__actions > .et_pb_column, .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_row.dz-recipe__actions > .et_pb_column{ flex: 0 0 auto; width: auto; max-width: none; margin: 0; padding: 0; } .et_pb_section .et_pb_row.dz-recipe__actions .et_pb_button.dz-btn, .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_row.dz-recipe__actions .et_pb_button.dz-btn{ box-sizing: border-box; min-width: var(--actions-btn-w, 0px); justify-content: center; } .et_pb_section .et_pb_row.dz-recipe__actions .et_pb_button_module_wrapper, .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_row.dz-recipe__actions .et_pb_button_module_wrapper{ margin: 0 !important; padding: 0 !important; text-align: center !important; } .et_pb_section.dz-section--recipe-body > .et_pb_row.dz-recipe__actions, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body > .et_pb_row.dz-recipe__actions{ margin-block: var(--btn-mt, 64px) var(--btn-mb, 0px); } .et_pb_section.dz-section--recipe-card > .et_pb_row.dz-recipe__actions, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-card > .et_pb_row.dz-recipe__actions{ margin-top: var(--actions-mt, 64px); } /* Button-Icons: Pfeil nach unten / Drucker / Pin im Kreis (Maske, Farbe = Textfarbe). Divi blendet sein eigenes Icon (::after) per dz-btn aus. */ .et_pb_section .et_pb_button.dz-btn.dz-recipe__jump, .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_button.dz-btn.dz-recipe__jump{ --_ico: url("../../../../themes/dazzletic/assets/img/more.svg"); --_ico-rot: rotate(90deg); } .et_pb_section .et_pb_button.dz-btn.dz-recipe__print, .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_button.dz-btn.dz-recipe__print{ --_ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath fill-rule='evenodd' d='M8.5 0a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm0 .68a7.82 7.82 0 1 1 0 15.64A7.82 7.82 0 0 1 8.5.68ZM5.6 3.9h5.8v2H5.6v-2ZM4.4 6.5h8.2c.5 0 .9.4.9.9v3.3h-2v-1.4H5.5v1.4h-2V7.4c0-.5.4-.9.9-.9ZM6.1 9.9h4.8v3.2H6.1V9.9Z'/%3E%3C/svg%3E"); --_ico-rot: none; } .et_pb_section .et_pb_button.dz-btn.dz-recipe__pin, .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_button.dz-btn.dz-recipe__pin{ --_ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath fill-rule='evenodd' d='M8.5 0a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm0 3.7a2.9 2.9 0 0 0-2.9 2.9c0 1.4.9 2.4 1.8 3.1l.3 3.3h1.6l.3-3.3c.9-.7 1.8-1.7 1.8-3.1A2.9 2.9 0 0 0 8.5 3.7Z'/%3E%3C/svg%3E"); --_ico-rot: none; } /* Divis Button-Preset („body.et-db #page-container #et-boc .et-l .preset--…::before / ::after") setzt display:none !important und Padding mit zwei IDs bzw. !important, Divis Flex-Modul flex-direction: column, Divis .et_pb_button line-height 1.7em !important: der dritte Selektor (#page-container, keine Zwillingsform) hat die gleiche ID-Zahl und mehr Klassen, sonst bleiben die Icons unsichtbar bzw. unter dem Text. */ .et_pb_section .et_pb_button.dz-btn:is(.dz-recipe__jump, .dz-recipe__print, .dz-recipe__pin), #page-container #et-boc .et-l .et_pb_section .et_pb_button.dz-btn:is(.dz-recipe__jump, .dz-recipe__print, .dz-recipe__pin), .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_button.dz-btn:is(.dz-recipe__jump, .dz-recipe__print, .dz-recipe__pin){ display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: center; gap: .5em; padding: var(--_btn-pad, 8px 14px) !important; /* Divi-Button-Preset: 5px 40px 5px 20px !important */ line-height: var(--lh-tight, 1) !important; /* Divi: .et_pb_button { line-height: 1.7em !important } */ } .et_pb_section .et_pb_button.dz-btn:is(.dz-recipe__jump, .dz-recipe__print, .dz-recipe__pin)::after, #page-container #et-boc .et-l .et_pb_section .et_pb_button.dz-btn:is(.dz-recipe__jump, .dz-recipe__print, .dz-recipe__pin)::after, .dz-divi-wrapped #et-boc .et-l .et_pb_section .et_pb_button.dz-btn:is(.dz-recipe__jump, .dz-recipe__print, .dz-recipe__pin)::after{ content: "" !important; display: block !important; font-size: inherit !important; /* Divi: ::after hat 1.6em */ line-height: 1; position: static !important; flex: 0 0 auto; width: .85em; height: .85em; margin: 0 !important; opacity: 1 !important; background-color: currentColor; -webkit-mask: var(--_ico) center / contain no-repeat; mask: var(--_ico) center / contain no-repeat; transform: var(--_ico-rot, none); transition: none; } /* ---- Lesespalte: Bilder ---- */ .et_pb_section.dz-section--recipe-body .et_pb_image, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body .et_pb_image{ width: 100%; max-width: none; margin: 0 !important; padding: 0; line-height: 0; } .et_pb_section.dz-section--recipe-body .et_pb_image .et_pb_image_wrap, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body .et_pb_image .et_pb_image_wrap{ display: block; width: 100%; overflow: hidden; border-radius: var(--img-radius, 0); } .et_pb_section.dz-section--recipe-body .et_pb_image img, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body .et_pb_image img{ display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } /* Bild allein in der Row: breit, mittig (--wide-w der Containerbreite); mit dsp-body__image_tall schmal im Hochformat */ .et_pb_section.dz-section--recipe-body > .et_pb_row:has(> .et_pb_column:only-child > .et_pb_image), .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body > .et_pb_row:has(> .et_pb_column:only-child > .et_pb_image){ margin-block: var(--wide-mt, 60px) var(--wide-mb, 40px); } .et_pb_section.dz-section--recipe-body > .et_pb_row:has(> .et_pb_column:only-child > .et_pb_image) > .et_pb_column, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body > .et_pb_row:has(> .et_pb_column:only-child > .et_pb_image) > .et_pb_column{ display: flex; flex-direction: column; align-items: center; } .et_pb_section.dz-section--recipe-body > .et_pb_row > .et_pb_column:only-child > .et_pb_image, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body > .et_pb_row > .et_pb_column:only-child > .et_pb_image{ width: var(--wide-w, 100%); } .et_pb_section.dz-section--recipe-body > .et_pb_row > .et_pb_column:only-child > .et_pb_image .et_pb_image_wrap, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body > .et_pb_row > .et_pb_column:only-child > .et_pb_image .et_pb_image_wrap{ aspect-ratio: var(--wide-ratio, auto); } .et_pb_section.dz-section--recipe-body > .et_pb_row:has(> .et_pb_column:only-child > .et_pb_image.dsp-body__image_tall), .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body > .et_pb_row:has(> .et_pb_column:only-child > .et_pb_image.dsp-body__image_tall){ margin-block: var(--tall-mt, 60px) 0; } .et_pb_section.dz-section--recipe-body > .et_pb_row > .et_pb_column:only-child > .et_pb_image.dsp-body__image_tall, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body > .et_pb_row > .et_pb_column:only-child > .et_pb_image.dsp-body__image_tall{ width: var(--tall-w, 100%); } .et_pb_section.dz-section--recipe-body > .et_pb_row > .et_pb_column:only-child > .et_pb_image.dsp-body__image_tall .et_pb_image_wrap, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body > .et_pb_row > .et_pb_column:only-child > .et_pb_image.dsp-body__image_tall .et_pb_image_wrap{ aspect-ratio: var(--tall-ratio, auto); } /* Zwei Spalten mit je einem Bild: gleich große Bilder nebeneinander (auch auf Mobile); zwei Rows hintereinander = Raster 2 × 2 */ .et_pb_section.dz-section--recipe-body > .et_pb_row:has(> .et_pb_column + .et_pb_column), .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body > .et_pb_row:has(> .et_pb_column + .et_pb_column){ display: flex; flex-flow: row nowrap; align-items: flex-start; gap: var(--eq-gap, 30px); width: 100%; max-width: var(--eq-w, 100%); margin-inline: auto; margin-block: var(--eq-mt, 40px) 0; } .et_pb_section.dz-section--recipe-body > .et_pb_row:has(> .et_pb_column + .et_pb_column) > .et_pb_column, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body > .et_pb_row:has(> .et_pb_column + .et_pb_column) > .et_pb_column{ flex: 1 1 0; width: auto; min-width: 0; max-width: none; } .et_pb_section.dz-section--recipe-body > .et_pb_row:has(> .et_pb_column + .et_pb_column) .et_pb_image .et_pb_image_wrap, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body > .et_pb_row:has(> .et_pb_column + .et_pb_column) .et_pb_image .et_pb_image_wrap{ aspect-ratio: var(--eq-ratio, 4 / 3); border-radius: var(--eq-radius, var(--img-radius, 0)); } .et_pb_section.dz-section--recipe-body > .et_pb_row:has(> .et_pb_column + .et_pb_column) + .et_pb_row:has(> .et_pb_column + .et_pb_column), .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body > .et_pb_row:has(> .et_pb_column + .et_pb_column) + .et_pb_row:has(> .et_pb_column + .et_pb_column){ margin-top: var(--eq-gap-y, 30px); } .et_pb_section.dz-section--recipe-body > .et_pb_row:has(> .et_pb_column + .et_pb_column) + .et_pb_row:not(:has(> .et_pb_column + .et_pb_column)), .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-body > .et_pb_row:has(> .et_pb_column + .et_pb_column) + .et_pb_row:not(:has(> .et_pb_column + .et_pb_column)){ margin-top: var(--eq-mb, 40px); } /* ---- Rezeptkarte ---- */ .et_pb_section.dz-section--recipe-card .et_pb_column > .et_pb_text:is(.dz-recipe__title, .dz-recipe__servings, .dz-recipe__heading, .dz-recipe__list, .dz-recipe__steps), .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-card .et_pb_column > .et_pb_text:is(.dz-recipe__title, .dz-recipe__servings, .dz-recipe__heading, .dz-recipe__list, .dz-recipe__steps){ width: 100%; max-width: none; padding: 0 !important; text-align: left; text-transform: none; } .et_pb_section.dz-section--recipe-card .et_pb_text:is(.dz-recipe__title, .dz-recipe__servings, .dz-recipe__heading, .dz-recipe__list, .dz-recipe__steps) :is(.et_pb_text_inner, h1, h2, h3, h4, p), .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-card .et_pb_text:is(.dz-recipe__title, .dz-recipe__servings, .dz-recipe__heading, .dz-recipe__list, .dz-recipe__steps) :is(.et_pb_text_inner, h1, h2, h3, h4, p){ margin: 0; padding: 0; font: inherit !important; letter-spacing: inherit !important; text-align: inherit !important; text-transform: inherit !important; color: inherit !important; } /* Titel (H2) und Portionen */ .et_pb_section.dz-section--recipe-card .et_pb_column > .et_pb_text.dz-recipe__title, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-card .et_pb_column > .et_pb_text.dz-recipe__title{ margin: 0 !important; font-family: var(--font-body); font-weight: var(--title-fw, 600); font-size: var(--title-fs, 32px); line-height: var(--title-lh, 1.1); color: var(--title-color, var(--c-black)); } .et_pb_section.dz-section--recipe-card .et_pb_column > .et_pb_text.dz-recipe__servings, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-card .et_pb_column > .et_pb_text.dz-recipe__servings{ margin: var(--servings-mt, 28px) 0 0 !important; font-family: var(--font-body); font-weight: var(--card-text-fw, 300); font-size: var(--servings-fs, 16px); line-height: var(--servings-lh, 1.2); color: var(--card-text-color, var(--c-black)); } /* Raster: Zutaten-Box | Zubereitung (Mobile untereinander: --rg-cols 1fr) */ .et_pb_section.dz-section--recipe-card > .et_pb_row.dz-recipe__grid, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-card > .et_pb_row.dz-recipe__grid{ display: grid; grid-template-columns: var(--rg-cols, 1fr); gap: var(--rg-gap-y, 0px) var(--rg-gap, 0px); align-items: start; width: 100%; margin-top: var(--rg-mt, 30px); } .et_pb_section.dz-section--recipe-card > .et_pb_row.dz-recipe__grid > .et_pb_column, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-card > .et_pb_row.dz-recipe__grid > .et_pb_column{ box-sizing: border-box; width: auto; min-width: 0; max-width: none; } .et_pb_section.dz-section--recipe-card > .et_pb_row.dz-recipe__grid > .et_pb_column.dz-recipe__ingredients, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-card > .et_pb_row.dz-recipe__grid > .et_pb_column.dz-recipe__ingredients{ padding: var(--ing-pad, 16px 24px 22px); border: var(--ing-bw, 1px) solid var(--ing-bc, var(--c-purple)); border-radius: var(--ing-radius, var(--r-sm)); background: var(--ing-bg, var(--c-purple-tint)); } .et_pb_section.dz-section--recipe-card > .et_pb_row.dz-recipe__grid > .et_pb_column.dz-recipe__preparation, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-card > .et_pb_row.dz-recipe__grid > .et_pb_column.dz-recipe__preparation{ padding-top: var(--prep-pt, 0px); } /* Überschriften ZUTATEN / ZUBEREITUNG */ .et_pb_section.dz-section--recipe-card .et_pb_column > .et_pb_text.dz-recipe__heading, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-card .et_pb_column > .et_pb_text.dz-recipe__heading{ margin: 0 0 var(--rhead-mb, 20px) !important; font-family: var(--font-body); font-weight: var(--card-text-fw, 300); font-size: var(--rhead-fs, 20px); line-height: var(--rhead-lh, 1.2); text-transform: uppercase; color: var(--card-text-color, var(--c-black)); } /* Zutatenliste (Punkte) und Schritte (nummeriert) */ .et_pb_section.dz-section--recipe-card .et_pb_column > .et_pb_text:is(.dz-recipe__list, .dz-recipe__steps), .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-card .et_pb_column > .et_pb_text:is(.dz-recipe__list, .dz-recipe__steps){ margin: 0 !important; font-family: var(--font-body); font-weight: var(--card-text-fw, 300); font-size: var(--list-fs, 18px); color: var(--card-text-color, var(--c-black)); } .et_pb_section.dz-section--recipe-card .et_pb_column > .et_pb_text.dz-recipe__list, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-card .et_pb_column > .et_pb_text.dz-recipe__list{ line-height: var(--list-lh, 1.6); } .et_pb_section.dz-section--recipe-card .et_pb_column > .et_pb_text.dz-recipe__steps, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-card .et_pb_column > .et_pb_text.dz-recipe__steps{ line-height: var(--steps-lh, 1.6); } .et_pb_section.dz-section--recipe-card .et_pb_text.dz-recipe__list .et_pb_text_inner > ul, .et_pb_section.dz-section--recipe-card .et_pb_text.dz-recipe__steps .et_pb_text_inner > ol, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-card .et_pb_text.dz-recipe__list .et_pb_text_inner > ul, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-card .et_pb_text.dz-recipe__steps .et_pb_text_inner > ol{ margin: 0 !important; padding: 0 !important; line-height: inherit !important; } .et_pb_section.dz-section--recipe-card .et_pb_text.dz-recipe__list .et_pb_text_inner > ul, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-card .et_pb_text.dz-recipe__list .et_pb_text_inner > ul{ padding-left: var(--list-indent, 9px) !important; list-style: disc outside; } .et_pb_section.dz-section--recipe-card .et_pb_text.dz-recipe__steps .et_pb_text_inner > ol, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-card .et_pb_text.dz-recipe__steps .et_pb_text_inner > ol{ padding-left: var(--steps-indent, 22px) !important; list-style: decimal outside; } .et_pb_section.dz-section--recipe-card .et_pb_text.dz-recipe__list li, .et_pb_section.dz-section--recipe-card .et_pb_text.dz-recipe__steps li, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-card .et_pb_text.dz-recipe__list li, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-card .et_pb_text.dz-recipe__steps li{ margin: 0; padding: 0; line-height: inherit; } .et_pb_section.dz-section--recipe-card .et_pb_text.dz-recipe__list li + li, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-card .et_pb_text.dz-recipe__list li + li{ margin-top: var(--list-gap, 0px); } .et_pb_section.dz-section--recipe-card .et_pb_text.dz-recipe__steps li + li, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-card .et_pb_text.dz-recipe__steps li + li{ margin-top: var(--steps-gap, 8px); } /* ---------- REZEPT · LISTENMARKER ---------- Zutatenpunkte und Schrittnummern in Textfarbe: dazzletic-posts.css färbt sonst jeden Listenpunkt in Text-Modulen grün („.et_pb_text li::marker"). */ .et_pb_section.dz-section--recipe-card .et_pb_text:is(.dz-recipe__list, .dz-recipe__steps) li::marker, .dz-divi-wrapped #et-boc .et-l .et_pb_section.dz-section--recipe-card .et_pb_text:is(.dz-recipe__list, .dz-recipe__steps) li::marker{ color: var(--card-text-color, var(--c-black)); } /* ---------- REZEPT · SEITENRAHMEN ---------- Wie bei der Mixtape-Seite (MIXTAPE-BEITRAG · SEITENRAHMEN): Divis Standardlayout für Einzelseiten legt den Inhalt in #main-content > .container (80 % Breite, max. 1400 px, 58 px Innenabstand oben, #left-area / #content-area ebenfalls 80 %). Die Section-Rahmen (grüne Linien), das Hero-Bild und die Container der Presets brauchen die volle Seitenbreite; die Abstände zwischen den Blöcken tragen die Presets selbst. Nur für die Einzelseite des Beitragstyps rezept. */ body.single-rezept #main-content .container, body.single-rezept #main-content #content-area, body.single-rezept #main-content #left-area{ float: none; width: 100%; max-width: none; margin: 0; padding: 0; } body.single-rezept #main-content .container::before{ display: none; } /* Divis Beitragstitel (

in .et_post_meta_wrapper) steht sonst als zweiter Titel über dem Titelblock – in Figma gibt es ihn nicht. Nur optisch ausgeblendet: er bleibt die h1 der Seite, solange der Hero-Titel keine h1 ist. */ body.single-rezept #main-content .et_post_meta_wrapper{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------- 404-SEITE ---------- Preset 404 (08-blocks.css, 35). Die Seite ist die 404-Vorlage des Divi Theme Builders (Body); kein Wrap-Modus, darum keine Zwillings-Selektoren. Klassen im Builder (Feld „CSS-Klasse“): Section dz-section dz-section--404 Row dz-404__row Spalten dz-404__media (Bild) · dz-404__content (Text und Buttonzeile) Module Bild dz-404__image · Text „Ups!“ (H1) dz-404__title · Text mit den Absätzen dz-404__text (1. Absatz = Lead) Group dz-404__actions (darin Button und Suche) · Button dz-btn dz-btn--outline dz-btn--pill dz-404__home · Suche dz-404__search Divi gibt Row und Spalten Flexbox mit festen Breiten, Modulen Abstände aus den Spacing-Presets (Titel 60 px oben, Absätze 22 px Polster, Row 100 px unten) und dem Button- und Suchmodul eigene Rahmen, Schatten und Schriften → hier gezielt höhere Spezifität; die Builder-Einstellungen für Abstand, Typografie, Rahmen und Hintergrund an diesen Elementen leer lassen. */ /* Row und Spalten */ .et_pb_section.dz-section--404 > .et_pb_row.dz-404__row{ box-sizing: border-box; display: flex; flex-direction: var(--row-dir, column); align-items: flex-start; gap: var(--row-gap, 0); width: auto; max-width: none; margin: 0 !important; padding: 0 !important; } .et_pb_section.dz-section--404 .et_pb_row.dz-404__row > .et_pb_column{ box-sizing: border-box; max-width: none; margin: 0; padding: 0; row-gap: 0; } .et_pb_section.dz-section--404 .et_pb_row.dz-404__row > .et_pb_column.dz-404__media{ flex: 0 0 auto; width: var(--media-w, 100%); aspect-ratio: var(--media-ratio, auto); overflow: hidden; } .et_pb_section.dz-section--404 .et_pb_row.dz-404__row > .et_pb_column.dz-404__content{ display: flex; flex-direction: column; flex: var(--content-flex, 1 1 0); align-self: stretch; width: auto; min-width: 0; padding: var(--content-pt, 0) 0 var(--content-pb, 0); } /* Bild: füllt die Spalte, Zuschnitt per --media-fit */ .et_pb_section.dz-section--404 .et_pb_column > .et_pb_module.dz-404__image{ width: 100%; max-width: none; height: 100%; margin: 0 !important; padding: 0 !important; } .et_pb_section.dz-section--404 .dz-404__image .et_pb_image_wrap{ display: block; width: 100%; height: 100%; } .et_pb_section.dz-section--404 .dz-404__image img{ display: block; width: 100%; height: 100%; max-width: none; object-fit: var(--media-fit, cover); border-radius: 0; } /* Titel und Text */ .et_pb_section.dz-section--404 .et_pb_column > .et_pb_text:is(.dz-404__title, .dz-404__text){ width: 100%; margin: 0 !important; padding: 0 !important; line-height: 1; letter-spacing: 0; text-transform: none; text-align: left; color: var(--c-black); } .et_pb_section.dz-section--404 .et_pb_column > .et_pb_text.dz-404__title{ margin-bottom: var(--title-mb, 20px) !important; } .et_pb_section.dz-section--404 .et_pb_column > .et_pb_text.dz-404__text{ margin-bottom: var(--actions-gap-min, 0px) !important; } /* Mindestabstand zur Buttonzeile (Desktop / Landscape) */ .et_pb_section.dz-section--404 .dz-404__title .et_pb_text_inner{ margin: 0; padding: 0; } .et_pb_section.dz-section--404 .dz-404__title .et_pb_text_inner > :is(h1, h2, h3, p){ margin: 0; padding: 0 !important; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--title-fs, 40px) !important; line-height: 1 !important; letter-spacing: 0; text-transform: none; color: var(--c-black) !important; } .et_pb_section.dz-section--404 .dz-404__text .et_pb_text_inner{ margin: 0; padding: 0; } .et_pb_section.dz-section--404 .dz-404__text .et_pb_text_inner > p{ margin: 0; padding: 0 !important; font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--text-fs, 20px); line-height: 1; letter-spacing: 0; color: var(--c-black); } .et_pb_section.dz-section--404 .dz-404__text .et_pb_text_inner > p:first-child{ font-size: var(--lead-fs, 23px); } .et_pb_section.dz-section--404 .dz-404__text .et_pb_text_inner > p + p{ margin-top: var(--p-gap, 20px); } /* Buttonzeile: Button links, Suche rechts, bündig mit der Spalte */ .et_pb_section.dz-section--404 .et_pb_column > .et_pb_group.dz-404__actions{ display: flex; flex-direction: column; width: 100%; max-width: var(--actions-w, 100%); margin: var(--actions-mt, auto) auto 0 !important; padding: 0 !important; } .et_pb_section.dz-section--404 .dz-404__actions > .et_pb_row_nested{ box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px 24px; width: 100%; max-width: none; margin: 0 !important; padding: 0 !important; } .et_pb_section.dz-section--404 .dz-404__actions > .et_pb_row_nested > .et_pb_column{ flex: 0 0 auto; width: auto; max-width: 100%; margin: 0; padding: 0; row-gap: 0; } /* Suchfeld-Spalte wächst bis zur Figma-Breite und schrumpft dazwischen (Desktop unter 1512 px, schmales Mobile); erst darunter bricht die Zeile um */ .et_pb_section.dz-section--404 .dz-404__actions > .et_pb_row_nested > .et_pb_column:has(> .dz-404__search){ flex: 1 1 var(--search-min, 160px); max-width: var(--search-w, 100%); } .et_pb_section.dz-section--404 .dz-404__actions .et_pb_button_module_wrapper{ margin: 0 !important; padding: 0 !important; text-align: left !important; } /* Button „Startseite“: weiß, grüner Rand, Pille, ohne Schatten; Hover = grüne Fläche mit schwarzem Rand (Figma Button Hover). Divis Button-Preset setzt Padding (!important), Zeilenhöhe und Anordnung mit zwei IDs → dritter Selektor mit #page-container (keine Zwillingsform). */ .et_pb_section.dz-section--404 .et_pb_button.dz-btn.dz-404__home, #page-container #et-boc .et-l .et_pb_section.dz-section--404 .et_pb_button.dz-btn.dz-404__home{ --_btn-fs: var(--btn-fs, 24px); --_btn-shadow: none; box-sizing: border-box; display: inline-flex !important; flex-direction: row !important; align-items: center; justify-content: center; width: var(--btn-w, auto); max-width: none; /* Divi: max-width: max-content */ height: var(--btn-h, auto); margin: 0 !important; padding: var(--btn-nudge, 0) 0 0 !important; line-height: var(--lh-tight, 1) !important; letter-spacing: 0; text-align: center; white-space: nowrap; /* das Divi-Button-Preset setzt Hintergrund, Rand und Farbe (body #page-container … .preset--module--divi-button--…) → sonst greift der Hover nicht */ background: var(--_btn-bg) !important; border: var(--_btn-border) !important; border-radius: var(--_btn-radius) !important; color: var(--_btn-color) !important; } .et_pb_section.dz-section--404 .et_pb_button.dz-btn.dz-404__home:hover, #page-container #et-boc .et-l .et_pb_section.dz-section--404 .et_pb_button.dz-btn.dz-404__home:hover{ --_btn-bg: var(--c-green); --_btn-border: 2px solid var(--c-black); padding: var(--btn-nudge, 0) 0 0 !important; } /* Suchfeld: Pille mit schwarzem Rand, Lupe rechts (Grafik wie das Such-Icon im Header), kein sichtbarer Absende-Text */ .et_pb_section.dz-section--404 .et_pb_search.dz-404__search{ box-sizing: border-box; position: relative; display: block; width: 100%; max-width: 100%; height: var(--search-h, 48px); margin: 0 !important; padding: 0 !important; border: 2px solid var(--c-black) !important; border-radius: var(--r-pill) !important; background: var(--c-white) !important; overflow: hidden; } .et_pb_section.dz-section--404 .dz-404__search:focus-within{ outline: 2px solid var(--c-green); outline-offset: 2px; } .et_pb_section.dz-section--404 .dz-404__search form.et_pb_searchform, .et_pb_section.dz-section--404 .dz-404__search form.et_pb_searchform > div{ display: block; width: 100%; height: 100%; margin: 0; padding: 0; } .et_pb_section.dz-section--404 .dz-404__search input.et_pb_s{ box-sizing: border-box; display: block; width: 100%; height: 100%; margin: 0; padding: 0 calc(var(--ico-r, 26px) + var(--ico-w, 21px) + 12px) 0 var(--search-pl, 24px); border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: 0; font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--search-fs, 16px); line-height: 1; color: var(--c-black); } .et_pb_section.dz-section--404 .dz-404__search input.et_pb_searchsubmit{ position: absolute; top: 0; right: 0; bottom: 0; width: calc(var(--ico-r, 26px) + var(--ico-w, 21px) + 12px); height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--ico-search) no-repeat right calc(var(--ico-r, 26px) - 2px) center / var(--ico-w, 21px) var(--ico-h, 20px); font-size: 0; color: transparent; cursor: pointer; } /* ---------- CONTENT-SEITE ---------- Presets content-title / -hero / -body / -cta (08-blocks.css, 37–40; Figma „Dazzletic-About“). Normale Divi-Seite unter dem Theme-Builder-Header, kein Wrap-Modus → keine Zwillings-Selektoren. Klassen im Builder (Feld „CSS-Klasse“): Section dz-section dz-section--content-title | -hero | -body | -cta Titel Post-Title-Modul (oder Text-/Überschrift-Modul mit H1) dz-content__title Bild Bild-Modul dz-content__image Text Text-Module dz-content__text (Absätze und H1–H6; ein komplett fett gesetzter erster Absatz im ersten Modul wird zum Lead) Zwischenüberschrift als eigenes Text-/Überschrift-Modul dz-content__subtitle (optional – die Tag-Stile gelten in jedem Modul der Body-Section) Button Button-Modul dz-btn dz-btn--square dz-content__cta Divi gibt Sections, Rows und Spalten Flexbox mit festen Breiten, Modulen Abstände aus den Spacing-Presets (oft !important) und dem Text-Preset Schrift und Farbe direkt am .et_pb_text_inner → hier gezielt höhere Spezifität; die Builder-Einstellungen für Abstand, Typografie, Rahmen und Hintergrund an diesen Elementen leer lassen. */ /* Rows/Spalten der Content-Sections: kein Divi-Abstand */ .et_pb_section:is(.dz-section--content-title, .dz-section--content-hero, .dz-section--content-body, .dz-section--content-cta) > .et_pb_row{ margin: 0; padding: 0; } .et_pb_section:is(.dz-section--content-title, .dz-section--content-hero, .dz-section--content-body, .dz-section--content-cta) .et_pb_column{ margin: 0; padding: 0; } /* Titel: League Spartan Light, Versalien, mittig (Post-Title-, Text- oder Überschrift-Modul) */ .et_pb_section .et_pb_row .et_pb_column > :is(.et_pb_post_title, .et_pb_text, .et_pb_heading).dz-content__title{ width: 100%; margin: 0 !important; padding: 0 !important; font-family: var(--font-heading); font-weight: var(--title-fw, var(--fw-light)); font-size: var(--title-fs, var(--fs-page-title)); line-height: var(--title-lh, 1); letter-spacing: var(--title-ls, 0); text-align: center; text-transform: uppercase; color: var(--title-color, var(--c-black)); } .et_pb_section .dz-content__title :is(.et_pb_title_container, .et_pb_text_inner, .et_pb_heading_container){ margin: 0; padding: 0 !important; } .et_pb_section .dz-content__title :is(h1, h2, h3, h4, h5, h6, p){ margin: 0; padding: 0 !important; font: inherit !important; letter-spacing: inherit !important; text-align: center !important; text-transform: inherit !important; color: inherit !important; } /* Divi setzt Größe/Zeilenhöhe am Titel mit !important und der Modulnummer (.et_pb_post_title_0 …) → höhere Spezifität */ .et_pb_section .et_pb_row .et_pb_column > :is(.et_pb_post_title, .et_pb_text, .et_pb_heading).dz-content__title :is(.et_pb_title_container, .et_pb_text_inner, .et_pb_heading_container) :is(h1, h2, h3, h4, h5, h6, p){ font-family: var(--font-heading) !important; font-weight: var(--title-fw, var(--fw-light)) !important; font-size: var(--title-fs, var(--fs-page-title)) !important; line-height: var(--title-lh, 1) !important; letter-spacing: var(--title-ls, 0) !important; } /* Bild: volle Section-Breite, Zuschnitt per Seitenverhältnis, runde Ecken */ .et_pb_section.dz-section--content-hero .et_pb_image{ width: 100%; max-width: none; margin: 0 !important; padding: 0; line-height: 0; } .et_pb_section.dz-section--content-hero .et_pb_image .et_pb_image_wrap{ display: block; width: 100%; overflow: hidden; aspect-ratio: var(--media-ratio, auto); border-radius: var(--media-radius, var(--r-md)); } .et_pb_section.dz-section--content-hero .et_pb_image img{ display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } /* Lesespalte: Text- und Überschrift-Module der Body-Section */ .et_pb_section.dz-section--content-body .et_pb_column > :is(.et_pb_text, .et_pb_heading){ width: 100%; max-width: var(--txt-w, 720px); margin: 0 auto !important; padding: 0 !important; font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--txt-fs, var(--fs-body)); line-height: var(--txt-lh, 33px); letter-spacing: var(--txt-ls, .007em); text-align: left; text-transform: none; color: var(--c-black); } .et_pb_section.dz-section--content-body :is(.et_pb_text_inner, .et_pb_heading_container){ margin: 0; padding: 0; font: inherit !important; letter-spacing: inherit !important; text-align: inherit !important; text-transform: inherit !important; color: inherit !important; } .et_pb_section.dz-section--content-body :is(.et_pb_text_inner, .et_pb_heading_container) > p{ margin: 0; padding: 0 !important; font: inherit !important; letter-spacing: inherit !important; text-align: inherit !important; text-transform: inherit !important; color: inherit !important; } .et_pb_section.dz-section--content-body .et_pb_text_inner > p + p{ margin-top: var(--txt-gap, 37px); } .et_pb_section.dz-section--content-body .et_pb_text_inner :is(strong, b){ font-weight: var(--strong-fw, 600); } .et_pb_section.dz-section--content-body .et_pb_text_inner a{ color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } /* Absatz-Modul nach Absatz-Modul */ .et_pb_section.dz-section--content-body .et_pb_column > .et_pb_text:has(> .et_pb_text_inner > p:last-child) + .et_pb_text:has(> .et_pb_text_inner > p:first-child){ margin-top: var(--txt-gap, 37px) !important; } /* Lead: ein komplett fett gesetzter erster Absatz im ersten Text-Modul (Fett kommt aus dem Divi-Editor); nicht in der Variante prose (Fließtextseiten) */ .et_pb_section.dz-section--content-body:not(.dz-content--prose) .et_pb_column > .et_pb_text:first-child .et_pb_text_inner > p:first-child:has(> strong:only-child){ font-family: var(--lead-ff, var(--font-heading)) !important; font-weight: var(--lead-fw, var(--fw-semibold)) !important; font-size: var(--lead-fs, 24px) !important; } .et_pb_section.dz-section--content-body:not(.dz-content--prose) .et_pb_column > .et_pb_text:first-child .et_pb_text_inner > p:first-child:has(> strong:only-child) > strong{ font-weight: inherit; } /* Überschriften H1–H6 (Zuordnung und Herkunft: Kopf von Preset 39). Die Tag-Regeln setzen nur Variablen, eine gemeinsame Regel wendet sie an. */ .et_pb_section.dz-section--content-body h1{ --h-ff: var(--font-body); --h-fw: var(--fw-semibold); --h-fs: var(--h1-fs); --h-lh: var(--h1-lh); --h-ls: 0; --h-tt: none; --h-mt: var(--sub-mt); --h-mb: var(--sub-mb); } .et_pb_section.dz-section--content-body h2{ --h-ff: var(--font-heading); --h-fw: var(--fw-semibold); --h-fs: var(--h2-fs); --h-lh: var(--h2-lh); --h-ls: 0; --h-tt: uppercase; --h-mt: var(--sub-mt); --h-mb: var(--sub-mb); } .et_pb_section.dz-section--content-body h3{ --h-ff: var(--font-body); --h-fw: var(--fw-semibold); --h-fs: var(--h3-fs); --h-lh: var(--h3-lh); --h-ls: 0; --h-tt: uppercase; --h-mt: var(--sub-mt); --h-mb: var(--sub-mb); } .et_pb_section.dz-section--content-body h4{ --h-ff: var(--font-body); --h-fw: var(--fw-semibold); --h-fs: var(--h4-fs); --h-lh: var(--h4-lh); --h-ls: 0; --h-tt: none; --h-mt: var(--txt-gap); --h-mb: var(--sub-mb); } .et_pb_section.dz-section--content-body h5{ --h-ff: var(--font-heading); --h-fw: var(--fw-semibold); --h-fs: var(--h5-fs); --h-lh: var(--h5-lh); --h-ls: .02em; --h-tt: uppercase; --h-mt: var(--txt-gap); --h-mb: 8px; } .et_pb_section.dz-section--content-body h6{ --h-ff: var(--font-body); --h-fw: var(--fw-regular); --h-fs: var(--h6-fs); --h-lh: var(--h6-lh); --h-ls: .04em; --h-tt: uppercase; --h-mt: var(--txt-gap); --h-mb: 8px; --h-color: var(--c-gray-1); } .et_pb_section.dz-section--content-body :is(.et_pb_text_inner, .et_pb_heading_container) > :is(h1, h2, h3, h4, h5, h6){ margin: var(--h-mt, 0) 0 var(--h-mb, 0); padding: 0 !important; font-family: var(--h-ff) !important; font-weight: var(--h-fw) !important; font-size: var(--h-fs) !important; line-height: var(--h-lh) !important; letter-spacing: var(--h-ls, 0) !important; text-align: inherit !important; text-transform: var(--h-tt, none) !important; color: var(--h-color, var(--c-black)) !important; } /* das erste Element der Spalte trägt keinen Abstand nach oben (den liefert das Preset) */ .et_pb_section.dz-section--content-body .et_pb_column > :is(.et_pb_text, .et_pb_heading):first-child :is(.et_pb_text_inner, .et_pb_heading_container) > :first-child{ margin-top: 0; } /* Listen (ul / ol) in Text-Modulen der Lesespalte: Textschrift und -zeilenhöhe, Einzug in em, Abstand zwischen den Punkten, Punkte in Textfarbe (die globale Regel „.et_pb_text li::marker“ aus dazzletic-posts.css färbt sie sonst grün, „.et_pb_text ul / li“ setzt 20 px / 10 px Abstand). Abstand Absatz → Liste = --list-mt (der einleitende Satz gehört zur Liste), Liste → Absatz = --txt-gap wie zwischen Absätzen. */ .et_pb_section.dz-section--content-body .et_pb_text_inner > :is(ul, ol){ margin: 0; padding: 0 0 0 var(--list-indent, 1.25em) !important; font: inherit !important; letter-spacing: inherit !important; line-height: inherit !important; list-style-position: outside; color: inherit !important; } .et_pb_section.dz-section--content-body .et_pb_text_inner > ul{ list-style-type: disc; } .et_pb_section.dz-section--content-body .et_pb_text_inner > ol{ list-style-type: decimal; } .et_pb_section.dz-section--content-body .et_pb_text_inner :is(ul, ol) li{ margin: 0; padding: 0; line-height: inherit; } .et_pb_section.dz-section--content-body .et_pb_text_inner :is(ul, ol) li + li{ margin-top: var(--list-gap, 8px); } .et_pb_section.dz-section--content-body .et_pb_text_inner li > :is(ul, ol){ margin: var(--list-gap, 8px) 0 0; padding-left: var(--list-indent, 1.25em); } .et_pb_section.dz-section--content-body .et_pb_text_inner :is(ul, ol) li::marker{ color: var(--list-marker, var(--c-black)); } .et_pb_section.dz-section--content-body .et_pb_text_inner > p + :is(ul, ol){ margin-top: var(--list-mt, 16px); } .et_pb_section.dz-section--content-body .et_pb_text_inner > :is(ul, ol) + p{ margin-top: var(--txt-gap, 37px); } /* Text-Module, die mit einer Liste beginnen bzw. enden (Absatz-Modul → Listen-Modul → Absatz-Modul) */ .et_pb_section.dz-section--content-body .et_pb_column > .et_pb_text:has(> .et_pb_text_inner > p:last-child) + .et_pb_text:has(> .et_pb_text_inner > :is(ul, ol):first-child){ margin-top: var(--list-mt, 16px) !important; } .et_pb_section.dz-section--content-body .et_pb_column > .et_pb_text:has(> .et_pb_text_inner > :is(ul, ol):last-child) + .et_pb_text:has(> .et_pb_text_inner > p:first-child){ margin-top: var(--txt-gap, 37px) !important; } /* Button „Kontaktiere uns“: quadratisch, weiß, grüner Rand, harter Schatten (Variante dz-btn--square in 06-components.css), zweizeilig. Divis Button-Preset setzt Hintergrund, Rand, Farbe und Padding mit mehreren IDs/!important → dritter Selektor mit #page-container (keine Zwillingsform). */ .et_pb_section.dz-section--content-cta .et_pb_button_module_wrapper{ display: flex; justify-content: center; margin: 0 !important; padding: 0 !important; text-align: center !important; } .et_pb_section.dz-section--content-cta .et_pb_button.dz-btn.dz-content__cta, #page-container #et-boc .et-l .et_pb_section.dz-section--content-cta .et_pb_button.dz-btn.dz-content__cta{ --_btn-fs: var(--btn-fs, 30px); --_btn-border: var(--btn-bw, 4px) solid var(--c-green); --_btn-px: calc((var(--btn-w, 353px) - 2 * var(--btn-bw, 4px) - var(--btn-text-w, 235px)) / 2); box-sizing: border-box; display: inline-flex !important; flex-direction: row !important; align-items: center; justify-content: center; width: var(--btn-w, 353px); max-width: none; /* Divi: max-width: max-content */ height: var(--btn-h, 74px); margin: 0 !important; padding: 0 var(--_btn-px) var(--btn-nudge, 0px) !important; font-size: var(--_btn-fs); line-height: var(--lh-tight, 1) !important; letter-spacing: var(--btn-ls, -.012em); text-align: center; white-space: normal; transform: translateX(var(--btn-dx, 0px)); transition: background .2s, color .2s, box-shadow .2s; /* Divi: transition: all – Größe und Padding würden beim Hover / Skalieren animieren */ /* das Divi-Button-Preset setzt Hintergrund, Rand und Farbe (body #page-container … .preset--module--divi-button--…) → sonst greift der Hover nicht */ background: var(--_btn-bg) !important; border: var(--_btn-border) !important; border-radius: var(--_btn-radius) !important; color: var(--_btn-color) !important; box-shadow: var(--_btn-shadow) !important; } .et_pb_section.dz-section--content-cta .et_pb_button.dz-btn.dz-content__cta:hover, #page-container #et-boc .et-l .et_pb_section.dz-section--content-cta .et_pb_button.dz-btn.dz-content__cta:hover{ padding: 0 var(--_btn-px) var(--btn-nudge, 0px) !important; /* Divi ändert das Padding beim Hover */ }