/* ==========================================================================
   Header/Footer für Projekt-Subsites (header.php / footer.php)
   Eigenständig statt Erweiterung von header.css/footer.css, da jene komplett auf Divis
   Theme-Builder-Markup (.et_pb_menu, .et_pb_row_nested, ...) zugeschnitten sind, das hier
   nicht existiert.
   ========================================================================== */

/* Divi reserviert per eigenem, dynamisch generiertem CSS (".et_fixed_nav.et_show_nav
   #page-container{padding-top:...}") automatisch Platz für einen fixierten Header — das hebt
   Divi normalerweise selbst wieder auf, wenn ein Theme-Builder-Header aktiv ist (".et-tb"/
   ".et-tb-has-header"-Ausnahme), was auf der Subsite (ganz ohne Theme Builder) nie greift. Da
   unser Header hier ganz normal im Textfluss sitzt (nicht fixiert), muss die Reservierung
   gezielt neutralisiert werden — nur auf Seiten mit unserem Subsite-Header, damit die
   Hauptseite (dort regelt weiterhin Divi/Theme Builder selbst) unberührt bleibt. */
body:has(.subsite-header) #page-container {
	padding-top: 0 !important;
}

.subsite-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--color-surface);
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.12);
}

.subsite-header-inner {
	max-width: 1280px;
	height: 105px;
	margin: 0 auto;
	padding: var(--space-3) var(--space-6);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	flex-wrap: wrap;
}

.subsite-header-logo {
	display: block;
	flex-shrink: 0;
}

.subsite-header-logo img {
	display: block;
	max-width: 150px;
	max-height: 81px;
	width: auto;
	height: auto;
}

.subsite-header-logo span {
	font-family: var(--font-heading);
	font-weight: var(--weight-semibold);
	font-size: var(--text-body);
	color: var(--color-primary);
}

/* Navigation kommt über Divis eigenes Menü-Modul (et_pb_menu, siehe header.php) — bewusst ganz
   ohne eigene Optik-Anpassungen (absolutes Divi-Standardstyling, Desktop wie Mobil). Die
   vorherige Ausweich-Regel hier ist nicht mehr nötig: die eigentliche Ursache (Hauptseiten-
   spezifisches Kartenoptik-CSS für ".et_mobile_menu" lief versehentlich unskoped site-weit)
   wurde direkt in header.css behoben (dort jetzt korrekt auf ".header_nav_mobile" beschränkt,
   wie alle Nachbar-Regeln im selben Abschnitt). */

/* Strukturelle Notwendigkeit, keine Optik-Entscheidung: Divi geht beim Menü-Modul normalerweise
   davon aus, in einer eigenen Zeile/Spalte (".et_pb_row"/".et_pb_column") zu stecken, die ihm
   volle Breite gibt. Unser Header hat diese Struktur nicht (nur ein eigener Flex-Container mit
   Logo + Menü als direkte Kinder) — dadurch schrumpft Divis Modul-Wurzel in der Mobilansicht
   (wo nur noch das schmale Hamburger-Icon sichtbar ist) auf reine Inhaltsbreite zusammen, und
   das mobile Ausklapp-Panel (dessen Breite sich an dieser Wurzel orientiert) wird dadurch viel
   zu schmal und abgeschnitten statt volle Breite zu nutzen. */
.subsite-header .et_pb_menu {
	flex: 1 1 auto;
}

/* Ebenfalls keine Optik-Entscheidung: Divis eigenes Desktop-Menü setzt bereits selbst
   "text-decoration:none" (eigener Basis-Reset), das mobile Ausklapp-Panel tut das aber nicht —
   dort gewinnt sonst unsere GLOBALE Standard-Link-Regel ("a{text-decoration:underline}" in
   style.css), wodurch die mobilen Links unterstrichen erscheinen, obwohl Divi das am Desktop
   selbst nirgends tut. Hier nur diese Inkonsistenz zwischen Desktop/Mobil beseitigt. Über
   ".sallier-subsite" (nicht ".subsite-header") skopiert, da der Header inzwischen über einen
   echten Theme-Builder-Header läuft und dabei dieselbe Divi-Klasse wie die Hauptseite trägt. */
body.sallier-subsite .et_mobile_menu a {
	text-decoration: none;
}

/* Divis eigener Standard-Rahmen oben am mobilen Ausklapp-Panel (3px, Divi-Standard-Blau
   "#2ea3f2") — auf Wunsch entfernt. */
body.sallier-subsite .et_mobile_menu {
	border-top: none;
}

@media (max-width: 767px) {
	.subsite-header-inner {
		padding: var(--space-3) var(--space-4);
	}
}

