/* ==================================================
   NAVIGATION CSS
   ==================================================

   Zweck:
   Diese Datei steuert ausschließlich das Hauptmenü.

   Hier stehen:
   - Breite der Navigation
   - Zentrierung
   - Menü-Hintergrund
   - animiertes KI-Symbol links
   - Button-Optik
   - Dropdown-Menüs
   - mobile Navigation

   Wichtige Werte:
   - width: 1200px = feste Seitenbreite
   - padding: 0 100px = linker/rechter Innenabstand wie Headertext
   - background: var(--color-dark-blue) = Menüfarbe
================================================== */

/* ==================================================
   NAVIGATION: Hauptleiste
   --------------------------------------------------
   Sticky Navigation oben.

   Auswirkungen:
   - position: sticky hält das Menü oben sichtbar.
   - width: 1200px setzt die feste Seitenbreite.
   - margin: 0 auto zentriert die Navigation.
   - padding: 0 100px rückt Inhalt links/rechts 100px ein.
================================================== */

.site-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    background: var(--color-dark-blue);
    padding: 0 100px;
}

.nav-inner {
    min-height: 76px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
}

/* ==================================================
   NAVIGATION: Animiertes KI-Symbol
   --------------------------------------------------
   Linker Bereich der Navigation.

   Darstellung:
   - sieben Punkte bilden ein kleines Knowledge-Graph-Symbol.
   - die Verbindungslinien liegen hinter den Punkten.
   - die Punkte stehen bewusst NICHT auf einer geraden Linie.
   - immer nur ein Punkt blinkt.
   - die Blink-Reihenfolge wirkt chaotisch: 3, 7, 2, 5, 1, 6, 4.

   Auswirkungen:
   - Kein sichtbarer Text im Menü.
   - aria-label im HTML bleibt für Barrierefreiheit erhalten.
   - padding der Navigation bleibt bei 100px wie beim Headertext.
================================================== */

.nav-logo {
    width: 190px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

.nav-logo-ai {
    color: inherit;
}

.ai-logo-mark {
    position: relative;
    width: 170px;
    height: 44px;
    display: block;
}

/* ==================================================
   KI-SYMBOL: Verbindungslinien
   --------------------------------------------------
   Die Linien verbinden die Punkte wie ein kleiner Graph.

   Auswirkungen:
   - z-index: 1 legt die Linien hinter die Punkte.
   - left/top sitzen jeweils im Mittelpunkt des Startpunktes.
   - width entspricht der Strecke bis zum nächsten Punkt.
   - rotate richtet die Linie exakt zum nächsten Punkt aus.
   - Die Punkte selbst liegen mit z-index: 2 über den Linien.
================================================== */

.ai-line {
    position: absolute;
    height: 2px;
    background: rgba(255, 255, 255, 0.58);
    transform-origin: left center;
    z-index: 1;
    border-radius: 999px;
}

/* Verbindung Punkt 1 → Punkt 2 */
.ai-line-1 {
    width: 39px;
    left: 5px;
    top: 27px;
    transform: rotate(-22.6deg);
}

/* Verbindung Punkt 2 → Punkt 3 */
.ai-line-2 {
    width: 34px;
    left: 41px;
    top: 12px;
    transform: rotate(34.2deg);
}

/* Verbindung Punkt 3 → Punkt 4 */
.ai-line-3 {
    width: 36px;
    left: 69px;
    top: 31px;
    transform: rotate(-33.7deg);
}

/* Verbindung Punkt 4 → Punkt 5 */
.ai-line-4 {
    width: 34px;
    left: 99px;
    top: 11px;
    transform: rotate(45deg);
}

/* Verbindung Punkt 5 → Punkt 6 */
.ai-line-5 {
    width: 30px;
    left: 123px;
    top: 35px;
    transform: rotate(-43.7deg);
}

/* Verbindung Punkt 6 → Punkt 7 */
.ai-line-6 {
    width: 25px;
    left: 145px;
    top: 14px;
    transform: rotate(36.9deg);
}

/* ==================================================
   KI-SYMBOL: Punkte
   --------------------------------------------------
   Sieben Datenpunkte / Entitäten.

   Auswirkungen:
   - left/top bestimmen die chaotische Punktposition.
   - animation-delay bestimmt die scheinbar ungeordnete Blinkfolge.
   - Es blinkt immer nur ein Punkt innerhalb eines Zyklus.
================================================== */

.ai-node {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    background: #00A9D4;
    z-index: 2;
    opacity: 0.38;
    box-shadow: 0 0 0 rgba(0, 169, 212, 0);
    animation: aiChaosBlink 5.6s infinite;
}

.ai-node-1 {
    left: 0;
    top: 22px;
    animation-delay: 3.2s;
}

.ai-node-2 {
    left: 36px;
    top: 7px;
    animation-delay: 1.6s;
}

.ai-node-3 {
    left: 64px;
    top: 26px;
    animation-delay: 0s;
}

.ai-node-4 {
    left: 94px;
    top: 6px;
    animation-delay: 4.8s;
}

.ai-node-5 {
    left: 118px;
    top: 30px;
    animation-delay: 2.4s;
}

.ai-node-6 {
    left: 140px;
    top: 9px;
    animation-delay: 4.0s;
}

.ai-node-7 {
    left: 160px;
    top: 24px;
    animation-delay: 0.8s;
}

@keyframes aiChaosBlink {
    0%, 10%, 100% {
        opacity: 0.38;
        transform: scale(1);
        background: #00A9D4;
        box-shadow: 0 0 0 rgba(0, 169, 212, 0);
    }

    5% {
        opacity: 1;
        transform: scale(1.55);
        background: #ffffff;
        box-shadow: 0 0 14px rgba(255, 255, 255, 0.9);
    }
}

/* ==================================================
   NAVIGATION: Hauptmenü mittig
   --------------------------------------------------
   Zentriert die Menübuttons innerhalb der 1200px-Leiste.

   Auswirkungen:
   - justify-content: center setzt die Buttons mittig.
   - gap: 10px steuert den Abstand zwischen den Menübuttons.
================================================== */

.nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.nav-item {
    position: relative;
}

/* ==================================================
   NAVIGATION: Menübuttons
   --------------------------------------------------
   Gestaltung der sichtbaren Hauptmenü-Punkte.

   Auswirkungen:
   - font-size macht die Schrift größer oder kleiner.
   - padding bestimmt die Buttonbreite.
   - min-height bestimmt die Buttonhöhe.
   - border zeichnet den Button-Rand.
   - border-radius: 5px rundet die Ecken.
================================================== */

.nav-item > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--color-text);
    border-radius: 5px;
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    background: transparent;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.nav-item > a:hover,
.nav-item.is-active > a {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.12);
}

