@charset "utf-8";

    /* -------------------------
       GRID LAYOUT
    ------------------------- */
    .card-wrapper {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 2rem;
      padding: 20px 10px;
    }

    /* -------------------------
       KARTE
    ------------------------- */
    .card-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .card {
      position: relative;
      width: 100%;
      max-width: 430px;
      min-height: 460px;
      border-radius: 30px;
      overflow: hidden;
      background: #ffffff;
      box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    }

.card-face {
  /* nicht mehr absolute, damit die Höhe mit dem Inhalt wächst */
  position: relative;
  box-sizing: border-box;
  display: none;          /* standardmäßig verborgen */
  flex-direction: column;
  padding-bottom: 20px;
}

/* nur die aktive Seite anzeigen */
.card-face.active {
  display: flex;
}

    .card-image-top {
      width: 100%;
      padding: 20px;
      box-sizing: border-box;
    }

    .card-image-top img {
      width: 100%;
      border-radius: 12px;
      border: 1px solid #000;
      display: block;
      object-fit: contain;
    }

    .card-front-text,
    .card-back-text {
      padding: 20px;
     
      hyphens: auto;
    }

  .card-front-text {
    text-align: center;
    font-size: clamp(1.05rem, 4.5vw, 1.15rem);
  }
.card-back-text {
    
    font-size: clamp(1.15rem, 4.5vw, 1.25rem);
  }


    .card-title {
      font-size: 1.4rem;
      font-weight: 700;
      text-align: center;
      margin-bottom: 8px;
    }

    /* -------------------------
       BUTTON
    ------------------------- */
    .flip-button {   
      display: inline-block;
      background-color: #ffffff;
      color: #000000;
      border: 3px solid #2E3820;
      border-radius: 8px;
      font-weight: 700;
      padding: 0.8em 1.4em;
      cursor: pointer;
      transition: 0.2s;
      margin-top: 12px;
      min-width: 210px;      /* gleiche Breite */
      text-align: center;    /* Buttontext immer zentriert */
      font-size: clamp(0.95rem, 2.3vw, 1.05rem);
    }

    .flip-button:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }

    .flip-button:active {
      transform: translateY(0);
      box-shadow: none;
    }

    /* -------------------------
       FOKUS-BARRIEREFREI
    ------------------------- */
    .flip-button:focus,
    .card:focus,
    .card-item:focus-within {
      outline: 3px solid #005fcc;
      outline-offset: 4px;
    }

    /* -------------------------
       MOBILE LAYOUT
    ------------------------- */
    @media (max-width: 768px) {
      .card-wrapper {
        grid-template-columns: 1fr;
      }

      .card {
        max-width: 100%;
      }
    }
h3{text-align:left;
  }