/* ==========================================================================
   Projektseite (automatisch generierte Startseite einer Projekt-Subsite)
   Inhalt und Struktur kommen vollständig aus den ACF-Feldern des zugehörigen
   Projekt-Eintrags auf der Hauptseite. Ein einziges Farbfeld pro Projekt
   ("Farb-Highlights", siehe sallier_render_projektseite_design_css()) steuert über die
   CSS-Variable --ps-highlight gezielt: Button-Hintergrund und Footer-Hintergrund. Alle anderen
   Bereiche (Header-Hintergrund, Navigations-Menüpunkte, Modul-Überschriften, Body-Hintergrund,
   Fließtext, Link-Farbe) bleiben auf den festen Standardfarben — Navigation und
   Modul-Überschriften waren ursprünglich ebenfalls über "--ps-highlight" eingefärbt, wurde aber
   auf ausdrücklichen Wunsch wieder auf Navy zurückgenommen.
   ========================================================================== */

/* WICHTIG: alle Regeln in diesem Block sind bewusst auf "body.sallier-subsite" beschränkt
   (siehe Body-Klassen-Filter in projektseiten.php) und NICHT einfach global auf ".et-l--header"/
   "#et-main-area" gesetzt — diese Divi-eigenen IDs/Klassen existieren nämlich auch auf den
   ECHTEN Projektseiten der Hauptseite (gleiches Theme-Builder-Markup), die eine eigene,
   unabhängige Kopf-/Fußzeile haben und NICHT die hier per Fallback gesetzte Subsite-Standardfarbe
   bekommen sollen. Ohne diese Beschränkung würde z. B. der echte Hauptseiten-Header auf jeder
   normalen Projektseite ungewollt navy eingefärbt (so tatsächlich passiert und korrigiert).

   "#main-header"/"#main-footer" existieren in der aktuellen Header-/Footer-Ausgabe der Subsite
   nicht (mehr) — der Header läuft inzwischen über einen echten Divi-Theme-Builder-Header
   (".et-l--header", siehe projektseiten-provisioning.php), der Footer über footer.php
   (".subsite-footer"). Ältere, noch nicht auf den Theme-Builder-Header umgestellte Subsites
   nutzen weiterhin header.php (".subsite-header") — beide Fälle hier abgedeckt.
   Der Header-Hintergrund selbst hat KEIN eigenes Farbfeld (mehr) — nur der Footer wird über
   "--ps-highlight" eingefärbt (siehe subsite-header-footer.css), der Header bleibt bewusst auf
   der Standardfarbe. Farbe muss trotzdem auf ".et_pb_section" innerhalb des Headers gesetzt
   werden: Divis eigene Sektion hat selbst einen weißen Hintergrund
   (".et_pb_section{background-color:#fff}") und überdeckt sonst die hier gesetzte
   Standardfarbe vollständig — der Descendant-Selektor hier ist bereits spezifischer als Divis
   einfache Klassenregel, kein "!important" nötig. Absichtlich nur innerhalb ".et-l--header"
   (nicht global ".et_pb_section"), damit die normalen Inhalts-Sektionen der Seite (Grundrisse,
   Preisliste, ...) unberührt bleiben. */
body.sallier-subsite .et-l--header,
body.sallier-subsite .et-l--header .et_pb_section,
body.sallier-subsite .subsite-header {
	background-color: var(--color-surface);
}

/* Navigation bewusst NICHT (mehr) über "--ps-highlight" eingefärbt — anders als Button-Hintergrund
   und Footer bleibt die Menüfarbe fest auf #2B2A2D (wie die Modul-Überschriften), unabhängig vom
   projektspezifischen Farb-Highlight (auf ausdrücklichen Wunsch zurückgenommen, ursprünglich Teil
   derselben Variable wie in sallier_render_projektseite_design_css() beschrieben).
   "!important" nötig: Divi generiert pro Menü-Instanz eine eigene, spezifischere Inline-Regel
   (".et_pb_menu_0_tb_header.et_pb_menu ul li a{color:...}"), die sonst gewinnt. */
body.sallier-subsite .et-menu-nav a,
body.sallier-subsite .et_mobile_menu a {
	color: #2B2A2D !important;
}

/* Gleiches Prinzip wie beim Header oben: die einzelnen Projekt-Module (Hero, Galerie, ...)
   sitzen jeweils in einer eigenen ".et_pb_section" mit weißem Divi-Standard-Hintergrund, die
   sonst die hier gesetzte Body-Farbe überdeckt. */
body.sallier-subsite #et-main-area,
body.sallier-subsite #et-main-area .et_pb_section {
	background-color: var(--ps-body, var(--color-surface));
}

/* "color" auf "#et-main-area" allein reicht nicht: die globale Regel "p, span{color:...}"
   (siehe style.css) greift DIREKT auf jedem <p>/<span> und gewinnt dadurch gegen einen nur
   VERERBTEN Wert vom übergeordneten Container, unabhängig von dessen Spezifität (Vererbung ist
   immer die schwächste Quelle). Deshalb hier explizit auf denselben Elementen gesetzt.
   ":not(.et-l--footer *)" — der Theme-Builder-Footer liegt trotz eigener ".subsite-footer-section"
   ebenfalls innerhalb von "#et-main-area" (Divis Footer-Override ersetzt nur die Ausgabe von
   footer.php, nicht dessen umgebende Wrapper-Struktur). Ohne diese Ausnahme würde die hier
   gesetzte Standard-Textfarbe die im Footer frei im Builder gewählte Textfarbe (siehe
   subsite-header-footer.css) unsichtbar überschreiben, da diese Regel dank "#et-main-area" mehr
   Spezifität hat als jede footer-eigene Klassen-Regel. */
body.sallier-subsite #et-main-area,
body.sallier-subsite #et-main-area p:not(.et-l--footer *),
body.sallier-subsite #et-main-area span:not(.et-l--footer *) {
	color: var(--ps-schrift, var(--color-text));
}

.projektseite {
	max-width: 1440px;
	margin: 0 auto;
	padding: var(--space-6) var(--space-8);
}

/* "!important" auf allen Höhen-Angaben hier: Divis Flexbox-Layout (".et_flex_row"/
   ".et_flex_column", siehe Theme-Builder-Hauptinhalt) gibt Modulen standardmäßig keine
   eigene Höhe vor und lässt sie stattdessen auf Inhaltshöhe schrumpfen — ohne "!important"
   kollabiert der Slider auf 0px Höhe, da unser Div ohne eigenen Inhalt (nur Hintergrundbilder
   per CSS) für Divis Flex-Layout wie "leer" aussieht. */
.projektseite-hero {
	position: relative;
	overflow: hidden;
	min-height: 100vh !important;
}

.projektseite-hero .projektseite-hero-slider {
	height: 100vh !important;
	min-height: 100vh !important;
}

