/* ============================================================
   Whisky-Reise — Responsive Override Layer
   Loaded LAST so these rules win over design-system.css + components.css.

   Breakpoints:
     ≥ 1100px = desktop default
     900–1099 = tablet landscape
     640–899  = tablet portrait
     480–639  = large phone
     ≤ 479    = small phone
   ============================================================ */

/* ===== Universal scaling — clamp() für fluide Headlines ===== */
@media (max-width: 1099px) {
  .page-h            { font-size: clamp(32px, 6vw, 56px); line-height: 1.08; }
  .route-hero h1     { font-size: clamp(32px, 6vw, 56px); line-height: 1.08; }
  .newsletter-hero h1{ font-size: clamp(32px, 6.5vw, 64px); }
  .nfs-features h3   { font-size: clamp(22px, 3.2vw, 28px); }
  .reisen-card.hero-card h3 { font-size: clamp(24px, 3.6vw, 36px); }
  .reisen-card h3    { font-size: clamp(20px, 2.8vw, 26px); }
  .rp-inner h2, .rc-inner h2 { font-size: clamp(26px, 4.2vw, 42px); }
  .xlink-head h3, .xlink-reise h3 { font-size: clamp(24px, 4vw, 36px); }
  .journal-year      { font-size: clamp(40px, 8vw, 72px); }
  .je-body h3        { font-size: clamp(18px, 2.6vw, 26px); }
  .rs-num            { font-size: clamp(36px, 5vw, 56px); }
  .rs-body h4        { font-size: clamp(20px, 2.8vw, 26px); }
  .article-hero h1   { font-size: clamp(30px, 5.5vw, 56px); }
  .journal-mode .article-hero h1 { font-size: clamp(34px, 6vw, 56px); }
  .nl-h, .nh-lede, .route-lede { font-size: clamp(16px, 2.2vw, 22px); }
}

