/* ==========================================================================
   KONTAKT PAGE
   Page-specific styles for page-kontakt.php.
   Reuses :root design tokens from style.css and the reset/components from
   main.css. No tokens are redefined here — every value is var(--*) or a
   raw px value taken from blueprint-{section}.txt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — "Get in touch"   (Figma 71:3295, 1440×650)
   -------------------------------------------------------------------------- */
.kontakt-hero {
	position: relative;
	width: 100%;
	background: var(--color-navy-900);
	overflow: hidden;
}

.kontakt-hero-inner {
	position: relative;
	width: 100%;
	max-width: 1440px;
	height: 650px;
	margin: 0 auto;
	overflow: hidden;
}

/* Frame 2462 — 874×874 mask circle anchored top:-112 left:283
   so its top arc bleeds above the section. clipped by border-radius:50%. */
.kontakt-hero-circles {
	position: absolute;
	left: 283px;
	top: -112px;
	width: 874px;
	height: 874px;
	border-radius: 50%;
	overflow: hidden;
}

.kontakt-hero-circle {
	position: absolute;
	border-radius: 50%;
}

/* Back ellipse — fills the entire mask. blue-700 @ 30%. */
.kontakt-hero-circle--back {
	left: 0;
	top: 0;
	width: 874px;
	height: 874px;
	background: rgba(0, 64, 121, 0.30);
}

/* Mid ellipse — 453×453 inside the mask. blue-500 with node-level opacity 10%. */
.kontakt-hero-circle--mid {
	left: 211px;
	top: 214px;
	width: 453px;
	height: 453px;
	background: var(--color-blue-500);
	opacity: 0.10;
}

/* Front ellipse — 835×835, partially clipped by the mask. white @ 7%. */
.kontakt-hero-circle--front {
	left: 389px;
	top: 345px;
	width: 835px;
	height: 835px;
	background: rgba(255, 255, 255, 0.07);
}

/* "Get in touch" — 110/110 semibold, abs left:60 top:220, width:1125 from blueprint. */
.kontakt-hero-headline {
	position: absolute;
	left: 60px;
	top: 220px;
	width: 1125px;
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-h1-insights);
	line-height: var(--lh-h1-insights);
	font-weight: var(--fw-semibold);
	color: var(--color-white);
}

/* Bottom-left lede block — Frame 2498, vertical flex gap 36 */
.kontakt-hero-lede {
	position: absolute;
	left: 60px;
	top: 498px;
	width: 451px;
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.kontakt-hero-rule {
	display: block;
	width: 100px;
	height: 1px;
	background: var(--color-white);
}

.kontakt-hero-lede-text {
	margin: 0;
	width: 100%;
	font-family: var(--font-sans);
	font-weight: var(--fw-regular);
	font-size: var(--fs-body-l);
	line-height: var(--lh-body-l);
	color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Form section — gray panel with H2, intro, inputs, textarea, checkbox, button
   (Figma frames 71:3294 / 71:3349 / 71:3355 / 71:3356)
   Page-frame coords (1440 design width, panel-relative):
     Rectangle 4148  abs left:152 top:0 in section-inner   1138×1157   gray-50
     H2              abs left:193 top:80   panel-rel        750×46
     Intro           abs left:193 top:150  panel-rel        748×84
     Filter (form)   abs left:193 top:282  panel-rel        750×795

   Figma Group 2420 (decorative blue circle + 3 white squares) is visible:false
   in the source file and is intentionally NOT rendered.
   -------------------------------------------------------------------------- */
.kontakt-form-section {
	position: relative;
	width: 100%;
	padding-top: 80px;         /* gap between hero (650) and panel (730 page-rel).
	                              padding (not margin) so the section's own white
	                              bg fills the gap — body bg is navy and would
	                              otherwise show through a margin gap. */
	background: var(--color-white);
}

.kontakt-form-section-inner {
	position: relative;
	width: 100%;
	max-width: 1440px;
	height: 1157px;
	margin: 0 auto;
}

/* Gray panel — anchors all form content via absolute positioning. */
.kontakt-form-panel {
	position: absolute;

	top: 0;
	width: 1138px;
	height: 1220px;
	background: var(--color-gray-50);
}

.kontakt-form-heading {
	position: absolute;
	left: 193px;
	top: 80px;
	width: 750px;
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-h2-card);          /* 42 */
	line-height: var(--lh-h2-card);        /* 46.2 */
	font-weight: var(--fw-semibold);
	color: var(--color-navy-900);
}

.kontakt-form-intro {
	position: absolute;
	left: 193px;
	top: 150px;
	width: 748px;
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-body-l);           /* 20 */
	line-height: var(--lh-body-l);         /* 28 */
	font-weight: var(--fw-regular);
	color: var(--color-navy-900);
}

