/**
 * _tokens.css — SEMPERconnect Module-Design-Tokens v1.0
 * Upload: /web/shop/SEMPERconnect/modules/_tokens.css
 *
 * Wird NACH core/shell.css geladen. Aufgabe:
 *  1. Modul-spezifische Aliase (`--rp-*`, `--cal-*`, `--tt-*`) auf die
 *     globalen Tokens aus shell.css mappen, damit die Module schmerzfrei
 *     auf das Design-System migrieren können.
 *  2. Mobile-/Touch-/Safe-Area-Tokens definieren, die in shell.css
 *     bisher fehlen (für Capacitor-/Android-App).
 *  3. Status-Farben (success/warn/info) ergänzen.
 *  4. Bottom-Sheet, FAB und Gesten-Timings.
 */

:root{
  /* ── Status-Farben (für Badges, Banner, Indikatoren) ── */
  --success:#16a34a;
  --success-bg:rgba(22,163,74,.10);
  --warning:#f59e0b;
  --warning-bg:rgba(245,158,11,.12);
  --info:#0ea5e9;
  --info-bg:rgba(14,165,233,.10);
  --error:#ef4444;
  --error-bg:rgba(239,68,68,.10);

  /* Status-Farben für Text (WCAG-AA-konform auf weißem Hintergrund) */
  --success-text:#15803d;
  --warning-text:#b45309;
  --error-text:#b91c1c;
  --info-text:#0369a1;

  /* ── Touch-/Mobile-Tokens ── */
  --touch-target:44px;            /* Minimum tap target (Android/iOS) */
  --touch-spacing:8px;            /* Min Abstand zwischen Tap-Targets */
  --tap-feedback:0 0 0 2px rgba(27,117,153,.18);

  /* ── Safe-Area (iOS-Notch + Android-Gesture-Bar) ── */
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --safe-left:env(safe-area-inset-left, 0px);
  --safe-right:env(safe-area-inset-right, 0px);

  /* ── Bottom-Sheet/Drawer ── */
  --sheet-radius:18px;
  --sheet-handle-w:40px;
  --sheet-handle-h:4px;
  --sheet-handle-color:rgba(0,0,0,.18);
  --sheet-overlay:rgba(0,0,0,.42);
  --sheet-z:11000;

  /* ── FAB ── */
  --fab-size:56px;
  --fab-size-sm:48px;
  --fab-bottom:max(16px, var(--safe-bottom));
  --fab-shadow:0 6px 18px rgba(27,117,153,.28),0 2px 6px rgba(0,0,0,.12);

  /* ── Skeleton/Loading ── */
  --skeleton-bg:linear-gradient(90deg,var(--surface) 0%,var(--hover) 50%,var(--surface) 100%);
  --skeleton-dur:1.4s;

  /* ── Gesture-Timings ── */
  --gest-tap:.08s;
  --gest-press:.18s;
  --gest-spring:cubic-bezier(.34,1.56,.64,1);

  /* ── Breakpoint-Doku (für JS-Lookup via getComputedStyle) ── */
  --bp-sm:480px;
  --bp-md:768px;
  --bp-lg:1024px;

  /* ── Reports-Modul-Aliase → globale Tokens ── */
  --rp-bg:var(--bg);
  --rp-surface:var(--white);
  --rp-surface-2:var(--surface);
  --rp-border:var(--border);
  --rp-text:var(--text);
  --rp-muted:var(--muted);
  --rp-primary:var(--blue);
  --rp-primary-light:rgba(27,117,153,.08);
  --rp-success:var(--success);
  --rp-warning:var(--warning);
  --rp-danger:var(--danger);
  --rp-info:var(--info);
  --rp-hover:var(--hover);

  /* ── Calendar-Modul-Aliase → globale Tokens ── */
  --cal-bg:var(--bg);
  --cal-surface:var(--white);
  --cal-surface-2:var(--surface);
  --cal-border:var(--border);
  --cal-border-color:var(--border);    /* Alias — viele Selektoren nutzen die alte Schreibweise */
  --cal-text:var(--text);
  --cal-muted:var(--muted);
  --cal-primary:var(--blue);
  --cal-primary-light:rgba(27,117,153,.08);
  --cal-now-line-color:var(--danger);
  --cal-hover:var(--hover);
  --cal-today-bg:rgba(27,117,153,.06);
  --cal-collision:var(--danger);

  /* ── Timetrack-/Logbook-Aliase ── */
  --tt-bg:var(--bg);
  --tt-surface:var(--white);
  --tt-border:var(--border);
  --tt-text:var(--text);
  --tt-muted:var(--muted);
  --tt-primary:var(--blue);
}