/* Randloser Vollbild-Slider: die umgebende Divi-Sektion/-Zeile/-Spalte hat sonst eigenes
   Standard-Padding (u.a. die globale ".et_pb_section{padding-top/-bottom:64px}"-Regel aus
   style.css) und eine auf 1080px begrenzte Zeilenbreite — beides ließ oben/seitlich einen
   sichtbaren Rand statt eines echten, bildschirmfüllenden Hero-Bereichs. Über die stabile
   Modul-Klasse des ERSTEN "Projekt: Hero-Slider"-Moduls auf der Seite aufwärts adressiert
   (die Sektion selbst trägt keine eigene, unterscheidbare Klasse). */
.et_pb_section:has(> .et_pb_row > .et_pb_column > .et_pb_projekt_hero_0_tb_body) {
	padding: 0 !important;
}

.et_pb_section:has(> .et_pb_row > .et_pb_column > .et_pb_projekt_hero_0_tb_body) .et_pb_row,
.et_pb_section:has(> .et_pb_row > .et_pb_column > .et_pb_projekt_hero_0_tb_body) .et_pb_column {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Divis eigener "wp:divi/placeholder"-Block (fester Bestandteil des generierten
   Theme-Builder-Inhalts, siehe sallier_projektseite_divi_content()) rendert selbst als leere,
   aber sichtbare Sektion MIT Divis Standard-Padding (64px oben/unten) — ließ dadurch eine
   ~130px hohe Lücke zwischen Header und Hero-Slider. Über den direkten Nachbarn (die Sektion,
   die unmittelbar VOR der Hero-Sektion sitzt) adressiert statt über einen festen Klassennamen,
   damit die Regel unabhängig von Divis Sektions-Nummerierung funktioniert. */
.et_pb_section:has(+ .et_pb_section > .et_pb_row > .et_pb_column > .et_pb_projekt_hero_0_tb_body) {
	padding: 0 !important;
	min-height: 0 !important;
}

.projektseite-intro {
	text-align: center;
	font-size: 22px;
	line-height: 1.5;
	color: var(--color-text);
}

.projektseite-module {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

/* Jedes Projekt-Modul (Exposé, Grundrisse, Bauherr, ...) sitzt im automatisch erzeugten
   Theme-Builder-Hauptinhalt einer SUBSITE in einer EIGENEN, fest angelegten Divi-Sektion (siehe
   sallier_projektseite_divi_content()) — hat das Projekt für diesen Modul-Typ keine Zeile im
   Flexible-Content-Feld, rendert die PHP-Funktion zwar "" (siehe
   sallier_render_projekt_modul_typ()), die umgebende Sektion selbst bleibt aber trotzdem stehen
   und zeigt nur ihr eigenes Padding (128px, oben+unten) — sichtbar als unmotivierter Leerraum
   zwischen den Nachbar-Modulen (beobachtet bei Kriedbargs "Bauherr", das dort noch nicht befüllt
   ist).
   WICHTIG — ":only-child" auf jeder Ebene (Zeile/Spalte/Modul) ist hier bewusst kein Zufall,
   sondern die entscheidende Eingrenzung: eine erste, zu weit gefasste Fassung dieser Regel
   (nur ".et_pb_section:has(... .et_pb_module_inner):not(:has(... *))", ohne ":only-child") hat
   auf den ECHTEN Projektseiten der Hauptseite (".../projekte/kriedbarg/", eigenes, älteres
   Theme-Builder-Template mit mehreren Modulen — Überschriften, Text, Code, unser Projekt-Modul —
   BUNDLED in EINER gemeinsamen Sektion) versehentlich die komplette Sektion samt allen anderen,
   befüllten Modulen ausgeblendet, nur weil IRGENDEIN Projekt-Modul darin leer war (hier:
   "Termine"). Die Subsite-Provisionierung legt dagegen IMMER genau eine Zeile/Spalte/Modul pro
   Sektion an — genau dieses Muster prüft die ":only-child"-Kette hier gezielt, damit die Regel
   nur dort greift, nicht auf der strukturell anders aufgebauten Hauptseite.
   Prüft per zwei GETRENNTEN ":has()" (verschachteltes ":has()" innerhalb ":has()" ist laut
   CSS-Spezifikation ungültig, siehe frühere Version mit ":has(...:not(:has(*)))"), ob der
   Modul-Inhalt KEIN einziges Kind-Element enthält (Text-/Whitespace-Knoten zählen dabei nicht,
   anders als beim CSS-":empty()") — dann verschwindet die ganze Sektion. */
.et_pb_section:has(> .et_pb_row:only-child > .et_pb_column:only-child > .et_pb_module[class*="et_pb_projekt_"]:only-child .et_pb_module_inner):not(:has(.et_pb_module_inner *)) {
	display: none;
}

.projektseite-modul-titel {
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: var(--text-heading);
	/* Bewusst NICHT (mehr) über "--ps-highlight" eingefärbt — auf ausdrücklichen Wunsch fest auf
	   #2B2A2D zurückgenommen, unabhängig vom projektspezifischen Farb-Highlight (das steuert
	   weiterhin nur Button-Hintergrund und Footer, siehe subsite-header-footer.css).
	   "!important": die globale Regel "h2, h4, h5, h6 { color: var(--color-primary) }" (siehe
	   style.css) matcht dieses Element (ein <h2>) direkt und gewinnt sonst trotz geringerer
	   Selektor-Spezifität gegen die Klassenregel hier. */
	color: #2B2A2D !important;
	text-align: center;
	/* 25px statt "--space-6" (24px) — exakt der Abstand zwischen Überschrift und Inhalt auf
	   schuetzenweg.de gemessen (dort per Divi-Zeilenabstand, hier direkt als Wert übernommen,
	   da unser eigenes Markup keine vergleichbare Zeilenstruktur hat). "!important" aus
	   demselben Grund wie bei "color" oben: die globale Regel "h2, h4, h5, h6{margin:0!important}"
	   (siehe style.css) matcht dieses Element direkt und gewinnt sonst trotz geringerer
	   Selektor-Spezifität gegen die Klassenregel hier. */
	margin: 0 0 25px !important;
}

.projektseite-text {
	font-size: 16px;
	line-height: 1.6;
	max-width: 800px;
	margin: 0 auto;
}

/* "!important" auf beiden Regeln (Normal- UND Hover-Zustand): ohne das gewinnt teils die
   globale "a:hover{color:var(--color-accent)}" (siehe style.css, feste Akzentfarbe der
   HAUPTSEITE) und teils Divis eigene, dynamisch generierte Customizer-Link-Farbe — beide
   unabhängig von der hier pro Projekt einstellbaren Link-Farbe ("--ps-links"). Dadurch
   "vererbte" sich der Hover-Effekt der Hauptseite auf die Subsites. Hover bewusst dieselbe
   Farbe wie im Normalzustand (kein Farbwechsel), damit ausschließlich die projekteigene Farbe
   sichtbar bleibt. */
.projektseite-text a {
	color: var(--ps-links, var(--color-primary)) !important;
}

.projektseite-text a:hover {
	color: var(--ps-links, var(--color-primary)) !important;
}

.projektseite-download {
	text-align: center;
}

/* 1:1 nach dem Button-Stil auf schuetzenweg.de (".et_pb_button", Divi-Standard-Button dort):
   dunkle Pille, weiße Schrift, keine Umrandung, keine Versalien. Bewusst eigene Schriftart
   (--font-body) statt "Proxima Nova Light" der Referenz, um keinen externen Font zu laden. */
.projektseite-download-link {
	display: inline-block;
	padding: 0.3em 1em;
	background-color: var(--ps-highlight, #242425);
	/* "!important": ohne das gewann beim Hovern die globale "a:hover{color:var(--color-accent)}"
	   (siehe style.css, feste Akzentfarbe der Hauptseite) gegen diese einfache Klassenregel —
	   der Button-Text wurde beim Hovern orange statt weiß zu bleiben. */
	color: #FFFFFF !important;
	border: none;
	border-radius: 25px;
	text-decoration: none;
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 500;
	/* Kommt bei Divi von der Basis-".et_pb_button"-Regel (mit "!important", auch bei der
	   Instanz-Regel nicht überschrieben) — ohne das wirkt der Button spürbar kompakter/kleiner
	   als im Original. */
	line-height: 1.7em;
	text-transform: none;
	transition: filter 300ms;
}

/* "filter:brightness()" statt eines zweiten, fest hinterlegten Hover-Farbtons: die
   Hintergrundfarbe kommt jetzt aus dem projektspezifischen "--ps-highlight" (oder dem
   Standard-Schwarzton) — ein hartkodierter Hover-Ton hätte bei einer anderen gewählten Farbe
   nicht mehr zusammengepasst. Verdunkelt stattdessen IMMER die tatsächlich aktive Farbe. */
.projektseite-download-link:hover {
	filter: brightness(0.85);
	color: #FFFFFF !important;
}

.projektseite-grundrisse-grid,
.projektseite-bauherr-liste {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
	justify-content: center;
}

/* "flex-start" statt "center" (anders als Bauherr unten): die Grundriss-Karten haben durch die
   Bildunterschrift unterschiedliche Gesamthöhen (je nachdem ob/wie lang der Text ist) — mit
   "center" würden die Bilder selbst dadurch uneinheitlich hoch/tief in der Reihe sitzen. */
.projektseite-grundrisse-grid {
	align-items: flex-start;
}

.projektseite-bauherr-liste {
	align-items: center;
}

.projektseite-grundrisse-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	max-width: 320px;
}

.projektseite-grundrisse-item img {
	max-width: 320px;
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
	cursor: pointer;
}

.projektseite-grundrisse-item figcaption {
	font-size: 16px;
	color: var(--color-text);
	text-align: center;
}

.projektseite-bauherr-liste img {
	max-width: 200px;
	max-height: 75px;
	width: auto;
	cursor: pointer;
}

/* Das Logo kommt über den generischen "[projekt feld="..."]"-Shortcode (siehe projekte.php) als
   reines "<img>"-Tag ohne Divis eigene Bildmodul-Struktur — eine im Divi-Modul selbst gesetzte
   Größe (Breite/Max-Breite) wirkt daher nicht, da sie an Divis "et_pb_image"-Klassen gebunden
   ist. Größe hier deshalb direkt erzwungen. */
.projekt-logo img {
	max-width: 225px;
	height: auto;
	/* Bilder sind standardmäßig "inline" und sitzen dadurch auf der Textbasislinie — darunter
	   bleibt Platz für den (nicht vorhandenen) Zeichen-Unterlängen-Bereich der Schrift ("ghost
	   space", live nachgemessen: ~7px). Das ließ den Abstand zum Button darunter größer wirken
	   als den (bereits exakt 30px "gap") zwischen Button und Mitarbeiterfoto. "block" entfernt
	   diesen Leerraum. */
	display: block;
}

/* Zentrierung sitzt NICHT am Bild selbst, sondern am umschließenden Divi-Modul-Div (dem "Code"-
   Modul, das den Shortcode ausgibt) — das ist per Live-Messung die einzige Ebene, die Divi
   tatsächlich auf eine feste 225px-Breite setzt (eigene, nummerierte Regel im Builder), alle
   dazwischenliegenden Wrapper geben diese Breite unverändert durch. "content-box" + gleich große
   Seiten-Polsterung wie ".mitarbeiter-picture" (32px, siehe mitarbeiter.css) ergibt denselben
   289px breiten Gesamt-Kasten (225px + 2×32px). "margin:0 auto" statt Flexbox-Zentrierung
   (weder "align-items:center" noch "text-align:center" auf den Zwischen-Wrappern zeigten
   Wirkung, da diese selbst nicht auf die volle Spaltenbreite gestreckt sind) — klassisches
   Blockzentrieren wirkt zuverlässig direkt auf das Element mit der festen Breite. */
.projekt-logo .et_pb_module {
	box-sizing: content-box;
	width: 225px;
	padding: 0 var(--space-8);
	margin: 0 auto;
}

.projektseite-modul-galerie {
	padding: 0;
}

/* Divi stapelt Zeilen-Spalten ab 767px standardmäßig per eigener, pro Zeile generierter Regel
   ("flex-wrap: wrap" in einer @media-Query, 1 ID + 3 Klassen Spezifität). Die INNEREN Fakten-
   Zeilen (Name | Wert, jetzt "et_pb_row_nested"-Elemente innerhalb von ".projekt-fakten", siehe
   Begründung weiter unten) sollen auch mobil zweispaltig bleiben — hier mit höherer Spezifität
   unabhängig von der Bildschirmbreite auf "nowrap" erzwungen.
   Die ÄUSSERE, mit "projekt-fakten" klassifizierte Zeile selbst (Fakten-Spalte + Ansprechpartner-
   Spalte nebeneinander) ist davon bewusst AUSGENOMMEN: die soll auf Mobil ganz normal stapeln,
   sonst wird die Ansprechpartner-Karte in eine viel zu schmale Spalte gequetscht. Früher stand
   hier zusätzlich ein "nowrap" auch für ".et_pb_row.projekt-fakten" selbst (aus der Zeit vor der
   2-spaltigen Verschachtelung) — das hat genau dieses Stapeln verhindert. */
.projekt-fakten .et_pb_row_nested {
	flex-wrap: nowrap !important;
}

/* Innenabstand/Trennlinie für die verschachtelten Fakten-Zeilen (siehe Begründung oben) — ohne
   diese Regel zeigt Divi dort seinen unformatierten Standard (0px Abstand, dunkle Linie statt
   der hellen Trennlinie wie beim Rest der Seite). ":not(:has(.projektseite-termine))": das
   Termine-Modul wurde als weitere verschachtelte Zeile in dieselbe Spalte wie die Fakten-Zeilen
   gesetzt — ohne diesen Ausschluss bekäme der Termine-Wrapper dieselbe Trennlinie zusätzlich zu
   seiner eigenen (siehe ".projektseite-termine-zeile"), sichtbar als überflüssige Linie ganz
   unten. */
.projekt-fakten .et_pb_row_nested:not(:has(.projektseite-termine)) {
	padding: 10px 0 !important;
	border-bottom: 1px solid var(--border-default) !important;
	align-items: flex-start !important;
}


/* Die Kurzbeschreibung (Shortcode-Feld, siehe ".projekt-beschreibung" weiter unten) wurde
   ebenfalls als weitere verschachtelte Zeile in dieselbe Spalte wie die Fakten-Zeilen gesetzt und
   bekommt dadurch über die Regel oben dieselbe Trennlinie wie eine Fakten-Zeile — hier als letzte
   Zeile im Block aber unerwünscht (kein Wert folgt mehr, für den sie trennen müsste). Padding/
   Ausrichtung bleiben bewusst erhalten, nur die Linie wird entfernt. */
.projekt-fakten .et_pb_row_nested.projekt-beschreibung {
	border-bottom: none !important;
}

/* Das Mitarbeiter-Modul (Ansprechpartner) wurde ebenfalls als weitere verschachtelte Zeile in
   dieselbe Spalte gesetzt ("projekt-kontakt") — aus demselben Grund wie bei ".projekt-beschreibung"
   hier ohne die Trennlinie. */
.projekt-fakten .et_pb_row_nested.projekt-kontakt {
	border-bottom: none !important;
}

/* Das Logo wurde ebenfalls als weitere verschachtelte Zeile in dieselbe Spalte gesetzt
   ("projekt-logo") — aus demselben Grund wie bei ".projekt-beschreibung" hier ohne die
   Trennlinie. */
.projekt-fakten .et_pb_row_nested.projekt-logo {
	border-bottom: none !important;
}

/* Das Bauträger-Logo wurde als letzte weitere verschachtelte Zeile nach "Termine" in dieselbe
   (linke, breitere) Spalte gesetzt ("projekt-bauträger", mit "ä" — die JS-Ausblendlogik nutzt
   für andere Templates noch die alte ASCII-Schreibweise "projekt-bautraeger", siehe
   projekt-optionale-module.js, beide Klassennamen sind aktuell parallel im Einsatz) — aus
   demselben Grund wie bei ".projekt-beschreibung" hier ohne die Trennlinie.
   Der Divi-eigene 60px-Innenabstand oben (identische Herkunft wie bei ".projekt-termine" weiter
   oben) bleibt hier bewusst UNVERÄNDERT: anders als die reinen Fakten-Datenzeilen (Wohneinheiten,
   Wohnfläche, Adresse, dort 10px) enthält diese Zeile — wie "Termine" — eine EIGENE Überschrift
   ("Bauträger", <h2> direkt im Zeileninhalt) und leitet damit einen neuen Abschnitt ein, keinen
   weiteren Tabellenwert. Ein erster Versuch, hier auf 10px zu reduzieren, ließ den Abstand zur
   vorherigen Zeile bei fehlenden Terminen (Termine-Zeile dann ausgeblendet, Bauträger direkt
   nach "Adresse") zu knapp wirken (live gemeldet, Screenshot "Grünblick Lüneburg") — mit den
   60px passt der Abstand wieder zum Rest der Abschnittsübergänge. */
.projekt-fakten .et_pb_row_nested.projekt-bauträger {
	border-bottom: none !important;
}

/* Logo, Website-Button und Kontakt (Mitarbeiter) teilen sich dieselbe schmale Nachbar-Spalte
   (2/5-Breite, unterscheidet sie von der breiteren 3/5-Spalte mit der Kurzbeschreibung) und
   sollen untereinander einen einheitlichen Abstand haben. Bisher kam der Abstand aus dem
   eigenen 10px-Padding jeder Zeile (siehe die allgemeine Regel oben) — je nach Zeileninhalt
   (Bild vs. Button vs. Text) ergaben sich dadurch leicht unterschiedliche sichtbare Abstände
   (live nachgemessen: ~27px vs. ~30px, durch Zeilenhöhen-/Line-Height-Unterschiede der
   jeweiligen Inhalte). Hier auf EINE einzige Abstandsquelle reduziert: das eigene Zeilen-
   Padding wird entfernt, stattdessen bestimmt ausschließlich der "gap" der gemeinsamen Spalte
   den (jetzt garantiert identischen) Abstand zwischen den drei Zeilen. */
.projekt-fakten .et_pb_column:has(> .projekt-logo) {
	gap: 30px !important;
}

.projekt-fakten .et_pb_row_nested.projekt-logo,
.projekt-fakten .et_pb_row_nested.projekt-website,
.projekt-fakten .et_pb_row_nested.projekt-kontakt {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Die "Nachbar-Spalte" (Logo/Website-Button/Kontakt teilen sie sich, siehe die "gap:30px"-Regel
   oben) UND die eigene Spalte der "projekt-kontakt"-Zeile darin enthalten je eine Mitarbeiter-
   Karte-Abhängigkeit aus mitarbeiter.css (feste Kartenbreite fürs Team-Grid gedacht, siehe
   Begründung dort). Auf Projektseiten gibt es aber nur EINE Spalte, keinen Umbruch — auf schmalen
   Bildschirmen (unter Divis Stapel-Breakpoint) blieb die Spalte dadurch bei ihrer festen
   Mindestbreite hängen, statt wie die Nachbarspalte daneben auf 100% zu stapeln (live auf 606px
   Viewport-Breite nachgemessen: Spalte blieb bei 335px statt auf ~532px zu wachsen) — sichtbar als
   seltsam nach links verschobener, nicht zentrierter Block aus Logo/Button/Foto (vom Nutzer per
   Mobil-Screenshot gemeldet). Hier für den Projektseiten-Kontext zurückgesetzt — BEIDE Ebenen
   explizit (statt nur einer über ein zufällig auch die andere treffendes ":has()"), damit klar
   ist, dass beide das gleiche Reset brauchen und es nicht von der jeweiligen Kartengröße abhängt:
   1) die äußere Nachbar-Spalte selbst (".et_pb_column:has(> .projekt-logo)", siehe oben) und
   2) die eigene Spalte der "projekt-kontakt"-Zeile (per Kind-Kombinator, trifft nur diese, nicht
   deren Vorfahren). Ohne (1) blieb die äußere Spalte auf schmalen/mittleren Bildschirmen bei ihrer
   Divi-Standardbreite hängen (Logo/Button/Karte dadurch nicht zentriert, vom Nutzer gemeldet, siehe
   auch die Kommentare bei den "align-items:center"-Regeln weiter unten). */
.projekt-fakten .et_pb_column:has(> .projekt-logo),
.projekt-fakten .projekt-kontakt > .et_pb_column {
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
}

/* Der Website-Button wurde ebenfalls als weitere verschachtelte Zeile in dieselbe Spalte gesetzt
   ("projekt-website") — aus demselben Grund wie bei ".projekt-beschreibung" hier ohne die
   Trennlinie, zusätzlich horizontal zentriert (der Button soll mittig unter dem Logo/Foto
   stehen statt wie die übrigen Zeilen linksbündig zu beginnen). Zentrierung sitzt auf der
   EIGENEN SPALTE der Zeile, nicht auf der Zeile selbst: die Zeile enthält nur eine einzige,
   volle Breite einnehmende Spalte mit "flex-direction:column" — deren Querachse (horizontal)
   wird über "align-items" gesteuert, "justify-content" auf der Zeile selbst hätte hier keine
   Wirkung gehabt, weil die Spalte ohnehin die komplette Zeilenbreite ausfüllt. */
.projekt-fakten .et_pb_row_nested.projekt-website {
	border-bottom: none !important;
}

/* "#et-boc"-Präfix: Divi setzt für Spalten zusätzlich eine eigene, nur fürs Phone-Breakpoint
   generierte Regel (hohe Spezifität durch die "_tb_body_phone"-Klasse), die "align-items"
   ansonsten wieder auf "normal" zurücksetzt — live nachgemessen (375px Breite: Logo/Button/Karte
   lagen alle drei linksbündig an der Spaltenkante statt zentriert, vom Nutzer gemeldet). Die
   ID "#et-boc" (Divis äußerer Builder-Wrapper) hebt die Spezifität zuverlässig darüber, gleiche
   Technik wie bei der Zeilen-Breiten-Regel in style.css. */
#et-boc .projekt-fakten .et_pb_row_nested.projekt-website .et_pb_column {
	align-items: center !important;
}

