/* ==========================================================================
   Skyline Transport GmbH – Stylesheet
   Inhalt: 1 Basis · 2 Schriften · 3 Header · 4 Layout · 5 Bausteine ·
           6 Seitenbereiche · 7 Footer · 8 Responsive
   ========================================================================== */

/* 1 Basis ------------------------------------------------------------- */
:root {
	--rot: #c00d0d;
	--dunkel: #0e0b0b;
	--grau: #333;
	--grau-hell: #b3b3b3;
	--weiss: #fff;
	--schrift: "Inter", Arial, sans-serif;
	--schrift-titel: "Noto Sans", Arial, sans-serif;
	--breite: 1600px;
	--rand: 4%;
}

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

html { scroll-behavior: smooth; }

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	background: var(--dunkel);
	color: var(--weiss);
	font: 300 19px/1.4 var(--schrift);
	letter-spacing: -0.02em;
}

main { flex: 1 0 auto; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 .8em; }

h1, h2 {
	margin: 0 0 22px;
	font: 700 46px/52px var(--schrift-titel);
	text-transform: uppercase;
	letter-spacing: -0.015em;
}


/* 2 Schriften & Icons ------------------------------------------------- */
@font-face { font-family: "Inter"; font-weight: 300; font-display: swap; src: url("../fonts/inter-300.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans"; font-weight: 200; font-display: swap; src: url("../fonts/noto-sans-200.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans"; font-weight: 700; font-display: swap; src: url("../fonts/noto-sans-700.woff2") format("woff2"); }
@font-face { font-family: "Icons"; font-weight: 900; font-display: block; src: url("../fonts/fa-solid-900.woff2") format("woff2"); }
@font-face { font-family: "Brands"; font-weight: 400; font-display: block; src: url("../fonts/fa-brands-400.woff2") format("woff2"); }

.icon { display: inline-block; width: 1.4em; font: normal 900 1em/1 "Icons"; text-align: center; }
.icon--brand { font: normal 400 1em/1 "Brands"; }
.icon--phone::before    { content: "\f095"; }
.icon--phone-alt::before { content: "\f879"; }
.icon--mobile::before   { content: "\f3cd"; }
.icon--arrow-down::before { content: "\f063"; }
.icon--check::before    { content: "\f00c"; }
.icon--facebook::before { content: "\f39e"; }
.icon--instagram::before { content: "\f16d"; }
.icon--menu::before     { content: "\f0c9"; }
.icon--pdf::before      { content: "\f1c1"; }


/* 3 Header ------------------------------------------------------------ */
.header {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--weiss);
	color: #0f0f0f;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
}

.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	height: 90px;
	padding: 0 var(--rand);
}

.header__logo img { width: 240px; }

.nav { display: flex; gap: 28px; }

.nav a {
	padding: 5px 0;
	white-space: nowrap;
	font: 600 16.4px/52px var(--schrift);
	letter-spacing: .6px;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color .2s, border-color .2s;
}
.nav a:hover,
.nav a[aria-current="page"] { color: var(--rot); border-color: var(--rot); }

.header__tel {
	padding-bottom: 5px;
	color: var(--grau);
	text-decoration: none;
	border-bottom: 1px solid var(--rot);
	white-space: nowrap;
}
.header__tel .icon { color: var(--rot); width: auto; margin-left: 8px; }

.menu-btn {
	display: none;
	padding: 8px 12px;
	border: 0;
	background: none;
	color: inherit;
	font-size: 24px;
	cursor: pointer;
}


/* 4 Layout ------------------------------------------------------------ */
.band { padding: 100px 0; }

/* Abschnitte außerhalb des Bildschirms erst beim Scrollen berechnen (schnellerer Seitenaufbau) */
main > .band:not(:first-child) { content-visibility: auto; contain-intrinsic-size: auto 700px; }

.row {
	display: flex;
	align-items: center;
	max-width: var(--breite);
	min-height: 461px;
	margin: 0 auto;
	padding: 0 var(--rand);
}

.col { padding: 0 15px; }
.col-25  { flex: 0 0 25%; }
.col-33  { flex: 0 0 33.333%; }
.col-50  { flex: 0 0 50%; }
.col-66  { flex: 0 0 66.666%; }
.col-100 { flex: 0 0 100%; }
.col--text { padding: 5%; }

