/* ==========================================================================
   case.css – Subseiten-Template (wie Welcome, mit Galerie links)
   ========================================================================== */

/* === 1) Variablen (optional, aber praktisch) ============================ */
.page-case{
  --panel-w: 1710px;     /* Panelbreite auf Full HD */
  --gallery-w: 1297px;   /* Galeriebereite auf Full HD (links) */
}

.page-case{
  min-height: 100vh;
  position: relative;
  background: #fff;
}

/* Overlay-Route: im Overlay nutzen wir das Canvas als Background */
html.js body.is-page-open.page-case canvas{
  opacity: 1;
  filter: none;
  transform: none;
}

/* wenn intro aktiv -> Canvas blur + opacity runter */
html.js body.is-page-open.page-case.is-intro canvas{
  opacity: 0.28;
  filter: blur(7px) brightness(1.12);
}

/* OUTRO: wie Welcome – Canvas wieder normal, Scrim weich aus */
html.js body.is-page-open.page-case.is-outro canvas{
  transition: filter 180ms ease, opacity 180ms ease, transform 180ms ease;
  opacity: 1;
  filter: none;
  transform: none;
}

html.js body.is-page-open.page-case.is-outro .page-overlay__scrim{
  opacity: 0;
  transition: opacity 180ms ease;
}

/* optional: Pseudo-Background im Overlay deaktivieren (sonst “doppelt”) */
body.is-page-open.page-case::before,
body.is-page-open.page-case::after{
  content: none !important;
}

/* Background Standbild (Endzustand) */
.page-case::before{
  content:"";
  position: fixed;
  inset: 0;
  background: var(--case-bg) center / cover no-repeat;
  opacity: 0.30;
  filter: blur(10px);
  transform: translateZ(0);
  z-index: -1;
  pointer-events: none;
}

/* JS: Startzustand (scharf + volle Deckkraft), Transition wird hier definiert */
.js .page-case::before{
  opacity: 1;
  filter: blur(0px);
  transition:
    opacity 900ms ease 420ms,
    filter  900ms ease 420ms;
  will-change: opacity, filter;
}

/* Wenn pageIntro.js "is-intro" setzt → animiert zum Endzustand */
.js .page-case.is-intro::before{
  opacity: 0.30;
  filter: blur(10px);
}

.case{
  height: calc(100dvh - var(--footer-h));
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;

  --padX: clamp(16px, 3vw, 42px);
  --padTop: clamp(18px, 3vw, 42px);
  --padBot: clamp(18px, 3vw, 42px);

  padding: var(--padX);
  padding-top: var(--padTop);
  padding-bottom: var(--padBot);

  --panelEff: min(var(--panel-w), 92vw);
  --galleryEff: min(var(--gallery-w), 67.6vw);

  --safeH: calc(100dvh - var(--footer-h) - var(--padTop) - var(--padBot));
}

/* Panel */
.case__panel{
  width: var(--panelEff);

  --idealH: calc(var(--galleryEff) * 0.5625); /* 16:9 */
  height: min(var(--idealH), var(--safeH));

  padding: 0;
  border-radius: 22px;
  overflow: hidden;
  background: var(--sf-darkgrey);
  color: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  position: relative;
  display: flex;
  --inset: clamp(14px, 1.6vw, 25px);      /* wie home-btn top */
  --copyPad: clamp(18px, 2.2vw, 28px);    /* dein Text-Padding */
  --navH: 42px;
}

/* Panel Intro (wie Welcome) */
.js .case__panel{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 520ms ease 200ms, transform 520ms ease 200ms;
  will-change: opacity, transform;
}
.js .page-case.is-intro .case__panel{
  opacity: 1;
  transform: translateY(0);
}

