/*
Theme Name: Pokorny Premium
Theme URI: https://www.premium-automobile.at/
Description: Dunkles, edles WordPress-Theme für Pokorny Premium Automobile (Bockfließ). Startseite, Fahrzeug-Übersicht mit Filter/Sortierung, Fahrzeug-Detailseiten, Über mich, Verkaufte Fahrzeuge, Ankauf und Kontakt. Fahrzeugdaten kommen vom Plugin „Pokorny Vehicles".
Author: Pokorny Premium Automobile
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: pokorny-premium
*/

html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
	margin: 0;
	background: #0a0a0a;
	color: #f0ede6;
	font-family: 'Archivo', sans-serif;
	-webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
a { color: #f0ede6; text-decoration: none; }
a:hover { color: #c9c5bc; }
img { max-width: 100%; }
::selection { background: rgba(240,237,230,0.25); }
input::placeholder, textarea::placeholder { color: #c49a4e; }

@keyframes ppa-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Reveal-on-Scroll Grundzustand (wird per JS aktiviert) */
.ppa-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1); }
.ppa-reveal.ppa-in { opacity: 1; transform: none; }

@media (max-width: 1280px) { .ppa-hd-phone { display: none !important; } }
@media (max-width: 1020px) { .ppa-hd-sub { display: none !important; } }
/* Mobile Navigation: Burger-Menü statt horizontaler Leiste */
@media (max-width: 940px) {
	.ppa-nav { display: none !important; }
	.ppa-burger { display: flex !important; }
	.ppa-mobile-menu.open { display: flex !important; }
}
/* Mobile: schmalere Seitenränder + kompaktere Sektionen */
@media (max-width: 700px) {
	main section { padding-left: 20px !important; padding-right: 20px !important; padding-top: min(60px, 18vw) !important; padding-bottom: min(60px, 18vw) !important; }
	main section[style*="padding:160px"], main section[style*="padding: 160px"] { padding-top: 100px !important; }
	main section[style*="padding:140px"], main section[style*="padding: 140px"] { padding-top: 100px !important; }
	main section[style*="padding:0 "] { padding-top: 0 !important; padding-bottom: 0 !important; }
	main section[style*="height:100vh"] { padding-top: 0 !important; padding-bottom: 0 !important; }
	main section[data-vehicle-list] { padding: 0 !important; }
	footer > div { padding-left: 20px !important; padding-right: 20px !important; }
	/* Der Spalten-Grid im Footer nutzt den Hintergrund als Hairline — kein Padding, sonst grauer Rahmen */
	footer .ppa-grid-4 { padding: 0 !important; }
	.ppa-hd-wa { display: none !important; }
	/* Überschriften: kleiner skalieren — ohne Silbentrennung, Umbruch nur im Notfall */
	main h1 { font-size: clamp(22px, 6.8vw, 34px) !important; font-stretch: 105% !important; letter-spacing: 0 !important; overflow-wrap: break-word; hyphens: none; }
	main h2 { font-size: clamp(20px, 5.8vw, 28px) !important; font-stretch: 105% !important; letter-spacing: 0 !important; overflow-wrap: break-word; hyphens: none; }
	main h1 + p, main h2 + p { max-width: 100% !important; }
	main section span { overflow-wrap: break-word; }
	/* Nummerierte Zeilen (Der Weg / Werte): auf 2 Spalten umbrechen,
	   Beschreibung in voller Breite darunter statt rechts abgeschnitten */
	main div[style*="120px 1fr 1.4fr"], main div[style*="90px 1fr 1.5fr"] { grid-template-columns: 48px 1fr !important; row-gap: 10px !important; }
	main div[style*="120px 1fr 1.4fr"] > p, main div[style*="90px 1fr 1.5fr"] > p { grid-column: 1 / -1; margin: 0 !important; }
	main div[style*="120px 1fr 1.4fr"] > span:first-child, main div[style*="90px 1fr 1.5fr"] > span:first-child { font-size: 24px !important; }
}
@media (max-width: 900px) {
	.ppa-grid-2 { grid-template-columns: 1fr !important; }
	.ppa-grid-3 { grid-template-columns: 1fr 1fr !important; }
	.ppa-grid-4 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 620px) {
	.ppa-grid-3, .ppa-grid-4 { grid-template-columns: 1fr !important; }
}

/* Fahrzeug-Listenzeile: Layout zentral hier, damit die Zeilen kompakt bleiben */
.ppa-row {
	display: grid !important;
	grid-template-columns: 50px 200px minmax(0, 1.6fr) minmax(0, 1fr) 170px 30px;
	gap: clamp(14px, 2vw, 30px);
	align-items: center;
}
.ppa-row .ppa-row-photo { width: 200px; max-width: 100%; }
.ppa-row:hover { background: #131312; }
/* Kaputtes/fehlendes Bild: dezente Fläche statt Broken-Icon */
.ppa-noimg::after {
	content: "FOTO AUF ANFRAGE";
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
	font-family: 'IBM Plex Mono', monospace; font-size: 10px;
	letter-spacing: 0.18em; color: #5f5d57; background: #111110;
}
@media (max-width: 1100px) {
	.ppa-row { grid-template-columns: 150px minmax(0, 1.6fr) 150px !important; }
	.ppa-row .ppa-row-photo { width: 150px; }
	.ppa-row > :nth-child(1), .ppa-row > :nth-child(4), .ppa-row > :nth-child(6) { display: none; }
}
@media (max-width: 640px) {
	.ppa-row { grid-template-columns: 110px minmax(0, 1fr) !important; padding: 16px 20px !important; }
	.ppa-row .ppa-row-photo { width: 110px; }
	.ppa-row > :nth-child(5) { grid-column: 2; justify-self: start; align-items: flex-start !important; }
}