/* Die Mitarbeiter-Karte (".mitarbeiter-item") hat eine eigene feste "max-width:356px" (siehe
   mitarbeiter.css, fürs Team-Grid gedacht) und wird dort NICHT automatisch in ihrer Spalte
   zentriert — im Grid fällt das nicht auf, weil mehrere Karten nebeneinander stehen. Seit die
   Nachbar-Spalte hier nicht mehr auf eine feste Breite gedeckelt ist (siehe die Regel oben,
   wächst jetzt z. B. auf 417px statt vorher immer exakt 335px), blieb die Karte links an der
   Spaltenkante hängen, während Logo und Button (beide bereits zentriert) mittig standen —
   sichtbar als seitlicher Versatz auf Tablet/Desktop (vom Nutzer gemeldet). Gleiche Technik wie
   beim Website-Button: Zentrierung über die eigene Spalte der Zeile. */
/* "#et-boc"-Präfix: siehe Begründung bei ".projekt-website" oben — dieselbe Divi-eigene
   Phone-Breakpoint-Regel setzte "align-items" auch hier zurück. */
#et-boc .projekt-fakten .et_pb_row_nested.projekt-kontakt .et_pb_column {
	align-items: center !important;
}

/* Die Spalte, die die verschachtelten Fakten-Zeilen stapelt, hat per Divi-Standard ("Module-
   Gutter") 30px "gap" ZWISCHEN den Zeilen — zusätzlich zum eigenen 10px-Padding jeder Zeile.
   Dadurch saß der Zeilentext optisch näher an der EIGENEN unteren Trennlinie (~10px) als an der
   Linie der Zeile darüber (30px Gap + 10px eigenes Padding = 40px) — wirkte wie "mittig/unten"
   statt oben. Gap entfernt, jetzt bestimmt einzig das 10px-Padding jeder Zeile den Abstand zur
   jeweils nächsten Trennlinie, symmetrisch.
   ":not(:has(> .projekt-logo))": die Nachbar-Spalte mit Logo/Website-Button/Kontakt (siehe
   weiter oben) hat dieselbe Grundstruktur (Spalte mit direkten ".et_pb_row_nested"-Kindern) und
   würde diese Regel sonst ebenfalls treffen — dort soll der Abstand aber bewusst über "gap"
   laufen (siehe die eigene, speziellere Regel oben), nicht über Zeilen-Padding. Ohne diesen
   Ausschluss gewann diese spätere, gleich spezifische Regel im Cascade und setzte den "gap"
   dort fälschlich wieder auf 0 zurück. */
