/* poppins-200 - 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: 'Poppins';
  font-style: normal;
  display: swap;
  font-weight: 200;
  src: url('../fonts/poppins-v24-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-300 - 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: 'Poppins';
  display: swap;
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/poppins-v24-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-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: 'Poppins';
  display: swap;
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700 - 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: 'Poppins';
  display: swap;
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/poppins-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-800 - 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: 'Poppins';
  display: swap;
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/poppins-v24-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
   --primary-color: #E8DACE;/* braun */
   --secondary-color: #59437A;/* lila */
   --pink: radial-gradient(circle at center, #9B4C87 0%, #8065AC 100%);
   --black: #000000;
   --body: #29893F;
   --bs-body-font-family:'Poppins', sans-serif;
   --bs-body-font-family_two:'Poppins', sans-serif;
   --bs-body-font-weight-small: 300;
   --bs-body-font-weight-regular: 400;
   --bs-body-font-weight-bold: 800;
}




  /* ===================== */
/* test       */
    /* ===================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

.team-card {
  overflow: hidden;
}




      /* ===================== */
    /* HEADER + NAV         */
    /* ===================== */

    .header {
      background: white;
      position: relative;
      padding: 20px;
    }

    .nav-custom {
      display: flex;
      justify-content: flex-end;
      gap: 20px;
    }

    .nav-custom a {
      text-decoration: none;
      color: black;
      font-weight: 600;
    }


    /* Standard Links */
.navbar a {
  color: var(--black);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}


/* Hover Effekt */
.navbar a:hover {
  color: var(--braun); /* schönes kräftiges Rot */
}

/* Optional: aktiver Link */
.navbar a.active {
  color: #c40000;
}

/* Mobile Offcanvas Links */
.offcanvas a {
  color: #000;
  text-decoration: none;
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

.offcanvas a:hover {
  color: #c40000;
}

    /* ===================== */
    /* LOGO OVERLAY         */
    /* ===================== */

    .logo-wrapper {
      position: absolute;
      left: 20px;
      bottom: -100px;
      display: flex;
      z-index: 10;
    }

    .logo-box {
       padding: 20px 5px;
      color: white;
      font-weight: bold;
      font-size: 28px;
    }


    /* ===================== */
    /* HERO                 */
    /* =====================

    .hero img {
      width: 100%;
      height: 500px;
      object-fit: cover;
    }*/

.hero {
  position: relative;
  background: url('../images/site/header.png') top/cover no-repeat;
  color: #1f2a5a;
}

/* Overlay (optional für bessere Lesbarkeit)
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.6);
}*/

/* Inhalt über dem Bild */
.hero .content {
  position: relative;
  z-index: 2;
}

/* Icons */
.icons i {
  font-size: 1.8rem;
  margin-right: 15px;
  padding: 10px;
  border-radius: 10px;
  background: #2c2c6c;
  color: white;
}

/* Responsive Anpassung */
@media (max-width: 768px) {
  .hero {
    background-size: contain;
  }

  .icons i {
    margin: 5px;
  }
}

/* Tablet */


@media (min-width: 1200px) {   .hero {
    background-position: top center;
    padding-top:200px;
    height: 100vh;
  }
}

@media (max-width: 1199.98px) {
  .hero {
    background-position: top center;
    padding-top:130px;
    height: 100vh;

  }
}

@media (max-width: 991.98px) {
  .hero {
    padding-top:20px;

  }
}

/* Mobile */
@media (max-width: 767.98px) {
  .hero {
    padding-top:20px;
    height: 300px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .hero {
    text-align: center;
    padding-top:200px;
  }
}




    /* ===================== */
    /* TEXT BLOCKS          */
    /* ===================== */

    .bottom-section {
      display: flex;
      flex-wrap: wrap;
    }

    .text-block {
      flex: 1;
      padding: 50px;
      color: white;
    }

    .left-block { background: #7f9c8d; }
    .right-block { background: #e30613; }

    /* ===================== */
    /* MOBILE               */
    /* ===================== */

    @media (max-width: 768px) {

      .logo-box {
        font-size: 16px;
        padding: 10px 1px;
      }

      .logo-wrapper {
       bottom: -80px;
      }

      .nav-custom {
        display: none;
      }



      .bottom-section {
    display: block;

    }

      .logo {
    width: 130px;

    }
 }





/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
  BASICS
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
body {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: var(--secondary-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.9rem;
  font-weight: 200;
  hyphens:auto;
  -webkit-hyphens: auto!important;

}

*:focus { outline: none !important; }
::selection       { background-color: var(--body); color: var(--secondary-color); color: white; }
::-moz-selection  { background-color: var(--body); color: var(--white); color: white; }


img.test {
    /* filter: url(filters.svg#grayscale); Firefox 3.5+ */
      filter: gray; /* IE5+ */
      -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
      -webkit-transition: all .8s ease-in-out;
    }


/* + + + + + + + + + + + + + + + + + + + + + + + +
   HEADLINES & TEXT STYLES
+ + + + + + + + + + + + + + + + + + + + + + + + */

/* HEADLINES RESET */
h1, h2, h3, h4, h5, h6,
[class*="fs-1-"] {
  margin: 0;
  padding: 0;
}

/* FONT SIZES */
.fs-1 {
  font-size: calc(1.6rem + 0.8vw) !important;
  line-height: 3.0rem;
}

.fs-2 {
  font-size: calc(1.2rem + 0.3vw) !important;
  line-height: 2rem;
}

.fs-3 {
  font-size: calc(0.6rem + 0.2vw) !important;
  line-height: 1.2rem;
}

.fs-4 {
  font-size: calc(0.8rem + 0.2vw) !important;
  line-height: 1.5rem;
}

.fw-bold { font-weight:700 }
/* BACKGROUNDS */
.bg_braun { background-color: var(--primary-color); }
.bg_pink { background-color: var(--secondary-color); }
.bg_verlauf { background-image: url(../images/site/pink.png);}


/* + + + + + + + + + + + + + + + + + + + + + + + +
   INHALT
+ + + + + + + + + + + + + + + + + + + + + + + + */

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background-color: var(--secondary-color);
  color: white;
  font-size: 20px;
  cursor: pointer;
  display: none; /* wird per JS eingeblendet */
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  z-index: 9999;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.back-to-top:hover {
  background-color: var(--primary-color);
  transform: scale(1.1);
}


/* + + + + + + + + + + + + + + + + + + + + + + + +
   LINKS
+ + + + + + + + + + + + + + + + + + + + + + + + */

a {
  text-decoration: none;
  color: black;
}

a:visited { color: var(--pink) }
a:hover { color: black; }
a:active  { color: var(--braun); }

.nav-link {
  color: #000000;
  padding: 0 1rem;
}


/* + + + + + + + + + + + + + + + + + + + + + + + +
   CHECKLIST
+ + + + + + + + + + + + + + + + + + + + + + + + */

.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.check-list li {
  position: relative;
  padding-left: 1.5rem;
}


.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;

  width: 5px;
  height: 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Crect width='5' height='5' fill='braun'/%3E%3C/svg%3E");
  background-size: contain;
}


/* + + + + + + + + + + + + + + + + + + + + + + + +
  überschrift
+ + + + + + + + + + + + + + + + + + + + + + + + */

.box {
  width: 130px;
  height: 200px;
  background-color: var(--primary-color);
  border-radius: 30px;
  position: relative;
}
.box2 {
  width: 130px;
  height: 200px;
  background-color: #ffffff;
  border-radius: 30px;
  position: relative;
}

.number {
  font-size: 60px;
  font-weight: 700;
  color: white;
  position: absolute;
  top: 50px;
  left: 30px;
}
.number2 {
  font-size: 60px;
  font-weight: 700;
  color: var(--primary-color);
  position: absolute;
  top: 50px;
  left: 30px;
}

.headline {
  position: absolute;
  top: 100px;   /* steuert Überlappung */
  left: 40px;
  font-size: 32px;
  font-weight: 700;
  color: var(--secondary-color);
  line-height: 1.1;
  width: 300px;
}
.headline2 {
  position: absolute;
  top: 150px;   /* steuert Überlappung */
  left: 35px;
  font-size: 32px;
  font-weight: 700;
  color: var(--secondary-color);
  line-height: 1.1;
  width: 300px;
}


/* + + + + + + + + + + + + + + + + + + + + + + + +
TEam Card
+ + + + + + + + + + + + + + + + + + + + + + + + */

.bw-to-color {
  /* Bild ist standardmäßig schwarz-weiß */
  filter: grayscale(100%);
  /* Weicher Übergang */
  transition: filter 0.5s ease;
}

.bw-to-color:hover {
  /* Bild wird bei Hover farbig */
  filter: grayscale(0%);
}

.team-image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  z-index: 0; /* ⭐ FIX: creates stacking context */
}

/* IMAGE */
.team-img {
  width: 100%;
  display: block;
}

/* OVERLAY */
.team-image-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 60%);
  opacity: 0;
  transition: 0.3s;
  z-index: 1;
  pointer-events: none; /* ⭐ FIX */
}

/* ICON */
.info-toggle {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);

  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;

  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 22px;

  display: none;
  cursor: pointer;

  z-index: 3; /* ⭐ FIX: über allem */
}

