/* ==========================================================================
   MXM — Horizontales Panel-Deck
   Die Seite scrollt nicht. Das Mausrad, die Pfeiltasten und Wischgesten
   verschieben eine Spur seitlich. Richtung folgt der Schriftrichtung:
   links-nach-rechts im Deutschen und Englischen, rechts-nach-links im Arabischen.
   ========================================================================== */

html,body{height:100%;overflow:hidden;overscroll-behavior:none}

.deck{position:fixed;inset:0;overflow:hidden;background:var(--ground)}

/* Videoebene liegt hinter der Spur und bleibt über die Bühnen-Panels stehen */
.bg{position:absolute;inset:0;z-index:0;background:var(--ground)}
.bg video,.bg .still{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.6s ease;
}
.bg video.playing,.bg .still{opacity:1}
.bg .scrim{
  position:absolute;inset:0;
  /* Warm und deutlich leichter als zuvor: der Film soll durchkommen,
     die Schrift darauf trotzdem sicher lesbar bleiben. */
  background:linear-gradient(180deg,rgba(11,8,6,.38) 0%,rgba(11,8,6,.14) 35%,rgba(11,8,6,.26) 70%,rgba(11,8,6,.66) 100%);
}
/* Auf den Inhaltspanels wird das Video ausgeblendet */
.deck[data-stage="0"] .bg{opacity:0;transition:opacity .8s ease}
.deck[data-stage="1"] .bg{opacity:1;transition:opacity .8s ease}

.track{
  --i:0; --dir:1;
  position:relative;z-index:1;
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  width:100%;height:100%;
  transform:translate3d(calc(var(--i) * var(--dir) * -100%),0,0);
  transition:transform .95s cubic-bezier(.72,0,.16,1);
  will-change:transform;
}
/* Im Arabischen ordnet die Schriftrichtung die Spur bereits von rechts nach links.
   flex-direction bleibt deshalb 'row' — nur das Vorzeichen der Verschiebung dreht sich. */
html[dir="rtl"] .track{--dir:-1}

.panel{
  min-width:0;width:100%;height:100dvh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(4.5rem,10vh,7rem) var(--pad) clamp(4.5rem,10vh,6rem);
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
}
.panel > .inner{width:100%;max-width:1180px;margin-inline:auto}
.panel.dark{color:var(--on-dark)}
.panel.paper{background:var(--paper)}
.panel.tint{background:var(--surface)}
.panel.ink{background:var(--ink);color:var(--on-dark-muted)}

/* Bühnen-Panels sind durchsichtig, damit das Video trägt */
.panel.stage{background:transparent;color:var(--on-dark)}

/* ---------- Panel-Inhalte ---------- */
.statement{
  font-size:clamp(1.9rem,4.4vw,4.1rem);line-height:1.08;font-weight:400;
  letter-spacing:-.02em;max-width:19ch;text-wrap:balance;margin:0;color:var(--on-dark);
}
.statement em{font-style:normal;color:var(--brass)}
html[lang="ar"] .statement{letter-spacing:0;line-height:1.5;max-width:24ch}

/* Die Kaskade laeuft als ein Zug ueber ein Panel: drei Takte, je zwei bis
   drei Zeilen. Der Schriftgrad ist so gesetzt, dass acht Zeilen auf einen
   Bildschirm passen — auch auf dem Telefon. */