.projekt-fakten .et_pb_column:has(> .et_pb_row_nested):not(:has(> .projekt-logo)) {
	gap: 0 !important;
}

/* Das Mitarbeiter-Modul (jetzt als Nachbar-Spalte neben der Fakten-Tabelle platziert, siehe
   oben) hat von Haus aus 32px Padding oben (siehe ".mitarbeiter-picture" in mitarbeiter.css, für
   die Team-/Grid-Ansicht gedacht). Seit Logo/Website-Button/Kontakt in derselben Spalte über
   einen einheitlichen 30px-"gap" auf Abstand gehalten werden (siehe oben), addierte sich JEDES
   eigene Padding hier zusätzlich zum Gap — das Foto wirkte dadurch sichtbar weiter vom Button
   entfernt als der Button vom Logo (live nachgemessen: 40px statt 30px). Komplett auf 0
   reduziert, nur in diesem Kontext (Nachkomme von ".projekt-fakten") — der Abstand kommt jetzt
   ausschließlich vom "gap" der Spalte, wie bei Logo und Button auch. */
.projekt-fakten .mitarbeiter-picture {
	padding-top: 0;
}

/* Schatten + Hover-Anhebung der Mitarbeiter-Karte (siehe ".mitarbeiter-item" in mitarbeiter.css)
   sind fürs Team-Grid gedacht, wo mehrere Karten wie eigenständige Kacheln nebeneinander stehen.
   Auf der Projektseite steht die Karte dagegen einzeln neben Logo/Website-Button in derselben
   Spalte, ohne eigene Kartenoptik der Nachbarn — Schatten/Hover-Effekt wirkten dort fehl am Platz
   und wurden auf Wunsch entfernt. */
