/*
Theme Name:  Küstenwind
Theme URI:   https://example.org/kuestenwind
Author:      Kampagnen-Team
Description: Wahlkampf-Theme für eine progressive Landtagskandidatur in Mecklenburg-Vorpommern. Farbpalette nach der Landesflagge (Rot, Marineblau, Gold-Akzent), fluide Typografie, großzügiger Weißraum, Full-Width-Slider auf der Startseite. Logo und alle Bilder sind über den Customizer austauschbar.
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kuestenwind
Tags:        one-column, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1. Fonts (lokal, DSGVO-konform — kein Google-CDN)
   ========================================================================== */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/montserrat-latin-wght-normal.woff2") format("woff2-variations");
}

@font-face {
	font-family: "Montserrat";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/montserrat-latin-wght-italic.woff2") format("woff2-variations");
}

/* ==========================================================================
   2. Design-Token
   ========================================================================== */

:root {
	/* Landesfarben Mecklenburg-Vorpommern */
	--kw-rot: #e2001a;
	--kw-rot-dunkel: #b30015;
	--kw-marine: #102a4c;
	--kw-marine-tief: #0a1d36;
	--kw-gold: #ffc20e;

	--kw-tinte: #15233a;        /* Fließtext */
	--kw-grau: #5a6679;         /* Sekundärtext */
	--kw-papier: #ffffff;
	--kw-papier-sanft: #f6f7f9;
	--kw-linie: #e4e8ee;

	/* Fluide Typografie */
	--fs-xs:   clamp(0.78rem, 0.74rem + 0.2vw, 0.875rem);
	--fs-s:    clamp(0.92rem, 0.88rem + 0.25vw, 1.05rem);
	--fs-base: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
	--fs-m:    clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
	--fs-l:    clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
	--fs-xl:   clamp(2.1rem, 1.6rem + 2.6vw, 3.6rem);
	--fs-xxl:  clamp(2.7rem, 1.9rem + 4.2vw, 5.2rem);

	/* Fluider Weißraum */
	--space-xs: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
	--space-s:  clamp(1rem, 0.85rem + 0.7vw, 1.5rem);
	--space-m:  clamp(1.75rem, 1.4rem + 1.6vw, 3rem);
	--space-l:  clamp(3rem, 2.2rem + 3.5vw, 5.5rem);
	--space-xl: clamp(4.5rem, 3.2rem + 6vw, 9rem);

	--content-breit: 75rem;
	--content-text: 44rem;
	--radius: 0.75rem;

	--font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ==========================================================================
   3. Basis
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: 400;
	line-height: 1.7;
	color: var(--kw-tinte);
	background: var(--kw-papier);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.022em;
	color: var(--kw-marine);
	margin: 0 0 var(--space-s);
	text-wrap: balance;
}

h1 { font-size: var(--fs-xxl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-l); }
h4 { font-size: var(--fs-m); }

p {
	margin: 0 0 var(--space-s);
}

a {
	color: var(--kw-rot);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--kw-rot-dunkel);
}

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

::selection {
	background: var(--kw-rot);
	color: #fff;
}

:focus-visible {
	outline: 3px solid var(--kw-gold);
	outline-offset: 3px;
}

/* ==========================================================================
   4. Layout-Helfer
   ========================================================================== */

.kw-container {
	width: min(100% - 2 * var(--space-m), var(--content-breit));
	margin-inline: auto;
}

.kw-section {
	padding-block: var(--space-xl);
}

.kw-section--sanft {
	background: var(--kw-papier-sanft);
}

.kw-section--marine {
	background: var(--kw-marine);
	color: #fff;
}

.kw-section--marine h2,
.kw-section--marine h3 {
	color: #fff;
}

.kw-kicker {
	display: inline-block;
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kw-rot);
	margin-bottom: var(--space-xs);
}

.kw-section--marine .kw-kicker {
	color: var(--kw-gold);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: var(--space-s);
	top: -100%;
	z-index: 200;
	background: var(--kw-marine);
	color: #fff;
	padding: 0.6em 1.2em;
	border-radius: 0 0 var(--radius) var(--radius);
	transition: top 0.2s ease;
}

