/*
Theme Name: Emmen Verleih
Description: Schlankes Child-Theme von Twenty Twenty-Five für emmenverleih.ch (ersetzt Divi). Optik nach dem bisherigen Divi-Layout.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 8.1
Text Domain: emmenverleih
*/

:root {
	--ev-navy: #063661;
	--ev-blau: #3050d1;
	--ev-orange: #faa152;
	--ev-grau: #f5f6f7;
	--ev-breite: 1080px;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
.wp-site-blocks { padding: 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
img { max-width: 100%; height: auto; }

/* ---------- Kopfzeile ---------- */
.ev-kopf { background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .08); position: sticky; top: 0; z-index: 50; padding-block: 0; }
.ev-kopf__innen { min-height: 80px; gap: 20px; }
.ev-logo, .ev-logo a { font-family: var(--wp--preset--font-family--josefin); font-weight: 700; font-size: 26px; color: var(--ev-navy); text-decoration: none; margin: 0; }
.ev-logo a:hover { color: var(--ev-orange); }
.ev-menu { font-family: var(--wp--preset--font-family--opensans); font-size: 14px; font-weight: 600; gap: 26px; }
.ev-menu a { color: rgba(0, 0, 0, .6); text-decoration: none; }
.ev-menu a:hover { color: var(--ev-blau); }
body.admin-bar .ev-kopf { top: 32px; }

/* ---------- Abschnitte allgemein ---------- */
.ev-start { margin: 0; }
.ev-abschnitt { padding-block: 90px; position: relative; }
.ev-start > .ev-abschnitt { margin-block-start: 0 !important; }
.ev-titel { font-size: var(--wp--preset--font-size--x-large); margin-bottom: .4em; }
.ev-einleitung { font-family: var(--wp--preset--font-family--josefin); font-weight: 600; font-size: 18px; max-width: 800px; line-height: 1.9; }

/* ---------- Kopfbereich (Hero) ---------- */
.ev-hero {
	padding-block: 120px 0;
	background:
		linear-gradient(118deg, #063661 0%, rgba(43, 78, 136, .67) 100%),
		url(/wp-content/uploads/2024/04/car-dealer-35.jpg) center / cover no-repeat;
	overflow: hidden;
}
.ev-hero::after { /* orange Schräge unten */
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
	background: var(--ev-orange);
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
	z-index: 0;
}
.ev-hero > * { position: relative; z-index: 1; }
.ev-hero__titel { color: var(--ev-orange); font-size: var(--wp--preset--font-size--xx-large); font-weight: 700; line-height: 1.45; margin: 0; }
.ev-hero__unter { color: var(--ev-orange); font-family: var(--wp--preset--font-family--josefin); font-weight: 700; font-size: 24px; margin-top: 2.2em; }

/* Laufband mit Produktbildern */
.ev-band { margin-top: 60px; overflow: hidden; max-width: none !important; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ev-band__spur { display: flex; gap: 70px; width: max-content; animation: ev-lauf 32s linear infinite; padding-bottom: 60px; }
.ev-band:hover .ev-band__spur { animation-play-state: paused; }
.ev-band__item { margin: 0; text-align: center; width: 220px; }
.ev-band__item img { height: 200px; width: auto; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .25)); }
.ev-band__item figcaption { font-size: 22px; color: #333; margin-top: 8px; }
@keyframes ev-lauf { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ev-band__spur { animation: none; } .ev-band { overflow-x: auto; } }

/* ---------- Verleihartikel ---------- */
.ev-artikel-abschnitt { background: var(--ev-grau); padding-top: 110px; }
.ev-artikel-abschnitt::before { /* graue Schräge oben */
	content: ""; position: absolute; inset: 0 0 auto 0; height: 90px;
	background: linear-gradient(176deg, #e8e8e8 0 48%, transparent 50%);
}

/* Karussell (Artikel und Kundenstimmen) */
.ev-karussell { position: relative; }
.ev-karussell__pfeile { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 16px; }
.ev-pfeil { width: 34px; height: 34px; border: 1px solid #bbb; background: #fff; color: #555; font-size: 22px; line-height: 1; border-radius: 3px; cursor: pointer; }
.ev-pfeil:hover { border-color: var(--ev-blau); color: var(--ev-blau); }
.ev-karussell__spur { display: flex; gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 10px; }
.ev-karussell__spur::-webkit-scrollbar { display: none; }
.ev-karussell__spur > * { scroll-snap-align: start; flex: 0 0 calc((100% - 90px) / 4); }

.ev-karte { display: flex; flex-direction: column; align-items: flex-start; }
.ev-artikel .ev-karussell__spur { align-items: flex-start; }
.ev-karte__bild { display: flex; align-items: center; justify-content: center; width: 100%; height: 300px; }
.ev-karte__bild img { max-height: 100%; width: auto; object-fit: contain; }
.ev-karte__titel { font-family: var(--wp--preset--font-family--opensans); font-weight: 400; font-size: 19px; line-height: 1.3; margin: 14px 0 18px; }
.ev-karte__titel a { color: #333; text-decoration: none; }
.ev-knopf-rahmen { display: inline-block; border: 1px solid #333; padding: 6px 12px; font-size: 12px; text-transform: uppercase; color: #333; text-decoration: none; }
.ev-knopf-rahmen:hover { background: #333; color: #fff; }

/* Reservationswege */
.ev-reservation__titel { font-family: var(--wp--preset--font-family--opensans); font-weight: 400; font-size: 30px; margin-top: 80px; }
.ev-wege { margin-top: 50px; text-align: center; }
.ev-weg h3 { font-size: 26px; font-weight: 600; margin: 0; }
.ev-weg h3::before { /* Symbol über dem Titel */
	content: ""; display: block; width: 64px; height: 64px; margin: 0 auto 30px; background: var(--ev-blau); opacity: .12;
	-webkit-mask: var(--ev-symbol) center / contain no-repeat; mask: var(--ev-symbol) center / contain no-repeat;
}
.ev-weg p { font-family: var(--wp--preset--font-family--josefin); font-weight: 600; margin: 4px 0 30px; }
.ev-knopf-hell .wp-block-button__link { background: #ececee; color: var(--ev-blau); font-size: 14px; padding: 20px 32px 18px; }
.ev-knopf-hell .wp-block-button__link:hover { background: var(--ev-blau); color: #fff; }
.ev-weg--telefon { --ev-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E"); }
.ev-weg--whatsapp { --ev-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.3-.7-2.8-1.1-4.5-3.9-4.7-4.1-.1-.2-1.1-1.5-1.1-2.8s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.9 2.1c.1.2.1.3 0 .5l-.3.5-.4.4c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.3.1.5.1.6-.1l.9-1.1c.2-.3.4-.2.7-.1l2 1c.3.1.5.2.5.3.1.2.1.7-.2 1.3z'/%3E%3C/svg%3E"); }
.ev-weg--online { --ev-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-7v2h3v2H7v-2h3v-2H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm1 2v9h16V6z'/%3E%3C/svg%3E"); }

/* ---------- Kundenstimmen ---------- */
.ev-stimmen-abschnitt { background: #fff; }
.ev-stimmen-abschnitt > .ev-titel, .ev-stimmen-abschnitt > .ev-einleitung { max-width: 800px; margin-inline: auto; }
.ev-stimmen { margin-top: 40px; }
.ev-stimmen .ev-karussell__spur > * { flex-basis: calc((100% - 60px) / 3); }
.ev-stimme { margin: 0; padding: 30px 20px 20px; border: 1px solid #eee; border-radius: 10px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.ev-stimme__sterne { color: #f5b301; letter-spacing: 2px; font-size: 18px; }
.ev-stimme__name { font-style: normal; font-weight: 700; color: #222; font-size: 19px; margin: 2px 0 -12px; position: relative; z-index: 1; }
.ev-stimme__text { position: relative; background: #f7f8fd; border: 1px solid #eceef6; border-radius: 6px; padding: 34px 20px 20px; margin: 0; font-size: 15px; line-height: 1.75; width: 100%; box-sizing: border-box;
	display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.ev-stimme__text::before { content: "“"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--ev-blau); color: #fff; font: 700 24px/38px Georgia, serif; }
.ev-naehe__titel { margin-top: 90px; color: #000; }

/* ---------- Vorteile ---------- */
.ev-vorteile {
	color: #fff; padding-block: 150px;
	background:
		linear-gradient(212deg, rgba(43, 78, 136, .85) 0%, #063661 100%),
		url(/wp-content/uploads/2024/04/Car-Rental-Image-31.jpg) center / cover no-repeat;
}
.ev-vorteile::before, .ev-vorteile::after { /* Wellen oben und unten */
	content: ""; position: absolute; left: 0; right: 0; height: 80px; background-size: 100% 100%;
}
.ev-vorteile::before { top: -1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0h1440v8C1100 8 800 60 420 52 260 48 120 50 0 56z'/%3E%3Cpath fill='%23fff' fill-opacity='.5' d='M0 0h1440v30C1000 20 700 70 0 76z'/%3E%3C/svg%3E"); }
.ev-vorteile::after { bottom: -1px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%233050d1' fill-opacity='.5' d='M0 20c400 10 800 30 1440 10v50H0z'/%3E%3Cpath fill='%233050d1' d='M0 44c500 4 900 20 1440 6v30H0z'/%3E%3C/svg%3E"); }
.ev-vorteile .ev-titel { color: #fff; }
.ev-haken { list-style: none; padding: 0; margin: 60px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 60px; }
.ev-haken li { position: relative; padding-left: 47px; font-family: var(--wp--preset--font-family--josefin); font-weight: 600; font-size: 18px; line-height: 1.6; }
.ev-haken li::before { content: ""; position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%;
	background: var(--ev-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23063661' stroke-width='3' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 20px no-repeat; }

/* ---------- Kontakt ---------- */
.ev-kontakt {
	background: var(--ev-blau) url(/wp-content/uploads/2024/04/Footer-Bg.png) right top / auto 100% no-repeat;
	color: #fff; padding-block: 80px 90px;
}
.ev-kontakt .ev-titel { color: #fff; margin-bottom: 1.2em; }
.ev-kontakt__spalten { gap: 60px; }
.ev-formular { display: grid; gap: 20px; }
.ev-formular__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.ev-formular input[type=text], .ev-formular input[type=email], .ev-formular textarea {
	width: 100%; box-sizing: border-box; border: 0; border-radius: 0; background: rgba(255, 255, 255, .9);
	padding: 16px; font: 700 16px var(--wp--preset--font-family--josefin); color: #333;
}
.ev-formular ::placeholder { color: rgba(104, 109, 131, .6); }
.ev-formular textarea { min-height: 150px; resize: vertical; }
.ev-formular__fuss { display: flex; justify-content: flex-end; }
.ev-formular button { border: 0; cursor: pointer; padding: 18px 28px 16px; }
.ev-formular button:hover { background: #fff; color: var(--ev-blau); }
.ev-formular__hinweis { font-size: 12px; opacity: .75; margin: 0; }
.ev-formular__hinweis a { color: #fff; }
.ev-honig { position: absolute !important; left: -9999px; }
.ev-meldung { padding: 14px 18px; font-weight: 600; margin: 0 0 20px; }
.ev-meldung--ok { background: #e7f6ea; color: #155724; }
.ev-meldung--fehler { background: #fde8e8; color: #8a1c1c; }

.ev-kontaktdaten { list-style: none; padding: 0; margin: 0; display: grid; gap: 30px; }
.ev-kontaktdaten li { position: relative; padding-left: 47px; font-family: var(--wp--preset--font-family--josefin); font-weight: 600; font-size: 18px; line-height: 32px; }
.ev-kontaktdaten a { color: #fff; text-decoration: none; }
.ev-kontaktdaten a:hover { text-decoration: underline; }
.ev-kontaktdaten li::before { content: ""; position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: #fff; }
.ev-kontaktdaten li::after { content: ""; position: absolute; left: 8px; top: 8px; width: 16px; height: 16px; background: #006ce0; -webkit-mask: var(--ev-symbol) center / contain no-repeat; mask: var(--ev-symbol) center / contain no-repeat; }
.ev-kd--mail { --ev-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h20v14H2zm2 2v.5l8 5 8-5V7z'/%3E%3C/svg%3E"); }
.ev-kd--telefon { --ev-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E"); }
.ev-kd--ort { --ev-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
.ev-karte-link { margin: 40px 0 0 200px; }
.ev-karte-link a { display: block; width: 96px; height: 96px; background: #7ebec5;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2z'/%3E%3Cpath d='M9 4v14M15 6v14'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2z'/%3E%3Cpath d='M9 4v14M15 6v14'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- Fusszeile ---------- */
.ev-fuss { background: #222; color: #bbb; padding-block: 60px 0; font-size: 14px; }
.ev-fuss h3 { color: #2ea3f2; font-family: var(--wp--preset--font-family--opensans); font-weight: 400; font-size: 22px; margin-bottom: .6em; }
.ev-fuss a { color: #fff; text-decoration: none; }
.ev-fuss a:hover { color: var(--ev-orange); }
.ev-fuss__liste { padding-left: 1.1em !important; margin: 0; }
.ev-fuss__liste li { list-style: disc; margin: 0 0 6px; }
.ev-fuss__liste li::marker { color: #2ea3f2; }
.ev-fuss__unten { margin: 40px calc(50% - 50vw) 0 !important; max-width: none !important; padding: 15px max(20px, calc(50vw - var(--ev-breite) / 2)); background: #1f1f1f; color: #666; }

/* ---------- Beiträge (Verleihartikel) ---------- */
.single .wp-block-post-title { font-size: 30px; font-weight: 500; font-family: var(--wp--preset--font-family--opensans); color: #333; }
.single .wp-block-post-featured-image { aspect-ratio: auto !important; height: auto !important; }
.single .wp-block-post-featured-image img { height: auto !important; max-height: 560px; width: auto !important; max-width: 100%; object-fit: contain !important; }
.single .wp-block-post-content :is(h2, h3) { font-family: var(--wp--preset--font-family--opensans); font-weight: 500; font-size: 26px; color: #333; }

/* ---------- Mobil ---------- */
@media (max-width: 980px) {
	.ev-karussell__spur > * { flex-basis: calc((100% - 30px) / 2); }
	.ev-stimmen .ev-karussell__spur > * { flex-basis: calc((100% - 30px) / 2); }
	.ev-haken { grid-template-columns: repeat(2, 1fr); }
	.ev-karte-link { margin-left: 0; }
}
@media (max-width: 600px) {
	.ev-abschnitt { padding-block: 60px; }
	.ev-hero { padding-top: 70px; }
	.ev-hero__unter { font-size: 19px; }
	.ev-band__item { width: 150px; }
	.ev-band__item img { height: 130px; }
	.ev-band__spur { gap: 40px; }
	.ev-karussell__spur > *, .ev-stimmen .ev-karussell__spur > * { flex-basis: 82%; }
	.ev-karte__bild { height: 240px; }
	.ev-haken { grid-template-columns: 1fr; gap: 24px; }
	.ev-formular__reihe { grid-template-columns: 1fr; }
	.ev-reservation__titel { font-size: 24px; margin-top: 50px; }
	body.admin-bar .ev-kopf { top: 0; }
}