.col--foto {
	align-self: stretch;
	min-height: 461px;
	border: 30px solid var(--grau);
	background: center / cover no-repeat;
}
.foto--lager       { background-image: url("../img/lager.jpg"); }
.foto--team        { background-image: url("../img/team.jpg"); }
.foto--lkws        { background-image: url("../img/lkws.jpg"); }
.foto--hero        { background-image: url("../img/hero.jpg"); }
.foto--weisser-lkw { background-image: url("../img/weisser-lkw.jpg"); }
.foto--stapler     { background-image: url("../img/stapelfahrer.jpg"); }
.foto--lkw-detail  { background-image: url("../img/lkw-detail.jpg"); }
.foto--lkw-frontal { background-image: url("../img/lkw-frontal-gross.jpg"); }
.foto--einfahrt    { background-image: url("../img/einfahrt.jpg"); }
.foto--standort    { background-image: url("../img/standort.jpg"); }


/* 5 Bausteine --------------------------------------------------------- */
.eyebrow {
	margin: 0 0 12px;
	font-size: 20px;
	line-height: 26px;
}

.text { font-size: 19px; line-height: 26px; }
.text a { color: var(--rot); }
.text p { margin-bottom: 14px; }

.btn {
	display: inline-flex;
	align-items: center;
	gap: 17px;
	margin-top: 35px;
	padding: 15px 30px;
	border: 2px solid var(--rot);
	background: var(--rot);
	color: var(--weiss);
	font: 300 18px/1 var(--schrift);
	letter-spacing: 0;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .3s, color .3s;
}
.btn:hover { background: transparent; }
.btn--dunkel { background: var(--dunkel); }
.btn--dunkel:hover { background: var(--weiss); color: var(--dunkel); }

.checklist { margin: 22px 0; padding: 0; list-style: none; }
.checklist li { position: relative; margin-bottom: 8px; padding-left: 32px; }
.checklist li::before {
	content: "\f00c";
	position: absolute;
	left: 0;
	color: var(--rot);
	font: 900 .9em/1.5 "Icons";
}
.checklist--tel li::before    { content: "\f879"; }
.checklist--mobil li::before  { content: "\f3cd"; }

.titel-klein { margin-bottom: 8px; font-weight: 700; text-transform: uppercase; }

