/* Standard: Buttons unsichtbar bis JS 'ready' ist */
.home-block .block-button {
  opacity: 0; /* standardmäßig ausgeblendet, bis JS aktiv ist */
  pointer-events: none;
}

html.js-ready .home-block.is-active .block-button {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  background-color: var(--color-darkgray) !important;
  color: var(--color-lightgray) !important;
}

.home-block {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: auto;
}

.home-block .block-button {
    position: fixed;
    background-color: var(--color-darkgray) !important;
    color: var(--color-lightgray) !important;
    outline: medium none currentcolor !important;
    outline: initial !important;
    outline-offset: initial !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    will-change: opacity;
    transition: opacity 0.3s ease;
    /* margin-top: 29px; */
  }

/* Lokaler Modus: Button ist im Block verankert (z. B. beim Start/Ende) */

.home-block .block-button.is-local {
    position: absolute;
  }

/* Keine Sichtbarkeits-Props hier! (Gate bleibt exklusiv in html.js-ready …) */

.home-block.is-active .block-button {
    transform: translate(-50%, -50%);
  }

.home-block .home-nested-blocks {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
    /* margin-top: -61px; */
  }

.home-block .block-button:hover {
    outline: medium none currentcolor !important;
    outline: initial !important;
    box-shadow: 0 0 4px rgba(255,255,255,0.4);
  }

/* Zwei Spalten, jeweils 50% */
.two-img-full {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: hidden;
}
.two-img-full .image-container {
    width: 50%;
    height: auto;
    position: relative;
    overflow: hidden;
  }
.two-img-full .image-container img {
      display: block;
      width: 100%;
      height: 100%;
      -o-object-fit: contain;
         object-fit: contain;
      transition: transform 0.3s ease;
    }
.two-img-full .image-container img:hover {
      transform: scale(100.4%);
    }

/* Zwei Spalten, jeweils 50% */
.two-img-contain {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: hidden;
}
.two-img-contain .image-container {
    width: 50%;
    height: auto;
    position: relative;
    margin-left: 40px;
    margin-right: 40px;
    overflow: hidden;
  }
.two-img-contain .image-container img {
      display: block;
      width: 100%;
      height: 100%;
      -o-object-fit: contain;
         object-fit: contain;
      transition: transform 0.3s ease;
    }
.two-img-contain .image-container img:hover {
      transform: scale(100.4%);
    }

/* Ein Bild über volle Breite – NICHT in .two-img-full verschachteln */
.one-full {
  width: 100%;
  overflow: hidden;
}
.one-full .image-container {
    width: 100%;
    height: auto;
    overflow: hidden;
  }
.one-full .image-container img {
      display: block;
      width: 100%;
      height: 100%;
      -o-object-fit: contain;
         object-fit: contain;
      transition: transform 0.3s ease;
    }
.one-full .image-container img:hover {
      transform: scale(100.2%);
    }

/* Eine Spalte, 50% */
.one-contain {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: hidden;
}
.one-contain .image-container {
    width: 50%;
    height: auto;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
  }
.one-contain .image-container img {
      display: block;
      width: 100%;
      height: 100%;
      -o-object-fit: contain;
         object-fit: contain;
      transition: transform 0.3s ease;
    }
.one-contain .image-container img:hover {
      transform: scale(100.4%);
    }
.video-container.has-both .video-mobile {
  display: none;
}

.template-about .video-container {
  margin-left: calc(-1 * var(--padding-main));
  margin-right: calc(-1 * var(--padding-main));
  width: calc(100% + 2 * var(--padding-main));
}

@media (max-width: 900px) {
  .video-container.has-both .video-desktop {
    display: none;
  }

  .video-container.has-both .video-mobile {
    display: block;
  }
}

.video-container video {
  display: block;
  width: 100%;
  height: auto;
}

.service-blocks,
.about-blocks {
  padding-left: var(--padding-main);
  padding-right: var(--padding-main);
  width: 100%;
  margin-top: 65px;
  margin-bottom: 0px;
  display: flex;
  flex-direction: column;
  row-gap: 30px;
}

