/* SmartDec Styles starten hier */


html {
  font-size: 112.5%; /* 16px × 1.125 = 18px */
}


body {
    font-family: Titillium Web, sans-serif;
    color: #8d8d8d;
    background-color: #fff;
}

/* link: #78d89f   hover: #7ee6af */

/* Titillium Web – Regular */
@font-face {
  font-family: 'Titillium Web';
  src: url('../fonts/TitilliumWeb-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Italic */
@font-face {
  font-family: 'Titillium Web';
  src: url('../fonts/TitilliumWeb-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Light */
@font-face {
  font-family: 'Titillium Web';
  src: url('../fonts/TitilliumWeb-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Light Italic */
@font-face {
  font-family: 'Titillium Web';
  src: url('../fonts/TitilliumWeb-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* SemiBold */
@font-face {
  font-family: 'Titillium Web';
  src: url('../fonts/TitilliumWeb-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* SemiBold Italic */
@font-face {
  font-family: 'Titillium Web';
  src: url('../fonts/TitilliumWeb-SemiBoldItalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: 'Titillium Web';
  src: url('../fonts/TitilliumWeb-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Bold Italic */
@font-face {
  font-family: 'Titillium Web';
  src: url('../fonts/TitilliumWeb-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}


/* Social Media Icons im Footer */
.smartdec-social-icons {
  display: flex;
  gap: 3rem;
  margin-top: 2rem;
}

.smartdec-social-icons a {
  color: #C4FFE0;
  font-size: 1.8rem;
  transition: opacity 0.2s ease;
}

.smartdec-social-icons a:hover {
  color: #fff;
}

/* Headings mit variablen Schriftschnitten */
.heading-highlight {
  font-weight: 700;
  color: #78d89f; 
}


/* Header mobil mit Silbentrennung */
@media (max-width: 767px) {
  .et_pb_module_header {
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}








/* 16:9-Container */
.aspect-16-9{
  position: relative;
  width: 100%;
  overflow: hidden;              /* wichtig: schneidet sauber */
}
.aspect-16-9::before{
  content:"";
  display:block;
  padding-top:66%;            /* Verhältnis Breite zu Höhe */
}

/* Wrapper + Bild auf den Container spannen */
.aspect-16-9 .et_pb_image_wrap,
.aspect-16-9 picture,
.aspect-16-9 a{
  position:absolute;
  inset:0;                       /* top/right/bottom/left: 0 */
  display:block;
}

.aspect-16-9 img{
  position:absolute;
  inset:0;
  width:100% !important;         /* überschreibt ggf. Inline-Styles */
  height:100% !important;
  object-fit:cover;              /* Zuschneiden statt Strecken */
  object-position:center;        /* Fokuspunkt – nach Bedarf ändern */
}

.aspect-16-9::after {
  content: "";
  position: absolute;
  inset: 0; /* deckt das ganze Bild ab */
  background: linear-gradient(
    to top left,        /* Richtung: von unten rechts nach oben links */
    rgba(126, 230, 175, 0.8) 0%,   /* unten rechts */
    rgba(126, 230, 175, 0) 25%     /* nach ca. 1/4 transparent */
  );
  border-radius: 1.5rem;
  mix-blend-mode: multiply; /* Blend-Modus wie in Photoshop */
  pointer-events: none; /* Klicks gehen trotzdem aufs Bild */
}






/* ==========================================================
   MENU-DESKTOP-MM – Desktop- UND Tablet-Menü anzeigen
   ========================================================== */

/* 1. Tablet-Bereich: Text-Menü beibehalten, Hamburger ausblenden */
@media (min-width: 768px) and (max-width: 980px) {
  .menu-desktop-mm .et_pb_menu__menu {
    display: flex !important;
  }
  .menu-desktop-mm .et_pb_menu__toggle,
  .menu-desktop-mm .et_mobile_nav_menu,
  .menu-desktop-mm .et_pb_menu .et_mobile_menu {
    display: none !important;
  }

  /* Menü-Layout leicht anpassen */
  .menu-desktop-mm .et_pb_menu__wrap {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }

  .menu-desktop-mm .et_pb_menu__menu > nav > ul {
    display: flex;
    flex-wrap: wrap;          /* zweite Zeile, falls zu breit */
    align-items: center;
  }

  .menu-desktop-mm .et_pb_menu__menu > nav > ul > li {
    padding: 0 12px;
  }

  /* optional etwas kleinere Schrift */
  .menu-desktop-mm .et-menu-nav > li > a {
    font-size: 15px;
  }
}

/* 2. Sticky Header: Sicherheitshalber auch dort Hamburger ausblenden */
.et-fixed-header .menu-desktop-mm .et_pb_menu__toggle {
  display: none !important;
}

/* 3. Optional: sanfte Übergänge bei Größenwechsel */
.menu-desktop-mm .et_pb_menu__menu {
  transition: all 0.2s ease;
}