/* ============================================================
   effekte.css — alles, was sich BEWEGT oder gezeichnet wird.

   Jeder Effekt steht für sich. Willst du einen abschalten:
   den ganzen Block auskommentieren (Strg + ä in VS Code).
   ============================================================ */


/* ------------------------------------------------------------
   EFFEKT 1 — Das Punktraster, das am Mauszeiger anzieht

   Zwei Schichten liegen fest hinter allem:
     body::before  das ruhige Raster, überall gleich blass
     body::after   dasselbe Raster in dunkler, aber maskiert

   Die Maske ist ein weicher Kreis um den Mauszeiger. Nur dort
   ist die dunkle Schicht sichtbar — es sieht aus, als würden
   die Punkte anziehen. Die Position kommt aus effekte.js.
   ------------------------------------------------------------ */

:root{
  --punkt-ruhe: #D6D6D4;   /* Punkte in Ruhe */
  --punkt-nah:  #9C9C99;   /* Punkte am Zeiger */
  --abstand:    57.5px;    /* Abstand der Punkte */
  --licht:      180px;     /* Radius des Lichtkreises */
  --mx: 50vw;              /* Startposition, bis die Maus sich rührt */
  --my: 35vh;
}

body::before,
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;     /* fängt keine Klicks ab */
  z-index:0;
  background-image:radial-gradient(circle at center, var(--punkt-ruhe) .9px, transparent 1.1px);
  background-size:var(--abstand) var(--abstand);
}

