/* Wolken-Übergang von der hellen Karte ins Team – 1:1 nach era-residence.com (gemessen 22.10.2026 bei 1440, 820
   und 390 px; Analyse: Dashboard docs/vorbild-querfahrt-era-residence.md). ERA setzt 1rem = 1vw, deshalb vw-Werte. */
.wolken-abschnitt { --wolken-grund: var(--nv-flaeche, #f0f1f2); position: relative; overflow: clip; background: var(--wolken-grund); margin-top: -3px; }
.loc-w { position: relative; z-index: 2; height: 87.5vw; }
/* Nahtschutz: verdeckt Rundungspixel der bewegten Ebenen an der Abschnittskante */
.loc-w::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 4px; background: var(--wolken-grund); z-index: 9; }
.loc-w_over-grad { position: absolute; left: 0; right: 0; top: -1px; height: 20vw; z-index: 5; pointer-events: none; background: linear-gradient(var(--wolken-grund), rgba(240, 241, 242, 0)); }
.loc-w_clouds { position: absolute; left: 0; right: 0; top: -6vw; z-index: 4; pointer-events: none; }
.wolken-marquee { position: relative; z-index: 0; display: flex; justify-content: flex-start; align-items: center; overflow: clip; }
.wolken-track, .wolken-liste { display: flex; flex: 0 0 auto; justify-content: flex-start; align-items: center; }
.wolken-track { will-change: transform; animation: wolken-band 32s linear 0s infinite reverse; }
.wolken-kachel { flex: 0 0 auto; }
.loc-w_clouds .wolken-kachel:nth-child(2n) { transform: scaleY(-1); }
.wolke { display: block; width: auto; object-fit: cover; }
.wolke.is-a { height: 41vw; }
.wolke.is-b, .wolke.is-c { height: 33vw; }
/* Schattenebene: deckungsgleiche, blaugrau getönte Kopie der vorderen Wolken im selben Takt; die Maske lässt nur
   den unteren Teil durch – die Unterseiten werden leicht dunkler wie bei ERA, ohne eigene graue Formen. */
.loc-w_clouds--schatten { opacity: .55; filter: grayscale(.25) brightness(.78) sepia(.15) hue-rotate(178deg) saturate(1.1);
  -webkit-mask-image: linear-gradient(transparent 38%, #000 80%); mask-image: linear-gradient(transparent 38%, #000 80%); }
@keyframes wolken-band { 0% { transform: translateX(-50%); } 100% { transform: translateX(0%); } }
.loc-w_bg { position: relative; height: 100%; will-change: transform; }
.loc-w_bg_img { position: relative; height: 100%; overflow: hidden; }
.loc-w_bg_img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Desktop: Foto in voller Breite, unten bündig – darüber nur Grundfarbe unter Verlauf und Wolken, so bleibt der Horizont frei. */
@media (min-width: 992px) { .loc-w_bg_img img { object-fit: contain; object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(transparent 12%, #000 30%); mask-image: linear-gradient(transparent 12%, #000 30%); } }
.loc-s { position: absolute; left: 3vw; right: 3vw; bottom: 0; height: 14.24vw; z-index: 1; color: #fff; }
.loc-s .line-v { position: absolute; left: 65.5vw; top: 0; width: 1px; height: 8.26vw; background: #fff; }
.loc-s_txt { position: absolute; left: 66.5vw; top: 0; width: 18vw; }
.loc-s .l1 { margin: 0; font: 700 max(9.9px, .6875vw)/1.45 var(--kopf); letter-spacing: .048em; text-transform: uppercase; }
.loc-s .p1 { position: absolute; left: 0; margin: 0; font: 400 max(11.7px, .8125vw)/1.38 var(--sans); letter-spacing: -.024em; }
.loc-s .p1.a { top: 5.2vw; } .loc-s .p1.b { top: 8.33vw; }
.loc-s .split-line-mask { display: block; overflow: clip; } .loc-s .split-line { display: block; }
.wolken-quelle { position: absolute; left: 3vw; bottom: 4.2vw; z-index: 3; margin: 0; font: 500 10px/1 var(--sans); letter-spacing: .08em; color: rgba(255, 255, 255, .78); text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.loc-w_decor { position: absolute; left: 0; right: 0; bottom: 0; height: 3vw; z-index: 6; background: #000; clip-path: polygon(3vw 0, calc(100% - 3vw) 0, 100% 101%, 0 101%); }
@media (max-width: 991px) {
  .loc-w { height: 175vw; }
  .loc-w_over-grad { height: 42.3vw; }
  .loc-w_clouds { top: -15.385vw; }
  .wolke.is-a { height: 79vw; } .wolke.is-b, .wolke.is-c { height: 63vw; }
  .loc-w_decor { height: 5.77vw; clip-path: polygon(5.77vw 0, calc(100% - 5.77vw) 0, 100% 101%, 0 101%); }
  .loc-s { left: 5.9vw; right: 5.9vw; height: 17.4vw; bottom: 5.77vw; }
  .loc-s .line-v { left: 0; height: 12vw; } .loc-s_txt { left: 4vw; width: 60vw; }
  .loc-s .p1.a { top: 7vw; } .loc-s .p1.b { top: 11vw; }
  .wolken-quelle { left: auto; right: 5.9vw; bottom: 26vw; max-width: 46vw; text-align: right; line-height: 1.35; }
}
@media (prefers-reduced-motion: reduce) { .wolken-track { animation: none; } }
/* Lenis (wie ERA) */
html.lenis, html.lenis body { height: auto; }
.lenis-smooth { scroll-behavior: auto !important; }
.lenis-stopped { overflow: clip; }
/* Nahtschutz über allen Ebenen (bewegte Ebenen runden auf Handys um einen Pixel über die Kante) */
.wolken-abschnitt::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--wolken-grund); z-index: 20; pointer-events: none; }
/* Die Karte davor liegt eine Ebene höher und überdeckt die 3 px Überlappung – dort landen Rundungspixel der bewegten Ebenen. */
.logo-raum { z-index: 3; }