/*
Theme Name: EV Fahrzeuge
Theme URI: https://example.com
Author: EV Groq Updater
Description: Schlankes, eigenständiges WordPress-Theme, speziell abgestimmt auf das Plugin "EV Groq Updater" (Fahrzeug-Übersicht im Stil von ev-database.org). Bewusst minimal gehalten, damit das Filter-/Kartenraster des Plugins nicht durch Theme-Styles zerstört wird.
Version: 1.8.0
Requires PHP: 7.4
Text Domain: ev-fahrzeuge-theme
*/

/* ============================================================
   Grund-Reset & Variablen
   ============================================================ */
:root {
	--evt-farbe-text: #16211c;
	--evt-farbe-text-hell: #5c6b7a;
	--evt-farbe-rand: #e2e9e5;
	--evt-farbe-hintergrund: #f4f8f6;
	--evt-farbe-akzent: #0e8a53;
	--evt-farbe-akzent-dunkel: #0a6b40;
	--evt-farbe-akzent-hell: #e6f5ee;
	--evt-farbe-elektro: #2f80ed;
	--evt-verlauf-hero: linear-gradient(135deg, #0a6b40 0%, #0e8a53 45%, #14b89e 100%);
	--evt-breite-container: 1280px;
	--evt-radius: 12px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--evt-farbe-text);
	background: var(--evt-farbe-hintergrund);
}

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

a { color: var(--evt-farbe-akzent-dunkel); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 0.5em; color: var(--evt-farbe-text); }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

.evt-container {
	max-width: var(--evt-breite-container);
	margin: 0 auto;
	padding: 0 24px;
}

/* ============================================================
   Kopfbereich
   ============================================================ */
.evt-kopf {
	background: #fff;
	border-bottom: 1px solid var(--evt-farbe-rand);
	border-top: 4px solid transparent;
	border-image: var(--evt-verlauf-hero) 1;
	position: sticky;
	top: 0;
	z-index: 50;
}
.evt-kopf-innen {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 14px 0;
}
.evt-logo {
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--evt-farbe-text);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.evt-logo::before {
	content: "⚡";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--evt-verlauf-hero);
	color: #fff;
	font-size: 1rem;
}
.evt-logo:has(img)::before { content: none; }
.evt-logo:hover { text-decoration: none; }
.evt-logo img { max-height: 64px !important; width: auto !important; height: auto !important; max-width: none; }

/* ============================================================
   Seiteninhalt / Standard-Templates
   ============================================================ */
.evt-hauptinhalt {
	padding: 40px 0 60px;
	min-height: 50vh;
}
.evt-hauptinhalt.volle-breite { padding-top: 0; padding-bottom: 0; }

.evt-eintrags-kopf { margin-bottom: 24px; }

.evt-inhalt-karte {
	background: #fff;
	border: 1px solid var(--evt-farbe-rand);
	border-radius: var(--evt-radius);
	padding: 32px;
}

@media (max-width: 600px) {
	.evt-inhalt-karte { padding: 20px; }
}

/* ============================================================
   Footer
   ============================================================ */