/* Form — vertical flex, gap 24, total height ~795 from blueprint. */
.kontakt-form {
	position: absolute;
	left: 193px;
	top: 282px;
	width: 750px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
}

/* Input field row — 750×52, white bg, 1px inset navy border, label centered.
   Figma Vorname is 48px (anomaly); standardized to 52px to match the rest. */
.kontakt-form-field {
	position: relative;
	width: 100%;
	height: 52px;
}

.kontakt-form-input {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 11px 16px;
	background: var(--color-white);
	border: 1px solid var(--color-navy-900);
	border-radius: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-filter-label);     /* 18 */
	line-height: var(--lh-filter-label);   /* 19.8 */
	font-weight: var(--fw-regular);
	color: var(--color-navy-900);
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}

.kontakt-form-input::placeholder {
	color: transparent;
}

.kontakt-form-input:focus {
	outline: none;
	border-color: var(--color-blue-500);
	box-shadow: 0 0 0 1px var(--color-blue-500);
}

/* Floating-style label — visible inside the input until focus or non-empty. */
.kontakt-form-label {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-filter-label);     /* 18 */
	line-height: var(--lh-filter-label);   /* 19.8 */
	font-weight: var(--fw-regular);
	color: var(--color-navy-900);
	pointer-events: none;
	transition: opacity 200ms ease-out, visibility 200ms ease-out;
}

.kontakt-form-input:focus ~ .kontakt-form-label,
.kontakt-form-input:not(:placeholder-shown) ~ .kontakt-form-label,
.kontakt-form-textarea:focus ~ .kontakt-form-label,
.kontakt-form-textarea:not(:placeholder-shown) ~ .kontakt-form-label {
	opacity: 0;
	visibility: hidden;
}

/* Required asterisk — blue accent, scoped to the label span only. */
.kontakt-form-required {
	color: var(--color-blue-500);
}

/* Textarea field — 750×160, 16px padding all sides, blue-700 border. */
.kontakt-form-field--textarea {
	height: 160px;
}

.kontakt-form-textarea {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 16px;
	background: var(--color-white);
	border: 1px solid var(--color-blue-700);
	border-radius: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-filter-label);
	line-height: var(--lh-filter-label);
	font-weight: var(--fw-regular);
	color: var(--color-navy-900);
	resize: vertical;
	box-sizing: border-box;
	transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}

.kontakt-form-textarea::placeholder {
	color: transparent;
}

.kontakt-form-textarea:focus {
	outline: none;
	border-color: var(--color-blue-500);
	box-shadow: 0 0 0 1px var(--color-blue-500);
}

/* Textarea label sits at top, not vertically centered. */
.kontakt-form-label--top {
	top: 16px;
	transform: none;
}

/* Note line — 16/22.4 regular navy, intentionally narrower than 750. */
.kontakt-form-note {
	width: 651px;
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-nav);              /* 16 */
	line-height: var(--lh-nav);            /* 22.4 */
	font-weight: var(--fw-regular);
	color: var(--color-navy-900);
}

/* Checkbox row — 20×20 box, 12px gap, label 18/25.2. fit-content so it
   only spans the checkbox + label, matching Figma's 563×25 instance. */
.kontakt-form-checkbox-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	width: fit-content;
	height: 25px;
}

