/* =========================================================
   Friedl Übergangswebsite
   Eigenständiges Stylesheet, keine externen Schriften/Assets.
   ========================================================= */

:root {
	--c-black: #151515;
	--c-gray: #272727;
	--c-white: #ffffff;
	--c-offwhite: #f5f3ef;
	--c-red: #d71920;
	--c-red-dark: #b8141a;
	--c-text: #1d1d1d;
	--c-text-muted: #5a5a5a;
	--c-border: #e4e0d8;

	--font: "Segoe UI", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Eigenes Schriftsystem nur für den neu gestalteten Kontaktbereich
	   (siehe @font-face weiter unten). Der Rest der Website bleibt
	   unverändert bei --font. */
	--font-heading-kontakt: "Barlow Condensed", "Oswald", "Arial Narrow", Impact, var(--font);
	--font-body-kontakt: "Inter", var(--font);

	--max-width: 1180px;
	--max-width-legal: 1080px;
	--kontakt-max-width: 1240px;

	--radius: 3px;
	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 40px;
	--space-5: 64px;
	--space-6: 96px;
}

*, *::before, *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------
   Lokale Schriftdateien für den Kontaktbereich (Barlow Condensed /
   Inter). Keine Verbindung zu Google Fonts oder anderen externen
   Anbietern – die Dateien werden ausschließlich vom eigenen Server
   geladen. Solange die WOFF2-Dateien noch nicht unter
   assets/fonts/ liegen, greift automatisch und ohne Fehler die
   Systemschrift-Fallback-Kette aus --font-heading-kontakt /
   --font-body-kontakt. Siehe assets/fonts/README.txt.
   --------------------------------------------------------------- */

