/* =========================================
   BILDER-MENÜ (Icon Navigation)
   ========================================= */

/* 1. Basis-Einstellungen für ALLE Bild-Menüpunkte */
.wp-block-navigation-item.nav-icon-home a,
.wp-block-navigation-item.nav-icon-kegel a,
.wp-block-navigation-item.nav-icon-stats a,
.wp-block-navigation-item.nav-icon-profil a,
.wp-block-navigation-item.nav-icon-logout a {
    
    /* Text unsichtbar machen, aber für Google lesbar lassen */
    color: transparent !important; 
    
    /* Größe des Buttons definieren */
    width: 60px;   /* Breite deines Bildes */
    height: 60px;  /* Höhe deines Bildes */
    
    /* Bild Einstellungen */
    background-size: contain;   /* Bild passt sich an */
    background-repeat: no-repeat;
    background-position: center;
    
    /* Block erzwingen, damit Breite/Höhe greifen */
    display: block; 
}

/* 2. Die spezifischen Bilder zuweisen */

/* Für Startseite */
.nav-icon-home a {
    background-image: url('/wp-content/uploads/2025/12/house.png');
}
/* Für Kasse */
.nav-icon-kegel a {
    background-image: url('/wp-content/uploads/2025/12/Finance.png');
}
/* Für Statistik */
.nav-icon-stats a {
    background-image: url('/wp-content/uploads/2025/12/stats-svgrepo-com.png');
}
/* Für Profil */
.nav-icon-profil a {
    background-image: url('/wp-content/uploads/2026/01/profil.png');
}
/* Für Logout */
.nav-icon-logout a {
    background-image: url('/wp-content/uploads/2026/01/logout.png');
}
/* 3. Hover-Effekt (Optional: Bild leicht bewegen oder tauschen) */
.wp-block-navigation-item a:hover {
    transform: scale(1.1); /* Wird beim Drüberfahren 10% größer */
    transition: transform 0.2s ease;
}