/**
 * Fünftes Viertel: eigene Regeln.
 *
 * Hier kommt alles hin, was die theme.json nicht abbilden kann. Farben,
 * Schriftgrößen und Abstände gehören NICHT hierher, sondern in die
 * theme.json, sonst gibt es zwei Quellen der Wahrheit.
 *
 * Diese Datei ist absichtlich fast leer. Sie existiert, damit wir sie über
 * den Theme-Datei-Editor im Backend bearbeiten können, ohne jedes Mal ein
 * neues ZIP einzuspielen.
 */

/* Fokus sichtbar halten, auch wenn ein Design das gern versteckt. */
:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Bilder sollen nie aus ihrem Container laufen. */
img,
video {
	max-width: 100%;
	height: auto;
}

/* Lange Wörter im Deutschen brechen lassen, statt Layouts zu sprengen. */
h1,
h2,
h3 {
	hyphens: auto;
	overflow-wrap: break-word;
}

/* ------------------------------------------------------------------
   Startseite nach Wireframe (19.09.2026)
   Klassen fürs Feld "Zusätzliche CSS-Klassen" im Editor.
   ------------------------------------------------------------------ */

/* Display-Headlines: Sofia Sans Extra Condensed 800, Versalien. Web-Ersatz für
   Söhne Schmal (gleiche Akzidenz-Linie, ähnliche Schmalheit). Stand 19.09.2026,
   Vergleich mit Antonio, Oswald und Sofia Sans Condensed unter /styleguide. */
.fv-display {
	font-family: var(--wp--preset--font-family--sofia-sans-extra-condensed);
	text-transform: uppercase;
	line-height: 0.9;
	letter-spacing: 0.005em;
	font-weight: 800;
	hyphens: manual;
	overflow-wrap: normal;
	word-break: normal;
}

.fv-hero-title {
	font-size: clamp(3.5rem, 8vw, 8.5rem);
}

.fv-h2 {
	font-size: clamp(2.5rem, 5.2vw, 5rem);
}

/* Mono-Labels (Geist Mono), Ersatz für die Handschrift im Wireframe. */
.fv-mono,
.fv-mono li {
	font-family: var(--wp--preset--font-family--geist-mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.fv-eyebrow {
	font-family: var(--wp--preset--font-family--geist-mono);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted);
}

/* Liste mit Pfeilen statt Bullets. */
.fv-list-arrows {
	list-style: none;
	padding-left: 0;
}

.fv-list-arrows li::before {
	content: "→ ";
}

/* Reihe mit dünnen Trennlinien (Was passiert hier, Partner). */
.fv-divider-row > * + * {
	border-left: 1px solid var(--wp--preset--color--line);
	padding-left: var(--wp--preset--spacing--30);
}

/* Tag (Summer / Winter). */
.fv-tag {
	display: inline-block;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.2em 0.6em;
}

/* Gestrichelter Kasten ("Dein Logo hier?"). */
.fv-dashed {
	border: 2px dashed var(--wp--preset--color--muted);
	padding: 0.75rem 1.25rem;
}

/* Partner-Logos als Text, bis die echten Logos da sind. */
.fv-partner-logo {
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	margin: 0;
}

/* Karten-Platzhalter. */
.fv-mapbox {
	border: 1px solid var(--wp--preset--color--line);
}

/* Trennlinie zwischen den Sektionen wie im Wireframe. */
.fv-section {
	border-top: 1px solid var(--wp--preset--color--line);
}

/* Bilder bündig, keine Inline-Lücke. */
.wp-block-image img {
	display: block;
}


/* ------------------------------------------------------------------
   Bilder bis an den Seitenrand (wie im Wireframe).
   Prozent-Margins beziehen sich auf die Breite des Spalten-Containers
   (alignwide), deshalb trifft (100vw - 100%) / -2 genau den Viewportrand.
   ------------------------------------------------------------------ */

.wp-site-blocks {
	overflow-x: clip;
}

.fv-bleed-right > .wp-block-column:last-child {
	margin-right: calc((100vw - 100%) / -2);
}

.fv-bleed-left > .wp-block-column:first-child {
	margin-left: calc((100vw - 100%) / -2);
}

.fv-bleed-right > .wp-block-column:last-child > .wp-block-image img,
.fv-bleed-left > .wp-block-column:first-child > .wp-block-image img {
	width: 100%;
}

/* Auf schmalen Schirmen laufen die Bilder über die volle Breite. */
@media (max-width: 781px) {
	.fv-bleed-right > .wp-block-column:last-child,
	.fv-bleed-left > .wp-block-column:first-child {
		margin-left: calc((100vw - 100%) / -2);
		margin-right: calc((100vw - 100%) / -2);
	}
}

/* ------------------------------------------------------------------
   Navigation: Burger mit Label "Menu" wie im Wireframe, Overlay in Skye.
   ------------------------------------------------------------------ */

/* Sanftes Springen zu den Ankern. */
html {
	scroll-behavior: smooth;
}

:target,
[id] {
	scroll-margin-top: var(--wp--preset--spacing--40);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Öffner: Wort + Burger, in Mono-Versalien. */
.fv-nav .wp-block-navigation__responsive-container-open {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.fv-nav .wp-block-navigation__responsive-container-open::before {
	content: "Menu";
}

/* Overlay: Links groß und linksbündig, wie die Sektionstitel. */
.fv-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

/* Links im Overlay linksbündig auf der Contentkante, wie die Headlines. */
.fv-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	max-width: 76rem;
	margin-inline: auto;
}

.fv-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	justify-content: center;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
}

.fv-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: clamp(2rem, 7vw, 3.5rem);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 1.05;
	text-decoration: none;
}

.fv-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: 0.12em;
}

.fv-nav .wp-block-navigation__responsive-container-close {
	font-family: var(--wp--preset--font-family--geist-mono);
}

/* ------------------------------------------------------------------
   Baustellenseite: kein Menü (die Anker zeigen auf die versteckte
   Startseite) und kein kleines Logo über dem großen Schriftzug.
   ------------------------------------------------------------------ */

body:has(.fv-baustelle) header.wp-block-template-part {
	display: none;
}

body:has(.fv-baustelle) .fv-nav {
	display: none;
}

/* ------------------------------------------------------------------
   Baustellenseite v2 (19.09.2026): drei Zonen übereinander, die erste
   Bildschirmhöhe ist komplett belegt: Infozeile oben, Wortmarke plus
   Headline in der Mitte, Laufschrift unten am Rand. Der Footer folgt
   darunter wie auf jeder anderen Seite.
   ------------------------------------------------------------------ */

.fv-baustelle--v2 {
	display: grid;
	grid-template-rows: auto 1fr auto;
	row-gap: var(--wp--preset--spacing--30);
	min-height: 100svh;
	box-sizing: border-box;
}

/* Auto-Margins lassen Grid-Kinder auf Inhaltsbreite schrumpfen, deshalb
   width: 100 % (die Constrained-max-width bleibt). Die Laufschrift ist
   alignfull und bekommt ihre Breite über die WordPress-Layoutregeln. */
.fv-baustelle--v2 > :not(.alignfull) {
	width: 100%;
	min-width: 0;
}