.about-blocks .small-text-block {
    max-width: 1200px;
  }

.about-blocks .small-text-block p {
      margin-top: 0px;
      margin-bottom: 0px;
    }

.about-blocks figure {
    height: 80svh;
    max-height: 80svh;
    margin-top: 0;
    margin-left: calc(-1 * var(--padding-main));
    margin-right: calc(-1 * var(--padding-main));
    width: calc(100% + 2 * var(--padding-main));
  }

.about-blocks figure img {
      width: 100%;
      height: 100%;
      max-height: 80svh;

      -o-object-fit: cover;

         object-fit: cover;
      display: block;
    }

.extra-blocks {
  padding-left: var(--padding-main);
  padding-right: var(--padding-main);
  width: 100%;
  margin-top: 65px;
  display: flex;
  flex-direction: column;
  row-gap: 80px;
  margin-bottom: 0px;
}

.extra-blocks .extra-block {
    display: flex;
    flex-direction: column;
    gap: 0;

    /* .extra-block-media {
        height: auto;
        max-height: 80svh;

        img {
          width: 100%;
          height: auto;
          max-height: 80svh;
          object-fit: contain;
          display: block;
        } */
  }

.extra-blocks .text-block p:first-child {
    margin-top: 0;
  }

.extra-block-content {
  z-index: 1;
}

.template-standorte .extra-blocks .gallery-extra {
  margin-top: 10px;
}

/* Gallery in Extra/Standorte blocks: mimic old .extra-block-media layout (scoped) */
.extra-blocks .gallery-extra {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 80svh; /* gallery defines the format/height */
  max-height: 80svh;
  margin-top: -30px;
  position: relative; /* anchor absolute children (slides, dots) */
}
/* Inherit generic .gallery-image crossfade (absolute + opacity) from main.css */
/* Ensure slides fill container; generic styles handle positioning/transition */
.extra-blocks .gallery-extra .gallery-extra-image {
  width: 100%;
  height: 100%;
}
/* Keep previous sizing on the figure */
.extra-blocks .gallery-extra .extra-block-media {
  height: 100%;
  max-height: 80svh;
}
.extra-blocks .gallery-extra .extra-block-media img {
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  /* Center the crop on desktop without changing other sizing */
  -o-object-position: center center;
     object-position: center center;
  margin-left: auto;
  margin-right: auto;
}

/* Ensure dots and captions anchor to the gallery bottom in extra/standorte blocks */
/* anchor for absolute children like dots/captions handled above */
.extra-blocks .gallery-extra .gallery-dots {
  position: absolute;
  bottom: 9px;
  left: 0px;
  display: flex;
  gap: 3px;
  z-index: 3; /* above image, below overlay text */
}
.extra-blocks .gallery-extra .gallery-dots li {
  width: 6px;
  height: 6px;
  border: 0.8px solid var(--color-black);
  border-radius: 50%;
  background: transparent;
}
.extra-blocks .gallery-extra .gallery-dots li.active {
  background: var(--color-black);
  border-color: var(--color-black);
}
.extra-blocks .gallery-extra .extra-block-media figcaption {
  position: absolute;
  left: 0px;
  bottom: 20px;
  padding-right: var(--padding-main);
}

.extra-blocks.standorte-blocks {
  margin-top: 65px;
}

.extra-blocks.standorte-blocks .extra-block.standorte-block {
    flex-direction: column !important;
    gap: 65px !important;
  }

.text-eyebrow {
  margin-bottom: 5px;
  font-size: var(--font-size-m) !important;
  line-height: var(--line-height-m) !important;
  letter-spacing: var(--letter-spacing-m) !important;
}

.standort-openinghours-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.standort-infos {
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: var(--font-size-m) !important;
  line-height: var(--line-height-m) !important;
  letter-spacing: var(--letter-spacing-m) !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 15px;
}

