/* ========================================================================== Footer (Divi Theme Builder) Spezifischere Selektoren auf Divis eigene Modul-Klassen nötig, da Divis generiertes Basis-CSS (z. B. "h1,h2,h3..{color:#333}") sonst gewinnt. ========================================================================== */ /* Divi berechnet den Row-Gap zwischen gestapelten Modulen nicht direkt über "gap", sondern über die Custom Property --module-gutter, die von :root global auf 30px gesetzt ist und sich auf jeden verschachtelten Flex-Container (Spalte, Gruppe, Modul) vererbt. Eine spaltenspezifische Regel (":has(.footer_headline)") trifft die tatsächliche Verschachtelung nicht zuverlässig, deshalb hier am Footer-Root überschreiben — vererbt sich automatisch nach unten, unabhängig von der genauen Modul-Struktur. */ footer.et-l--footer { --module-gutter: 12px !important; --vertical-gap: 12px !important; } /* Der Datenschutz-Text des Kontaktformulars (siehe ".wpcf7-acceptance .wpcf7-list-item-label" in formular.css) sieht seit Kurzem überall wie normaler dunkler Fließtext aus — nur hier im Footer (dunkler Hintergrund) muss er weiterhin Weiß bleiben, sonst unlesbar. */ footer.et-l--footer .wpcf7-acceptance .wpcf7-list-item-label { color: var(--color-surface); } /* Spalte mit Headline + Eyebrow ("Kontakt") braucht laut Entwurf einen engeren Abstand (4px) als der restliche Footer (12px) — hier direkt an der Spalte (dem tatsächlichen Flex-Container, der "gap" anwendet) überschrieben, per ":has()" statt über die instabile Divi-Instanz-Klasse. */ .contact .et_flex_column:has(> .eyebrow) { --module-gutter: 4px !important; --vertical-gap: 4px !important; } /* Überschriften-Grundstil NUR im Footer — bewusst nicht global in style.css, damit der Footer unabhängig vom Rest der Seite bleibt. "footer.et-l--footer" als zusätzlicher Vorfahre erhöht die Spezifität gegenüber Divis eigener, gleich benannter Regel (h1, h2, h3, h4, h5, h6 { ... }), die je nach Ladereihenfolge sonst gewinnen würde, ohne dass wir dafür !important brauchen. Komponentenspezifische Regeln (z. B. .contact .et_pb_module_header) bleiben weiterhin spezifischer und können diese Regel gezielt überschreiben. */ footer.et-l--footer h1, footer.et-l--footer h2, footer.et-l--footer h3, footer.et-l--footer h4, footer.et-l--footer h5, footer.et-l--footer h6 { /* "!important" auf allen 4 Eigenschaften: style.css setzt Überschriften jetzt global mit "!important" (margin/font-family/font-weight/font-size/color, nötig um Divis eigene, seitenspezifisch generierte CSS zuverlässig zu schlagen). "!important" gewinnt immer gegen Spezifität — eine spezifischere Regel wie diese hier OHNE "!important" würde sonst trotzdem verlieren (z. B. weiße Footer-Überschriften auf dunklem Hintergrund würden unsichtbar navy, oder die Footer-Schriftgröße würde auf 32px vom globalen Wert springen). */ margin: 0 !important; font-family: 'Inter 24pt', sans-serif !important; font-weight: var(--weight-semibold) !important; color: #FFFFFF !important; /* Divis eigenes Basis-CSS setzt hier "padding-bottom: 10px" auf alle h1-h6. */ padding-bottom: 0; } footer.et-l--footer h1 { font-family: var(--font-display) !important; } /* Divi setzt ab dem Tablet-Breakpoint (max-width: 980px) eigene, in dieser Media Query verschachtelte Gutter-Werte, die die Regel oben dort wieder überschreiben — deshalb hier identisch nochmal innerhalb derselben Media Query. */ @media only screen and (max-width: 980px) { footer.et-l--footer { --module-gutter: 12px !important; --vertical-gap: 12px !important; } } /* Klasse "footer_links" sitzt auf der Reihe (umschließt alle 4 Spalten), nicht auf den einzelnen Überschrift-/Link-Modulen — Überschrift und Link werden über Divis eigene Modul-Typ-Klassen (.et_pb_heading / .et_pb_text) unterschieden, die immer automatisch korrekt am Modul sitzen. Das erspart, jedes einzelne Modul manuell zu markieren (fehleranfällig, siehe frühere Bugs). */ /* Der Spalten-Gap soll der EINZIGE Abstandsgeber zwischen den Modulen sein — daher hier auf jeder Verschachtelungsebene (Modul-Wrapper, innerer Container, Textelement) Margin/Padding konsequent auf 0, statt einzeln nachzujagen, sobald wieder eine Divi-Standardregel dazwischenfunkt. */ .footer_links .et_pb_heading, .footer_links .et_pb_heading .et_pb_heading_container, .footer_links .et_pb_heading .et_pb_module_header, .footer_links .et_pb_text, .footer_links .et_pb_text .et_pb_text_inner, .footer_links .et_pb_text p { margin: 0 !important; padding: 0 !important; } /* Reserviert Platz für 2 Zeilen, damit einzeilige Überschriften (z. B. "IMMOBILIEN") genauso viel Höhe beanspruchen wie zweizeilige ("FÜR EIGENTÜMER & VERKÄUFER"). Nur bei Überschriften — bei Links bewusst weggelassen, damit einzeilige Links eng bleiben (Kompromiss: ein umbrechender Link wie "Projektentwicklung & Revitalisierung" kann die Ausrichtung darunter verschieben). */ .footer_links .et_pb_heading, .footer_links .et_pb_heading .et_pb_heading_container, .footer_links .et_pb_heading .et_pb_module_header { min-height: 36px !important; } .footer_links .et_pb_heading .et_pb_module_header { /* "!important" auf font-family/font-weight/font-size/color: siehe Begründung bei "footer.et-l--footer h1..h6" oben — die globale h1-h6-Regel (style.css) setzt diese 4 Eigenschaften ebenfalls mit "!important" und würde sonst gewinnen. */ font-family: var(--font-body) !important; font-weight: var(--weight-semibold) !important; font-size: 18px !important; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-surface) !important; line-height: 1.2; } /* "footer.et-l--footer" als zusätzlicher Vorfahre + "!important" auf ALLEN Eigenschaften: Divi setzt auf genau diesen (nummerierten, TB-generierten) Text-Modul-Klassen eigene, ebenfalls per "!important" gesetzte Regeln — ohne die zusätzliche Spezifität hier gewinnt Divi zuverlässig, unabhängig davon, dass unsere Regel textuell dieselbe Kaskaden-Ebene hat (siehe dieselbe Begründung bei "footer.et-l--footer h1..h6" oben). */ footer.et-l--footer .footer_links .et_pb_text, footer.et-l--footer .footer_links .et_pb_text .et_pb_text_inner, footer.et-l--footer .footer_links .et_pb_text p, footer.et-l--footer .footer_links .et_pb_text a { font-family: var(--font-body) !important; font-weight: var(--weight-light) !important; font-size: 18px !important; color: rgba(255, 255, 255, 0.85) !important; line-height: 1.2 !important; } footer.et-l--footer .footer_links .et_pb_text a { text-decoration: none !important; transition: color var(--transition-fast); } footer.et-l--footer .footer_links .et_pb_text a:hover { color: var(--color-surface) !important; } /* Copyright-Zeile: Klasse sitzt auf der Reihe selbst, nicht auf den einzelnen Modulen — Nachfahren-Selektoren erreichen automatisch Text, Trennzeichen und Links gleichermaßen. */ /* "footer.et-l--footer" als zusätzlicher Vorfahre + "!important": schützt v.a. die Links in der Copyright-Zeile vor der globalen Body-Link-Regel (".et_pb_text a:not(.et_pb_button)", siehe style.css — Sallier-Blau, 18px, unterstrichen). Reines "!important" allein reichte nicht, da jene Regel durch ":not()" eine höhere Spezifität hat als ".footer_copyright *" — erst mit "footer.et-l--footer" davor gewinnt diese Regel wieder zuverlässig. */ footer.et-l--footer .footer_copyright, footer.et-l--footer .footer_copyright * { font-family: var(--font-body) !important; font-weight: var(--weight-light) !important; font-size: var(--text-small) !important; color: rgba(255, 255, 255, 0.5) !important; } /* Die 5 Spalten sind gleich breit und verteilen ihren Inhalt dadurch über die ganze Zeile — hier auf "so breit wie der Inhalt" umstellen und alles nach links packen, damit es wie eine durchgehende Zeile statt wie 5 verteilte Blöcke wirkt. */ .footer_copyright { display: flex !important; justify-content: flex-start !important; align-items: center; flex-wrap: wrap; gap: 24px; } .footer_copyright > [class*="et_pb_column"] { flex: 0 0 auto !important; width: auto !important; } footer.et-l--footer .footer_copyright a { text-decoration: none !important; transition: color var(--transition-fast); } footer.et-l--footer .footer_copyright a:hover { color: var(--color-surface) !important; } /* Normaler Fließtext im Kontaktbereich (Unternehmen/Adresse/Öffnungszeiten) — ":not(.eyebrow)" grenzt gegen das Eyebrow-Textmodul ab, das in derselben Spalte sitzt. Nachfahren-Selektoren nötig statt reiner Vererbung, da Divis eigenes Preset-System direkt auf ".et_pb_text_inner p" Font-Regeln setzt, die eine nur vererbte Regel vom äußeren Wrapper überstimmen würden. "footer.et-l--footer" als zusätzlicher Vorfahre + "!important" auf font-size/color: siehe Begründung bei "footer.et-l--footer .footer_links .et_pb_text..." oben — ohne diese Verstärkung verlor die Regel zuverlässig gegen Divis eigene, gleich spezifische Regeln (Telefon/E-Mail blieben bei 14px im Divi-Standard-Blau statt 18px/Weiß). */ footer.et-l--footer .contact .et_pb_text:not(.eyebrow), footer.et-l--footer .contact .et_pb_text:not(.eyebrow) .et_pb_text_inner, footer.et-l--footer .contact .et_pb_text:not(.eyebrow) .et_pb_text_inner p { font-family: var(--font-body) !important; font-weight: var(--weight-light) !important; font-size: 18px !important; line-height: 24px !important; color: rgba(255, 255, 255, 0.72) !important; } /* Falls im Kontaktbereich im Builder zusätzlich ein Button eingefügt wird — der globale ".et_pb_button"-Stil (style.css) ist site-weit auf 15px fixiert, hier im Footer auf 18px angehoben, passend zum restlichen Kontakttext. */ footer.et-l--footer .contact .et_pb_button { font-size: 18px !important; } /* Divi setzt über sein Preset-System direkt auf Links innerhalb von Text-Modulen mit diesen beiden Preset-Klassen "font-size:15px" (siehe DevTools: ".preset--group--divi-text--divi- font-body--h1yjkjr--default .et_pb_text_inner a") — betrifft z. B. Telefon/E-Mail-Links im Kontaktbereich. Hier direkt neutralisiert, egal in welchem Footer-Modul diese Preset-Klassen auftauchen, statt jedes betroffene Modul einzeln nachzuziehen. */ footer.et-l--footer .preset--group--divi-text--divi-font-body--h19rs5u--default .et_pb_text_inner a, footer.et-l--footer .preset--group--divi-text--divi-font-body--h1yjkjr--default .et_pb_text_inner a { font-size: 18px !important; } .contact .et_pb_text:not(.eyebrow) .et_pb_text_inner p { margin: 12px 0 0; } .contact .et_pb_text:not(.eyebrow) .et_pb_text_inner p:first-child { margin-top: 0; } /* Telefon/E-Mail werden mit Icon ausgegeben (siehe sallier_icon() in includes/general/icons.php), als ".kontakt-link"-Wrapper um Icon+Link. Bewusst NICHT "display:flex" auf dem

selbst — sonst würde jedes Kind (Icon-Spans, Links) zu einem eigenen Flex-Item und nebeneinander statt untereinander landen, auch wenn im Text ein
dazwischen steht (Flex ignoriert
). */ .contact .et_pb_text:not(.eyebrow) .kontakt-link { display: inline-flex; align-items: center; gap: 10px; } .contact .sallier-icon { color: rgba(255, 255, 255, 0.72); transition: color var(--transition-fast); } /* Icon liegt als Geschwister-Element neben dem Link (nicht darin) — bekommt den Hover-Effekt des Links daher nicht automatisch vererbt und muss hier explizit mitgezogen werden. */ .contact .kontakt-link:hover .sallier-icon { color: var(--color-surface); } /* Social-Media-Icons (siehe [sallier_social]) — eigener Wrapper mit "display:flex", daher unabhängig von der ":not(.eyebrow)

"-Problematik der Kontakt-Links oben. */ .contact .social-links { display: flex; align-items: center; gap: 14px; margin-top: 4px; } .contact .social-links a { display: flex; color: rgba(255, 255, 255, 0.72); transition: color var(--transition-fast); } .contact .social-links a:hover { color: var(--color-surface); } /* Etwas größer als die globale Icon-Größe (20px, siehe ".sallier-icon svg" in style.css) — bewusst nur hier im Footer über die höhere Spezifität überschrieben, damit Telefon-/ E-Mail-Icons an anderen Stellen (z. B. Mitarbeiter-Karte) unverändert bleiben. */ footer.et-l--footer .contact .social-links .sallier-icon svg { width: 24px !important; height: 24px !important; } /* ".sallier-icon" setzt selbst eine feste "color" (siehe style.css) — die blockiert die normale Vererbung vom "", daher hier explizit beim Hover mitgezogen. */ .contact .social-links a .sallier-icon { color: inherit; transition: color var(--transition-fast); } footer.et-l--footer .contact .et_pb_text:not(.eyebrow) a { color: rgba(255, 255, 255, 0.72) !important; text-decoration: none !important; transition: color var(--transition-fast); } footer.et-l--footer .contact .et_pb_text:not(.eyebrow) a:hover { color: var(--color-surface) !important; } /* Kontaktbereich-Headline: margin/font-family/font-weight/font-size stimmen zufällig mit der globalen h1-h6-Regel (style.css) überein — nur die Farbe weicht ab (Weiß statt Navy, wegen dunklem Hintergrund). Trotzdem "!important" auf allen 5 Eigenschaften nötig, da die globale Regel ebenfalls "!important" setzt und sonst z. B. die Farbe zu unsichtbarem Navy-auf-Navy würde. */ .contact .et_pb_module_header { margin: 0 !important; font-family: var(--font-heading) !important; font-weight: var(--weight-light) !important; font-size: var(--text-heading) !important; color: #FFFFFF !important; } /* Rechtshinweis-Row: Divi-Standard padding-top (60px) reduzieren */ footer .et_pb_row_2_tb_footer.et_pb_row { padding-top: var(--space-4, 16px) !important; }