html, body {
    scroll-behavior: smooth;
    overflow-x: hidden;
}


.section0 {
    background: linear-gradient(175deg,rgb(20, 20, 20) 75%,rgb(0, 12, 121) 100%);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}     

.section {
    background: linear-gradient(175deg,rgb(30, 30, 30) 75%,rgb(0, 12, 121) 100%);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}     

.section2 {
    background: linear-gradient(175deg,rgb(40, 40, 40) 75%,rgb(0, 12, 121) 100%);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}          

/* Karten-Design */
.custom-card {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 15px;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: white;
    backdrop-filter: blur(10px);
    transform: translateY(-10px);
    box-shadow: 0 5px 10px rgba(0, 123, 255, 0.3);
}

.custom-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 123, 255, 0.3);
}

/* Icons Styling */
.icon {
    font-size: 3rem;
    color: #007bff;
}

@media (max-width: 768px) {
.section0, .section, .section2 {
    height: auto;
    min-height: 100vh; /* Optional, wenn du die volle Bildschirmhöhe wünschst */
    padding: 60px 0;   /* damit oben/unten Platz entsteht */
}
}