.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"RM Neue";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"RM Neue";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"RM Neue";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"RM Neue";--e-global-typography-accent-font-weight:700;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* cavort.de kit custom CSS - source of truth for the kit's custom_css.
   Push with: python3 scripts/push-kit.py
   Port of the Astro build (../cavort-de): global.css, ProjectCard, HoverColorBoss,
   Marquee, LegalBand. Read ../cavort-de/CLAUDE.md for WHY each rule is the way it is.

   What lives here and not in the V4 global classes (cv-*):
   - @font-face (RM Neue is not a Google font, so no V4 font variable can hold it)
   - state the script toggles: [data-hovered], .dimmed, body[data-card-hover]
   - @container and non-Elementor @media queries (900px / 600px tall / 520px ...)
   - ::before dots, keyframes, reduced motion, the legal-page prose
   Class rules compile to `.elementor .cv-x` (0,2,0); overrides here are written
   one step more specific so they win regardless of load order. */

@font-face {
	font-family: "RM Neue";
	src: url("/wp-content/uploads/2026/09/RMNeue-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "RM Neue";
	src: url("/wp-content/uploads/2026/09/RMNeue-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	/* Subset of JetBrainsMonoNerdFont-Regular (Latin-1 + umlauts), 4KB. */
	font-family: "JetBrains Mono NF";
	src: url("/wp-content/uploads/2026/09/JetBrainsMonoNF-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--cv-font-body: "RM Neue", "Helvetica Neue", Arial, sans-serif;
	--cv-font-mono: "JetBrains Mono NF", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--cv-fg: #111111;
	--cv-blue: #385aa5;
	--cv-red: #e94c23;
	--cv-dim: #757575;
	--cv-box: 1400px;
	--cv-gutter: clamp(0.5rem, 1.5vw, 1.5rem);
}

html,
body {
	background: #ffffff;
	color: var(--cv-fg);
	font-family: var(--cv-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background-color 0.3s ease;
}

body {
	margin: 0;
	min-height: 100vh;
}

/* ---------------------------------------------------------------- tiles */

.elementor .cv-tile[data-hovered="true"] {
	border-color: var(--card-primary-color);
}

.elementor .cv-tile:focus-visible {
	border-color: var(--card-primary-color);
	outline: 2px solid var(--card-ink);
	outline-offset: -12px;
}

/* ONE flat grey for every dimmed tile, not a filter: grayscale(1) keeps each
   fill's own luminance and gives eight greys. #757575 carries white (4.61:1)
   and black (4.56:1) ink. No opacity: the page behind is the hovered tint. */
.elementor .cv-tile.dimmed {
	background-color: var(--cv-dim) !important;
}

/* The flat grey cannot reach the logo image - two-colour marks keep their
   brand colours without this. */
.elementor .cv-tile.dimmed .cv-logo {
	filter: grayscale(1);
}

.elementor .cv-logo {
	transition: filter 0.3s ease;
}

/* Compact tiles have no meta rows, so the mark uses nearly the whole tile. */
.elementor .cv-tile--compact .cv-logo-slot {
	height: min(100%, calc(74cqh * var(--logo-scale, 1)));
}

/* Rail insets live HERE, physical, not in the classes: Elementor rewrites a
   class's top/left/right into inset-block-start / inset-inline-*, and on an
   element with writing-mode: vertical-rl those logical axes are rotated - both
   rails landed in the middle of the tile (2026-09-25). */
.elementor .cv-tile .cv-rail {
	inset: auto;
	top: 50%;
}

.elementor .cv-tile .cv-rail--left {
	left: clamp(0.4rem, 1.6cqw, 0.9rem);
}

.elementor .cv-tile .cv-rail--right {
	right: clamp(0.4rem, 1.6cqw, 0.9rem);
}

/* Short tiles cannot show a full coordinate string. */
@container (max-height: 200px) {
	.elementor .cv-rail {
		display: none;
	}
}

/* The photo tiles are not tiles, so they follow the body flag. Desaturate AND
   flatten, so they read as the same dim state as the #757575 tiles. */
body[data-card-hover="true"] .elementor .cv-photo {
	filter: grayscale(1) contrast(0.4) brightness(0.88);
}

/* ------------------------------------------------------ marquee + legal */

.elementor .cv-marquee-item::before,
.elementor .cv-legal-link::before {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 0.55em;
	height: 0.55em;
	margin-right: 0.6em;
	border-radius: 50%;
	background-color: var(--cv-red);
	transition: background-color 0.3s ease;
	vertical-align: 0.05em;
}

.elementor .cv-marquee-track {
	animation: cv-marquee 40s linear infinite;
}

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

/* Accent blue stops reading on a saturated tint: both bands go white while a
   tile is hovered. */
body[data-card-hover="true"] .elementor .cv-marquee-item,
body[data-card-hover="true"] .elementor .cv-legal-link {
	color: #ffffff;
}

body[data-card-hover="true"] .elementor .cv-marquee-item::before,
body[data-card-hover="true"] .elementor .cv-legal-link::before {
	background-color: #ffffff;
}

.elementor .cv-legal-link:hover,
.elementor .cv-legal-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* "404." - the red full stop from the Astro page (.red-dot). */
.elementor .cv-404-title::after {
	content: ".";
	color: var(--cv-red);
}

/* --------------------------------------------------------- responsive */

/* Below these the eight tiles cannot share one screen: release the height
   lock, every tile one cell of the SAME aspect ratio, memes hidden. */
@media (max-width: 900px), (max-height: 600px) {
	body .elementor .cv-bento {
		height: auto;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: none;
		grid-template-areas:
			"cavort bearfort"
			"foxburrow friedwald"
			"c1 c2"
			"c3 c4";
	}

	body .elementor .cv-photo {
		display: none;
	}

	body .elementor .cv-tile {
		height: auto;
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 640px) {
	body .elementor .cv-rail {
		display: none;
	}

	body .elementor .cv-wordmark {
		max-width: 88%;
	}
}

@media (max-width: 560px) {
	body .elementor .cv-legal {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.6em 0;
	}

	body .elementor .cv-legal-list,
	body .elementor .cv-legal-list--legal {
		justify-content: flex-start;
		gap: 0.4em 1.4em;
	}
}

@media (max-width: 520px) {
	body .elementor .cv-bento {
		grid-template-columns: 1fr;
		grid-template-areas: "cavort" "bearfort" "foxburrow" "friedwald" "c1" "c2" "c3" "c4";
	}

	body .elementor .cv-tile {
		aspect-ratio: 16 / 10;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor .cv-marquee-track {
		animation: none;
	}

	html,
	body,
	.elementor .cv-tile,
	.elementor .cv-photo,
	.elementor .cv-logo {
		transition: none;
	}
}

/* ------------------------------------------- consent banner (cvrt-legal) */

/* Port of the Astro ConsentBanner card: bottom-left, above the legal band so
   Impressum/Datenschutz stay clickable, 3px blue frame, uppercase buttons.
   The theme vars (accent, radius, shadow) are set via mcp/legal/v1/consent/theme;
   the font stays `inherit` - cvrt-legal HTML-escapes quotes in that var. */
body .cvrt-consent {
	inset: auto clamp(0.5rem, 1.5vw, 1.5rem) calc(var(--legal-h, 0px) + 0.75rem) clamp(0.5rem, 1.5vw, 1.5rem);
	max-width: 26rem;
	margin: 0;
	padding: 1.1rem 1.25rem;
	border: 3px solid var(--cv-blue);
	color: var(--cv-blue);
}

body .cvrt-consent__title {
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cv-blue);
}

body .cvrt-consent__text {
	margin: 0 0 1rem;
	line-height: 1.45;
	color: #1a1a1a;
}

body .cvrt-consent a {
	color: var(--cv-blue);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

body .cvrt-consent__btn {
	padding: 0.6rem 0.9rem;
	border: 2px solid var(--cv-blue);
	background: #ffffff;
	color: var(--cv-blue);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

body .cvrt-consent__btn--accept,
body .cvrt-consent__btn--save {
	background: var(--cv-blue);
	color: #ffffff;
}

body .cvrt-consent__btn:hover,
body .cvrt-consent__btn:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

body .cvrt-consent__btn:focus-visible,
body .cvrt-consent a:focus-visible {
	outline: 3px solid var(--cv-red);
	outline-offset: 2px;
}

/* ------------------------------------------------ legal pages (cvrt-legal) */

/* Impressum/Datenschutz render through Hello's default template. Same box and
   rhythm as the Astro .legal-prose (max-w-screen-xl, py-24, 70ch). */
/* Hello's .site-main caps at 1140px and would push the text 70px right of the
   Astro column; the box below is the one that matches it. */
.site-main {
	max-width: none;
	padding: 0;
	margin: 0;
}

.site-main .page-content {
	box-sizing: border-box;
	max-width: 1280px;
	margin: 0 auto;
	padding: 6rem clamp(1rem, 3vw, 2rem);
}

.site-main .page-content > * {
	max-width: 70ch;
}

.site-main .page-content {
	color: var(--cv-fg);
	font-family: var(--cv-font-body);
	line-height: 1.7;
}

.site-main .page-content h1 {
	font-family: var(--cv-font-body);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 2rem;
}

.site-main .page-content h2 {
	font-family: var(--cv-font-body);
	font-size: clamp(1.35rem, 2.2vw, 1.75rem);
	font-weight: 700;
	line-height: 1.25;
	margin: 3rem 0 0.75rem;
}

.site-main .page-content h3 {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 2rem 0 0.5rem;
}

.site-main .page-content h4 {
	font-size: 1rem;
	font-weight: 700;
	margin: 1.5rem 0 0.5rem;
}

.site-main .page-content p,
.site-main .page-content ul,
.site-main .page-content ol {
	margin: 0 0 1rem;
}

.site-main .page-content ul,
.site-main .page-content ol {
	padding-left: 1.5rem;
}

.site-main .page-content li {
	margin: 0 0 0.35rem;
}

.site-main .page-content a {
	color: var(--cv-blue);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	overflow-wrap: anywhere;
}

.site-main .page-content a:hover {
	color: var(--cv-red);
}

.site-main .page-content > :first-child {
	margin-top: 0;
}/* End custom CSS */