@charset "UTF-8";

/* =============================================================================
   FLOWESTATE CONSULTING – style.css
   Based on BW FRAMEWORK v3.2
   -----------------------------------------------------------------------------
   ============================================================================= */
@layer reset, tokens, base, layout, utilities;

/* =============================================================================
   0) TYPEFACE – Sora (variable, served locally from Assets/Fonts)
   ============================================================================= */
/* latin-ext */
@font-face {
	font-family: "Sora";
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url("../fonts/sora/latin-ext/Sora-VariableFont_wght.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;
}

/* latin */
@font-face {
	font-family: "Sora";
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url("../fonts/sora/latin/Sora-VariableFont_wght.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;
}

/* =============================================================================
   1) RESET
   ============================================================================= */
@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	/* Spacing comes from the spacing system, not from browser defaults. */
	body,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	figure,
	blockquote,
	dl,
	dd,
	ul,
	ol,
	address {
		margin: 0;
	}

	/* Lists with role="list" keep their screen reader semantics
	 despite list-style: none (Safari/VoiceOver). */
	ul[role="list"],
	ol[role="list"] {
		list-style: none;
		padding: 0;
	}

	img,
	picture,
	svg,
	video,
	canvas {
		display: block;
		max-width: 100%;
		height: auto;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
		color: inherit;
	}

	/* Long compound words break instead of overflowing. */
	p,
	li,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	dd {
		overflow-wrap: break-word;
	}

	@media (prefers-reduced-motion: no-preference) {
		html {
			scroll-behavior: smooth;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}
}

/* =============================================================================
   2) DESIGN TOKENS
   The single place where values are defined.
   ============================================================================= */
@layer tokens {
	:root {
		/* --- TYPEFACES --------------------------------------------------------- */
		--font-primary: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
		--weight-light: 300;
		--weight-regular: 400;
		--weight-medium: 500;
		--weight-semibold: 600;

		/* --- COLOURS: raw values from the Figma design ------------------------- */
		--navy: #1d2955;

		/* Body text, headings */
		--navy-veil: 29 54 85;

		/* #1d3655 – colour of the photo veil (RGB channels, so that the opacity stays
								 separately controllable) */
		--cream: #fcf7f5;

		/* Light page background */
		--cream-light: #f4efeb;

		/* Text on dark surfaces */
		--ice: #eff5fb;

		/* Surface behind the service illustrations */
		--cyan: #2fb9d7;

		/* Bullet markers, arrows */
		--teal: #107287;

		/* Role description */
		/* Action colour: #0093b5 in the design. With white type only 3.6:1
	   contrast. Darkened to #007a96 = 4.97:1 and therefore WCAG AA (SC
	   1.4.3). */
		--action: #007a96;

		/* Hover lighter than the base colour. #00819e is the lightest tone at which
		   white 16px type still reaches 4.5:1 (4.53:1). Noticeably lighter would only
		   work if the button label grew to 18.66px bold – then the large text threshold
		   applies and 3:1 would suffice. */
		--action-hover: #00819e;

		/* --- COLOURS: semantic -------------------------------------------------- */
		/* Use ONLY these in the markup, never the raw values above. */
		--color-bg: var(--cream);
		--color-text: var(--navy);
		--color-heading: var(--navy);
		--color-accent: var(--cyan);
		--color-role: var(--teal);
		--color-link: var(--navy);
		--color-focus: var(--navy);
		--color-on-dark: var(--cream-light);
		--color-heading-dark: var(--cream-light);
		--color-focus-dark: #ffffff;
		--color-action: var(--action);
		--color-on-action: #ffffff;

		/* Veil over the photo surfaces. 0.6 in the design – 0.78 here, so that light
	   text still reaches AA even when a light image is set in the CMS (worst case:
	   pure white photo → 5.05:1). Visually identical on the current hero image,
	   because image and veil are almost the same colour. */
		--veil-strength: 0.78;
		--color-veil: rgb(var(--navy-veil) / var(--veil-strength));

		/* Fallback in case the background image does not load */
		--color-dark-fallback: #16233b;

		/* Cards */
		--color-card-light: rgb(255 255 255 / 0.67);
		--color-card-light-border: rgb(29 41 85 / 0.2);
		--color-card-dark: rgb(255 255 255 / 0.09);
		--color-card-dark-border: rgb(255 255 255 / 0.4);

		/* Navigation pill and social buttons */
		/* Surface of the navigation pill and the menu button. Opaque – the backdrop
		   blur stays set but only takes effect again once an rgba value with
		   transparency is put here. */
		--color-glass: #1d3554;

		/* Surface of the mobile full screen menu */
		--color-menu: #1d3554;

		/* 0.4 is the value from the design and at the same time the lowest at
	   which the border still reaches 3:1 against the hero photo (WCAG 1.4.11).
	   Below that the pill shape disappears on low contrast displays. */
		--color-glass-border: rgb(255 255 255 / 0.4);
		--color-social: rgb(217 217 217 / 0.08);
		--glass-blur: 64px;

		/* --- BACKGROUND IMAGES ------------------------------------------------- */
		/* To swap one out, this single line is enough in each case. */
		/* Hero motif. Stripe contrast quadrupled compared to the Figma export – there
		   neighbouring stripes were only 0.23 sRGB steps apart and practically
		   invisible in the browser. The base tone is unchanged. */
		--image-hero: url("../images/flowestate-hero-bg.webp");

		/* Surface behind “Leistungen” and “Kontakt” – the same
		   motif, additionally damped by the veil there. */
		--image-band: url("../images/flowestate-hero-bg.webp");

		/* --- TYPOGRAPHY: sizes ------------------------------------------------- */
		/* Fluid via clamp(min, preferred, max). The preferred value always contains a
	   rem share – without it browser zoom does not scale (WCAG 1.4.4). The px
	   figure on the right is the range mobile → 1512px (Figma width). */
		--text-xs: clamp(0.8125rem, 0.79rem + 0.11vw,  0.875rem);

		/* 13 → 14 */
		--text-s: clamp(0.875rem,  0.855rem + 0.1vw,  0.9375rem);

		/* 14 → 15 */
		--text-m: clamp(0.9375rem, 0.915rem + 0.11vw, 1rem);

		/* 15 → 16 */
		--text-l: clamp(1rem,      0.955rem + 0.22vw, 1.125rem);

		/* 16 → 18 */
		--h1: clamp(2.75rem,  1.36rem + 6.94vw,  6rem);

		/* 44 → 96 hero */
		--h2: clamp(2.25rem,  1.42rem + 4.17vw,  4.375rem);

		/* 36 → 70 claim */
		--h3: clamp(1.5rem,   1.24rem + 1.3vw,   1.875rem);

		/* 24 → 30 card */
		--h4: clamp(1.25rem,  1.1rem  + 0.75vw,  1.625rem);

		/* 20 → 26 label */
		--h5: clamp(1.125rem, 1.07rem + 0.28vw,  1.25rem);

		/* 18 → 20 name */
		/* --- TYPOGRAPHY: the rest ----------------------------------------------- */
		--lh-base: 1.5;

		/* Body copy. 1.33 in the design – raised to 1.5 (WCAG 1.4.8) */
		--lh-compact: 1.35;

		/* Short blocks of text, card claims */
		--lh-heading: 1.15;
		--lh-hero: 0.94;

		/* 90/96 as in the design */
		--lh-claim: 1.12;

		/* 78/70 as in the design */
		--tracking-tight: -0.01em;
		--tracking-label: 0.06em;
		--measure: 68ch;

		/* max. reading width for body copy (WCAG 1.4.8) */
		/* --- SPACING ------------------------------------------------------------- */
		--space-2xs: clamp(0.25rem, 0.22rem + 0.17vw, 0.375rem);

		/* 4 → 6 */
		--space-xs: clamp(0.5rem,  0.44rem + 0.33vw, 0.75rem);

		/* 8 → 12 */
		--space-s: clamp(1rem,    0.89rem + 0.55vw, 1.5rem);

		/* 16 → 24 */
		--space-m: clamp(1.5rem,  1.28rem + 1.1vw,  2.5rem);

		/* 24 → 40 */
		--space-l: clamp(2.5rem,  2.06rem + 2.2vw,  4.5rem);

		/* 40 → 72 */
		--space-xl: clamp(4rem,    3.23rem + 3.86vw, 7.5rem);

		/* 64 → 120 */
		--space-2xl: clamp(6rem,    4.24rem + 8.82vw, 14rem);

		/* 96 → 224 */
		/* --- LAYOUT --------------------------------------------------------------- */
		--content-width: 79.5rem;

		/* 1272px content width */
		--gutter: clamp(1.25rem, 0.5rem + 3.75vw, 7.5rem);

		/* 20 → 120 page margin */
		--grid-gap: clamp(1.25rem, 0.9rem + 1.7vw, 2.1875rem);

		/* 20 → 35 */
		/* Vertical rhythm of the sections */
		--section-pad-start: clamp(3.5rem, 1.6rem + 9.5vw, 9rem);

		/* 56 → 144 */
		--section-pad-end: clamp(4rem,   1.7rem + 11.5vw, 10.875rem);

		/* 64 → 174 */
		/* How far a light surface overlaps the previous one */
		--overlap: clamp(1.5rem, 1.1rem + 1.9vw, 2.75rem);

		/* 24 → 44 */
		/* Offset of the intro body copy against the claim (from 62em) */
		--intro-offset: clamp(2rem, 10.05vw, 9.5rem);

		/* 32 → 152 */
		/* --- SHAPE & SURFACE ------------------------------------------------------- */
		--radius-s: 0.3125rem;

		/* 5px – cards, buttons */
		--radius-m: 1.1875rem;

		/* 19px */
		--radius-panel: 1.5625rem;

		/* 25px – rounded top edge of a section */
		--radius-pill: 62rem;

		/* arbitrarily large – navigation pill */
		--card-padding: clamp(1.25rem, 1rem + 1.25vw, 1.875rem);

		/* 20 → 30 */
		--shadow-s: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.08);
		--shadow-m: 0 4px 8px rgb(0 0 0 / 0.06), 0 8px 24px rgb(0 0 0 / 0.08);

		/* --- MOTION & INTERACTION --------------------------------------------------- */
		--ease: cubic-bezier(0.4, 0, 0.2, 1);
		--ease-out: cubic-bezier(0.22, 1, 0.36, 1);

		/* starts fast, eases out */
		--duration-fast: 150ms;
		--duration-base: 300ms;
		--tap-target: 2.75rem;

		/* 44px – minimum target size, WCAG 2.5.8 */
		--focus-width: 3px;
		--focus-offset: 2px;
	}
}

/* =============================================================================
   3) BASE
   Wires the tokens to the HTML elements.
   ============================================================================= */
@layer base {
	html {
		/* No font-size reset: 1rem stays the browser default and therefore
	   exactly the size the user has chosen in their settings. */
		-webkit-text-size-adjust: 100%;
		color-scheme: light;
	}

	body {
		min-height: 100svh;
		display: flex;
		flex-direction: column;
		font-family: var(--font-primary);
		font-size: var(--text-l);
		font-weight: var(--weight-regular);
		line-height: var(--lh-base);
		color: var(--color-text);
		background-color: var(--color-bg);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	main {
		flex: 1 0 auto;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-weight: var(--weight-medium);
		line-height: var(--lh-heading);
		letter-spacing: var(--tracking-tight);
		color: var(--color-heading);
		text-wrap: balance;
	}

	h1 {
		font-size: var(--h1);
	}

	h2 {
		font-size: var(--h2);
	}

	h3 {
		font-size: var(--h3);
	}

	h4 {
		font-size: var(--h4);
	}

	h5 {
		font-size: var(--h5);
	}

	p {
		text-wrap: pretty;
	}

	address {
		font-style: normal;
	}

	a {
		color: var(--color-link);
		text-decoration-thickness: 1px;
		text-underline-offset: 0.25em;
		transition: color var(--duration-fast) var(--ease);
	}

	a:hover {
		text-decoration-thickness: 2px;
	}

	/* Visible focus for keyboard users (WCAG 2.4.7 / 2.4.11). :focus-
	 visible rather than :focus – mouse clicks do not trigger a ring. */
	:focus-visible {
		outline: var(--focus-width) solid var(--color-focus);
		outline-offset: var(--focus-offset);
		border-radius: var(--radius-s);
	}

	/* On dark surfaces the focus ring has to be light, otherwise it is invisible. */
	.panel--dark :focus-visible {
		outline-color: var(--color-focus-dark);
	}

	:target {
		scroll-margin-block-start: var(--space-l);
	}

	::selection {
		background-color: var(--navy);
		color: #ffffff;
	}

	@media (forced-colors: active) {
		:focus-visible {
			outline-color: Highlight;
		}
	}
}

/* =============================================================================
   4) LAYOUT PRIMITIVES
   ============================================================================= */
@layer layout {
	/* Centred content area with page margin. */
	.container {
		width: 100%;
		max-width: calc(var(--content-width) + 2 * var(--gutter));
		margin-inline: auto;
		padding-inline: var(--gutter);
	}

	/* One section surface. Carries background, rounding and overlap. */
	.panel {
		position: relative;
		padding-block: var(--section-pad-start) var(--section-pad-end);
	}

	/* Light surface that overlaps the dark surface above it at the top. */
	.panel--rounded {
		margin-block-start: calc(-1 * var(--overlap));
		border-start-start-radius: var(--radius-panel);
		border-start-end-radius: var(--radius-panel);
		z-index: 1;
	}

	.panel--cream {
		background-color: var(--cream);
	}

	/* Dark surface: photo + colour veil. The veil sits on top as ::before so that the
	 text stays in the flow and does not have to be positioned. */
	.panel--dark {
		background-color: var(--color-dark-fallback);
		background-image: var(--image-band);
		background-size: cover;
		background-position: center;
		color: var(--color-on-dark);
		isolation: isolate;
	}

	.panel--dark::before {
		content: "";
		position: absolute;
		inset: 0;
		background-color: var(--color-veil);
		border-radius: inherit;
		z-index: -1;
	}

	.panel--dark :is(h1, h2, h3, h4, h5, h6) {
		color: var(--color-heading-dark);
	}

	.panel--dark a {
		color: var(--color-on-dark);
	}

	/* Stack – vertical spacing between siblings. */
	.stack {
		display: flex;
		flex-direction: column;
	}

	.stack-xs {
		gap: var(--space-xs);
	}

	.stack-s {
		gap: var(--space-s);
	}

	.stack-m {
		gap: var(--space-m);
	}

	.stack-l {
		gap: var(--space-l);
	}

	/* Cluster – horizontal group with wrapping. */
	.cluster {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-s);
	}

	/* Limit body copy to a readable line length (WCAG 1.4.8). */
	.prose {
		max-width: var(--measure);
	}

	.prose > * + * {
		margin-block-start: var(--space-s);
	}
}

/* =============================================================================
   5) UTILITIES
   Make the tokens assignable in Pinegrow with one click.
   ============================================================================= */
@layer utilities {
	/* Present for screen readers, visually hidden. */
	.visually-hidden {
		position: absolute !important;
		inline-size: 1px;
		block-size: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.text-xs {
		font-size: var(--text-xs);
	}

	.text-s {
		font-size: var(--text-s);
	}

	.text-m {
		font-size: var(--text-m);
	}

	.text-l {
		font-size: var(--text-l);
	}

	.weight-light {
		font-weight: var(--weight-light);
	}

	.weight-regular {
		font-weight: var(--weight-regular);
	}

	.weight-medium {
		font-weight: var(--weight-medium);
	}

	.weight-semibold {
		font-weight: var(--weight-semibold);
	}

	.lh-base {
		line-height: var(--lh-base);
	}

	.lh-compact {
		line-height: var(--lh-compact);
	}

	.lh-heading {
		line-height: var(--lh-heading);
	}

	.uppercase {
		text-transform: uppercase;
	}

	.text-center {
		text-align: center;
	}

	.text-start {
		text-align: start;
	}

	.text-end {
		text-align: end;
	}

	.gap-xs {
		gap: var(--space-xs);
	}

	.gap-s {
		gap: var(--space-s);
	}

	.gap-m {
		gap: var(--space-m);
	}

	.gap-l {
		gap: var(--space-l);
	}

	.mt-xs {
		margin-block-start: var(--space-xs);
	}

	.mt-s {
		margin-block-start: var(--space-s);
	}

	.mt-m {
		margin-block-start: var(--space-m);
	}

	.mt-l {
		margin-block-start: var(--space-l);
	}

	.mb-xs {
		margin-block-end: var(--space-xs);
	}

	.mb-s {
		margin-block-end: var(--space-s);
	}

	.mb-m {
		margin-block-end: var(--space-m);
	}

	.mb-l {
		margin-block-end: var(--space-l);
	}

	.radius-s {
		border-radius: var(--radius-s);
	}

	.radius-m {
		border-radius: var(--radius-m);
	}

	.radius-panel {
		border-radius: var(--radius-panel);
	}

	.measure {
		max-width: var(--measure);
	}

	.center {
		margin-inline: auto;
	}
}

/* =============================================================================
   ===========================================================================
   C O M P O N E N T S   (unlayered – overrides everything above)
   Everything from here on comes from the Figma design.
   ===========================================================================
   ============================================================================= */
/* -----------------------------------------------------------------------------
   Skip link – first focusable point of the page (WCAG 2.4.1)
   -------------------------------------------------------------------------- */
.skip-link {
	position: absolute;
	top: var(--space-xs);
	left: var(--space-xs);
	z-index: 100;
	padding: var(--space-xs) var(--space-s);
	background-color: var(--cream);
	color: var(--navy);
	border-radius: var(--radius-s);
	font-size: var(--text-m);
	font-weight: var(--weight-medium);
	transform: translateY(-200%);
	transition: transform var(--duration-fast) var(--ease);
}

.skip-link:focus-visible {
	transform: translateY(0);
}

/* -----------------------------------------------------------------------------
   Header – sits on top of the hero
   -------------------------------------------------------------------------- */
.site-header {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 20;
	padding-block: clamp(1.25rem, 0.6rem + 3.3vw, 3.5rem);

	/* 20 → 56 */
}

.site-header__inner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
}

.site-header__home {
	display: block;
	flex-shrink: 0;
	text-decoration: none;
}

.site-header__logo {
	width: clamp(9rem, 7.5rem + 4vw, 11.625rem);

	/* 144 → 186 */
	height: auto;
}

/* -----------------------------------------------------------------------------
   Main navigation – glass pill
   -------------------------------------------------------------------------- */
/* Glass pill: hairline as a border, minimal lightening, strong blur. No drop
   shadow, no light seams – the shape is meant to stay delicate. */
.site-nav {
	position: relative;

	/* Menu items and language switch sit side by side inside the pill. */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-s);
	border-radius: var(--radius-pill);
	padding-inline: var(--space-m);
	background-color: var(--color-glass);
	border: 1px solid var(--color-glass-border);
	backdrop-filter: blur(var(--glass-blur)) saturate(140%);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(0.75rem, 0.3rem + 1.75vw, 1.75rem);

	/* 12 → 28 */
}