.cascade{display:flex;flex-direction:column;gap:clamp(.9rem,3.2vh,2.2rem)}
.cascade .beat{display:flex;flex-direction:column;gap:clamp(.1rem,.6vh,.35rem)}
.cascade .line{
  display:flex;flex-wrap:wrap;gap:0 clamp(.4rem,1.2vw,1rem);
  font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:.96;
  font-size:clamp(1.28rem,3.9vw,3.3rem);color:var(--on-dark);
}
.cascade .line span{opacity:0;transform:translateY(20px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.panel.on .cascade .line span{opacity:1;transform:none}
/* Takt fuer Takt eingeblendet, damit der Zug seinen Rhythmus behaelt */
.panel.on .cascade .beat:nth-child(2) .line span{transition-delay:.22s}
.panel.on .cascade .beat:nth-child(3) .line span{transition-delay:.44s}
.cascade .line span.hl{color:var(--brass)}
html[lang="ar"] .cascade .line{
  text-transform:none;letter-spacing:0;line-height:1.34;
  font-size:clamp(1.1rem,3.3vw,2.7rem);
}

/* Eingeblendete Inhalte pro Panel */
.rise{opacity:0;transform:translateY(20px)}
.panel.on .rise{opacity:1;transform:none;
  transition:opacity .8s cubic-bezier(.2,.7,.3,1) .15s,transform .8s cubic-bezier(.2,.7,.3,1) .15s}

/* ---------- Fortschritt und Steuerung ---------- */
.rail{
  position:fixed;z-index:70;inset-inline:var(--pad);inset-block-end:clamp(1.1rem,3.5vh,2rem);
  display:flex;align-items:center;gap:1rem;pointer-events:none;
  mix-blend-mode:difference;color:var(--on-dark);
}
.rail .count{
  font-family:var(--utility);font-size:10px;letter-spacing:.2em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  direction:ltr;unicode-bidi:isolate;   /* 06 / 12 bleibt in dieser Reihenfolge */
}
.rail .bar{position:relative;flex:1;height:1px;background:currentColor;opacity:.35}
.rail .bar i{
  position:absolute;inset-block:0;inset-inline-start:0;display:block;
  background:var(--brass);width:calc(var(--p,0) * 100%);
  transition:width .95s cubic-bezier(.72,0,.16,1);
}
.rail .hint{
  font-family:var(--utility);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  white-space:nowrap;opacity:.75;
}
html[lang="ar"] .rail .count,html[lang="ar"] .rail .hint{letter-spacing:0;text-transform:none}

.steps{
  position:fixed;z-index:70;inset-inline-end:var(--pad);inset-block-start:50%;
  transform:translateY(-50%);display:flex;flex-direction:column;gap:.55rem;
}
.steps button{
  appearance:none;border:0;padding:0;background:none;cursor:pointer;
  width:22px;height:12px;display:grid;place-items:center;
}
.steps button::before{
  content:"";display:block;width:14px;height:1.5px;background:var(--on-dark);
  opacity:.3;transition:opacity .3s,background .3s,width .3s;mix-blend-mode:difference;
}
.steps button[aria-current="true"]::before{opacity:1;background:var(--brass);width:22px}
@media(max-width:719px){.steps{display:none}}

/* Vollständig getastet bedienbar */
.panel:focus-visible{outline:2px solid var(--brass);outline-offset:-6px}

@media(prefers-reduced-motion:reduce){
  .track{transition:none}
  .rail .bar i{transition:none}
  .cascade .line span,.rise{opacity:1;transform:none;transition:none}
  .bg video{transition:none;opacity:1}
}

/* ---------- Überschreibt die Regeln aus mxm.css, die vom vertikalen Aufbau stammen ---------- */
.panel.stage{position:relative;height:100dvh;inset:auto}
.deck .stats{margin-block:0}
/* Vier Prinzipien als Satz, nicht als Folge: sie sagen gemeinsam
   "fuenf Geschaeftsfelder, eine Verantwortung". */
.deck .principles{
  display:grid;gap:clamp(1.1rem,3vh,2.4rem) clamp(1.5rem,4vw,3.4rem);
  grid-template-columns:1fr;
}
@media(min-width:760px){.deck .principles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.deck .principle{
  display:block;border-block-start:1px solid var(--line);
  padding-block:clamp(.8rem,2vh,1.3rem) 0;
}
.deck .principle .k{padding-block-start:0;margin-block-end:.7rem}
.deck .principle h3{
  font-family:var(--display);font-weight:400;color:var(--ink);margin:0;
  font-size:clamp(1.02rem,1.9vw,1.55rem);line-height:1.18;letter-spacing:-.015em;
  text-wrap:balance;
}
html[lang="ar"] .deck .principle h3{letter-spacing:0;line-height:1.45}
.deck .principle p{
  margin:.6rem 0 0;max-width:44ch;color:var(--body);
  font-size:clamp(.83rem,1.15vw,.95rem);line-height:1.55;
}

/* Fuß sitzt jetzt im letzten Panel, nicht mehr über die volle Breite */
.deck footer{
  background:none;color:var(--muted);padding:0;
  margin-block-start:clamp(2rem,6vh,3.4rem);
  border-block-start:1px solid var(--hair);padding-block-start:1.2rem;
}
.deck footer .wrap{display:grid;gap:1rem;max-width:none;margin:0}
.deck footer .legal{color:var(--muted);font-size:11.5px}
.deck footer .legal a{color:var(--muted);border-block-end-color:var(--hair)}
.deck footer .sig{border-block-start:0;padding-block-start:0;color:var(--muted)}
.deck footer b{color:var(--brass)}

/* Auf den Bühnenpanels bleibt die Kopfzeile lesbar, auf hellen Panels ebenso */
.deck .eyebrow{margin-block-end:clamp(1rem,3vh,1.9rem)}

/* Die Leistungsliste ist der einzige Abschnitt, der ein Panel sprengt.
   Enger gesetzt passt sie auf einen Bildschirm — auch auf dem Telefon. */
.deck .svc{margin-block-start:clamp(1.2rem,3.5vh,2.2rem)}
.deck .svc .row{padding-block:clamp(.6rem,1.5vh,1.15rem)}
.deck .svc p{font-size:.9rem;line-height:1.5}
@media(max-width:719px){
  .deck .svc h3{font-size:1.02rem}
  .deck .svc p{font-size:.82rem;line-height:1.45}
  .deck .svc .row{padding-block:.6rem;gap:.2rem}
  .deck #p-leistungen h2{font-size:clamp(1.4rem,6vw,2rem)}
}

/* Die letzten Pixel auf dem Telefon: Innenabstand der Panels etwas knapper */
@media(max-width:719px){
  .panel{padding-block:clamp(3.6rem,8vh,5rem) clamp(3.4rem,7vh,4.5rem)}
  .deck footer{margin-block-start:clamp(1.4rem,4vh,2.2rem);padding-block-start:.9rem}
  .deck footer .legal{font-size:10.5px}
}


/* ==========================================================================
   Panels auf dem Film
   Kennzahlen und Anspruch stehen ueber dem Film statt auf hellem Grund.
   Damit traegt der Film vier Panels — dieselbe Laufzeit wie in der
   zwoelfteiligen Fassung, nur ohne die fuenf zusaetzlichen Bildschirme.
   ========================================================================== */
.panel.on-film h2,
.panel.on-film .stat .v{color:var(--on-dark)}
.panel.on-film h2 em{color:var(--brass)}
.panel.on-film .lede,
.panel.on-film p{color:var(--on-dark-muted)}
.panel.on-film .eyebrow{color:var(--on-dark-muted)}
.panel.on-film .eyebrow::after{background:rgba(255,255,255,.22)}
.panel.on-film .stat{border-block-start-color:rgba(255,255,255,.28)}
.panel.on-film .stat .k{color:var(--on-dark-muted)}

/* Der Film liegt hinter Text, der gelesen werden muss: auf diesen Panels
   verdunkelt der Scrim etwas staerker als auf der reinen Buehne. */
.deck:has(.panel.on-film.on) .bg .scrim{
  background:linear-gradient(180deg,rgba(11,8,6,.62) 0%,rgba(11,8,6,.50) 40%,rgba(11,8,6,.56) 70%,rgba(11,8,6,.78) 100%);
  transition:background .8s ease;
}