.projekt-fakten .mitarbeiter-item {
	box-shadow: none;
}

.projekt-fakten .mitarbeiter-item:hover {
	transform: none;
	box-shadow: none;
}

/* Die Mitarbeiter-Karte wurde global (siehe ".mitarbeiter-picture"/".mitarbeiter-info"/
   ".mitarbeiter-item" in mitarbeiter.css) für die Team-Grid-Ansicht vergrößert (Foto 225px auf
   280px), damit dort lange E-Mail-Adressen nicht umbrechen. Auf der Projektseite steht die Karte
   dagegen einzeln neben dem (nach wie vor 225px breiten) Logo — hier auf Wunsch wieder auf die
   ursprüngliche, kompaktere Größe zurückgesetzt, damit sie optisch zum Logo passt statt größer
   zu wirken als der Rest der Nachbar-Spalte.
   BEWUSST OHNE "@media"-Einschränkung (anders als ein erster Versuch): mitarbeiter.css hebt für
   die einspaltige Mobil-Ansicht zwar extra "max-width" auf ".mitarbeiter-item" auf, damit sich die
   GROSSE Team-Grid-Karte dort responsiv an die Bildschirmbreite anpasst — auf der Projektseite
   soll die KLEINE Karte aber ausdrücklich IMMER (auch mobil) bei 225px/356px bleiben, exakt wie
   das gleich aufgebaute Logo daneben, statt auf schmalen Screens breiter zu werden als es das
   Logo tut (auf Wunsch des Nutzers, nachdem genau das mobil zu einem leichten Versatz zwischen
   Logo- und Karten-Mittelpunkt führte). */
.projekt-fakten .mitarbeiter-picture,
.projekt-fakten .mitarbeiter-info {
	width: 225px;
}