@font-face {
	font-family: "Barlow Condensed";
	src: url("../fonts/barlow-condensed-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Barlow Condensed";
	src: url("../fonts/barlow-condensed-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

html { scroll-behavior: smooth; }

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

body.friedl-page {
	margin: 0;
	font-family: var(--font);
	color: var(--c-text);
	background: var(--c-white);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.friedl-page img { max-width: 100%; display: block; }
.friedl-page a { color: inherit; }
.friedl-page :focus-visible {
	outline: 2px solid var(--c-red);
	outline-offset: 2px;
}

.friedl-page h1,
.friedl-page h2,
.friedl-page h3 {
	font-weight: 800;
	letter-spacing: -0.01em;
}

.container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--space-3);
}

.container--legal {
	max-width: var(--max-width-legal);
}

/* ---------- Kontaktleiste ---------- */

.topbar {
	background: var(--c-black);
	color: var(--c-white);
	font-size: 14px;
}

.topbar__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 10px var(--space-3);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	flex-wrap: wrap;
}

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

.topbar a {
	text-decoration: none;
	color: var(--c-white);
}

.topbar a:hover { color: var(--c-offwhite); }

.topbar__hours-link {
	text-decoration: underline;
	white-space: nowrap;
}

/* ---------- Header ---------- */

.site-header {
	background: var(--c-white);
	border-bottom: 1px solid var(--c-border);
	position: sticky;
	top: 0;
	z-index: 40;
}

.site-header__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 10px var(--space-3);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.brand {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	text-decoration: none;
	color: var(--c-text);
	min-width: 0;
}

.brand__logo {
	height: 76px;
	width: auto;
	flex: none;
}

.brand__logo-placeholder {
	flex: none;
	width: 64px;
	height: 64px;
	border: 1px dashed #b9b3a6;
	border-radius: var(--radius);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 10px;
	line-height: 1.3;
	color: #8a8578;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px;
}

.brand__name {
	font-weight: 700;
	font-size: 18px;
	line-height: 1.25;
}

.site-nav {
	display: flex;
	gap: var(--space-3);
}

.site-nav a {
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	color: var(--c-text);
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a:focus-visible {
	border-bottom-color: var(--c-red);
}

.menu-toggle {
	display: none;
	background: none;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
	content: "";
	display: block;
	width: 20px;
	height: 2px;
	background: var(--c-text);
	position: relative;
}
.menu-toggle span::before { position: absolute; top: -6px; }
.menu-toggle span::after { position: absolute; top: 6px; }

/* ---------- Hero ---------- */

.hero {
	position: relative;
	color: var(--c-white);
	background-color: var(--c-gray);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.hero__bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: var(--hero-image, none);
	background-size: cover;
	background-position: center;
}

.hero__overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(100deg, rgba(21,21,21,0.88) 0%, rgba(21,21,21,0.72) 45%, rgba(21,21,21,0.42) 100%);
}

.hero__inner {
	position: relative;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: var(--space-6) var(--space-3);
}

.hero__content {
	max-width: 620px;
}

.hero h1 {
	font-size: clamp(32px, 5vw, 48px);
	line-height: 1.15;
	margin: 0 0 var(--space-2);
	font-weight: 800;
}

.hero__rule {
	width: 56px;
	height: 3px;
	background: var(--c-red);
	margin: 0 0 var(--space-2);
}

.hero__lead {
	font-size: 19px;
	margin: 0 0 var(--space-1);
	color: var(--c-offwhite);
}

.hero__extra {
	font-size: 15px;
	color: #d8d5cf;
	margin: 0 0 var(--space-3);
	max-width: 46ch;
}

.hero__actions {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}

/* ---------- Buttons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 24px;
	border-radius: var(--radius);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	font-family: inherit;
}

.btn--primary {
	background: var(--c-red);
	color: var(--c-white);
}
.btn--primary:hover,
.btn--primary:focus-visible { background: var(--c-red-dark); }

.btn--outline {
	background: transparent;
	color: var(--c-white);
	border-color: var(--c-white);
}
.btn--outline:hover,
.btn--outline:focus-visible {
	background: rgba(255,255,255,0.12);
}

.btn--dark {
	background: var(--c-black);
	color: var(--c-white);
}
.btn--dark:hover { background: var(--c-gray); }

.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* =========================================================
   Kontaktbereich – Kontakt / Öffnungszeiten / Anfahrt / Formular
   Neu konzipiert als asymmetrische Komposition statt vier
   gleich hoher Karten. Eigenes Schriftsystem (Barlow Condensed /
   Inter), siehe @font-face oben.
   ========================================================= */

.kontakt-section {
	background: var(--c-offwhite);
	padding: 96px 0;
}

.kontakt-container {
	max-width: var(--kontakt-max-width);
	margin: 0 auto;
	padding: 0 32px;
}

.kontakt-intro {
	text-align: left;
	margin-bottom: 44px;
}

.kontakt-eyebrow {
	display: block;
	font-family: var(--font-body-kontakt);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--c-red);
	margin: 0 0 10px;
}

.kontakt-heading {
	font-family: var(--font-heading-kontakt);
	font-weight: 700;
	font-size: 48px;
	line-height: 1.05;
	margin: 0 0 14px;
	color: var(--c-text);
}

.kontakt-lead {
	font-family: var(--font-body-kontakt);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	max-width: 620px;
	margin: 0;
	color: var(--c-text-muted);
}

/* ---- Zwölf-Spalten-Raster: Kontakt / Formular oben, Öffnungszeiten+Anfahrt unten ---- */

.kontakt-grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	grid-template-areas:
		"contact form"
		"hours   hours";
	gap: 28px;
	align-items: start;
}

.kontakt-panel-contact { grid-area: contact; }
.kontakt-panel-form { grid-area: form; }
.kontakt-panel-hours { grid-area: hours; }

/* ---- Direkter Kontakt (dunkles Panel) ---- */

.kontakt-panel-contact {
	background: #171717;
	color: var(--c-white);
	border-radius: 4px;
	padding: 44px;
}

.kontakt-panel-contact__rule {
	width: 40px;
	height: 3px;
	background: var(--c-red);
	margin-bottom: 20px;
}

.kontakt-panel-contact h2 {
	font-family: var(--font-heading-kontakt);
	font-weight: 700;
	font-size: 28px;
	line-height: 1.15;
	margin: 0 0 14px;
}

