/* ===== Isometrische Würfel-Reihe + Kachelboden =====
   Wichtig (Safari): kein filter/clip-path/overflow im Ruhezustand auf
   Vorfahren von .iso-cube / .floor-plane (preserve-3d). */

/* --- Bühne: Würfel-Reihe --- */

.cubes-stage {
  --cube: clamp(190px, 24vh, 280px);     /* Kantenlänge aktiver Würfel */
  position: relative;
  height: calc(var(--cube) * 1.75);
  perspective: 1400px;
}
/* Mobile: kleinerer aktiver Würfel → die in die Tiefe gestaffelten Seiten-
   Würfel (rechts) ragen weniger über den schmalen Viewport-Rand. */
@media (max-width: 760px) {
  .cubes-stage { --cube: clamp(140px, 42vw, 200px); }
}

/* dünne Bodenlinie + Reflexions-Schein (Original: schwebende Würfel über Linie) */
.cubes-floorline {
  position: absolute;
  left: 0; right: 0;
  top: 72%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.16) 30%, rgb(255 255 255 / 0.16) 70%, transparent);
  pointer-events: none;
}
.cubes-floorline::after {
  content: '';
  position: absolute;
  left: 15%; right: 15%;
  top: 1px;
  height: 90px;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgb(120 120 124 / 0.10), transparent 70%);
  pointer-events: none;
}

/* Slot = Würfel + Name; Position/Tiefe/Opacity steuert cubes.js */
.cube-slot {
  position: absolute;
  left: 0;
  top: 8%;
  width: var(--cube);
  will-change: transform, opacity;
}

.iso-scene {
  position: relative;
  display: block;
  width: var(--cube);
  height: var(--cube);
  cursor: pointer;
}
.iso-scene:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; border-radius: 4px; }

/* Isometrische Pose: zwei Frontflächen + Deckel sichtbar */
.iso-cube {
  position: absolute;
  inset: 12% 0 0 0;
  display: block;
  width: 76%;
  aspect-ratio: 1;
  margin-inline: auto;
  transform-style: preserve-3d;
  transform: rotateX(-24deg) rotateY(-38deg);
}

.iso-face {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: #0a0b0e;                       /* dunkler, wie das Startseiten-Feld */
  outline: 1px solid rgb(255 255 255 / 0.05);
  backface-visibility: hidden;
}
.iso-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  pointer-events: none;
  user-select: none;
}

.iso-face--front { transform: translateZ(calc(var(--cube) * 0.38)); }
.iso-face--side  { transform: rotateY(90deg) translateZ(calc(var(--cube) * 0.38)); }
.iso-face--top   {
  transform: rotateX(90deg) translateZ(calc(var(--cube) * 0.38));
  /* identisches Deckel-Material wie das Startseiten-Feld (.pf-top):
     tiefdunkle, fast schwarze Basis + schmaler Sheen an der Oberkante */
  background:
    linear-gradient(150deg, rgb(255 255 255 / .12) 0%, rgb(255 255 255 / 0) 22%),
    linear-gradient(202deg, #141519 0%, #08090c 48%, #030304 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .045), inset 0 1px 0 rgb(255 255 255 / .10);
}

/* statisches Flächen-Shading (Licht von vorn rechts) + glänzender Ober­kanten-Sheen
   wie auf der Startseite → Screenshots lesen heller/glänzend statt matt/muddy */
.iso-face--front::after,
.iso-face--side::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.iso-face--front::after {
  background:
    linear-gradient(160deg, rgb(255 255 255 / .10), transparent 22%),
    rgb(0 0 0 / 0.06);
}
.iso-face--side::after  {
  background:
    linear-gradient(160deg, rgb(255 255 255 / .08), transparent 20%),
    linear-gradient(100deg, rgb(0 0 0 / 0.24), rgb(0 0 0 / 0.42));
}

/* weicher Schatten unterm Würfel */
.iso-scene::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -14%;
  width: 110%;
  height: 17%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgb(0 0 0 / 0.5), transparent 66%);
  pointer-events: none;
}

.cube-name {
  margin: 1.1rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  font-weight: 500;
  text-align: center;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
}

/* Projekt-Panel unter der Reihe */
.project-panel { text-align: center; }
.project-panel__meta { margin-bottom: 0.35rem; }
.project-panel__desc { color: var(--muted); max-width: 60ch; margin: 0 auto; font-size: 0.95rem; }

