/* Impact Stones — Landscape / iPad / Desktop overlay
 * Aktiv NUR ab min-width: 900px. iPhone-Portrait sieht keine dieser Regeln.
 *
 * Strategie:
 *  - Mobile-CSS bleibt 100% unverändert
 *  - Hier nur ergänzende Regeln für grössere Viewports
 *  - max-width: 480px aus mobile.css wird gezielt überschrieben wo Sinn macht
 */

@media (min-width: 900px) {

  /* ── Bühne öffnen ── */
  #app {
    max-width: 1180px;
    padding: env(safe-area-inset-top) 32px env(safe-area-inset-bottom);
  }

  /* Topbar bleibt voll-breit, aber mit ein bisschen mehr Atem */
  .topbar {
    padding: 18px 0 10px;
  }

  /* ── Marketing-Home: zentriert mit ruhiger Bühne ── */
  .home-body {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 0;
  }
  .home-hero-area  { padding: 60px 0 8px; }
  .home-hero-brand { font-size: 64px; }
  .home-hero-headline { font-size: 32px; }
  .home-monolog    { font-size: 18px; line-height: 1.7; }
  .home-quote-text { font-size: 24px; }

  /* ── Stein-Landing: 2-Spalten (Poster links, CTA + Theme rechts) ── */
  .landing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
  }
  .landing-grid > .landing-grid-col {
    min-width: 0;
  }
  .screen.landing-screen {
    padding: 0 0 48px;
  }

  /* Poster im Landscape grösser darstellen */
  .poster-block {
    max-width: 100%;
  }

  /* ── Atlas: 60/40 Split, Karte links sticky ── */
  .atlas-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
  .atlas-layout .atlas-map-wrap {
    position: sticky;
    top: 20px;
    display: flex; flex-direction: column;
    gap: 14px;
  }
  .atlas-layout #atlas-map {
    height: calc(100vh - 200px);
    min-height: 520px;
    margin-bottom: 0;
  }
  .atlas-layout .atlas-sections-wrap {
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    padding-right: 10px;
  }
  /* dezenter Scrollbar im rechten Panel */
  .atlas-layout .atlas-sections-wrap::-webkit-scrollbar { width: 6px; }
  .atlas-layout .atlas-sections-wrap::-webkit-scrollbar-thumb {
    background: rgba(244,238,226,0.10);
    border-radius: 3px;
  }
  /* Atlas-Headline kompakter im Sidebar-Panel */
  .atlas-layout .atlas-headline {
    margin-bottom: 18px;
  }

  /* ── Story: 2-Spalten — Poster links, Stationen-Timeline rechts ── */
  .story-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    margin: 28px auto 0;
    max-width: 1080px;
  }
  .story-col-poster, .story-col-timeline { min-width: 0; }
  /* Timeline visuell auf Höhe des Bildes (nicht des Eyebrows „FÜR DEINE 7 TAGE") */
  .story-col-timeline .timeline { margin-top: 56px; }
  .story-col-timeline .timeline .tl-item {
    /* etwas mehr Atem im Querformat */
    padding-left: 28px;
  }

  /* Header-/Sponsor-Blöcke bleiben zentriert auf 720px */
  .landing-head, .kpi-row, .sponsor-block,
  .report-flag-wrap, .day-counter, .landing-welcome,
  .holder-relogin, .hero-cta, .landing-foot-links {
    max-width: 720px; margin-left: auto; margin-right: auto;
  }
  /* Foot-Links unter Stein-Landing zentrieren */
  .landing-foot-links {
    max-width: 720px; margin-left: auto; margin-right: auto;
    text-align: center;
  }

  /* ── PIN/Receive/Pass-Forms: zentriert in der Bühne ── */
  .screen .card,
  .screen form {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Tile-Row (Empfangen / Weitergeben / Story) horizontal statt vertikal */
  .tile-row {
    flex-direction: row;
    gap: 14px;
    max-width: 720px;
    margin-left: auto; margin-right: auto;
  }
  .tile-row > * { flex: 1; }

  /* KPI-Row breiter, weniger gestaucht */
  .kpi-row { gap: 16px; }
}

/* ── iPad-Landscape & Desktop-Wide ── */
@media (min-width: 1100px) {
  #app { padding-left: 48px; padding-right: 48px; }
  .home-hero-brand { font-size: 72px; }
  .home-hero-headline { font-size: 36px; }
}