:root {
  --bulma-link-text: #FCC200;
  --bulma-link-h: 46deg;
  --bulma-link-s: 100%;
  --bulma-link-l: 49%;
  --bulma-link-invert-l: #000000;
}

.footer {
  background-color: #626256 !important;
  padding: 1rem 1rem 1rem;
}
body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
.section-intro {
    background: #f8f9fa;
    border-left: 4px solid #667eea;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: 0 8px 8px 0;
}
.hero.is-custom2 {
    background-image: url('img/hero.jpg'); /* Pfad zu deinem Bild */
    background-size: 100% auto;
    background-position: top left; /* Oben links fixiert */
    background-repeat: no-repeat; /* Wiederholung des Bildes verhindern */
    height: 550px;
    min-height: 550px;
    position: relative;
    overflow: hidden; /* Verhindert, dass Inhalte herausrutschen */
}
.hero.is-custom {
    position: relative;
    overflow: hidden; /* Verhindert, dass Inhalte herausrutschen */
}
.hero .hero-text {
    position: relative;
    top: 8em
}
.hero .title {
    color: white;
    background-color: rgba(252, 194, 0, .8);
    padding: 10px 20px;
    clear: both;
    float: left;
    font-size: 31px;
}
.hero .subtitle {
    background-color: rgba(74, 74, 74, .8);
    color: #fff;
    margin: 0 0 0 20px;
    padding: 10px 20px;
    clear: both;
    float: left;
    font-size: 31px;
    font-weight: 300;
}

@media screen and (max-width: 768px) {
  .hero.is-custom {
    height: auto; /* Bei kleinen Bildschirmen dynamische Höhe */
  }

  .hero .title {
    font-size: 1.2rem; /* Schriftgröße für kleinere Bildschirme anpassen */
  }

  .hero .subtitle {
    font-size: 1rem; /* Schriftgröße für kleinere Bildschirme anpassen */
  }
}

.box {
    margin: 10px;
}
.box-info-item {
    margin-top: 0.5rem;
}
.no-wrap {
  white-space: nowrap;
}
.force-wrap {
  white-space: normal;
  word-break: break-word;
}

.image-container {
  position: relative;
  width: 256px;
  height: 256px;
  overflow: hidden;
}

.image-container img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  transition: opacity 0.4s ease;
}

.image-container img.hover {
  opacity: 0;
}

.image-container:hover img.hover {
  opacity: 1;
}

.image-container:hover img.default {
  opacity: 0;
}
.image-banner {
  position: absolute;
  bottom: 16px;
  right: 0;
  background-color: #FCC200;
  color: white;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 4px 0 0 4px;
  z-index: 2;
  max-width: 80%; /* optional: begrenzt die Breite bei sehr langen Texten */
  text-align: right;
  display: inline-block;
  box-shadow: -2px 2px 4px rgba(0,0,0,0.2);
  white-space: normal;      /* erlaubt Umbrüche */
  word-break: break-word;   /* bricht lange Wörter */
}

.modal-card-body .column {
  flex-shrink: 0; /* Verhindert, dass das Bild skaliert wird */
  align-self: flex-start; /* Bild bleibt oben */
}

.box h5 {
  min-height: calc(1em * var(--bulma-title-line-height) * 4); /* 1em × line-height × 3 Zeilen */
}

.modal-card-head.column-flow {
  flex-flow: column;
}