/*
 * Mobile-Layout (unabhaengig vom Desktop-Stylesheet).
 * Aktiv nur bei max-width: 47.99rem — siehe index.html <link media="...">.
 * Variablen (--snap-pad-x, Farben, …) kommen aus soulschool.css (:root).
 */

html {
  overscroll-behavior: none;
}

body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root {
  --brand-rail: 0px;
  --rail-content-gap: 0px;
  --page-scroll-pad-left: max(var(--snap-pad-x), env(safe-area-inset-left, 0px));
  --dock-reserve: max(3.55rem, calc(0.65rem + env(safe-area-inset-bottom, 0px)));
}

.page-scroll {
  /* Kein padding-top: sonst Papierfarbe (#paper) als heller Balken ueber Hero */
  padding-top: 0;
  padding-left: var(--page-scroll-pad-left);
  padding-right: var(--edge-right);
  overscroll-behavior: none;
  touch-action: pan-y;
  scroll-snap-type: y proximity;
}

/* Abstand fuer fixe Marke in Slide 1 + dunkler Hintergrund (kein weisser Streifen) */
#slide-willkommen.stage.stage--video {
  --willkommen-head: clamp(10.15rem, 47vmin, 14rem);
  padding-top: var(--willkommen-head);
  background: linear-gradient(180deg, #1a2522 0%, #0f1816 42%, #121d1b 100%);
  box-sizing: border-box;
  /* Padding + stage__mid(min 100dvh) war hoeher als 1 Viewport — Grid + min-height 0 auf .stage__mid */
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: stretch;
  justify-items: stretch;
  min-height: 100svh;
  min-height: 100dvh;
}

.brand-rail {
  width: 0;
  min-width: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.brand-rail .brand-stack {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 3.1rem);
  left: var(--page-scroll-pad-left);
  right: var(--edge-right);
  width: auto;
  max-width: none;
  height: auto;
  z-index: 22;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  pointer-events: none;
  /* Slide 0: groessere Skala fuer Namensschrift */
  --bs: clamp(0.52rem, 3.35vw + 0.34rem, 1.22rem);
}

/* Section 1 (Willkommen): Marke etwas tiefer + groessere Typo/Skala */
body[data-active-slide="0"] .brand-rail .brand-stack {
  top: calc(env(safe-area-inset-top, 0px) + 4.2rem);
  --bs: clamp(0.58rem, 3.95vw + 0.4rem, 1.34rem);
}

.brand-rail .brand-stack > .brand-rail__tagline {
  align-self: center;
  text-align: center;
  max-width: min(100%, 22rem);
  margin-bottom: clamp(0.28rem, 1.75vw, 0.55rem);
  font-size: clamp(0.82rem, 4.25vw, 1.18rem);
  line-height: 1.22;
  letter-spacing: 0.03em;
}

/* Slide 0 (Willkommen): groesseres Logo; ab Slide 1 beim Scrollen kompakter */
.brand-stack__logo {
  width: auto;
  max-width: min(100%, 10.35rem);
  min-width: 4.85rem;
  max-height: min(8rem, 58vmin);
  min-height: 4.35rem;
  height: auto;
  align-self: center;
  object-fit: contain;
  transition:
    max-width 0.24s ease,
    max-height 0.24s ease,
    min-width 0.24s ease,
    min-height 0.24s ease;
}

body[data-active-slide]:not([data-active-slide="0"]) .brand-stack__logo {
  max-width: min(100%, 4.35rem);
  min-width: 2.65rem;
  max-height: min(3.35rem, 27vmin);
  min-height: 2.2rem;
}

body[data-active-slide]:not([data-active-slide="0"]) .brand-rail .brand-stack {
  --bs: clamp(0.42rem, 2.75vw + 0.28rem, 1.06rem);
}

body[data-active-slide]:not([data-active-slide="0"]) .brand-rail .brand-stack > .brand-rail__tagline {
  font-size: clamp(0.66rem, 3.35vw, 0.95rem);
  margin-bottom: clamp(0.18rem, 1.4vw, 0.4rem);
}

@media (prefers-reduced-motion: reduce) {
  .brand-stack__logo {
    transition: none;
  }
}

.brand-stack__title {
  align-self: center;
  align-items: center;
  text-align: center;
  margin: calc(-2.35 * var(--bs)) 0 0;
  width: 100%;
  max-width: min(100%, 22rem);
}

.brand-stack__link {
  margin-inline: auto;
  text-align: center;
  font-size: min(3.55rem, calc(3.1 * var(--bs)));
}

body[data-active-slide]:not([data-active-slide="0"]) .brand-stack__link {
  font-size: min(2.35rem, calc(2.2 * var(--bs)));
}

.brand-rail .dock--fixed.dock--rail {
  position: fixed;
  left: var(--page-scroll-pad-left);
  right: var(--edge-right);
  bottom: max(0.35rem, env(safe-area-inset-bottom, 0px));
  top: auto;
  margin-top: 0;
  width: auto;
  max-width: none;
  align-self: stretch;
  z-index: 40;
  padding-top: 0.2rem;
  padding-bottom: 0.15rem;
}

.stage--video {
  place-items: center;
}

.stage--video .stage-video {
  justify-content: center;
}

.stage--story {
  align-items: center;
}

.stage.stage-with-nav.stage--story .stage__mid {
  align-items: center;
  padding-top: max(2.25rem, calc(0.85rem + env(safe-area-inset-top, 0px)));
  padding-bottom: max(1.35rem, calc(0.65rem + env(safe-area-inset-bottom, 0px)));
}

.stage--story .story {
  margin-inline: auto;
}

.stage.stage-with-nav.stage--video .stage__mid {
  align-items: center;
  /* Oberen Abstand liefert #slide-willkommen padding-top (dunkel) */
  padding-top: max(0.35rem, env(safe-area-inset-top, 0px));
  padding-bottom: max(2.25rem, calc(1rem + env(safe-area-inset-bottom, 0px)));
}

#slide-willkommen.stage.stage--video .stage__mid {
  min-height: 0;
}

/* Snap etwas weicher; weniger harte Kante am letzten Slide */
.stage {
  scroll-snap-stop: normal;
}

.slide-nav__btn {
  min-height: 2.75rem;
  padding: 0.45rem 0.35rem;
}

.embed {
  max-width: 100%;
}