/* mobile-style.css — Ad Bull mobile overrides (≤960px) */
/* Lädt NUR auf kleinen Screens per <link media="max-width:960px"> */

/* Typo/Spacing etwas kompakter */
:root{
  --fs-1: 11px;
  --fs-2: 13px;
  --fs-3: 15px;
}

/* App-Grid auf eine Spalte */
.app{
  grid-template-columns: 1fr !important;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---------- Topbar ---------- */
.topbar{
  grid-template-columns: auto 1fr auto !important;
  gap: 10px !important;
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  backdrop-filter: saturate(120%) blur(4px);
}

/* Brand etwas kleiner */
.brand .logo{ font-size: 16px; }

/* Suche volle Breite */
.searchbar { grid-column: 1 / -1; }
.searchbar .search{
  font-size: var(--fs-2);
  padding: 10px 12px;
  width: 90%;
}



/* Burger-Button nur mobil anzeigen */
.menu-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 8px;
  line-height: 1;
  font-weight: 800;
}
@media (min-width: 961px){ .menu-toggle{ display:none; } }

/* ---------- Sidebar als Offcanvas ---------- */
.sidebar{
  position: fixed !important;
  inset: 0 auto 0 0;          /* top:0; right:auto; bottom:0; left:0 */
  width: min(86vw, 360px);
  max-width: 92vw;
  height: 100dvh;
  overflow: auto;
  z-index: 50;
  transform: translateX(-100%);
  transition: transform .22s ease, box-shadow .22s ease;
  box-shadow: 0 10px 40px rgba(0,0,0,.55);
  padding: 14px 12px !important;
  background: var(--bg-elev);
  border-right: 1px solid var(--line);
}

/* Offcanvas sichtbar, wenn body.sidebar-open gesetzt wird (per JS) */
body.sidebar-open .sidebar{
  transform: translateX(0);
}

/* Dimmer/Backdrop über Body via ::before */
body.sidebar-open::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  z-index: 45;
}

/* Sidebar-Nav touch-freundlicher */
.nav a{
  padding: 10px 12px !important;
  border-radius: 10px;
}
.nav .title{
  margin: 12px 6px;
  font-size: 10px;
  letter-spacing: .6px;
}

/* ---------- Main / Content ---------- */
.main{ grid-template-rows: auto 1fr auto; min-width: 0; }
.content{
  padding: 14px 14px 18px !important;
}

/* Buttons */
.btn{
  padding: 9px 12px !important;
  font-size: var(--fs-1) !important;
  border-radius: 8px;
}

/* Cards/Grids */
.grid{ gap: 10px !important; }
.grid.cols-3{ grid-template-columns: 1fr !important; } /* 1 Spalte mobil */
.card{ padding: 14px !important; }

/* Überschriften minimal kleiner */
.card h3{ font-size: 14px !important; }

/* Footer stacken */
.footer{
  flex-wrap: wrap;
  gap: 6px !important;
  padding: 10px 14px !important;
  font-size: var(--fs-1);
}

/* ---------- Tabellen: horizontal scroll statt Layoutbruch ---------- */
.content table{
  display: block;
  width: 100%;
  overflow-x: auto;
  border-spacing: 0;
  border-collapse: collapse;
}
.content table thead tr{
  position: sticky;
  top: calc(48px + 12px); /* unter der Topbar, je nach Layout anpassen */
  background: var(--bg);
}
.content th, .content td{
  white-space: nowrap;
  padding: 10px 12px !important;
  font-size: var(--fs-2);
}

/* ---------- Spezielle Grids deiner Seiten (falls vorhanden) ---------- */
/* 6er Grids (Locations/Categories) → 2 Spalten mobil */
.loc-grid, .cat-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
@media (max-width: 520px){
  .loc-grid, .cat-grid{ grid-template-columns: 1fr !important; }
}

/* Karten minimal straffer */
.loc-card, .cat-card{
  padding: 12px !important;
}
.loc-emoji, .cat-emoji{
  font-size: 34px !important;
}

/* Chips umbrechen */
.subwrap{ gap: 6px !important; }
.subchip{
  font-size: 11px !important;
  padding: 4px 8px !important;
}

/* ---------- Formulare ---------- */
input[type="text"], input[type="number"], textarea, select{
  width: 100%;
  font-size: var(--fs-2);
  padding: 10px 12px !important;
}
textarea{ min-height: 120px; }

/* ---------- Bilder ---------- */
img{ max-width: 100%; height: auto; }

/* ---------- Sonstiges ---------- */
.userbox .username{ display:none; } /* Platz sparen */
/* Logo in der Topbar knapp halten (Text + Bild/SVG) */
.brand { min-width: 0; }
.brand .logo{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand .logo img,
.brand svg.logo,
.logo-img{
  max-height: 28px;  /* cap fürs Header-Logo */
  width: auto;
  vertical-align: middle;
}

/* Startseiten-/Hero-Logo (wenn groß eingebunden) */
.home-hero .logo-img {            /* gib dem Startseiten-Logo die Klasse logo-img */
  max-width: 220px;               /* cap für Phones */
  height: auto;
}
@media (max-width: 480px){
  .brand .logo img, .brand svg.logo, .logo-img { max-height: 24px; }
  .home-hero .logo-img { max-width: 180px; }
}
/* 1) Hero-Grid darf schrumpfen */
.home-hero > * { min-width: 0; }

/* 2) Hero-Bild soll nicht >100% werden */
.hero-bull { max-width: 100%; }
.hero-cover{
  display:block;
  width:100%;
  max-width:100%;
  box-sizing: border-box;  /* Border zählt in die 100% mit rein */
  border: 0;               /* <- lieber keine Border am IMG selbst */
}

/* Wenn du unbedingt einen Rahmen willst, gib ihn dem Container: */
.hero-bull { border:1px solid var(--line); overflow:hidden; }