@charset "UTF-8";
/* ===========================================================================
   SwissOffice Pro – Scroll-Scrub-3D-Szene
   Wird nur auf der Startseite geladen.
   Bewegung läuft ausschliesslich über transform/opacity (GPU-freundlich).
=========================================================================== */

.szene {
  position: relative;
  /* Länge der Scroll-Strecke: steuert, wie "langsam" die Kamera fährt */
  height: 620vh;
  background: linear-gradient(180deg, #f2f6fc 0%, #e8f0fb 26%, #0a1d3a 62%, #06152e 100%);
}

.szene__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}

/* Startet direkt unter der Kopfzeile, die als Glasleiste darüberliegt */
.szene--randlos { margin-top: calc(var(--nav-hoehe, 74px) * -1); }

/* --- Welt (Perspektive) -------------------------------------------------- */
/* Nur echte 3D-Objekte liegen hier drin. Hintergrundebenen gehören nach
   aussen: in einem preserve-3d-Kontext entscheidet die Tiefe über die
   Zeichenreihenfolge, nicht z-index – sonst verdeckt der Hintergrund das Gerät. */
.szene__welt {
  position: absolute;
  inset: 0;
  z-index: 2;
  perspective: 1600px;
  perspective-origin: 50% 46%;
  transform-style: preserve-3d;
  display: grid;
  place-items: center;
}

/* Weicher Lichtschein hinter dem Gerät */
.szene__aura {
  position: absolute;
  z-index: 1;
  width: 120vmax; height: 90vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(42, 126, 240, .34), rgba(42, 126, 240, 0) 72%);
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
}

/* Feines Raster als Tiefenhinweis */
.szene__raster {
  position: absolute;
  z-index: 1;
  inset: -20%;
  background-image:
    linear-gradient(rgba(122, 170, 240, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 170, 240, .16) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(60% 55% at 50% 48%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(60% 55% at 50% 48%, #000 35%, transparent 78%);
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
}

/* Foto-Kulisse: der Schreibtisch aus dem Markenbild */
.szene__kulisse {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  will-change: transform, opacity;
  pointer-events: none;
}
.szene__kulisse img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 48%;
}
.szene__kulisse::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(242, 246, 252, .55) 0%, rgba(242, 246, 252, .1) 32%, rgba(6, 21, 46, .3) 100%),
    radial-gradient(70% 55% at 50% 50%, rgba(255, 255, 255, .28), transparent 70%);
}

/* --- Das Gerät ----------------------------------------------------------- */
.geraet {
  position: relative;
  width: min(88vw, 1080px);
  transform-style: preserve-3d;
  will-change: transform, opacity;
  z-index: 3;
}

.geraet__rahmen {
  position: relative;
  border-radius: 18px;
  padding: 11px 11px 13px;
  background: linear-gradient(160deg, #e9edf4 0%, #cdd6e4 42%, #aab6c9 100%);
  box-shadow:
    0 2px 2px rgba(255, 255, 255, .7) inset,
    0 32px 60px -28px rgba(6, 21, 46, .55),
    0 70px 120px -60px rgba(6, 21, 46, .6);
}

.geraet__schirm {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 9px;
  overflow: hidden;
  background: #0d1b33;
  box-shadow: 0 0 0 1px rgba(6, 21, 46, .35) inset;
}

/* Spiegelung auf dem Glas */
.geraet__glanz {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .05) 26%, transparent 46%);
  mix-blend-mode: screen;
  will-change: opacity;
}

/* Standfuss / Sockel */
.geraet__sockel {
  position: relative;
  width: 62%;
  height: 13px;
  margin: 0 auto;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #c3ccdb 0%, #9aa7ba 60%, #7e8b9e 100%);
  box-shadow: 0 16px 26px -14px rgba(6, 21, 46, .55);
}
.geraet__sockel::before {
  content: "";
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 15%; height: 4px; border-radius: 0 0 6px 6px;
  background: rgba(6, 21, 46, .18);
}

/* --- Dokumente, die aus dem Bildschirm steigen --------------------------- */
.dokfeld {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
  z-index: 4;
  display: grid;
  place-items: center;
}

