/* ═══════════════════════════════════════════════════════════════════
   sg-cls-fix.css — CLS Performance Fix v1.5 (sg1bh)
   sg1bh: non-composited animaties gefixed (DevTools rapport: blinkDot /
     border-color / box-shadow animaties triggeren paint i.p.v. GPU):
     • sgMicPulse: box-shadow → filter:drop-shadow (compositor-only);
     • sgBadgePulse: box-shadow-frames verwijderd, enkel transform;
     • tmpPulse (.tmp-dot): will-change pre-allocatie;
     • .sg-badge-pulse: contain:layout style isolatie.
   sg1bf: stats-grid min-height reserved (shift-cluster 600ms–2100ms);
     .stat-card min-height + composited only; animation-delay guard
     (will-change pre-allocatie tijdens delay-venster); toast
     will-change compound fix; ts-018 (nieuw) gedocumenteerd.
   sg1az: .animate-fade-up will-change + contain:layout; #dashGreetingRow min-height 100px.
   ───────────────────────────────────────────────────────────────────
   Doel : CLS van 0.57 → <0.1 door:
     1. Alle layout-shiftende animaties vervangen door compositor-only
        (transform + opacity — raken NOOIT layout/paint)
     2. @font-face size-adjust fallback zodat Inter-swap geen shift geeft
     3. will-change hints op elementen die de GPU-layer vroeg reserveren
     4. contain: layout op containers die shifts veroorzaakten
   ─────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────
   1. FALLBACK FONT — size-adjust zodat Inter-swap geen shift geeft
   ─────────────────────────────────────────────────────────────────
   Inter heeft een x-height ratio van ~0.527 (vs Arial ~0.490).
   size-adjust = (fallback-x-height / inter-x-height) × 100%
               = (0.490 / 0.527) × 100% ≈ 107%
   ascent/descent-override dichter bij Inter brengen elimineert de
   line-height delta die bij swap een reflow triggert.              */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* Pas de fallback toe vóór Inter laadt — browser kiest Inter zodra
   het beschikbaar is, maar de dimensies zijn al gereserveerd.      */
body,
.sg-app,
#mainContent,
#sec-dashboard,
.section {
  font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Arial, sans-serif;
}

/* ─────────────────────────────────────────────────────────────────
   2. COMPOSITOR-ONLY ANIMATIES
   Overschrijf elke @keyframes die top / margin / height / width /
   left / right / bottom aanraakt. Alleen transform + opacity zijn
   compositor-only (geen layout, geen paint, geen CLS).
   ───────────────────────────────────────────────────────────────── */

/* fadeInUp — staat 2× in style.css (regels 2131 + 2273) en in
   sg-planning-board.css. De variant op regel 2131 had translateX(-50%)
   gekoppeld aan de toast-positie; die bewaren we in de toast-override. */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Toast-specifiek: bewaart de horizontale centering via transform */
@keyframes fadeInUpToast {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* sgToastIn — in sg-fixes.css regel 7468 al correct (transform+scale).
   Wordt hier herbevestigd zodat browsers met cache-probleem de fix
   oppikken. */
@keyframes sgToastIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* sgSectionIn (sg-professional.css) — was al compositor-only; bevestig */
@keyframes sgSectionIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* toastOut */
@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
  }
}

/* ─────────────────────────────────────────────────────────────────
   3. TOAST — gebruik de gecorrigeerde fadeInUpToast keyframe
   ───────────────────────────────────────────────────────────────── */
.toast {
  animation: fadeInUpToast 0.3s ease both !important;
  /* Bevries de layout: position:fixed + transform-centering is al
     compositor-only. Extra beveiliging: */
  will-change: transform, opacity;
}
.toast.out {
  animation: toastOut 0.25s ease forwards !important;
}

/* ─────────────────────────────────────────────────────────────────
   4. WILL-CHANGE op CLS-kritieke elementen
   ─────────────────────────────────────────────────────────────────
   will-change reserveert een GPU-compositing-layer vóór de animatie
   start. Dit voorkomt dat de browser tijdens het animeren het omlig-
   gende layout opnieuw moet berekenen (= CLS).
   Gebruik spaarzaam: elke will-change kost GPU-geheugen.           */