/* The underline is a pseudo element rather than text-decoration: that way
   it can fade in and out softly and stays 1px thin. */
.site-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--tap-target);

	/* 44px target size, WCAG 2.5.8 */
	font-size: var(--text-s);
	font-weight: var(--weight-regular);
	color: rgb(255 255 255 / 0.86);
	text-decoration: none;
	transition: color var(--duration-base) var(--ease);
}

.site-nav__link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0.6875rem;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--duration-base) var(--ease);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
	color: #ffffff;
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.site-nav__link::after {
		transition: opacity var(--duration-fast) var(--ease);
		transform: scaleX(1);
		opacity: 0;
	}

	.site-nav__link:hover::after,
	.site-nav__link:focus-visible::after {
		opacity: 1;
	}
}

/* -----------------------------------------------------------------------------
   Language switch DE | EN

   Two languages, so two links next to each other rather than a dropdown – one
   click instead of two, and considerably simpler for screen readers.

   The abbreviations are what you see; the spelled out name sits beside them in
   a .visually-hidden span. What gets read out is therefore "Deutsch" and
   "English", not "DE" and "EN". The lang attribute makes the speech output
   switch to the right pronunciation.
   -------------------------------------------------------------------------- */
.lang-switch__list {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
}

.lang-switch__link {
	display: flex;
	align-items: center;
	min-height: var(--tap-target);
	padding-inline: 0.25rem;
	font-size: var(--text-s);
	color: rgb(255 255 255 / 0.7);
	text-decoration: none;
	transition: color var(--duration-base) var(--ease);
}

