/* ==================================================
   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_20 {
    font-size: 20px;
}

.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_yellow {
    background: linear-gradient(#E9DB49, #E9DB49);
    border-color: #a67c00;
}

.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_small_medium {
    font-size: 18px;
    padding: 4px 6px;
}

.btn_medium {
    font-size: 24px;
    padding: 4px 6px;
}

.btn_large {
    font-size: 36px;
    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);
}



/* =========================
   Taxiway-Schilder – stabil
   ========================= */

.taxiway {
  /* Farben: knallhart festgelegt */
  background: #ffff00 !important;     /* gelb */
  color: #000000 !important;          /* schwarzer Text */
  border: 8px solid #bfbfbf !important;

  /* Layout */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* Typo */
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;

  /* Technik */
  box-sizing: border-box !important;
  user-select: none !important;

  /* Anti-Dark-Mode */
  color-scheme: light !important;
  forced-color-adjust: none !important;
  -webkit-text-fill-color: #000000 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* =========================
   Größen
   ========================= */

/* VRB x 100 */
.taxiway_VRB {
  width: 200px !important;
  height: 80px !important;
  font-size: 25px !important;
}
/* 300 x 100 */
.taxiway_300 {
  width: 300px !important;
  height: 100px !important;
  font-size: 35px !important;
}
/* 200/* 300 x 100 */
.taxiway_300 {
  width: 300px !important;
  height: 100px !important;
  font-size: 35px !important;
}
 x 100 */
.taxiway_200 {
  width: 200px !important;
  height: 100px !important;
  font-size: 28px !important;
}
/* 100 x 100 */
.taxiway_100 {
  width: 100px !important;
  height: 100px !important;
  font-size: 28px !important;
}

/* 50 x 50 */
.taxiway_50 {
  width: 50px !important;
  height: 50px !important;
  font-size: 14px !important;
  border-width: 4px !important;
}


















/* ============================================================
   VORTICITY VARIABLE MENU
   TAXI + VARIABLE NUMBER OF BUTTONS
   ============================================================ */


/* ------------------------------------------------------------
   CENTRAL SETTINGS
   ------------------------------------------------------------ */

/* Fixed distance: TAXI -> first button */
:root {
    --vvd-taxi-gap: 20px;

    /* Total distance occupied by ALL button gaps */
    --vvd-total-gap: 24px;

    /* Vertical distance between menu rows */
    --vvd-row-gap: 12px;
}


/* ============================================================
   MENU CONTAINER
   ============================================================ */

.vvd_menu_container {
    display: flex;
    flex-direction: column;

    width: max-content;
    max-width: 100%;

    margin: 0;
    padding: 0;

    gap: var(--vvd-row-gap);
}


/* ============================================================
   MENU ROW
   ============================================================ */

.vvd_menu_row {
    display: flex;

    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    width: max-content;

    margin: 0;
    padding: 0;

    white-space: nowrap;
}


/* ============================================================
   TAXI
   ============================================================ */

.vvd_menu_taxi {
    flex: 0 0 55px;

    width: 55px;

    margin: 0;
    padding: 0;

    text-align: left;
}


/* ============================================================
   FIXED TAXI -> FIRST BUTTON DISTANCE
   ============================================================ */

.vvd_menu_taxi + .vvd_menu_button {
    margin-left: var(--vvd-taxi-gap);
}


/* ============================================================
   BUTTONS
   ============================================================ */

.vvd_menu_button {
    flex: 0 0 auto;

    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    padding: 0;
}


/* ============================================================
   BUTTON GAP CALCULATION
   ============================================================ */

/*
   1 button = 0 gaps
   2 buttons = 1 gap
   3 buttons = 2 gaps
   4 buttons = 3 gaps
   5 buttons = 4 gaps

   Therefore:

   2 buttons -> total gap / 1
   3 buttons -> total gap / 2
   4 buttons -> total gap / 3
   5 buttons -> total gap / 4
*/


.vvd_menu_row.buttons_1 .vvd_menu_button {
    margin-right: 0;
}


.vvd_menu_row.buttons_2 .vvd_menu_button {
    margin-right: calc(var(--vvd-total-gap) / 1);
}

.vvd_menu_row.buttons_2 .vvd_menu_button:last-child {
    margin-right: 0;
}


.vvd_menu_row.buttons_3 .vvd_menu_button {
    margin-right: calc(var(--vvd-total-gap) / 2);
}

.vvd_menu_row.buttons_3 .vvd_menu_button:last-child {
    margin-right: 0;
}


.vvd_menu_row.buttons_4 .vvd_menu_button {
    margin-right: calc(var(--vvd-total-gap) / 3);
}

.vvd_menu_row.buttons_4 .vvd_menu_button:last-child {
    margin-right: 0;
}


.vvd_menu_row.buttons_5 .vvd_menu_button {
    margin-right: calc(var(--vvd-total-gap) / 4);
}

.vvd_menu_row.buttons_5 .vvd_menu_button:last-child {
    margin-right: 0;
}


/* ============================================================
   LINKS
   ============================================================ */

.vvd_menu_row a {
    white-space: nowrap;
}


/* ============================================================
   TAXI IMAGE
   ============================================================ */

.vvd_menu_taxi img {
    display: inline-block;

    vertical-align: middle;
}




/* ============================================================
   Thumbnail mit vergrösserter Hover-Preview
   ============================================================ */

.preview-container {
    position: relative;
    display: inline-block;
}

.preview-thumbnail {
    display: block;
}

.preview-large {
    display: none;
    position: absolute;
    z-index: 1000;
    border: 1px solid #888;
    box-shadow: 4px 4px 10px #000;
}

.preview-container:hover .preview-large {
    display: block;
}