/* =========================================================
   StreetTrekker Base CSS
   Datei: assets/css/base.css
========================================================= */

/* ---------------------------------------------------------
   Lokale Fonts
   Erwartete Dateien:

   assets/fonts/inter/Inter-Variable.woff2
   assets/fonts/inter/PlayfairDisplay-Variable.woff2
--------------------------------------------------------- */

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter/Inter-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Playfair Display";
	src: url("../fonts/inter/PlayfairDisplay-Variable.woff2") format("woff2");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------
   Design Tokens
--------------------------------------------------------- */

:root {
	--st-header-bg: #f4f3ef;
	--st-bg: #f6f1e8;
	--st-bg-soft: #fff9ef;

	--st-text: #101820;
	--st-text-muted: #5b5248;

	--st-orange: #ef4015;
	--st-orange-soft: #f28c28;
	--st-orange-deep: #b9602f;
	--st-orange-editorial: #bf6f39;

	--st-border: rgba(16, 24, 32, 0.12);
	--st-border-soft: rgba(16, 24, 32, 0.08);

	--st-shadow-soft: 0 12px 32px rgba(16, 24, 32, 0.08);

	--st-container: 1180px;

	--st-font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--st-font-display: "Playfair Display", Georgia, serif;
}

/* ---------------------------------------------------------
   Reset / Basis
--------------------------------------------------------- */

* {
	box-sizing: border-box;
}

html {
	width: 100%;
	max-width: none;
	scroll-behavior: smooth;
}

body {
	width: 100%;
	max-width: none;
	margin: 0;
	background: var(--st-bg);
	color: var(--st-text);
	font-family: var(--st-font-ui);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/*
 * Keep the theme frame independent from legacy theme/plugin wrappers.
 * In particular, logged-in previews must not inherit an old content width.
 */
.st-site-header,
.st-site-main,
.st-site-footer {
	width: 100%;
	max-width: none;
}

.st-site-main {
	display: block;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--st-orange-deep);
}

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

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.st-container {
	width: min(var(--st-container), calc(100% - 32px));
	margin-inline: auto;
}

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

.st-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 24px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-family: var(--st-font-ui);
	font-size: 15px;
	font-weight: 750;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.st-btn-primary {
	background: var(--st-orange-editorial);
	color: #fff9ef;
	border-color: var(--st-orange-editorial);
	box-shadow: 0 10px 22px rgba(185, 96, 47, 0.16);
}

.st-btn-primary:hover {
	background: #a95f31;
	border-color: #a95f31;
	color: #fff9ef;
	transform: translateY(-1px);
}

.st-btn-outline {
	background: rgba(255, 249, 239, 0.74);
	color: #2d3338;
	border-color: rgba(16, 24, 32, 0.14);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

.st-btn-outline:hover {
	background: #fff9ef;
	color: #14202c;
	border-color: rgba(16, 24, 32, 0.22);
	transform: translateY(-1px);
}

/* ---------------------------------------------------------
   Labels / Kicker
--------------------------------------------------------- */

.st-kicker {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(185, 96, 47, 0.10);
	color: #a25d33;
	font-family: var(--st-font-ui);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: none;
}