/* INFO TEXT */
.team-info {
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);

  text-align: center;
  color: #fff;

  opacity: 0;
  transition: 0.3s ease;

  pointer-events: none;
  z-index: 2;
}

/* DESKTOP */
@media (hover: hover) {
  .team-image-wrapper:hover .team-info {
    opacity: 1;
  }

  .team-image-wrapper:hover::after {
    opacity: 1;
  }
}

/* MOBILE */
@media (max-width: 768px) {
  .info-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .team-image-wrapper.active .team-info {
    opacity: 1;
    pointer-events: auto;
  }

  .team-image-wrapper.active::after {
    opacity: 1;
  }
}


/* + + + + + + + + + + + + + + + + + + + + + + + +
gallery
+ + + + + + + + + + + + + + + + + + + + + + + + */


.img-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

/* IMAGE */
.img-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

/* OVERLAY */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(128, 0, 128, 0.6);
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transition: 0.3s ease;

  z-index: 2;
  pointer-events: none;
}

/* DESKTOP HOVER (WICHTIG: jetzt korrekt) */
@media (hover: hover) {
  .img-wrapper:hover .overlay {
    opacity: 1;
    pointer-events: auto;
  }
}

/* GRID (bleibt gleich) */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  grid-auto-rows: 10px;
}

@media (max-width: 992px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .gallery { grid-template-columns: 1fr; }
}

/* ICON */
.gallery-toggle {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);

  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;

  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 22px;

  display: none;
  z-index: 5;
}

/* MOBILE ACTIVE STATE */
.img-wrapper.active .overlay {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .gallery-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


.icon-item i {
    font-size: 40px;
    color: #5e3c99;
    background: #e9dcd2;
    padding: 9px 15px;
    border-radius: 12px;
    transition: 0.3s;}