.subsite-footer {
	/* Projekt-Farbauswahl ("Farb-Highlights", siehe sallier_render_projektseite_design_css() in
	   projektseiten.php) — dieselbe Variable wie Navigation, Button-Hintergrund und
	   Modul-Überschriften (siehe projektseite.css). Der Theme-Builder-Header selbst hat bewusst
	   KEIN eigenes Farbfeld mehr, nur der Footer wird darüber eingefärbt. */
	background: var(--ps-highlight, var(--color-primary));
	color: var(--color-surface);
}

/* Gleiche Farbquelle wie ".subsite-footer" oben (die dort nicht mehr greift, seit der Footer im
   Theme Builder frei selbst gestaltet wird, siehe sallier_projektseite_theme_builder_erstellen()
   in projektseiten-provisioning.php) — hier auf die manuell im Builder vergebene CSS-Klasse
   "subsite-footer-section" der eigenen Footer-Sektion angewendet. "!important" nötig: Divis
   eigene Sektions-Basisregel (".et_pb_section{background-color:#fff}") sitzt auf demselben
   Element und hat dieselbe Selektor-Spezifität — ohne "!important" wäre der Ausgang je nach
   Ladereihenfolge nicht zuverlässig. */
.subsite-footer-section {
	background-color: var(--ps-highlight, var(--color-primary)) !important;
}

/* Textfarbe der Footer-Module als eigene, statische Sicherheitsnetz-Regel: normalerweise setzt
   Divi die im Builder gewählte weiße Textfarbe selbst als generiertes, seiteneigenes CSS
   (".et_pb_text_X_tb_footer .et_pb_text_inner{color:#fff!important}") — das entsteht aber erst,
   wenn der Footer einmal durch Divis eigene Speicher-Pipeline (echter Builder-Save mit
   angemeldetem Nutzer) gelaufen ist. Bei automatisch per Provisionierung angelegten Subsites
   (siehe sallier_layout_inhalt_setzen() in projektseiten-provisioning.php, bewusst OHNE Divis
   "save_post"-Hooks, da diese das Modul sonst leeren) existiert diese generierte Datei zunächst
   nicht — ohne diese Regel bliebe der Footer-Text in der globalen Standardfarbe (dunkel auf
   dunklem Grund, kaum lesbar). Sobald jemand den Footer im Builder öffnet und speichert, greift
   zusätzlich Divis eigene Regel — kollidiert nicht, da hier derselbe Wert steht. */
.subsite-footer-section .et_pb_text_inner,
.subsite-footer-section .et_pb_text_inner p,
.subsite-footer-section .et_pb_text_inner span,
.subsite-footer-section .et_pb_text_inner a {
	color: var(--color-surface) !important;
}

.subsite-footer-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--space-8) var(--space-6);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	text-align: center;
}

.subsite-footer-kontakt {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-6);
}

/* ".subsite-footer-kontakt" oben war für den alten, manuell gebauten PHP-Footer gedacht
   (sallier_render_subsite_footer_modul(), inzwischen nur noch Fallback) — der echte, im Builder
   erzeugte Footer-Text (siehe sallier_projektseite_footer_content() in
   projektseiten-provisioning.php) hat keinen solchen Wrapper, "[sallier_telefon]"/"[sallier_email]"
   liegen direkt im Text-Modul. Ohne eigene Regel dafür blieb Icon+Link nur "inline" (Divis/Browser-
   Standard für <span>), dadurch wirkte der Abstand uneinheitlich statt sauber ausgerichtet wie auf
   der Hauptseite (siehe ".contact .kontakt-link" in footer.css — Werte hier bewusst identisch:
   10px Abstand, Icon zu 72% Deckkraft mit Hover auf volles Weiß, globale Icon-Größe von 20px
   unangetastet). */
.subsite-footer-section .kontakt-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.subsite-footer-section .kontakt-link a {
	text-decoration: none;
}

/* "!important" nötig: die generische ".subsite-footer-section .et_pb_text_inner span"-Regel
   weiter oben (erzwingt weißen Text/Link-Farbe im Footer) matcht auch dieses <span> direkt (nicht
   nur vererbt) und würde die reduzierte Deckkraft hier sonst überschreiben. "span.sallier-icon"
   statt nur ".sallier-icon": gleiche Spezifität wie die Regel oben nötig, damit die spätere
   Position in dieser Datei den Ausschlag gibt (bei gleicher Spezifität UND "!important" gewinnt
   sonst unabhängig von der Position immer die Regel mit der höheren Spezifität). */
.subsite-footer-section span.sallier-icon {
	color: rgba(255, 255, 255, 0.72) !important;
	transition: color var(--transition-fast);
}

.subsite-footer-section .kontakt-link:hover span.sallier-icon {
	color: var(--color-surface) !important;
}

.subsite-footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-4);
}

.subsite-footer-links a {
	font-size: var(--text-small);
	color: var(--color-surface);
	text-decoration: underline;
}

.subsite-footer-copyright {
	font-size: var(--text-small);
	color: var(--color-surface);
	opacity: 0.8;
	margin: 0;
}