/* ======= KS Teaser Layout ======= */

/* auf DEFAULT kopiert für ADMIN */
:root
{
    --ks-braun-dunkel-color: #8c6b4c;  /* rgb(140,107,76) */
    --ks-braun-mittel-color: #beac94;  /* rgb(190,172,148) */
    --ks-braun-hell-color: #cec0b3;  /* rgb(206,192,179) */

    --ks-blau-hell-color: #d0e1f1; /* rgb(208,225,241) */
    --ks-blau-mittel-color: #afbcc5; /* rgb(175,188,197) */
    --ks-blau-dunkel-color: #063e4f; /* rgb(6,62,79) */

    --ks-gruen-mittel-color: #b6c1b0; /* rgb(182,193,176) */

    --ks-border-radius: 30px;


}



.ks-teaser {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 4rem;
  position: relative;

  --ks-teaser-bg: var(--ks-blau-mittel-color, #afbcc5);
  --ks-teaser-title: var(--ks-blau-dunkel-color, #afbcc5);   /* dunkel für helle Hintergründe  - auszug: #24323A*/
  --ks-teaser-text: var(--ks-blau-dunkel-color, #afbcc5);   /* dunkel für helle Hintergründe */
  --ks-teaser-btn-bg: var(--ks-blau-dunkel-color, #afbcc5);
  --ks-teaser-btn-text: #fff;  
}

/* --- Spaltenaufteilung 5/12 vs 7/12 --- */
.ks-teaser__media {
  /* flex: 0 0 41.6666%;  5/12 */
  flex: 0 0 50%; 
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0;
  z-index: 1;
}

.ks-teaser__content {
  /* flex: 0 0 58.3333%;  7/12 */
  flex: 0 0 50%; 
  /*
  background: var(--ks-blau-hell-color);
  background: var(--ks-blau-mittel-color);
  */
  background: var(--ks-teaser-bg);
  color: var(--ks-teaser-text);

  padding: 3rem;
  
  border-top-left-radius: var(--ks-border-radius);
  border-top-right-radius: var(--ks-border-radius);
  border-bottom-right-radius: var(--ks-border-radius);
  border-bottom-left-radius: var(--ks-border-radius);

  box-shadow: 0 10px 25px rgba(0,0,0,.1);
  max-width: 700px;
  position: relative;
  z-index: 2;
}

/* --- Überlappung --- */
.ks-teaser:not(.ks-teaser--reverse) .ks-teaser__content {
  margin-left: -120px;    /* überlappt das Bild leicht */
  margin-right: auto;    /* Abstand nach rechts */

  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.ks-teaser.ks-teaser--reverse .ks-teaser__content {
  margin-right: -120px;   /* überlappt das Bild leicht */
  margin-left: auto;     /* Abstand nach links */

  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* --- Bilddarstellung --- */
.ks-teaser__media img.ks-teaser__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* --- Text & Button --- */
.ks-teaser__title {
  margin: 0 0 0.75rem 0;
  font-size: clamp(3.5rem, 4vw, 5rem);
  line-height: 1.2;
  font-family: Corinthia, Georgia, serif;
  color: var(--ks-teaser-title);
}


@media screen and (max-width: 849px)
{
  .ks-teaser__title {
    line-height: 0.95;
  }
}

.ks-teaser__text p {
  margin: 0 0 1rem 0;
  color: var(--ks-teaser-text);
}

.button.ks-teaser__button {
  display: inline-block;
  margin-top: 1rem;
  border-radius: var(--ks-border-radius);
  padding: 0.05rem 2rem;

  background-color: var(--ks-teaser-btn-bg);
  color: var(--ks-teaser-btn-text);

  font-weight: 500;
  font-size: 1.1rem;
  text-transform: none;
}

.button.ks-teaser__button:hover,
.button.ks-teaser__button:active,
.button.ks-teaser__button:focus
{
  color: var(--ks-teaser-btn-text);
  background-color: var(--ks-teaser-btn-bg);
}

/* --- Reverse Layout (Bild rechts) --- */
.ks-teaser.ks-teaser--reverse {
  flex-direction: row-reverse;
}

/* --- Mobile Layout --- */
@media (max-width: 767px) {
  .ks-teaser {
    flex-direction: column;
    margin-bottom: 2rem;
  }

  .ks-teaser.ks-teaser--reverse {
    flex-direction: column;
  }

  .ks-teaser__media,
  .ks-teaser__content {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .ks-teaser__content {
    margin: -2rem auto 0 auto !important;
    padding: 2rem;
    box-shadow: none;
  }


  /* --- Abrundung nach oben --- */
  .ks-teaser:not(.ks-teaser--reverse) .ks-teaser__content,
  .ks-teaser.ks-teaser--reverse .ks-teaser__content 
  {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--ks-border-radius);
    border-bottom-right-radius: var(--ks-border-radius);
  }



}


/* --- Fallback für ältere Browser (optional, falls nötig) --- */
@supports not (aspect-ratio: 1 / 1) {
  .ks-teaser__media::before {
    content: "";
    display: block;
    padding-top: 100%;        /* erzeugt quadratische Box */
  }
  .ks-teaser__media img.ks-teaser__img {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
  }
}

/* --- Mobile: natürliches Seitenverhältnis --- */
@media (max-width: 767px) {
  .ks-teaser__media {
    aspect-ratio: auto;       /* kein quadratisches Zwingen */
  }
  .ks-teaser__media img.ks-teaser__img {
    height: auto;
  }
}


/* Braun dunkel → heller Button & weiße Schrift */
.ks-teaser.ks-teaser--bg-braun-dunkel {
  --ks-teaser-bg: var(--ks-braun-dunkel-color, #8c6b4c);
  --ks-teaser-title: #ffffff;
  --ks-teaser-text: #ffffff;
  --ks-teaser-btn-bg: #ffffff;
  --ks-teaser-btn-text: var(--ks-blau-dunkel-color, #afbcc5);
}

/* Braun mittel/hell = helle Flächen → dunkler Text & Button */
.ks-teaser.ks-teaser--bg-braun-mittel {
  --ks-teaser-bg: var(--ks-braun-mittel-color, #beac94);
  --ks-teaser-title: var(--ks-blau-dunkel-color, #afbcc5);
  --ks-teaser-text: #ffffff;
  --ks-teaser-btn-bg: var(--ks-blau-dunkel-color, #afbcc5);
  --ks-teaser-btn-text: #ffffff;
}
.ks-teaser.ks-teaser--bg-braun-hell {
  --ks-teaser-bg: var(--ks-braun-hell-color, #cec0b3);
  --ks-teaser-title: var(--ks-blau-dunkel-color, #afbcc5);
  --ks-teaser-text: var(--ks-blau-dunkel-color, #afbcc5);
  --ks-teaser-btn-bg: var(--ks-blau-dunkel-color, #afbcc5);
  --ks-teaser-btn-text: #ffffff;
}


/* Blau dunkel → heller Button & weiße Schrift */
.ks-teaser.ks-teaser--bg-blau-dunkel {
  --ks-teaser-bg: var(--ks-blau-dunkel-color, #8c6b4c);
  --ks-teaser-title: #ffffff;
  --ks-teaser-text: #ffffff;
  --ks-teaser-btn-bg: #ffffff;
  --ks-teaser-btn-text: var(--ks-braun-dunkel-color, #afbcc5);
}

/* Blau hell/mittel – ähnlich hell → dunkler Text & Button */
.ks-teaser.ks-teaser--bg-blau-hell {
  --ks-teaser-bg: var(--ks-blau-hell-color, #d0e1f1);
  --ks-teaser-title: var(--ks-blau-dunkel-color, #afbcc5);
  --ks-teaser-text: var(--ks-blau-dunkel-color, #afbcc5);
  --ks-teaser-btn-bg: var(--ks-blau-dunkel-color, #afbcc5);
  --ks-teaser-btn-text: #ffffff;
}
.ks-teaser.ks-teaser--bg-blau-mittel {
  --ks-teaser-bg: var(--ks-blau-mittel-color, #afbcc5);
  --ks-teaser-title: var(--ks-blau-dunkel-color, #afbcc5);
  --ks-teaser-text: #ffffff;
  --ks-teaser-btn-bg: var(--ks-blau-dunkel-color, #afbcc5);
  --ks-teaser-btn-text: #ffffff;
}

/* Grün mittel – hell → dunkler Text & Button */
.ks-teaser.ks-teaser--bg-gruen-mittel {
  --ks-teaser-bg: var(--ks-gruen-mittel-color, #b6c1b0);
  --ks-teaser-title: var(--ks-blau-dunkel-color, #afbcc5);
  --ks-teaser-text: #ffffff;
  --ks-teaser-btn-bg: var(--ks-blau-dunkel-color, #afbcc5);
  --ks-teaser-btn-text: #ffffff;
}