/* Wohnung als fester Hintergrund (Kerim 29.10.26). Der Film liegt hinter der
   ganzen Seite, Rand zu Rand. walk.js setzt --p aus dem Scroll über die ganze
   Seite (0 oben, 1 unten) und spult den Film: beim Runterscrollen wird die
   Wohnung fertig. Inhalt liegt als Glas darüber und bleibt lesbar. */
.walk-body{background:#14110d}
.walk-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#14110d}
.walk-img,.walk-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.walk-img.neu{opacity:var(--neu,0)}
.walk-film{opacity:0;transition:opacity .4s}
.walk-body.has-film .walk-film{opacity:1}
.walk-body.has-film .walk-img{display:none}
.walk-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,8,5,.62) 0%,rgba(10,8,5,.28) 45%,rgba(10,8,5,.5) 100%)}

/* Blatt durchsichtig, volle Breite */
.walk-page.sheet{position:relative;z-index:1;background:transparent;box-shadow:none;width:100%;max-width:none;margin:0;border-radius:0}
.walk-body .site-header{z-index:5}
.walk-body .site-header:not(.scrolled) .brand,.walk-body .site-header:not(.scrolled) .nav a{color:#fff}
.walk-body .site-header:not(.scrolled) .brand small{color:rgba(255,255,255,.7)}

/* Hero: Text weiß auf dem alten Flur, Formular als helle Karte */
.walk-hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:96px 0 48px}
.walk-hero .hero-grid{align-items:center}
.walk-hero .eyebrow{color:var(--gold)}
.walk-hero .eyebrow::before{background:var(--gold)}
.walk-hero h1.display{color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.4)}
.walk-hero h1 .tail{color:var(--gold)}
.walk-hero .lead{color:rgba(255,255,255,.86);text-shadow:0 2px 14px rgba(0,0,0,.5)}
.walk-hero .lead-card{box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.gap-glass{justify-self:center;align-self:end;color:#fff;text-align:center;padding:28px 34px;border-radius:24px;
  background:rgba(14,18,24,.42);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(255,255,255,.18);max-width:360px}
.gap-glass b{display:block;font-size:clamp(64px,9vw,120px);font-weight:500;letter-spacing:-.04em;line-height:1}
.gap-glass span{display:block;margin-top:10px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.82)}

