/* ==========================================================================
   FahrSchulKombinat — Section Kit
   --------------------------------------------------------------------------
   Standalone stylesheet for every `fsk-*` section pattern.

   PORTABILITY
   Every value below resolves in three steps:
     1. an `--fsk-*` override you set yourself (on :root or any wrapper), else
     2. the matching theme.json preset of the active theme, else
     3. the FahrSchulKombinat brand default baked in here.
   That means you can copy `patterns/` + this file into any block theme and the
   sections keep working. Re-skin a whole section by setting `--fsk-*` on it.

   RESPONSIVE
   The source design was a 412px mobile mock. Scaling to desktop is handled by
   `clamp()` for type/space and by CSS grid `auto-fit` (or the core Grid block's
   `minimumColumnWidth`) for the card layouts, so there are only a handful of
   structural breakpoints — listed under "Structural breakpoints" at the bottom
   of each component.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
	/* Brand */
	--fsk-ink: var(--wp--preset--color--ink, #17120f);
	--fsk-ink-soft: var(--wp--preset--color--ink-soft, #6a615b);
	--fsk-paper: var(--wp--preset--color--paper, #fcf7f1);
	--fsk-card: var(--wp--preset--color--card, #fff);
	--fsk-pink: var(--wp--preset--color--pink, #fd59b4);
	--fsk-pink-deep: var(--wp--preset--color--pink-deep, #e0349a);
	--fsk-pink-soft: var(--wp--preset--color--pink-soft, #ffe2f2);
	--fsk-cyan: var(--wp--preset--color--cyan, #8de3e4);
	--fsk-cyan-deep: var(--wp--preset--color--cyan-deep, #3fb6b8);
	--fsk-cyan-soft: var(--wp--preset--color--cyan-soft, #def7f7);
	--fsk-green: var(--wp--preset--color--green, #1aa98c);
	--fsk-magenta: var(--wp--preset--color--magenta, #d81c70);
	--fsk-orange: var(--wp--preset--color--orange, #ff7a3d);
	--fsk-sign: var(--wp--preset--color--sign-yellow, #ffcc00);
	--fsk-sign-deep: var(--wp--preset--color--sign-yellow-deep, #f5ce16);

	/* Role colours — override these to recolour a section wholesale */
	--fsk-accent: var(--fsk-pink);
	--fsk-tint: var(--fsk-cyan-soft);
	--fsk-badge: var(--fsk-cyan);

	/* Type */
	--fsk-font-display: var(--wp--preset--font-family--display, Archivo, system-ui, sans-serif);
	--fsk-font-body: var(--wp--preset--font-family--body, "Hanken Grotesk", system-ui, sans-serif);
	--fsk-display-weight: var(--wp--custom--display-weight, 800);
	--fsk-display-tracking: var(--wp--custom--display-tracking, -0.02em);

	/* Shape */
	--fsk-border-w: var(--wp--custom--border-width, 2.5px);
	--fsk-border: var(--fsk-border-w) solid var(--fsk-ink);
	--fsk-radius: var(--wp--custom--radius--md, 22px);
	--fsk-radius-sm: var(--wp--custom--radius--sm, 14px);
	--fsk-shadow: 5px 5px 0 var(--fsk-ink);
	--fsk-shadow-sm: 3px 3px 0 var(--fsk-ink);
	--fsk-shadow-lg: 8px 8px 0 var(--fsk-ink);

	/* Rhythm */
	--fsk-gutter: var(--wp--custom--content-gutter, clamp(1.125rem, 4vw, 2.5rem));
	--fsk-section-y: clamp(2.75rem, 6vw, 5.5rem);
	--fsk-measure: 42ch;
}

/* --------------------------------------------------------------------------
   2. Section shell + shared typography
   -------------------------------------------------------------------------- */

.fsk-section {
	position: relative;
	padding-block: var(--fsk-section-y);
	overflow: clip;
}

/* Tinted band with the signature hard rules top and bottom. */
.fsk-section--tint {
	background: var(--fsk-tint);
	border-block: var(--fsk-border);
}

.fsk-section--paper {
	background: var(--fsk-paper);
}

/* Eyebrow pill — the "★ Kontakt & Standort" chip. */
.fsk-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	margin: 0;
	padding: 0.375rem 0.875rem;
	border: var(--fsk-border);
	border-radius: 999px;
	background: var(--fsk-badge);
	box-shadow: var(--fsk-shadow-sm);
	color: var(--fsk-ink);
	font-family: var(--fsk-font-display);
	font-size: clamp(0.6875rem, 0.9vw, 0.8125rem);
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.1;
	text-transform: uppercase;
}

/* Section intro copy. Capped so long lines stay readable on wide screens. */
.fsk-lead {
	max-width: var(--fsk-measure);
	color: var(--fsk-ink-soft);
	font-size: clamp(0.9375rem, 1.1vw, 1.125rem);
	line-height: 1.55;
}

.fsk-section--center .fsk-lead {
	margin-inline: auto;
}

.fsk-note {
	margin-block-start: 1rem;
	color: var(--fsk-ink-soft);
	font-size: clamp(0.8125rem, 0.9vw, 0.9375rem);
	line-height: 1.45;
	text-align: center;
}

/* Reusable card surface. `.fsk-card` is the handle for hand-written markup;
   `.is-style-fsk-card` is the Group block style registered in functions.php. */
.fsk-card,
.wp-block-group.is-style-fsk-card {
	padding: clamp(1.125rem, 1.8vw, 1.75rem);
	border: var(--fsk-border);
	border-radius: var(--fsk-radius);
	background: var(--fsk-card);
	box-shadow: var(--fsk-shadow);
}

/* Wrapper for a location switcher. The behaviour hooks on `[data-fsk-tabs]`,
   not on this class — it is the styling handle, and gives integrators a
   positioning context for anything they want to add inside. */
.fsk-tabgroup {
	position: relative;
}

/* --------------------------------------------------------------------------
   3. Decoration: traffic signs, stickers, doodles
   -------------------------------------------------------------------------- */

.fsk-sign {
	position: absolute;
	z-index: 5;
	inset-block-start: clamp(0.75rem, 2vw, 2rem);
	inset-inline-end: clamp(-0.625rem, 1vw, 3vw);
	width: clamp(3.375rem, 6vw, 6rem);
	aspect-ratio: 1;
	filter: drop-shadow(3px 3px 0 var(--fsk-ink));
	pointer-events: none;
}

.fsk-sign svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.fsk-sign text {
	font-family: var(--fsk-font-display);
	font-weight: 800;
}

.fsk-sticker {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	border: var(--fsk-border);
	border-radius: 999px;
	background: var(--fsk-paper);
	box-shadow: var(--fsk-shadow-sm);
	color: var(--fsk-ink);
	font-family: var(--fsk-font-display);
	font-size: clamp(0.6875rem, 0.9vw, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	padding: 0.4375rem 0.75rem;
	pointer-events: none;
	text-transform: uppercase;
}

.fsk-doodle {
	position: absolute;
	z-index: 3;
	filter: drop-shadow(3px 3px 0 var(--fsk-ink));
	pointer-events: none;
}

.fsk-doodle svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Density control. `data-fsk-chaos` mirrors the mock's chaos tiers so a site
   can dial the decoration down without editing any pattern. */
[data-fsk-chaos="ruhig"] .fsk-sign,
[data-fsk-chaos="ruhig"] .fsk-sticker,
[data-fsk-chaos="ruhig"] .fsk-doodle {
	display: none;
}

[data-fsk-chaos="mittel"] .fsk-sign--t3,
[data-fsk-chaos="mittel"] .fsk-sticker--t3,
[data-fsk-chaos="mittel"] .fsk-doodle--t3 {
	display: none;
}

/* --------------------------------------------------------------------------
   4. Announcement bar
   -------------------------------------------------------------------------- */

.fsk-announce {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5625rem var(--fsk-gutter);
	background: var(--fsk-ink);
	color: var(--fsk-paper);
	font-family: var(--fsk-font-display);
	font-size: clamp(0.6875rem, 0.85vw, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
}

.fsk-announce p {
	margin: 0;
}

.fsk-announce::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--fsk-pink);
	box-shadow: 0 0 0 3px rgb(253 89 180 / 30%);
	animation: fsk-pulse 1.6s infinite;
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

.fsk-header {
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(0.75rem, 2vw, 2.5rem);
	padding: 0.75rem var(--fsk-gutter);
	border-bottom: var(--fsk-border);
	background: color-mix(in srgb, var(--fsk-paper) 88%, transparent);
	backdrop-filter: blur(10px);
}

@supports not (background: color-mix(in srgb, red, blue)) {
	.fsk-header {
		background: var(--fsk-paper);
	}
}

.fsk-header .wp-block-site-logo img {
	height: clamp(2.25rem, 3.5vw, 3.25rem);
	width: auto;
}

/* Navigation sits between logo and actions from tablet up; below that the
   core overlay ("burger") takes over. */
.fsk-header__nav {
	flex: 1 1 auto;
	justify-content: center;
}

.fsk-header__actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: 0.625rem;
}

/* Square icon button (WhatsApp / phone). */
.fsk-icon-btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.375rem;
	border: var(--fsk-border);
	border-radius: 12px;
	background: var(--fsk-card);
	box-shadow: var(--fsk-shadow-sm);
	color: var(--fsk-ink);
	text-decoration: none;
	transition: transform 0.12s, box-shadow 0.12s;
}

.fsk-icon-btn:hover {
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 var(--fsk-ink);
}

.fsk-icon-btn:active {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--fsk-ink);
}

.fsk-icon-btn svg {
	display: block;
	width: 1.625rem;
	height: 1.625rem;
}

/* Core's burger, restyled to match the icon buttons. */
.fsk-header .wp-block-navigation__responsive-container-open {
	width: 2.75rem;
	height: 2.375rem;
	border: var(--fsk-border);
	border-radius: 12px;
	background: var(--fsk-badge);
	box-shadow: var(--fsk-shadow-sm);
	color: var(--fsk-ink);
}

.fsk-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--fsk-paper);
	padding-top: clamp(3rem, 8vw, 5rem);
}

/* Hide the desktop CTA where space is tight; the overlay menu covers it. */
.fsk-header__cta {
	display: none;
}

/* Structural breakpoints */
@media (width >= 48em) {
	.fsk-header__cta {
		display: inline-flex;
	}
}

/* --------------------------------------------------------------------------
   6. Ortstafel strip (scrolling location signs)
   -------------------------------------------------------------------------- */

.fsk-locstrip {
	position: relative;
	z-index: 2;
	padding-block-end: 0.875rem;
	background: var(--fsk-ink);
	overflow: hidden;
	/* Fade the ends so the loop seam is invisible on wide screens. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}

.fsk-locstrip__track {
	display: flex;
	width: max-content;
	animation: fsk-scroll 22s linear infinite;
}

.fsk-locstrip:hover .fsk-locstrip__track,
.fsk-locstrip:focus-within .fsk-locstrip__track {
	animation-play-state: paused;
}

/* The sign itself — also used standalone in the map section. */
.fsk-locsign {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 7.375rem;
	margin-inline-end: 0.5rem;
	padding: 0.75rem 0.3125rem 0.625rem;
	border: var(--fsk-border);
	border-top: none;
	border-radius: 0 0 5px 5px;
	background: var(--fsk-sign);
	box-shadow:
		inset 0 0 0 2px var(--fsk-sign),
		inset 0 0 0 3.5px var(--fsk-ink),
		var(--fsk-shadow-sm);
	color: var(--fsk-ink);
	font-family: var(--fsk-font-display);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	text-decoration: none;
	text-transform: uppercase;
}

.fsk-locsign small {
	color: rgb(23 18 15 / 62%);
	font-size: 0.5rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	text-transform: none;
}

.fsk-locsign:hover,
.fsk-locsign:focus-visible {
	background: var(--fsk-cyan);
	box-shadow:
		inset 0 0 0 2px var(--fsk-cyan),
		inset 0 0 0 3.5px var(--fsk-ink),
		var(--fsk-shadow-sm);
}

/* --------------------------------------------------------------------------
   7. USP marquee
   -------------------------------------------------------------------------- */

.fsk-marquee {
	position: relative;
	padding-block: clamp(0.8125rem, 1.4vw, 1.375rem);
	border-block: var(--fsk-border);
	background: var(--fsk-ink);
	color: var(--fsk-paper);
	overflow: hidden;
}

.fsk-marquee__track {
	display: flex;
	width: max-content;
	animation: fsk-scroll 26s linear infinite;
}

.fsk-marquee:hover .fsk-marquee__track {
	animation-play-state: paused;
}

.fsk-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	padding-inline: clamp(0.875rem, 1.5vw, 1.75rem);
	font-family: var(--fsk-font-display);
	font-size: clamp(1rem, 1.6vw, 1.5rem);
	font-weight: var(--fsk-display-weight);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.fsk-marquee__item::before {
	content: "\2605";
	color: var(--fsk-pink);
	font-size: 0.92em;
}

.fsk-marquee__item:nth-child(even)::before {
	color: var(--fsk-cyan);
}

/* --------------------------------------------------------------------------
   8. Hero
   --------------------------------------------------------------------------
   Mobile: copy stacked above a portrait image, as designed.
   Desktop: two columns — copy left, image right — so the headline never has to
   compete with the photo and the fold stays useful on a 16:9 screen.
   -------------------------------------------------------------------------- */

.fsk-hero {
	position: relative;
	border-bottom: var(--fsk-border);
	background: var(--wp--preset--gradient--hero-magenta, linear-gradient(168deg, #7c0b42 0%, #b81a62 42%, #ff6fbe 100%));
	color: var(--fsk-paper);
	overflow: clip;
}

.fsk-hero__inner {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
	padding-block: clamp(2rem, 5vw, 4.5rem);
}

.fsk-hero__copy > * + * {
	margin-block-start: 0.75rem;
}

/* Rotated, ink-outlined kicker. */
.fsk-hero__kicker {
	display: inline-block;
	margin: 0 0 0 clamp(0rem, 4vw, 2.125rem);
	color: var(--fsk-paper);
	font-family: var(--fsk-font-display);
	font-size: clamp(1.375rem, 2.6vw, 2.25rem);
	font-weight: var(--fsk-display-weight);
	letter-spacing: -0.025em;
	line-height: 0.95;
	rotate: -3deg;
	text-transform: uppercase;
	-webkit-text-stroke: 1.5px var(--fsk-ink);
	paint-order: stroke fill;
}

.fsk-hero__title {
	margin: 0;
	color: var(--fsk-paper);
	font-family: var(--fsk-font-display);
	font-size: clamp(2.0625rem, 5.4vw, 4.75rem);
	font-weight: var(--fsk-display-weight);
	letter-spacing: -0.03em;
	line-height: 0.9;
	text-transform: uppercase;
	text-wrap: balance;
}

/* The cyan "box" word. */
.fsk-hero__box {
	display: inline-block;
	margin: 0;
	padding: 0.0625rem 0.5625rem 0;
	border: var(--fsk-border);
	border-radius: 10px;
	background: var(--fsk-cyan);
	box-shadow: var(--fsk-shadow-sm);
	color: var(--fsk-ink);
	font-family: var(--fsk-font-display);
	font-size: clamp(1.75rem, 4vw, 3.5rem);
	font-weight: var(--fsk-display-weight);
	letter-spacing: -0.025em;
	line-height: 1.08;
	rotate: -2deg;
	text-transform: uppercase;
}

.fsk-hero__lede {
	max-width: 34ch;
	color: var(--fsk-paper);
	font-size: clamp(0.9375rem, 1.2vw, 1.1875rem);
	font-weight: 600;
	line-height: 1.5;
}

.fsk-hero__media img {
	display: block;
	width: 100%;
	aspect-ratio: 13 / 14;
	border: var(--fsk-border);
	border-radius: var(--fsk-radius);
	box-shadow: var(--fsk-shadow-lg);
	object-fit: cover;
}

/* The core Image block wraps every image in a <figure>. Inside these cards the
   figure is pure plumbing, so strip its margin and let it fill. */
:is(
	.fsk-hero__media,
	.fsk-contact__media,
	.fsk-coach,
	.fsk-fleet-card,
	.fsk-post__media
) :is(figure, .wp-block-image) {
	margin: 0;
}

/* The contact map is the one that has to fill its grid cell. */
.fsk-contact__media,
.fsk-contact__media :is(figure, .wp-block-image) {
	height: 100%;
}

/* Benefit pills under the hero copy. */
.fsk-benefits {
	display: flex;
	gap: 0.5rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.fsk-benefit {
	position: relative;
	flex: 1;
	padding: 0.875rem 0.5rem 0.625rem;
	border: var(--fsk-border);
	border-radius: 999px 999px var(--fsk-radius-sm) var(--fsk-radius-sm);
	box-shadow: var(--fsk-shadow-sm);
	color: var(--fsk-ink);
	text-align: center;
}

.fsk-benefit:nth-child(1) { background: var(--fsk-pink); rotate: -2deg; }
.fsk-benefit:nth-child(2) { background: var(--fsk-paper); rotate: 1deg; }
.fsk-benefit:nth-child(3) { background: var(--fsk-orange); }

.fsk-benefit::before {
	content: "\2605";
	position: absolute;
	top: -13px;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--fsk-ink);
	color: var(--fsk-paper);
	font-size: 13px;
	transform: translateX(-50%);
}

.fsk-benefit strong {
	display: block;
	font-family: var(--fsk-font-display);
	font-size: clamp(0.8125rem, 1vw, 1rem);
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.fsk-benefit span {
	display: block;
	margin-block-start: 2px;
	font-size: clamp(0.625rem, 0.8vw, 0.8125rem);
	font-weight: 600;
	line-height: 1.2;
}

/* Structural breakpoints */
@media (width >= 56.25em) {
	.fsk-hero__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		min-height: min(78svh, 46rem);
	}

	.fsk-hero__media img {
		aspect-ratio: 4 / 5;
		max-height: 40rem;
		margin-inline-start: auto;
	}
}

/* --------------------------------------------------------------------------
   9. Location tabs (Ortstafel tabs + panels)
   --------------------------------------------------------------------------
   Progressive enhancement: without JS every panel is visible and labelled, so
   the content is never trapped behind a dead button.
   -------------------------------------------------------------------------- */

.fsk-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block: 1.25rem;
	padding: 0;
	list-style: none;
}

.fsk-tab {
	display: flex;
	flex: 1 1 8rem;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 0.8125rem 0.3125rem 0.6875rem;
	border: var(--fsk-border);
	border-radius: 5px;
	background: var(--fsk-sign);
	box-shadow:
		inset 0 0 0 2px var(--fsk-sign),
		inset 0 0 0 3.5px var(--fsk-ink),
		var(--fsk-shadow-sm);
	color: var(--fsk-ink);
	cursor: pointer;
	font-family: var(--fsk-font-display);
	font-size: clamp(0.78125rem, 1vw, 0.9375rem);
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.1;
	text-transform: uppercase;
}

.fsk-tab small {
	color: rgb(23 18 15 / 62%);
	font-size: 0.5rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	text-transform: none;
}

.fsk-tab[aria-selected="true"] {
	background: var(--fsk-sign-deep);
	box-shadow:
		inset 0 0 0 2px var(--fsk-sign-deep),
		inset 0 0 0 3.5px var(--fsk-ink),
		1px 1px 0 var(--fsk-ink);
	transform: translate(2px, 2px);
}

.fsk-tab:focus-visible {
	outline: 3px solid var(--fsk-pink);
	outline-offset: 3px;
}

/* Panel heading: the visible location label. Hidden once the tabs are live,
   because the selected tab already names the location. */
.fsk-panel__label {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding: 0.25rem 0.625rem 0.1875rem;
	border: var(--fsk-border);
	border-radius: 5px;
	background: var(--fsk-sign-deep);
	box-shadow: 2px 2px 0 var(--fsk-ink);
	font-family: var(--fsk-font-display);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

[data-fsk-tabs-ready] .fsk-panel__label {
	display: none;
}

[data-fsk-tabs-ready] .fsk-panel[hidden] {
	display: none;
}

/* Without JS, space the stacked panels out. */
.fsk-panel + .fsk-panel {
	margin-block-start: 1.5rem;
}

[data-fsk-tabs-ready] .fsk-panel + .fsk-panel {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   10. Schedule (Theorie / Erste Hilfe)
   -------------------------------------------------------------------------- */

.fsk-schedule {
	display: grid;
	gap: 0.625rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.fsk-slot {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0.875rem;
	border: var(--fsk-border);
	border-radius: var(--fsk-radius-sm);
	background: var(--fsk-card);
	box-shadow: var(--fsk-shadow-sm);
}

.fsk-slot__day {
	flex: none;
	min-width: 3.375rem;
	padding: 0.5rem 0.625rem;
	border-radius: 9px;
	background: var(--fsk-ink);
	color: var(--fsk-paper);
	font-family: var(--fsk-font-display);
	font-size: 0.9375rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-align: center;
	text-transform: uppercase;
}

.fsk-slot__body {
	flex: 1;
	min-width: 0;
}

.fsk-slot__body strong {
	display: block;
	font-size: 0.90625rem;
	font-weight: 700;
	line-height: 1.25;
}

.fsk-slot__body span {
	color: var(--fsk-ink-soft);
	font-size: 0.75rem;
}

.fsk-slot__time {
	flex: none;
	font-family: var(--fsk-font-display);
	font-size: 0.875rem;
	font-weight: 700;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   11. Führerscheinklassen
   -------------------------------------------------------------------------- */

.fsk-class {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.875rem;
	height: 100%;
	padding: 0.875rem;
	border: var(--fsk-border);
	border-radius: var(--fsk-radius);
	background: var(--fsk-card);
	box-shadow: var(--fsk-shadow);
	color: var(--fsk-ink);
	text-decoration: none;
	transition: transform 0.12s, box-shadow 0.12s;
}

.fsk-class:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--fsk-shadow-lg);
}

.fsk-class:active {
	transform: translate(3px, 3px);
	box-shadow: 2px 2px 0 var(--fsk-ink);
}

.fsk-class__code {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 3.875rem;
	height: 3.875rem;
	border: var(--fsk-border);
	border-radius: 16px;
	background: var(--fsk-badge);
	box-shadow: var(--fsk-shadow-sm);
	font-family: var(--fsk-font-display);
	font-size: 1.5rem;
	font-weight: var(--fsk-display-weight);
	line-height: 1;
}

/* Alternate the chip colour down the grid. */
.fsk-classes > *:nth-child(even) .fsk-class__code { background: var(--fsk-pink); }
.fsk-classes > *:nth-child(odd) .fsk-class__code { background: var(--fsk-cyan); }

.fsk-class__body {
	flex: 1;
	min-width: 0;
}

.fsk-class__body h3 {
	margin: 0;
	font-family: var(--fsk-font-display);
	font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.1;
	text-transform: uppercase;
}

.fsk-class__tags {
	margin: 0.125rem 0 0;
	color: var(--fsk-ink-soft);
	font-family: var(--fsk-font-display);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.fsk-class__body p:not(.fsk-class__tags) {
	margin: 0.3125rem 0 0;
	color: var(--fsk-ink-soft);
	font-size: 0.78125rem;
	line-height: 1.35;
}

/* The arrow is decoration, so it is drawn rather than marked up. */
.fsk-class::after {
	content: "\2192";
	flex: none;
	align-self: center;
	font-family: var(--fsk-font-display);
	font-size: 1.375rem;
	font-weight: 700;
}

/* Stretched link: the heading anchor stays the single, readable link target
   for assistive tech while the whole card is clickable by pointer. */
.fsk-class__body a {
	color: inherit;
	text-decoration: none;
}

.fsk-class__body a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* --------------------------------------------------------------------------
   12. Kennzeichen (licence-plate download buttons)
   -------------------------------------------------------------------------- */

/* Two up on a phone, as designed; as many as fit from there. */
.fsk-plates {
	display: grid;
	gap: 0.625rem;
	grid-template-columns: repeat(auto-fit, minmax(min(46%, 9rem), 1fr));
}

.fsk-plate {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-height: 4rem;
	padding: 0 0 0.375rem 1rem;
	border: var(--fsk-border);
	border-radius: 8px;
	background: #fff;
	box-shadow: var(--fsk-shadow-sm);
	color: var(--fsk-ink);
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.12s, box-shadow 0.12s;
}

.fsk-plate:hover {
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 var(--fsk-ink);
	color: inherit;
}

.fsk-plate:active {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--fsk-ink);
}

/* The blue EU band with the ring of stars. */
.fsk-plate__eu {
	position: absolute;
	inset: 0 auto 0 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 13px;
	padding-bottom: 3px;
	background: #039;
	color: var(--fsk-sign);
	font-family: var(--fsk-font-display);
	font-size: 8px;
	font-weight: 700;
}

.fsk-plate__eu::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 50%;
	width: 8px;
	height: 8px;
	border: 1.5px dotted var(--fsk-sign);
	border-radius: 50%;
	transform: translateX(-50%);
}

.fsk-plate__code {
	padding-top: 0.625rem;
	color: var(--fsk-ink);
	font-family: var(--fsk-font-plate, var(--fsk-font-display));
	font-size: clamp(1.5rem, 2vw, 2rem);
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1;
	text-align: center;
}

.fsk-plate__city {
	margin-block-start: 3px;
	padding-inline: 4px;
	color: var(--fsk-ink-soft);
	font-family: var(--fsk-font-display);
	font-size: 0.59375rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.15;
	text-align: center;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   13. Team
   --------------------------------------------------------------------------
   The mock opened a modal on tap because a phone has no room for the bio.
   Desktop does, so the bio lives in the card — no JS, no trapped content.
   -------------------------------------------------------------------------- */

.fsk-coach {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	height: 100%;
	padding: 1.25rem 0.875rem 1.125rem;
	border: var(--fsk-border);
	border-radius: var(--fsk-radius);
	background: var(--fsk-card);
	box-shadow: var(--fsk-shadow);
	text-align: center;
}

.fsk-coach img {
	width: clamp(4.625rem, 8vw, 7rem);
	height: clamp(4.625rem, 8vw, 7rem);
	border: var(--fsk-border);
	border-radius: 50%;
	box-shadow: var(--fsk-shadow-sm);
	object-fit: cover;
}

.fsk-coach__name {
	margin: 0;
	font-family: var(--fsk-font-display);
	font-size: clamp(0.8125rem, 1.1vw, 1.0625rem);
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
}

.fsk-coach__role {
	margin: 0;
	color: var(--fsk-accent);
	font-family: var(--fsk-font-display);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Ortstafel-style location badge on the card. */
.fsk-coach__ort {
	display: inline-block;
	margin: 0;
	padding: 0.25rem 0.625rem;
	border: 2px solid var(--fsk-ink);
	border-radius: 4px;
	background: var(--fsk-sign);
	box-shadow: 2px 2px 0 var(--fsk-ink);
	font-family: var(--fsk-font-display);
	font-size: 0.6875rem;
	font-weight: 800;
	text-transform: uppercase;
}

.fsk-coach__bio {
	margin: 0;
	color: var(--fsk-ink-soft);
	font-size: 0.8125rem;
	line-height: 1.45;
}

/* --------------------------------------------------------------------------
   14. Standortkarte
   -------------------------------------------------------------------------- */

.fsk-map {
	position: relative;
	max-width: 46rem;
	margin-inline: auto;
}

.fsk-map__svg {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(4px 4px 0 var(--fsk-ink));
}

.fsk-map__dot {
	position: absolute;
	width: clamp(0.75rem, 1.4vw, 1.125rem);
	aspect-ratio: 1;
	border: var(--fsk-border);
	border-radius: 50%;
	background: var(--fsk-pink);
	transform: translate(-50%, -50%);
}

.fsk-map__label {
	position: absolute;
	padding: 0.25rem 0.625rem 0.1875rem;
	border: var(--fsk-border);
	border-radius: 5px;
	background: var(--fsk-sign-deep);
	box-shadow: 2px 2px 0 var(--fsk-ink);
	color: var(--fsk-ink);
	font-family: var(--fsk-font-display);
	font-size: clamp(0.6875rem, 1.1vw, 1rem);
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.1;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   15. Fuhrpark
   -------------------------------------------------------------------------- */

.fsk-fleet-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: var(--fsk-border);
	border-radius: var(--fsk-radius);
	background: var(--fsk-card);
	box-shadow: var(--fsk-shadow);
	overflow: hidden;
}

.fsk-fleet-card img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-bottom: var(--fsk-border);
	object-fit: cover;
}

.fsk-fleet-card__info {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 0.625rem 0.75rem;
}

.fsk-fleet-card__info strong {
	font-family: var(--fsk-font-display);
	font-size: clamp(0.8125rem, 1.1vw, 1.0625rem);
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
}

.fsk-fleet-card__info span {
	color: var(--fsk-accent);
	font-family: var(--fsk-font-display);
	font-size: 0.65625rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   16. Video
   -------------------------------------------------------------------------- */

.fsk-video {
	border-top: var(--fsk-border);
	border-bottom: var(--fsk-border);
	background: #111;
}

.fsk-video .wp-block-video,
.fsk-video figure {
	margin: 0;
}

.fsk-video video,
.fsk-video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 82svh;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   17. Bewertungen
   -------------------------------------------------------------------------- */

.fsk-review {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: clamp(1.125rem, 1.8vw, 1.75rem);
	border: var(--fsk-border);
	border-radius: var(--fsk-radius);
	background: var(--fsk-card);
	box-shadow: var(--fsk-shadow);
}

.fsk-review__stars {
	margin: 0;
	color: var(--fsk-pink-deep);
	font-size: 0.9375rem;
	letter-spacing: 2px;
}

.fsk-review blockquote,
.fsk-review__quote {
	flex: 1;
	margin: 0.625rem 0 0.875rem;
	padding: 0;
	border: 0;
	font-size: clamp(0.9375rem, 1.1vw, 1.125rem);
	font-weight: 500;
	line-height: 1.5;
}

.fsk-review__who {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.fsk-review__avatar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 2px solid var(--fsk-ink);
	border-radius: 50%;
	background: var(--fsk-cyan);
	font-family: var(--fsk-font-display);
	font-size: 0.9375rem;
	font-weight: 800;
}

.fsk-review__who strong {
	display: block;
	font-size: 0.84375rem;
	font-weight: 700;
}

.fsk-review__who span {
	color: var(--fsk-ink-soft);
	font-size: 0.71875rem;
}

/* --------------------------------------------------------------------------
   18. CTA
   -------------------------------------------------------------------------- */

.fsk-cta {
	position: relative;
	padding-block: clamp(3.25rem, 7vw, 6.5rem);
	border-block: var(--fsk-border);
	background: var(--fsk-cyan);
	overflow: clip;
	text-align: center;
}

.fsk-cta h2 {
	margin: 0 0 0.5rem;
	font-size: clamp(2.125rem, 5vw, 4rem);
	text-wrap: balance;
}

.fsk-cta p {
	max-width: 32ch;
	margin-inline: auto;
	font-size: clamp(0.9375rem, 1.2vw, 1.1875rem);
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   19. Blog
   -------------------------------------------------------------------------- */

.fsk-post {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	border: var(--fsk-border);
	border-radius: var(--fsk-radius);
	background: var(--fsk-card);
	box-shadow: var(--fsk-shadow);
	overflow: hidden;
	transition: transform 0.12s, box-shadow 0.12s;
}

.fsk-post:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--fsk-shadow-lg);
}

.fsk-post__media {
	position: relative;
	border-bottom: var(--fsk-border);
}

.fsk-post__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Category chip over the image. Also used on single posts. */
.fsk-post__cat,
.fsk-post__media .wp-block-post-terms {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.3125rem 0.6875rem;
	border: var(--fsk-border);
	border-radius: 999px;
	background: var(--fsk-pink);
	box-shadow: var(--fsk-shadow-sm);
	color: var(--fsk-ink);
	font-family: var(--fsk-font-display);
	font-size: 0.65625rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.fsk-post__media .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

.fsk-post__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: clamp(0.875rem, 1.4vw, 1.375rem);
}

.fsk-post__meta {
	margin: 0;
	color: var(--fsk-ink-soft);
	font-family: var(--fsk-font-display);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.fsk-post__body h3,
.fsk-post__body .wp-block-post-title {
	margin: 0.4375rem 0 0;
	font-family: var(--fsk-font-display);
	font-size: clamp(1.125rem, 1.5vw, 1.4375rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.08;
	text-transform: none;
	text-wrap: balance;
}

/* Stretched link, as on the class cards: one link for assistive tech, the
   whole card clickable by pointer. */
.fsk-post__body h3 a,
.fsk-post__body .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.fsk-post__body h3 a::after,
.fsk-post__body .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Keep the category chip above that overlay so it stays clickable. */
.fsk-post__cat,
.fsk-post__media .wp-block-post-terms {
	z-index: 1;
}

.fsk-post__body p:not(.fsk-post__meta) {
	margin: 0.5rem 0 0;
	color: var(--fsk-ink-soft);
	font-size: 0.8125rem;
	line-height: 1.45;
}

.fsk-post__more {
	margin-block-start: auto;
	padding-block-start: 0.75rem;
	color: var(--fsk-accent);
	font-family: var(--fsk-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   20. SEO-Text + Klassen-Tabelle
   -------------------------------------------------------------------------- */

.fsk-seo {
	border-top: var(--fsk-border);
	background: var(--fsk-paper);
}

.fsk-seo h2 {
	font-size: clamp(1.0625rem, 1.8vw, 1.75rem);
	line-height: 1.15;
	text-wrap: balance;
}

.fsk-seo p {
	color: rgb(23 18 15 / 72%);
	font-size: clamp(0.8125rem, 1vw, 1rem);
	font-weight: 500;
	line-height: 1.6;
}

.fsk-seo h3 {
	font-size: clamp(0.875rem, 1.2vw, 1.1875rem);
	letter-spacing: 0.02em;
}

/* Table: scrolls inside its own box rather than pushing the page sideways.
   Two entry points, one rule set:
     .fsk-table                  — the handle for hand-written markup
     .is-style-fsk-table         — the Table block style from functions.php
   Both are a wrapper around a <table>, so `:is()` lets them share everything. */
:is(.fsk-table, .wp-block-table.is-style-fsk-table) {
	overflow-x: auto;
}

:is(.fsk-table, .wp-block-table.is-style-fsk-table) table {
	width: 100%;
	border-collapse: collapse;
	color: rgb(23 18 15 / 78%);
	font-size: clamp(0.71875rem, 0.9vw, 0.875rem);
	line-height: 1.4;
}

:is(.fsk-table, .wp-block-table.is-style-fsk-table) :is(th, td) {
	padding: 0.375rem 0.5rem;
	border: 1.5px solid var(--fsk-ink);
	text-align: left;
	vertical-align: top;
}

:is(.fsk-table, .wp-block-table.is-style-fsk-table) thead th {
	background: var(--fsk-cyan);
	font-family: var(--fsk-font-display);
	font-size: 0.9em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Group rows — a single cell spanning the table. */
:is(.fsk-table, .wp-block-table.is-style-fsk-table) tbody td[colspan] {
	background: var(--fsk-pink);
	color: var(--fsk-ink);
	font-family: var(--fsk-font-display);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

:is(.fsk-table, .wp-block-table.is-style-fsk-table) td:first-child {
	font-family: var(--fsk-font-display);
	font-weight: 800;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   21. FAQ (core Details block)
   -------------------------------------------------------------------------- */

.fsk-faq {
	display: grid;
	gap: 0.625rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
	align-items: start;
}

.fsk-faq details,
.wp-block-details.is-style-fsk-faq-item {
	border: var(--fsk-border);
	border-radius: var(--fsk-radius);
	background: var(--fsk-card);
	box-shadow: var(--fsk-shadow);
	overflow: hidden;
}

.fsk-faq summary,
.wp-block-details.is-style-fsk-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	cursor: pointer;
	font-family: var(--fsk-font-display);
	font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
	font-weight: 700;
	line-height: 1.25;
	list-style: none;
}

.fsk-faq summary::-webkit-details-marker,
.wp-block-details.is-style-fsk-faq-item summary::-webkit-details-marker {
	display: none;
}

/* The +/x badge. Drawn in CSS so the pattern markup stays clean. */
.fsk-faq summary::after,
.wp-block-details.is-style-fsk-faq-item summary::after {
	content: "+";
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 2px solid var(--fsk-ink);
	border-radius: 50%;
	background: var(--fsk-cyan);
	box-shadow: 2px 2px 0 var(--fsk-ink);
	font-family: var(--fsk-font-display);
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	transition: transform 0.15s ease;
}

.fsk-faq details[open] summary::after,
.wp-block-details.is-style-fsk-faq-item[open] summary::after {
	background: var(--fsk-pink);
	transform: rotate(45deg);
}

.fsk-faq details > *:not(summary),
.wp-block-details.is-style-fsk-faq-item > *:not(summary) {
	margin: 0;
	padding: 0 1rem 0.875rem;
	color: var(--fsk-ink-soft);
	font-size: clamp(0.84375rem, 1vw, 1rem);
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   22. Kontakt
   -------------------------------------------------------------------------- */

.fsk-contact {
	border: var(--fsk-border);
	border-radius: var(--fsk-radius);
	background: var(--fsk-card);
	box-shadow: var(--fsk-shadow);
	overflow: hidden;
}

.fsk-contact__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 9.375rem;
	object-fit: cover;
}

.fsk-contact__body {
	padding: clamp(1.125rem, 1.8vw, 2rem);
}

.fsk-contact__row {
	display: flex;
	gap: 0.75rem;
	padding-block: 0.6875rem;
	border-bottom: 1.5px dashed rgb(23 18 15 / 18%);
}

.fsk-contact__row:last-child {
	border-bottom: 0;
}

.fsk-contact__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.125rem;
	height: 2.125rem;
	border: 2px solid var(--fsk-ink);
	border-radius: 10px;
	background: var(--fsk-badge);
	font-size: 0.9375rem;
	transition: transform 0.15s;
}

.fsk-contact__row:hover .fsk-contact__icon {
	animation: fsk-wiggle 0.4s ease-in-out 2;
}

.fsk-contact__text strong {
	display: block;
	color: var(--fsk-ink-soft);
	font-family: var(--fsk-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.fsk-contact__text span,
.fsk-contact__text a {
	color: var(--fsk-ink);
	font-size: clamp(0.875rem, 1vw, 1rem);
	font-weight: 600;
	line-height: 1.4;
}

/* Structural breakpoints — map beside the details from tablet up. */
@media (width >= 48em) {
	.fsk-contact {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		align-items: stretch;
	}

	.fsk-contact__media {
		border-right: var(--fsk-border);
	}
}

/* --------------------------------------------------------------------------
   23. Footer
   -------------------------------------------------------------------------- */

.fsk-footer {
	padding-block: clamp(1.875rem, 4vw, 4rem);
	background: var(--fsk-ink);
	color: var(--fsk-paper);
}

.fsk-footer a {
	color: inherit;
}

.fsk-footer .wp-block-site-logo img {
	height: clamp(2.125rem, 3vw, 3rem);
	width: auto;
}

.fsk-footer__tagline {
	max-width: 34ch;
	color: #d8cfc8;
	font-size: 0.8125rem;
	line-height: 1.6;
}

/* Social pills. */
.fsk-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fsk-footer__social a {
	display: inline-block;
	padding: 0.4375rem 0.8125rem;
	border: 2px solid var(--fsk-paper);
	border-radius: 999px;
	background: var(--fsk-cyan);
	color: var(--fsk-ink);
	font-family: var(--fsk-font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-transform: uppercase;
}

.fsk-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.875rem;
	margin: 0;
	padding: 0;
	color: #9c938d;
	font-size: 0.6875rem;
	list-style: none;
}

.fsk-footer__legal a {
	color: #9c938d;
	text-decoration: none;
}

.fsk-footer__legal a:hover {
	text-decoration: underline;
}

.fsk-footer__copy {
	color: #6e665f;
	font-size: 0.65625rem;
}

.fsk-footer .wp-block-separator {
	border-color: #3a332e;
	opacity: 1;
}

/* --------------------------------------------------------------------------
   24. Motion
   -------------------------------------------------------------------------- */

@keyframes fsk-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@keyframes fsk-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

@keyframes fsk-wiggle {
	0%, 100% { rotate: -6deg; }
	50% { rotate: 6deg; }
}

@keyframes fsk-bob {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -6px; }
}

@keyframes fsk-swing {
	0%, 100% { rotate: -9deg; }
	50% { rotate: 9deg; }
}

@keyframes fsk-spin {
	to { rotate: 360deg; }
}

@keyframes fsk-heartbeat {
	0%, 100% { scale: 1; }
	15% { scale: 1.18; }
	30% { scale: 1; }
}

@media (prefers-reduced-motion: no-preference) {
	.fsk-sign { animation: fsk-bob 3.4s ease-in-out infinite; }
	.fsk-sign--sway { animation: fsk-swing 3s ease-in-out infinite; }
	.fsk-sign--spin svg { animation: fsk-spin 9s linear infinite; }
	.fsk-sign--t2 { animation-delay: -1s; }
	.fsk-sign--t3 { animation-delay: -1.8s; }

	.fsk-doodle { animation: fsk-wiggle 2.6s ease-in-out infinite; }
	.fsk-doodle--t2 { animation-duration: 3.1s; animation-delay: -0.6s; }
	.fsk-doodle--t3 { animation: fsk-heartbeat 1.8s ease-in-out infinite; }

	/* Tier suffixes stagger the idle motion so nothing moves in lockstep;
	   they double as the density switches under [data-fsk-chaos]. */
	.fsk-sticker { animation: fsk-bob 3.2s ease-in-out infinite; }
	.fsk-sticker--t2 { animation-delay: -1.4s; }
	.fsk-sticker--t3 { animation-delay: -2.1s; }

	.fsk-benefit::before { animation: fsk-wiggle 2.4s ease-in-out infinite; }
	.fsk-benefit:nth-child(2)::before { animation-delay: -0.8s; }
	.fsk-benefit:nth-child(3)::before { animation-delay: -1.6s; }
}

/* Everything that moves on its own stops here — including the marquees, which
   would otherwise keep scrolling for users who asked for stillness. */
@media (prefers-reduced-motion: reduce) {
	.fsk-marquee__track,
	.fsk-locstrip__track,
	.fsk-announce::before {
		animation: none;
	}

	.fsk-marquee__track,
	.fsk-locstrip__track {
		flex-wrap: wrap;
		width: 100%;
		justify-content: center;
	}
}