/* Infozeile oben: wenn sie auf dem Handy umbricht, eng untereinander. */
.fv-baustelle__top {
	row-gap: 0.5rem;
}

.fv-baustelle__main {
	align-self: center;
}

.fv-baustelle__lead {
	max-width: 36rem;
	text-wrap: pretty;
}

/* Social-Icons in der Aktionszeile: kleiner Abstand, kein Bottom-Margin. */
.fv-baustelle__actions .wp-block-social-links {
	gap: 0.5rem;
	margin: 0;
	flex-wrap: nowrap;
}

/* Auf dem Handy weniger Innenabstand im Cut-out, sonst wird es eng. */
@media (max-width: 781px) {
	.fv-baustelle__main > .fv-cutout {
		padding-left: 0.85rem;
		padding-right: 0.85rem;
	}
}

.fv-baustelle__actions .wp-block-buttons {
	margin: 0;
}

/* Cut-outs: solide Skye-Flächen, auf denen die Infos sitzen, während die
   Sektion dahinter das Buchstaben-Pattern trägt. Eckig, kein Radius. */
.fv-cutout {
	background-color: var(--wp--preset--color--base);
}

.fv-baustelle__top > .fv-cutout {
	padding: 0.55rem 0.85rem;
	margin: 0;
}

.fv-baustelle--v2.fv-pattern {
	--fv-pattern-size: 40rem;
}

/* Auf dem Handy nur ein Pattern-Band oben, hinter den beiden Infozeilen.
   Darunter ist die Fläche ruhig: eine zweite Ebene in Skye deckt das
   Pattern ab der Bandhöhe ab. Band = Padding oben + Infozeilen + Abstand;
   wenn die Zeilen anders umbrechen, --fv-hero-band anpassen. */
@media (max-width: 781px) {
	.fv-baustelle--v2.fv-pattern {
		--fv-pattern-size: 24rem;
		--fv-hero-band: 10.1rem;
		padding-top: var(--wp--preset--spacing--40) !important;
		background-image:
			linear-gradient(to bottom, transparent var(--fv-hero-band), var(--wp--preset--color--base) var(--fv-hero-band)),
			var(--fv-pattern-image);
		background-size: auto, var(--fv-pattern-size);
		background-position: 0 0, 0 -3rem;
	}

	/* Ohne Pattern dahinter braucht der Hauptblock keinen Kasten. */
	.fv-baustelle__main > .fv-cutout {
		padding-top: 0;
		padding-bottom: 0;
	}
}

/* Laufschrift am unteren Rand, mit Linie oben und unten. */
.fv-baustelle__marquee {
	--fv-marquee-duration: 48s;
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-block: 0.22em;
	font-size: clamp(1.6rem, 3.4vw, 2.6rem);
	color: var(--wp--preset--color--contrast);
	font-style: italic;
	position: relative;
	background-color: var(--wp--preset--color--base);
}

/* Weiche Kanten links und rechts statt hartem Schnitt am Fensterrand:
   zwei Verläufe in Skye über dem Text, die Linien bleiben unberührt. */
.fv-baustelle__marquee::before,
.fv-baustelle__marquee::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: min(7rem, 18vw);
	pointer-events: none;
	z-index: 1;
}

.fv-baustelle__marquee::before {
	left: 0;
	background: linear-gradient(to right, var(--wp--preset--color--base), transparent);
}

.fv-baustelle__marquee::after {
	right: 0;
	background: linear-gradient(to left, var(--wp--preset--color--base), transparent);
}

/* Drei Bänder übereinander: gemeinsamer Rahmen, je eine Linie darunter,
   alle weiß, das mittlere läuft rückwärts. Tempo je Band über
   --fv-marquee-duration im Block-Markup (30s / 38s / 26s). */
.fv-baustelle__bands {
	background-color: var(--wp--preset--color--base);
	border-top: 1px solid var(--wp--preset--color--line);
	/* Grid-Item: sonst würde die Laufschrift-Breite die Kachel aufziehen. */
	min-width: 0;
	overflow: hidden;
}

.fv-baustelle__bands .fv-baustelle__marquee {
	border-top: 0;
}

.fv-baustelle__marquee--reverse .fv-marquee__track {
	animation-direction: reverse;
}

/* Die Bänder laufen beim Hover weiter: die generische Laufschrift in
   animations.css hält beim Hover an, hier wird das überschrieben. */
.fv-baustelle__bands .fv-baustelle__marquee:hover .fv-marquee__track {
	animation-play-state: running;
}

/* Footer direkt unter der Laufschrift braucht keine zweite Linie. */
body:has(.fv-baustelle--v2) footer.wp-block-template-part {
	border-top: 0;
}

@media (prefers-reduced-motion: reduce) {
	.fv-baustelle__marquee .fv-marquee__track {
		animation: none;
	}
}

/* ------------------------------------------------------------------
   Buchstaben-Pattern aus der Wortmarke (19.09.2026). Quelle und weitere
   Farbvarianten in Dropbox: 01_BrandDesign/04_GraphicAssets/Pattern/.
   Weiße Buchstaben auf Skye, Kachel 1200 x 1200 als Data-URI. Im Editor
   auf eine Gruppe setzen; --fv-pattern-size steuert die Dichte.
   ------------------------------------------------------------------ */