.lang-switch__link:hover,
.lang-switch__link:focus-visible {
	color: #ffffff;
}

/* The current language is stronger – through weight AND brightness, not
   through colour alone (WCAG 1.4.1). */
.lang-switch__link[aria-current="true"] {
	color: #ffffff;
	font-weight: var(--weight-medium);
}

.lang-switch__sep {
	color: rgb(255 255 255 / 0.4);
	user-select: none;
}

/* Set apart from the menu items by a hairline on the desktop. */
@media (min-width: 62em) {
	.lang-switch {
		padding-inline-start: var(--space-s);
		border-inline-start: 1px solid rgb(255 255 255 / 0.25);
	}
}

/* In the full screen menu a row like the menu items: flush left, across the
   full width, with the same separator below. Only set slightly smaller, so the
   language switch stays subordinate to the menu items. */
@media (max-width: 61.99em) {
	.lang-switch__list {
		align-items: stretch;
		min-height: 3.75rem;
		gap: var(--space-s);
		border-block-end: 1px solid rgb(255 255 255 / 0.15);
	}

	.lang-switch__link {
		min-height: 3.75rem;
		padding-inline: 0;
		font-size: var(--text-l);
	}

	.lang-switch__sep {
		display: flex;
		align-items: center;
	}
}

/* -----------------------------------------------------------------------------
   Menu button – appears on mobile only, and only when JavaScript is active
   -------------------------------------------------------------------------- */
