@font-face {
			font-family: "Hanken Grotesk";
			src: url("/fonts/hanken-grotesk-400.woff2") format("woff2");
			font-weight: 400;
			font-style: normal;
			font-display: swap;
		}

		@font-face {
			font-family: "Hanken Grotesk";
			src: url("/fonts/hanken-grotesk-500.woff2") format("woff2");
			font-weight: 500;
			font-style: normal;
			font-display: swap;
		}

		@font-face {
			font-family: "Hanken Grotesk";
			src: url("/fonts/hanken-grotesk-600.woff2") format("woff2");
			font-weight: 600;
			font-style: normal;
			font-display: swap;
		}

		html {
			scroll-behavior: smooth;
		}

		/* Lange deutsche Wörter in großen Überschriften dürfen auf schmalen Handys
		   umbrechen, statt seitliches Scrollen zu erzeugen. Wirkt nur, wenn ein Wort
		   nicht in die Zeile passt. */
		h1,
		h2,
		h3 {
			overflow-wrap: break-word;
		}

		/* Icon-Sprite: alle <svg class="icon-line"><use href="#icon-…"></use></svg>
		   erben Farbe von ihrem Elternelement (currentColor) und zeichnen als
		   Linien-Icons, im Stil der bisherigen Material-Symbols-Outlined-Optik. */
		.icon-line {
			fill: none;
			stroke: currentColor;
			stroke-width: 2;
			stroke-linecap: round;
			stroke-linejoin: round;
		}

		/* Für gefüllte Icons (z. B. Sterne in den Bewertungs-Cards) */
		.icon-fill {
			fill: currentColor;
			stroke: none;
		}

		/* Bewertungs-Marquee: reines CSS, kein JS. Zwei identische Kartenreihen
		   hintereinander, die zusammen exakt 200% Breite ergeben; die Animation
		   verschiebt um -50% und beginnt dadurch nahtlos wieder von vorn. */
		@keyframes marquee-scroll {
			from {
				transform: translateX(0);
			}

			to {
				transform: translateX(-50%);
			}
		}

		.marquee-track {
			animation: marquee-scroll 42s linear infinite;
		}

		.marquee-wrapper:hover .marquee-track,
		.marquee-wrapper:focus-within .marquee-track {
			animation-play-state: paused;
		}

		@media (prefers-reduced-motion: reduce) {
			.marquee-track {
				animation: none;
			}
		}

		a:focus-visible,
		button:focus-visible,
		summary:focus-visible {
			outline: 2px solid #C8A96A;
			outline-offset: 3px;
			border-radius: 2px;
		}

		/* Nur Anfangs-/Endzustand hier, die Übergangs-Timing kommt bewusst aus den
		   bestehenden Tailwind-Klassen (transition-all duration-…) am jeweiligen
		   Element, damit Hover- und Reveal-Übergänge nicht kollidieren. */
		.js .reveal:not(.is-visible) {
			opacity: 0;
			transform: translateY(20px);
		}

		.js .reveal-scale:not(.is-visible) {
			opacity: 0;
			transform: translateY(14px) scale(0.97);
		}

		@media (prefers-reduced-motion: reduce) {
			html {
				scroll-behavior: auto;
			}

			.js .reveal:not(.is-visible),
			.js .reveal-scale:not(.is-visible) {
				opacity: 1;
				transform: none;
				transition: none;
			}
		}

		/* =====================================================
		   MULTI-STEP-ANFRAGEFORMULAR
		   ===================================================== */

		.fs-step {
			display: none;
		}

		.fs-step.is-active {
			display: block;
		}

		.js .fs-step.is-active {
			animation: fs-fade-in 260ms ease-out both;
		}

		@keyframes fs-fade-in {
			from {
				opacity: 0;
				transform: translateY(10px);
			}

			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.fs-detail-panel {
			display: none;
		}

		.fs-detail-panel.is-active {
			display: block;
		}

		.fs-option[aria-pressed="true"] {
			border-color: #C8A96A;
			box-shadow: 0 0 0 1px #C8A96A, 0 10px 34px -14px rgba(200, 169, 106, 0.55);
		}

		.fs-option[aria-pressed="true"] .fs-icon {
			background-color: #C8A96A;
			color: #080B10;
			border-color: #C8A96A;
		}

		.fs-check {
			opacity: 0;
			transform: scale(0.6);
			transition: opacity 0.2s ease, transform 0.2s ease;
		}

		.fs-option[aria-pressed="true"] .fs-check {
			opacity: 1;
			transform: scale(1);
		}

		.fs-option[aria-pressed="true"] .fs-arrow {
			opacity: 0;
		}

		summary::-webkit-details-marker {
			display: none;
		}

		summary {
			list-style: none;
		}

		.fs-detail-option[aria-pressed="true"],
		.fs-contact-option[aria-pressed="true"] {
			color: #F5F5F2;
		}

		.fs-prog-num,
		.fs-prog-check {
			transition: opacity 0.2s ease;
		}

		.fs-prog-check {
			display: none;
		}

		.fs-prog[data-state="done"] .fs-prog-num {
			display: none;
		}

		.fs-prog[data-state="done"] .fs-prog-check {
			display: block;
		}

		.fs-prog[data-state="active"] .fs-prog-circle {
			background-color: #C8A96A;
			border-color: #C8A96A;
			color: #080B10;
		}

		.fs-prog[data-state="done"] .fs-prog-circle {
			border-color: #C8A96A;
			color: #C8A96A;
		}

		.fs-prog[data-state="active"] .fs-prog-label,
		.fs-prog[data-state="done"] .fs-prog-label {
			color: #F5F5F2;
		}

		.fs-prog[data-state="done"] .fs-prog-line {
			background-color: #C8A96A;
		}

		@media (prefers-reduced-motion: reduce) {
			.js .fs-step.is-active {
				animation: none;
			}

			.fs-check {
				transition: none;
			}
		}