/* === Reguläre Buttons (Gradient-Hintergründe) === */


/* Primary (Blauer Gradient) */

.btn-primary {
    background: linear-gradient(to top right, rgb(34, 85, 247), rgb(15, 72, 228)) !important;
}


/* Success (Grüner Gradient) */

.btn-success {
    background: linear-gradient(to top right, rgb(21, 216, 163), rgb(7, 217, 176)) !important;
}


/* Danger (Rosa/Purpur-Gradient) */

.btn-danger {
    background: linear-gradient(to top right, rgb(244, 116, 187), rgb(191, 102, 207)) !important;
}


/* Secondary (Beispiel: Grauer Gradient) */

.btn-secondary {
    background: linear-gradient(to top right, #6c757d, #868e96) !important;
}


/* Basis-Stile für alle Buttons */

.btn {
    border: none !important;
    padding: 5px 20px !important;
    color: #fff !important;
    font-size: 16px !important;
    cursor: pointer !important;
    margin: 5px !important;
    border-radius: 10px !important;
    /* Gemeinsamer Border-Radius */
    text-decoration: none !important;
    font-family: "Melun Bold";
    /* Gemeinsame Schrift */
}




.btn-outline-small {
    background: transparent !important;
    padding: 3px 10px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    margin: 2px !important;
    border-radius: 7px !important;
    /* Gleicher Border-Radius wie bei normalen Buttons */
    font-family: "Melun Bold";
    /* Gleiche Schrift */
    position: relative;
    z-index: 1;
    text-decoration: none !important;
    /* Kein Unterstreichen */
}


/* Damit der Button-Text den gewünschten Farbverlauf erhält, 
   muss dieser in einem <span> stehen. */

.btn-outline span {
    background: none;
}


.btn-outline {
    background: transparent !important;
    padding: 5px 20px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    margin: 5px !important;
    border-radius: 10px !important;
    font-family: "Melun Bold";
    position: relative;
    z-index: 1;
    vertical-align: middle;
    text-decoration: none !important;
    /* <— neu: */
    box-sizing: border-box;
    display: inline-block;
    line-height: 1.5;
  }
  

/* Outline Primary */

.btn-outline-primary {
    background: transparent;
    border: 1px solid;
    color: rgb(34, 85, 247);
}

.btn-outline-primary:hover {
    background: rgba(34, 85, 247, 0.1);
    color: rgb(34, 85, 247);
}

.btn-outline-primary span {
    background: linear-gradient(to top right, rgb(34, 85, 247), rgb(15, 72, 228));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* Outline Success */

.btn-outline-success {
    background: transparent;
    border: 1px solid;
    color: rgb(21, 216, 163);
}

.btn-outline-success:hover {
    background: rgba(21, 216, 163, 0.1);
    color: rgb(21, 216, 163);
}

.btn-outline-success span {
    background: linear-gradient(to top right, rgb(21, 216, 163), rgb(7, 217, 176));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* Outline Danger */

.btn-outline-danger {
    background: transparent;
    border: 1px solid;
    color: rgb(244, 116, 187);
}

.btn-outline-danger:hover {
    background: rgba(244, 116, 187, 0.1);
    color: rgb(244, 116, 187);
}

.btn-outline-danger span {
    background: linear-gradient(to top right, rgb(244, 116, 187), rgb(191, 102, 207));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* Outline Secondary */

.btn-outline-secondary {
    background: transparent;
    border: 1px solid #6c757d !important;
    color: #6c757d;
}

.btn-outline-secondary:hover {
    background: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}

.btn-outline-secondary span {
    background: linear-gradient(to top right, #6c757d, #868e96);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn-outline-white {
    background: transparent;
    border: 1px solid #ffffff !important;
    color: #ffffff;
}

.btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.btn-outline-white span {
    background: white;
    color: white;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}