/* Snack House Startseite: Mobile A + Desktop-Chrome. */

.home-appbar,
.home-hours {
  display: none;
}

.home-account {
  display: block;
  text-align: center;
  line-height: 40px;
  min-height: 40px;
  max-width: 7.5rem;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #f0d878;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #efe7d8;
}
.nav-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9a9a9a;
  box-shadow: 0 0 0 3px rgba(154, 154, 154, 0.18);
}
.nav-status.open .nav-status-dot {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22);
}
.nav-status.soon .nav-status-dot {
  background: #eab308;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.22);
}
.nav-status.closed .nav-status-dot {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.hero-cta-phone {
  display: none !important;
}

.mobile-order-bar {
  display: none !important;
}

@media (min-width: 768px) {
  .home-appbar,
  .home-hours {
    display: none !important;
  }

  .nav-konto-link {
    display: none !important;
  }

  #nav-header-order,
  #nav-call,
  .home-nav-bestellen-hide {
    display: none !important;
  }

  nav.nav-glass a[href="#hero"] img.w-14 {
    width: 4rem !important;
    height: 4rem !important;
  }

  nav.nav-glass a[href="#hero"] span.home-brand-name {
    display: block !important;
    font-size: 1.125rem;
    line-height: 1.25;
    max-width: none;
    flex-direction: row;
    white-space: nowrap;
  }

  nav.nav-glass .hidden.md\:flex {
    gap: 1.75rem;
  }

  #nav-status {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.28);
    background: rgba(20, 16, 12, 0.92);
    font-size: 0.78rem;
    font-weight: 700;
    color: #efe7d8;
    max-width: 14rem;
    line-height: 1.25;
  }

  #nav-status-label {
    white-space: nowrap;
  }

  .home-account {
    min-height: 40px;
    line-height: 40px;
  }

  #hero .hero-meta {
    gap: 1.75rem;
    font-size: 0.88rem;
    color: #c8c0b4;
  }

  #hero .hero-meta i {
    opacity: 0.95;
  }

  #hero .hero-chips span {
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }

  #hero .hero-chips span:hover {
    background: rgba(212, 175, 55, 0.12);
    color: #f0d878;
  }

  .hero-cta-phone {
    display: none !important;
  }
}

