/* Hintergrund und Bewegung.
   Zwei Regeln: nichts blinkt, und nichts bewegt sich laenger als eine halbe Sekunde.
   Wer die Systemeinstellung "Bewegung reduzieren" gesetzt hat, bekommt gar nichts. */

/* ------------------------------------------------------------ Hintergrund */
body {
  background:
    radial-gradient(1200px 620px at 12% -6%, #ffffff 0%, rgba(255,255,255,0) 60%),
    radial-gradient(900px 520px at 92% 0%, rgba(1,90,252,.055) 0%, rgba(1,90,252,0) 55%),
    linear-gradient(180deg, #f7f9fc 0%, var(--grund) 42%, #eef1f7 100%);
  background-attachment: fixed;
}
.kopf, .appkopf {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(1.6) blur(10px);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
}
.seite { background: rgba(255,255,255,.45); }

/* --------------------------------------------------- Wechsel zwischen Seiten */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: raus .18s ease both; }
::view-transition-new(root) { animation: rein .26s cubic-bezier(.2,.7,.2,1) both; }
@keyframes raus { to { opacity: 0; transform: translateY(-4px); } }
@keyframes rein { from { opacity: 0; transform: translateY(6px); } }

/* ------------------------------------------------------------ Auftauchen */
@keyframes auftauchen {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.zahlen, .karte, .kampagnenkarte, .pruefliste, .verteilung,
.tabellenrahmen, .kennzahlen, .seedfach, .postfachrahmen, .hinweis {
  animation: auftauchen .34s cubic-bezier(.2,.7,.2,1) both;
}
.karte:nth-child(2), .kampagnenkarte:nth-child(2) { animation-delay: .05s; }
.kampagnenkarte:nth-child(3) { animation-delay: .1s; }
.abschnitt:nth-of-type(2) .karte { animation-delay: .06s; }
.abschnitt:nth-of-type(3) .karte { animation-delay: .1s; }

/* Zeilen der Fadenliste laufen kurz nacheinander ein. */
@keyframes zeileRein { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.fadenzeile { animation: zeileRein .26s ease both; }
.fadenzeile:nth-child(2) { animation-delay: .03s; }
.fadenzeile:nth-child(3) { animation-delay: .06s; }
.fadenzeile:nth-child(4) { animation-delay: .09s; }
.fadenzeile:nth-child(5) { animation-delay: .12s; }

/* Der Lesebereich wechselt weich, wenn ein anderes Gespraech gewaehlt wird. */
.lesen > h1, .lesen .nachricht, .lesen .entwurfkasten { animation: auftauchen .3s ease both; }
.lesen .nachricht:nth-of-type(2) { animation-delay: .06s; }
.lesen .entwurfkasten { animation-delay: .12s; }

/* ------------------------------------------------------------- Grafiken */
@keyframes linieZiehen { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
.linie-gesendet, .linie-antworten {
  stroke-dasharray: 1400; animation: linieZiehen 1.1s cubic-bezier(.3,.8,.3,1) both;
}
.linie-antworten { animation-delay: .18s; }
@keyframes flaecheRein { from { opacity: 0; } to { opacity: .16; } }
.reihe-gesendet { animation: flaecheRein .8s ease .2s both; }
@keyframes punktRein { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.punkt-antworten { transform-box: fill-box; transform-origin: center;
  animation: punktRein .3s ease both; animation-delay: .7s; }

@keyframes saeuleWachsen { from { transform: scaleY(0); } to { transform: scaleY(1); } }
#stunden rect, .aufwaermkurve .saeule {
  transform-box: fill-box; transform-origin: bottom;
  animation: saeuleWachsen .5s cubic-bezier(.2,.8,.3,1) both;
}
#stunden rect:nth-child(2n)  { animation-delay: .04s; }
#stunden rect:nth-child(3n)  { animation-delay: .08s; }
#stunden rect:nth-child(5n)  { animation-delay: .12s; }

@keyframes ringDrehen { from { stroke-dashoffset: 400; } }
#ring circle { animation: ringDrehen .9s cubic-bezier(.3,.8,.3,1) both; }

@keyframes balkenBreit { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.trichterstufe .balken, .kampagnenkarte .fortschritt i, .balkenzeile .fuell {
  transform-origin: left; animation: balkenBreit .6s cubic-bezier(.2,.8,.3,1) both;
}
.trichterstufe:nth-child(2) .balken { animation-delay: .07s; }
.trichterstufe:nth-child(3) .balken { animation-delay: .14s; }
.trichterstufe:nth-child(4) .balken { animation-delay: .21s; }

/* ------------------------------------------------------------ Beruehrung */
.karte, .kampagnenkarte, .seedfach {
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.karte:hover, .kampagnenkarte:hover {
  box-shadow: 0 1px 2px rgba(20,23,29,.05), 0 10px 30px rgba(20,23,29,.08);
  transform: translateY(-1px);
}
.fadenzeile, .seite a.punkt, .kopf nav a { transition: background .14s ease, box-shadow .14s ease; }
.marker { transition: background .14s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}