/*
* cca-ui.css - dokumentierte CSS-Ausnahmen der Divi-5-Seite (Plan 03-04, D-18).
*
* Eingebunden von wp/mu-plugins/cca-ui.php (Version = filemtime) auf jeder
* Frontend-Seite. Alles, was Divi nativ mit Modulen, Presets und Variablen
* abbilden kann, gehört NICHT hierher. Regeln:
* - Farben, Größen und Abstände nur über var(--gcid-...) / var(--gvid-...);
* cca-ui.php gibt alle Variablen seitenweit aus (style#cca-ui-vars);
* - kein Farbliteral (Hex, rgb, hsl, Farbwörter), auch nicht als Fallback;
* - jeder Absatz beginnt mit einem Kommentar: was, warum Divi es nicht kann, wer es nutzt.
* Der editability-Check (css:cca-ui.css) und der chrome-Check (Variablen
* definiert) prüfen diese Datei.
*
* Deploy: bash ops/staging/64-deploy-ui-assets.sh && bash ops/staging/deploy-mu-plugin.sh cca-ui.php
*/
/* Wortmarke: Akzent auf „AI“ im Header (Divi kann Teilwort-Farbe nur per Inline-Style, verboten).
Das Textmodul enthält „Creative Connect AI“; Farbe = CCA Primär. */
.et-l--header .cca-accent {
color: var(--gcid-primary-color);
}
/* Wortmarke ohne Umbruch: „Creative Connect AI“ bleibt eine Zeile (live whitespace-nowrap);
das Divi-Textmodul hat kein white-space-Feld, der Absatz-Abstand unten käme aus Divis p-Stil.
Selektor nur für das Textmodul, das den Akzent-Span enthält. */
.et-l--header .et_pb_text:has(.cca-accent) p {
white-space: nowrap;
padding-bottom: 0;
}
/* Akzentzeile in Überschriften: zweite Zeile in CTA-Farbe als eigene Zeile (live Klassen
block text-cta in den H1 von /, /blog, /kontakt, /leistungen/seo, /chatgpt-ads,
/ki-automatisierung, /webdesign, /ueber-uns); Teilwort-Farbe geht in Divi nur per
Inline-Style. Nutzung: … im Überschriften-Text
(Bibliothekspläne 03-09/03-10). */
.cca-akzentzeile {
display: block;
color: var(--gcid-secondary-color);
}
/* Telefon-Kreis im Header (A6): Divi-Blurb hat kein Rahmen-/Radius-Feld fürs Icon.
Klasse cca-tel sitzt am Blurb (module.advanced.htmlAttributes); Hintergrund- und
Iconfarbe kommen aus dem Preset „CCA · Blurb · Telefon“, hier nur Kreisform und
Kreisgröße (Variable „Telefon-Kreis“, live h-9 w-9), Icon mittig. */
.et-l--header .cca-tel .et-pb-icon {
width: var(--gvid-24c6ee59-4c23-4738-b360-64f0bb78b018);
height: var(--gvid-24c6ee59-4c23-4738-b360-64f0bb78b018);
border-radius: 9999px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Telefonnummer im Header ohne Umbruch (live whitespace-nowrap); der Blurb-Titel hat
kein white-space-Feld. */
.et-l--header .cca-tel .et_pb_module_header {
white-space: nowrap;
}
/* Telefonnummer vertikal mittig neben dem Kreis, 8 px Abstand (live items-center gap-2; Plan
03-12, Rückmeldung Philipp 2026-10-17): Divis Blurb setzt den Titelbereich als Tabellenzelle
oben an (vertical-align top), mit 15 px Innenabstand links und 10 px unter dem h4. Der Blurb hat
dafür keine Felder (nur Icon-Platzierung oben/links). */
.et-l--header .cca-tel .et_pb_blurb_container {
vertical-align: middle;
padding-left: var(--gvid-908d6082-b3a5-4391-ab85-6422b7864eec);
}
.et-l--header .cca-tel .et_pb_blurb_container .et_pb_module_header {
padding-bottom: 0;
}
/* Anruf-Kachel in der nur mobil sichtbaren Zeile (D-03): Icon im Kreis, Größe aus der
Variable „Anruf-Kachel Icon“ (live h-10 w-10); Divi-Blurb hat kein Radius-Feld fürs Icon. */
.et-l--header .cca-header-mobile .et_pb_blurb .et-pb-icon {
width: var(--gvid-6306d242-67e4-4ca0-8024-1dfd516bbe9d);
height: var(--gvid-6306d242-67e4-4ca0-8024-1dfd516bbe9d);
border-radius: 9999px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Anruf-Kachel im mobilen Menü linksbündig und kompakt wie live (Gap-Closure 03, flex items-center
gap-3, Beschriftung direkt über der Nummer): Divis Blurb begrenzt seinen Inhalt fest auf 550 px
und zentriert ihn (bei 768 px stand das Icon mitten in der Kachel) und setzt 10 px unter den
Titel; beides hat im Blurb kein Feld. */
.et-l--header .cca-header-mobile .et_pb_blurb .et_pb_blurb_content {
max-width: none;
margin: 0;
}
.et-l--header .cca-header-mobile .et_pb_blurb .et_pb_module_header {
padding-bottom: 0;
}
/* Wortmarke im Footer (Plan 03-08): Akzent auf „AI“ in Lime (live text-cta); Teilwort-Farbe
ginge in Divi nur per Inline-Farbe (style=, verboten). Das Footer-Textmodul enthält
„Creative Connect AI“; Farbe = CCA Sekundär (Lime). */
.et-l--footer .cca-accent {
color: var(--gcid-secondary-color);
}
/* Linklisten im Footer (Plan 03-08, dauerhaft seit 03-14): Divi 5.16 liest die Listen-Felder
des Text-Moduls (bodyFont.ul.list) aus Presets nicht aus (MCP-Warnung unknown_group_part).
Live: Liste ohne Punkte und Einzug. */
.et-l--footer .cca-footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}
/* Abstand zwischen den Footer-Links wie live (space-y-2.5 = „CCA Abstand 2.5“). */
.et-l--footer .cca-footer-links li + li {
margin-top: var(--gvid-8416e6d6-2ceb-4fa0-92f1-c99b071a7f02);
}
/* Hervorhebung im Footer (Plan 03-12): „Duisburg“ in „Sitz in Duisburg · aktiv im gesamten
DACH-Raum“ heller als der Rest (live text-slate-400 auf text-slate-500); Teilwort-Farbe ginge in
Divi nur per Inline-Farbe (style=, verboten). Nutzung: im
Text-Modul (Theme-Builder-Footer). */
.et-l--footer .cca-hervorhebung {
color: var(--gcid-1607846f-ca52-4e59-a4af-92be9c0285a3);
}
/* ===== Plan 03-12: Hauptmenü und Leistungen-Dropdown (D-01, D-06) =====
Kurznamen für die Divi-Variablen in Klammern (per MCP angelegt). Die Schattengeometrie
hat keinen Divi-Variablentyp (Divi kennt Zahl, Farbe, Schrift, Bild, Verlauf); ihre Farbe
kommt aus „CCA Schatten Hover“. */
:root {
--cca-abstand-0-5: var(--gvid-fd14e262-4f3f-423c-a907-dcd5f5e07343); /* „CCA Abstand 0.5“ (Tailwind 0.5) */
--cca-abstand-1: var(--gvid-fce9f4da-4cfb-4fae-a85c-fea284b42d50); /* „CCA Abstand 1“ (Tailwind 1) */
--cca-abstand-1-5: var(--gvid-fb0bd885-4450-4ca9-919e-179856e5d5de); /* „CCA Abstand 1.5“ (Tailwind 1.5) */
--cca-dropdown-breite: var(--gvid-87fc948c-fa90-4934-b98b-43d880992da0); /* „CCA Dropdown Breite“ (live w-[28rem]) */
--cca-text-badge: var(--gvid-e0a1d8a5-4a86-4f1f-9d0b-036f50b81b7f); /* „CCA Text Badge“ (live text-[10px]) */
--cca-linie: var(--gvid-79ab3c32-e19a-4c60-8c6f-962e989b55b0); /* „CCA Linie“ (Rahmen-/Trennlinienstärke) */
--cca-schatten-xl: 0 20px 25px -5px var(--gcid-aa9e65cc-2aa1-4af5-9d2c-62a20353812d), 0 8px 10px -6px var(--gcid-aa9e65cc-2aa1-4af5-9d2c-62a20353812d);
}
/* Hauptmenü Desktop, Abstände: live stehen die Punkte 4 px auseinander (nav gap-1). Divi setzt je
li 11 px Innenabstand links/rechts, an der Liste −11 px Außenabstand und im Menü ohne Logo 8 px
Abstand oben; das Menümodul hat dafür kein Feld. Innenabstand, Radius und Zeilenhöhe der Links
selbst kommen aus dem Preset „CCA · Menü · Hauptmenü“ (nativ, im Visual Builder änderbar). */
.et-l--header .et_pb_menu .et-menu {
margin-left: 0;
margin-right: 0;
gap: var(--cca-abstand-1);
}
.et-l--header .et_pb_menu .et-menu > li {
padding-left: 0;
padding-right: 0;
margin-top: 0;
}
/* Menülinks (Plan 03-12, dauerhaft seit 03-14): Innenabstand 8/16 px und Radius md wie live.
Divi 5.16 ignoriert Abstand, Rahmen und Hintergrund am menu-Element eines Menü-Presets
(MCP-Warnung misplaced_group), deshalb steht das hier und ist nicht im Visual Builder pflegbar. */
header.et-l--header .et_pb_menu__menu > nav > ul > li > a {
padding: var(--gvid-908d6082-b3a5-4391-ab85-6422b7864eec) var(--gvid-a05b2361-27ae-4764-ab46-de0d450ee9fe);
border-radius: var(--gvid-7a89da13-4df5-4ab9-bc18-053c76345929);
}
/* Kein Abblenden beim Überfahren: Divi blendet Menülinks per opacity 0.7 ab (.et-menu a:hover);
live wechseln nur Farbe und Hintergrund. Dafür gibt es kein Divi-Feld. */
.et-l--header .et_pb_menu .et-menu a:hover {
opacity: 1;
}
/* Aktive Pille (D-06): aktueller Punkt, auf Unterseiten der Elternpunkt „Leistungen“ und
„Leistungen“ bei offenem Dropdown in Primär-hell mit Primär-Text (live bg-primary-light
text-primary, Radius aus dem Preset). Divi kennt für aktive Links nur eine Textfarbe, keinen
Hintergrund. cca-nav-closed setzt cca-ui.js nach Escape (D-22). */
.et-l--header .et_pb_menu .et-menu > li.current-menu-item > a,
.et-l--header .et_pb_menu .et-menu > li.current-menu-ancestor > a,
.et-l--header .et_pb_menu .et-menu > li.current-menu-parent > a,
.et-l--header .et_pb_menu .et-menu > li.menu-item-has-children:not(.cca-nav-closed):hover > a,
.et-l--header .et_pb_menu .et-menu > li.menu-item-has-children:not(.cca-nav-closed):focus-within > a {
background-color: var(--gcid-b2f7acee-9b78-41c6-a7d3-8e3d2987a788);
color: var(--gcid-primary-color);
}
/* Pfeil an „Leistungen“ wie live: 12 px groß, 4 px hinter dem Text, 16 px vor dem Rand, dreht
sich beim Öffnen. Divi setzt sein ETmodules-Zeichen 16 px groß absolut an den rechten Rand;
Größe und Lage haben kein Feld. Der rechte Innenabstand dieses einen Links wächst um Pfeil und
Abstand (Abstand 4 + Text sehr klein + Abstand 1). */
.et-l--header .et_pb_menu .et-menu > li.menu-item-has-children > a {
padding-right: calc(var(--gvid-a05b2361-27ae-4764-ab46-de0d450ee9fe) + var(--gvid-19c8f92c-c532-4595-8748-a449e3fbf46e) + var(--cca-abstand-1));
}
.et-l--header .et_pb_menu .et-menu > li.menu-item-has-children > a::after {
top: 50%;
right: var(--gvid-a05b2361-27ae-4764-ab46-de0d450ee9fe);
font-size: var(--gvid-19c8f92c-c532-4595-8748-a449e3fbf46e);
line-height: 1;
transform: translateY(-50%);
transition: transform 0.2s ease-in-out;
}
.et-l--header .et_pb_menu .et-menu > li.menu-item-has-children:not(.cca-nav-closed):hover > a::after,
.et-l--header .et_pb_menu .et-menu > li.menu-item-has-children:not(.cca-nav-closed):focus-within > a::after {
transform: translateY(-50%) rotate(180deg);
}
/* Schmaler Desktop 981–1100 px (D-04, keine Umbrüche): mit den Live-Abständen (16 px je Seite,
Preset) brauchen Wortmarke, Menü und Telefon/CTA etwa 1056 px; darunter bräche „Kontakt“ in eine
zweite Zeile. Hier nur 8 px je Seite und keine Lücke zwischen den Punkten. Divi-Presets kennen
nur Desktop/Tablet/Phone, keinen Zwischenbereich; die Grenzen sind Divis Tablet-Grenze und der
D-04-Prüfbereich (Medienabfragen können keine Variablen lesen). */
@media (min-width: 981px) and (max-width: 1100px) {
.et-l--header .et_pb_menu .et_pb_menu__menu > nav > ul.et-menu {
gap: 0;
}
.et-l--header .et_pb_menu .et_pb_menu__menu > nav > ul.et-menu > li > a {
padding-left: var(--gvid-908d6082-b3a5-4391-ab85-6422b7864eec);
padding-right: var(--gvid-908d6082-b3a5-4391-ab85-6422b7864eec);
}
.et-l--header .et_pb_menu .et_pb_menu__menu > nav > ul.et-menu > li.menu-item-has-children > a {
padding-right: calc(var(--gvid-908d6082-b3a5-4391-ab85-6422b7864eec) + var(--gvid-19c8f92c-c532-4595-8748-a449e3fbf46e) + var(--cca-abstand-1));
}
.et-l--header .et_pb_menu .et_pb_menu__menu > nav > ul.et-menu > li.menu-item-has-children > a::after {
right: var(--gvid-908d6082-b3a5-4391-ab85-6422b7864eec);
}
}
/* Dropdown-Panel (D-01): live 28 rem breit, mittig unter „Leistungen“, 12 px Luft darüber,
Radius 2xl, 1 px Rahmen in „CCA Border“, großer Schatten, 8 px Innenabstand. Divis Dropdown
hat nur Farbfelder (Preset: Hintergrund weiß, Textfarbe); Breite, Lage, Radius, Rahmen und
Schatten fehlen. Der blaue 3-px-Strich oben (Divi-Standard) entfällt durch den Rahmen. */
.et-l--header .et_pb_menu .et-menu li ul.sub-menu {
top: calc(100% + var(--gvid-afbfde81-b259-4d59-847e-a22f16485bf5));
left: 50%;
width: var(--cca-dropdown-breite);
padding: var(--gvid-908d6082-b3a5-4391-ab85-6422b7864eec);
border: var(--cca-linie) solid var(--gcid-7f297dfd-2528-43b5-b931-69e97489b94b);
border-radius: var(--gvid-98f2f345-d100-44e1-a5b7-9a56bf82c57f);
box-shadow: var(--cca-schatten-xl);
transform: translateX(-50%);
}
/* Hover-Brücke: unsichtbarer Streifen über dem Panel, so hoch wie die Luft darüber, damit das
Dropdown auf dem Weg von „Leistungen“ ins Panel offen bleibt (Divi öffnet per li:hover und
schließt ohne Verzögerung, D-02). */
.et-l--header .et_pb_menu .et-menu li ul.sub-menu::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: calc(var(--gvid-afbfde81-b259-4d59-847e-a22f16485bf5) + var(--cca-linie));
}
/* Dropdown-Punkte: volle Breite, Icon-Kachel links, Text rechts, 12 px Innenabstand und Lücke,
Radius xl (live flex gap-3 p-3 rounded-xl). Beim Überfahren und beim Tastaturfokus derselbe
Hintergrund wie der aktuelle Punkt, „CCA Primär Hell 60 %“ (Philipps Wunsch 2026-10-18 statt des
kaum sichtbaren „CCA Light BG“ von live); die Fußzeile „Alle Leistungen ansehen“ behält ihren
eigenen Stil. Divi setzt sonst 200 px Breite, 6/20 px Innenabstand und 22 px rechts am li und hat
für Hover-Hintergründe im Dropdown kein Feld. */
.et-l--header .et_pb_menu .et-menu .sub-menu > li {
display: block;
width: 100%;
margin: 0;
padding: 0;
line-height: inherit;
}
.et-l--header .et_pb_menu .et-menu .sub-menu > li > a {
display: flex;
align-items: flex-start;
gap: var(--gvid-afbfde81-b259-4d59-847e-a22f16485bf5);
width: auto;
padding: var(--gvid-afbfde81-b259-4d59-847e-a22f16485bf5);
border-radius: var(--gvid-893f524f-fb0e-4aab-8565-3f7c6624a88f);
font-size: var(--gvid-3ab5eb1f-33a2-4b94-840d-b74dc9390634);
line-height: 1.43;
transition: background-color 0.15s ease-in-out;
}
.et-l--header .et_pb_menu .et-menu .sub-menu > li:not(.cca-nav-all) > a:hover,
.et-l--header .et_pb_menu .et-menu .sub-menu > li:not(.cca-nav-all) > a:focus-visible {
background-color: var(--gcid-3ed9e427-8b68-4eee-b913-701bf6cdcf95);
}
/* Aktueller Punkt im Dropdown (D-06): Hintergrund „CCA Primär Hell 60 %“, Titel in Primär.
Divi färbt nur den Linktext (Preset „Dropdown aktiver Link“). */
.et-l--header .et_pb_menu .et-menu .sub-menu > li.current-menu-item:not(.cca-nav-all) > a {
background-color: var(--gcid-3ed9e427-8b68-4eee-b913-701bf6cdcf95);
}
.et-l--header .et_pb_menu .et-menu .sub-menu > li.current-menu-item:not(.cca-nav-all) .cca-nav__title {
color: var(--gcid-primary-color);
}
/* Icon-Kachel (D-01): 36 px (Variable „CCA Icon-Kreis“), Radius lg, „CCA Primär Hell“; Icon 18 px
(Variable „CCA Text groß“) in „CCA Primär Hover“. Die Form kommt als Maske aus
cca-ui/icons/.svg (WP-Menü: CSS-Klasse cca-icon-), so bleibt die Farbe eine
Divi-Variable. Divi-Menüs kennen keine Icons; die Spans setzt der Walker-Filter in cca-ui.php. */
.et_pb_menu .cca-nav__icon {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: var(--gvid-24c6ee59-4c23-4738-b360-64f0bb78b018);
height: var(--gvid-24c6ee59-4c23-4738-b360-64f0bb78b018);
border-radius: var(--gvid-360bfca5-574d-4a6f-b864-b65b772b1b08);
background-color: var(--gcid-b2f7acee-9b78-41c6-a7d3-8e3d2987a788);
}
.et_pb_menu .cca-nav__icon::before {
content: "";
width: var(--gvid-be7b6047-0eea-44e4-97cb-8bea1066292e);
height: var(--gvid-be7b6047-0eea-44e4-97cb-8bea1066292e);
background-color: var(--gcid-c0277397-532d-493c-b1e4-f3c18a463b7a);
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Icon je Leistung: Zuordnung CSS-Klasse am WP-Menüpunkt → Datei in cca-ui/icons/ (Pfad relativ
zu dieser Datei). Eine neue Leistung braucht hier eine Zeile und eine SVG-Datei. */
.cca-icon-seo .cca-nav__icon::before {
-webkit-mask-image: url("icons/seo.svg");
mask-image: url("icons/seo.svg");
}
.cca-icon-sea .cca-nav__icon::before {
-webkit-mask-image: url("icons/sea.svg");
mask-image: url("icons/sea.svg");
}
.cca-icon-geo .cca-nav__icon::before {
-webkit-mask-image: url("icons/geo.svg");
mask-image: url("icons/geo.svg");
}
.cca-icon-chatgpt-ads .cca-nav__icon::before {
-webkit-mask-image: url("icons/chatgpt-ads.svg");
mask-image: url("icons/chatgpt-ads.svg");
}
.cca-icon-ki-automatisierung .cca-nav__icon::before {
-webkit-mask-image: url("icons/ki-automatisierung.svg");
mask-image: url("icons/ki-automatisierung.svg");
}
.cca-icon-webdesign .cca-nav__icon::before {
-webkit-mask-image: url("icons/webdesign.svg");
mask-image: url("icons/webdesign.svg");
}
/* Text eines Dropdown-Punkts (D-01): Titel halbfett in „CCA Dunkel“, dahinter „ · Kurztitel“
normal in „CCA Muted“ (Überschriftenschrift wie live), darunter die Tagline 12 px in der
Fließtextschrift (live text-xs text-muted mt-0.5 leading-snug). Der Punkt vor dem Kurztitel
kommt per ::before, damit er mobil (Kurztitel in eigener Zeile) entfallen kann. */
.et_pb_menu .cca-nav__text {
display: block;
flex: 1 1 auto;
min-width: 0;
}
.et_pb_menu .cca-nav__line {
display: block;
}
.et_pb_menu .cca-nav__title {
font-weight: 600;
color: var(--gcid-heading-color);
}
.et_pb_menu .cca-nav__short {
font-weight: 400;
color: var(--gcid-ac900d1e-62c9-4605-9723-cdae13e64f58);
}
.et_pb_menu .et-menu .cca-nav__short::before {
content: " · ";
}
.et_pb_menu .cca-nav__tagline {
display: block;
margin-top: var(--cca-abstand-0-5);
font-family: var(--et_global_body_font);
font-size: var(--gvid-19c8f92c-c532-4595-8748-a449e3fbf46e);
font-weight: 400;
line-height: 1.375;
color: var(--gcid-ac900d1e-62c9-4605-9723-cdae13e64f58);
}
/* Badge (WP-Menü: Klasse cca-badge-, z. B. „Neu“ bei ChatGPT Ads): Pille in „CCA Sekundär“
(Lime) mit „CCA CTA Text“, 10 px fett, Großbuchstaben, 8 px hinter dem Kurztitel (live ml-2
rounded-full bg-cta px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider). */
.et_pb_menu .cca-nav__badge {
display: inline-flex;
margin-left: var(--gvid-908d6082-b3a5-4391-ab85-6422b7864eec);
padding: var(--cca-abstand-0-5) var(--cca-abstand-1-5);
border-radius: 9999px;
background-color: var(--gcid-secondary-color);
color: var(--gcid-1d36ac03-2806-4adc-afbd-a1d484809dc8);
font-family: var(--et_global_heading_font);
font-size: var(--cca-text-badge);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
vertical-align: middle;
}
/* Fußzeile „Alle Leistungen ansehen →“ (WP-Menü: Klasse cca-nav-all): live abgesetzt mit
Trennlinie oben und „CCA Light BG“, reicht bis an den Panelrand (daher negative Außenabstände
in Höhe des Panel-Innenabstands und untere Ecken passend zum Panel), Text halbfett in Primär,
Pfeil dahinter (live px-4 py-3, gap-1.5). Der Pfeil ist ein Textzeichen in Primär. */
.et-l--header .et_pb_menu .et-menu .sub-menu > li.cca-nav-all {
width: auto;
margin: var(--gvid-908d6082-b3a5-4391-ab85-6422b7864eec) calc(-1 * var(--gvid-908d6082-b3a5-4391-ab85-6422b7864eec)) calc(-1 * var(--gvid-908d6082-b3a5-4391-ab85-6422b7864eec));
border-top: var(--cca-linie) solid var(--gcid-7f297dfd-2528-43b5-b931-69e97489b94b);
border-radius: 0 0 calc(var(--gvid-98f2f345-d100-44e1-a5b7-9a56bf82c57f) - var(--cca-linie)) calc(var(--gvid-98f2f345-d100-44e1-a5b7-9a56bf82c57f) - var(--cca-linie));
background-color: var(--gcid-36312162-8eeb-45b2-b949-ce56e360e003);
}
.et-l--header .et_pb_menu .et-menu .sub-menu > li.cca-nav-all > a {
display: inline-flex;
align-items: center;
gap: var(--cca-abstand-1-5);
padding: var(--gvid-afbfde81-b259-4d59-847e-a22f16485bf5) var(--gvid-a05b2361-27ae-4764-ab46-de0d450ee9fe);
border-radius: 0;
background-color: transparent;
}
.et-l--header .et_pb_menu .et-menu .sub-menu > li.cca-nav-all .cca-nav__title {
color: var(--gcid-primary-color);
}
.et-l--header .et_pb_menu .et-menu .sub-menu > li.cca-nav-all > a::after {
content: "→";
color: var(--gcid-primary-color);
font-weight: 600;
}
/* ===== Plan 03-12: Barrierefreiheit der Navigation (D-22) und mobiles Menü (D-03) ===== */
/* Öffnen per Tastatur: steht der Fokus auf „Leistungen“ oder einem Unterpunkt, ist das Dropdown
offen (gleiche Werte wie Divis Hover-Regel .nav li:hover > ul). Divi öffnet nur per Maus. */
.et-l--header .et_pb_menu .et-menu li.menu-item-has-children:not(.cca-nav-closed):focus-within > ul.sub-menu {
visibility: visible;
opacity: 1;
}
/* Escape schließt (D-22): cca-ui.js setzt cca-nav-closed am li, solange Maus bzw. Fokus dort
bleiben; das schlägt Divis :hover- und et-hover-Regeln. */
.et-l--header .et_pb_menu .et-menu li.cca-nav-closed > ul.sub-menu {
visibility: hidden;
opacity: 0;
}
/* Sichtbarer Tastaturfokus für Menülinks, Hamburger und Untermenü-Button in „CCA Primär“
(live focus-visible:ring-primary); Divi entfernt den Fokusrahmen an Menülinks. */
.et-l--header .et_pb_menu a:focus-visible,
.et-l--header .et_pb_menu .mobile_menu_bar:focus-visible,
.et-l--header .et_pb_menu .mobile-toggle:focus-visible {
outline: var(--cca-abstand-0-5) solid var(--gcid-primary-color);
outline-offset: var(--cca-abstand-0-5);
}
/* Mobile Header-Zeile (D-03, Gap-Closure 03): Divi verschachtelt den Hamburger und die Menüliste
in Spalte, Menümodul und vier Hüllen; die Spalte ist mobil nur 8/24 breit. Ohne eigene Boxen
(display: contents) werden Hamburger und Liste direkte Kinder der Header-Zeile: der Hamburger
steht rechts in der Zeile, die Liste kann im geöffneten Menü als volle Zeile darunter umbrechen.
Divi hat für diesen Aufbau kein Feld; 980 px ist Divis Tablet-Grenze (D-04, Medienabfragen
können keine Variablen lesen). Die Desktop-Navigation (über 980 px) bleibt unberührt. */
@media (max-width: 980px) {
.et-l--header .et_pb_column:has(> .et_pb_menu),
.et-l--header .et_pb_menu,
.et-l--header .et_pb_menu .et_pb_menu_inner_container,
.et-l--header .et_pb_menu .et_pb_menu__wrap,
.et-l--header .et_pb_menu .et_mobile_nav_menu,
.et-l--header .et_pb_menu .mobile_nav {
display: contents;
}
}
/* Hamburger wie live (Gap-Closure 03): 40-px-Fläche („CCA Icon-Kreis groß“) am rechten Rand der
Zeile, Radius md, Zeichen mittig; geöffnet „CCA Light BG“ als helles Quadrat und Divis
ETmodules-Zeichen „M“ (Kreuz) statt „a“ (drei Striche). Divi kennt fürs Menümodul nur Farbe und
Größe des Hamburger-Zeichens (Preset), weder Fläche noch ein Schließen-Zeichen. cca-menu-open
setzt cca-ui.js am body, solange Divis Menü offen ist; während das Panel hinausfährt
(cca-menu-closing) zeigt der Knopf schon wieder die drei Striche, wie live das Label sofort wechselt. */
@media (max-width: 980px) {
.et-l--header .et_pb_menu .mobile_menu_bar {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: var(--gvid-6306d242-67e4-4ca0-8024-1dfd516bbe9d);
height: var(--gvid-6306d242-67e4-4ca0-8024-1dfd516bbe9d);
margin-left: auto;
border-radius: var(--gvid-7a89da13-4df5-4ab9-bc18-053c76345929);
transform: none;
}
.et-l--header .et_pb_menu .mobile_menu_bar::before {
top: 0;
line-height: 1;
}
body.cca-menu-open:not(.cca-menu-closing) .et-l--header .et_pb_menu .mobile_menu_bar {
background-color: var(--gcid-36312162-8eeb-45b2-b949-ce56e360e003);
}
body.cca-menu-open:not(.cca-menu-closing) .et-l--header .et_pb_menu .mobile_menu_bar::before {
content: "M";
}
}
/* Kontaktbereich (Anruf-Kachel, „Kostenloses Erstgespräch“, E-Mail) nur im geöffneten Menü
(Gap-Closure 03): live steht er im mobilen Panel unter den Menüpunkten und ist bei geschlossenem
Menü unsichtbar. Er ist eine eigene Sektion im Theme-Builder-Header (Zeile .cca-header-mobile,
auf dem Desktop per Divi „Deaktivieren auf“ aus); Divi kann eine Sektion nicht an den
Menüzustand koppeln. */
@media (max-width: 980px) {
body:not(.cca-menu-open) .et-l--header .et_pb_section:has(> .cca-header-mobile) {
display: none;
}
}
/* Geöffnetes Menü als Vollbild wie live (Gap-Closure 03): der ganze Header (Zeile mit Wortmarke
und X, Menüliste, Kontaktbereich) liegt fixiert über der Seite, volle Höhe des sichtbaren
Fensters (100dvh, ältere Browser 100vh), scrollt bei Bedarf in sich; die Seite dahinter
scrollt nicht (overflow hidden an html und body, live ebenso). Der Header selbst ist
durchsichtig: Weiß kommen nur die stehende Kopfzeile und das hereinfahrende Panel (Blöcke
unten), damit die Seite während des Einschubs dahinter sichtbar bleibt wie live; waagerecht
abgeschnitten, damit das Panel außerhalb des Fensters keinen Querscroll erzeugt. Divi klappt
sein Menü nur als Liste unter dem Header auf und hat dafür keine Einstellung. z-index über
Divis Sticky-Header (inline 10010) und Menüliste (9999). Divis Sticky (Header-Abschnitt beim
Scrollen fixiert, inline !important) löst cca-ui.js, indem es die Seite beim Öffnen nach oben
scrollt und beim Schließen zurück; damit die Seite dabei nicht sichtbar springt, verschiebt
cca-ui.js den Inhaltsbereich so lange um den gemessenen Versatz (--cca-menu-versatz am body). */
@media (max-width: 980px) {
html:has(> body.cca-menu-open),
body.cca-menu-open {
overflow: hidden;
}
body.cca-menu-open .et-l--header {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 100000;
height: 100vh;
height: 100dvh;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
}
body.cca-menu-open #et-main-area {
transform: translateY(var(--cca-menu-versatz));
}
}
/* Stehende Kopfzeile im geöffneten Menü (Gap-Closure 03, Folgeauftrag): live bleiben Logo und X
oben stehen, nur das Panel darunter fährt herein und scrollt. Der Header-Abschnitt verliert
seinen halbtransparenten Preset-Hintergrund (er reicht hier über die ganze Menüliste und würde
die Seite sofort abdecken); den weißen Streifen trägt die Logo-Spalte, über die volle
Fensterbreite verlängert (Schatten ohne Versatz, seitlich nicht beschnitten), in Höhe der
mobilen Kopfzeile („CCA Header Höhe mobil“). Logo-Spalte und Hamburger kleben beim Scrollen im
Menü oben (sticky), der Hamburger mittig in der Zeile („CCA Icon-Kreis groß“). 100vmax ist ein
Strukturwert (Reichweite des Streifens), keine Gestaltungsgröße. Divi hat für Lage und
Verhalten der Kopfzeile im geöffneten Menü keine Felder. */
@media (max-width: 980px) {
body.cca-menu-open .et-l--header .et_pb_section:has(.mobile_nav) {
background-color: transparent;
}
body.cca-menu-open .et-l--header .et_pb_row:has(.mobile_nav) > .et_pb_column:first-child {
position: sticky;
top: 0;
z-index: 1;
background-color: var(--gcid-d257e5b5-e1f9-472a-97da-4dc10af6332a);
box-shadow: 0 0 0 100vmax var(--gcid-d257e5b5-e1f9-472a-97da-4dc10af6332a);
clip-path: inset(0 -100vmax);
}
body.cca-menu-open .et-l--header .et_pb_menu .mobile_menu_bar {
position: sticky;
top: calc((var(--gvid-88f18c7f-804f-4579-826d-127692e00969) - var(--gvid-6306d242-67e4-4ca0-8024-1dfd516bbe9d)) / 2);
z-index: 2;
}
}
/* Panel fährt von rechts herein und wieder hinaus wie live (Gap-Closure 03, Folgeauftrag; live
#mobile-menu „transition-transform duration-300 ease-out“, gemessen bei 390 × 844). Das Panel
besteht hier aus drei Teilen, die sich gleich bewegen: dem weißen Hintergrund unter der
Kopfzeile (::before am Header, fest bis zum unteren Fensterrand), der Menüliste und dem
Kontaktbereich (eigene Sektion). Alle drei verschieben sich um die volle Fensterbreite (100vw,
live translateX 100 %), damit sie im Gleichschritt laufen. cca-ui.js setzt cca-menu-entering
für das erste Bild beim Öffnen und cca-menu-closing, bis das Hinausfahren fertig ist; erst
danach fällt cca-menu-open weg. Dauer 0,3 s und Kurve cubic-bezier(0, 0, 0.2, 1) sind
Zeitwerte von live (Divi hat dafür keine Variable, wie die übrigen transition-Werte in dieser
Datei). Divi kennt kein seitliches Einfahren des mobilen Menüs. */
@media (max-width: 980px) {
body.cca-menu-open .et-l--header::before {
content: "";
position: fixed;
top: var(--gvid-88f18c7f-804f-4579-826d-127692e00969);
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background-color: var(--gcid-d257e5b5-e1f9-472a-97da-4dc10af6332a);
}
body.cca-menu-open .et-l--header::before,
body.cca-menu-open .et-l--header .et_pb_menu .et_mobile_menu,
body.cca-menu-open .et-l--header .et_pb_section:has(> .cca-header-mobile) {
transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);
}
body.cca-menu-entering .et-l--header::before,
body.cca-menu-entering .et-l--header .et_pb_menu .et_mobile_menu,
body.cca-menu-entering .et-l--header .et_pb_section:has(> .cca-header-mobile),
body.cca-menu-closing .et-l--header::before,
body.cca-menu-closing .et-l--header .et_pb_menu .et_mobile_menu,
body.cca-menu-closing .et-l--header .et_pb_section:has(> .cca-header-mobile) {
transform: translateX(100vw);
}
}
/* Ohne Animation bei „Bewegung reduzieren“ (Betriebssystem-Einstellung): das Panel steht sofort
da und verschwindet sofort; cca-ui.js setzt dann auch keine Zwischenzustände. */
@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
body.cca-menu-open .et-l--header::before,
body.cca-menu-open .et-l--header .et_pb_menu .et_mobile_menu,
body.cca-menu-open .et-l--header .et_pb_section:has(> .cca-header-mobile) {
transition: none;
}
}
/* Menüliste im geöffneten Menü (Gap-Closure 03): statt Divis absolut gesetztem Aufklappfeld eine
volle Zeile unter Wortmarke und X im normalen Fluss, damit der Kontaktbereich direkt darunter
folgt. Die Header-Zeile bricht dafür um (ohne Divis Zeilenabstand), die erste Zeile behält die
mobile Header-Höhe („CCA Header Höhe mobil“). Abstände wie live: 32 px über dem ersten Punkt
(py-8 = „CCA Abstand 8“), 20 px bis zur Kontaktzeile („CCA Abstand 5“, zusammen mit deren 8 px
Innenabstand die 28 px von live); keine Linie und kein Schatten. Divi hat für Lage, Abstände
und Rahmen der mobilen Liste keine Felder. Divi lässt die Liste beim Öffnen und Schließen per
jQuery slideDown/slideUp (500 ms) in der Höhe auf- und zugehen und schreibt dafür height,
padding und overflow inline; das widerspräche dem seitlichen Einschub (Liste und Kontaktbereich
würden gleichzeitig nach unten wachsen). Gegen Inline-Stile hilft nur !important, deshalb hier
bei Höhe, Innenabstand und overflow, nur solange das Menü offen ist. Divis z-index 9999 der
Liste wirkt hier, weil sie durch display: contents ein Flex-Element der Header-Zeile ist; sie
läge sonst beim Scrollen im Menü über der stehenden Kopfzeile mit Logo und X. */
@media (max-width: 980px) {
body.cca-menu-open .et-l--header .et_pb_row:has(.mobile_nav) {
flex-wrap: wrap;
row-gap: 0;
height: auto;
}
body.cca-menu-open .et-l--header .et_pb_row:has(.mobile_nav) > .et_pb_column:first-child {
min-height: var(--gvid-88f18c7f-804f-4579-826d-127692e00969);
}
body.cca-menu-open .et-l--header .et_pb_menu .et_mobile_menu {
position: static;
z-index: auto;
flex: 0 0 100%;
height: auto !important;
overflow: visible !important;
padding: var(--gvid-ff93ab0f-5df7-4c5c-9534-87102b7b49e9) 0 var(--gvid-ed1f8f68-36de-4018-8bfa-41399f8cae65) !important;
border-top: 0;
box-shadow: none;
}
}
/* Mobiles Menü, Rahmen bei geschlossenem Menü (während Divis Zuklapp-Animation): Divi zieht oben
einen 3-px-Strich in der Linienfarbe des Presets; live gibt es keinen. Die Liste ist zu nur noch
unsichtbar (cca-menu-open fällt nach dem Hinausfahren weg, Divis slideUp läuft 500 ms). */
.et-l--header .et_pb_menu .et_mobile_menu {
border-top-width: var(--cca-linie);
}
body:not(.cca-menu-open) .et-l--header .et_pb_menu .et_mobile_menu {
visibility: hidden;
}
/* Hauptpunkte im mobilen Menü wie live (Gap-Closure 03, px-4 py-3 text-lg font-medium rounded-lg,
4 px Abstand, keine Trennlinien): Innenabstand „CCA Abstand 3“/„CCA Abstand 4“, Schrift
„CCA Text groß“ mit Zeilenhöhe 1,75 rem („CCA Abstand 7“, live leading-7), Radius lg, Abstand
„CCA Abstand 1“; „Leistungen“ ohne Divis graue Hinterlegung (Pseudo-Element der Zeile) und Fettschrift. Der aktuelle Punkt
(auf Unterseiten „Leistungen“) bekommt die Pille in „CCA Primär Hell“ wie auf dem Desktop (D-06),
Überfahren „CCA Light BG“. Divi stellt für mobile Links nur Farben bereit (Preset), keine
Abstände, Radien oder Hintergründe; Trennlinien und Hinterlegung sind Divi-Standard ohne Feld. */
.et-l--header .et_pb_menu .et_mobile_menu > li > a {
padding: var(--gvid-afbfde81-b259-4d59-847e-a22f16485bf5) var(--gvid-a05b2361-27ae-4764-ab46-de0d450ee9fe);
border-bottom: 0;
border-radius: var(--gvid-360bfca5-574d-4a6f-b864-b65b772b1b08);
font-size: var(--gvid-be7b6047-0eea-44e4-97cb-8bea1066292e);
font-weight: 500;
line-height: var(--gvid-109c1bdb-6864-4dc8-af5d-8d71c6661d14);
}
.et-l--header .et_pb_menu .et_mobile_menu > li + li {
margin-top: var(--cca-abstand-1);
}
.et-l--header .et_pb_menu.et_pb_menu--collapsible-mobile .et_mobile_menu > li.menu-item-has-children::before {
content: none;
}
.et-l--header .et_pb_menu.et_pb_menu--collapsible-mobile .et_mobile_menu > li.menu-item-has-children > a {
padding-right: var(--gvid-a05b2361-27ae-4764-ab46-de0d450ee9fe);
}
.et-l--header .et_pb_menu .et_mobile_menu li a:hover {
background-color: var(--gcid-36312162-8eeb-45b2-b949-ce56e360e003);
opacity: 1;
}
.et-l--header .et_pb_menu .et_mobile_menu > li.current-menu-item > a,
.et-l--header .et_pb_menu .et_mobile_menu > li.current-menu-ancestor > a,
.et-l--header .et_pb_menu .et_mobile_menu > li.current-menu-parent > a {
background-color: var(--gcid-b2f7acee-9b78-41c6-a7d3-8e3d2987a788);
}
/* Aufklapp-Button an „Leistungen“ wie live (Gap-Closure 03): eigene Fläche mit 16 px Innenabstand
seitlich, Radius lg, 4 px neben dem Link, Chevron in „CCA Dunkel“, der sich beim Aufklappen
dreht (Zeichengröße 1,5 rem = „CCA Abstand 6“: das ETmodules-Zeichen füllt nur die halbe Breite,
so ist es wie live 12 px breit); Überfahren „CCA Light BG“. Divis Button zeigt ein Plus/Minus
(ETmodules „L“/„K“, vom Menümodul mit !important gesetzt); das Pfeilzeichen „3“ (wie am
Desktop-„Leistungen“) kommt deshalb als zweites Pseudo-Element, Divis Zeichen wird ausgeblendet. */
.et-l--header .et_pb_menu.et_pb_menu--collapsible-mobile .et_mobile_menu li.menu-item-has-children {
column-gap: var(--cca-abstand-1);
}
.et-l--header .et_pb_menu.et_pb_menu--collapsible-mobile .et_mobile_menu li.menu-item-has-children > .mobile-toggle {
padding: 0 var(--gvid-a05b2361-27ae-4764-ab46-de0d450ee9fe);
border-radius: var(--gvid-360bfca5-574d-4a6f-b864-b65b772b1b08);
color: var(--gcid-heading-color);
transition: background-color 0.2s ease-in-out;
}
.et-l--header .et_pb_menu.et_pb_menu--collapsible-mobile .et_mobile_menu li.menu-item-has-children > .mobile-toggle:hover {
background-color: var(--gcid-36312162-8eeb-45b2-b949-ce56e360e003);
}
.et-l--header .et_pb_menu.et_pb_menu--collapsible-mobile .et_mobile_menu .mobile-toggle .et_pb_menu__collapsible-icon::before {
display: none;
}
.et-l--header .et_pb_menu.et_pb_menu--collapsible-mobile .et_mobile_menu .mobile-toggle .et_pb_menu__collapsible-icon::after {
content: "3";
display: block;
font-family: ETmodules;
font-size: var(--gvid-8cfa253b-e46a-4552-a0f1-40f50d855c4d);
line-height: 1;
transition: transform 0.2s ease-in-out;
}
.et-l--header .et_pb_menu.et_pb_menu--collapsible-mobile .et_mobile_menu li.et_pb_collapsible_menu_open > .mobile-toggle .et_pb_menu__collapsible-icon::after {
transform: rotate(180deg);
}
/* Mobiles Leistungen-Untermenü (D-03, live Titel fett, darunter Kurztitel klein, Badge hinter dem
Titel, keine Tagline, kein „Alle Leistungen ansehen“): Kachel und Text nebeneinander, kleinere
Icon-Kachel (Abstand 8 = 2 rem, Icon 16 px). Divi klont die Desktop-Liste ohne eigene Felder. */
.et-l--header .et_pb_menu .et_mobile_menu .sub-menu > li > a {
display: flex;
align-items: center;
gap: var(--gvid-afbfde81-b259-4d59-847e-a22f16485bf5);
}
.et-l--header .et_pb_menu .et_mobile_menu .cca-nav__icon {
width: var(--gvid-ff93ab0f-5df7-4c5c-9534-87102b7b49e9);
height: var(--gvid-ff93ab0f-5df7-4c5c-9534-87102b7b49e9);
}
.et-l--header .et_pb_menu .et_mobile_menu .cca-nav__icon::before {
width: var(--gvid-801e0838-bf3f-49c7-ae03-55f96bcd77bd);
height: var(--gvid-801e0838-bf3f-49c7-ae03-55f96bcd77bd);
}
.et-l--header .et_pb_menu .et_mobile_menu .cca-nav__line {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.et-l--header .et_pb_menu .et_mobile_menu .cca-nav__badge {
order: 2;
}
.et-l--header .et_pb_menu .et_mobile_menu .cca-nav__short {
order: 3;
flex-basis: 100%;
font-family: var(--et_global_body_font);
font-size: var(--gvid-19c8f92c-c532-4595-8748-a449e3fbf46e);
}
.et-l--header .et_pb_menu .et_mobile_menu .cca-nav__tagline,
.et-l--header .et_pb_menu .et_mobile_menu li.cca-nav-all {
display: none;
}
/* Aufgeklapptes Leistungen-Untermenü wie live (Gap-Closure 03, ml-2 pl-4 border-l-2 mt-1 mb-2
space-y-1): 8 px eingerückt mit 2 px Linie in „CCA Border“ links, 16 px bis zu den Punkten,
4 px darüber, 8 px darunter, 4 px zwischen den Punkten. Punkte: 10/12 px Innenabstand
(„CCA Abstand 2.5“/„CCA Abstand 3“), Radius lg, keine Trennlinien; Icon-Kachel Radius md; Titel
16 px („CCA Text Basis“) mit 24 px Zeilenhöhe, Kurztitel 12 px mit 16 px (live text-base /
text-xs). Divi rückt Unterpunkte nur pauschal ein (10 px, li li 5 %) und hat dafür keine Felder. */
.et-l--header .et_pb_menu .et_mobile_menu li ul.sub-menu {
margin: var(--cca-abstand-1) 0 var(--gvid-908d6082-b3a5-4391-ab85-6422b7864eec) var(--gvid-908d6082-b3a5-4391-ab85-6422b7864eec);
padding: 0 0 0 var(--gvid-a05b2361-27ae-4764-ab46-de0d450ee9fe);
border-left: calc(2 * var(--cca-linie)) solid var(--gcid-7f297dfd-2528-43b5-b931-69e97489b94b);
}
.et-l--header .et_pb_menu .et_mobile_menu .sub-menu > li {
padding-left: 0;
}
.et-l--header .et_pb_menu .et_mobile_menu .sub-menu > li + li {
margin-top: var(--cca-abstand-1);
}
.et-l--header .et_pb_menu .et_mobile_menu .sub-menu > li > a {
padding: var(--gvid-8416e6d6-2ceb-4fa0-92f1-c99b071a7f02) var(--gvid-afbfde81-b259-4d59-847e-a22f16485bf5);
border-bottom: 0;
border-radius: var(--gvid-360bfca5-574d-4a6f-b864-b65b772b1b08);
}
.et-l--header .et_pb_menu .et_mobile_menu .sub-menu .cca-nav__icon {
border-radius: var(--gvid-7a89da13-4df5-4ab9-bc18-053c76345929);
}
.et-l--header .et_pb_menu .et_mobile_menu .sub-menu .cca-nav__line {
font-size: var(--gvid-801e0838-bf3f-49c7-ae03-55f96bcd77bd);
line-height: var(--gvid-8cfa253b-e46a-4552-a0f1-40f50d855c4d);
}
.et-l--header .et_pb_menu .et_mobile_menu .sub-menu .cca-nav__short {
line-height: var(--gvid-a05b2361-27ae-4764-ab46-de0d450ee9fe);
}
/* Aktuelle Leistung im mobilen Untermenü wie live (Gap-Closure 03): Pille in „CCA Primär Hell“,
Titel in Primär (live auf /leistungen/seo der Punkt SEO). Divi färbt aktive Links mobil nur über
die Textfarbe des ganzen Links. */
.et-l--header .et_pb_menu .et_mobile_menu .sub-menu > li.current-menu-item > a {
background-color: var(--gcid-b2f7acee-9b78-41c6-a7d3-8e3d2987a788);
}
.et-l--header .et_pb_menu .et_mobile_menu .sub-menu > li.current-menu-item .cca-nav__title {
color: var(--gcid-primary-color);
}
/* „NEU“-Badge im mobilen Untermenü (Gap-Closure 03, Rückmeldung: zu eng): als Flex-Element der
Titelzeile darf es nicht schrumpfen und bricht nicht um; Zeilenhöhe der Titelzeile (24 px) wie
live, damit die Pille so hoch wird wie dort (28 px mit 2 px Innenabstand oben und unten).
Innenabstand und Farben kommen aus der allgemeinen Badge-Regel oben. */
.et-l--header .et_pb_menu .et_mobile_menu .cca-nav__badge {
flex-shrink: 0;
align-items: center;
white-space: nowrap;
line-height: inherit;
}
/* ===== Plan 03-13: Grid-Grundregeln für Grid über Presets =====
Divi 5.16 lädt seine Grid-Basis (css_grid_grid.css) nur, wenn display:grid direkt am Modul
steht; steht Grid nur im Preset (z. B. „CCA · Raster · …“), fehlt display:grid und die Gruppe
stapelt einspaltig (DetectFeature erkennt Presets hier nicht, belegt 2026-10-18 mit einer
reinen Testseite). Diese Regeln spiegeln die Divi-Basis für Gruppen, Spalten und Module;
Spaltenzahl, Abstände und Ausrichtung kommen weiterhin aus dem Preset. */
.et_grid_column,
.et_grid_group,
.et_grid_module {
display: grid;
column-gap: var(--horizontal-gap);
row-gap: var(--vertical-gap);
}
/* Wie in Divis Grid-Basis: Module in einer Grid-Gruppe ohne eigenen Abstand nach unten. */
.et_grid_column > .et_pb_module,
.et_grid_group > .et_pb_module,
.et_grid_module > .et_pb_module {
margin-bottom: 0;
}
/* ===== Plan 04-04: ratedo-Platzhalter (D-10) =====
Was: Größe des ratedo-Original-Widgets wie live (style="width:100%;max-width:180px;min-height:60px"
plus mx-auto): volle Breite bis 180 px, mindestens 60 px hoch, waagerecht zentriert. Das Script
(cca-ui.php, Handle cca-ratedo-badge) setzt erst im Browser Link und Siegel in das Element.
Warum hier: Der Platzhalter ist ein leeres Modul; D-10 legt die Größe in cca-ui.css fest, kein
Inline-Style und kein lokaler Design-Wert am Modul. Keine neuen Divi-Variablen (Divi 5 löscht
Variablen nie), sondern Summen vorhandener:
max-width = „CCA Breite Checkliste“ (11rem) + „CCA Abstand 1“ (0.25rem) = 11.25rem = 180 px;
min-height = „CCA Abstand 12“ (3rem) + „CCA Abstand 3“ (0.75rem) = 3.75rem = 60 px.
Wer: das Platzhalter-Modul mit der Klasse ratedo_badge (Feld CSS-Klassen) auf der Startseite. */
.ratedo_badge {
width: 100%;
max-width: calc(var(--gvid-243e3e96-4d8a-4f5f-a3f1-4723b474cb08) + var(--gvid-fce9f4da-4cfb-4fae-a85c-fea284b42d50));
min-height: calc(var(--gvid-bd791885-e227-4ee4-a1db-19e8884ffca8) + var(--gvid-afbfde81-b259-4d59-847e-a22f16485bf5));
margin-left: auto;
margin-right: auto;
}
/* Siegelbild, das das ratedo-Script einsetzt: als Block wie live (dort über Tailwinds Grundregel
img display:block). Inline ließe es unter dem Bild eine Zeilenlücke von gut 6 px, und der
Platzhalter würde höher als live (gemessen 2026-10-19: live 180 × 157 px). :where hält die
Spezifität niedrig, damit nichts Divi-Eigenes überstimmt wird. */
:where(.ratedo_badge) img {
display: block;
}
/* ===== Plan 04-05: A6/PAGE-01: Sticky-Header verdeckt Anker =====
Was: Sprungziele (#leistungen auf /, #local-seo auf /leistungen/seo) halten beim Anspringen
Abstand zum Sticky-Header, wie live (Tailwind scroll-mt-24 = 6rem an der Sektion).
Warum hier: Gemessen am 2026-10-19 lag die Oberkante von #leistungen bei 390 px unter der
Header-Unterkante (50 px < 64 px): der native Sprung des Browsers kommt vor Divis eigener
Hash-Korrektur (die setzt das Ziel danach genau an die Header-Unterkante, 80 bzw. 64 px). Die
Regel sichert den nativen Sprung und Seiten ohne Divi-Skript; Divi hat für scroll-margin kein
Feld an der Sektion. Wert über
die vorhandene Variable „CCA Abstand 24“ (6rem), kein Literal, keine neue Variable.
Wer: jede Divi-Sektion mit CSS-ID (Feld CSS-ID im Visual Builder). */
.et_pb_section[id] {
scroll-margin-top: var(--gvid-a0987e75-2114-499f-b9ac-176c25f820f2);
}
/* ===== Plan 04-07: Live-Icons Weg C (Abnahme D-02, Philipp 2026-10-20 „Icon B und C Empfehlung genehmigt“) =====
Was: feste Icons der Live-Seite (lucide-SVG, Form unverändert aus runs/staging-2026-10-19/p4-icons-live/)
als CSS-Maske. Die Form kommt aus cca-ui/icons/.svg, die Farbe ist die Textfarbe des Moduls
(background-color: currentColor), also die Farbe aus dem Preset bzw. einer CCA-Variable.
Warum hier: Divi zeigt an Buttons, Akkordeons, Icon-Modulen und Icon-Listen nur Glyphen seiner
Icon-Schriften (ETmodules, Font Awesome), nicht die Live-Formen; D-18-Ausnahme.
Haken: Icon-Modul und Icon-Liste über die Preset-Klasse (das Preset steht für genau einen Icon-Typ,
die Größe kommt aus dem Feld Icon-Größe des Presets), Buttons über eine CSS-Klasse am Modul (Feld
„CSS-Klasse“), weil dasselbe Button-Preset mit und ohne Icon vorkommt.
Wer: die Absätze darunter. Inhaltliche Icons (Karten, Kacheln) sind Weg B: SVG-Modul, kein CSS. */
/* Grundregel Maske für Icon-Module und Icon-Listen: Glyphe unsichtbar (die Textfarbe bleibt für
currentColor erhalten), Fläche 1em = Icon-Größe aus dem Preset, Form per Maske.
Wer: CCA · Icon · Zitat (Problem-Karten), CCA · Icon · Zitat Badge und CCA · Icon · Stern
(Komponente Testimonials), CCA · Liste · Häkchen hell (Hero · Leistung) und Häkchen hell abschließend
(Hero /leistungen, Plan 04-09), CCA · Liste · Häkchen inline (Lead-Magnet). */
.preset--module--divi-icon--30de38f2-2dfa-4188-ab4f-5e9316c7ca18 .et-pb-icon,
.preset--module--divi-icon--a6a574d2-c74b-4fe8-aa8f-0d54202a607b .et-pb-icon,
.preset--module--divi-icon--4d1fe353-4a76-4eb9-8c3d-f4d97dd22c3a .et-pb-icon,
.preset--module--divi-icon-list--a4430519-54ca-4477-9434-eaf505682939 .et-pb-icon,
.preset--module--divi-icon-list--19838ab8-fc0b-4f90-9759-411a0ec28a8c .et-pb-icon,
.preset--module--divi-icon-list--89477fc1-0bca-4161-8cf5-00be408d9b22 .et-pb-icon {
display: inline-block;
flex-shrink: 0;
width: 1em;
height: 1em;
-webkit-text-fill-color: transparent;
background-color: currentColor;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Zuordnung Preset → Live-Form (Dateien in cca-ui/icons/, Pfad relativ zu dieser Datei):
Zitat Problem-Karte 28 px, Strich 2 (quote.svg); Zitat-Badge Testimonials, Strich 1,5
(quote-schmal.svg); Bewertungssterne gefüllt (star.svg); Häkchen der Listen, Strich 2,5 (check.svg). */
.preset--module--divi-icon--30de38f2-2dfa-4188-ab4f-5e9316c7ca18 .et-pb-icon {
-webkit-mask-image: url("icons/quote.svg");
mask-image: url("icons/quote.svg");
}
.preset--module--divi-icon--a6a574d2-c74b-4fe8-aa8f-0d54202a607b .et-pb-icon {
-webkit-mask-image: url("icons/quote-schmal.svg");
mask-image: url("icons/quote-schmal.svg");
}
.preset--module--divi-icon--4d1fe353-4a76-4eb9-8c3d-f4d97dd22c3a .et-pb-icon {
-webkit-mask-image: url("icons/star.svg");
mask-image: url("icons/star.svg");
}
.preset--module--divi-icon-list--a4430519-54ca-4477-9434-eaf505682939 .et-pb-icon,
.preset--module--divi-icon-list--19838ab8-fc0b-4f90-9759-411a0ec28a8c .et-pb-icon,
.preset--module--divi-icon-list--89477fc1-0bca-4161-8cf5-00be408d9b22 .et-pb-icon {
-webkit-mask-image: url("icons/check.svg");
mask-image: url("icons/check.svg");
}
/* Buttons und Textlinks mit Icon rechts (Klasse am Button-Modul, Feld „CSS-Klasse“; Divi setzt sie
auf das ): cca-icon-pfeil (arrow-right), cca-icon-extern (arrow-up-right), cca-icon-download,
cca-icon-datei (file). Grundgröße 14 px („CCA Text klein“), Abstand zum Text 6 px
(„CCA Abstand 1.5“) wie live (gap-1.5). !important und die lange Kette, weil Divi das ::after eines
Buttons ohne Divi-Icon mit „body #page-container .et_pb_section .preset--…:after{display:none
!important}“ ausblendet; die Button-Presets selbst stehen auf Icon aus (Plan 04-07).
Wer: Hero, Leistungs-Grid, Case, Lead-Magnet, Pakete, Weitere Leistungen, Zertifikate,
Leistungsliste, CTA-Band und Testimonials (Komponenten). */
body #page-container .et_pb_section a.et_pb_button:is(.cca-icon-pfeil, .cca-icon-extern, .cca-icon-download, .cca-icon-datei)::after {
content: "" !important;
display: inline-block !important;
position: static !important;
opacity: 1 !important;
width: var(--gvid-3ab5eb1f-33a2-4b94-840d-b74dc9390634) !important;
height: var(--gvid-3ab5eb1f-33a2-4b94-840d-b74dc9390634) !important;
margin: 0 0 0 var(--gvid-fb0bd885-4450-4ca9-919e-179856e5d5de) !important;
vertical-align: middle;
transform: none !important;
background-color: currentColor;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Größen-Zusatzklassen: cca-icon-m = 16 px („CCA Text Basis“; Textlinks in Grundgröße, live
gap-1.5), cca-icon-l = 18 px („CCA Text groß“) mit 8 px Abstand („CCA Abstand 2“; gefüllte
CTA-Buttons, live gap-2). */
body #page-container .et_pb_section a.et_pb_button.cca-icon-m::after {
width: var(--gvid-801e0838-bf3f-49c7-ae03-55f96bcd77bd) !important;
height: var(--gvid-801e0838-bf3f-49c7-ae03-55f96bcd77bd) !important;
}
body #page-container .et_pb_section a.et_pb_button.cca-icon-l::after {
width: var(--gvid-be7b6047-0eea-44e4-97cb-8bea1066292e) !important;
height: var(--gvid-be7b6047-0eea-44e4-97cb-8bea1066292e) !important;
margin-left: var(--gvid-908d6082-b3a5-4391-ab85-6422b7864eec) !important;
}
/* Zuordnung Button-Klasse → Live-Form (cca-ui/icons/). */
body #page-container .et_pb_section a.et_pb_button.cca-icon-pfeil::after {
-webkit-mask-image: url("icons/arrow-right.svg");
mask-image: url("icons/arrow-right.svg");
}
body #page-container .et_pb_section a.et_pb_button.cca-icon-extern::after {
-webkit-mask-image: url("icons/arrow-up-right.svg");
mask-image: url("icons/arrow-up-right.svg");
}
body #page-container .et_pb_section a.et_pb_button.cca-icon-download::after {
-webkit-mask-image: url("icons/download.svg");
mask-image: url("icons/download.svg");
}
body #page-container .et_pb_section a.et_pb_button.cca-icon-datei::after {
-webkit-mask-image: url("icons/file.svg");
mask-image: url("icons/file.svg");
}
/* FAQ-Umschalter wie live (Klasse cca-faq am Akkordeon-Modul): Kreis 24 px („CCA Abstand 6“) mit
1 px Rand („CCA Linie“, „CCA Border“) als ::after, darin der Chevron 12 px („CCA Abstand 3“) als
Maske im ::before; geschlossen dunkel („CCA Dunkel“) auf transparent, offen weiß auf „Primärfarbe“
und um 180° gedreht. 4 px („CCA Abstand 1“) unter der Titeloberkante wie live (mt-1). Divi zeichnet
sein Umschalt-Zeichen als Schrift-Glyphe im ::before und blendet es bei offener Frage aus;
!important (auch display) überstimmt dessen Regeln, damit der Chevron in beiden Zuständen steht.
Wer: Bibliothekssektion CCA · FAQ · Akkordeon und alle Seiten mit FAQ. */
.et_pb_accordion.cca-faq .et_pb_toggle .et_pb_toggle_title {
position: relative;
padding-right: calc(var(--gvid-8cfa253b-e46a-4552-a0f1-40f50d855c4d) + var(--gvid-a05b2361-27ae-4764-ab46-de0d450ee9fe)) !important;
}
.et_pb_accordion.cca-faq .et_pb_toggle .et_pb_toggle_title::after {
content: "";
position: absolute;
top: var(--gvid-fce9f4da-4cfb-4fae-a85c-fea284b42d50);
right: 0;
box-sizing: border-box;
width: var(--gvid-8cfa253b-e46a-4552-a0f1-40f50d855c4d);
height: var(--gvid-8cfa253b-e46a-4552-a0f1-40f50d855c4d);
border: var(--gvid-79ab3c32-e19a-4c60-8c6f-962e989b55b0) solid var(--gcid-7f297dfd-2528-43b5-b931-69e97489b94b);
border-radius: 50%;
}
.et_pb_accordion.cca-faq .et_pb_toggle .et_pb_toggle_title::before {
content: "" !important;
display: block !important;
position: absolute !important;
z-index: 1;
top: calc(var(--gvid-fce9f4da-4cfb-4fae-a85c-fea284b42d50) + var(--gvid-fb0bd885-4450-4ca9-919e-179856e5d5de)) !important;
right: var(--gvid-fb0bd885-4450-4ca9-919e-179856e5d5de) !important;
left: auto !important;
margin: 0 !important;
width: var(--gvid-afbfde81-b259-4d59-847e-a22f16485bf5) !important;
height: var(--gvid-afbfde81-b259-4d59-847e-a22f16485bf5) !important;
background-color: var(--gcid-2c743bb7-5b8c-4cf7-bfed-dcff551b0765) !important;
-webkit-mask: url("icons/chevron-down.svg") center / contain no-repeat;
mask: url("icons/chevron-down.svg") center / contain no-repeat;
transition: transform 0.2s;
}
.et_pb_accordion.cca-faq .et_pb_toggle_open .et_pb_toggle_title::after {
border-color: var(--gcid-primary-color);
background-color: var(--gcid-primary-color);
}
.et_pb_accordion.cca-faq .et_pb_toggle_open .et_pb_toggle_title::before {
background-color: var(--gcid-d257e5b5-e1f9-472a-97da-4dc10af6332a) !important;
transform: rotate(180deg);
}
/* Trennpunkte im Hero · Leistung (K-002): live steht zwischen den Vertrauenspunkten ein grauer
Punkt „·“ (aria-hidden, mx-3, text-slate-500). Hier ein Kreis 4 px („CCA Abstand 1“) in „CCA Muted
(Slate 500)“ vor jedem Punkt außer dem ersten, 12 px Abstand („CCA Abstand 3“) zum vorherigen
Häkchentext über den Spaltenabstand des Presets und 12 px zum eigenen Häkchen. Keine SVG-Datei
nötig: live ist es ein Textzeichen, kein Icon. Reines ::before ohne Text, der Textvergleich bleibt
unberührt (live_exclude K-002 bleibt). Wer: Preset CCA · Liste · Häkchen hell (alle Leistungsseiten
mit Hero · Leistung) und CCA · Liste · Häkchen hell abschließend (Hero /leistungen, Plan 04-09). */
.preset--module--divi-icon-list--a4430519-54ca-4477-9434-eaf505682939 > .et_pb_icon_list_item:not(:first-child)::before,
.preset--module--divi-icon-list--19838ab8-fc0b-4f90-9759-411a0ec28a8c > .et_pb_icon_list_item:not(:first-child)::before {
content: "";
display: inline-block;
flex-shrink: 0;
align-self: center;
vertical-align: middle;
width: var(--gvid-fce9f4da-4cfb-4fae-a85c-fea284b42d50);
height: var(--gvid-fce9f4da-4cfb-4fae-a85c-fea284b42d50);
margin-right: var(--gvid-afbfde81-b259-4d59-847e-a22f16485bf5);
border-radius: 50%;
background-color: var(--gcid-ac900d1e-62c9-4605-9723-cdae13e64f58);
}
/* ===== Plan 04-07: Punkt vor kurzem Text (K-005, Explainer-Badge) =====
Was: runder Punkt in „Sekundärfarbe“ (CTA-Lime) vor dem Text eines Textmoduls, 8 px Abstand
(„CCA Abstand 2“, live gap-2). cca-punkt = 6 px („CCA Abstand 1.5“, ruhig; Badge im Explainer, live
h-1.5 w-1.5), cca-punkt-puls = 8 px („CCA Abstand 2“) und pulsierend wie live animate-pulse
(2 s, cubic-bezier(0.4, 0, 0.6, 1), bei 50 % Deckkraft 0,5).
Warum hier: Divi hat kein Feld für ein Schmuckelement vor dem Text, und ein eigenes Modul für den
Punkt bräuchte eine Zeilen-Gruppe nur für Schmuck; live ist der Punkt aria-hidden.
Wer: Eyebrow „Echte Bewertungen“ in der Glas-Karte von Hero · Startseite (Klasse cca-punkt-puls),
Badge in CCA · Text · Explainer (Klasse cca-punkt). */
.cca-punkt .et_pb_text_inner > p,
.cca-punkt-puls .et_pb_text_inner > p {
display: flex;
align-items: center;
column-gap: var(--gvid-908d6082-b3a5-4391-ab85-6422b7864eec);
}
.cca-punkt .et_pb_text_inner > p::before,
.cca-punkt-puls .et_pb_text_inner > p::before {
content: "";
flex-shrink: 0;
width: var(--gvid-fb0bd885-4450-4ca9-919e-179856e5d5de);
height: var(--gvid-fb0bd885-4450-4ca9-919e-179856e5d5de);
border-radius: 50%;
background-color: var(--gcid-secondary-color);
}
.cca-punkt-puls .et_pb_text_inner > p::before {
width: var(--gvid-908d6082-b3a5-4391-ab85-6422b7864eec);
height: var(--gvid-908d6082-b3a5-4391-ab85-6422b7864eec);
animation: cca-puls 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes cca-puls {
50% {
opacity: 0.5;
}
}
/* Ohne Puls bei „Bewegung reduzieren“ (Betriebssystem-Einstellung): der Punkt steht still und voll
deckend, wie live (dort setzt das globale Live-CSS die Animation auf 0,01 ms und einen Durchlauf). */
@media (prefers-reduced-motion: reduce) {
.cca-punkt-puls .et_pb_text_inner > p::before {
animation: none;
}
}
/* ===== Plan 04-07: K-001 Prozess weiß auf der Startseite (Philipp 2026-10-19: „b“) =====
Was: Sektion mit dem Preset-Stapel „CCA · Sektion · Alternativ“ (Vorlage der Komponente Prozess)
plus Instanz-Preset „CCA · Sektion · Hell“ (Default-Preset, Klasse …--default) bekommt den
Hintergrund „CCA Weiß“ wie live (bg-white).
Warum hier: Divi gibt die Preset-Hintergründe in der Reihenfolge der ersten Verwendung auf der Seite
aus; beide Regeln haben gleiche Spezifität und !important, auf der Startseite gewinnt deshalb
Alternativ (gemessen rgb(248, 250, 252), runs/staging-2026-10-19/pages.json). Diese Regel ist um eine
Klasse spezifischer und greift nur bei genau diesem Stapel; Sektionen mit nur einem der beiden
Presets bleiben unberührt. D-18-Ausnahme, entschieden in der Abnahme D-02 Startseite (K-001).
Wer: Prozess-Instanz auf / (Komponente CCA · Prozess · 3 Schritte mit localModulePreset Hell). */
.et_builder_inner_content .et_pb_section.preset--module--divi-section--d6f24ed3-61a8-4558-ae1d-1bf21c0d24b8.preset--module--divi-section--default {
background-color: var(--gcid-d257e5b5-e1f9-472a-97da-4dc10af6332a) !important;
}
/* ===== Plan 04-07: Überschriften ohne Divi-Innenabstand unten (Nachmessung Abstände) =====
Was: Das Überschrift-Modul im Seiteninhalt bekommt keinen Innenabstand unter der Überschrift.
Warum hier: Divis Grund-CSS setzt jedem h1–h6 „padding-bottom: 10px“; das Überschrift-Modul hat für
das h-Element selbst kein Abstandsfeld (nur Schrift), die Presets regeln den Abstand am Folgemodul
(margin-top wie live mt-*). Live haben Überschriften keinen Innenabstand; mit den 10 px stand jeder
Abstand nach einer Überschrift 10 px größer als live (Messung runs/staging-2026-10-20/
p4-*-abstaende-nachher.json). Nur im Seiteninhalt (.et-l--post), Header/Footer bleiben unberührt.
Wer: jedes Überschrift-Modul (divi/heading) auf Seiten und in Bibliothekselementen. */
.et-l--post .et_pb_heading .et_pb_module_header {
padding-bottom: 0;
}
/* ===== Plan 04-09: Aufzählung im Fließtext wie live (ul.list-disc.pl-5.space-y-4) =====
Was: Eine Liste im Text-Modul mit der Klasse cca-liste (Feld „CSS-Klasse“) hat 20 px Einzug
(„CCA Abstand 5“, live pl-5), 16 px zwischen den Punkten („CCA Abstand 4“, live space-y-4), die
Zeilenhöhe des Text-Presets (live 1,7) und keinen Abstand unter der Liste.
Warum hier: Divis Grund-CSS setzt jeder Liste im Inhalt „padding: 0 0 23px 1em; line-height: 26px“
und dem Text-Modul padding-bottom 1em; das Text-Modul hat dafür kein Feld, die Listenfelder der
Presets gibt Divi 5.16 nicht aus (Memory „Divi-5-Eigenheiten“). Gemessen ohne Regel: −28 px auf
/leistungen/webdesign (runs/staging-2026-10-20/p4-webdesign-abstaende.json).
Wer: „Was dazugehört“ auf /leistungen/webdesign (Text · Erklärung mit Liste). */
.et-l--post .cca-liste ul {
padding: 0 0 0 var(--gvid-ed1f8f68-36de-4018-8bfa-41399f8cae65);
line-height: inherit;
}
.et-l--post .cca-liste li + li {
margin-top: var(--gvid-a05b2361-27ae-4764-ab46-de0d450ee9fe);
}
/* ===== Plan 04-11: Rechtstext wie live (.prose-custom auf /impressum und /datenschutz) =====
Was: Im Text-Modul mit der Klasse cca-rechtstext (Feld „CSS-Klasse“, Baustein „CCA · Text ·
Rechtstext“) stehen die Abstände wie live: Absatz und Liste 20 px darunter („CCA Abstand 5“),
h2 48 px darüber und 20 px darunter („CCA Abstand 12“ / „5“), h3 40 px darüber und 16 px darunter
(„CCA Abstand 10“ / „4“), h4 und h5 ohne Abstand; Liste mit 20 px Einzug, Zeilenhöhe des
Text-Presets und 8 px zwischen den Punkten („CCA Abstand 2“); Linkunterstrich 4 px unter der
Schriftlinie („CCA Abstand 1“, live underline-offset 4px). Schrift, Farbe und Unterstrich selbst
kommen aus dem Preset „CCA · Text · Rechtstext“.
Warum hier: Das Text-Modul hat für einzelne Elemente im Text (h2–h5, p, ul, li) keine Abstandsfelder,
nur Schrift; Divis Grund-CSS setzt Absätzen padding-bottom 1em, Überschriften padding-bottom 10 px und
Listen „padding: 0 0 23px 1em; line-height: 26px“. Gemessen ohne Regel: /datenschutz 1440 px 1532 px
kürzer als live, /impressum 211 px (runs/staging-2026-10-20/p4-datenschutz-stile-erstbau.json,
p4-impressum-abstaende-erstmessung.json).
Wer: /impressum und /datenschutz (Baustein „CCA · Text · Rechtstext“). */
.et-l--post .cca-rechtstext .et_pb_text_inner > p,
.et-l--post .cca-rechtstext .et_pb_text_inner > ul {
padding-bottom: 0;
margin-bottom: var(--gvid-ed1f8f68-36de-4018-8bfa-41399f8cae65);
}
.et-l--post .cca-rechtstext .et_pb_text_inner > h2 {
padding-bottom: 0;
margin-top: var(--gvid-bd791885-e227-4ee4-a1db-19e8884ffca8);
margin-bottom: var(--gvid-ed1f8f68-36de-4018-8bfa-41399f8cae65);
}
.et-l--post .cca-rechtstext .et_pb_text_inner > h3 {
padding-bottom: 0;
margin-top: var(--gvid-d22cedf0-c82f-4e4a-9628-12a3453bacb8);
margin-bottom: var(--gvid-a05b2361-27ae-4764-ab46-de0d450ee9fe);
}
.et-l--post .cca-rechtstext .et_pb_text_inner > h4,
.et-l--post .cca-rechtstext .et_pb_text_inner > h5 {
padding-bottom: 0;
}
.et-l--post .cca-rechtstext .et_pb_text_inner > ul {
padding-top: 0;
padding-right: 0;
padding-left: var(--gvid-ed1f8f68-36de-4018-8bfa-41399f8cae65);
line-height: inherit;
}
.et-l--post .cca-rechtstext .et_pb_text_inner li + li {
margin-top: var(--gvid-908d6082-b3a5-4391-ab85-6422b7864eec);
}
.et-l--post .cca-rechtstext .et_pb_text_inner a {
text-underline-offset: var(--gvid-fce9f4da-4cfb-4fae-a85c-fea284b42d50);
}
/* ===== Plan 04-15: Gleich hohe Karten, Link unten bündig (Philipp 2026-10-21: „Die Karten sollen
sich an der längsten Karte orientieren“) =====
Was: In einer Karte (Gruppe mit Flex-Layout, Spalte) füllt der Kartentext „CCA · Text · Karte“
bzw. „CCA · Text · Fließtext Karte“ die freie Höhe, damit der Link bzw. Button unten steht, wenn
das Raster alle Karten einer Sektion auf die Höhe der längsten bringt (Raster-Presets mit
Zeilenhöhen „Gleich“). Live genauso: Karte „h-full flex flex-col“, Kartentext „flex-1“.
Warum hier: Das Preset „CCA · Text · Karte“ trägt Flex-Wachstum 1 bereits, Divi 5.16 gibt
flexGrow aus Presets aber nicht als CSS aus (deferred-items 04-09); ein Wert direkt am Modul wäre
ein lokaler Override. Die Regel setzt nur diesen einen Wert, Größen und Farben bleiben im Preset.
Wer: Karten auf /, /leistungen und allen Leistungsseiten (Pakete, Weitere Leistungen,
Leistungs-Liste, Leistungs-Raster der Startseite) und in den Starter-Layouts. */
.et_flex_group > .preset--module--divi-text--3d4d6677-66f6-4445-9697-f6f1fd437249,
.et_flex_group > .preset--module--divi-text--a58f719a-0dab-451a-8593-1c5b673a4373 {
flex-grow: 1;
}
/* ===== Plan 04-15 Sammelabnahme (Philipp 2026-10-25): ratedo-Siegel mit hellem Schein wie live =====
Was: Das Siegel auf / bekommt den weißen Schein von live (dort .ratedo_badge
filter: drop-shadow(0 0 14px rgba(255,255,255,.35)), gemessen 2026-10-25).
Warum hier: Das Siegel setzt das ratedo-Script erst im Browser ein; ein Filter-Feld für das
eingesetzte Bild gibt es am Modul nicht. Werte aus Variablen: Unschärfe „CCA Abstand 2“ × 1,75
= 14 px, Farbe „CCA Weiß 30 %“ (live 35 %, keine neue Variable, Divi 5 löscht Variablen nie).
Wer: das Platzhalter-Modul mit der Klasse ratedo_badge auf der Startseite. */
.ratedo_badge {
filter: drop-shadow(0 0 calc(var(--gvid-908d6082-b3a5-4391-ab85-6422b7864eec) * 1.75) var(--gcid-fc5fb6c6-b78b-4ee0-8ffb-fd2a32ffb612));
}
/* ===== Plan 04-15 Sammelabnahme (Philipp 2026-10-25): Verlaufslinie durch die Prozess-Icons wie live =====
Was: Hinter den drei Icons der Komponente „CCA · Prozess · 3 Schritte“ liegt eine 1 px hohe
Linie auf Höhe der Icon-Mitte, von 16,67 % bis 83,33 % der Breite, Verlauf durchsichtig →
„CCA Primär 30 %“ → durchsichtig; am Handy (Schritte untereinander) keine Linie. Live:
absolute top-7 left-[16.67%] right-[16.67%] h-px bg-gradient-to-r from-transparent
via-primary/30 to-transparent, hidden md:block. Die Icons liegen darüber (live z-10).
Warum hier: Eine Linie hinter mehreren Modulen ist mit Divi-Modulen nicht abbildbar (kein
Pseudo-Element, ein Modul in der Spalte würde die Schritte verschieben); bisher als Pitfall 11
ausgelassen, von Philipp in der Sammelabnahme verlangt. Höhe der Icon-Mitte = halbe Icon-Größe
„CCA Abstand 14“ (Preset „CCA · SVG · Prozess“).
Wer: Raster „CCA · Raster · Prozess“ in der Sektion mit der Klasse cca-prozess (alle sechs
Seiten mit Prozess, Starter-Layouts). */
.cca-prozess .preset--module--divi-group--1bb6c379-4b16-4214-b031-1c8d8a41accf {
position: relative;
}
.cca-prozess .preset--module--divi-group--1bb6c379-4b16-4214-b031-1c8d8a41accf::before {
content: "";
position: absolute;
top: calc(var(--gvid-9a416c7b-4321-489f-8f76-4e65d8653b9f) / 2);
left: 16.67%;
right: 16.67%;
height: 1px;
background: linear-gradient(to right, transparent, var(--gcid-f07d3032-9f25-46c6-a164-40ca7f1252de), transparent);
pointer-events: none;
}
.cca-prozess .preset--module--divi-svg--f0518061-cb14-4742-bdef-31a9d0c6f319 {
position: relative;
z-index: 1;
}
@media (max-width: 767px) {
.cca-prozess .preset--module--divi-group--1bb6c379-4b16-4214-b031-1c8d8a41accf::before {
display: none;
}
}
/* ===== Plan 04-15 Sammelabnahme (Philipp 2026-10-25): Textlinks mit limefarbenem Unterstrich =====
Was: Links im Fließtext der Seiten (Text-Modul, Akkordeon-Antwort) sind unterstrichen, der Strich
in der Sekundärfarbe (Lime, Customizer-Farbe), 4 px unter der Schriftlinie („CCA Abstand 1“).
Die Linkfarbe selbst bleibt aus dem Preset. Nicht betroffen: Buttons (eigenes Modul), Menü,
Header und Footer (Theme Builder, nicht .et-l--post), Brotkrumen (kein Text-Modul) und
Bild-Links wie das ratedo-Siegel.
Warum hier: Bewusste Abweichung von live (dort Unterstrich in Linkfarbe bzw. ohne). Divis
Schriftfelder kennen „unterstrichen“, aber keine eigene Strichfarbe; eine Regel statt eines
Felds in jedem Text-Preset hält die Optik an einer Stelle.
Wer: alle Seiten, z. B. „SEO Agentur Duisburg“ auf / und /ueber-uns, E-Mail auf /kontakt,
Quellenlinks auf /datenschutz. */
.et-l--post :is(.et_pb_text, .et_pb_toggle_content) a:not(:has(img)) {
text-decoration-line: underline;
text-decoration-color: var(--gcid-secondary-color);
text-underline-offset: var(--gvid-fce9f4da-4cfb-4fae-a85c-fea284b42d50);
}
/* Nachtrag Phase 5 (Philipp 2026-10-25: „Der Linktext bitte in Schwarz aber in Lime unterstrichen“),
geändert 2026-10-29 (Philipp: „für alle Links im Formular und auf der vollständigen Website außer
Menü und Footer meine Firmenfarbe blau“): Linktext in der Primärfarbe (Customizer, Firmenblau),
beim Überfahren „CCA Primär Hover“; der Lime-Unterstrich bleibt.
Ausgenommen Text-Module mit einem hellen Text-Preset (Name „… hell …“, dunkler Hintergrund): dort
bleibt die helle Linkfarbe aus dem Preset, sonst wäre der Link unsichtbar. */
.et-l--post :is(.et_pb_text, .et_pb_toggle_content) a:not(:has(img)):not(:is(
.preset--module--divi-text--14065585-cda2-46d1-b79c-bc34c1a77966,
.preset--module--divi-text--1d7c11ed-d537-4a49-8f8d-21c599f073e0,
.preset--module--divi-text--2685345f-9cd3-4e11-bed7-4cf848d07e3d,
.preset--module--divi-text--4790175f-7c34-45c8-93fd-7dd7e58b6584,
.preset--module--divi-text--51e24925-78ab-4d4b-bf31-e725d1d8e336,
.preset--module--divi-text--75397236-ad52-46ba-90e4-8bb06b7d09ba,
.preset--module--divi-text--7fb62dd2-5b2c-455c-b545-aa72df35eed3,
.preset--module--divi-text--b4f90de6-7b4d-4077-8ade-86595435984e,
.preset--module--divi-text--bcc5b5d6-7eb0-4475-8778-288c20b11b67,
.preset--module--divi-text--c1ceef15-c0a6-4ecc-b1f8-5399a05de904,
.preset--module--divi-text--c493f131-f302-4450-8f11-bfa53c78d31a,
.preset--module--divi-text--c55486db-e706-4537-8f8f-77120b5e6bcc,
.preset--module--divi-text--cb31ff2f-de14-4bed-b4c0-fe33676e5636,
.preset--module--divi-text--fc1d05b4-158d-41b4-b54d-59894b9d07d4
) a) {
color: var(--gcid-primary-color);
}
.et-l--post :is(.et_pb_text, .et_pb_toggle_content) a:not(:has(img)):not(:is(
.preset--module--divi-text--14065585-cda2-46d1-b79c-bc34c1a77966,
.preset--module--divi-text--1d7c11ed-d537-4a49-8f8d-21c599f073e0,
.preset--module--divi-text--2685345f-9cd3-4e11-bed7-4cf848d07e3d,
.preset--module--divi-text--4790175f-7c34-45c8-93fd-7dd7e58b6584,
.preset--module--divi-text--51e24925-78ab-4d4b-bf31-e725d1d8e336,
.preset--module--divi-text--75397236-ad52-46ba-90e4-8bb06b7d09ba,
.preset--module--divi-text--7fb62dd2-5b2c-455c-b545-aa72df35eed3,
.preset--module--divi-text--b4f90de6-7b4d-4077-8ade-86595435984e,
.preset--module--divi-text--bcc5b5d6-7eb0-4475-8778-288c20b11b67,
.preset--module--divi-text--c1ceef15-c0a6-4ecc-b1f8-5399a05de904,
.preset--module--divi-text--c493f131-f302-4450-8f11-bfa53c78d31a,
.preset--module--divi-text--c55486db-e706-4537-8f8f-77120b5e6bcc,
.preset--module--divi-text--cb31ff2f-de14-4bed-b4c0-fe33676e5636,
.preset--module--divi-text--fc1d05b4-158d-41b4-b54d-59894b9d07d4
) a):hover {
color: var(--gcid-c0277397-532d-493c-b1e4-f3c18a463b7a);
}
/* ===== Plan 04-15 Sammelabnahme (Philipp 2026-10-25): Handy ohne Trennpunkte im Hero · Leistung =====
Was: Am Handy (bis 767 px) stehen die Vertrauenspunkte in mehreren Zeilen; die grauen Trennpunkte
aus K-002 entfallen dort. Rechner und Tablet unverändert.
Wer: Presets CCA · Liste · Häkchen hell und Häkchen hell abschließend (Regel K-002 oben). */
@media (max-width: 767px) {
.preset--module--divi-icon-list--a4430519-54ca-4477-9434-eaf505682939 > .et_pb_icon_list_item:not(:first-child)::before,
.preset--module--divi-icon-list--19838ab8-fc0b-4f90-9759-411a0ec28a8c > .et_pb_icon_list_item:not(:first-child)::before {
display: none;
}
}
/* ===== Plan 04-15 Sammelabnahme (Philipp 2026-10-25): Pfeil bleibt neben dem Button-Text =====
Was: Buttons mit Icon rechts (cca-icon-*) legen Text und Icon nebeneinander (wie live
inline-flex items-center); bricht der Text am Handy um, bleibt das Icon rechts daneben,
senkrecht mittig, statt allein in die nächste Zeile zu rutschen. Ausrichtung des Texts bleibt
aus dem Preset (zentriert bzw. links). flex-direction mit !important, weil Divi jedem Modul
(et_flex_module) „flex-direction: column“ mitgibt; ohne sie stünde das Icon unter dem Text.
Lücke 0, weil et_flex_module sonst den Modulabstand (30 px) zwischen Text und Icon setzt; den
Abstand gibt weiter das margin-left des Icons (6 bzw. 8 px wie live).
Warum hier: Das Icon ist das ::after aus der Regel „Buttons und Textlinks mit Icon rechts“; als
inline-block bricht es wie ein Wort um. Divi hat kein Layout-Feld für den Button selbst.
Wer: alle Buttons mit cca-icon-pfeil, -extern, -download, -datei. */
body #page-container .et_pb_section a.et_pb_button:is(.cca-icon-pfeil, .cca-icon-extern, .cca-icon-download, .cca-icon-datei) {
display: inline-flex;
flex-direction: row !important;
flex-wrap: nowrap;
column-gap: 0;
row-gap: 0;
align-items: center;
justify-content: center;
}
body #page-container .et_pb_section a.et_pb_button:is(.cca-icon-pfeil, .cca-icon-extern, .cca-icon-download, .cca-icon-datei)::after {
flex-shrink: 0;
}
/* ===== Plan 05-07: Rechner-Rahmen (STAT-04) =====
Was: Rahmen um das eingebettete Rechner-iframe wie live (div mit margin 32px 0, Radius 18 px,
overflow hidden, Schatten, 1 px Rand): 32 px Abstand oben und unten („CCA Abstand 8“), Radius
18 px („CCA Radius 2xl“ + „CCA Abstand 0.5“), 1 px Rand („CCA Linie“) in „CCA Border“, Schatten
0 10 px 40 px −10 px („CCA Abstand 2.5“, „CCA Abstand 10“) in „CCA Schatten Hover“ (live
rgba(15,41,74,0.18), nächste vorhandene Schattenfarbe). Das iframe selbst: volle Breite, ohne
Rahmen, als Block, mindestens 320 px hoch (4 × „CCA Abstand 20“), Höhenwechsel in 0,25 s wie live.
Die Laufzeit-Höhe setzt nur der Höhen-Empfänger in cca-ui.js (style.height, 320 bis 6000 px);
das ist die einzige erlaubte Inline-Höhe (Pitfall 11), gespeichert wird nur das height-Attribut
als Startwert.
Warum hier: Der Rechner steht in Beiträgen als core/html-Block und auf den Rechnerseiten im
Code-Modul; beide haben keine Rahmen-, Schatten- oder Höhenfelder, und das Live-Markup trug
die Optik als Inline-Style (im Nachbau verboten).
Wer: geo-seo-2026 (#geo-readiness-frame) und die Rechnerseiten /tools/… (Plan 05-08). */
.cca-rechner-rahmen {
margin: var(--gvid-ff93ab0f-5df7-4c5c-9534-87102b7b49e9) 0;
overflow: hidden;
border: var(--gvid-79ab3c32-e19a-4c60-8c6f-962e989b55b0) solid var(--gcid-7f297dfd-2528-43b5-b931-69e97489b94b);
border-radius: calc(var(--gvid-98f2f345-d100-44e1-a5b7-9a56bf82c57f) + var(--gvid-fd14e262-4f3f-423c-a907-dcd5f5e07343));
box-shadow: 0 var(--gvid-8416e6d6-2ceb-4fa0-92f1-c99b071a7f02) var(--gvid-d22cedf0-c82f-4e4a-9628-12a3453bacb8) calc(-1 * var(--gvid-8416e6d6-2ceb-4fa0-92f1-c99b071a7f02)) var(--gcid-aa9e65cc-2aa1-4af5-9d2c-62a20353812d);
background: transparent;
}
.cca-rechner-frame {
display: block;
width: 100%;
min-height: calc(4 * var(--gvid-baefeab7-70a8-4b5c-af11-36bdd0bdb61c));
border: 0;
background: transparent;
transition: height 0.25s;
}
/* ===== Plan 05-10: Beitrags-Hero (BLOG-01, Research Pattern 2, A10, Pitfall 10) =====
Was: Das Beitragsbild (Bildmodul mit Klasse cca-beitrag-bild, Preset „CCA · Bild · Beitrag-Hero“:
Position absolut oben links, 100 % × 100 %, object-fit cover) liegt wie live (img absolute inset-0
object-cover) über der ganzen Hero-Sektion (Klasse cca-beitrag-hero), nicht nur über der Spalte.
Dazu stehen Zeile und Spalte hier ohne eigene Positionierung, damit die Sektion der Bezugsrahmen
ist, und alle übrigen Module der Spalte liegen über dem Bild. Das Bild bleibt ein echtes ![]()
mit
srcset und fetchpriority (kein CSS-Hintergrund, Pitfall 10).
Warum hier: Divi setzt Zeile und Spalte selbst auf position relative und hat kein Feld, das ein
Modul an der Sektion statt an der Spalte ausrichtet; die Höhe 100 % des Presets gibt Divi nur am
![]()
aus, nicht am Modul und an der Bildhülle (.et_pb_image_wrap).
Wer: Body der Vorlage „CCA – Beitrag“ (alle Beiträge). */
.cca-beitrag-hero > .et_pb_row,
.cca-beitrag-hero > .et_pb_row > .et_pb_column {
position: static;
}
.cca-beitrag-hero > .et_pb_row > .et_pb_column > :not(.cca-beitrag-bild) {
position: relative;
z-index: 1;
}
.cca-beitrag-hero .cca-beitrag-bild,
.cca-beitrag-hero .cca-beitrag-bild .et_pb_image_wrap,
.cca-beitrag-hero .cca-beitrag-bild .et_pb_image_wrap img {
display: block;
width: 100%;
height: 100%;
}
/* Abdunklung des Beitragsbilds wie live: zwei Verläufe über dem Bild, von links „CCA Dunkel“ zu 95 %,
75 % und 50 % Deckkraft und von unten 90 % über durchsichtig zu 30 % (live bg-gradient-to-r
from-dark/95 via-dark/75 to-dark/50 und bg-gradient-to-t from-dark/90 via-transparent to-dark/30).
Warum hier: Das Bildmodul hat nur ein Hover-Overlay, keinen festen Verlauf über dem Bild.
Wer: Body der Vorlage „CCA – Beitrag“. */
.cca-beitrag-hero .cca-beitrag-bild::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(to top, color-mix(in srgb, var(--gcid-2c743bb7-5b8c-4cf7-bfed-dcff551b0765) 90%, transparent), transparent 50%, color-mix(in srgb, var(--gcid-2c743bb7-5b8c-4cf7-bfed-dcff551b0765) 30%, transparent)),
linear-gradient(to right, color-mix(in srgb, var(--gcid-2c743bb7-5b8c-4cf7-bfed-dcff551b0765) 95%, transparent), color-mix(in srgb, var(--gcid-2c743bb7-5b8c-4cf7-bfed-dcff551b0765) 75%, transparent), color-mix(in srgb, var(--gcid-2c743bb7-5b8c-4cf7-bfed-dcff551b0765) 50%, transparent));
}
/* Flex-Verhalten der Autorenbox und der Beitragskarten wie live: Das Autorenfoto (7 rem, Preset
„CCA · Bild · Autor rund“) schrumpft neben dem Text nicht und steht oben (live flex-shrink-0,
sm:items-start); in der Karte (Klasse cca-karte-beitrag) füllt der Kartenkörper die Resthöhe und der
Auszug wächst, damit Autor und Datum unten stehen (live flex-1). Warum hier: Divi gibt Flex-Schrumpfen
und -Wachstum aus Presets nicht aus (Befund Plan 04-09) und richtet das Bild trotz alignItems des
Presets auf die volle Zeilenhöhe aus. Wer: Body der Vorlage „CCA – Beitrag“, Bibliothekssektion
„CCA · Blog · Verwandte Beiträge“ (und /blog, Plan 05-14). */
.cca-autorenbox > .et_pb_image {
flex-shrink: 0;
align-self: flex-start;
}
.cca-karte-beitrag > .et_pb_group:last-child,
.cca-karte-beitrag > .et_pb_group:last-child > .et_pb_text:has(+ .et_pb_group) {
flex-grow: 1;
}
@media (max-width: 767px) {
.cca-autorenbox > .et_pb_image {
align-self: center;
}
}
/* Uhr vor der Lesezeit (Klasse cca-icon-uhr am Text-Modul, Feld „CSS-Klasse“): 14 px („CCA Text
klein“), 6 px Abstand („CCA Abstand 1.5“) wie live (Lucide-Uhr, gap-1.5, currentColor).
Warum hier: Das Text-Modul hat kein Icon-Feld; ein Icon-Modul daneben bräche die Zeile im
Loop-Element auseinander. Wer: Hero der Beiträge und die Karten „Verwandte Beiträge“. */
.cca-icon-uhr .et_pb_text_inner p::before {
content: "";
display: inline-block;
width: var(--gvid-3ab5eb1f-33a2-4b94-840d-b74dc9390634);
height: var(--gvid-3ab5eb1f-33a2-4b94-840d-b74dc9390634);
margin-right: var(--gvid-fb0bd885-4450-4ca9-919e-179856e5d5de);
vertical-align: -0.125em;
background-color: currentColor;
-webkit-mask: url("icons/clock.svg") center / contain no-repeat;
mask: url("icons/clock.svg") center / contain no-repeat;
}
/* Teaser der Beitragskarten auf drei Zeilen begrenzt wie live (line-clamp-3 am Auszug der Karten auf
/blog und unter „Verwandte Beiträge“); der volle Auszug bleibt im HTML. Selektor: das Text-Modul
direkt vor der Fußzeile (Autor, Datum) im Kartenkörper. Warum hier: Divi hat kein Feld für eine
Zeilenbegrenzung. Wer: Karte „Karte Beitrag (Loop)“ (Klasse cca-karte-beitrag), Plan 05-14. */
.cca-karte-beitrag > .et_pb_group:last-child > .et_pb_text:has(+ .et_pb_group) .et_pb_text_inner p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}
/* Zeile mit leerem Pagination-Modul ausblenden (nur eine Seite: Divi gibt dann ein leeres
div.et_pb_posts_nav aus); sobald es mehr Artikel als „je Seite“ gibt, erscheint die Zeile mit
dem Zeilenabstand der Sektion über den Links. Warum hier: Divi blendet das Modul ohne Links nicht
aus, und der Zeilenabstand der Sektion bliebe als Lücke unter dem Raster (live keine). Wer: /blog
und Vorlage „CCA – Archiv & Suche“, Plan 05-14. */
.et_pb_row:has(> .et_pb_column > .et_pb_posts_nav[data-target-loop]:empty) {
display: none;
}
/* Verlinkte Karten heben sich im Hover um 4 px wie live (hover:-translate-y-1, transition-all
duration-300 an allen -Karten auf /, /leistungen, den Leistungsseiten, /blog und unter
„Verwandte Beiträge“; Befund Philipp, Sammelabnahme 2026-10-26/27). Bei „CCA · Karte · Beitrag“
und „CCA · Karte · Rahmen Link“ stehen Anheben (Transform → Hover, Y -4px) und Hover-Rand nativ im
Preset. Warum hier: „CCA · Karte · Rahmen“ (27e174cf) und „CCA · Karte · Rahmen statisch“
(8da13b6e) tragen auch nicht verlinkte Karten (Kundenstimmen, Pakete, Leistungsumfang), die live
gar nicht auf Hover reagieren; ein Preset kennt keine Bedingung „Karte verlinkt“. Deshalb kommen
Anheben und Hover-Rand („CCA Primär 30 %“, live hover:border-primary/30) hier nur für .et_clickable
(Divi setzt die Klasse, sobald im Modul unter „Link“ ein Ziel steht); beide Presets selbst haben
keinen Hover. Wer: Leistungskarten auf / und /leistungen (Rahmen), Karte „Local SEO“ auf
/leistungen/seo (Rahmen statisch). Plan 05-15. */
.et_pb_group.et_clickable.preset--module--divi-group--27e174cf-ac80-49db-9eb6-bd4e85c99787,
.et_pb_group.et_clickable.preset--module--divi-group--8da13b6e-043a-41ab-a9e3-31c1dbfd4541 {
transition-property: border-color, box-shadow, transform;
transition-duration: 0.3s;
transition-timing-function: ease;
}
.et_pb_group.et_clickable.preset--module--divi-group--27e174cf-ac80-49db-9eb6-bd4e85c99787:hover,
.et_pb_group.et_clickable.preset--module--divi-group--8da13b6e-043a-41ab-a9e3-31c1dbfd4541:hover {
border-color: var(--gcid-f07d3032-9f25-46c6-a164-40ca7f1252de);
transform: translateY(calc(-1 * var(--gvid-fce9f4da-4cfb-4fae-a85c-fea284b42d50)));
}
/* Hover-Schatten zweilagig wie live (shadow-card-hover = 0 10px 25px -5px und 0 8px 10px -6px, beide
rgb(15 23 42/.1), Farbe „CCA Schatten Hover“). Warum hier: Divis Schatten-Feld im Preset kennt nur
eine Ebene; diese Regel ersetzt im Hover den Preset-Schatten durch beide Ebenen. Wer: alle
verlinkten Karten der vier Presets „Beitrag“, „Rahmen Link“, „Rahmen“, „Rahmen statisch“.
Plan 05-15. */
.et_pb_group.et_clickable:is(.preset--module--divi-group--ad7c55e3-ee67-44fe-bc41-5568047cf62d, .preset--module--divi-group--ddf4d04a-72af-451d-8dad-81f4b35eaf31, .preset--module--divi-group--27e174cf-ac80-49db-9eb6-bd4e85c99787, .preset--module--divi-group--8da13b6e-043a-41ab-a9e3-31c1dbfd4541):hover {
box-shadow: 0px 10px 25px -5px var(--gcid-aa9e65cc-2aa1-4af5-9d2c-62a20353812d), 0px 8px 10px -6px var(--gcid-aa9e65cc-2aa1-4af5-9d2c-62a20353812d);
}
/* Kartentitel wird im Hover der Karte blau wie live (group-hover:text-primary transition-colors an
der Überschrift der Beitragskarten und der Karten „Weitere Leistungen und Wissen“). Warum hier:
Divi kennt keinen Hover-Zustand der Elterngruppe; das Überschrift-Preset setzt die Farbe mit
!important, daher hier ebenfalls. Wer: „CCA · Karte · Beitrag“ (/blog, Verwandte, Archiv) und
„CCA · Karte · Rahmen Link“ (Leistungsseiten), nur verlinkt. Plan 05-15. */
.et_clickable.preset--module--divi-group--ad7c55e3-ee67-44fe-bc41-5568047cf62d .et_pb_heading .et_pb_module_header,
.et_clickable.preset--module--divi-group--ddf4d04a-72af-451d-8dad-81f4b35eaf31 .et_pb_heading .et_pb_module_header {
transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.et_clickable.preset--module--divi-group--ad7c55e3-ee67-44fe-bc41-5568047cf62d:hover .et_pb_heading .et_pb_module_header,
.et_clickable.preset--module--divi-group--ddf4d04a-72af-451d-8dad-81f4b35eaf31:hover .et_pb_heading .et_pb_module_header {
color: var(--gcid-primary-color) !important;
}
/* Pfeil rückt im Karten-Hover 2 px nach rechts wie live (transition-transform
group-hover:translate-x-0.5 am Pfeil von „Weiterlesen“; „CCA Abstand 0.5“, Übergang 0,15 s).
Warum hier: Der Pfeil ist das ::after aus der Regel „Buttons und Textlinks mit Icon rechts“ (dort
transform none !important); Divi kennt keinen Hover der Elterngruppe. Wer: Karten
„CCA · Karte · Rahmen Link“ („Weitere Leistungen und Wissen“), nur verlinkt. Plan 05-15. */
body #page-container .et_pb_section .et_clickable.preset--module--divi-group--ddf4d04a-72af-451d-8dad-81f4b35eaf31 a.et_pb_button.cca-icon-pfeil::after {
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
body #page-container .et_pb_section .et_clickable.preset--module--divi-group--ddf4d04a-72af-451d-8dad-81f4b35eaf31:hover a.et_pb_button.cca-icon-pfeil::after {
transform: translateX(var(--gvid-fd14e262-4f3f-423c-a907-dcd5f5e07343)) !important;
}
/* Keine Bewegung bei „Bewegung reduzieren“ (Systemeinstellung): Rand, Schatten und Titelfarbe wechseln
weiter, nur Anheben und Pfeilschub entfallen. Warum hier: Divi hat keine Bedingung
prefers-reduced-motion; die Regeln schlagen auch das native Transform der Presets (höhere
Spezifität). Wer: alle verlinkten Karten oben. Plan 05-15. */
@media (prefers-reduced-motion: reduce) {
.et_pb_group.et_clickable[class*="preset--module--divi-group--"]:hover {
transform: none;
}
body #page-container .et_pb_section .et_clickable.preset--module--divi-group--ddf4d04a-72af-451d-8dad-81f4b35eaf31:hover a.et_pb_button.cca-icon-pfeil::after {
transform: none !important;
}
}
/* ===== Plan 06-07: Kontaktformular (LEAD-02, D-03) =====
Was: Optik des Kontaktformulars auf /kontakt wie live (ContactForm.tsx und components/ui/Input.tsx am
Commit 634de00, Referenzkopien unter baseline/content/source/components/): Feldraster, Labels
(14 px, Überschriftenschrift, 600, „CCA Dunkel“), roter Pflichtstern, Felder (1 px Rand „CCA Border“,
Radius 8 px, Innenabstand 0,75 rem / 1 rem, Fokus Rand Primär und 2-px-Ring Primär 20 %), Hinweise
und Fehlertexte (12 px), role=alert (Rot 15 % auf Weiß, Text Rot/Dunkel gemischt wie danger-text),
CTA-Button (Lime „CCA CTA“, Text „CCA CTA Text“, Hover „CCA CTA Hover“, gesperrt 50 % Deckkraft) und
der Block „Anfrage nicht angenommen“. Abstände = Tailwind-Werte über die CCA-Abstandsvariablen
(space-y-5 = „CCA Abstand 5“, gap-5, mb-2, mt-1.5, px-4/py-3, px-8/py-4, p-8/p-10). Farben nur über
vorhandene Variablen; die Tailwind-Zwischentöne (primary/20, danger-bg, danger-text, danger/30,
cta-active) ohne eigene Variable sind color-mix aus vorhandenen Variablen (Divi 5 löscht Variablen
nie, deshalb keine neuen). 640 px ist der Tailwind-Breakpoint sm von live (zwei Spalten, Button
in Inhaltsbreite), kein Design-Wert. Abstand zum Hinweis „Pflichtfelder …“ live mt-8; der Abstand
zwischen den Modulen der Karte liefert schon 20 px, deshalb hier nur „CCA Abstand 3“ (gemessen an
baseline/screenshots/desktop/kontakt.jpg).
Warum hier: Das Formular ist eigenes Markup aus dem Shortcode [cca_kontaktformular]
(wp/mu-plugins/cca-lead/kontaktformular.html) in einem nativen Textmodul; Divi hat für fremdes
Formular-Markup keine Felder, Presets greifen nicht, und Inline-Styles sind verboten (D-03).
Wer: nur /kontakt (Wurzel .cca-kf, Klassen cca-kf-*). */
.cca-kf [hidden] {
display: none !important;
}
.et_pb_text .cca-kf {
position: relative;
margin-top: var(--gvid-afbfde81-b259-4d59-847e-a22f16485bf5);
font-family: var(--et_global_body_font);
font-size: var(--gvid-801e0838-bf3f-49c7-ae03-55f96bcd77bd);
line-height: 1.7;
color: var(--gcid-body-color);
text-align: left;
}
.et_pb_text .cca-kf p {
margin: 0;
padding: 0;
}
.et_pb_text .cca-kf .cca-kontaktformular > * + * {
margin-top: var(--gvid-ed1f8f68-36de-4018-8bfa-41399f8cae65);
}
.et_pb_text .cca-kf-reihe {
display: grid;
gap: var(--gvid-ed1f8f68-36de-4018-8bfa-41399f8cae65);
}
.et_pb_text .cca-kf-label {
display: block;
margin-bottom: var(--gvid-908d6082-b3a5-4391-ab85-6422b7864eec);
font-family: var(--et_global_heading_font);
font-size: var(--gvid-3ab5eb1f-33a2-4b94-840d-b74dc9390634);
font-weight: 600;
line-height: var(--gvid-ed1f8f68-36de-4018-8bfa-41399f8cae65);
color: var(--gcid-2c743bb7-5b8c-4cf7-bfed-dcff551b0765);
}
.et_pb_text .cca-kf-pflicht {
margin-left: var(--gvid-fd14e262-4f3f-423c-a907-dcd5f5e07343);
color: var(--gcid-132f96bb-c0a0-4ace-8c95-bb2c42f33d5c);
}
/* Felder (input, select, textarea): Divis Grundregeln für input[type=text]/select/textarea (grauer
Rand, 2 px Innenabstand) werden über .et_pb_text .cca-kf-eingabe überstimmt. Fehlerzustand über
aria-invalid wie live (border-danger, Ring danger/20). Das Auswahlfeld bekommt den Chevron wie live
als Maske (icons/chevron-down-schmal.svg, Strich 2 wie lucide) in „CCA Muted“ auf ::after der Hülle,
weil ein select kein Pseudo-Element trägt; Textarea mindestens 120 px („CCA Abstand 20“ + „CCA
Abstand 10“), nur senkrecht ziehbar. */
.et_pb_text .cca-kf .cca-kf-eingabe {
display: block;
box-sizing: border-box;
width: 100%;
margin: 0;
padding: var(--gvid-afbfde81-b259-4d59-847e-a22f16485bf5) var(--gvid-a05b2361-27ae-4764-ab46-de0d450ee9fe);
border: var(--gvid-79ab3c32-e19a-4c60-8c6f-962e989b55b0) solid var(--gcid-7f297dfd-2528-43b5-b931-69e97489b94b);
border-radius: var(--gvid-360bfca5-574d-4a6f-b864-b65b772b1b08);
background-color: var(--gcid-d257e5b5-e1f9-472a-97da-4dc10af6332a);
box-shadow: none;
font-family: inherit;
font-size: var(--gvid-801e0838-bf3f-49c7-ae03-55f96bcd77bd);
line-height: var(--gvid-8cfa253b-e46a-4552-a0f1-40f50d855c4d);
color: var(--gcid-2c743bb7-5b8c-4cf7-bfed-dcff551b0765);
transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.et_pb_text .cca-kf .cca-kf-eingabe::placeholder {
color: var(--gcid-ac900d1e-62c9-4605-9723-cdae13e64f58);
opacity: 1;
}
.et_pb_text .cca-kf .cca-kf-eingabe:focus {
outline: none;
border-color: var(--gcid-primary-color);
box-shadow: 0 0 0 calc(2 * var(--gvid-79ab3c32-e19a-4c60-8c6f-962e989b55b0)) color-mix(in srgb, var(--gcid-primary-color) 20%, transparent);
}
.et_pb_text .cca-kf .cca-kf-eingabe[aria-invalid="true"] {
border-color: var(--gcid-132f96bb-c0a0-4ace-8c95-bb2c42f33d5c);
}
.et_pb_text .cca-kf .cca-kf-eingabe[aria-invalid="true"]:focus {
box-shadow: 0 0 0 calc(2 * var(--gvid-79ab3c32-e19a-4c60-8c6f-962e989b55b0)) color-mix(in srgb, var(--gcid-132f96bb-c0a0-4ace-8c95-bb2c42f33d5c) 20%, transparent);
}
.et_pb_text .cca-kf .cca-kf-eingabe:disabled {
background-color: var(--gcid-36312162-8eeb-45b2-b949-ce56e360e003);
cursor: not-allowed;
}
.et_pb_text .cca-kf .cca-kf-nachricht {
min-height: calc(var(--gvid-baefeab7-70a8-4b5c-af11-36bdd0bdb61c) + var(--gvid-d22cedf0-c82f-4e4a-9628-12a3453bacb8));
resize: vertical;
}
.et_pb_text .cca-kf .cca-kf-auswahl {
-webkit-appearance: none;
appearance: none;
padding-right: var(--gvid-d22cedf0-c82f-4e4a-9628-12a3453bacb8);
background-image: none;
cursor: pointer;
}
.et_pb_text .cca-kf-auswahl-huelle {
position: relative;
}
.et_pb_text .cca-kf-auswahl-huelle::after {
content: "";
position: absolute;
top: 50%;
right: var(--gvid-a05b2361-27ae-4764-ab46-de0d450ee9fe);
width: var(--gvid-a05b2361-27ae-4764-ab46-de0d450ee9fe);
height: var(--gvid-a05b2361-27ae-4764-ab46-de0d450ee9fe);
transform: translateY(-50%);
background-color: var(--gcid-ac900d1e-62c9-4605-9723-cdae13e64f58);
-webkit-mask: url("icons/chevron-down-schmal.svg") center / contain no-repeat;
mask: url("icons/chevron-down-schmal.svg") center / contain no-repeat;
pointer-events: none;
}
/* Hinweis und Fehlertext unter dem Feld (mt-1.5, 12 px; Fehler „CCA Rot (Danger)“ 600). Der Fehler
ersetzt den Hinweis (cca-lead.js schaltet hidden), wie Input.tsx. */
.et_pb_text .cca-kf .cca-kf-hinweis,
.et_pb_text .cca-kf .cca-kf-fehler {
margin-top: var(--gvid-fb0bd885-4450-4ca9-919e-179856e5d5de);
font-size: var(--gvid-19c8f92c-c532-4595-8748-a449e3fbf46e);
line-height: var(--gvid-a05b2361-27ae-4764-ab46-de0d450ee9fe);
color: var(--gcid-ac900d1e-62c9-4605-9723-cdae13e64f58);
}
.et_pb_text .cca-kf .cca-kf-fehler {
font-weight: 600;
color: var(--gcid-132f96bb-c0a0-4ace-8c95-bb2c42f33d5c);
}
/* Einwilligung: Checkbox links oben (mt-1, 16 px, Akzent Primär), Text 14 px in „Fließtext“-Farbe,
Links im Formular (Datenschutzerklärung, Google-Links, mailto) folgen bewusst der seitenweiten
Textlink-Regel aus Plan 04-15 (Philipp 2026-10-25: Linktext fast schwarz, Lime unterstrichen) statt
live (Primär bzw. Muted); deshalb hier keine eigene Linkfarbe. */
.et_pb_text .cca-kf .cca-kf-einwilligung {
display: flex;
align-items: flex-start;
gap: var(--gvid-afbfde81-b259-4d59-847e-a22f16485bf5);
font-size: var(--gvid-3ab5eb1f-33a2-4b94-840d-b74dc9390634);
line-height: var(--gvid-ed1f8f68-36de-4018-8bfa-41399f8cae65);
color: var(--gcid-body-color);
cursor: pointer;
}
.et_pb_text .cca-kf .cca-kf-checkbox {
flex-shrink: 0;
width: var(--gvid-a05b2361-27ae-4764-ab46-de0d450ee9fe);
height: var(--gvid-a05b2361-27ae-4764-ab46-de0d450ee9fe);
margin: var(--gvid-fce9f4da-4cfb-4fae-a85c-fea284b42d50) 0 0;
accent-color: var(--gcid-primary-color);
cursor: pointer;
}
.et_pb_text .cca-kf .cca-kf-checkbox:focus-visible {
outline: none;
box-shadow: 0 0 0 calc(2 * var(--gvid-79ab3c32-e19a-4c60-8c6f-962e989b55b0)) color-mix(in srgb, var(--gcid-primary-color) 20%, transparent);
}
/* Fehlermeldung über dem Button (role=alert): rounded-lg, px-4 py-3, 14 px; Hintergrund danger-bg,
Rand danger/30, Text danger-text als Mischungen aus „CCA Rot (Danger)“, „CCA Weiß“ und „CCA Dunkel“. */
.et_pb_text .cca-kf .cca-kf-alert {
padding: var(--gvid-afbfde81-b259-4d59-847e-a22f16485bf5) var(--gvid-a05b2361-27ae-4764-ab46-de0d450ee9fe);
border: var(--gvid-79ab3c32-e19a-4c60-8c6f-962e989b55b0) solid color-mix(in srgb, var(--gcid-132f96bb-c0a0-4ace-8c95-bb2c42f33d5c) 30%, var(--gcid-d257e5b5-e1f9-472a-97da-4dc10af6332a));
border-radius: var(--gvid-360bfca5-574d-4a6f-b864-b65b772b1b08);
background-color: color-mix(in srgb, var(--gcid-132f96bb-c0a0-4ace-8c95-bb2c42f33d5c) 15%, var(--gcid-d257e5b5-e1f9-472a-97da-4dc10af6332a));
font-size: var(--gvid-3ab5eb1f-33a2-4b94-840d-b74dc9390634);
line-height: var(--gvid-ed1f8f68-36de-4018-8bfa-41399f8cae65);
color: color-mix(in srgb, var(--gcid-132f96bb-c0a0-4ace-8c95-bb2c42f33d5c) 60%, var(--gcid-2c743bb7-5b8c-4cf7-bfed-dcff551b0765));
}
/* Button „Nachricht senden“ wie live (variant cta, size lg): Lime mit dunklem Text, 600, Radius 8 px,
px-8 py-4, 16 px, Schatten sm, Hover „CCA CTA Hover“ mit Schatten Hover, aktiv cta-active (CTA Hover
mit CTA Text gemischt), Fokus-Ring Primär mit 2 px Abstand, gesperrt 50 % Deckkraft. Unter 640 px
volle Breite. Die Texte darunter: 12 px „CCA Muted“, pt-2 bzw. pt-1 mit Zeilenhöhe 1,625. */
.et_pb_text .cca-kf .cca-kf-aktion {
padding-top: var(--gvid-908d6082-b3a5-4391-ab85-6422b7864eec);
}
.et_pb_text .cca-kf .cca-kf-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--gvid-908d6082-b3a5-4391-ab85-6422b7864eec);
width: 100%;
margin: 0;
padding: var(--gvid-a05b2361-27ae-4764-ab46-de0d450ee9fe) var(--gvid-ff93ab0f-5df7-4c5c-9534-87102b7b49e9);
border: 0;
border-radius: var(--gvid-360bfca5-574d-4a6f-b864-b65b772b1b08);
background-color: var(--gcid-secondary-color);
box-shadow: 0 var(--gvid-79ab3c32-e19a-4c60-8c6f-962e989b55b0) calc(2 * var(--gvid-79ab3c32-e19a-4c60-8c6f-962e989b55b0)) 0 var(--gcid-69711386-6a37-4b52-910a-aa2b1b1cf423);
font-family: var(--et_global_heading_font);
font-size: var(--gvid-801e0838-bf3f-49c7-ae03-55f96bcd77bd);
font-weight: 600;
line-height: var(--gvid-8cfa253b-e46a-4552-a0f1-40f50d855c4d);
color: var(--gcid-1d36ac03-2806-4adc-afbd-a1d484809dc8);
white-space: nowrap;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.et_pb_text .cca-kf .cca-kf-button:hover {
background-color: var(--gcid-20cb6dce-5d5a-4143-a0c5-d59946260e41);
box-shadow: 0 var(--gvid-fce9f4da-4cfb-4fae-a85c-fea284b42d50) var(--gvid-fb0bd885-4450-4ca9-919e-179856e5d5de) calc(-1 * var(--gvid-79ab3c32-e19a-4c60-8c6f-962e989b55b0)) var(--gcid-aa9e65cc-2aa1-4af5-9d2c-62a20353812d);
}
.et_pb_text .cca-kf .cca-kf-button:active {
background-color: color-mix(in srgb, var(--gcid-20cb6dce-5d5a-4143-a0c5-d59946260e41) 80%, var(--gcid-1d36ac03-2806-4adc-afbd-a1d484809dc8));
}
.et_pb_text .cca-kf .cca-kf-button:focus-visible {
outline: none;
box-shadow: 0 0 0 calc(2 * var(--gvid-79ab3c32-e19a-4c60-8c6f-962e989b55b0)) var(--gcid-d257e5b5-e1f9-472a-97da-4dc10af6332a), 0 0 0 calc(4 * var(--gvid-79ab3c32-e19a-4c60-8c6f-962e989b55b0)) var(--gcid-primary-color);
}
.et_pb_text .cca-kf .cca-kf-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.et_pb_text .cca-kf .cca-kf-klein {
padding-top: var(--gvid-908d6082-b3a5-4391-ab85-6422b7864eec);
font-size: var(--gvid-19c8f92c-c532-4595-8748-a449e3fbf46e);
line-height: var(--gvid-a05b2361-27ae-4764-ab46-de0d450ee9fe);
color: var(--gcid-ac900d1e-62c9-4605-9723-cdae13e64f58);
}
.et_pb_text .cca-kf .cca-kf-recaptcha {
padding-top: var(--gvid-fce9f4da-4cfb-4fae-a85c-fea284b42d50);
line-height: 1.625;
}
/* Block „Anfrage nicht angenommen“ (D-02a) wie live: „CCA Light BG“ mit 1 px „CCA Border“, Radius 16 px,
p-8 (ab 640 px p-10), zentriert; Titel 20 px / 28 px in „CCA Dunkel“, Text mt-3 in Fließtextfarbe,
der mailto-Link folgt der seitenweiten Textlink-Regel (Plan 04-15). */
.et_pb_text .cca-kf .cca-kf-abgelehnt {
padding: var(--gvid-ff93ab0f-5df7-4c5c-9534-87102b7b49e9);
border: var(--gvid-79ab3c32-e19a-4c60-8c6f-962e989b55b0) solid var(--gcid-7f297dfd-2528-43b5-b931-69e97489b94b);
border-radius: var(--gvid-98f2f345-d100-44e1-a5b7-9a56bf82c57f);
background-color: var(--gcid-36312162-8eeb-45b2-b949-ce56e360e003);
text-align: center;
outline: none;
}
.et_pb_text .cca-kf .cca-kf-abgelehnt-titel {
margin: 0;
padding: 0;
font-family: var(--et_global_heading_font);
font-size: var(--gvid-ed1f8f68-36de-4018-8bfa-41399f8cae65);
font-weight: 600;
line-height: var(--gvid-109c1bdb-6864-4dc8-af5d-8d71c6661d14);
color: var(--gcid-2c743bb7-5b8c-4cf7-bfed-dcff551b0765);
}
.et_pb_text .cca-kf .cca-kf-abgelehnt p {
margin-top: var(--gvid-afbfde81-b259-4d59-847e-a22f16485bf5);
color: var(--gcid-body-color);
}
/* Ab 640 px (Tailwind sm wie live): Name/E-Mail und Telefon/Unternehmen nebeneinander, Button in
Inhaltsbreite, Abgelehnt-Block mit p-10 („CCA Abstand 10“). */
@media (min-width: 640px) {
.et_pb_text .cca-kf-reihe {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.et_pb_text .cca-kf .cca-kf-button {
width: auto;
}
.et_pb_text .cca-kf .cca-kf-abgelehnt {
padding: var(--gvid-d22cedf0-c82f-4e4a-9628-12a3453bacb8);
}
}
/* ===== Plan 06-07: Honeypot außerhalb des sichtbaren Bereichs (LEAD-02, D-03) =====
Was: Das Feld website (Label „Website (nicht ausfüllen)“) steht wie live außerhalb des sichtbaren
Bereichs: position absolute, left −9999 px, top auto, 1 × 1 px („CCA Linie“), overflow hidden.
Warum hier: Live trug das ein Inline-Style (im Nachbau verboten). Die Positionswerte sind technisch,
kein Design; bewusst nicht display:none, damit Bots das Feld im DOM sehen und ausfüllen (ein
gefülltes Feld sendet nichts, cca-lead.js; der Endpunkt lehnt es ab, cca_lead_validate).
Wer: .cca-kf-hp im Kontaktformular auf /kontakt. */
.cca-kf .cca-kf-hp {
position: absolute;
top: auto;
left: -9999px;
width: var(--gvid-79ab3c32-e19a-4c60-8c6f-962e989b55b0);
height: var(--gvid-79ab3c32-e19a-4c60-8c6f-962e989b55b0);
overflow: hidden;
}
/* ===== Plan 06-09: ratedo-Ersatz (D-17) =====
Was: Das Textmodul .cca-ratedo-ersatz (Link „Bewertungen und Erfahrungen auf ratedo.de“ zum
ratedo-Profil) wird ausgeblendet, sobald im Geschwister-Modul .ratedo_badge ein Bild steht, also
sobald CCM19 nach Zustimmung das ratedo-Script freigegeben und es das Siegel eingesetzt hat.
Ohne Zustimmung lädt kein ratedo-Script (cca-ui.php 1.4.0, CCM19-Script-Loader-Gruppe ratedo),
der Platzhalter bleibt leer und der Ersatz-Link sichtbar.
Warum hier: Divi kann ein Modul nicht abhängig vom Inhalt eines anderen Moduls ausblenden; das
Siegel entsteht erst im Browser. Der Ersatz steht bewusst außerhalb von .ratedo_badge, denn
ratedo überspringt jedes .ratedo_badge, dessen innerHTML „ratedo“ enthält (Research Pitfall 8).
Keine neuen Werte, nur display. Die Regeln aus Plan 04-04 für .ratedo_badge bleiben.
Wer: das Textmodul mit der Klasse cca-ratedo-ersatz direkt nach dem ratedo-Platzhalter auf der
Startseite (Text und Link im Visual Builder pflegbar). */
.ratedo_badge:has(img) ~ .cca-ratedo-ersatz {
display: none;
}