/* Design-Durchgang über Bootstrap (Anregungen: Apple-Design-Prinzipien, nur CSS, keine Bibliothek) */
:root { --sheet-kurve: cubic-bezier(0.32, 0.72, 0, 1); }            /* weicher Auslauf wie bei iOS-Sheets, ohne Überschwingen */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; font-optical-sizing: auto; }
a, button, label, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Typografie: große Überschriften enger, Zahlen in gleicher Breite */
h1, .h1, h2, .h2, .h3 { letter-spacing: -0.02em; font-weight: 650; }
h1.h3 { font-size: clamp(1.35rem, 1rem + 1.6vw, 1.9rem); }
.display-6, .h3, .fs-4, .fs-5, td, .metric-card { font-variant-numeric: tabular-nums; }
.metric-card .display-6 { letter-spacing: -0.03em; }

/* Rückmeldung beim Drücken: sofort, nicht erst beim Loslassen */
.btn { transition: transform 0.12s ease, background-color 0.15s, border-color 0.15s, box-shadow 0.15s; }
.btn:active { transform: scale(0.97); }
.list-group-item, .table > tbody > tr { transition: background-color 0.15s; }

/* Kopfleiste: ab Tablet-Breite halbtransparent mit Unschärfe und beim Scrollen oben; auf dem Handy normal (sie ist dort mehrzeilig) */
.kopfleiste { border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
@media (min-width: 768px) {
  .kopfleiste {
    position: sticky; top: 0; z-index: 1020;
    margin: -1.5rem -0.75rem 1.5rem !important; padding: 0.9rem 0.75rem;
    background: rgba(248, 249, 250, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  }
}

/* Tabelle: Datum bricht nicht um */
.table td:first-child .fw-bold { white-space: nowrap; }

/* Handy und Tablet: Erfassungsformular als Sheet von unten */
.sheet-scrim, .fab { display: none; }
@media (max-width: 991.98px) {
  .form-control-sm { font-size: 1rem; }                              /* verhindert das Zoomen beim Fokus auf dem iPhone */
  .sheet-spalte {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050; margin: 0 !important; padding: 0 0.4rem;
    max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
    transform: translateY(105%); visibility: hidden;
    transition: transform 0.35s var(--sheet-kurve), visibility 0s linear 0.35s;
  }
  .sheet-spalte.offen { transform: none; visibility: visible; transition: transform 0.35s var(--sheet-kurve); }
  .sheet-spalte .card { border-radius: 20px 20px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
  .sheet-scrim {
    display: block; position: fixed; inset: 0; z-index: 1040; background: rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
  }
  body.sheet-offen .sheet-scrim { opacity: 1; pointer-events: auto; }
  body.sheet-offen { overflow: hidden; }
  .fab {
    display: inline-flex; align-items: center; gap: 0.4rem; position: fixed; z-index: 1030;
    right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom));
    border-radius: 999px; padding: 0.75rem 1.2rem; font-weight: 650; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  }
  body.sheet-offen .fab { display: none; }
  main, .container { padding-bottom: 5rem; }
}

/* Barrierefreiheit: Systemeinstellungen respektieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .btn:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .kopfleiste { background: #f8f9fa !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sheet-scrim { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, 0.55); }
}
@media (prefers-contrast: more) {
  .kopfleiste { border-bottom-color: #000; }
  .card { border-color: #000; }
}