/* ==========================================================================
   FDP Sandersdorf-Brehna – Basis-Stylesheet
   Struktureller Grundbau für die Scrollytelling-Startseite.

   Farben & Typografie gemäß offiziellem "FDP Corporate Design Guideline"
   (Stand 07/2026, https://www.fdp.de/seite/corporate-design). Magenta wurde
   im Rebranding 2026 durch Gelb/Dunkelblau/Hellblau ersetzt.

   TODO Font-Hosting: "Public Sans" wird laut Handbuch als Web-Font verwendet.
   Bewusst NICHT über ein externes CDN (z. B. Google Fonts) eingebunden –
   das würde IP-Adressen der Besucher an Google übertragen, was ohne
   Einwilligung DSGVO-widrig ist (einschlägige deutsche Rechtsprechung).
   Stattdessen: Public-Sans-Dateien selbst hosten unter assets/fonts/ und
   per @font-face einbinden (separater Schritt), bis dahin Systemfont-Fallback.
   ========================================================================== */

:root {
	--fdp-color-bg: #ffffff;
	--fdp-color-text: #101010;
	--fdp-color-muted: #4a4a4a;

	/* Offizielle CI-Farben */
	--fdp-color-blue: #032d67; /* Primärfarbe Blau, Pantone 7687C */
	--fdp-color-yellow: #ffe000; /* Primärfarbe Gelb, Pantone 107C */
	--fdp-color-cyan: #00a7e7; /* Sekundärfarbe Hellblau, Pantone 2995C */

	--fdp-color-accent: var(--fdp-color-cyan);
	--fdp-color-border: #e2e2e2;

	/* Abgeleitetes Tonwert-System (eigene Herleitung aus den drei CI-Farben,
	   nicht Teil des Handbuchs) für Sektions-Rhythmus beim Scrollen:
	   helle Tints als Zwischenschritt, ein volles Dunkelblau als Kontrastsektion. */
	--fdp-color-surface: var(--fdp-color-bg);
	--fdp-color-surface-tint: #eaf4fa; /* helles Cyan-Tint für "Beweis"/"Einladung" */
	--fdp-color-surface-dark: var(--fdp-color-blue); /* volle Kontrastsektion "Vision" */
	--fdp-color-on-dark: #ffffff;
	--fdp-color-on-dark-muted: rgba(255, 255, 255, 0.78);

	/* Public Sans folgt per Self-Hosting, siehe TODO oben. Bis dahin sauberer
	   Systemfont-Stack als Fallback (kein Layout-Bruch bei Umstellung). */
	--fdp-font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--fdp-space-1: 0.5rem;
	--fdp-space-2: 1rem;
	--fdp-space-3: 2rem;
	--fdp-space-4: 4rem;
	--fdp-chatbar-height: 3.5rem;
}

/* Reset (schlank) */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

html {
	overflow-x: hidden; /* Pull-Out-Streifen ragt im Ruhezustand bewusst über den Rand hinaus */
}

body {
	margin: 0;
	font-family: var(--fdp-font-sans);
	color: var(--fdp-color-text);
	background: var(--fdp-color-bg);
	line-height: 1.5;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: var(--fdp-color-blue);
}

a:hover,
a:focus-visible {
	color: var(--fdp-color-cyan);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: var(--fdp-chatbar-height);
	left: var(--fdp-space-2);
	width: auto;
	height: auto;
	clip: auto;
	background: var(--fdp-color-bg);
	padding: var(--fdp-space-1) var(--fdp-space-2);
	z-index: 1000;
}

/* --------------------------------------------------------------------------
   Sticky KI-Chat-Suchleiste (Suchmaschinen-Stil, transparenter Bereich drumherum)
   -------------------------------------------------------------------------- */
.fdp-chatbar {
	position: sticky;
	top: 0;
	z-index: 100;
	display: flex;
	justify-content: center;
	padding: var(--fdp-space-2);
	background: transparent;
	pointer-events: none;
}

.fdp-chatbar.is-scrolled {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
}

.fdp-chatbar__input {
	pointer-events: auto;
	width: min(560px, 100%);
	padding: 0.75rem 1.25rem;
	border-radius: 999px;
	border: 1px solid var(--fdp-color-border);
	background: var(--fdp-color-bg);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--fdp-space-2) var(--fdp-space-3);
}

