/* Theme über die Variablen von w3.css 6 */
:root {
  --w3-font-family: "Inter", serif, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --w3-heading-font-family: var(--w3-font-family);
  --w3-page-bg: #f6f7fb;
  --w3-text-color: #0e1530;
  --ease: cubic-bezier(.65, 0, .35, 1); /* ease-in-out */
}
h1, h2 { letter-spacing: -0.03em; line-height: 1.05; }
:focus-visible { outline: 3px solid #3f51b5; outline-offset: 3px; }

/* Gate */
#gate { transition: opacity .6s var(--ease); }
#gate > div { width: min(92vw, 520px); }
#dial-log { height: 16rem; overflow: hidden; justify-content: flex-end; line-height: 1.7; }

/* Balken (Einwahl + Header) */
#steps i, #dial-bar div { display: block; height: 4px; width: 0; }
#steps i { transition: width .8s var(--ease); }
#dial-bar div { transition: width .3s linear; }

/* Deck: Vollbild-Folien mit Scroll-Snap */
#deck {
  position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y mandatory; scroll-behavior: smooth; overscroll-behavior: contain; outline: none;
}
#deck > section {
  height: 100vh; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; cursor: pointer;
}
.media { width: 100%; aspect-ratio: 4 / 3; max-height: 46vh;  }
.media img { 
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.text-portrait{
    width: 200%;
}



@media (max-width: 600px) { .media { max-height: 30vh; }  .text-portrait { width: 100%;}}

@media (prefers-reduced-motion: reduce) {
  #deck { scroll-behavior: auto; }
  #steps i, #dial-bar div, #gate { transition: none; }
}