/*
------------------------------------
     Buttons
------------------------------------
*/
.btn-basis, .btn-orange, .btn-orange-100, .btn-blue, .btn-blue-100, .btn-orangeBlue, .btn-blueOrange {
    font-weight: bold;
    color: var(--white);
    text-align: center;
    text-transform: uppercase !important;
    padding: 1em 1.2em;
    margin-top: 1rem !important;
    border: none;
    border-radius: 28px !important;
    transition: all 0.25s ease;
}
.btn-orange, .btn-orange-100 {
    background-color: var(--orange);
}
.btn-blue, .btn-blue-100 {
    background-color: var(--blue);
}
.btn-orange-100, .btn-blue-100 {
    display: block;
    width: 100%;
}
/*Speziale*/
.btn-orangeBlue, .btn-blueOrange {
    position: relative;
    cursor: pointer;
    overflow: hidden; /* Versteckt die Farbe außerhalb des Buttons */
    transition: color 0.4s ease;
    z-index: 1;
}
.btn-orangeBlue {
    color: var(--orange);
    border: 2px solid var(--orange);
}
.btn-blueOrange {
    color: var(--blue);
    border: 2px solid var(--blue);
}
/* Die Farbflächen */
.btn-orangeBlue::before, .btn-blueOrange::before, .btn-orangeBlue::after, .btn-blueOrange::after {
    content: "";
    position: absolute;
    top: 0;
    width: 51%;
    height: 100%;
    transition: transform 0.4s ease;
    z-index: -1;
}
/* Die linke Farbfläche */
.btn-orangeBlue::before, .btn-blueOrange::before {
    left: -51%; /* Startet links außerhalb */
    transform-origin: left;
}
/* Die rechte Farbfläche */
.btn-orangeBlue::after, .btn-blueOrange::after {
    right: -51%; /* Startet rechts außerhalb */
    transform-origin: right;
}
.btn-orangeBlue::before, .btn-orangeBlue::after {
    background: var(--blue); /* Deine Hover-Farbe */
}
.btn-blueOrange::before, .btn-blueOrange::after {
    background: var(--orange); /* Deine Hover-Farbe */
}
/* Textfarbe anpassen, wenn das Design es erfordert */
.btn-orangeBlue:hover, .btn-blueOrange:hover {
    color: #fff;
}
/* Beide Flächen bewegen sich in die Mitte */
.btn-orangeBlue:hover::before, .btn-blueOrange:hover::before {
    transform: translateX(100%);
}
.btn-orangeBlue:hover::after, .btn-blueOrange:hover::after {
    transform: translateX(-100%);
}
/*Ende Speziale*/
/* HOVER*/
.btn-orange:hover, .btn-orange-100:hover {
    background-color: #ff8c00;
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.btn-blue:hover, .btn-blue-100:hover {
    background-color: #20628d; /* leicht dunkler */
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
/*
---- ENDE Button ----
*/