.fv-pattern {
	--fv-pattern-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%201200'%20width='1200'%20height='1200'%3E%3Cdefs%3E%3Cg%20id='gF1'%20fill='%23FFFFFF'%20transform='translate(-487.98%20-406.45)'%3E%3Cpath%20d='M515.03,380.8c-7.81,4.21-15.49,8.62-23.12,13.11-.41-1.29-.83-2.58-1.26-3.86-.77-2.28-1.27-5.08-2.62-7.1-.4-.6-.7-1.07-.95-1.45,1.64-1.44,3.25-2.93,4.97-4.29,9.41-7.47,20.18-13.36,30.85-18.79,20.02-10.19,2.52-40.38-17.44-30.21-21.06,10.72-59.94,29.73-53.34,59.02,1.5,6.65,5.2,12.72,7.13,19.33.58,1.97,1.17,3.91,1.79,5.84-5.89,3.53-11.8,7.05-17.76,10.49-19.44,11.23-2.02,41.46,17.44,30.21,4.59-2.66,9.15-5.36,13.71-8.07,5.69,10.99,12.12,21.6,17.58,32.78,9.86,20.18,40.03,2.65,30.21-17.44-5.59-11.43-12.14-21.99-18.1-33.15,9.35-5.56,18.76-11.01,28.35-16.19,19.77-10.67,2.31-40.87-17.44-30.21Z'/%3E%3C/g%3E%3Cg%20id='gUE'%20fill='%23FFFFFF'%20transform='translate(-636.21%20-365.28)'%3E%3Cpath%20d='M675.55,323.63c-8.19-2.29-20.1,3.01-21.36,12.33-1.86,13.79-1.13,27.19-1.94,41.17-.48,8.27-1.07,16.84-1.95,25.08-.64,6.03-4.61,13.64-4.26,19.56,0,.09-.01.15-.01.23-1.11-1.03-2.06-2.2-2.81-3.52-4.05-5.49-7.21-11.79-9.92-18.02-6.84-15.7-12.66-32.85-14.06-49.99-1.82-22.26-36.72-22.57-34.89-.19,1.99,24.29,9.35,47.78,19.68,69.82,9.43,20.14,22.8,39.16,47.25,36.48,45.72-5.01,32.55-81.51,36.62-111.58,1.27-9.4-2.45-18.6-12.33-21.36Z'/%3E%3Cpath%20d='M603.89,309.34c8.91-.8,17.75-.71,26.68-.45,3.84.11,7.69.59,11.52.67,3.7.08,7.59-1.23,11.16-.84,9.37,1.03,17.49-8.63,17.54-17.35.06-10.25-7.96-16.5-17.35-17.54-3.88-.43-7.41.63-11.16.84-3.71.21-7.78-.56-11.52-.67-8.93-.26-17.78-.35-26.68.45-9.38.84-17.48,7.31-17.54,17.35-.05,8.73,7.93,18.38,17.35,17.54h0Z'/%3E%3C/g%3E%3Cg%20id='gN'%20fill='%23FFFFFF'%20transform='translate(-815.77%20-392.49)'%3E%3Cpath%20d='M851.65,328.52c-3.67,20.9-8.38,42.82-12.95,64.02-2.62-5.36-5.24-10.72-8-16.01-5.4-10.32-10.31-19.89-16.39-29.66-5.87-9.45-9.96-20.14-22.58-21.64-11-1.3-18.3,6.89-22.5,16.04-4.88,10.65-10.04,21.85-13.53,33.02-7.52,24.07-9.75,52.82-9.81,77.92-.06,22.49,34.84,22.65,34.89.19.05-19.86,3-38.98,6.44-58.49,1.12-6.38,2.79-11.87,5-17.62,0,.01.02.02.02.04,5.58,10.26,10.34,21.39,15.27,32.01,7.2,15.51,14.64,37.45,28.84,47.58,5.09,3.63,12.2,2.49,17.36-.05,10.23-5.04,10.12-15.35,12.23-25.08,2.76-12.77,6-25.42,8.79-38.18,4-18.29,7.39-36.59,10.62-55.04,3.85-21.97-29.81-31.18-33.7-9.03ZM801.86,354.75c.11-.1.12-.1,0,0h0Z'/%3E%3C/g%3E%3Cg%20id='gF2'%20fill='%23FFFFFF'%20transform='translate(-978.24%20-392.73)'%3E%3Cpath%20d='M1009.53,368.08c-7.15,3.8-15.25,6.91-23.4,9.57-.33-4.69-.92-9.37-.98-14.03-.03-2.16,1.48-6.96.17-6.63,3.71-2.64,10.37-4.7,13.71-6.65,3.34-1.95,6.31-4.19,10.15-5.02,21.99-4.77,13.1-38.51-8.79-33.77-11.64,2.52-24.05,10.6-34.18,16.67-12.19,7.3-15.82,19.51-15.96,33.07-.1,9.35.33,18.73,1.02,28.11-7.77,3.59-15.2,7.88-22.53,12.79-18.56,12.42-1.26,42.73,17.44,30.21,2.92-1.95,5.9-3.71,8.93-5.34,1.22,10.21,2.47,20.39,3.5,30.53,2.24,22.16,37.15,22.51,34.89.19-1.49-14.71-3.48-29.5-5-44.29,13.03-4.4,26.14-8.65,38.46-15.2,19.84-10.54,2.37-40.74-17.44-30.21Z'/%3E%3C/g%3E%3Cg%20id='gT1'%20fill='%23FFFFFF'%20transform='translate(-1129.55%20-402.85)'%3E%3Cpath%20d='M1161.74,330.06c-10.54-1.03-19.89-5.7-30.41-6.95-13.11-1.56-24.8-1.36-37.81,1.23-22.07,4.39-13.15,38.13,8.79,33.77,2.96-.59,5.84-.9,8.67-1.02-4.94,16.3-9.22,32.79-14.66,48.97-6.73,20.04-8.21,39.93-10.47,60.74-2.43,22.35,32.49,22.31,34.89.19,2.11-19.47,4.33-37.37,10.71-56.06,5.47-16.02,9.45-32.47,14.4-48.64,5.09,1.13,10.28,2.14,15.69,2.67,22.38,2.18,22.37-32.73.19-34.89Z'/%3E%3C/g%3E%3Cg%20id='gE1'%20fill='%23FFFFFF'%20transform='translate(-1266.11%20-387.90)'%3E%3Cpath%20d='M1303.56,413.54c-14.38,1.2-27.77,5.81-41.44,10.25-1.45.47-3.95,1.06-6.63,1.79-.58-2.92-1.39-5.9-1.8-8.46-.57-3.54-1.04-7.07-1.46-10.59,6.08-2.01,12.23-3.79,18.48-5.22,7.57-1.72,15.26-2.03,22.79-3.72,21.96-4.91,13.08-38.66-8.79-33.77-7.46,1.67-15.26,2-22.79,3.72-4.54,1.03-9.02,2.27-13.46,3.63-.13-1-.24-2-.38-3-.23-1.65-2.46-12.99-1.09-14.64-.44.53,7-1.06,8.55-1.54,8.97-2.77,18.11-5,27.2-7.35,21.76-5.65,12.95-39.41-8.79-33.77-20.96,5.44-54.44,8.65-60.75,33.65-2.71,10.74-.16,21.76,1.12,32.44,1.59,13.35,1.59,26.02,4.21,39.33,3.48,17.64,1.64,49.3,27.26,49.27,9.37-.01,18.53-5.86,27.27-8.69,9.59-3.1,20.22-7.6,30.32-8.44,22.25-1.85,22.57-36.76.19-34.89Z'/%3E%3C/g%3E%3Cg%20id='gS'%20fill='%23FFFFFF'%20transform='translate(-1399.15%20-364.72)'%3E%3Cpath%20d='M1454.37,375.83c-5.42-24.78-30.82-24.29-50.79-26.97-6.41-.86-12.86-1.48-19.26-2.4-.75-.11-3.55-.85-5.63-1.07.16-.86.4-1.84.93-2.77,6.1-10.85,21.79-14.79,32.6-19.08,8.82-3.5,14.97-11.34,12.49-21.28-2.06-8.27-12.54-15.96-21.28-12.49-22.35,8.87-47.3,17.29-56.89,41.63-8.86,22.5-.2,42.39,23.9,48.15,11.68,2.79,24.53,3.33,36.46,4.71,4.14.48,8.28.75,12.39,1.31,0,.01,0,.02,0,.04-1.61,2.23-3.22,4.45-4.85,6.67-8.64,10.25-17.52,12.85-29.45,13.33-22.41.89-22.65,35.79-.19,34.89,13.47-.54,25.81-2.24,37.64-9.44,17.53-10.69,36.78-33.13,31.95-55.24Z'/%3E%3C/g%3E%3Cg%20id='gV'%20fill='%23FFFFFF'%20transform='translate(-542.15%20-723.53)'%3E%3Cpath%20d='M564.41,682.35c-.67,14.36-7.29,28.41-9.92,42.51-.74,3.95-1.36,7.92-1.93,11.89-3.04-5.07-5.96-10.24-8.27-15.42-8.81-19.74-16.78-40.15-24.37-60.42-7.8-20.85-41.63-12.22-33.77,8.79,8.86,23.69,17.6,48.41,28.91,71.02,9.38,18.75,21.67,43.17,39.32,55.01,7.87,5.28,19.33,1.17,23.8-6.51,9.19-15.8,6.76-37.74,10.01-55.33,3.18-17.25,10.29-33.68,11.11-51.35,1.04-22.49-33.85-22.57-34.89-.19Z'/%3E%3C/g%3E%3Cg%20id='gI'%20fill='%23FFFFFF'%20transform='translate(-680.53%20-725.26)'%3E%3Cpath%20d='M652.36,676.56c4.83,17.55,7.86,36.21,10.94,54.16,1.56,9.1,3.91,17.62,6.29,26.55,2.61,9.79,3.22,19.82,7.68,29,9.81,20.21,39.97,2.67,30.21-17.44-3.38-6.97-3.4-17.62-5.62-25.25-2.49-8.55-3.84-16.98-5.54-25.68-3.26-16.65-5.68-33.74-10.19-50.11-5.97-21.66-39.74-12.87-33.77,8.79h0Z'/%3E%3C/g%3E%3Cg%20id='gE2'%20fill='%23FFFFFF'%20transform='translate(-809.98%20-717.97)'%3E%3Cpath%20d='M842.99,731.59c-9.46,6.83-20.45,11.09-30.55,16.79-3.24,1.83-6.33,3.91-9.53,5.81-.01-.03-.03-.07-.05-.1-1.84-4.42-3.26-9.11-4.81-13.64-.15-.43-.3-.88-.45-1.32,13.89-10.07,27.79-19.49,42.27-28.72,18.87-12.04,1.53-42.31-17.44-30.21-11.93,7.61-23.49,15.38-34.96,23.5-.19-1-.39-2-.55-2.98.1-1.46.14-2.53.13-3.29.24-.35.51-.75.8-1.2,2.83-2.78,4.51-6.68,7.32-9.44,5.07-4.98,11.36-9.5,16.71-14.35,16.62-15.07-8.23-39.56-24.85-24.5-15.06,13.65-35.44,28.09-35.13,50.39.15,11.12,3.17,19.23,6.62,29.5,3.61,10.75,6,21.97,9.67,32.78,7.23,21.27,18.09,40.1,42.96,28.63,10.11-4.66,19.37-11,29.32-16,6.78-3.41,13.8-6.96,19.97-11.42,18.03-13.01.78-43.36-17.44-30.21Z'/%3E%3C/g%3E%3Cg%20id='gR'%20fill='%23FFFFFF'%20transform='translate(-960.93%20-719.85)'%3E%3Cpath%20d='M1016.74,772.24c-6.92-9.58-9.92-21.07-15.68-31.24-4.49-7.93-9.89-15.35-15.06-22.89,6.57-4.38,12.45-9.53,17.13-15.58,20.5-26.51,6.02-65.01-27.49-68.75-30.48-3.4-60.35,17.16-64.49,47.94-4.82,35.81-6.11,71.73-9.2,107.72-1.92,22.42,32.98,22.42,34.89.19,1.53-17.84,2.42-35.71,3.54-53.57,4.46-.93,8.97-2.06,13.46-3.39,5.75,8.54,11.97,16.83,17.01,25.79,5.72,10.17,8.77,21.68,15.68,31.24,13.02,18.02,43.37.77,30.21-17.44ZM950.62,675.77c5.37-5.35,16.98-10.49,24.64-6.81,5.34,2.56,2.06,11.72-3.58,16.15-7.81,6.14-17.55,11.05-27.58,14.35.1-.71.19-1.42.29-2.14,1.05-7.76.49-15.83,6.22-21.55Z'/%3E%3C/g%3E%3Cg%20id='gT2'%20fill='%23FFFFFF'%20transform='translate(-1100.99%20-709.03)'%3E%3Cpath%20d='M1137.94,628.16c-27.99,2.34-56.38,8.78-81.63,21.19-20.16,9.91-2.63,40.08,17.44,30.21,6.92-3.4,14.37-6.23,22.05-8.58,1.87,19.01,2.65,38.08,5.78,57.02,1.86,11.23,3.03,22.44,4.39,33.74,1.04,8.67.23,17.78,7.64,23.94,15.88,13.22,38.27-7.09,27.57-21.6-.2-1.95-.42-3.89-.68-5.83-.62-5.15-1.1-10.29-1.67-15.44-.96-8.71-2.43-17.3-3.85-25.94-2.89-17.58-3.07-35.36-5.07-53,2.64-.32,5.26-.59,7.86-.81,22.25-1.86,22.57-36.77.19-34.89Z'/%3E%3C/g%3E%3Cg%20id='gE3'%20fill='%23FFFFFF'%20transform='translate(-1276.73%20-710.18)'%3E%3Cpath%20d='M1303.7,745.59c-11.61,2.72-23.7,4.44-35.41,6.5-1.99.35-6.42.59-9.95,1.13.46-7.57.39-20.16.59-22.13.13-1.26.24-2.51.36-3.76,7.98-2.16,15.77-5.02,23.94-6.38,3.75-.63,7.56-.85,11.31-1.46,3.1-.51,6.49-2.45,9.39-2.79,9.35-1.12,17.48-7.11,17.54-17.35.05-8.5-7.95-18.67-17.35-17.54-8.94,1.08-17.47,3.65-26.45,4.91-4.83.68-9.51,1.83-14.16,3.13.72-3.83,1.57-7.66,2.68-11.52.29-.97.58-1.93.88-2.89,2.48-.62,4.89-1.6,7.23-2.49,7.67-2.94,14.85-5.91,22.9-7.74,21.94-4.99,13.07-38.74-8.79-33.77-11.22,2.55-21.76,7.28-32.69,10.72-12.13,3.81-17.51,9.71-21.55,21.64-8.42,24.9-9.39,51.58-11.14,77.56-1.48,22.1.09,47.99,28.01,48.05,11.41.02,23.41-2.78,34.53-5.16,10.75-2.3,21.55-3.28,32.19-6.13,5.8-1.55,11.15-6.34,12.45-12.37.05-.23.1-.46.15-.7,3.65-16.88-15.5-26.15-26.66-19.46Z'/%3E%3C/g%3E%3Cg%20id='gL'%20fill='%23FFFFFF'%20transform='translate(-1426.97%20-700.03)'%3E%3Cpath%20d='M1458.63,725.83c-10-1.19-17.09-1.23-26.86.89-4.61,1-9.26,1.54-13.83,2.75-.84.22-1.9.64-3.05,1.13.62-8.65,1.17-17.19,2.36-25.81,2.41-17.4,4.7-34.73,8.07-51.97,4.3-21.95-29.37-31.11-33.7-9.03-3.54,18.07-5.88,36.19-8.41,54.42-2.2,15.87-5.13,33.04-4.27,49.09.94,17.53,14.07,23.84,30.13,21.01,9.18-1.62,17.93-4.96,27.05-6.87,8.54-1.78,13.57-1.78,22.31-.74,22.3,2.66,22.24-32.26.19-34.89Z'/%3E%3C/g%3E%3C/defs%3E%3Cuse%20href='%23gE2'%20transform='translate(36.6%2079.0)%20rotate(-20.2)%20scale(0.8082)'/%3E%3Cuse%20href='%23gE2'%20transform='translate(1236.6%2079.0)%20rotate(-20.2)%20scale(0.8082)'/%3E%3Cuse%20href='%23gV'%20transform='translate(337.6%2036.2)%20rotate(-32.6)%20scale(0.8611)'/%3E%3Cuse%20href='%23gV'%20transform='translate(337.6%201236.2)%20rotate(-32.6)%20scale(0.8611)'/%3E%3Cuse%20href='%23gR'%20transform='translate(511.7%2076.5)%20rotate(-14.8)%20scale(0.7056)'/%3E%3Cuse%20href='%23gT2'%20transform='translate(712.7%20116.8)%20rotate(-36.0)%20scale(0.7630)'/%3E%3Cuse%20href='%23gL'%20transform='translate(886.4%20171.3)%20rotate(-0.1)%20scale(0.8113)'/%3E%3Cuse%20href='%23gUE'%20transform='translate(1055.6%2051.2)%20rotate(-7.0)%20scale(0.6240)'/%3E%3Cuse%20href='%23gUE'%20transform='translate(1055.6%201251.2)%20rotate(-7.0)%20scale(0.6240)'/%3E%3Cuse%20href='%23gI'%20transform='translate(225.6%20235.4)%20rotate(4.5)%20scale(0.8549)'/%3E%3Cuse%20href='%23gF2'%20transform='translate(363.9%20334.3)%20rotate(27.5)%20scale(0.6773)'/%3E%3Cuse%20href='%23gE3'%20transform='translate(599.8%20276.1)%20rotate(87.3)%20scale(0.7081)'/%3E%3Cuse%20href='%23gN'%20transform='translate(852.8%20368.8)%20rotate(-10.7)%20scale(0.7710)'/%3E%3Cuse%20href='%23gF2'%20transform='translate(1055.2%20286.1)%20rotate(-69.5)%20scale(0.7269)'/%3E%3Cuse%20href='%23gN'%20transform='translate(62.2%20320.7)%20rotate(-111.9)%20scale(0.7267)'/%3E%3Cuse%20href='%23gN'%20transform='translate(1262.2%20320.7)%20rotate(-111.9)%20scale(0.7267)'/%3E%3Cuse%20href='%23gN'%20transform='translate(110.3%20542.3)%20rotate(92.8)%20scale(0.7746)'/%3E%3Cuse%20href='%23gT1'%20transform='translate(332.3%20526.5)%20rotate(19.1)%20scale(0.7987)'/%3E%3Cuse%20href='%23gS'%20transform='translate(492.7%20473.9)%20rotate(27.2)%20scale(0.7933)'/%3E%3Cuse%20href='%23gF2'%20transform='translate(652.3%20479.5)%20rotate(5.2)%20scale(0.6613)'/%3E%3Cuse%20href='%23gUE'%20transform='translate(890.4%20545.0)%20rotate(198.9)%20scale(0.5938)'/%3E%3Cuse%20href='%23gF1'%20transform='translate(1124.4%20569.1)%20rotate(184.5)%20scale(0.7406)'/%3E%3Cuse%20href='%23gF1'%20transform='translate(165.3%20699.6)%20rotate(-6.0)%20scale(0.7510)'/%3E%3Cuse%20href='%23gS'%20transform='translate(451.4%20716.3)%20rotate(9.3)%20scale(0.7985)'/%3E%3Cuse%20href='%23gE1'%20transform='translate(616.9%20729.2)%20rotate(-33.6)%20scale(0.7780)'/%3E%3Cuse%20href='%23gUE'%20transform='translate(846.5%20740.9)%20rotate(114.0)%20scale(0.6970)'/%3E%3Cuse%20href='%23gV'%20transform='translate(1039.3%20694.8)%20rotate(168.9)%20scale(0.8207)'/%3E%3Cuse%20href='%23gI'%20transform='translate(1193.9%20719.2)%20rotate(-6.1)%20scale(0.9021)'/%3E%3Cuse%20href='%23gI'%20transform='translate(-6.1%20719.2)%20rotate(-6.1)%20scale(0.9021)'/%3E%3Cuse%20href='%23gT2'%20transform='translate(74.4%20925.5)%20rotate(-67.3)%20scale(0.7894)'/%3E%3Cuse%20href='%23gT2'%20transform='translate(1274.4%20925.5)%20rotate(-67.3)%20scale(0.7894)'/%3E%3Cuse%20href='%23gE1'%20transform='translate(366.0%20951.3)%20rotate(4.7)%20scale(0.7106)'/%3E%3Cuse%20href='%23gT1'%20transform='translate(548.0%20895.8)%20rotate(-30.1)%20scale(0.7319)'/%3E%3Cuse%20href='%23gV'%20transform='translate(755.0%20879.8)%20rotate(-9.7)%20scale(0.7973)'/%3E%3Cuse%20href='%23gS'%20transform='translate(908.6%20935.5)%20rotate(92.0)%20scale(0.7681)'/%3E%3Cuse%20href='%23gE1'%20transform='translate(1106.5%20969.4)%20rotate(-21.7)%20scale(0.7546)'/%3E%3Cuse%20href='%23gF1'%20transform='translate(194.5%201136.0)%20rotate(-21.6)%20scale(0.7376)'/%3E%3Cuse%20href='%23gF1'%20transform='translate(194.5%20-64.0)%20rotate(-21.6)%20scale(0.7376)'/%3E%3Cuse%20href='%23gT1'%20transform='translate(413.5%201095.5)%20rotate(89.2)%20scale(0.7527)'/%3E%3Cuse%20href='%23gE3'%20transform='translate(607.4%201084.0)%20rotate(186.7)%20scale(0.7423)'/%3E%3Cuse%20href='%23gR'%20transform='translate(815.7%201155.5)%20rotate(-22.1)%20scale(0.7446)'/%3E%3Cuse%20href='%23gR'%20transform='translate(815.7%20-44.5)%20rotate(-22.1)%20scale(0.7446)'/%3E%3Cuse%20href='%23gE2'%20transform='translate(980.0%201092.1)%20rotate(168.9)%20scale(0.7527)'/%3E%3Cuse%20href='%23gL'%20transform='translate(24.5%201080.7)%20rotate(-20.4)%20scale(0.7820)'/%3E%3Cuse%20href='%23gL'%20transform='translate(1224.5%201080.7)%20rotate(-20.4)%20scale(0.7820)'/%3E%3C/svg%3E");
	background-color: var(--wp--preset--color--base);
	background-image: var(--fv-pattern-image);
	background-size: var(--fv-pattern-size, 48rem);
	background-repeat: repeat;
}