.dok {
  position: absolute;
  width: 250px;
  background: #fff;
  border-radius: 14px;
  padding: 16px 17px;
  text-align: left;
  box-shadow:
    0 2px 6px rgba(6, 21, 46, .1),
    0 26px 52px -22px rgba(6, 21, 46, .55);
  opacity: 0;
  will-change: transform, opacity;
  border: 1px solid rgba(255, 255, 255, .8);
}
.dok__kopf { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.dok__icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; }
.dok__icon svg { width: 16px; height: 16px; }
.dok__titel { font-size: 13.5px; font-weight: 680; color: #0c1b33; letter-spacing: -.01em; }
.dok__nr { font-size: 10.5px; color: #8593ab; }
.dok__zeilen { display: grid; gap: 6px; }
.dok__zeile { height: 7px; border-radius: 4px; background: #eef2f8; }
.dok__zeile--kurz { width: 55%; }
.dok__zeile--mittel { width: 78%; }
.dok__fuss {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 11px; border-top: 1px solid #eef2f8;
}
.dok__betrag { font-size: 15px; font-weight: 700; color: #0c1b33; letter-spacing: -.02em; }
.dok__marke { font-size: 10px; color: #a3aec2; font-weight: 550; }

.dok--blau .dok__icon    { background: #eaf2fe; color: #1668e3; }
.dok--gruen .dok__icon   { background: #e6f7f2; color: #0f9d76; }
.dok--violett .dok__icon { background: #eeecfe; color: #6357e3; }
.dok--rot .dok__icon     { background: #fdeded; color: #d94848; }
.dok--gelb .dok__icon    { background: #fdf3e5; color: #e0912c; }

/* --- Archiv-Wand --------------------------------------------------------- */
.archiv {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  will-change: transform, opacity;
}
.archiv__wand {
  position: relative;
  width: min(86vw, 940px);
  border-radius: var(--r-lg, 22px);
  overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .7);
  border: 1px solid rgba(255, 255, 255, .12);
}
.archiv__wand img { width: 100%; opacity: .58; }
.archiv__wand::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 21, 46, .35), rgba(6, 21, 46, .8));
}
.archiv__label {
  position: absolute;
  left: 50%; bottom: 8%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem 1.15rem;
  border-radius: 99px;
  background: rgba(10, 29, 58, .82);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px);
  color: #fff; font-size: .88rem; font-weight: 600;
  white-space: nowrap;
  z-index: 2;
}
.archiv__label svg { width: 17px; height: 17px; color: #5b9df6; }

/* --- Textspur (Kapitel) -------------------------------------------------- */
.szene__spur {
  position: relative;
  z-index: 6;
  /* Eigene Ebene: Text und Buttons liegen immer VOR dem 3D-Gerät */
  transform: translateZ(0);
  width: 100%;
  max-width: var(--breite, 1240px);
  padding-inline: var(--gutter, 1.5rem);
  margin-inline: auto;
  pointer-events: none;
}

/* Aufgeteilt in Positionierung (.kapitel) und Gestaltung (.kapitel__innen):
   So bleibt das Zentrieren per CSS-transform erhalten, während GSAP
   ausschliesslich das innere Element bewegt. */
.kapitel {
  position: absolute;
  top: 50%;
  left: var(--gutter, 1.5rem);
  width: min(29rem, 44%);
  transform: translateY(-50%);
}

/* Kapitel 1–5 liegen als schwebende Karte über dem Dashboard.
   Die milchige Fläche hält den Text lesbar, egal was dahinter passiert. */
.kapitel__innen {
  opacity: 0;
  will-change: transform, opacity;
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(12, 27, 51, .07);
  border-radius: var(--r-lg, 22px);
  padding: clamp(1.3rem, 1.1rem + .7vw, 1.8rem);
  box-shadow: 0 30px 70px -32px rgba(6, 21, 46, .5);
}
.kapitel--dunkel .kapitel__innen {
  background: rgba(7, 21, 43, .86);
  border-color: rgba(255, 255, 255, .14);
}
.kapitel * { pointer-events: auto; }

/* Kapitel 0 = Hero: sitzt höher, damit das Gerät darunter Platz hat.
   Braucht keine Karte – dahinter liegt nur die weiche Kulisse. */
.kapitel--hero {
  top: 36%;
  left: 50%;
  width: min(54rem, 92%);
  transform: translate(-50%, -50%);
  text-align: center;
}
.kapitel--hero .kapitel__innen {
  opacity: 1;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
/* Das letzte Kapitel steht wieder mittig */
.kapitel--abschluss { top: 50%; }
.kapitel--hero h1 { margin-block: 1rem 1.15rem; }
.kapitel--hero .btn-reihe { justify-content: center; }

.kapitel__auge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .36rem .85rem; border-radius: 99px;
  background: rgba(22, 104, 227, .1);
  border: 1px solid rgba(22, 104, 227, .2);
  color: #0f52b8;
  font-size: .78rem; font-weight: 650; letter-spacing: .02em;
}
.kapitel--dunkel .kapitel__auge {
  background: rgba(91, 157, 246, .14);
  border-color: rgba(91, 157, 246, .3);
  color: #8fbcfb;
}
.kapitel h2 { font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.5rem); margin-block: .85rem .7rem; }
.kapitel--dunkel h2 { color: #fff; }
.kapitel p { font-size: clamp(.98rem, .94rem + .2vw, 1.1rem); max-width: 34ch; }
.kapitel--dunkel p { color: rgba(255, 255, 255, .78); }
.kapitel--hero p { max-width: 46ch; margin-inline: auto; }

.kapitel__punkte { display: grid; gap: .55rem; margin-top: 1.3rem; }
.kapitel__punkte li { display: flex; align-items: center; gap: .6rem; font-size: .95rem; font-weight: 550; color: #0c1b33; }
.kapitel--dunkel .kapitel__punkte li { color: rgba(255, 255, 255, .88); }
.kapitel__punkte svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: rgba(22, 104, 227, .12); color: #1668e3; flex: 0 0 auto; stroke-width: 2.6; }
.kapitel--dunkel .kapitel__punkte svg { background: rgba(91, 157, 246, .18); color: #5b9df6; }

.kapitel__hinweise {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  margin-top: 1.5rem; font-size: .82rem; color: #64728c;
}
.kapitel--hero .kapitel__hinweise { justify-content: center; color: #3d4a61; font-weight: 550; }

/* Heller Schein hinter dem Hero-Text: Die Foto-Kulisse hat dunkle Stellen,
   auf denen grauer Text sonst kaum lesbar ist. */
.kapitel--hero .kapitel__innen { position: relative; }
.kapitel--hero .kapitel__innen::before {
  content: "";
  position: absolute;
  inset: -10% -14% -16%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(244, 247, 252, .9), rgba(244, 247, 252, .66) 58%, rgba(244, 247, 252, 0));
  pointer-events: none;
}
.kapitel--hero p { color: #34425a; }
.kapitel__hinweise span { display: inline-flex; align-items: center; gap: .4rem; }
.kapitel__hinweise svg { width: 15px; height: 15px; color: #0f9d76; }

/* Scroll-Hinweis */
.szene__hinweis {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: .45rem;
  font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #64728c;
  z-index: 7;
  will-change: opacity;
}
.szene__maus {
  width: 22px; height: 34px; border-radius: 12px;
  border: 1.6px solid currentColor; position: relative; opacity: .7;
}
.szene__maus::after {
  content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 6px; border-radius: 3px; background: currentColor;
  animation: maus-lauf 1.9s var(--ease-aus, ease) infinite;
}
@keyframes maus-lauf {
  0%   { transform: translate(-50%, 0);   opacity: 1; }
  70%  { transform: translate(-50%, 11px); opacity: 0; }
  100% { transform: translate(-50%, 0);   opacity: 0; }
}

/* Fortschrittsbalken */
.szene__fortschritt {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(12, 27, 51, .08);
  z-index: 8;
}
.szene__fortschritt span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #1668e3, #5b9df6);
  transform-origin: left center;
}

/* --- Kapitelmarken rechts ------------------------------------------------ */
.szene__marken {
  position: absolute;
  right: clamp(.9rem, 2.2vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  display: grid; gap: .85rem;
  z-index: 7;
}
.szene__marke {
  display: block; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(12, 27, 51, .18);
  transition: background-color .4s var(--ease, ease), transform .4s var(--ease, ease);
}
.szene__marke.ist-aktiv { background: #1668e3; transform: scale(1.55); }
.szene__pin.ist-dunkel .szene__marke { background: rgba(255, 255, 255, .22); }
.szene__pin.ist-dunkel .szene__marke.ist-aktiv { background: #5b9df6; }
.szene__pin.ist-dunkel .szene__fortschritt { background: rgba(255, 255, 255, .1); }
.szene__pin.ist-dunkel .szene__hinweis { color: rgba(255, 255, 255, .55); }

/* --- Panel-Parallaxe (die drei Markenbilder) ----------------------------- */
.panelreihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.9rem, .5rem + 1.4vw, 1.8rem);
  perspective: 1400px;
}
.panelkarte {
  position: relative;
  border-radius: var(--r-lg, 22px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .65);
  transform-style: preserve-3d;
  will-change: transform;
  background: #0a1d3a;
}
.panelkarte img { width: 100%; display: block; }
.panelkarte__fuss {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1.15rem 1.15rem;
  background: linear-gradient(180deg, transparent, rgba(4, 14, 32, .92));
  color: #fff;
}
.panelkarte__titel { font-size: 1rem; font-weight: 650; letter-spacing: -.015em; }
.panelkarte__text { font-size: .83rem; color: rgba(255, 255, 255, .7); margin-top: .18rem; line-height: 1.5; }

@media (max-width: 760px) {
  .panelreihe { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}

/* ===========================================================================
   Mobile: leichtere Variante der 3D-Wirkung
=========================================================================== */
@media (max-width: 900px) {
  .szene { height: 520vh; }
  .szene__welt { perspective: 1100px; }
  .geraet { width: 92vw; }
  .dok { width: 210px; padding: 13px 14px; }
  .kapitel {
    left: 50%;
    width: min(30rem, calc(100% - 2 * var(--gutter, 1.2rem)));
    transform: translate(-50%, -50%);
    text-align: center;
    top: 26%;
  }
  .kapitel--hero { top: 33%; }
  .kapitel p { max-width: 38ch; margin-inline: auto; }
  .kapitel__punkte li { justify-content: center; }
  .kapitel__hinweise { justify-content: center; }
  .szene__marken { display: none; }
  .app { font-size: 15px; }
}

@media (max-width: 560px) {
  .szene { height: 460vh; }
  .dok { width: 178px; padding: 11px 12px; border-radius: 12px; }
  .dok__titel { font-size: 12px; }
  .dok__betrag { font-size: 13px; }
  .kapitel h2 { font-size: 1.45rem; }
  .geraet__rahmen { padding: 7px 7px 9px; border-radius: 13px; }
}

/* Sehr niedrige Fenster: Text nicht mit dem Gerät kollidieren lassen */
@media (max-height: 620px) and (min-width: 901px) {
  .geraet { width: min(70vw, 820px); }
}

/* ===========================================================================
   Ohne JavaScript oder bei reduzierter Bewegung:
   Die Szene wird zu normalen, gut lesbaren Abschnitten.
=========================================================================== */
.js-aus .szene,
.szene.szene--statisch {
  height: auto;
  background: linear-gradient(180deg, #f2f6fc 0%, #e8f0fb 40%, #0a1d3a 100%);
}
.js-aus .szene__pin,
.szene--statisch .szene__pin {
  position: static;
  height: auto;
  overflow: visible;
  display: block;
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}
.js-aus .szene__welt,
.szene--statisch .szene__welt {
  position: static;
  display: block;
  perspective: none;
  max-width: var(--breite, 1240px);
  margin-inline: auto;
  padding-inline: var(--gutter, 1.5rem);
}
.js-aus .szene__kulisse,
.js-aus .szene__aura,
.js-aus .szene__raster,
.js-aus .szene__hinweis,
.js-aus .szene__marken,
.js-aus .szene__fortschritt,
.szene--statisch .szene__kulisse,
.szene--statisch .szene__aura,
.szene--statisch .szene__raster,
.szene--statisch .szene__hinweis,
.szene--statisch .szene__marken,
.szene--statisch .szene__fortschritt { display: none; }

.js-aus .geraet,
.szene--statisch .geraet {
  position: static; width: 100%; max-width: 900px; margin: 0 auto 3rem; transform: none !important; opacity: 1 !important;
}
.js-aus .dokfeld,
.szene--statisch .dokfeld {
  position: static; display: grid; place-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1rem; margin-bottom: 3rem;
}
.js-aus .dok,
.szene--statisch .dok {
  position: static; width: 100%; opacity: 1 !important; transform: none !important;
}
.js-aus .archiv,
.szene--statisch .archiv { position: static; opacity: 1 !important; transform: none !important; margin-bottom: 3rem; }

.js-aus .szene__spur,
.szene--statisch .szene__spur { position: static; padding: 0; max-width: none; }
.js-aus .kapitel,
.szene--statisch .kapitel {
  position: static; width: 100%; max-width: 44rem; transform: none !important;
  margin: 0 auto clamp(2.5rem, 2rem + 2vw, 4rem); text-align: left;
}
.js-aus .kapitel__innen,
.szene--statisch .kapitel__innen { opacity: 1 !important; transform: none !important; }
.js-aus .kapitel--hero,
.szene--statisch .kapitel--hero { text-align: center; }
.js-aus .kapitel p,
.szene--statisch .kapitel p { max-width: 60ch; }

@media (prefers-reduced-motion: reduce) {
  .szene__maus::after { animation: none; }
}