.evt-footer {
	background: #0f1c17;
	color: #c4cbd4;
	margin-top: 60px;
	padding: 36px 0;
	font-size: 0.9rem;
	border-top: 3px solid var(--evt-farbe-akzent);
}
.evt-footer a { color: #6ee7b7; }
.evt-footer-innen {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	align-items: center;
}
.evt-footer-hinweis {
	color: #8892a0;
	font-size: 0.85rem;
	margin-top: 10px;
}
.evt-footer-rechtlich {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

/* --- Cookie-/Werbehinweis: fix am unteren Rand, wichtig auf Mobilgeräten --- */
.evt-cookie-hinweis {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background: #0f1c17;
	color: #e6ebe8;
	padding: 14px 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 0.85rem;
	box-shadow: 0 -4px 16px rgba(0,0,0,0.25);
}
.evt-cookie-hinweis p { margin: 0; flex: 1 1 240px; }
.evt-cookie-hinweis a { color: #6ee7b7; }
.evt-cookie-hinweis button {
	background: var(--evt-farbe-akzent);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 10px 18px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}
@media (max-width: 480px) {
	.evt-cookie-hinweis { flex-direction: column; align-items: stretch; text-align: center; }
	.evt-cookie-hinweis button { width: 100%; }
}

/* ============================================================
   Hero-/Info-Bereich der Fahrzeug-Übersichtsseite
   Erklärt Erstbesuchern in wenigen Sekunden, worum es auf der
   Seite geht. Farbverlauf passend zum Logo/Header.
   ============================================================ */
.evt-hero {
	background: var(--evt-verlauf-hero);
	color: #fff;
	padding: 52px 0 40px;
	margin-bottom: 32px;
}
.evt-hero-innen {
	max-width: 780px;
	margin: 0 auto;
	text-align: center;
}
.evt-hero-badge {
	display: inline-block;
	background: rgba(255,255,255,0.16);
	border: 1px solid rgba(255,255,255,0.35);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 999px;
	margin-bottom: 14px;
}
.evt-hero h1 {
	color: #fff;
	font-size: 2.1rem;
	margin-bottom: 10px;
}
.evt-hero-text {
	color: rgba(255,255,255,0.92);
	font-size: 1.05rem;
	max-width: 640px;
	margin: 0 auto 22px;
}
.evt-hero-punkte {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.evt-hero-punkte li {
	background: rgba(255,255,255,0.14);
	border: 1px solid rgba(255,255,255,0.28);
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
}
@media (max-width: 600px) {
	.evt-hero { padding: 36px 0 28px; }
	.evt-hero h1 { font-size: 1.6rem; }
}

/* ============================================================
   Fahrzeug-Übersichtsseite (Wrapper um den Plugin-Shortcode)
   Bewusst zurückhaltend unterhalb des Hero-Bereichs: das eigent-
   liche Grid/Filter-Design kommt aus dem Plugin (frontend.css,
   Klassen .evgu-*). Hier nur der Seitenrahmen drumherum.
   ============================================================ */
.evt-fahrzeuge-seite .evt-eintrags-kopf {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 32px;
}
.evt-fahrzeuge-seite .evt-eintrags-kopf p {
	color: var(--evt-farbe-text-hell);
	font-size: 1.05rem;
}
.evt-info-fusszeile {
	margin-top: 36px;
	padding-top: 20px;
	border-top: 1px solid var(--evt-farbe-rand);
	color: var(--evt-farbe-text-hell);
	font-size: 0.85rem;
	max-width: 820px;
}

/* ============================================================
   Einzelseite eines Fahrzeugs
   ============================================================ */
.evt-fahrzeug-titel-zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}
.evt-zurueck-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--evt-farbe-text-hell);
	margin-bottom: 16px;
}
.evt-fahrzeug-bild-gross {
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	border-radius: var(--evt-radius);
	margin-bottom: 24px;
	background: #eef1f5;
}

/* ============================================================
   Archiv-Grid für Standard-Beiträge (Blog etc.) – nicht für
   Fahrzeuge, die haben ihr eigenes Plugin-Grid.
   ============================================================ */
.evt-beitrags-liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 22px;
}
.evt-beitrags-karte {
	background: #fff;
	border: 1px solid var(--evt-farbe-rand);
	border-radius: var(--evt-radius);
	overflow: hidden;
}
.evt-beitrags-karte img { height: 160px; object-fit: cover; }
.evt-beitrags-karte-inhalt { padding: 16px; }

.evt-pagination {
	display: flex;
	gap: 8px;
	margin-top: 30px;
	flex-wrap: wrap;
}
.evt-pagination a,
.evt-pagination span {
	padding: 8px 14px;
	border: 1px solid var(--evt-farbe-rand);
	border-radius: 8px;
	background: #fff;
}
.evt-pagination .current {
	background: var(--evt-farbe-akzent);
	color: #fff;
	border-color: var(--evt-farbe-akzent);
}

/* Suchformular im Header/Sidebar, falls genutzt */
.evt-suchformular { display: flex; }
.evt-suchformular input[type="search"] {
	padding: 8px 12px;
	border: 1px solid var(--evt-farbe-rand);
	border-radius: 8px 0 0 8px;
	font-size: 0.9rem;
}
.evt-suchformular button {
	padding: 8px 14px;
	border: 1px solid var(--evt-farbe-akzent);
	background: var(--evt-farbe-akzent);
	color: #fff;
	border-radius: 0 8px 8px 0;
	cursor: pointer;
}

/* ============================================================
   Werbeflächen (AdSense o.ä.) – über den Customizer befüllt
   ============================================================ */
.evt-werbung {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	margin: 20px auto;
	text-align: center;
	/* Reserviert etwas Mindesthöhe, damit responsive Anzeigen beim Laden
	   das Layout nicht springen lassen (schlecht für Nutzer & Core Web
	   Vitals/SEO) – typische Banner-Mindesthöhe. */
	min-height: 90px;
}
@media (max-width: 600px) {
	.evt-werbung {
		min-height: 50px;
	}
}