/* ============================================================
   PAGE — Kontakt  (Figma node 0:1382, design width 1920)
   Contact page: a 2-column title/intro row with a 1px bottom
   divider (0:1451), then one rounded white contact card (0:1454)
   holding a contact form on the left, a 1px vertical divider, and
   a 4-card info sidebar on the right. All values come from
   docs/kontakt/figma-audit.json (sections 0:1451 / 0:1454).
   Prefix: .kontakt-  ·  new token: --color-divider #E4E4E7 (token-delta.txt).

   REUSE (nothing here redefines a shared class):
   - .container, :root tokens, fonts from style.css / main.css.
   - The intro (0:1451) mirrors the shared Über-uns/Preise 2-col
     page-title + bottom-divider pattern (own prefix, Wave B consolidates).
   The contact card, form controls and info sidebar are page-specific.
   ============================================================ */

/* The grey field (#F7F7F8) + the title row are the SHARED page_intro module —
   .page-intro*, the .site-main:has(.page-intro) background and the footer-margin
   cancel all live in main.css. Kontakt's title differs from the shared default
   in only two measured values, overridden here (this page's CSS loads after
   main.css, so these win): a tighter header→title gap (109 vs 164) and 30px
   page margins (60 vs 48). */
.page-intro { margin-top: 109px; }
.page-intro__row { width: calc(100% - 60px); }

/* ---------- Contact section (0:1454) ----------
   intro-bottom(495) → card-top(595) = 100px; card-bottom(1524) → footer(1674) = 150px.
   One rounded white card (cr=12, clipped) at the 1596 content width: a FILL form
   column (1076) + a 1px vertical divider + a FIXED 520 info sidebar. */
.kontakt-contact {
	margin-top: 100px;
	margin-bottom: 150px;
}

.kontakt-contact__card {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	background: var(--color-white);
	border-radius: var(--radius-lg); /* 12px */
	overflow: hidden;
}

/* ----- Form column (0:1455) — FILL (1076), pad 80, gap 50, centered ----- */
.kontakt-contact__form {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center; /* centers the HUG send button; full-width blocks set width:100% */
	gap: 50px;
	padding: 80px;
	background: var(--color-white);
}

