/* Immobilienwart – leichtere Gestaltung und saisonale Blickfänge (17.10.2026)
   Lädt nach immobilienwart.css. Alle Bewegungen sind Dekoration: aria-hidden,
   ohne Klickfläche, bei „Bewegung reduzieren“ aus. Skript: assets/js/saison.js */

:root {
	--iw-radius: 16px;
	--iw-shadow: 0 1px 2px rgba(30, 43, 50, .05), 0 10px 30px rgba(30, 43, 50, .08);
}

/* ---------- Buttons weicher ---------- */
.wp-block-button__link { border-radius: 999px !important; padding: .85rem 1.5rem; }

/* ---------- Hero: Foto sichtbar, Text bleibt kontraststark ---------- */
.iw-hero.wp-block-cover { overflow: hidden; }
.iw-hero.wp-block-cover .wp-block-cover__background {
	opacity: 1 !important;
	background: linear-gradient(90deg, rgba(20, 32, 38, .92) 0%, rgba(20, 32, 38, .8) 50%, rgba(20, 32, 38, .32) 100%) !important;
}
@media (max-width: 781px) {
	.iw-hero.wp-block-cover .wp-block-cover__background { background: linear-gradient(180deg, rgba(20, 32, 38, .84) 0%, rgba(20, 32, 38, .9) 100%) !important; }
}
/* Welle am unteren Rand statt harter Kante */
.iw-hero.wp-block-cover::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; pointer-events: none;
	height: clamp(22px, 4vw, 54px); background: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30C180 6 360 0 540 14s360 40 540 34 270-26 360-30V60H0z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30C180 6 360 0 540 14s360 40 540 34 270-26 360-30V60H0z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
.iw-hero.wp-block-cover + * { margin-block-start: 0 !important; }
.iw-hero:has(+ .iw-bg-teal)::after { background: var(--wp--preset--color--accent-1); }
.iw-hero:has(+ .iw-bg-grey)::after { background: var(--wp--preset--color--accent-5); }