.kontakt-form-checkbox {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	background: var(--color-white);
	border: 1px solid var(--color-navy-900);
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	display: inline-grid;
	place-content: center;
	box-sizing: border-box;
}

.kontakt-form-checkbox:checked::before {
	content: '';
	width: 12px;
	height: 12px;
	background: var(--color-navy-900);
}

.kontakt-form-checkbox:focus-visible {
	outline: 2px solid var(--color-blue-500);
	outline-offset: 2px;
}

.kontakt-form-checkbox-label {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-body-m);           /* 18 */
	line-height: var(--lh-body-m);         /* 25.2 */
	font-weight: var(--fw-regular);
	color: var(--color-navy-900);
	cursor: pointer;
}

.kontakt-form-link {
	color: var(--color-blue-500);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.kontakt-form-link:hover,
.kontakt-form-link:focus-visible {
	color: var(--color-navy-900);
}

/* Submit row — 750×64, padding-top 12, button right-aligned. */
.kontakt-form-submit-row {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding-top: 12px;
	width: 100%;
}

.kontakt-form-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 130px;
	height: 52px;
	padding: 12px 24px;
	gap: 8px;
	background: var(--color-blue-500);
	border: 1px solid var(--color-blue-500);
	border-radius: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-body-m);           /* 18 */
	line-height: var(--lh-body-m);         /* 25.2 */
	font-weight: var(--fw-regular);
	color: var(--color-white);
	cursor: pointer;
	transition: var(--transition-default); /* 300ms ease-out — matches Figma SMART_ANIMATE */
	box-sizing: border-box;
}

.kontakt-form-submit:hover,
.kontakt-form-submit:focus-visible {
	background: var(--color-navy-900);
	border-color: var(--color-navy-900);
	outline: none;
}

/* --------------------------------------------------------------------------
   Contact card — Anna Kunz card with mail + LinkedIn icon-links
   (Figma frame 71:3368, 1139×290 at left:150 top:1987 page-rel)
   Page-frame coords (1440 design width, section-relative):
     Card             abs left:150 top:0  in section-inner   1139×290   white + 1px navy inset border
     Question text    abs left:32  top:32 panel-rel           359×124   28/30.8 600 navy
     Info group       abs left:421 top:32 panel-rel           228×157
       Anna Kunz       top:0     140×31  28/30.8 600
       Role            top:43    228×28  18/25.2 400
       Mail link       top:91    99×27   icon 24 + "Kontakt" 18/25.2 underlined
       LinkedIn link   top:130   103×27  icon 24 + "LinkedIn" 18/25.2 underlined
     Photo            abs left:927 top:32 panel-rel           180×226   overflow:hidden
                       └ img 534×534 abs left:-252 top:-44 (cropped portrait)
   -------------------------------------------------------------------------- */
.kontakt-contact-section {
	position: relative;
	width: 100%;
	padding-top: 100px;         /* padding-not-margin so the section's white bg
	                               fills the gap above the card; body bg is navy. */
	padding-bottom: 100px;      /* matches Figma — card bottom y=2277, footer top
	                               y=2377 (100px gap). Without this, the card's
	                               1px navy border blends into the navy footer. */
	background: var(--color-white);
}

.kontakt-contact-section-inner {
	position: relative;
	width: 100%;
	max-width: 1440px;
	height: 290px;
	margin: 0 auto;
}

.kontakt-contact-card {
	position: absolute;
	left: 150px;
	top: 0;
	width: 1139px;
	height: 290px;
	background: var(--color-white);
	box-shadow: inset 0 0 0 1px var(--color-navy-900);
	box-sizing: border-box;
}

.kontakt-contact-question {
	position: absolute;
	left: 32px;
	top: 32px;
	width: 359px;
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-card-title-l);     /* 28 */
	line-height: var(--lh-card-title-l);   /* 30.8 */
	font-weight: var(--fw-semibold);
	color: var(--color-navy-900);
}