.standort-infos a,.standort-infos button {
    -webkit-text-decoration: none;
    text-decoration: none;
    font-size: var(--font-size-m) !important;
    line-height: var(--line-height-m) !important;
    letter-spacing: var(--letter-spacing-m) !important;
  }

.standort-infos a:hover,.standort-infos button:hover {
      color: var(--color-darkgray);
    }

.standort-openinghours-container {
  font-size: var(--font-size-m) !important;
  line-height: var(--line-height-m) !important;
  letter-spacing: var(--letter-spacing-m) !important;
}

.standort-openinghours-container p {
    font-size: var(--font-size-m) !important;
    line-height: var(--line-height-m) !important;
    letter-spacing: var(--letter-spacing-m) !important;
  }

.wrapper-standort-media-infos {
  display: grid;
}

.wrapper-standort-media-infos > * {
  grid-area: 1 / 1; /* alle Kinder in dieselbe Zelle */
}

.wrapper-standort-media-infos .extra-block-media {
  z-index: -1; /* Bild unten */
  margin-top: 15px !important;
}

.standort-infos {
  z-index: 2; /* Text oben */
}

.block-text-no-Highlight mark {
  font-size: var(--font-size-l);
  line-height: var(--line-height-l);
  letter-spacing: var(--letter-spacing-l);
}

.team-blocks {
  --gap: 40px;
  --width: 400px;
  padding-left: var(--padding-main);
  padding-right: var(--padding-main);
  width: 100%;
  margin-top: 65px;
  margin-bottom: 0px;
  display: flex;
  flex-direction: column;
  row-gap: 30px;
}

.team-blocks ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--width), 1fr));
    grid-row-gap: var(--gap);
    row-gap: var(--gap);
    padding: 0;
    margin: 0;
    list-style: none;
  }

.team-blocks ul li {
      position: relative;
      width: 100%;
      height: auto;
    }

.team-blocks ul li .meta-container .portrait-meta {
          display: flex;
          flex-direction: row;
          gap: 10px;
          margin-bottom: 5px;
          padding-right: 15px;
          font-size: var(--font-size-s);
          line-height: var(--line-height-s);
          letter-spacing: var(--letter-spacing-s);
        }

.team-blocks ul li .meta-container .portrait-meta .portrait-name {
            text-transform: uppercase;
          }

.team-blocks ul li .meta-container .portrait-meta-extended {
          display: flex;
          opacity: 0;
          flex-direction: column;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          background: var(--color-lightgray);
          text-align: center;
          transition: opacity 0.2s ease;
          box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.10196);
        }

.team-blocks ul li .meta-container .portrait-meta-extended .portrait-info {
            padding: 22px 42px 14px 42px;
          }

.team-blocks ul li .meta-container .portrait-meta-extended .portrait-info p {
              font-size: var(--font-size-s);
              margin: 0;
              padding: 0;
            }

.team-blocks ul li .meta-container .portrait-meta-extended .portrait-info p a {
                -webkit-text-decoration: underline;
                text-decoration: underline;
                text-underline-offset: var(--underline-offset);
                text-decoration-thickness: var(--underline-thickness);
              }

.team-blocks ul li .meta-container .portrait-meta-extended .portrait-email {
            padding-bottom: 19px;
            -webkit-text-decoration: underline;
            text-decoration: underline;
            text-underline-offset: var(--underline-offset);
            text-decoration-thickness: var(--underline-thickness);
          }

.team-blocks ul li img {
        width: 100%;
        padding-left: var(--gap);
        padding-right: var(--gap);
      }

.team-blocks ul li:hover .portrait-meta-extended {
          display: flex;
          opacity: 1;
          min-width: 100%;
          transition: opacity 0.2s ease;
        }

.text-block-buttons {
  width: -moz-fit-content;
  width: fit-content;
}

.text-block p,.modal__buttons p,.form__field p {
    font-size: var(--font-size-l);
    letter-spacing: var(--letter-spacing-l);
    line-height: var(--line-height-l);
    margin: 0;
  }

