/* ========================================================================== Mitarbeiter-Modul (Grid- und Einzel-Ansicht) Nutzt die globalen Design Tokens aus style.css (Farben, Radius, Motion etc.) ========================================================================== */ /* Im Builder wurde für eine Modul-Instanz ein individuelles Padding gesetzt (Divi generiert dafür eine eigene, nummerierte Regel wie ".et_pb_mitarbeiter_einzeln_0_tb_body"). Hier über die gemeinsame Klasse ("projekt-mitarbeiter", im Builder vergeben) auf 0 zurückgesetzt, statt den Builder-Inhalt direkt zu bearbeiten. */ .projekt-mitarbeiter { padding: 0 !important; } /* Zusätzlich sitzt an der umgebenden ZEILE selbst noch ein Padding (geteilt mit mehreren anderen Zeilen im Template, daher hier nicht global entfernt, sondern nur für die Zeile mit dem Mitarbeiter-Modul). Divis eigene, pro Zeile generierte Regel dafür hat hohe Spezifität (1 ID + 4 Klassen, siehe die Header/Footer-Breiten-Regel in style.css als Vorbild) — hier bewusst mit MEHR Klassen (".et_pb_row" doppelt zählt zweimal), um sie sicher zu schlagen. */ .et-db #et-boc .et-l .et_pb_row.et_pb_row:has(.projekt-mitarbeiter) { padding: 0 !important; } .mitarbeiter-item { display: flex; flex-direction: column; align-items: center; text-align: center; background: transparent; /* Schatten um die gesamte Karte (Foto + Text zusammen), nicht nur ums Foto oder nur beim Hovern — gleicher Wert wie der Ruhezustand der Projekt-/Referenzen-Karten (".projekt-grid .et_pb_portfolio_image" in projekt-grid.css, "--shadow-soft"), vertieft sich beim Hovern zusätzlich zu "--shadow-hover", genau wie dort. */ box-shadow: var(--shadow-soft); transition: transform 0.25s ease, box-shadow 0.25s ease; /* Breite füllt die jeweilige Grid-Spalte (siehe ".et_pb_row:has(.mitarbeiter-item)" — die eigentliche Breitenbegrenzung/-verteilung übernimmt seit der Umstellung auf CSS Grid "grid-template-columns" dort einheitlich für alle Zeilen einer Section; "max-width" hier nur noch als Sicherheitsnetz, falls die Karte je außerhalb eines Grid-Kontexts landet. */ width: 100%; max-width: 415px; /* Verhindert, dass die Karte unter die feste Bildgröße (280px + 2x32px Padding = 344px) schrumpft und das Bild dadurch über den Kartenrand hinausläuft — stattdessen bricht die Zeile (siehe "flex-wrap:wrap" unten) rechtzeitig um, bevor es eng wird. Bild-/Kartengröße bewusst größer als zuvor (war 225px/285px), damit auch lange E-Mail-Adressen (z. B. "u.tausendfreund@sallier.de", ca. 267px inkl. Icon) auf einer Zeile Platz finden statt umzubrechen. */ min-width: 345px; } /* Gleicher Anhebe-Effekt wie bei den Projekt-/Referenzen-Grid-Karten (siehe ".projekt-grid .et_pb_portfolio_item:hover .et_pb_portfolio_image" in projekt-grid.css). */ .mitarbeiter-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } /* Divi setzt auf der Zeile "flex-wrap:nowrap" (nur ab dem Phone-Breakpoint per eigener Einstellung "wrap") — dazwischen (Tablet/schmaler Desktop) blieb die Zeile einzeilig und die Spalten wurden unter die Bildbreite gequetscht, statt umzubrechen. Hier grundsätzlich erlaubt; der Browser bricht dann automatisch um, sobald der Platz für 3 Spalten nicht mehr reicht. Zusätzlich darf die Spalte selbst unter ihre Inhaltsbreite schrumpfen (Flexbox- Standard "min-width:auto" verhinderte das sonst zusätzlich). */ /* Überschrift (z. B. "Geschäftsführung") und die Kartenreihe darunter liegen als zwei separate Zeilen in derselben Section — Divis Standard-"row-gap" dafür ist 60px, doppelt so groß wie der sonst etablierte 30px-Abstand zwischen Überschrift und Inhalt (siehe Projekt-Template). Auf ".et_pb_section" statt der Zeile selbst, gleiche Technik wie bei ".vakanzen-liste-zeilen" in vakanzen-liste.css. */ .et_pb_section:has(.mitarbeiter-item) { row-gap: 30px !important; } /* Jede Abteilung (Überschrift + Kartenreihe) liegt als eigene, vollständige Section im Builder — zwischen zwei aufeinanderfolgenden Abteilungen addiert sich dadurch das globale Section-Padding ("--space-16", siehe ".et_pb_section" in style.css) doppelt (unten der einen + oben der nächsten), was zwischen zwei Abteilungen unnötig groß wirkt. Nur das obere Padding der JEWEILS ZWEITEN Section wird hier auf 0 gesetzt — das untere Padding der ersten Section bleibt, sodass zwischen zwei Abteilungen genau EIN normales Section-Padding als Abstand übrig bleibt statt zwei. ("verschachteltes ':has()' in ':has()' ist laut Spezifikation ungültig — ein Selektor wie ':has(.mitarbeiter-item):has(+ .et_pb_section:has(...))' würde deshalb die gesamte Regel ungültig machen und komplett ignoriert werden; hier daher bewusst nur eine Seite über den validen Geschwister-Kombinator "+" gesteuert.) Die äußeren Ränder zur vorherigen/nächsten, artfremden Section (z. B. Hero, Footer) behalten bewusst das normale Site-Padding. */ .et_pb_section:has(.mitarbeiter-item) + .et_pb_section:has(.mitarbeiter-item) { padding-top: 0 !important; } /* "display:grid" statt Flexbox: Bei "flex-wrap:wrap" berechnet der Browser jede umgebrochene Zeile UNABHÄNGIG voneinander — eine Zeile mit weniger Karten (z. B. 3 statt 4) hat dadurch weniger zu verteilenden Gesamt-"Schrumpfbedarf" und ihre Karten blieben breiter als in einer volleren Zeile (live nachgemessen: 356px bei 3 Karten/Zeile vs. 336px bei 4 Karten/Zeile, obwohl "flex-grow:0" gesetzt war — das Problem lag am zeilenweise unabhängigen "flex-shrink", nicht am "flex-grow"). CSS Grid legt die Spaltenbreiten dagegen für die GESAMTE Section einheitlich fest, unabhängig davon, wie viele Karten in welcher Zeile landen. ":not(.projekt-fakten)": ".et_pb_row:has(...)" prüft NACHFAHREN in jeder Tiefe — auf Projektseiten enthält dadurch auch die ÄUSSERE, zweispaltige Zeile ("projekt-fakten", Fakten- Tabelle + Ansprechpartner-Spalte nebeneinander) irgendwo tief verschachtelt eine Mitarbeiter- Karte und erfüllte damit ebenfalls diese eigentlich fürs Team-Grid gedachte Regel — die ganze Zeile wurde dadurch selbst zu einem Grid mit "auto-fill"-Spalten (345–415px), wodurch die Fakten-Tabelle in eine viel zu schmale Spalte gequetscht wurde (Wörter brachen mitten im Wort um) und rechts unbenutzter Leerraum entstand (vom Nutzer per Screenshot gemeldet). Die eigentlich gemeinte Zeile (mehrere Karten nebeneinander im Team-Grid ODER die einzelne "projekt-kontakt"-Zeile auf der Projektseite) trägt diese Klasse nie, daher hier gefahrlos ausgeschlossen — gleiche Technik wie bei der ".et_pb_module"-Regel weiter unten. */ .et_pb_row:has(.mitarbeiter-item):not(.projekt-fakten) { display: grid !important; /* Jede Spalte zwischen 285px (Mindestbreite, siehe ".mitarbeiter-item" weiter unten) und 356px (Höchstbreite) — der Browser packt so viele Spalten pro Zeile, wie bei aktueller Fensterbreite hineinpassen, automatisch 1/2/3+. */ grid-template-columns: repeat(auto-fill, minmax(345px, 415px)); /* Verhindert, dass Grid die letzte, nicht volle Zeile trotzdem auf die volle Breite aufzieht — Spalten bleiben bei ihrer in "minmax()" definierten Breite, überschüssiger Platz bleibt als Leerraum rechts, statt die vorhandenen Karten zu strecken. */ justify-content: start; /* "justify-content" allein zentriert nur die GRUPPE aller Spalten-Tracks als Ganzes, nicht die Karte INNERHALB ihres eigenen Tracks — bei nur einer Spalte pro Zeile (Handy-Breite) kann der Track bis zu 415px breit werden (siehe "minmax()" oben), während die Spalte selbst auf 356px gedeckelt ist (".et_pb_column:has(.mitarbeiter-item)" weiter unten); die verbleibenden ~59px blieben dadurch standardmäßig als Leerraum RECHTS neben der Karte statt die Karte zu zentrieren (vom Nutzer auf der Team-Seite gemeldet). "justify-items:center" zentriert jede Spalte innerhalb ihres eigenen Tracks. */ justify-items: center; /* Divis Standard-Abstand ist prozentual (--horizontal-gap-parent: 5.5%) und dadurch je nach Zeilenbreite/Spaltenanzahl unterschiedlich groß — hier auf einen festen Wert gesetzt, damit der Abstand zwischen den Karten in jedem Layout (1/2/3-spaltig) gleich bleibt. */ gap: var(--space-8) !important; /* Divi stretcht Spalten nur, wenn im Builder "Equalize Column Heights" aktiviert ist (Klasse "et_pb_equal_columns") — hier stattdessen immer erzwungen, damit Karten mit unterschiedlich vielen ausgefüllten Feldern (Telefon/Position fehlt bei manchen Mitarbeitern) trotzdem alle gleich hoch sind wie die höchste Karte in der jeweiligen Grid-Zeile. */ align-items: stretch; } /* Spaltenbreite nicht mehr über hartcodierte Breakpoints/Prozentwerte gesteuert, sondern über "flex-basis" + "min-width" (335px, passend zur festen Bildgröße) — der Browser bestimmt so selbst, wie viele Karten pro Zeile passen: automatisch 3 auf breitem Desktop, 2 auf Tablet, 1 auf Mobile, ohne dass wir für jede Zwischenbreite eine eigene Regel pflegen müssen. Löst auch das Problem, dass eine im Builder z.B. 6-spaltig angelegte Zeile trotzdem korrekt auf 3/2/1 Karten pro Zeile umbricht, unabhängig von Divis eigener (evtl. 1/6-)Breitenklasse. */ .et_pb_column:has(.mitarbeiter-item) { flex: 1 1 390px; min-width: 390px; /* Gleich der maximalen Kartenbreite (siehe ".mitarbeiter-item") — sonst wächst die Spalte per "flex-grow" bei wenigen Karten in einer breiten Zeile viel weiter als die Karte selbst, wodurch der Leerraum in der Spalte wie ein übergroßer Abstand zur nächsten Karte aussieht. */ max-width: 415px; display: flex; } /* Divi verschachtelt zwischen Spalte und Karte mehrere reine Wrapper-Divs (Modul-Wrapper, ".et_pb_module_inner", ".et_pb_mitarbeiter_module") ohne eigene Breitenberechnung — anders als bei der Zeile selbst (siehe frühere Erfahrung) ist "display:contents" hier unbedenklich, da diese Divs nur strukturell sind. So kann die von der Spalte gestreckte Höhe bis zur Karte durchgereicht werden. Bewusst über ".et_pb_row:has(...)" (nicht ".et_pb_column:has(...)"): Auf Projektseiten liegt das Mitarbeiter-Modul inzwischen als eigene verschachtelte Zeile ("projekt-kontakt") neben weiteren Geschwister-Zeilen (Logo, Website-Button) in DERSELBEN Spalte (der gemeinsamen "Nachbar-Spalte" neben der Fakten-Tabelle) — mit ".et_pb_column:has(...)" traf die Regel auch deren Module mit und ließ z. B. den Website-Button komplett kollabieren (unsichtbar, da "display:contents" auf einem Link ohne Wrapper-Box). ":not(.projekt-fakten)": ".et_pb_row:has(...)" allein reichte nicht — "has()" prüft NACHFAHREN in jeder Tiefe, daher erfüllt auch die ÄUSSERE, alle Geschwister-Zeilen umschließende ".projekt-fakten"-Zeile dieselbe Bedingung (Mitarbeiter-Karte irgendwo darin verschachtelt) und die Regel leckte weiterhin in Logo-/Website-Zeile. Die äußere Zeile trägt zuverlässig die Klasse "projekt-fakten" (auf Projektseiten immer vorhanden) und wird hier deshalb explizit ausgeschlossen — nur die unmittelbar umschließende Zeile der Karte soll kollabieren. */ .et_pb_row:has(.mitarbeiter-item):not(.projekt-fakten) .et_pb_module, .et_pb_row:has(.mitarbeiter-item):not(.projekt-fakten) .et_pb_module_inner, .et_pb_row:has(.mitarbeiter-item):not(.projekt-fakten) .et_pb_mitarbeiter_module { display: contents; } /* In der einspaltigen Ansicht (Divis Phone-Breakpoint) soll die Karte weiterhin bei 415px gedeckelt bleiben (nicht mehr, wie in einem ersten Versuch, per "max-width:none" auf die volle Bildschirmbreite gestreckt) — mit "justify-items:center" (siehe ".et_pb_row:has(...)" oben) bleibt sie dadurch sauber zentriert mit gleichmäßigem Randabstand, statt kantig bis an den Bildschirmrand zu reichen. Die eigene "min-width" (390px, siehe ".et_pb_column:has(...)" bzw. "min-width:345px" auf ".mitarbeiter-item" weiter unten — beide fürs Mehrspalten-Layout auf dem Desktop gedacht) würde auf sehr schmalen Screens dagegen zu Überlauf führen bzw. verhinderte, dass die Karte innerhalb ihrer Grid-Spur (siehe "minmax(345px,415px)" oben) sauber schrumpfen und zentrieren kann — hier auf 0 zurückgesetzt, die Grid-Spur selbst behält ihre eigene 345px-Mindestbreite. */ @media screen and (max-width: 767px) { .et_pb_column:has(.mitarbeiter-item), .mitarbeiter-item { min-width: 0; /* "min-width:0" allein überließ die Breite der Spalte Grids eigener "fit-content"- Berechnung — die fiel unvorhersehbar knapp aus (schmaler als das 280px-Foto, live gemeldet: Karte wirkte "komisch", Foto lief über den Kartenrand hinaus). "width:100%" füllt die Spalte stattdessen immer exakt bis zur Breite ihrer Grid-Spur (345–415px, siehe "minmax()" oben) — eindeutig und ohne Restspielraum, der Zentrierung erst nötig macht. */ width: 100%; } /* Bei nur einer Spalte pro Zeile (Handy-Breite) lässt "justify-content:start" (siehe ".et_pb_row:has(.mitarbeiter-item)" oben, dort bewusst für den Mehrspalten-Fall auf dem Desktop gewählt) die einzelne Karte am linken Rand der Zeile hängen, sobald die Zeile breiter ist als die Karte selbst (max. 415px) — sichtbar als nicht zentrierte Karte mit Leerraum rechts (vom Nutzer auf der Team-Seite gemeldet). Nur für diese einspaltige Ansicht auf "center" umgestellt. */ .et_pb_row:has(.mitarbeiter-item) { justify-content: center; } } .mitarbeiter-picture { display: block; width: 280px; height: 280px; /* Unten reduziert (statt gleichmäßig "--space-8"): verkleinert gezielt den Abstand zur folgenden Überschrift, ohne den seitlichen Abstand (für die Breitenberechnung, siehe oben) oder den oberen Abstand zur Kartenkante zu verändern. */ padding: var(--space-8) var(--space-8) var(--space-2); box-sizing: content-box; float: none; margin: 0; /* War "flex-start" — dadurch saß das Bild trotz "align-items:center" am Modul (siehe ".mitarbeiter-item" oben) immer linksbündig statt mit dem restlichen Karteninhalt zentriert (beobachtet auf Team- UND Projektseite gleichermaßen). */ align-self: center; } .mitarbeiter-picture img { width: 100%; height: 100%; object-fit: cover; } .mitarbeiter-info { /* War "stretch" (volle Kartenbreite) mit 32px Seiten-Padding — der Text begann dadurch spürbar weiter links als das jetzt zentrierte, schmalere Bild darüber (siehe ".mitarbeiter-picture"). Jetzt exakt so breit wie das Bild und ebenfalls zentriert, sodass Bild und Textblock dieselbe linke Kante haben — der Text selbst bleibt innerhalb dieses Blocks weiterhin linksbündig ("text-align:left" unten), nur der Block als Ganzes ist zentriert statt die Karte komplett auszufüllen. */ align-self: center; width: 280px; /* Oben reduziert (statt gleichmäßig "--space-8"): siehe ".mitarbeiter-picture" oben — beide zusammen ergaben bislang 60px sichtbaren Abstand zwischen Bild und Überschrift. Seitlich kein Padding mehr nötig, die Breite entspricht bereits dem Bild. */ padding: var(--space-2) 0 var(--space-8); box-sizing: border-box; text-align: left; } .mitarbeiter-info .mitarbeiter-position { font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: 16px; line-height: 1.3; letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-primary); margin-bottom: 10px; min-height: calc(1.3em * 2); } .mitarbeiter-contact p { font-size: 18px; display: flex; align-items: center; gap: var(--space-2); } /* Icons (Telefon/E-Mail/vCard) global orange (siehe ".sallier-icon" in style.css, geteilt mit den Kontakt-/Social-Icons im Footer) — auf der Mitarbeiter-Karte stattdessen in Sallier-Blau, daher hier gezielt nur für den Kontaktblock überschrieben statt die globale Regel zu ändern. */ .mitarbeiter-contact .sallier-icon { color: var(--color-primary); } /* Reserviert Platz für maximal 3 Kontaktzeilen (Telefon + E-Mail + V-Card), selbst wenn eine Mitarbeiterin/ein Mitarbeiter keine Telefonnummer hinterlegt hat (dann fehlt die "