/* ── Theme-Overrides für Status-Farben (Dark-Modus angemessen heller) ── */
[data-theme="dark"]{
  --success:#4ade80;
  --success-bg:rgba(74,222,128,.12);
  --warning:#fbbf24;
  --warning-bg:rgba(251,191,36,.12);
  --info:#38bdf8;
  --info-bg:rgba(56,189,248,.12);
  --error:#f87171;
  --error-bg:rgba(248,113,113,.12);
  --success-text:#4ade80;
  --warning-text:#fbbf24;
  --error-text:#f87171;
  --info-text:#38bdf8;
  --sheet-handle-color:rgba(255,255,255,.22);
  --sheet-overlay:rgba(0,0,0,.62);
}
[data-theme="pink"]{
  --info:#9333ea;
  --info-bg:rgba(147,51,234,.10);
}
[data-theme="gray"]{
  --info:#475569;
  --info-bg:rgba(71,85,105,.10);
}

/* ── Globale Mobile-Helfer ── */

/* Verhindert iOS-Auto-Zoom bei Input-Focus (Schriftgröße ≥16px) */
@media (max-width:768px){
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  textarea,
  select{
    font-size:max(16px, 1em);
  }
}

/* Touch-Target-Mindestgröße auf Coarse-Pointer-Geräten (Sprint I §5) */
@media (pointer:coarse){
  .btn,
  .btn-sm,
  button:not([class*="ghost"]):not([class*="link"]){
    min-height:var(--touch-target);
  }
  /* Icon-only-Buttons quadratisch — breit gefasste Selektoren */
  button.icon-only,
  .btn-icon-only,
  .icon-btn,
  button[class*="-close"],
  button[class*="-icon"]{
    min-width:var(--touch-target);
    min-height:var(--touch-target);
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  /* Mini-Calendar-Days hochziehen */
  .cal-mini-day{
    width:36px;
    height:36px;
    font-size:12px;
  }
  /* Checkboxen/Radios mit erweiterter Tap-Zone (effektiv 44px durch margin) */
  input[type="checkbox"],
  input[type="radio"]{
    width:22px;height:22px;
    margin:11px;
  }
  /* List-Item-Rows komfortable Höhe */
  .tn-task-row,.ct-row,.lb-row,.inv-row{min-height:56px;}
}

/* Aktiv-Feedback für Touch (statt Hover) */
@media (hover:none){
  .btn:active,
  button:active{
    filter:brightness(.92);
    transform:scale(.97);
  }
}

/* ── Skeleton-Pulse ── */
@keyframes sk-pulse{
  0%{background-position:-200% 0;}
  100%{background-position:200% 0;}
}
.skeleton,
.sk-line{
  background:var(--skeleton-bg);
  background-size:200% 100%;
  animation:sk-pulse var(--skeleton-dur) ease-in-out infinite;
  border-radius:6px;
  pointer-events:none;
}
.sk-line{height:14px;}
.sk-line.lg{height:20px;}
.sk-line.xl{height:28px;}
.sk-line.short{width:60%;}
.sk-line.tiny{width:30%;}
.sk-line + .sk-line{margin-top:8px;}

/* ── FAB (Floating Action Button) ── */
.fab{
  position:fixed;
  right:max(16px, var(--safe-right));
  bottom:var(--fab-bottom);
  width:var(--fab-size);
  height:var(--fab-size);
  border-radius:50%;
  border:none;
  background:linear-gradient(135deg,var(--blue),var(--dark));
  color:#fff;
  font-size:22px;
  cursor:pointer;
  box-shadow:var(--fab-shadow);
  display:flex;align-items:center;justify-content:center;
  z-index:900;
  transition:transform .18s var(--gest-spring), box-shadow .18s ease;
}
.fab:hover{transform:scale(1.05);}
.fab:active{transform:scale(.94);}
.fab.fab-sm{width:var(--fab-size-sm);height:var(--fab-size-sm);font-size:18px;}
@media (max-width:768px){
  .fab{display:flex;}
}

/* ── Bottom-Sheet (für Mobile-Modal-Pattern) ── */
.sheet-overlay{
  position:fixed;inset:0;
  background:var(--sheet-overlay);
  z-index:var(--sheet-z);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}
.sheet-overlay.show{opacity:1;pointer-events:auto;}
.sheet{
  width:100%;
  max-width:560px;
  background:var(--white);
  color:var(--text);
  border-radius:var(--sheet-radius) var(--sheet-radius) 0 0;
  padding:8px 16px max(16px, var(--safe-bottom));
  max-height:90vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  transform:translateY(100%);
  transition:transform .26s var(--gest-spring);
  box-shadow:0 -8px 32px rgba(0,0,0,.18);
}
.sheet-overlay.show .sheet{transform:translateY(0);}
.sheet-handle{
  width:var(--sheet-handle-w);
  height:var(--sheet-handle-h);
  background:var(--sheet-handle-color);
  border-radius:999px;
  margin:6px auto 12px;
}
@media (min-width:769px){
  /* Auf Desktop: Sheet als zentriertes Modal */
  .sheet-overlay{align-items:center;}
  .sheet{
    border-radius:var(--sheet-radius);
    max-width:520px;
    transform:translateY(20px) scale(.96);
    padding:16px 20px;
  }
  .sheet-overlay.show .sheet{transform:translateY(0) scale(1);}
}

/* ── Online/Offline-Indikator (global) ── */
.net-banner{
  position:fixed;
  top:max(8px, var(--safe-top));
  left:50%;
  /* -300% statt -120% damit auch bei "kompakten" Bannern (16px hoch) nichts
     unten rauspeekt. Ohne Padding/Content kann der Banner sehr klein sein. */
  transform:translateX(-50%) translateY(-300%);
  background:var(--warning);
  color:#1a1a1a;
  padding:8px 16px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:600;
  z-index:1500;
  transition:transform .25s var(--gest-spring);
  box-shadow:var(--sh-md);
  display:flex;align-items:center;gap:8px;
  pointer-events:none;
  visibility:hidden;
}
.net-banner.show{
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
  visibility:visible;
}
.net-banner.online{background:var(--success);color:#fff;}
.net-banner.offline{background:var(--warning);}
.net-banner i{font-size:13px;}

/* ── Sync-Badge (zeigt Anzahl wartender Offline-Writes) ──
   Module können <span id="sc-sync-badge"></span> einhängen wo passend. */
#sc-sync-badge:not(:empty){
  display:inline-flex;
  align-items:center;justify-content:center;
  min-width:18px;height:18px;
  padding:0 6px;
  border-radius:9px;
  background:var(--warning, #f59e0b);
  color:#fff;
  font-size:10.5px;font-weight:700;
  vertical-align:middle;
  margin-left:6px;
  cursor:default;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}

/* ──────────────────────────────────────────────────────────────────────────
   ZENTRALE PATTERN (Sprint C — Design-Harmonisierung)

   Diese Klassen entsprechen dem Look-and-feel von Dashboard/Timetrack/
   Logbook. Module können sie direkt verwenden statt eigene Empty-/Loading-/
   Card-Stile zu definieren. Bestehende Module-spezifische Klassen
   (.cal-empty, .rp-empty, .dash-empty) bleiben kompatibel.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Card (Surface-Kachel mit dezenter Border, kein Schatten) ──
   Dashboard-Pattern: Border + Surface, abgerundet, passend in Themes. */
.sc-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px 16px;
  transition:border-color .14s ease, box-shadow .14s ease;
}
.sc-card:hover{
  border-color:rgba(27,117,153,.30);
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.sc-card-hdr{
  display:flex;align-items:center;gap:10px;
  margin-bottom:10px;
}
.sc-card-icon{
  width:32px;height:32px;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(27,117,153,.10);
  color:var(--blue);
  flex-shrink:0;
}
.sc-card-title{
  font-size:13px;font-weight:600;
  color:var(--text);
  margin:0;
}
.sc-card-sub{
  font-size:11.5px;
  color:var(--muted);
  margin-top:1px;
}

/* ── Empty-State (einheitliches Pattern für leere Listen/Views) ── */
.sc-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 20px;
  text-align:center;
  color:var(--muted);
}
.sc-empty-icon{
  font-size:36px;
  opacity:.3;
  margin-bottom:12px;
}
.sc-empty-title{
  font-size:14px;font-weight:600;
  color:var(--text);
  margin-bottom:4px;
}
.sc-empty-sub{
  font-size:12.5px;
  max-width:320px;
  line-height:1.45;
}

/* ── Loading-State (Spinner + Label) ── */
.sc-loading{
  display:flex;align-items:center;justify-content:center;
  padding:40px 20px;
  color:var(--muted);
  gap:8px;
  font-size:13px;
}
.sc-loading i{
  font-size:14px;
  color:var(--blue);
}

/* ── Stats-Tile (Mini-KPI für Toolbars/Sidebars) ── */
.sc-stat-tile{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:6px;
  padding:4px 8px;
  font-size:11px;
  white-space:nowrap;
}
.sc-stat-tile strong{
  font-weight:700;color:var(--text);
}
.sc-stat-tile i{
  color:var(--muted);font-size:11px;
}

/* ── Toolbar-Section-Header (z.B. Sidebar-Group-Title) ── */
.sc-section-hdr{
  display:flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);
  padding:6px 0 4px;
  margin-bottom:4px;
}