.kontakt-form__elements {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* two-up field pair (First/Last, Email/Phone) */
.kontakt-form__row {
	display: flex;
	flex-direction: row;
	gap: 30px;
}

.kontakt-field {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* fields inside a pair share the row equally */
.kontakt-form__row > .kontakt-field {
	flex: 1 1 0;
}

/* full-width single field (Subject, Message) */
.kontakt-form__group {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.kontakt-field__label {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 500;
	color: var(--color-heading); /* #262626 */
}

/* input face — h68, fill #FCFCFD, 1px inside border #F1F1F3, cr8, pad 24/20 */
.kontakt-input {
	box-sizing: border-box;
	width: 100%;
	height: 68px;
	padding: 0 20px;
	background: var(--color-card); /* #FCFCFD */
	box-shadow: inset 0 0 0 1px var(--color-border); /* #F1F1F3 */
	border: 0;
	border-radius: var(--radius-md); /* 8px */
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 20px;
	font-weight: 400;
	color: var(--color-heading);
}

.kontakt-input::placeholder {
	color: var(--color-text-light); /* #656567 */
	opacity: 1;
}

.kontakt-input:focus {
	outline: none;
	box-shadow: inset 0 0 0 1px var(--color-text-light);
}

/* message textarea — h170, top-aligned text, no resize */
.kontakt-input--textarea {
	height: 170px;
	padding: 24px 20px;
	resize: none;
}

/* send button (own class — radius 10 / weight 500 differ from shared .btn) */
.kontakt-form__submit {
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 24px;
	background: var(--color-primary); /* #FF9500 */
	border: 0;
	border-radius: 10px;
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 500;
	color: var(--color-white);
	white-space: nowrap;
	cursor: pointer;
	transition: opacity var(--transition-fast);
}

.kontakt-form__submit:hover {
	opacity: 0.9;
}

/* ----- Info sidebar (0:1486) — FIXED 520, pad 80, gap 50 -----
   The Figma "Line" between form and sidebar is a 0-width 1px stroke at the
   seam; rendered as an inset box-shadow on the sidebar's left edge so it adds
   NO layout width (form keeps 1076, sidebar keeps 520). */
.kontakt-contact__info {
	flex: none;
	width: 520px;
	display: flex;
	flex-direction: column;
	gap: 50px;
	padding: 80px;
	background: var(--color-white);
	box-shadow: inset 1px 0 0 var(--color-border); /* #F1F1F3 vertical divider */
}

.kontakt-info-card {
	flex: 1 1 0;
	/* Cards are FILL/distributed within the form-defined 929px card height, so
	   let them collapse below content-min — otherwise their combined min-content
	   (4×159) would push the sidebar taller than the form. */
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 30px;
	background: var(--color-card); /* #FCFCFD */
	box-shadow: inset 0 0 0 1px var(--color-border); /* #F1F1F3 */
	border-radius: var(--radius-md); /* 8px */
}

.kontakt-icon-box {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: var(--color-surface); /* #F7F7F8 */
	box-shadow: inset 0 0 0 1px var(--color-border); /* #F1F1F3 */
	border-radius: var(--radius-md); /* 8px */
}

.kontakt-icon-box img {
	display: block;
	width: 24px;
	height: 24px;
}

.kontakt-info-card__text {
	width: 100%;
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	color: var(--color-text); /* #4C4C4D */
	text-align: center;
}

/* social card — a horizontal row of 3 icon boxes above the label */
.kontakt-social {
	display: flex;
	flex-direction: row;
	gap: 14px;
}

/* ============================================================
   RESPONSIVE — page-specific `.kontakt-` rules only.
   Shared chrome (header nav → hamburger, footer stacking) is
   handled by main.css at the SAME 1024/768/480 breakpoints, so
   nothing here touches it. The 1920 → 1024 desktop zone already
   scales with the base rules: the form column is FILL (flex:1 1 0)
   so it absorbs the container shrink while the 520 sidebar stays
   fixed, and the intro side padding is a clamp() — so no @media is
   needed there. Breakpoints mirror the sibling pages: 1024 = first
   layout shift, 768/480 = proportional padding/type. No Figma mobile
   frame exists for this page → narrow values are derived (same scale
   as the siblings), not guessed.
   ============================================================ */

/* ---------- TABLET  max-width: 1024px ---------- */
@media (max-width: 1024px) {
	/* Intro row stacking is handled by the shared .page-intro__row @media in main.css. */

	/* Contact card: the FILL form + fixed 520 sidebar leave the form too
	   narrow for its two-up fields — stack the form above the info sidebar
	   (first real layout shift). */
	.kontakt-contact__card {
		flex-direction: column;
	}

	/* Form no longer shares a row height — take natural content height. */
	.kontakt-contact__form {
		flex: none;
	}

	/* Sidebar spans the full card width; the vertical seam divider becomes a
	   horizontal top divider between the stacked form and info blocks. */
	.kontakt-contact__info {
		flex: none;
		width: 100%;
		box-shadow: inset 0 1px 0 var(--color-border); /* #F1F1F3 */
	}

	/* Cards no longer fill a form-defined 929px column — return to natural
	   content height (the min-height:0 / flex:1 distribution was desktop-only,
	   and with an auto-height sidebar it would otherwise collapse them). */
	.kontakt-info-card {
		flex: none;
	}
}

/* ---------- MOBILE  max-width: 768px ---------- */
@media (max-width: 768px) {
	/* Section rhythm for phone height (shared .page-intro scales via main.css). */
	.kontakt-contact {
		margin-top: 80px;
		margin-bottom: 80px;
	}

	/* Shrink the 80px form/sidebar padding + 50px inner gap for narrow width. */
	.kontakt-contact__form,
	.kontakt-contact__info {
		padding: 40px;
		gap: 40px;
	}
}

/* ---------- SMALL MOBILE  max-width: 480px ---------- */
@media (max-width: 480px) {
	.kontakt-contact {
		margin-top: 60px;
		margin-bottom: 60px;
	}

	/* The two-up field pairs (First/Last, Email/Phone) get too narrow on a
	   phone — stack each pair into a single column (30px = the field gap). */
	.kontakt-form__row {
		flex-direction: column;
		gap: 30px;
	}

	/* Tightest padding so the inputs keep usable width inside the card. */
	.kontakt-contact__form,
	.kontakt-contact__info {
		padding: 24px;
		gap: 40px;
	}
}