/* motion.css — das eine Bewegungssystem der App.
   Alle Dauern und Kurven stehen hier; nirgends sonst stehen Zahlen.
   Es wird nur transform und opacity bewegt (plus grid-rows beim
   Aufklappen), nichts, das Layout oder Paint über den Bildschirm treibt.
   Wer Bewegung abgestellt hat, bekommt reine Blenden oder gar nichts. */

:root {
  --m-fast: 120ms;
  --m-base: 200ms;
  --m-slow: 320ms;
  --m-zahl: 800ms;
  --e-standard:   cubic-bezier(0.2, 0, 0, 1);
  --e-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --e-spring:     cubic-bezier(0.3, 1.25, 0.5, 1);
}

/* ── Seitenwechsel (View Transitions, dokumentübergreifend) ─────────── */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: m-seite-raus var(--m-fast) var(--e-standard) both;
}
::view-transition-new(root) {
  animation: m-seite-rein var(--m-slow) var(--e-decelerate) both;
  animation-delay: 40ms;
}
@keyframes m-seite-raus { to { opacity: 0; transform: scale(0.985) translateY(4px); } }
@keyframes m-seite-rein { from { opacity: 0; transform: translateY(10px); } }

/* Elemente, die auf beiden Seiten stehen, bleiben stehen oder morphen:
   die Marke, der aktive Navigationsknopf (die „Pille" gleitet zum nächsten
   Eintrag), die Karte mit der Uhr. */
.tor-marke { view-transition-name: marke; }
/* Auf breiten Schirmen steht die Marke im Menü, auf schmalen in der
   Kopfzeile — je genau eine trägt den Namen, sonst streitet die Blende. */
@media (min-width: 960px) { .sb-marke { view-transition-name: marke; } .sb-link.aktiv { view-transition-name: nav-aktiv; } }
@media (max-width: 959px) { header.top .marke-mobil { view-transition-name: marke; } }
header.top nav .knopf.aktiv { view-transition-name: nav-aktiv; }
::view-transition-group(nav-aktiv) { animation-duration: var(--m-slow); animation-timing-function: var(--e-standard); }
::view-transition-group(marke)     { animation-duration: var(--m-slow); animation-timing-function: var(--e-standard); }

/* Fallback ohne View Transitions: motion.js blendet den Körper aus,
   navigiert, und die neue Seite blendet sich ein. */
body.m-geht { opacity: 0; transform: scale(0.985) translateY(4px);
  transition: opacity var(--m-fast) var(--e-standard), transform var(--m-fast) var(--e-standard); }
body.m-kommt { animation: m-seite-rein var(--m-slow) var(--e-decelerate) both; }

/* ── Knöpfe ───────────────────────────────────────────────────────────── */
.knopf, .stempel-knoepfe button, .zeile button.klein, .chip button {
  transition:
    transform var(--m-fast) var(--e-standard),
    filter var(--m-fast) var(--e-standard),
    border-color var(--m-base) var(--e-standard),
    background-color var(--m-base) var(--e-standard),
    color var(--m-base) var(--e-standard),
    opacity var(--m-base) var(--e-standard),
    outline-offset var(--m-fast) var(--e-standard),
    box-shadow var(--m-base) var(--e-standard);
}
.knopf:hover:not([disabled]), .stempel-knoepfe button:hover:not([disabled]) {
  transform: translateY(-1px); filter: brightness(1.08);
}
.knopf:active:not([disabled]), .stempel-knoepfe button:active:not([disabled]),
.zeile button.klein:active { transform: scale(0.97); filter: brightness(0.96); }
.knopf.aktiv:hover:not([disabled]) { box-shadow: 0 4px 18px -6px rgba(52, 232, 176, 0.55); }
.stempel-knoepfe button.haupt:hover:not([disabled]) { box-shadow: 0 6px 24px -8px rgba(52, 232, 176, 0.6); }
:focus-visible { transition: outline-offset var(--m-fast) var(--e-standard); }
.knopf:focus-visible, .stempel-knoepfe button:focus-visible { outline-offset: 3px; }

