/* Praesentationsansicht der Zielgruppen-Seiten.
 *
 * Gedacht als Vorfuehrung beim Kunden, nicht als Scrollseite: eine Folie
 * fuellt den Schirm, man blaettert durch. Links die Kapitelnavigation,
 * rechts die Buehne. Vollbild blendet alles ausser der Folie aus.
 *
 * Die Folien selbst sind 1:1 aus den Praesentationen uebertragen
 * (_werkzeug/folien-uebertragen.mjs); die Klassen .ps-canvas/.ps-txt/
 * .ps-img/.ps-card und die Gestaltung der Navigation stammen aus der
 * eigenen Vorfassung (/webservice-service-business/).
 *
 * Ruhezustand ist der sichtbare Zustand: ohne folien.js stehen alle Folien
 * untereinander und sind vollstaendig lesbar. Erst das Skript setzt
 * html.ps-js und macht daraus die Vorfuehrung.
 */

/* --- Aufbau ----------------------------------------------------------------- */
.ps-wrap {
  display: grid;
  grid-template-columns: 264px 1fr;
  background: #050505;
}

.ps-nav {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  border-right: 1px solid rgba(255, 255, 255, .10);
  box-sizing: border-box;
}
.ps-nav-in {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 34px 26px;
  box-sizing: border-box;
  overflow-y: auto;
}
.ps-nav-title {
  font-family: 'ClashDisplay', 'Clash Display', 'DM Sans', sans-serif;
  font-weight: 600;
  color: #fff;
  font-size: 19px;
  line-height: 1.25;
  margin-bottom: 6px;
}
.ps-nav-client {
  color: #FF7120;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12.5px;
  letter-spacing: 1px;
  margin: 0 0 18px;
  display: none;
}
.ps-nav-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}
.ps-nav-list li { position: relative; z-index: 1; }
.ps-nav-list a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: #8F8B83;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  text-decoration: none;
  transition: color .18s ease, background .18s ease;
}
.ps-nav-list a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.ps-nav-list a.on { color: #050505; font-weight: 600; background: transparent; }
.ps-nav-ind {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 36px;
  border-radius: 8px;
  background: #FF7120;
  opacity: 0;
  transition: transform .34s cubic-bezier(.23, 1, .32, 1), opacity .2s ease, height .25s ease;
  z-index: 0;
}
.ps-nav-cta {
  margin-top: auto;
  display: inline-block;
  text-align: center;
  border: 1px solid #FF7120;
  color: #FF7120;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13.5px;
  text-decoration: none;
  padding: 11px 14px;
  border-radius: 99px;
  transition: background .18s ease, color .18s ease;
}
.ps-nav-cta:hover { background: #FF7120; color: #050505; }
.ps-nav-hint {
  color: #5E5A53;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11.5px;
  margin-top: 12px;
  letter-spacing: .4px;
}
.ps-nav-logo {
  margin-top: 18px;
  color: #5E5A53;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
}

/* --- Buehne: eine Folie fuellt den Schirm ------------------------------------ */
.ps-main { min-width: 0; }

/* Waehrend der Vorfuehrung scrollt die Seite nicht: die Buehne ist das
   Fenster. Theme-Kopf bleibt oben stehen, die Fusszeile ist erst wieder
   ohne Skript (Ruhezustand) erreichbar. */
html.ps-js, html.ps-js body { overflow: hidden; height: 100%; }
/* Die Fusszeile gehoert nicht in die Vorfuehrung — sie bleibt dem
   Ruhezustand (ohne Skript) und den uebrigen Seiten vorbehalten. */
html.ps-js footer,
html.ps-js [class*="footer-elementor"],
html.ps-js #pxl-footer-elementor { display: none; }

html.ps-js .ps-main {
  /* Der Theme-Kopf steht fest oben; --kopf setzt folien.js auf seine Hoehe. */
  height: calc(100vh - var(--kopf, 0px));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(16px, 3vw, 56px);
  box-sizing: border-box;
}

.pitch-slide {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  padding: 56px 0;
}
/* Ohne Skript: Folien untereinander, durch Linien getrennt */
html:not(.ps-js) .pitch-slide { border-top: 1px solid rgba(255, 255, 255, .10); }
html:not(.ps-js) .pitch-slide:first-of-type { border-top: none; }

/* Mit Skript: alle Folien uebereinander auf der Buehne, nur eine sichtbar */
html.ps-js .pitch-slide {
  position: absolute;
  top: 50%; left: 50%;
  /* Breite rechnet folien.js aus Buehnenmass und Seitenverhaeltnis —
     eine CSS-Formel dafuer wurde vom Browser verworfen und die Folie
     schrumpfte auf ihre Mindestbreite. */
  width: var(--psb, 100%);
  transform: translate(-50%, -50%);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .34s ease, transform .44s cubic-bezier(.23, 1, .32, 1), visibility 0s linear .44s;
}
html.ps-js .pitch-slide.ps-aktiv {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition: opacity .34s ease, transform .44s cubic-bezier(.23, 1, .32, 1), visibility 0s;
  z-index: 2;
}
/* Richtung des Uebergangs: die vorige geht nach oben, die naechste kommt von unten */
html.ps-js .pitch-slide.ps-vor { transform: translate(-50%, calc(-50% - 34px)); }
html.ps-js .pitch-slide.ps-nach { transform: translate(-50%, calc(-50% + 34px)); }

.ps-canvas {
  width: 100%;
  min-height: 1px;
  position: relative;
  /* Schriftgroessen stehen in cqw — Anteil der Leinwandbreite. */
  container-type: inline-size;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
html:not(.ps-js) .ps-canvas { box-shadow: none; }

/* --- Elemente der Folie ------------------------------------------------------ */
.ps-card { border-radius: 14px; transition: transform .2s cubic-bezier(.23,1,.32,1), box-shadow .2s ease; }
.ps-img { transition: transform .25s cubic-bezier(.23,1,.32,1); }
.pitch-slide * { text-transform: none !important; letter-spacing: inherit; }

/* Elemente treten gestaffelt ein, sobald ihre Folie aktiv wird */
html.ps-js .ps-txt,
html.ps-js .ps-img,
html.ps-js .ps-card {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .42s cubic-bezier(.23,1,.32,1) var(--d,0ms),
              transform .42s cubic-bezier(.23,1,.32,1) var(--d,0ms);
}
html.ps-js .ps-aktiv .ps-txt,
html.ps-js .ps-aktiv .ps-img,
html.ps-js .ps-aktiv .ps-card { opacity: 1; transform: none; }

@media (hover: hover) and (pointer: fine) {
  .ps-canvas:hover .ps-card { box-shadow: 0 14px 34px rgba(0,0,0,.14); }
  .ps-card:hover { transform: translateY(-3px); }
  .ps-img:hover { transform: scale(1.015); }
}
@media (prefers-reduced-motion: reduce) {
  html.ps-js .pitch-slide,
  html.ps-js .ps-txt, html.ps-js .ps-img, html.ps-js .ps-card {
    transition: opacity .2s ease !important;
    transform: translate(-50%, -50%) !important;
  }
  html.ps-js .ps-txt, html.ps-js .ps-img, html.ps-js .ps-card { transform: none !important; }
}

/* --- Steuerung auf der Buehne ------------------------------------------------ */
.ps-steuer {
  position: absolute;
  right: 22px; bottom: 20px;
  display: none;
  align-items: center;
  gap: 10px;
  z-index: 6;
  font-family: 'DM Sans', system-ui, sans-serif;
}
html.ps-js .ps-steuer { display: flex; }
.ps-knopf {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(5,5,5,.6);
  color: #F4F1EC;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.ps-knopf:hover:not(:disabled) { background: #FF7120; border-color: #FF7120; color: #050505; }
.ps-knopf:disabled { opacity: .3; cursor: default; }
.ps-zaehler {
  color: #8F8B83;
  font-size: 12.5px;
  letter-spacing: .08em;
  min-width: 62px;
  text-align: right;
}

/* Fortschritt als Linie am oberen Rand der Buehne */
.ps-balken {
  position: absolute;
  top: 0; left: 0;
  height: 2px; width: 100%;
  background: rgba(255,255,255,.08);
  display: none;
  z-index: 6;
}
html.ps-js .ps-balken { display: block; }
.ps-balken i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #FF7120 0%, #FF7120 60%, rgba(255,113,32,.4) 100%);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .34s cubic-bezier(.23,1,.32,1);
}

/* Klickflaechen links und rechts neben der Folie zum Blaettern */
.ps-seite {
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(40px, 6vw, 90px);
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 4;
  display: none;
}
html.ps-js .ps-seite { display: block; }
.ps-seite--vor { left: 0; }
.ps-seite--nach { right: 0; }
.ps-seite:disabled { cursor: default; }

/* --- Vollbild: nur die Folie ------------------------------------------------- */
html.ps-voll .ps-nav,
html.ps-voll #pxl-header-elementor,
html.ps-voll header,
html.ps-voll footer { display: none !important; }
html.ps-voll .ps-wrap { grid-template-columns: 1fr; }
html.ps-voll .ps-main { height: 100vh; }

/* --- Schmale Fenster --------------------------------------------------------- */
@media (max-width: 1000px) {
  /* minmax(0, 1fr) statt 1fr: ein 1fr-Track ist mindestens so breit wie
     sein Inhalt, und die Kapitelleiste (nowrap) ist auf dem Telefon rund
     1260px breit. Der Track wuchs mit, die Buehne mass sich an ihm und die
     Folie blieb 1105px breit — abgeschnitten am rechten Rand. Gemessen bei
     375px: Navigation 1258px, Leinwand 1105px. */
  .ps-wrap { grid-template-columns: minmax(0, 1fr); }
  .ps-nav {
    min-width: 0;
    height: auto;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: rgba(5,5,5,.92);
    backdrop-filter: blur(8px);
    z-index: 5;
  }
  .ps-nav-in { flex-direction: row; align-items: center; gap: 10px; padding: 12px 16px; overflow-x: auto; }
  .ps-nav-title, .ps-nav-logo, .ps-nav-hint { display: none; }
  .ps-nav-list { flex-direction: row; gap: 6px; margin: 0; }
  .ps-nav-list a { white-space: nowrap; font-size: 13px; padding: 7px 12px; }
  .ps-nav-ind { display: none; }
  .ps-nav-list a.on { color: #050505; background: #FF7120; }
  .ps-nav-cta { margin-top: 0; white-space: nowrap; }
  html.ps-js .ps-main { height: calc(100vh - var(--kopf, 0px) - 62px); padding: 0 12px; }
  .ps-seite { width: 34px; }
}

/* --- Bewegung mit GSAP (html.ps-gsap, gesetzt von folien.js) ----------------- */
/* GSAP fuehrt Lage, Deckkraft und Eintreten selbst. Die CSS-Uebergaenge und
   die Startlagen aus dem Abschnitt oben treten zurueck, sonst laufen zwei
   Animationen gegeneinander. Ohne GSAP bleibt alles wie oben. */
html.ps-gsap .pitch-slide,
html.ps-gsap .ps-txt,
html.ps-gsap .ps-img,
html.ps-gsap .ps-card { transition: none !important; }
html.ps-gsap .pitch-slide { transform: none; }
html.ps-gsap .ps-txt,
html.ps-gsap .ps-img,
html.ps-gsap .ps-card { opacity: 1; transform: none; }
/* Die weichende Folie bleibt sichtbar, bis ihr Abgang beendet ist */
html.ps-gsap .pitch-slide.ps-geht { visibility: visible; opacity: 1; z-index: 1; pointer-events: none; }
html.ps-gsap .pitch-slide.ps-aktiv { z-index: 2; }

/* Kapiteltrenner: dunkle Flaeche ueber der Buehne mit Nummer und Name */
.ps-kapitel {
  position: absolute;
  inset: 0;
  display: none;
  z-index: 7;
  background: #050505;
  color: #fff;
  overflow: hidden;
}
.ps-kapitel-in {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(24px, 8vw, 120px);
  box-sizing: border-box;
}
.ps-kapitel-nr {
  color: #FF7120;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.ps-kapitel-titel {
  font-family: 'ClashDisplay', 'Clash Display', 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(34px, 6vw, 92px);
  line-height: 1.02;
  max-width: 14ch;
}