/*
Copyright (c) 2025 Yunatec Engineering. All rights reserved.
This file is part of the AIKIQI system.

Unauthorized copying of this file, via any medium, is strictly prohibited.
Proprietary and confidential.

Developed by: Yunatec Engineering
Contact: info@yunatec.com
*/

/* Hauptnavigation */


.nav-grid {
    display: flex;
    flex: 1;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-grid li {
    flex: 1;
    text-align: center;
    display: flex; /* Flexbox für Zentrierung */
    justify-content: center; /* Horizontal ausrichten */
    align-items: center; /* Vertikal ausrichten */
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding:8px;
    border-right:1px solid black;
}

.nav-grid a {
    display: flex; /* Flexbox hinzufügen */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: white;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 400;
    padding: 0; /* Eventuell störende Paddings entfernen */
    margin: 0; /* Eventuell störende Margins entfernen */
    transition: transform 0.1s ease;
}


/* Farbe bei Hover ändern */
.nav-grid li:hover {
  background: linear-gradient(180deg, #0d0c0c, #111);
}

.nav-grid li:hover a {
    transform: scale(1.0); /* Dezent vergrößern ohne Layout zu verschieben */
    color: #fff;
}

/* Responsive: Mobile Ansicht */
@media (max-width: 768px) {
    .nav-grid {
        flex-direction: column;
    }

    .nav-grid li {
        line-height: 3rem;
    }
}


/* Account navigation */
.main-navigation_account {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    
    background: linear-gradient(180deg, #fff, #f1f1f1);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 4px 10px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.nav-grid_account {
    display: flex;
    flex: 1;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-grid_account li {
    flex: 1;
    text-align: center;
    display: flex; /* Flexbox für Zentrierung */
    justify-content: center; /* Horizontal ausrichten */
    align-items: center; /* Vertikal ausrichten */
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding:5px;
    border-right:1px solid silver;
}

.nav-grid_account a {
    display: flex; /* Flexbox hinzufügen */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: black;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 400;
    padding: 0; /* Eventuell störende Paddings entfernen */
    margin: 0; /* Eventuell störende Margins entfernen */
    transition: transform 0.1s ease;
}


/* Farbe bei Hover ändern */
.nav-grid_account li:hover {
  background: linear-gradient(180deg, #eee, #f1f1f1);
}

.nav-grid_account li:hover a {
    transform: scale(1.0); /* Dezent vergrößern ohne Layout zu verschieben */
    color: #000;
}

/* Responsive: Mobile Ansicht */
@media (max-width: 768px) {
    .nav-grid_account {
        flex-direction: column;
    }

    .nav-grid_account li {
        line-height: 3rem;
    }
}
/* Books navigation */
.main-navigation_books {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, #fff, #f1f1f1);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 4px 10px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    padding: 10px;
}

.nav-grid_books {
    display: flex;
    justify-content: space-between; /* Links & rechts verteilen */
    align-items: center;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-grid_books li {
    flex: 1;
    text-align: center;
    padding: 10px;
    display: flex;
    flex-direction: column; /* Button & Titel untereinander */
    align-items: center;
}

.nav-grid_books a {
    display: flex;
    flex-direction: column; /* Pfeil & Text übereinander */
    align-items: center;
    text-decoration: none;
    color: black;
    font-size: 1rem;
    font-weight: 500;
    gap: 4px;
}

.chapter-title {
    font-size: 0.8rem;
    font-weight: normal;
    color: #666;
}

/* Mobile Ansicht: Alles kleiner skalieren */
@media (max-width: 768px) {
    .main-navigation_books {
        padding: 5px; /* Weniger Abstand */
    }

    .nav-grid_books {
        width: 90%; /* Etwas schmaler */
    }

    .nav-grid_books a {
        font-size: 0.8rem; /* Kleinerer Text */
    }

    .chapter-title {
        font-size: 0.7rem; /* Kleinere Titel */
    }

    .nav-grid_books li {
        padding: 5px; /* Weniger Padding */
    }
}


.messages-navigation {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.messages-navigation a {
    text-decoration: none;
    background: #f0f0f0; /* Helles Grau */
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 0.8em;
    
    text-align: center;
    transition: background 0.3s ease-in-out;
}

/* Farbe bei Hover ändern */
.nav-grid_messages-navigation li:hover {
  background: linear-gradient(180deg, #333, #f1f1f1);
}

.nav-grid_messages-navigation li:hover a {
   
    color: #000;
}

/* Falls du die Navigation auf volle Breite setzen willst */
.messages-navigation a {
    flex: 1; 
}