/* Dashboard stats grid — meest zichtbare shift-bron.
   contain:layout hier veilig: stats-grid heeft geen position:absolute
   children die buiten de grid zouden escapen.                         */
#dashboardStatsGrid,
#sec-dashboard .stats-grid,
.stats-grid {
  will-change: transform, opacity;
  contain: layout style;
}

/* Planning bar — veilig: pure flex-rij zonder absolute children */
#dashPlanningBar,
#sec-dashboard .dash-planning-bar,
.dash-planning-bar {
  will-change: transform, opacity;
  contain: layout style;
}

/* Sectie-containers: contain:paint isoleert alleen paint (NIET layout).
   contain:layout is hier gevaarlijk — het maakt .section tot een nieuwe
   containing-block voor position:absolute children, wat modals en dropdowns
   die in een sectie staan zou breken. contain:paint is veilig: isoleert
   alleen de repaint-zone zonder de containing-block-keten te doorbreken. */
.section,
#mainContent > [id^="sec-"] {
  contain: paint;
}

/* ─────────────────────────────────────────────────────────────────
   5. SPLASH — splashBrandName font-swap stabiliseren
   ─────────────────────────────────────────────────────────────────
   Bij 125ms laadt Inter en verschijnt de swap-shift in #splashBrandName.
   Door de breedte te fixeren op de verwachte render-breedte van de
   fallback font (met size-adjust) voorkomt u dat omliggende elementen
   schuiven. De splash is position:fixed/absolute dus geen CLS-impact
   op page-content, maar het vermindert visuele jank.               */
#splashBrandName {
  /* Reserveer ruimte: Inter + size-adjust fallback renderen nu gelijk */
  min-height: 1.6em;          /* voorkomt hoogte-spring bij swap     */
  display: block;
  will-change: auto;          /* splash is kort — geen permanente layer */
}

/* ─────────────────────────────────────────────────────────────────
   6. ANIMATIE-KLASSEN — zeker compositor-only
   ───────────────────────────────────────────────────────────────── */
