/* ==========================================================================
   Brasilien Entdecken Magazin — Responsive Layout
   Basis (Smartphone) in style.css · Tablet ab 640/768px · Desktop ab 1024px
   ========================================================================== */

/* ---------- ab 640px ---------- */
@media (min-width: 640px) {
  :root { --gutter: 24px; }

  .hero-secondary { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .m-grid { grid-template-columns: repeat(2, 1fr); }
  .blk-b .blk-list, .blk-c { grid-template-columns: repeat(2, 1fr); }
  .travel-more { grid-template-columns: repeat(2, 1fr); }
  .iv-cards { grid-template-columns: 1fr 1fr; }
  .nl-form .nl-row { flex-direction: row; }
  .nl-form .nl-row input { flex: 1; min-width: 0; }
  .nl-form .nl-row .btn { flex: none; }
  .nl-box-side .nl-row { flex-direction: column; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .field-full { grid-column: 1 / -1; }
  .nl-features { grid-template-columns: repeat(2, 1fr); }
  .principles { grid-template-columns: 1fr 1fr; }
  .mk-stats { grid-template-columns: repeat(4, 1fr); }
  .grid-3.mk-products { grid-template-columns: 1fr; }
  .result { grid-template-columns: 180px 1fr; gap: 20px; }
  .result-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
  .result-media img { width: 100%; height: 100%; object-fit: cover; }
  .search-big .btn span { display: inline; }
  .article-figure { margin-left: 0; margin-right: 0; }
  .article-figure figcaption { padding-left: 0; padding-right: 0; }
  .card-row { grid-template-columns: 1fr 132px; }
  .feature-travel h2 { font-size: 38px; }
}

/* ---------- ab 768px (Tablet) ---------- */
@media (min-width: 768px) {
  .topbar { display: block; }
  .brandbar-inner { grid-template-columns: 1fr auto 1fr; min-height: 96px; }
  .menu-open { justify-self: start; }
  .logo-mark { width: 38px; height: 38px; }
  .logo-mark span { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
  .logo-main { font-size: 26px; }
  .logo-sub { font-size: 11px; letter-spacing: .6em; }
  .tagline {
    display: block; text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--muted);
    margin: -10px 0 0; padding-bottom: 14px;
  }
  .tagline span { color: var(--blue); }
  .brand-cta { display: inline-flex; }

  .page-head h1 { font-size: 42px; }
  .hero .card-lead .card-title { font-size: 36px; }
  .card-lead .card-title { font-size: 30px; }

  .blk-a { grid-template-columns: 1.5fr 1fr; gap: 32px; }
  .blk-b { grid-template-columns: 1.25fr 1fr; gap: 28px; }
  .blk-b .blk-list { grid-template-columns: 1fr; }
  .blk-c { grid-template-columns: repeat(3, 1fr); }

  .duo { grid-template-columns: 1fr 1fr; gap: 40px; }
  .iv-feature { grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
  .briefing-inner { grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
  .nl-hero-inner { grid-template-columns: 1.2fr 1fr; gap: 48px; }
  .nl-hero h1 { font-size: 52px; }
  .footer-nl-inner { grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
  .footer-main { grid-template-columns: 1.6fr repeat(4, 1fr); }
  .footer-brand { grid-column: auto; }
  .listing { grid-template-columns: 1fr 340px; gap: 40px; }
  .listing-side { position: relative; }
  .contact-card { position: sticky; top: 72px; }
  .contact-layout { grid-template-columns: 1.6fr 1fr; gap: 48px; }
  .mk-formats { grid-template-columns: 1fr 1fr; }
  .mk-contact { grid-template-columns: 1fr 1.6fr; gap: 48px; }
  .grid-3.mk-products { grid-template-columns: repeat(3, 1fr); }
  .search-layout { grid-template-columns: 240px 1fr; gap: 40px; }
  .iv-tile { grid-template-columns: 200px 1fr; }
  .iv-cards { grid-template-columns: 1fr; }
  .article-head h1 { font-size: 40px; }
  .market-hero h1, .listing-main h1 { font-size: 38px; }
  .mk-hero h1 { font-size: 42px; }
  .about-hero { min-height: 480px; }
  .about-hero h1 { font-size: 56px; }
  .feature-travel { min-height: 600px; }
  .feature-travel h2 { font-size: 44px; }
  .ad-top .ad-copy strong { font-size: 18px; }
}

/* ---------- ab 1024px (Desktop) ---------- */
@media (min-width: 1024px) {
  .menu-open { visibility: hidden; }
  .brand-date { display: block; grid-column: 1; grid-row: 1; }
  .menu-open { grid-column: 1; grid-row: 1; pointer-events: none; }
  .drawer, .drawer-backdrop { display: none; }

  /* Navigation mit Mega-Menü */
  .nav-list { justify-content: center; overflow: visible; gap: 8px; }
  .nav-link { height: 52px; padding: 0 14px; font-size: 13px; }
  .nav-link svg { display: inline; }
  .nav-item.is-open > .nav-link svg { transform: rotate(180deg); }
  .has-dropdown { position: relative; }

  .mega {
    display: block; position: absolute; left: 0; right: 0; top: 100%; background: #fff;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 18px 32px rgba(20, 33, 45, .08);
    opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s;
  }
  .nav-item.is-open .mega { opacity: 1; visibility: visible; transform: none; }
  .mega-inner { display: grid; grid-template-columns: 1fr 300px; gap: 40px; padding-top: 28px; padding-bottom: 32px; }
  .mega-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
  .mega-col { border-left: 1px solid var(--line); padding-left: 16px; }
  .mega-title { display: block; font-size: 13px; font-weight: 800; color: var(--blue); margin-bottom: 10px; line-height: 1.3; }
  .mega-story { font-family: var(--font-serif); font-size: 14px; line-height: 1.4; color: var(--ink-strong); }
  .mega-feature img { aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 10px; }
  .mega-feature .kicker { margin-bottom: 4px; }
  .mega-feature strong { display: block; font-family: var(--font-serif); font-size: 15px; line-height: 1.35; color: var(--ink-strong); }

  .dropdown {
    display: block; position: absolute; left: 0; top: 100%; min-width: 230px; list-style: none; background: #fff;
    border: 1px solid var(--line); box-shadow: 0 14px 28px rgba(20, 33, 45, .08); padding: 8px 0;
    opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s;
  }
  .nav-item.is-open .dropdown { opacity: 1; visibility: visible; transform: none; }
  .dropdown a { display: block; padding: 10px 18px; font-size: 14px; font-weight: 600; }
  .dropdown a:hover { background: var(--bg-soft); }

  /* Zweispaltiges Layout mit Werbe-Seitenleiste */
  .layout-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
  .layout-aside { display: block; }
  .layout-aside > :first-child { margin-top: 8px; }
  .mobile-only { display: none !important; }
  .sticky-ad { position: sticky; top: 72px; }
  .article-layout .layout-aside { padding-top: 12px; }

  .hero .card-lead { display: grid; grid-template-columns: 1fr; }
  .hero .card-lead .card-title { font-size: 40px; }
  .hero-secondary { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .hero-secondary .card-media { aspect-ratio: 4 / 3; }

  .ticker-list li { grid-template-columns: 56px 110px 1fr; align-items: baseline; padding: 11px 18px; }
  .ticker-list time { grid-row: auto; }

  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .layout-main .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .m-grid { grid-template-columns: repeat(4, 1fr); }
  .m-grid-page { grid-template-columns: repeat(3, 1fr); }
  .travel-more { grid-template-columns: repeat(3, 1fr) auto; align-items: start; }
  .travel-all { align-self: center; white-space: nowrap; }
  .iv-grid { grid-template-columns: 1.7fr 1fr; gap: 48px; align-items: center; }
  .partner-grid { grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .partner-row .card-row { border-top: 0; padding-bottom: 0; }

  .section { padding-top: 40px; }
  .section-head h2 { font-size: 26px; }
  .article-head h1 { font-size: 46px; }
  .page-head h1 { font-size: 48px; }
  .market-hero h1 { font-size: 44px; }
  .nl-features { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- ab 1280px ---------- */
@media (min-width: 1280px) {
  .layout-sidebar { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; }
  .hero .card-lead .card-title { font-size: 44px; }
  .layout-main .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .article-layout .layout-main .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Druck ---------- */
@media print {
  .demo-bar, .topbar, .mainnav, .search-panel, .ad, .layout-aside, .share, .site-footer, .nl-box, .related, .drawer { display: none !important; }
  .layout-sidebar { display: block; }
  body { color: #000; }
}

/* Overlay-Karte füllt die Höhe des Blocks */
@media (min-width: 768px) {
  .blk-b .card-overlay { height: 100%; }
  .blk-b .card-overlay .card-media { height: 100%; aspect-ratio: auto; min-height: 420px; }
}
@media (min-width: 768px) {
  .mk-format:last-child:nth-child(odd) { grid-column: 1 / -1; }
}