/* =====================================================================
 * Interaktion und Bewegung (1.2.0): Seitenwechsel, Leiste unten,
 * Kopf beim Scrollen, Meldungen, Dialoge, Balken, Kacheln, Schalter,
 * Lade-Skelette, Rundgang. Bei "Bewegung reduzieren" faellt alles weg
 * (basis.css); die Browsertests laufen deshalb mit reducedMotion: reduce.
 * ================================================================== */
@keyframes seite-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes einblenden { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes dialog-ein { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes blende-ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes fuellen { from { clip-path: inset(0 100% 0 0 round 999px); } to { clip-path: inset(0 0 0 0 round 999px); } }
@keyframes schimmern { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); } }
@keyframes aufleuchten { from { background-color: var(--akzent-hell); } to { background-color: transparent; } }

/* Seitenwechsel: neue Seite gleitet sanft ein */
.inhalt > div { animation: seite-ein 240ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }

/* Kopf bekommt beim Scrollen einen Schatten (wo der Browser scrollgesteuerte Animationen kann) */
@supports (animation-timeline: scroll()) {
  @keyframes kopf-schatten { to { box-shadow: 0 6px 20px rgb(16 24 40 / 0.08); border-bottom-color: transparent; } }
  .kopf { animation: kopf-schatten linear both; animation-timeline: scroll(root); animation-range: 0 72px; }
}

/* Leiste unten: aktiver Bereich als Pille hinter dem Symbol, Druck-Feedback */
.leiste a:not(.gross) svg {
  width: 60px; height: 32px; padding: 4px 18px; border-radius: var(--radius-rund);
  transition: background-color var(--dauer), transform var(--dauer);
}
.leiste a[aria-current="page"]:not(.gross) svg { background: var(--akzent-hell); }
.leiste a[aria-current="page"]:not(.gross)::before { content: none; }
.leiste a:not(.gross):active svg { transform: scale(0.92); }
.seitenleiste a:active { transform: scale(0.98); }

/* Meldungen und Dialoge */
.meldung { animation: einblenden 220ms ease-out both; }
dialog.dialog[open] { animation: dialog-ein 220ms cubic-bezier(0.2, 0.7, 0.3, 1); }
dialog.dialog[open]::backdrop { animation: blende-ein 220ms ease-out; }

/* Balken (Ampeln, Rundgang, Upload) fuellen sich von links */
progress.balken { animation: fuellen 800ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }

/* Kacheln und Listen: Foto zoomt leicht, Druck-Feedback */
.kachel .bild img { transition: transform 350ms cubic-bezier(0.2, 0.7, 0.3, 1); }
@media (hover: hover) { .kachel:hover .bild img { transform: scale(1.05); } }
.kachel:active { transform: scale(0.98); }
.liste-einfach a:active { background: var(--akzent-hell); }

