/* =====================================================
   Firmenname ausblenden
   ===================================================== */

.company-name.company-logo-and-name {
    display: none !important;
}

/* =====================================================
   DESKTOP (ab 1025px)
   ===================================================== */

@media screen and (min-width: 1025px) {

    #main-buttons {
        background-size: cover !important;
        background-position: center top !important;
    }

    .bar {
        position: absolute !important;
        top: 80% !important;
        left: 68% !important;
        transform: translate(-50%, -50%) !important;

        display: flex !important;
        gap: 20px !important;
        z-index: 9999;
    }
}

/* =====================================================
   TABLET (769-1024px)
   ===================================================== */

@media screen and (min-width: 769px) and (max-width: 1024px) {

    #main-buttons {
        background-size: contain !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
    }

    .bar {
        position: absolute !important;
        top: 78% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;

        display: flex !important;
        gap: 15px !important;
        z-index: 9999;
    }
}

/* =====================================================
   HANDY (bis 768px)
   ===================================================== */
@media screen and (max-width: 768px) {

    /* Hintergrundbild vollständig und verkleinert anzeigen */
    #main-buttons {
        background-size: 95% auto !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;

        /* Höhe des gesamten Bildfeldes verkleinern */
        min-height: 30vh !important;
        height: 30vh !important;

        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Buttonbereich höher im Bild */
    #main-buttons .bar {
        position: absolute !important;
        top: 55% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;

        width: 100% !important;
        text-align: center !important;
        white-space: nowrap !important;
        z-index: 9999 !important;
    }

    /* Buttons nebeneinander */
    #main-buttons .bar .btn {
        display: inline-block !important;
        width: auto !important;
        min-width: 140px !important;
        margin: 0 5px !important;
    }

    /* Zeilenumbruch zwischen den Buttons entfernen */
    #main-buttons .bar br {
        display: none !important;
    }
}