/* ==========================================================================
   Habbofun Radio – Responsive-Ergänzung
   Wird NACH allen anderen Stylesheets eingebunden. Über 962px Breite ändert
   sich nichts: die Seite sieht aus wie bisher.

   --s  = Viewport-Breite / 963   (wird von responsive.js gesetzt)
   --h  = Viewport-Breite / 956   (wird von responsive.js gesetzt)
   ========================================================================== */

:root { --s: 1; --h: 1; }
html  { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }


/* --------------------------------------------------------------------------
   TABLET  (701px – 962px)
   Das gesamte 963px-Layout wird proportional verkleinert. "zoom" verkleinert
   dabei auch die Layout-Höhe, es bleiben also keine Lücken.
   -------------------------------------------------------------------------- */
@media (min-width: 701px) and (max-width: 962px) {
  html .header,
  html .sbrett,
  html .contentleiste { zoom: var(--s); }

  /* Notenlinien-Band hinter dem Menü mitskalieren */
  html .bodybox > div[style*="notenlinien"] {
    top: calc(91px * var(--s)) !important;
    height: calc(51px * var(--s)) !important;
    background-size: auto 100% !important;
  }
}


/* --------------------------------------------------------------------------
   HANDY  (bis 700px)
   Header-Grafik wird auf Bildschirmbreite skaliert, Menü / Ticker / Login
   liegen in Originalgröße darunter. Schwarzes Brett und Inhalt werden
   untereinander angeordnet.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {

  /* Himmel-Hintergrund bleibt in Originalgröße (Pixelgrafik). Weil der Header
     auf dem Handy höher ist als das Bild (340px), wird alles darunter mit der
     Farbe der untersten Bildzeile aufgefüllt. Tag/Nacht setzt responsive.js. */
  html.is-day .bodybox {
  }
  html.is-night .bodybox {
  }

  /* ---------- Header: nur das Logo, mittig, volle Höhe ---------- */
  html .header {
    width: 100%;
    height: auto;
    padding-top: 225px;              /* Logo: 230px hoch, top: -5px */
    background: none;
    display: flex;
    flex-direction: column;
  }
  html .header-logo {
    left: 50%;
    margin-left: -273px;             /* halbe Logo-Breite (546px) */
  }
  html .header-habbosbg,
  html .header > div[style*="noten_neu"],
  html .bodybox > div[style*="notenlinien"] { display: none !important; }

  /* ---------- Header: Menü (liegt jetzt unter der Grafik) ---------- */
  html .header-menu-first {
    position: relative;
    top: auto; left: auto;
    order: 1;
    width: 100%;
    height: auto;
    background: #4793bf;
    box-shadow: inset 0px 27px #6fabcf;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    box-sizing: border-box;
  }
  html .header-menu-strich { display: none; }
  html #topmenu { display: flow-root; }
  html #topmenu + div { display: none; }          /* clear:left-Platzhalter */
  html #ao0, html #ao1, html #ao2, html #ao3 {
    position: relative;
    width: 25%;
    height: 44px;
    box-sizing: border-box;
    border-right: 1px solid #001e2f3b;
    html background-size: 100% 100% !important;   /* jQuery-Hover-Grafik dehnen */
  }
  html #ao3 { border-right: 0; }
  html #ao0 span, html #ao1 span, html #ao2 span, html #ao3 span {
    margin-top: 14px;
    font-size: 12px;
  }
  html .menu {
    top: 100%;
    left: 0;
    width: 150px;
    z-index: 10;
    box-sizing: border-box;
    font-size: 12px;
  }
  html #ao2 .menu, html #ao3 .menu { left: auto; right: 0; }
  html .menu div { line-height: 26px; }            /* größere Tipp-Flächen */

  /* ---------- Header: Ticker ---------- */
  html .header-apollon {
    position: static;
    order: 2;
    width: auto;
    padding: 4px 10px 6px;
    background: rgba(0,0,0,.45);
    color: #fff;
    font-size: 11px;
    overflow: hidden;
  }

  /* ---------- Header: Login / Hörer / Social ---------- */
  html .header-login {
    position: static;
    order: 3;
    display: flex;
    html flex-direction: row-reverse;     /* gleiche Reihenfolge wie bisher */
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 14px;
    padding: 6px 10px 8px;
    background: linear-gradient(360deg, #b9b9b9, #c4c4c4);
  }
  html .header-login > div {
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }


  /* ---------- Schwarzes Brett ---------- */
  html .sbrett {
    width: auto;
    height: auto;
    margin-top: 0;
    padding: 40px 0;
    background: url(../img/weisses_brett_top.png) repeat-x top, url(../img/weisses_brett_bot.png) repeat-x bottom, linear-gradient(180deg, #b5b5b5 0%, #b5b5b5 50%, #9a9a9a 50%, #9a9a9a 100%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 16px;
  }
  html .sbrett > div {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }
  html .sbrett > div[style*="left: 970px"] { display: none; }

  /* Slider */
  html .sbrett > div:nth-child(2) { flex: 0 0 100%; width: 100% !important; }
  html .sbrett div[style*="width: 450px"] {
    float: none !important;
    width: calc(100% - 20px) !important;
    max-width: 450px;
    margin: 0 auto !important;
  }
  html .sbrett div[style*="width: 449px"] {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 449 / 122;
    box-sizing: border-box;
  }
  html .sbrett div[style*="top: 100px"] { top: auto !important; bottom: 2px; }
  html .slide, html .slide a { display: block; }
  html .slide { width: 100%; }
  html .slide img { display: block; width: 100%; height: auto; }

  /* "Nächste Sendung"-Label */
  html .sbrett > div[style*="width: 220px"] { flex: 0 0 100%; width: 100% !important; }

  /* Player-Button: nicht mehr absolut positioniert */
  html .playerlink-frank { position: relative; left: auto; top: auto; }
  html .overall { margin: 0; }


  /* ---------- Inhalt ---------- */
  html .contentleiste {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 8px;
  }
  html .contentleiste table,
  html .contentleiste tbody,
  html .contentleiste tr,
  html .contentleiste td { display: block; width: 100%; box-sizing: border-box; }

  html .content-top,
  html .content-footer { display: none; }
  html .content-middle {
    width: auto;
    margin: 0;
    padding: 10px;
    background: #fff;
    border: 1px solid #B2B2B2;
    border-radius: 5px;
  }
  html .content-clear { height: 6px; }

  /* Artikel – groß */
  html .content-box-new { width: auto; display: flex; flex-wrap: wrap; align-items: flex-start; }
  html .content-box-new > a:first-child,
  html .article_content_big { flex: 0 0 100%; }
  html .article_image_big {
    position: relative;
    width: auto;
    height: auto;
    aspect-ratio: 580 / 213;
    margin-left: 0;
    background-size: cover;
  }
  html .article_image_big_over { width: 100%; height: 100%; }
  html .article_content_big { width: auto; float: none; margin-left: 0; }
  html .article_desc_big { margin-left: 0; }
  html .article_border { width: 100%; margin-left: 0; }

  /* Artikel – klein: Bild links, Text rechts */
  html .content-box-new > div[style*="article_image_small_bg"] {
    flex: 0 0 112px;
    width: 112px !important;
    height: auto !important;
    float: none !important;
    margin: 0 !important;
    background: none !important;
  }
  html .article_image_small {
    position: relative;
    float: none;
    width: 100px;
    height: 63px;
    margin: 6px 0 6px 0;
    background-size: cover;
  }
  html .article_image_small_over { width: 100%; height: 100%; }
  html .article_image_small > div[style*="margin-top:88px"] { zoom: .52; }
  html .article_image_content { margin-left: -40px; font-size: 10px; white-space: nowrap; }
  html .article_content_small {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    float: none;
    margin: 0 0 0 8px;
  }
  html .article_title { width: auto; margin-top: 4px; padding-bottom: 4px; }
  html .article_desc_small { width: auto; height: auto; margin-left: 0; }
  html .content-box-new > div[style*="clear"] { flex: 0 0 100%; height: 0; }
  html .morebox { width: auto; left: 0; }

  /* Rechte Spalte */
  html .boxholder,
  html .boxholder2 { margin-left: 0; }
  html .box_outer.right,
  html .box_outer.right.icon {
    width: auto;
    max-width: 305px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Footer */
  html .footer { height: auto; padding: 20px 8px 10px; box-sizing: border-box; }
  html div[style*="width: 800px"] { width: auto !important; box-sizing: border-box; }
}