/* ===========================================================
   Frizzli HQ — Motion & Material (2026-09)
   -----------------------------------------------------------
   Ergänzt app.css / frizzli-desktop.css, überschreibt nichts Strukturelles.
   Prinzipien (Apple, „Designing Fluid Interfaces" / „Principles of Great Design"):
   • Feedback auf Pointer-Down, sofort, ohne Verzögerung.
   • Nur transform/opacity animieren (Compositor), kein Layout.
   • Transluzente Chrome-Schichten statt opaker Balken; Inhalt läuft darunter durch.
   • Typografie: Tracking ist grössenabhängig — gross enger, klein weiter.
   • Reduced Motion / Reduced Transparency / More Contrast werden respektiert.
   Rücknehmbar als Ganzes: Datei aus index.html entfernen.
   =========================================================== */

/* ---------- 1. Press-Feedback (auf Pointer-Down, nicht erst beim Loslassen) ---------- */
button, [data-action], [data-nav], .bo-preview-row, .fab-new, .feedback-fab {
  -webkit-tap-highlight-color: transparent;
}
.is-pressed {
  transform: scale(0.97);
  transition: transform 90ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Zeilen und grosse Flächen nur dezent drücken — sonst wackelt die Liste */
.bo-preview-row.is-pressed, [data-nav].is-pressed:not(button), .card.is-pressed {
  transform: scale(0.992);
}
button:not(.is-pressed), [data-action]:not(.is-pressed), .bo-preview-row:not(.is-pressed) {
  transition-property: transform, background-color, color, border-color, box-shadow, opacity;
  transition-duration: 220ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
button:disabled { transform: none !important; }

/* ---------- 2. Sheet (Modal auf Mobile) — Bewegung kommt aus frizzli-motion.js ---------- */
.modal-backdrop.sheet-backdrop {
  /* Scrim folgt der Position des Blatts (Variable wird pro Frame gesetzt) */
  background: rgba(0, 0, 0, calc(0.42 * var(--sheet-progress, 1))) !important;
  transition: none;
  animation: none;
}
.modal-backdrop.sheet-backdrop .modal.sheet {
  will-change: transform;
  animation: none !important;          /* CSS-Keyframes würden die Feder überlagern */
  transition: none !important;
  touch-action: pan-y;
}
.modal.sheet.is-dragging { cursor: grabbing; }
.modal.sheet .modal-handle { cursor: grab; }
/* Ausfahrendes Blatt liegt ausserhalb von #modal-root (Body), muss aber gleich aussehen */
body > .modal-backdrop.sheet-leaving { pointer-events: none; }
/* Reduced Motion: Blatt blendet nur ein */
.modal-backdrop.sheet-fade { animation: sheet-fade 160ms ease-out; }
@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 3. Desktop-Dialog „materialisiert" (Scale + Blur zusammen) ---------- */
.modal-backdrop.dialog-enter { opacity: 0; }
.modal-backdrop.dialog-enter .modal { transform: scale(0.96) translateY(6px); filter: blur(6px); opacity: 0; }
.modal-backdrop.dialog-in { opacity: 1; transition: opacity 140ms ease-out; }
.modal-backdrop.dialog-in .modal {
  transform: none; filter: none; opacity: 1;
  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.25, 1), filter 200ms ease-out, opacity 160ms ease-out;
}
.modal-backdrop.dialog-out { opacity: 0; pointer-events: none; transition: opacity 140ms ease-in; }
.modal-backdrop.dialog-out .modal {
  transform: scale(0.97) translateY(4px); filter: blur(4px); opacity: 0;
  transition: transform 160ms cubic-bezier(0.75, 0.1, 0.8, 0.8), filter 140ms ease-in, opacity 140ms ease-in;
}

/* ---------- 4. Materialien: Tab-Bar & Kopfzeilen als transluzente Schicht ---------- */
.tab-bar {
  background: color-mix(in srgb, var(--card, #fff) 74%, transparent) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid color-mix(in srgb, var(--divider, #e6e6e6) 60%, transparent) !important;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.35) inset; /* helle Kante = Licht auf dem Material */
}
.modal .modal-header {
  position: sticky; top: 0; z-index: 2;
  background: color-mix(in srgb, var(--card, #fff) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}
/* Scroll-Kante statt harter Linie: Inhalt verläuft unter dem Kopf */
.modal .modal-body { scroll-padding-top: 8px; }

/* ---------- 5. Toasts (Bewegung per Feder aus JS; hier nur Material) ---------- */
.toast {
  will-change: transform, opacity;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  transition: opacity 220ms ease-out;
}

/* ---------- 6. Typografie: Tracking und Leading grössenabhängig ---------- */
h1, .bh-head-t, .modal-title, .hero-value, .bh-kpi-v, .rep-kpi-v {
  letter-spacing: -0.018em;
  line-height: 1.12;
  font-optical-sizing: auto;
}
h2, h3 { letter-spacing: -0.01em; line-height: 1.2; }
.bh-head-s, .bo-preview-sub, .bh-kpi-l, .rep-kpi-l, small, .badge, .bo-preview-tag {
  letter-spacing: 0.01em;
}
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/* ---------- 7. Fokus sichtbar, aber nur per Tastatur ---------- */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--accent, #004519); outline-offset: 2px; border-radius: 6px; }

/* ---------- 8. Sanfte Bewegung für Tab-Glider und Status-Wechsel ---------- */
.tab-glider { transition: transform 320ms cubic-bezier(0.2, 0.9, 0.25, 1) !important; }

/* ---------- 9. Zugänglichkeit: Reduced Motion / Transparency / Contrast ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .is-pressed { transform: none; opacity: 0.85; }
  .modal-backdrop.dialog-enter .modal { transform: none; filter: none; }
  .modal-backdrop.sheet-fade { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .tab-bar, .modal .modal-header, .toast {
    background: var(--card, #fff) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
@media (prefers-contrast: more) {
  .tab-bar, .modal .modal-header { background: var(--card, #fff) !important; border-color: var(--text, #111) !important; }
  .toast { border: 1px solid currentColor; }
}
/* Dunkelmodus: Material etwas dichter, Kante statt Schatten */
@media (prefers-color-scheme: dark) {
  .tab-bar { background: color-mix(in srgb, var(--card, #1a1a1a) 80%, transparent) !important; box-shadow: none; }
  .modal .modal-header { background: color-mix(in srgb, var(--card, #1a1a1a) 86%, transparent); }
}