@charset "utf-8";

/* ===========================
   Farbpalette
=========================== */
:root {
    --bg-main: #c3c3c5;
    --bg-glass: rgba(36, 5, 210, 0.418);
    --bg-hover: rgba(223, 223, 228, 0.904);
    --bg-dropdown: #000;

    --accent: #1b18ac;
    --accent-glow: 0 0 12px rgba(63, 83, 174, 0.5);

    --text-light: #0d0633;
    --text-muted: #141552;

    --radius: 14px;
    --shadow: 0 8px 30px rgba(0,0,0,0.25);
    --transition: 0.35s cubic-bezier(.4,0,.2,1);
}

body {
    margin: 0;
    padding: 0;
    font-family: "Inter", Arial, sans-serif;
    background: var(--bg-main);
    color: var(--text-light);
}

/* ===========================
   Header
=========================== */
header {
    padding: 50px;
    text-align: center;
    color: var(--text-light);
}

h1 {
    font-size: 52px;
    font-weight: 800;
    letter-spacing: -1px;
}

/* ===========================
   Navigation
=========================== */

.navbar {background-color: #000}
.navbar-text,
.navbar-brand,
.nav-link {color: #fff}

/*
    Hamburgermenu farbe hell;
*/

.navbar-toggler-icon {
  filter: invert(100%);
}

nav {
    height: 80px;
    backdrop-filter: blur(18px);

    background: rgba(148, 24, 24, 0.75);
/*
    background: var(--bg-glass);
*/
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    box-shadow: var(--shadow);

    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Menü-Liste */
nav ul {
    display: flex;
    gap: 25px;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav li {
    position: relative;
}

/* Links */
nav ul li a {
    padding: 12px 22px;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-light);
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hover */
nav ul li a:hover {
    background: var(--bg-hover);
    color: var(--accent);
    box-shadow: var(--accent-glow);
    transform: translateY(-2px);
}

/* Aktive Seite */
nav ul li.current-menu-item a,
nav ul li.current_page_item a {
    background: var(--accent);
    color: #000;
    font-weight: 600;
    box-shadow: var(--accent-glow);
}

/* ===========================
   Dropdown (Premium)
=========================== */
.dropdown {
    display: none;
    flex-direction: column;

    position: absolute;
    top: 70px;
    left: 0;
    width: 220px;

    background: var(--bg-dropdown);
    backdrop-filter: blur(20px);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;

    opacity: 0;
    transform: translateY(10px);
    transition: var(--transition);
}

.dropdown li a {
    padding: 16px 20px;
    color: var(--text-muted);
}

.dropdown li a:hover {
    background: var(--bg-hover);
    color: var(--accent);
}

/* Desktop Hover */
nav li:hover .dropdown {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

/* ===========================
   Mobile Navigation
=========================== */
nav input[type="checkbox"] {
    display: none;
}

.toggle_button {
    width: 32px;
    height: 24px;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.bar {
    height: 4px;
    width: 100%;
    background: var(--text-light);
    border-radius: 100px;
    transition: var(--transition);
}

@media (max-width: 1199px) {

    .navbar {background-color: #000}
    .navbar-text,
    .navbar-brand,
    .nav-link {
        color: #fff;
    }

    .toggle_button {
        display: flex;
    }

    nav ul {
        display: none;
        flex-direction: column;
        width: 100%;
        background: var(--bg-dropdown);
        backdrop-filter: blur(20px);
        border-radius: var(--radius);
        margin-top: 20px;
        padding: 20px 0;
    }

    nav ul li a {
        padding: 18px 0;
        width: 100%;
    }

    #toggle_button:checked ~ ul {
        display: flex;
    }

    nav li:hover .dropdown {
        display: none;
    }

    .expandable_li input[type="checkbox"]:checked ~ .dropdown {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }
}