/* ==================================================
   NAVIGATION: Dropdown
   --------------------------------------------------
   Unterbuttons pro Hauptmenüpunkt.

   Auswirkungen:
   - top bestimmt den Abstand zum Hauptbutton.
   - min-width bestimmt die Breite des Dropdowns.
   - background nutzt die Menüfarbe.
================================================== */

.dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    padding: 10px;
    background: var(--color-main-bg);
    border: 1px solid var(--color-dark-blue);
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: 0.2s ease;
}

.dropdown a {
    display: block;
    padding: 10px 12px;
    border: 1px solid var(--color-dark-blue);
    border-radius: 5px;
    color: #ffffff;
    background: transparent;
}

.dropdown li + li {
    margin-top: 8px;
}

.dropdown a:hover {
    transform: translateY(-2px);
    background: rgba(32, 54, 101, 0.18);
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ==================================================
   NAVIGATION: Mobile Toggle
   --------------------------------------------------
   Button für kleine Bildschirme.
================================================== */

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-text);
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 5px auto;
    background: #ffffff;
}

/* ==================================================
   NAVIGATION: Responsive
   --------------------------------------------------
   Auf kleineren Screens wird das Menü untereinander dargestellt.
================================================== */

@media (max-width: 900px) {
    .site-nav {
        width: 100%;
        padding: 0 20px;
    }

    .nav-inner {
        grid-template-columns: 1fr auto;
    }

    .nav-logo {
        width: 170px;
    }

    .nav-toggle {
        display: block;
    }

    .nav-menu {
        grid-column: 1 / -1;
        display: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding-bottom: 20px;
    }

    .nav-menu.is-open {
        display: flex;
    }

    .nav-item > a {
        width: 100%;
    }

    .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 100%;
        margin-top: 8px;
    }
}

/* ==================================================
   KI-SYMBOL: Roter Minuten-Impuls
   --------------------------------------------------
   Sonderzustand für einen einzelnen Punkt.

   Auslösung:
   - Die Klasse .is-red-alert wird per JavaScript gesetzt.
   - Etwa alle 60 Sekunden bekommt genau ein Punkt diese Klasse.
   - Nach ca. 900ms wird die Klasse wieder entfernt.

   Auswirkungen:
   - Während .is-red-alert aktiv ist, blinkt dieser Punkt rot.
   - Danach läuft die normale weiße Blinkanimation weiter.
   - Es wird immer nur ein Punkt gleichzeitig rot markiert.
================================================== */

.ai-node.is-red-alert {
    animation: aiRedSignal 0.9s ease-in-out 1 !important;
    background: #ff2b2b;
    border-color: #ffffff;
    opacity: 1;
    box-shadow: 0 0 18px rgba(255, 43, 43, 0.95);
}

@keyframes aiRedSignal {
    0% {
        opacity: 0.45;
        transform: scale(1);
        background: #ff2b2b;
        box-shadow: 0 0 0 rgba(255, 43, 43, 0);
    }

    35% {
        opacity: 1;
        transform: scale(1.75);
        background: #ff2b2b;
        box-shadow: 0 0 22px rgba(255, 43, 43, 1);
    }

    70% {
        opacity: 1;
        transform: scale(1.25);
        background: #ff2b2b;
        box-shadow: 0 0 14px rgba(255, 43, 43, 0.75);
    }

    100% {
        opacity: 0.38;
        transform: scale(1);
        background: #00A9D4;
        box-shadow: 0 0 0 rgba(255, 43, 43, 0);
    }
}