.case__inner{
  flex: 1;
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-columns: minmax(0, var(--galleryEff)) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

.case__gallery{ height: 100%; }
.case__stage{ 
    height: 100%; 
    width: 100%; 
    contain: layout paint; 
    transform: translateZ(0);
    position: relative;
    isolation: isolate;
}

/* Galerie */
.case__gallery{
  min-width: 0;
  height: 100%;
  position: relative;
}

.case__stage{
  height: 100%;
  width: 100%;
  box-sizing: border-box;

  margin: 0;
  padding: 0;          /* <- wichtig */
  border-radius: 0;
  overflow: hidden;
  background: rgba(0,0,0,0.35);

  display: grid;
  place-items: center;
}

.case__media{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  position: absolute;
  inset: 0;
}

.case__media[data-fit="cover"]{
  object-fit: cover;
}

/* --- Gallery switch effect (subtle crossfade) --- */

.case__stage{
  position: relative;           /* wichtig für absolute children */
}

/* Media füllt Stage, ohne Layout-Reflow beim Wechsel */
.case__stage .case__media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Images: fade + tiny zoom + soft blur */
img.case__media{
  transition: opacity 220ms ease, transform 220ms ease, filter 220ms ease;
  will-change: opacity, transform, filter;
}

img.case__media.is-enter{
  opacity: 0;
  transform: scale(1.015);
  filter: blur(2px);
}

img.case__media.is-leave{
  opacity: 0;
  transform: scale(0.99);
  filter: blur(2px);
}

/* Videos: nur fade (keine Zoom/Blur, sonst wirkt es schnell “kaputt”) */
video.case__media{
  transition: opacity 220ms ease;
  will-change: opacity;
}
video.case__media.is-enter{ opacity: 0; }
video.case__media.is-leave{ opacity: 0; }

/* Reduced motion: sofort umschalten */
@media (prefers-reduced-motion: reduce){
  img.case__media, video.case__media{
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Copy */
.case__copy{
  min-width: 0;

  /* das ersetzt das alte Panel-Padding */
  padding: clamp(18px, 2.2vw, 28px);

  display: flex;
  flex-direction: column;
  justify-content: center; /* <- vertikal zentriert */
  gap: 14px;
}

.case__copy h1{
  margin: 0;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
  font-weight: 700;
  color: var(--sf-orange);
}

.case__copy p{
  margin: 0;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
}

.case__meta{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
}

/* Nav: kleiner Abstand wie gewünscht */
.case__nav--underText{
  gap: 5px;
}

/* Buttons: gleiche Maße wie .home-btn */
.case__navbtn{
  padding: 0;
  box-sizing: border-box;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;

  width: clamp(56px, 4.2vw, 80px);
  height: clamp(30px, 2.2vw, 42px);

  border: 0;
  background: transparent;

  display: grid;
  place-items: center;

  cursor: pointer;
}

.case__navbtn:disabled{
  opacity: 0.45;
  cursor: default;
}

/* SVG füllt den Button */
.nav-btn__svg{ width: 100%; height: 100%; display: block; }

/* Farben + Transition: identisch zum Home-Button */
.nav-btn__bg{
  fill: var(--sf-orange);
  transition: fill 180ms ease;
}

.nav-btn__iconFill{
  fill: #000;
  transition: fill 180ms ease;
}

.nav-btn__iconStroke{
  fill: none;
  stroke: #000;
  stroke-width: 4px;
  stroke-miterlimit: 10;
  transition: stroke 180ms ease;
}

/* Keyboard: bleibt global (gut für Accessibility) */
.case__navbtn:focus-visible .nav-btn__bg{ fill:#fff; }
.case__navbtn:focus-visible .nav-btn__iconFill{ fill:var(--sf-orange); }
.case__navbtn:focus-visible .nav-btn__iconStroke{ stroke:var(--sf-orange); }

/* Desktop / echte Hover-Geräte */
@media (hover: hover) and (pointer: fine){
  .case__navbtn:hover .nav-btn__bg{ fill:#fff; }
  .case__navbtn:hover .nav-btn__iconFill{ fill:var(--sf-orange); }
  .case__navbtn:hover .nav-btn__iconStroke{ stroke:var(--sf-orange); }
}

/* Touch: kurzer Flash beim Tippen */
@media (hover: none) and (pointer: coarse){
  .case__navbtn:active .nav-btn__bg{ fill:#fff; }
  .case__navbtn:active .nav-btn__iconFill{ fill:var(--sf-orange); }
  .case__navbtn:active .nav-btn__iconStroke{ stroke:var(--sf-orange); }
}

/* Klick immer auf dem Button, nicht auf SVG-Innereien */
.nav-btn__svg,
.nav-btn__svg *{
  pointer-events: none;
}

.case__navbtn:disabled{
  opacity: 0.45;
  cursor: default;
}

/* Fullscreen Look */
.case__stage:fullscreen{
  background: #000;
}
.case__stage:fullscreen .case__media{
  object-fit: contain;
}

/* ---------------- Animation (Case wie Welcome) ---------------- */

/* Panel rein (von unten) */
html.js body.page-case .case__panel{
  opacity: 0;
  transform: translateY(200px) scale(0.985);
  transition: opacity 350ms ease, transform 350ms ease;
  will-change: opacity, transform;
}

html.js body.page-case.is-intro .case__panel{
  opacity: 1;
  transform: none;
}

/* Inhalte: Galerie, Text, Nav (von oben) */
html.js body.page-case .case__gallery,
html.js body.page-case .case__copy > *,
html.js body.page-case .case__nav{
  opacity: 0;
  transform: translateY(-150px);
  transition: opacity 400ms ease, transform 400ms ease;
  will-change: opacity, transform;
}

html.js body.page-case.is-intro .case__gallery,
html.js body.page-case.is-intro .case__copy > *,
html.js body.page-case.is-intro .case__nav{
  opacity: 1;
  transform: none;
}

/* Stagger (ähnlich Welcome) */
html.js body.page-case.is-intro .case__gallery{ transition-delay: 120ms; }

html.js body.page-case.is-intro .case__copy > *:nth-child(1){ transition-delay: 180ms; }
html.js body.page-case.is-intro .case__copy > *:nth-child(2){ transition-delay: 260ms; }
html.js body.page-case.is-intro .case__copy > *:nth-child(3){ transition-delay: 340ms; }

html.js body.page-case.is-intro .case__nav{ transition-delay: 420ms; }

/* Während Intro inert (optional, wie Welcome) */
.js .page-case .case__gallery,
.js .page-case .case__copy,
.js .page-case .case__nav{
  pointer-events: none;
}
.js .page-case.is-intro .case__gallery,
.js .page-case.is-intro .case__copy,
.js .page-case.is-intro .case__nav{
  pointer-events: auto;
}

/* Home-Button immer klickbar */
.js .page-case .home-btn{ pointer-events: auto; }

/* Intro-Transitions NUR während des Intros (bis is-ready gesetzt ist) */
/* nach dem Intro: Transitions AUS, aber NICHT während OUTRO */
html.js body.page-case.is-ready:not(.is-outro) .case__panel,
html.js body.page-case.is-ready:not(.is-outro) .case__gallery,
html.js body.page-case.is-ready:not(.is-outro) .case__copy > *,
html.js body.page-case.is-ready:not(.is-outro) .case__nav{
  transition: none !important;
  will-change: auto !important;
}

html.js body.page-case.is-ready:not(.is-outro) .case__gallery,
html.js body.page-case.is-ready:not(.is-outro) .case__copy > *,
html.js body.page-case.is-ready:not(.is-outro) .case__nav{
  transition-delay: 0ms !important;
}

/* Safety: wenn irgendwo hidden benutzt wird, ist es wirklich weg */
.case__navbtn[hidden]{ display: none !important; }

/* Wenn nur Zoom da ist: links starten */
.case__nav.is-single{
  justify-content: flex-start;
}

@media (prefers-reduced-motion: reduce){
  html.js body.page-case .case__panel,
  html.js body.page-case .case__gallery,
  html.js body.page-case .case__copy > *,
  html.js body.page-case .case__nav{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


@media (min-width: 921px){
  .case__nav--underText{
    position: absolute;
    left: calc(var(--galleryEff) + var(--copyPad));
    bottom: var(--inset);

    display: flex;
    gap: 5px;        /* <- hier 5px */
    margin: 0;
    z-index: 6;
  }
}

/* Responsive */
@media (max-width: 920px){
  .case__nav--underText{
    position: static;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-inline: var(--copyPad);
    gap: 5px;
    margin-top: 12px;
    box-sizing: border-box;
  }

  .case__nav--underText.is-single{
    justify-content: flex-start; /* Zoom ganz links */
    gap: 0;                      /* kein Abstand „ins Leere“ */
  }

  .case__copy{
    padding-bottom: clamp(18px, 2.2vw, 28px);
  }
}


/* Reduced motion: nix “verstecken” */
@media (prefers-reduced-motion: reduce){
  .js .page-case::before,
  .js .case__panel{
    transition: none;
  }
  .js .case__panel{
    opacity: 1;
    transform: none;
  }
}

/* ============ Fullscreen Gallery UI (robust via class) ============ */

.case__stage.is-fs{
  position: relative;
  background: #000;
}

/* Nav als Overlay */
.case__stage.is-fs .case__nav{
  position: absolute;

  /* oben links ist bei Videos oft besser als unten (native Controls) */
  top: max(16px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));

  z-index: 999;
  display: flex;
  gap: 8px;

  padding: 6px;


  /* falls deine Intro-Styles dazwischenfunken */
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* Fullscreen: Buttons kompakter (auch auf Touch) */
.case__stage.is-fs .case__navbtn{
  width: 72px;
  height: 42px;
}

@media (hover: none) and (pointer: coarse){
  .case__stage.is-fs .case__navbtn{
    width: 64px;
    height: 40px;
  }
}

/* Fullscreen: Schlagschatten für die Buttons */
.case__stage.is-fs .nav-btn__svg{
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
}

/* ============================================================
   Square + Portrait Layout (Gallery oben, Controls darunter)
   Trigger: quadratisch oder hochkant
   ============================================================ */
@media (max-aspect-ratio: 1/1) {

  .case{
    /* mehr Luft oben wegen Logo */
    --padTop: clamp(84px, 10vh, 140px);

    /* unten weniger, damit die Lücke zum Footer nicht riesig wird */
    --padBot: clamp(18px, 3vh, 42px);

    padding-top: var(--padTop);
    padding-bottom: var(--padBot);

    /* optional: seitlich etwas kompakter */
    --padX: clamp(16px, 4vw, 42px);
    padding-left: var(--padX);
    padding-right: var(--padX);
  }

  .page-case{
    --panelHFactor: 0.95; /* <- HIER feinjustieren: 0.85–1.00 */
  }

  /* Panel: Höhe nicht mehr aus Gallery-Breite ableiten */
  .page-case .case__panel{
    height: calc(var(--safeH) * var(--panelHFactor));
    max-height: var(--safeH);
    overflow: hidden;              /* oder auto, wenn du scrollen willst */

    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto 1fr;   /* <- Copy bekommt den Rest */
    grid-template-areas:
      "media media"
      "nav   home"
      "copy  copy";
  }

  /* Wrapper “auflösen”, damit gallery/copy direkt ins Grid können */
  .page-case .case__inner{ display: contents; }

  /* ---------- Gallery oben ---------- */
  .page-case .case__gallery{
    grid-area: media;
    height: auto;
    min-width: 0;
  }

  .page-case .case__stage{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;      /* Gallery bleibt sichtbar */
    display: grid;
    place-items: center;
  }

  .page-case .case__media{
    width: 100%;
    height: 100%;
  }

  /* ---------- Controls-Reihe ---------- */
  .page-case .case__nav{
    grid-area: nav;
    position: static !important;

    /* KEIN extra left-shift */
    margin: 10px 0 0 0;

    /* exakt wie Textkante */
    padding-left: var(--copyPad);
    padding-right: 0;
    width: 100%;
    box-sizing: border-box;

    display: flex;
    justify-content: flex-start;
    gap: 5px;

    justify-self: stretch;
    align-self: center;
  }

  .page-case .home-btn{
    grid-area: home;
    position: static !important; /* killt absolute aus components.css */
    margin: 10px var(--copyPad) 0 0;
    align-self: center;
    justify-self: end;
  }

  .case__nav--underText{
    position: static;            /* falls sie irgendwo absolut war */
    width: 100%;
    justify-content: flex-start; /* linksbündig */
    gap: 5px;

    padding-inline: 0;

    /* optional: Abstand zur Galerie */
    margin-top: 10px;
  }


  /* ---------- Text unten ---------- */
  .page-case .case__copy{
    grid-area: copy;
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;                 /* <- vertikal zentriert im Restbereich */

    padding-inline: var(--copyPad);
    padding-block: clamp(18px, 4vh, 56px);  /* <- “Luft” oben/unten je nach Höhe */
    gap: 14px;
  }
}