/* RealBazzi — Globale Mobile-Responsive Regeln
 * Ergänzt base.css + nav.css um eine konsistente Mobile-Baseline auf allen
 * Seiten. Targets die gemeinsamen Class-Namen die in den Pages verwendet
 * werden — kein pro-Page-Customizing nötig.
 *
 * Breakpoints:
 *   ≤1024  = Tablet Landscape
 *   ≤768   = Tablet Portrait / Große Phones
 *   ≤480   = Phones
 */

/* ── Gemeinsame Basics (alle Viewports) ── */
html, body { max-width: 100% !important; overflow-x: hidden !important; }
/* max-width: 100% verhindert horizontales Overflow. KEIN height:auto hier —
   das würde mit !important alle explizit-height-gesetzten Bilder schrotten
   (z.B. .fdd-pay-img, .pay-chip img auf Desktop). */
img, video, iframe { max-width: 100% !important; }
input, textarea, select { max-width: 100% !important; }

/* Touch-freundliche Mindestgrößen auf Touch-Geräten */
@media (hover: none) and (pointer: coarse) {
  button, a.btn, .btn, .tab-btn, input[type="submit"] {
    min-height: 40px !important;
  }
  /* Form-Inputs ebenfalls Touch-fähig (außer checkboxes, radios, hidden) */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select, textarea {
    min-height: 40px !important;
    font-size: 16px !important;  /* iOS Auto-Zoom-Schutz: <16px triggert beim Focus Zoom */
  }
  textarea { min-height: 80px !important; }
}