/* Folgende Abschnitte als helles Glas, Wohnung scheint am Rand durch */
.walk-page .band{background:rgba(250,248,244,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  width:min(100% - 24px,1280px);margin:0 auto 16px;border-radius:24px;border-top:0!important}
.walk-page .band:last-of-type{margin-bottom:40vh}
.walk-body .site-footer{position:relative;z-index:1;background:rgba(250,248,244,.94);margin:0}

/* Hero zweispaltig: links Text und Zahl, rechts das Formular, beides im ersten Bild */
.walk-hero{padding:88px 0 40px}
.walk-hero .gap-glass{justify-self:start;margin-top:26px;padding:18px 24px;text-align:left;max-width:none;display:inline-block}
.walk-hero .gap-glass b{font-size:clamp(48px,6vw,76px)}
.walk-hero .gap-glass span{font-size:15px}
.walk-formcol .lead-card{max-width:460px;margin-left:auto}
@media(max-width:979px){.walk-formcol .lead-card{margin:0 auto}}
.walk-shade{background:linear-gradient(180deg,rgba(10,8,5,.5) 0%,rgba(10,8,5,.18) 45%,rgba(10,8,5,.42) 100%)}
.walk-body .site-footer{margin:0 auto;border-radius:24px 24px 0 0;padding-left:24px;padding-right:24px}

/* Alles wie im Hero (Kerim 29.10.26): keine hellen Flächen mehr, Video und
   Fragen stehen direkt auf der Wohnung, damit man die Verwandlung bis unten sieht */
.walk-page .band{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;width:auto;margin:0;border-radius:0}
.walk-page .band:last-of-type{margin-bottom:0;padding-bottom:45vh}
.walk-page .band .eyebrow{color:var(--gold)}
.walk-page .band .eyebrow::before{background:var(--gold)}
.walk-page .band h2.display{color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.45)}
.walk-page .band h2 .tail{color:var(--gold)}
.walk-page .band .lead,.walk-page .checks li{color:rgba(255,255,255,.88);text-shadow:0 2px 14px rgba(0,0,0,.55)}
.walk-page .checks svg{color:var(--gold)}
/* Fragen als dunkles Glas, sonst geht weiße Schrift auf hellen Wänden unter */
.walk-page .faq details{border:1px solid rgba(255,255,255,.16);border-radius:18px;margin:0 0 10px;padding:0 22px;
  background:rgba(14,18,24,.46);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.walk-page .faq summary{color:#fff}
.walk-page .faq summary svg{color:var(--gold)}
.walk-page .faq details p{color:rgba(255,255,255,.82)}
.walk-page .faq details p a{color:#fff}
/* Footer dunkel und durchsichtig */
.walk-body .site-footer{background:rgba(14,18,24,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:rgba(255,255,255,.7);max-width:none;border-radius:0;margin:0}
.walk-body .site-footer strong{color:#fff!important}
.walk-body .site-footer a{color:rgba(255,255,255,.8)}
.walk-body .site-footer .by{border-top-color:rgba(255,255,255,.18)}
/* Unten ist die Wohnung hell, dort etwas mehr abdunkeln */
.walk-shade{background:linear-gradient(180deg,rgba(10,8,5,.5) 0%,rgba(10,8,5,.22) 45%,rgba(10,8,5,.55) 100%)}
/* Kopfleiste beim Scrollen dunkles Glas statt weiß */
.walk-body .site-header{position:fixed;left:0;right:0;z-index:50}
.walk-body .site-header.scrolled{background:rgba(14,18,24,.5)}
.walk-body .site-header .brand,.walk-body .site-header .nav a{color:#fff}
.walk-body .site-header .brand small{color:rgba(255,255,255,.7)}
.walk-body .site-header .pill-sm{background:var(--gold);color:var(--green)}

/* Bekannt aus: helles Band, graue Wortmarken mit Trennstrichen, läuft endlos durch */
.pr-band{position:relative;z-index:1;background:rgba(238,237,234,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:34px 0 30px;margin:0 0 8px}
.pr-title{margin:0 0 22px;text-align:center;font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#6e6e6a}
.pr-track{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.pr-row{display:flex;flex:none;align-items:center;margin:0;padding:0;list-style:none;animation:prRun 32s linear infinite}
.pr-row li{display:flex;align-items:center;height:48px;padding:0 44px;border-right:1px solid rgba(0,0,0,.12);color:#9b9b97}
.pr-mark{white-space:nowrap;line-height:1;filter:grayscale(1)}
.pm-presse{font-size:26px;font-weight:700;letter-spacing:-.03em}
.pm-leine{font-size:24px;font-weight:600;letter-spacing:-.01em}
.pm-leine b{font-weight:800;margin-left:1px}
.pm-regio{font-size:15px;font-weight:600;letter-spacing:.16em;text-align:center;line-height:1.15}
.pm-gewinner{font-family:var(--font-serif,Georgia,serif);font-size:26px;font-style:italic}
.pm-gewinner i{font-family:var(--font-sans);font-style:normal;font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-left:8px}
.pr-icon{display:grid;place-items:center;color:#7a7a76}
.pr-icon svg{width:30px;height:30px}
.pr-icon:hover{color:var(--green)}
.pr-track:hover .pr-row{animation-play-state:paused}
@keyframes prRun{to{transform:translateX(-100%)}}
@media(max-width:640px){.pr-row li{padding:0 26px;height:40px}.pm-presse,.pm-leine,.pm-gewinner{font-size:20px}}
@media(prefers-reduced-motion:reduce){.pr-row{animation:none}}
/* Echte Logos statt Textmarken: grau, gleiche Höhe, beim Drüberfahren in Farbe */
.pr-logo{display:flex;align-items:center}
.pr-logo img{height:26px;width:auto;max-width:210px;filter:grayscale(1) contrast(.9);opacity:.55;transition:opacity .2s,filter .2s}
.pr-logo:hover img{filter:none;opacity:1}
@media(max-width:640px){.pr-logo img{height:20px;max-width:160px}}

/* Kundenstimmen: Hochkant-Videos in einer Reihe, am Handy zum Wischen */
.kv-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:34px}
@media(max-width:900px){.kv-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-right:-20px;padding-right:20px;padding-bottom:6px}.kv{flex:0 0 62%;scroll-snap-align:start}}
.kv{margin:0}
.kv-film{position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#111;box-shadow:0 24px 50px -20px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.14)}
.kv-film video{width:100%;height:100%;object-fit:cover;display:block}
.kv-play{position:absolute;inset:0;display:grid;place-items:center;border:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35));cursor:pointer}
.kv-play span{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#f3ebc6,var(--gold) 45%,#a3955f);box-shadow:0 10px 30px -6px rgba(0,0,0,.5);position:relative;transition:transform .2s}
.kv-play span::after{content:"";position:absolute;left:26px;top:20px;border-left:18px solid var(--green);border-top:12px solid transparent;border-bottom:12px solid transparent}
.kv-play:hover span{transform:scale(1.07)}
.kv-film.on .kv-play{display:none}
.kv figcaption{margin-top:12px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.kv figcaption b{display:block;font-weight:500;font-size:17px}
.kv figcaption span{display:block;font-size:14px;color:rgba(255,255,255,.75);margin-top:2px}