/* Theme Name: Divi-Mastermind-Child-Theme Theme URI: https://www.divimastermind.com/ Description: Dies ist ein ready-to-start Child-Theme für Divi. Entwickelt und bereitgestellt von den Divi Masterminds. Dieses Theme beinhaltet alle notwendigen Dateien, um den schnellen und einfach Start zu ermöglichen. Author: Divi Mastermind - Benny Hozjan und Frank Oschatz Author URI: https://divimastermind.com/ Template: Divi Version: 1.0.0 Tag: divi, child-theme, rawbone, easy-to-use, mastermind, german-group, License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */ /* ================================================================== INHALTSVERZEICHNIS ================================================================== 01 Theme-Grundlagen 02 Typografie 03 Header und Navigation 04 Buttons 05 Module 06 Formulare (Gravity Forms) 07 Sektionen 08 Responsive 09 Footer ARBEITSREGELN - Erste Wahl sind Divi-Modul-Attribute, Presets und Variablen. CSS steht hier nur für das, was Divi nicht selbst kann: Pseudo-Elemente, Plugin-Ausgaben wie Gravity Forms, Builder-Komfort. - Schrift (font-size, line-height, font-weight) gehört dem Variable Manager. In dieser Datei keine Schriftgrößen setzen. - Farben immer über die Divi-Variablen mit Fallback, zum Beispiel var(--gcid-primary-color, #E85D21). Divi gibt nur die global genutzten Farben als CSS-Variable aus, der Fallback greift sonst. - Reihenfolge der Abschnitte nicht vertauschen: spätere Regeln überschreiben frühere. - Jede Regel erklärt im Kommentar das WARUM. ÄNDERUNGSPROTOKOLL 03.11.2026 Relaunch Haustechnik Rhein Main (Kohl GmbH): Schriftgrößen-CSS entfernt (html 62.5 %, feste Größen im Formular). Die Typografie läuft komplett über den Variable Manager, Basis ist jetzt 1rem = 16px. Divi-4-Trick .lem_fixed_buttons entfernt: position absolute nimmt Buttons aus dem Flex-Fluss, in Divi 5 löst das die Spalte selbst (Justify Content). Doppelte Regel für das Feld-Einstellungsfenster bereinigt. Formular-Farben von Blau auf die Kohl-Farben umgestellt. Neu: .kohl-akzent (orange Wortbetonung) und .lem-herz (Herz in der Credits-Zeile). ================================================================== */ /* ================================================================== 01 THEME-GRUNDLAGEN ================================================================== */ /* Admin-Leiste über allen Divi-Ebenen halten, damit sie im Builder und bei fixiertem Header nicht verdeckt wird. */ #wpadminbar { z-index: 9999999; } /* Einheitliches Boxmodell: Innenabstand und Rahmen zählen zur Breite. Verhindert, dass Spalten mit Padding über 100 % hinauswachsen. Der Reset der Außen- und Innenabstände ist Teil der Basisinstallation. */ * { margin: 0; padding: 0; box-sizing: border-box; } /* TinyMCE-Werkzeugleiste im Textmodul beim Scrollen sichtbar halten, sonst verschwindet sie in langen Texten nach oben aus dem Blick. */ .mce-top-part { position: sticky !important; top: -60px; } /* Einstellungsfenster der Divi-Felder höher machen, damit lange Optionslisten ohne zusätzliches Scrollen bedienbar sind. Stand vorher doppelt (500px und 600px), es galt ohnehin 600px. */ .et-fb-field-settings-modal { max-height: 600px !important; } /* Untermenüs am rechten Rand nach links aufklappen lassen, damit sie nicht aus dem Bildschirm laufen. Klasse "dropdown_fix" am Menüpunkt. */ .dropdown_fix ul { right: 0px !important; } /* ================================================================== 02 TYPOGRAFIE ================================================================== */ /* Eyebrow (Dachzeile über Überschriften): kurze orange Linie vor dem Text. Ein Pseudo-Element lässt sich nicht als Modul-Attribut setzen, deshalb hier. Die Klasse kommt aus dem Preset "Kohl Eyebrow", Schrift und Farbe kommen ebenfalls aus dem Preset. */ .kohl-eyebrow p { display: inline-flex; align-items: center; gap: 0.6em; } .kohl-eyebrow p::before { content: ""; flex: none; width: 26px; height: 2px; border-radius: 2px; background: var(--gcid-primary-color, #E85D21); } /* Orange Wortbetonung in Überschriften, z. B. "passende Lösung" in der H1 der Startseite. Ein einzelnes Wort lässt sich im Textmodul nicht per Attribut einfärben, deshalb die Klasse am im Text. */ .kohl-akzent { color: var(--gcid-primary-color, #E85D21); } /* ================================================================== 03 HEADER UND NAVIGATION ================================================================== */ /* Aktuell keine Regeln: Header über den Theme Builder und Modul-Attribute. */ /* ================================================================== 04 BUTTONS ================================================================== */ /* Aktuell keine Regeln: Buttons über die Presets "Kohl Button ...". */ /* ================================================================== 05 MODULE ================================================================== */ /* Aktuell keine Regeln. */ /* ================================================================== 06 FORMULARE (GRAVITY FORMS) ================================================================== */ /* Formular-Farben zentral als Variablen. Sie zeigen auf die globalen Divi-Farben, damit eine Farbänderung im Variable Manager auch die Formulare mitnimmt. Die Hex-Werte sind nur der Fallback. */ :root { --primary-color: var(--gcid-heading-color, #16232B); /* Anthrazit */ --accent-color: var(--gcid-primary-color, #E85D21); /* Kohl-Orange */ --accent-color-light: var(--gcid-link-color, #CB4A13); /* Orange dunkel für Hover */ --error-color: #B22222; /* Dunkles Rot */ --background-gray: #F4F7F9; /* Hintergrund hell */ --border-color: #E2E9ED; /* Linie */ --text-color: var(--gcid-heading-color, #16232B); /* Anthrazit */ --placeholder-color: rgba(22, 35, 43, 0.5); /* Anthrazit, halbtransparent */ --success-background: rgba(232, 93, 33, 0.12); /* Orange, sehr hell */ --error-background: rgba(178, 34, 34, 0.1); /* Rot, sehr hell */ } /* Formularfuß mit Trennlinie über dem Absende-Button. */ html body article .et-l .et_pb_section .et_pb_module .gform_wrapper form .gform_footer.top_label, footer .et_pb_section .et_pb_module .gform_wrapper form .gform_footer.top_label { margin-top: 1.5em; padding: 1em 0; border-top: 1px solid var(--border-color); float: left; width: 98%; margin-right: 2%; } /* Text-, Auswahl- und Zahlenfelder: helle Fläche mit feiner Linie. Hohe Spezifität, weil Gravity Forms seine eigenen Stile tief ansetzt. Schriftgröße bewusst nicht gesetzt: sie kommt aus dem Theme. */ html body article .et-l .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield input[type=email], html body article .et-l .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield select, html body article .et-l .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield input[type=text], html body article .et-l .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield input[type=number], html body article .et-l .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield input[type=tel], footer .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield input[type=email], footer .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield select, footer .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield input[type=text], footer .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield input[type=number], footer .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield input[type=tel] { border: 1px solid var(--border-color); border-radius: 11px; padding: 0 0.9375rem; background: var(--background-gray); color: var(--text-color); height: 48px; box-sizing: border-box; } /* Fokus: orange Rahmen und weiße Fläche, damit das aktive Feld klar erkennbar ist (auch für Tastaturbedienung). */ html body article .et-l .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield input:focus, footer .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield input:focus { border-color: var(--accent-color); background: rgba(255, 255, 255, 1.0); outline: none; } /* Mehrzeiliges Textfeld: gleiche Optik wie die Einzeiler, Höhe nur senkrecht veränderbar, damit das Layout nicht seitlich bricht. */ html body article .et-l .et_pb_section .et_pb_module .gform_wrapper textarea, footer .et_pb_section .et_pb_module .gform_wrapper textarea { border: 1px solid var(--border-color); border-radius: 11px; padding: 0.625rem 0.9375rem; background: var(--background-gray); color: var(--text-color); min-height: 120px; width: 100%; box-sizing: border-box; resize: vertical; } html body article .et-l .et_pb_section .et_pb_module .gform_wrapper textarea:focus, footer .et_pb_section .et_pb_module .gform_wrapper textarea:focus { border-color: var(--accent-color); background: rgba(255, 255, 255, 1.0); outline: none; } /* Absende-Button: gleiche Form wie die Kohl-Buttons (Pille, Orange). !important, weil Gravity Forms die Button-Farben inline mit hoher Priorität setzt. */ html body article .et-l .et_pb_section .et_pb_module .gform_wrapper .gform_footer input.button, footer .et_pb_section .et_pb_module .gform_wrapper .gform_footer input.button { background-color: var(--accent-color) !important; border: 1px solid var(--accent-color) !important; color: #fff !important; border-radius: 999px !important; padding: 0.8125rem 1.5625rem !important; cursor: pointer; transition: 0.3s; } html body article .et-l .et_pb_section .et_pb_module .gform_wrapper .gform_footer input.button:hover, footer .et_pb_section .et_pb_module .gform_wrapper .gform_footer input.button:hover { background-color: var(--accent-color-light) !important; border-color: var(--accent-color-light) !important; color: #fff !important; } /* Feldbeschriftungen in Anthrazit, normale Stärke. Größe aus dem Theme. */ html body article .et-l .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield .gfield_label, footer .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield .gfield_label { color: var(--text-color); font-weight: 400; } /* Fehler-Hinweis über dem Formular in Rot. */ html body article .et-l .et_pb_section .et_pb_module .gform_wrapper .gform_validation_errors h2.gform_submission_error, footer .et_pb_section .et_pb_module .gform_wrapper .gform_validation_errors h2.gform_submission_error { font-weight: 400; color: var(--error-color); } /* Fehlermeldung am einzelnen Feld: roter Rahmen, gut sichtbar. */ html body article .et-l .et_pb_section .et_pb_module .gform_wrapper .gform-body > div.gform_fields > div > div.validation_message.gfield_validation_message, footer .et_pb_section .et_pb_module .gform_wrapper .gform-body > div.gform_fields > div > div.validation_message.gfield_validation_message { border: solid 1px var(--error-color); border-radius: 5px; color: var(--error-color); padding: 0.75rem; } /* Platzhaltertext gedämpft, damit er nicht wie eine Eingabe aussieht. */ html body article .et-l .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield input::placeholder, footer .et_pb_section .et_pb_module .gform_wrapper .gform_body .gform_fields .gfield input::placeholder { color: var(--placeholder-color); } /* ================================================================== 07 SEKTIONEN ================================================================== */ /* Aktuell keine Regeln. */ /* ================================================================== 08 RESPONSIVE ================================================================== */ /* Aktuell keine Regeln: Breakpoints über die Divi-Einstellungen je Modul. */ /* ================================================================== 09 FOOTER ================================================================== */ /* Herz in der Credits-Zeile (Klasse lem-herz). Inline-Styles lässt der Novamira-Connector nicht zu, deshalb die Farbe hier statt im Text. */ .lem-credits .lem-herz { color: var(--gcid-primary-color, #E85D21); }