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

   Klassenbeispiele:

   btn btn-blue
   btn btn-red-bright
   btn btn-yellow-neon

   Größen:
   btn-12
   btn-16
   btn-24
   btn-32
   btn-48

   Schriftfarben:
   btn-text-white
   btn-text-black

   Formen:
   btn-round

   ================================================== */


/* --------------------------------------------------
   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;

    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.40);
}

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


/* --------------------------------------------------
   Schriftgrößen
   -------------------------------------------------- */

.btn-12 {
    font-size: 12px;
}

.btn-16 {
    font-size: 16px;
}

.btn-24 {
    font-size: 24px;
}

.btn-32 {
    font-size: 32px;
}

.btn-48 {
    font-size: 48px;
}


/* --------------------------------------------------
   Schriftfarben
   -------------------------------------------------- */

.btn-text-white {
    color: #ffffff !important;
}

.btn-text-black {
    color: #000000 !important;
}


/* --------------------------------------------------
   Farbschema - bisherige Farben
   -------------------------------------------------- */

.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;
}


/* --------------------------------------------------
   Kräftige Farben
   -------------------------------------------------- */

.btn-blue-bright {
    background: linear-gradient(#3d9cff, #0066dd);
    border-color: #004ea8;
}

.btn-green-bright {
    background: linear-gradient(#54ff54, #00b300);
    border-color: #008000;
}

.btn-red-bright {
    background: linear-gradient(#ff5c5c, #d40000);
    border-color: #990000;
}

.btn-yellow-bright {
    background: linear-gradient(#fff36a, #ffd400);
    border-color: #ccaa00;
    color: #000000;
}


/* --------------------------------------------------
   Neon / Retro
   -------------------------------------------------- */

.btn-blue-neon {
    background: linear-gradient(#66ccff, #0088ff);
    border-color: #0066cc;
}

.btn-green-neon {
    background: linear-gradient(#66ff66, #00cc00);
    border-color: #009900;
}

.btn-red-neon {
    background: linear-gradient(#ff7777, #ff0000);
    border-color: #cc0000;
}

.btn-yellow-neon {
    background: linear-gradient(#ffff99, #ffdd00);
    border-color: #ccaa00;
    color: #000000;
}


/* --------------------------------------------------
   Weitere nützliche Farben
   -------------------------------------------------- */

.btn-purple {
    background: linear-gradient(#b46cff, #7a1fd1);
    border-color: #5f18a3;
}

.btn-pink {
    background: linear-gradient(#ff8bcf, #e63b8c);
    border-color: #b02868;
}

.btn-gold {
    background: linear-gradient(#ffe680, #d4a500);
    border-color: #9c7800;
    color: #000000;
}


/* --------------------------------------------------
   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; }
.button_15 { width: 15ch; }
.button_20 { width: 20ch; }
.button_25 { width: 25ch; }
.button_30 { width: 30ch; }


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

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

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

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


/* --------------------------------------------------
   Optional: Leuchteffekt
   -------------------------------------------------- */

.btn-glow:hover {
    box-shadow:
        0 0 6px rgba(255,255,255,0.3),
        0 0 12px rgba(255,255,255,0.2);
}