.skip-link:focus {
	top: 0;
	color: #fff;
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.kw-button,
.wp-block-button__link {
	display: inline-block;
	font-family: var(--font-heading);
	font-size: var(--fs-s);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: #fff;
	background: var(--kw-rot);
	padding: 0.85em 1.9em;
	border: 2px solid var(--kw-rot);
	border-radius: 100px;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.kw-button:hover {
	color: #fff;
	background: var(--kw-rot-dunkel);
	border-color: var(--kw-rot-dunkel);
	transform: translateY(-2px);
}

.kw-button--ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.75);
}

.kw-button--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
}

.kw-button--marine {
	background: var(--kw-marine);
	border-color: var(--kw-marine);
}

.kw-button--marine:hover {
	background: var(--kw-marine-tief);
	border-color: var(--kw-marine-tief);
}

/* ==========================================================================
   6. Header
   ========================================================================== */

.kw-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--kw-linie);
}

.kw-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
	padding-block: var(--space-xs);
	min-height: 4.25rem;
}

.kw-branding {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
}

.kw-branding .custom-logo {
	max-height: 3.25rem;
	width: auto;
}

.kw-branding__name {
	font-family: var(--font-heading);
	font-size: var(--fs-m);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--kw-marine);
	text-decoration: none;
}

.kw-branding__name:hover {
	color: var(--kw-rot);
}

.kw-nav ul {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2.25rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.kw-nav a {
	font-family: var(--font-heading);
	font-size: var(--fs-s);
	font-weight: 600;
	color: var(--kw-marine);
	text-decoration: none;
	padding-block: 0.4em;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.kw-nav a:hover,
.kw-nav .current-menu-item > a {
	color: var(--kw-rot);
	border-bottom-color: var(--kw-rot);
}

.kw-header__cta {
	flex-shrink: 0;
}

.kw-nav-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 0.5rem;
	cursor: pointer;
}

.kw-nav-toggle__bar {
	display: block;
	width: 26px;
	height: 3px;
	margin: 5px 0;
	border-radius: 2px;
	background: var(--kw-marine);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

@media (max-width: 56rem) {
	.kw-nav-toggle {
		display: block;
	}

	.kw-header__cta {
		display: none;
	}

	.kw-nav {
		position: absolute;
		inset: 100% 0 auto 0;
		background: #fff;
		border-bottom: 1px solid var(--kw-linie);
		box-shadow: 0 24px 48px rgba(16, 42, 76, 0.12);
		display: none;
	}

	.kw-nav.is-open {
		display: block;
	}

	.kw-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--space-s) var(--space-m) var(--space-m);
	}

	.kw-nav a {
		display: block;
		padding: 0.8em 0;
		font-size: var(--fs-m);
		border-bottom: 1px solid var(--kw-linie);
	}

	.kw-nav-toggle[aria-expanded="true"] .kw-nav-toggle__bar:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.kw-nav-toggle[aria-expanded="true"] .kw-nav-toggle__bar:nth-child(2) {
		opacity: 0;
	}

	.kw-nav-toggle[aria-expanded="true"] .kw-nav-toggle__bar:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}
}

/* ==========================================================================
   7. Slider (Startseite, full width)
   ========================================================================== */

.kw-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--kw-marine-tief);
}

.kw-slider__track {
	display: flex;
	transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1);
}

.kw-slide {
	position: relative;
	flex: 0 0 100%;
	min-height: clamp(28rem, 78vh, 52rem);
	display: flex;
	align-items: flex-end;
}

.kw-slide__bild {
	position: absolute;
	inset: 0;
}

.kw-slide__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kw-slide__bild::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(20deg, rgba(10, 29, 54, 0.88) 0%, rgba(10, 29, 54, 0.42) 45%, rgba(10, 29, 54, 0.05) 75%),
		linear-gradient(0deg, rgba(226, 0, 26, 0.16), rgba(226, 0, 26, 0));
}

.kw-slide__inhalt {
	position: relative;
	z-index: 2;
	width: min(100% - 2 * var(--space-m), var(--content-breit));
	margin-inline: auto;
	padding-block: var(--space-l) var(--space-xl);
	max-width: var(--content-breit);
}

.kw-slide__kicker {
	display: inline-block;
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #fff;
	background: var(--kw-rot);
	padding: 0.45em 1em;
	border-radius: 100px;
	margin-bottom: var(--space-s);
}

