@media (max-width: 920px) {
  .app-shell { width: min(100% - 22px, 760px); padding-top: 14px; }
  .hero-panel { grid-template-columns: 1fr; padding: 24px; min-height: auto; }
  .hero-orb { width: 150px; height: 150px; justify-self: center; }
  .control-grid, .dashboard-grid, .status-strip { grid-template-columns: 1fr; }
  .forecast-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .metric-grid .metric-wide { grid-column: 1 / -1; }
  .calendar-day { min-height: 92px; }
}

@media (max-width: 520px) {
  body { background-attachment: fixed; }
  .app-shell { width: min(100% - 14px, 430px); padding-bottom: 26px; }
  .panel, .hero-panel, .dialog-card { border-radius: 18px; }
  .panel { padding: 15px; }
  .hero-panel { padding: 20px 16px; gap: 16px; }
  h1 { font-size: 2.45rem; }
  h2 { font-size: 1.12rem; }
  .hero-text { font-size: .96rem; line-height: 1.5; }
  .hero-orb { width: 112px; height: 112px; }
  .auth-card { display: grid; }
  .jarvis-btn { width: 100%; margin-right: 0; justify-content: center; }
  .calendar-actions { display: grid; grid-template-columns: 1fr 1.4fr 1fr; width: 100%; gap: 8px; }
  .calendar-actions .jarvis-btn { margin: 0; }
  .status-chip { border-radius: 16px; align-items: center; }
  .status-chip strong { text-align: right; }
  .current-main strong { font-size: 4.3rem; }
  .forecast-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
  .forecast-card { flex: 0 0 78%; scroll-snap-align: start; }
  .weekday-row, .calendar-grid { gap: 5px; }
  .weekday-row { font-size: .76rem; }
  .calendar-day { min-height: 72px; padding: 7px; }
  .day-note-preview, .day-entry-preview { display: none; }
  .holiday-label { font-size: .62rem; padding: 2px 5px; max-width: 100%; }
  .draw-toolbar { display: grid; grid-template-columns: 1fr; }
  .dialog-actions { display: grid; grid-template-columns: 1fr; }
}

@media (max-width: 370px) {
  .metric-grid { grid-template-columns: 1fr; }
  .forecast-card { flex-basis: 88%; }
  .calendar-day { min-height: 62px; }
}

