/* Style layers, controlled by classes on <html>:
   - html.ek-motion  = "Ruhig + Bewegung": key figures card, card lift, scroll fade-in, count-up – colours stay "Ruhig"
   - html.ek-dyn (+ .ek-dyn--light | .ek-dyn--dark) = "Dynamisch hell/dunkel" on top of ek-motion:
                       colour blend logo blue -> magenta, condensed type, hero/header styling
   LIVE: "ek-motion ek-dyn ek-dyn--light" (TypoScript config.htmlTag.attributes.class). Without classes the site shows
   the plain "Ruhig" style. Other variants are checked by the tests with EK_STYLE. Animations respect
   prefers-reduced-motion. */

@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-display: swap;
	font-weight: 600;
	src: url('../Fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-display: swap;
	font-weight: 700;
	src: url('../Fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Barlow Condensed';
	font-style: normal;
	font-display: swap;
	font-weight: 700;
	src: url('../Fonts/barlow-condensed-latin-ext-700-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =================================================================== layer "motion": content + animation */
html.ek-motion {
	--ek-radius-lg: 1rem;
	--ek-dyn-line: var(--ek-line);
}

/* =================================================================== layer "dyn": colours + type (light + dark) */
html.ek-dyn {
	--ek-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
	--ek-blend: linear-gradient(115deg, #17718a 0%, #1a809c 30%, #6a3f78 65%, #c31e66 100%);
	--ek-radius-lg: 1rem;
}

/* condensed display type */
html.ek-dyn :is(h1, h2, .ek-hero__title, .ek-stat__value, .ek-cards h3) {
	font-family: var(--ek-display);
	font-weight: 700;
	letter-spacing: .005em;
}
html.ek-dyn h2 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem); }
html.ek-dyn .ek-content h2::after { width: 64px; height: 4px; background: var(--ek-blend); }

/* header + menu */
html.ek-dyn .ek-header { border-bottom: 0; box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
html.ek-dyn .ek-header::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: var(--ek-blend);
}
html.ek-dyn .ek-header .nav-link {
	font-family: var(--ek-display);
	font-weight: 600;
	font-size: 1.12rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* ---------- hero (home): full width photo with colour blend, centred headline ---------- */
html.ek-dyn .ek-hero--home {
	max-width: none;
	margin: 0;
	border-radius: 0;
	min-height: clamp(420px, 48vw, 600px);
	align-items: center;
	text-align: center;
	padding-block: 4rem 7rem;
	--ek-hero-overlay: linear-gradient(115deg, rgba(23, 113, 138, .9) 0%, rgba(20, 35, 43, .55) 48%, rgba(195, 30, 102, .85) 100%);
}
html.ek-dyn .ek-hero--home .ek-hero__inner { display: flex; justify-content: center; }
html.ek-dyn .ek-hero--home .ek-hero__title {
	max-width: none;
	font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem);
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: .02em;
}
html.ek-dyn .ek-hero--home .ek-hero__title::before { margin-inline: auto; background: #fff; }
html.ek-dyn .ek-hero--home .ek-hero__lead { margin-inline: auto; font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); }
html.ek-dyn .ek-hero__title,
html.ek-dyn .ek-hero__lead { animation: ek-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
html.ek-dyn .ek-hero__lead { animation-delay: .15s; }
@keyframes ek-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ---------- subpages: slim colour-blend band instead of the white title ---------- */
html.ek-dyn .ek-hero:not(.ek-hero--home) {
	background: var(--ek-blend);
	color: #fff;
	padding-block: 2.75rem 2.5rem;
	position: relative;
	overflow: hidden;
}
html.ek-dyn .ek-hero:not(.ek-hero--home)::after {
	/* soft light sweep */
	content: '';
	position: absolute;
	inset: -50% -10% auto auto;
	width: 60%;
	height: 200%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, .18), transparent);
	pointer-events: none;
}
html.ek-dyn .ek-hero:not(.ek-hero--home) .ek-hero__title { color: #fff; font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); }
html.ek-dyn .ek-hero:not(.ek-hero--home) .ek-hero__title::before { background: #fff; }
html.ek-dyn main > .container:first-child { border-bottom: 0; }

/* ---------- key figures: card overlapping the hero ---------- */
html.ek-motion .ek-content--home { padding-top: 0; }
html.ek-motion .ek-home-tiles > .frame-type-ek_stats {
	position: relative;
	z-index: 2;
	margin: -5.5rem auto 3rem;
	max-width: 1100px;
	padding: 1.5rem 1rem;
	border-radius: var(--ek-radius-lg);
	box-shadow: 0 20px 50px rgba(10, 30, 40, .25);
}
html.ek-motion .ek-stats { gap: 0; }
html.ek-motion .ek-stat { background: none; border-radius: 0; padding-block: .5rem; }
html.ek-motion .ek-stat + .ek-stat { border-left: 1px solid var(--ek-dyn-line); }
html.ek-motion .ek-home-tiles > .frame-type-ek_stats { background: #fff; }
html.ek-motion:not(.ek-dyn) .ek-hero--home { padding-bottom: 7rem; }   /* room for the overlapping card */
html.ek-motion .ek-stat__value { font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem); }
html.ek-dyn .ek-stat__value {
	background: linear-gradient(90deg, #c31e66, #e0457f);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
@media (max-width: 767.98px) {
	html.ek-motion .ek-stat + .ek-stat { border-left: 0; border-top: 1px solid var(--ek-dyn-line); }
}

/* ---------- cards: rounded, lift + glow on hover ---------- */
html.ek-motion .ek-tiles figure,
html.ek-motion .ek-cards > .frame {
	border-radius: var(--ek-radius-lg);
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}
html.ek-motion .ek-cards > .frame { box-shadow: 0 6px 20px rgba(20, 35, 43, .07); }
html.ek-motion .ek-tiles figure:hover,
html.ek-motion .ek-cards > .frame:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(20, 35, 43, .18);
}
html.ek-dyn .ek-tiles figure:hover,
html.ek-dyn .ek-cards > .frame:hover {
	box-shadow: 0 18px 40px rgba(26, 128, 156, .28), 0 0 0 1px rgba(195, 30, 102, .25);
}
html.ek-dyn .ek-tiles figcaption {
	font-family: var(--ek-display);
	font-size: 1.4rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	background: linear-gradient(180deg, transparent 0%, rgba(23, 113, 138, .55) 45%, rgba(106, 63, 120, .92) 100%);
}
html.ek-dyn .ek-cards > .frame { border-top: 0; }
html.ek-dyn .ek-cards > .frame::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--ek-blend);
	z-index: 1;
}
html.ek-dyn .ek-cards h3 { font-size: 1.45rem; }

/* highlighted band: colour blend (white text stays ≥ 4.5:1 on every part of the gradient) */
html.ek-dyn .ek-band {
	background: linear-gradient(115deg, #17718a 0%, #4f4d7c 55%, #a82160 100%);
	border-left: 0;
	border-radius: var(--ek-radius-lg);
	box-shadow: 0 18px 40px rgba(23, 113, 138, .25);
}
html.ek-dyn .ek-more {
	display: inline-block;
	padding: .55rem 1.3rem;
	border-radius: 2rem;
	border: 2px solid currentColor;
}

/* footer: deep colour blend */
html.ek-dyn {
	--ek-footer-bg: linear-gradient(120deg, #0d2833 0%, #142a33 55%, #3a1830 100%);
}

/* ---------- scroll reveal ---------- */
html.ek-motion .ek-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
html.ek-motion .ek-reveal.is-visible { opacity: 1; transform: none; }
html.ek-motion .ek-cards > .ek-reveal:nth-child(3n+2),
html.ek-motion .ek-tiles > .ek-reveal:nth-child(4n+2),
html.ek-motion .ek-stat:nth-child(2) { transition-delay: .1s; }
html.ek-motion .ek-cards > .ek-reveal:nth-child(3n+3),
html.ek-motion .ek-tiles > .ek-reveal:nth-child(4n+3),
html.ek-motion .ek-stat:nth-child(3) { transition-delay: .2s; }
html.ek-motion .ek-tiles > .ek-reveal:nth-child(4n+4) { transition-delay: .3s; }
html.ek-motion .ek-tiles > .ek-reveal.is-visible figure:hover,
html.ek-motion .ek-cards > .ek-reveal.is-visible:hover { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
	html.ek-motion *, html.ek-motion *::before, html.ek-motion *::after { animation: none !important; transition: none !important; }
	html.ek-motion .ek-reveal { opacity: 1; transform: none; }
}

/* =================================================================== light */
html.ek-dyn--light .ek-cards > .frame { border-color: transparent; }

/* =================================================================== dark */
html.ek-dyn--dark {
	--ek-ink: #e3ecef;
	--ek-muted: #a9bcc4;
	--ek-line: rgba(255, 255, 255, .1);
	--ek-bg-alt: #172e38;
	--ek-teal-soft: rgba(32, 148, 180, .16);
	--ek-heading: #ffffff;
	--ek-dyn-line: rgba(255, 255, 255, .12);
	--ek-dark-bg: #0f2028;
	--ek-dark-surface: #16303b;
	--bs-body-bg: var(--ek-dark-bg);
	--bs-body-color: var(--ek-ink);
	--bs-link-color: #6fcde6;
	--bs-link-color-rgb: 111, 205, 230;
	--bs-link-hover-color: #ff7eb0;
	--bs-link-hover-color-rgb: 255, 126, 176;
	--bs-border-color: var(--ek-line);
	--bs-secondary-color: var(--ek-muted);
	color-scheme: dark;
}
html.ek-dyn--dark body { background: radial-gradient(1200px 600px at 85% -10%, rgba(195, 30, 102, .14), transparent 60%), radial-gradient(1000px 700px at -10% 30%, rgba(32, 148, 180, .14), transparent 60%), var(--ek-dark-bg); }
html.ek-dyn--dark :is(h3, h4, h5, h6) { color: #8fd8ec; }
html.ek-dyn--dark .ek-logo { display: none; }
html.ek-dyn--dark .ek-logo--light { display: inline; }
html.ek-dyn--dark .ek-header { background: rgba(13, 32, 40, .92); }
html.ek-dyn--dark .ek-header .nav-link { color: #e3ecef; }
html.ek-dyn--dark .ek-header .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
html.ek-dyn--dark .ek-header .navbar-toggler { border-color: rgba(255, 255, 255, .4); }
html.ek-dyn--dark .ek-header .navbar-toggler-icon { filter: invert(1); }
html.ek-dyn--dark .ek-subtoggle { color: #fff; }
html.ek-dyn--dark .ek-header .dropdown-menu { background: var(--ek-dark-surface); border-color: var(--ek-line); }
html.ek-dyn--dark .ek-header .dropdown-item { color: #e3ecef; }
html.ek-dyn--dark .ek-header .dropdown-item.active { background: rgba(32, 148, 180, .18); color: #8fd8ec; }
html.ek-dyn--dark .ek-breadcrumb .breadcrumb { --bs-breadcrumb-divider-color: var(--ek-muted); --bs-breadcrumb-item-active-color: var(--ek-muted); }
html.ek-dyn--dark .ek-hero--home {
	--ek-hero-overlay: linear-gradient(115deg, rgba(13, 50, 62, .92) 0%, rgba(15, 32, 40, .6) 48%, rgba(120, 20, 70, .88) 100%);
}
html.ek-dyn--dark .ek-home-tiles > .frame-type-ek_stats { background: var(--ek-dark-surface); box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 0 1px var(--ek-line); }
html.ek-dyn--dark .ek-cards > .frame,
html.ek-dyn--dark .ek-aside { background: var(--ek-dark-surface); border-color: var(--ek-line); }
html.ek-dyn--dark .ek-cards h3 a { color: #fff; }
html.ek-dyn--dark .ek-cards .ce-bodytext { color: var(--ek-muted); }
html.ek-dyn--dark .ek-cards header :is(h4, p),
html.ek-dyn--dark .frame-type-ek_grid_4col .col-lg-3:first-child h3 + :is(h4, p) { color: #ff7eb0; }
html.ek-dyn--dark .ek-stat__value { background: linear-gradient(90deg, #ff5d9a, #ff9cc2); -webkit-background-clip: text; background-clip: text; }
html.ek-dyn--dark .ce-table { --bs-table-color: var(--ek-ink); --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255, 255, 255, .04); --bs-table-striped-color: var(--ek-ink); }
html.ek-dyn--dark .ce-table thead th { background: #1a809c; color: #fff; }
html.ek-dyn--dark .ce-uploads { border-color: var(--ek-line); }
html.ek-dyn--dark .ce-uploads li { border-color: var(--ek-line); }
html.ek-dyn--dark .frame-type-ek_grid_4col .ce-gallery img,
html.ek-dyn--dark .ek-cards .ce-gallery img { border-color: var(--ek-line); }
html.ek-dyn--dark .ce-gallery figcaption, html.ek-dyn--dark .image-caption { color: var(--ek-muted); }
html.ek-dyn--dark main > .container:first-child { border-color: var(--ek-line); }
html.ek-dyn--dark .ek-more { color: #ff7eb0; }

html.ek-dyn .ek-stat__value:not([data-count]) { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.8rem); line-height: 1.3; }
/* text values (no count-up) in the wider body font of the motion-only variant */
html.ek-motion:not(.ek-dyn) .ek-stat__value:not([data-count]) { font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.2rem); line-height: 1.7; }