/* ── Responsive breakpoints ─────────────────────────────────────── */

/* Hide banner on short screens */
@media only screen and (max-height: 550px) {
  #banner { display: none; }
}

/* Medium: hide decorative backgrounds, nudge menu */
@media only screen and (max-width: 950px) {
  #upperlist { background-position: top left; }
  #background1, #background2, #background3 {
    background-image: none;
    padding: 0;
  }
}

@media only screen and (max-width: 760px) {
  #umenu { right: 0; }
}

/* Large screens: bigger text */
@media only screen and (min-width: 1200px) {
  body { font-size: 1.1em; }
}
@media only screen and (min-width: 1280px) {
  #content { max-width: 81%; }
  #tresc { font-size: 1.1em; }
}
@media only screen and (min-width: 1500px) {
  #tresc { font-size: 1.2em; }
}

/* ── Tablet / mobile (≤ 640px) ──────────────────────────────────── */
@media only screen and (max-width: 640px) {
  html, body {
    background-color: white;
    background-image: none;
    padding: 0;
    margin: 0;
  }
  #background1, #background2, #background3, #background4 {
    padding: 0;
    background-image: none;
  }
  #upperlist {
    background-image: none;
    height: auto;
    min-height: 0;
    padding: 0.75em 0 0 0;
    background-color: #265583;
    position: relative;
  }
  #upperlist h1 {
    width: 260px;
    height: 54px;
    font-size: 1em;
    position: absolute;
    left: 0;
    top: 0.75em;
  }
  #upperlist h1 a { width: 260px; height: 54px; }
  #upperlist span.a { width: 260px; height: 54px; }
  #upperlist span.b {
    width: 260px;
    height: 54px;
    background-image: url(/gfx/hh_logo.jpg);
    background-position: top left;
    background-repeat: no-repeat;
  }
  #langs {
    position: absolute;
    right: 0;
    top: 0;
    flex-direction: column;
  }
  #langs li { float: none; margin: 6px 4px 0 0; }
  #umenu {
    position: static;
    margin: 58px 0 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
  }
  #umenu li {
    float: none;
    margin: 1% 1% 2px 1%;
    width: 48%;
    min-width: 0;
  }
  #umenu li.u5 { width: 98%; }
  #umenu li a, #umenu li div {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: none;
    font-size: 1em;
    font-weight: bold;
    color: white;
    background-color: #265583;
    padding: 12px 4px;
    text-align: center;
    min-width: 0;
    min-height: 44px;
    border-radius: 3px;
  }
  #umenu li div { background-color: #1d9dd9; }
  #umenu span, #umenu div span {
    background-image: none;
    background-color: inherit;
    display: inline;
    padding: 0;
    margin: 0;
  }
  #umenu span span, #umenu div span span {
    padding: 0; margin: 0;
    background-color: inherit;
    background-image: none;
  }
  #umenu li a:hover, #umenu li a:focus, #umenu li a:active {
    background-image: none;
    background-color: #103a55;
  }
  #banner { display: none; }
  #bgcommon { background-color: white; }
  #footer, #subwoofer, .suba {
    background-image: none;
  }
  .suba { padding: 8px; }
  #bottommenu li { display: block; }
  #bottommenu { text-align: left; }
  #tresc { font-size: 1em; padding: 12px; }
  #tresc ul li { margin-left: 1.2em; }
  #content { margin-bottom: 0; }
}

/* ── Small phones (≤ 400px) ─────────────────────────────────────── */
@media only screen and (max-width: 400px) {
  #umenu li { width: 98%; margin: 1% 1% 2px 1%; }
  #umenu li.u5 { width: 98%; }
  #upperlist h1, #upperlist h1 a,
  #upperlist span.a, #upperlist span.b {
    width: 200px;
    height: 44px;
  }
}