, Look einer h2, aber größer (28-48px, per --hero-headline-size änderbar) hero-eyebrow Überschrift-Baustein h1, Erscheinungsbild wie .eyebrow, gleiche Farbe (--eyebrow-farbe) hero-subline Text-Baustein mit
, Erscheinungsbild wie normaler Absatz Alle drei weiß bzw. hell, da sie auf dem dunklen Verlauf über dem Foto liegen. Die globalen Regeln für h1/p (style.css) setzen vieles mit !important bzw. direkt am p-Element, daher hier mit höherer Spezifität (Klasse am Modul + Element). ========================================================================== */ /* Headline:
im Look einer h2 */ .et_pb_module.hero-headline .et_pb_text_inner, .et_pb_module.hero-headline .et_pb_text_inner p { margin: 0; font-family: var(--font-heading); font-weight: var(--weight-light); font-size: var(--hero-headline-size, clamp(28px, 5vw, 48px)); line-height: 1.15; letter-spacing: normal; text-transform: none; color: var(--color-surface); } /* Eyebrow:
im Look eines normalen Absatzes, hell auf dunklem Grund */ .et_pb_module.hero-subline .et_pb_text_inner, .et_pb_module.hero-subline .et_pb_text_inner p { margin: 0; font-family: var(--font-body); font-weight: var(--weight-light); font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-wide); text-transform: none; color: var(--color-surface); } /* ========================================================================== Start-Hero-Buttons (Sallier-Blau, Farbe über --start-hero-btn-farbe änderbar): transparent mit Rand, erst beim Hover gefüllt (Muster von ".btn-secondary", style.css). Rand als inset box-shadow statt "border", damit sich die Größe zu den übrigen Buttons nicht ändert (die Grundregel setzt "border: none !important" beim Hover). ========================================================================== */ .start-hero .et_pb_button { background-color: transparent !important; color: var(--start-hero-btn-farbe, var(--color-primary)) !important; box-shadow: inset 0 0 0 1px var(--start-hero-btn-farbe, var(--color-primary)); } .start-hero .et_pb_button:hover, .start-hero .et_pb_button.is-aktiv:hover, .start-hero .et_pb_button_module_wrapper .et_pb_button:hover { /* Im Start-Hero bewusst Sallier-Blau statt des Hover-Oranges der übrigen Buttons (Kundenwunsch) */ background-color: var(--start-hero-btn-farbe, var(--color-primary)) !important; color: var(--color-surface) !important; box-shadow: inset 0 0 0 1px var(--start-hero-btn-farbe, var(--color-primary)); } /* Aktiver Button im Start-Hero: gefüllt. "is-aktiv" setzt start-hero-buttons.js — anfangs der erste Button, danach immer der zuletzt überfahrene/fokussierte (springt beim Verlassen NICHT zurück). Fallback ohne JavaScript (Klasse "hero-btn-js" fehlt): erster Button gefüllt. */ .start-hero .et_pb_button.is-aktiv { background-color: var(--start-hero-btn-farbe, var(--color-primary)) !important; color: var(--color-surface) !important; } .start-hero:not(.hero-btn-js) .et_pb_button_module_wrapper:not(.et_pb_button_module_wrapper ~ .et_pb_button_module_wrapper) .et_pb_button { background-color: var(--start-hero-btn-farbe, var(--color-primary)) !important; color: var(--color-surface) !important; } /* Mobil: alle Start-Hero-Buttons gleich groß (volle Spaltenbreite, gleiche Höhe), untereinander mit engerem Abstand (Divi setzt pro Button 30px margin-top). Text zentriert. */ @media (max-width: 767px) { .start-hero .et_pb_button_module_wrapper { flex: 0 0 100% !important; width: 100% !important; margin-right: 0 !important; } .start-hero .et_pb_button_module_wrapper ~ .et_pb_button_module_wrapper { margin-top: 16px !important; } .start-hero .et_pb_button_module_wrapper .et_pb_button { display: block !important; width: 100% !important; max-width: none !important; box-sizing: border-box; text-align: center; } } /* Mobil: alle Start-Hero-Buttons durchgehend gefüllt (kein Hover auf Touchgeräten, daher keine Transparenz/"aktiv"-Logik). */ @media (max-width: 767px) { .start-hero .et_pb_button_module_wrapper .et_pb_button { background-color: var(--start-hero-btn-farbe, var(--color-primary)) !important; color: var(--color-surface) !important; } } /* Abstand Logo -> Buttons im Start-Hero: Divi addiert den Zeilenabstand der Section (60px) und den Margin-Top der Buttons (30px) zu 90px. Hier auf einen Wert zusammengeführt: --start-hero-abstand (Standard 30px) = Abstand zwischen den Zeilen der Section; der Margin-Top der Button-Wrapper entfällt. */ .start-hero.et_pb_section { row-gap: var(--start-hero-abstand, 30px) !important; } .start-hero .et_pb_button_module_wrapper { margin-top: 0 !important; } /* Start-Hero: Logo und Button-Reihe gleich breit und rechtsbündig abschließend. Gemeinsame Breite --start-hero-breite (Standard 700px, etwas mehr als die drei Buttons nebeneinander brauchen); auf schmalen Bildschirmen begrenzt auf die Spaltenbreite (dann sind Logo und die gestapelten, vollbreiten Buttons ebenfalls gleich breit). Die Buttons behalten ihre eigene Breite; der Restplatz verteilt sich gleichmäßig zwischen ihnen ("space-between"), Mindestabstand 16px. */ .start-hero { --start-hero-breite: 700px; } .start-hero .et_pb_row:not(:has(.et_pb_button_module_wrapper)) .et_pb_image { width: min(var(--start-hero-breite), 100%) !important; max-width: 100% !important; } .start-hero .et_pb_column:has(.et_pb_button_module_wrapper) { max-width: var(--start-hero-breite); justify-content: space-between; column-gap: var(--space-4) !important; } .start-hero .et_pb_button_module_wrapper { margin-right: 0 !important; } /* Das Logo-Bild füllt die Modulbreite (Divi setzt am Bild eine feste Höhe bei "width:auto", dadurch blieb es schmaler als das Modul). */ .start-hero .et_pb_row:not(:has(.et_pb_button_module_wrapper)) .et_pb_image .et_pb_image_wrap { width: 100% !important; } .start-hero .et_pb_row:not(:has(.et_pb_button_module_wrapper)) .et_pb_image .et_pb_image_wrap img { width: 100% !important; height: auto !important; } /* Unsichtbares (0 x 0 px) Duplikat-Logo in der Button-Reihe: zählt als Flex-Element samt Spaltenabstand und ließ den dritten Button in eine neue Zeile rutschen — ausgeblendet. */ .start-hero .et_pb_column:has(.et_pb_button_module_wrapper) > .et_pb_image { display: none !important; }