/* ===================================================
   GEHLHAR STARTSEITE - KLASSISCHES DESIGN
   =================================================== */

/* Versteckt die Navbar nur auf der Startseite */
/* Versteckt Header und Footer komplett nur auf der Startseite */
.home .site-header, 
.home .bootscore-footer {
    display: none !important;
}

/* Falls Bootscore eine andere Klasse nutzt, probiere zusätzlich diese: */
.home #nav-main {
    display: none !important;
}

.gehlhar-classic-block {
    background-color: var(--bs-primary);
    padding: 60px 0;
    min-height: 100vh;
}

.gehlhar-white-box {
    background-color: #ffffff;
    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.4);
    max-width: 900px;
    margin: 0 auto;
    border-radius: 4px;
}

/* --- DIE INSTRUMENTE (CSS SPRITES) --- */
.instrumente {
    display: block;
    background-repeat: no-repeat;
    /* transition hier absichtlich weglassen, damit der Sprite-Wechsel knackig ist wie früher */
}

.spiegel {
    width: 153px;
    height: 286px;
    background-image: url('assets/img/icons/spiegel.png');
}
.spiegel:hover { background-position: 0px -286px; }

.duese {
    width: 99px;
    height: 281px;
    background-image: url('assets/img/icons/duese.png');
}
.duese:hover { background-position: 0px -281px; }

.bohrer {
    width: 204px;
    height: 268px;
    background-image: url('assets/img/icons/bohrer.png');
}
.bohrer:hover { background-position: 0px -268px; }

.buerste {
    width: 90px;
    height: 273px;
    background-image: url('assets/img/icons/zahnbuerste.png');
}
.buerste:hover { background-position: 0px -273px; }

/* Der Schriftzug */
.zap-logo {
    max-width: 100%;
    height: auto;
}

/* Datenschutz & Impressum */
.gehlhar-footer-links a {
    font-size: 14px;
    opacity: 0.9;
}
.gehlhar-footer-links a:hover {
    opacity: 1;
    text-decoration: underline !important;
}

/* ===================================================
   RESPONSIVE (Für Smartphones & Tablets)
   =================================================== */
@media (max-width: 768px) {
    .gehlhar-classic-block { padding: 20px 0; }
    .gehlhar-white-box { padding-top: 20px !important; padding-bottom: 20px !important; }
    
    /* Trick: Die festen Pixel-Bilder auf dem Handy proportional verkleinern */
    .instrumente {
        transform: scale(0.7);
        transform-origin: center center;
        margin: -20px 0; /* Gleicht den leeren Platz aus, der durch das Skalieren entsteht */
    }
}