@media (max-width: 767px) {
  :root {
    --home-gold: #d4af37;
    --home-header-h: 84px;
    --home-ticker-h: 34px;
    --home-footer-h: 64px;
  }

  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  body {
    padding-bottom: calc(var(--home-footer-h) + env(safe-area-inset-bottom, 0px) + 10px);
  }

  #announcement-bar {
    position: sticky;
    top: 0;
    z-index: 62;
    min-height: var(--home-ticker-h);
  }

  nav.nav-glass {
    top: var(--home-ticker-h) !important;
    padding: 0 10px !important;
  }

  nav.nav-glass .max-w-7xl {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  nav.nav-glass .max-w-7xl > .flex {
    height: var(--home-header-h) !important;
    min-height: var(--home-header-h) !important;
    max-height: var(--home-header-h);
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  nav.nav-glass .max-w-7xl > .flex > .flex.items-center.gap-2 {
    flex-shrink: 0;
    gap: 8px !important;
  }

  nav.nav-glass a[href="#hero"] img,
  nav.nav-glass a[href="#hero"] img.w-14 {
    width: 72px !important;
    height: 72px !important;
    max-height: none !important;
    object-fit: contain;
    flex-shrink: 0;
  }

  nav.nav-glass a[href="#hero"] {
    gap: 8px !important;
    min-width: 0;
    flex: 0 1 auto;
    max-width: none;
    align-items: center !important;
  }

  nav.nav-glass a[href="#hero"] span.home-brand-name {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.3em;
    font-size: 0.92rem;
    line-height: 1.08;
    letter-spacing: 0.005em;
    max-width: none;
    white-space: nowrap;
  }

  /* Schmalere Handys: Name zweizeilig, Header bleibt eine Zeile */
  @media (max-width: 374px) {
    nav.nav-glass a[href="#hero"] img,
    nav.nav-glass a[href="#hero"] img.w-14 {
      width: 64px !important;
      height: 64px !important;
    }

    nav.nav-glass a[href="#hero"] span.home-brand-name {
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      font-size: 0.86rem;
      line-height: 1.05;
      white-space: normal;
    }
  }

  nav.nav-glass > .max-w-7xl .btn-gold {
    display: none !important;
  }

  #nav-status,
  #nav-call {
    display: none !important;
  }

  .home-account {
    margin-left: 0;
  }

  #nav-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  #hero {
    min-height: calc(100svh - var(--home-ticker-h) - var(--home-header-h) - var(--home-footer-h) - env(safe-area-inset-bottom, 0px)) !important;
    padding: 28px 18px 32px !important;
    display: flex !important;
    align-items: center !important;
  }

  #hero .hero-chips,
  #hero .hero-meta,
  #hero .animate-bounce,
  #hero .hero-ctas a[href*="google.com/maps"] {
    display: none !important;
  }

  #hero .hero-logo {
    display: block !important;
    width: 9.5rem !important;
    height: 9.5rem !important;
    margin: 0 auto 0.4rem;
    object-fit: contain;
  }

  #hero .flex.justify-center.mb-8 {
    margin-bottom: 0.35rem !important;
  }

  #hero h1 {
    font-size: 2.05rem !important;
    line-height: 1.12 !important;
    margin-bottom: 0.9rem !important;
  }

  #hero .hero-lead {
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
    margin-bottom: 1.15rem !important;
    max-width: 22rem;
    margin-left: auto;
    margin-right: auto;
  }

  #hero .hero-ctas {
    gap: 0 !important;
    width: 100%;
    max-width: 22rem;
    margin-left: auto;
    margin-right: auto;
  }

  #hero .hero-ctas a.btn-gold {
    min-height: 54px !important;
    width: 100%;
    font-size: 1.05rem !important;
  }

  .home-appbar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    min-height: calc(var(--home-footer-h) + env(safe-area-inset-bottom, 0px));
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(14, 11, 8, 0.96);
    border-top: 1px solid rgba(212, 175, 55, 0.22);
    backdrop-filter: blur(12px);
  }

  .home-appbtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 48px;
    color: #efe7d8;
    text-decoration: none;
    background: transparent;
    border: 0;
    font-family: inherit;
    cursor: pointer;
  }

  .home-appbtn i {
    font-size: 1.05rem;
    color: var(--home-gold);
  }

  .home-appbar a[href^="tel:"] {
    background: linear-gradient(135deg, #d4af37, #f0d878);
    color: #0f0f0f;
    border-radius: 999px;
    margin: 4px 8px;
    min-height: 52px;
    padding: 6px 10px;
  }

  .home-appbar a[href^="tel:"] i,
  .home-appbar a[href^="tel:"] strong {
    color: #0f0f0f;
  }

  .home-appbar a[href^="tel:"] small {
    display: none;
  }

  .home-appbtn strong {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.01em;
  }

  .home-appbtn small {
    font-size: 0.62rem;
    color: #b7aa98;
    line-height: 1;
  }

  .home-appbtn .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #9a9a9a;
    box-shadow: 0 0 0 3px rgba(154, 154, 154, 0.18);
    display: inline-block;
  }

  .home-appbtn.is-open .dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22); }
  .home-appbtn.is-soon .dot { background: #eab308; box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.22); }
  .home-appbtn.is-closed .dot { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); }

  .home-hours {
    display: none;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--home-footer-h) + env(safe-area-inset-bottom, 0px) + 10px);
    z-index: 90;
    padding: 14px 16px 12px;
    border-radius: 16px;
    background: #1a1612;
    border: 1px solid rgba(212, 175, 55, 0.28);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  }

  .home-hours.is-open {
    display: block;
  }

  .home-hours h3 {
    margin: 0 0 6px;
    color: #f0d878;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .home-hours p {
    margin: 0 0 12px;
    color: #ddd;
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .home-hours button {
    width: 100%;
    min-height: 40px;
    border: 0;
    border-radius: 999px;
    background: #d4af37;
    color: #0f0f0f;
    font-weight: 800;
  }

  #cookie-banner {
    bottom: calc(var(--home-footer-h) + env(safe-area-inset-bottom, 0px)) !important;
  }

  #pwa-tip {
    bottom: calc(var(--home-footer-h) + env(safe-area-inset-bottom, 0px) + 12px) !important;
    left: 12px !important;
    right: 12px !important;
    max-width: none !important;
    z-index: 85 !important;
  }

  section { scroll-margin-top: 72px; }
  section h2 { font-size: 1.65rem !important; }
}