/* Wartender Knopf: die Beschriftung weicht, ein Ring dreht — die Breite
   bleibt, weil der Text nur unsichtbar wird, nicht verschwindet. */
[data-wartet] { position: relative; color: transparent !important; pointer-events: none; }
[data-wartet]::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  color: var(--text); opacity: 0.85;
  animation: m-dreh 700ms linear infinite;
}
.knopf.aktiv[data-wartet]::after, .stempel-knoepfe button.haupt[data-wartet]::after { color: #06231f; }
@keyframes m-dreh { to { transform: rotate(360deg); } }

/* ── Navigation: die Pille ────────────────────────────────────────────── */
.sb-link, .sb-link .sb-icon, .sb-wer, .sb-zu, .sb-raus {
  transition: background-color var(--m-base) var(--e-standard), color var(--m-base) var(--e-standard);
}
.sb-link::before { transition: transform var(--m-base) var(--e-standard); }
.sb, .sb-backdrop { transition: transform var(--m-slow) var(--e-standard), width var(--m-slow) var(--e-standard), opacity var(--m-base) var(--e-standard), box-shadow var(--m-slow) var(--e-standard); }
body.app { transition: grid-template-columns var(--m-slow) var(--e-standard); }
.sb-zu svg { transition: transform var(--m-slow) var(--e-standard); }
.sb-link:active { transform: scale(0.98); }
header.top nav .knopf { position: relative; }
header.top nav .knopf::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 1px;
  background: var(--akzent); opacity: 0; transform: scaleX(0.4);
  transition: opacity var(--m-base) var(--e-standard), transform var(--m-base) var(--e-standard);
}
header.top nav .knopf:hover:not(.aktiv)::after { opacity: 0.7; transform: scaleX(1); }
.tor-fuss a { position: relative; text-decoration: none; }
.tor-fuss a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--m-base) var(--e-standard);
}
.tor-fuss a:hover { text-decoration: none; }
.tor-fuss a:hover::after { transform: scaleX(1); }

/* ── Felder ───────────────────────────────────────────────────────────── */
input, select, textarea {
  transition: border-color var(--m-base) var(--e-standard), box-shadow var(--m-base) var(--e-standard);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--akzent-d);
  box-shadow: 0 0 0 3px rgba(52, 232, 176, 0.14);
}
.feld label { transition: color var(--m-base) var(--e-standard); }
.feld:focus-within label { color: var(--akzent); }
.m-schuettel { animation: m-schuettel var(--m-slow) var(--e-standard); border-color: var(--fehler) !important; }
@keyframes m-schuettel {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); } 80% { transform: translateX(3px); }
}

/* ── Dialoge ──────────────────────────────────────────────────────────── */
dialog[open] { animation: m-dialog-auf var(--m-base) var(--e-decelerate) both; transform-origin: var(--m-origin, 50% 40%); }
dialog[open]::backdrop { animation: m-blende var(--m-base) var(--e-standard) both; }
dialog.m-zu { animation: m-dialog-zu var(--m-fast) var(--e-standard) both; }
dialog.m-zu::backdrop { animation: m-blende var(--m-fast) var(--e-standard) reverse both; }
@keyframes m-dialog-auf { from { opacity: 0; transform: scale(0.94) translateY(6px); } }
@keyframes m-dialog-zu  { to   { opacity: 0; transform: scale(0.96) translateY(4px); } }
@keyframes m-blende     { from { opacity: 0; } }

