/* bangers-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/bangers-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


body {
      position: relative;
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      /* Optional: Standard‑Background‑Farbe, die unter dem Bild liegt */
      background-color: #fff;
      /* z‑Index hier ist irrelevant, Pseudo‑Element kommt sowieso drunter */
    }

    /* ::before auf body erzeugt den Hintergrund‑Layer */
body::before {
      content: '';
      position: fixed;      /* oder absolute, je nach Bedarf */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('../img/background.jpg');
      background-size: cover;
      background-position: center;
      opacity: 0.5;         /* hier stellst du die Transparenz ein */
      z-index: -1;          /* sicherstellen, dass das Bild hinter dem Content liegt */
      pointer-events: none; /* Klicks oder Hovers gehen durch zum Body-Inhalt */
    }


html, body {
  height: 100%;
  margin: 0;
}

main {
  flex: 1; /* Nimmt den restlichen Platz ein */
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Bangers', cursive;
}

.bg-smo {
    background-color: #B22222;
    color: white;
}

.retiming-explanation-bg {
  position: relative;      /* für das Pseudo-Element */
  overflow: hidden;        /* damit nichts hervorsteht */
}

.retiming-explanation-bg::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;       /* zentriert horizontal */
  transform: translateX(-50%);
  width: 300px;            /* max-Breite */
  height: 100%;            /* füllt die Höhe des card-body */
  background: url("../img/hariet_timer.png") no-repeat center center;
  background-size: contain;/* skaliert innerhalb von 200px Breite */
  opacity: 0.2;            /* Bild-Deckkraft */
  pointer-events: none;    /* klick-Durchlässig */
  z-index: 0;              /* Hintergrund */
}

/* Damit der Text über dem Pseudo-Element liegt */
.retiming-explanation-bg > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 575.98px) {
  .carousel-caption {
    /* insgesamt kleinere Schrift */
    font-size: 0.85rem;
    /* weniger Padding: vertikal 0.25rem, horizontal 0.5rem */
    padding: 0.25rem 0.5rem;
  }
  .carousel-caption h5 {
    margin-bottom: 0.25rem;
  }
  .carousel-caption p {
    margin-bottom: 0;
  }
}