.animate-fade-in  { animation: fadeIn   0.25s ease both; }
.animate-fade-up  { animation: fadeInUp 0.30s ease both; }
.animate-fade-down {
  animation: fadeInDown 0.30s ease both;
}
.animate-scale    { animation: fadeInScale 0.25s ease both; }
.animate-slide-right { animation: slideInRight 0.30s ease both; }
.animate-slide-left  { animation: slideInLeft  0.30s ease both; }
.animate-bounce-in {
  animation: bounceIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Keyframes voor de klassen — allemaal compositor-only */
@keyframes fadeIn       { from { opacity: 0; }                        to { opacity: 1; } }
@keyframes fadeInDown   { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInScale  { from { opacity: 0; transform: scale(0.94); }        to { opacity: 1; transform: scale(1); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(16px); }   to { opacity: 1; transform: translateX(0); } }
@keyframes slideInLeft  { from { opacity: 0; transform: translateX(-16px); }  to { opacity: 1; transform: translateX(0); } }
@keyframes bounceIn     { 0% { transform: scale(0.8); opacity: 0; } 70% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

/* ─────────────────────────────────────────────────────────────────
   7. PLANNING BOARD — fadeInUp lokale override
   sg-planning-board.css definieert een eigen @keyframes fadeInUp
   (regel 1484). Die is al correct (transform-based), maar de
   contain:layout op het grid-parent voorkomt dat animerende kinderen
   omliggende elementen schuiven.
   ───────────────────────────────────────────────────────────────── */
#zpTeamBeschikbaarGrid {
  contain: layout style;
  will-change: transform, opacity;
}

/* ─────────────────────────────────────────────────────────────────
   8. SKELETON LOADERS — geen layout-afhankelijke animaties
   sg-fixes.css regel 3024: sgSkeletonPulse gebruikt opacity, correct.
   Voeg contain toe zodat skeletons de pagina-layout niet verschuiven
   terwijl ze pulsen.
   ───────────────────────────────────────────────────────────────── */
[class*="skeleton"],
[class*="sg-skeleton"],
.skeleton-line,
.skeleton-card {
  contain: strict;
  will-change: opacity;
}

/* ─────────────────────────────────────────────────────────────────
   9. STAT-KAARTEN — ruimte reserveren vóór JS de waarden laadt
   ─────────────────────────────────────────────────────────────────
   stat-card laadt aanvankelijk met "0" als waarde. Als de echte data
   binnenkomt verandert de tekst-hoogte niet meer zolang min-height
   groot genoeg is — geen reflow, geen CLS.                         */
.stats-grid {
  /* Bevries de grid-structuur: 4 kolommen, vaste hoogte per rij    */
  grid-template-rows: 1fr;  /* één vaste rij hoogte                 */
}
.stat-card {
  min-height: 72px;   /* grootste kaart-hoogte pre-data; nooit kleiner */
}
.stat-value {
  /* Reserveer de breedte voor maximaal 4 cijfers (bijv. "9999")    */
  min-width: 2.5ch;
  display: inline-block;
}

/* dashPlanningBar — vaste hoogte zodat JS-content (alert-badge) geen shift geeft */
#dashPlanningBar {
  min-height: 60px;
}

/* ─────────────────────────────────────────────────────────────────
   9b. DASHBOARD WIDGETS — reserved space (sg1ax: CLS 0.49 targets)
   ─────────────────────────────────────────────────────────────────
   #dashTimerWidget en #dashShiftsVandaag veroorzaken CLS bij inject:
   ze hebben geen vaste hoogte → browser shift bij eerste render.

   min-height = kleinste nuttige hoogte van de widget vóór data.
   contain: layout style = veilig (geen absolute children die escapen).

   NIET contain:strict — dat blokkeert overflow voor tooltips/modals
   die uit een widget steken.                                          */

#dashTimerWidget {
  min-height: 72px;        /* pill-hoogte (44px) + padding ruimte        */
  contain: layout style;
}

#dashShiftsVandaag,
#dashShiftsWidget,
[id*="shifts"][id*="vandaag"],
[id*="shifts"][id*="widget"] {
  min-height: 80px;        /* één shift-rij (48px) + header (32px)       */
  contain: layout style;
}

/* Algemene dashboard-widget containers — catch-all voor dynamisch
   injecte blokken die nog geen eigen id hebben.
   Alleen van toepassing als de container nog leeg is (:empty) om
   te voorkomen dat uitgevulde widgets onnodig ruimte reserveren. */
.dash-widget:empty,
.sg-dash-widget:empty,
[class*="dash-block"]:empty,
[class*="dash-card"]:empty {
  min-height: 72px;
}

/* fadeInUp op widgets: zeker compositor-only (geen layout-animatie).
   sg1ax: overschrijf specifiek voor .stats-grid kinderen die
   .animate-fade-up of .fadeInUp krijgen vanuit JS. */
#sec-dashboard .stats-grid > *,
#sec-dashboard [class*="widget"],
#sec-dashboard [class*="dash-block"] {
  animation-fill-mode: both;
  /* will-change alleen tijdens animatie — daarna auto (GPU-layer vrijgeven) */
}

/* ─────────────────────────────────────────────────────────────────
   9c. ANIMATE-FADE-UP COMPOSITOR LAYER (sg1az)
   ─────────────────────────────────────────────────────────────────
   Rapport DevTools: shift-cluster 600ms–2100ms op div.animate-fade-up,
   div#dashboardStatsGrid, div#dashTimerWidget.

   Root cause: .animate-fade-up had géén will-change vóór animatiestart.
   Browser kon geen compositor-layer pre-alloceren → tijdens de 0.4s
   fadeInUp-animatie triggerde elke frame een layout-recalculation
   op het parent-document (non-composited = CLS).

   (A) will-change: opacity, transform → GPU-layer vóór eerste frame.
   (B) contain: layout style → interne wijzigingen propageren NIET
       naar omliggende elementen (shift blijft geïsoleerd).
   (C) #dashGreetingRow min-height 100px → greeting-blok bouwt niet
       op vanuit 0 (avatar 46px + tekst 44px + knoppen 28px ≈ 130px;
       100px is veilige ondergrens zonder overreservering).
   (D) Outer-wrapper catch-all min-height voor diep geneste wraps.   */