/* --- Kachelboden im Hero (Video-Ersatz) --- */

/* Boden-Textur zentral (wird von .fb-top UND der Würfel-Oberseite .pr-top genutzt,
   damit der Würfel-Deckel exakt wie eine Bodenkachel aussieht) */
:root {
  --tile-bg: linear-gradient(180deg, #16171b, #0b0c0f 75%);
  --tile-radius: 1px;
  --tile-edge: inset 0 0 0 1px rgb(255 255 255 / 0.05);
}

/* clippt die projizierten Boden-Überstände (sonst entsteht Scroll-Overflow) */
.floor-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.floor-stage {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 174%;                         /* sehr weite Halle wie forthetimes */
  height: 70%;                         /* reicht weiter nach vorne (mehr Boden im Vordergrund) */
  transform: translateX(-50%);
  perspective: 860px;
  perspective-origin: 50% 0%;
}
/* Mobile: Boden kommt nach vorne (breit), endet aber HINTEN tiefer (kleinere
   Höhe = niedrigerer Horizont) → das Monument bekommt oben wieder Platz.
   Projekt-Würfel kleiner, damit sie maßstäblich zu den Bodenkacheln passen. */
@media (max-width: 760px) {
  .floor-stage { width: 210%; height: 62%; perspective: 760px; }
  /* Projekt-Würfel kleiner (maßstäblich zum Boden) + nach unten, damit sie
     unter der Schrift im vorderen Boden sitzen statt dahinter. */
  .proj-cubes { --w-base: clamp(50px, 13vw, 76px); transform: translateY(8%); }

  /* Vorderen Boden NICHT ins Schwarz abdunkeln → das Gitter bleibt bis ganz
     nach vorne sichtbar, damit die unteren Würfel auf dem Boden stehen statt
     auf Schwarz zu „schweben". Hellere Gitterlinien + angehobene Nah-Basis. */
  .floor-plane {
    background:
      repeating-linear-gradient(0deg,  rgb(190 210 230 / 0.11) 0 1px, transparent 1px 2.4%),
      repeating-linear-gradient(90deg, rgb(190 210 230 / 0.10) 0 1px, transparent 1px 2.0%),
      linear-gradient(to top, #11141a 0%, #0f1218 45%, #14171d 100%);
    background-blend-mode: screen, screen, normal;
  }
  .floor-fade {
    background:
      radial-gradient(ellipse 16% 80% at 50% 0%, rgb(226 236 246 / 0.42), transparent 62%),
      radial-gradient(ellipse 72% 26% at 50% 0%, rgb(200 215 230 / 0.26), transparent 78%),
      radial-gradient(ellipse 130% 92% at 50% 22%, transparent 66%, rgb(0 0 0 / 0.28) 100%),
      linear-gradient(to bottom, transparent 62%, rgb(8 9 13 / 0.10) 86%, rgb(6 7 11 / 0.34) 100%);
  }
}

/* Boden = EINE gekippte Ebene mit feinem CSS-Gitter (statt vieler DOM-Kacheln):
   die rotateX-Perspektive verdichtet die gleichmäßigen Linien zum Horizont hin →
   echter, beliebig feiner Perspektiv-Boden, quasi gratis. Dunkle, zum Horizont
   aufhellende Basis + feine, leicht leuchtende Rasterlinien (Kachelkanten). */
.floor-plane {
  position: absolute;
  inset: 0;
  transform: rotateX(74deg);
  transform-origin: 50% 0%;
  background:
    repeating-linear-gradient(0deg,  rgb(186 206 226 / 0.07) 0 1px, transparent 1px 2.4%),
    repeating-linear-gradient(90deg, rgb(186 206 226 / 0.06) 0 1px, transparent 1px 2.0%),
    linear-gradient(to top, #08090c 0%, #0d0f14 50%, #14171d 100%);
  background-blend-mode: screen, screen, normal;
}

/* --- Boden-WELLE (Intro): temporäres Kachel-Grid, das beim Hand-off als Welle
   vom Horizont nach vorne „einfliegt" und dann an das ruhige .floor-plane-Gitter
   übergibt. Liegt deckungsgleich auf der gekippten Boden-Ebene (gleiche rotateX-
   Pose). preserve-3d, damit die per gsap gesetzte z-Anhebung je Kachel 3D wirkt. --- */
.floor-tiles {
  position: absolute;
  inset: 0;
  transform: rotateX(74deg);
  transform-origin: 50% 0%;
  transform-style: preserve-3d;
  display: grid;
  gap: 2px;
  pointer-events: none;
}
.floor-tile {
  background:
    linear-gradient(180deg, rgb(40 47 58 / 0.6), rgb(13 15 19 / 0.15));
  box-shadow: inset 0 0 0 1px rgb(186 206 226 / 0.16);
  border-radius: 1px;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

/* --- Projekt-Würfel = gerenderte BILDER des Nutzers (assets/img/cube-render/*.png).
       Tauchen aus dem Boden auf und versinken wieder komplett. Keine flache
       (blau schattierte) Boden-Kachel mehr am Spot. --- */

.proj-cubes {
  position: absolute;
  inset: 0;
  z-index: 1;                          /* über dem Boden, unter den Hero-Texten */
  pointer-events: none;
  --w-base: clamp(74px, 8vw, 138px);   /* Würfel-Breite (klein, weiter hinten) */
}
/* Anker-Punkt am Boden (left/top %); Kinder sitzen mit Unterkante hier. */
.lift {
  position: absolute;
  --w: calc(var(--w-base) * var(--s, 1));
  --h: calc(var(--w) * 1.16);          /* höher als das Render (~1.1) → Deckel wird NICHT geclippt */
  width: 0; height: 0;
}
/* Clip-Box: Unterkante am Boden-Punkt, overflow:hidden → NUR was unter der
   Bodenlinie liegt wird abgeschnitten („taucht aus dem Boden auf"). Die Box
   ist höher als der Würfel, damit der DECKEL oben nicht abgeschnitten wird. */
.lift-clip {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: var(--w); height: var(--h);
  overflow: hidden;
}
/* das freigestellte Render; gsap schiebt es per translateY rein/raus. */
.cube-img {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: auto;
  display: block;
}
/* Glänzende Boden-SPIEGELUNG: gespiegeltes Render, das an der Bodenlinie
   ansetzt und nach unten in den Boden ausfadet (nasser Boden). Liegt AUSSERHALB
   der `.lift-clip` (wird nicht abgeschnitten). Opacity steuert gsap (Zyklus). */
.lift-reflect {
  position: absolute;
  left: 50%; top: 0;                   /* Box beginnt an der Bodenlinie, reicht nach unten */
  width: var(--w); height: auto;
  max-width: none;                     /* globales img{max-width:100%} würde an .lift (Breite 0) auf 0 clampen */
  transform: translateX(-50%) scaleY(-1);   /* in-place gespiegelt (origin center) */
  opacity: 0;                          /* Startwert; Zyklus fadet auf REFLECT_ALPHA */
  pointer-events: none;
  /* dicht an der Bodenlinie, fadet nach unten aus (Maske wird mit-gespiegelt,
     daher „transparent oben → opak unten" = nach dem Flip dicht am Boden). */
  -webkit-mask-image: linear-gradient(to bottom, transparent 38%, rgb(0 0 0 / 0.9) 100%);
          mask-image: linear-gradient(to bottom, transparent 38%, rgb(0 0 0 / 0.9) 100%);
}
/* weicher Kontakt-Schatten am Boden (erdet den aufgetauchten Würfel) */
.lift-shadow {
  position: absolute;
  left: 50%; bottom: 0;
  width: calc(var(--w) * 1.15);
  height: calc(var(--w) * 0.26);
  transform: translate(-50%, 36%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(0 0 0 / 0.55), transparent 72%);
  pointer-events: none;
}
/* Horizont: Boden läuft hinten ins helle Mittel-Licht aus, vorne dezent dunkler.
   Liegt über den Kacheln (gibt die Boden-Spiegelung des Horizont-Lichts). */
.floor-fade {
  position: absolute;
  inset: 0;
  background:
    /* nasse Boden-Spiegelung: heller Lichtstreifen vom Horizont zum Betrachter (Mitte) */
    radial-gradient(ellipse 13% 80% at 50% 0%, rgb(226 236 246 / 0.5), transparent 60%),
    /* Horizont-Glühband */
    radial-gradient(ellipse 58% 22% at 50% 0%, rgb(200 215 230 / 0.32), transparent 74%),
    /* weiche Rand-Vignette (Tiefe) */
    radial-gradient(ellipse 92% 84% at 50% 28%, transparent 52%, rgb(0 0 0 / 0.48) 100%),
    /* smoother Blend-Out nach unten: mehrstufig, gradueller Übergang dunkel→Boden,
       kein harter schwarzer Schnitt mehr (Vordergrund-Kacheln bleiben länger sichtbar) */
    linear-gradient(to bottom,
      transparent 44%,
      rgb(6 7 10 / 0.18) 68%,
      rgb(5 5 8 / 0.5) 86%,
      rgb(2 2 4 / 0.9) 100%);
}

/* --- Raum-Hintergrund: Horizont-Licht + Marken-Monument (hinter dem Boden) --- */

.room-bg {
  position: absolute;
  inset: 0;
  z-index: 0;                          /* hinter .floor-clip (z-index 1) */
  pointer-events: none;
  overflow: hidden;
  /* weiche Grund-Aufhellung: hebt das reine Schwarz im oberen Hero leicht an
     (kühles Dunkelgrau-Blau), damit die beleuchtete Halle/das Glühen NICHT
     hart in Schwarz abbricht, sondern graduell in einen angehobenen Hintergrund
     ausfadet. Sehr dezent, fadet zu den Rändern/nach unten in reines Schwarz. */
  background:
    /* breites Horizont-Leuchten über die volle Breite → die Seitenkanten von
       Boden und Glühen faden in den Hintergrund statt hart in Schwarz */
    radial-gradient(ellipse 100% 36% at 50% 40%,
      rgb(40 49 64 / 0.42) 0%,
      transparent 78%),
    /* allgemeine Grund-Aufhellung des oberen Raums */
    radial-gradient(ellipse 160% 85% at 50% 22%,
      rgb(32 39 51 / 0.55) 0%,
      rgb(20 25 33 / 0.32) 46%,
      transparent 82%),
    radial-gradient(ellipse 170% 55% at 50% 0%,
      rgb(46 55 71 / 0.40) 0%,
      transparent 62%);
}

/* weiches Gegenlicht, konzentriert hinter dem Monument am Horizont.
   gsap lässt es sehr langsam „atmen" (opacity/scale). */
.room-light {
  position: absolute;
  left: 50%;
  top: 40%;
  width: min(66vw, 880px);             /* breite, helle Halle-Atmosphäre */
  height: min(64vh, 640px);
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse 56% 58% at 50% 54%, rgb(238 244 250 / 0.82), rgb(150 175 200 / 0.22) 40%, rgb(120 145 175 / 0.08) 66%, transparent 88%),
    radial-gradient(ellipse 7% 64% at 50% 52%, rgb(255 255 255 / 0.95), transparent 74%);
  filter: blur(6px);
}

/* großes Marken-Monument als Architektur-Silhouette, ragt vom Horizont auf —
   dunkle Form mit kräftigem Gegenlicht-Saum (drop-shadow in Lichtfarbe). */
.room-monument {
  position: absolute;
  left: 50%;
  top: 52%;                            /* Basis am Horizont, ragt hoch */
  width: min(44vw, 600px);             /* groß/monumental */
  transform: translate(-50%, -100%);
  color: #050507;
  filter:
    drop-shadow(0 0 26px rgb(228 238 248 / 0.85))
    drop-shadow(0 0 64px rgb(175 200 225 / 0.5))
    drop-shadow(0 0 130px rgb(150 180 210 / 0.32))
    drop-shadow(0 3px 10px rgb(0 0 0 / 0.9));
}
.monument-logo {
  display: block;
  width: 100%;
  height: auto;
}

/* Mobile/Portrait: der hohe, schmale Viewport lässt den Boden (Höhe 70% von
   unten) weit hochreichen, während 44vw das Monument winzig macht → es
   verschwindet hinter dem Boden. Auf kleinen Screens deutlich vergrößern (und
   minimal höher ansetzen), damit die Würfel-Spitze klar über den Horizont ragt. */
@media (max-width: 760px) {
  .room-monument {
    width: min(66vw, 280px);   /* Peak oben, lässt darunter Platz für die Schrift */
    top: 44%;
  }
}

/* --- Filmisches Würfel-Intro (Overlay, von js/cinematic.js gebaut) --- */

.cine-stage {
  --cs: clamp(220px, min(46vh, 56vw), 410px);   /* Kantenlänge Intro-Würfel */
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  display: grid;
  place-items: center;
}

/* Kachelwand + Lichtschein (reine Gradients, kein Asset) */
.cine-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 50% 46%, rgb(110 110 116 / 0.16), transparent 65%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 96px),
    var(--bg);
}
.cine-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 120% 90% at 50% 50%, transparent 45%, rgb(0 0 0 / 0.55) 100%);
}

