/* ==========================================================
   AutoGalerie Oberhausen – schlankes, responsives Stylesheet
   Keine externen Ressourcen (Schriften lokal eingebunden)
   ========================================================== */

/* ---------- Schriften (lokal) ---------- */
@font-face { font-family: 'Montserrat'; font-weight: 300; font-style: normal; font-display: swap; src: url('../fonts/eldorado/Montserrat-Light.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/eldorado/Montserrat-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/eldorado/Montserrat-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/eldorado/Montserrat-Bold.ttf') format('truetype'); }

/* Font Awesome 4.3 – nur die benötigten Icons */
@font-face {
	font-family: 'FontAwesome';
	font-weight: normal;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/awesome/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),
	     url('../fonts/awesome/fontawesome-webfont.woff?v=4.3.0') format('woff'),
	     url('../fonts/awesome/fontawesome-webfont.ttf?v=4.3.0') format('truetype');
}
.fa {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.fa-fw { width: 1.28571429em; text-align: center; }
.fa-arrow-down:before    { content: "\f063"; }
.fa-male:before          { content: "\f183"; }
.fa-map-marker:before    { content: "\f041"; }
.fa-phone:before         { content: "\f095"; }
.fa-envelope:before      { content: "\f0e0"; }
.fa-globe:before         { content: "\f0ac"; }
.fa-instagram:before     { content: "\f16d"; }
.fa-arrow-left:before    { content: "\f060"; }

/* ---------- Variablen & Reset ---------- */
:root {
	--rot: #d32929;
	--rot-dunkel: #a91f1f;
	--text: #253238;
	--text-hell: #5b6770;
	--linie: #e6e8ea;
	--hintergrund: #ffffff;
	--hintergrund-grau: #f6f7f8;
	--max: 1170px;
	--max-text: 820px;
	--gutter: clamp(16px, 4vw, 32px);
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 16px;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--hintergrund);
	color: var(--text);
	font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.65;
}

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--rot); }
:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation: none !important; transition: none !important; }
}

/* ---------- Hero (Startseite) ---------- */
.hero {
	width: 100%;
	padding: clamp(40px, 8vw, 96px) var(--gutter) clamp(44px, 7vw, 80px);
	text-align: center;
}

.hero .logo {
	display: block;
	width: min(100%, 620px);
	height: auto;
	margin: 0 auto clamp(36px, 7vw, 64px);
}

.hero h1 {
	margin: 0 0 .8em;
	color: var(--rot);
	font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.75rem);
	font-weight: 400;
	line-height: 1.25;
	overflow-wrap: break-word;
}

.hero .hinweis {
	max-width: 36em;
	margin: 0 auto clamp(32px, 5vw, 44px);
	color: var(--text-hell);
	line-height: 1.7;
	text-wrap: balance;
	font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
}