.text-block ul.text-block-buttons,.modal__buttons ul.text-block-buttons,.form__field ul.text-block-buttons {
    position: relative;
    margin-top: 10px;
    margin-bottom: 0px;
    align-items: center;
    text-transform: uppercase;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 3px;
  }

.text-block ul.text-block-buttons li.text-block-button,.modal__buttons ul.text-block-buttons li.text-block-button,.form__field ul.text-block-buttons li.text-block-button {
      margin-top: 0px;
      margin-bottom: 0px;
      width: auto;
    }

.text-block ul.text-block-buttons a,.modal__buttons ul.text-block-buttons a,.form__field ul.text-block-buttons a,.text-block ul.text-block-buttons button,.modal__buttons ul.text-block-buttons button,.form__field ul.text-block-buttons button {
      -webkit-text-decoration: none;
      text-decoration: none;
      /* background-color: var(--color-lightgray); */
    }

.text-block ul.text-block-buttons a.active,.modal__buttons ul.text-block-buttons a.active,.form__field ul.text-block-buttons a.active,.text-block ul.text-block-buttons button.active,.modal__buttons ul.text-block-buttons button.active,.form__field ul.text-block-buttons button.active {
      background-color: var(--color-white);
      outline: var(--outline-width) solid black;
      outline-offset: var(--outline-offset);
    }

.text-block:not(:has(p)) ul.text-block-buttons {
  margin-top: 0 !important;
}

.modal__buttons ul.text-block-buttons {
    margin-left: auto;
    margin-right: auto;
  }

.text-block p {
  margin-bottom: 20px;
}

.text-block p:has(+ .text-block-buttons),
.text-block p:last-child {
  margin: 0;
}

.small-text-block a:hover {
  color: var(--color-darkgray);
}

.small-text-block ul,
.small-text-block ul li {
  list-style: inherit !important;
}
.small-text-block ul li {
  margin-left: 25px !important;
}

.heading-block h2 {
  line-height: 0.8em; /* special value */
  margin-top: 50px;
  margin-bottom: 5px;
}

.list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.list.dir-row {
  flex-direction: row;
  gap: 20px;
}

.list.dir-column {
  flex-direction: column;
  gap: 5px;
}

.list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 5px !important;
}

.list-link {
  line-height: 0.9em !important; /* special value */
  text-align: left !important;
}
a.list-link:hover {
  color: var(--color-darkgray);
}

.introtext {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70svh;
  padding-left: 15px;
  padding-right: 15px;
}

.introtext p {
    font-family: "reseda-spezial", sans-serif;
    font-size: var(--font-size-xxl);
    line-height: var(--line-height-xxl);
    letter-spacing: var(--letter-spacing-xxl);
  }

.home-standorte-wrapper {
  display: flex;
  z-index: 5;
  background: var(--color-home-body);
}

.home-standorte {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 115px 100px;
  text-align: center;
  margin-top: 130px;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
}

.home-standorte a {
    color: black !important;
    font-family: "reseda-spezial", sans-serif;
    font-size: var(--font-size-xxl);
    line-height: var(--line-height-xxl);
    letter-spacing: var(--letter-spacing-xxl);
    transition: all 0.2s ease;
    /* text-shadow: 0 0 1.5px var(--color-black); */
  }

.home-standorte a:hover {
  color: var(--color-darkgray);
  /* text-shadow: 0 0 1.5px var(--color-darkgray); */
}
@media (max-width: 1515px) {
  .home-standorte {
    gap: 83px 100px;
    margin-top: 130px;
    margin-bottom: 40px;
  }
}

