/*!
 * Start Bootstrap - Full Slider HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

html,
body {
    height: 100%;
}

.carousel {
  /* Header-Höhe an die Fensterbreite koppeln (vw), damit der Slider auf
     breiten Monitoren spürbar höher wird und nicht gedrungen wirkt.
     Hohes Minimum sorgt auch auf flacheren Fenstern für genug Höhe. */
  height: 56vw;
  min-height: 760px;
  max-height: 1000px;
}

/* Auf kleineren Screens: fester, kompakter Header mit vollflächigem Bild */
@media (max-width: 767px) {
  .carousel {
    height: 70vh;
    min-height: 420px;
    max-height: 560px;
  }
  /* Bild vollflächig als Hintergrund, Diagonal-Logik deaktivieren */
  .item .fill {
    width: 100% !important;
    margin-left: 0 !important;
  }
  /* Caption als lesbares Overlay am unteren Rand über dem Bild */
  .carousel-caption {
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    background-color: rgba(255,255,255,0.9) !important;
    padding: 15px 20px 30px !important;
  }
  .carousel-caption h2 {
    font-size: 24pt !important;
  }
  .carousel-caption p {
    font-size: 13pt !important;
  }
  .carousel-caption img {
    max-width: 140px;
    width: 40% !important;
  }
  /* Diagonaler Schnitt auf Mobil ausblenden */
  .carousel-caption .cut {
    display: none !important;
  }
}
.item,
.active {
    height:100%;
}

.carousel-inner {
    height: 100%;
}

/* Background images are set within the HTML using inline CSS, not here */

.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

footer {
    margin: 50px 0;
}