.projekt-fakten .mitarbeiter-picture {
	height: 225px;
}

.projekt-fakten .mitarbeiter-item {
	min-width: 0;
	max-width: 356px;
}

/* "display:grid" mit fester Spaltenbreite (siehe ".et_pb_row:has(.mitarbeiter-item)" in
   mitarbeiter.css) ist fürs Team-Grid gedacht, wo mehrere Karten pro Zeile automatisch umbrechen.
   ".projekt-kontakt" trägt selbst nicht die Klasse "projekt-fakten", daher greift der dortige
   ":not(.projekt-fakten)"-Ausschluss hier nicht — hier separat zurückgesetzt. Erst versucht, nur
   die Spaltenbreite der Grid-Regel anzupassen ("grid-template-columns: minmax(285px,356px)") —
   das deckelte aber die ZEILE SELBST auf max. 356px, wodurch sie (anders als die gleich
   aufgebaute "projekt-logo"-Zeile daneben, die per Flexbox ganz normal auf die volle
   Spaltenbreite wächst) nicht mehr die volle Breite der gemeinsamen Nachbar-Spalte einnahm — live
   nachgemessen: 356px statt 528px, wodurch Logo und Karte in unterschiedlich breiten Kontexten
   zentriert wurden und dadurch nicht mehr übereinander standen (vom Nutzer per Screenshot
   gemeldet). Da diese Zeile ohnehin immer nur EINE Karte enthält, braucht sie kein Grid — zurück
   auf normales Flexbox (wie die Nachbar-Zeilen), die Kartenbreite selbst kommt weiterhin von
   ".mitarbeiter-item" (max-width:356px) + "align-items:center" auf der eigenen Spalte. */
.projekt-fakten .et_pb_row_nested.projekt-kontakt {
	display: flex !important;
}

/* Divis Standard-Row-Padding oben auf der Fakten-Zeile entfernen — erzeugt sonst einen
   deutlich größeren Abstand zwischen "Projektdaten"-Überschrift und erster Fakten-Zeile
   als zwischen "Termine"-Überschrift und erster Termin-Zeile (wo padding-top bereits 0 ist). */
.et_pb_row.projekt-fakten {
	padding-top: 0 !important;
}

/* Abstand unterhalb der Überschriftenzeile ("Projektdaten") vor den Fakten entfernen —
   sowohl die Row selbst als auch das letzte Heading-Modul darin haben Divi-Standard-Padding. */
.et_pb_row:has(+ .et_pb_row.projekt-fakten) {
	padding-bottom: 0 !important;
}
.et_pb_row:has(+ .et_pb_row.projekt-fakten) .et_pb_heading {
	padding-bottom: 0 !important;
}

/* Bezugsrahmen für die am unteren Rand überlagerte Bilderreihe (siehe unten). */
.projektseite-galerie {
	position: relative;
}

/* Großes Hauptbild — Anzeige wechselt per JS beim Hovern eines Bilds in der überlagerten Reihe
   (siehe projekt-galerie.js). */
.projektseite-galerie-hauptbild {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	cursor: pointer;
}

/* Reihe liegt absolut positioniert am unteren Rand über dem Hauptbild, statt darunter im
   normalen Fluss zu stehen — mit 15px Abstand zum Bildrand rundherum, halbtransparente weiße
   Fläche als Hintergrund. "max-width" statt "right:15px": die Fläche soll nur so breit sein wie
   die Bilder selbst, aber nicht über den rechten Rand des Hauptbilds hinausragen. "padding": war
   15px — wirkte als "Rahmen" um die Thumbnails zu breit, auf 8px reduziert. */
.projektseite-galerie-reihe {
	position: absolute;
	left: 15px;
	bottom: 15px;
	max-width: calc(100% - 30px);
	padding: 8px;
	background: rgba(255, 255, 255, 0.55);
}

/* Immer einzeilig ("flex-wrap:nowrap") — passen nicht alle Bilder hinein, laufen sie über den
   Rand hinaus in einen horizontal scrollbaren Bereich, der per Pfeil-Buttons weitergeschaltet
   wird (siehe projekt-galerie.js). Scrollleiste optisch ausgeblendet, Scrollen per Touch/
   Trackpad/Pfeile bleibt möglich (gleiches Prinzip wie ".projekt-karussell", siehe dort). */
.projektseite-galerie-grid {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	gap: 15px;
}

.projektseite-galerie-grid::-webkit-scrollbar {
	display: none;
}

.projektseite-galerie-grid img {
	display: block;
	flex: 0 0 auto;
	/* Skaliert stufenlos mit der Fensterbreite (statt fester 95px), damit die kleinen Bilder auf
	   schmaleren Bildschirmen proportional weniger vom Hauptbild überdecken. */
	height: clamp(50px, 8vw, 95px);
	width: auto;
	scroll-snap-align: start;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	cursor: pointer;
}

/* Pfeil-Buttons links/rechts über der Bilderzeile — per JS ein-/ausgeblendet, je nachdem ob in
   die jeweilige Richtung noch etwas zu scrollen ist (siehe projekt-galerie.js). Optik wie bei
   ".projekt-karussell-pfeil" (siehe projekt-karussell.css), nur zusätzlich absolut positioniert. */
.projektseite-galerie-pfeil {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--color-primary);
	border: 1px solid var(--color-primary);
	border-radius: 0;
	color: #FFFFFF;
	font: inherit;
	cursor: pointer;
	z-index: 2;
}

.projektseite-galerie-pfeil:disabled {
	opacity: 0.3;
	cursor: default;
}

/* Gleicher Randabstand wie ".projektseite-galerie-reihe" (15px, siehe oben) — beide sitzen am
   selben Bildrand, mit "--space-3" (12px) wirkten die Pfeile bislang 3px näher am Rand als die
   Bilderreihe darunter. */
.projektseite-galerie-pfeil--zurueck {
	left: 15px;
}

.projektseite-galerie-pfeil--weiter {
	right: 15px;
}

.projektseite-galerie-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999999;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.85);
}

.projektseite-galerie-lightbox.ist-offen {
	display: flex;
}

.projektseite-galerie-lightbox-bild {
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
}

.projektseite-galerie-lightbox-schliessen {
	position: absolute;
	top: var(--space-6);
	right: var(--space-6);
	background: none;
	border: none;
	color: var(--color-primary);
	font-size: 40px;
	line-height: 1;
	cursor: pointer;
}

/* Gleiche Optik wie ".projektseite-hero-slider-pfeil" (siehe projekt-hero-slider.css): weißer,
   halbtransparenter Kreis mit Weichzeichner-Hintergrund statt der vorherigen blauen Kacheln —
   die Lightbox wird sowohl von der normalen Projekt-Galerie als auch vom Hero-Slider genutzt,
   beide sollen dieselben Pfeile zeigen. Position (links/rechts) wird NICHT fix am
   Bildschirmrand gesetzt, sondern per JS relativ zum tatsächlich gerenderten Bild positioniert
   (siehe "positioniereLightboxPfeile()" in projekt-galerie.js) — die Bildbreite variiert je nach
   Bild-Seitenverhältnis, ein fester CSS-Wert hätte die Pfeile bei schmaleren Bildern weit vom
   Bild entfernt am Rand stehen lassen. Die Werte hier dienen nur als Fallback, bevor JS beim
   ersten Bild-Load greift. */
