/*
  Interaktive Formular-Visualisierungen (Entrümpelung/Umzug/Garten).
  Reines SVG + CSS-Transitions + Vanilla-JS (assets/js/visuals.js) --
  keine Animationsbibliothek, keine KI-generierten Bilder (in dieser
  Umgebung nicht verfügbar) -- stattdessen vertiefte, handgezeichnete
  Vektor-Illustration: Verläufe, weiche Schatten, Textur-Details,
  Partikel-Akzente, Feder-Timing. Farbwerte bleiben aus main.css
  abgeleitet. prefers-reduced-motion wird zentral in main.css behandelt
  (Transitions werden dort global auf 0.001ms verkürzt); Partikel-
  Keyframes werden hier zusätzlich selbst deaktiviert.
*/

:root {
	--ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-visual {
	background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: 22px 24px 18px; box-shadow: var(--shadow-sm); margin: 0 0 28px;
	position: relative; overflow: hidden;
}
.service-visual::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: radial-gradient(560px 260px at 22% 0%, rgba(31,111,120,0.07), transparent 65%);
}
.service-visual__svg { width: 100%; height: auto; display: block; position: relative; z-index: 1; overflow: visible; }
.service-visual__caption {
	margin: 14px 0 0; font-size: 0.92rem; color: var(--muted); display: flex;
	align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	position: relative; z-index: 1;
}
.service-visual__caption strong { color: var(--ink); font-family: var(--font-display); font-size: 1.08rem; }

/* --- Fahrzeug-Grundform (Entrümpelung + Umzug) --- */
.visual-vehicle-shadow { fill: rgba(13,27,36,0.12); }
.visual-vehicle-outline { fill: var(--paper-raised); stroke: var(--ink); stroke-width: 2.5; }
.visual-vehicle-window { fill: url(#fkkWindowGradient); }
.visual-vehicle-window-shine { fill: rgba(255,255,255,0.55); }
.visual-vehicle-wheel { fill: var(--ink); }
.visual-vehicle-wheel-hub { fill: var(--paper-raised); }
.visual-vehicle-divider { stroke: var(--ink); stroke-width: 2.5; }
.visual-ground { stroke: var(--line); stroke-width: 2; }
.visual-vehicle-mirror { fill: var(--ink); }

/* --- Volumenanzeige (Entrümpelung) --------------------------------------
   Neutrale, horizontale Füllstandsanzeige statt einer Fahrzeugzeichnung --
   Übergangslösung, bis ein echtes Foto des geöffneten FKK-Transporters
   vorliegt. Reagiert weiterhin auf "fuellgrad"; dieselben Füllwerte
   (0.28/0.55/0.8/1/0.55) wie zuvor, keine Preislogik berührt. --- */
.volume-gauge { position: relative; z-index: 1; }
.volume-gauge__levels {
	display: flex; justify-content: space-between; gap: 6px; margin-bottom: 10px;
	font-size: 0.82rem; font-weight: 650; color: var(--muted);
}
.volume-gauge__level { transition: color var(--dur-fast) var(--ease); }
.volume-gauge__level.is-active { color: var(--accent); }
.volume-gauge__track {
	position: relative; height: 14px; border-radius: 999px; background: var(--paper-muted);
	overflow: hidden; box-shadow: inset 0 1px 2px rgba(13,27,36,0.08);
}
.volume-gauge__fill {
	height: 100%; width: 100%; border-radius: 999px; transform: scaleX(0); transform-origin: left;
	background: linear-gradient(90deg, var(--accent-2), var(--accent));
	transition: transform 700ms var(--ease), background 300ms var(--ease);
}
.volume-gauge__fill--warning { background: linear-gradient(90deg, #d98b85, var(--error)); }

.visual-box {
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0.5) translateY(-34px) rotate(-10deg);
	opacity: 0;
	transition: transform 560ms var(--ease-pop), opacity 380ms var(--ease);
	filter: drop-shadow(0 3px 4px rgba(13,27,36,0.18));
}
.visual-box-fold { stroke: rgba(13,27,36,0.28); stroke-width: 1.4; fill: none; }
.visual-box--warm .visual-box-face { fill: url(#fkkBoxWarmGradient); }
.visual-box--alt .visual-box-face { fill: url(#fkkBoxAltGradient); }
.visual-box:not(.visual-box--warm):not(.visual-box--alt) .visual-box-face { fill: url(#fkkBoxGradient); }
.visual-box.is-loaded { transform: scale(1) translateX(0) rotate(0deg); opacity: 1; }

/* --- Hecke-Fortschritt (Gartenservice, allgemein) --- */
.visual-hedge-bar {
	fill: url(#fkkHedgeGradient);
	transform-box: fill-box;
	transform-origin: bottom;
	transition: transform 900ms var(--ease), fill 900ms var(--ease);
}
.visual-hedge-bar.is-neat { fill: url(#fkkHedgeNeatGradient); }
.visual-hedge-ground { stroke: var(--line); stroke-width: 2; }
.visual-hedge-pot { fill: rgba(13,27,36,0.06); }
.visual-hedge-trimline {
	stroke: var(--accent-warm); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: 0;
	stroke-dashoffset: 0; transition: opacity 400ms var(--ease);
}
.visual-hedge-trimline.is-visible { opacity: 0.9; animation: fkk-trimline-march 1.6s linear infinite; }

.visual-leaf {
	fill: #6b9a5c; opacity: 0; transform-box: fill-box; transform-origin: center;
	pointer-events: none;
}
.visual-leaf.is-falling { animation: fkk-leaf-fall 1100ms ease-in forwards; }

/* --- Terrassen-Aufbau --- */
.visual-terrasse-layer {
	opacity: 0; transform: translateY(14px) scaleY(0.92); transform-box: fill-box; transform-origin: bottom;
	transition: opacity 620ms var(--ease-pop), transform 620ms var(--ease-pop);
	filter: drop-shadow(0 3px 3px rgba(13,27,36,0.12));
}
.visual-terrasse-layer.is-built { opacity: 1; transform: translateY(0) scaleY(1); }
.visual-terrasse-belag { display: none; }
.visual-terrasse-belag.is-active { display: block; }
.visual-terrasse-ground-texture { fill: rgba(0,0,0,0.08); }

@keyframes fkk-trimline-march {
	to { stroke-dashoffset: -20; }
}
@keyframes fkk-leaf-fall {
	0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.6); }
	15% { opacity: 1; }
	100% { opacity: 0; transform: translate(var(--leaf-dx, 14px), 46px) rotate(var(--leaf-rot, 140deg)) scale(0.9); }
}

@media (prefers-reduced-motion: reduce) {
	.visual-hedge-trimline.is-visible { animation: none; }
	.visual-leaf.is-falling { animation: none; opacity: 0; }
}

@media (max-width: 480px) {
	.service-visual { padding: 16px 16px 14px; }
}