@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&display=swap');

/* Für Desktop größere max-width und mehr padding */
@media (min-width: 768px) {
    #about > div.max-w-md,
    #services > div.max-w-md,
    #about > div.mt-8.max-w-md,
    #services > div.grid.max-w-md {
      max-width: 64rem /* ca. 1024px */;
      padding-left: 2rem; /* 32px */
      padding-right: 2rem;
    }
  }

body{
    --color-primary: #f1f0ee;
    --color-secondary: #ffffff;
    --color-olive: #b8c2ad;
    --color-olive-dark: #626a59;
    --color-primary-dark:#e7e6e3;
    --color-primary-dark-font:#4e4e34;

    font-family:"Bodoni Moda", serif;
}

.abril-fatface-regular {
    font-family: "Abril Fatface", serif;
    font-weight: 400;
    font-style: normal;
  }


.bodoni-moda-regular {
    font-family: "Bodoni Moda", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
  }

#about {
    background: var(--color-primary);
}

#about h2, #services h2 {
    font-size:2rem;
    color:var(--color-primary-dark-font);
}

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

#services {
    background: var(--color-primary-dark);
}

.cards {
    background: var(--color-primary);
}

.logo{
    background: var(--color-olive);
    color: #ffffff;
    border-radius: 30px 15px;
    padding:5px 10px;
    color:var(--color-primary-dark-font);
}

.logo strong {
    color:#fff;
}

footer {
    background: var(--color-olive-dark);
}

/* Anfangszustand - Elemente sind unsichtbar und leicht verschoben */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  
  /* Wenn sichtbar */
  .animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Overlay hinter dem Modal */
  .overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Modal unten anordnen */
    overflow: hidden;
  }

  /* Modal Container */
  .modal {
    background: white;
    width: 100%;
    max-height: 66vh; /* ca. 2/3 der Höhe */
    border-radius: 1rem 1rem 0 0;
    padding: 1rem 1.5rem;
    box-sizing: border-box;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    overflow-y: auto;
  }

  /* Wenn modal offen ist */
  .modal.show {
    transform: translateY(0);
  }

  .close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2rem;
    background: transparent;
    border: none;
    color: #333;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s ease;
  }
  
  .close-btn:hover {
    color: #000;
  }

  /* Desktop Modal als zentriertes Modal */
  @media (min-width: 768px) {
    .overlay {
      align-items: center;
    }
    .modal {
      width: 50%;
      max-height: 80vh;
      border-radius: 1rem;
      transform: translateY(100%);
    }
    .modal.show {
      transform: translateY(0);
    }
  }

  .md-custom-card {
    border-radius:10px;
    background:#f1f1f1;
    /*box-shadow:0 0 8px 4px rgba(0.5, 0.5, 0.5, 0.1);*/
    display:flex;
    position:relative;
    align-items: center;
  }

  .xxl-image {
    min-width: 40%;
    position: absolute;
    left: -40px;
    top: -40px;
  }

  .xxl-image img {
    min-height:305px;
  }

  .md-custom-card h2 {
    color:#000 !important;
    font-weight:bold;
  }

  .leistungen-text {
    margin:20px 20px 20px 0;
  }

  .mehr-erfahren-button {
    display: inline-flex;
    align-items: center;
    background-color: #D2DCCF; /* Angepasster Grünton */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 30px;
    font-family: 'Georgia', serif;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }

  .mehr-erfahren-button:hover {
    background-color: #B9C9B2;
  }

  .mehr-erfahren-button svg {
    margin-left: 10px;
    width: 16px;
    height: 16px;
    fill: white;
  }