.projektseite-galerie-lightbox-pfeil {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--color-primary);
	border-radius: 0;
	background: var(--color-primary);
	color: #FFFFFF;
	font: inherit;
	cursor: pointer;
	transition: filter 200ms ease;
}

.projektseite-galerie-lightbox-pfeil:hover {
	filter: brightness(0.85);
}

.projektseite-galerie-lightbox-pfeil--zurueck {
	left: var(--space-6);
}

.projektseite-galerie-lightbox-pfeil--weiter {
	right: var(--space-6);
}

body.projektseite-galerie-lightbox-offen {
	overflow: hidden;
}

/* Mobilmenü ausblenden wenn Lightbox offen — verhindert Überlagerung durch den
   halb-transparenten Hintergrund und die Pfeil-Buttons. */
body.projektseite-galerie-lightbox-offen .et_mobile_menu,
body.projektseite-galerie-lightbox-offen .mobile_nav {
	display: none !important;
}

/* Galerie-Pfeile (Thumbnail-Reihe + Lightbox) ausblenden wenn das Mobilmenü offen ist —
   verhindert, dass sie vor dem Menü-Panel erscheinen. */
:root:has(.mobile_nav.opened) .projektseite-galerie-pfeil,
:root:has(.mobile_nav.opened) .projektseite-galerie-lightbox-pfeil {
	display: none !important;
}

.projektseite-lageplan {
	text-align: center;
}

.projektseite-lageplan img {
	max-width: 100%;
	max-height: 500px;
	border-radius: var(--radius);
	cursor: pointer;
}

.projektseite-ansprechpartner-liste {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	justify-content: center;
}

.projektseite-ansprechpartner-karte {
	flex: 1 1 260px;
	max-width: 320px;
	text-align: center;
}

/* Größe (200x200px), Kreisform und Abstand zum Namen (35px) 1:1 von schuetzenweg.de
   übernommen. Dort wirkt das Foto zusätzlich in einen grauen Kreis mit kleinem
   Sallier-Icon-Badge unten rechts eingepasst — das ist dort allerdings direkt Teil der
   hochgeladenen Bilddatei selbst (kein CSS: weder Rahmen noch Badge lassen sich in Divis
   eigenem Markup dort nachweisen), daher hier nicht nachgebaut. */
/* "display:block" nicht weglassen: als "inline"-Element (Standard für <img>) bleibt das Bild
   Teil einer unsichtbaren Textzeile und bekommt dadurch zusätzlichen Platz für Unterlängen
   (~8px) UNTER sich, oben auf das eigentlich gesetzte "margin-bottom" drauf — der Abstand zum
   Namen wirkte dadurch spürbar größer als die eigentlich gesetzten 35px. */
.projektseite-ansprechpartner-karte img {
	display: block;
	width: 200px;
	height: 200px;
	object-fit: cover;
	border-radius: 50%;
	margin: 0 auto 35px;
}

/* Größe/Schriftschnitt/Zeilenabstand bewusst 1:1 vom Footer-Text übernommen (siehe
   ".subsite-footer-section .et_pb_text_inner" in subsite-header-footer.css) — nur die Farbe
   bleibt hier unverändert (schwarz statt Weiß), wie gewünscht. */
.projektseite-ansprechpartner-karte p {
	font-size: 18px;
	font-weight: var(--weight-light);
	line-height: 1.7;
	color: #000000;
	margin: 0;
}

/* Höhere Selektor-Spezifität als ".projektseite-ansprechpartner-karte p" oben nötig (1 Klasse +
   Tag schlägt sonst die einzelne Klasse hier), damit Fett nicht wieder auf Light zurückfällt. */
.projektseite-ansprechpartner-karte p.projektseite-ansprechpartner-name {
	font-weight: var(--weight-semibold);
}

/* Auf schuetzenweg.de sind E-Mail/Telefon zwar Links, sehen aber wie normaler (schwarzer) Text
   aus, keine eigene "Link-Farbe" — vorher stand hier "--ps-links", ein inzwischen entferntes
   Farbfeld (siehe "Farb-Highlights"-Umstellung), das dadurch permanent auf Navy zurückfiel. */
.projektseite-ansprechpartner-karte a {
	color: #000000 !important;
	text-decoration: none;
}

/* Farbe bewusst unverändert gegenüber dem Normalzustand (siehe Kommentar bei
   ".projektseite-text a:hover" weiter oben) — nur die Unterstreichung ändert sich bei Hover. */
.projektseite-ansprechpartner-karte a:hover {
	color: #000000 !important;
	text-decoration: underline;
}

/* Termine-Liste (Divi-Modul "et_pb_projekt_termine") — Schriftgrößen/Abstände an die
   Fakten-Tabelle angeglichen (18px, 20px Zeilen-Innenabstand, siehe die Live-Werte der
   Fakten-Zeile: ".et_pb_row.projekt-fakten"), Trennlinien-Optik wie bei der Vakanzen-Liste
   (siehe vakanzen-liste.css). Anders als die Fakten-Tabelle bleibt der Hintergrund hier
   transparent (Fakten sitzt auf einer dunklen Box, Termine direkt auf der Seite) — deshalb
   Textfarbe/Trennlinie in den normalen (dunklen) Body-Tönen statt Weiß. */
/* Der äußere ".projektseite"-Wrapper (siehe Basis-Regel oben) bringt seinen eigenen
   seitlichen Innenabstand mit — hier für die Termine-Instanz gezielt entfernt, da die Zeile
   sonst gegenüber den anderen Modulen (Bauträger, Fakten) eingerückt wirkt.
   "padding-top:0" aus demselben Grund: der ".projektseite"-Wrapper bringt zusätzlich 24px
   ("--space-6") Abstand oben mit, unsichtbar zwischen der "Termine"-Überschrift und der Liste
   verschachtelt (das Termine-Modul rendert seinen Inhalt in einen wiederverwendeten
   ".projektseite"-Container, siehe sallier_render_projekt_termine_modul() in
   projektseiten.php) — dadurch war der Abstand zwischen Überschrift und erstem Eintrag fast
   doppelt so groß wie zwischen "Projektdaten" und der ersten Fakten-Zeile (54px statt 30px,
   live nachgemessen). Ohne dieses Padding bleibt exakt der 30px-Modul-Gutter der Spalte übrig
   — identisch zum Projektdaten-Abstand. */
.projektseite:has(.projektseite-termine) {
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
}

.projektseite-termine-liste {
	display: flex;
	flex-direction: column;
}

/* Datum, Uhrzeit und Titel als drei eigene Spalten nebeneinander (wie Bezeichnung|Wert bei der
   Fakten-Tabelle), statt Datum/Uhrzeit über dem Titel zu stapeln. Datum/Uhrzeit auf feste Breiten
   gesetzt ("d.m.Y"/"H:i" sind durch die führenden Nullen im ACF-Anzeigeformat ohnehin
   gleichlang), damit der Titel bei jeder Zeile auf derselben X-Position beginnt. */