/* ── Sicht-Helfer ── */
.no-touch-callout{-webkit-touch-callout:none;}
.no-select{user-select:none;-webkit-user-select:none;}
.touch-action-pan-y{touch-action:pan-y;}
.touch-action-none{touch-action:none;}

/* ──────────────────────────────────────────────────────────────────────────
   SAFE-AREA HELPER-KLASSEN (Sprint F)

   iOS-Notch + Android-Gesten-Bar. Module können diese Klassen direkt
   anwenden — auf Desktop wird nichts gemacht (env() liefert 0).
   ────────────────────────────────────────────────────────────────────────── */
.sc-safe-top    { padding-top: max(var(--sp-3, 12px), var(--safe-top)); }
.sc-safe-bottom { padding-bottom: max(var(--sp-3, 12px), var(--safe-bottom)); }
.sc-safe-left   { padding-left:  max(var(--sp-3, 12px), var(--safe-left)); }
.sc-safe-right  { padding-right: max(var(--sp-3, 12px), var(--safe-right)); }
.sc-safe-x      {
  padding-left:  max(var(--sp-3, 12px), var(--safe-left));
  padding-right: max(var(--sp-3, 12px), var(--safe-right));
}
.sc-safe-y      {
  padding-top:    max(var(--sp-3, 12px), var(--safe-top));
  padding-bottom: max(var(--sp-3, 12px), var(--safe-bottom));
}

