/* Ergänzungen zu screen.css: ersetzen Inline-Stile und das frühere Alpine-Skript */

:root {
	--color-ink: #111827;
	--color-underline: #e2e8f0;
}

.text-ink { color: var(--color-ink); }
.bg-ink { background-color: var(--color-ink); }
.not-italic { font-style: normal; }

/* Kopfzeile */
.site-logo {
	transition: opacity .3s ease-out, translate .3s ease-out;
}
.site-header.is-scrolled .site-logo {
	opacity: 0;
	translate: 0 -2rem;
	pointer-events: none;
}
.site-menu-btn { color: var(--color-ink); }
@media (min-width: 48rem) {
	.is-home .site-header:not(.is-scrolled) .site-menu-btn { color: var(--color-white); }
}

/* Vollbild-Menü */
.site-menu {
	translate: 0 -100%;
	visibility: hidden;
	transition: translate .4s cubic-bezier(.76, 0, .24, 1), visibility 0s linear .4s;
}
.site-menu.is-open {
	translate: 0 0;
	visibility: visible;
	transition: translate .4s cubic-bezier(.76, 0, .24, 1), visibility 0s;
}

/* Startbild: zwei Hälften, die beim Darüberfahren breiter werden */
.hero-side { transition: width 1.2s cubic-bezier(.22, 1, .36, 1); }
.hero-bg {
	object-position: top;
	transition: scale 2s ease-out;
}
.hero-shade { transition: opacity .7s; }
.hero-side:hover .hero-bg { scale: 1.015; }
.hero-side:hover .hero-shade { opacity: .8; }
.hero-actions { transition: translate .7s .1s; }
@media (min-width: 48rem) {
	.hero-side { width: 50%; }
	.hero:has(.hero-side:hover) .hero-side { width: 47%; }
	.hero:has(.hero-side:hover) .hero-side:hover { width: 53%; }
	.hero-actions { translate: 0 1rem; }
	.hero-side:hover .hero-actions { translate: 0 0; }
}

/* Leistungen: Unterstreichung beim Darüberfahren */
.svc-title {
	background-image: linear-gradient(var(--color-underline), var(--color-underline));
	background-repeat: no-repeat;
	background-size: 0% .4em;
	background-position: 0 80%;
	transition: background-size .5s ease-out;
}
.svc-title:hover { background-size: 100% .4em; }

/* Termin-Button mit Link darunter: so breit wie der Button, Link mittig */
.cta-stack { align-self: flex-start; gap: .5rem; }

/* 404 */
.min-h-screen-80 { min-height: 80vh; }

@media (prefers-reduced-motion: reduce) {
	.hero-side, .hero-bg, .hero-actions, .site-menu, .site-logo, .svc-title { transition: none; }
}