.btn-small,
.btn-small a {
    background-color: #09b07d; /* Etwas dunkler bei Hover */
	background-color: var(--button-bgcolor); /* Etwas dunkler bei Hover */
    transform: translateY(-2px); /* Leichtes Anheben */
	color: var(--button-color);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Stärkerer Schatten */
	text-decoration:none;
}



/* Disabled-Effekt */
.btn-small.disabled {
    background-color: white; Grauer Hintergrund */
    color: #999; /* Abgedunkelte Schrift */
    border-color: #09b07d; /* Matterer Rahmen */
    cursor: not-allowed; /* Zeiger für "nicht klickbar" */
    transform: none; /* Keine Bewegung */
    box-shadow: none; /* Kein Schatten */
    opacity: 0.7; /* Leichte Transparenz */
    pointer-events: none; /* Verhindert Interaktionen */
}

.row.content-block {
display: flex;
align-items: stretch; /* Streckt die untergeordneten Elemente, um die gleiche Höhe zu haben */
}

.row.content-block > div { /* Selektiert die direkten Kinder (die beiden Spalten) */
/* Optional: Entferne ggf. vorhandene Höhenangaben */
/* height: auto; */
}


.row.content-block {
display: flex;
align-items: stretch; /* Streckt die untergeordneten Elemente auf die gleiche Höhe */
border: 0px solid black; /* Nur zur Visualisierung */
margin-bottom: 20px;
}

.row.content-block > .large-6:first-child { /* Linker Block (Bild) */

}

.row.content-block > .large-6:last-child { /* Rechter Block (enthält info-box) */

display: flex; /* Mache diesen Container auch zu einem Flex-Container */
flex-direction: column; /* Stapelt die Inhalte (info-box) vertikal */
height: 100%; /* Sollte durch align-items: stretch im Elterncontainer gesetzt werden, aber explizit kann helfen */
}

.image-container-overview {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
overflow: hidden;

}

.image-container-overview img {
display: block;
max-width: 100%;
max-height: 100%;
object-fit: cover;
}

.info-box {
background-color: #f7fcf8; /* Deine grüne Hintergrundfarbe */
padding: 20px;
box-sizing: border-box;
height: 100%; /* Lässt die Info-Box die volle Höhe des übergeordneten Flex-Containers einnehmen */
}

.btn-container {
/* Stile für den Button-Container */
margin-top: auto; /* Schiebt den Button-Container nach unten (optional) */
}

.btn-contact {
background-color: var(--button-bgcolor);
color: 		var(--button-color);
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
display: inline-block;
}


@media only screen and (max-width: 640px) { /* Typische Grenze für "small" in vielen Grid-Systemen */
  .row.content-block {
    flex-direction: column; /* Ändert die Richtung auf vertikal */
  }

  .row.content-block > .large-6 {
    width: 100%; /* Stellt sicher, dass beide Spalten die volle Breite nutzen */
  }

  .image-container-overview,
  .info-box {
    height: auto; /* Höhe wird automatisch angepasst, statt 100% */
  }
}