/**
Theme Name: Twenty Twenty-Four Child
Template: twentytwentyfour
*/


:where(.wp-site-blocks *:focus){outline-width:2px;outline-style:solid}
/* Aktueller Menüpunkt fett */
.wp-block-navigation .current-menu-item > a {
    font-weight: 700;
}
/* === SLIDER BASIS === */
.banner-slider {
  position: relative;
}

/* Alle Slides ausblenden */
.banner-slider .slide {
  display: none;
  position: relative; /* WICHTIG für Overlay */
}

/* Nur aktive Slide sichtbar */
.banner-slider .slide.active {
  display: block;
}

/* Bild skaliert korrekt */
.banner-slider .slide img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1; /* Buttons liegen darüber */
}

/* Buttons über dem Bild */
.banner-slider .slide .arrow-left,
.banner-slider .slide .arrow-right,
.banner-slider .slide .slider-more {
  position: absolute;   /* über dem Bild */
  z-index: 10;          /* höher als das Bild */
  display: flex;        /* falls Button mehrere Elemente enthält */
  pointer-events: auto; /* Klickbarkeit sicherstellen */
}


/* Linker Pfeil unten */
.banner-slider .slide .arrow-left {
  bottom: 1%;
  left: 1%;
  width: 4rem;
  height: 2rem;
}
/* Rechter Pfeil unten */
.banner-slider .slide .arrow-right {
  bottom: 1%;
  right: 1%;
  width: 4rem;
  height: 2rem;
}
/* „Mehr“-Button oben rechts */
.banner-slider .slide .slider-more {
  bottom: 1%;
  left: 50%;
  transform: translateX(-50%);
  width: 10rem;
  height: 2rem;
}

@media (max-width: 768px) {
  .banner-slider .slide .arrow-left,
  .banner-slider .slide .arrow-right,
  .banner-slider .slide .slider-more {
    height: 1.3rem;               
    position: absolute;
  }

}

/* Slider-Dots über dem Bild */
.banner-slider .slide .slider-dots {
  position: absolute;       /* über dem Bild */
  top: 0px;               /* Abstand vom unteren Bildrand */
  left: 50%;                /* horizontal zentriert */
  transform: translateX(-50%);
  z-index: 10;              /* über Buttons */
  /*width: auto;*/
  width: auto;
  justify-content: center;  /* Punkte zentriert, falls Spaltenblock Flexbox */
  pointer-events: none;     /* klickbar, falls nötig */
  display: flex;            /* sicherstellen, dass Spalten nebeneinander bleiben */
  gap: 0.5rem;              /* optionaler Abstand zwischen Punkten */
}


/* Button einfärben */
.banner-slider .slide .wp-block-button__link {
  background: rgba(0, 0, 0, 0.6); /* schwarz, 0% transparent */
  /*background: transparent;*/
  /*color: #fff;                  /* Textfarbe weiß */
  border-radius: 5px;           /* optional abgerundet */
  padding: 5px 10px;            /* optional mehr Klickfläche */
  /*backdrop-filter: blur(3px);   /* optional schöner Blur-Effekt */
}

/* Hover → dunkler */
/*.banner-slider .slide .wp-block-button__link:hover {*/
/* background: rgba(99, 99, 99, 1); /* dunkler c
/*}/*

/* Button einfärben */
.leifac .wp-block-button__link {
  /*background: rgba(0, 0, 0, 0.5);*/ /* schwarz, 0% transparent */
  background: transparent;
  /*color: #fff;                  /* Textfarbe weiß */
  border-radius: 5px;           /* optional abgerundet */
  padding: 5px 10px;            /* optional mehr Klickfläche */
  /*backdrop-filter: blur(3px);   /* optional schöner Blur-Effekt */
}

/*@media (max-width: 1400px) {*/

  /* Desktop-Menü ausblenden */
  /*.wp-block-navigation__container {*/
    /*display: none;*/
  /*}*/

  /* Burger-Button einblenden */
  /*.wp-block-navigation__responsive-container-open {*/
    /*display: flex !important;*/
  /*}*/

/*}*/


.breadcrumbs {
    color: #ffffff; /* Textfarbe für die gesamte Breadcrumb */
}

.breadcrumbs a {
    color: #ffffff; /* Links auch weiß */

}

h1, h2, h3, h4, h5, h6 {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.wp-block-details {
    --wp--style--spacing--padding-top: 0.5rem;
    --wp--style--spacing--padding-bottom: 0.5rem;
}


@media (max-width: 480px) {
  .banner-slider .slide {
    position: relative;
    /*height: 60vh;        /* gewünschte mobile Höhe */
    overflow: hidden;    /* alles außerhalb verstecken */
  }

  .banner-slider .slide video {
    position: relative;
    left: -5%;           /* 5% links verschieben */
    width: 110%;         /* 5% rechts hinzufügen = 10% insgesamt abgeschnitten */
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}