@media (max-width: 900px) {
  .home-block {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: auto;
  }

    .home-block .block-button {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      /* margin-top: 28px; */
    }

    .home-block .home-nested-blocks {
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: 1px;
      /* margin-top: -57px; */
    }

  .home-block:not(:last-child) {
    margin-bottom: 1px;
  }

  /* Eine Spalte, 100% */
  .two-img-full {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 82svh;
  }

    .two-img-full .image-container {
      width: 100%;
      height: 100%;
      position: relative;
    }

      .two-img-full .image-container img {
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
      }
      .two-img-full .image-container img:hover {
        transform: scale(100%);
      }

  /* Zwei Spalten, jeweils 50% */
  .two-img-contain {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;

    margin-top: 0px;

    margin-bottom: 0px;
    height: 82svh;
  }

    .two-img-contain .image-container {
      width: 100%;
      height: 100%;
      position: relative;
      margin-left: 0px;
      margin-right: 0px;
    }

      .two-img-contain .image-container img {
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        padding-left: 0px;
        padding-right: 0px;
      }
      .two-img-contain .image-container img:hover {
        transform: scale(100%);
      }

  .two-img-full .image-container,
  .two-img-contain .image-container {
    display: block;
  }
  .two-img-full .image-container.hide-on-mobile,
  .two-img-contain .image-container.hide-on-mobile {
    display: none;
  }

  /* Ein Bild über volle Breite */
  .one-full {
    width: 100%;
    height: 82svh;
  }

    .one-full .image-container {
      width: 100%;
      height: 100%;
    }

      .one-full .image-container img {
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
      }
      .one-full .image-container img:hover {
        transform: scale(100%);
      }

  /* Eine Spalte, 50% */
  .one-contain {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 82svh;
  }

    .one-contain .image-container {
      width: 100%;
      height: 100%;
      position: relative;
      margin-left: auto;
      margin-right: auto;
    }

      .one-contain .image-container img {
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        padding: 0px;
      }
      .one-contain .image-container img:hover {
        transform: scale(100%);
      }
}