.kontakt-panel-contact__intro {
	font-family: var(--font-body-kontakt);
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
	margin: 0 0 28px;
	max-width: 34ch;
}

.kontakt-phone-row,
.kontakt-email-row {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--c-white);
}

.kontakt-phone-row {
	font-family: var(--font-body-kontakt);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 14px;
}

.kontakt-email-row {
	font-family: var(--font-body-kontakt);
	font-size: 17px;
	font-weight: 500;
	margin-bottom: 28px;
}

.kontakt-icon {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--c-red);
}

.kontakt-phone-row:hover,
.kontakt-email-row:hover { color: var(--c-offwhite); }

@media (min-width: 900px) {
	.kontakt-email-row { white-space: nowrap; }
}

.kontakt-panel-contact address {
	font-style: normal;
	font-family: var(--font-body-kontakt);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.72);
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.kontakt-panel-contact address strong {
	display: block;
	color: var(--c-white);
	font-weight: 600;
	margin-bottom: 4px;
}

.kontakt-panel-contact .btn {
	margin-top: 28px;
	height: 52px;
	width: auto;
	padding-left: 28px;
	padding-right: 28px;
}

/* ---- Kontaktformular (helles Panel) ---- */

.kontakt-panel-form {
	background: var(--c-white);
	border: 1px solid #dedad4;
	border-radius: 4px;
	padding: 44px;
}

.kontakt-panel-form h2 {
	font-family: var(--font-heading-kontakt);
	font-weight: 700;
	font-size: 28px;
	line-height: 1.15;
	margin: 0 0 14px;
	color: var(--c-text);
}

.kontakt-panel-form__intro {
	font-family: var(--font-body-kontakt);
	font-size: 16px;
	line-height: 1.6;
	color: var(--c-text-muted);
	margin: 0 0 28px;
}

.kontakt-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.kontakt-field-row--single {
	grid-template-columns: 1fr;
}

.kontakt-field { margin-bottom: 18px; }

.kontakt-field label {
	display: block;
	font-family: var(--font-body-kontakt);
	font-size: 14px;
	font-weight: 600;
	color: var(--c-text);
	margin-bottom: 6px;
}

.kontakt-field input,
.kontakt-field textarea {
	width: 100%;
	height: 52px;
	padding: 0 15px;
	border: 1px solid #d7d3cd;
	border-radius: 3px;
	background: var(--c-white);
	color: var(--c-text);
	font-family: var(--font-body-kontakt);
	font-size: 16px;
	font-weight: 400;
}

.kontakt-field textarea {
	height: auto;
	min-height: 140px;
	max-height: 220px;
	padding: 14px 15px;
	resize: vertical;
}

.kontakt-field input:focus-visible,
.kontakt-field textarea:focus-visible {
	outline: none;
	border-color: var(--c-red);
	box-shadow: 0 0 0 3px rgba(215, 25, 32, 0.15);
}

.kontakt-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--font-body-kontakt);
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-text-muted);
	margin: 20px 0 22px;
}
.kontakt-consent input { flex: none; margin-top: 3px; }
.kontakt-consent a { color: var(--c-red); text-decoration: underline; }

.kontakt-panel-form .btn {
	width: auto;
	padding-left: 28px;
	padding-right: 28px;
	height: 52px;
}

/* ---- Öffnungszeiten + Anfahrt (gemeinsames unteres Band) ---- */

.kontakt-panel-hours {
	background: var(--c-white);
	border: 1px solid #dedad4;
	border-radius: 4px;
	padding: 38px 40px;
	margin-top: 4px;
	display: flex;
	gap: 40px;
}

.hours-block {
	flex: 2;
}

.anfahrt-block {
	flex: 1;
	padding-left: 40px;
	border-left: 1px solid #dedad4;
}

.hours-block h2,
.anfahrt-block h2 {
	font-family: var(--font-heading-kontakt);
	font-weight: 700;
	font-size: 28px;
	line-height: 1.15;
	margin: 0 0 20px;
	color: var(--c-text);
}

.hours-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2);
	padding: 12px 0;
	border-bottom: 1px solid var(--c-border);
}
.hours-row:last-child { border-bottom: none; }