.cine-scene {
  position: relative;
  width: var(--cs);
  aspect-ratio: 1;
  perspective: calc(var(--cs) * 3.2);
  transform: translateY(-3vh);
}

/* eigener Wrapper fürs Dauerschweben (kollidiert nicht mit der Fahrt) */
.cine-float {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.cine-cube {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* kein will-change: opacity — Grouping-Properties drücken preserve-3d platt */
  will-change: transform;
}

/* gravierte Namens-Zeile am Würfelsockel (fährt im 3D-Raum mit) */
.cine-plate {
  position: absolute;
  left: -25%;
  right: -25%;
  top: 108%;
  transform: translateZ(calc(var(--cs) / 2));
  text-align: center;
  font-size: clamp(0.72rem, 1.2vw, 0.92rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgb(244 243 239 / 0.55);
  white-space: nowrap;
  pointer-events: none;
}

.cine-face {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: #0e0e11;
  outline: 1px solid rgb(255 255 255 / 0.09);
  backface-visibility: hidden;
}
.cine-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  pointer-events: none;
  user-select: none;
}

.cine-face--front  { transform: translateZ(calc(var(--cs) / 2)); }
.cine-face--side   { transform: rotateY(90deg) translateZ(calc(var(--cs) / 2)); }

/* helle Oberkante: klare Abgrenzung am offenen Würfel (kein "Top-Shave") */
.cine-face--front,
.cine-face--side {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.26);
}

