/* =========================================================
   ANGEBOT
   ========================================================= */

.mm-angebot {
  max-width: 1200px;
  margin: 0 auto;
}


/* =========================================================
   EINLEITUNG / PROGRAMME
   ========================================================= */

.mm-angebot-intro {
  width: 100%;
  padding: 48px 0 52px;
}

.mm-angebot-intro h1 {
  margin: 0 0 20px;

  font-size: clamp(2.35rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.05;
}

.mm-angebot-intro p {
  margin: 0;

  font-size: 1.15rem;
  line-height: 1.7;
}

.mm-angebot-intro-action {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* =========================================================
   PROGRAMMÜBERSICHT – DREI KACHELN
   ========================================================= */

.mm-programmuebersicht {
  padding: 5px 0 70px;
}

.mm-programmkarte {
  display: flex;
  flex-direction: column;

  height: 100%;

  background: #ffffff;

  border: 1px solid #dedede;
  border-radius: 0 !important;

  box-shadow: none;
}


/* =========================================================
   KACHEL – BILDBEREICH
   ========================================================= */

.mm-programmkarte-image-link {
  display: block;

  text-decoration: none;

  border-radius: 0 !important;
}

.mm-programmkarte-image-area {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 235px;

  padding: 28px;

  overflow: hidden;

  border-radius: 0 !important;
}


/* Farben wie auf der Startseite */

.mm-programmkarte-image-area-1 {
  background: #f4efe8;
}

.mm-programmkarte-image-area-2 {
  background: #eef2ec;
}

.mm-programmkarte-image-area-3 {
  background: #f1eee8;
}


/*
 * Alle drei Bilder haben exakt dieselbe Größe.
 * Auch der umlaufende Abstand bleibt dadurch identisch.
 */

.mm-programmkarte-image {
  display: block;

  width: 100%;
  max-width: 275px;
  height: 175px;

  object-fit: cover;
  object-position: 50% 50%;

  border: 0;
  border-radius: 0 !important;

  box-shadow: none;

  transition: transform 0.25s ease;
}


/*
 * Individueller Bildausschnitt.
 *
 * Die Bildgröße und der Abstand bleiben identisch.
 * Nur der innerhalb des Rahmens sichtbare Ausschnitt
 * wird verschoben.
 */

.mm-programmkarte-image-lott {
  object-position: 50% 20%;
}

.mm-programmkarte-image-lesung {
  object-position: 50% 5%;
}

.mm-programmkarte-image-dorfschoenheiten {
  object-position: 50% 40%;
}


/* Hover */

.mm-programmkarte-image-link:hover .mm-programmkarte-image,
.mm-programmkarte-image-link:focus .mm-programmkarte-image {
  transform: scale(1.025);
}


/* =========================================================
   KACHEL – TEXT
   ========================================================= */

.mm-programmkarte-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;

  padding: 22px 25px 26px;

  background: #ffffff;
}

.mm-programmkarte h2 {
  margin: 0 0 8px;

  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.15;
}

.mm-programmkarte-subtitle {
  flex-grow: 1;

  margin: 0;

  color: #444444;

  font-size: 0.98rem;
  line-height: 1.5;
}

.mm-programmkarte-actions {
  margin-top: 22px;
}

.mm-programmkarte-actions .mm-button {
  padding: 9px 17px;
}


/* =========================================================
   AUSFÜHRLICHE PROGRAMM-ABSCHNITTE
   ========================================================= */

.mm-angebot-section {
  padding: 62px 0;

  border-top: 1px solid #d9d9d9;

  scroll-margin-top: 110px;
}

.mm-angebot-text {
  padding-top: 20px;
  padding-bottom: 20px;
}

.mm-text-left {
  padding-right: clamp(30px, 6vw, 75px);
}

.mm-text-right {
  padding-left: clamp(30px, 6vw, 75px);
}

.mm-angebot-section h2 {
  margin: 0 0 9px;

  font-size: clamp(1.95rem, 3.3vw, 2.8rem);
  font-weight: 700;
  line-height: 1.08;
}

.mm-angebot-section h3 {
  margin: 0 0 27px;

  font-size: 1.18rem;
  font-weight: 400;
  line-height: 1.45;
}

.mm-angebot-section h4 {
  margin: 0 0 15px;

  font-size: 1.18rem;
  font-weight: 700;
}

.mm-angebot-section p,
.mm-angebot-section li {
  line-height: 1.7;
}

.mm-angebot-section ul {
  padding-left: 1.4rem;
}


/* =========================================================
   BILDER DER AUSFÜHRLICHEN ABSCHNITTE
   ========================================================= */

.mm-angebot-image {
  display: block;

  width: 100%;
  height: auto;

  border: 0;
  border-radius: 0 !important;

  box-shadow: none;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.mm-button-row {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: 28px;
}

.mm-button,
a.mm-button,
.mm-button:link,
.mm-button:visited {
  display: inline-block;

  padding: 11px 21px;

  background: #b60012;

  border: 2px solid #b60012;
  border-radius: 0 !important;

  color: #ffffff !important;

  font-weight: 600;
  line-height: 1.4;

  text-decoration: none !important;

  box-shadow: none !important;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.mm-button:hover,
.mm-button:focus,
.mm-button:active {
  background: #8f000e;

  border-color: #8f000e;
  border-radius: 0 !important;

  color: #ffffff !important;

  text-decoration: none !important;

  box-shadow: none !important;
}


/* =========================================================
   DORFSCHÖNHEITEN
   ========================================================= */

.mm-dorfschoenheiten-details {
  width: 100%;

  margin-top: 25px;
}

.mm-dorfschoenheiten-details p,
.mm-dorfschoenheiten-details li {
  line-height: 1.7;
}

.mm-dorfschoenheiten-details hr {
  margin: 32px 0;

  border: 0;
  border-top: 1px solid #d9d9d9;

  opacity: 1;
}

.mm-dorfschoenheiten-details h4 {
  margin-bottom: 15px;
}


/* =========================================================
   GUTSCHEINE
   ========================================================= */

.mm-gutschein {
  margin-top: 20px;

  padding: 40px 48px;

  background: #E0F2FF;

  border: 0;
  border-radius: 0 !important;

  color: #24363d;
}

.mm-gutschein h2 {
  margin: 0 0 8px;

  color: #24363d;

  font-size: clamp(1.8rem, 2.8vw, 2.15rem);
  font-weight: 700;
  line-height: 1.15;
}

.mm-gutschein p {
  margin: 0;

  color: #24363d;

  font-size: 1.08rem;
  line-height: 1.6;
}


/* =========================================================
   GUTSCHEIN-BUTTON
   ========================================================= */

/*
 * Standard:
 * weißer Hintergrund
 * dunkelblauer Rahmen
 * dunkelblaue Schrift
 */

.mm-gutschein-button,
a.mm-gutschein-button,
.mm-gutschein-button:link,
.mm-gutschein-button:visited {
  display: inline-block;

  padding: 11px 21px;

  background: #ffffff;

  border: 2px solid #35677d;
  border-radius: 0 !important;

  color: #35677d !important;

  font-weight: 700;
  line-height: 1.4;

  text-decoration: none !important;

  box-shadow: none !important;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}


/*
 * Hover:
 * dunkelblauer Hintergrund
 * weiße Schrift
 */

.mm-gutschein-button:hover,
.mm-gutschein-button:focus,
.mm-gutschein-button:active {
  background: #35677d;

  border-color: #35677d;
  border-radius: 0 !important;

  color: #ffffff !important;

  text-decoration: none !important;

  box-shadow: none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

  .mm-angebot-intro {
    padding: 40px 0 45px;
  }

  .mm-angebot-intro-action {
    justify-content: center;

    margin-top: 25px;
  }

  .mm-programmuebersicht {
    padding-bottom: 50px;
  }

  .mm-programmkarte-image-area {
    height: 215px;
    padding: 24px;
  }

  .mm-programmkarte-image {
    max-width: 240px;
    height: 165px;
  }

  .mm-programmkarte-image-lott {
    object-position: 50% 65%;
  }

  .mm-programmkarte-image-dorfschoenheiten {
    object-position: 50% 62%;
  }

  .mm-angebot-section {
    padding: 50px 0;
  }

  .mm-text-left,
  .mm-text-right {
    padding-left: 0;
    padding-right: 0;
  }

  .mm-angebot-image {
    margin-top: 25px;
  }

  .mm-dorfschoenheiten-details {
    margin-top: 18px;
  }

  .mm-gutschein {
    margin-top: 0;

    padding: 35px 30px;
  }

  .mm-gutschein .text-lg-end {
    margin-top: 25px;
  }

}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 767.98px) {

  .mm-programmkarte-image-area {
    height: 235px;
  }

  .mm-programmkarte-image {
    width: 100%;
    max-width: 320px;
    height: 185px;
  }

}


@media (max-width: 575.98px) {

  .mm-angebot-intro h1 {
    font-size: 2.3rem;
  }

  .mm-angebot-section h2 {
    font-size: 1.95rem;
  }

  .mm-programmkarte h2 {
    font-size: 1.4rem;
  }


  /* Programme-Button */

  .mm-angebot-intro-action {
    justify-content: center;
  }


  /* Kacheln */

  .mm-programmkarte-image-area {
    padding: 22px;
  }

  .mm-programmkarte-content {
    padding: 20px;
  }

  .mm-programmkarte-actions .mm-button {
    display: block;

    width: 100%;

    text-align: center;
  }


  /* normale Buttons */

  .mm-button-row {
    display: block;
  }

  .mm-button-row .mm-button {
    display: block;

    width: 100%;

    margin-bottom: 8px;

    border-radius: 0 !important;

    text-align: center;
  }


  /* Gutschein */

  .mm-gutschein {
    padding: 28px 20px;
  }

  .mm-gutschein-button {
    display: block;

    width: 100%;

    border-radius: 0 !important;

    text-align: center;
  }

}