/* Sticky Bottom-Bar (Action-Bar) — typisches Mobile-Pattern */
.sc-bottom-bar{
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 8px;
  padding: 10px max(12px, var(--safe-right)) max(10px, var(--safe-bottom)) max(12px, var(--safe-left));
  background: var(--white);
  border-top: 1px solid var(--border);
  z-index: 50;
  box-shadow: 0 -2px 8px rgba(0,0,0,.04);
}

/* Floating Action Button — sicher unter Notch/Gesten-Bar positioniert */
.sc-fab-safe{
  position: fixed;
  right: max(16px, var(--safe-right));
  bottom: max(16px, var(--safe-bottom));
  z-index: 900;
}

/* ── Sticky Form-/Modal-Actions (Sprint J §8) ──
   Action-Bar bleibt sichtbar wenn iOS-/Android-Tastatur eingeblendet ist.
   Anwenden auf .form-actions, .sheet-actions, .modal-actions oder eigene Klasse. */
.sc-sticky-actions,
.form-actions,
.sheet-actions,
.modal-actions{
  position:sticky;
  bottom:0;
  background:var(--white);
  padding:12px 16px max(12px, var(--safe-bottom));
  border-top:1px solid var(--border);
  z-index:5;
}

/* Modal-/Sheet-Content scrollbar — Body bleibt scrollbar wenn Tastatur Content quetscht */
.sheet,
.rp-modal,
.cal-editor-modal{
  display:flex;
  flex-direction:column;
}
.sheet-body,
.rp-modal-body,
.cal-editor-body{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* ── Focus-Indikator (Sprint I §10) ──
   Sichtbar nur bei Keyboard-Fokus (focus-visible), nicht bei Maus-Click.
   Globaler Override für alle Module — überall wo bisher outline:none gesetzt wurde,
   wird hier ein A11y-konformer Ring rückgesetzt. */
*:focus{outline:none;}
*:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
  border-radius:4px;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
}