/* Rück- und Linkswand: tragen ebenfalls den Screenshot — der Würfel zeigt
   das Projekt auf ALLEN vier Seiten (oben/unten bleiben Material). So ist
   beim 360°-Spin jede Seite gleich. Heller Oberkanten-Saum wie vorne. */
.cine-face--back {
  transform: rotateY(180deg) translateZ(calc(var(--cs) / 2));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.26);
}
.cine-face--left {
  transform: rotateY(-90deg) translateZ(calc(var(--cs) / 2));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.26);
}

.cine-face--bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--cs) / 2));
  background: #08080a;
}

/* feste Oberseite — klappt nicht mehr auf, schließt den Würfel sauber ab */
.cine-face--top {
  transform: rotateX(90deg) translateZ(calc(var(--cs) / 2));
  background: linear-gradient(135deg, #2a2a2e, #101013 70%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}

/* 2D-Aufblend-Cover über der Szene (kein 3D-Vorfahre → kein Flattening) */
.cine-cover {
  position: absolute;
  inset: 0;
  background: var(--bg);
  pointer-events: none;
}

/* Abdunkelung (geschlossen) → hebt sich beim Öffnen */
.cine-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgb(0 0 0 / 0.92);
}
/* Innenlicht von oben, blendet beim Öffnen auf */
.cine-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(255 248 235 / 0.30), transparent 55%);
  mix-blend-mode: screen;
}

