/* ============================================================
   Die Szene — nach einer MotionSites-Vorlage (seit 07.10.2026)
   ------------------------------------------------------------
   Vorlage: „Anchor AI“ aus der MotionSites-Bibliothek. Übernommen
   sind Aufbau, Glas-Pillen, Ladeanzeige, Zeiger und
   die Einblendungen. Eigen bleiben:
     - die Schrift (Archivo / Archivo Black statt Geist),
     - das Markenblau für alles, was Text trägt — das Blau der
       Vorlage (#218EFF) schafft mit weißer Schrift nur 3,4 : 1,
       unseres 5,4 : 1 (siehe design-tokens.css),
     - alle Texte, wörtlich von der bisherigen Seite.
   ============================================================ */

html { scroll-padding-top: 104px; }

/* ---------- Ebenen hinter dem Inhalt ---------- */
#szene, .vignette, .schleier {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#szene { z-index: -3; display: block; background: #01040a; }
.vignette {
  z-index: -2;
  background: radial-gradient(circle at 50% 53%, transparent 20%, rgba(0, 4, 10, .1) 56%, rgba(0, 2, 6, .8) 100%);
}
/* Nach der Bühne liegt die Szene als Hintergrund unter den Texten.
   Ohne diesen Schleier stünde grauer Fliesstext auf hellen Punkten. */
.schleier { z-index: -2; background: #000; opacity: 0; }
.ohne-szene #szene { background: var(--grund) url("images/flaeche-schwarz.jpg") center / cover no-repeat; }

/* Übergang von der Bühne in den Rest der Seite: keine harte Linie
   quer durch den Würfel, der Ton des Zwischenrufs läuft weich ein. */
/* Unten dichter: „— kennt man.“ steht grau und lag mit .26 bei 3,36 : 1. */
.zwischenruf { border-top: 0; --ton: linear-gradient(to bottom, rgba(7, 8, 9, 0) 0%, rgba(7, 8, 9, .3) 30%, rgba(7, 8, 9, .5) 70%); }
@media (max-width: 48rem) {
  .zwischenruf { --ton: linear-gradient(to bottom, rgba(7, 8, 9, 0) 0%, rgba(7, 8, 9, .46) 30%, rgba(7, 8, 9, .56) 70%); }
}

/* ---------- Die Bühne: 3,35 Bildschirme Scrollweg ---------- */
.buehne { position: relative; }
.js .buehne { height: 335vh; }
/* Sprungziel „Was ich mache“: mitten in der Haltestrecke (s = 1,6),
   die Kopfhöhe (scroll-padding) kommt obendrauf. */
.anker { position: absolute; left: 0; top: calc(160vh + 110px); width: 1px; height: 1px; }

/* ============================================================
   Kopf — Glaspille in der Mitte
   ============================================================ */
.szene-kopf {
  position: fixed;
  z-index: 40;
  top: 28px;
  left: 36px;
  right: 40px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.szene-marke {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--tinte);
}
.szene-marke img { height: 34px; width: auto; display: block; flex: none; }
.szene-marke .kopf-name { display: none; }
@media (min-width: 75rem) {
  .szene-marke .kopf-name {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    white-space: nowrap;
  }
}

.glas {
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(129, 129, 129, .2);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}

.szene-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 30px;
  padding: 11px 24px;
  border-radius: 999px;
}
.szene-nav a {
  font-size: 1rem;
  line-height: 1.25;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
.szene-nav a:hover { text-decoration: underline; text-decoration-color: var(--blau-hell); }

.szene-kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Nach der Bühne scrollt Text unter dem Kopf durch. Dann bekommt er
   eine auslaufende Decke, sonst läuft Fließtext durchs Monogramm. */
.szene-kopf::before {
  content: "";
  position: absolute;
  inset: -28px -40px -26px -36px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(7, 8, 9, .94) 0%, rgba(7, 8, 9, .86) 62%, rgba(7, 8, 9, 0) 100%);
  opacity: 0;
  transition: opacity .3s ease;
}
.nach-buehne .szene-kopf::before { opacity: 1; }