/* ── Meldungen ────────────────────────────────────────────────────────── */
.meldung { position: relative; overflow: hidden; animation: m-meldung-rein var(--m-slow) var(--e-decelerate) both; }
.meldung.m-weg { animation: m-meldung-raus var(--m-fast) var(--e-standard) both; }
@keyframes m-meldung-rein { from { opacity: 0; transform: translateY(-6px); } }
@keyframes m-meldung-raus { to   { opacity: 0; transform: translateY(-4px); } }
.meldung > .m-balken {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: currentColor; opacity: 0.45; transform-origin: left;
  animation: m-ablauf var(--m-dauer, 4000ms) linear both;
}
@keyframes m-ablauf { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ── Listen, Karten, Zeilen ───────────────────────────────────────────── */
.m-rein {
  animation: m-rein var(--m-slow) var(--e-decelerate) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes m-rein { from { opacity: 0; transform: translateY(8px); } }
.m-blende { animation: m-blende var(--m-base) var(--e-standard) both; }
.m-raus { animation: m-raus var(--m-fast) var(--e-standard) both; pointer-events: none; }
@keyframes m-raus { to { opacity: 0; transform: translateY(-4px); } }
.karte { transition: transform var(--m-base) var(--e-standard), border-color var(--m-base) var(--e-standard); }
.karte:hover { transform: translateY(-1px); border-color: var(--akzent-d); }
.karte .wert, .uhr .gross, .tor-uhr .zeit, td.num, .zeile .dauer { font-variant-numeric: tabular-nums; }
.zeile, tr { transition: background-color var(--m-base) var(--e-standard); }
.zeile:hover { background: #111318; }
.abzeichen { transition: color var(--m-base) var(--e-standard), border-color var(--m-base) var(--e-standard); }
.chip { animation: m-rein var(--m-base) var(--e-decelerate) both; }

/* ── Skelette ─────────────────────────────────────────────────────────── */
.m-skelett { display: grid; gap: 10px; }
.m-skelett.karten { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.m-knochen {
  height: var(--h, 52px); border-radius: 8px;
  background: linear-gradient(100deg, var(--flaeche) 30%, var(--flaeche2) 50%, var(--flaeche) 70%);
  background-size: 200% 100%;
  animation: m-schimmer 1400ms var(--e-standard) infinite;
}
@keyframes m-schimmer { from { background-position: 120% 0; } to { background-position: -80% 0; } }

/* ── Aufklappen ───────────────────────────────────────────────────────── */
details > summary { list-style: none; display: flex; align-items: center; gap: 8px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--m-base) var(--e-standard); flex: none;
}
details[open] > summary::before { transform: rotate(45deg); }
details > .m-inhalt { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--m-slow) var(--e-standard); }
details[open] > .m-inhalt { grid-template-rows: 1fr; }
details.m-schliesst > .m-inhalt { grid-template-rows: 0fr; }
details > .m-inhalt > div { overflow: hidden; min-height: 0; }

/* ── Balken ───────────────────────────────────────────────────────────── */
.pow-balken i { transition: width var(--m-fast) linear; }
.m-balken-wert { transform-origin: left; transform: scaleX(var(--w, 0)); transition: transform var(--m-zahl) var(--e-decelerate); }

/* Eigene Uhrzeit läuft: leichtes Atmen der Zustandszeile */
.uhr .gross { transition: color var(--m-slow) var(--e-standard); }

/* ── Weniger Bewegung ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: m-nur-blende var(--m-base) both; }
  ::view-transition-group(*) { animation-duration: 0s; }
  .m-rein, .m-blende, .meldung, dialog[open], .chip { animation: m-nur-blende var(--m-base) both; }
  .m-raus, .meldung.m-weg, dialog.m-zu { animation: m-nur-blende var(--m-fast) reverse both; }
  .knopf:hover, .karte:hover, .stempel-knoepfe button:hover { transform: none; }
  [data-wartet]::after { animation-duration: 1200ms; }
  .m-knochen { animation: none; }
  .m-schuettel { animation: none; }
}
@keyframes m-nur-blende { from { opacity: 0; } to { opacity: 1; } }