.nav-toggle {
	display: none;
}

.js .nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	min-height: var(--tap-target);
	padding-inline: var(--space-s);
	background-color: var(--color-glass);
	border: 1px solid var(--color-glass-border);
	border-radius: var(--radius-pill);
	backdrop-filter: blur(var(--glass-blur)) saturate(140%);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
	color: #ffffff;
	font-size: var(--text-m);
	cursor: pointer;
}

.nav-toggle__label {
	line-height: 1;
}

/* Three bars that rotate into a cross when opening. */
.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
	display: block;
	width: 1.125rem;
	height: 1px;
	background-color: currentColor;
	transition: transform var(--duration-base) var(--ease),
			  opacity var(--duration-fast) var(--ease);
}

.nav-toggle__icon {
	position: relative;
	flex-shrink: 0;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
}

.nav-toggle__icon::before {
	inset-block-start: -0.3125rem;
}

.nav-toggle__icon::after {
	inset-block-start: 0.3125rem;
}

[aria-expanded="true"] .nav-toggle__icon {
	background-color: transparent;
}

[aria-expanded="true"] .nav-toggle__icon::before {
	transform: translateY(0.3125rem) rotate(45deg);
}

[aria-expanded="true"] .nav-toggle__icon::after {
	transform: translateY(-0.3125rem) rotate(-45deg);
}

/* -----------------------------------------------------------------------------
   Navigation on mobile breakpoints: panel unfolding below the header
   -------------------------------------------------------------------------- */