.kw-slide__titel {
	color: #fff;
	font-size: var(--fs-xxl);
	max-width: 16em;
	margin-bottom: var(--space-s);
}

.kw-slide__text {
	color: rgba(255, 255, 255, 0.92);
	font-size: var(--fs-m);
	font-weight: 500;
	line-height: 1.5;
	max-width: 32em;
	margin-bottom: var(--space-m);
}

.kw-slide__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

/* Slider-Steuerung */

.kw-slider__pfeil {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 3rem;
	height: 3rem;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: background 0.2s ease;
}

.kw-slider__pfeil:hover {
	background: var(--kw-rot);
	border-color: var(--kw-rot);
}

.kw-slider__pfeil svg {
	width: 1.25rem;
	height: 1.25rem;
}

.kw-slider__pfeil--zurueck { left: var(--space-s); }
.kw-slider__pfeil--vor { right: var(--space-s); }

.kw-slider__punkte {
	position: absolute;
	bottom: var(--space-s);
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	gap: 0.6rem;
}

.kw-slider__punkt {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 100px;
	border: 0;
	padding: 0;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: background 0.25s ease, width 0.25s ease;
}

.kw-slider__punkt[aria-current="true"] {
	background: var(--kw-gold);
	width: 2.25rem;
}

@media (max-width: 48rem) {
	.kw-slider__pfeil {
		display: none;
	}
}

/* ==========================================================================
   8. Startseiten-Sektionen
   ========================================================================== */

/* Vorstellung */
.kw-intro__raster {
	display: grid;
	gap: var(--space-l);
	align-items: center;
}

@media (min-width: 56rem) {
	.kw-intro__raster {
		grid-template-columns: 5fr 6fr;
	}
}

.kw-intro__bildrahmen {
	position: relative;
}

.kw-intro__bildrahmen img {
	width: 100%;
	border-radius: var(--radius);
	box-shadow: 0 32px 64px rgba(16, 42, 76, 0.18);
}

.kw-intro__bildrahmen::before {
	content: "";
	position: absolute;
	inset: var(--space-s) auto auto var(--space-s);
	width: 100%;
	height: 100%;
	border-radius: var(--radius);
	background: linear-gradient(135deg, var(--kw-rot), var(--kw-marine));
	z-index: -1;
	opacity: 0.9;
}

.kw-intro__text {
	font-size: var(--fs-m);
	font-weight: 500;
	line-height: 1.6;
	color: var(--kw-grau);
}

/* Themen-Karten */
.kw-themen__raster {
	display: grid;
	gap: var(--space-m);
	margin-top: var(--space-l);
}

@media (min-width: 48rem) {
	.kw-themen__raster {
		grid-template-columns: repeat(3, 1fr);
	}
}

.kw-karte {
	background: #fff;
	border: 1px solid var(--kw-linie);
	border-radius: var(--radius);
	padding: var(--space-m);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.kw-karte:hover {
	transform: translateY(-6px);
	box-shadow: 0 28px 56px rgba(16, 42, 76, 0.14);
}

.kw-karte__nummer {
	font-family: var(--font-heading);
	font-size: var(--fs-l);
	font-weight: 800;
	color: var(--kw-rot);
	line-height: 1;
}

.kw-karte h3 {
	font-size: var(--fs-m);
	margin-bottom: 0;
}

.kw-karte p {
	color: var(--kw-grau);
	font-size: var(--fs-s);
	margin: 0;
}

/* Aufruf-Band */
.kw-aufruf {
	background:
		radial-gradient(80rem 40rem at 110% -20%, rgba(226, 0, 26, 0.35), transparent 60%),
		radial-gradient(60rem 30rem at -10% 120%, rgba(255, 194, 14, 0.18), transparent 60%),
		var(--kw-marine);
	color: #fff;
	text-align: center;
}

.kw-aufruf h2 {
	color: #fff;
	max-width: 18em;
	margin-inline: auto;
}

.kw-aufruf p {
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--fs-m);
	max-width: 36em;
	margin: 0 auto var(--space-m);
}

.kw-aufruf__aktionen {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-xs);
}

/* Aktuelles */
.kw-aktuelles__raster {
	display: grid;
	gap: var(--space-m);
	margin-top: var(--space-l);
}

