/* ============================================================
   responsive.css  –  Mobile-Overlay für www.wasserbueffelclub.de
   Wird NACH wbc.css und wbc_start.css geladen (page.includeCSS.css3).
   Lässt das Desktop-Layout unangetastet und greift erst unter 960px.
   ============================================================ */

/* Content-Bilder nie breiter als ihr Container */
#maincontent img { max-width: 100%; height: auto; }

/* Hamburger-Steuerung im Desktop-Layout ausblenden */
#menu .menu-toggle,
#menu .menu-burger { display: none; }


/* ============================================================
   MOBIL / TABLET:  alles unter 960px einspaltig stapeln
   ============================================================ */
@media (max-width: 960px) {

  /* Container von fest 890px auf fluid */
  #container {
    width: auto;
    max-width: 640px;
    padding: 0 15px;
  }

  /* Spalten nicht mehr nebeneinander floaten */
  #menu,
  #logo,
  #intro,
  #submenu,
  #maincontent {
    float: none;
    width: auto;
    margin-left: 0;
    margin-right: 0;
    min-height: 0;
  }

  /* Logo zentriert, etwas kompakter */
  #logo {
    width: 100%;
    height: 180px;
    margin-top: 20px;
    background-size: 160px 160px;
  }

  /* Intro: feste Höhe raus */
  #intro { margin-top: 15px; }
  #intro,
  #intro table { width: auto; height: auto; }
  #intro table  { font-size: 20px; }

  /* Maincontent volle Breite (gilt auch für die Slider-Box der Startseite) */
  #maincontent { width: auto; margin: 20px 0 10px 0; }

  /* Breite Content-Tabellen horizontal scrollbar machen statt Layout sprengen */
  #maincontent table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }

  /* Footer-Links nicht mehr 336px eingerückt */
  #imprint {
    padding: 12px 0;
    text-align: center;
  }

  /* ---------- Hauptnavigation als Hamburger ---------- */
  #menu {
    margin: 10px 0 0 0;
    position: relative;
  }

  /* Burger-Icon einblenden */
  #menu .menu-burger {
    display: block;
    cursor: pointer;
    padding: 10px 0;
    text-align: right;
  }
  #menu .menu-burger span {
    display: block;
    width: 30px;
    height: 3px;
    margin: 5px 0 5px auto;
    background: #fff;
  }

  /* Menü standardmäßig geschlossen, per Checkbox geöffnet */
  #menu > ul { display: none; text-align: left; margin-top: 8px; }
  #menu .menu-toggle:checked ~ ul { display: block; }
  #menu li { line-height: 40px; }   /* größere Tap-Targets */

  /* Untermenü (Unterseiten) ebenfalls linksbündig / volle Breite */
  #submenu { margin: 10px 0 0 0; }
  #submenu ul,
  #submenu li { text-align: left; }
}


/* ============================================================
   SEHR SCHMAL:  Telefone < 480px
   ============================================================ */
@media (max-width: 480px) {
  #intro table { font-size: 17px; }
  #logo { height: 150px; background-size: 130px 130px; }
}

/* Flexslider-Titel auf der Startseite verkleinern */
@media (max-width: 960px) {
  #container .flexslider .caption-title {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }

.slides li div.caption-wrapper {
  width: auto !important;
  bottom: 0px !important;
  background: rgba(0,0,0,.5) !important;
display:none
}

}
@media (max-width: 480px) {
  #container .flexslider .caption-title {
    font-size: 14px !important;
  }
}