/* ═══════════════════════════════════════════════════════════════════════════
   teil-zo — Der Eintritt der Sammelseiten: Lidschlag, Welle, Vogel am Zweig
   ───────────────────────────────────────────────────────────────────────────
   Christopher, 04.10.2026 (Auftrag 8 für /augenoptik/, Auftrag 9 für
   /hoerakustik/): „eine Eingangsanimation … einen Wow-Effekt, ja, Augenblicke,
   so ein Blinzeln, so ein Lidschlag in Zeitlupe und dann wird das Bild leicht
   weiß und dann erscheint die Schrift."

   ── Der Ablauf (2,45 s), und warum er so lang ist ─────────────────────────
     0,00–0,30  die Lider sind zu, die Seite liegt dahinter
     0,30–1,05  sie öffnen sich langsam — das ist die Zeitlupe
     1,05–1,35  ein Zwinkern: sie fallen ein Stück zurück
     1,35–1,95  sie öffnen ganz
     1,55–2,10  der weiße Schleier geht auf und wieder weg („das Bild wird
                leicht weiß")
     1,60–2,45  Überschrift und Leitsatz treten hervor

   Zweieinhalb Sekunden sind die Grenze, ab der ein Eintritt vom Erlebnis zur
   Wartezeit wird. Die Startseite nimmt sich 4,2 s, weil sie einmal am Tag
   aufgeht; eine Unterseite ruft er im Haus zwanzigmal auf.

   ── Nichts wird nachgeladen ───────────────────────────────────────────────
   Reine Keyframes, zwei Flächen und ein Schleier. Keine Leinwand, kein WebGL,
   kein Bild — damit gibt es hier auch nichts, was stehen bleiben kann.
   ═══════════════════════════════════════════════════════════════════════════ */

.bv-eintritt{
  position:fixed; inset:0; z-index:9000;
  pointer-events:auto;
  animation:bv-eintritt-weg .01s linear 2.45s forwards;
}
@keyframes bv-eintritt-weg{ to{ opacity:0; pointer-events:none; visibility:hidden } }

/* ── Die Lider ──────────────────────────────────────────────────────────── */
.bv-lid{
  position:absolute; left:-2%; right:-2%; height:62%;
  background:linear-gradient(180deg, var(--creme-2), var(--creme));
  box-shadow:0 0 60px rgba(19,55,109,.10);
  will-change:transform;
}
.bv-lid-oben{
  top:0;
  border-radius:0 0 52% 52% / 0 0 22% 22%;
  border-bottom:2px solid var(--gold);      /* die Wimpernlinie */
  animation:bv-lid-oben 2.45s var(--weich) both;
}
.bv-lid-unten{
  bottom:0;
  border-radius:52% 52% 0 0 / 22% 22% 0 0;
  border-top:2px solid var(--gold);
  animation:bv-lid-unten 2.45s var(--weich) both;
}
/* 62 % Höhe je Lid heißt: geschlossen überlappen sie um 24 % — kein Spalt an
   den Seiten, obwohl die Innenkante gerundet ist. */
@keyframes bv-lid-oben{
    0%{ transform:translateY(0) }
   12%{ transform:translateY(0) }
   43%{ transform:translateY(-100%) }
   55%{ transform:translateY(-68%) }        /* das Zwinkern */
   80%{ transform:translateY(-100%) }
  100%{ transform:translateY(-100%) }
}
@keyframes bv-lid-unten{
    0%{ transform:translateY(0) }
   12%{ transform:translateY(0) }
   43%{ transform:translateY(100%) }
   55%{ transform:translateY(68%) }
   80%{ transform:translateY(100%) }
  100%{ transform:translateY(100%) }
}

/* ── Hörakustik: drei Ringe statt der Lider ─────────────────────────────────
   Dasselbe Gerüst, anderes Motiv — Ton statt Blick. Die Lider laufen dort
   trotzdem mit, nur schneller: sie geben den Blick frei, die Ringe tragen
   die Aussage. */
.bv-eintritt[data-motiv="ton"] .bv-lid-oben{ animation-duration:1.9s }
.bv-eintritt[data-motiv="ton"] .bv-lid-unten{ animation-duration:1.9s }
.bv-welle{
  position:absolute; top:50%; left:50%; translate:-50% -50%;
  width:34vmin; aspect-ratio:1; border-radius:50%;
  border:2px solid var(--blau-hell); opacity:0;
  animation:bv-welle 1.9s var(--weich) both;
}
.bv-welle-2{ animation-delay:.22s }
.bv-welle-3{ animation-delay:.44s }
@keyframes bv-welle{
    0%{ transform:scale(.18); opacity:0 }
   18%{ opacity:.85 }
  100%{ transform:scale(3.6); opacity:0 }
}

/* ── Der weiße Schleier ─────────────────────────────────────────────────── */
.bv-eintritt-weiss{
  position:absolute; inset:0; background:#fff; opacity:0;
  animation:bv-weiss 2.45s linear both;
}
@keyframes bv-weiss{
    0%{ opacity:0 }
   60%{ opacity:0 }
   70%{ opacity:.82 }
   86%{ opacity:0 }
  100%{ opacity:0 }
}

