/*
Theme Name: FeulnerMedia
Author: FeulnerMedia
Description: Block-Theme für feulnermedia.de. Monochrome CI in Tinte und Leinwand, lokale Schriften Anton, Archivo und Martian Mono, klare Typografie. Content, Kampagnen und Websites für den Mittelstand.
Version: 0.2.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: feulnermedia
*/

/* ————— Grundlagen ————— */

::selection {
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--tinte);
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--tinte);
	outline-offset: 3px;
}

img,
svg {
	max-width: 100%;
	height: auto;
}

h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* Footer klebt immer unten, auch auf kurzen Seiten. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

.wp-site-blocks > main {
	flex-grow: 1;
}

/* Scrollbar-Luft: Abstand zwischen Inhalt und Leiste, Text klebt nie an der Scrollbar. */
pre,
textarea,
.wp-block-code,
.wp-block-table,
.is-scroll-container,
[style*="overflow"] {
	padding-right: 10px;
}

pre,
.wp-block-code,
.wp-block-table {
	overflow-x: auto;
	padding-bottom: 10px;
}

/* ————— Header: schwebende, leicht transluzente Leiste ————— */

.fm-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(242, 238, 230, 0.88);
	border-bottom: 1px solid rgba(14, 13, 11, 0.08);
}

@supports (backdrop-filter: blur(1px)) {
	.fm-header {
		background: rgba(242, 238, 230, 0.72);
		backdrop-filter: blur(16px) saturate(140%);
	}
}

@media (prefers-reduced-transparency: reduce) {
	.fm-header {
		background: var(--wp--preset--color--leinwand);
		backdrop-filter: none;
	}
}

.fm-logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	transition: opacity 0.2s ease;
}

.fm-logo:hover {
	opacity: 0.72;
}

.fm-logo img {
	height: 38px;
	width: auto;
}

.fm-header .wp-block-navigation {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.fm-header .wp-block-navigation a {
	text-decoration: none;
	padding: 0.375rem 0;
}

.fm-header .wp-block-navigation a:hover {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 1.5px;
}

@media (max-width: 599px) {
	.fm-logo img {
		height: 30px;
	}
}

/* ————— Buttons: sofortiges Drücken, weicher Hub ————— */

.wp-element-button,
.wp-block-button__link {
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-2px);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(0) scale(0.97);
	transition-duration: 0.08s;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--tinte);
	border: 1px solid rgba(14, 13, 11, 0.4);
	padding-top: calc(1.125rem - 1px);
	padding-bottom: calc(1.125rem - 1px);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--tinte);
	background: rgba(14, 13, 11, 0.05);
	color: var(--wp--preset--color--tinte);
}

/* ————— Trennlinien: Haarlinien statt Balken ————— */

.wp-block-separator {
	border: none;
	border-top: 1px solid rgba(14, 13, 11, 0.12);
	width: 100%;
	max-width: none;
	opacity: 1;
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--60);
}

/* ————— Seitentitel: Bühne ————— */

.wp-block-post-title {
	margin-top: var(--wp--preset--spacing--50);
}

/* ————— Karten-Raster (Module, Betreuung) ————— */

.fm-raster {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: var(--wp--preset--spacing--50);
}

/* WPs Flow-Layout gibt den Kindern margins mit; im Raster zählt nur das gap.
   Flex statt Grid, damit unvollständige letzte Reihen zentriert stehen. */
