/* ==========================================================================
   nat-mobile.css  ·  Mobilansicht der Normaußentemperatur-SUCHSEITE (≤ 640 px)
   WAS     Überschreibt die Desktop-Regeln aus nat-redesign.css für schmale Bildschirme.
   WOHER   Canvas „Normaußentemperatur Redesign“, Boards „B · Mobil Hell“ und „B · Mobil Dunkel“ (390 px).
   WOHIN   NACH nat-redesign.css einbinden. Ersetzt dessen bisherigen @media (max-width: 640px)-Block
           (dieser Block sollte dort entfernt werden, damit keine zwei Regelsätze konkurrieren).
   ÄNDERT  Nur Darstellung ≤ 640 px. Hell/Dunkel kommt unverändert aus den Tokens in nat-redesign.css.
   HINWEIS Klassennamen mit „NEU“ gibt es im Desktop-Stand evtl. noch nicht oder anders benannt.
           Dann nach ROLLE zuordnen (Abschnitt 4 im Auftrag), nicht neue Elemente doppelt anlegen.
   ========================================================================== */

@media (max-width: 640px) {

  /* ---- Kopfzeile: Menü · Titel · Umschalter (nur Symbol) ---- */
  .nat-header { padding: 0 16px; gap: 12px; min-height: 64px; flex-wrap: nowrap; }
  .nat-brand { flex: 1; min-width: 0; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nat-credit { display: none; }                                    /* wandert in den Footer (siehe .nat-footer__mobile) */
  /* .nat-ext-link gibt es seit dem Menü-Auftrag (27.10.2026) nicht mehr:
     der Verweis „Heizlastrechner.at ↗“ steht jetzt als Karte im Menü. */
  .nat-spacer { display: none; }
  .nat-theme-toggle { width: 44px; height: 44px; padding: 0; border-radius: 999px; justify-content: center; flex: none; }
  .nat-theme-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }  /* NEU: Textlabel nur für Screenreader */

  /* ---- Hauptbereich ---- */
  .nat-main { padding: 28px 20px 32px; gap: 28px; }
  .nat-hero { gap: 14px; }
  .nat-eyebrow { font-size: 12px; }
  .nat-h1 { font-size: 34px; line-height: 1.08; }
  .nat-lead { font-size: 16px; line-height: 1.5; }

  /* ---- Suche: Feld, darunter Suchen + Reset gleich breit, darunter Beispiele 2 × 2 ---- */
  .nat-search-form { gap: 10px; margin-top: 6px; }
  /* Struktur (NEU, gilt für alle Breiten): .nat-search > .nat-search__field (Lupe, Eingabe, ×) + .nat-search__actions (Suchen, Reset).
     Desktop: beides nebeneinander in der gemeinsamen Box. Mobil: Box wird aufgelöst, Feld bekommt den Rahmen, Knöpfe liegen darunter. */
  .nat-search { flex-direction: column; align-items: stretch; gap: 10px; padding: 0; border: 0; background: transparent; box-shadow: none; border-radius: 0; }
  .nat-search:focus-within { outline: 0; }
  .nat-search__field { display: flex; align-items: center; gap: 10px; padding: 4px 14px; background: var(--nat-surface); border: 1.5px solid var(--nat-line-strong); border-radius: 16px; box-shadow: var(--nat-shadow); }
  .nat-search__field:focus-within { outline: 3px solid var(--nat-focus); outline-offset: 2px; }
  .nat-search__input { flex: 1 1 0; min-width: 0; min-height: 52px; font-size: 16px; padding: 0; }   /* 16 px verhindert iOS-Zoom */
  .nat-search__clear { flex: none; width: 44px; height: 44px; }         /* × im Feld bleibt, falls live vorhanden (E-M3) */
  .nat-search__actions { display: flex; gap: 10px; width: 100%; }
  .nat-search__actions > .nat-search__btn { flex: 1; min-height: 52px; padding: 0; border-radius: 14px; font-size: 16px; }   /* Suchen und Reset: GLEICH breit */

  .nat-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
  .nat-chips__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }  /* „Beispiele:“ nur für Screenreader; Gruppe bekommt aria-label */
  .nat-chip { width: 100%; min-height: 48px; padding: 0 12px; text-align: center; justify-content: center; }
  .nat-hint { font-size: 13px; }

  /* ---- Spalten untereinander ---- */
  .nat-cols { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 28px; }
  .nat-col-left, .nat-col-right { flex: none; width: 100%; }
  .nat-col-left { gap: 28px; }

  /* ---- Erweiterte Suche ---- */
  .nat-panel { padding: 16px 16px 18px; border-radius: 20px; gap: 14px; }
  .nat-panel__title, .nat-hits__title { font-size: 17px; }
  .nat-check__long { display: none; }                                   /* NEU: Text „Erweiterte Suche aktivieren“ */
  .nat-check__short { display: inline; }                                /* NEU: Text „Aktivieren“ */
  .nat-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .nat-field { min-width: 0; }
  .nat-field:last-child { grid-column: 1 / -1; }                        /* Ortskennziffer volle Breite, wie live */
  .nat-field input { min-height: 48px; font-size: 16px; padding: 0 12px; }
  .nat-panel__note { font-size: 13px; }

  /* ---- Treffer ---- */
  .nat-list { border-radius: 16px; }
  .nat-hit { min-height: 60px; padding: 10px 14px; }
  .nat-hit__name { font-size: 16px; }
  .nat-hit__sub { font-size: 13px; }
  .nat-badge { font-size: 12px; padding: 5px 9px; }

  /* ---- Ergebniskarte ---- */
  .nat-idle { padding: 24px 20px; border-radius: 22px; }
  .nat-idle h2 { font-size: 20px; }
  .nat-idle p { font-size: 15px; }
  .nat-card { padding: 20px; border-radius: 22px; gap: 22px; }
  .nat-card__head { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 10px; }
  .nat-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }   /* NEU: Zeile KG-Badge + Datenblatt-Knopf (steht in der mobilen Vorlage OBEN, vor dem Namen) */
  .nat-card__head .nat-badge { font-size: 13px; border-radius: 9px; padding: 6px 11px; }
  .nat-card__title { font-size: 28px; }
  .nat-card__kind { margin-top: 6px; font-size: 14px; line-height: 1.4; }
  .nat-dl-btn {                                                         /* NEU: oranger Knopf „Datenblatt herunterladen“ (Link auf …/download?kg=…) */
    min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 14px; font-weight: 700;
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none;
    background: var(--nat-btn); color: var(--nat-btn-text);
  }
  .nat-temp { gap: 8px; }
  .nat-temp__value { font-size: 60px; }
  .nat-temp__unit { font-size: 22px; }
  .nat-scale { max-width: none; margin-top: 8px; }
  .nat-scale__labels { font-size: 11px; }
  .nat-scale__long { display: none; }                                   /* NEU: „Wertebereich “ vor „Österreich“ entfällt mobil */
  .nat-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; padding-top: 18px; }
  .nat-facts dd { font-size: 17px; }
  .nat-map { aspect-ratio: 4 / 3; height: auto; border-radius: 16px; }   /* nach Größenänderung map.invalidateSize() aufrufen */
  .nat-map .leaflet-control-zoom a { width: 36px; height: 36px; line-height: 36px; }  /* größere Touch-Ziele */

  /* ---- Weitere Informationen ---- */
  .nat-info { border-radius: 16px; }
  .nat-info > summary { min-height: 56px; padding: 0 18px; font-size: 16px; }
  .nat-info ul { padding: 0 18px 20px 36px; font-size: 14px; }

  /* ---- Footer: nimmt Credit und Link auf, die oben ausgeblendet sind ---- */
  .nat-footer__inner { padding: 22px 20px calc(32px + env(safe-area-inset-bottom)); gap: 12px; }
  .nat-footer__mobile { display: block; }                               /* NEU: Zeile „Tool von Jakob Mathä“ */
  .nat-kw { font-size: 12px !important; line-height: 1.7; }
}
@media (min-width: 641px) {
  .nat-footer__mobile, .nat-check__short { display: none; }
}