@media (max-width: 900px) {
  .service-blocks,
  .about-blocks {
    padding-left: var(--padding-main);
    padding-right: var(--padding-main);
    width: 100%;
    margin-top: 65px;
    margin-bottom: 0px;
    display: flex;
    flex-direction: column;
    row-gap: 30px;
  }
    .about-blocks .small-text-block {
      max-width: 1200px;
    }
      .about-blocks .small-text-block p {
        margin-top: 0px;
        margin-bottom: 0px;
      }
    .about-blocks figure {
      height: 80svh;
      max-height: 80svh;
      margin-top: 0;
      margin-left: calc(-1 * var(--padding-main));
      margin-right: calc(-1 * var(--padding-main));
      width: calc(100% + 2 * var(--padding-main));
    }
      .about-blocks figure img {
        width: 100%;
        height: 100%;
        max-height: 80svh;

        -o-object-fit: cover;

           object-fit: cover;
        display: block;
      }
  .extra-blocks {
    padding-left: var(--padding-main);
    padding-right: var(--padding-main);
    width: 100%;
    margin-top: 0px;
    display: flex;
    flex-direction: column;
    row-gap: 80px;
    margin-bottom: 0px;
  }

    .extra-blocks .extra-block {
      display: flex;
      flex-direction: column-reverse;
      gap: var(--padding-main);
    }

      .extra-blocks .extra-block .extra-block-media {
        height: 80svh;
        max-height: 80svh;
        margin-top: 0;
        margin-left: calc(-1 * var(--padding-main));
        margin-right: calc(-1 * var(--padding-main));
        width: calc(100% + 2 * var(--padding-main));
      }

        .extra-blocks .extra-block .extra-block-media img {
          width: 100%;
          height: 100%;
          max-height: 80svh;

          -o-object-fit: cover;

             object-fit: cover;
          display: block;
        }
      .extra-blocks .extra-block .text-block p:first-child {
        margin-top: 0;
      }

  /* Mobile: same full-bleed behavior for gallery-extra */
  .gallery-extra {
    margin-left: calc(-1 * var(--padding-main)) !important;
    margin-right: calc(-1 * var(--padding-main)) !important;
    width: calc(100% + 2 * var(--padding-main)) !important;
  }
  .extra-blocks .gallery-extra .extra-block-media {
    height: 80svh;
    max-height: 80svh;
    margin-top: 0;
    margin-left: calc(-1 * var(--padding-main));
    margin-right: calc(-1 * var(--padding-main));
    width: calc(100% + 2 * var(--padding-main));
  }
  .extra-blocks .gallery-extra .extra-block-media img {
    width: 100%;
    height: 100%;
    max-height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
  .extra-blocks.standorte-blocks {
    margin-top: 65px;
  }

    .extra-blocks.standorte-blocks .extra-block.standorte-block {
      flex-direction: column !important;
      gap: 65px !important;
    }

  .extra-blocks .gallery-extra .gallery-dots {
    position: absolute;
    bottom: 8px;
    left: 10px;
    display: flex;
    gap: 3px;
    z-index: 3; /* above image, below overlay text */
  }
  .extra-blocks .gallery-extra .gallery-dots li {
    width: 6px;
    height: 6px;
    border: 0.8px solid var(--color-black);
    border-radius: 50%;
    background: transparent;
  }
  .extra-blocks .gallery-extra .gallery-dots li.active {
    background: var(--color-black);
    border-color: var(--color-black);
  }
  .extra-blocks .gallery-extra .extra-block-media figcaption {
    position: absolute;
    left: 10px;
    bottom: 20px;
    padding-right: var(--padding-main);
  }

  .extra-blocks.standorte-blocks {
    margin-top: 65px;
  }

    .extra-blocks.standorte-blocks .extra-block.standorte-block {
      flex-direction: column !important;
      gap: 65px !important;
    }

  .wrapper-standort-media-infos {
    display: flex;
    flex-direction: column-reverse;
  }
  .wrapper-standort-media-infos > * {
    grid-area: auto;
    position: static;
    z-index: auto;
  }

  .standort-infos {
    flex-direction: column;
    justify-content: initial;
    gap: 15px;
  }
    .standort-infos button,.standort-infos a {
      -webkit-text-decoration: underline;
      text-decoration: underline;
      text-underline-offset: var(--underline-offset);
      text-decoration-thickness: var(--underline-thickness);
    }
  .team-blocks ul li:hover .portrait-meta-extended {
    /* Hover auf Mobile deaktivieren */
    display: none;
  }

  .team-blocks ul li.active .portrait-meta-extended {
    display: flex;
    min-width: 100%;
  }

  .team-blocks {
    --gap: 15px;
    --width: 400px;
    margin-top: 65px;
    padding-left: var(--padding-main);
    padding-right: var(--padding-main);
  }

    .team-blocks ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: var(--gap);
      gap: var(--gap);
      padding: 0;
      margin: 0;
      list-style: none;
    }

      .team-blocks ul li {
        position: relative;
        opacity: 1;
        transition: opacity 0.2s ease; /* QoL: smoother fade */
      }

        .team-blocks ul li img {
          width: 100%;
          padding-left: 0;
          padding-right: 0;
          display: block;
        }

        /* Hover deaktivieren nur auf Geräten, die überhaupt Hover können */
        @media (hover: hover) {
            .team-blocks ul li:hover .portrait-meta-extended {
              display: none;
            }
        }

        .team-blocks ul li.active::before {
          content: "";
          position: fixed;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          /* backdrop-filter: blur(10px); */
          z-index: 90;
        }

        .team-blocks ul li .meta-container {
          display: none;
          position: fixed;
          z-index: 100;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: calc(100% - 30px);
          max-height: 80svh;
          overflow: auto;
          background: var(--color-lightgray);
          padding: 0;
          flex-direction: column;
          box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.10196);
        }

          .team-blocks ul li .meta-container .portrait-meta {
            display: none;
            position: relative;
            text-align: center;
            gap: 0px;
            margin-bottom: 0;
            padding: 17px 20px 0 20px;
            font-size: var(--font-size-m);
            line-height: var(--line-height-m);
            letter-spacing: var(--letter-spacing-m);
          }

            .team-blocks ul li .meta-container .portrait-meta .portrait-name {
              text-transform: uppercase;
            }

          .team-blocks ul li .meta-container .portrait-meta-extended {
            display: none;
            position: relative;
            text-align: center;
            transform: none;
            background: none;
            top: auto;
            left: auto;
            padding-left: 25px;
            padding-right: 25px;
            box-shadow: none;
            box-shadow: initial;
          }

            .team-blocks ul li .meta-container .portrait-meta-extended .portrait-info {
              padding: 15px 0px;
            }

              .team-blocks ul li .meta-container .portrait-meta-extended .portrait-info p {
                font-size: var(--font-size-m);
                margin: 0;
                padding: 0;
              }

                .team-blocks ul li .meta-container .portrait-meta-extended .portrait-info p a {
                  -webkit-text-decoration: underline;
                  text-decoration: underline;
                  text-underline-offset: var(--underline-offset);
                  text-decoration-thickness: var(--underline-thickness);
                }

            .team-blocks ul li .meta-container .portrait-meta-extended .portrait-email {
              padding-bottom: 19px;
              -webkit-text-decoration: underline;
              text-decoration: underline;
              text-underline-offset: var(--underline-offset);
              text-decoration-thickness: var(--underline-thickness);
            }
              .team-blocks ul li .meta-container .portrait-meta-extended .portrait-email a {
                font-size: var(--font-size-m);
                line-height: var(--line-height-m);
                letter-spacing: var(--letter-spacing-m);
              }
                .team-blocks ul li .meta-container .portrait-meta-extended .portrait-email a:hover {
                  -webkit-text-decoration: underline;
                  text-decoration: underline;
                  text-underline-offset: var(--underline-offset);
                  text-decoration-thickness: var(--underline-thickness);
                }

        /* Aktives Item zeigt das Modal */
        .team-blocks ul li.active {
          opacity: 1;
          outline: var(--outline-width) solid var(--color-black);
          outline-offset: var(--outline-offset);
        }

          .team-blocks ul li.active .meta-container {
            display: flex;
          }

            .team-blocks ul li.active .meta-container .portrait-meta,.team-blocks ul li.active .meta-container .portrait-meta-extended {
              display: flex;
              flex-direction: column;
            }

      .team-blocks ul:has(li.active) li:not(.active) {
        opacity: 1;
      }

      .team-blocks ul.has-active li:not(.active) {
        opacity: 1;
      }

  .heading-block h2 {
    text-align: center;
  }

  .list.dir-row {
    flex-direction: row;
    gap: 5px 20px;
  }

  .list.dir-column {
    flex-direction: column;
    gap: 5px;
  }

  .list-link {
    font-size: var(--font-size-l);
    line-height: var(--line-height-l) !important;
    letter-spacing: var(--letter-spacing-l);
    text-align: left !important;
  }

  .list-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 5px !important;
  }

  .home-standorte-wrapper {
    margin-bottom: 80px;
  }
  .home-standorte {
    width: 460px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px 100px;
    text-align: center;
    margin-top: 84px;
    margin-bottom: 43px;
    margin-left: auto;
    margin-right: auto;
  }
    .home-standorte a {
      font-size: var(--font-size-xl);
      line-height: 0.85;
      letter-spacing: var(--letter-spacing-xxl);
      /* text-shadow: 0 0 1.5px var(--color-black); */
    }
  .home-standorte a:hover {
    color: black !important;
    /* text-shadow: 0 0 1.5px inherit; */
  }

  .introtext {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70svh;
    padding-left: 15px;
    padding-right: 15px;
  }
    .introtext p {
      font-family: "reseda-spezial", sans-serif;
      font-size: var(--font-size-xl) !important;
      line-height: var(--line-height-xl) !important;
      letter-spacing: var(--letter-spacing-xl) !important;
    }
  .small-text-block a {
    -webkit-text-decoration: underline !important;
    text-decoration: underline !important;
    text-underline-offset: var(--underline-offset);
    text-decoration-thickness: var(--underline-thickness);
  }
}