/* Schalter: Ein/Aus-Einstellungen als Schalter statt Kaestchen (bleibt eine Checkbox) */
.schalter input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; cursor: pointer;
  width: 48px; height: 28px; margin: 0; border: 0; border-radius: var(--radius-rund);
  background: var(--rand-stark); transition: background-color var(--dauer);
}
.schalter input[type="checkbox"]::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--schalter-knopf); box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
  transition: transform var(--dauer) cubic-bezier(0.2, 0.7, 0.3, 1);
}
.schalter input[type="checkbox"]:checked { background: var(--akzent); }
.schalter input[type="checkbox"]:checked::before { transform: translateX(20px); background: var(--schalter-knopf-an); }
.schalter input[type="checkbox"]:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* Lade-Skelette statt "Wird geladen …" */
.skelett { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.skelett.zeilen { grid-template-columns: 1fr; gap: 10px; }
.skelett > div {
  border-radius: var(--radius); min-height: 44px;
  background: linear-gradient(90deg, var(--flaeche-2) 30%, var(--hg) 50%, var(--flaeche-2) 70%);
  background-size: 200% 100%; animation: schimmern 1.4s linear infinite;
}
.skelett:not(.zeilen) > div { aspect-ratio: 3 / 4; }

/* Rundgang: Fortschritt und kurz aufspringendes Haekchen beim gerade erledigten Punkt */
.merkliste .haken { display: inline-block; color: var(--erfolg); font-weight: 800; }
.merkliste [data-neu] { animation: aufleuchten 1.2s ease-out; }
.merkliste [data-neu] .haken { animation: pop 420ms cubic-bezier(0.2, 0.7, 0.3, 1.4); }
/* Inventur: der gerade gescannte Code leuchtet kurz auf */
.inventur-codes [data-neu] { animation: aufleuchten 1.2s ease-out; }

/* =====================================================================
 * Seitenuebergaenge (1.4, Spec 3): View Transitions mit Richtung.
 * vor = neue Seite von rechts, zurueck = von links, wechseln = Ueberblendung.
 * Kopf, Leiste und Seitenleiste haben eigene Namen und bleiben stehen;
 * die Leiste wird je Teil benannt (Kapsel, Erfassen), weil ein Name an
 * .leiste den Glas-Hintergrund der Kapsel abschneiden wuerde (Backdrop Root).
 * Das Foto der angetippten Kachel und das Titelfoto heissen foto-<id>.
 * ================================================================== */
.kopf { view-transition-name: kopf; }
.leiste .kapsel { view-transition-name: leiste-kapsel; }
.leiste a.gross { view-transition-name: leiste-erfassen; }
.seitenleiste { view-transition-name: seitenleiste; }
.inhalt > div[data-uebergang] { animation: none; }
@keyframes vt-rein-rechts { from { opacity: 0; transform: translateX(24px); } }
@keyframes vt-rein-links { from { opacity: 0; transform: translateX(-24px); } }
@keyframes vt-raus-links { to { opacity: 0; transform: translateX(-24px); } }
@keyframes vt-raus-rechts { to { opacity: 0; transform: translateX(24px); } }
::view-transition-group(*) { animation-duration: 300ms; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
:root[data-richtung="vor"]::view-transition-old(root) { animation: 200ms ease-in both vt-raus-links; }
:root[data-richtung="vor"]::view-transition-new(root) { animation: 260ms cubic-bezier(0.2, 0.7, 0.3, 1) both vt-rein-rechts; }
:root[data-richtung="zurueck"]::view-transition-old(root) { animation: 200ms ease-in both vt-raus-rechts; }
:root[data-richtung="zurueck"]::view-transition-new(root) { animation: 260ms cubic-bezier(0.2, 0.7, 0.3, 1) both vt-rein-links; }
:root[data-richtung="wechseln"]::view-transition-old(root), :root[data-richtung="wechseln"]::view-transition-new(root) { animation-duration: 180ms; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Blaetter (1.4, Spec 4): am Telefon von unten hochgleiten, beim Loslassen zurueckfedern */
@keyframes blatt-hoch { from { transform: translateY(100%); } to { transform: none; } }
@media (max-width: 899px) { dialog.blatt[open] { animation: blatt-hoch 260ms cubic-bezier(0.2, 0.9, 0.3, 1.1); } }
@media (min-width: 900px) { dialog.blatt[open] { animation: dialog-ein 220ms cubic-bezier(0.2, 0.7, 0.3, 1); } }
dialog.blatt[open]::backdrop { animation: blende-ein 220ms ease-out; }
dialog.blatt.zurueckfedern { transition: transform 200ms cubic-bezier(0.2, 0.9, 0.3, 1.1); }

/* Leiste schrumpft und waechst weich (1.4, Spec 5) */
.leiste .kapsel { transition: height 220ms cubic-bezier(0.2, 0.7, 0.3, 1); }
.leiste a.gross span.kreis { transition: width 220ms cubic-bezier(0.2, 0.7, 0.3, 1), height 220ms cubic-bezier(0.2, 0.7, 0.3, 1), transform var(--dauer); }
.ziehen-anzeige { transition: opacity var(--dauer), background-color var(--dauer); }