@media (max-width: 61.99em) {
	/* Full screen menu: covers the width and height of the viewport completely. */
	.js .site-nav {
		position: fixed;
		inset: 0;
		z-index: 30;
		display: none;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		padding: clamp(7rem, 22vw, 10rem) var(--gutter) var(--space-xl);
		background-color: var(--color-menu);
		border: 0;
		border-radius: 0;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* Menu items at the top, contact details at the bottom (see
	   margin-block-start: auto).

	   align-items and gap come from the pill on the desktop and have to be
	   reset here: otherwise the rows are centred instead of stretched across
	   the width, and the separators only reach as far as the text. */
	.js .site-nav.is-open {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	/* Logo and menu button stay operable above the menu surface. */
	.site-header__home,
	.nav-toggle {
		position: relative;
		z-index: 40;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.site-nav__link {
		justify-content: space-between;
		min-height: 3.75rem;
		padding-inline: 0;
		font-size: var(--h4);
		border-block-end: 1px solid rgb(255 255 255 / 0.15);
	}

	/* The animated underline is a desktop gesture – on mobile a solid
	 highlight instead, which works better with a finger. */
	.site-nav__link::after {
		display: none;
	}

	.site-nav__link:hover,
	.site-nav__link:focus-visible {
		color: var(--color-accent);
	}
}

/* The page must not scroll along while the full screen menu is open. */
.nav-offen,
.nav-offen body {
	overflow: hidden;
}

@media (min-width: 62em) {
	.js .nav-toggle {
		display: none;
	}
}

/* -----------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */
.button {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: var(--tap-target);
	padding: 0.8125rem 1.5rem;
	background-color: var(--color-action);
	border: 1px solid var(--color-action);
	border-radius: var(--radius-s);
	color: var(--color-on-action);
	font-size: var(--text-m);
	font-weight: var(--weight-medium);
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--duration-base) var(--ease),
			  border-color var(--duration-base) var(--ease),
			  transform var(--duration-base) var(--ease);
}

/* The light stripe travels across the surface once on hover. */
.button::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-image: linear-gradient(
	115deg,
	transparent 35%,
	rgb(255 255 255 / 0.22) 50%,
	transparent 65%
  );
	background-size: 250% 100%;
	background-position: 120% 0;
	opacity: 0;
	transition: background-position 650ms var(--ease), opacity var(--duration-base) var(--ease);
	pointer-events: none;
}

.button:hover,
.button:focus-visible {
	background-color: var(--action-hover);
	border-color: var(--action-hover);
	color: var(--color-on-action);
	text-decoration: none;
	transform: translateY(-2px);
}

.button:hover::before,
.button:focus-visible::before {
	opacity: 1;
	background-position: -20% 0;
}

.button:active {
	transform: translateY(0);
}

.button__icon {
	flex-shrink: 0;
	width: 0.875rem;
	height: 0.75rem;
	transition: transform var(--duration-base) var(--ease);
}

.button:hover .button__icon,
.button:focus-visible .button__icon {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.button:hover,
	.button:focus-visible {
		transform: none;
	}

	.button::before {
		display: none;
	}

	.button:hover .button__icon,
	.button:focus-visible .button__icon {
		transform: none;
	}
}

/* The button keeps its own colour, even on a dark ground. */
.panel--dark .button {
	color: var(--color-on-action);
}

/* -----------------------------------------------------------------------------
   Arrow link (“mehr über mich”)
   -------------------------------------------------------------------------- */
/* This rule must not get lost: without it the link falls back to display:
   inline. The SVG is a block through the reset and then forces a line
   break, the label as a grid stretches to the full width – the arrow ends
   up above the text and the underline runs too far. */
.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5625rem;
	min-height: var(--tap-target);
	font-size: var(--text-m);

	/* inherit rather than a fixed colour: navy on a light ground, cream on a dark one */
	color: inherit;
	text-decoration: none;
}

.arrow-link__icon {
	flex-shrink: 0;
	width: 0.75rem;
	height: 0.75rem;
	color: var(--color-accent);
}

/* Text roll: the visible label travels upwards out of the window, the
   second copy comes up from below at the same time. The underline sits on
   the frame and stays put. */
.arrow-link__label {
	display: grid;

	/* both copies sit in the same grid cell */
	overflow: hidden;
	line-height: 1.5;
	border-block-end: 1px solid var(--color-accent);

	/* like the arrow before it */
}

.arrow-link__text {
	grid-area: 1 / 1;
	transition: transform var(--duration-base) var(--ease-out);
}

.arrow-link__text:last-child {
	transform: translateY(100%);
}

.arrow-link:hover .arrow-link__text:first-child,
.arrow-link:focus-visible .arrow-link__text:first-child {
	transform: translateY(-100%);
}

.arrow-link:hover .arrow-link__text:last-child,
.arrow-link:focus-visible .arrow-link__text:last-child {
	transform: translateY(0);
}

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

	.arrow-link__text:last-child {
		display: none;
	}

	.arrow-link:hover .arrow-link__text:first-child,
	.arrow-link:focus-visible .arrow-link__text:first-child {
		transform: none;
	}

	.arrow-link:hover .arrow-link__label,
	.arrow-link:focus-visible .arrow-link__label {
		border-block-end-width: 2px;
	}
}

/* -----------------------------------------------------------------------------
   Section head – label with a short accent rule, optional accompanying text
   -------------------------------------------------------------------------- */
.section-head {
	display: grid;
	gap: var(--space-m);
	margin-block-end: var(--space-xl);
}

@media (min-width: 62em) {
	.section-head {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--space-l);
	}

	.section-head--single {
		grid-template-columns: 1fr;
	}
}

.section-label {
	font-size: var(--h4);
	font-weight: var(--weight-medium);
	line-height: 1.2;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	align-self: start;
}

/* Short accent rule below the label, in the accent colour */
.section-label::after {
	content: "";
	display: block;
	width: 6.8125rem;

	/* 109px */
	height: 1px;
	margin-block-start: var(--space-s);
	background-color: var(--color-accent);
}

.section-head__text {
	font-size: var(--text-l);
	max-width: var(--measure);
}

