/* ==========================================================================
   VereinsFlow – Website
   Reines CSS: keine Bibliotheken, keine Webfonts, keine externen Ressourcen (Systemschrift).
   Weißes Design: helle Flächen, feine Kanten, weiche Schatten; Aktionsfarbe = Hauptfarbe der Anwendung (--accent).
   Die Seite ist bewusst immer hell (auch bei dunkel eingestelltem Gerät).

   Bewegung (Abschnitt „Bewegung“ am Ende):
   - Einstieg: kurze Ladeanimation (Wörter, Text, Bild, schwebende Hinweise) – rein per CSS, kein Aufblitzen.
   - Beim Scrollen (.reveal): site.js schaltet .is-pending; Überschriften blenden aus der Unschärfe ein, Häkchen
     zeichnen sich, Symbole und Kennzahlen erscheinen nacheinander.
   - Parallaxe (.plx), Laufband, Fortschrittsbalken und Scroll-Effekte im Einstieg: CSS-Scroll-Timelines bzw.
     Transformationen, laufen ohne JavaScript auf dem Compositor – außer bei den Telefonen: Ihre Verschiebung
     (--phone-shift) berechnet der Hauptthread, damit sie nur um ganze Pixel wandern.
   - Vorführungen (Laptop, Telefon unter dem Einstieg): Aufklappen und Drehen als Animationen an einer Scroll-Timeline,
     ebenfalls auf dem Compositor; ohne Scroll-Timeline stellt site.js ihre Zeit nach dem Scrollfortschritt ein.
   - „Bewegung reduzieren“ (prefers-reduced-motion): keine Animationen, alles sofort sichtbar.
   ========================================================================== */

:root {
  color-scheme: light;

  --bg: #ffffff;
  --bg-alt: #f5f7fa;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --ink: #0e1a2b;
  --text: #354559;
  --muted: #5a6a7e;
  --line: #e6ebf1;
  --line-strong: #d3dbe5;

  /* Marke (Schrift-Akzente, Logo) und Aktion (Schaltflächen) – die Aktionsfarbe ist die der Anwendung */
  --brand: #1c4a7a;
  --brand-2: #5b9cd6;
  --accent: #0555b7;
  --accent-hover: #04479a;
  --on-accent: #ffffff;
  --accent-soft: #edf3fc;
  --accent-line: #cfe0f5;
  --ring: #3f7fd6;
  --glow: rgb(91 156 214 / 14%);

  --ok: #0e7a55;
  --ok-soft: #dff3ea;
  --warn: #8a5a00;
  --warn-soft: #fcefd0;

  /* Farbakzente je Inhaltsart – wie in der Anwendung (Mitglieder blau, Termine violett, Helfer grün, Stunden gelb) */
  --t-blue-bg: #e8f0fb;
  --t-blue-fg: #0b56b0;
  --t-purple-bg: #f0ebfc;
  --t-purple-fg: #5b3fb8;
  --t-green-bg: #e1f4eb;
  --t-green-fg: #0e7a55;
  --t-amber-bg: #fcf1d8;
  --t-amber-fg: #8a5a00;
  --t-rose-bg: #fbe8ec;
  --t-rose-fg: #b3253f;
  --t-slate-bg: #eef1f5;
  --t-slate-fg: #475569;

  --frame-bar: #f5f7fa;
  --frame-line: #e3e8ee;
  --frame-dot: #d2d9e2;
  --bezel: #0e141c;

  --shadow-sm: 0 1px 2px rgb(15 30 50 / 4%), 0 2px 10px rgb(15 30 50 / 4%);
  --shadow-md: 0 2px 4px rgb(15 30 50 / 4%), 0 14px 36px rgb(15 30 50 / 9%);
  --shadow-lg: 0 4px 12px rgb(15 30 50 / 5%), 0 32px 80px rgb(15 30 50 / 14%);
  --shadow-accent: 0 1px 1px rgb(5 85 183 / 20%), 0 8px 20px -6px rgb(5 85 183 / 55%);

  --radius: 22px;
  --radius-sm: 14px;
  --header-h: 64px;
  --container: 1160px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-pad: clamp(56px, 7vw, 104px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ---------- Grundlagen ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--font);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Nichts darf die Seite seitlich verschiebbar machen (Lichtschein, schwebende Telefone, Laufband). „clip“ statt
   „hidden“: erzeugt keinen Scroll-Container, die feste Kopfzeile bleibt kleben. */
main {
  overflow-x: clip;
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 5.6vw + 0.6rem, 5.25rem);
  letter-spacing: -0.036em;
  line-height: 1.03;
}

h2 {
  font-size: clamp(2rem, 2.9vw + 0.9rem, 3.25rem);
  letter-spacing: -0.03em;
  line-height: 1.07;
}

h3 {
  font-size: 1.2rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color 0.2s, text-decoration-color 0.2s;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
  border-radius: 8px;
}

::selection {
  background: #cfe2f7;
  color: var(--ink);
}

kbd {
  display: inline-block;
  min-width: 1.75em;
  padding: 0.05em 0.45em;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font: 600 0.8em/1.45 var(--font);
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  vertical-align: 0.08em;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--ink);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s;
}

.skip-link:focus {
  top: 12px;
}

/* Symbolsammlung am Seitenanfang (unsichtbar); die Symbole werden per <use> eingesetzt */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Kopfzeile ---------- */

/* Ganz oben ist die Kopfzeile durchsichtig; nach dem Scrollen (Skript setzt „is-scrolled“) bekommt sie einen
   durchscheinenden weißen Grund mit Weichzeichner. Ohne JavaScript bleibt sie immer deckend. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft);
}

html:not(.js) .site-header,
.site-header.is-scrolled,
.site-header.is-open {
  background: var(--bg);
  border-bottom-color: var(--line);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  html:not(.js) .site-header,
  .site-header.is-scrolled {
    background: rgb(255 255 255 / 76%);
    -webkit-backdrop-filter: saturate(1.8) blur(20px);
    backdrop-filter: saturate(1.8) blur(20px);
  }
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  transition: opacity 0.2s;
}

.brand:hover {
  opacity: 0.8;
}

.brand img {
  display: block;
  width: 164px;
  height: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}

.nav-links {
  position: relative;
  isolation: isolate;
}

.nav ul {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav ul a {
  position: relative;
  display: block;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 520;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.nav ul a:hover,
.nav ul a.is-active {
  color: var(--ink);
}

/* Gleitende Markierung hinter dem aktiven bzw. überfahrenen Menüpunkt (site.js setzt --x und --w).
   Ohne JavaScript übernimmt ein einfacher Hintergrund beim Überfahren. */
.nav-indicator {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: var(--w, 0px);
  height: 100%;
  border-radius: 999px;
  background: var(--accent-soft);
  opacity: 0;
  translate: var(--x, 0px) 0;
  pointer-events: none;
  transition: translate 0.45s var(--ease-out), width 0.45s var(--ease-out), opacity 0.25s;
}

.nav-indicator.is-visible {
  opacity: 1;
}

.nav-indicator.no-slide {
  transition: opacity 0.25s;
}

html:not(.js) .nav ul a:hover {
  background: var(--accent-soft);
}

.scroll-progress {
  display: none;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  place-items: center;
  transition: background-color 0.2s, transform 0.15s var(--ease-out);
}

.nav-toggle:active {
  transform: scale(0.94);
}

.nav-toggle .icon {
  width: 22px;
  height: 22px;
}

.nav-toggle .icon-close,
.nav-toggle[aria-expanded="true"] .icon-open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

@media (max-width: 899px) {
  .js .nav-toggle {
    display: grid;
  }

  .nav {
    display: none;
  }

  .nav-indicator {
    display: none;
  }

  .js .nav.is-open {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin: 0;
    padding: 8px var(--gutter) 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px rgb(15 30 50 / 10%);
  }

  .nav.is-open ul {
    flex-direction: column;
  }

  .nav.is-open ul a {
    padding: 14px 12px;
    font-size: 1.1rem;
    border-radius: 14px;
  }

  .nav.is-open ul a:hover,
  .nav.is-open ul a.is-active {
    background: var(--accent-soft);
  }

  .nav.is-open .btn-header {
    min-height: 50px;
  }

  /* Ohne JavaScript bleibt die Navigation ausgeblendet; alle Bereiche sind trotzdem in der Seite erreichbar (Fußzeile). */
}

/* ---------- Schaltflächen ---------- */

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 46px;
  padding: 0 1.35em;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.28s var(--ease-out),
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s,
    box-shadow 0.28s var(--ease-out);
}

.btn:hover {
  text-decoration: none;
}

@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
  }
}

/* Klick: kurzes Einfedern */
.btn:active {
  transform: scale(0.96);
  transition-duration: 0.08s;
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-accent);
}

.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 1px 1px rgb(5 85 183 / 20%), 0 16px 30px -8px rgb(5 85 183 / 55%);
}

.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--ink);
  box-shadow: var(--shadow-md);
}

.btn-lg {
  min-height: 54px;
  padding: 0 1.75em;
  font-size: 1.0625rem;
}

.btn-sm {
  min-height: 38px;
  padding: 0 1.05em;
  font-size: 0.92rem;
}

.btn-header {
  box-shadow: 0 1px 1px rgb(5 85 183 / 18%), 0 3px 8px -2px rgb(5 85 183 / 35%);
}

.btn .icon {
  transition: transform 0.3s var(--ease-out);
}

.btn:hover .icon-arrow {
  transform: translateX(4px);
}

/* ---------- Abschnitte ---------- */

.section {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-pad);
}

/* Weiße Abschnitte, die jeweils zweiten mit einem weichen Lichtschein am oberen Rand – ruhiger Wechsel ohne harte
   Farbkanten */
.section-alt::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: min(1400px, 140vw);
  height: min(560px, 90vw);
  translate: -50% 0;
  background: radial-gradient(50% 60% at 50% 18%, var(--glow), transparent 100%);
  /* oben weich auslaufen lassen – sonst zeichnet sich die Abschnittsgrenze als Kante ab */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 38%);
  mask-image: linear-gradient(to bottom, transparent, #000 38%);
  pointer-events: none;
}

.section-head {
  max-width: 780px;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 5px 13px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.005em;
}

.lead {
  margin-top: 20px;
  color: var(--muted);
  font-size: clamp(1.1rem, 0.45vw + 1rem, 1.3rem);
  line-height: 1.55;
  letter-spacing: -0.014em;
}

.center .lead {
  max-width: 44rem;
  margin-inline: auto;
  text-wrap: balance;
}

/* Kleine Kennzeile über einer Zwischenüberschrift (z. B. „Helferplan drucken“) */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--accent);
  font-size: 0.92rem;
  font-weight: 600;
}

.kicker .icon {
  width: 18px;
  height: 18px;
}

/* ---------- Einstieg ---------- */

/* Die Kopfzeile liegt über dem Einstieg (negativer Rand), damit der Lichtschein bis an den oberen Rand reicht */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  margin-top: calc(var(--header-h) * -1);
  padding: calc(var(--header-h) + clamp(48px, 8vw, 112px)) 0 clamp(64px, 8vw, 112px);
  text-align: center;
}

/* Feines Punkteraster, das zu den Rändern hin ausläuft */
.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: radial-gradient(rgb(15 30 50 / 9%) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 26%, #000 20%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 50% at 50% 26%, #000 20%, transparent 72%);
  pointer-events: none;
}

/* Weicher Lichtschein in den Farben des Logos (links dunkler, rechts heller) */
.hero-glow {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

.hero-glow::before,
.hero-glow::after {
  content: "";
  position: absolute;
  top: calc(min(680px, 84vw) * -0.36);
  width: min(680px, 84vw);
  aspect-ratio: 1;
  border-radius: 50%;
}

.hero-glow::before {
  left: calc(50% - min(680px, 84vw) * 0.86);
  background: radial-gradient(closest-side, rgb(47 116 184 / 20%), rgb(47 116 184 / 0%));
}

.hero-glow::after {
  left: calc(50% - min(680px, 84vw) * 0.14);
  background: radial-gradient(closest-side, rgb(91 156 214 / 26%), rgb(91 156 214 / 0%));
}

.hero-copy {
  max-width: 900px;
  margin-inline: auto;
}

.hero h1 {
  max-width: 17ch;
  margin-inline: auto;
}

.flow-word {
  position: relative;
  white-space: nowrap;
  color: var(--accent);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .flow-word {
    background: linear-gradient(100deg, var(--brand) 5%, var(--accent) 55%, var(--brand-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.flow-word::after {
  content: "";
  position: absolute;
  left: 0.02em;
  right: 0.02em;
  bottom: -0.03em;
  height: 0.09em;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-2), var(--accent));
  opacity: 0.55;
  transform-origin: left;
}

.hero .lead {
  max-width: 42rem;
  margin: 28px auto 0;
  text-wrap: balance;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.95rem;
}

.hero-points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-points .icon {
  color: var(--ok);
}

@media (max-width: 479px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    max-width: 340px;
    margin-inline: auto;
  }
}

/* Schwebende Hinweise rund um das Dashboard (nur Schmuck) */
.hero-chips {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.float-chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 18px 10px 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: var(--shadow-md);
  text-align: left;
  white-space: nowrap;
}

.float-chip strong {
  display: block;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.25;
}

.float-chip small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.float-chip kbd {
  font-size: 0.72rem;
}

.float-chip-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--tone-bg);
  color: var(--tone-fg);
}

.float-chip-icon .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

/* Die Hinweise ragen über den Rahmen hinaus, statt Text im Bild zu verdecken */
.chip-a {
  left: -5%;
  top: 24%;
}

.chip-b {
  right: 16%;
  top: -3.5%;
}

.chip-c {
  left: -3%;
  bottom: 9%;
}

@media (max-width: 1239px) {
  .chip-a,
  .chip-c {
    left: -1%;
  }
}

@media (max-width: 899px) {
  .hero-chips {
    display: none;
  }
}

/* ---------- Laufband der Bereiche ---------- */

.ribbon {
  position: relative;
  overflow: hidden;
  padding: 8px 0 clamp(40px, 5vw, 64px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.ribbon-track {
  display: flex;
  width: max-content;
}

.ribbon ul {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 4px 12px 10px 0;
  list-style: none;
}

.ribbon li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 550;
  white-space: nowrap;
}

.ribbon li .icon {
  width: 18px;
  height: 18px;
  color: var(--accent);
}

/* ---------- Bildschirmfotos in Rahmen ---------- */

.hero-visual {
  position: relative;
  isolation: isolate;
  max-width: 1120px;
  margin: clamp(52px, 7vw, 88px) auto 0;
}

.hero-stage {
  perspective: 2000px;
}

/* Dezenter Lichtschein hinter den großen Bildschirmfotos (Verlauf statt Weichzeichner-Filter: kostet beim Scrollen nichts) */
.hero-visual::before,
.chapter-media::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(91 156 214 / 22%), transparent);
  pointer-events: none;
}

.browser {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--frame-line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: left;
}

.browser-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--frame-line);
  background: var(--frame-bar);
}

.browser-bar .dots {
  display: flex;
  gap: 7px;
}

.browser-bar i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--frame-dot);
}

/* Adresszeile nur als Beschriftung (keine Domain – die Anwendung hat noch keine öffentliche Adresse) */
.browser-url {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(40vw, 300px);
  max-width: 100%;
  height: 24px;
  padding: 0 14px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--frame-line);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 550;
  letter-spacing: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 559px) {
  .browser-bar {
    height: 30px;
  }

  .browser-url {
    display: none;
  }
}

.browser picture {
  display: block;
}

.browser img {
  display: block;
  width: 100%;
  height: auto;
}

/* Smartphone wie ein echtes Gerät: Metallrahmen mit heller Außenkante, schwarzer Glasrand, Tasten an beiden Seiten,
   Dynamic Island, Statusleiste und Home-Balken. Maße nach einem aktuellen iPhone: Bildschirm 390 × 844 Punkte (so groß
   sind die Aufnahmen), Gehäuse 420 × 874. Alles in Prozent bzw. `cqw` (Breite des Geräts), damit der Rahmen in jeder
   Größe gleich aussieht. Prozentwerte über „inset“ (nicht padding): Sie beziehen sich so auf das Gerät selbst.
   Scharf bleibt das Bild, weil der Browser es ohne Umrechnen zeichnet: Jedes Gerät hat eine feste Breite (Einstieg
   238 px, Kapitel 224 px, Abschnitt „Mobil“ und Smartphone 280 px), der Bildschirm ist genau 26/28 davon (221, 208,
   260 px), und für diese Breite gibt es je Pixeldichte die passende Bilddatei (tools/capture-screenshots.mjs, die
   Angabe „sizes“ im HTML nennt dieselben Werte). Deshalb auch keine Drehung und keine Bewegung um Bruchteile von Pixeln. */
.phone {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 420 / 874;
  border-radius: 15.6% / 7.5%;
  background: linear-gradient(
    135deg,
    #70757d 0%,
    #2a2d32 13%,
    #383c42 40%,
    #1e2125 68%,
    #5f646c 100%
  );
  box-shadow:
    0 0 0 1px #c3c8cf,
    inset 0 0 0 1px rgb(255 255 255 / 24%),
    inset 0 0 0 2px rgb(0 0 0 / 45%),
    var(--shadow-lg);
}

/* Schwarzer Glasrand zwischen Rahmen und Bildschirm */
.phone::before {
  content: "";
  position: absolute;
  inset: 0.6% 1.2%;
  border-radius: 14.8% / 7%;
  background: #050607;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%);
}

