/* Hauptcard */
.card {
    width: 20%;
    height: 100%;
    background-color: var(--card-background-color);
    box-shadow: 0 0 10px var(--card-shadow-color);
    border-radius: 12px;
    position: relative;
    margin-top: 2.5px; 
    margin-bottom: 2.5px;
    scroll-margin-top: 25px;
}

/* Cardhöhe */

.hauto {
    height: auto;
}

.h05 {
    height: 50px;
}

.h1 {
    height: 100px;
}

.h2 {
    height: 200px;
}

.h3 {
    height: 300px;
}

.h4 {
    height: 400px;
}

.h4-5 {
    height: 450px;
}

.h5 {
    height: 500px;
}

.h6 {
    height: 600px;
}

.h7 {
    height: 700px;
}

.h8 {
    height: 800px;
}

.h9 {
    height: 900px;
}

.h10 {
    height: 1000px;
}

.h11 {
    height: 1100px;
}

.h12 {
    height: 1200px;
}

.h13 {
    height: 1300px;
}

.h14 {
    height: 1400px;
}

.h15 {
    height: 1500px;
}

.h16 {
    height: 1600px;
}

.h17 {
    height: 1700px;
}

/* Cardbreite */

.b10 {
    width: calc(10% - 10px);
}

.b15 {
    width: calc(15% - 10px);
}

.b20 {
    width: calc(20% - 10px);
}

.b25 {
    width: calc(25% - 10px);
}

.b33 {
    width: calc(33.3333% - 10px);
}

.b40 {
    width: calc(40% - 10px);
}

.b48 {
    width: calc(48% - 10px);
}

.b50 {
    width: calc(50% - 10px);
}

.b52 {
    width: calc(52% - 10px);
}

.b60 {
    width: calc(60% - 10px);
}

.b66 {
    width: calc(66.6666% - 10px);
}

.b75 {
    width: calc(75% - 10px);
}

.b80 {
    width: calc(80% - 10px);
}

.b90 {
    width: calc(90% - 10px);
}

.b100 {
    width: calc(100% - 10px);
}

/* Spezielle Cards */

.f {
    margin-top: 35px;
}

@media (max-width: 1500px) {
	
	.b10 {
        width: calc(10% - 10px);
    }
    
    .b15 {
        width: calc(15% - 10px);
    }
    
    .b20 {
        width: calc(20% - 10px);
    }
    
    .b25 {
        width: calc(33.333% - 10px);
    }
    
    .b33 {
        width: calc(33.3333% - 10px);
    }
    
    .b40 {
        width: calc(40% - 10px);
    }
    
    .b50 {
        width: calc(50% - 10px);
    }
    
    .b60 {
        width: calc(60% - 10px);
    }
    
    .b66 {
        width: calc(66.6666% - 10px);
    }
    
    .b75 {
        width: calc(75% - 10px);
    }
    
    .b80 {
        width: calc(80% - 10px);
    }
    
    .b100 {
        width: calc(100% - 10px);
    }

}


@media (max-width: 1200px) {
	
	.b10 {
        width: calc(10% - 10px);
    }
    
    .b15 {
        width: calc(15% - 10px);
    }
    
    .b20 {
        width: calc(20% - 10px);
    }
    
    .b25 {
        width: calc(50% - 10px);
    }
    
    .b33 {
        width: calc(33.3333% - 10px);
    }
    
    .b40 {
        width: calc(40% - 10px);
    }
    
    .b50 {
        width: calc(50% - 10px);
    }
    
    .b60 {
        width: calc(60% - 10px);
    }
    
    .b66 {
        width: calc(66.6666% - 10px);
    }
    
    .b75 {
        width: calc(75% - 10px);
    }
    
    .b80 {
        width: calc(80% - 10px);
    }
    
    .b100 {
        width: calc(100% - 10px);
    }

}

@media (max-width: 1000px) {
	
    .card {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 1px;
        border-width: 1px;
        border-radius: 6px;
        margin-bottom: 10px;
        overflow: hidden;
        position: relative;
    }

}

@media (max-width: 850px) {

    .card {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        padding: 1px;
        border-width: 1px;
        border-radius: 6px;
        margin-bottom: 10px;
        overflow: hidden;
        position: relative;
    }
}