.hours-row__day {
	font-family: var(--font-body-kontakt);
	font-size: 15px;
	font-weight: 600;
	color: var(--c-text);
	white-space: nowrap;
}

.hours-row__time {
	font-family: var(--font-body-kontakt);
	font-size: 18px;
	font-weight: 500;
	color: var(--c-text);
	text-align: right;
}

.hours-row__time.is-closed {
	font-weight: 400;
	color: var(--c-text-muted);
}

.anfahrt-eyebrow {
	display: block;
	font-family: var(--font-body-kontakt);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--c-red);
	margin: 0 0 10px;
}

.anfahrt-address {
	font-family: var(--font-body-kontakt);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
	color: var(--c-text);
	margin: 0 0 18px;
}

.anfahrt-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body-kontakt);
	font-size: 16px;
	font-weight: 700;
	color: var(--c-red);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.anfahrt-link:hover { color: var(--c-red-dark); }

/* ---- Formular-Statusmeldung (Erfolg/Fehler) ---- */

.form-status {
	margin-top: var(--space-2);
	padding: 12px 14px;
	border-radius: var(--radius);
	font-family: var(--font-body-kontakt);
	font-size: 15px;
	display: none;
}
.form-status--success {
	display: block;
	background: #eaf6ec;
	color: #205a2c;
	border: 1px solid #bfe3c5;
}
.form-status--error {
	display: block;
	background: #fbeaea;
	color: #7a1c1c;
	border: 1px solid #f0c4c4;
}

.honeypot-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- Responsive: Kontaktbereich ---- */

@media (max-width: 1199px) and (min-width: 900px) {
	.kontakt-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 899px) {
	.kontakt-section { padding: 72px 0; }
	.kontakt-container { padding: 0 24px; }
	.kontakt-heading { font-size: 40px; }
	.kontakt-panel-contact h2,
	.kontakt-panel-form h2,
	.hours-block h2,
	.anfahrt-block h2 { font-size: 26px; }
	.kontakt-phone-row { font-size: 24px; }

	.kontakt-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"contact"
			"hours"
			"form";
		gap: 20px;
	}

	.kontakt-panel-contact,
	.kontakt-panel-form { padding: 28px; }

	.kontakt-panel-hours {
		padding: 26px;
		margin-top: 0;
	}
}

@media (max-width: 680px) {
	.kontakt-panel-hours { flex-direction: column; gap: 24px; }
	.anfahrt-block {
		padding-left: 0;
		padding-top: 24px;
		border-left: none;
		border-top: 1px solid #dedad4;
	}

	.hours-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	.hours-row__time { text-align: left; }
}

@media (max-width: 640px) {
	.kontakt-section { padding: 56px 0; }
	.kontakt-container { padding: 0 18px; }
	.kontakt-heading { font-size: 34px; }
	.kontakt-panel-contact h2,
	.kontakt-panel-form h2,
	.hours-block h2,
	.anfahrt-block h2 { font-size: 24px; }
	.kontakt-phone-row { font-size: 23px; }
	.kontakt-lead { font-size: 16px; }

	.kontakt-field-row { grid-template-columns: 1fr; gap: 0; }

	.kontakt-panel-form .btn { width: 100%; }
	.kontakt-panel-contact .btn { width: 100%; }
}

/* ---------- Vertrauenshinweis ---------- */

.trust-line {
	background: var(--c-offwhite);
	padding: var(--space-3) 0;
	border-top: 1px solid var(--c-border);
}
.trust-line__inner {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.trust-line__icon {
	flex: none;
	width: 44px;
	height: 44px;
	border: 1.5px solid var(--c-red);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-red);
}
.trust-line p { margin: 0; }
.trust-line .main { font-weight: 700; }
.trust-line .sub { color: var(--c-text-muted); font-size: 14px; }

/* ---------- Footer ---------- */

