/* Blende stufenlos: Position per transform, Fortschritt in --p (0 offen, 1 zu) */
.ds2-window.kp-hero__window[data-drag] { --p: 0; }
.ds2-window.kp-hero__window[data-drag] > button.kp-flight-window__shade {
  top: 0; left: 0; right: 0; height: 100%;
  transform: translate3d(0, calc((var(--p, 0) - 1) * (100% - 28px)), 0);
  transition: none; will-change: transform; cursor: grab; touch-action: pan-x; /* vertikal zieht die Blende, horizontal wischt das Karussell, Seite scrollt ausserhalb */
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 32%, transparent);
  background:
    repeating-linear-gradient(180deg, transparent 0 9px, color-mix(in srgb, var(--ink) calc(var(--p, 0) * 9%), transparent) 9px 10px),
    linear-gradient(0deg, var(--cabin-blende-1) 0, var(--cabin-blende-3) 28px, var(--cabin-blende-3) 100%);
  box-shadow: 0 5px 9px color-mix(in srgb, var(--ink) 25%, transparent), inset 0 -16px 24px -14px color-mix(in srgb, var(--ink) calc(var(--p, 0) * 40%), transparent);
}
.ds2-window.kp-hero__window[data-dragging] > button.kp-flight-window__shade { cursor: grabbing; }
.kp-shade-grip { position: absolute; left: 50%; bottom: -14px; width: 96px; height: 46px; margin-left: -48px; cursor: inherit; }
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after { transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease !important; }
.ds2-window.kp-hero__window[data-drag] > button.kp-flight-window__shade { transition: none !important; }

/* ===== Tageszeit-Fenster ===== */
.ds2-window.kp-hero__window > .tod-pano,
.ds2-window.kp-hero__window > .tod-grade { position: absolute !important; inset: var(--ds2-window-frame); overflow: hidden; border-radius: inherit; z-index: 0; pointer-events: none; }
.tod-pano { opacity: 0; transition: opacity .5s ease; contain: paint; }
.tod-ready .tod-pano { opacity: 1; }
.tod-drift { position: absolute; top: 0; left: 0; height: 100%; aspect-ratio: 1024 / 572; will-change: transform; transform: translate3d(-4%, 0, 0);
  animation: tod-drift 170s ease-in-out infinite alternate; }