.aktionen {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 20px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 12px 28px;
	border: 2px solid var(--rot);
	border-radius: 999px;
	font-weight: 600;
	font-size: 1.05rem;
	text-decoration: none;
	transition: background-color .2s, color .2s, transform .1s;
}
.btn:active { transform: scale(.98); }
.btn-primaer { background: var(--rot); color: #fff; }
.btn-primaer:hover, .btn-primaer:focus-visible { background: var(--rot-dunkel); border-color: var(--rot-dunkel); color: #fff; }
.btn-sekundaer { background: #fff; color: var(--rot); }
.btn-sekundaer:hover, .btn-sekundaer:focus-visible { background: var(--rot); color: #fff; }

/* 404-Seite: Hero füllt den Platz zwischen Logo und Fußzeile */
.fehler { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
.fehler .logo { margin-bottom: clamp(24px, 5vw, 44px); }
.fehlercode {
	margin: 0;
	color: var(--rot);
	font-size: clamp(4.5rem, 3rem + 9vw, 9rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .04em;
	opacity: .15;
}
.fehler h1 { margin-top: -.35em; text-wrap: balance; }

/* Smartphone: Buttons in voller Breite (mit dem Daumen gut erreichbar) */
@media (max-width: 520px) {
	.aktionen { flex-direction: column; align-items: stretch; }
	.btn { width: 100%; }
}

/* ---------- Kontaktbereich ---------- */
.kontakt {
	flex: 1 0 auto;
	background: var(--hintergrund-grau);
	border-top: 1px solid var(--linie);
	padding: clamp(28px, 5vw, 56px) var(--gutter);
}

.kontakt-grid {
	max-width: var(--max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 14px;
}

.kontakt-item {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
	min-height: 72px;
	padding: 14px 20px;
	background: #fff;
	border: 1px solid var(--linie);
	border-radius: 12px;
	color: var(--text);
	text-decoration: none;
	transition: border-color .2s, box-shadow .2s, transform .1s;
}
.kontakt-item:hover,
.kontakt-item:focus-visible {
	color: var(--text);
	border-color: var(--rot);
	box-shadow: 0 4px 14px rgba(211, 41, 41, .12);
}
.kontakt-item:active { transform: scale(.99); }

.kontakt-item .text { min-width: 0; overflow-wrap: break-word; line-height: 1.45; }
.kontakt-item strong {
	display: block;
	margin-bottom: 2px;
	color: var(--text-hell);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--rot);
	color: #fff;
	font-size: 17px;
}

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

/* Smartphone: Adresse und Telefon volle Breite, E-Mail/Instagram/Website als Kacheln nebeneinander */
@media (max-width: 520px) {
	.kontakt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.kontakt-item { grid-column: 1 / -1; }
	.kontakt-item.kompakt {
		grid-column: auto;
		flex-direction: column;
		justify-content: center;
		gap: 10px;
		padding: 16px 6px;
		text-align: center;
	}
	.kontakt-item.kompakt strong { margin: 0; font-size: .7rem; }
	/* Text bleibt für Screenreader erhalten, ist optisch aber ausgeblendet */
	.kontakt-item.kompakt .detail {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

/* ---------- Fußzeile ---------- */
.footer {
	flex-shrink: 0;
	padding: 20px var(--gutter);
	background: #fff;
	border-top: 1px solid var(--linie);
	font-size: .9rem;
}
.footer nav {
	max-width: var(--max);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 28px;
}
.footer a { text-decoration: none; padding: 6px 0; }
.footer a:hover, .footer a:focus-visible { color: var(--rot); text-decoration: underline; }

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
.seitenkopf {
	padding: 20px var(--gutter);
	border-bottom: 1px solid var(--linie);
	background: #fff;
}
.seitenkopf-inner {
	max-width: var(--max-text);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
}
.seitenkopf .marke {
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
	color: var(--text);
}
.seitenkopf .marke span { color: var(--rot); }
.zurueck {
	font-weight: 600;
	text-decoration: none;
	color: var(--rot);
	padding: 6px 0;
}
.zurueck:hover, .zurueck:focus-visible { text-decoration: underline; }

.rechtstext {
	flex: 1 0 auto;
	width: 100%;
	max-width: var(--max-text);
	margin: 0 auto;
	padding: clamp(28px, 5vw, 56px) var(--gutter);
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}
.rechtstext h1 {
	margin: 0 0 1.2em;
	color: var(--rot);
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
	line-height: 1.2;
}
.rechtstext h2 {
	margin: 2.2em 0 .6em;
	padding-top: .4em;
	border-top: 1px solid var(--linie);
	font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem);
	line-height: 1.3;
}
.rechtstext h3 {
	margin: 1.6em 0 .4em;
	font-size: clamp(1.02rem, .98rem + .3vw, 1.15rem);
	line-height: 1.35;
}
.rechtstext h4 {
	margin: 1.2em 0 .3em;
	font-size: 1rem;
}
.rechtstext p, .rechtstext ul { margin: 0 0 1em; }
.rechtstext ul { padding-left: 1.3em; }
.rechtstext li { margin-bottom: .5em; }
.rechtstext a { color: var(--rot); }
.rechtstext a:hover, .rechtstext a:focus-visible { color: var(--rot-dunkel); }
.rechtstext .stand { margin-top: 2.5em; color: var(--text-hell); font-size: .9rem; }

/* ---------- Kleine Geräte ---------- */
@media (max-width: 480px) {
	body { font-size: .97rem; }
	.kontakt-item { padding: 12px 16px; gap: 14px; }
	.footer nav { flex-direction: column; align-items: center; gap: 2px; }
}

/* ---------- Druck ---------- */
@media print {
	.aktionen, .footer, .seitenkopf { display: none; }
}