/* -----------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
	/* Full viewport height. dvh accounts for browser bars sliding in and
	   out on mobile devices, vh is the fallback before it. */
	min-height: 100vh;
	min-height: 100dvh;

	/* Content sits at the bottom, as in the design */
	display: flex;
	align-items: flex-end;
	padding-block: clamp(8rem, 4rem + 10vw, 12rem) clamp(3rem, 1.4rem + 8vw, 7.75rem);

	/* The image file is named in the token block above (--image-hero). Please
	   do not replace it with a fixed path, otherwise there are two places to
	   maintain. */
	background-image: var(--image-hero);

	/* No veil – the motif is fully visible. It is dark throughout (lightest
	 pixel rgb(35 52 88)), light text reaches 12.3:1. Should a lighter motif
	 ever be used: raise the value here. */
	--veil-strength: 0;
}

.hero__title {
	max-width: 12ch;
	font-size: var(--h1);
	font-weight: var(--weight-medium);
	line-height: var(--lh-hero);
}

.hero__lead {
	max-width: 33rem;
	margin-block-start: var(--space-m);
	font-size: var(--text-m);
	font-weight: var(--weight-light);
	line-height: 1.56;
	color: #ffffff;
}

.hero__action {
	margin-block-start: var(--space-m);
}

/* -----------------------------------------------------------------------------
   Intro – claim on the left, text and author on the right
   -------------------------------------------------------------------------- */
.intro {
	overflow: hidden;
}

/* Decorative line graphic on the left edge. Purely ornamental, aria-hidden. */
.intro__decor {
	position: absolute;
	z-index: 0;
	inset-block-end: 0;
	inset-inline-start: calc(-1 * var(--gutter) * 0.5);
	width: min(21.75rem, 28%);
	height: auto;
	pointer-events: none;
	user-select: none;
}

@media (max-width: 61.99em) {
	.intro__decor {
		display: none;
	}
}

.intro__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--space-l);
}

@media (min-width: 62em) {
	.intro__inner {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--space-l);
	}
}

.intro__title {
	font-size: var(--h2);
	font-weight: var(--weight-medium);
	line-height: var(--lh-claim);
	align-self: start;
}

.intro__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	max-width: var(--measure);
	font-size: var(--text-l);
}

/* Offset as in the design: the body copy starts well below the claim. */
@media (min-width: 62em) {
	.intro__body {
		margin-block-start: var(--intro-offset);
	}
}

/* -----------------------------------------------------------------------------
   Author – portrait, name, arrow link
   -------------------------------------------------------------------------- */
.author {
	display: flex;
	align-items: center;
	gap: 1.125rem;
	margin-block-start: var(--space-s);
}

.author__portrait {
	flex-shrink: 0;
	width: 5.25rem;

	/* 84px */
	height: 5.25rem;
	border-radius: 50%;
	object-fit: cover;
	object-position: top;
}

.author__name {
	font-size: var(--text-l);
	font-weight: var(--weight-semibold);
	line-height: 1.35;
}

/* -----------------------------------------------------------------------------
   Services – three identically built cards
   -------------------------------------------------------------------------- */
.service-grid {
	display: grid;
	gap: var(--grid-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	align-items: stretch;
}

.service-card {
	display: flex;
	flex-direction: column;
	background-color: var(--color-card-dark);
	border: 1px solid var(--color-card-dark-border);
	border-radius: var(--radius-s);
	overflow: hidden;
}

.service-card__image {
	width: 100%;
	aspect-ratio: 400 / 270;
	object-fit: cover;
	background-color: var(--ice);
}

.service-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding: var(--card-padding) var(--card-padding) var(--space-m);
}

.service-card__title {
	/* Same size as the section heading "Leistungen" */
	font-size: var(--h4);
	font-weight: var(--weight-medium);
	line-height: 1.13;
	color: #ffffff;
}

.service-card__claim {
	font-size: var(--text-m);
	line-height: var(--lh-compact);
	color: #ffffff;
}

/* -----------------------------------------------------------------------------
   Bullet list with a cyan square marker
   -------------------------------------------------------------------------- */
.tick-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	margin-block-start: var(--space-xs);
	font-size: var(--text-s);
	line-height: var(--lh-base);
}

.tick-list > li {
	position: relative;
	padding-inline-start: 1.375rem;
}

.tick-list > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.5em;
	width: 6px;
	height: 6px;
	background-color: var(--color-accent);
}

.panel--dark .tick-list {
	color: #ffffff;
}

/* -----------------------------------------------------------------------------
   About me
   -------------------------------------------------------------------------- */
.about__layout {
	display: grid;
	gap: var(--space-l);
}

@media (min-width: 62em) {
	.about__layout {
		grid-template-columns: 25rem 1fr;

		/* 400px portrait + the rest */
		column-gap: var(--space-xl);
		align-items: start;
	}
}

.about__portrait {
	width: 100%;
	max-width: 25rem;
	aspect-ratio: 400 / 503;
	object-fit: cover;
	object-position: center top;
	border-radius: var(--radius-s);
}

.about__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	max-width: var(--measure);
	font-size: var(--text-l);
}

.about__name {
	font-size: var(--h5);
	font-weight: var(--weight-semibold);
	line-height: 1.2;
}

.about__role {
	margin-block-start: calc(-1 * var(--space-xs));
	font-size: var(--text-s);
	line-height: 1.27;
	color: var(--color-role);
}

.about__action {
	margin-block-start: var(--space-s);
}

/* -----------------------------------------------------------------------------
   References – masonry via CSS columns, so that the cards keep their
   natural height and only ONE loop is still needed.
   -------------------------------------------------------------------------- */
.references {
	padding-block-start: var(--space-l);
	background-color: var(--cream);
	background-image: linear-gradient(to bottom, var(--cream) 0%, rgb(252 247 245 / 0.95) 100%),
	url("../images/flowestate-references-bg.webp");
	background-size: auto, cover;
	background-position: center, center bottom;
	background-repeat: no-repeat, no-repeat;
}

.reference-grid {
	columns: 1;
	column-gap: var(--grid-gap);
}

@media (min-width: 48em) {
	.reference-grid {
		columns: 2;
	}
}