.cine-skip {
  position: absolute;
  right: clamp(1.2rem, 3vw, 2.4rem);
  bottom: clamp(1.2rem, 3vw, 2rem);
  min-height: 44px;
  padding: 0.6rem 1.3rem;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 999px;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: rgb(11 11 13 / 0.5);
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.cine-skip:hover, .cine-skip:focus-visible { color: var(--text); border-color: rgb(255 255 255 / 0.4); }

/* Licht-Klimax-Flash beim Zoom: neutrale weiße Lichtblüte aus der Mitte,
   maskiert den Schnitt Würfel-Textur → Live-Seite. 2D-Overlay über der Szene.
   (Der Finale-Würfel selbst sieht aus wie die anderen — kein Gold-Akzent mehr.) */
.cine-flash {
  position: absolute;
  inset: 0;
  z-index: 95;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 48%, rgb(255 255 255 / 0.92), rgb(244 244 248 / 0.5) 32%, transparent 70%);
}

/* --- reduced-motion: 3D-Elemente weg, flaches Grid an --- */
body.is-reduced .cubes-stage,
body.is-reduced .project-panel,
body.is-reduced .project-tabs,
body.is-reduced .floor-clip,
body.is-reduced .proj-cubes,
body.is-reduced .hero-video-layer { display: none; }
body.is-reduced .project-grid { display: grid; }