/* ---------- Pillen ---------- */
.pille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  transition: background-color var(--uebergang);
}
.pille-blau { background: var(--blau); color: #fff; }
.pille-blau:hover { background: #1550C8; }
.pille-hell { background: #fff; color: #000; }
.pille-hell:hover { background: #DCE6FB; }

/* Bewegung anhalten / fortsetzen */
.bewegung {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  cursor: pointer;
  padding: 0;
}
.bewegung svg { width: 16px; height: 16px; display: block; }
.bewegung .weiter { display: none; }
.halt .bewegung .anhalten { display: none; }
.halt .bewegung .weiter { display: block; }

/* ============================================================
   Erster Bildschirm
   ============================================================ */
.szene-hero,
.szene-zwei {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  /* Bewusst KEIN will-change: opacity — das macht die Tafel zur
     Grenze für backdrop-filter, und die Glaskarten darin blieben scharf. */
}
.szene-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 40px;
  padding: 0 40px clamp(32px, 6vh, 64px);
}
/* Klickbar nur, solange man es sieht. In der Vorlage sind die
   Knöpfe gar nicht klickbar (pointer-events: none auf dem Ganzen). */
.szene-hero a { pointer-events: auto; }

/* Lesbarkeit über den Lichtpunkten. Gemessen am schlechtesten Pixel
   (07.10.2026): ohne Verlauf fiel weiße Schrift über dem Baum auf
   1,2 : 1 — einzelne Punkte leuchten fast weiß. Abgedunkelt wird nur,
   wo Text steht; die Mitte mit Baum und Würfel bleibt offen. */
.szene-hero::before,
.szene-zwei::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.szene-hero::before { background: linear-gradient(to top, rgba(1, 4, 10, .84) 0%, rgba(1, 4, 10, .66) 30%, rgba(1, 4, 10, 0) 55%); }
.szene-zwei::before { background: linear-gradient(to bottom, rgba(1, 4, 10, .82) 0%, rgba(1, 4, 10, .6) 22%, rgba(1, 4, 10, 0) 40%); }
.szene-hero.blass a { pointer-events: none; visibility: hidden; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border: 1px solid var(--blau-hell);
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(1, 4, 10, .6);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.kicker i { width: 10px; height: 10px; border-radius: 50%; background: var(--blau-hell); }

.szene-hero h1 {
  margin-top: 20px;
  font-family: "Archivo Black", system-ui, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.6rem, min(6.2vw, 10.5vh), 6rem);
  line-height: .92;
  letter-spacing: -0.038em;
}
.szene-hero .markiert::before { transform-origin: left center; }
.js .szene-hero .markiert::before { transform: scaleX(0); }
.intro-fertig .szene-hero .markiert::before {
  animation: marker-ziehen 640ms cubic-bezier(.33, .9, .4, 1) 1.5s both;
}

.szene-text { width: min(360px, 32vw); padding-bottom: 6px; }
.szene-text > p { font-size: 1.0625rem; line-height: 1.45; color: var(--tinte); }
.tasten { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tasten .pille { padding: 15px 20px; }

.szene-anruf {
  position: absolute;
  right: 40px;
  top: 128px;
  text-align: right;
  font-size: 1rem;
  line-height: 1.35;
}
.szene-anruf p { color: var(--tinte-leise); }
.szene-anruf::before {
  content: "";
  position: absolute;
  inset: -34px -44px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(1, 4, 10, .85) 65%, rgba(1, 4, 10, 0));
}
.szene-anruf a {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}

/* ============================================================
   Zweiter Bildschirm — der Würfel und die vier Aussagen
   ============================================================ */
.szene-zwei {
  opacity: 0;
  visibility: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  column-gap: 40px;
  padding: 118px 40px 40px;
}
.szene-zwei h2 {
  max-width: none;
  font-size: clamp(2.4rem, 3.9vw, 3.75rem);
  line-height: .98;
  letter-spacing: -0.035em;
}
.szene-intro {
  width: min(320px, 30vw);
  padding-top: 10px;
  font-size: 1.0625rem;
  line-height: 1.4;
}
.merkmale {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  list-style: none;
  padding: 0;
}
.merkmale li {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  /* Dunkler als das Glas der Vorlage (rgba(129,129,129,.2)): hier steht
     Fließtext, und hinter den Karten läuft die helle Würfelkante durch.
     Mit .55 lag der Text bei 3,9 : 1, mit .72 darüber. */
  background: rgba(14, 18, 26, .72);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
          backdrop-filter: blur(16px) saturate(115%);
}
.merkmale .nr { align-self: flex-end; font-size: 1rem; font-weight: 600; }
.merkmale h3 {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.125rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.merkmale p { margin-top: 10px; font-size: .9375rem; line-height: 1.45; color: var(--tinte); }

/* ============================================================
   Ladeanzeige und eigener Zeiger
   ============================================================ */
.lader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #000;
  display: none;
  align-items: center;
  justify-content: center;
  transition: transform 1.05s cubic-bezier(.76, 0, .24, 1);
}
.js:not(.ruhig) .lader { display: flex; }
.lader.geht { transform: translateY(-100%); }
.js .lader.weg { display: none; }
.lader-marke { width: 72px; height: auto; display: block; }
.lader-stand {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.lader-stand span { color: rgba(255, 255, 255, .6); font-size: 1.125rem; }
.lader-stand strong { font-size: 1.75rem; font-weight: 400; line-height: 1; }
.lader-stand b { font: inherit; }
html.laedt { overflow: hidden; }

.zeiger {
  position: fixed;
  z-index: 1100;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  will-change: transform;
}
.zeiger.da { opacity: 1; }
.zeiger-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border: 1px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform .25s ease, background-color .25s ease;
  mix-blend-mode: difference;
}
.zeiger-ring::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}
.zeiger.ueber .zeiger-ring { transform: translate(-50%, -50%) scale(1.53); background: rgba(255, 255, 255, .12); }
.mit-zeiger body, .mit-zeiger a, .mit-zeiger button { cursor: none; }

/* ============================================================
   Einblendungen — Zeiten aus der Vorlage
   ============================================================ */
.wort { display: inline-block; white-space: nowrap; }
.zeichen { display: inline-block; }

.js .szene-kopf,
.js .kicker,
.js .szene-anruf,
.js .szene-text > p,
.js .tasten .pille,
.js .szene-hero .zeichen { opacity: 0; }
.js .szene-kopf { transform: translateY(22px); filter: blur(5px); }
.js .kicker, .js .szene-anruf, .js .szene-text > p, .js .tasten .pille { transform: translateY(20px); filter: blur(7px); }
.js .szene-hero .zeichen { transform: translateY(15px); filter: blur(12px); will-change: opacity, transform, filter; }

.intro-fertig .szene-kopf { animation: hoch .8s cubic-bezier(.22, 1, .36, 1) .12s forwards; }
.intro-fertig .kicker { animation: hoch .75s cubic-bezier(.22, 1, .36, 1) .72s forwards; }
.intro-fertig .szene-hero .zeichen { animation: hoch .72s cubic-bezier(.22, 1, .36, 1) calc(.68s + var(--i) * .032s) forwards; }
.intro-fertig .szene-anruf { animation: hoch .75s cubic-bezier(.22, 1, .36, 1) 1.55s forwards; }
.intro-fertig .szene-text > p { animation: hoch .8s cubic-bezier(.22, 1, .36, 1) 1.84s forwards; }
.intro-fertig .tasten .pille:first-child { animation: hoch .72s cubic-bezier(.22, 1, .36, 1) 2.08s forwards; }
.intro-fertig .tasten .pille:last-child { animation: hoch .72s cubic-bezier(.22, 1, .36, 1) 2.2s forwards; }

.js .szene-zwei .zeichen, .js .szene-intro, .js .merkmale li { opacity: 0; }
.js .szene-zwei .zeichen { transform: translateY(15px); filter: blur(12px); }
.js .szene-intro, .js .merkmale li { transform: translateY(30px); }
.js .szene-intro { filter: blur(7px); }
.szene-zwei.drin .zeichen { animation: hoch .72s cubic-bezier(.22, 1, .36, 1) calc(var(--i) * .032s) forwards; }
.szene-zwei.drin .szene-intro { animation: hoch .8s cubic-bezier(.22, 1, .36, 1) .72s forwards; }
.szene-zwei.drin .merkmale li { animation: hoch .82s cubic-bezier(.22, 1, .36, 1) calc(.98s + var(--k, 0) * .13s) forwards; }
.merkmale li:nth-child(2) { --k: 1; }
.merkmale li:nth-child(3) { --k: 2; }
.merkmale li:nth-child(4) { --k: 3; }

@keyframes hoch { to { opacity: 1; transform: none; filter: none; } }

/* Chrome rechnet das Ende trotzdem als „blur(0px)“ — und ein Filter,
   auch blur(0), schneidet den Glaseffekt der Pille im Kopf ab (die
   Sterne standen scharf hinter „Was ich mache“). Nach der Einblendung
   setzt szene.js deshalb .steht: Endzustand ohne jeden Filter. */
.js .szene-kopf.steht { animation: none; opacity: 1; transform: none; filter: none; }

/* ============================================================
   Tablet und Handy
   ============================================================ */
@media (max-width: 68rem) {
  .merkmale { grid-template-columns: 1fr 1fr; }
  .merkmale li { min-height: 0; }
}

@media (max-width: 59.99rem) {
  html { scroll-padding-top: 120px; }
  .szene-kopf {
    top: 14px;
    left: 16px;
    right: 16px;
    height: auto;
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .szene-nav {
    position: static;
    transform: none;
    order: 3;
    flex-basis: 100%;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 18px;
  }
  .szene-nav a { font-size: .9375rem; }
  .szene-kopf-rechts .pille { padding: 11px 16px; font-size: .9375rem; }

  .szene-hero {
    grid-template-columns: 1fr;
    align-content: end;
    row-gap: 22px;
    padding: 0 20px 28px;
  }
  .kicker { font-size: .8125rem; letter-spacing: .02em; padding: 10px 14px; }
  /* Im Hochformat steht der Text über dem halben Bild. Die Stufen in px,
     nicht in %: der Textblock ist gleich hoch, egal wie hoch der Schirm
     ist (mit % fiel „Schnell. Verständlich.“ auf 360 x 740 auf 2,3 : 1). */
  /* Nur so dunkel, wie die Schrift es braucht (07.10.: „am Handy sehr
     dunkel“): Fließtext unten ≥ .6, die große Überschrift ≥ .45, darüber
     läuft der Verlauf aus — Stamm und Wasser bleiben sichtbar. */
  .szene-hero::before { background: linear-gradient(to top, rgba(1, 4, 10, .72) 0, rgba(1, 4, 10, .62) 240px, rgba(1, 4, 10, .46) 390px, rgba(1, 4, 10, 0) 470px); }
  .szene-zwei::before { background: linear-gradient(to bottom, rgba(1, 4, 10, .72) 0, rgba(1, 4, 10, .62) 330px, rgba(1, 4, 10, 0) 430px); }
  .szene-kopf::before { inset: -14px -16px -22px; }
  .szene-text { width: auto; max-width: 30rem; }
  .szene-anruf { right: 20px; top: 136px; }
  .szene-hero h1 { font-size: clamp(2.5rem, 11vw, 4rem); margin-top: 16px; }

  .szene-zwei { padding: 136px 20px 24px; grid-template-columns: 1fr; }
  .szene-intro { width: auto; grid-row: 2; align-self: start; padding-top: 14px; }
  .szene-zwei h2 { font-size: clamp(2.1rem, 8.5vw, 3rem); }
}

/* Schmal: Die Vorlage blendet hier die Erklärsätze aus und lässt nur
   die Überschriften stehen. Stattdessen laufen die Karten seitlich
   durch — so bleibt jeder Satz lesbar. */
@media (max-width: 35rem) {
  .szene-anruf { display: none; }
  .szene-kopf-rechts .pille { display: none; }
  .tasten .pille { padding: 14px 18px; }
  .szene-zwei { padding-bottom: 20px; }
  .merkmale {
    display: flex;
    gap: 10px;
    margin-inline: -20px;
    padding-inline: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    pointer-events: auto;
  }
  .merkmale::-webkit-scrollbar { display: none; }
  .merkmale li { flex: 0 0 80%; scroll-snap-align: center; padding: 20px; border-radius: 22px; gap: 12px; }
  .merkmale p { font-size: .9375rem; }
}

/* Kleine Handys (320 x 640): Die Navigation passt nur kleiner in die
   Pille, und der Text bedeckt fast den ganzen Schirm — die Verläufe
   reichen deshalb höher. Gemessen ohne das: Überschrift 1,8 : 1. */
@media (max-width: 22.5rem) {
  .szene-nav { gap: 6px; padding: 9px 12px; }
  .szene-nav a { font-size: .78rem; }
}
@media (max-width: 35rem) and (max-height: 44rem) {
  .szene-hero::before { background: linear-gradient(to top, rgba(1, 4, 10, .88) 0%, rgba(1, 4, 10, .74) 62%, rgba(1, 4, 10, 0) 92%); }
  .szene-zwei::before { background: linear-gradient(to bottom, rgba(1, 4, 10, .88) 0%, rgba(1, 4, 10, .74) 48%, rgba(1, 4, 10, 0) 62%); }
}

/* Ohne Skript: alles steht untereinander, nichts ist versteckt. */
html:not(.js) .szene-kopf { position: relative; top: 0; left: 0; right: 0; padding: 18px 20px; }
html:not(.js) .szene-hero,
html:not(.js) .szene-zwei { position: relative; inset: auto; opacity: 1; visibility: visible; min-height: 100vh; }

@media (prefers-reduced-motion: reduce) {
  .szene-kopf, .kicker, .szene-anruf, .szene-text > p, .tasten .pille,
  .zeichen, .szene-intro, .merkmale li {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
  }
  .szene-hero .markiert::before { animation-delay: 0s !important; }
}