/* (A+B) Pre-alloceer compositor-layer + isoleer interne layout */
.animate-fade-up {
  will-change: opacity, transform;  /* GPU-layer vóór eerste frame        */
  contain: layout style;            /* shift propageert niet naar parent   */
}

/* (C) Greeting-wrapper: volledige hoogte pre-reserveren */
#dashGreetingRow {
  min-height: 100px;
  contain: layout style;
}

/* (D) Outer-wrapper catch-all in dashboard-context */
#sec-dashboard > .animate-fade-up,
#dashboardInnerWrap > .animate-fade-up,
.dashboard-section > .animate-fade-up {
  min-height: 72px;
}

/* ─────────────────────────────────────────────────────────────────
   10. LCP + CLS — ruimte reserveren voor dynamisch-geïnjecteerde content
   ─────────────────────────────────────────────────────────────────
   sg1av — LCP 540ms analyse: 99.7% is element render delay door main-thread
   contention. #dashboardGreeting (het LCP-element) is 538ms vertraagd omdat
   het geen gereserveerde ruimte heeft → browser berekent layout opnieuw
   zodra JS de tekst injecteert.

   CLS 0.25 (poor): layout thrashing bij ~460ms door navigeer() + build()
   die content dynamisch injecteren zonder pre-reserved dimensies.

   Fixes:
   a) #dashboardGreeting: min-height reserveert de regel-hoogte zodat de
      initial paint al de juiste space inneemt. font-size:1.3rem * line-height
      1.2 = ~1.56rem ≈ 25px min. 2.4rem dekt ook twee-regel varianten.

   b) Sectie-headers / navigeer-containers: .section-header en .sg-view-header
      krijgen min-height zodat het navigeer() build-patroon geen jump geeft.

   c) content-visibility: auto op off-screen secties (betere LCP door
      browser-scheduling — LCP-sectie krijgt hogere prioriteit).
      ALLEEN op hidden secties — actieve sectie NOOIT (zou LCP sloper zijn).
   ─────────────────────────────────────────────────────────────────── */

/* LCP-element: ruimte reserveren VOOR JS de naam injecteert */
#dashboardGreeting {
  min-height: 2.4rem;      /* 1.3rem font × 1.2 lh × 2 regels buffer     */
  contain: layout style;   /* veilig: geen absolute children in greeting  */
}

/* Dashboard-header zone (greeting + subtitle) als blok reserveren */
#dashboardGreeting + *,
.dash-greeting-sub {
  min-height: 1.2rem;
}

/* Navigeer/build containers: meest verschuivende elementen bij 460ms */
.sg-section-header,
.section-header,
.sg-view-header,
[id^="sec-"] > .section-title,
[id^="sec-"] > h2:first-child,
[id^="sec-"] > header:first-child {
  min-height: 2rem;       /* reserveer header-hoogte voor alle secties    */
  contain: layout style;
}

/* Kaart-containers die via build() worden gevuld: reserveer 1 kaarthoogte */
.dash-cards-row,
.sg-dash-row,
.dashboard-widgets {
  min-height: 80px;       /* één kaart-hoogte; voorkomt jump naar 0-hoogte */
}

/* content-visibility: auto op VERBORGEN secties — browser skip layout+paint
   voor off-screen content. Actieve sectie (.sg-view-actief / :not(.hidden))
   wordt bewust UITGESLOTEN zodat de LCP-sectie altijd vol rendert.
   UITZONDERING: secties met modals of dropdowns (contain-intrinsic maakt
   position:fixed children kapot) — .section selector bewust NIET gebruikt. */