/* ════════════════════════════════════════════════════════════════════════
   NATIVE-FEEL POLISH (Sprint L)
   iOS-Bounce-Scroll, Material-Ripple, Page-Transitions, Reduced-Motion-Respekt.
   ════════════════════════════════════════════════════════════════════════ */

/* iOS-Bounce + verhindert "Scroll-Chaining" (Pull-to-Refresh überlagert
   Sub-Scrollables). Greift auf typische Scroll-Container in der App. */
.uc-body,
.cal-body,
.rp-content,
.tt-day-list,
#lb-month-grid,
.scroll-container,
.sc-scroll,
.modal-body,
.sheet-body{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* Material-Ripple (CSS-only) — ein dezenter weißer Lichtkreis vom Klick aus.
   Auf Buttons mit `.btn` oder `.sc-bn-item` (Bottom-Nav). Kein JS nötig. */
.btn,
.sc-bn-item,
.mnav-item,
.uc-vbtn,
.uc-today-btn,
.uc-reload-btn,
.uc-nav-btn{
  position:relative;
  overflow:hidden;
}
.btn::after,
.sc-bn-item::after,
.mnav-item::after,
.uc-vbtn::after,
.uc-today-btn::after,
.uc-reload-btn::after,
.uc-nav-btn::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, rgba(255,255,255,.40) 0%, transparent 60%);
  opacity:0;
  transform:scale(0);
  transition:transform .45s ease-out, opacity .55s ease-out;
  pointer-events:none;
}
.btn:active::after,
.sc-bn-item:active::after,
.mnav-item:active::after,
.uc-vbtn:active::after,
.uc-today-btn:active::after,
.uc-reload-btn:active::after,
.uc-nav-btn:active::after{
  opacity:1;
  transform:scale(2.4);
  transition:0s;
}

/* Soft Page-Transitions beim Section-Switch (App-Views).
   - Greift auf Standard-Klassen die Module nutzen
   - Wird via prefers-reduced-motion respektiert (siehe ganz unten) */