.kontakt-contact-info {
	position: absolute;
	left: 421px;
	top: 32px;
	width: 228px;
	height: 157px;
}

.kontakt-contact-name {
	position: absolute;
	left: 0;
	top: 0;
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-card-title-l);     /* 28 */
	line-height: var(--lh-card-title-l);   /* 30.8 */
	font-weight: var(--fw-semibold);
	color: var(--color-navy-900);
}

.kontakt-contact-role {
	position: absolute;
	left: 0;
	top: 43px;
	width: 228px;
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-body-m);           /* 18 */
	line-height: var(--lh-body-m);         /* 25.2 */
	font-weight: var(--fw-regular);
	color: var(--color-navy-900);
}

/* Icon link — flex row, gap 12, label uses underline (1px). currentColor drives
   both text and icon fill (color stays navy in both states; the only hover delta
   is that the label's underline disappears — verified against Figma hover render
   `docs/kontakt/hover-renders/link-{kontakt,linkedin}-{default,hover}.png`). */
.kontakt-contact-link {
	position: absolute;
	left: 0;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	height: 27px;
	color: var(--color-navy-900);
	text-decoration: none;
}

.kontakt-contact-link--mail     { top: 91px;  }
.kontakt-contact-link--linkedin { top: 130px; }

.kontakt-contact-link-icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	overflow: hidden;
}

.kontakt-contact-link-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Underline implemented as a `::after` pseudo-element instead of
   `text-decoration` so we can wipe it left→right on hover. `text-decoration`
   can only be alpha-faded (uniform), but a transform-scaled bar can wipe
   directionally. The bar is anchored to its RIGHT edge (transform-origin: right),
   so scaling it from 1 → 0 makes the LEFT side disappear first — the visible
   wipe progresses left → right. */
.kontakt-contact-link-label {
	position: relative;
	font-family: var(--font-sans);
	font-size: var(--fs-body-m);           /* 18 */
	line-height: var(--lh-body-m);         /* 25.2 */
	font-weight: var(--fw-regular);
}

.kontakt-contact-link-label::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;                           /* ~ matches former text-underline-offset:3px */
	height: 1px;
	background: var(--color-navy-900);
	transform-origin: right center;
	transition: transform 300ms ease-out;
}

.kontakt-contact-link:hover .kontakt-contact-link-label::after,
.kontakt-contact-link:focus-visible .kontakt-contact-link-label::after {
	transform: scaleX(0);
}

.kontakt-contact-link:focus-visible {
	outline: none;
}

/* Photo — masked 180×226 viewport over a 534×534 image, cropped per Figma. */
.kontakt-contact-photo {
	position: absolute;
	left: 927px;
	top: 32px;
	width: 180px;
	height: 226px;
	overflow: hidden;
}

.kontakt-contact-photo-img {
	position: absolute;
	left: -252px;
	top: -44px;
	width: 534px;
	height: 534px;
	max-width: none;
	display: block;
}

/* ==========================================================================
   PHASE AP-4 — RESPONSIVE
   Design source 1440. Same breakpoint set as main.css and the insights page,
   so Kontakt collapses with the same rhythm as the rest of the site.
     ≥ 1440  pixel-perfect (no overrides)
     1280–1439  hero absolute kept; form panel + contact card → natural flow
                (the absolute panel ends at x=1290 and would overflow <1280)
     1024–1279  hero → flex column with circle backdrop; tighter padding
      768–1023  contact card stacks vertically; gutters drop to 40px
       ≤ 767   compact mobile sizes; submit button full width
       ≤ 479   small mobile padding pass
   ========================================================================== */

/* --- ≤ 1439 — Small laptop ----------------------------------------------- */
/* Hero is safe (headline ends at x≈1185, circle at x≈1157) — no override.
   Form panel (1138 wide @ left:152, ends at x=1290) and Contact card
   (1139 wide @ left:150, ends at x=1289) both exceed a 1280 viewport,
   so we convert them to natural-flow blocks centered with 60px gutters.   */