.site-footer {
	background: var(--c-black);
	color: #cfcfcf;
	padding: var(--space-3) 0;
	font-size: 14px;
}
.site-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	flex-wrap: wrap;
}
.footer-links { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.footer-links a { text-decoration: none; color: #cfcfcf; }
.footer-links a:hover, .footer-links a[aria-current="page"] { color: var(--c-white); text-decoration: underline; }

/* =========================================================
   Impressum / Datenschutz
   ========================================================= */

.legal-header {
	background: var(--c-black);
	color: var(--c-white);
	padding: var(--space-4) 0 var(--space-3);
}
.legal-header__rule {
	width: 56px;
	height: 3px;
	background: var(--c-red);
	margin-bottom: var(--space-2);
}
.legal-header h1 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 36px); }
.legal-header p { margin: 0 0 var(--space-2); color: #cfcfcf; }
.breadcrumb { font-size: 14px; color: #9c9c9c; }
.breadcrumb a { color: #cfcfcf; text-decoration: underline; }

.legal-layout {
	max-width: var(--max-width-legal);
	margin: 0 auto;
	padding: var(--space-5) var(--space-3);
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--space-5);
	align-items: start;
}

.legal-nav {
	position: sticky;
	top: 88px;
}
.legal-nav h2 {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--c-text-muted);
	margin: 0 0 var(--space-1);
}
.legal-nav ul { list-style: none; margin: 0; padding: 0; }
.legal-nav li { margin-bottom: 6px; }
.legal-nav a {
	text-decoration: none;
	color: var(--c-text);
	font-size: 14px;
	display: block;
	padding: 4px 0;
	border-left: 2px solid transparent;
	padding-left: 10px;
}
.legal-nav a:hover, .legal-nav a:focus-visible {
	border-left-color: var(--c-red);
	color: var(--c-red);
}

.legal-content { max-width: 74ch; font-size: 16px; }
.legal-content h2 {
	font-size: 21px;
	margin: var(--space-4) 0 var(--space-2);
	scroll-margin-top: 100px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { margin: 0 0 var(--space-2); }
.legal-content a { color: var(--c-red); text-decoration: underline; }
.legal-content ul { padding-left: 22px; margin: 0 0 var(--space-2); }
.legal-content li { margin-bottom: 4px; }

.info-panel {
	background: var(--c-offwhite);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	padding: var(--space-2) var(--space-3);
	margin: var(--space-2) 0 var(--space-3);
}
.info-panel p { margin: 0 0 4px; }
.info-panel p:last-child { margin-bottom: 0; }

.external-link::after {
	content: " ↗";
}

.placeholder-note {
	background: #fff6e5;
	border: 1px solid #f0d9a3;
	color: #6b4e05;
	padding: 10px 14px;
	border-radius: var(--radius);
	font-size: 14px;
	margin-bottom: var(--space-2);
}

.back-home {
	margin-top: var(--space-5);
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
	.legal-layout { grid-template-columns: 1fr; }
	.legal-nav { position: static; margin-bottom: var(--space-3); }
	.legal-nav ul {
		display: flex;
		flex-wrap: wrap;
		gap: 4px var(--space-2);
	}
	.legal-nav li { margin-bottom: 0; }
}

@media (max-width: 720px) {
	.topbar__inner { flex-direction: column; align-items: flex-start; gap: 4px; }
	.topbar__contacts { gap: var(--space-2); }

	.site-nav { display: none; }
	.menu-toggle { display: flex; }

	.site-nav.is-open {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--c-white);
		border-bottom: 1px solid var(--c-border);
		padding: var(--space-2) var(--space-3);
		gap: var(--space-1);
	}

	.hero__inner { padding: var(--space-4) var(--space-2); }
	.hero__content { max-width: 100%; }
	.hero__actions { flex-direction: column; }
	.hero__actions .btn { width: 100%; }

	.trust-line__inner { flex-direction: row; }

	.site-footer__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 720px) {
	.brand__logo { height: 54px; }
}

@media (max-width: 480px) {
	.container { padding: 0 var(--space-2); }
	.brand__name { font-size: 16px; }
	.brand__logo-placeholder { width: 52px; height: 52px; font-size: 9px; }
	.brand__logo { height: 48px; }
}