/* ── Überspringen ───────────────────────────────────────────────────────── */
.bv-eintritt-ueber{
  position:absolute; right:clamp(14px,3vw,34px); bottom:clamp(14px,3vw,34px);
  appearance:none; border:1px solid var(--glas-rand); cursor:pointer;
  font:inherit; font-size:.82rem; font-weight:750; color:var(--text-leise);
  background:rgba(255,255,255,.82); border-radius:var(--r-rund);
  padding:.55em 1.1em;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  animation:bv-ueber-ein .4s var(--weich) .5s both;
}
.bv-eintritt-ueber:hover{ color:var(--blau); background:#fff }
@keyframes bv-ueber-ein{ from{ opacity:0 } to{ opacity:1 } }

/* ── Die Schrift tritt danach hervor ────────────────────────────────────── */
body.bv-hat-eintritt .leistung-buehne-text > *{
  animation:bv-text-ein .85s var(--weich) both;
}
body.bv-hat-eintritt .leistung-titel{ animation-delay:1.6s }
body.bv-hat-eintritt .leistung-leitsatz{ animation-delay:1.78s }
@keyframes bv-text-ein{
  from{ opacity:0; transform:translateY(18px); filter:blur(6px) }
  to{ opacity:1; transform:none; filter:none }
}

/* Das Einstiegsband traegt den Zweig — ohne eigenen Bezugspunkt haenge er
   sonst an der naechsten positionierten Flaeche weiter oben. */
.leistung-einstieg{ position:relative }

/* ═══ Der Zweig mit dem Vogel ═══════════════════════════════════════════════
   Christopher: „der Text in der Kachel, da muss was passieren, animiert, wenn,
   dann vielleicht irgendein Vogel, der auf einer Blume landet oder sowas."
   Der Zweig zeichnet sich, die Blüte geht auf, der Vogel gleitet auf einer
   Bahn heran, schlägt dabei mit dem Flügel und sitzt dann still. */
.bv-zweig{
  position:absolute; right:clamp(-10px, 1vw, 18px); bottom:clamp(-6px, .8vw, 14px);
  width:clamp(130px, 15vw, 220px); height:auto;
  color:var(--gold); opacity:.9;
  pointer-events:none; overflow:visible;
}
/* Versteckt wird erst, wenn das Skript die Strichlängen gesetzt hat
   (.bv-bereit). Läuft es nicht oder bricht es ab, steht der Zweig fertig da —
   dieselbe Richtung wie bei den Zeichen der Vertrauenskacheln. */
.bv-zweig.bv-bereit .bv-ast,
.bv-zweig.bv-bereit .bv-bluete *{
  stroke-dasharray:var(--l, 200); stroke-dashoffset:var(--l, 200);
  transition:stroke-dashoffset 1.3s var(--weich);
}
.bv-zweig.bv-bereit.bv-da .bv-ast{ stroke-dashoffset:0 }
.bv-zweig.bv-bereit.bv-da .bv-bluete *{ stroke-dashoffset:0; transition-delay:.75s }

.bv-zweig .bv-vogel{
  offset-path:path("M -70 18 C 10 -34, 70 -10, 118 26");
  offset-distance:100%; offset-rotate:auto;
}
.bv-zweig.bv-bereit .bv-vogel{ offset-distance:0%; opacity:0 }
.bv-zweig.bv-bereit.bv-da .bv-vogel{
  animation:bv-flug 2.3s var(--weich) 1.1s both;
}
@keyframes bv-flug{
    0%{ offset-distance:0%;   opacity:0 }
    8%{ opacity:1 }
   88%{ offset-distance:100%; opacity:1 }
  100%{ offset-distance:100%; opacity:1 }
}
.bv-zweig.bv-bereit.bv-da .bv-fluegel{
  transform-origin:9px 0;
  animation:bv-schlag .34s ease-in-out 1.1s 6 both;
}
@keyframes bv-schlag{
   0%,100%{ transform:rotate(0deg) scaleY(1) }
      50%{ transform:rotate(-26deg) scaleY(.6) }
}

/* ── Netze ──────────────────────────────────────────────────────────────────
   Ohne JavaScript bekommt das Einstiegsband nie .auf. Dann stünde der Zweig
   ungezeichnet da und der Vogel unsichtbar — darum zeigt dieses Netz beides
   fertig. Der Eintritt selbst läuft ohne Skript sowieso durch (Keyframes) und
   endet auf visibility:hidden; er kann also niemanden aussperren. */
@media (scripting: none){
  .bv-zweig .bv-ast, .bv-zweig .bv-bluete *{ stroke-dashoffset:0; transition:none }
  .bv-zweig .bv-vogel{ offset-distance:100%; opacity:1; animation:none }
  .bv-eintritt{ display:none }
}
@media (prefers-reduced-motion: reduce){
  .bv-eintritt{ display:none }
  body.bv-hat-eintritt .leistung-buehne-text > *{ animation:none }
  .bv-zweig .bv-ast, .bv-zweig .bv-bluete *{ stroke-dashoffset:0; transition:none }
  .bv-zweig .bv-vogel{ offset-distance:100%; opacity:1; animation:none }
  .bv-zweig.bv-bereit.bv-da .bv-fluegel{ animation:none }
}

@media (max-width:620px){
  .bv-zweig{ width:118px; opacity:.75 }
  .bv-welle{ width:52vmin }
}

/* ── ACHTUNG, hier lag ein echter Fehler (04.10.2026) ──────────────────────
   Erst hieß die Auslöseklasse `auf`. **Im Haus bedeutet `.auf` aber das
   Gegenteil:** grund.css 446 gibt JEDEM `.auf` ein `opacity:0` und wartet auf
   `.auf.da`. Auf einer Fläche ohne `.einblenden` heißt `.auf` also
   „unsichtbar". Das Hörkurven-Diagramm stand dadurch live auf opacity 0 —
   gemessen: Kasten 725 × 547 an der richtigen Stelle, nur nicht zu sehen.
   Darum heißt die eigene Klasse jetzt `bv-da` und kreuzt sich mit nichts. */