@media (max-width: 1439px) {
	/* --- Form: switch from absolute panel layout to natural flow --- */
	.kontakt-form-section-inner {
		height: auto;
		max-width: none;
		padding: 0 60px;
		box-sizing: border-box;
	}
	.kontakt-form-panel {
		position: relative;
		left: auto; top: auto;
		width: 100%;
		max-width: 1138px;
		height: auto;
		margin: 0 auto;
		padding: 80px 90px;
		box-sizing: border-box;
	}
	.kontakt-form-heading,
	.kontakt-form-intro,
	.kontakt-form {
		position: relative;
		left: auto; top: auto;
		width: 100%;
		max-width: 750px;
	}
	.kontakt-form-heading { margin: 0; }
	.kontakt-form-intro   { margin: 24px 0 0; }
	.kontakt-form         { margin: 36px 0 0; }

	/* --- Contact card: switch to flex row with three flex children --- */
	.kontakt-contact-section-inner {
		height: auto;
		max-width: none;
		padding: 0 60px;
		box-sizing: border-box;
	}
	.kontakt-contact-card {
		position: relative;
		left: auto; top: auto;
		width: 100%;
		max-width: 1139px;
		height: auto;
		min-height: 290px;
		margin: 0 auto;
		padding: 32px;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 30px;
		box-sizing: border-box;
	}
	.kontakt-contact-question {
		position: relative;
		left: auto; top: auto;
		flex: 0 1 359px;
		max-width: 359px;
	}
	.kontakt-contact-info {
		position: relative;
		left: auto; top: auto;
		flex: 0 0 228px;
		width: 228px;
		height: 157px;
	}
	.kontakt-contact-photo {
		position: relative;
		left: auto; top: auto;
		flex: 0 0 180px;
		margin-left: auto;
	}
}

/* --- ≤ 1279 — Laptop / tablet landscape ---------------------------------- */
/* Hero loses its absolute layout; circle becomes a faded backdrop.
   Form & contact-card just tighten internal padding.                     */
@media (max-width: 1279px) {
	.kontakt-hero-inner {
		height: auto;
		min-height: 480px;
		padding: 120px 60px 80px;
		display: flex;
		flex-direction: column;
		gap: 48px;
	}
	.kontakt-hero-headline,
	.kontakt-hero-lede {
		position: relative;
		left: auto; top: auto;
		z-index: 1;
	}
	.kontakt-hero-headline {
		width: 100%;
		max-width: 1125px;
		font-size: clamp(64px, 8vw, 110px);
		line-height: 1.05;
	}
	.kontakt-hero-lede {
		width: 100%;
		max-width: 451px;
	}
	/* Circle cluster becomes a right-anchored decorative backdrop. The
	   Frame 2462 mask is sized fluidly; child ellipses re-anchor in % so
	   they retain their visual relationship inside the shrinking mask. */
	.kontakt-hero-circles {
		left: auto;
		right: -200px;
		top: -160px;
		width: clamp(560px, 70vw, 874px);
		height: clamp(560px, 70vw, 874px);
		opacity: 0.7;
		z-index: 0;
	}
	.kontakt-hero-circle--back  { left: 0;   top: 0;   width: 100%; height: 100%; }
	.kontakt-hero-circle--mid   { left: 24%; top: 24%; width: 52%;  height: 52%;  }
	.kontakt-hero-circle--front { left: 45%; top: 39%; width: 96%;  height: 96%;  }

	.kontakt-form-section { padding-top: 64px; }
	.kontakt-form-panel   { padding: 64px 60px; }

	.kontakt-contact-section { padding-top: 80px; padding-bottom: 80px; }
	.kontakt-contact-card    { gap: 20px; padding: 28px; }
	.kontakt-contact-question { flex-basis: 320px; max-width: 320px; }
}

/* --- ≤ 1023 — Tablet portrait -------------------------------------------- */
/* Outer gutters drop to 40 to match the home build. Contact card stacks
   to a single column with photo at the bottom. Form panel inner padding
   tightens; the .kontakt-form-note width becomes auto so it can wrap.   */