@keyframes sc-page-fade{
  from{opacity:0;transform:translateY(4px);}
  to  {opacity:1;transform:translateY(0);}
}
.admin-view:not([style*="display: none"]),
.app-section.active,
.screen.active{
  animation:sc-page-fade .22s ease-out;
}

/* ════════════════════════════════════════════════════════════════════════
   GLOBAL MOBILE FOUNDATION (Sprint K)
   Pflicht-Polish für alle Module — wird von vielen Patterns verwendet,
   ohne Module einzeln umzubauen. Greift via @media (max-width:640px).
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width:640px){
  /* Tabellen → Card-Layout: Module die `.sc-mtable-cards` an die <table>
     hängen, bekommen automatisch Card-Stack auf Mobile. Header wird
     ausgeblendet, jede td zeigt sein Label per data-label. */
  .sc-mtable-cards,
  .sc-mtable-cards thead,
  .sc-mtable-cards tbody,
  .sc-mtable-cards tr,
  .sc-mtable-cards td{
    display:block;
    width:auto;
  }
  .sc-mtable-cards thead{display:none;}
  .sc-mtable-cards tr{
    border:1px solid var(--border);
    border-radius:10px;
    padding:12px;
    margin-bottom:8px;
    background:var(--white);
  }
  .sc-mtable-cards td{
    padding:4px 0;
    border:none;
  }
  .sc-mtable-cards td[data-label]::before{
    content:attr(data-label) ":\00a0";
    font-weight:600;
    color:var(--muted);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.04em;
    display:block;
    margin-bottom:2px;
  }

  /* Card-Action-Bar: Buttons die nebeneinander zu eng sind, vertikal stapeln */
  .sc-stack-mobile{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .sc-stack-mobile > *{width:100%;}

  /* Compact-Toolbar: Headers/Toolbars nehmen volle Breite, wrap statt overflow */
  .sc-toolbar-mobile,
  .toolbar,
  .sd-toolbar{
    flex-wrap:wrap !important;
    gap:6px !important;
  }

  /* Form-Fields: durchgängig 100% Breite + komfortable Padding */
  .form-row input,
  .form-row select,
  .form-row textarea,
  .tn-field input,
  .tn-field select{
    width:100%;
    box-sizing:border-box;
  }

  /* Modals/Sheets: volle Breite, weniger Padding */
  .modal,.rp-modal,.cal-editor-modal{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    border-radius:12px 12px 0 0 !important;
  }

  /* Bilder/Media: nie über die Viewport-Breite */
  img,video,iframe{max-width:100%;height:auto;}

  /* Übergroße inline-styles auf Container abfangen */
  [style*="min-width"]{min-width:0 !important;}
}

/* ════════════════════════════════════════════════════════════════════════
   TOAST / SNACKBAR — Mobile-Positionierung (Sprint K §7)
   Toasts auf Mobile nach unten verschieben — verhindert iOS-Notch-Verdeckung
   und hebt sich über die Bottom-Nav.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  .toast,.sd-toast,.core-toast,.rp-toast,.cal-toast{
    top:auto !important;
    bottom:max(16px, calc(var(--safe-bottom) + 16px)) !important;
    left:12px !important;
    right:12px !important;
    transform:none !important;
    width:auto !important;
    max-width:none !important;
    border-radius:12px !important;
  }
  /* Wenn Mobile-Bottom-Nav existiert, oberhalb davon */
  body:has(.mobile-nav) .toast,
  body:has(.mobile-nav) .sd-toast,
  body:has(.mobile-nav) .core-toast,
  body:has(.mobile-nav) .rp-toast,
  body:has(.mobile-nav) .cal-toast{
    bottom:calc(76px + var(--safe-bottom) + 12px) !important;
  }
}

/* ── Reduced-Motion-Respekt ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .skeleton,.sk-line{animation:none !important;}
}