button:not(nav *){
    background: #1a1a1a !important;
    color: #fff !important;
    padding: 14px 30px !important;
    border-radius: 50px !important;
    border: none !important;
}

button:hover:not(nav *){
    background: #414141 !important;
    color: #fff !important;
    border: none !important;
    transform: translateY(-6px) !important;
}

body:not(:has(main), nav, nav *) > *:not(button, a), main > *:not(button, a, nav, nav *){
  border-radius: 30px !important;
}

*:not(nav, nav *){
    border-radius: 10px;
}

.first-page{
    background-image: url('background.png');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    min-height: 90vh;

    padding: 2cm;
    border-radius: 0;
    display: grid;
    align-items: center; /* Vertikal mittig */
    grid-auto-rows: 0;
    grid-template-columns: max(8cm, 30%) auto;
    grid-template-rows: 1fr;
    overflow: hidden;
}

.first-page *{
    color: black;
}

.first-page h1 ,.first-page h2, .first-page h3, .first-page p{
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

.first-page-text .buttons, .first-page-text .buttons button{margin-top: 10px;}

.first-page-cards{
    display: grid;
    grid-template-columns: 1fr;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1cm;
}

.first-page-cards > h2{text-align: center;}

.first-page-cards .card {
      width: 200px; overflow: hidden;
      position: relative; box-shadow: 0 8px 32px rgba(0,0,0,0.18);
      transition: transform .3s;
      scroll-snap-align: start;
}
.first-page-cards .card:hover { transform: translateY(-6px); }
.first-page-cards .card img { width: 100%; height: 270px; object-fit: cover; display: block; }
.first-page-cards .card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%);
}
.first-page-cards .card-label {
    position: absolute; top: 14px; left: 14px;
    font-size: 0.75rem; color: #fff; font-weight: 500;
}
.first-page-cards .card-cta {
    position: absolute; bottom: 14px; left: 14px;
    font-size: 0.8rem; color: #fff; font-weight: 600;
    text-decoration: none; display: flex; align-items: center; gap: 4px;
}


.features {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0; background: rgba(255,255,255,0.92);
    margin: 0 48px 64px;
    overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}
.feature {
    padding: 36px 32px; 
    border-right: 1px solid #e8e4dc;
    transition: background .2s;
}

.feature:hover { background: #faf8f4; }

.feature h3 {
    font-size: 1rem;
    font-weight: 600; 
    margin-bottom: 10px;
    color: black;
}

.feature p { 
    font-size: 0.83rem; 
    color: #666; 
    line-height: 1.6; 
}
.section-header{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 36px;
}



#Leistungen{
    grid-template-rows: 1fr;
    grid-auto-columns: min(8cm, 75%);
    grid-auto-flow: column;
    overflow-x: scroll;
    justify-content:center;
    scroll-snap-type: x mandatory;
}

.card{
    min-width: 0;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    transition: transform .3s, box-shadow .3s;
    scroll-snap-align: start;
}

.card:hover { 
    transform: translateY(-4px); 
    box-shadow: 0 8px 32px rgba(0,0,0,0.12); 
}

.card img{
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

.card p { 
    font-size: 0.78rem; 
    color: #777; 
    line-height: 1.5; 
}

.banner {
    max-width: unset;
    background: linear-gradient(135deg, #535f73, #393e46);
    /* background: linear-gradient(135deg, #b22222, #7a0000); */ 
    padding: 56px 64px;
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    gap: 24px;
}

.banner *{color: #fff;}

.banner h2 { 
    font-size: 2rem; 
    font-weight: 700; 
    max-width: 480px; 
}

.banner p { 
    font-size: 0.9rem; 
    opacity: .8; margin-top: 
    10px; 
}

#Kontakt{
    grid-template-columns: repeat(2, 1fr);
    margin: 0 48px 64px;
}

.contact-info h2 { font-size: 1.8rem; font-weight: 700; margin-bottom: 24px; }
.contact-detail {
    display: flex; gap: 12px; margin-bottom: 18px; align-items: flex-start;
}
.contact-detail .icon { font-size: 1.2rem; margin-top: 2px; }
.contact-detail strong { font-size: 0.85rem; font-weight: 600; display: block; color: var(--text-dark); }
.contact-detail span { font-size: 0.83rem; color: #7a7a7a; }


.opening-hours {
    width: 100%;
    background: #fff; padding: 28px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}

.opening-hours .badge{margin-left: 0;}

.badge.open{
    color:rgb(0, 158, 0);
    background: rgb(147, 255, 147);
}
.badge.yellow{
    color:rgb(216, 140, 0);
    background: rgb(253, 238, 210);
}
.badge.close{
    color: #b22222;
    background: #ffeaea; 
}

.opening-hours h3 { font-size: 1rem; font-weight: 600; margin-bottom: 16px; margin-left: 0; color: black; }
.hours-row {
    display: flex; justify-content: space-between;
    font-size: 0.85rem; padding: 8px 0;
    border-bottom: 1px solid #f0ede8; color: #444;
}
.hours-row:last-child { border-bottom: none; }
.hours-row span:last-child { font-weight: 500; }



@media (max-width: 22cm){
    .first-page{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        padding: 20px;
        padding-top: 2cm;
    }

    .first-page-text{
        text-align: center;
    }

    .first-page-cards > h2{
        text-align: left;
    }
    

    .features{
        grid-template-columns: 1fr;
    }

    .banner{
        padding: 0;
        padding-bottom: 20px;
        flex-direction: column;
    }

    #Kontakt{
        grid-template-columns: 1fr;
        margin: 0;
    }

    .opening-hours{
        width: unset;
    }

    .opening-hours span{
        word-break: no;
    }
}