body::after{
  background-image:radial-gradient(circle at center, var(--punkt-nah) .9px, transparent 1.1px);
  -webkit-mask-image:radial-gradient(var(--licht) var(--licht) at var(--mx) var(--my),
      #000 0%, rgba(0,0,0,.6) 38%, rgba(0,0,0,.18) 62%, transparent 78%);
          mask-image:radial-gradient(var(--licht) var(--licht) at var(--mx) var(--my),
      #000 0%, rgba(0,0,0,.6) 38%, rgba(0,0,0,.18) 62%, transparent 78%);
}


/* ------------------------------------------------------------
   EFFEKT 2 — Einblenden beim Scrollen

   Alles mit der Klasse "auf" startet unsichtbar und leicht
   nach unten versetzt. effekte.js hängt "in" an, sobald es
   in den Bildschirm scrollt.
   ------------------------------------------------------------ */

.auf{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s var(--e), transform .7s var(--e);
}
.auf.in{ opacity:1; transform:none }

/* In einer Reihe kommen die Stücke nacheinander.
   Die Versatzzeiten werden danach zurückgenommen (Klasse
   "fertig") — sonst hinkt jedes spätere Schweben hinterher. */
.reihe > .auf:nth-child(2){ transition-delay:.08s }
.reihe > .auf:nth-child(3){ transition-delay:.16s }
.reihe > .auf:nth-child(4){ transition-delay:.24s }
.reihe.fertig > .auf:nth-child(n){ transition-delay:0s }


/* ------------------------------------------------------------
   EFFEKT 3 — Der Hinweis zum Scrollen

   Ein Strich, der immer wieder von oben nach unten durchläuft.
   ------------------------------------------------------------ */

.hinab{
  display:flex; align-items:center; gap:9px;
  margin-top:clamp(40px,7vw,86px);
  font-family:var(--schrift-etikett); font-weight:var(--fett-etikett); font-size:11px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
}
.hinab span{
  display:block; width:1px; height:26px;
  background:linear-gradient(var(--linie-2), transparent);
  animation:sinken 2.8s var(--e-weich) infinite;
}
@keyframes sinken{
  0%  { transform:scaleY(.2); transform-origin:top;    opacity:0 }
  40% { transform:scaleY(1);                           opacity:1 }
  100%{ transform:scaleY(1);  transform-origin:bottom; opacity:0 }
}


/* ------------------------------------------------------------
   EFFEKT 4 — Der Knopf der Warteliste: Text, Kreisel, Häkchen

   Drei Zustände, gesteuert über Klassen aus warteliste.js.
   Alle drei liegen übereinander; sichtbar ist immer nur einer.
   ------------------------------------------------------------ */

.knopf-lader,
.knopf-haken{
  position:absolute; top:50%; left:50%;
  opacity:0; transition:opacity .15s var(--e);
}
.knopf-text{ display:inline-block; transition:opacity .15s var(--e) }

.knopf-lader{
  width:15px; height:15px; margin:-7.5px 0 0 -7.5px;
  border:2px solid rgba(241,241,239,.3); border-top-color:var(--canvas);
  border-radius:50%;
}
.knopf-haken{
  width:15px; height:8px; margin:-6px 0 0 -7.5px;
  border-left:2px solid var(--canvas); border-bottom:2px solid var(--canvas);
  transform:rotate(-45deg) scale(.6);
  transition:opacity .15s var(--e), transform .4s var(--e);
}

button.laedt  .knopf-text { opacity:0 }
button.laedt  .knopf-lader{ opacity:1; animation:drehen 700ms linear infinite }
button.fertig .knopf-text { opacity:0 }
button.fertig .knopf-haken{ opacity:1; transform:rotate(-45deg) scale(1) }

@keyframes drehen{ to{ transform:rotate(360deg) } }


/* ------------------------------------------------------------
   EFFEKT 5 — Weicher Seitenwechsel

   Eine Zeile. Moderne Browser blenden beim Klick auf einen Link
   weich über. Ältere ignorieren es — nichts geht kaputt.
   ------------------------------------------------------------ */

@view-transition{ navigation:auto }


/* ------------------------------------------------------------
   EFFEKT 6 — Der Kreis in der großen Karte (kreis.js)

   Fünf Bewegungen, jede in einem Satz:
   a) Außen läuft ein Lichtbogen langsam um den Kreis.
   b) Eine Kachel poppt auf, wenn sie dran ist, und schwebt dann.
   c) Die Texte blenden weich ineinander über.
   d) Am Ende springt RealUp heraus und sendet eine Welle aus.
   e) In den Fäden fließt Licht zur Mitte, der Kern atmet.

   Alles hier greift nur mit der Klasse "lebt", also nur, wenn
   kreis.js läuft. Ohne sie steht einfach das Ende da.
   ------------------------------------------------------------ */

/* a) Eine Runde dauert 16 Sekunden. */
.lebt .bahn-lauf{ animation:kreisen 16s linear infinite }
@keyframes kreisen{ to{ rotate:360deg } }

/* b) Aufpoppen: klein und unsichtbar → groß, mit Federn (--feder).
      Beim Verschwinden (zurückscrollen) ohne Federn, sonst würde
      die Kachel kurz „durch null“ schießen. */
.kachel{
  scale:0; opacity:0;
  transition:scale .25s ease-in, opacity .2s linear;
  animation:schweben 6.5s ease-in-out var(--takt, 0s) infinite;
}
.kreis-platz.da .kachel{
  scale:1; opacity:1;
  transition:scale .6s var(--feder) var(--verzug, 0s), opacity .25s linear var(--verzug, 0s);
}
@keyframes schweben{
  0%,100%{ transform:translateY(0)   rotate(var(--schief, 0deg)) }
  50%    { transform:translateY(-5%) rotate(calc(var(--schief, 0deg) * -1)) }
}

/* Beim Sog verwischen die Kacheln leicht, das wirkt wie Tempo.
   Die Klasse "saugt" setzt kreis.js nur, solange der Sog läuft. */
.saugt .kreis-platz{ filter:blur(calc(var(--sog) * 5px)) }

/* c) Nur die Stufe, die gerade dran ist, ist zu sehen.
      visibility sorgt dafür, dass man die versteckten Knöpfe
      auch nicht mit der Tab-Taste erwischt. */
.lebt .kreis-text{
  opacity:0; visibility:hidden; transform:translateY(18px); pointer-events:none;
  transition:opacity .3s var(--e), transform .3s var(--e), visibility 0s linear .3s;
}
/* Der letzte Text (mit der Überschrift h1 und den Knöpfen) bleibt
   für Vorlesegeräte und die Tab-Taste immer erreichbar, nur eben
   unsichtbar. Springt man mit Tab hinein, scrollt kreis.js dorthin. */
.lebt .kreis-text[data-stufe="3"]{ visibility:visible }
.lebt[data-stufe="1"] .kreis-text[data-stufe="1"],
.lebt[data-stufe="2"] .kreis-text[data-stufe="2"],
.lebt[data-stufe="3"] .kreis-text[data-stufe="3"]{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity .55s var(--e) .1s, transform .55s var(--e) .1s, visibility 0s;
}

/* d) RealUp springt heraus, leicht gedreht, und federt ein. */
.lebt .app-symbol{
  scale:0; opacity:0; rotate:-14deg;
  transition:scale .3s ease-in, opacity .2s linear, rotate .3s ease-in;
}
.lebt.app-raus .app-symbol{
  scale:1; opacity:1; rotate:0deg;
  transition:scale .85s var(--feder), opacity .25s linear, rotate .85s var(--feder);
}
.lebt .app-name{ opacity:0; transform:translateY(12px); transition:opacity .2s, transform .2s }
.lebt.app-raus .app-name{ opacity:1; transform:none; transition:opacity .5s var(--e) .3s, transform .5s var(--e) .3s }

/* Die Bahn um RealUp zieht sich kurz nach dem Sprung auf. */
.lebt .app-bahn{ opacity:0; scale:.8; transition:opacity .2s linear, scale .3s ease-in }
.lebt.app-raus .app-bahn{ opacity:1; scale:1; transition:opacity .8s var(--e) .3s, scale 1.2s var(--e) .3s }

/* Die Welle: ein Ring, der vom Symbol wegläuft, einmal
   (bis 27.09.2026 zweimal). Wie oft: die letzte Zahl in animation. */
.app-symbol::after{
  content:""; position:absolute; inset:-6%; border-radius:28%;
  border:2px solid var(--marke-2); opacity:0; pointer-events:none;
}
.app-raus .app-symbol::after{ animation:welle 1.4s var(--e) .35s 1 }
@keyframes welle{
  from{ opacity:.7; scale:1 }
  to  { opacity:0;  scale:1.75 }
}

/* e) Licht fließt in den Fäden von der Kachel zur Mitte, jeder
      Faden im eigenen Takt (--takt aus kreis.js). Der Kern atmet. */
.lebt .faden-licht{ animation:fliessen 2.2s cubic-bezier(.45,0,.55,1) var(--takt, 0s) infinite }
@keyframes fliessen{
  from{ stroke-dashoffset:100 }
  to  { stroke-dashoffset:0 }
}
.lebt .kreis-kern::after{ animation:atmen 2.4s var(--e) infinite }
@keyframes atmen{
  from{ opacity:.9; scale:.5 }
  to  { opacity:0;  scale:1.3 }
}
/* Kommt RealUp, geht der Kern. */
.lebt .kreis-kern{ transition:opacity .3s linear }
.lebt.app-raus .kreis-kern{ opacity:0 }

/* Der Scroll-Hinweis gehört nur zur ersten Stufe. */
.kreis-hinab{ transition:opacity .4s var(--e) }
.lebt:not([data-stufe="1"]) .kreis-hinab,
.kreis-abschnitt:not(.lebt) .kreis-hinab{ opacity:0 }


/* ------------------------------------------------------------
   EFFEKT 7 — Was sich in den fünf Karten bewegt (seit 27.09.2026)

   Kommt eine Karte dran (data-schritt in werkzeuge.js), spielt
   sich ihr Bild einmal ab. Kommt man wieder, spielt es neu.
     Zusammenfassung: die vier Quellen poppen auf, die Passage
                      füllt sich, dann kommen ihre drei Quellen
     Quellen:         die vier Schritte kommen nacheinander,
                      die Nummern füllen sich, die Linie wächst
     Faktencheck:     das Auswahlmenü poppt auf, die fünf Sätze
                      füllen sich mit Farbe, die Urteile poppen auf
     Boards:          Einladecode, dann die drei Boards von links
     KI-Chat:         Vorschläge, Frage, „tippt …“, Antwort, Belege
   Immer (auch am Handy): in den Fäden fließt es, um „Opens at“
   läuft ein Ring wie ein Fingertipp.
   Tempo: die Zahlen hinter den Namen der Animationen, und --warte.
   Alles hier ist ohne "lebt" (Handy) einfach der Endzustand.
   ------------------------------------------------------------ */

/* Immer: in den Fäden fließt es nach unten ins Blatt */
.summe-faeden path{ stroke-dasharray:3 6; animation:faden-fliessen 1.2s linear infinite }
@keyframes faden-fliessen{ to{ stroke-dashoffset:-18 } }

/* Immer: der Ring um „Opens at 12:41“ */
.spur-knopf::after{
  content:""; position:absolute; inset:-6px; border-radius:var(--rund-pille);
  border:2px solid var(--marke-2); opacity:0; pointer-events:none;
  animation:tippen 2.4s var(--e) 1.6s infinite;
}
@keyframes tippen{
  0%      { opacity:.85; scale:.92 }
  70%,100%{ opacity:0;   scale:1.12 }
}

/* 0 Zusammenfassung */
.summe-quelle:nth-child(1){ --warte:.15s }
.summe-quelle:nth-child(2){ --warte:.25s }
.summe-quelle:nth-child(3){ --warte:.35s }
.summe-quelle:nth-child(4){ --warte:.45s }
.lebt[data-schritt="0"] .summe-quelle{ animation:brett-plopp .5s var(--feder) var(--warte) both }
.lebt[data-schritt="0"] .summe-faeden{ animation:karte-blenden .6s var(--e) .55s both }
.lebt[data-schritt="0"] .summe-text mark{ animation:brett-fuellen .9s var(--e) .9s both }
.lebt[data-schritt="0"] .summe-beleg{ animation:brett-rein .5s var(--e) 1.55s both }
.summe-beleg .beleg-chip:nth-of-type(1){ --warte:1.75s }
.summe-beleg .beleg-chip:nth-of-type(2){ --warte:1.87s }
.summe-beleg .beleg-chip:nth-of-type(3){ --warte:1.99s }
.lebt[data-schritt="0"] .summe-beleg .beleg-chip{ animation:brett-plopp .45s var(--feder) var(--warte) both }

/* 1 Quellen */
.spur-schritte li:nth-child(1){ --warte:.15s }
.spur-schritte li:nth-child(2){ --warte:.45s }
.spur-schritte li:nth-child(3){ --warte:.75s }
.spur-schritte li:nth-child(4){ --warte:1.05s }
.lebt[data-schritt="1"] .spur-schritte li{ animation:brett-rein .45s var(--e) var(--warte) both }
.lebt[data-schritt="1"] .spur-nr{ animation:spur-an .45s var(--feder) calc(var(--warte) + .15s) both }
.lebt[data-schritt="1"] .spur-schritte li::before{ animation:spur-linie .35s var(--e) calc(var(--warte) + .3s) both }
.lebt[data-schritt="1"] .spur-satz mark{ animation:brett-fuellen .6s var(--e) .35s both }
@keyframes spur-an{
  from{ background-color:var(--canvas-2); color:var(--ink-3); transform:scale(.6) }
}
@keyframes spur-linie{
  from{ transform:scaleY(0) }
  to  { transform:none }
}

/* 2 Faktencheck */
.pruef-zeile:nth-child(1){ --warte:.45s }
.pruef-zeile:nth-child(2){ --warte:.6s }
.pruef-zeile:nth-child(3){ --warte:.75s }
.pruef-zeile:nth-child(4){ --warte:.9s }
.pruef-zeile:nth-child(5){ --warte:1.05s }
.lebt[data-schritt="2"] .auswahl-menue{ animation:brett-plopp .5s var(--feder) .12s both }
.lebt[data-schritt="2"] .pruef-zeile mark{ animation:brett-fuellen .55s var(--e) var(--warte) both }
.lebt[data-schritt="2"] .pruef-zeile em{ animation:brett-plopp .4s var(--feder) calc(var(--warte) + .35s) both }
.lebt[data-schritt="2"] .pruef-grund{ animation:brett-rein .5s var(--e) 1.6s both }

/* 3 Boards */
.gruppen-liste li:nth-child(1){ --warte:.4s }
.gruppen-liste li:nth-child(2){ --warte:.55s }
.gruppen-liste li:nth-child(3){ --warte:.7s }
.lebt[data-schritt="3"] .einlade-chip{ animation:brett-plopp .5s var(--feder) .12s both }
.lebt[data-schritt="3"] .gruppen-liste li{ animation:brett-rein-links .5s var(--e) var(--warte) both }
.lebt[data-schritt="3"] .g-rolle{ animation:brett-plopp .4s var(--feder) calc(var(--warte) + .35s) both }

/* 4 KI-Chat */
.chat-vorschlaege span:nth-child(1){ --warte:.12s }
.chat-vorschlaege span:nth-child(2){ --warte:.22s }
.chat-vorschlaege span:nth-child(3){ --warte:.32s }
.chat-antwort .beleg-chip:nth-of-type(1){ --warte:2.15s }
.chat-antwort .beleg-chip:nth-of-type(2){ --warte:2.25s }
.chat-antwort .beleg-chip:nth-of-type(3){ --warte:2.35s }
.lebt[data-schritt="4"] .chat-vorschlaege span{ animation:brett-plopp .45s var(--feder) var(--warte) both }
.lebt[data-schritt="4"] .chat-frage{ animation:brett-rein .45s var(--e) .5s both }
.lebt[data-schritt="4"] .chat-tippt{ animation:chat-tippt 1s linear .95s both }
.lebt[data-schritt="4"] .chat-antwort{ animation:brett-rein .5s var(--e) 1.85s both }
.lebt[data-schritt="4"] .chat-antwort .beleg-chip{ animation:brett-plopp .4s var(--feder) var(--warte) both }
.chat-tippt i{ animation:chat-punkt 1s ease-in-out infinite }
.chat-tippt i:nth-child(2){ animation-delay:.15s }
.chat-tippt i:nth-child(3){ animation-delay:.3s }
@keyframes chat-tippt{
  0%      { opacity:0 }
  12%, 85%{ opacity:1 }
  100%    { opacity:0 }
}
@keyframes chat-punkt{
  0%, 60%, 100%{ translate:0 0;    opacity:.45 }
  30%          { translate:0 -4px; opacity:1 }
}

@keyframes karte-blenden{
  from{ opacity:0 }
  to  { opacity:1 }
}


/* ------------------------------------------------------------
   EFFEKT 8 — Die FAQ klappt weich auf

   Neue Browser (Chrome, Edge) können die Höhe von "zu" nach
   "auto" gleiten lassen. Ältere klappen einfach sofort auf,
   es geht nichts kaputt.
   ------------------------------------------------------------ */

:root{ interpolate-size:allow-keywords }
.frage::details-content{
  block-size:0; overflow:hidden;
  transition:block-size .35s var(--e), content-visibility .35s allow-discrete;
}
.frage[open]::details-content{ block-size:auto }
.frage summary::after{ transition:rotate .35s var(--e) }
.frage[open] summary::after{ rotate:45deg }


/* ------------------------------------------------------------
   EFFEKT 9 — Das Farbband wandert, die großen Sätze leuchten auf

   a) Das Band oben (und in der Einladung) ist breiter als sein
      Kasten und wandert langsam hin und her. Tempo: --band-zeit.
   b) Ein weiches Licht zieht quer über das Band.
   c) In „More with RealUp“ füllen sich die Sätze beim Scrollen
      Wort für Wort mit Farbe, die RealUp-Wörter leuchten auf.
   d) Durch „trust.“ in der großen Überschrift laufen die
      RealUp-Farben ohne Pause von links nach rechts
      (seit 27.09.2026). Tempo: --trust-zeit in stil.css.
   ------------------------------------------------------------ */

/* a) */
.start-band,
.einladung-karte{ animation:band-wandern var(--band-zeit) ease-in-out infinite alternate }
@keyframes band-wandern{
  from{ background-position:0% 50% }
  to  { background-position:100% 50% }
}

/* b) */
.start-band::after{
  content:""; position:absolute; inset:-30% -20%; pointer-events:none;
  background:radial-gradient(38% 55% at 50% 50%, rgba(255,255,255,.55), transparent 70%);
  animation:licht-wandern calc(var(--band-zeit) * 1.4) ease-in-out infinite alternate;
}
@keyframes licht-wandern{
  from{ translate:-28% 6% }
  to  { translate:30% -8% }
}

/* d) Der Verlauf ist doppelt so breit wie das Wort und hat die
   Farben einmal hin und zurück (Türkis, Blau, Violett, Blau,
   Türkis). So schließt er nahtlos an sich selbst an und kann
   endlos weiterlaufen, ohne dass man einen Sprung sieht.
   Im Stand sieht man die erste Hälfte, also genau den
   Logo-Verlauf wie vorher. */
.start-titel .akzent{
  background-image:linear-gradient(90deg,
      var(--marke-1), var(--marke-2), var(--marke-3),
      var(--marke-2), var(--marke-1));
  background-size:200% 100%;
  background-repeat:repeat-x;
  animation:trust-fliessen var(--trust-zeit) linear infinite;
}
@keyframes trust-fliessen{
  from{ background-position:200% 50% }
  to  { background-position:0% 50% }
}

/* c) Die Sätze füllen sich beim Scrollen.
      effekte.js (EFFEKT 5) zerlegt jede Zeile in Wörter (.fuell) und
      schreibt jedem Wort --voll: 0 = blass, 1 = ganz gefüllt. Die
      Farbe läuft mit weicher Kante von links nach rechts durchs Wort.
      Wie blass vorher: --liste-blass in stil.css.

      Padding und gleich großer negativer Rand: gibt der Farbe Platz
      für Unterlängen (g, y, p), ohne dass sich etwas verschiebt. */
.lebt .fuell{
  --voll:0;
  --kante-a:calc(var(--voll) * 112% - 12%);
  --kante-b:calc(var(--voll) * 112%);
  display:inline-block;
  padding:.08em .05em .18em;
  margin:-.08em -.05em -.18em;
  white-space:nowrap;
  background:linear-gradient(90deg, var(--weiss) var(--kante-a), var(--liste-blass) var(--kante-b));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* Die RealUp-Wörter (<em>): Das Wort selbst bleibt blass. Darüber
   liegt dasselbe Wort noch einmal im Markenverlauf (::before), aber
   nur so weit sichtbar, wie es schon gefüllt ist (mask-image).
   Zwei getrennte Schichten, damit vor dem Füllen kein Hauch Farbe
   an den Buchstabenrändern hängt. */
.lebt em.fuell{
  position:relative;
  background:none;
  -webkit-text-fill-color:var(--liste-blass); color:var(--liste-blass);
}
/* Ganz gefüllt: das blasse Wort darunter braucht es nicht mehr */
.lebt em.fuell.leuchtet{ -webkit-text-fill-color:transparent; color:transparent }
.lebt em.fuell::before{
  content:attr(data-text);
  content:attr(data-text) / "";
  position:absolute; inset:0;
  padding:inherit;
  white-space:nowrap;
  pointer-events:none;
  background:var(--marke-verlauf);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  -webkit-mask-image:linear-gradient(90deg, #000 var(--kante-a), transparent var(--kante-b));
          mask-image:linear-gradient(90deg, #000 var(--kante-a), transparent var(--kante-b));
}

/* Ist ein RealUp-Wort ganz gefüllt, bekommt es "leuchtet": es blitzt
   hell auf und bleibt danach etwas heller (--liste-leuchten) mit
   einem Schein (--liste-schein). Die Klasse bleibt bis zum Neuladen. */
.lebt em.fuell.leuchtet{ animation:wort-aufleuchten 1.5s cubic-bezier(.2,.7,.2,1) forwards }
@keyframes wort-aufleuchten{
  0%   { filter:brightness(1) drop-shadow(0 0 0 transparent) }
  30%  { filter:brightness(1.8) saturate(1.25) drop-shadow(0 0 24px var(--liste-schein)) }
  100% { filter:brightness(var(--liste-leuchten)) saturate(1.12) drop-shadow(0 0 14px var(--liste-schein)) }
}

/* Dazu läuft einmal ein Lichtstreifen durchs Wort. Den Text dafür
   holt sich ::after aus data-text (setzt effekte.js). */
.lebt em.fuell::after{
  content:attr(data-text);
  content:attr(data-text) / "";
  position:absolute; inset:0;
  padding:inherit;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.95) 50%, transparent 62%);
  background-size:300% 100%;
  background-position:100% 0;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.lebt em.fuell.leuchtet::after{ animation:wort-glanz 1.1s .08s ease-out forwards }
@keyframes wort-glanz{
  0%   { opacity:1; background-position:100% 0 }
  85%  { opacity:1 }
  100% { opacity:0; background-position:0% 0 }
}


/* ------------------------------------------------------------
   EFFEKT 10 — Die fünf Werkzeuge wechseln (werkzeuge.js)

   Nur das Werkzeug, dessen Nummer in data-schritt steht, ist zu
   sehen. Der Text gleitet von unten herein, die Karte wächst
   dazu ein kleines Stück. Dauer: --werkzeug-zeit.
   Alles hier greift nur mit "lebt", also am Computer.
   ------------------------------------------------------------ */

.lebt .werkzeug-text,
.lebt .werkzeug-karte{
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity calc(var(--werkzeug-zeit) * .6) var(--e),
             transform calc(var(--werkzeug-zeit) * .6) var(--e),
             visibility 0s linear calc(var(--werkzeug-zeit) * .6);
}
.lebt .werkzeug-text{ transform:translateY(22px) }
.lebt .werkzeug-karte{ transform:translateY(28px) scale(.97) }

.lebt[data-schritt="0"] [data-nr="0"],
.lebt[data-schritt="1"] [data-nr="1"],
.lebt[data-schritt="2"] [data-nr="2"],
.lebt[data-schritt="3"] [data-nr="3"],
.lebt[data-schritt="4"] [data-nr="4"]{
  opacity:1; visibility:visible; pointer-events:auto; transform:none;
  transition:opacity var(--werkzeug-zeit) var(--e) .08s,
             transform var(--werkzeug-zeit) var(--e) .08s,
             visibility 0s;
}


/* ------------------------------------------------------------
   EFFEKT 11 — Die drei Boards „Für wen“ (seit 27.09.2026)

   a) Drüberfahren: das Board hebt sich ein Stück (--brett-heben),
      das Blatt darin noch ein Stück mehr, der Clip richtet sich
      auf. Dazu folgt ein weicher Schein der Maus (effekte.js,
      EFFEKT 6 schreibt die Stelle in --bx und --by).
   b) Auftritt: scrollt ein Board ins Bild (Klasse "in" von
      effekte.js, EFFEKT 2), spielt sich das Bild einmal ab.
        für alle:  der Clip fällt herein, die drei Sätze füllen sich
                   nacheinander mit Farbe, dann poppen die Urteile auf
        Schüler:   die drei Videos poppen auf, der Satz färbt sich,
                   dann springt das Schildchen mit der Fundstelle heraus
        Teams:     die drei Leute rutschen herein, dann das Export-
                   Schildchen
      Das sind Animationen (keyframes), das Drüberfahren sind
      Übergänge (transition) auf ANDEREN Eigenschaften (translate,
      rotate). So kommen sich beide nicht in die Quere.
   c) Im Clip läuft die Leiste unten immer wieder durch, und die
      Schildchen schweben ganz leicht.

   Tempo: die Zahlen hinter den Namen der Animationen.
   ------------------------------------------------------------ */

/* a) Drüberfahren */
.bretter .brett{
  transition:opacity .7s var(--e), transform .7s var(--e), translate .45s var(--e);
}
.brett .clip, .brett .blatt{ transition:translate .5s var(--e), rotate .6s var(--feder) }
@media (hover:hover){
  .bretter .brett:hover{ translate:0 var(--brett-heben) }
  .brett:hover .blatt{ translate:0 -8px }
  .brett:hover .clip{ rotate:-2deg; translate:0 -8px }
}

/* Der Schein unter der Maus. Liegt über dem Grund, aber unter
   Text und Bild (die haben z-index:1 in stil.css). */
.brett::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(var(--brett-licht-groesse) circle at var(--bx, 50%) var(--by, 0%), var(--brett-licht), transparent 70%);
  opacity:0; transition:opacity .45s var(--e);
}
.brett:hover::after{ opacity:1 }

/* b) Auftritt — für alle */
.brett.in .clip{ animation:brett-clip .9s var(--feder) .15s both }
.brett.in .urteil mark{ animation:brett-fuellen .7s var(--e) var(--warte) both }
.brett.in .urteil em{ animation:brett-plopp .55s var(--feder) calc(var(--warte) + .45s) both }
.brett.in .urteil-grund{ animation:brett-rein .5s var(--e) calc(var(--warte) + .6s) both }
.urteil:nth-of-type(1){ --warte:.5s }
.urteil:nth-of-type(2){ --warte:.85s }
.urteil:nth-of-type(3){ --warte:1.2s }

/* b) Auftritt — Schüler */
.brett.in .vorschauen li{ animation:brett-plopp .6s var(--feder) var(--warte) both }
.vs-1{ --warte:.3s }
.vs-2{ --warte:.42s }
.vs-3{ --warte:.54s }
.brett.in .zf-satz mark{ animation:brett-fuellen .8s var(--e) .85s both }
.brett.in .fundstelle{ animation:brett-plopp .6s var(--feder) 1.35s both, brett-schweben 4.8s ease-in-out 2s infinite }

/* b) Auftritt — Teams */
.brett.in .mitglieder li{ animation:brett-rein-links .55s var(--e) var(--warte) both }
.mitglieder li:nth-child(1){ --warte:.35s }
.mitglieder li:nth-child(2){ --warte:.5s }
.mitglieder li:nth-child(3){ --warte:.65s }
.brett.in .leute b{ animation:brett-plopp .5s var(--feder) var(--warte) both }
.leute b:nth-child(1){ --warte:.3s }
.leute b:nth-child(2){ --warte:.4s }
.leute b:nth-child(3){ --warte:.5s }
.brett.in .export-schild{ animation:brett-plopp .6s var(--feder) 1.05s both, brett-schweben 5.4s ease-in-out 1.8s infinite }

/* c) Die Leiste im Clip läuft wie ein Video, immer wieder */
.clip-lauf b{ width:100%; transform-origin:left; animation:clip-laeuft 7s linear infinite }

@keyframes brett-clip{
  from{ opacity:0; transform:translate(-14px, 34px) rotate(-10deg) }
  to  { opacity:1; transform:none }
}
@keyframes brett-fuellen{
  from{ background-size:0% 100% }
  to  { background-size:100% 100% }
}
@keyframes brett-plopp{
  from{ opacity:0; transform:scale(.55) }
  60% { opacity:1 }
  to  { opacity:1; transform:none }
}
@keyframes brett-rein{
  from{ opacity:0; transform:translateY(8px) }
  to  { opacity:1; transform:none }
}
@keyframes brett-rein-links{
  from{ opacity:0; transform:translateX(-14px) }
  to  { opacity:1; transform:none }
}
@keyframes brett-schweben{
  0%, 100%{ translate:0 0 }
  50%     { translate:0 -5px }
}
@keyframes clip-laeuft{
  from{ transform:scaleX(0) }
  to  { transform:scaleX(1) }
}


/* ------------------------------------------------------------
   PFLICHT — Rücksicht auf "weniger Bewegung"

   Wer das am Gerät eingestellt hat, bekommt die Endzustände
   zu sehen, aber keine Antriebe. Kostet ein paar Zeilen und ist
   der Unterschied zwischen "gebastelt" und "professionell".
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  body::after{ display:none }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reihe > .auf:nth-child(n){ transition-delay:0s !important }
  .auf{ opacity:1; transform:none }
  .summe-faeden path, .spur-knopf::after, .chat-tippt i{ animation:none !important }
  .start-band, .einladung-karte, .start-band::after{ animation:none !important; opacity:1 }
  .start-titel .akzent{ animation:none !important; background-position:0% 50% }
  /* Die Boards „Für wen“: Endzustand sofort, nichts hebt sich */
  .brett *, .brett::after{ animation:none !important }
  .bretter .brett:hover, .brett:hover .blatt, .brett:hover .clip{ translate:none }
}