@media (min-width: 62em) {
	.reference-grid {
		columns: 3;
	}
}

.reference-card {
	position: relative;
	break-inside: avoid;
	margin-block-end: var(--grid-gap);
	padding: var(--card-padding);
	padding-inline-end: calc(var(--card-padding) + 1.75rem);
	background-color: var(--color-card-light);
	border: 1px solid var(--color-card-light-border);
	border-radius: var(--radius-s);
}

.reference-card__mark {
	position: absolute;
	inset-block-start: var(--card-padding);
	inset-inline-end: var(--card-padding);

	/* 20 × 17 px. Colours and opacity live inside the SVG file itself,
	   hence neither color nor opacity here. */
	width: 1.25rem;
	height: 1.0625rem;
}

.reference-card__title {
	font-size: var(--text-l);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-compact);
}

.reference-card__text {
	margin-block-start: var(--space-s);
	font-size: var(--text-l);
	font-weight: var(--weight-regular);
}

/* -----------------------------------------------------------------------------
   Footer / contact
   -------------------------------------------------------------------------- */
.site-footer {
	overflow: hidden;

	/* enough room for the wordmark to fit at the bottom */
	padding-block-end: clamp(8rem, 4rem + 17vw, 15rem);
}

.site-footer__inner {
	position: relative;
	z-index: 2;
}

.contact {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
	align-items: flex-start;
}

.contact__address {
	font-size: var(--text-l);
	line-height: var(--lh-base);
}

.contact__company {
	font-weight: var(--weight-semibold);
}

/* Email and social buttons at the same height */
.contact__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-s);
	margin-block-start: var(--space-s);
}

.contact__link {
	color: var(--color-on-dark);
	text-decoration: none;
	transition: color var(--duration-base) var(--ease);
}

/* Same hover as in the mobile menu */
.contact__link:hover,
.contact__link:focus-visible {
	color: var(--color-accent);
}

.contact__link--phone {
	text-decoration: none;
}

.contact__link--mail {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--color-accent);
	text-underline-offset: 0.25em;
}

/* -----------------------------------------------------------------------------
   Social buttons
   -------------------------------------------------------------------------- */
.social {
	display: flex;
	gap: var(--space-xs);
}

@media (min-width: 62em) {
	.social {
		margin-inline-start: auto;
	}
}

.social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.3125rem;

	/* 53px */
	height: 3.3125rem;
	background-color: var(--color-social);
	border: 1px solid #ffffff;
	border-radius: var(--radius-s);
	color: #ffffff;
	transition: background-color var(--duration-fast) var(--ease);
}

.social__link:hover,
.social__link:focus-visible {
	background-color: rgb(255 255 255 / 0.2);
}

.social__icon {
	width: 1.75rem;
	height: 1.75rem;
}

/* -----------------------------------------------------------------------------
   Legal
   -------------------------------------------------------------------------- */
.legal {
	position: relative;
	z-index: 3;
	margin-block-start: var(--space-l);
	padding-inline: var(--gutter);
	font-size: var(--text-s);
}

/* From desktop up fixed in the bottom right corner of the footer. Below that
   it would clash with the wordmark and therefore goes with the flow. */
@media (min-width: 62em) {
	.legal {
		position: absolute;
		inset-block-end: var(--space-s);
		inset-inline-end: 0;
		margin-block-start: 0;
	}
}

.legal__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
}

@media (min-width: 62em) {
	.legal__list {
		justify-content: flex-end;
	}
}

.legal__sep {
	opacity: 0.6;
}

/* -----------------------------------------------------------------------------
   Contact details in the mobile full screen menu
   -------------------------------------------------------------------------- */
.site-nav__contact {
	display: none;
}

@media (max-width: 61.99em) {
	.js .site-nav.is-open .site-nav__contact {
		display: block;
		margin-block-start: auto;

		/* pushes the block to the bottom edge */
		padding-block-start: var(--space-m);
		border-block-start: 1px solid rgb(255 255 255 / 0.15);
		font-size: var(--text-m);
		line-height: var(--lh-base);
		color: rgb(255 255 255 / 0.86);
	}

	.site-nav__company {
		font-weight: var(--weight-semibold);
		color: #ffffff;
	}

	.site-nav__contact-link {
		display: inline-flex;
		align-items: center;
		min-height: var(--tap-target);
		color: inherit;
		text-decoration: underline;
		text-underline-offset: 0.25em;
	}

	.site-nav__contact-link:hover,
	.site-nav__contact-link:focus-visible {
		color: var(--color-accent);
	}
}

.legal__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-target);
	padding-inline: var(--space-2xs);
	color: var(--color-on-dark);

	/* The underline is always there, but transparent. That way it fades in
	   softly instead of jumping, and the line does not shift on hover. */
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: transparent;
	text-underline-offset: 0.25em;
	transition: text-decoration-color var(--duration-base) var(--ease);
}

/* The underline appears, the type stays light. */
.legal__link:hover,
.legal__link:focus-visible {
	color: var(--color-on-dark);
	text-decoration-color: var(--color-accent);
}

/* -----------------------------------------------------------------------------
   Wordmark in the footer – purely decorative
   -------------------------------------------------------------------------- */
/* Sticks flush into the bottom left corner, without spacing. */
.site-footer__wordmark {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inset-inline-end: auto;
	z-index: 1;
	width: 65vw;
	max-width: 65vw;
	height: auto;
	margin: 0;
	padding: 0;
	pointer-events: none;
	user-select: none;
}

/* Full width on mobile. 100% rather than 100vw, otherwise the browser
   counts the scrollbar width and the page gets a horizontal scroll. */
@media (max-width: 61.99em) {
	.site-footer__wordmark {
		width: 100%;
		max-width: 100%;
	}
}

/* -----------------------------------------------------------------------------
   Sub pages: compact header (Impressum, Datenschutz)
   Same dark surface as the hero, only much flatter.
   -------------------------------------------------------------------------- */
.page-hero {
	padding-block: clamp(8rem, 4rem + 12vw, 14rem) clamp(3rem, 1.5rem + 6vw, 6rem);
	background-image: var(--image-hero);
}

