/* FluxDoc · Ausbau Etappe 1 „Gefühl“ (06.10.2026). Drei Dauern, eine Kurve. Ohne Bewegung bleiben alle Zustände lesbar. */
:root { --t1: 150ms; --t2: 220ms; --t3: 300ms; --kurve: cubic-bezier(.16, 1, .3, 1); }

/* ---------- Prüfplatz: Tagesleiste ---------- */
.tagesleiste { padding: 10px 22px 8px; border-bottom: 1px solid var(--line); background: var(--sunken); }
.tagesleiste__text { display: flex; justify-content: space-between; font-size: 16px; color: var(--muted); }
.tagesleiste__text b { color: var(--ink); font-weight: 650; }
.tagesleiste__bahn { margin-top: 6px; height: 5px; border-radius: 5px; background: var(--blue-50); overflow: hidden; }
.tagesleiste__bahn i { display: block; height: 100%; width: var(--nach); border-radius: inherit; background: var(--blue); }

/* ---------- Mikro-Interaktionen (immer, sie bewegen nichts weg) ---------- */
.btn { transition: background var(--t1) var(--kurve), border-color var(--t1) var(--kurve), box-shadow var(--t1) var(--kurve), transform var(--t1) var(--kurve); }
.table tr.link { transition: background var(--t1) var(--kurve); }
.tabs [role=tab] { transition: color var(--t1) var(--kurve), box-shadow var(--t2) var(--kurve); }

@media (prefers-reduced-motion: no-preference) {
  .btn:active:not(:disabled) { transform: scale(.98); }
  .setup-row, .doc-card { transition: transform var(--t2) var(--kurve), box-shadow var(--t2) var(--kurve), border-color var(--t2) var(--kurve); }
  .setup-row:hover, .doc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

  /* Seitenwechsel: Inhalt blendet ein und rückt nach oben. */
  @keyframes v-rein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  #main.v-enter > * { animation: v-rein var(--t2) var(--kurve) both; }

  /* Tagesleiste rückt weiter. */
  @keyframes bahn { from { width: var(--von); } to { width: var(--nach); } }
  .tagesleiste__bahn i { animation: bahn var(--t3) 120ms var(--kurve) both; }

  /* Belegwechsel: hinaus und herein, Richtung wie die Pfeile. */
  @keyframes raus-vor { to { opacity: 0; transform: translateX(-24px); } }
  @keyframes raus-zurueck { to { opacity: 0; transform: translateX(24px); } }
  @keyframes rein-vor { from { opacity: 0; transform: translateX(24px); } }
  @keyframes rein-zurueck { from { opacity: 0; transform: translateX(-24px); } }
  @keyframes doc-rein { from { opacity: .35; } }
  .review-side.raus-vor > *:not(.tagesleiste) { animation: raus-vor 170ms ease-in both; }
  .review-side.raus-zurueck > *:not(.tagesleiste) { animation: raus-zurueck 170ms ease-in both; }
  .review-side.rein-vor > *:not(.tagesleiste) { animation: rein-vor 260ms var(--kurve) both; }
  .review-side.rein-zurueck > *:not(.tagesleiste) { animation: rein-zurueck 260ms var(--kurve) both; }
  .review-doc.rein-doc .page-img, .review-doc.rein-doc img { animation: doc-rein 260ms var(--kurve) both; }

  /* Meldungen: Häkchen zeichnet sich beim Einblenden. */
  @keyframes toast-haken { from { stroke-dashoffset: 60; } }
  .toast svg path { stroke-dasharray: 60; animation: toast-haken 420ms 80ms var(--kurve) both; }
}

@media (max-width: 720px) {
  .tagesleiste { padding: 8px 16px 6px; }
}

/* ---------- Etappe 4: Foto ---------- */
.v2-foto__auto { display: inline-block; margin-left: 10px; padding: 3px 9px; border-radius: 999px; background: var(--safe-wash); color: var(--safe); font: 650 16px/1.3 var(--body); vertical-align: 3px; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes rahmen-rein { from { opacity: 0; transform: scale(1.04); } }
  .v2-foto__rahmen { animation: rahmen-rein var(--t3) var(--kurve) both; }
}
@media (max-width: 760px) { .v2-foto__leiste > .btn:not(.primary) { width: 100%; } }