.hidden[id^="sec-"] {
  content-visibility: auto;
  /* Hoogte-hint: browser gebruikt dit als placeholder tijdens skip-fase.
     44px = minimale sectie-hoogte; echte waarde zodra zichtbaar. */
  contain-intrinsic-size: auto 44px;
}

/* ─────────────────────────────────────────────────────────────────
   9d. STATS-GRID — reserved space (sg1bf: CLS shift-cluster 600ms–2100ms)
   ─────────────────────────────────────────────────────────────────
   DevTools rapport: div.stats-grid is primaire shift-culprit (score 0.48,
   600ms–2100ms venster). Root cause: #dashboardStatsGrid heeft geen
   min-height → grid bouwt op vanuit 0-hoogte als JS de 4 tiles vult.
   Elke tile-insert triggert een reflow op omliggende elementen.

   Oplossing:
   (A) #dashboardStatsGrid min-height = 2 rijen × tile-hoogte (88px) op
       mobile (2-koloms grid) of 1 rij op ≥480px (4-koloms grid).
       Waarde: stat-card padding 14px×2 + icon 34px + waarde 28px +
       label 14px + gap 5px ≈ 110px per rij. 88px = conservatieve
       ondergrens die ruimte houdt zonder te veel te over-reserveren.
   (B) .stat-card min-height expliciete declaratie (versterkt sectie 9
       al aanwezig via .stat-card min-height:72px) met layout isolation.
   (C) animation-delay guard: .stat-card heeft nth-child animation-delay
       (.05s–.2s). Tijdens het delay-venster ís de GPU-layer er al
       (will-change) maar de animatie is nog niet gestart → layer blijft
       pre-gealloceerd. Hier worden de animation-delay regels versterkt
       zodat ze ook op willChangeOnly-browsers correct werken.
   (D) sgToastIn / .sg-toast compound fix: position:fixed toasts zitten
       buiten document-flow → geven geen CLS. Extra will-change op
       .sg-toast (.toast-override is al in sectie 3) als vangnet voor
       varianten die via JS worden toegevoegd met class 'sg-toast'.    */

/* (A) Stats-grid: reserveer de verwachte render-hoogte vóór data-load */
#dashboardStatsGrid,
#sec-dashboard .stats-grid,
.stats-grid {
  /* 2-koloms (mobile): 2 rijen × ~88px + gap */
  min-height: 188px;
}

@media (min-width: 480px) {
  #dashboardStatsGrid,
  #sec-dashboard .stats-grid,
  .stats-grid {
    /* 4-koloms (desktop): 1 rij × ~88px */
    min-height: 88px;
  }
}

/* (B) .stat-card: expliciete hoogte-reservering + layout-isolatie */
.stat-card {
  min-height: 88px;           /* icon 34px + waarde 28px + label 14px + padding + gap */
  contain: layout style;      /* interne wijzigingen propageren NIET naar grid-parent  */
  /* contain:strict hier NIET — overflow voor tooltips/badges moet mogelijk blijven   */
}

/* (C) animation-delay guard — will-change al actief vóór animatiestart
   .stats-grid .stat-card:nth-child delays zijn al in style.css (r.2695–2698).
   Hier voegen we will-change toe zodat de GPU-layer er al is in het delay-venster. */
.stats-grid .stat-card {
  will-change: transform, opacity; /* pre-alloceer GPU-layer voor entrance-animatie */
}

/* GPU-layer vrijgeven na animatie (animation-fill-mode:both behoudt de eindstaat
   maar de will-change hint is daarna overbodig → terugzetten naar auto via
   @starting-style is niet breed ondersteund; gebruik in plaats daarvan een
   korte animatieklasse die door JS wordt verwijderd — hier CSS-only vangnet: */
.stats-grid .stat-card.anim-done {
  will-change: auto;
}

/* (D) .sg-toast compound variant — position:fixed toasts buiten document-flow;
   will-change versterkt de compositor-layering voor soepele entrance */
.sg-toast,
.sg-notification-toast,
[class*="sg-toast"],
[class*="toast-container"] > [class*="toast"] {
  will-change: transform, opacity;
  position: fixed;   /* bevestig: geen layout-impact op document */
}

