/*
 * Filet & Freunde – Website-Basis für Seiten mit „Neues Designsystem“.
 *
 * Header (Hello-Theme), Seitengrund und Seitentextur. Übernommen aus dem
 * Zusätzlichen CSS (Customizer) des alten Aufbaus, ohne !important.
 * Die Aufteilung des Menüs links/rechts vom Logo macht global.js, das Raster
 * dafür kommt noch aus der Theme-functions.php („FF Header-Nav Split“).
 */

/* Header */
.ff-designsystem .site-header {
	background-color: #0a0a0a;
	border-bottom: 1px solid rgba(252, 250, 243, 0.08);
}

.ff-designsystem .site-header .custom-logo {
	width: clamp(140px, 12.6vw, 180px);
	max-width: none;
	height: auto;
}

.ff-designsystem .site-header .site-title a {
	color: #a57865;
	font-family: "Ivar Display", Georgia, serif;
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0.03em;
	text-decoration: none;
	text-transform: lowercase;
}

.ff-designsystem .site-header nav a {
	color: rgba(252, 250, 243, 0.75);
	font-family: "Apercu", sans-serif;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}

.ff-designsystem .site-header nav a:hover,
.ff-designsystem .site-header nav a:focus-visible {
	color: #fcfaf3;
}

@media (max-width: 1024px) {
	.ff-designsystem .site-navigation-dropdown,
	.ff-designsystem .site-navigation-dropdown ul {
		background-color: #0a0a0a;
	}

	.ff-designsystem .site-navigation-dropdown .menu-item a {
		display: block;
		padding: 14px 20px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		background-color: transparent;
		color: #fcfaf3;
	}

	.ff-designsystem .site-navigation-dropdown .menu-item a:hover,
	.ff-designsystem .site-navigation-dropdown .current-menu-item > a {
		color: #a57865;
	}
}

@media (max-width: 767px) {
	.ff-designsystem .site-header .header-inner {
		margin: 0 16px;
	}
}

/* Seitengrund: dunkles Design */
body.ff-designsystem {
	background-color: #0a0a0a;
	color: #fcfaf3;
}

/* Globaler Footer (Hello-Theme, gestaltet über die functions.php) */
.ff-designsystem .site-footer a {
	color: rgba(252, 250, 243, 0.5);
}

/* Seitentextur (Karton) über der ganzen Seite */
.ff-designsystem::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	background-image: url("/wp-content/uploads/2026/05/Light_Grey_Cardboard_Texture-scaled.png");
	background-repeat: repeat;
	opacity: 0.12;
	pointer-events: none;
}

/* Globaler Block „Begleite uns“ (functions.php): gleiche Vorgaben wie die
   Abschnitte der Startseite. Abstand oben = Abstand unter dem Text
   (--ff-abschnitt aus basis.css), Überschrift → Text 24 px.
   Überschrift als FF Display, Text als FF Fließtext. */
.ff-designsystem .ff-beg-global {
	padding-top: var(--ff-abschnitt, 96px);
}

.ff-designsystem .ff-beg-global .ff-beg-text {
	margin: 0 auto var(--ff-abschnitt, 96px);
	font-family: var(--e-global-typography-fftxt-font-family), sans-serif;
	font-size: var(--e-global-typography-fftxt-font-size);
	font-weight: var(--e-global-typography-fftxt-font-weight);
	line-height: var(--e-global-typography-fftxt-line-height);
	letter-spacing: normal;
	text-transform: none;
}

.ff-designsystem .ff-beg-global .ff-beg-head {
	margin: 0 0 var(--ff-abstand-titel, 24px);
	font-family: var(--e-global-typography-ffdisp-font-family), Georgia, serif;
	font-size: var(--e-global-typography-ffdisp-font-size);
	font-weight: var(--e-global-typography-ffdisp-font-weight);
	line-height: var(--e-global-typography-ffdisp-line-height);
	letter-spacing: var(--e-global-typography-ffdisp-letter-spacing);
	text-transform: var(--e-global-typography-ffdisp-text-transform);
}