.page-hero__kicker {
	margin-block-end: var(--space-xs);
	font-size: var(--text-m);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-accent);
}

.page-hero__title {
	font-size: var(--h2);
	font-weight: var(--weight-medium);
	line-height: var(--lh-claim);
}

/* -----------------------------------------------------------------------------
   Error page 404
   -------------------------------------------------------------------------- */
.error-page {
	display: flex;
	align-items: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding-block: clamp(9rem, 5rem + 12vw, 15rem) clamp(4rem, 2rem + 8vw, 9rem);
	background-image: var(--image-hero);
}

.error-page__inner {
	max-width: 40rem;
}

/* The number is the visual element of the page. */
.error-page__code {
	font-size: clamp(5.5rem, 1.5rem + 20vw, 13rem);
	font-weight: var(--weight-medium);
	line-height: 0.85;
	letter-spacing: var(--tracking-tight);
	color: var(--color-heading-dark);
}

.error-page__code::after {
	content: "";
	display: block;
	width: 6.8125rem;
	height: 1px;
	margin-block-start: var(--space-m);
	background-color: var(--color-accent);
}

.error-page__title {
	margin-block-start: var(--space-m);
	font-size: var(--h3);
	font-weight: var(--weight-medium);
	line-height: var(--lh-heading);
}

.error-page__text {
	margin-block-start: var(--space-s);
	font-size: var(--text-m);
	font-weight: var(--weight-light);
	line-height: 1.56;
	color: #ffffff;
}

.error-page__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-m);
	margin-block-start: var(--space-l);
	justify-content: center;
}

/* -----------------------------------------------------------------------------
   Legal texts
   -------------------------------------------------------------------------- */
.legal-doc {
	max-width: var(--measure);
	font-size: var(--text-l);
}

.legal-doc > * + * {
	margin-block-start: var(--space-s);
}

.legal-doc > h2 {
	margin-block-start: var(--space-l);
	font-size: var(--h4);
	font-weight: var(--weight-medium);
}

.legal-doc > h3 {
	margin-block-start: var(--space-m);
	font-size: var(--h5);
	font-weight: var(--weight-semibold);
}

.legal-doc > h2:first-child,
.legal-doc > h3:first-child {
	margin-block-start: 0;
}

.legal-doc ul {
	padding-inline-start: 1.375rem;
}

.legal-doc li + li {
	margin-block-start: var(--space-2xs);
}

.legal-doc a {
	color: var(--color-link);
	text-decoration: underline;
	text-decoration-color: var(--color-accent);
	text-underline-offset: 0.25em;
}

.legal-doc__stand {
	margin-block-start: var(--space-l);
	padding-block-start: var(--space-s);
	border-block-start: 1px solid var(--color-card-light-border);
	font-size: var(--text-s);
	color: var(--color-role);
}

/* -----------------------------------------------------------------------------
   Placeholders in the legal texts

   Deliberately conspicuous: whatever stands here has to be replaced or
   deleted before going live. Before publishing, search the source for
   "platzhalter" – not a single hit may remain.
   -------------------------------------------------------------------------- */
.platzhalter {
	display: inline-block;
	padding: 0.125em 0.5em;
	background-color: rgb(255 255 255 / 0.67);
	border: 1px dashed var(--color-accent);
	border-radius: var(--radius-s);
	font-size: 0.9375em;
	color: var(--color-text);
}

.platzhalter-block {
	display: block;
	padding: var(--card-padding);
	background-color: rgb(255 255 255 / 0.67);
	border: 1px dashed var(--color-accent);
	border-radius: var(--radius-s);
	font-size: var(--text-m);
}

.platzhalter-block > * + * {
	margin-block-start: var(--space-xs);
}

.platzhalter-block strong {
	color: var(--color-role);
}

/* -----------------------------------------------------------------------------
   Initial state of the animations

   The class "anim" is set by js/animation.js itself on the <html> element,
   and only when no prefers-reduced-motion is set. If GSAP does not load, the
   script removes the class again. Without JavaScript it is never set. No
   content can therefore stay permanently invisible – which is exactly the
   usual trap with scroll animations.

   Do not look for visibility in style.css: the motion itself is driven by
   GSAP via the data-anim attributes in the HTML.
   -------------------------------------------------------------------------- */
.anim [data-anim]:not([data-anim^="stagger"]):not([data-anim="reveal"]),
.anim [data-anim^="stagger"] > *,
.anim [data-anim-hero] {
	opacity: 0;
}

/* Images stay visible and are revealed via clip-path – otherwise they
   flash briefly when opacity is switched. */
.anim [data-anim="reveal"] {
	clip-path: inset(100% 0% 0% 0%);
}

/* Line mask: placed by animation.js around every line of text and removed
   again after the animation. Only in the DOM in between. */
.anim-zeilenmaske {
	overflow: hidden;
}

/* -----------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	/* Nothing may be hidden by an animation in print */
	.anim [data-anim],
	.anim [data-anim] > *,
	.anim [data-anim-hero] {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}

	.site-header,
	.intro__decor,
	.site-footer__wordmark,
	.skip-link {
		display: none;
	}

	.panel--dark {
		background: none;
		color: #000;
	}

	.panel--dark::before {
		display: none;
	}

	.panel--dark :is(h1, h2, h3, h4, h5, h6),
	.panel--dark a {
		color: #000;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
	}
}

/* =============================================================================
   PINEGROW BREAKPOINTS

   Pinegrow reads existing media queries and shows them in the breakpoint bar.
   Empty blocks = breakpoints ready to be clicked.
   Mobile first, em based (scales with the browser font size).
   ============================================================================= */
@media (min-width: 36em)   {
	/* 576px – phone landscape */
}

@media (min-width: 48em)   {
	/* 768px – tablet */
}

@media (min-width: 62em)   {
	/* 992px – desktop S */
}

@media (min-width: 75em)   {
	/* 1200px – desktop M */
}

@media (min-width: 87.5em) {
	/* 1400px – desktop L */
}