.projektseite-termine-zeile {
	display: flex;
	/* "baseline" reagiert empfindlich auf kleinste Zeilenhöhen-Unterschiede zwischen den Spalten
	   (Titel als "h3" vs. Datum/Uhrzeit als reine "div") — "center" richtet stattdessen alle
	   Spalten an der Mitte der Zeile aus, garantiert gleich große Abstände nach oben/unten
	   unabhängig von Schrift-Metriken. */
	align-items: center;
	gap: var(--space-6);
	/* War 15px — auf den aktuellen Live-Wert der Fakten-Zeile (jetzt 10px, siehe
	   ".projekt-fakten .et_pb_row_nested" weiter unten) angeglichen, damit beide Tabellen exakt
	   gleich aussehen. */
	padding: 10px 0;
	border-bottom: 1px solid var(--border-default);
}

.projektseite-termine-datum,
.projektseite-termine-uhrzeit {
	flex: 0 0 auto;
	font-family: var(--font-body);
	/* War "--weight-semibold" (600) — die Fakten-Bezeichnung nutzt Divis eigenen "Fett"-Schalter
	   (echtes 700, vom Browser synthetisiert, da keine 700er-Schriftdatei geladen ist), nicht
	   unser Semibold-Token. Für exakte Übereinstimmung hier ebenfalls hart auf 700 gesetzt. */
	font-weight: 700;
	font-size: 18px;
	/* Fester Wert statt "normal": Inter Light und Inter SemiBold haben unterschiedliche
	   Font-Metriken und ergeben bei "normal" trotz gleicher Schriftgröße unterschiedlich hohe
	   Zeilenboxen (24px vs. 31px gemessen) — dadurch wirkten die Spalten trotz "align-items:
	   center" nicht bündig. Hier wie ".projektseite-termine-titel" auf denselben Pixelwert
	   gesetzt, damit alle drei Spalten exakt gleich hohe Boxen haben. */
	line-height: 24px;
	letter-spacing: var(--tracking-wide);
	color: var(--color-text);
}

.projektseite-termine-datum {
	width: 110px;
}

.projektseite-termine-uhrzeit {
	width: 90px;
}

/* Eigene Regel statt der globalen h3 (24px, Navy, siehe style.css) — hier wie die Fakten-Zeile
   als 18px-Zeile in der normalen Textfarbe, nicht als große Überschrift. "!important" nötig, da
   die globale h3-Regel selbst "!important" nutzt. */
.projektseite-termine-titel {
	flex: 1 1 auto;
	margin: 0;
	font-family: var(--font-body) !important;
	font-weight: var(--weight-light) !important;
	font-size: 18px !important;
	/* Fester Wert (siehe Begründung bei ".projektseite-termine-datum/-uhrzeit") statt "normal"
	   oder Divis Überschriften-Standard ("line-height:1") — garantiert exakt gleich hohe
	   Zeilenboxen über alle drei Spalten hinweg. */
	line-height: 24px !important;
	/* Divis Basis-CSS setzt auf JEDE Überschrift (h1-h6) zusätzlich "padding-bottom:10px" — ohne
	   das hier zurückzusetzen bleibt die Box trotz gleicher "line-height" 10px höher als die
	   Nachbarspalten. */
	padding-bottom: 0 !important;
	letter-spacing: var(--tracking-wide) !important;
	color: var(--color-text) !important;
}

@media screen and (max-width: 600px) {
	.projektseite-termine-zeile {
		flex-wrap: wrap;
	}

	/* Auf schmalen Screens: Label und Wert untereinander statt nebeneinander — verhindert
	   ungünstigen Zeilenumbruch mitten im Wert bei langen Bezeichnungen ("Wohneinheiten" etc.). */
	.projekt-fakten .et_pb_row_nested {
		flex-wrap: wrap !important;
		gap: 2px !important;
	}

	.projekt-fakten .et_pb_row_nested > .et_pb_column {
		width: 100% !important;
		max-width: none !important;
		padding: 0 !important;
	}
}

/* Section im Theme Builder mit frei vergebener CSS-Klasse "info-sektion" (vormals
   "projekt-beschreibung" — die Klasse an der Section wurde umbenannt, der eigentliche
   Beschreibungstext innerhalb trägt weiterhin ".projekt-beschreibung" für die "ausblenden, wenn
   leer"-Logik, siehe projekt-optionale-module.js). Auf ".et_pb_section" beschränkt, damit der
   Hintergrund eindeutig nur einmal auf der Section selbst gerendert wird. */
.et_pb_section.info-sektion {
	background-image: url("/wp-content/uploads/2026/08/Sallier_Dach_hell.svg");
	background-repeat: no-repeat;
	/* Feste Pixelwerte statt Prozent+"auto": "auto" berechnete die Höhe bei diesem SVG nicht
	   zuverlässig aus dem Seitenverhältnis, wodurch die Form deutlich größer als vorgesehen
	   gerendert wurde und links über den Rand hinausragte. Feste Werte (im Seitenverhältnis
	   45.8:44.1 des viewBox, siehe SVG-Datei) schließen das aus. Der Puffer im viewBox sitzt nur
	   oben/links (für den dickeren Strich) — unten/rechts bleibt die Kante bündig mit der
	   Section, damit kein Spalt zum Rand entsteht. Unten rechts verankert, damit die Form wie
	   eine aus der Ecke herausragende Spitze wirkt: links bleibt immer Platz frei, ein Überstand
	   nach oben wird einfach vom Rand der Section abgeschnitten. */
	/* Negativer Offset schiebt die Form über den rechten Rand der Section hinaus, sodass ein
	   Teil davon unsichtbar rechts abgeschnitten wird. */
	background-position: right -99px bottom;
	background-size: 684px 659px;
}

/* Zeile mit der Klasse "legal-hinweis" (rechtlicher Disclaimer-Text am Ende der Projektseite) —
   soll kleiner und unauffälliger wirken als der übrige Fließtext (--text-body, 18px). Farbe über
   "color-mix" abgeschwächt statt eines neuen, freistehenden Grautons: gleiche Technik wie bei
   "--border-default" (siehe style.css), bleibt dadurch automatisch konsistent zur bestehenden
   Text-/Rahmenfarbe statt eines beliebig gewählten zweiten Graus. */
.legal-hinweis {
	/* Zeile hatte von Haus aus 0px Abstand zur Fakten-Tabelle darüber (live nachgemessen) — saß
	   dadurch direkt an der letzten Fakten-Zeile, ohne erkennbar als eigener, abschließender
	   Absatz zu wirken. Gleicher 30px-Wert wie bei den übrigen Abschnittsübergängen auf dieser
	   Seite (siehe z. B. "Projektdaten" zur ersten Fakten-Zeile weiter oben). */
	padding-top: 30px;
}

.legal-hinweis p {
	font-size: 13px;
	line-height: 1.5;
	color: color-mix(in oklch, var(--color-text) 55%, white);
}