:root {
    --white: #ffffff;
    --black: #121212;
    /*--light-black: #383838;*/
    --darkmode-black: #434343;

    --light-gray-e0: #E0E0E0;
    --light-gray-f4: #F4F4F4;

    --orange: #FFAB00; /*blue*/   
    --light-orange: #f1d59c; /*Light blue*/

    --light-green: #7cc2ab; /*Light purple*/
    --green: #00A76F; /*purple*/

    --font-weight-100: 100;
    --font-weight-normal: 300;
    --font-weight-medium: 500;

    --font-size-25: 1.5625rem;
    --font-size-30: 1.875rem;
    --font-size-50: 3.125rem;
    --font-size-70: 4.375rem;
    --font-size-100: 6.25rem;
    --font-size-120: 7.5rem;

    --character-spacing-0: 0rem;
    --character-spacing-2-5: .15625rem;
    --character-spacing-4-5: .28125rem;
    --character-spacing-15: .9375rem;

    --line-spacing-29: 1.8125rem;
    --line-spacing-36: 2.25rem;
    --line-spacing-50: 3.125rem;
    --line-spacing-80: 5rem;
    --line-spacing-120: 7.5rem;
    --line-spacing-140: 8.75rem;

    --text-transform-uppercase: uppercase;
}


body {
	background-color: var(--background-color);
	color: var (--text-color);
}


.short-text-button__headline--orange,
.felder__headline--orange,
.orange {
    color: var(--orange);
}

.orange-bg {
    background-color: var(--orange);
}

.orange-bg__light {
    background-color: var(--light-orange);
}

.text-path--orange {
    fill: var(--orange);
}

.green {
    color: var(--green);
}

.green-bg {
    background-color: var(--green);
}

.green-bg__light {
    background-color: var(--light-green);
}

.text-path--green,
.fill-green {
    fill: var(--green);
}

.textWithImagePopup {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-top: 2.5rem;
    margin-bottom: 2rem;
}

/* Modul */
.textWithImagePopup__module {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0 1rem;
}

/* Reverse (mobile identisch, bleibt gestapelt) */
.textWithImagePopup__module--reverse {
    flex-direction: column;
}

.textWithImagePopup__image {
    max-width: 100%;
    height: auto;
    margin-top: 1rem;
    cursor: pointer;
}

/* Bild */
.textWithImagePopup__image img {
    width: 100%;
    height: auto;
    cursor: pointer;
}

/* Text */
.textWithImagePopup__text {
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.textWithImagePopup__topline {
    display: block;
    text-transform: uppercase;
    font-size: 1rem;
    color: #888;
    margin-bottom: .375rem;
}

.textWithImagePopup__headline {
    font-size: 1.375rem;
    margin-bottom: 0.75rem;
}

.textWithImagePopup__text p {
    font-size: 1rem;
    line-height: 1.6;
}

.textWithImagePopup__detail {
    font-size: var(--font-size-25);
    line-height: var(--line-spacing-36);
    width: fit-content;
    text-align: left;
}

/* Popup */
.textWithImagePopup__popup {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

.textWithImagePopup__popupImage {
    max-width: 90%;
    max-height: 90%;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.textWithImagePopup__popup.is-active {
    opacity: 1;
    pointer-events: auto;
}

.textWithImagePopup__popup.is-active .textWithImagePopup__popupImage {
    transform: scale(1);
}

/* Close Button */
.textWithImagePopup__popupClose {
    position: absolute;
    top: 3rem;
    right: 3rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 3rem;
    line-height: 1;
    cursor: pointer;
    z-index: 1001;
}

.textWithImagePopup__popupClose:hover {
    opacity: 0.7;
}

.textWithImagePopup__module {
    background: var(--light-green);
}


@media (prefers-color-scheme: dark) {
	:root {
	  --background-color: #212B36;
	  --text-color: #ddd;
      --text-path--black: #ddd;
	}

    p,
    .kontakt-links,
    .footer-left__adresse{
        color: var(--text-color);
    }

    .logo-text-color {
        fill: var(--white);
    }

    .kontaktdaten__text-tel-nummer,
    .kontaktdaten__text-tel-t,
    .kontaktdaten__text-mail-adresse,
    .kontaktdaten__text-mail-m,
    .kontaktdaten__headline {
        color: var(--background-color);
    }

    .info-card__headline{
        color: var(--background-color);
    }

    .felder__kosten,
    .felder__ecom{
        background-color: transparent;
    }
}

@media (prefers-color-scheme: light) {
	:root {
	  --background-color: #fefefe;
	  --black: #222;
      --text-color: #121212;
	}
}


@media (min-width: 48em) {
    .textWithImagePopup {
      gap: 4rem;
      margin: 3.75rem 0;
      align-items: center;
      margin-bottom: 4rem;
    }
  
    .textWithImagePopup__module {
      width: 90%;
      padding: 0;
    }
  
    .textWithImagePopup__headline {
      font-size: 1.75rem;
    }
  
    .textWithImagePopup__text p {
      font-size: 1rem;
    }

    .textWithImagePopup__detail {
        font-size: var(--font-size-25);
    }

    .textWithImagePopup__image {
        max-width: 80%;
        height: auto;
        cursor: pointer;
        margin-bottom: 0.5rem;
        margin-left: 1rem;
    }
  }
  

  
  @media (min-width: 80em) {
    .textWithImagePopup{
        margin-top: 8rem;
    }
    
    .textWithImagePopup__module {
      width: 80%;
      flex-direction: row;
      align-items: center;
      gap: 2.5rem;
    }
  
    .textWithImagePopup__module--reverse {
      flex-direction: row-reverse;
    }
  
    .textWithImagePopup__image img {
      max-width: 31.25rem;
      transition: transform 0.3s ease;
    }
  
    .textWithImagePopup__image img:hover {
      transform: scale(1.05);
    }

    .textWithImagePopup__module--reverse .textWithImagePopup__image {
        margin-left: 0;
        margin-right: 1rem;
    } 
  
    .textWithImagePopup__text {
      max-width: 31.25rem;
    }
  
    .textWithImagePopup__headline {
      font-size: 2rem;
    }

    .textWithImagePopup__detail {
        font-size: var(--font-size-25);
    }
  }