.site-title {
	font-weight: 700;
	text-decoration: none;
	color: var(--fdp-color-text);
}

/* Logo-Lockup: Wortmarke + Logozusatz gemäß CD-Guideline
   (Zusatzgröße 1/4 Logohöhe, Zeilenabstand 100 %, an oberer Logolinie ausgerichtet). */
.fdp-logo-lockup {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.75rem;
	text-decoration: none;
}

.fdp-logo-lockup__mark {
	height: 46px;
	width: auto;
	display: block;
}

.fdp-logo-lockup__zusatz {
	display: flex;
	flex-direction: column;
	font-size: 11.5px; /* 1/4 der Logohöhe (46px) */
	line-height: 1; /* Zeilenabstand 100 % */
	font-weight: 700;
	color: var(--fdp-color-blue);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding-top: 2px;
}

.primary-navigation ul {
	display: flex;
	gap: var(--fdp-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-navigation a {
	text-decoration: none;
	color: var(--fdp-color-text);
}

/* --------------------------------------------------------------------------
   Scrollytelling-Grundgerüst
   -------------------------------------------------------------------------- */
.fdp-scrollstory {
	position: relative;
}

/* .fdp-beats nimmt immer die volle Breite ein – die Profilkarten sind kein
   Layout-Element mehr, sondern ein fixiertes Overlay (siehe .fdp-profile-rail
   weiter unten), das über dem Content schwebt statt eine Spalte zu belegen. */

.fdp-beat {
	padding: var(--fdp-space-4) var(--fdp-space-3);
	min-height: 60vh;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--fdp-color-border);
	opacity: 0.6;
	transition: opacity 0.3s ease;
	background: var(--fdp-color-surface);
}

.fdp-beat.is-active {
	opacity: 1;
}

/* Sektions-Rhythmus: abwechselnd hell/getönt/dunkel für Abgrenzung beim Scrollen */
.fdp-beat--beweis,
.fdp-beat--einladung {
	background: var(--fdp-color-surface-tint);
}

.fdp-beat--vision {
	background: var(--fdp-color-surface-dark);
	border-bottom-color: transparent;
}

.fdp-beat--vision .fdp-beat__eyebrow,
.fdp-beat--vision .fdp-beat__headline {
	color: var(--fdp-color-on-dark);
}

.fdp-beat--vision .fdp-beat__lede {
	color: var(--fdp-color-on-dark-muted);
}

/* Gelber Akzentstrich unter der Vision-Headline statt Fließtext-Farbwechsel */
.fdp-beat--vision .fdp-beat__headline::after {
	content: "";
	display: block;
	width: 4rem;
	height: 4px;
	margin-top: var(--fdp-space-2);
	background: var(--fdp-color-yellow);
}

.fdp-beat__inner {
	max-width: 720px;
	margin: 0 auto;
	width: 100%;
}

.fdp-beat__inner--wide {
	max-width: 1080px;
}

/* Zweispaltiges Layout (Text + Platzhalter-/Beweisbild), z. B. im "Beweis"-Beat */
.fdp-beat__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fdp-space-3);
	align-items: center;
}

@media (min-width: 800px) {
	.fdp-beat__grid {
		grid-template-columns: 3fr 2fr;
		gap: var(--fdp-space-4);
	}
}

.fdp-beat__media img {
	width: 100%;
	height: auto;
	border-radius: 1rem;
}

/* Faktenliste (Beat "Beweis") */
.fdp-fact-list {
	list-style: none;
	margin: var(--fdp-space-2) 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--fdp-space-2);
}

.fdp-fact-list li {
	padding-left: var(--fdp-space-2);
	border-left: 3px solid var(--fdp-color-cyan);
	font-size: 1.05rem;
}

.fdp-fact-list__source {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.8rem;
	color: var(--fdp-color-muted);
}

/* Deutlich als Platzhalter erkennbar: gestrichelt statt durchgezogen, gedämpfter */
.fdp-fact-list--placeholder li {
	border-left-style: dashed;
	border-left-color: var(--fdp-color-muted);
	color: var(--fdp-color-muted);
}

.fdp-beat__subheadline {
	margin-top: var(--fdp-space-3);
	font-size: 1.2rem;
	color: var(--fdp-color-blue);
}

