/* Theme Name: Primus Coaching Child Template: Divi Version: 1.2.0 Author: comovision Description: Child Theme für Primus Coaching */ /* =============================================================== INHALT 1. Schriften (lokal) 2. Kopfleiste und Hauptmenü 3. Mobile Navigation (bis 1099 px) 4. Komponenten (per CSS-Klasse im Builder) 5. Handy allgemein (bis 767 px) 6. Abstandssystem („vertikaler Rhythmus“) 6.1 Variablen 6.2 Startseite – alle Breiten 6.3 Unterseiten – Handy 6.4 Alle Seiten – Handy (Hero, Trenner, gestapelte Spalten) 7. Schräge Trenner (alle Seiten) 8. Seitenbezogen: Seminarkatalog Stand: 2026-09-21 (aufgeräumt nach Audit; Sicherung des vorherigen Stands in backups-katalog/child-theme-sicherungen/style.css.bak-2026-09-21-vor-audit) =============================================================== */ /* =============================================================== 1. SCHRIFTEN Lato lokal gehostet (DSGVO: keine Google-Server). Divi nutzt Lato über Customizer → Allgemeine Einstellungen → Typografie; die Google-Fonts-Anfragen unterdrückt functions.php. Dateien aus primus-deeskalation (OMGF) übernommen. =============================================================== */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/lato-normal-latin-ext-300.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/lato-normal-latin-300.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/lato-normal-latin-ext-400.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/lato-normal-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/lato-normal-latin-ext-700.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/lato-normal-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/lato-normal-latin-ext-900.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/lato-normal-latin-900.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/lato-italic-latin-ext-300.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/lato-italic-latin-300.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/lato-italic-latin-ext-400.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/lato-italic-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/lato-italic-latin-ext-700.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/lato-italic-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/lato-italic-latin-ext-900.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/lato-italic-latin-900.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Caveat (Schreibschrift, in einigen Bibliotheks-Layouts) – variable Schrift, eine Datei für 400–700 */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/caveat-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/caveat-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* =============================================================== 2. KOPFLEISTE UND HAUPTMENÜ Social-Icons und Kontaktzeile übernommen aus primus-deeskalation (Divi → Theme-Optionen → Custom CSS). =============================================================== */ /* Facebook-Icon im Header als LinkedIn-Icon anzeigen */ .et-social-facebook a.icon:before { content: "\e09d"; } /* Twitter-Icon als Xing-Icon anzeigen. Divi hat kein Xing-Symbol; die Icon-Schrift aus Deeskalation fehlte dort, deshalb hier als SVG-Maske (Pfad: Simple Icons, CC0). */ .et-social-twitter a.icon:before { content: ""; display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.188 0c-.517 0-.741.325-.927.66 0 0-7.455 13.224-7.702 13.657.015.024 4.919 9.023 4.919 9.023.17.308.436.66.967.66h3.454c.211 0 .375-.078.463-.22.089-.151.089-.346-.009-.536l-4.879-8.916c-.004-.006-.004-.016 0-.022L22.139.756c.095-.191.097-.387.006-.535C22.056.078 21.894 0 21.686 0h-3.498zM3.648 4.74c-.211 0-.385.074-.473.216-.09.149-.078.339.02.531l2.34 4.05c.004.01.004.016 0 .021L1.86 16.051c-.099.188-.093.381 0 .529.085.142.239.234.45.234h3.461c.518 0 .766-.348.945-.667l3.734-6.609-2.378-4.155c-.172-.315-.434-.659-.962-.659H3.648v.016z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.188 0c-.517 0-.741.325-.927.66 0 0-7.455 13.224-7.702 13.657.015.024 4.919 9.023 4.919 9.023.17.308.436.66.967.66h3.454c.211 0 .375-.078.463-.22.089-.151.089-.346-.009-.536l-4.879-8.916c-.004-.006-.004-.016 0-.022L22.139.756c.095-.191.097-.387.006-.535C22.056.078 21.894 0 21.686 0h-3.498zM3.648 4.74c-.211 0-.385.074-.473.216-.09.149-.078.339.02.531l2.34 4.05c.004.01.004.016 0 .021L1.86 16.051c-.099.188-.093.381 0 .529.085.142.239.234.45.234h3.461c.518 0 .766-.348.945-.667l3.734-6.609-2.378-4.155c-.172-.315-.434-.659-.962-.659H3.648v.016z'/%3E%3C/svg%3E") center / contain no-repeat; vertical-align: middle; } /* Kontaktzeile oben: Telefon/Mobil/E-Mail aus dem sekundären Menü (CSS-Klassen top-phone, top-mobile, top-email am Menüpunkt) */ #top-header .et-social-icons { display: inline-block; float: right; } /* Breite automatisch statt fest (Deeskalation: 120px/190px) – sonst Lücke zwischen Icon und E-Mail-Adresse. */ .top-phone, .top-mobile, .top-email { width: auto !important; white-space: nowrap; } .top-phone:before, .top-mobile:before, .top-email:before { float: none !important; display: inline-block; margin-right: 6px; } .top-phone a, .top-mobile a, .top-email a { display: inline !important; color: white !important; } .top-phone:before { font-family: "ETmodules"; content: "\e090"; float: left; } .top-mobile:before { font-family: "ETmodules"; content: "\e00b"; float: left; } .top-email:before { font-family: "ETmodules"; content: "\e010"; float: left; } /* Menüpunkte je Gerät ausblenden (CSS-Klassen dt-hide-on-desktop/-tablet/-phone am Menüpunkt) */ @media (min-width: 981px) { .dt-hide-on-desktop { display: none !important; } } @media (min-width: 768px) and (max-width: 980px) { .dt-hide-on-tablet { display: none !important; } } @media (max-width: 767px) { .dt-hide-on-phone { display: none !important; } } /* Menüpunkt „Seminarkatalog“ als hervorgehobener Button (CSS-Klasse menu-katalog). Negativer Rand oben + reduzierter Rand unten gleichen das Innenpolster aus, damit der Text auf einer Linie mit den übrigen Menüpunkten bleibt. */ @media (min-width: 981px) { #top-menu li.menu-katalog { padding-left: 8px; } #top-menu li.menu-katalog > a { margin: -8px 0 25px; padding: 8px 18px !important; background-color: #232f5e; color: #ffffff !important; border-radius: 50px; opacity: 1; transition: background-color 0.3s; } .et-fixed-header #top-menu li.menu-katalog > a { margin-bottom: 7px; } #top-menu li.menu-katalog > a:hover { background-color: #1a2449; opacity: 1; } /* Divi unterstreicht den aktiven Menüpunkt – beim Button stört das */ #top-menu li.menu-katalog > a::after { display: none; } /* Auf der Katalogseite selbst färbt Divi den aktiven Menüpunkt gold – im Button (auch im eingeklappten Kopfbereich beim Scrollen) soll die Schrift weiß bleiben. */ #top-menu li.menu-katalog.current-menu-item > a, .et-fixed-header #top-menu li.menu-katalog > a, .et-fixed-header #top-menu li.menu-katalog.current-menu-item > a { color: #ffffff !important; } } /* Unterhalb von 1100 px läuft das Menü samt Katalog-Button ins Logo: dort schon das mobile Menü (Burger) zeigen statt umzubrechen. */ @media (min-width: 981px) and (max-width: 1099px) { #top-menu-nav { display: none; } #et_mobile_nav_menu { display: block; } } /* =============================================================== 3. MOBILE NAVIGATION (bis 1099 px, überall wo der Burger erscheint) Vollbild-Menü statt Divis Aufklappliste; direkt unter den Menüpunkten der Katalog als Button und Anrufen/E-Mail (die fügt js/mobile-nav.js ein). =============================================================== */ @media (max-width: 1099px) { .mobile_menu_bar { cursor: pointer; } /* Burger wird beim Öffnen zum X – mit kurzer Drehung */ .mobile_nav.opened .mobile_menu_bar::before { content: "\4d"; display: inline-block; animation: primus-nav-x 0.35s ease; } /* Beim geöffneten Menü: Kopf oben fixieren, Seite dahinter nicht scrollen */ html.primus-nav-open, html.primus-nav-open body { overflow: hidden; } html.primus-nav-open #main-header { position: fixed !important; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; z-index: 100000; } /* Das Menü selbst: vollflächig unter dem Kopf, fährt von rechts ein. Divi blendet es per Skript ein und aus (Inline-Styles für display/height) – Sichtbarkeit regelt hier die Klasse. */ #main-header .et_mobile_menu { position: fixed; top: var(--primus-nav-top, 80px); left: 0; right: 0; bottom: 0; z-index: 99999; display: flex !important; flex-direction: column; height: auto !important; margin: 0; padding: 16px 7% calc(24px + env(safe-area-inset-bottom)); overflow-y: auto !important; background: #ffffff; border-top: 0; box-shadow: none; visibility: hidden; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s; } #main-header .mobile_nav.opened .et_mobile_menu { visibility: visible; transform: none; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } /* Die Punkte folgen dem Panel leicht versetzt nacheinander */ #main-header .et_mobile_menu > li { opacity: 0; transform: translateX(40px); transition: opacity 0.2s ease, transform 0.2s ease; } #main-header .mobile_nav.opened .et_mobile_menu > li { opacity: 1; transform: none; transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } #main-header .mobile_nav.opened .et_mobile_menu > li:nth-child(1) { transition-delay: 0.10s; } #main-header .mobile_nav.opened .et_mobile_menu > li:nth-child(2) { transition-delay: 0.15s; } #main-header .mobile_nav.opened .et_mobile_menu > li:nth-child(3) { transition-delay: 0.20s; } #main-header .mobile_nav.opened .et_mobile_menu > li:nth-child(4) { transition-delay: 0.25s; } #main-header .mobile_nav.opened .et_mobile_menu > li:nth-child(5) { transition-delay: 0.30s; } #main-header .mobile_nav.opened .et_mobile_menu > li:nth-child(n+6) { transition-delay: 0.35s; } /* Menüpunkte: groß, gut mit dem Daumen zu treffen */ #main-header .et_mobile_menu li a { padding: 16px 0 16px 16px; border-bottom: 1px solid #eef4f9; border-left: 3px solid transparent; color: #232f5e; font-size: 22px; font-weight: 700; line-height: 1.3; } #main-header .et_mobile_menu li a:hover { opacity: 1; background: transparent; color: #c79e25; } /* Aktuelle Seite: goldener Strich */ #main-header .et_mobile_menu li.current-menu-item > a, #main-header .et_mobile_menu li.current-menu-ancestor > a { border-left-color: #c79e25; color: #232f5e !important; } /* Zwischen 981 und 1099 px hängt Divi die Kontaktzeile der Kopfleiste ins Menü – das übernehmen hier die Knöpfe „Anrufen“ und „E-Mail“. */ #main-header .et_mobile_menu li.top-phone, #main-header .et_mobile_menu li.top-mobile, #main-header .et_mobile_menu li.top-email { display: none; } /* Seminarkatalog als breiter Button direkt unter den Menüpunkten */ #main-header .et_mobile_menu li.menu-katalog { padding-top: 28px; } #main-header .et_mobile_menu li.menu-katalog > a { padding: 16px 20px; border: 0; border-radius: 50px; background-color: #232f5e; color: #ffffff !important; text-align: center; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; } #main-header .et_mobile_menu li.menu-katalog > a:hover { background-color: #1a2449; } /* Anrufen / E-Mail */ #main-header .et_mobile_menu li.primus-nav-kontakt { display: flex; gap: 12px; padding-top: 12px; } #main-header .et_mobile_menu li.primus-nav-kontakt a { flex: 1; padding: 13px 10px; border: 2px solid #232f5e; border-radius: 50px; color: #232f5e; text-align: center; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; } #main-header .et_mobile_menu li.primus-nav-kontakt a::before { font-family: ETmodules; margin-right: 8px; font-weight: 400; text-transform: none; } #main-header .et_mobile_menu li.primus-nav-kontakt .primus-nav-anrufen::before { content: "\e090"; } #main-header .et_mobile_menu li.primus-nav-kontakt .primus-nav-mail::before { content: "\e010"; } } @keyframes primus-nav-x { from { transform: rotate(-90deg); opacity: 0; } } /* Wer in den Systemeinstellungen „Bewegung reduzieren“ gewählt hat, bekommt das Menü ohne Fahr- und Drehanimation. */ @media (max-width: 1099px) and (prefers-reduced-motion: reduce) { #main-header .et_mobile_menu, #main-header .et_mobile_menu > li, .mobile_nav.opened .mobile_menu_bar::before { transition: none !important; animation: none !important; } } /* =============================================================== 4. KOMPONENTEN (per CSS-Klasse im Builder gesetzt) =============================================================== */ /* Buttons nebeneinander: zentriert in der Spalte (Spaltenklasse buttons-nebeneinander) … */ .buttons-nebeneinander { text-align: center !important; } /* … und die Button-Module dazu inline (CSS-Klasse primus-btn-inline am Button, z. B. im Hero) */ .et_pb_button_module_wrapper:has(> .primus-btn-inline) { display: inline-block; } /* Kästen nebeneinander gleich hoch (z. B. Fachbeiträge „Thematische Schwerpunkte“): Zeilen mit mehreren Spalten, in denen jede Spalte genau ein Textmodul (den Kasten) enthält. Am Desktop streckt sich jeder Kasten auf die Höhe der höchsten Spalte seiner Zeile; darunter stehen die Kästen ohnehin untereinander. */ @media (min-width: 981px) { #main-content .et_pb_row:has(> .et_pb_column + .et_pb_column):not(:has(> .et_pb_column > :nth-child(2))):not(:has(> .et_pb_column > :not(.et_pb_text))) { display: flex; align-items: stretch; } #main-content .et_pb_row:has(> .et_pb_column + .et_pb_column):not(:has(> .et_pb_column > :nth-child(2))):not(:has(> .et_pb_column > :not(.et_pb_text))) > .et_pb_column { display: flex; flex-direction: column; } #main-content .et_pb_row:has(> .et_pb_column + .et_pb_column):not(:has(> .et_pb_column > :nth-child(2))):not(:has(> .et_pb_column > :not(.et_pb_text))) > .et_pb_column > .et_pb_text:only-child { flex-grow: 1; } } /* Fachbeiträge: ausgewählte Publikationen (Modulklasse primus-pub) */ .primus-pub { border-left: 3px solid #c79e25; padding-left: 28px !important; } .primus-pub .primus-pub-jahr { color: #c79e25; font-weight: 900; letter-spacing: 2px; padding-bottom: 4px; } .primus-pub .primus-pub-bezug { font-size: 15px; color: #737a7a; } /* Schlagwörter als ruhige „Pillen“ (Absatzklasse primus-tags) */ .primus-tags span { display: inline-block; margin: 0 8px 8px 0; padding: 4px 14px; border-radius: 50px; background-color: #dfe9f2; color: #232f5e; font-size: 15px; line-height: 1.6em; } /* Seminare: Ablauf „Von der Anfrage zum passenden Format“ als senkrechte Folge (Modulklasse primus-ablauf, je Schritt ein div.primus-schritt) */ .primus-ablauf .primus-schritt { position: relative; padding: 0 0 34px 86px; } .primus-ablauf .primus-schritt:last-child { padding-bottom: 0; } /* Verbindungslinie zwischen den Schritten */ .primus-ablauf .primus-schritt::before { content: ""; position: absolute; left: 27px; top: 66px; bottom: 6px; width: 2px; background-color: #e2ddd0; } .primus-ablauf .primus-schritt:last-child::before { display: none; } .primus-ablauf .primus-schritt-nr { position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%; background-color: #c79e25; color: #ffffff; font-size: 26px; font-weight: 900; line-height: 56px; text-align: center; } .primus-ablauf .primus-schritt h3 { /* Überschrift oben bündig mit der Nummer (die Nummer steckt als span in der Überschrift) */ margin-top: 0; padding-top: 0; padding-bottom: 6px; } @media (max-width: 767px) { .primus-ablauf .primus-schritt { padding-left: 66px; padding-bottom: 28px; } .primus-ablauf .primus-schritt-nr { width: 44px; height: 44px; font-size: 21px; line-height: 44px; } .primus-ablauf .primus-schritt::before { left: 21px; top: 52px; } } /* Bewertungs-Feed: Sternezeile zur Überschrift ausrichten (Modulklasse primus-bewertungen). Der Kopf des Feeds steht auf space-between, damit rechts Platz für „Bewertung schreiben“ bleibt. */ .primus-bewertungen .cvr-header { justify-content: center; gap: 24px; } /* Aufzählung mit goldenem Haken statt Punkt (Modulklasse primus-liste; Coaching, Seminare) */ .primus-liste ul { list-style: none; padding-left: 0; } .primus-liste li { position: relative; padding-left: 30px; padding-bottom: 10px; line-height: 1.6em; } .primus-liste li::before { content: "\4e"; position: absolute; left: 0; top: 1px; color: #c79e25; font-family: ETmodules; font-size: 17px; font-weight: 400; line-height: 1.6em; } /* Am Listenende kein Nachlauf: Listenpunkt (10 px) und Liste (18 px) addierten sich zum Modulrand – die Karten „Typische Coaching-Themen“ hatten oben 37, unten 57 px, die Themenblöcke auf Seminare unten fast doppelt so viel Luft wie oben. */ .primus-liste .et_pb_text_inner > ul:last-child { padding-bottom: 0; } .primus-liste .et_pb_text_inner > ul:last-child > li:last-child { padding-bottom: 0; } /* Jede Spalte eine eigene Listen-Karte (Coaching): unten derselbe Rand wie oben */ .et_pb_row:has(> .et_pb_column:first-child > .primus-liste) > .et_pb_column > .et_pb_text.primus-liste:last-child { padding-bottom: 35px !important; } /* Liste neben Text und Button in einer Zeile mit eigenem Innenabstand (Seminare): Den Rand liefert die Zeile, das Modul braucht keinen zusätzlichen. */ .et_pb_row:not(:has(> .et_pb_column:first-child > .primus-liste)) > .et_pb_column > .et_pb_text.primus-liste:last-child { padding-bottom: 0 !important; } /* Coaching-Beispiele: „Im Coaching“ als abgesetzter Block statt Aufklappbereich (Modulklasse primus-zitat) */ .primus-zitat { border-left: 3px solid #c79e25; } .primus-zitat .primus-zitat-label { color: #c79e25; font-weight: 900; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; line-height: 1.6em; padding-bottom: 6px; } /* Aufklappbereich: Inhalt hebt sich von der Titelzeile ab (Modulklasse primus-mehr; negative Ränder gleichen die 20 px Innenabstand des Toggles aus) */ .primus-mehr .et_pb_toggle_content { background-color: #eef4f9; margin: 20px -20px -20px; padding: 20px; } /* Über uns: Icon-Karten (Blurbs ohne Überschrift) – Icon linksbündig und näher am Text (Zeilenklasse primus-fakten) */ .primus-fakten .et_pb_main_blurb_image { text-align: left; margin-bottom: 14px; } /* Kontaktformular: Datenschutz-Checkbox auf hellem Grund sichtbar machen */ #kontaktformular .et_pb_contact_field_checkbox label i { border: 1px solid #9aa9b6; } /* Kontaktformular auf dem Handy einspaltig – halbe Felder schneiden sonst die Platzhalter ab */ @media (max-width: 767px) { #kontaktformular .et_pb_contact_field { width: 100% !important; flex-basis: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } } /* Kompetenzfelder (Zeilenklasse primus-kompetenz; Startseite, Über uns): auf dem Handy einspaltig statt 2 × 2, mit gleichmäßigen, knapperen Innenabständen statt der Werte aus dem Desktop-Kartenlayout. */ @media (max-width: 767px) { .primus-kompetenz > .et_pb_column { width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; margin-right: 0 !important; padding-top: 35px !important; padding-bottom: 35px !important; } /* Der Abstand liegt in den Kacheln – der Rand des Icon-Moduls kam sonst unten noch dazu (oben 35, unten 65 px). */ .primus-kompetenz > .et_pb_column > .et_pb_blurb { margin-bottom: 0 !important; } /* Die letzte Karte braucht unten Luft, sonst läuft der Text in den schrägen Abschnittstrenner. */ .primus-kompetenz > .et_pb_column:last-child { padding-bottom: 95px !important; } } /* =============================================================== 5. HANDY ALLGEMEIN (alle Seiten) =============================================================== */ /* Abschnitts-Überschriften (Großbuchstaben, weite Laufweite): Auf schmalen Geräten passte „KOMPETENZFELDER“ nicht in eine Zeile und brach nach dem E um. 22 px mit 2 px Laufweite passen bis hinunter zu rund 310 px Anzeigebreite. Trifft nur die Abschnitts-Überschriften – Divi setzt deren Text in ein . */ @media (max-width: 479px) { .et_pb_text h2 > span { font-size: 22px; letter-spacing: 2px; } } @media (max-width: 767px) { /* Divi rückt Zeilen auf dem Handy um je 10 % ein; im Kopfbereich kommen noch einmal 40 px Rand dazu. Dadurch brechen Zeilen nach vier, fünf Wörtern um. Etwas mehr Breite macht den Satz deutlich ruhiger. */ .et_pb_row, .et_pb_fullwidth_header .et_pb_fullwidth_header_container { width: 90% !important; } .et_pb_fullwidth_header .et_pb_fullwidth_header_container.center .header-content, .et_pb_fullwidth_header .header-content { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* Fließtext linksbündig: zentrierte Absätze über sechs, sieben Zeilen wirken auf schmalen Schirmen unruhig. */ .et_pb_text p, .et_pb_promo_description p { text-align: left !important; } /* Auch Überschriften und Icon-Karten linksbündig, damit im Abschnitt alles an derselben Kante beginnt. Der Kopfbereich über dem Bild bleibt zentriert. */ .et_pb_text h1, .et_pb_text h2, .et_pb_text h3, .et_pb_text h4, .et_pb_text h5, .et_pb_text h6, .et_pb_blurb, .et_pb_blurb .et_pb_module_header, .et_pb_blurb .et_pb_blurb_description, .et_pb_blurb .et_pb_main_blurb_image { text-align: left !important; } /* Schlagwort-Pillen behalten ihre Ausrichtung */ .primus-tags { text-align: inherit !important; } /* Buttons über die volle Breite – sonst stehen sie unterschiedlich breit untereinander und die Kante franst aus. Divi setzt die seitlichen Ränder je Modul mit !important – daher die höhere Spezifität. */ body #page-container .et_pb_button_module_wrapper { display: block !important; margin-left: 0 !important; margin-right: 0 !important; } .et_pb_button { display: block; text-align: center; margin-left: 0 !important; margin-right: 0 !important; } /* Buttons im Kopfbereich: Divi begrenzt sie dort auf die Textbreite (max-width: max-content) – deshalb hier ausdrücklich aufheben. */ body .et_pb_fullwidth_header .et_pb_fullwidth_header_container .header-content a.et_pb_button { display: block; width: 100%; max-width: none; box-sizing: border-box; } /* Seitentitel im Kopfbereich: Lange Komposita wie „Veränderungssituationen“ liefen über den Rand hinaus. Kleiner plus automatische Silbentrennung. */ .et_pb_fullwidth_header h1, .et_pb_fullwidth_header .et_pb_module_header { font-size: 28px !important; hyphens: auto; } /* Einleitungstext im Kopfbereich: 20 px mit 36 px Zeilenabstand füllen auf dem Handy den halben Bildschirm – kleiner und enger gesetzt. */ .et_pb_fullwidth_header .et_pb_header_content_wrapper { font-size: 17px !important; line-height: 1.7em !important; } /* Nur der erste Absatz bleibt stehen. Betrifft Seminare und Fachbeiträge – deren zweiter Absatz wird im Abschnitt direkt darunter ohnehin ausgeführt. */ .et_pb_fullwidth_header .et_pb_header_content_wrapper p + p { display: none; } /* Unterer Abstand des Kopfbereichs: 150 px aus dem Desktop-Layout sind zu viel; mit schräger Unterkante (100 px hoch) braucht der Inhalt dagegen 100 px, sonst klebt der Button an der Schräge. Der Abstand sitzt am Modul, nicht am Abschnitt – sonst entstünde unter dem Bild ein weißer Streifen. */ .et_pb_fullwidth_header { padding-bottom: 60px !important; } .et_pb_section.et_pb_bottom_divider .et_pb_fullwidth_header { padding-bottom: 100px !important; } /* Listen aus Icon-Einträgen, die auf mehrere Spalten verteilt sind („Für wen wir arbeiten“): Beim Stapeln kam zwischen den Spalten ein größerer Abstand hinzu als zwischen den Einträgen. Jetzt überall gleich. Trifft nur Zeilen, in denen eine Spalte mehrere Einträge untereinander hat. */ .et_pb_row:has(> .et_pb_column > .et_pb_blurb + .et_pb_blurb) > .et_pb_column { margin-bottom: 0 !important; } /* Startseite, Abschnitt Leistungen: Auf dem Handy endet er mit dem blauen Deeskalation-Block – die schräge Kante darunter wirkte dort wie ein übriggebliebener Keil. Also weg damit, und der Block schließt bündig ab. */ .et_pb_section:has(.primus-leistungen) > .et_pb_bottom_inside_divider { display: none !important; } } /* =============================================================== 6. ABSTANDSSYSTEM („vertikaler Rhythmus“) Ein Satz Abstände statt der historisch je Modul im Builder gesetzten Werte (30/40/50/54/60/70/120/144 px …). Die Regeln greifen über den Aufbau (Überschrift → Text, Text → Button, Zeile → Zeile, Abschnitt → Abschnitt), nicht über Divis durchnummerierte Klassen. Geltung: Startseite auf allen Breiten (6.2), Unterseiten auf dem Handy (6.3) – beide Hälften bei Änderungen zusammen pflegen. !important nur dort, wo Divi Zeilen- und Modulabstände selbst mit !important ausgibt. =============================================================== */ /* 6.1 Variablen ------------------------------------------------- */ body { --sp-kicker: 10px; /* Dachzeile → Überschrift, Titel → Unterzeile (Divi-Standard) */ --sp-head: 20px; /* Überschrift → zugehöriger Text */ --sp-cta: 30px; /* Text → Button */ --sp-group: 48px; /* Inhaltsgruppe → nächste Gruppe im selben Abschnitt */ --sp-section: 88px; /* Abschnittsrand ↔ Inhalt */ --sp-section-xl: 120px; /* Schluss-Abschnitt mit Bild vor dem Footer */ --sp-box: 64px; /* Innenabstand der farbigen Kacheln */ --sp-divider: 50px; /* halbe Höhe der schrägen Trenner: gemessen wird ab ihrer Mitte */ --sp-divider-near: 50px; /* dasselbe für die Schräge des vorigen Abschnitts */ } @media (max-width: 980px) { body { --sp-group: 44px; --sp-section: 72px; --sp-section-xl: 96px; --sp-box: 56px; } } @media (max-width: 767px) { body { --sp-group: 40px; --sp-section: 56px; --sp-section-xl: 72px; --sp-box: 40px; /* Auf dem Handy läuft der Text über die volle Breite bis an die tiefste Stelle der Schräge darüber – daher ab dort gemessen. */ --sp-divider-near: 0px; } } /* 6.2 Startseite – alle Breiten ---------------------------------- */ /* Abschnitte (Kopfbereich mit Bild ausgenommen) */ .home #main-content .et_pb_section:not(.et_section_specialty) { padding-top: var(--sp-section); padding-bottom: var(--sp-section); } .home #main-content .et_pb_section.et_pb_top_divider:not(.et_section_specialty) { padding-top: calc(var(--sp-section) + var(--sp-divider)); } .home #main-content .et_pb_section.et_pb_bottom_divider:not(.et_section_specialty) { padding-bottom: calc(var(--sp-section) + var(--sp-divider)); } /* Die Schräge des vorigen bzw. nächsten Abschnitts liegt schon im Nachbarn */ .home #main-content .et_pb_section.et_pb_bottom_divider + .et_pb_section { padding-top: calc(var(--sp-section) - var(--sp-divider-near)); } .home #main-content .et_pb_section:has(+ .et_pb_section.et_pb_top_divider) { padding-bottom: calc(var(--sp-section) - var(--sp-divider-near)); } /* Schluss-Abschnitt (Kontakt-Aufruf mit Hintergrundbild) */ .home #main-content .et_pb_section.et_pb_bottom_divider + .et_pb_section:last-child { padding-top: calc(var(--sp-section-xl) - var(--sp-divider-near)); padding-bottom: var(--sp-section-xl); } /* Abschnitte, die mit farbigen Kacheln enden bzw. aus ihnen bestehen: Der Abstand liegt dann in den Kacheln, nicht im Abschnitt. */ .home #main-content .et_pb_section:has(> .et_pb_row.primus-kompetenz), .home #main-content .et_pb_section:has(> .et_pb_row.primus-leistungen) { padding-bottom: 0; } .home #main-content .et_pb_section:has(> .et_pb_row.primus-leistungen:first-child) { padding-top: 0; } /* Einleitung direkt über den Leistungs-Kacheln gehört zu ihnen: Gruppenabstand */ .home #main-content .et_pb_section:has(+ .et_pb_section > .et_pb_row.primus-leistungen:first-child) { padding-bottom: var(--sp-group); } .home #main-content :is(.primus-kompetenz, .primus-leistungen) > .et_pb_column { padding-top: var(--sp-box) !important; padding-bottom: calc(var(--sp-box) + var(--sp-divider)) !important; } /* Zeilen: Innenabstände aus dem Builder aufheben, Abstand zwischen Zeilen einheitlich */ .home #main-content .et_pb_section:not(.et_section_specialty) > .et_pb_row { padding-top: 0 !important; padding-bottom: 0 !important; } .home #main-content .et_pb_section:not(.et_section_specialty) > .et_pb_row + .et_pb_row { padding-top: var(--sp-group) !important; } /* Neue Zwischenüberschrift im selben Abschnitt (z. B. „Referenzen“) – eigenes Thema, daher Abschnittsabstand statt Gruppenabstand. */ .home #main-content .et_pb_section > .et_pb_row + .et_pb_row:has(> .et_pb_column:first-child > .et_pb_text:first-child > .et_pb_text_inner > h2:first-child + h6) { padding-top: var(--sp-section) !important; } /* Module: Außenabstände aus dem Builder aufheben … */ .home #main-content .et_pb_section:not(.et_section_specialty) .et_pb_column > .et_pb_text, .home #main-content .et_pb_section:not(.et_section_specialty) .et_pb_column > .et_pb_button_module_wrapper, .home #main-content .primus-kompetenz .et_pb_blurb { margin-top: 0 !important; margin-bottom: 0 !important; } /* … und nach Beziehung neu setzen. Überschriften tragen unten 10 px (Divi). */ /* Überschrift → Text, im selben Modul */ .home #main-content .et_pb_text_inner > :is(h1, h2, h3, h4, h5, h6):has(+ p) { padding-bottom: var(--sp-head); } /* Überschrift → Text, in getrennten Modulen */ .home #main-content .et_pb_text:has(> .et_pb_text_inner > :is(h1, h2, h3, h4, h5, h6):last-child) + .et_pb_text:has(> .et_pb_text_inner > p:first-child) { margin-top: calc(var(--sp-head) - var(--sp-kicker)) !important; } /* Überschrift → Bildergalerie, Bewertungen: eigene Inhaltsgruppe. „~“ statt „+“, weil die Referenzen je Gerät eine eigene Galerie haben, von denen nur eine sichtbar ist. */ .home #main-content .et_pb_text:has(> .et_pb_text_inner > :is(h1, h2, h3, h4, h5, h6):last-child) ~ .et_pb_text:not(:has(> .et_pb_text_inner > :is(p, h1, h2, h3, h4, h5, h6):first-child)) { margin-top: calc(var(--sp-group) - var(--sp-kicker)) !important; } /* Dachzeile → Überschrift, in getrennten Modulen */ .home #main-content .et_pb_text:has(> .et_pb_text_inner > :is(h2, h6):only-child) + .et_pb_text:has(> .et_pb_text_inner > :is(h1, h2):first-child) { margin-top: 0 !important; } /* Text → Button */ .home #main-content .et_pb_section:not(.et_section_specialty) .et_pb_text + .et_pb_button_module_wrapper, .home #main-content .et_pb_promo .et_pb_button_wrapper { margin-top: var(--sp-cta) !important; } .home #main-content .et_pb_promo_description { padding-bottom: 0; } /* Kopfbereich: nur die Textabstände, Bild und Bildausschnitt bleiben unberührt. Dachzeile → Titel eng, Titel → Text wie überall. */ .home #main-content .et_section_specialty .et_pb_text:has(> .et_pb_text_inner > h2:only-child), .home #main-content .et_section_specialty .et_pb_text:has(> .et_pb_text_inner > h1:only-child) { margin-bottom: 0 !important; } /* Am Desktop bestimmt der Text die Höhe des Kopfbereichs und damit den Bildausschnitt. Die engeren Textabstände oben sparen 30 px – die kommen hier als Innenabstand dazu, damit das Bild exakt so groß bleibt wie bisher. */ @media (min-width: 981px) { .home #main-content .et_section_specialty .et_pb_row_inner { padding-top: calc(5.82% + 15px) !important; padding-bottom: calc(5.82% + 15px) !important; } } /* Liste „Für wen wir arbeiten“: letzter Eintrag ohne Nachlauf */ .home #main-content .et_pb_column > .et_pb_blurb:last-child { margin-bottom: 0 !important; } @media (max-width: 980px) { /* Gestapelte Listenspalten laufen als eine Liste weiter */ .home #main-content .et_pb_column:not(:last-child) > .et_pb_blurb:last-child:not(:only-child) { margin-bottom: 18px !important; } .home #main-content .et_pb_row:has(> .et_pb_column > .et_pb_blurb + .et_pb_blurb) > .et_pb_column { margin-bottom: 0 !important; } /* Gestapelte Kacheln: Abstand zur Schräge nur unter der letzten */ .home #main-content .primus-leistungen > .et_pb_column:not(:last-child) { padding-bottom: var(--sp-box) !important; } } @media (min-width: 768px) and (max-width: 980px) { /* Kompetenzfelder 2 × 2: nur die untere Reihe braucht Platz zur Schräge */ .home #main-content .primus-kompetenz > .et_pb_column:nth-last-child(n+3) { padding-bottom: var(--sp-box) !important; } } @media (max-width: 767px) { /* Hero-Buttons stehen hier untereinander; Divis Außenabstände fallen dabei zusammen und der Abstand zum Text schrumpfte auf 20 px. */ .home #main-content .et_section_specialty .et_pb_text + .et_pb_button_module_wrapper { margin-top: var(--sp-cta) !important; } .home #main-content .primus-kompetenz > .et_pb_column:not(:last-child) { padding-bottom: var(--sp-box) !important; } /* Leistungen: Die Schräge ist auf dem Handy ausgeblendet (siehe 5.). */ .home #main-content .primus-leistungen > .et_pb_column:last-child { padding-bottom: var(--sp-box) !important; } .home #main-content .et_pb_section:has(> .et_pb_row.primus-leistungen) + .et_pb_section { padding-top: var(--sp-section); } } /* 6.3 Unterseiten – Handy --------------------------------------- Dieselben Abschnittsabstände wie auf der Startseite. Kopfbereiche (Bild mit Titel) haben eigene Regeln (5.) und bleiben ausgenommen. Die Abstände zwischen Zeilen innerhalb eines Abschnitts bleiben, wie sie sind. */ @media (max-width: 767px) { body:not(.home) #main-content .et_pb_section:not(.et_section_specialty):not(:has(> .et_pb_fullwidth_header)) { padding-top: var(--sp-section); padding-bottom: var(--sp-section); } body:not(.home) #main-content .et_pb_section.et_pb_top_divider:not(:has(> .et_pb_fullwidth_header)) { padding-top: calc(var(--sp-section) + var(--sp-divider)); } body:not(.home) #main-content .et_pb_section.et_pb_bottom_divider:not(:has(> .et_pb_fullwidth_header)) { padding-bottom: calc(var(--sp-section) + var(--sp-divider)); } body:not(.home) #main-content .et_pb_section.et_pb_bottom_divider + .et_pb_section:last-child { padding-top: var(--sp-section-xl); padding-bottom: var(--sp-section-xl); } /* Endet der Abschnitt mit farbigen Kacheln, liegt der Abstand in den Kacheln */ body:not(.home) #main-content .et_pb_section:has(> .et_pb_row.primus-kompetenz) { padding-bottom: 0; } /* Erste und letzte Zeile: kein zusätzlicher Innenabstand zum Abschnittsrand. Ausgenommen sind Zeilen mit eigener Hintergrundfarbe – dort ist der Innenabstand der Rand des Kastens. Das sind die blauen Deeskalation-Kästen; sie haben keine eigene Klasse und werden an ihrem Button zu primus-deeskalation.de erkannt. */ body:not(.home) #main-content .et_pb_section:not(.et_section_specialty) > .et_pb_row:not(.et_pb_row ~ .et_pb_row):not(:has(a[href*="primus-deeskalation.de"])) { padding-top: 0 !important; } body:not(.home) #main-content .et_pb_section:not(.et_section_specialty) > .et_pb_row:not(:has(~ .et_pb_row)):not(:has(a[href*="primus-deeskalation.de"])) { padding-bottom: 0 !important; } /* … ebenso die Außenabstände des ersten und letzten Moduls – nur in einspaltigen Zeilen. In Karten-Spalten (z. B. Coaching „Beispiele“) ist der Modulabstand der Innenrand der Karte. */ body:not(.home) #main-content .et_pb_section:not(.et_section_specialty) > .et_pb_row:not(.et_pb_row ~ .et_pb_row) > .et_pb_column_4_4:first-child > :first-child { margin-top: 0 !important; } body:not(.home) #main-content .et_pb_section:not(.et_section_specialty) > .et_pb_row:not(:has(~ .et_pb_row)) > .et_pb_column_4_4:last-child > :last-child { margin-bottom: 0 !important; } } /* 6.4 Alle Seiten – Handy ---------------------------------------- */ @media (max-width: 767px) { /* Folgt ein Abschnitt mit eigenem oberen Trenner direkt auf eine Schräge, ist sein Trenner unsichtbar (er hat die Farbe des Abschnitts selbst, z. B. Über uns → „Fachliche Leitung“, Coaching → „Beispiele“). Maßgeblich ist dann nur die Schräge davor – kein zusätzlicher Platz für den eigenen Trenner. */ #main-content .et_pb_section.et_pb_bottom_divider + .et_pb_section.et_pb_top_divider { padding-top: calc(var(--sp-section) - var(--sp-divider-near)) !important; } /* Hero mit Bild und Text im Abschnitt (Startseite, Über uns) -------------------- */ /* Unten Platz zur Schräge wie überall */ #main-content .et_section_specialty.et_pb_bottom_divider { padding-bottom: calc(var(--sp-section) + var(--sp-divider)); } /* Bild randlos über die volle Breite und etwas flacher, Text direkt darunter – so rückt der Titel auf dem Handy deutlich nach oben. Der im Builder gewählte Bildausschnitt bleibt. */ #main-content .et_section_specialty > .et_pb_row { width: 100% !important; max-width: none !important; } #main-content .et_section_specialty > .et_pb_row > .et_pb_column:first-child { margin-bottom: 0 !important; } /* Die Bildhöhe kommt von einem unsichtbaren Platzhalter in der Bildspalte */ #main-content .et_section_specialty > .et_pb_row > .et_pb_column:first-child > .et_pb_divider_hidden { height: 66vw !important; } /* Startseite: Bild 30 px höher im Ausschnitt (Köpfe näher an die Oberkante). Am Desktop gilt weiter die Einstellung aus dem Builder. */ .home #main-content .et_section_specialty > .et_pb_row > .et_pb_column:first-child { background-position: 50% -30px !important; } /* Textblock: an derselben Kante wie in den übrigen Abschnitten (Zeilen 90 % breit); unten ohne die 30 px Zeilenabstand aus dem Desktop-Layout. */ #main-content .et_section_specialty .et_pb_row_inner { padding-top: 32px !important; padding-bottom: 0 !important; padding-left: 5% !important; padding-right: 5% !important; } /* Unter dem Text stand noch ein unsichtbares Abstandsmodul (50 px) samt 20 px Modulabstand */ #main-content .et_section_specialty .et_pb_column_inner > .et_pb_divider_hidden:last-child { display: none; } #main-content .et_section_specialty .et_pb_column_inner > :has(+ .et_pb_divider_hidden:last-child) { margin-bottom: 0 !important; } #main-content .et_section_specialty .et_pb_column_inner > .et_pb_text:first-child { margin-top: 0 !important; } /* Titel kleiner: auf der Startseite vier statt fünf Zeilen */ #main-content .et_section_specialty .et_pb_text_inner h1 { font-size: 30px !important; } /* Dachzeile → Titel eng, Titel → Text wie überall */ #main-content .et_section_specialty .et_pb_text:has(> .et_pb_text_inner > h2:only-child) { margin-bottom: 0 !important; } #main-content .et_section_specialty .et_pb_text:has(> .et_pb_text_inner > h2:only-child) + .et_pb_text:has(> .et_pb_text_inner > h1:first-child) { margin-top: 0 !important; margin-bottom: 0 !important; } #main-content .et_section_specialty .et_pb_text:has(> .et_pb_text_inner > h1:first-child) + .et_pb_text { margin-top: calc(var(--sp-head) - var(--sp-kicker)) !important; } /* Gestapelte Spalten ------------------------------------------------------------ */ /* Zeilen, die im Builder als Flex-Zeile angelegt sind (gleich hohe Karten, z. B. Fachbeiträge „Thematische Schwerpunkte“): Divi hebt das auf dem Handy nicht auf, die Spalten quetschten sich nebeneinander und liefen über den Rand. */ #main-content .et_pb_row { flex-wrap: wrap; } /* Spalten, die nur aus einer Textkarte bestehen (Fachbeiträge „Thematische Schwerpunkte“): Der Abstand kommt von der Spalte (30 px). Der untere Rand der Karte kam noch dazu – je nach Zeile standen die Karten mal 30, mal 60 px auseinander. Spalten mit mehreren Modulen (dort ist die Spalte selbst die Karte) bleiben unberührt. */ #main-content .et_pb_row > .et_pb_column:not(:last-child) > .et_pb_text:only-child { margin-bottom: 0 !important; } } /* =============================================================== 7. SCHRÄGE TRENNER (alle Seiten) Die Abschnitte enden oft auf Bruchteilen eines Pixels; in dieser Pixelzeile schien der obere Hintergrund als feine helle Linie durch. Der Trenner ragt deshalb 1 px in den Nachbarabschnitt – dort in dessen eigener Farbe. =============================================================== */ #page-container .et_pb_section > .et_pb_bottom_inside_divider { bottom: -1px; } #page-container .et_pb_section > .et_pb_top_inside_divider { top: -1px; } /* =============================================================== 8. SEITENBEZOGEN: SEMINARKATALOG (Seite 13, Theme-Builder-Vorlage „Seminarkatalog“) Kompakter Hero: Divi gibt dem Inhaltsblock des Kopfbereichs pauschal 20 px Außen- und 10 px Innenabstand oben und unten und einen leeren Button-Container – das ist im Builder nicht einstellbar. Die übrigen Abstände stehen in der Vorlage (oben 36, unten 110 px). =============================================================== */ .page-id-13 #main-content .et_pb_fullwidth_header .header-content { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } /* Divi setzt den Button-Container auch ohne Button – samt Abstand davor */ .page-id-13 #main-content .et_pb_fullwidth_header .et_pb_header_button_wrapper:empty { display: none; } /* Die Unterzeile im Hero passt am Desktop auf eine Zeile, wenn der Textblock die volle Zeilenbreite nutzen darf (Divi: 80 %). */ @media (min-width: 981px) { .page-id-13 #main-content .et_pb_fullwidth_header .header-content { width: 100%; max-width: none; margin-left: 0; margin-right: 0; } }