/* Container & Grid Setup */
.teaser-grid, .box-grid {
    display: grid;
    gap: 40px;
    width: 100%;
    margin-top: 1em;
}

.box-item {
    margin-bottom: 2em;
}

/* Dynamische Spalten-Zuweisung */
/* Wert 3 in Mask -> meist 4 Spalten im 12er System */
.columns-3 { grid-template-columns: repeat(4, 1fr); }
/* Wert 4 in Mask -> 3 Spalten */
.columns-4 { grid-template-columns: repeat(3, 1fr); }
/* Wert 6 in Mask -> 2 Spalten */
.columns-6 { grid-template-columns: repeat(2, 1fr); }
/* Wert 16 oder Default -> 1 Spalte */
.columns-16 { grid-template-columns: 1fr; }

/* Responsive: Mobil immer 1 Spalte */
@media (max-width: 991px) {
    .teaser-grid, .box-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .teaser-grid, .box-grid { grid-template-columns: 1fr; }
}

/* Card Styling */
.teaser-card, .content-box {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}
.teaser-item a:hover img, .box-item a:hover img {
    transform: scale(1.05);
    transition: all 0.4s ease;
}

.teaser-image-wrapper img, .box-image-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
    min-height: 300px;
    transition: all 0.4s ease;
}

.teaser-image-wrapper, .box-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3; /* Einheitliche Höhe für alle Cards */
    transition: all 0.4s ease;
}

.teaser-img, .box-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: all 0.4s ease;
}

/* Absolut positionierter Content */
.teaser-card-overlay, .box-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 50%;
}

.card-title:after, .box-title:after  {
    content: "\203A";
    font-weight: 600;
    line-height: 0;
    font-size: 1.6rem;
    margin-left: 10px;
    transition: all 0.4s ease;
}

.teaser-item a:hover .card-title:after, .box-item a:hover .box-title:after {
    margin-left: 15px;
}

.teaser-card-content h1, 
.teaser-card-content h2, 
.teaser-card-content h3, 
.teaser-card-content .h1, 
.teaser-card-content .h2, 
.teaser-card-content .h3,
.box-content h1, 
.box-content h2, 
.box-content h3, 
.box-content .h1, 
.box-content .h2, 
.box-content .h3 {
    color: #ffffff;
    margin-bottom: 10px;
    display: block;
}

/* Globaler Button Styling */
.ctm-btn-section {
    margin-top: 40px;
    text-align: center;
}

.teaser-card-content .card-title, .box-content .box-title {
    font-size: 1.6rem;
    color: #ffffff;
    margin-bottom: 8px;
    font-weight: 700;
    background: linear-gradient(0deg, #1f293e 45%, rgba(217, 217, 217, 0) 45%);;
    letter-spacing: 1px;
}

.box-external-text {
    padding: 0 40px;
}

.box-item ul {
    padding-left: .85em;
}

.box-item .button {
    margin-top: 1em;
}