/* v1.2.0 · Mobile Cover */
@media (max-width: 920px) {
  .hero-panel-cover {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-panel-cover::before {
    background:
      linear-gradient(180deg, rgba(2,8,5,.92), rgba(2,8,5,.36) 58%, rgba(2,8,5,.82)),
      radial-gradient(circle at 50% 58%, rgba(85,255,204,.13), transparent 18rem);
  }

  .hero-cover-frame { order: 2; }
  .hero-copy { order: 1; }
  .hero-cover-frame figcaption { text-align: left; }
}

@media (max-width: 520px) {
  .hero-feature-tags { gap: 7px; margin-top: 16px; }
  .hero-feature-tags span { font-size: .78rem; padding: 6px 9px; min-height: 30px; }
  .hero-cover-frame picture { border-radius: 16px; }
  .hero-cover-frame figcaption { font-size: .78rem; }
}

/* v1.3.0 · Mobile Komfortkarten */
@media (max-width: 920px) {
  .status-strip { grid-template-columns: 1fr; }
  .current-weather { grid-row: auto; }
  .air-item { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 520px) {
  .air-panel, .insight-panel { min-height: auto; }
  .forecast-card { min-height: 300px; }
}

/* v1.4.0 · Mobile Allergie- & Smog-Radar */
@media (max-width: 920px) {
  .allergy-panel, .smog-panel, .score-panel { min-height: auto; }
  .radar-row { grid-template-columns: 1fr; align-items: start; }
  .radar-headline { align-items: flex-start; flex-direction: column; }
  .check-chip.wide { flex-basis: auto; }
}

@media (max-width: 520px) {
  .allergy-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .check-chip { justify-content: center; padding: 8px 7px; font-size: .78rem; }
  .check-chip.wide { grid-column: 1 / -1; }
  .score-item { grid-template-columns: 1fr; }
  .score-item b { font-size: 1.1rem; }
}


@media (max-width: 720px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .legal-links {
    justify-content: flex-start;
  }
  .app-footer {
    width: min(100% - 18px, 1180px);
    margin-bottom: 24px;
    padding: 14px;
    border-radius: 18px;
  }
  .legal-page main {
    width: min(100% - 18px, 980px);
  }
  .legal-hero,
  .legal-section {
    padding: 14px;
  }
}


/* v1.15.0 · Mobile Kalender */
@media (max-width: 520px) {
  .calendar-status { font-size: .82rem; padding: 9px 10px; }
  .holiday-label { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}


/* v1.19.0 · Mobile Allergie-Status */
@media (max-width: 520px) {
  .allergy-storage-hint { font-size: .78rem; padding: 8px; }
}

@media (max-width: 640px) {
  .urgency-select { font-size: .95rem; padding: 11px 12px; }
}


/* v1.20.0 · Mobile Hamburger-Menü */
@media (max-width: 920px) {
  .hamburger-toggle {
    top: 10px;
    right: 10px;
    width: 58px;
    min-height: 48px;
    border-radius: 16px;
  }
  .hamburger-toggle span { width: 24px; }
  .hamburger-toggle b { font-size: .56rem; }
  .quick-nav {
    top: 66px;
    right: 10px;
    width: min(360px, calc(100vw - 20px));
  }
  .quick-nav-card {
    border-radius: 20px;
    max-height: 78vh;
    padding: 14px;
  }
  .quick-nav-links { gap: 7px; }
  .quick-nav-links a { padding: 10px 11px; border-radius: 14px; font-size: .94rem; }
}

@media (max-width: 420px) {
  .quick-nav {
    left: 10px;
    right: 10px;
    width: auto;
  }
  .quick-nav-head strong { font-size: 1.05rem; }
}


/* v1.21.0 · Mobile Statuskarten */
@media (max-width: 720px) {
  .status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .status-chip { min-height: 70px; padding: 12px; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; }
  .status-symbol { width: 30px; height: 30px; border-radius: 10px; }
  .status-chip .status-label { font-size: .72rem; letter-spacing: .06em; }
  .status-chip strong { font-size: .95rem; }
}
@media (max-width: 390px) {
  .status-strip { grid-template-columns: 1fr !important; }
}


/* v1.25.0 · Mobile Ortssuche & Favoriten */
@media (max-width: 720px) {
  .location-search-row { grid-template-columns: 1fr; }
  .location-result-card,
  .favorite-location-card { grid-template-columns: 1fr; }
  .location-result-actions,
  .favorite-location-actions { justify-content: stretch; }
  .location-result-actions .jarvis-btn,
  .favorite-location-actions .jarvis-btn { width: 100%; }
  .favorite-location-head { align-items: stretch; flex-direction: column; }
}

/* v1.26.0 · Mobile Header-Sprachpaket */
@media (max-width: 920px) {
  .control-grid { grid-template-columns: 1fr; }
  .hero-voice-card { order: 3; }
}

@media (max-width: 520px) {
  .hero-voice-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .hero-switch {
    width: 100%;
    grid-template-columns: 1fr auto;
  }
  .hero-voice-controls {
    grid-template-columns: 1fr;
  }
  .hero-voice-controls .jarvis-btn {
    width: 100%;
  }
}


/* v1.30.0 */
@media (max-width: 640px) {
  .calendar-sync-status { font-size: .86rem; }
  .sketch-details > summary { padding: 11px 12px; }
  .sketch-details .draw-toolbar,
  .sketch-details #drawCanvas { margin-left: 10px; margin-right: 10px; width: calc(100% - 20px); }
}


/* v1.32.0 · Mobile Hauptseiten-Link */
@media (max-width: 520px) {
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .hero-main-link {
    width: 100%;
  }
  .hero-actions-note {
    font-size: .78rem;
  }
}


/* v1.34.0 · Mobile Morgen & Wetterkarte */
@media (max-width: 920px) {
  .tomorrow-summary-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weather-map-canvas { min-height: 360px; }
  .map-actions { width: 100%; justify-content: stretch; }
  .map-actions .jarvis-btn { flex: 1 1 145px; }
}


@media (max-width: 680px) {
  .tomorrow-summary-list { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .tomorrow-card { min-height: auto; padding: 13px; }
  .tomorrow-temp { font-size: 2rem; }
  .tomorrow-meta { font-size: .84rem; }
  .weather-map-canvas { min-height: 320px; border-radius: 16px; }
  .weather-map-status { font-size: .82rem; }
}


/* v1.37.0 · Mobile Radar-Zeitraffer */
@media (max-width: 640px) {
  .radar-timeline {
    grid-template-columns: auto 1fr auto;
  }
  .radar-timeline #radarPlayBtn {
    grid-column: 1 / -1;
    order: -1;
  }
  .radar-slider-wrap {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {

  .radar-legend-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .radar-legend-labels {
    font-size: .68rem;
  }
}

@media (max-width: 680px) {
  .radar-window-note {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 680px) {
  .daypart-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

@media (max-width: 560px) {
  .calendar-entry-item {
    grid-template-columns: 1fr;
  }
  .calendar-entry-item .jarvis-btn {
    width: 100%;
  }
}


@media (max-width: 920px) {
  .tomorrow-panel-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
  .daypart-header-meta {
    width: 100%;
    min-width: 0;
    justify-items: start;
    text-align: left;
  }
}

@media (max-width: 680px) {
  .daypart-header-time {
    font-size: 1.9rem;
    letter-spacing: .08em;
  }
  .daypart-header-date {
    font-size: .84rem;
  }
  .daypart-header-range {
    font-size: .76rem;
  }
}


/* v1.63 · Mobile weniger Scrollen */
@media (max-width: 680px) {
  .mobile-collapse {
    border: 1px solid rgba(85,255,204,.16);
    border-radius: var(--radius-sm);
    background: rgba(0,0,0,.14);
    padding: 0;
    margin-top: 10px;
  }
  .mobile-collapse > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 11px 12px;
    cursor: pointer;
    color: var(--cyan);
    font-weight: 900;
    letter-spacing: .02em;
    list-style: none;
    user-select: none;
  }
  .mobile-collapse > summary::-webkit-details-marker {
    display: none;
  }
  .mobile-collapse > summary::after {
    content: '⌄';
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(85,255,204,.22);
    border-radius: 999px;
    color: var(--green);
    transition: transform .18s ease;
  }
  .mobile-collapse[open] > summary::after {
    transform: rotate(180deg);
  }
  .mobile-collapse-content,
  .mobile-collapse > .hint {
    margin: 0 12px 12px;
  }
  .hero-voice-details {
    border-radius: 16px;
    background: rgba(0,0,0,.18);
  }
  .hero-voice-details .hero-voice-controls {
    padding: 0 10px 10px;
  }
  .current-region-grid {
    margin-bottom: 0;
  }
  .current-details .metric-grid {
    margin-top: 0;
  }
  .air-quality-details,
  .smog-details {
    margin-top: 0;
  }

  #morgen .daypart-block {
    overflow: hidden;
  }
  #morgen .daypart-title {
    padding-right: 4px;
  }
  #morgen .daypart-title span::after {
    content: ' · nach links/rechts wischen';
    color: var(--cyan);
  }
  #morgen .daypart-list {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 12px;
    scrollbar-width: thin;
  }
  #morgen .daypart-list .daypart-card,
  #morgen .daypart-list .tomorrow-card {
    flex: 0 0 82%;
    min-width: 0;
    scroll-snap-align: start;
  }
}

@media (max-width: 370px) {
  #morgen .daypart-list .daypart-card,
  #morgen .daypart-list .tomorrow-card {
    flex-basis: 88%;
  }
}


/* v1.64.0 · Mobile Hamburger unten rechts sticky/fixed */
@media (max-width: 920px) {
  .hamburger-toggle {
    top: auto !important;
    right: calc(max(12px, env(safe-area-inset-right)) + 70px) !important;
    bottom: calc(max(14px, env(safe-area-inset-bottom)) + 70px) !important;
    width: 60px;
    min-height: 54px;
    border-radius: 18px;
    z-index: 95;
  }

  .quick-nav {
    top: auto !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: calc(max(14px, env(safe-area-inset-bottom)) + 138px) !important;
    width: min(360px, calc(100vw - 20px));
    max-height: min(74vh, 620px);
  }

  .quick-nav-card {
    max-height: min(74vh, 620px);
    overflow: auto;
  }
}

@media (max-width: 420px) {
  .quick-nav {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
  }
}