.fm-raster > * {
	box-sizing: border-box;
	flex: 0 0 calc(25% - 10.5px);
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

@media (max-width: 1023px) {
	.fm-raster > * {
		flex-basis: calc(50% - 7px);
	}
}

@media (max-width: 640px) {
	.fm-raster > * {
		flex-basis: 100%;
	}
}

.fm-karte {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
	background: var(--wp--preset--color--knochen);
	border: 1px solid rgba(14, 13, 11, 0.08);
	border-radius: 16px;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease;
}

.fm-karte:hover {
	border-color: rgba(14, 13, 11, 0.55);
	transform: translateY(-2px);
}

/* Paket-Karten: wie auf der Preisliste, die großen zwei in Tinte. */
.fm-paket .fm-module {
	font-family: var(--wp--preset--font-family--martian-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.6;
	margin: 0;
}

.fm-paket .fm-preis {
	font-size: 1.375rem !important;
	font-weight: 700;
	border-top: none;
	padding-top: 0.25rem;
}

.fm-paket-dunkel {
	background: var(--wp--preset--color--tinte);
	border-color: var(--wp--preset--color--tinte);
	color: var(--wp--preset--color--leinwand);
}

.fm-paket-dunkel .fm-nr {
	color: var(--wp--preset--color--sand);
	opacity: 1;
}

.fm-paket-dunkel h3,
.fm-paket-dunkel p {
	color: var(--wp--preset--color--leinwand);
}

.fm-paket-dunkel .fm-preis-zusatz,
.fm-paket-dunkel .fm-module {
	color: var(--wp--preset--color--sand);
	opacity: 1;
}

.fm-paket-dunkel:hover {
	border-color: var(--wp--preset--color--sand);
}

/* Dunkle Abschluss-Sektion: Echo des Films. */
.fm-finale {
	border-radius: 20px;
	text-align: center;
}

.fm-finale h2 {
	font-size: var(--wp--preset--font-size--x-large);
}

.fm-nr {
	font-family: var(--wp--preset--font-family--martian-mono);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.55;
	margin: 0;
}

.fm-karte h3 {
	font-size: 1.1875rem;
	letter-spacing: 0.045em;
	line-height: 1.18;
	margin: 0;
}

.fm-karte p {
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 0;
}

.fm-preis {
	margin-top: auto !important;
	padding-top: 0.875rem;
	border-top: 1px solid rgba(14, 13, 11, 0.1);
	font-weight: 600;
	font-size: 1rem !important;
}

.fm-preis-zusatz {
	font-size: 0.75rem !important;
	letter-spacing: 0.02em;
	opacity: 0.55;
	margin-top: -0.25rem !important;
}

/* ————— Konditionen: ruhige Haarlinien-Liste ————— */

.fm-konditionen {
	list-style: none;
	padding-left: 0;
	margin-top: var(--wp--preset--spacing--40);
}

.fm-konditionen li {
	padding: 0.875rem 0;
	border-top: 1px solid rgba(14, 13, 11, 0.1);
	font-size: 0.9375rem;
}

.fm-konditionen li:last-child {
	border-bottom: 1px solid rgba(14, 13, 11, 0.1);
}

/* ————— Kontakt ————— */

.fm-kontaktdaten p {
	margin: 0 0 0.5rem;
}

.fm-kontaktdaten a {
	font-size: 1.1875rem;
	font-weight: 500;
	text-decoration: none;
}

.fm-kontaktdaten a:hover {
	text-decoration: underline;
	text-underline-offset: 5px;
}

.fm-label {
	font-family: var(--wp--preset--font-family--martian-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.55;
}

/* ————— Footer ————— */

.fm-footer {
	font-family: var(--wp--preset--font-family--martian-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.fm-footer-marke img {
	height: 32px;
	width: auto;
}

.fm-footer-zeile {
	border-top: 1px solid rgba(242, 238, 230, 0.16);
	padding-top: 1.5rem;
	row-gap: 0.875rem;
}

.fm-footer a {
	color: inherit;
	text-decoration: none;
}

.fm-footer a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ————— Tabellen (falls im Editor genutzt): Haarlinien ————— */

.wp-block-table table {
	border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
	border: none;
	border-bottom: 1px solid rgba(14, 13, 11, 0.12);
	padding: 0.75rem 1rem 0.75rem 0;
	text-align: left;
	vertical-align: top;
}

.wp-block-table th {
	font-family: var(--wp--preset--font-family--martian-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 400;
	opacity: 0.6;
}

/* ————— Scroll-Reveals: Klassen setzt ein Mini-Skript, ohne JS ist alles sichtbar ————— */

@media (prefers-reduced-motion: no-preference) {
	.fm-rein {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.fm-rein.fm-da {
		opacity: 1;
		transform: none;
		transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, opacity 0.7s ease;
	}

	.fm-raster > .fm-rein:nth-child(2) { transition-delay: 0.06s; }
	.fm-raster > .fm-rein:nth-child(3) { transition-delay: 0.12s; }
	.fm-raster > .fm-rein:nth-child(4) { transition-delay: 0.18s; }
	.fm-raster > .fm-rein.fm-da { transition-delay: 0s; }
}

/* ————— Reduzierte Bewegung ————— */

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link,
	.fm-karte,
	.fm-logo {
		transition: none;
	}

	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.wp-element-button:active,
	.wp-block-button__link:active,
	.fm-karte:hover {
		transform: none;
	}
}