.fv-pattern--dense {
	--fv-pattern-size: 28rem;
}

/* ------------------------------------------------------------------
   Rechtsseiten (/impressum, /datenschutz), 19.09.2026
   ------------------------------------------------------------------ */

/* Auf den Rechtsseiten bleibt der Header mit Logo (Weg zurück), aber das
   Menü zeigt auf Anker der noch versteckten Startseite und bleibt weg. */
body:has(.fv-legal) .fv-nav {
	display: none;
}

.fv-legal h1 {
	margin-bottom: var(--wp--preset--spacing--30);
}

.fv-legal h2 {
	font-size: 1.25rem;
	letter-spacing: -0.01em;
	margin-top: var(--wp--preset--spacing--40);
}

.fv-legal a {
	text-decoration: underline;
	text-underline-offset: 0.12em;
}

/* Platzhalter, die noch mit echten Angaben gefüllt werden müssen:
   weiß hinterlegt, damit sie niemand übersieht. */
.fv-todo {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 0.85em;
	padding: 0.05em 0.4em;
}

/* Credit am Fuß des Impressums: dünne Linie, Mono-Label, darunter die
   Wortmarke von A New Day Studio als Link. Das SVG erbt die Textfarbe
   über currentColor, deshalb braucht es hier keine eigene Füllung. */