/* Tasten: links Aktionstaste und Lautstärke, rechts Standby */
.phone-hw {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.phone-hw::before,
.phone-hw::after {
  content: "";
  position: absolute;
  width: 1.1%;
  background: linear-gradient(90deg, #4b4f56, #a3a9b1 55%, #5a5f66);
}

.phone-hw::before {
  right: 99.8%;
  top: 18%;
  height: 22%;
  border-radius: 2px 0 0 2px;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0 16%,
    transparent 16% 32%,
    #000 32% 61%,
    transparent 61% 71%,
    #000 71% 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0 16%,
    transparent 16% 32%,
    #000 32% 61%,
    transparent 61% 71%,
    #000 71% 100%
  );
}

.phone-hw::after {
  left: 99.8%;
  top: 28%;
  height: 10.5%;
  border-radius: 0 2px 2px 0;
}

.phone-screen {
  position: absolute;
  z-index: 1;
  inset: 1.72% calc(100% / 28);
  overflow: hidden;
  border-radius: 13.1% / 6.05%;
  background: #ffffff;
}

/* Statusleiste mit Uhrzeit, Dynamic Island, Netz, WLAN und Akku – darunter beginnt die App (wie auf dem Gerät) */
.phone-status {
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 6.4%;
  padding: 0 7% 0 10.5%;
  background: #ffffff;
  color: #0a0a0a;
}

.phone-time {
  font: 600 4cqw/1 var(--font-display);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.phone-island {
  position: absolute;
  top: 20%;
  left: 50%;
  width: 31%;
  height: 66%;
  border-radius: 999px;
  background: #000000;
  translate: -50% 0;
}

.phone-status-icons {
  width: 16.5cqw;
  height: auto;
  aspect-ratio: 72 / 12;
}

/* Aufnahme mit abgedunkeltem Hintergrund (Suchdialog): Statusleiste und unterer Rand im selben Grau, sonst stünde über
   dem Schleier ein weißer Streifen – auf dem Gerät läge der Schleier über dem ganzen Bildschirm */
.phone-dim .phone-screen,
.phone-dim .phone-status {
  background: #e4e4e4;
}

/* Das Bild endet über dem Home-Balken (wie der sichere Bereich am unteren Rand des iPhones) – sonst läge der Balken
   quer über einer Textzeile und läse sich wie durchgestrichen */
.phone-screen picture {
  position: absolute;
  inset: 6.4% 0 3.6%;
  display: block;
  background: var(--surface-soft);
}

.phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Home-Balken und ein Hauch Spiegelung auf dem Glas (nur am Rand, damit die Schrift darunter nicht verblasst) */
.phone-screen::after {
  content: "";
  position: absolute;
  z-index: 3;
  bottom: 0.9%;
  left: 50%;
  width: 35%;
  height: 0.55%;
  border-radius: 999px;
  background: rgb(0 0 0 / 82%);
  translate: -50% 0;
}

.phone-screen::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  background: linear-gradient(118deg, rgb(255 255 255 / 9%) 0%, rgb(255 255 255 / 0%) 16%);
  pointer-events: none;
}

/* Telefon im Einstieg, über dem Dashboard: deckt die vierte Kennzahlenkarte vollständig ab (keine abgeschnittenen Reste).
   Steht das Dashboard gerade (ohne Scroll-Animation, bei reduzierter Bewegung), genügt diese Lage und der Reiter
   „Aufgaben & Aktivität“ bleibt frei; mit der gekippten Startlage sitzt es etwas höher (siehe Bewegung). */
.hero-phone {
  position: absolute;
  z-index: 1;
  right: -1.5%;
  bottom: -9%;
  width: clamp(120px, 21.25%, 238px);
}

@media (max-width: 719px) {
  .hero-visual .hero-stage {
    display: none;
  }

  /* Auf dem Smartphone steht nur der Telefonrahmen, mittig und ohne Überlagerung */
  .hero-phone {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(280px, 72vw);
    margin: 0 auto;
  }
}

/* Papierbogen (gedruckter Helferplan) mit einem zweiten Blatt dahinter */
.paper {
  position: relative;
  width: min(420px, 82%);
  margin: 0 auto;
  rotate: -2deg;
}

.paper::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 6px;
  background: #fbfbfa;
  box-shadow: 0 0 0 1px rgb(15 30 50 / 5%), var(--shadow-md);
  rotate: 5deg;
  translate: 4% 1%;
}

.paper img {
  display: block;
  width: 100%;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgb(15 30 50 / 7%), var(--shadow-lg);
}

/* ---------- Kennzahlen-Leiste ---------- */

.facts {
  position: relative;
}

.facts ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--line);
}

.facts li {
  padding: 30px 28px;
  border-left: 1px solid var(--line);
}

.facts li:first-child {
  padding-left: 0;
  border-left: 0;
}

.facts strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.6vw + 0.6rem, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  white-space: nowrap;
}

/* Zähler: feste Ziffernbreite, damit beim Hochzählen nichts springt */
.count {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.facts span:not(.count) {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.45;
}

@media (max-width: 899px) {
  .facts ul {
    grid-template-columns: repeat(2, 1fr);
  }

  .facts li {
    padding: 24px 20px;
  }

  .facts li:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .facts li:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 559px) {
  .facts ul {
    grid-template-columns: 1fr;
  }

  .facts li,
  .facts li:nth-child(odd) {
    padding: 20px 0;
    border-left: 0;
  }

  .facts li + li {
    border-top: 1px solid var(--line);
  }
}

/* ---------- Vorführungen: Laptop und Telefon drehen sich ins Bild ----------
   Die Bewegungen sind CSS-Animationen auf transform und opacity, die von selbst ablaufen, sobald das Gerät zur Hälfte im
   Bild ist (site.js setzt .is-playing; Laptop 3,6 s, Telefon 4 s, einmal je Aufruf). Der Browser führt sie selbst aus –
   ohne Skript und ohne neu zu zeichnen, deshalb flüssig. Prozent in den Keyframes = Anteil der Zeit. Die Keyframes (am Dateiende) sind aus Formeln erzeugt: weiche Teil-Abläufe (smoothstep x² · (3 − 2x))
   für Erscheinen, Drehen, Aufklappen und Aufrichten; Licht auf den Flächen nach Lambert (Helligkeit = cos des Winkels
   zwischen Flächennormale und Licht, Licht von vorn links oben, beim Telefon von vorn rechts).
   Die Regeln hier beschreiben die Endlage: So stehen die Geräte ohne JavaScript, bei reduzierter Bewegung und im Druck.
   In der Endlage steht alles gerade, unverschoben und in der Bildebene – die Bildschirme werden Pixel für Pixel gezeichnet.
   Kein opacity/filter/overflow an den Geräten selbst – das würde die 3D-Darstellung flach drücken. */
.showcase {
  position: relative;
}

.showcase-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3.2vh, 40px);
  padding: calc(var(--header-h) + clamp(24px, 4vh, 48px)) var(--gutter) clamp(32px, 5vh, 64px);
}

.showcase-copy {
  max-width: 920px;
  text-align: center;
}

.showcase-copy h2 {
  font-size: clamp(1.9rem, 1.7vw + 1rem, 2.9rem);
}

.showcase-copy .eyebrow {
  margin-bottom: 14px;
}

.showcase-copy .lead {
  margin-top: 16px;
}

/* Bühne mit Blickwinkel; darin steht das Gerät, darunter ein weicher Schatten auf dem „Tisch“ */
.showcase-scene {
  position: relative;
  display: grid;
  place-items: center;
  perspective: 2400px;
}

/* Schatten auf dem Tisch: ein enger, dunkler Kontaktschatten und ein weiter, weicher Umgebungsschatten */
.showcase-floor {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0;
  width: 90%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgb(14 20 30 / 26%) 0%,
    rgb(14 20 30 / 18%) 24%,
    rgb(14 20 30 / 9%) 50%,
    rgb(14 20 30 / 3%) 76%,
    rgb(14 20 30 / 0%) 100%
  );
  translate: -50% 0;
}

/* Kontaktschatten: schmal und dunkler, genau unter dem Gerät */
.showcase-floor::before {
  content: "";
  position: absolute;
  inset: 36% 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(10 14 22 / 34%), rgb(10 14 22 / 12%) 55%, rgb(10 14 22 / 0%));
}

.device-mark {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 451 / 261;
}

/* Gemeinsame Oberflächen: Aluminium (fein gekörnt) */
.laptop {
  --grain: url("../img/textur-koernung.svg");
  --alu-hi: #eef0f2;
  --alu: #d9dce0;
  --alu-lo: #b9bdc3;
}

/* --- Laptop ---
   Ablauf: erscheint zugeklappt, von hinten und schräg oben gesehen (das Zeichen auf dem Deckel zeigt zum Betrachter),
   dreht sich zugeklappt um 180°, klappt vor dem Betrachter auf und richtet sich zur Vorderansicht auf. Beim Aufklappen
   geht der Bildschirm an (die Abdunklung über ihm blendet aus).
   Maße hängen an der Bildschirmbreite --sw (höchstens 880 px – dafür gibt es die Bilddatei in genau dieser Breite).
   Deckel = Rand + Bildschirm (16 : 10) + Rand; das Unterteil ist so tief, wie der Deckel hoch ist (zugeklappt deckt er
   es genau ab). Gedreht wird um die Mitte des Unterteils. Der Blickpunkt liegt auf Höhe der Deckeloberkante, wie bei
   einem Studiofoto von leicht oben: Der Deckel steht in der Bildebene (bleibt also unverzerrt und scharf), Tastatur und
   Touchpad liegen perspektivisch davor, die Vorderkante ist etwa 13 % breiter als der Deckel. Beim Aufklappen, schräg von oben gesehen, ist der Laptop kurz etwas
   kleiner, damit die Vorderkante im Bild bleibt. --sw, --pw: bei Änderung „sizes“ im HTML mitziehen. */
.showcase-laptop {
  /* Höhe in der Endlage ≈ 0,795 · --sw + 218 px (Kopfzeile, Text, Abstände); die Vorderkante ist 1,19 · --sw breit */
  --sw: min(880px, 80vw, calc((100vh - 218px) * 1.258));
  --b: calc(var(--sw) / 44);
  --lw: calc(var(--sw) + 2 * var(--b));
  --lh: calc(var(--sw) / 1.6 + 2.3 * var(--b));
  --t: calc(var(--sw) / 55);
  --tl: calc(var(--sw) / 150);
}

.showcase-laptop .showcase-scene {
  perspective: 5000px;
  perspective: calc(var(--sw) * 5.68); /* bei 880 px Bildschirm 5000 px; kleiner Laptop, gleicher Blick */
  perspective-origin: 50% 0;
}

/* Von oben gesehen braucht der Laptop mehr Höhe: Text etwas näher an die Kopfzeile */
.showcase-laptop .showcase-stage {
  gap: clamp(14px, 2.4vh, 32px);
  padding-top: calc(var(--header-h) + clamp(12px, 2.4vh, 32px));
  padding-bottom: clamp(8px, 1.5vh, 20px);
}

/* Schatten auf dem Tisch: angehoben (zugeklappt, schwebend) heller und breiter, aufgesetzt dichter */
.showcase-laptop .showcase-floor {
  width: 98%;
  height: 11%;
  opacity: 0; /* aufgesetzt übernimmt der Kontaktschatten (.laptop::before) */
}

.laptop {
  position: relative;
  width: var(--lw);
  height: calc(var(--lh) + var(--t));
  margin-bottom: calc(var(--sw) * 0.1); /* Platz für das perspektivisch davor liegende Unterteil */
  transform-style: preserve-3d;
  transform-origin: 50% var(--lh) calc(var(--lh) / 2);
}

.laptop > *,
.laptop-lid > *,
.laptop-screen > *,
.laptop-deck > * {
  position: absolute;
}

/* Schatten unter dem aufgesetzten Laptop: eine Fläche knapp unter dem Unterteil mit weichem Auslauf nach außen (nah am
   Gerät dunkler). Sie erscheint beim Aufsetzen; der flache Bodenschatten der Bühne übernimmt, solange er schwebt. */
.laptop::before {
  content: "";
  position: absolute;
  top: calc(var(--lh) + var(--t) + 1px);
  left: 1.5%;
  width: 97%;
  height: calc(var(--lh) * 0.97);
  border-radius: calc(var(--b) * 0.9);
  background: rgb(14 20 30 / 34%);
  box-shadow:
    0 0 calc(var(--sw) * 0.025) calc(var(--sw) * 0.006) rgb(14 20 30 / 26%),
    0 0 calc(var(--sw) * 0.08) calc(var(--sw) * 0.02) rgb(14 20 30 / 10%);
  transform-origin: 50% 0;
  transform: rotateX(90deg) translateY(calc(var(--lh) * 0.015));
  pointer-events: none;
}

/* Deckel: dreht um seine Unterkante (Scharnier); zugeklappt liegt er auf dem Unterteil */
.laptop-lid {
  inset: 0 0 auto;
  height: var(--lh);
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
}

/* Wendeflächen (Glas vorn, Aluminium hinten). Safari blendet eine abgewandte Fläche nur zuverlässig aus, wenn sie selbst
   transformiert ist (deshalb scale auch in der Endlage) – und manche Browser gar nicht, sobald Teile davon eigene
   Grafikebenen bekommen. Deshalb schrumpft die jeweils abgewandte Seite in der Animation zusätzlich auf null, genau dann,
   wenn sie ohnehin nur von der Kante zu sehen ist: das Glas, solange der Deckel zu ist, die Rückseite, wenn er offen ist. */
.laptop-screen,
.laptop-cover {
  inset: 0;
  border-radius: calc(var(--b) * 1.1) calc(var(--b) * 1.1) calc(var(--b) * 0.3) calc(var(--b) * 0.3);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Vorderseite: schwarzes Glas mit schmaler, heller Aluminiumkante; das Glas fängt oben links etwas Licht. In der Endlage
   ist scale genau 1 (keine Umrechnung, der Bildschirm bleibt 1 : 1). */
.laptop-screen {
  scale: 1;
  background: linear-gradient(158deg, #202227 0%, #0c0d10 28%, #07080a 100%);
  box-shadow:
    0 0 0 1px #c3c7cc,
    0 0 0 2px rgb(140 145 152 / 55%),
    inset 0 0 0 1px rgb(255 255 255 / 9%);
}

/* Kamera: dunkle Linse mit bläulichem Schimmer und kleinem Lichtpunkt */
.laptop-camera {
  top: calc(var(--b) * 0.4);
  left: 50%;
  width: calc(var(--b) * 0.28);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 32%, rgb(255 255 255 / 70%) 0 8%, rgb(255 255 255 / 0%) 16%),
    radial-gradient(circle closest-side, #2d3b55 0 35%, #0b0f16 70%, #1d2026 100%);
  translate: -50% 0;
}

.laptop-screen picture {
  top: var(--b);
  left: var(--b);
  width: var(--sw);
  height: calc(var(--sw) / 1.6);
  background: var(--surface-soft);
}

.laptop-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Über dem Bildschirm: aus, solange der Deckel aufgeht (dunkel), Spiegelung, solange der Laptop schräg steht – in der
   Endlage beides vollständig durchsichtig */
.laptop-screen::before,
.laptop-screen::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.laptop-screen::before {
  background: #040507;
}

.laptop-screen::after {
  background: linear-gradient(
    118deg,
    rgb(255 255 255 / 16%) 0%,
    rgb(255 255 255 / 4%) 38%,
    rgb(255 255 255 / 0%) 55%
  );
}

/* Rückseite des Deckels: gestrahltes Aluminium mit eingelassenem, spiegelndem Zeichen von VereinsFlow */
.laptop-cover {
  display: grid;
  place-items: center;
  background:
    var(--grain),
    radial-gradient(120% 90% at 20% 0%, rgb(255 255 255 / 55%), rgb(255 255 255 / 0%) 60%),
    linear-gradient(170deg, var(--alu-hi) 0%, #d4d8dd 55%, #c8ccd2 100%);
  scale: 0; /* in der Endlage abgewandt (siehe oben) */
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / 8%),
    inset 0 2px 0 rgb(255 255 255 / 65%);
  color: #aeb4bc;
  transform: rotateY(180deg) translateZ(var(--tl));
}

.laptop-cover .device-mark {
  width: 13%;
  filter: drop-shadow(0 1px 0 rgb(255 255 255 / 70%)) drop-shadow(0 -1px 0 rgb(0 0 0 / 14%));
}

/* Lichtschein auf dem Aluminium, der beim Drehen auf- und wieder abblendet (::before), und Abdunklung, wenn der Deckel
   hochklappt und die Rückseite vom Licht wegzeigt (::after, hier Endlage – dann ist die Rückseite ohnehin abgewandt) */
.laptop-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(20 26 34);
  opacity: 0.4;
  pointer-events: none;
}

.laptop-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    110deg,
    rgb(255 255 255 / 0%) 25%,
    rgb(255 255 255 / 42%) 50%,
    rgb(255 255 255 / 0%) 75%
  );
  opacity: 0;
  pointer-events: none;
}