.tod-off .tod-drift { animation-play-state: paused; }
@keyframes tod-drift { from { transform: translate3d(-4%, 0, 0); } to { transform: translate3d(-58%, 0, 0); } }
.tod-l { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .22s linear; }
.tod-l.tod-day { opacity: 1; }
.tod-l.tod-eve { opacity: var(--we, 0); }
.tod-l.tod-sun { opacity: var(--ws, 0); }
.tod-l.tod-nit { opacity: var(--wn, 0); }
.tod-ready > picture { visibility: hidden; transition: visibility 0s .5s; }
/* Fenster ohne Panorama: Tageszeit-Grading ueber dem Foto */
.tod-grade i { position: absolute; inset: 0; display: block; opacity: 0; }
.tod-g-eve { background: linear-gradient(180deg, rgba(255,120,40,.55), rgba(255,160,70,.18) 55%, rgba(120,40,60,.35)); mix-blend-mode: soft-light; opacity: var(--we, 0) !important; }
.tod-g-sun { background: linear-gradient(180deg, rgba(255,150,190,.55), rgba(255,210,150,.2) 55%, rgba(110,80,140,.3)); mix-blend-mode: soft-light; opacity: var(--ws, 0) !important; }
.tod-g-night { background: linear-gradient(180deg, #050a1c, #0a1630); mix-blend-mode: multiply; opacity: calc(var(--wn, 0) * .7) !important; }
.tod-g-stars { background:
  radial-gradient(1.2px 1.2px at 12% 14%, #fff, transparent), radial-gradient(1px 1px at 34% 8%, #fff, transparent),
  radial-gradient(1.4px 1.4px at 58% 18%, #fff, transparent), radial-gradient(1px 1px at 76% 10%, #fff, transparent),
  radial-gradient(1.2px 1.2px at 88% 26%, #fff, transparent), radial-gradient(1px 1px at 22% 30%, #fff, transparent),
  radial-gradient(1px 1px at 46% 34%, #cde, transparent), radial-gradient(1.2px 1.2px at 68% 38%, #fff, transparent);
  opacity: 0 !important; }
/* Rahmen/Laibung im Dunkeln */
/* Rahmenring nachts abdunkeln (nur Ring, Scheibe bleibt) */
.tod-dim { position: absolute !important; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background: #0a1224; padding: var(--ds2-window-frame);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: calc(var(--wn, 0) * .97); }
.ds2-window.kp-hero__window[data-drag] { box-shadow:
  0 -2px 3px color-mix(in srgb, var(--ink) 38%, transparent),
  0 0 0 4px color-mix(in srgb, color-mix(in srgb, var(--cabin-blende-2) 55%, var(--ink)) calc((1 - var(--wn, 0) * .75) * 100%), #0a1224),
  0 3px 3px 5px color-mix(in srgb, #fff calc((1 - var(--wn, 0)) * 45%), transparent) !important; }
.ds2-window.kp-hero__window[data-drag] { background-blend-mode: normal; }
.tod-surround { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: #0a1224; opacity: calc(var(--wn, 0) * .7); }
.kp-flight-window__reveal > .ds2-window { position: relative; z-index: 1; }
/* Seite: Schleier + Abendlicht, ein einziger Layer je, nur opacity */
#tod-veil, #tod-warm { position: fixed; inset: 0; pointer-events: none; opacity: 0; will-change: opacity; contain: strict; }
#tod-veil { z-index: 60; background: #5d5fa6; mix-blend-mode: multiply; }
#tod-warm { z-index: 59; mix-blend-mode: soft-light; }
#tod-warm[data-k="eve"] { background: linear-gradient(180deg, #ff7a2e, #ffb35c 60%, #8a3a5a); }
#tod-warm[data-k="sun"] { background: linear-gradient(180deg, #ff93b8, #ffd59a 60%, #6b5a9a); }
@media (prefers-reduced-motion: reduce) { .tod-drift { animation: none; transform: translate3d(-20%, 0, 0); } .tod-l, .tod-pano { transition: none; } }

.ds2-window.kp-hero__window[data-drag] > button.kp-flight-window__shade { filter: brightness(calc(1 - var(--wn, 0) * .5)); }

.kp-ai-note { display: block; margin-top: 6px; opacity: .75; font-size: .92em; }

/* Wolken: eine gemeinsame Schicht, pro Fenster der passende Ausschnitt (Versatz nach Seitenposition, gleiche Phase), nur transform */
.tod-clouds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; -webkit-mask-image: linear-gradient(#000 22%, transparent 46%); mask-image: linear-gradient(#000 22%, transparent 46%); }
.tod-clouds > span { position: absolute; top: 0; left: 0; height: 100%; aspect-ratio: 4 / 1; background-color: rgb(var(--cc, 255 255 255)); opacity: var(--co, .8);
  -webkit-mask: url(/img/clouds.webp) repeat-x 0 0 / 50% 62%; mask: url(/img/clouds.webp) repeat-x 0 0 / 50% 62%;
  will-change: transform; animation: tod-cloud 150s linear infinite; }
@keyframes tod-cloud { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.tod-off .tod-clouds > span { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .tod-clouds > span { animation: none; } }
/* Symmetrische Kabinenfensterform (Stadion): oben und unten gleich */
.ds2-window.kp-hero__window[data-drag], .ds2-window.kp-hero__window[data-drag]::before, .ds2-window.kp-hero__window[data-drag]::after { border-radius: 50% 50% 50% 50% / 36% 36% 36% 36%; }
/* Aeussere Huelle (Schale + Reveal): gleiche symmetrische Stadionform, nachts komplett dunkel */
.kp-flight-window:has(.ds2-window[data-drag]), .kp-flight-window:has(.ds2-window[data-drag]) > .kp-flight-window__reveal, .kp-flight-window:has(.ds2-window[data-drag])::before { border-radius: 50% 50% 50% 50% / 36% 36% 36% 36%; }
.kp-flight-window:has(.ds2-window[data-drag])::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: #0a1224; opacity: calc(var(--wn, 0) * .93); pointer-events: none; }

/* Easter Egg: Fluegel ueber mehrere Fenster */
.ds2-window.kp-hero__window[data-drag] > button.kp-flight-window__shade { z-index: 4; }
.tod-wing { position: absolute !important; inset: var(--ds2-window-frame) !important; overflow: hidden; border-radius: inherit; z-index: 3; pointer-events: none; display: none; }
.tod-wing > b { position: absolute; inset: 0; background: url(/img/wing.svg) no-repeat; background-size: var(--wl, 765px) 100%; background-position: var(--wx, -9999px) 0;
  filter: brightness(calc(1 - var(--wn, 0) * .6)) sepia(calc(var(--we, 0) * .35)); }
/* Positionslichter an der Fluegelspitze (links, Flug nach rechts): rot dauerhaft, weiss als Blitz */
.tod-wing::before, .tod-wing::after { content: ""; position: absolute; border-radius: 50%; left: calc(var(--wx, -9999px) + var(--wl, 765px) * .078); top: 19%; }
.tod-wing::before { width: 9px; height: 9px; margin: 0 0 0 1px; background: #ff3b30; box-shadow: 0 0 11px 4px rgb(255 59 48 / .55); opacity: calc(.45 + var(--wn, 0) * .55); }
.tod-wing::after { width: 7px; height: 7px; margin: 2px 0 0 20px; background: #fff; box-shadow: 0 0 12px 5px rgb(255 255 255 / .7); animation: tod-strobe 1.7s steps(1) infinite; }
@keyframes tod-strobe { 0%, 86% { opacity: 0; } 88%, 92% { opacity: 1; } 94%, 97% { opacity: 0; } 98%, 100% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .tod-wing::after { animation: none; opacity: 0; } }
.ds-card[data-wing] .tod-wing { display: block; }
/* Fluegel vorerst deaktiviert (Kevin 01:07) */ .tod-wing{display:none!important}