.fv-legal .fv-credit {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
}

.fv-legal .fv-credit__label {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--30);
}

.fv-legal .fv-credit__link {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.9rem;
	color: inherit;
	text-decoration: none;
}

.fv-credit__mark {
	display: block;
	width: min(100%, 13rem);
}

/* overflow sichtbar, damit die Buchstaben beim Hover oben aus der viewBox
   dürfen, ohne abgeschnitten zu werden. */
.fv-credit__logo {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.fv-credit__meta {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	transition: color 0.25s ease;
}

/* Hover: eine Welle läuft einmal durch die Wortmarke, passend zum internen
   Namen des Logos (AND Wave). Jeder Buchstabe ist eine eigene Gruppe im SVG
   (über clipPath aus dem einen Pfad geschnitten, damit die Zeichnung
   unverändert bleibt) und startet um --i versetzt. Die Werte sind
   viewBox-Einheiten: 80 von 615,8 Höhe, bei 13rem Breite also gut 6 px.
   Nur für echte Zeiger, auf dem Handy gibt es kein Hover. */
@media (hover: hover) {
	.fv-legal .fv-credit__link:hover .fv-credit__letter {
		animation: fv-and-wave 0.9s cubic-bezier(0.37, 0, 0.35, 1) both;
		animation-delay: calc(var(--i, 0) * 70ms);
	}

	.fv-legal .fv-credit__link:hover .fv-credit__meta {
		color: var(--wp--preset--color--contrast);
	}
}

@keyframes fv-and-wave {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-80px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fv-credit__meta {
		transition: none;
	}

	.fv-legal .fv-credit__link:hover .fv-credit__letter {
		animation: none;
	}
}

/* ------------------------------------------------------------------
   Consent-Banner (Complianz), 19.09.2026
   Farben, Position und Texte kommen aus den Complianz-Einstellungen
   (weiße Karte, Skye-Schrift, Pill-Buttons). Hier nur Typografie und
   Feinheiten, die das Plugin nicht anbietet.
   ------------------------------------------------------------------ */

/* Doppelte Klasse, weil das Banner-CSS von Complianz nach unserem lädt
   und sonst bei gleicher Spezifität gewinnt. */
.cmplz-cookiebanner.cmplz-cookiebanner {
	font-family: var(--wp--preset--font-family--geist);
	box-shadow: none;
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-header {
	grid-template-columns: 1fr;
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-title {
	grid-column: 1 / -1;
	justify-self: start;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	font-size: 1.35rem;
	line-height: 1;
	text-align: left;
	padding: 0;
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-message {
	line-height: 1.45;
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-btn {
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 600;
	padding: 0.75em 1.4em;
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-links .cmplz-link {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	white-space: nowrap;
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-category-title {
	font-weight: 700;
}

/* Der Reiter "Einwilligung verwalten" am unteren Rand. */
#cmplz-manage-consent .cmplz-manage-consent.cmplz-manage-consent {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: 0;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.5em 0.9em;
}

/* ------------------------------------------------------------------
   Headline-Kandidaten (19.09.2026), nur für den Vergleich im Styleguide.
   Dateien liegen wie Geist selbst gehostet unter uploads/fonts/. Der
   Gewinner steht in der theme.json (Sofia Sans Extra Condensed), die
   anderen fliegen hier samt Dateien wieder raus, sobald entschieden ist.
   ------------------------------------------------------------------ */

@font-face {
	font-family: "Sofia Sans Condensed";
	font-style: normal;
	font-weight: 1 1000;
	font-display: swap;
	src: url("https://fuenftesviertel.de/wp-content/uploads/fonts/sofia-sans-condensed-variable.woff2") format("woff2");
}

@font-face {
	font-family: "Antonio";
	font-style: normal;
	font-weight: 100 700;
	font-display: swap;
	src: url("https://fuenftesviertel.de/wp-content/uploads/fonts/antonio-variable.woff2") format("woff2");
}

@font-face {
	font-family: "Oswald";
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url("https://fuenftesviertel.de/wp-content/uploads/fonts/oswald-variable.woff2") format("woff2");
}

.fv-sg-cond--sofia650 {
	font-weight: 650;
}

.fv-sg-cond--sofiacond {
	font-family: "Sofia Sans Condensed", var(--wp--preset--font-family--sofia-sans-extra-condensed);
	font-weight: 700;
}

.fv-sg-cond--antonio {
	font-family: "Antonio", var(--wp--preset--font-family--sofia-sans-extra-condensed);
	font-weight: 600;
}

.fv-sg-cond--oswald {
	font-family: "Oswald", var(--wp--preset--font-family--sofia-sans-extra-condensed);
	font-weight: 500;
}

.fv-sg-cond--geist {
	font-family: var(--wp--preset--font-family--geist);
	letter-spacing: -0.03em;
	line-height: 0.92;
}

/* Gemischte Schreibung zum Vergleich mit dem Söhne-Muster. */
.fv-sg-cond--mixed {
	text-transform: none;
	letter-spacing: 0;
}

/* ------------------------------------------------------------------
   Ziffern: die handgezeichneten Zahlen 0 bis 9 als Inline-SVG mit
   fill="currentColor", damit sie jede Textfarbe annehmen.
   ------------------------------------------------------------------ */

.fv-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1.5rem 2rem;
}

.fv-numbers svg {
	display: block;
	height: var(--fv-number-size, clamp(3.5rem, 7vw, 6.5rem));
	width: auto;
	fill: currentColor;
}

.fv-sg-numbers-box {
	border: 1px solid var(--wp--preset--color--line);
	padding: var(--wp--preset--spacing--40);
}

/* ------------------------------------------------------------------
   Styleguide (/styleguide), 19.09.2026
   Alles mit fv-sg- ist nur Präsentation für diese eine Seite und hat
   auf der restlichen Website nichts zu suchen.
   ------------------------------------------------------------------ */

/* Sprungnavigation oben. */
.fv-sg-toc {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	list-style: none;
	padding: 0;
	margin-bottom: 0;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.fv-sg-toc a {
	text-decoration: none;
}

.fv-sg-toc a:hover {
	text-decoration: underline;
}

/* Einleitungstexte auf Lesebreite. */
.fv-sg-lead {
	max-width: 40rem;
}

/* Kleiner Code-Chip für Klassennamen und Werte. */
.fv-sg-code {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 0.78em;
	letter-spacing: 0;
	text-transform: none;
	background: rgba(230, 230, 254, 0.14);
	padding: 0.15em 0.5em;
	white-space: nowrap;
}

/* Raster für Karten und Swatches. */
.fv-sg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.fv-sg-grid > * {
	margin: 0;
}

/* Farbfelder. */
.fv-sg-swatch {
	border: 1px solid var(--wp--preset--color--line);
}

.fv-sg-swatch__chip {
	aspect-ratio: 4 / 3;
	background: var(--c);
}

.fv-sg-swatch__meta {
	padding: 0.85rem 1rem;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	border-top: 1px solid var(--wp--preset--color--line);
	display: grid;
	gap: 0.25rem;
}

.fv-sg-swatch__meta strong {
	font-family: var(--wp--preset--font-family--geist);
	font-size: 1rem;
	letter-spacing: -0.01em;
}

.fv-sg-swatch__meta span {
	color: var(--wp--preset--color--muted);
}

/* Schriftmuster: Label links, Muster rechts. */
.fv-sg-type {
	display: grid;
	grid-template-columns: 11rem 1fr;
	gap: var(--wp--preset--spacing--30);
	align-items: baseline;
	padding: var(--wp--preset--spacing--30) 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.fv-sg-type:last-child {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.fv-sg-type__label {
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted);
	display: grid;
	gap: 0.3rem;
}

.fv-sg-type__label strong {
	color: var(--wp--preset--color--contrast);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.fv-sg-type__sample {
	margin: 0;
	overflow-wrap: anywhere;
}

.fv-sg-type__sample + .fv-sg-type__sample {
	margin-top: 1rem;
}

@media (max-width: 781px) {
	.fv-sg-type {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
}

/* Abstände als Balken. */
.fv-sg-space {
	display: grid;
	grid-template-columns: 11rem 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: 0.6rem 0;
	border-top: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
}

.fv-sg-space:last-child {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.fv-sg-space__bar {
	height: 1.1rem;
	width: var(--s);
	max-width: 100%;
	background: var(--wp--preset--color--muted);
}

@media (max-width: 781px) {
	.fv-sg-space {
		grid-template-columns: 8rem 1fr;
	}
}

/* Logo-Felder. */
.fv-sg-logo {
	border: 1px solid var(--wp--preset--color--line);
	min-height: 16rem;
	display: grid;
	place-items: center;
	padding: var(--wp--preset--spacing--40);
	position: relative;
}

.fv-sg-logo img {
	width: min(100%, 16rem);
	display: block;
}

.fv-sg-logo--mark img {
	width: min(100%, 9rem);
}

/* Die Skye-Exports tragen noch das volle Artboard mit Weißraum, deshalb
   größer gesetzt, damit die Zeichnung gleich groß wirkt. */
.fv-sg-inverse img {
	width: min(100%, 27rem);
}

.fv-sg-logo--mark.fv-sg-inverse img {
	width: min(100%, 16rem);
}

.fv-sg-logo__label {
	position: absolute;
	left: 1rem;
	top: 0.85rem;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.7;
}

/* Umgekehrte Fläche: Skye auf Weiß. */
.fv-sg-inverse {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: transparent;
}

.fv-sg-inverse a {
	color: inherit;
}

/* Demo-Karte. */
.fv-sg-card {
	border: 1px solid var(--wp--preset--color--line);
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.fv-sg-card__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.4rem 1rem;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.fv-sg-card__head .fv-tag {
	font-size: 0.6rem;
	padding: 0.15em 0.5em;
	margin-left: 0.4em;
}

.fv-sg-card h3 {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	hyphens: manual;
}

.fv-sg-card p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.fv-sg-card__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-top: auto;
}

.fv-sg-card__foot .fv-sg-code {
	font-size: 0.75rem;
}

.fv-sg-replay {
	appearance: none;
	background: none;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	color: inherit;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.45em 0.9em;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.fv-sg-replay:hover {
	border-color: var(--wp--preset--color--contrast);
	background: rgba(230, 230, 254, 0.1);
}

/* Bühne: hier läuft die Demo. */
.fv-sg-stage {
	position: relative;
	min-height: 12rem;
	padding: 1.25rem;
	border: 1px solid var(--wp--preset--color--line);
	background: rgba(0, 0, 51, 0.22);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.75rem;
	overflow: hidden;
}

.fv-sg-stage > * {
	margin: 0;
}

.fv-sg-stage .fv-display {
	font-size: clamp(1.4rem, 1.7vw, 1.9rem);
}

.fv-sg-stage .wp-block-button {
	align-self: flex-start;
}

/* Die Block-Styles des Buttons laden nur, wenn ein echter Button-Block auf
   der Seite steht; hier stehen die Buttons im HTML-Block. */
.fv-sg-stage .wp-block-button__link {
	display: inline-block;
	text-decoration: none;
	text-align: center;
	box-sizing: border-box;
}

.fv-sg-stage .wp-block-image {
	margin: 0;
}

/* Fotos in der Bühne: die Graustufen-Platzhalter werden über einen
   Lighten-Blend auf Skye gelegt, das entspricht dem Duotone Skye ohne
   den SVG-Filter des Bildblocks. */
.fv-sg-stage .wp-block-image {
	background: var(--wp--preset--color--base);
	isolation: isolate;
}

.fv-sg-stage .wp-block-image img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	mix-blend-mode: lighten;
}

.fv-sg-stage .is-logo {
	background: none;
	align-self: flex-start;
}

.fv-sg-stage .is-logo img {
	width: 6rem;
	aspect-ratio: auto;
	object-fit: contain;
	mix-blend-mode: normal;
}

.fv-sg-stage__hint {
	position: absolute;
	right: 0.75rem;
	top: 0.6rem;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 0.65rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.6;
	pointer-events: none;
}

/* Scroll-Bühne für scroll-getriebene Demos: ein eigener Scroll-Container,
   an dem sich die View-Timeline orientiert. */
.fv-sg-scroll {
	height: 12rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--muted) transparent;
	margin: -1.25rem;
	padding: 0 1.25rem;
}

.fv-sg-scroll__pad {
	height: 11rem;
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--geist-mono);
	font-size: 0.65rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.5;
}

.fv-sg-scroll__pad:last-child {
	height: 12rem;
}

.fv-sg-scroll .wp-block-image img {
	aspect-ratio: 16 / 9;
}

/* Zeitbasierte Demos: die Scroll-Timeline wird ausgeschaltet, die
   Animation startet erst mit .is-playing (setzt site.js). */
.fv-sg-stage :is(.fv-reveal, .fv-reveal--left, .fv-reveal--scale, .fv-reveal--blur, .fv-reveal--wipe, .fv-reveal--rise, .fv-reveal--mask, .fv-stagger > *, .fv-words .fv-word, .fv-load-in > *, .fv-count),
.fv-sg-stage .fv-line-draw::before {
	animation-timeline: auto;
	animation-range: normal;
	animation-duration: var(--fv-anim-duration);
	animation-timing-function: var(--fv-anim-ease);
	animation-fill-mode: both;
}

.fv-sg-stage:not(.is-playing) :is(.fv-reveal, .fv-reveal--left, .fv-reveal--scale, .fv-reveal--blur, .fv-reveal--wipe, .fv-reveal--rise, .fv-reveal--mask, .fv-stagger > *, .fv-words .fv-word, .fv-load-in > *),
.fv-sg-stage:not(.is-playing) .fv-line-draw::before,
.fv-sg-stage:not(.is-playing) .fv-count {
	animation-name: none;
}

.fv-sg-stage:not(.is-playing) :is(.fv-reveal, .fv-reveal--left, .fv-reveal--scale, .fv-reveal--blur, .fv-reveal--wipe, .fv-reveal--rise, .fv-reveal--mask, .fv-stagger > *, .fv-words .fv-word, .fv-load-in > *) {
	opacity: 0;
}

.fv-sg-stage:not(.is-playing) .fv-line-draw::before {
	transform: scaleX(0);
}

.fv-sg-stage.is-playing :is(.fv-reveal, .fv-stagger > *, .fv-words .fv-word, .fv-load-in > *) {
	animation-name: fv-reveal;
}

.fv-sg-stage.is-playing .fv-reveal--left {
	animation-name: fv-reveal-left;
}

.fv-sg-stage.is-playing .fv-reveal--scale {
	animation-name: fv-reveal-scale;
}

.fv-sg-stage.is-playing .fv-reveal--blur {
	animation-name: fv-reveal-blur;
	animation-duration: 0.9s;
}

.fv-sg-stage.is-playing .fv-reveal--wipe {
	animation-name: fv-reveal-wipe;
}

.fv-sg-stage.is-playing .fv-reveal--rise {
	animation-name: fv-reveal-rise;
	animation-timing-function: var(--fv-anim-ease-over);
}

.fv-sg-stage.is-playing .fv-reveal--mask {
	animation-name: fv-reveal-mask;
	animation-duration: 0.9s;
}

.fv-sg-stage.is-playing .fv-line-draw::before {
	animation-name: fv-progress;
}

.fv-sg-stage.is-playing .fv-count {
	animation-name: fv-count;
	animation-duration: 1.4s;
	animation-timing-function: ease-out;
}

.fv-sg-stage.is-playing .fv-words .fv-word {
	animation-delay: calc(var(--fv-word-step) * var(--i, 0));
}

.fv-sg-stage.is-playing .fv-stagger > *:nth-child(2) {
	animation-delay: var(--fv-stagger-step);
}

.fv-sg-stage.is-playing .fv-stagger > *:nth-child(3) {
	animation-delay: calc(var(--fv-stagger-step) * 2);
}

.fv-sg-stage.is-playing .fv-stagger > *:nth-child(4) {
	animation-delay: calc(var(--fv-stagger-step) * 3);
}

.fv-sg-stage.is-playing .fv-stagger > *:nth-child(n + 5) {
	animation-delay: calc(var(--fv-stagger-step) * 4);
}

.fv-sg-stage.is-playing .fv-load-in > * {
	animation-delay: calc(150ms + var(--fv-stagger-step) * 1.4 * var(--fv-i, 0));
}

/* Dauerläufer (Marquee, Puls, Bounce) laufen in der Bühne immer. */
.fv-sg-stage .fv-marquee {
	margin: 0 -1.25rem;
}

/* Reduzierte Bewegung: Demos zeigen den Endzustand. */
@media (prefers-reduced-motion: reduce) {
	.fv-sg-stage:not(.is-playing) :is(.fv-reveal, .fv-reveal--left, .fv-reveal--scale, .fv-reveal--blur, .fv-reveal--wipe, .fv-reveal--rise, .fv-reveal--mask, .fv-stagger > *, .fv-words .fv-word, .fv-load-in > *) {
		opacity: 1;
	}

	.fv-sg-stage:not(.is-playing) .fv-line-draw::before {
		transform: none;
	}
}

/* ------------------------------------------------------------------
   Kontaktformular (Fluent Forms, 22.09.2026)
   Im Editor liegt eine Gruppe .fv-form um den Shortcode; alles
   darunter ist Markup des Plugins. Doppelter Selektor
   .fv-form .frm-fluent-form, weil das Plugin-CSS nach unserem lädt.
   ------------------------------------------------------------------ */

.fv-form .frm-fluent-form {
	--fv-form-line: rgba(255, 255, 255, 0.35);
}

.fv-form .frm-fluent-form .ff-el-group {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Labels wie die Eyebrows: Geist Mono, Versalien, gesperrt. */
.fv-form .frm-fluent-form .ff-el-input--label label {
	font-family: var(--wp--preset--font-family--geist-mono);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.4rem;
}

.fv-form .frm-fluent-form .ff-el-is-required.asterisk-right label::after {
	color: var(--wp--preset--color--muted);
}

/* Felder: keine Kästen, nur eine Linie. */
.fv-form .frm-fluent-form .ff-el-form-control {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--fv-form-line);
	border-radius: 0;
	box-shadow: none;
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: 1.0625rem;
	line-height: 1.5;
	padding: 0.7rem 0;
	width: 100%;
}

.fv-form .frm-fluent-form .ff-el-form-control:focus {
	background: transparent;
	border-bottom-color: var(--wp--preset--color--contrast);
	box-shadow: none;
	color: var(--wp--preset--color--contrast);
	outline: none;
}

.fv-form .frm-fluent-form .ff-el-form-control::placeholder {
	color: rgba(255, 255, 255, 0.5);
	opacity: 1;
}

.fv-form .frm-fluent-form textarea.ff-el-form-control {
	resize: vertical;
}

/* Autofill: Chrome setzt sonst eine weiße Fläche ins Feld. */
.fv-form .frm-fluent-form .ff-el-form-control:-webkit-autofill,
.fv-form .frm-fluent-form .ff-el-form-control:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--wp--preset--color--contrast);
	transition: background-color 9999s;
}

/* DSGVO-Häkchen: kleiner Fließtext, Link unterstrichen. */
.fv-form .frm-fluent-form .ff_t_c,
.fv-form .frm-fluent-form .ff-el-tc label,
.fv-form .frm-fluent-form .ff-el-form-check-label {
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	text-transform: none;
	letter-spacing: 0;
	font-family: inherit;
}

.fv-form .frm-fluent-form .ff_gdpr_field {
	accent-color: var(--wp--preset--color--contrast);
	margin-right: 0.5rem;
}

/* Button in Markenform: weiße Pille auf Skye. */
.fv-form .frm-fluent-form .ff-btn-submit {
	background: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 999px;
	color: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	padding: 0.85rem 1.7rem;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.fv-form .frm-fluent-form .ff-btn-submit:hover,
.fv-form .frm-fluent-form .ff-btn-submit:focus-visible {
	background: var(--wp--preset--color--muted);
	border-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--base);
}

/* Fehlertexte: kein Rot auf Blau, sondern Mono in OffWhite. */
.fv-form .frm-fluent-form .error,
.fv-form .frm-fluent-form .text-danger,
.fv-form .frm-fluent-form .ff-el-is-error .error-text {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--geist-mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.7rem;
	margin-top: 0.35rem;
}

.fv-form .frm-fluent-form .ff-el-is-error .ff-el-form-control {
	border-bottom-color: var(--wp--preset--color--muted);
	border-bottom-width: 2px;
}

/* Danke-Meldung: ein Kasten in der Linie der Cut-outs. */
.fv-form .ff-message-success {
	background: transparent;
	border: 1px solid var(--fv-form-line, rgba(255, 255, 255, 0.35));
	color: var(--wp--preset--color--contrast);
	padding: var(--wp--preset--spacing--30);
}