/* Handy-Fassung der Unterseiten (unter 900 px, gleiche Grenze wie Kopfzeile und Menü).
   Die Seiten tragen ihre Gestaltung als Inline-Styles aus Claude Design; deshalb überschreibt
   diese Datei mit !important und greift nur an Elementen mit data-h-Marke. */

[data-h~="nur-handy"] { display: none; }

/* Navbar: hauchdünner Goldrahmen auf Grund-Navbar und hellen Kopien (Variante A, 13.10.).
   Rahmt die schmalen Farbstreifen, die an fast waagerechten Wellenkanten stehen bleiben. */
[data-kopf="basis"], [data-kopf="kopie"] { box-shadow: 0 0 0 1px rgba(201, 168, 102, .75) !important; }
/* Untermenü Weihnachtsdorf: gleicher hauchdünner Goldrahmen (Rand statt Schatten, weil clip-path Schatten abschneidet; 13.10.) */
/* beide Panels: das in der Grund-Navbar und seine Kopie in der Spiegel-Ebene (die liegt über Blau obenauf) */
[style*="min-width: 300px"][style*="border-radius: 20px"], [style*="min-width:300px"][style*="border-radius:20px"] { border: 1px solid rgba(201, 168, 102, .75) !important; gap: 4px; }

/* Vollbild-Dialoge (Marktplan, Bild-Großansicht): Seite dahinter scrollt nicht mit (13.10.) */
html:has(dialog[open]), html:has(dialog[open]) body { overflow: hidden !important; }

/* Besondere Tage (Öffnungszeiten): auch am Rechner Datum über dem Text, sonst bricht der Text rechtsbündig um (Review 13.10.) */
[data-h~="liste-stapel"] { grid-template-columns: minmax(0, 1fr) !important; }
[data-h~="liste-stapel"] > :nth-child(odd) { padding-bottom: 4px !important; }
[data-h~="liste-stapel"] > :nth-child(even) { text-align: left !important; border-top: 0 !important; padding-top: 0 !important; }

@media (max-width: 899.98px) {
  [data-h~="nur-gross"] { display: none !important; }
  [data-h~="nur-handy"] { display: inline !important; }

  /* Anfahrt-Karte: am Handy eigenes Hochformat-Bild mit größerer Schrift */
  [data-h~="anfahrtkarte"] { aspect-ratio: 4 / 5 !important; }

  /* Seitenkopf */
  #kopf { min-height: 0 !important; }
  [data-h~="kopf-info"] { min-height: 360px !important; }
  [data-h~="kopf-meldung"] { min-height: 480px !important; }
  [data-h~="kopf-thema"] { grid-template-columns: minmax(0, 1fr) !important; min-height: 0 !important; gap: 32px !important; padding-bottom: 40px !important; }
  [data-h~="kopf-thema"] > :first-child { min-height: 160px; }
  [data-h~="kopf-bild"] { justify-self: stretch !important; max-width: none !important; height: 240px !important; border-radius: 120px 120px 24px 24px !important; }

  /* Spalten */
  [data-h~="stapel"], [data-h~="eins"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-h~="zwei"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 16px !important; row-gap: 28px !important; }
  [data-h~="zwei"] h3, [data-h~="zwei"] h4 { font-size: 19px !important; hyphens: auto; overflow-wrap: break-word; }

  /* Zeitenlisten: Bezeichnung über dem Wert statt zweispaltig umgebrochen */
  [data-h~="liste"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-h~="liste"] > :nth-child(odd) { padding-bottom: 4px !important; }
  [data-h~="liste"] > :nth-child(even) { text-align: left !important; border-top: 0 !important; padding-top: 0 !important; }
  [data-h~="reihe"] { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
  [data-h~="reihe"] > * { order: 0 !important; }
  [data-h~="reihe"] > [data-h~="bild"] { order: -1 !important; }

  /* Bildkarten flacher, damit am Handy mehr als eine Karte je Bildschirm sichtbar ist */
  [data-h~="karte"] { aspect-ratio: 4 / 3 !important; }
  [data-h~="karte-flach"] { aspect-ratio: 2 / 1 !important; }
  [data-h~="wichtel-klein"] { width: 120px !important; justify-self: end !important; margin-top: -16px; }

  /* Flugzeiten untereinander statt abgeschnitten */
  [data-h~="zeiten"] { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  [data-h~="zeiten"] > [aria-hidden="true"] { display: none !important; }

  /* Video-Kasten der Meldung */
  [data-h~="video"] { flex-direction: column !important; align-items: stretch !important; }
  [data-h~="video"] > img { width: 100% !important; }

  /* Kalender: nur Tageszahl und Kurzzeit */
  [data-h~="kalender"] { gap: 4px !important; }
  [data-h~="kalender"] > div { min-height: 0 !important; }
  [data-h~="kal-tag"] { min-height: 54px !important; padding: 6px 2px !important; align-items: center !important; text-align: center; border-radius: 10px !important; }
  [data-h~="kal-tag"] > span { font-size: 12px !important; }
}