" komplett, siehe "sallier_icon()"-Aufrufe in mitarbeiter.php) — sonst wird bei so einer Karte der Kontaktblock um eine Zeile kürzer, wodurch die ganze Karte niedriger wird. Weil "align-items:stretch" (siehe ".et_pb_row:has(...)" oben) Karten nur INNERHALB derselben Grid-Zeile gleich hoch zieht, führte das dazu, dass eine komplette Zeile (wenn ALLE Karten darin ohne Telefonnummer sind) niedriger blieb als die übrigen Zeilen der Section — live nachgemessen: 511px statt 553px. Zwei Zeilen à 42px (Telefon/E-Mail) + eine Zeile à 24px (V-Card, ohne Zeilenumbruch-Risiko) ergeben den Wert unten. */ .mitarbeiter-contact { min-height: 108px; } /* "!important" + zusätzliche Klasse: die globale Body-Link-Regel (".et_pb_text a:not(.et_pb_button)", siehe style.css) unterstreicht Links standardmäßig und ist durch ":not()" spezifischer als ein einfaches ".mitarbeiter-contact a" — hier gezielt zurückgesetzt. */ .mitarbeiter-item .mitarbeiter-contact a { color: var(--color-text) !important; text-decoration: none !important; } .mitarbeiter-item .mitarbeiter-contact a:hover { color: var(--color-accent) !important; } /* ========================================================================== Team-Seite: Abteilungs-Überschriften ========================================================================== */ /* Die Klasse "abteilung-headline" landet im Divi-Builder auf dem äußeren Modul-Wrapper, nicht auf dem "h2" selbst — Vererbung reicht hier nicht, da Divis eigene "h1-h6"- und ".et_pb_module_header"-Regeln direkt am Element gesetzt werden und das schlägt Vererbung vom Elternelement immer, unabhängig von deren Spezifität. Daher gezielt aufs Kind-Element. */ .abteilung-headline .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: var(--color-primary) !important; } /* Wie ".eyebrow" (siehe style.css) — Klasse landet im Divi-Builder ebenfalls auf dem Modul-Wrapper, daher derselbe Selektor-Aufbau (Wrapper + Text-Container + Absatz). */ .abteilung-eyebrow, .abteilung-eyebrow .et_pb_text_inner, .abteilung-eyebrow .et_pb_text_inner p { margin: 0; font-family: var(--font-body); font-weight: var(--weight-light); font-size: 18px; letter-spacing: var(--tracking-wide); text-transform: none; color: var(--color-primary); } /* Divis Standard-Abstand zwischen gestapelten Modulen in der Spalte kommt hier per Flexbox "gap" (30px, siehe "--vertical-gap"/"--module-gutter"), nicht per "margin" — "margin" allein kann "gap" nicht ausgleichen. Bei ".mitarbeiter-name"/".mitarbeiter-position" sind laut Computed Styles BEIDE Margins effektiv 0 (kein Flex-Kontext dort), der sichtbare Abstand kommt rein aus der Zeilenhöhe. Hier exakt nachgebaut: kompletten Gap per negativem "margin-top" aufheben, sodass ebenfalls nur die Zeilenhöhe den Abstand bestimmt. */ .abteilung-headline + .abteilung-eyebrow { margin-top: -30px; }