:root { --brand: #7b1113; --brand-2: #0d6efd; }
* { -webkit-tap-highlight-color: transparent; }
body { background: #f5f6f8; }

.app-shell { max-width: 640px; margin: 0 auto; min-height: 100vh;
  display: flex; flex-direction: column; background: #f5f6f8; }

.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center;
  gap: .5rem; padding: .6rem .9rem; background: var(--brand); color: #fff;
  padding-top: calc(.6rem + env(safe-area-inset-top)); }
.topbar .brand { font-weight: 700; letter-spacing: .06em; }
.lang-switch .btn.active { background: #fff; color: var(--brand); }

.content { flex: 1; padding: 1rem .9rem 6rem; }

.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  max-width: 640px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr);
  background: #fff; border-top: 1px solid #e3e5e8;
  padding-bottom: env(safe-area-inset-bottom); }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: .5rem 0 .45rem; font-size: .68rem; color: #7a828c; text-decoration: none; }
.tabbar a i { font-size: 1.2rem; }
.tabbar a.active { color: var(--brand); }

.card { border: none; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.card + .card { margin-top: .8rem; }
.stat { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.wein-hero { background: linear-gradient(135deg, var(--brand), #a5343a); color: #fff; }
.wein-hero .verkaufsargument { background: rgba(255,255,255,.15); border-radius: 10px;
  padding: .6rem .8rem; margin-top: .6rem; }

.rank-row { display: flex; align-items: center; gap: .7rem; padding: .55rem .2rem;
  border-bottom: 1px solid #eef0f2; }
.rank-row .platz { width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #eef0f2;
  display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.rank-row.me { background: #fff7e6; border-radius: 8px; }
.rank-row .platz.gold { background: #ffd54a; }
.rank-row .platz.silver { background: #d5d9de; }
.rank-row .platz.bronze { background: #e8b98a; }

.quiz-opt { display: block; border: 1.5px solid #dfe2e6; border-radius: 12px;
  padding: .8rem .9rem; margin-bottom: .55rem; cursor: pointer; background: #fff; }
.quiz-opt input { margin-right: .55rem; }
.quiz-opt.correct { border-color: #198754; background: #e8f5ee; }
.quiz-opt.wrong { border-color: #dc3545; background: #fdecec; }

.wein-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: .5rem; }
.wein-cell { border: 1px solid #e3e5e8; border-radius: 10px; padding: .5rem .6rem; background: #fff; font-size: .8rem; }
.wein-cell.now { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(123,17,19,.15); }
.wein-cell.inactive { opacity: .45; }

.lang-cols { display: grid; grid-template-columns: 1fr; gap: .8rem; }
@media (min-width: 900px) { .lang-cols { grid-template-columns: repeat(3, 1fr); } }
.badge-soft { background: #eef0f2; color: #444; font-weight: 600; }

.admin-wrap { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.admin-wrap .app-shell { max-width: none; }