@media (min-width: 48rem) {
	.kw-aktuelles__raster {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   9. Beiträge & Seiten
   ========================================================================== */

.kw-seitenkopf {
	background: var(--kw-papier-sanft);
	padding-block: var(--space-l);
}

.kw-seitenkopf h1 {
	margin-bottom: 0;
}

.kw-inhalt {
	padding-block: var(--space-l) var(--space-xl);
}

.kw-prosa {
	max-width: var(--content-text);
	margin-inline: auto;
}

.kw-prosa > * + * {
	margin-top: var(--space-s);
}

.kw-prosa h2,
.kw-prosa h3 {
	margin-top: var(--space-m);
}

.kw-prosa img,
.kw-prosa .wp-block-image img {
	border-radius: var(--radius);
}

.kw-prosa blockquote {
	margin: var(--space-m) 0;
	padding-left: var(--space-s);
	border-left: 4px solid var(--kw-rot);
	font-family: var(--font-heading);
	font-size: var(--fs-m);
	font-weight: 600;
	color: var(--kw-marine);
}

.alignwide {
	width: min(100vw - 2 * var(--space-m), var(--content-breit));
	margin-inline: calc(50% - min(100vw - 2 * var(--space-m), var(--content-breit)) / 2);
}

.alignfull {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* Beitragskarte */
.kw-beitragskarte {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--kw-linie);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.kw-beitragskarte:hover {
	transform: translateY(-6px);
	box-shadow: 0 28px 56px rgba(16, 42, 76, 0.14);
}

.kw-beitragskarte__bild img {
	aspect-ratio: 16 / 10;
	width: 100%;
	object-fit: cover;
}

.kw-beitragskarte__rumpf {
	padding: var(--space-m);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.kw-beitragskarte__datum {
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kw-grau);
}

.kw-beitragskarte h2,
.kw-beitragskarte h3 {
	font-size: var(--fs-m);
	margin: 0;
}

.kw-beitragskarte a {
	color: var(--kw-marine);
	text-decoration: none;
}

.kw-beitragskarte a:hover {
	color: var(--kw-rot);
}

.kw-archivraster {
	display: grid;
	gap: var(--space-m);
	padding-block: var(--space-l) var(--space-xl);
}

@media (min-width: 40rem) {
	.kw-archivraster {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.kw-archivraster {
		grid-template-columns: repeat(3, 1fr);
	}
}

.kw-meta {
	font-size: var(--fs-s);
	color: var(--kw-grau);
	margin-bottom: var(--space-m);
}

.kw-seitennav {
	display: flex;
	justify-content: center;
	gap: var(--space-xs);
	padding-bottom: var(--space-xl);
}

.kw-seitennav .page-numbers {
	font-family: var(--font-heading);
	font-weight: 700;
	padding: 0.5em 1em;
	border-radius: 100px;
	text-decoration: none;
	color: var(--kw-marine);
}

.kw-seitennav .page-numbers.current {
	background: var(--kw-rot);
	color: #fff;
}

/* ==========================================================================
   10. Footer
   ========================================================================== */

.kw-footer {
	background: var(--kw-marine-tief);
	color: rgba(255, 255, 255, 0.8);
	padding-block: var(--space-l) var(--space-m);
	font-size: var(--fs-s);
}

.kw-footer a {
	color: #fff;
	text-decoration: none;
}

.kw-footer a:hover {
	color: var(--kw-gold);
}

.kw-footer__raster {
	display: grid;
	gap: var(--space-m);
	padding-bottom: var(--space-m);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

@media (min-width: 48rem) {
	.kw-footer__raster {
		grid-template-columns: 2fr 1fr 1fr;
	}
}

.kw-footer__marke {
	font-family: var(--font-heading);
	font-size: var(--fs-m);
	font-weight: 800;
	color: #fff;
	margin-bottom: var(--space-xs);
}

.kw-footer h4 {
	color: #fff;
	font-size: var(--fs-s);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.kw-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kw-footer li {
	margin-bottom: 0.5em;
}

.kw-footer__unten {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-xs);
	padding-top: var(--space-m);
	font-size: var(--fs-xs);
	color: rgba(255, 255, 255, 0.55);
}

.kw-footer__balken {
	height: 6px;
	background: linear-gradient(90deg, var(--kw-marine) 0 25%, var(--kw-gold) 0 50%, var(--kw-rot) 0 100%);
}