@media (max-width: 1023px) {
	.kontakt-hero-inner {
		padding: 100px 40px 64px;
		gap: 40px;
	}
	.kontakt-hero-headline { font-size: clamp(56px, 9vw, 88px); }
	.kontakt-hero-circles {
		right: -240px;
		top: -200px;
		opacity: 0.55;
	}

	.kontakt-form-section-inner { padding: 0 40px; }
	.kontakt-form-panel         { padding: 56px 40px; }
	.kontakt-form-note          { width: auto; max-width: 651px; }

	.kontakt-contact-section-inner { padding: 0 40px; }
	.kontakt-contact-card {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
		padding: 32px;
	}
	.kontakt-contact-question {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
	}
	/* Info group: switch its absolute children to natural flow so the
	   stack of name → role → mail link → linkedin link reads top-down. */
	.kontakt-contact-info {
		flex: 0 0 auto;
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.kontakt-contact-name,
	.kontakt-contact-role,
	.kontakt-contact-link {
		position: relative;
		left: auto; top: auto;
	}
	.kontakt-contact-link--mail,
	.kontakt-contact-link--linkedin { top: auto; }
	.kontakt-contact-role { width: auto; max-width: 228px; }
	.kontakt-contact-photo {
		flex: 0 0 auto;
		width: 100%;
		max-width: 320px;
		height: 226px;
		margin: 0;
	}
}

/* --- ≤ 767 — Mobile ------------------------------------------------------ */
@media (max-width: 767px) {
	.kontakt-hero-inner {
		padding: 100px 24px 80px;     /* more breathing room above headline + below lede */
		gap: 36px;
		min-height: 480px;            /* keep the hero substantial — was collapsing to ~284 */
	}
	.kontakt-hero-headline {
		font-size: clamp(44px, 12vw, 72px);
		line-height: 1.1;
	}
	.kontakt-hero-lede-text { font-size: 18px; line-height: 1.4; }
	.kontakt-hero-lede      { gap: 24px; }
	/* Circle backdrop pulled in closer to viewport so it reads as a deliberate
	   accent rather than a barely-visible sliver. */
	.kontakt-hero-circles {
		right: -200px;
		top: -160px;
		width: clamp(420px, 90vw, 560px);
		height: clamp(420px, 90vw, 560px);
		opacity: 0.55;
	}

	.kontakt-form-section       { padding-top: 48px; }
	.kontakt-form-section-inner { padding: 0 24px; }
	.kontakt-form-panel         { padding: 48px 24px; }
	.kontakt-form-heading       { font-size: 32px; line-height: 1.15; }
	.kontakt-form-intro         { font-size: 18px; line-height: 1.5; }
	.kontakt-form               { gap: 20px; }
	.kontakt-form-submit-row    { align-items: stretch; padding-top: 8px; }
	.kontakt-form-submit        { width: 100%; }

	.kontakt-contact-section       { padding-top: 64px; padding-bottom: 64px; }
	.kontakt-contact-section-inner { padding: 0 24px; }
	.kontakt-contact-card          { padding: 24px; gap: 24px; }
	.kontakt-contact-question      { font-size: 22px; line-height: 1.2; }
}

/* --- ≤ 479 — Small mobile ------------------------------------------------ */
@media (max-width: 479px) {
	.kontakt-hero-inner {
		padding: 88px 20px 64px;
		gap: 32px;
		min-height: 440px;
	}
	.kontakt-hero-headline { font-size: 40px; line-height: 1.1; }
	.kontakt-hero-circles {
		right: -160px;
		top: -120px;
		width: 420px;
		height: 420px;
		opacity: 0.5;
	}

	.kontakt-form-section       { padding-top: 40px; }
	.kontakt-form-section-inner { padding: 0 20px; }
	.kontakt-form-panel         { padding: 40px 20px; }

	.kontakt-contact-section       { padding-top: 48px; padding-bottom: 48px; }
	.kontakt-contact-section-inner { padding: 0 20px; }
	.kontakt-contact-card          { padding: 20px; }
}