/* Kanten des Deckels (oben, links, rechts), damit er beim Drehen nicht zu einem Strich wird */
.laptop-edge {
  background: linear-gradient(90deg, #b9bdc3, #eceef0 50%, #b9bdc3);
}

.laptop-edge-top {
  top: 0;
  left: calc(var(--b) * 1.1);
  width: calc(100% - 2.2 * var(--b));
  height: var(--tl);
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
}

.laptop-edge-l,
.laptop-edge-r {
  top: calc(var(--b) * 1.1);
  width: var(--tl);
  height: calc(100% - 1.1 * var(--b));
}

/* Die oberen runden Ecken des Deckels zwischen Glas und Rückseite (die geraden Stücke bilden die Kanten) */
.lid-c {
  top: 1px;
  width: calc(var(--b) * 1.1);
  height: calc(var(--b) * 1.1);
  background: linear-gradient(90deg, #b9bdc3, #e2e4e7 50%, #b9bdc3);
  transform: translateZ(calc(var(--tl) / -2));
}

.lid-tl {
  left: 1px;
  border-top-left-radius: 100%;
}

.lid-tr {
  right: 1px;
  border-top-right-radius: 100%;
}

.laptop-edge-l {
  left: 0;
  transform-origin: 0 50%;
  transform: rotateY(90deg);
}

.laptop-edge-r {
  right: 0;
  transform-origin: 100% 50%;
  transform: rotateY(-90deg);
}

/* Unterteil (von oben): Aluminium mit Lichtverlauf, hinten die Scharnierfuge, Lautsprecher links und rechts, die
   schwarze Tastaturmulde und das große Glas-Touchpad. Maße der Tastatur in cqw (Breite des Unterteils). */
.laptop-deck {
  container-type: inline-size;
  top: var(--lh);
  left: 0;
  width: 100%;
  height: var(--lh);
  border-radius: calc(var(--b) * 0.3) calc(var(--b) * 0.3) calc(var(--b) * 0.9) calc(var(--b) * 0.9);
  background:
    var(--grain),
    radial-gradient(90% 70% at 30% 20%, rgb(255 255 255 / 45%), rgb(255 255 255 / 0%) 70%),
    linear-gradient(180deg, #c3c7cc 0%, var(--alu) 16%, #e4e7ea 70%, #d0d3d7 100%);
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / 7%),
    inset 0 -2px 0 rgb(255 255 255 / 70%);
  transform-origin: 50% 0;
  transform: rotateX(90deg);
}

/* Scharnierfuge hinten */
.laptop-deck::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1.6%;
  border-radius: 0 0 0.4cqw 0.4cqw;
  background: linear-gradient(180deg, #4a4d53, #7a7e85);
}

.laptop-speaker {
  top: 6%;
  width: 7.2%;
  height: 45%;
  border-radius: 0.5cqw;
  background:
    linear-gradient(rgb(20 24 30 / 9%), rgb(20 24 30 / 9%)),
    radial-gradient(circle closest-side, rgb(20 24 30 / 26%) 0 45%, rgb(20 24 30 / 0%) 75%) 0 0 / 0.3cqw 0.3cqw;
}

.laptop-speaker-l {
  left: 3.2%;
}

.laptop-speaker-r {
  right: 3.2%;
}

/* Tastatur: 58 Viertel-Einheiten breit (Taste = 4), sechs Reihen (Funktionsreihe halb hoch); ISO-Eingabetaste über
   zwei Reihen aus zwei Teilen (oben 1, unten ¾ Taste breit) */
.laptop-keys {
  top: 5.5%;
  left: 12.5%;
  display: grid;
  grid-template-columns: repeat(58, 1fr);
  grid-template-rows: 0.62fr repeat(5, 1fr);
  gap: 0.5cqw 0.46cqw;
  width: 75%;
  height: 46%;
  padding: 0.55cqw;
  border-radius: 0.9cqw;
  background: #0b0c0e;
  box-shadow:
    inset 0 0.12cqw 0.3cqw rgb(0 0 0 / 70%),
    0 0 0 0.07cqw rgb(255 255 255 / 55%),
    0 -0.07cqw 0 0.07cqw rgb(0 0 0 / 12%);
  color: #e3e5e9;
  font: 500 1.3cqw/1 var(--font-display);
}

.k {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28cqw;
  grid-column: span 4;
  border-radius: 0.5cqw;
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(255 255 255 / 7%), rgb(255 255 255 / 0%) 60%),
    linear-gradient(180deg, #27292d, #1b1c1f);
  box-shadow:
    0 0.1cqw 0 #050506,
    0 0.18cqw 0.3cqw rgb(0 0 0 / 45%),
    inset 0 0.06cqw 0 rgb(255 255 255 / 12%);
  white-space: nowrap;
}

/* obere Belegung (z. B. „!“ über „1“) */
.k i {
  font-style: normal;
}

.k:has(i) {
  font-size: 1.02cqw;
}

/* Sondertasten: Beschriftung klein in der unteren Ecke */
.km {
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 0.7cqw 0.55cqw;
  font-size: 1.05cqw;
}

.kr {
  align-items: flex-end;
}

.kf {
  font-size: 0.82cqw;
}

.k-touch {
  background:
    radial-gradient(circle closest-side, rgb(255 255 255 / 0%) 52%, rgb(255 255 255 / 14%) 56% 62%, rgb(255 255 255 / 0%) 66%),
    linear-gradient(180deg, #27292d, #1b1c1f);
}

.u5 {
  grid-column: span 5;
}

.u6 {
  grid-column: span 6;
}

.u7 {
  grid-column: span 7;
}

.u9 {
  grid-column: span 9;
}

.u20 {
  grid-column: span 20;
}

.k-enter {
  z-index: 1;
  grid-area: 3 / 55 / 4 / 59;
  border-bottom-right-radius: 0;
}

.k-enter-low {
  z-index: 2;
  grid-area: 3 / 56 / 5 / 59;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow:
    0 0.1cqw 0 #050506,
    0 0.18cqw 0.3cqw rgb(0 0 0 / 45%);
}

/* Pfeiltasten halb hoch, hoch/runter übereinander */
.ka {
  align-self: end;
  height: 48%;
  font-size: 0.7cqw;
}

.k-updown {
  display: grid;
  grid-column: span 4;
  grid-template-rows: 1fr 1fr;
  gap: 0.14cqw;
}

.k-updown .ka {
  height: auto;
}

/* Touchpad: Glas mit feinem Rand und Lichtverlauf */
.laptop-pad {
  top: 56%;
  left: 29.5%;
  width: 41%;
  height: 38.5%;
  border-radius: 1.1cqw;
  background:
    radial-gradient(100% 80% at 30% 0%, rgb(255 255 255 / 50%), rgb(255 255 255 / 0%) 70%),
    linear-gradient(180deg, #d6d9dd, #cbced3);
  box-shadow:
    inset 0 0 0 0.07cqw rgb(0 0 0 / 14%),
    inset 0 0.12cqw 0 rgb(255 255 255 / 60%),
    0 0.05cqw 0 rgb(255 255 255 / 70%);
}

/* Senkrechte Kanten des Unterteils (vorn, hinten, links, rechts): oben eine Lichtkante, zur Unterseite dunkler. Vorn,
   an den Seiten und in den runden Ecken derselbe Verlauf – so gehen sie nahtlos ineinander über. */
.laptop-front,
.laptop-rear,
.laptop-side {
  top: var(--lh);
  height: var(--t);
  background:
    var(--grain),
    linear-gradient(180deg, #f8f9fa 0 6%, #e3e6e9 12%, #d2d5d9 45%, #adb1b7 82%, #979ba2 100%);
}

.laptop-front,
.laptop-rear {
  left: 0;
  width: 100%;
}

/* Vorderkante mit der Mulde zum Aufklappen – über den geraden Teil und je 1 px unter die Streifen der runden Ecken */
.laptop-front {
  left: calc(var(--b) * 0.9 - 1px);
  width: calc(100% - 1.8 * var(--b) + 2px);
  background:
    radial-gradient(9% 90% at 50% 0%, rgb(40 44 50 / 20%), rgb(40 44 50 / 0%) 75%),
    var(--grain),
    linear-gradient(180deg, #f8f9fa 0 6%, #e3e6e9 12%, #d2d5d9 45%, #adb1b7 82%, #979ba2 100%);
  transform: translateZ(var(--lh));
}

/* Rückseite mit dunkler Scharnierabdeckung */
.laptop-rear {
  background:
    linear-gradient(180deg, #6a6e74, #45484e 55%, #55585e) 50% 12% / 84% 62% no-repeat,
    var(--grain),
    linear-gradient(180deg, #f5f6f8 0 7%, #dfe2e5 14%, var(--alu) 45%, var(--alu-lo) 100%);
  transform: rotateY(180deg);
}

.laptop-side {
  width: calc(var(--lh) - 0.9 * var(--b) + 1px); /* bis 1 px in die runde Ecke vorn */
}

/* Licht auf den senkrechten Kanten: dunkle Schicht, deren Deckkraft die Animation nach der Ausrichtung zum Licht setzt
   (Werte hier: Endlage) */
.laptop-front::after,
.laptop-rear::after,
.laptop-side::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(12 16 22);
  pointer-events: none;
}

.laptop-front::after {
  opacity: 0.09;
}

.laptop-rear::after,
.laptop-side-r::after {
  opacity: 0.5;
}

.laptop-side-l::after {
  opacity: 0.213;
}

/* Runde Ecken vorn am Unterteil: je vier schmale, ebene Streifen entlang der Rundung (ein Vieleck, höchstens 0,4 px neben
   dem Kreis), so hoch wie die Kante, im selben Verlauf und mit Licht wie die Kanten (siehe unten). Liegen in einer Ebene mit der Tastaturfläche; gebaut ist eine Ecke oben
   links (wie ein Viertelkreis in einem Quadrat), vorn links und vorn rechts ist sie um 270° bzw. 180° gedreht.
   Streifen statt gestapelter Schichten: keine Stufen, und nur wenige, kleine Grafikebenen. */
.laptop-base {
  --rr: calc(var(--b) * 0.9); /* Eckenradius vorn */
  top: var(--lh);
  left: 0;
  width: 100%;
  height: var(--lh);
  transform-style: preserve-3d;
  transform-origin: 50% 0;
  transform: rotateX(90deg);
}

.base-c {
  position: absolute;
  bottom: 0;
  width: var(--rr);
  height: var(--rr);
  transform-style: preserve-3d;
}

.base-fl {
  left: 0;
  transform: rotateZ(270deg);
}

.base-fr {
  right: 0;
  transform: rotateZ(180deg);
}

/* Streifen: steht senkrecht (rotateY), liegt als Sehne im Abstand R · cos 11,25° vom Mittelpunkt der Rundung (rechts
   unten im Quadrat) und ist um ihn auf seinen Winkel gedreht; an jedem Ende 1 px länger als die Sehne (Überlappung
   statt Fuge) */
.base-c i {
  position: absolute;
  top: calc(var(--rr) * 0.80491 - 1px);
  left: 100%;
  width: var(--t);
  height: calc(var(--rr) * 0.39018 + 2px);
  background:
    var(--grain),
    linear-gradient(90deg, #f8f9fa 0 6%, #e3e6e9 12%, #d2d5d9 45%, #adb1b7 82%, #979ba2 100%); /* wie die Kanten */
  transform-origin: 0 50%;
  transform: rotateZ(var(--a)) translateX(calc(var(--rr) * -0.98079)) rotateY(90deg);
}

/* Licht wie auf den Kanten, als Verlauf entlang des Streifens: oben (::before) der Wert an seinem oberen Stoß, unten
   (::after) der am unteren – zusammen ein weicher Übergang von der Vorderkante zur Seite ohne Stufen zwischen den
   Streifen. Die Deckkraft setzt die Animation des jeweiligen Winkels (--lit0/--lit1; die Stöße ganz außen teilen sie mit
   Vorderkante und Seite), hier die Endlage. */
.base-c i::before,
.base-c i::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Verlauf von Stoß zu Stoß: Die Streifen stehen an jedem Ende 1 px über (siehe oben) */
.base-c i::before {
  background: linear-gradient(rgb(12 16 22) 1px, rgb(12 16 22 / 0%) calc(100% - 1px));
  opacity: var(--shade1);
}

.base-c i::after {
  background: linear-gradient(rgb(12 16 22 / 0%) 1px, rgb(12 16 22) calc(100% - 1px));
  opacity: var(--shade0);
}

.base-fl i:nth-child(1) {
  --a: 11.25deg;
  --lit0: vf-laptop-lit-front;
  --lit1: vf-laptop-lit-m22;
  --shade0: 0.09;
  --shade1: 0.012;
}

.base-fl i:nth-child(2) {
  --a: 33.75deg;
  --lit0: vf-laptop-lit-m22;
  --lit1: vf-laptop-lit-m45;
  --shade0: 0.012;
  --shade1: 0.008;
}

.base-fl i:nth-child(3) {
  --a: 56.25deg;
  --lit0: vf-laptop-lit-m45;
  --lit1: vf-laptop-lit-m67;
  --shade0: 0.008;
  --shade1: 0.078;
}

.base-fl i:nth-child(4) {
  --a: 78.75deg;
  --lit0: vf-laptop-lit-m67;
  --lit1: vf-laptop-lit-side-l;
  --shade0: 0.078;
  --shade1: 0.213;
}

.base-fr i:nth-child(1) {
  --a: 11.25deg;
  --lit0: vf-laptop-lit-side-r;
  --lit1: vf-laptop-lit-p67;
  --shade0: 0.5;
  --shade1: 0.5;
}

.base-fr i:nth-child(2) {
  --a: 33.75deg;
  --lit0: vf-laptop-lit-p67;
  --lit1: vf-laptop-lit-p45;
  --shade0: 0.5;
  --shade1: 0.413;
}

.base-fr i:nth-child(3) {
  --a: 56.25deg;
  --lit0: vf-laptop-lit-p45;
  --lit1: vf-laptop-lit-p22;
  --shade0: 0.413;
  --shade1: 0.231;
}

.base-fr i:nth-child(4) {
  --a: 78.75deg;
  --lit0: vf-laptop-lit-p22;
  --lit1: vf-laptop-lit-front;
  --shade0: 0.231;
  --shade1: 0.09;
}

.laptop-side-l {
  left: 0;
  transform-origin: 0 50%;
  transform: rotateY(-90deg);
}

.laptop-side-r {
  right: 0;
  transform-origin: 100% 50%;
  transform: rotateY(90deg);
}

/* --- Telefon ---
   Die Vorderseite ist der bekannte Telefonrahmen (.phone), 336 px breit – der Bildschirm ist damit genau 312 px breit,
   passend zur Bilddatei. Sie liegt in der Bildebene (z = 0), die Rückseite eine Gehäusedicke dahinter; gedreht wird um
   die Mitte dazwischen. Die geraden Stücke des Gehäuses sind Seiten- und Stirnflächen (mit Tasten), die vier runden
   Ecken je sechs schmale Streifen – so hat das Gehäuse beim Drehen rundum eine geschlossene Kante. */

.iphone {
  --pw: min(336px, 72vw, calc((100vh - var(--header-h) - 110px) / 2.081));
  --t: calc(var(--pw) * 0.1);
  --grain: url("../img/textur-koernung.svg");
  /* Titan in Champagner: helle Lichtkante, warme Mitteltöne, dunklere Ränder */
  --titan: linear-gradient(
    90deg,
    #9d9488 0%,
    #e9e2d7 16%,
    #bdb3a5 42%,
    #998f82 58%,
    #ddd5c9 84%,
    #a0978a 100%
  );
  /* derselbe Verlauf gespiegelt: so liegt er auf der rechten Seitenfläche (sie ist andersherum gedreht) */
  --titan-r: linear-gradient(
    270deg,
    #9d9488 0%,
    #e9e2d7 16%,
    #bdb3a5 42%,
    #998f82 58%,
    #ddd5c9 84%,
    #a0978a 100%
  );
  position: relative;
  width: var(--pw);
  aspect-ratio: 420 / 874;
  margin-bottom: calc(var(--pw) * 0.08);
  transform-style: preserve-3d;
  transform-origin: 50% 50% calc(var(--t) / -2);
}

/* Vorderseite im selben Titanton wie das Gehäuse (die übrigen Telefone der Seite bleiben dunkel). Sie erscheint erst,
   wenn man bei der Drehung genau auf die Kante schaut (Drehung zu 47,7 % geschafft: 90° von 172°), die Rückseite verschwindet dort – siehe
   .laptop-screen. In der Endlage ist scale genau 1. */
.iphone-front {
  scale: 1;
  background: linear-gradient(135deg, #b1a797 0%, #756c60 13%, #8a8175 40%, #675f55 68%, #a69c8e 100%);
  box-shadow:
    0 0 0 1px #d2c9bb,
    inset 0 0 0 1px rgb(255 250 240 / 30%),
    inset 0 0 0 2px rgb(40 30 20 / 40%),
    var(--shadow-lg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Beim Drehen spiegelt das Glas; in der Endlage nicht mehr */
.iphone-front::after {
  content: "";
  position: absolute;
  z-index: 6;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    122deg,
    rgb(255 255 255 / 0%) 8%,
    rgb(255 255 255 / 20%) 26%,
    rgb(255 255 255 / 0%) 46%
  );
  opacity: 0;
  pointer-events: none;
}

/* Das Telefon schwebt: Schatten schmaler und ohne harten Kontaktschatten */
.showcase-phone .showcase-floor {
  width: 64%;
  height: 8%;
}

.showcase-phone .showcase-floor::before {
  opacity: 0.45;
}

/* Die flachen Tasten der Vorderansicht (im Titanton des Gehäuses) erst am Ende – beim Drehen sitzen die Tasten auf den
   Seitenkanten */
.iphone-front .phone-hw::before,
.iphone-front .phone-hw::after {
  background: linear-gradient(90deg, #7d7468, #c9c0b2 55%, #8a8175);
}

.iphone-rim {
  --rr: calc(var(--pw) * 0.156); /* Eckenradius: 15,6 % der Breite = 7,5 % der Höhe */
  position: absolute;
  inset: 0;
  display: none; /* in der Vorderansicht unsichtbar – nur mit Bewegung nötig (siehe Bewegung) */
  transform-style: preserve-3d;
}

/* Die vier runden Ecken: je sechs schmale, ebene Streifen entlang der Rundung (ein Vieleck, höchstens 0,5 px neben dem
   Kreis), so tief wie das Gehäuse und im Titan-Verlauf der Seitenflächen. Gebaut ist die Ecke oben links (Viertelkreis
   in einem Quadrat); die übrigen sind dieselbe Ecke, um 90°, 180° und 270° gedreht. Streifen statt gestapelter
   Schichten: keine Stufen an der Kante, wenn man genau von der Seite schaut, und nur wenige, kleine Grafikebenen. */
.rim-c {
  position: absolute;
  width: var(--rr);
  height: var(--rr);
  transform-style: preserve-3d;
}

.rim-tl {
  top: 0;
  left: 0;
}

.rim-tr {
  top: 0;
  right: 0;
  transform: rotateZ(90deg);
}

.rim-br {
  right: 0;
  bottom: 0;
  transform: rotateZ(180deg);
}

.rim-bl {
  bottom: 0;
  left: 0;
  transform: rotateZ(270deg);
}

/* Streifen: steht senkrecht auf der Vorderseite (rotateY), liegt als Sehne im Abstand R · cos 7,5° vom Mittelpunkt der
   Rundung (rechts unten im Quadrat) und ist um ihn auf seinen Winkel gedreht; an jedem Ende 1 px länger als die Sehne:
   Die Nachbarn überlappen, sonst schiene an den Stößen der Hintergrund durch die geglätteten Kanten */
.rim-c i {
  position: absolute;
  top: calc(var(--rr) * 0.86947 - 1px);
  left: 100%;
  width: var(--t);
  height: calc(var(--rr) * 0.26105 + 2px);
  background: var(--grain), var(--titan);
  transform-origin: 0 50%;
  transform: rotateZ(var(--a)) translateX(calc(var(--rr) * -0.99144)) rotateY(90deg);
}

/* Licht: dieselbe warme, dunkle Schicht wie auf der angrenzenden Seitenfläche (gleiche Animation), zur Stirnseite hin
   schwächer (Anteil cos² bzw. sin² des Winkels) – die Stirnseiten liegen längs der Drehachse und bleiben gleich hell.
   Als Verlauf zwischen den Werten an beiden Enden des Streifens (--w1 oben, --w0 unten): keine Stufen zwischen Streifen. */
.rim-c i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgb(52 40 24 / var(--w1)) 1px, rgb(52 40 24 / var(--w0)) calc(100% - 1px)); /* von Stoß zu Stoß */
  opacity: var(--side-rest);
  pointer-events: none;
}

.rim-tl,
.rim-bl {
  --side: vf-phone-side-l;
  --side-rest: 0.32;
}

.rim-tr,
.rim-br {
  --side: vf-phone-side-r;
  --side-rest: 0.16;
}

.rim-tr i,
.rim-br i {
  background: var(--grain), var(--titan-r); /* passend zur rechten Seitenfläche */
}

/* Die Ecke oben links beginnt an der linken Seite (Winkel 0°); gedreht beginnt sie oben rechts und unten links an der
   Stirnseite */
.rim-tl i,
.rim-br i {
  --w0: var(--c0);
  --w1: var(--c1);
}

.rim-tr i,
.rim-bl i {
  --w0: var(--s0);
  --w1: var(--s1);
}

.rim-c i:nth-child(1) {
  --a: 7.5deg;
  --c0: 1;
  --c1: 0.933;
  --s0: 0;
  --s1: 0.067;
}

.rim-c i:nth-child(2) {
  --a: 22.5deg;
  --c0: 0.933;
  --c1: 0.75;
  --s0: 0.067;
  --s1: 0.25;
}

.rim-c i:nth-child(3) {
  --a: 37.5deg;
  --c0: 0.75;
  --c1: 0.5;
  --s0: 0.25;
  --s1: 0.5;
}

.rim-c i:nth-child(4) {
  --a: 52.5deg;
  --c0: 0.5;
  --c1: 0.25;
  --s0: 0.5;
  --s1: 0.75;
}

.rim-c i:nth-child(5) {
  --a: 67.5deg;
  --c0: 0.25;
  --c1: 0.067;
  --s0: 0.75;
  --s1: 0.933;
}

.rim-c i:nth-child(6) {
  --a: 82.5deg;
  --c0: 0.067;
  --c1: 0;
  --s0: 0.933;
  --s1: 1;
}

/* Rückseite: mattes Glas in Champagner-Titan im Metallrahmen – Licht von oben links, zum Rand hin leicht gewölbt
   (weiche Innenschattierung), am Übergang zum Rahmen eine feine Lichtkante und eine Fuge. Kameramodul oben links. */
.iphone-back {
  container-type: inline-size;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 15.6% / 7.5%;
  background:
    var(--grain),
    radial-gradient(140% 90% at 18% 0%, rgb(255 255 255 / 34%), rgb(255 255 255 / 0%) 55%),
    radial-gradient(120% 70% at 88% 100%, rgb(110 90 62 / 16%), rgb(110 90 62 / 0%) 60%),
    linear-gradient(170deg, #e7dfd2 0%, #d9cfbe 48%, #ccc0ad 100%);
  box-shadow:
    0 0 0 1px #a89e90,
    inset 0 0 0 calc(var(--pw) * 0.014) #b8ad9e,
    inset 0 0 0 calc(var(--pw) * 0.017) rgb(255 252 245 / 60%),
    inset 0 0 0 calc(var(--pw) * 0.021) rgb(95 78 55 / 18%),
    inset 0 0 calc(var(--pw) * 0.09) calc(var(--pw) * 0.012) rgb(95 78 55 / 11%),
    var(--shadow-lg);
  color: rgb(255 252 244 / 62%);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  scale: 0; /* in der Endlage abgewandt (siehe .iphone-front) */
  transform: translateZ(calc(var(--t) * -1)) rotateY(180deg);
}

.iphone-back .device-mark {
  width: 24%;
  filter: drop-shadow(0 1px 0 rgb(255 255 255 / 45%)) drop-shadow(0 -1px 0 rgb(0 0 0 / 10%));
}

/* Lichtschein, der beim Drehen auf- und abblendet, und Abdunklung, wenn die Rückseite vom Licht wegzeigt */
.iphone-back::before,
.iphone-back::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.iphone-back::before {
  z-index: 2;
  background: linear-gradient(
    110deg,
    rgb(255 255 255 / 0%) 25%,
    rgb(255 255 255 / 34%) 50%,
    rgb(255 255 255 / 0%) 75%
  );
  opacity: 0;
}

.iphone-back::after {
  z-index: 3;
  background: rgb(12 16 22);
  opacity: 0.38;
}

/* Kameramodul: erhabenes Glas mit Schlagschatten; Objektive mit Metallring, schwarzem Rand, violett vergütetem Glas
   und Lichtpunkt; Blitz, LiDAR und Mikrofon */
.iphone-camera {
  position: absolute;
  z-index: 1;
  top: 2.6%;
  left: 5.6%;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 25%;
  background:
    linear-gradient(
      135deg,
      rgb(255 255 255 / 58%) 0%,
      rgb(255 255 255 / 14%) 36%,
      rgb(255 255 255 / 0%) 58%,
      rgb(90 72 48 / 10%) 100%
    ),
    linear-gradient(170deg, #e5dbcc, #d3c7b4);
  box-shadow:
    0.15cqw 0.3cqw 0.4cqw rgb(60 45 25 / 24%),
    0.6cqw 1.3cqw 2.6cqw rgb(60 45 25 / 16%),
    inset 0 0.3cqw 0.2cqw rgb(255 255 255 / 70%),
    inset 0 -0.3cqw 0.45cqw rgb(90 70 45 / 18%),
    inset 0 0 0 0.15cqw rgb(120 100 75 / 24%);
}

.iphone-camera i,
.iphone-camera b {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
}

.lens {
  width: 41%;
  background:
    radial-gradient(circle at 34% 30%, rgb(255 255 255 / 78%) 0 2.5%, rgb(255 255 255 / 0%) 6%),
    radial-gradient(60% 40% at 38% 26%, rgb(255 255 255 / 14%), rgb(255 255 255 / 0%) 70%),
    radial-gradient(circle at 62% 66%, rgb(120 90 200 / 34%) 0 5%, rgb(120 90 200 / 0%) 16%),
    radial-gradient(circle at 44% 60%, rgb(60 150 140 / 22%) 0 3%, rgb(60 150 140 / 0%) 11%),
    radial-gradient(
      circle closest-side,
      #1d2a3e 0 12%,
      #0b1019 22%,
      #16202e 30%,
      #06080c 38%,
      #10141b 46%,
      #020304 56%,
      #2a2c30 58.5%,
      #0c0d0f 62%,
      #18191c 68.5%,
      rgb(24 25 28 / 0%) 72.5%
    ),
    conic-gradient(from 215deg, #f5f0e8, #a99f91, #ece5da, #978d80, #f5f0e8);
  box-shadow:
    0.1cqw 0.35cqw 0.5cqw rgb(40 30 15 / 34%),
    0.4cqw 0.9cqw 1.6cqw rgb(40 30 15 / 18%),
    inset 0 0 0 0.12cqw rgb(255 255 255 / 35%);
}

.lens:nth-child(1) {
  top: 6%;
  left: 6%;
}

.lens:nth-child(2) {
  top: 53%;
  left: 6%;
}

.lens:nth-child(3) {
  top: 29.5%;
  left: 53%;
}

.flash {
  top: 9%;
  left: 71%;
  width: 17%;
  background:
    radial-gradient(circle at 38% 34%, rgb(255 255 255 / 70%) 0 8%, rgb(255 255 255 / 0%) 22%),
    radial-gradient(circle closest-side, #fbf4e2 0 40%, #e2d4b6 72%, #a8997c 100%);
  box-shadow:
    0.1cqw 0.25cqw 0.4cqw rgb(60 45 25 / 25%),
    inset 0 0 0 0.25cqw rgb(120 100 70 / 25%);
}

.lidar {
  top: 74%;
  left: 73%;
  width: 14%;
  background:
    radial-gradient(circle at 40% 36%, rgb(255 255 255 / 30%) 0 6%, rgb(255 255 255 / 0%) 14%),
    radial-gradient(circle closest-side, #15171b 0 58%, #3a3c40 66%, #1a1b1e 100%);
  box-shadow: 0.1cqw 0.25cqw 0.4cqw rgb(60 45 25 / 25%);
}

.mic {
  top: 8%;
  left: 56%;
  width: 4%;
  background: #3a3c40;
}

/* Gerade Seitenflächen (Titan) mit Antennenfugen und Tasten; unten und oben die Stirnflächen */
.iphone-side,
.iphone-cap {
  position: absolute;
  background:
    linear-gradient(
      180deg,
      rgb(0 0 0 / 0%) 18%,
      rgb(105 95 82 / 70%) 18% 18.6%,
      rgb(0 0 0 / 0%) 18.6% 81.4%,
      rgb(105 95 82 / 70%) 81.4% 82%,
      rgb(0 0 0 / 0%) 82%
    ),
    var(--grain),
    var(--titan);
}

/* je 1 px bis in die runden Ecken hinein (unter die Streifen): keine Fuge am Übergang */
.iphone-side {
  top: calc(7.5% - 1px);
  width: var(--t);
  height: calc(85% + 2px);
}

/* Licht auf den Seitenflächen: warme, dunkle Schicht (auch über den Tasten); Deckkraft setzt die Animation (hier Endlage) */
.iphone-side::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgb(52 40 24);
  opacity: 0.32;
  pointer-events: none;
}

.iphone-side-r::after {
  opacity: 0.16;
}

.iphone-side-l {
  left: 0;
  transform-origin: 0 50%;
  transform: rotateY(90deg);
}

.iphone-side-r {
  right: 0;
  transform-origin: 100% 50%;
  transform: rotateY(-90deg);
}

.iphone-side b {
  position: absolute;
  left: 20%;
  width: 60%;
  border-radius: 999px;
  background: linear-gradient(90deg, #9b9185, #efe9df 45%, #c2b8aa 60%, #92887b);
  box-shadow:
    0 0 0 1px rgb(70 55 35 / 22%),
    0 1px 2px rgb(40 30 15 / 22%);
}

.btn-action {
  top: 11.2%;
  height: 4.7%;
}

.btn-up {
  top: 21.8%;
  height: 8.2%;
}

.btn-down {
  top: 33.5%;
  height: 8.2%;
}

.btn-power {
  top: 22.9%;
  height: 13%;
}

.iphone-cap {
  left: calc(15.6% - 1px);
  width: calc(68.8% + 2px);
  height: var(--t);
  background: var(--grain), linear-gradient(180deg, #9d9488, #e9e2d7 30%, #bdb3a5 60%, #a0978a);
}

.iphone-cap-t {
  top: 0;
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
}

.iphone-cap-b {
  bottom: 0;
  transform-origin: 50% 100%;
  transform: rotateX(90deg);
}

/* Breite Fenster: beim Telefon Text links, Gerät rechts */
@media (min-width: 900px) {
  .showcase-phone .showcase-stage {
    flex-direction: row;
    gap: clamp(48px, 8vw, 140px);
  }

  .showcase-phone .showcase-copy {
    max-width: 440px;
    text-align: left;
  }
}

/* Zugeklappt und schräg gedreht ist der Laptop breiter als ein schmaler Bildschirm – bis zum Aufklappen etwas kleiner */
@media (min-width: 720px) and (max-width: 1023px) {
  .showcase-laptop {
    --closed-scale: 0.8;
  }
}

/* Schmale Bildschirme: Telefon nach der sichtbaren Höhe (svh – ohne die ein- und ausfahrende Adressleiste), der
   Zusatztext entfällt, sonst passt das Telefon nicht mehr ganz aufs Bild (dieselbe Aussage steht unter „Mobil“) */
@media (max-width: 719px) {
  .showcase-laptop {
    --closed-scale: 0.76;
    --sw: min(880px, calc((100vw - 2 * var(--gutter)) / 1.19), calc((100vh - 218px) * 1.258));
  }

  .iphone {
    --pw: min(280px, 72vw, calc((100vh - 300px) / 2.16));
  }

  .showcase-copy .lead {
    display: none;
  }
}

@supports (height: 100svh) {
  @media (max-width: 719px) {
    .iphone {
      --pw: min(280px, 72vw, calc((100svh - 300px) / 2.16));
    }
  }
}

/* Querformat unter 900 px (Smartphone quer, kleine Fenster): Text neben dem Telefon, Größe nur aus der sichtbaren Höhe
   (sonst würde das Telefon unter dem Text abgeschnitten oder winzig) */
@media (max-width: 899px) and (orientation: landscape) {
  .showcase-phone .showcase-stage {
    flex-direction: row;
    gap: clamp(32px, 6vw, 140px);
  }

  .showcase-phone .showcase-copy {
    max-width: 440px;
    text-align: left;
  }

  .iphone {
    --pw: min(336px, 40vw, calc((100vh - var(--header-h) - 60px) / 2.161));
  }
}

@supports (height: 100svh) {
  @media (max-width: 899px) and (orientation: landscape) {
    .iphone {
      --pw: min(336px, 40vw, calc((100svh - var(--header-h) - 60px) / 2.161));
    }
  }
}

/* ---------- Karten ---------- */

.grid {
  display: grid;
  gap: 20px;
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1099px) {
  .grid-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.card {
  position: relative;
  isolation: isolate;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.card h3 {
  margin-bottom: 8px;
}

.card p {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* Lichtschein, der dem Mauszeiger folgt (site.js setzt --mx/--my); liegt unter dem Text */
.card::before,
.role::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgb(5 85 183 / 7%), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}

.card-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: var(--tone-bg, var(--accent-soft));
  color: var(--tone-fg, var(--accent));
  transition: transform 0.4s var(--ease-out);
}

.card-icon .icon {
  width: 24px;
  height: 24px;
}

.tone-blue {
  --tone-bg: var(--t-blue-bg);
  --tone-fg: var(--t-blue-fg);
}

.tone-purple {
  --tone-bg: var(--t-purple-bg);
  --tone-fg: var(--t-purple-fg);
}

.tone-green {
  --tone-bg: var(--t-green-bg);
  --tone-fg: var(--t-green-fg);
}

.tone-amber {
  --tone-bg: var(--t-amber-bg);
  --tone-fg: var(--t-amber-fg);
}

.tone-rose {
  --tone-bg: var(--t-rose-bg);
  --tone-fg: var(--t-rose-fg);
}

.tone-slate {
  --tone-bg: var(--t-slate-bg);
  --tone-fg: var(--t-slate-fg);
}

/* Funktionen: auf dem Smartphone kompakt (Symbol links), damit zwölf Karten nicht endlos werden */
@media (max-width: 599px) {
  .features .card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
    padding: 20px;
  }

  .features .card-icon {
    grid-row: span 2;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 12px;
  }

  .features .card h3 {
    margin: 1px 0 4px;
  }
}

/* ---------- Slider ----------
   Karten in einer waagerechten Reihe, die man wischt oder mit den Pfeilen blättert (site.js setzt .is-slider: bei den
   Funktionen immer, bei Rollen und Sicherheit – .slider-phone – nur auf dem Smartphone). Die sichtbaren Karten stehen
   ganz im Bild und im Fokus; die Nachbarn schauen am Rand ein Stück herein (--peek), etwas kleiner und blasser, und
   laufen weich aus. Ohne JavaScript, im Druck und außerhalb der Smartphone-Breite bleibt das Raster.
   Die Reihe reicht über den Inhaltsbereich hinaus bis zu --bleed in den Rand, die Karten richten sich trotzdem am
   Inhaltsbereich aus (Innenabstand und Einrastabstand gleich --bleed). */
.section:has(.slider),
.band-panel:has(.slider) {
  container-type: inline-size; /* 100cqw = Breite des Abschnitts bzw. der Fläche ohne Scrollleiste (anders als 100vw) */
}

.slider-btn,
.slider-progress {
  display: none;
}

.slider.is-slider {
  position: relative;
  padding-bottom: 72px; /* Platz für Fortschritt und – auf schmalen Bildschirmen – die Pfeile */
}

.slider.is-slider .slider-track {
  --cols: 1;
  --gap: 12px;
  --peek: 22px;
  /* Rand zwischen Inhaltsbereich und Abschnittskante (wie .container) */
  --side: calc((100cqw - min(100cqw, var(--container) + 2 * var(--gutter))) / 2 + var(--gutter));
  --bleed: min(var(--side), var(--peek) + var(--gap));
  --peek-in: calc(var(--peek) + var(--gap) - var(--bleed)); /* der Rest der Vorschau kommt aus dem Inhaltsbereich */
  /* zum Rand hin weich auslaufen (erst ganz außen durchsichtig) */
  --fade: linear-gradient(
    90deg,
    transparent,
    rgb(0 0 0 / 55%) calc(var(--bleed) * 0.4),
    #000 var(--bleed),
    #000 calc(100% - var(--bleed)),
    rgb(0 0 0 / 55%) calc(100% - var(--bleed) * 0.4),
    transparent
  );
  position: relative; /* Bezug für offsetLeft der Karten (site.js) */
  display: flex;
  gap: var(--gap);
  margin: -12px calc(var(--bleed) * -1) -48px; /* Innenabstand oben/unten für Schatten und Anheben (ein Scrollbereich schneidet dort ab) */
  padding: 12px var(--bleed) 48px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--bleed);
  scrollbar-width: none;
  -webkit-mask-image: var(--fade);
  mask-image: var(--fade);
}

.slider.is-slider .slider-track::-webkit-scrollbar {
  display: none;
}

.slider.is-slider .slider-track:focus-visible {
  outline: none; /* Fokusrahmen an der Hülle – die Reihe selbst läuft am Rand weich aus */
}

.slider.is-slider:has(> .slider-track:focus-visible)::after {
  content: "";
  position: absolute;
  inset: -8px calc(var(--gutter) * -0.5) 56px;
  border: 3px solid var(--ring);
  border-radius: calc(var(--radius) + 8px);
  pointer-events: none;
}

.slider.is-slider .slider-track > * {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap) - var(--peek-in)) / var(--cols));
  scroll-snap-align: start;
}

/* Karten, die nicht ganz im Bild stehen (site.js setzt .is-dim): kleiner und blasser; ein Klick holt sie herein */
.slider.is-slider .slider-track > .is-dim {
  opacity: 0.55;
  scale: 0.94;
  cursor: pointer;
}

@media (min-width: 600px) {
  .slider.is-slider .features {
    --cols: 2;
    --gap: 20px;
    --peek: 44px;
  }
}

@media (min-width: 1100px) {
  .slider.is-slider .features {
    --cols: 3;
    --peek: 64px;
  }
}

/* Pfeile: rund, im Stil der hellen Schaltflächen; am Anfang bzw. Ende blass und ohne Wirkung */
.slider.is-slider .slider-btn {
  position: absolute;
  z-index: 2;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity 0.3s,
    background-color 0.2s,
    border-color 0.2s,
    box-shadow 0.28s var(--ease-out),
    transform 0.28s var(--ease-out);
}

.slider.is-slider .slider-btn:focus-visible {
  border-radius: 50%;
}

.slider.is-slider .slider-btn .icon {
  width: 22px;
  height: 22px;
}

.slider.is-slider .slider-prev {
  left: 0;
}

.slider.is-slider .slider-next {
  right: 0;
}

.slider.is-slider .slider-btn[aria-disabled="true"] {
  opacity: 0.35;
  box-shadow: none;
  cursor: default;
}

@media (hover: hover) {
  .slider.is-slider .slider-btn:not([aria-disabled="true"]):hover {
    border-color: var(--accent-line);
    background: var(--accent-soft);
    box-shadow: var(--shadow-md);
  }
}

.slider.is-slider .slider-btn:not([aria-disabled="true"]):active {
  transform: scale(0.94);
  transition-duration: 0.08s;
}

/* Fortschritt: schmale Leiste, der dunkle Teil zeigt, welcher Ausschnitt der Karten gerade zu sehen ist */
.slider.is-slider .slider-progress {
  position: absolute;
  bottom: 22px;
  left: 50%;
  display: block;
  width: min(160px, 36%);
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
  translate: -50% 0;
}

.slider.is-slider .slider-progress span {
  display: block;
  width: calc(var(--size, 0.25) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  translate: calc(var(--pos, 0) / var(--size, 0.25) * 100%) 0;
}

/* Breite Bildschirme: Pfeile links und rechts auf halber Höhe der Karten, halb über dem Rand */
@media (min-width: 900px) {
  .slider.is-slider {
    padding-bottom: 40px;
  }

  .slider.is-slider .slider-btn {
    top: calc(50% - 20px);
    bottom: auto;
    translate: 0 -50%;
  }

  .slider.is-slider .slider-prev {
    left: -24px;
  }

  .slider.is-slider .slider-next {
    right: -24px;
  }

  .slider.is-slider .slider-progress {
    bottom: 6px;
  }

  .slider.is-slider:has(> .slider-track:focus-visible)::after {
    bottom: 24px;
  }
}

/* Vorher/Nachher-Karten */
.swap .before,
.swap .after {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
}

.swap .before {
  color: var(--muted);
}

.swap .before p,
.swap .after p {
  color: inherit;
  font-size: 0.975rem;
}

.swap .after {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--line-strong);
  color: var(--ink);
}

.swap .mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-alt);
  color: var(--muted);
}

.swap .after .mark {
  background: var(--ok-soft);
  color: var(--ok);
}

.swap .mark .icon {
  width: 16px;
  height: 16px;
}

.swap small {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Hervorgehobene Bereiche (Bild + Text im Wechsel) ---------- */

.spot {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.3fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}

.spot + .spot {
  margin-top: clamp(72px, 9vw, 128px);
}

.spot.flip {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.95fr);
}

.spot.flip .spot-media {
  order: -1;
}

.spot h3 {
  font-size: clamp(1.7rem, 1.7vw + 1rem, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.028em;
}

.spot .lead {
  font-size: 1.125rem;
}

.spot-media {
  position: relative;
}

/* ---------- Reiter ----------
   „Im Detail“: Mit JavaScript werden die vier Themen Reiter (site.js setzt .is-tabs und das hidden der Leiste zurück).
   Alle Themen liegen übereinander in derselben Rasterzelle – der Bereich ist so hoch wie das längste, beim Umschalten
   springt nichts. Das gewählte blendet weich ein, die anderen sind unsichtbar (auch für Screenreader). */
.tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto clamp(32px, 4vw, 52px);
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  box-shadow: var(--shadow-sm);
}

.tabs[hidden] {
  display: none;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 620;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.3s var(--ease-soft),
    color 0.2s,
    box-shadow 0.3s var(--ease-soft);
}

.tab .icon {
  width: 18px;
  height: 18px;
}

.tab:hover {
  color: var(--ink);
}

.tab:focus-visible {
  border-radius: 999px;
}

.tab[aria-selected="true"] {
  background: var(--surface);
  box-shadow: var(--shadow-md);
  color: var(--accent);
}

.spots.is-tabs {
  display: grid;
}

.spots.is-tabs > .tabs {
  grid-row: 1;
}

.spots.is-tabs > .spot {
  grid-area: 2 / 1;
  margin: 0;
  scroll-margin-top: calc(var(--header-h) + 110px); /* Sprung auf ein Thema (#suche): die Reiterleiste bleibt sichtbar */
}

/* Im Reiter immer Text links, Bild rechts – der Wechsel links/rechts gehört zum Untereinander */
.spots.is-tabs > .spot.flip {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.3fr);
}

.spots.is-tabs > .spot.flip .spot-media {
  order: 0;
}

.spots.is-tabs > .spot:not(.is-active) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Smartphone: vier Reiter nebeneinander, Symbol über der Beschriftung */
@media (max-width: 599px) {
  .tabs {
    width: 100%;
    gap: 2px;
    padding: 4px;
    border-radius: 22px;
  }

  .tab {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 56px;
    padding: 6px 2px;
    border-radius: 18px;
    font-size: 0.8rem;
  }

  .tab:focus-visible {
    border-radius: 18px;
  }
}

/* Helferplan zum Aushängen: eigener Unterabschnitt im Helferschichten-Kapitel */
.spot-print {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  margin-top: clamp(72px, 9vw, 128px);
}

@media (max-width: 899px) {
  .spot,
  .spot.flip,
  .spot-print,
  .spots.is-tabs > .spot.flip {
    grid-template-columns: minmax(0, 1fr);
  }

  .spot.flip .spot-media {
    order: 0;
  }

  .spot-media {
    margin-top: 4px;
  }

  .spot-print .spot-media {
    order: 1;
  }
}

.checks {
  display: grid;
  gap: 16px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.checks li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  align-items: start;
  font-size: 1rem;
  line-height: 1.55;
}

.checks .tick {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: -1px;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
}

/* stroke-dasharray: Grundlage für das „sich zeichnende“ Häkchen (Abschnitt Bewegung) */
.checks .tick .icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.6;
  stroke-dasharray: 24;
  stroke-dashoffset: 0;
}

.checks strong {
  color: var(--ink);
  font-weight: 650;
}

/* Kapitel „Helferschichten“: Punkte als ruhiges 3 × 2-Raster unter dem großen Bild */
.checks-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 44px;
  max-width: 1040px;
  margin: clamp(96px, 11vw, 144px) auto 0;
}

@media (max-width: 999px) {
  .checks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .checks-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-top: 48px;
  }
}

/* ---------- Kapitel „Helferschichten“: ein großes Bild mit schwebendem Telefon ---------- */

.chapter-media {
  position: relative;
  isolation: isolate;
  max-width: 1040px;
  margin: 0 auto;
}

/* Links unten über der Seitenleiste – rechts im Bild liegen die Schaltflächen, die das Live-Fenster bedient */
.chapter-phone {
  position: absolute;
  left: -2%;
  bottom: -7%;
  width: clamp(120px, 21.6%, 224px);
}

@media (max-width: 719px) {
  .chapter-media > .plx:first-child {
    display: none;
  }

  .chapter-phone {
    position: relative;
    left: auto;
    bottom: auto;
    width: min(280px, 72vw);
    margin: 0 auto;
  }
}

/* ---------- Live-Fenster ----------
   Browserbilder, in denen ein Mauszeiger die Anwendung bedient (Helferschichten und die vier Themen „Im Detail“). Über dem
   ruhigen Bild liegen weitere Aufnahmen aus der Demo-App (tools/capture-screenshots.mjs); site.js blendet sie nach einem
   kurzen Ablaufplan über (LIVE_SCENES) und bewegt den Zeiger dazu – nur solange das Fenster im Bild ist. Überblendet wird
   nur opacity, bewegt nur translate (Compositor). Ohne JavaScript, bei reduzierter Bewegung und im Druck: das ruhige Bild. */
.live-screen {
  position: relative;
}

.live-layers {
  display: none;
}

/* ---------- Rollen ---------- */

.roles {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.role {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.role .card-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 13px;
}

.role h3 {
  font-size: 1.06rem;
}

.role p {
  margin: 8px 0 18px;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

.role .scope {
  display: block;
  margin-top: auto;
  padding: 10px 13px;
  border-radius: 12px;
  background: var(--bg-alt);
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.3;
}

.role .scope small {
  display: block;
  margin-bottom: 1px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Tablet: 3 + 2 statt 4 + 1 (keine einzelne Karte in der letzten Reihe) */
@media (min-width: 700px) and (max-width: 1099px) {
  .roles {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .role:nth-child(-n + 3) {
    grid-column: span 2;
  }

  .role:nth-child(n + 4) {
    grid-column: span 3;
  }
}

/* Smartphone: kompakte Zeilen, Symbol links */
@media (max-width: 699px) {
  .roles {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .role {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
    padding: 20px;
  }

  .role .card-icon {
    grid-row: span 3;
    margin: 0;
  }

  .role p {
    margin-bottom: 14px;
  }
}

.note {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 820px;
  margin: 32px auto 0;
  padding: 14px 20px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-size: 0.975rem;
}

.note-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--t-amber-bg);
  color: var(--t-amber-fg);
}

.note-icon .icon {
  width: 18px;
  height: 18px;
}

/* ---------- Sicherheit (helle, leicht getönte Fläche) ---------- */

.band {
  padding-block: clamp(24px, 3vw, 48px);
}

.band-panel {
  position: relative;
  isolation: isolate;
  overflow: clip;
  margin-inline: clamp(8px, 1.6vw, 24px);
  padding-block: var(--section-pad);
  border: 1px solid #e3ebf5;
  border-radius: clamp(28px, 3.4vw, 44px);
  background: linear-gradient(180deg, #f2f7fd 0%, #f8fbfe 55%, #ffffff 100%);
  transform-origin: 50% 20%;
}

.band-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -30%;
  left: 50%;
  width: min(1100px, 120vw);
  aspect-ratio: 2 / 1;
  translate: -50% 0;
  background: radial-gradient(closest-side, rgb(91 156 214 / 16%), transparent);
  pointer-events: none;
}

.band .card-icon {
  background: var(--t-blue-bg);
  color: var(--t-blue-fg);
}

.band .small-print {
  max-width: 64ch;
  margin: 44px auto 0;
  color: var(--muted);
  font-size: 0.98rem;
  text-align: center;
  text-wrap: balance;
}

/* ---------- Häufige Fragen ---------- */

.faq {
  max-width: 820px;
  margin-inline: auto;
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 620;
  line-height: 1.4;
  letter-spacing: -0.012em;
  list-style: none;
  cursor: pointer;
  border-radius: 10px;
  transition: color 0.2s;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  color: var(--accent);
}

.faq summary .icon {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 50%;
  background: var(--bg-alt);
  color: var(--muted);
  transition: transform 0.35s var(--ease-out), background-color 0.2s, color 0.2s;
}

.faq summary:hover .icon {
  background: var(--accent-soft);
  color: var(--accent);
}

.faq details[open] summary .icon {
  transform: rotate(180deg);
  background: var(--accent);
  color: #ffffff;
}

.faq .answer {
  padding: 0 4px 26px;
  max-width: 70ch;
  color: var(--text);
}

.faq .answer p + p {
  margin-top: 12px;
}

.faq .plan {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding-left: 1.2em;
}

.faq .plan li::marker {
  color: var(--accent);
}

/* ---------- Kontakt ---------- */

#faq {
  padding-bottom: clamp(48px, 6vw, 80px);
}

.kontakt {
  padding-top: clamp(24px, 4vw, 48px);
  padding-bottom: clamp(56px, 7vw, 104px);
}

.cta {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(48px, 7vw, 92px) clamp(24px, 6vw, 80px);
  border: 1px solid #dde7f4;
  border-radius: clamp(28px, 3.4vw, 44px);
  background: linear-gradient(180deg, #f1f6fd 0%, #ffffff 100%);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

/* Zwei weiche Lichtflecken, die langsam wandern (Bewegung unten) */
.cta::before,
.cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(560px, 90vw);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}

.cta::before {
  top: -55%;
  right: -12%;
  background: radial-gradient(closest-side, rgb(91 156 214 / 24%), transparent);
}

.cta::after {
  bottom: -60%;
  left: -14%;
  background: radial-gradient(closest-side, rgb(5 85 183 / 12%), transparent);
}

.cta h2 {
  max-width: 20ch;
  margin-inline: auto;
}

.cta p {
  max-width: 40rem;
  margin: 20px auto 0;
  color: var(--muted);
  font-size: 1.15rem;
}

/* Drei Schritte bis zum Start: kompakt unter der Anfrage, auf breiten Bildschirmen nebeneinander */
.cta-steps-title {
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--line);
  font-size: 1.15rem;
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.cta-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
  max-width: 980px;
  margin: 20px auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.cta-steps li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.cta-steps strong {
  color: var(--ink);
  font-weight: 650;
}

.cta-step-no {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--shadow-accent);
  color: var(--on-accent);
  font-weight: 700;
}

@media (max-width: 899px) {
  .cta-steps {
    grid-template-columns: minmax(0, 1fr);
    max-width: 34rem;
  }
}

.cta .hero-actions {
  margin-top: 34px;
}

.cta .mail-line {
  margin-top: 22px;
  font-size: 1rem;
}

.cta .mail-line a {
  font-weight: 650;
}

.cta small {
  display: block;
  max-width: 44rem;
  margin: 26px auto 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
  text-wrap: balance;
}

/* ---------- Fußzeile ---------- */

.site-footer {
  padding: 72px 0 40px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1.6fr repeat(3, 1fr);
}

.footer-brand img {
  display: block;
  width: 180px;
  height: auto;
  margin-bottom: 16px;
}

.footer-brand p {
  max-width: 32ch;
}

.site-footer h2 {
  margin-bottom: 14px;
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Unterstreichung, die beim Überfahren von links hereinwächst */
.site-footer a {
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: color 0.2s, background-size 0.35s var(--ease-out);
}

.site-footer a:hover {
  color: var(--accent);
  background-size: 100% 1px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
}

/* Schlanke Fußzeile der Rechtstexte */
.site-footer.compact {
  padding: 32px 0;
}

.site-footer.compact .footer-bottom {
  margin: 0;
  padding: 0;
  border: 0;
}

@media (max-width: 899px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 559px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Rechtstexte und Fehlerseite ---------- */

.page-head {
  padding: clamp(40px, 6vw, 88px) 0 12px;
}

.page-head a {
  display: inline-block;
  margin-bottom: 16px;
}

.page-head h1 {
  font-size: clamp(2.1rem, 3.6vw + 0.6rem, 3.25rem);
}

.prose {
  max-width: 760px;
  padding-bottom: clamp(56px, 8vw, 112px);
}

.prose h2 {
  margin: 44px 0 12px;
  font-size: 1.5rem;
}

.prose h3 {
  margin: 28px 0 8px;
  font-size: 1.15rem;
}

.prose p,
.prose ul,
.prose dl {
  margin: 0 0 16px;
}

.prose ul {
  padding-left: 1.3em;
}

.prose li {
  margin-bottom: 6px;
}

.prose dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 24px;
}

.prose dt {
  color: var(--ink);
  font-weight: 650;
}

.prose dd {
  margin: 0;
}

@media (max-width: 599px) {
  .prose dl {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .prose dd {
    margin-bottom: 12px;
  }
}

.draft-notice {
  margin: 8px 0 32px;
  padding: 16px 20px;
  border: 1px solid var(--warn);
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
  color: var(--warn);
  font-weight: 550;
}

.fill {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--warn-soft);
  color: var(--warn);
  font-weight: 600;
  white-space: normal;
}

.not-found {
  display: grid;
  min-height: 60vh;
  place-content: center;
  gap: 20px;
  padding: 80px var(--gutter);
  text-align: center;
}

.not-found .big {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 8rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}

/* ==========================================================================
   Bewegung
   Alle Effekte stehen unter „prefers-reduced-motion: no-preference“ – wer Bewegung reduziert, sieht die Seite
   sofort vollständig. Bewegt werden nur opacity, filter und die Einzel-Transformationen translate/scale/rotate (vom
   Browser ohne Neuberechnung des Layouts gezeichnet). Aufgeteilt, damit sich nichts in die Quere kommt:
   translate/scale = Einblenden bzw. Parallaxe, transform = Hover und Schweben. Ausnahme Telefone: Sie schweben nicht und
   verschieben sich nur um ganze Pixel (--phone-shift), sonst würde die kleine Schrift im Bildschirm unscharf.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* --- Ladeanimation des Einstiegs: kurz, gestaffelt, ohne JavaScript --- */
  .intro {
    animation: intro-in 0.9s var(--ease-out) both;
  }

  .intro-1 {
    animation-delay: 0.05s;
  }

  .intro-3 {
    animation-delay: 0.42s;
  }

  .intro-4 {
    animation-delay: 0.52s;
  }

  .intro-5 {
    animation-delay: 0.6s;
  }

  .intro-6 {
    animation: intro-visual 1.2s var(--ease-out) 0.5s both;
  }

  /* Überschrift Wort für Wort, aus der Unschärfe */
  .word {
    display: inline-block;
    animation: word-in 1s var(--ease-out) both;
  }

  .word-1 {
    animation-delay: 0.12s;
  }

  .word-2 {
    animation-delay: 0.22s;
  }

  .word-3 {
    animation-delay: 0.34s;
  }

  .site-header {
    animation: header-in 0.6s var(--ease-out) both;
  }

  .flow-word::after {
    animation: underline-in 0.9s var(--ease-out) 0.9s both;
  }

  .hero-glow::before {
    animation: drift-left 16s ease-in-out infinite alternate;
  }

  .hero-glow::after {
    animation: drift-right 18s ease-in-out infinite alternate;
  }

  /* Schwebende Hinweise: erscheinen nach dem Bild und schweben dann leicht */
  .float-chip {
    animation:
      chip-in 0.8s var(--ease-out) both,
      bob 6s ease-in-out infinite alternate;
  }

  .chip-a {
    animation-delay: 1.05s, 1.85s;
  }

  .chip-b {
    animation-delay: 1.2s, 2.4s;
  }

  .chip-c {
    animation-delay: 1.35s, 2.1s;
  }

  /* Laufband: gleichmäßig, hält beim Überfahren an */
  .ribbon-track {
    animation: marquee 52s linear infinite;
  }

  .ribbon:hover .ribbon-track {
    animation-play-state: paused;
  }

  .cta::before {
    animation: drift-left 14s ease-in-out infinite alternate;
  }

  .cta::after {
    animation: drift-right 16s ease-in-out infinite alternate;
  }

  /* --- Vorführungen: Die Geräte bewegen sich von selbst, sobald sie ins Bild kommen (site.js setzt .is-playing) – Laptop in
     3,6 s, Telefon in 4 s. Die ersten 3 % der Keyframes (Warten, bevor sich etwas bewegt) werden übersprungen. --- */
  .js .showcase {
    --vf-dur: 3.6s;
    --vf-delay: -0.108s;
    --vf-play: paused;
  }

  .js .showcase-phone {
    --vf-dur: 4s;
    --vf-delay: -0.12s;
  }

  .js .showcase.is-playing {
    --vf-play: running;
  }

  .js .iphone-rim {
    display: block;
  }

  /* Bühne eine Bildschirmhöhe hoch; was beim Erscheinen von unten hereinkommt, bleibt in ihr */
  .js .showcase-stage {
    height: 100vh;
    height: 100svh;
    overflow: clip;
  }

  /* Bewegungen der Vorführungen (Keyframes am Dateiende); Dauer, Verzögerung und Abspielen aus den Variablen oben */
  .js .showcase-laptop .showcase-scene {
    animation: vf-laptop-scene var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .showcase-laptop .showcase-floor {
    animation: vf-laptop-floor var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .laptop {
    animation: vf-laptop-body var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .laptop::before {
    animation: vf-laptop-contact var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .laptop-lid {
    animation: vf-laptop-lid var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .laptop-screen {
    animation: vf-laptop-screen var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .laptop-screen::before {
    animation: vf-laptop-screen-off var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .laptop-screen::after {
    animation: vf-laptop-screen-glare var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .laptop-cover {
    animation: vf-laptop-cover var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .laptop-cover::before {
    animation: vf-laptop-sheen var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .laptop-cover::after {
    animation: vf-laptop-cover-dark var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .laptop-front::after {
    animation: vf-laptop-lit-front var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .laptop-rear::after {
    animation: vf-laptop-lit-rear var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .laptop-side-l::after {
    animation: vf-laptop-lit-side-l var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .laptop-side-r::after {
    animation: vf-laptop-lit-side-r var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .base-c i::before {
    animation: var(--lit1) var(--vf-dur) linear var(--vf-delay) both var(--vf-play); /* Keyframes je Stoß (siehe .base-c i) */
  }

  .js .base-c i::after {
    animation: var(--lit0) var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .showcase-phone .showcase-scene {
    animation: vf-phone-scene var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .showcase-phone .showcase-floor {
    animation: vf-phone-floor var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .iphone {
    animation: vf-phone-body var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .iphone-front {
    animation: vf-phone-front var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .iphone-front::after {
    animation: vf-phone-glare var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .iphone-front .phone-hw {
    animation: vf-phone-buttons var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .iphone-back {
    animation: vf-phone-back var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .iphone-back::before {
    animation: vf-phone-sheen var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .iphone-back::after {
    animation: vf-phone-back-shade var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .iphone-side-l::after {
    animation: vf-phone-side-l var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .iphone-side-r::after {
    animation: vf-phone-side-r var(--vf-dur) linear var(--vf-delay) both var(--vf-play);
  }

  .js .rim-c i::after {
    animation: var(--side) var(--vf-dur) linear var(--vf-delay) both var(--vf-play); /* wie die angrenzende Seitenfläche (--side, siehe .rim-c) */
  }

  /* Ruhelage (site.js setzt .is-rest, sobald alle Bewegungen fertig sind): Animationen abhängen – die Grundregeln sind
     genau die Endlage, es springt also nichts. Chromium setzt Ebenen mit angehängter Transform-Animation nicht auf ganze
     Pixel; ohne sie stehen die Bildschirme wieder Pixel für Pixel scharf. Die Gehäusekante des Telefons wird dann nicht
     mehr gebraucht (wie ohne Bewegung) – sonst schimmerte sie durch die geglätteten Ecken der Vorderseite. */
  .js .showcase.is-rest *,
  .js .showcase.is-rest *::before,
  .js .showcase.is-rest *::after {
    animation: none;
  }

  .js .showcase.is-rest .iphone-rim {
    display: none;
  }

  /* --- Einblenden beim Scrollen (site.js markiert, was außerhalb des Fensters liegt) --- */
  .reveal {
    transition:
      opacity 0.8s var(--ease-out) var(--reveal-delay, 0s),
      translate 0.95s var(--ease-out) var(--reveal-delay, 0s),
      scale 0.95s var(--ease-out) var(--reveal-delay, 0s);
  }

  .reveal.is-pending {
    opacity: 0;
    translate: 0 var(--reveal-shift, 36px);
    scale: 0.98;
    transition-delay: 0s;
    transition-duration: 0.35s;
  }

  /* Von oben kommend (beim Zurückscrollen) gleitet der Inhalt von oben herein */
  .reveal.is-pending.from-above {
    --reveal-shift: -36px;
  }

  /* Überschriftenblöcke und Textspalten: nicht als Ganzes, sondern Zeile für Zeile – die Überschrift aus der Unschärfe */
  .section-head.reveal.is-pending,
  .spot-text.reveal.is-pending {
    opacity: 1;
    translate: none;
    scale: none;
  }

  .section-head.reveal > *,
  .spot-text.reveal > * {
    transition:
      opacity 0.8s var(--ease-out) calc(var(--reveal-delay, 0s) + var(--step, 0s)),
      translate 0.95s var(--ease-out) calc(var(--reveal-delay, 0s) + var(--step, 0s)),
      filter 0.95s var(--ease-out) calc(var(--reveal-delay, 0s) + var(--step, 0s));
  }

  .section-head.reveal > :nth-child(2),
  .spot-text.reveal > :nth-child(2) {
    --step: 0.09s;
  }

  .section-head.reveal > :nth-child(3),
  .spot-text.reveal > :nth-child(3) {
    --step: 0.18s;
  }

  .section-head.reveal > :nth-child(4),
  .spot-text.reveal > :nth-child(4) {
    --step: 0.27s;
  }

  .section-head.reveal.is-pending > *,
  .spot-text.reveal.is-pending > * {
    opacity: 0;
    translate: 0 22px;
    transition-delay: 0s;
    transition-duration: 0.3s;
  }

  .section-head.reveal.is-pending > h2,
  .spot-text.reveal.is-pending > h3 {
    filter: blur(10px);
    translate: 0 30px;
  }

  /* Aufzählungen in Textspalten: Punkt für Punkt */
  .spot-text.reveal .checks li {
    transition:
      opacity 0.7s var(--ease-out) calc(var(--reveal-delay, 0s) + 0.3s + var(--li, 0s)),
      translate 0.8s var(--ease-out) calc(var(--reveal-delay, 0s) + 0.3s + var(--li, 0s));
  }

  .checks li:nth-child(2) {
    --li: 0.08s;
  }

  .checks li:nth-child(3) {
    --li: 0.16s;
  }

  .checks li:nth-child(4) {
    --li: 0.24s;
  }

  .spot-text.reveal.is-pending .checks li {
    opacity: 0;
    translate: 0 14px;
    transition-delay: 0s;
    transition-duration: 0.2s;
  }

  /* Häkchen zeichnen sich selbst, der Kreis dahinter springt kurz auf */
  .reveal .tick {
    transition:
      scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--reveal-delay, 0s) + 0.3s + var(--li, 0s)),
      opacity 0.4s var(--ease-out) calc(var(--reveal-delay, 0s) + 0.3s + var(--li, 0s));
  }

  .reveal .tick .icon {
    transition: stroke-dashoffset 0.7s var(--ease-out) calc(var(--reveal-delay, 0s) + 0.45s + var(--li, 0s));
  }

  .reveal.is-pending .tick {
    opacity: 0;
    scale: 0.5;
    transition-delay: 0s;
    transition-duration: 0.2s;
  }

  .reveal.is-pending .tick .icon {
    stroke-dashoffset: 24;
    transition-delay: 0s;
    transition-duration: 0.2s;
  }

  /* Karten: Einblendung, Symbol springt kurz nach, weiche Reaktion auf den Mauszeiger */
  .card.reveal,
  .role.reveal {
    transition:
      opacity 0.8s var(--ease-out) var(--reveal-delay, 0s),
      translate 0.95s var(--ease-out) var(--reveal-delay, 0s),
      scale 0.95s var(--ease-out) var(--reveal-delay, 0s),
      transform 0.45s var(--ease-out),
      box-shadow 0.45s var(--ease-out),
      border-color 0.3s;
  }

  .card.reveal.is-pending,
  .role.reveal.is-pending {
    transition-delay: 0s;
  }

  .reveal .card-icon {
    transition:
      transform 0.4s var(--ease-out),
      scale 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--reveal-delay, 0s) + 0.18s),
      opacity 0.5s var(--ease-out) calc(var(--reveal-delay, 0s) + 0.18s);
  }

  .reveal.is-pending .card-icon {
    opacity: 0;
    scale: 0.6;
    transition-delay: 0s;
    transition-duration: 0.2s;
  }

  /* Slider: Karten gleiten beim Wechsel sanft in den Fokus (Größe, Deckkraft), Fortschritt läuft mit */
  .slider.is-slider .slider-track > * {
    transition:
      opacity 0.6s cubic-bezier(0.45, 0, 0.25, 1),
      scale 0.6s cubic-bezier(0.45, 0, 0.25, 1),
      transform 0.45s var(--ease-out),
      box-shadow 0.45s var(--ease-out),
      border-color 0.3s;
  }

  .slider.is-slider .slider-progress span {
    transition: translate 0.25s var(--ease-out);
  }

  /* Karten im Slider blenden nicht einzeln ein (die nicht sichtbaren kämen sonst beim Wischen von unten herein) */
  .slider.is-slider .slider-track > .reveal.is-pending {
    translate: none;
    scale: none;
  }

  .slider.is-slider .slider-track > .reveal.is-pending:not(.is-dim) {
    opacity: 1;
  }

  .slider.is-slider .slider-track > .reveal.is-pending .card-icon {
    opacity: 1;
    scale: none;
  }

  /* Live-Fenster: Bildfolge und Mauszeiger (Beschreibung unter „Live-Fenster“) */
  /* Die Ebenen kommen erst dazu, wenn das Fenster abspielt (site.js setzt .is-live) – vorher lädt der Browser ihre Bilder
     nicht (Reiter, die niemand öffnet, kosten nichts) */
  .js .live.is-live .live-layers {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
  }

  .js .live-frame {
    position: absolute;
    inset: 0;
    height: 100%;
    opacity: 0;
    transition: opacity 280ms ease-in-out;
  }

  .js .live-frame.is-on {
    opacity: 1;
  }

  /* Zeiger: eine Ebene so groß wie das Bild – ihr translate in Prozent ist damit eine Stelle im Bild */
  .js .live-pointer {
    position: absolute;
    z-index: 100000;
    inset: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
  }

  .js .live-pointer.is-on {
    opacity: 1;
  }

  .js .live-cursor {
    position: absolute;
    top: -1px;
    left: -1px;
    width: max(14px, 1.9%);
    overflow: visible;
    fill: #111418;
    stroke: #ffffff;
    stroke-width: 1.4;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 35%));
    transform-origin: 0 0;
  }

  /* Klick: heller Ring mit feinem blauem Rand – auf blauen Schaltflächen wie auf weißen zu sehen */
  .js .live-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: max(34px, 5.2%);
    aspect-ratio: 1;
    border: 2px solid rgb(255 255 255 / 92%);
    border-radius: 50%;
    background: rgb(255 255 255 / 28%);
    box-shadow:
      0 0 0 1px rgb(5 85 183 / 45%),
      0 0 12px rgb(5 85 183 / 30%);
    translate: -50% -50%;
    opacity: 0;
  }

  /* Tastenkürzel (Suche): erscheint kurz oben in der Mitte */
  .js .live-keys {
    position: absolute;
    z-index: 100001;
    top: 7%;
    left: 50%;
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgb(17 20 24 / 78%);
    box-shadow: var(--shadow-md);
    opacity: 0;
    translate: -50% 6px;
    scale: 0.96;
    transition:
      opacity 0.25s ease,
      translate 0.3s var(--ease-out),
      scale 0.3s var(--ease-out);
  }

  .js .live-keys.is-on {
    opacity: 1;
    translate: -50% 0;
    scale: 1;
  }

  .js .live-keys kbd {
    min-width: 2.2em;
    font-size: clamp(0.72rem, 1.4vw, 0.95rem);
  }

  /* Reiter: das bisherige Thema blendet kurz aus, das gewählte gleitet danach weich herein */
  .spots.is-tabs > .spot {
    transition:
      opacity 0.5s cubic-bezier(0.45, 0, 0.25, 1) 0.14s,
      translate 0.6s cubic-bezier(0.45, 0, 0.25, 1) 0.14s,
      visibility 0s linear 0s;
  }

  .spots.is-tabs > .spot:not(.is-active) {
    translate: 0 14px;
    transition:
      opacity 0.25s ease-in,
      translate 0.25s ease-in,
      visibility 0s linear 0.25s;
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .card:hover,
  .role:hover {
    transform: translateY(-4px);
    border-color: var(--accent-line);
    box-shadow: var(--shadow-md);
  }

  .card:hover::before,
  .role:hover::before {
    opacity: 1;
  }

  /* Blasse Nachbarkarte im Slider: beim Überfahren etwas deutlicher – ein Klick holt sie herein */
  .slider.is-slider .slider-track > .is-dim:hover {
    opacity: 0.8;
  }

  .card:hover .card-icon,
  .role:hover .card-icon {
    transform: translateY(-2px) scale(1.08) rotate(-4deg);
  }

  .ribbon li {
    transition: border-color 0.25s, color 0.25s;
  }

  .ribbon li:hover {
    border-color: var(--accent-line);
    color: var(--ink);
  }

  /* Lichtstreifen, der beim Überfahren über die Hauptschaltfläche zieht */
  .btn-primary::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(110deg, transparent 25%, rgb(255 255 255 / 32%) 50%, transparent 75%);
    translate: -110% 0;
    transition: translate 0.75s var(--ease-out);
  }

  .btn-primary:hover::after {
    translate: 110% 0;
  }
}

@keyframes intro-in {
  from {
    opacity: 0;
    translate: 0 24px;
  }
}

@keyframes intro-visual {
  from {
    opacity: 0;
    translate: 0 64px;
    scale: 0.96;
  }
}

@keyframes word-in {
  from {
    opacity: 0;
    translate: 0 0.35em;
    filter: blur(12px);
  }
}

@keyframes chip-in {
  from {
    opacity: 0;
    scale: 0.8;
    translate: 0 16px;
  }
}

@keyframes bob {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-10px);
  }
}

@keyframes marquee {
  to {
    translate: -50% 0;
  }
}

@keyframes header-in {
  from {
    opacity: 0;
    translate: 0 -10px;
  }
}

@keyframes underline-in {
  from {
    transform: scaleX(0);
  }
}

@keyframes drift-left {
  to {
    transform: translate(-40px, 18px) scale(1.06);
  }
}

@keyframes drift-right {
  to {
    transform: translate(40px, -14px) scale(0.96);
  }
}

/* --- Scroll-gekoppelte Effekte (CSS-Scroll-Timelines, nur wo der Browser sie kennt) --- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Fortschrittsbalken unter der Kopfzeile */
    .scroll-progress {
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      display: block;
      height: 2px;
      background: linear-gradient(90deg, var(--brand-2), var(--accent));
      transform-origin: 0 50%;
      animation: progress linear both;
      animation-timeline: scroll(root);
    }

    /* Einstieg: Das Dashboard richtet sich beim Scrollen auf und wird voll groß; Telefon und Hinweise steigen schneller */
    .hero-stage .browser {
      transform-origin: 50% 0;
      animation: hero-tilt linear both;
      animation-timeline: scroll(root);
      animation-range: 0 62vh;
    }

    /* Das Dashboard steht anfangs gekippt und verkleinert (hero-tilt): Das Telefon sitzt höher, damit an seiner runden
       Ecke keine Spur der vierten Kennzahlenkarte hervorschaut */
    @media (min-width: 720px) {
      .hero-phone {
        bottom: -6%;
      }
    }

    .hero-phone {
      translate: 0 var(--phone-shift);
      animation: hero-phone linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }

    .hero-chips {
      animation: chips-rise linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }

    .hero-copy {
      animation: hero-copy-out linear both;
      animation-timeline: scroll(root);
      animation-range: 0 70vh;
    }

    .hero-glow {
      animation: glow-out linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }

    /* Parallaxe: Bilder wandern beim Durchscrollen leicht gegen die Seite; Telefone stärker als Bildschirme */
    .plx {
      animation: plx linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    .plx-slow {
      --plx: 30px;
    }

    .plx-fast {
      --plx: 68px;
    }

    /* Telefone: dieselbe Parallaxe, aber nur um ganze Pixel (siehe --phone-shift) */
    .phone.plx {
      translate: 0 var(--phone-shift);
      animation: phone-plx linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    /* Wo round() bekannt ist, nur um ganze Pixel verschieben; sonst gelten die ungerundeten Zeilen oben. (Eine zweite
       Deklaration mit var() taugt nicht als Rückfall: Sie gilt beim Einlesen immer als gültig und würde ohne round()
       erst beim Berechnen ungültig – dann stünde translate auf none.) */
    @supports (translate: 0 round(1px, 1px)) {
      .hero-phone,
      .phone.plx {
        translate: 0 round(var(--phone-shift), 1px);
      }
    }

    /* Bildschirmfotos wachsen beim Hereinscrollen auf volle Größe */
    .spot-media .browser,
    .chapter-media .browser {
      animation: frame-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 38%;
    }

    /* Der gedruckte Helferplan dreht sich beim Scrollen gerade */
    .paper.plx {
      animation:
        plx linear both,
        paper-turn linear both;
      animation-timeline: view(), view();
      animation-range: cover 0% cover 100%, entry 0% cover 55%;
    }

    /* Sicherheit: Die Fläche wächst beim Hereinscrollen sanft auf volle Größe */
    .band-panel {
      animation: band-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }

    /* Lichtschein der Abschnitte blendet beim Hereinscrollen auf */
    .section-alt::before {
      animation: glow-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }

  @media (prefers-reduced-motion: no-preference) and (max-width: 719px) {
    .plx-slow {
      --plx: 14px;
    }

    .plx-fast {
      --plx: 28px;
    }
  }
}

@keyframes progress {
  from {
    scale: 0 1;
  }

  to {
    scale: 1 1;
  }
}

@keyframes hero-tilt {
  from {
    transform: rotateX(12deg) scale(0.95);
  }

  to {
    transform: none;
  }
}

/* Telefone verschieben sich beim Scrollen nur um ganze Pixel: Die Verschiebung läuft über eine registrierte Eigenschaft
   und wird beim Berechnen gerundet (round() im @supports-Block oben). Bei Bruchteilen von Pixeln rechnet der Browser das
   ganze Telefon weich – die Schrift im Bildschirm verschwimmt. Ältere Browser ohne round() verschieben ungerundet. */
@property --phone-shift {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@keyframes hero-phone {
  to {
    --phone-shift: -64px;
  }
}

@keyframes phone-plx {
  from {
    --phone-shift: var(--plx);
  }

  to {
    --phone-shift: calc(var(--plx) * -1);
  }
}

@keyframes chips-rise {
  to {
    translate: 0 -110px;
  }
}

/* Nur Verschiebung, keine Transparenz: halb durchsichtige Schaltflächen sähen deaktiviert aus */
@keyframes hero-copy-out {
  to {
    translate: 0 -48px;
  }
}

@keyframes glow-out {
  to {
    opacity: 0.25;
    translate: 0 -120px;
  }
}

@keyframes plx {
  from {
    translate: 0 var(--plx);
  }

  to {
    translate: 0 calc(var(--plx) * -1);
  }
}

@keyframes frame-in {
  from {
    scale: 0.93;
  }

  to {
    scale: 1;
  }
}

@keyframes paper-turn {
  from {
    rotate: -8deg;
  }

  to {
    rotate: -2deg;
  }
}

@keyframes band-in {
  from {
    scale: 0.955;
  }

  to {
    scale: 1;
  }
}

@keyframes glow-in {
  from {
    opacity: 0;
    scale: 0.8;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

/* --- Aufklappen der Fragen: weich statt ruckartig (Browser mit ::details-content) --- */
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .faq details {
      interpolate-size: allow-keywords;
    }

    .faq details::details-content {
      height: 0;
      overflow: clip;
      opacity: 0;
      transition:
        height 0.4s var(--ease-out),
        opacity 0.4s var(--ease-out),
        content-visibility 0.4s allow-discrete;
    }

    .faq details[open]::details-content {
      height: auto;
      opacity: 1;
    }
  }
}

/* --- Bildschirmfotos: kurzer, ruhiger Platzhalter, bis das Bild geladen ist (site.js setzt „is-loading“) --- */
@media (prefers-reduced-motion: no-preference) {
  .js .browser img,
  .js .phone img,
  .js .laptop-screen img {
    transition: opacity 0.6s var(--ease-soft);
  }

  .js .is-loading img {
    opacity: 0;
  }

  .js .is-loading picture {
    background-image: linear-gradient(100deg, transparent 30%, rgb(226 232 240 / 70%) 50%, transparent 70%);
    background-size: 220% 100%;
    animation: shimmer 1.4s ease-in-out 3; /* nicht endlos: Bilder weit unten laden erst später */
  }
}

@keyframes shimmer {
  from {
    background-position: 120% 0;
  }

  to {
    background-position: -120% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  .site-header,
  .nav-toggle,
  .cta,
  .hero-glow,
  .hero-chips,
  .ribbon {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .reveal,
  .reveal.is-pending,
  .reveal.is-pending > * {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    filter: none !important;
  }

  /* Absolut platzierte Telefone mit Prozentbreite und cqw-Maßen (Uhr, Symbole) lassen Chrome leere Seiten drucken –
     im Druck deshalb eine feste Breite (entspricht ungefähr der Druckbreite) */
  .hero-phone,
  .chapter-phone {
    width: 150px;
  }

  /* Vorführungen: Endlage ohne Bewegung, Bühne in natürlicher Höhe */
  .showcase *,
  .showcase *::before,
  .showcase *::after {
    animation: none !important;
  }

  .js .showcase-stage {
    height: auto;
    overflow: visible;
  }

  /* Slider und Reiter: im Druck das Raster bzw. alle Themen untereinander */
  .slider.is-slider {
    padding-bottom: 0;
  }

  .slider.is-slider .slider-track {
    display: grid;
    margin: 0;
    padding: 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .spots.is-tabs {
    display: block;
  }

  .spots.is-tabs > .tabs {
    display: none;
  }

  .spots.is-tabs > .spot {
    visibility: visible !important;
    opacity: 1 !important;
    translate: none !important;
  }

  .spots.is-tabs > .spot + .spot {
    margin-top: 48px;
  }

  .slider.is-slider .slider-track > * {
    opacity: 1 !important;
    scale: none !important;
    transition: none !important;
  }

  .slider-btn,
  .slider-progress {
    display: none !important;
  }

  /* Live-Fenster: nur das ruhige Bild */
  .live-layers {
    display: none !important;
  }
}

/* ==========================================================================
   Keyframes der Vorführungen – erzeugt aus den Bewegungsformeln (siehe Kopfkommentar „Vorführungen“). Stützpunkte so
   dicht, dass die Bewegung höchstens 0,3 px, 0,2° oder 1 % Deckkraft von den Formeln abweicht. Prozent = Fortschritt
   durch den Abschnitt. Nicht von Hand ändern: Formeln in tools/make-showcase-keyframes.mjs anpassen und das Werkzeug
   ausführen, es ersetzt alles nach diesem Kommentar.
   ========================================================================== */

@keyframes vf-laptop-body {
  0% {
    transform: translateY(calc(1 * 30vh - 0.42 * var(--lh))) scale(calc(0.7 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  3% {
    transform: translateY(calc(1 * 30vh - 0.42 * var(--lh))) scale(calc(0.7 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  3.66% {
    transform: translateY(calc(0.9982 * 30vh - 0.42 * var(--lh))) scale(calc(0.7005 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  4.335% {
    transform: translateY(calc(0.9929 * 30vh - 0.42 * var(--lh))) scale(calc(0.7021 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  5.025% {
    transform: translateY(calc(0.984 * 30vh - 0.42 * var(--lh))) scale(calc(0.7048 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  5.725% {
    transform: translateY(calc(0.9715 * 30vh - 0.42 * var(--lh))) scale(calc(0.7086 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  6.44% {
    transform: translateY(calc(0.9554 * 30vh - 0.42 * var(--lh))) scale(calc(0.7134 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  7.175% {
    transform: translateY(calc(0.9357 * 30vh - 0.42 * var(--lh))) scale(calc(0.7193 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  7.93% {
    transform: translateY(calc(0.9122 * 30vh - 0.42 * var(--lh))) scale(calc(0.7264 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  8.705% {
    transform: translateY(calc(0.8849 * 30vh - 0.42 * var(--lh))) scale(calc(0.7345 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  9.535% {
    transform: translateY(calc(0.8526 * 30vh - 0.42 * var(--lh))) scale(calc(0.7442 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  10.4% {
    transform: translateY(calc(0.8158 * 30vh - 0.42 * var(--lh))) scale(calc(0.7553 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  11.305% {
    transform: translateY(calc(0.7744 * 30vh - 0.42 * var(--lh))) scale(calc(0.7677 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  12.265% {
    transform: translateY(calc(0.7276 * 30vh - 0.42 * var(--lh))) scale(calc(0.7817 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  14.25% {
    transform: translateY(calc(0.6238 * 30vh - 0.42 * var(--lh))) scale(calc(0.8128 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  18.24% {
    transform: translateY(calc(0.4039 * 30vh - 0.42 * var(--lh))) scale(calc(0.8788 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  19.925% {
    transform: translateY(calc(0.3138 * 30vh - 0.42 * var(--lh))) scale(calc(0.9059 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  21.69% {
    transform: translateY(calc(0.2259 * 30vh - 0.42 * var(--lh))) scale(calc(0.9322 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  22.5% {
    transform: translateY(calc(0.1886 * 30vh - 0.42 * var(--lh))) scale(calc(0.9434 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  23.275% {
    transform: translateY(calc(0.1552 * 30vh - 0.42 * var(--lh))) scale(calc(0.9534 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  24.21% {
    transform: translateY(calc(0.1182 * 30vh - 0.42 * var(--lh))) scale(calc(0.9645 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  25.11% {
    transform: translateY(calc(0.0865 * 30vh - 0.42 * var(--lh))) scale(calc(0.974 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  25.98% {
    transform: translateY(calc(0.0599 * 30vh - 0.42 * var(--lh))) scale(calc(0.982 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  26.82% {
    transform: translateY(calc(0.0383 * 30vh - 0.42 * var(--lh))) scale(calc(0.9885 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  27.64% {
    transform: translateY(calc(0.0216 * 30vh - 0.42 * var(--lh))) scale(calc(0.9935 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  28.445% {
    transform: translateY(calc(0.0096 * 30vh - 0.42 * var(--lh))) scale(calc(0.9971 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  29.23% {
    transform: translateY(calc(0.0024 * 30vh - 0.42 * var(--lh))) scale(calc(0.9993 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  30% {
    transform: translateY(calc(0 * 30vh - 0.42 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(172deg);
  }

  30.74% {
    transform: translateY(calc(0 * 30vh - 0.42 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(171.586deg);
  }

  31.5% {
    transform: translateY(calc(0 * 30vh - 0.42 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(170.332deg);
  }

  32.275% {
    transform: translateY(calc(0 * 30vh - 0.42 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(168.243deg);
  }

  33.07% {
    transform: translateY(calc(0 * 30vh - 0.42 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(165.306deg);
  }

  33.885% {
    transform: translateY(calc(0 * 30vh - 0.42 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(161.523deg);
  }

  34.725% {
    transform: translateY(calc(0 * 30vh - 0.42 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(156.873deg);
  }

  35.59% {
    transform: translateY(calc(0 * 30vh - 0.42 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(151.362deg);
  }

  36.495% {
    transform: translateY(calc(0 * 30vh - 0.42 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(144.894deg);
  }

  38.02% {
    transform: translateY(calc(0 * 30vh - 0.42 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(132.61deg);
  }

  39.725% {
    transform: translateY(calc(0 * 30vh - 0.42 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(117.269deg);
  }

  41.34% {
    transform: translateY(calc(0 * 30vh - 0.42 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(101.687deg);
  }

  45.095% {
    transform: translateY(calc(0 * 30vh - 0.42 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(64.325deg);
  }

  46.905% {
    transform: translateY(calc(0 * 30vh - 0.42 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(47.18deg);
  }

  48.525% {
    transform: translateY(calc(0 * 30vh - 0.42 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(33.101deg);
  }

  49.275% {
    transform: translateY(calc(0 * 30vh - 0.42 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(27.134deg);
  }

  50% {
    transform: translateY(calc(0 * 30vh - 0.42 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0) * 1)) rotateX(-22deg) rotateY(21.764deg);
  }

  51.145% {
    transform: translateY(calc(0 * 30vh - 0.4182 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0.0049) * 0.9987)) rotateX(-22deg) rotateY(14.19deg);
  }

  52.33% {
    transform: translateY(calc(0 * 30vh - 0.4127 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0.0198) * 0.9948)) rotateX(-22deg) rotateY(7.687deg);
  }

  53.425% {
    transform: translateY(calc(0 * 30vh - 0.4046 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0.0416) * 0.9892)) rotateX(-22deg) rotateY(3.054deg);
  }

  54.48% {
    transform: translateY(calc(0 * 30vh - 0.3944 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0.0693) * 0.982)) rotateX(-22deg) rotateY(0deg);
  }

  55.615% {
    transform: translateY(calc(0 * 30vh - 0.3809 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0.1056) * 0.9726)) rotateX(-22deg) rotateY(0deg);
  }

  56.805% {
    transform: translateY(calc(0 * 30vh - 0.3645 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0.15) * 0.961)) rotateX(-22deg) rotateY(0deg);
  }

  58.075% {
    transform: translateY(calc(0 * 30vh - 0.3447 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0.2036) * 0.9471)) rotateX(-21.999deg) rotateY(0deg);
  }

  59.375% {
    transform: translateY(calc(0 * 30vh - 0.3223 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0.2639) * 0.932)) rotateX(-21.82deg) rotateY(0deg);
  }

  60.7% {
    transform: translateY(calc(0 * 30vh - 0.2975 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0.3298) * 0.9169)) rotateX(-21.331deg) rotateY(0deg);
  }

  62.14% {
    transform: translateY(calc(0 * 30vh - 0.2688 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0.405) * 0.9019)) rotateX(-20.489deg) rotateY(0deg);
  }

  64.06% {
    transform: translateY(calc(0 * 30vh - 0.2284 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0.5082) * 0.8862)) rotateX(-18.941deg) rotateY(0deg);
  }

  65.86% {
    transform: translateY(calc(0 * 30vh - 0.1894 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0.605) * 0.8775)) rotateX(-17.136deg) rotateY(0deg);
  }

  67.625% {
    transform: translateY(calc(0 * 30vh - 0.1513 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0.6968) * 0.8755)) rotateX(-15.119deg) rotateY(0deg);
  }

  69.43% {
    transform: translateY(calc(0 * 30vh - 0.1137 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0.7841) * 0.8805)) rotateX(-12.893deg) rotateY(0deg);
  }

  70.78% {
    transform: translateY(calc(0 * 30vh - 0.0873 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0.8432) * 0.8887)) rotateX(-11.172deg) rotateY(0deg);
  }

  72% {
    transform: translateY(calc(0 * 30vh - 0.0653 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0.8907) * 0.8988)) rotateX(-9.611deg) rotateY(0deg);
  }

  73.18% {
    transform: translateY(calc(0 * 30vh - 0.0464 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0.9305) * 0.9107)) rotateX(-8.122deg) rotateY(0deg);
  }

  74.29% {
    transform: translateY(calc(0 * 30vh - 0.0309 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0.9615) * 0.9232)) rotateX(-6.763deg) rotateY(0deg);
  }

  75.35% {
    transform: translateY(calc(0 * 30vh - 0.0188 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 0.9846) * 0.9357)) rotateX(-5.522deg) rotateY(0deg);
  }

  76.36% {
    transform: translateY(calc(0 * 30vh - 0.01 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 1) * 0.9479)) rotateX(-4.408deg) rotateY(0deg);
  }

  78.045% {
    transform: translateY(calc(0 * 30vh - 0.0062 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 1) * 0.9676)) rotateX(-2.743deg) rotateY(0deg);
  }

  79.605% {
    transform: translateY(calc(0 * 30vh - 0.0033 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 1) * 0.9826)) rotateX(-1.47deg) rotateY(0deg);
  }

  81.08% {
    transform: translateY(calc(0 * 30vh - 0.0013 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 1) * 0.9934)) rotateX(-0.558deg) rotateY(0deg);
  }

  82.48% {
    transform: translateY(calc(0 * 30vh - 0 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 1) * 1)) rotateX(0deg) rotateY(0deg);
  }

  100% {
    transform: translateY(calc(0 * 30vh - 0 * var(--lh))) scale(calc(1 * (var(--closed-scale, 1) + (1 - var(--closed-scale, 1)) * 1) * 1)) rotateX(0deg) rotateY(0deg);
  }
}

@keyframes vf-laptop-lid {
  0% {
    transform: rotateX(-90deg);
  }

  50.03% {
    transform: rotateX(-90deg);
  }

  50.91% {
    transform: rotateX(-89.718deg);
  }

  51.81% {
    transform: rotateX(-88.91deg);
  }

  53.215% {
    transform: rotateX(-86.68deg);
  }

  54.68% {
    transform: rotateX(-83.231deg);
  }

  56.225% {
    transform: rotateX(-78.519deg);
  }

  57.88% {
    transform: rotateX(-72.454deg);
  }

  59.31% {
    transform: rotateX(-66.534deg);
  }

  60.905% {
    transform: rotateX(-59.376deg);
  }

  66.04% {
    transform: rotateX(-34.686deg);
  }

  67.845% {
    transform: rotateX(-26.297deg);
  }

  69.545% {
    transform: rotateX(-18.96deg);
  }

  71.09% {
    transform: rotateX(-12.976deg);
  }

  72.505% {
    transform: rotateX(-8.229deg);
  }

  73.845% {
    transform: rotateX(-4.511deg);
  }

  75.125% {
    transform: rotateX(-1.778deg);
  }

  76.36% {
    transform: rotateX(0deg);
  }

  100% {
    transform: rotateX(0deg);
  }
}

@keyframes vf-laptop-screen {
  0% {
    scale: 0;
  }

  50% {
    scale: 0;
  }

  50.14% {
    scale: 0.0038;
  }

  50.285% {
    scale: 0.0156;
  }

  50.425% {
    scale: 0.0346;
  }

  50.57% {
    scale: 0.0619;
  }

  50.715% {
    scale: 0.0971;
  }

  50.86% {
    scale: 0.14;
  }

  51.005% {
    scale: 0.1905;
  }

  51.15% {
    scale: 0.2486;
  }

  51.295% {
    scale: 0.3141;
  }

  51.44% {
    scale: 0.387;
  }

  51.585% {
    scale: 0.4671;
  }

  51.735% {
    scale: 0.5577;
  }

  51.875% {
    scale: 0.649;
  }

  52.02% {
    scale: 0.7506;
  }

  52.1% {
    scale: 0.8096;
  }

  52.18% {
    scale: 0.8707;
  }

  52.26% {
    scale: 0.9339;
  }

  52.34% {
    scale: 0.9992;
  }

  52.345% {
    scale: 1;
  }

  100% {
    scale: 1;
  }
}

@keyframes vf-laptop-cover {
  0% {
    scale: 1;
  }

  74.225% {
    scale: 1;
  }

  74.23% {
    scale: 1;
  }

  74.35% {
    scale: 0.8507;
  }

  74.47% {
    scale: 0.7056;
  }

  74.59% {
    scale: 0.5646;
  }

  74.705% {
    scale: 0.4334;
  }

  74.82% {
    scale: 0.3062;
  }

  74.93% {
    scale: 0.1881;
  }

  75.06% {
    scale: 0.0534;
  }

  75.11% {
    scale: 0.0029;
  }

  75.115% {
    scale: 0;
  }

  100% {
    scale: 0;
  }
}

@keyframes vf-laptop-cover-dark {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  53.135% {
    opacity: 0.014;
  }

  56.61% {
    opacity: 0.057;
  }

  69.655% {
    opacity: 0.318;
  }

  75.115% {
    opacity: 0.392;
  }

  100% {
    opacity: 0.4;
  }
}

@keyframes vf-laptop-screen-off {
  0% {
    opacity: 0.94;
  }

  50.03% {
    opacity: 0.94;
  }

  51.81% {
    opacity: 0.929;
  }

  54.68% {
    opacity: 0.869;
  }

  57.88% {
    opacity: 0.757;
  }

  67.845% {
    opacity: 0.275;
  }

  71.09% {
    opacity: 0.136;
  }

  73.845% {
    opacity: 0.047;
  }

  76.36% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes vf-laptop-screen-glare {
  0% {
    opacity: 1;
  }

  58% {
    opacity: 1;
  }

  60.8% {
    opacity: 0.967;
  }

  63.89% {
    opacity: 0.868;
  }

  67.215% {
    opacity: 0.709;
  }

  73.94% {
    opacity: 0.327;
  }

  76.795% {
    opacity: 0.18;
  }

  79.795% {
    opacity: 0.061;
  }

  82.48% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes vf-laptop-sheen {
  0% {
    opacity: 0;
  }

  30% {
    opacity: 0;
  }

  31.46% {
    opacity: 0.036;
  }

  33.05% {
    opacity: 0.148;
  }

  34.53% {
    opacity: 0.299;
  }

  38.045% {
    opacity: 0.709;
  }

  39.82% {
    opacity: 0.875;
  }

  41.4% {
    opacity: 0.969;
  }

  42.915% {
    opacity: 1;
  }

  44.62% {
    opacity: 0.961;
  }

  46.41% {
    opacity: 0.841;
  }

  48.12% {
    opacity: 0.668;
  }

  52.25% {
    opacity: 0.179;
  }

  53.425% {
    opacity: 0.07;
  }

  54.48% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes vf-laptop-lit-front {
  0% {
    opacity: 0.5;
  }

  46.06% {
    opacity: 0.5;
  }

  48.345% {
    opacity: 0.326;
  }

  50.32% {
    opacity: 0.21;
  }

  52.33% {
    opacity: 0.132;
  }

  54.475% {
    opacity: 0.09;
  }

  100% {
    opacity: 0.09;
  }
}

@keyframes vf-laptop-lit-rear {
  0% {
    opacity: 0.054;
  }

  30.22% {
    opacity: 0.054;
  }

  35.535% {
    opacity: 0.003;
  }

  37.47% {
    opacity: 0.005;
  }

  39.365% {
    opacity: 0.045;
  }

  41.225% {
    opacity: 0.129;
  }

  43.12% {
    opacity: 0.258;
  }

  46.065% {
    opacity: 0.5;
  }

  100% {
    opacity: 0.5;
  }
}

@keyframes vf-laptop-lit-side-l {
  0% {
    opacity: 0.5;
  }

  36.48% {
    opacity: 0.5;
  }

  40.545% {
    opacity: 0.209;
  }

  42.245% {
    opacity: 0.104;
  }

  44.075% {
    opacity: 0.028;
  }

  45.855% {
    opacity: 0;
  }

  47.01% {
    opacity: 0.006;
  }

  48.265% {
    opacity: 0.029;
  }

  52.645% {
    opacity: 0.171;
  }

  54.48% {
    opacity: 0.213;
  }

  100% {
    opacity: 0.213;
  }
}

@keyframes vf-laptop-lit-side-r {
  0% {
    opacity: 0.273;
  }

  30.53% {
    opacity: 0.275;
  }

  31.965% {
    opacity: 0.295;
  }

  33.42% {
    opacity: 0.339;
  }

  34.895% {
    opacity: 0.406;
  }

  36.485% {
    opacity: 0.5;
  }

  100% {
    opacity: 0.5;
  }
}

@keyframes vf-laptop-lit-m67 {
  0% {
    opacity: 0.5;
  }

  39.16% {
    opacity: 0.5;
  }

  42.355% {
    opacity: 0.243;
  }

  44.305% {
    opacity: 0.115;
  }

  46.235% {
    opacity: 0.033;
  }

  48.2% {
    opacity: 0.001;
  }

  50.125% {
    opacity: 0.01;
  }

  54.48% {
    opacity: 0.078;
  }

  100% {
    opacity: 0.078;
  }
}

@keyframes vf-laptop-lit-m45 {
  0% {
    opacity: 0.5;
  }

  41.51% {
    opacity: 0.5;
  }

  44.425% {
    opacity: 0.257;
  }

  46.545% {
    opacity: 0.12;
  }

  48.665% {
    opacity: 0.036;
  }

  50.985% {
    opacity: 0.002;
  }

  100% {
    opacity: 0.008;
  }
}

@keyframes vf-laptop-lit-m22 {
  0% {
    opacity: 0.5;
  }

  43.76% {
    opacity: 0.5;
  }

  46.625% {
    opacity: 0.267;
  }

  48.955% {
    opacity: 0.129;
  }

  51.37% {
    opacity: 0.048;
  }

  54.27% {
    opacity: 0.013;
  }

  100% {
    opacity: 0.012;
  }
}

@keyframes vf-laptop-lit-p22 {
  0% {
    opacity: 0.5;
  }

  48.595% {
    opacity: 0.5;
  }

  50.18% {
    opacity: 0.396;
  }

  51.625% {
    opacity: 0.32;
  }

  53.05% {
    opacity: 0.265;
  }

  54.475% {
    opacity: 0.231;
  }

  100% {
    opacity: 0.231;
  }
}

@keyframes vf-laptop-lit-p45 {
  0% {
    opacity: 0.5;
  }

  51.875% {
    opacity: 0.5;
  }

  53.21% {
    opacity: 0.446;
  }

  54.48% {
    opacity: 0.413;
  }

  100% {
    opacity: 0.413;
  }
}

@keyframes vf-laptop-lit-p67 {
  0% {
    opacity: 0.461;
  }

  30.09% {
    opacity: 0.461;
  }

  31.27% {
    opacity: 0.471;
  }

  32.5% {
    opacity: 0.5;
  }

  100% {
    opacity: 0.5;
  }
}

@keyframes vf-laptop-scene {
  0% {
    opacity: 0;
  }

  3% {
    opacity: 0;
  }

  19.875% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes vf-laptop-floor {
  0% {
    opacity: 0.5;
    scale: 0.605 0.55;
  }

  4.43% {
    opacity: 0.5;
    scale: 0.609 0.5537;
  }

  6.145% {
    opacity: 0.5;
    scale: 0.6236 0.5669;
  }

  7.96% {
    opacity: 0.5;
    scale: 0.649 0.59;
  }

  9.87% {
    opacity: 0.5;
    scale: 0.6848 0.6226;
  }

  11.98% {
    opacity: 0.5;
    scale: 0.7328 0.6662;
  }

  19.975% {
    opacity: 0.5;
    scale: 0.946 0.86;
  }

  23.33% {
    opacity: 0.5;
    scale: 1.0243 0.9312;
  }

  25.145% {
    opacity: 0.5;
    scale: 1.0577 0.9616;
  }

  26.845% {
    opacity: 0.5;
    scale: 1.0813 0.983;
  }

  28.455% {
    opacity: 0.5;
    scale: 1.0953 0.9957;
  }

  30% {
    opacity: 0.5;
    scale: 1.1 1;
  }

  52.035% {
    opacity: 0.508;
    scale: 1.0985 1;
  }

  55.06% {
    opacity: 0.544;
    scale: 1.0913 1;
  }

  60.31% {
    opacity: 0.64;
    scale: 1.069 1;
  }

  63.775% {
    opacity: 0.651;
    scale: 1.0507 1;
  }

  66.355% {
    opacity: 0.615;
    scale: 1.0369 1;
  }

  69.015% {
    opacity: 0.538;
    scale: 1.0235 1;
  }

  71.68% {
    opacity: 0.428;
    scale: 1.0121 1;
  }

  76.36% {
    opacity: 0.2;
    scale: 1 1;
  }

  79.605% {
    opacity: 0.067;
    scale: 1 1;
  }

  82.48% {
    opacity: 0;
    scale: 1 1;
  }

  100% {
    opacity: 0;
    scale: 1 1;
  }
}

@keyframes vf-laptop-contact {
  0% {
    opacity: 0;
  }

  58% {
    opacity: 0;
  }

  64.255% {
    opacity: 0.022;
  }

  66.47% {
    opacity: 0.063;
  }

  68.545% {
    opacity: 0.132;
  }

  70.37% {
    opacity: 0.219;
  }

  72.275% {
    opacity: 0.335;
  }

  79.47% {
    opacity: 0.862;
  }

  81.05% {
    opacity: 0.949;
  }

  82.48% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes vf-phone-body {
  0% {
    transform: translateY(calc(1 * 28vh)) scale(0.666) rotateZ(-9deg) rotateX(8deg) rotateY(-172deg);
  }

  3% {
    transform: translateY(calc(1 * 28vh)) scale(0.666) rotateZ(-9deg) rotateX(8deg) rotateY(-172deg);
  }

  3.855% {
    transform: translateY(calc(0.9976 * 28vh)) scale(0.6666) rotateZ(-9deg) rotateX(8deg) rotateY(-172deg);
  }

  4.725% {
    transform: translateY(calc(0.9905 * 28vh)) scale(0.6682) rotateZ(-9deg) rotateX(8deg) rotateY(-172deg);
  }

  5.615% {
    transform: translateY(calc(0.9785 * 28vh)) scale(0.671) rotateZ(-9deg) rotateX(8deg) rotateY(-172deg);
  }

  6.53% {
    transform: translateY(calc(0.9617 * 28vh)) scale(0.675) rotateZ(-9deg) rotateX(8deg) rotateY(-172deg);
  }

  7.465% {
    transform: translateY(calc(0.9401 * 28vh)) scale(0.68) rotateZ(-9deg) rotateX(8deg) rotateY(-172deg);
  }

  8.43% {
    transform: translateY(calc(0.9136 * 28vh)) scale(0.6862) rotateZ(-9deg) rotateX(8deg) rotateY(-172deg);
  }

  9.43% {
    transform: translateY(calc(0.8819 * 28vh)) scale(0.6936) rotateZ(-9deg) rotateX(8deg) rotateY(-172deg);
  }

  10.47% {
    transform: translateY(calc(0.8449 * 28vh)) scale(0.7023) rotateZ(-9deg) rotateX(8deg) rotateY(-172deg);
  }

  11.33% {
    transform: translateY(calc(0.8115 * 28vh)) scale(0.7101) rotateZ(-9deg) rotateX(8deg) rotateY(-172deg);
  }

  12.23% {
    transform: translateY(calc(0.7743 * 28vh)) scale(0.7188) rotateZ(-9deg) rotateX(8deg) rotateY(-172deg);
  }

  14.195% {
    transform: translateY(calc(0.6862 * 28vh)) scale(0.7394) rotateZ(-9deg) rotateX(8deg) rotateY(-172deg);
  }

  16.065% {
    transform: translateY(calc(0.5962 * 28vh)) scale(0.7605) rotateZ(-9deg) rotateX(8deg) rotateY(-172deg);
  }

  20.5% {
    transform: translateY(calc(0.3762 * 28vh)) scale(0.812) rotateZ(-9deg) rotateX(8deg) rotateY(-172deg);
  }

  22.71% {
    transform: translateY(calc(0.2722 * 28vh)) scale(0.8363) rotateZ(-9deg) rotateX(8deg) rotateY(-172deg);
  }

  23.775% {
    transform: translateY(calc(0.2255 * 28vh)) scale(0.8472) rotateZ(-9deg) rotateX(8deg) rotateY(-172deg);
  }

  24.78% {
    transform: translateY(calc(0.1841 * 28vh)) scale(0.8569) rotateZ(-9deg) rotateX(8deg) rotateY(-172deg);
  }

  25.74% {
    transform: translateY(calc(0.1473 * 28vh)) scale(0.8655) rotateZ(-9deg) rotateX(8deg) rotateY(-172deg);
  }

  26.66% {
    transform: translateY(calc(0.1151 * 28vh)) scale(0.8731) rotateZ(-8.994deg) rotateX(7.995deg) rotateY(-171.894deg);
  }

  27.525% {
    transform: translateY(calc(0.0878 * 28vh)) scale(0.8798) rotateZ(-8.971deg) rotateX(7.974deg) rotateY(-171.44deg);
  }

  28.36% {
    transform: translateY(calc(0.0644 * 28vh)) scale(0.8857) rotateZ(-8.931deg) rotateX(7.938deg) rotateY(-170.675deg);
  }

  29.175% {
    transform: translateY(calc(0.0446 * 28vh)) scale(0.8909) rotateZ(-8.876deg) rotateX(7.89deg) rotateY(-169.631deg);
  }

  29.97% {
    transform: translateY(calc(0.0285 * 28vh)) scale(0.8954) rotateZ(-8.809deg) rotateX(7.83deg) rotateY(-168.342deg);
  }

  30.75% {
    transform: translateY(calc(0.016 * 28vh)) scale(0.8992) rotateZ(-8.729deg) rotateX(7.759deg) rotateY(-166.826deg);
  }

  31.515% {
    transform: translateY(calc(0.0071 * 28vh)) scale(0.9023) rotateZ(-8.639deg) rotateX(7.679deg) rotateY(-165.108deg);
  }

  32.265% {
    transform: translateY(calc(0.0018 * 28vh)) scale(0.9047) rotateZ(-8.54deg) rotateX(7.591deg) rotateY(-163.211deg);
  }

  33% {
    transform: translateY(calc(0 * 28vh)) scale(0.9063) rotateZ(-8.433deg) rotateX(7.496deg) rotateY(-161.156deg);
  }

  34.815% {
    transform: translateY(calc(0 * 28vh)) scale(0.9097) rotateZ(-8.127deg) rotateX(7.224deg) rotateY(-155.307deg);
  }

  36.715% {
    transform: translateY(calc(0 * 28vh)) scale(0.9139) rotateZ(-7.75deg) rotateX(6.889deg) rotateY(-148.114deg);
  }

  38.715% {
    transform: translateY(calc(0 * 28vh)) scale(0.9189) rotateZ(-7.3deg) rotateX(6.489deg) rotateY(-139.519deg);
  }

  40.85% {
    transform: translateY(calc(0 * 28vh)) scale(0.9248) rotateZ(-6.77deg) rotateX(6.017deg) rotateY(-129.376deg);
  }

  42.735% {
    transform: translateY(calc(0 * 28vh)) scale(0.9304) rotateZ(-6.266deg) rotateX(5.57deg) rotateY(-119.752deg);
  }

  44.83% {
    transform: translateY(calc(0 * 28vh)) scale(0.9369) rotateZ(-5.677deg) rotateX(5.047deg) rotateY(-108.503deg);
  }

  51.905% {
    transform: translateY(calc(0 * 28vh)) scale(0.96) rotateZ(-3.598deg) rotateX(3.199deg) rotateY(-68.771deg);
  }

  54.59% {
    transform: translateY(calc(0 * 28vh)) scale(0.9685) rotateZ(-2.831deg) rotateX(2.516deg) rotateY(-54.097deg);
  }

  57.28% {
    transform: translateY(calc(0 * 28vh)) scale(0.9766) rotateZ(-2.107deg) rotateX(1.873deg) rotateY(-40.262deg);
  }

  59.7% {
    transform: translateY(calc(0 * 28vh)) scale(0.9832) rotateZ(-1.512deg) rotateX(1.344deg) rotateY(-28.9deg);
  }

  61.025% {
    transform: translateY(calc(0 * 28vh)) scale(0.9865) rotateZ(-1.215deg) rotateX(1.08deg) rotateY(-23.228deg);
  }

  62.305% {
    transform: translateY(calc(0 * 28vh)) scale(0.9894) rotateZ(-0.951deg) rotateX(0.845deg) rotateY(-18.177deg);
  }

  63.545% {
    transform: translateY(calc(0 * 28vh)) scale(0.992) rotateZ(-0.718deg) rotateX(0.639deg) rotateY(-13.729deg);
  }

  64.75% {
    transform: translateY(calc(0 * 28vh)) scale(0.9943) rotateZ(-0.516deg) rotateX(0.459deg) rotateY(-9.866deg);
  }

  65.925% {
    transform: translateY(calc(0 * 28vh)) scale(0.9962) rotateZ(-0.344deg) rotateX(0.306deg) rotateY(-6.569deg);
  }

  67.075% {
    transform: translateY(calc(0 * 28vh)) scale(0.9978) rotateZ(-0.2deg) rotateX(0.178deg) rotateY(-3.828deg);
  }

  68.2% {
    transform: translateY(calc(0 * 28vh)) scale(0.999) rotateZ(-0.086deg) rotateX(0.076deg) rotateY(-1.641deg);
  }

  69.305% {
    transform: translateY(calc(0 * 28vh)) scale(1) rotateZ(0deg) rotateX(0deg) rotateY(0deg);
  }

  100% {
    transform: translateY(calc(0 * 28vh)) scale(1) rotateZ(0deg) rotateX(0deg) rotateY(0deg);
  }
}

@keyframes vf-phone-front {
  0% {
    scale: 0;
  }

  47.935% {
    scale: 0;
  }

  47.94% {
    scale: 0.0114;
  }

  48.24% {
    scale: 0.9979;
  }

  48.245% {
    scale: 1;
  }

  100% {
    scale: 1;
  }
}

@keyframes vf-phone-glare {
  0% {
    opacity: 1;
  }

  26% {
    opacity: 1;
  }

  30.96% {
    opacity: 0.967;
  }

  36.425% {
    opacity: 0.868;
  }

  42.31% {
    opacity: 0.709;
  }

  54.205% {
    opacity: 0.327;
  }

  59.25% {
    opacity: 0.18;
  }

  64.55% {
    opacity: 0.061;
  }

  69.305% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes vf-phone-buttons {
  0% {
    opacity: 0;
  }

  59.24% {
    opacity: 0;
  }

  61.57% {
    opacity: 0.347;
  }

  63.755% {
    opacity: 0.626;
  }

  65.845% {
    opacity: 0.844;
  }

  67.84% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes vf-phone-back {
  0% {
    scale: 1;
  }

  48.085% {
    scale: 1;
  }

  48.09% {
    scale: 0.9955;
  }

  48.39% {
    scale: 0.0086;
  }

  48.395% {
    scale: 0;
  }

  100% {
    scale: 0;
  }
}

@keyframes vf-phone-back-shade {
  0% {
    opacity: 0.028;
  }

  26.395% {
    opacity: 0.028;
  }

  35.33% {
    opacity: 0.001;
  }

  39.135% {
    opacity: 0.009;
  }

  42.3% {
    opacity: 0.044;
  }

  45.435% {
    opacity: 0.11;
  }

  48.655% {
    opacity: 0.207;
  }

  53.495% {
    opacity: 0.38;
  }

  100% {
    opacity: 0.38;
  }
}

@keyframes vf-phone-sheen {
  0% {
    opacity: 0;
  }

  26% {
    opacity: 0;
  }

  27.6% {
    opacity: 0.03;
  }

  29.3% {
    opacity: 0.12;
  }

  31.255% {
    opacity: 0.281;
  }

  35.29% {
    opacity: 0.693;
  }

  37.03% {
    opacity: 0.848;
  }

  38.89% {
    opacity: 0.962;
  }

  40.575% {
    opacity: 1;
  }

  41.59% {
    opacity: 0.985;
  }

  42.58% {
    opacity: 0.939;
  }

  43.545% {
    opacity: 0.863;
  }

  44.495% {
    opacity: 0.756;
  }

  45.435% {
    opacity: 0.617;
  }

  46.365% {
    opacity: 0.446;
  }

  47.29% {
    opacity: 0.243;
  }

  48.245% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes vf-phone-side-l {
  0% {
    opacity: 0.2;
  }

  27.33% {
    opacity: 0.202;
  }

  31.655% {
    opacity: 0.238;
  }

  36.245% {
    opacity: 0.32;
  }

  100% {
    opacity: 0.32;
  }
}

@keyframes vf-phone-side-r {
  0% {
    opacity: 0.32;
  }

  36.24% {
    opacity: 0.32;
  }

  46.795% {
    opacity: 0.066;
  }

  49.935% {
    opacity: 0.019;
  }

  52.95% {
    opacity: 0;
  }

  57.525% {
    opacity: 0.021;
  }

  65.81% {
    opacity: 0.128;
  }

  69.305% {
    opacity: 0.16;
  }

  100% {
    opacity: 0.16;
  }
}

@keyframes vf-phone-scene {
  0% {
    opacity: 0;
  }

  3% {
    opacity: 0;
  }

  21.75% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes vf-phone-floor {
  0% {
    scale: 0.55;
  }

  4.685% {
    scale: 0.5541;
  }

  6.58% {
    scale: 0.5677;
  }

  8.585% {
    scale: 0.591;
  }

  10.685% {
    scale: 0.6235;
  }

  13.01% {
    scale: 0.6669;
  }

  21.855% {
    scale: 0.8598;
  }

  25.58% {
    scale: 0.931;
  }

  27.6% {
    scale: 0.9615;
  }

  29.49% {
    scale: 0.983;
  }

  31.285% {
    scale: 0.9958;
  }

  33% {
    scale: 1;
  }

  100% {
    scale: 1;
  }
}