.fdp-beat__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	color: var(--fdp-color-blue);
	margin: 0 0 var(--fdp-space-1);
}

.fdp-beat__headline {
	font-size: clamp(1.75rem, 4vw, 3rem);
	line-height: 1.15;
	margin: 0 0 var(--fdp-space-2);
	color: var(--fdp-color-blue);
}

.fdp-beat__lede {
	font-size: 1.15rem;
	color: var(--fdp-color-muted);
}

.fdp-beat__aside {
	margin-top: var(--fdp-space-3);
	font-size: 0.9rem;
	color: var(--fdp-color-muted);
}

/* CTA – klassische FDP-Anmutung: gelbe Fläche, dunkelblaue Schrift */
.fdp-cta {
	display: inline-block;
	margin-top: var(--fdp-space-2);
	padding: 0.9rem 1.75rem;
	border-radius: 999px;
	background: var(--fdp-color-yellow);
	color: var(--fdp-color-blue);
	text-decoration: none;
	font-weight: 800;
	transition: background-color 0.15s ease;
}

.fdp-cta:hover,
.fdp-cta:focus-visible {
	background: var(--fdp-color-cyan);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Profilkarten als "Pull-Out"-Streifen: fixiert an der rechten Bildschirm-
   kante, schwebt über dem Content (kein Layout-Platz nötig). Im Ruhezustand
   ist nur das Foto sichtbar, bei Hover/Fokus/Tap zieht sich der ganze
   Streifen nach links heraus und zeigt Name + Kurzinfo auf der Fläche.
   -------------------------------------------------------------------------- */
:root {
	--fdp-tab-face-size: 4.5rem;
	--fdp-tab-detail-width: 11rem;
}

.fdp-profile-rail {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 40;
	pointer-events: none;
}

.fdp-profile-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.fdp-profile-card {
	pointer-events: auto;
	display: flex;
	align-items: stretch;
	height: var(--fdp-tab-face-size);
	width: calc(var(--fdp-tab-face-size) + var(--fdp-tab-detail-width));
	border-radius: 0.75rem 0 0 0.75rem;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	transform: translateX(var(--fdp-tab-detail-width));
	transition: transform 0.25s ease;
}

.fdp-profile-card:hover,
.fdp-profile-card:focus-within,
.fdp-profile-card.is-open {
	transform: translateX(0);
}

.fdp-profile-card__detail {
	flex: 0 0 var(--fdp-tab-detail-width);
	width: var(--fdp-tab-detail-width);
	background: var(--fdp-color-blue);
	color: var(--fdp-color-on-dark);
	padding: var(--fdp-space-2);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.fdp-profile-card__name {
	display: block;
	font-size: 0.9rem;
	font-weight: 700;
	margin: 0 0 0.2rem;
}

.fdp-profile-card__excerpt {
	display: block;
	font-size: 0.78rem;
	line-height: 1.3;
	color: var(--fdp-color-on-dark-muted);
}

.fdp-profile-card__face {
	flex: 0 0 var(--fdp-tab-face-size);
	width: var(--fdp-tab-face-size);
}

.fdp-profile-card__face img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fdp-profile-list__empty {
	position: fixed;
	top: 50%;
	right: var(--fdp-space-2);
	transform: translateY(-50%);
	max-width: 11rem;
	padding: var(--fdp-space-2);
	background: var(--fdp-color-bg);
	border: 1px solid var(--fdp-color-border);
	border-radius: 0.5rem;
	color: var(--fdp-color-muted);
	font-size: 0.8rem;
	z-index: 40;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   News-Slider: eigene Sektion nach "Beweis", bewusst weißer Hintergrund
   (Beitragsbilder liefern schon Farbe). Coverflow-Effekt: JS skaliert die
   Karten nach Abstand zur Mitte (main.js, initNewsSlider); CSS liefert das
   native Scroll-Snap-Verhalten für flüssiges Wischen/Ziehen.
   -------------------------------------------------------------------------- */
.fdp-news-section {
	background: var(--fdp-color-surface);
	padding: var(--fdp-space-4) 0;
}

.fdp-news-section .fdp-beat__inner {
	padding: 0 var(--fdp-space-3);
	margin-bottom: var(--fdp-space-2);
}

:root {
	--fdp-news-item-width: 200px;
	--fdp-news-gap: 1rem;
	--fdp-news-visible: 5; /* Ziel-Anzahl sichtbarer Kacheln auf breiten Bildschirmen */
}

/* Begrenztes Sichtfenster: max-width passt genau auf ~5 Kacheln + Pfeil-Gutter
   an jeder Seite. Auf schmaleren Screens greift automatisch die 100%-Breite
   des Elternelements – dann sind es entsprechend weniger sichtbare Kacheln,
   das lässt sich nicht für jede Bildschirmbreite hart auf "5" erzwingen. */
.fdp-news-slider {
	position: relative;
	max-width: calc(
		(var(--fdp-news-visible) * var(--fdp-news-item-width)) + ((var(--fdp-news-visible) - 1) * var(--fdp-news-gap)) + (2 * 3rem)
	);
	margin-inline: auto;
	padding-inline: 3rem; /* Gutter, in dem die Pfeile sitzen – kein Überlapp mit Content daneben */
}

.fdp-news-slider__track {
	display: flex;
	align-items: flex-start;
	gap: var(--fdp-news-gap);
	list-style: none;
	margin: 0;
	padding-block: var(--fdp-space-2);
	padding-inline: calc(50% - (var(--fdp-news-item-width) / 2));
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	cursor: grab;

	/* Scrollbar unsichtbar, aber Element bleibt scrollbar (alle gängigen Browser) */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* Alt-Edge/IE */
}

.fdp-news-slider__track::-webkit-scrollbar {
	display: none; /* Chrome, Safari, neues Edge */
	width: 0;
	height: 0;
}

.fdp-news-slider__track:active {
	cursor: grabbing;
}

.fdp-news-slider__item {
	flex: 0 0 var(--fdp-news-item-width);
	scroll-snap-align: center;
	transform-origin: center;
	transition: transform 0.15s ease, opacity 0.15s ease;
	will-change: transform, opacity;
}

.fdp-news-slider__item a {
	display: block;
	text-decoration: none;
	color: var(--fdp-color-text);
	border-radius: 1rem;
	overflow: hidden;
	border: 1px solid var(--fdp-color-border);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.fdp-news-slider__item img {
	width: 100%;
	height: auto;
	display: block;
}

.fdp-news-slider__title {
	display: block;
	padding: var(--fdp-space-1) var(--fdp-space-2);
	font-size: 0.9rem;
	font-weight: 600;
}

/* "Mehr News"-Kachel: bewusst andersartig (Markenfarbe), keine Foto-Teaser-Optik */
.fdp-news-slider__item--more a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 100%;
	min-height: 9rem;
	background: var(--fdp-color-blue);
	color: var(--fdp-color-on-dark);
	text-align: center;
	padding: var(--fdp-space-2);
}

.fdp-news-slider__item--more .fdp-news-slider__title {
	padding: 0;
	color: inherit;
}

.fdp-news-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	border: 1px solid var(--fdp-color-border);
	background: var(--fdp-color-bg);
	color: var(--fdp-color-blue);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
}

.fdp-news-slider__nav:hover,
.fdp-news-slider__nav:focus-visible {
	background: var(--fdp-color-cyan);
	color: #fff;
}

/* Pfeile sitzen im Gutter direkt neben den Kacheln, nicht am Bildschirmrand */
.fdp-news-slider__nav--prev {
	left: 0.25rem;
}

.fdp-news-slider__nav--next {
	right: 0.25rem;
}

@media (max-width: 640px) {
	.fdp-news-slider {
		padding-inline: var(--fdp-space-2);
	}

	.fdp-news-slider__nav {
		display: none; /* auf Touch-Geräten reicht Wischen, Pfeile würden Karten verdecken */
	}
}

/* --------------------------------------------------------------------------
   Generische Unterseiten
   -------------------------------------------------------------------------- */
.fdp-page__inner {
	max-width: 720px;
	margin: 0 auto;
	padding: var(--fdp-space-3);
}

.fdp-page__title {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.fdp-page__meta {
	color: var(--fdp-color-muted);
	font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
	padding: var(--fdp-space-3);
	border-top: 1px solid var(--fdp-color-border);
	text-align: center;
	color: var(--fdp-color-muted);
	font-size: 0.85rem;
}