/* ==================================================
   Two Card Module
   ================================================== */



.two-card-section__title {
  
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 400;
}

.two-card-section.content-width {
  margin: 4rem auto 0.5rem;
  max-width: calc(100%);
}
/*===========so sind die weissen Felder immer gleich hoch. Wenn links ein grosses Bild ist und rechts daneben ein 
kurzer Text, ist um den Text ein großer weisser Rand oben und unten.======================================*/

/*.two-card-grid {
  display: grid;
  gap: 1.5rem;
  align-items: stretch;
}*/

/*=================================ENDE VON DIESEM BEREICH=====================================================
===========so sind die weissen Felder immer gleich hoch. Wenn links ein grosses Bild ist und rechts daneben ein 
kurzer Text, ist um den Text ein großer weisser Rand oben und unten.======================================*/



/*===========so sind die weissen Felder unterschiedlich hoch. Wenn links ein grosses Bild ist und rechts daneben ein 
kurzer Text, ist um den Text KEIN großer weisser Rand oben und unten, wenn der
Text-Block gösser ist als das Bild, sind beide gleich hoch======================================*/


.two-card-grid {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

/* Bildkarten dürfen sich bei höherer Nachbarkarte strecken */
.two-card:has(.two-card__image-wrap) {
  align-self: stretch;
}

/* Bildbereich darf innerhalb der gestreckten Karte mitwachsen */
.two-card:has(.two-card__image-wrap) .two-card__image-wrap {
  flex: 1 1 auto;
}

/* Bild füllt dann die verfügbare Höhe sauber aus */
.two-card:has(.two-card__image-wrap) .two-card__image {
  height: 100%;
  object-fit: cover;
}

/*=================================ENDE VON DIESEM BEREICH=====================================================
===========so sind die weissen Felder unterschiedlich hoch. Wenn links ein grosses Bild ist und rechts daneben ein 
kurzer Text, ist um den Text KEIN großer weisser Rand oben und unten, wenn der
Text-Block gösser ist als das Bild, sind beide gleich hoch.======================================*/

/* Nur-Text-Karten */
.two-card:not(:has(.two-card__image-wrap)) {
  justify-content: center;
}

.two-card:not(:has(.two-card__image-wrap)) .two-card__content {
  padding: clamp(2rem, 4vw, 4rem);
}




/* Breitenverhältnisse */

.two-card-grid--50-50 {
  grid-template-columns: 1fr 1fr;
}

.two-card-grid--60-40 {
  grid-template-columns: 3fr 2fr;
}

.two-card-grid--40-60 {
  grid-template-columns: 2fr 3fr;
}

.two-card-grid--70-30 {
  grid-template-columns: 7fr 3fr;
}

.two-card-grid--30-70 {
  grid-template-columns: 3fr 7fr;
}

.two-card {
  display: flex;
  flex-direction: column;
  min-width: 0;

  overflow: hidden;

  border-radius: 3rem;
  background: #fff;
  color: inherit;
  text-decoration: none;

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.two-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.14);
}

.two-card__image-wrap {
  width: 100%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
}

.two-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;

  transition: transform 0.35s ease;
}

.two-card:hover .two-card__image {
  transform: scale(1.04);
}

.two-card__content {
  padding: 1.5rem;
}

.two-card__kicker {
  margin: 0 0 0.6rem;
  color: var(--color-accent, #f57d00);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.two-card__title {
  margin: 0 0 0.8rem;
  font-size: clamp(1.35rem, 1.8vw, 1.8rem);
  line-height: 1.15;
  font-weight: 600;
}

.two-card__text {
  margin: 0;
  color: #666;
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: 0;
}

.two-card__button {
  display: inline-flex;
  margin-top: 1.2rem;

  color: var(--color-accent, #f57d00);
  font-weight: 700;
}

/* Nur-Bild-Karten */

.two-card:has(.two-card__image-wrap):not(:has(.two-card__content)) {
  background: transparent;
}

.two-card:has(.two-card__image-wrap):not(:has(.two-card__content))
  .two-card__image {
  aspect-ratio: 16 / 10;
}

/* Nur-Text-Karten */

.two-card:not(:has(.two-card__image-wrap)) {
  justify-content: center;
}

/* Tablet: einspaltig */

@media (max-width: 980px) {
  .two-card-grid {
    gap: 1.25rem;
    grid-template-columns: 1fr;
  }
  .two-card-section.content-width {
  margin: 4rem auto 0.5rem;
  
}
}

/* Mobile: einspaltig */

@media (max-width: 768px) {
  .two-card-section {
    margin: 3rem auto;
  }

  .two-card-grid,
  .two-card-grid--50-50,
  .two-card-grid--60-40,
  .two-card-grid--40-60,
  .two-card-grid--70-30,
  .two-card-grid--30-70 {
    grid-template-columns: 1fr;
  }

  .two-card__content {
    padding: 1.25rem;
  }
  .two-card-section.content-width {
  margin: 4rem auto -2rem;
  
}
}