/* ==========================================================================
   WOHNMOBILE GERA — MOTION  v2  (06.11.2026)
   Dezente, elegante Bewegung für alle Seiten. Eine Kurve, eine Sprache.
   Alles respektiert prefers-reduced-motion und Touch-Geräte.
   ========================================================================== */
:root { --ease-out: cubic-bezier(.2, .7, .2, 1); --dur: .45s; }

/* ---------- 1 · Aufbau beim Scrollen (automatisch, siehe motion.js) ---------- */
.rv-auto { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
.rv-auto.is-in { opacity: 1; transform: none; }

/* ---------- 2 · Einstieg: Hero-Text gleitet beim Laden ein ---------- */
@keyframes m-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero-film-inner > *, .k-hero .container > *, .e-hero .container > *, .fb-hero .container > *, .hero .container > *, .c-head .container > * {
  animation: m-rise .8s var(--ease-out) both; }
.hero-film-inner > :nth-child(2), .k-hero .container > :nth-child(2), .e-hero .container > :nth-child(2), .fb-hero .container > :nth-child(2), .hero .container > :nth-child(2), .c-head .container > :nth-child(2) { animation-delay: .1s; }
.hero-film-inner > :nth-child(3), .k-hero .container > :nth-child(3), .e-hero .container > :nth-child(3), .fb-hero .container > :nth-child(3), .hero .container > :nth-child(3), .c-head .container > :nth-child(3) { animation-delay: .2s; }
.hero-film-inner > :nth-child(4), .k-hero .container > :nth-child(4), .e-hero .container > :nth-child(4), .fb-hero .container > :nth-child(4), .hero .container > :nth-child(4), .c-head .container > :nth-child(4) { animation-delay: .3s; }
.hero-film-inner > :nth-child(n+5), .k-hero .container > :nth-child(n+5), .e-hero .container > :nth-child(n+5), .hero .container > :nth-child(n+5) { animation-delay: .4s; }

/* ---------- 3 · Navigation: Unterstrich wächst von links ---------- */
.main-nav li a { position: relative; border-bottom: 0 !important; }
.main-nav li a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--cd-orange); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); }
.main-nav li a:hover::after, .main-nav li a:focus-visible::after, .main-nav li a[aria-current="page"]::after { transform: scaleX(1); }
.utility-nav a { transition: opacity .2s ease; }
.utility-nav a:hover { opacity: .8; }

/* ---------- 4 · Team und Personen: treten beim Überfahren hervor ---------- */
.team-grid figure, .person-card { position: relative; isolation: isolate; border-radius: var(--r-lg); transition: transform var(--dur) var(--ease-out); }
.team-grid figure::before, .person-card::before {
  content: ""; position: absolute; z-index: -1; inset: -10px -10px -12px; border-radius: calc(var(--r-lg) + 8px);
  background: var(--cd-light-beige); opacity: 0; transform: scale(.96); transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out); }
.team-grid img, .person-card img, .person img, .k-person img {
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) ease, filter var(--dur) ease; will-change: transform; }
.team-grid img, .person-card img { filter: saturate(.92); }
.team-grid figure:hover, .person-card:hover, .team-grid figure:focus-within, .person-card:focus-within { transform: translateY(-4px); }
.team-grid figure:hover::before, .person-card:hover::before, .team-grid figure:focus-within::before, .person-card:focus-within::before { opacity: 1; transform: none; }
.team-grid figure:hover img, .person-card:hover img, .team-grid figure:focus-within img, .person-card:focus-within img {
  transform: translateY(-6px) scale(1.04); filter: saturate(1.05); box-shadow: 0 24px 40px -20px rgba(17,31,61,.5), 0 8px 16px -10px rgba(17,31,61,.25); }
.team-grid .name, .person-card .name { transition: color .25s ease; }
/* Auf beigen Abschnitten hebt sich die Person mit Weiß ab */
.alt .team-grid figure::before, .theme-allgemein .alt .person-card::before, .section.alt .person-card::before { background: #fff; box-shadow: 0 1px 0 rgba(17,31,61,.04); }

.team-grid figure:hover .name, .person-card:hover .name { color: var(--cd-brand-blue); }
.person:hover img, .k-person:hover img { transform: scale(1.08) rotate(-2deg); }

/* ---------- 5 · Karten, Kacheln, Spots: leichtes Anheben ---------- */
.card, .spot, .cat, .choice, .k-model, .leistung, .why-big, .dest {
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) ease, border-color .25s ease; }
.card:hover, .spot:hover, .cat:hover, .k-model:hover, .leistung:hover, .why-big:hover {
  transform: translateY(-4px); box-shadow: 0 20px 36px -22px rgba(17,31,61,.35); }
.theme-kabe .card:hover, .page-kabe .k-model:hover { box-shadow: 0 20px 36px -20px rgba(0,0,0,.6); }
.choice:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(0,0,0,.6); }

/* ---------- 6 · Bilder: ruhiger Zoom in Rahmen ---------- */
.media, .media-photo, .spot > img, .cat img, .gallery-3 > *, .gallery figure { overflow: hidden; }
.media img, .media-photo img, .spot > img, .cat img, .gallery-3 img, .gallery img {
  transition: transform 1.1s var(--ease-out); will-change: transform; }
.media:hover img, .media-photo:hover img, .spot:hover > img, .cat:hover img, .gallery-3 > *:hover img, .gallery figure:hover img { transform: scale(1.045); }

/* ---------- 7 · Buttons und Links ---------- */
.btn { transition: transform .2s var(--ease-out), background .2s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(17,31,61,.45); }
.btn:active { transform: translateY(0); transition-duration: .08s; }
.btn svg, .btn .ti { transition: transform .25s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

/* ---------- 8 · Icons in Leistungs-Kacheln ---------- */
.why-ico, .leistung .ico { transition: transform var(--dur) var(--ease-out), background .25s ease; }
.why-big:hover .why-ico, .leistung:hover .ico, .why > li:hover .why-ico { transform: translateY(-3px) scale(1.06); }

/* ---------- Rücksicht ---------- */
@media (hover: none) {
  .team-grid figure:hover, .person-card:hover, .team-grid figure:hover img, .person-card:hover img, .person:hover img, .k-person:hover img,
  .card:hover, .spot:hover, .cat:hover, .choice:hover, .k-model:hover, .leistung:hover, .why-big:hover, .btn:hover { transform: none; box-shadow: none; }
  .team-grid figure:hover::before, .person-card:hover::before { opacity: 0; }
  .media:hover img, .media-photo:hover img, .spot:hover > img, .cat:hover img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-auto { opacity: 1; transform: none; transition: none; }
  .hero-film-inner > *, .k-hero .container > *, .e-hero .container > *, .fb-hero .container > *, .hero .container > *, .c-head .container > * { animation: none; }
  .main-nav li a::after { transition: none; }
}
@media print { .rv-auto { opacity: 1 !important; transform: none !important; } }