/* ---------- Abschnitte heller ---------- */
.iw-bg-grey { background: linear-gradient(180deg, #F1F8F8 0%, #F7FAF9 100%); }

/* ---------- Leistungskarten mit Symbol ---------- */
.iw-service {
	background: #fff; border: 1px solid var(--iw-line); border-top: 1px solid var(--iw-line);
	border-radius: var(--iw-radius); padding: 1.3rem 1.3rem 1.1rem !important; box-shadow: var(--iw-shadow);
}
.iw-service h3::before {
	content: ""; display: block; width: 46px; height: 46px; margin-bottom: .75rem; border-radius: 14px;
	background: #E6F5F7 var(--ic, none) center / 24px no-repeat;
}
.iw-service:has(a[href*="hausmeisterservice"]) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317707C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2.4-.6-.6-2.4z'/%3E%3C/svg%3E"); }
.iw-service:has(a[href*="winterdienst"]) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317707C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7M9 4l3 2 3-2M9 20l3-2 3 2'/%3E%3C/svg%3E"); }
.iw-service:has(a[href*="gruenflaechenpflege"]) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317707C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20c0-9 6-15 15-15 0 9-6 15-15 15zM5 20l8-8'/%3E%3C/svg%3E"); }
.iw-service:has(a[href*="aussenreinigung"]) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317707C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2l-4 10M6 12h10l2 9H4zM8.5 16v5M12.5 16v5'/%3E%3C/svg%3E"); }
.iw-service:has(a[href*="treppenhausreinigung"]) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317707C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h5v-4h4v-4h4V8h5'/%3E%3C/svg%3E"); }
.iw-service:has(a[href*="entruempelung"]) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317707C' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 7l9-4 9 4v10l-9 4-9-4zM3 7l9 4 9-4M12 11v10'/%3E%3C/svg%3E"); }
@media (hover: hover) {
	.iw-service { transition: transform .2s, box-shadow .2s; }
	.iw-service:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(30, 43, 50, .06), 0 16px 34px rgba(30, 43, 50, .12); }
}

/* ---------- Saisonale Teilchen im Kopfbild (Blätter, Schnee, Blüten) ---------- */
.iw-hero-plain { position: relative; overflow: hidden; }
.iw-hero-plain > .iw-wide { position: relative; z-index: 2; }
.iw-saison-flug { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.iw-saison-teil {
	position: absolute; top: -48px; left: var(--x); width: var(--s); height: var(--s); opacity: 0;
	animation: iw-fall-y var(--t) linear var(--v) 2 forwards; will-change: transform;
}
.iw-saison-teil svg { display: block; width: 100%; height: 100%; animation: iw-pendel calc(var(--t) / 3) ease-in-out var(--v) infinite alternate; }
.iw-saison-winter .iw-saison-teil svg { animation-name: iw-pendel-sanft; }
@keyframes iw-fall-y { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .92; } 88% { opacity: .92; } 100% { transform: translateY(var(--h)); opacity: 0; } }
@keyframes iw-pendel { from { transform: translateX(-24px) rotate(-40deg); } to { transform: translateX(24px) rotate(40deg); } }
@keyframes iw-pendel-sanft { from { transform: translateX(-10px); } to { transform: translateX(10px); } }

/* ---------- Saisonfigur: Kürbis rollt herein, Schneemann taucht auf ---------- */
.iw-saison-figur {
	position: absolute; z-index: 3; right: clamp(16px, 7vw, 110px); bottom: calc(clamp(22px, 4vw, 54px) - 4px);
	width: clamp(42px, 5vw, 66px); pointer-events: none; animation: iw-rollen 2.6s cubic-bezier(.22, .8, .3, 1) .6s both;
}
.iw-saison-figur svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); }
.iw-saison-figur.iw-figur-schneemann { animation: iw-plopp .7s ease-out .6s both; }
.iw-saison-figur.iw-ruhig { animation: none; }
.iw-hero-plain .iw-saison-figur { bottom: 10px; }
@keyframes iw-rollen { 0% { transform: translateX(70vw) rotate(900deg); } 80% { transform: translateX(-8px) rotate(-10deg); } 90% { transform: translateX(3px) rotate(4deg); } 100% { transform: none; } }
@keyframes iw-plopp { from { transform: translateY(24px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 781px) {
	.iw-hero.iw-hat-figur { padding-bottom: calc(clamp(56px, 8vw, 104px) + 40px); }
	.iw-hero-plain .iw-saison-figur { top: 10px; bottom: auto; width: 40px; }
}

/* ---------- Szenen je Leistung (Mülltonne, Glas, Winterdienst, Hecke, Pflaster, Räumung) ----------
   Die Bewegung rechnet saison.js Bild für Bild (requestAnimationFrame), damit sie auf jedem
   Gerät und Browser gleich läuft. Hier stehen nur Rahmen, Text und Knopf. */
.iw-szene-band { padding-top: clamp(20px, 3vw, 32px) !important; padding-bottom: 0 !important; }
.iw-szene { margin: 1.2rem 0 .4rem; max-width: 760px; }
.iw-szene-band .iw-szene { margin: 0; }
.iw-szene svg { display: block; width: 100%; height: auto; overflow: hidden; }
.iw-szene text { font-family: inherit; }
.iw-szene figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .9rem; margin-top: .45rem; font-size: .95rem; color: var(--wp--preset--color--accent-4); }
.iw-szene figcaption a { font-weight: 600; }
.iw-szene-knopf {
	font: inherit; font-size: .9rem; font-weight: 600; color: var(--wp--preset--color--accent-3);
	background: none; border: 0; padding: .5rem 0; min-height: 44px; cursor: pointer;
	text-decoration: underline; text-underline-offset: 3px;
}
.iw-szene-knopf:focus-visible { outline: 3px solid var(--wp--preset--color--contrast); outline-offset: 2px; }
@media (max-width: 600px) { .iw-szene .blase { display: none; } }

/* ---------- Bewegung reduzieren: alles steht, Information bleibt ---------- */
@media (prefers-reduced-motion: reduce) {
	.iw-saison-flug { display: none; }
	.iw-saison-figur { animation: none !important; }
	.iw-service:hover { transform: none; }
}
@media print { .iw-saison-flug, .iw-saison-figur, .iw-szene { display: none; } }