/* red-hat-display-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: 'Red Hat Display';
  display:swap;
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/red-hat-display-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* red-hat-display-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: 'Red Hat Display';
  display:swap;
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/red-hat-display-v21-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* red-hat-display-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  display:swap;
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/red-hat-display-v21-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  display:swap;
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-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: 'Roboto Condensed';
  display:swap;
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-condensed-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-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: 'Roboto Condensed';
  display:swap;
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/roboto-condensed-v31-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
   --primary-color: #7B9A88;/* grün */
   --secondary-color: #F9F9F9;/* hellgrau */
   --red: #D8232A;/* ROT */
   --black: #000000;
   --body: #29893F;
   --bs-body-font-family:'Red Hat Display', sans-serif;
   --bs-body-font-family_two:'Roboto Condensed', sans-serif;
   --bs-body-font-weight-small: 300;
   --bs-body-font-weight-regular: 400;
   --bs-body-font-weight-bold: 800;
}



      /* ===================== */
    /* 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(--red); /* 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;
    }

    .logo-green { background: #7f9c8d; }
    .logo-red { background: #e30613; }

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

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

    /* ===================== */
    /* 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;
      }

      .hero img {
        height: 300px;
      }

      .bottom-section {
    display: block;

    }

      .logo {
    width: 130px;

    }
 }

.custom-accordion .accordion-item + .accordion-item {
  border-top: none !important;
}

/* Standard Bootstrap Pfeil ausblenden */
.custom-accordion .accordion-button::after {
  display: none;
}

/* Button Layout */
.custom-accordion .accordion-button {
  border: none!important;
  box-shadow: none !important;

}

/* Komplett ohne Border */
.custom-accordion .accordion-item {
  border: none !important;
}

/* Kein Rahmen um den Button */
.custom-accordion .accordion-button {
  border: none !important;
  box-shadow: none !important;
}


/* Kein Rahmen beim aufgeklappten Zustand */
.custom-accordion .accordion-button:not(.collapsed) {
  box-shadow: none !important;
}

/* Kein Border im Collapse-Bereich */
.custom-accordion .accordion-collapse {
  border: none !important;
}

/* Kein Radius irgendwo */
.custom-accordion .accordion-item,
.custom-accordion .accordion-button,
.custom-accordion .accordion-collapse {
  border-radius: 0 !important;
}

/* Pfeil */
.custom-accordion .arrow {
  transition: transform 0.3s ease;
  color: red;
  font-size: 1.4rem;
}

/* Rotation wenn offen */
.custom-accordion .accordion-button:not(.collapsed) .arrow {
  transform: rotate(180deg);
}

/* SCHÖN */
.bg_schoen .accordion-button,
.bg_schoen .accordion-body {
  background-color: #F2DADE;
}

.bg_schoen .accordion-button:hover {
  background-color: #ead0d5;
}

/* PRAKTISCH */
.bg_praktisch .accordion-button,
.bg_praktisch .accordion-body {
  background-color: #D1EAF7;
}

.bg_praktisch .accordion-button:hover {
  background-color: #bcdff4;
}

/* PERSÖNLICH */
.bg_persoenlich .accordion-button,
.bg_persoenlich .accordion-body {
  background-color: #E0DFEA;
}

.bg_persoenlich .accordion-button:hover {
  background-color: #cbc9dc;
}

/* GESUND */
.bg_gesund .accordion-button,
.bg_gesund .accordion-body {
  background-color: #CBE5E7;
}

.bg_gesund .accordion-button:hover {
  background-color: #b6d8db;
}

/* HANDEL */
.bg_handel .accordion-button,
.bg_handel .accordion-body {
  background-color: #FCE7D3;
}

.bg_handel .accordion-button:hover {
  background-color: #f6d6bd;
}

/* GASTLICH */
.bg_gastlich .accordion-button,
.bg_gastlich .accordion-body {
  background-color: #EFE6DF;
}

.bg_gastlich .accordion-button:hover {
  background-color: #e4d7cd;
}


/* Card komplett ohne Border */
.custom-card {
  border: none!important;
  border-radius: 0!important;
  overflow: hidden;
  background: transparent;
}

/* Bildbereich */
.img-wrapper {
  overflow: hidden;
}

.img-wrapper img {
  transition: transform 0.4s ease;
  display: block;
  width: 100%;
}

/* Hover Zoom */
.custom-card:hover img {
  transform: scale(1.05);
}

/* Grauer Textbereich */
.custom-card .card-body {
  background: var(--secondary-color);
  padding: 1.5rem;
}

/* Optional: etwas moderner Look */
.custom-card:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* Titel rot wie im Screenshot */
.custom-card h5 {
  color: #d60000;
}

/* Job */

.job-item {
  background: #f3f3f3;
  border-radius: 6px;
}

.job-logo {
  max-height: 50px;
  object-fit: contain;
}

.job-title {
  color: #d71920;
  font-weight: 600;
}

.job-location {
  color: #555;
  font-size: 0.9rem;
}

.job-btn {
  font-size: 0.9rem;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
}


footer {
  font-size: 0.95rem;
}

.footer-link {
  text-decoration: none;
  color: #000;
}

.footer-link:hover {
  text-decoration: underline;
}

footer i {
  color: #198754; /* z.B. grün passend zum Logo */
}



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

}

*:focus { outline: none !important; }
::selection       { background-color: var(--body); color: var(--white); 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(2rem + 1.1vw) !important;
  line-height: 3.0rem;
}

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

.fs-3 {
  font-size: calc(0.9rem + 0.2vw) !important;
}

/* FONT WEIGHTS */
.fw-bold   { font-weight: 700 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-light  { font-weight: 300 !important; }

/* BACKGROUNDS */
.bg_schoen  { background-color: #F2DADE; }
.bg_praktisch  { background-color: #D1EAF7; }
.bg_persoenlich  { background-color: #E0DFEA;}
.bg_gesund  { background-color: #CBE5E7; }
.bg_handel { background-color: #FCE7D3; }
.bg_gastlich { background-color: #EFE6DF; }
.bg_grey  { background-color: var(--secondary-color); }
.bg_green { background-color: var(--primary-color); }
.red   { color: var(--red); }

/* FONT FAMILY */
.popp {
  font-family: var(--bs-body-font-family_two);
}


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

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background-color: var(--red);
  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: black; }
a:hover { color: var(--red); }
a:active  { color: var(--red); }

.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='red'/%3E%3C/svg%3E");
  background-size: contain;
}