/* ===== Tablet portrait (≤ 899px) ===== */
@media (max-width: 899px) {
  /* Side-by-side layouts → single column */
  .nl-inner,
  .entity-hero,
  .map-stage-wrap,
  .xlink-reise-inner,
  .rp-inner,
  .nfs-inner,
  .reisen-grid,
  .card-grid,
  .xlink-grid,
  .aff-grid-large {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  /* Page-paddings tighter */
  .page-head, .route-hero, .newsletter-hero,
  .route-stops, .route-cta, .reisen-planner,
  .newsletter-form-section, .wrap {
    padding-left: 20px !important; padding-right: 20px !important;
  }
  /* Article hero crumb may overflow — allow wrap */
  .crumb { flex-wrap: wrap; row-gap: 4px; }
  /* Stats grid */
  .route-stats { grid-template-columns: 1fr 1fr; gap: 16px; }
  /* Forms wide enough to tap */
  .rp-form, .nfs-form { padding: 24px 20px; }
  .rp-form button, .nfs-form button { min-height: 48px; }
  /* Reisen card hero spans full width */
  .reisen-card.hero-card { padding: 28px 22px; }
}

/* ===== Mobile-Nav (≤ 899px) — Hamburger statt versteckte Links ===== */
@media (max-width: 899px) {
  header.top .top-inner { gap: 12px; }
  nav.main {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--bg-2, #141b1a);
    border-top: 1px solid var(--line, #2a322f);
    border-bottom: 1px solid var(--line, #2a322f);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 0;
  }
  nav.main.open { display: flex !important; }
  nav.main a {
    padding: 14px 24px;
    border-bottom: 1px solid var(--line, #2a322f);
    font-size: 16px;
  }
  nav.main a:last-child { border-bottom: 0; }
  .nav-toggle {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid var(--line-bright, #3d4642);
    color: var(--ink, #efe9dd);
    font-size: 22px; cursor: pointer;
    margin-left: auto;
  }
  .nav-toggle:hover { border-color: var(--copper, #c98952); color: var(--copper-bright, #e0a16a); }
  .nl-cta { padding: 8px 14px !important; font-size: 12px !important; }
}
.nav-toggle { display: none; }

/* ===== Large phone (≤ 639px) ===== */
@media (max-width: 639px) {
  .article-body { font-size: 17px; padding: 32px 18px 48px; }
  .article-hero { padding: 48px 18px 28px; }
  .journal-mode { padding: 0 18px 60px; }
  .journal-mode .article-cover figure { transform: none; border-width: 4px; }

  /* Map: stack legend over map */
  .map-stage-wrap { grid-template-columns: 1fr; }
  .map-leaflet { height: 50vh; min-height: 320px; }
  .map-sidebar { max-height: none; padding: 18px 16px; }

  /* Sticky NL bar wraps */
  .sticky-nl {
    flex-wrap: wrap; padding: 12px 14px; gap: 8px;
    align-items: stretch;
  }
  .sticky-nl-text { flex: 1 1 100%; font-size: 13px; }
  .sticky-nl form { width: 100%; }
  .sticky-nl input { flex: 1; min-width: 0; }
  .sticky-nl-close {
    position: absolute; top: 4px; right: 6px;
    width: 32px; height: 32px;
  }

  /* Tables / lists wrap nicely */
  .distillery-row { grid-template-columns: 28px 1fr 60px; gap: 10px; padding: 12px 14px; }
  .distillery-row .region { display: none; }

  /* Affiliate-card image small */
  .affiliate-card .aff-grid { grid-template-columns: 1fr; padding: 24px 20px; }
  .aff-img img { height: 180px; }

  /* Cross-link grid 1-col */
  .xlink-reise { padding: 28px 20px; }
  .xlink-reise-checks { padding-left: 0; }

  /* Forms */
  .nl-form { flex-direction: column; gap: 10px; }
  .nl-form input, .nl-form button { width: 100%; min-height: 48px; }

  /* Route stops: number badge on top, content below */
  .route-stop { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .rs-num { font-size: 36px; }
  .route-stats { grid-template-columns: 1fr 1fr; gap: 14px; }

  /* Share row */
  .share-row { gap: 6px; }
  .share-row a { font-size: 11px; padding: 6px 10px; min-height: 36px; }
  .share-label { flex: 1 1 100%; margin-bottom: 4px; }

  /* Cookie banner full-width */
  .cookie-banner { left: 8px; right: 8px; padding: 14px 16px; }
  .cookie-banner .actions { flex-wrap: wrap; }
  .cookie-banner button { flex: 1; min-height: 44px; min-width: 120px; }

  /* Hide the footer year-column inline disclaimer line */
  footer.bottom .row { flex-direction: column; gap: 12px; text-align: center; }
  footer.bottom a { margin: 0 8px; }
}

/* ===== Small phone (≤ 479px) ===== */
@media (max-width: 479px) {
  :root { /* slightly tighter base spacing */
    --pad: 16px;
  }
  header.top .top-inner { padding: 12px 16px; }
  .logo { font-size: 18px !important; }
  .logo-sub { font-size: 9px !important; letter-spacing: 0.2em; }

  /* Page heads tighter */
  .page-head { padding: 48px 16px 24px; }
  .page-h    { font-size: clamp(28px, 8vw, 36px); }
  .page-lede { font-size: 17px; line-height: 1.45; }

  /* Article meta wraps */
  .article-meta { flex-wrap: wrap; gap: 8px; font-size: 11px; }

  /* Mini-map narrow */
  .article-body [id^="minimap-"] { height: 280px !important; }

  /* Reisen route-hero stats: 2x2 */
  .route-stats { grid-template-columns: 1fr 1fr; }
  .rs-value { font-size: 20px; }

  /* Admin (status strip wraps tighter) */
  #admin-status-strip { padding: 10px 14px; gap: 10px; font-size: 9px; }
  #admin-status-strip .hint { display: none; }
  #admin-quick { bottom: 12px; right: 12px; }
  #admin-quick .admin-quick-btn { width: 46px; height: 46px; }

  /* Forms even tighter */
  .rp-form, .nfs-form { padding: 20px 16px; }
}

/* ===== Touch-Target Hardening (everywhere mobile-like) ===== */
@media (hover: none), (max-width: 899px) {
  a, button, input[type="submit"], .pill, .btn-cta, .aff-cta, .rs-book {
    min-height: 44px;
  }
  .pill, .alpha-strip a { min-width: 44px; }
  /* Increase tap-area on small icon-like links without distorting layout */
  .share-row a, footer.bottom a { padding: 8px 12px; }
}

/* ===== Reduce-Motion respect ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reisen-card:hover, .xl-card:hover, .card:hover {
    transform: none !important;
  }
}

/* ===== Print stylesheet — minimal, ink-friendly ===== */
@media print {
  header.top, footer.bottom, .sticky-nl, .cookie-banner,
  .share-row, .nl-section, .xlink {
    display: none !important;
  }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
  .article-body { font-size: 11pt; line-height: 1.5; max-width: 100%; }
  .article-hero h1 { font-size: 22pt; }
}