/* v.7 Bewegung – nach Apple-Prinzipien (nur transform/opacity, unterbrechbar) */
:root { --ease-spring: cubic-bezier(.32, .72, 0, 1); --ease-out: cubic-bezier(.22, 1, .36, 1); }

/* Druck-Feedback sofort beim Antippen (Klasse via JS auf pointerdown) */
.btn-primary, .btn-ghost, .nav-cta, .set-btn, .proj-arrow, .arrow, #burger, .mode-switch a,
.service-card, .set-card, .review-card, .kontakt-map > a, .intro-logo {
    transition-property: transform, opacity, background-color, color, border-color, box-shadow;
    transition-duration: 380ms; transition-timing-function: var(--ease-spring);
}
.is-pressed { transform: scale(.97) !important; transition-duration: 90ms !important; transition-timing-function: ease-out !important; }
.service-card.is-pressed, .set-card.is-pressed, .review-card.is-pressed { transform: scale(.985) !important; }
.arrow.is-pressed { transform: translateY(-50%) scale(.94) !important; }

/* Modus-Schalter: Hover/Fokus/Druck */
.mode-switch a { position: relative; z-index: 1; }
@media (hover: hover) { .mode-switch a:not([aria-current]):hover { opacity: .78; } }
.mode-thumb { transition: transform 420ms var(--ease-spring); }

/* Bildwechsel: echte Überblendung (Sichtbarkeit erst nach dem Ausblenden umschalten) */
.slide { transition: opacity 1.1s ease, visibility 0s linear 1.1s; }
.slide.visible { transition: opacity 1.1s ease, visibility 0s; }
.proj-slide { transition: opacity 420ms ease, visibility 0s linear 420ms; }
.proj-slide.visible { transition: opacity 420ms ease, visibility 0s; }
.proj-slides { cursor: grab; }
.proj-slides.is-dragging { cursor: grabbing; }
.proj-slide img { -webkit-user-drag: none; }

/* Mobil-Menü: federnd, gleicher Weg hinein und hinaus, Ursprung am Burger */
#navdrawer { transform-origin: calc(100% - 32px) 32px; transition: transform 460ms var(--ease-spring), opacity 300ms ease, visibility 0s linear 460ms; opacity: 0; transform: translateX(24%) scale(.96); }
#navdrawer.open { transform: none; opacity: 1; transition: transform 460ms var(--ease-spring), opacity 220ms ease, visibility 0s; }
#navdrawer li { opacity: 0; transform: translateY(10px); transition: opacity 240ms ease, transform 420ms var(--ease-spring); }
#navdrawer.open li { opacity: 1; transform: none; }
#navdrawer.open li:nth-child(2) { transition-delay: 30ms; } #navdrawer.open li:nth-child(3) { transition-delay: 60ms; }
#navdrawer.open li:nth-child(4) { transition-delay: 90ms; } #navdrawer.open li:nth-child(5) { transition-delay: 120ms; }
#burger .bar { transition: transform 420ms var(--ease-spring), opacity 200ms ease; }

/* Ansichtswechsel Startansicht / Mietpark */
.page.active.view-in { animation: ks-in 420ms var(--ease-out) both; }
@keyframes ks-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Details aufklappen */
.set-more[open] .set-desc { animation: ks-in 320ms var(--ease-out) both; }
.set-more summary::after { transition: transform 380ms var(--ease-spring); }

/* Kopfzeile materialisiert sich beim Scrollen */
#topnav { transition: background-color 300ms ease, -webkit-backdrop-filter 300ms ease, backdrop-filter 300ms ease; }
html.ks-top body:not(.on-sub):not(.menu-open) #topnav { background-color: rgba(8, 12, 20, .42); -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); }

/* Scroll-Einblenden – nur wenn JS läuft (Klasse ks-rv), sonst alles sichtbar */
.ks-rv .rv { opacity: 0; transform: translateY(18px); }
.ks-rv .rv.in { opacity: 1; transform: none; transition: opacity 600ms ease, transform 700ms var(--ease-out); transition-delay: var(--rv-d, 0ms); }

@media (prefers-reduced-motion: reduce) {
    .is-pressed, .service-card.is-pressed, .set-card.is-pressed, .review-card.is-pressed { transform: none !important; opacity: .7; }
    .arrow.is-pressed { transform: translateY(-50%) !important; }
    .ks-rv .rv { transform: none; } .ks-rv .rv.in { transition: opacity 300ms ease; }
    #navdrawer, #navdrawer.open { transform: none !important; transition: opacity 200ms ease, visibility 0s linear 200ms !important; }
    #navdrawer.open { transition: opacity 200ms ease, visibility 0s !important; }
    #navdrawer li { transform: none; transition: none; }
    .slide, .slide.visible, .proj-slide, .proj-slide.visible { transition-duration: 300ms, 0s !important; transition-delay: 0s, 300ms !important; }
    .slide.visible, .proj-slide.visible { transition-delay: 0s !important; }
    .page.active.view-in, .set-more[open] .set-desc { animation-name: ks-fade; }
    .mode-thumb { transition: none; }
}
@keyframes ks-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-transparency: reduce) {
    html.ks-top body:not(.on-sub) #topnav { background-color: #0b111b; -webkit-backdrop-filter: none; backdrop-filter: none; }
    #navdrawer { background: #080c14; }
}
@media (prefers-contrast: more) {
    html.ks-top body:not(.on-sub) #topnav { background-color: #05080d; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .ks-rv .rv { opacity: 1; transform: none; }
}