/* ===========================================
   AllStar Bar – Responsive Stylesheet
   Domain: allstarbar.org
   =========================================== */

/* ---- Tablet (≤1100px) ---- */
@media (max-width: 1100px) {
  .allstarbar-bars-grid       { grid-template-columns: repeat(2, 1fr); }
  .allstarbar-featured-grid   { grid-template-columns: repeat(2, 1fr); }
  .allstarbar-featured-grid .allstarbar-bar-card:first-child { grid-column: span 2; }
  .allstarbar-cities-grid     { grid-template-columns: repeat(3, 1fr); }
  .allstarbar-footer-grid     { grid-template-columns: 1fr 1fr; gap: 32px; }
  .allstarbar-guide-grid      { grid-template-columns: 1fr; }
  .allstarbar-about-grid      { grid-template-columns: 1fr; }
  .allstarbar-contact-card    { position: static; }
  .allstarbar-ratgeber-grid   { grid-template-columns: 1fr; }
  .allstarbar-tip-box         { position: static; }
}

/* ---- Small Tablet / Large Mobile (≤860px) ---- */
@media (max-width: 860px) {
  /* Show hamburger, hide desktop nav */
  .allstarbar-hamburger { display: flex; }

  .allstarbar-nav {
    display: none;
    position: fixed;
    top: var(--ab-header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--ab-navy);
    z-index: 850;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  }
  .allstarbar-nav.open { display: flex; }

  .allstarbar-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 12px 20px 0;
    align-items: stretch;
  }
  .allstarbar-nav-list li { width: 100%; }
  .allstarbar-nav-list a {
    display: block;
    padding: 15px 12px;
    font-size: 1.05rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    border-radius: 0;
    white-space: normal;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.01em;
  }
  .allstarbar-nav-list a:hover,
  .allstarbar-nav-list li.active a {
    background: rgba(255,255,255,0.06);
    color: var(--ab-white);
  }
  .allstarbar-nav-list li:last-child a { border-bottom: none; }
  .allstarbar-nav-cta {
    display: block;
    margin: 20px;
    text-align: center;
    padding: 15px;
    font-size: 1rem;
    border-radius: var(--ab-radius-sm);
    margin-left: 20px;
    margin-right: 20px;
  }

  /* Cities */
  .allstarbar-cities-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* Filters */
  .allstarbar-filter-wrap { gap: 14px; }
  .allstarbar-filter-group { min-width: 120px; }

  /* Form */
  .allstarbar-form-row { grid-template-columns: 1fr; }
  .allstarbar-form-wrap { padding: 28px 22px; }

  /* Sitemap */
  .allstarbar-sitemap-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Mobile (≤600px) ---- */
@media (max-width: 600px) {
  .allstarbar-section { padding: 48px 16px; }
  .allstarbar-hero { padding: 72px 16px 56px; min-height: auto; }
  .allstarbar-hero-stats { gap: 24px; margin-top: 44px; }
  .allstarbar-hero-stat-num { font-size: 1.9rem; }
  .allstarbar-hero-actions { flex-direction: column; align-items: flex-start; gap: 10px; }

  .allstarbar-featured-grid,
  .allstarbar-bars-grid { grid-template-columns: 1fr; }
  .allstarbar-featured-grid .allstarbar-bar-card:first-child { grid-column: span 1; }
  .allstarbar-featured-grid .allstarbar-bar-card:first-child .allstarbar-bar-card-img { height: 175px; }

  .allstarbar-cities-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .allstarbar-guide-visual-card { padding: 24px; }
  .allstarbar-guide-stat-grid { gap: 10px; }

  .allstarbar-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .allstarbar-footer-brand-desc { max-width: 100%; }

  .allstarbar-sitemap-grid { grid-template-columns: 1fr; }

  .allstarbar-page-hero { padding: 40px 16px; }
  .allstarbar-prose { padding: 40px 16px; }
  .allstarbar-breadcrumb { padding: 10px 16px; }

  .allstarbar-bar-card-footer { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* German long words */
  .allstarbar-section-title,
  .allstarbar-page-hero-title,
  .allstarbar-hero-title,
  .allstarbar-footer-col a,
  h1, h2, h3 {
    word-break: break-word;
    hyphens: auto;
  }
}

/* ---- Very small (≤400px – iPhone SE etc.) ---- */
@media (max-width: 400px) {
  .allstarbar-header-inner { padding: 0 14px; gap: 12px; }
  .allstarbar-logo-text { font-size: 1.2rem; }
  .allstarbar-logo-icon { width: 30px; height: 30px; }

  .allstarbar-hero-title { font-size: 2rem; }
  .allstarbar-section-title { font-size: 1.35rem; }
  .allstarbar-section { padding: 40px 14px; }

  .allstarbar-cities-grid { gap: 10px; }
  .allstarbar-city-card-body { padding: 10px 12px; }
  .allstarbar-city-card-name { font-size: 0.92rem; }

  .allstarbar-bar-card-body { padding: 14px 16px; }
  .allstarbar-bar-card-name { font-size: 1rem; }

  .allstarbar-form-wrap { padding: 22px 16px; }

  .allstarbar-cta-banner { padding: 48px 16px; }
  .allstarbar-cta-banner-title { font-size: 1.6rem; }

  .allstarbar-footer { padding: 40px 16px 24px; }
}