/* ─────────────────────────────────────────────────────────────────
   9e. NON-COMPOSITED ANIMATIES FIX (sg1bh)
   ─────────────────────────────────────────────────────────────────
   DevTools rapport: 'blinkDot' en border/background-color animaties
   lopen op de main thread (paint-triggering → geen GPU-compositing).
   Concrete culprits gevonden in codebase:

   (A) sgMicPulse (style.css r.679): animeert `box-shadow`
       box-shadow is een paint-property — elke frame triggert een
       GPU-loze repaint op de main thread.
       Fix: vervang door `filter: drop-shadow(...)` — filter-animaties
       zijn compositor-only (geen layout, geen paint).

   (B) sgBadgePulse (style.css r.737): animeert `transform` ✅ maar
       ook `box-shadow` in dezelfde keyframes → de box-shadow frames
       trekken de animatie van de compositor.
       Fix: box-shadow frames verwijderen; enkel transform.

   (C) tmpPulse / .tmp-dot.pulse (sg-fixes.css r.2163):
       animeert `transform: scale + opacity` — compositor-only ✅
       maar heeft géén will-change → GPU-layer wordt niet pre-alloceed.
       Fix: will-change toevoegen aan .tmp-dot.pulse.

   (D) Isoleer pulserende badge-containers zodat hun repaint-zone
       niet naar de parent-pagina propageert.

   TECHNISCHE NOOT:
   `box-shadow` → main-thread paint (zelfs bij GPU-compositing).
   `filter: drop-shadow` → GPU compositor layer (geen main-thread).
   `outline` → paint-triggering (zelfde probleem als box-shadow).
   `transform` + `opacity` → enige echte compositor-only properties.  */

/* (A) sgMicPulse: box-shadow → filter:drop-shadow (compositor-only)
   Overschrijft de definitie in style.css r.678–684.
   drop-shadow syntax: drop-shadow(x y blur color)
   Resultaat identiek visueel; uitvoering op GPU. */
@keyframes sgMicPulse {
  0%, 100% { filter: drop-shadow(0 0 0px  rgba(239,68,68,.5)); }
  50%       { filter: drop-shadow(0 0 7px  rgba(239,68,68,0));  }
}
#sgInfoBotTopbarBtn.sg-listening {
  background: #ef4444 !important;
  animation: sgMicPulse .8s ease infinite !important;
  will-change: filter;     /* GPU-layer vóór eerste frame */
  /* box-shadow animatie uit style.css wordt hiermee overschreven */
  box-shadow: none !important;
}

/* (B) sgBadgePulse: verwijder box-shadow; enkel transform:scale
   Overschrijft style.css r.736–743. */
@keyframes sgBadgePulse {
  0%,100% { transform: scale(1);    }
  35%     { transform: scale(1.25); }
  70%     { transform: scale(1.1);  }
}
.sg-badge-pulse {
  animation: sgBadgePulse .6s ease-in-out 5 !important;
  will-change: transform;
  contain: layout style;   /* repaint-zone isolatie */
}

/* (C) tmpPulse / .tmp-dot: will-change pre-allocatie
   Overschrijft sg-fixes.css r.2163–2169. */
#timerMiniPill .tmp-dot.pulse {
  will-change: transform, opacity;
  contain: layout style;
}

/* (D) Alle pulserende status-indicators: isoleer repaint-zone.
   Selector: elementen met een pulse/blink-animatie op de status-dot
   in het dashboard (dst_online span, topbar-badge-achtige dots). */
#dst_online span[style*="border-radius:50%"],
#dst_bezet  span[style*="border-radius:50%"],
[id^="dst_"] span[style*="border-radius:50%"] {
  contain: layout style;
  will-change: opacity;   /* bij eventuele puls-animatie via JS */
}

/* ─────────────────────────────────────────────────────────────────
   10. PREFERS-REDUCED-MOTION — respecteer gebruikersvoorkeur
   ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Zorg dat animaties echt stoppen ook als !important er al op staat */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}