/* ==========================================================================
   desktop.css — greift ab 1101px Breite
   Ziel:
     • Mehrspaltige Grids
     • Größere Innenbreiten
     • Bottom-Nav ausblenden, da Desktop Navigation oben/über Inhalte
   ========================================================================== */

/* Layoutgrundlagen */
html, body { background: #f5f6f7; }

/* zentrierte Mittelspalte mit klaren Rändern */
:root{
  --content-w: 1100px;   /* Haupt-Innenbreite */
  --rails-shadow: 14px 0 24px rgba(0,0,0,.10), -14px 0 24px rgba(0,0,0,.10);
}

body{
  padding-bottom: 0; /* keine fixe Bottom-Nav auf Desktop */
}

/* Container optisch freistellen */
.container-1100{
  max-width: var(--content-w);
  padding: 0 16px;
  background: #fff;
  box-shadow: var(--rails-shadow);
}

.content-pad{ padding: 24px 0; }

/* Top-Bar bleibt sticky, aber mit stärkerem Kontrast */
.top-bar{
  background:#fff;
  border-bottom:1px solid #e6e6e6;
}

/* Drawer bleibt Offcanvas auch auf Desktop (kein DOM-Wechsel nötig).
   Wenn du ihn permanent sichtbar haben willst, später per Klasse lösen. */

/* Grids großzügiger */
.grid-2{
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cards{
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.quick{
  grid-template-columns: repeat(4, 1fr);
}

/* Filterzeilen können breiter werden */
.filters .row{
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* Karten und Kacheln mit etwas mehr Luft */
.card{ padding: 16px; }
.tile{ padding: 20px; }

/* Bottom-Nav am Desktop ausblenden */
.bottom-nav{
  display: none !important;
}

/* Links dezenter hover auf Desktop */
a:hover{ text-decoration: underline; }