/* KOSMOSNAH – gedrehtes Handy (Querformat, wenig Höhe) V001.
   Gilt nur bei Querformat mit höchstens 500 px Höhe und mehr als 700 px Breite.
   Desktop und Handy-Hochformat bleiben unverändert. Selektoren mit "html" davor,
   damit die Regeln auch nach dem Seitenwechsel ohne Neuladen gewinnen (Reihenfolge egal). */
@media (orientation:landscape) and (max-height:500px) and (min-width:701px){
  /* schmale Leiste oben statt Seitenleiste */
  html .sidebar{position:sticky;top:0;bottom:auto;width:auto;height:auto;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:10px;
    padding:5px calc(60px + env(safe-area-inset-right)) 5px calc(12px + env(safe-area-inset-left));
    overflow:visible;background:rgba(5,7,15,.95);border-right:0;border-bottom:1px solid var(--line)}
  html .side-logo img{width:36px;height:36px}
  html .sidebar .brand{margin:0;font-size:1.05rem;text-align:left;flex:0 0 auto}
  html .burger,html .menu-toggle{display:none}
  html .side-nav,html .menu-toggle:checked ~ .side-nav{display:flex;flex:1;flex-direction:row;justify-content:flex-end;flex-basis:auto;padding:0;width:auto}
  html .side-nav ul:first-child{display:flex;gap:2px}
  html .side-nav .nur-handy{display:list-item}
  html .side-nav a{padding:6px 10px;margin:0;border-left:0;border-bottom:2px solid transparent;border-radius:8px;font-size:.95rem;white-space:nowrap}
  html .side-nav a[aria-current=page]{border-left:0;border-bottom-color:var(--gold)}
  html .side-nav .side-legal{display:none}
  html .page{margin-left:0;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  html .mob{display:none}
  /* Musik-Knopf sitzt in der Leiste oben rechts und verdeckt so keinen Inhalt */
  html .musik-knopf{top:5px;bottom:auto;right:calc(10px + env(safe-area-inset-right));width:38px;height:38px}
  html .musik-knopf svg{width:20px;height:20px}
  /* Banner als flacher Streifen */
  html .desk .hero img{aspect-ratio:7.5/1;object-fit:cover;object-position:50% 42%;max-height:none;width:100%}
  html .hero-small img{max-height:none;aspect-ratio:7.5/1;object-fit:cover;object-position:50% 42%}
  /* Startseite: zwei Spalten */
  html .desk .intro{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:24px;align-items:start;text-align:center;padding:12px 20px 18px;max-width:none}
  html .desk .intro>*{grid-column:1}
  html .desk .intro .rechts{grid-column:2;grid-row:1/span 7}
  html .desk .intro h1.titel{font-size:1.55rem;margin:.1em 0 .3em}
  html .desk .intro .lead{font-size:.98rem;margin:0 0 .3em}
  html .desk .intro .cta{margin-top:10px;gap:10px}
  html .desk .intro .btn{min-width:0;padding:9px 18px;font-size:.95rem}
  html .desk .intro .crew{margin:12px 0 0;gap:16px}
  html .desk .intro .crew img{width:44px;height:44px}
  html .desk .intro .fakt-desk{margin:4px 0 0;max-width:none;font-size:.86rem;padding:7px 12px}
  html .desk .intro .desk-himmel{margin:10px 0 0;max-width:none;padding:12px 16px}
  html .desk-himmel .events li{padding:5px 0;font-size:.88rem;grid-template-columns:6.5em 1fr;gap:8px}
  html .desk-himmel .monat-titel{font-size:1rem}
  html .desk-himmel .quelle{font-size:.74rem}
  /* Unterseiten kompakter */
  html .sub{padding:14px 0 20px}
  html .sub-h1{font-size:1.4rem;margin:0 0 .35em}
  html .sub .intro-txt{margin:0 0 12px}
  html .hinweis{margin:0 0 10px;padding:8px 12px;font-size:.86rem}
  html .karten{grid-template-columns:1fr 1fr;gap:10px}
  html .karte{padding:10px}
  html .kopf{grid-template-columns:100px 1fr;gap:10px}
  html .kopf table{font-size:.84rem}
  html .kopf h2{font-size:1rem}
  html .flist li{grid-template-columns:210px 1fr;gap:16px;padding:10px}
  html .flist h2{font-size:1.08rem}
  html .zitat p{font-size:1.05rem}
  html .reihe{gap:10px}
  html .reihe p{font-size:.92rem}
  html .himmel-seite{padding:14px 20px 30px}
  html .himmel-seite h1{font-size:1.5rem}
  html .site-footer{padding:16px 20px calc(18px + env(safe-area-inset-bottom))}

  /* Lightbox: Bild links so hoch wie möglich, Text rechts daneben (hoch und quer) */
  html .lb{padding:6px calc(8px + env(safe-area-inset-right)) 6px calc(8px + env(safe-area-inset-left));align-items:center}
  html .lb-fenster,html .lb.quer .lb-fenster{flex-direction:row;align-items:flex-start;gap:14px;padding:10px;width:auto;
    max-width:100%;max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px)}
  html .lb-rahmen{align-self:center}
  html .lb-bild,html .lb.quer .lb-bild{max-height:calc(100vh - 34px);max-height:calc(100dvh - 34px);
    max-width:calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right) - 34px - 270px)}
  html .lb-info,html .lb.quer .lb-info{width:270px;flex:0 0 270px;padding:0 30px 0 0;align-self:stretch;display:block;
    max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto}
  html .lb.quer .lb-raster{display:block}
  html .lb-info h2,html .lb.quer .lb-info h2{font-size:1.05rem;text-align:left;margin:2px 0 6px}
  html .lb-info table,html .lb.quer .lb-info table{font-size:.84rem;margin:0 0 8px;width:auto}
  html .lb-info .erk,html .lb.quer .lb-info .erk{font-size:.88rem;margin:0 0 6px}
  html .lb-info .q{font-size:.76rem}
  html .lb-zu{top:6px;right:6px;width:34px;height:34px}
}