/* --- Basis (mobile-first) --- */
:root { --gap: 12px; --max: 1200px; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.container { max-width: var(--max); margin-inline: auto; padding: var(--gap); }

/* Einfache Grids/Flex für Layouts */
.stack { display: grid; gap: var(--gap); }
.grid-2 { display: grid; gap: var(--gap); grid-template-columns: 1fr; } /* mobil: 1 Spalte */
.card { padding: 1rem; border: 1px solid #ddd; border-radius: 8px; background: #fff; }

/* Buttons (einfach) */
.button { display:inline-block; padding:.6rem 1rem; border-radius:10px; background:#111827; color:#fff; text-decoration:none; font-weight:700; }
.button:hover { opacity:.92; }

/* Sichtbarkeits-Helper */
.mobile-only { display: block; }
.pc-only { display: none; }

/* Install-Hint Banner */
.install-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: rgba(17,24,39,.98); /* #111827 */
  color: #fff;
  padding: .85rem 1rem;
  box-shadow: 0 -6px 24px rgba(0,0,0,.22);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.install-banner[hidden] { display: none !important; }
.install-banner__row { display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: center; }
.install-banner__title { font-weight: 800; margin-bottom: .15rem; }
.install-banner__desc { opacity: .85; font-size: .95rem; }
.install-btn { background:#22c55e; color:#0b1220; font-weight:700; border:0; border-radius:10px; padding:.5rem .9rem; cursor:pointer; }
.install-btn:hover { opacity:.92; }
.install-btn--ghost { background: transparent; color:#fff; border:1px solid rgba(255,255,255,.35); margin-left:.35rem; }

/* --- Desktop/PC: ab 900px --- */
@media (min-width: 900px) {
  .mobile-only { display: none; }
  .pc-only { display: block; }
  .grid-2 { grid-template-columns: 1fr 1fr; } /* PC: 2 Spalten */
  .install-banner { left:auto; right:20px; bottom:20px; width:min(520px, 92vw); border-radius:14px; }
}