.zentriert { text-align: center; }
.rot { color: var(--rot); }
.grau { color: #b6b1b1; }

/* Zahlen */
.zahlen { text-align: center; }
.zahlen__wert {
	display: block;
	color: var(--rot);
	font: 700 80px/1 var(--schrift-titel);
}

/* Ansprechpartner */
.person { display: flex; align-items: center; gap: 30px; }
.person__daten { flex: 1 1 55%; min-width: 0; overflow-wrap: break-word; }
.person__daten h2 { margin-bottom: 4px; font-size: 28px; line-height: 34px; }
.person__daten .rot { margin-bottom: 14px; font: 700 22px/28px var(--schrift-titel); text-transform: uppercase; }
.person img { flex: 1 1 45%; min-width: 0; }


/* 6 Seitenbereiche ---------------------------------------------------- */
.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: calc(100vh - 90px);
	min-height: calc(100svh - 90px);
	padding: 60px var(--rand) 40px;
	background: #000 url("../img/hero.jpg") center / cover no-repeat;
}
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.hero > * { position: relative; }
.hero__inhalt { width: 100%; max-width: var(--breite); margin: auto; }
@media (min-width: 1025px) {
	.hero__inhalt {
		width: 50%;
		max-width: none;
		margin: auto 0 auto auto;
		text-align: right;
	}
	.hero h1 { margin-left: auto; }
}
.hero h1 { max-width: 900px; margin-bottom: 0; font-size: 70px; line-height: 85px; letter-spacing: 0; }
.hero .btn { margin-top: 40px; }
.hero__banner {
	margin-inline: auto;
	z-index: 1;
	width: 100%;
	max-width: 768px;
	margin-top: 50px;
	margin-bottom: 0;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

.seite { padding: 80px var(--rand); }
.seite__inhalt { max-width: 1000px; margin: 0 auto; }
.seite h1 { margin-bottom: 30px; }
.seite h2 { margin: 40px 0 14px; font-size: 28px; line-height: 34px; }
.seite h3 { margin: 28px 0 10px; font: 600 20px/1.4 var(--schrift); }
.seite h4, .seite h5 { margin: 22px 0 8px; font: 600 18px/1.4 var(--schrift); }
.seite h5 { font-weight: 400; text-transform: uppercase; letter-spacing: .04em; }
.seite ul { padding-left: 22px; }
.seite li { margin-bottom: 6px; }
.seite a { color: var(--rot); overflow-wrap: anywhere; }
.seite--hell { background: var(--weiss); color: var(--grau); }

.downloads { padding: 0; list-style: none; }
.downloads li { margin-bottom: 14px; }
.download {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 26px;
	border: 2px solid var(--rot);
	color: var(--weiss);
	font-size: 20px;
	text-decoration: none;
	transition: background .3s;
}
.seite a.download { color: var(--weiss); }
.download:hover { background: var(--rot); }
.download .icon { color: var(--rot); font-size: 28px; transition: color .3s; }
.download:hover .icon { color: var(--weiss); }
.download__typ { margin-left: auto; font-size: 14px; letter-spacing: .1em; opacity: .7; }


/* Kontaktformular */
.kontaktformular { border-top: 2px solid var(--grau); }
.kontaktformular .row { min-height: 0; }

.formular {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px 60px;
	max-width: 1000px;
	margin-top: 40px;
}
.formular__feld--breit { grid-column: 1 / -1; }
.formular__feld label { display: block; margin-bottom: 4px; font-size: 16px; color: var(--grau-hell); }

.formular input[type="text"],
.formular input[type="tel"],
.formular input[type="email"],
.formular textarea {
	width: 100%;
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid var(--weiss);
	border-radius: 0;
	background: transparent;
	color: var(--weiss);
	font: 300 18px/1.4 var(--schrift);
}
.formular textarea { resize: vertical; }
.formular input:focus,
.formular textarea:focus { outline: 0; border-bottom-color: var(--rot); box-shadow: 0 1px 0 var(--rot); }
.formular input:invalid:not(:placeholder-shown):not(:focus) { border-bottom-color: var(--rot); }

.formular__haken { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.5; cursor: pointer; }
.formular__haken input { flex: none; width: 20px; height: 20px; margin-top: 3px; accent-color: var(--rot); }
.formular__haken a { color: var(--rot); }

.formular .btn { margin-top: 0; cursor: pointer; }
.formular .btn:disabled { opacity: .6; cursor: wait; }

.formular__status { grid-column: 1 / -1; margin: 0; font-size: 18px; }
.formular__status:empty { display: none; }
.formular__status--ok { color: #7bd88f; }
.formular__status--fehler { color: #ff8a8a; }

/* Spam-Falle: für Menschen unsichtbar */
.formular__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 7 Footer ------------------------------------------------------------ */
.footer__info { background: var(--grau); }
.footer__info .row { min-height: 0; padding-block: 40px 50px; align-items: flex-start; }

.footer__info h3 {
	margin: 0 0 6px;
	font: 700 22px/28px var(--schrift-titel);
	text-transform: uppercase;
}
.footer__info p { margin: 0; color: var(--grau-hell); font: 200 18px/26px var(--schrift-titel); }
.footer__info strong { color: var(--weiss); font-weight: 200; }
.footer__info a { text-decoration: none; }

.footer__unten { background: var(--weiss); color: var(--grau); }
.footer__unten .row { min-height: 0; padding-block: 18px; font-size: 16px; }
.footer__unten .col { display: flex; align-items: center; gap: 20px; }
.footer__unten p { margin: 0; }
.footer__unten a { text-decoration: none; transition: color .2s; }
.footer__unten a:hover { color: var(--rot); }
.footer__unten .col:last-child { justify-content: flex-end; }
.footer__unten .col:nth-child(2) { justify-content: center; }
.footer__unten img { width: 220px; }
.footer__social a { margin-right: 14px; font-size: 20px; text-decoration: none; }
.footer__social a:hover { color: var(--rot); }


/* 8 Responsive -------------------------------------------------------- */
@media (max-width: 1024px) {
	h1, h2 { font-size: 36px; line-height: 42px; }
	.hero h1 { font-size: 48px; line-height: 58px; }
	.nav { gap: 20px; }
	.nav a { font-size: 14px; }
	.header__logo img { width: 200px; }
	.zahlen__wert { font-size: 60px; }
}

@media (max-width: 767px) {
	body { font-size: 17px; }
	h1, h2 { font-size: 28px; line-height: 34px; }
	.band { padding: 50px 0; }
	.hero { min-height: calc(100svh - 72px); }
	.hero h1 { font-size: 34px; line-height: 42px; }
	.hero__banner { margin-top: 60px; }

	.header__inner { height: 72px; }
	.header__logo img { width: 170px; }
	.header__tel { display: none; }
	.menu-btn { display: block; }
	.nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		gap: 0;
		padding: 10px var(--rand) 20px;
		background: var(--weiss);
		box-shadow: 0 8px 12px rgba(0, 0, 0, .15);
	}
	.nav.is-open { display: flex; }

	.row { flex-direction: column; min-height: 0; }
	.col, .col-25, .col-33, .col-50, .col-66, .col-100 { flex-basis: auto; width: 100%; padding: 15px; }
	.col--text { padding: 15px; }
	.col--foto { min-height: 280px; }
	.person { flex-direction: column; align-items: flex-start; }
	.formular { grid-template-columns: 1fr; gap: 24px; }
	.footer__unten .col, .footer__unten .col:nth-child(2), .footer__unten .col:last-child { justify-content: flex-start; }
}