/* ==================================================
   BUTTONS.CSS
   Kompakte Buttons für dunkle Webseiten
   Font: Lucida Console (Monospace)
   ================================================== */


/* --------------------------------------------------
   Basis-Button
   -------------------------------------------------- */

.btn {
    display: inline-block;

    width: auto;
    padding: 6px 8px;
    margin: 2px;

    box-sizing: border-box;

    font-family:
        "Lucida Console",
        "Consolas",
        "Liberation Mono",
        monospace;

    font-size: 24px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;

/*    color: #ffffff; */
    color: #000000;

    border-radius: 5px;
    border: 1px solid #1b315a;

    cursor: pointer;

    transition:
        background 0.2s,
        transform 0.1s,
        box-shadow 0.2s;
}


/* --------------------------------------------------
   Hover / Klick
   -------------------------------------------------- */

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.btn:active {
    transform: translateY(1px);
}


/* --------------------------------------------------
   Farbschema
   -------------------------------------------------- */

.btn-blue {
    background: linear-gradient(#4f7dc7, #2c5aa0);
    border-color: #1c3e74;
}

.btn-lightblue {
    background: linear-gradient(#6fa9ff, #4d7ed0);
    border-color: #3f66a6;
}

.btn-turquoise {
    background: linear-gradient(#27b4c2, #178a96);
    border-color: #11646d;
}

.btn-green {
    background: linear-gradient(#4caf50, #2e7d32);
    border-color: #205924;
}

.btn-orange {
    background: linear-gradient(#ffb74d, #f57c00);
    border-color: #b35a00;
}

.btn-red {
    background: linear-gradient(#ef5350, #c62828);
    border-color: #8f1d1d;
}

.btn-gray {
    background: linear-gradient(#d8dde3, #9aa3ad);
    border-color: #6c737c;
    color: #111111;
}

.btn-dark {
    background: linear-gradient(#30435d, #1b2738);
    border-color: #101822;
}


/* --------------------------------------------------
   Breitenklassen
   Zahl = Zeichenanzahl
   -------------------------------------------------- */

.button_03 { width: 3ch; }
.button_04 { width: 4ch; }
.button_05 { width: 5ch; }
.button_06 { width: 6ch; }
.button_07 { width: 7ch; }
.button_08 { width: 8ch; }
.button_09 { width: 9ch; }
.button_10 { width: 10ch; }
.button_11 { width: 11ch; }
.button_12 { width: 12ch; }


/* --------------------------------------------------
   Zusätzliche Varianten
   -------------------------------------------------- */

.btn-small {
    font-size: 12px;
    padding: 4px 6px;
}

.btn-large {
    font-size: 16px;
    padding: 8px 12px;
}

.btn-round {
    border-radius: 18px;
}