/* ------------------------------------------------------------------
   Responsive-/Mobil-Overrides für die Hübner-Gruppe-Website
   Ergänzt das ursprüngliche feste 918px-Layout, ohne die Original-CSS
   zu verändern. Wird als letztes Stylesheet eingebunden.
   ------------------------------------------------------------------ */

img { max-width: 100%; }

/* ====== Tablet & Smartphone: einspaltiges, flüssiges Layout ====== */
@media (max-width: 900px) {

  /* Grundgerüst flüssig statt 918px fest */
  #container, #header, #mainContainer, #footer {
    width: auto !important;
    max-width: 100% !important;
  }
  #container { padding: 0 !important; background: #fff !important; }
  html, body { height: auto !important; }
  body { background: #d4e3f3; overflow-x: hidden; }

  /* --- Header: Logo, Slogan und Foto gestapelt --- */
  #header {
    height: auto !important;
    background: #fff !important;
    overflow: visible !important;
    padding: 12px 0 0 !important;
    text-align: center;
  }
  #header h1 { text-align: center; }
  #header h1 a {
    position: static !important;
    display: inline-block !important;
    width: auto !important; height: auto !important;
    background: none !important;
    text-indent: 0 !important;
    margin: 0 auto !important;
  }
  #header h1 a img { display: inline-block !important; max-width: 180px; height: auto; }
  #header p {
    position: static !important;
    width: auto !important; height: auto !important;
    text-align: center !important;
    margin: 8px 10px 10px !important;
    font-size: 18px !important; line-height: 22px !important;
    color: #444 !important;
  }
  #headerImage { position: static !important; width: 100% !important; height: auto !important; }
  #headerImage img { width: 100% !important; height: auto !important; display: block; }

  /* --- Navigation: zentriert, eigener dunkler Hintergrund
         (der Frame im Bild header_01.jpg entfällt im mobilen Layout) --- */
  #menu {
    height: auto !important;
    background: #003571 !important;
    padding: 4px 0 !important;
    overflow: hidden;
  }
  #menu ul { margin: 0 !important; text-align: center; }
  #menu li {
    float: none !important;
    display: inline-block !important;
    height: auto !important; line-height: 1.4 !important;
    border-left: none !important;
    margin: 4px 2px !important;
    padding: 6px 10px !important;
  }
  #menu a { color: #fff !important; }

  /* --- Inhalt + Sidebar untereinander --- */
  #mainContainer { min-height: 0 !important; }
  #content {
    width: auto !important;
    float: none !important;
    border-right: none !important;
    padding: 16px !important;
    padding-top: 16px !important;     /* hebt die 55px-Sonderregel einzelner Referenzseiten auf */
    min-height: 0 !important;
  }
  #content p { text-align: left !important; }
  /* Lange URLs/Wörter (z. B. Behörden-Links im Datenschutz) umbrechen */
  #content, #content p, #content li, #content a,
  #sidebar, #sidebar p, #sidebar li, #sidebar a {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  #sidebar {
    position: static !important;
    width: auto !important;
    top: auto !important; right: auto !important;
    padding: 16px !important;
    border-top: 1px dotted #003571;
  }

  /* --- Feste Inhaltsbreiten (500px etc.) aufheben --- */
  #mainContainer #content .csc-default,
  #mainContainer .tx-imagecycle-pi1,
  #mainContainer .tx-imagecycle-pi1 ul,
  .eckdaten { width: auto !important; max-width: 100% !important; }
  #mainContainer .tx-imagecycle-pi1 ul img,
  #mainContainer .tx-imagecycle-pi1 img { width: 100% !important; height: auto !important; }
  #mainContainer img { max-width: 100%; height: auto; }
  .floatImg .img, .floatImg .content {
    float: none !important; width: auto !important; margin: 0 0 12px !important;
  }

  /* --- Eingebettete Google-Maps-Karten --- */
  iframe { max-width: 100% !important; }

  /* --- Kontaktformular --- */
  #contact fieldset { width: auto !important; }
  #contact label { width: auto !important; float: none !important; display: block !important; margin-bottom: 2px; }
  #contact li { clear: both !important; }
  #contact input, #contact textarea { width: 100% !important; box-sizing: border-box !important; }
  #contactAbsenden { margin-left: 0 !important; width: auto !important; }

  /* --- Footer mit eigenem Hintergrund --- */
  #footer { height: auto !important; background: #003571 !important; padding: 10px !important; }
  #footer p { line-height: 1.5 !important; }
}

/* ====== Kleine Smartphones ====== */
@media (max-width: 480px) {
  body { font-size: 13px; }
  #header p { font-size: 16px !important; }
  #header h1 a img { max-width: 150px; }
  #menu li { padding: 6px 8px !important; }
  #content h2 { font-size: 18px !important; line-height: 22px !important; }
  .eckdaten th { width: 45% !important; }
}