/* Kiosk am Seehof - Layout
   Uebernommen aus der TYPO3-Vorlage (fileadmin/templates/assets/jumbotron.css),
   Bildpfade auf ../img/ angepasst, Mobil-Darstellung ergaenzt. */

body {
  padding-top: 5px;
  padding-bottom: 20px;
}

/* --- Kopfbereich: Foto links | Logo mitte | Foto rechts --- */
.jumbotron .container .jumtron-pic {
  height: 180px;
  background-repeat: no-repeat;
  width: 20%;
  background-image: url(../img/see.jpg);
  background-size: 100% auto;
  position: relative;
  float: left;
  background-position: center center;
}
.jumbotron .container .jumtron-txt {
  background-image: url(../img/kiosk_am_seehof_logo_3D_Schatten.png);
  background-repeat: no-repeat;
  height: 180px;
  width: 59%;
  background-size: 95% auto;
  background-position: center center;
  float: left;
  color: #FACA8B;
  text-align: center;
}
.jumbotron .container .jumtron-pic-r {
  height: 180px;
  position: relative;
  float: left;
  width: 20%;
  background-image: url(../img/bild_kiosk_weisser_rand.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
}
.jumbotron .container:after {
  content: "";
  display: table;
  clear: both;
}

/* Auf Smartphones stehen die drei Spalten sonst zu gedraengt.
   Dort nur noch das Logo zeigen, dafuer in voller Breite. */
@media (max-width: 767px) {
  .jumbotron .container .jumtron-pic,
  .jumbotron .container .jumtron-pic-r {
    display: none;
  }
  .jumbotron .container .jumtron-txt {
    width: 100%;
    height: 130px;
    background-size: contain;
  }
  .jumbotron {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

/* --- Navigation --- */
/* Nur drei kurze Sprungmarken: die Leiste bleibt immer sichtbar,
   dadurch wird kein JavaScript (jQuery/Bootstrap-JS) benoetigt. */
.navbar-nav-static {
  float: none;
  text-align: center;
  margin: 0;
}
.navbar-nav-static > li {
  float: none;
  display: inline-block;
}

/* --- Textausrichtung aus dem TYPO3-RTE --- */
.align-right   { text-align: right; }
.align-left    { text-align: left; }
.align-justify { text-align: justify; }
.align-center  { text-align: center; }

/* --- Inhalt --- */
.inhalt img {
  max-width: 100%;
  height: auto;
}
/* 600 px entspricht der Bildbreite, die TYPO3 hier vorher ausgegeben hat
   (css_styled_content: styles.content.imgtext.maxW = 600). Groesser
   skaliert das Foto ueber seine echte Aufloesung hinaus und wird unscharf. */
.inhalt .kopfbild {
  display: block;
  margin: 0 auto 25px auto;
  width: 100%;
  max-width: 600px;
  height: auto;
}
footer {
  color: #777;
  font-size: 0.9em;
  text-align: center;
}