/* ── ≤1024px: Tablet Landscape — nur Padding + Grids 2-col max ── */
@media (max-width: 1024px) {
  .page { padding: 24px 24px !important; }
  .kpi-grid, .stats-grid, .ach-grid, .breakdown-grid,
  .raffles-grid, .hof-grid, .dropdown-grid, .deal-dropdown-grid,
  .cp-grid, .hunt-grid, .mis-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── ≤768px: Tablet Portrait + Phones — Haupt-Arbeit ── */
@media (max-width: 768px) {
  /* Page-Container kompakter */
  .page { padding: 14px 14px 40px !important; }
  section, .section { padding-left: 0 !important; padding-right: 0 !important; }

  /* Typo runterskalieren */
  h1 { font-size: 24px !important; line-height: 1.25 !important; }
  h2 { font-size: 19px !important; line-height: 1.3 !important; }
  h3 { font-size: 16px !important; line-height: 1.35 !important; }
  .section-title { font-size: 17px !important; }
  .section-sub { font-size: 11px !important; }

  /* Alle bekannten Grids auf 1 Spalte */
  .kpi-grid, .stats-grid, .ach-grid, .breakdown-grid,
  .raffles-grid, .hof-grid, .dropdown-grid, .deal-dropdown-grid,
  .cp-grid, .hunt-grid, .mis-grid, .chart-row,
  .bw-form-grid, .qa-admin-row, .profile-grid, .lb-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Form-Rows + Chat-Input vertikal stacken */
  .bw-form-row, .qa-new-row, .chat-input-row, .toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .toolbar > * { width: 100% !important; }

  /* Filter-Bar: einzeilig horizontal scrollbar — Buttons bleiben in einer
     Reihe und der User swiped nach links/rechts, statt dass sich die
     Filter auf mehrere Zeilen stapeln.
     WICHTIG: KEIN mask-image hier — das erzeugt einen Stacking-Context
     und würde die position:fixed Dropdowns darin einsperren (Bottom-
     Sheet würde nicht sichtbar). */
  .filter-bar,
  body.is-mobile .filter-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
  }
  .filter-bar::-webkit-scrollbar,
  body.is-mobile .filter-bar::-webkit-scrollbar { display: none !important; }
  .filter-bar > *,
  body.is-mobile .filter-bar > * { flex-shrink: 0 !important; }
  .filter-bar input,
  body.is-mobile .filter-bar input { min-height: 40px !important; }

  /* Tabs: horizontal scrollbar statt Umbruch/Overflow */
  .tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .tabs::-webkit-scrollbar { display: none !important; }
  .tab-btn { flex-shrink: 0 !important; white-space: nowrap !important; }

  /* Cards mit weniger Padding */
  .card, .stat-card, .kpi-card, .lb-card, .mis-card, .ach-card,
  .breakdown-card, .chart-card, .streak-card, .profile-card,
  .raffle-card, .hof-card { padding: 14px !important; }

  /* Tables mit horizontalem Scroll */
  table { min-width: 100% !important; }
  .table-wrap, .scroll-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Row-Layouts (Leaderboard / Casino-Listen) umbrechbar */
  .cas-row, .lb-row, .raffle-past-row {
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
  }

  /* Buttons etwas fetter für Touch */
  button, .btn, a.btn, .tab-btn, .admin-btn, .twitch-btn,
  .cp-goto, .filter-bar button {
    min-height: 40px !important;
    font-size: 13px !important;
  }

  /* Modals / Overlays: fast fullscreen */
  .modal, .modal-content, .admin-panel, .popup, .dialog {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 14px 14px 0 0 !important;
  }
  .modal-overlay, .admin-overlay { align-items: flex-end !important; }

  /* Tables/Rows mit langen Namen */
  .name, .username, .game-name, .casino-name {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Footer kompakter */
  footer { padding: 12px 16px !important; font-size: 10px !important; }

  /* Chat (Community) — Message-Liste höher */
  .chat-messages { max-height: 50vh !important; }

  /* Forms: Label + Input vertikal */
  label { display: block !important; }
  form .row, form .field-row { flex-direction: column !important; gap: 6px !important; }

  /* Hero/Banner-Sections */
  .hero, .banner { padding: 24px 16px !important; text-align: center !important; }
  .hero h1 { font-size: 26px !important; }

  /* Viewer/Pill-Buttons: wrap */
  .cp-left { flex-wrap: wrap !important; gap: 8px !important; }

  /* Dashboard-spezifische Sub-Patterns */
  .mis-progress-row { flex-direction: column !important; gap: 6px !important; align-items: stretch !important; }

  /* Sticky CTAs beherrschen */
  .sticky-cta { padding: 10px 12px !important; }

  /* Activity Feed Ticker */
  .activity-ticker { font-size: 11px !important; padding: 8px 12px !important; }

  /* Announcement Banner */
  .announcement-banner { padding: 10px 14px !important; font-size: 12px !important; }
  .announcement-banner .a-title { font-size: 13px !important; }
  .announcement-banner .a-body  { font-size: 11px !important; }
}

/* ── ≤480px: Phones — extra kompakt ── */
@media (max-width: 480px) {
  .page { padding: 10px 10px 32px !important; }
  h1 { font-size: 21px !important; }
  h2 { font-size: 17px !important; }
  .section-title { font-size: 15px !important; }

  .tab-btn { padding: 8px 12px !important; font-size: 12px !important; }
  .tab-icon { font-size: 14px !important; }

  /* Noch kompaktere Cards */
  .card, .stat-card, .kpi-card, .lb-card, .mis-card, .ach-card,
  .breakdown-card, .chart-card, .streak-card, .profile-card,
  .raffle-card, .hof-card { padding: 12px !important; }

  /* Button-Text auf essentials — verkleinert Padding */
  button, .btn, a.btn { padding: 10px 14px !important; }

  /* Leaderboard-Rows: weniger Pad */
  .lb-row, .cas-row { padding: 8px 10px !important; font-size: 12px !important; }

  /* Zahlen/Stats in den Cards kleiner */
  .kpi-val, .stat-val, .big-number { font-size: 22px !important; }
  .kpi-lbl, .stat-lbl { font-size: 10px !important; }

  /* IG-Style Popups / Modals: volle Höhe.
     100dvh = dynamic viewport height — auf iOS Safari ohne Address-Bar-Overflow.
     Fallback auf 100vh für ältere Browser (vor Chrome 108 / Safari 15.4). */
  .ig-modal, .bw-modal { height: 100vh !important; height: 100dvh !important; border-radius: 0 !important; }

  /* Profile-Avatar kleiner */
  .profile-avatar, .pf-avatar-large { width: 72px !important; height: 72px !important; }
}

/* ── Extras: große Desktop-Modals die auf Mobile crashen ── */
@media (max-width: 768px) {
  /* Admin/Owner Panels */
  .admin-sheet, .owner-sheet, .settings-sheet {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px 14px 0 0 !important;
  }
}

/* ── Page-spezifische Mobile-Fixes ── */

/* Index / Casino-Details Dropdown — Payment-Provider-Bilder kleiner.
   Desktop hat 32px, auf Mobile waren sie noch riesig weil die bestehenden
   22-24px Regeln in index.html nur @480px oder via body.is-mobile greifen
   und die Specificity zu niedrig war. Hier mit höherer Specificity +
   !important forcieren. */
@media (max-width: 768px) {
  .pay-chip,
  body.is-mobile .pay-chip {
    padding: 2px 4px !important;
  }
  .pay-chip img,
  body.is-mobile .pay-chip img {
    height: 24px !important;
    max-width: 46px !important;
    width: auto !important;
  }
  .dd-payments,
  body.is-mobile .dd-payments {
    gap: 4px !important;
    max-width: 100% !important;
  }
}

/* Index / Casino-Cards — Filter-Dropdown als Bottom-Sheet auf Mobile.
   Grund: die filter-bar hat auf Mobile `overflow-x: auto` (horizontal
   swipe). Durch einen Browser-Quirk klippt das automatisch auch den
   vertikalen Overflow → absolute-positionierte Dropdowns wären sonst
   unsichtbar. Lösung: Dropdown via `position: fixed` aus dem Scroll-
   Container rausreißen, als Bottom-Sheet unten einblenden. Gleichzeitig
   Full-Width statt kleines Popup damit der User auf dem Phone mehr Platz
   hat. */
@media (max-width: 768px) {
  body.is-mobile .fdd-menu,
  .fdd-menu {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    display: none !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom)) !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,.6) !important;
    z-index: 9999 !important;
    animation: sofSheetSlideUp .2s ease-out !important;
  }
  body.is-mobile .fdd-menu.open,
  .fdd-menu.open { display: grid !important; }
  body.is-mobile .fdd-item,
  .fdd-menu .fdd-item {
    padding: 10px 10px !important;
    font-size: 12px !important;
    gap: 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .fdd-pay-img { height: 16px !important; max-width: 28px !important; flex-shrink: 0 !important; }
}
@keyframes sofSheetSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Index / Casino-Cards — Code-Anzeige + FS-Gratis-Badge Fixes */
@media (max-width: 768px) {
  /* Code-Feld mit "-" wenn kein Code: dimmer, italic, keine Hover/Copy-Funktion */
  .pod-code.no-code {
    color: var(--sub2) !important;
    background: rgba(255,255,255,.03) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    cursor: default !important;
    font-weight: 600 !important;
    opacity: .65 !important;
  }
  /* GRATIS-Badge als absolut positionierter Aufkleber → weg auf Mobile.
     Die Info steht eh als Tag "GRATIS" oben in der Badge-Reihe. */
  .fs-free-badge { display: none !important; }
  /* FS-Zahl wird golden wenn die Zelle gratis ist — matcht den "GRATIS" Tag */
  .pstat:has(.fs-free-badge) .pstat-v,
  .rstat:has(.fs-free-badge) .rstat-v,
  .ps:has(.fs-free-badge) .ps-v {
    color: var(--gold, #f5c842) !important;
    text-shadow: 0 0 12px rgba(245,200,66,.3) !important;
  }
  /* "GRATIS" Tag golden einfärben — gleiche Farbe wie die FS-Zahl,
     damit User die Verknüpfung sofort sieht. Standardmäßig ist .tnd blau;
     auf Mobile wird er gold. */
  .ttag.tnd {
    background: rgba(245,200,66,.15) !important;
    border: 1px solid rgba(245,200,66,.4) !important;
    color: var(--gold, #f5c842) !important;
    font-weight: 800 !important;
    letter-spacing: .5px !important;
  }
}

/* Community (community.html) */
@media (max-width: 768px) {
  /* Chat-Box: statt fester Höhe flexible viewport-Höhe */
  .chat-box { height: 60vh !important; min-height: 360px !important; }
  /* Tab-Buttons schlanker auf Phone */
  .tabs .tab-btn { min-width: 100px !important; padding: 9px 12px !important; font-size: 12px !important; }
  .tab-icon { font-size: 13px !important; }
  /* Profile-Popup: volle Breite minus Rand */
  .profile-card { max-width: 100% !important; margin: 10px !important; }
  .profile-stats { gap: 6px !important; }
  /* IG-Modal (BigWin) */
  .bw-modal-content, .ig-modal-wrap { flex-direction: column !important; }
  .bw-modal-image, .ig-modal-image { max-height: 55vh !important; }
  /* Q&A-Row */
  .qa-admin-row button, .qa-new-row button { width: 100% !important; }
}

/* Dashboard (dashboard.html) */
@media (max-width: 768px) {
  /* KPI-Grid → 2 Spalten (nicht 1), weil KPI-Kacheln klein sind */
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
  /* Chart-Cards full-width */
  .chart-card { min-width: 0 !important; }
  /* Leaderboard-Row kompakter */
  .lb-row, .cas-row { padding: 10px 12px !important; }
  .lb-row .lb-rank { min-width: 28px !important; }
  .lb-row .lb-name { font-size: 13px !important; }
  /* Mis-Grid (Missions): 1 Spalte */
  .mis-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .kpi-card { padding: 10px !important; }
  .kpi-val { font-size: 19px !important; }
}

/* Profile (profile.html) */
@media (max-width: 768px) {
  .pf-hero, .profile-hero { padding: 20px 14px !important; text-align: center !important; }
  .pf-hero-body { flex-direction: column !important; align-items: center !important; gap: 10px !important; }
  .pf-tabs, .profile-tabs { overflow-x: auto !important; flex-wrap: nowrap !important; }
  .pf-showcase { max-width: 100% !important; }
  .profile-edit-grid { grid-template-columns: 1fr !important; }
  .social-links { flex-wrap: wrap !important; }
}

/* Leaderboard (leaderboard.html) */
@media (max-width: 768px) {
  .lb-podium { flex-direction: column !important; gap: 10px !important; }
  .lb-podium > * { width: 100% !important; }
  .lb-filter-row { flex-wrap: wrap !important; gap: 8px !important; }
}

/* Shop (shop.html) */
@media (max-width: 768px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .shop-item { padding: 12px !important; }
}
@media (max-width: 480px) {
  .shop-grid { grid-template-columns: 1fr !important; }
}

/* Giveaway (giveaway.html / big-giveaway.html) */
@media (max-width: 768px) {
  .gw-hero { padding: 24px 16px !important; text-align: center !important; }
  .gw-hero h1 { font-size: 26px !important; }
  .gw-entries-grid, .bg-grid { grid-template-columns: 1fr !important; }
  .gw-prize-card { padding: 14px !important; }
}

/* Support (support.html) */
@media (max-width: 768px) {
  .support-tabs { overflow-x: auto !important; flex-wrap: nowrap !important; }
  .ticket-item { padding: 12px !important; }
  .ticket-chat { height: 50vh !important; min-height: 320px !important; }
  .ticket-form-grid { grid-template-columns: 1fr !important; }
}

/* Play-Hub (play.html, slot.html, chicken.html, coinflip.html) */
@media (max-width: 768px) {
  .play-hub-grid { grid-template-columns: 1fr !important; }
  .game-canvas, #game-board { max-width: 100% !important; }
}

/* Crypto-Guide (crypto-guide.html) */
@media (max-width: 768px) {
  .guide-grid { grid-template-columns: 1fr !important; }
  .guide-section { padding: 18px 16px !important; }
  .guide-step { flex-direction: column !important; gap: 10px !important; }
}

/* Extension-Auth (extension-auth.html) */
@media (max-width: 768px) {
  .ea-card, .auth-card { max-width: 100% !important; margin: 14px !important; padding: 22px 18px !important; }
}

/* Admin + Owner (admin.html / owner-w1utidp.html) — User nutzen zwar Desktop,
   aber wenigstens anzeigen bei Mobile */
@media (max-width: 768px) {
  .admin-tabs, .owner-tabs { overflow-x: auto !important; flex-wrap: nowrap !important; }
  .admin-grid, .owner-grid { grid-template-columns: 1fr !important; }
}

/* ── Rubbellos (rubbellos.html) ── */
@media (max-width: 768px) {
  /* Tier-Kauf-Grid: 2 Spalten wenn >=480, 1 wenn <480 */
  .rb-tiers { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .rb-tier { padding: 16px 14px !important; }
  .rb-tier-icon { font-size: 28px !important; }
  .rb-tier-name { font-size: 15px !important; }
  .rb-tier-desc { font-size: 11px !important; min-height: auto !important; }
  .rb-tier-cost { font-size: 17px !important; }
  .rb-tier-btn { font-size: 12px !important; padding: 10px 12px !important; }
  /* Stats-Row */
  .rb-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .rb-stat { padding: 10px 12px !important; }
  .rb-stat-val { font-size: 17px !important; }
  /* Open-Tickets */
  .rb-tickets { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .rb-ticket { padding: 14px 12px !important; }
  .rb-ticket-icon { font-size: 26px !important; }
  /* Scratch-Modal */
  .rb-modal-ov { padding: 12px !important; }
  .rb-modal-ov .rb-modal { max-width: 100% !important; }
  .rb-modal-ov .rb-modal > .rb-modal-close { top: -38px !important; right: 2px !important; }
  /* Claim-Form Fields auf Mobile volle Breite */
  .rb-claim-form select, .rb-claim-form input, .rb-claim-form textarea { width: 100% !important; }
  .rb-modal-btn { padding: 11px 16px !important; font-size: 13px !important; }
  /* Post-Reveal Body-Padding reduzieren */
  .rb-modal { padding: 24px 20px !important; }
  /* History-Row: 4-col grid auf 2-col stacken */
  .rb-history-row { grid-template-columns: auto 1fr auto !important; gap: 8px !important; padding: 8px 10px !important; }
  .rb-history-row > div:nth-child(4) { display: none !important; }
  /* Section-Titles schmaler */
  .rb-section-title { font-size: 13px !important; margin-top: 18px !important; }
}
@media (max-width: 480px) {
  .rb-hero h1 { font-size: 22px !important; }
  .rb-hero p { font-size: 12px !important; }
  .rb-tiers { grid-template-columns: 1fr !important; }
  .rb-tickets { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  /* 3-col Stats → 1 col + kleiner */
  .rb-stats { grid-template-columns: 1fr !important; gap: 6px !important; }
  .rb-stat-val { font-size: 15px !important; }
  .rb-ticket-icon { font-size: 22px !important; }
  .rb-ticket-label { font-size: 11px !important; }
}

/* ── Leaderboards Detail-View (leaderboards.html) — Podium + Stats ── */
@media (max-width: 768px) {
  .lb-detail-head { grid-template-columns: 1fr !important; padding: 20px 16px !important; gap: 14px !important; text-align: center !important; }
  .lb-detail-logo { width: 100px !important; height: 100px !important; margin: 0 auto !important; }
  .lb-detail-title { font-size: 22px !important; }
  .lb-detail-prize-box { padding: 16px 22px !important; }
  .lb-detail-prize-val { font-size: 28px !important; }
  /* Podium: vertikal stacken */
  .lb-podium { grid-template-columns: 1fr !important; gap: 8px !important; }
  .lb-podium-slot { padding: 14px 16px 14px 52px !important; text-align: left !important;
                    display: grid !important; grid-template-columns: auto 1fr auto !important;
                    gap: 12px !important; align-items: center !important; }
  .lb-podium-slot.p1 { padding-top: 24px !important; }
  .lb-podium-medal { top: 50% !important; left: 14px !important; transform: translateY(-50%) !important; }
  .lb-podium-crown { display: none !important; }
  .lb-podium-user { margin: 0 !important; text-align: left !important; }
  .lb-podium-metric { margin: 0 !important; justify-self: end !important; }
  .lb-podium-prize { margin: 0 !important; justify-self: end !important; }
  /* Main-Grid: Ranking + Side stacken */
  .lb-main-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .lb-rank-row { grid-template-columns: 28px 1fr auto !important; gap: 8px !important; padding: 8px 10px !important; }
  .lb-rank-prize { display: none !important; }
  .lb-rank-gap { font-size: 10px !important; }
  .lb-stats-row { grid-template-columns: repeat(2, 1fr) !important; }
  .lb-rank-card { padding: 14px !important; }
}

/* ── Owner-Panel Rubbellos-Tabs — kompaktere Prize-Rows ── */
@media (max-width: 768px) {
  /* Prize-Liste von 5-col Grid auf 1-col + Badges/Buttons darunter */
  #tab-sc-prizes [style*="grid-template-columns:32px 1fr 90px"] {
    grid-template-columns: 32px 1fr !important;
    gap: 8px !important;
  }
  /* Quick-add chips: horizontal scroll */
  #tab-sc-prizes [style*="display:flex;flex-wrap:wrap"] {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #tab-sc-prizes [style*="display:flex;flex-wrap:wrap"] > * { flex-shrink: 0 !important; }
}

/* ── Extension-Auth Page ── */
@media (max-width: 768px) {
  body.extension-auth-body,
  .ea-container, .auth-container { padding: 16px !important; }
}

/* ── Spinofra-Stats (Analytics) ── */
@media (max-width: 768px) {
  .stats-hero, .sof-stats-hero { padding: 20px 16px !important; text-align: center !important; }
  .stats-grid, .sof-stats-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .stats-card, .sof-stats-card { padding: 14px !important; }
}

/* ── Generisches Safety-Net — alle grids mit minmax werden <480 1-col ── */
@media (max-width: 480px) {
  [style*="grid-template-columns:repeat(auto-fit"],
  [style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:2fr"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns:1.4fr"] {
    grid-template-columns: 1fr !important;
  }
}

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