/* ===============================
   Farb-Konzept (Corporate Identity)
   =============================== */
:root {
    --primary-red: #b22222;
    --primary-gold: #f2c94c;

    --neutral-light: #f5f5f5;
    --neutral-dark: #222222;

    --sport-badminton: #1abc9c;
    --sport-tischtennis: #2980b9;
    --sport-wingchun: #e67e22;
}



header {
    background-color: var(--primary-red);
    color: white;
    padding: 15px 40px;
    display: flex;
    align-items: center;
    gap: 20px;
}

header img {
    height: 80px;
    width: auto;
}

header h1 {
    margin: 0;
    font-size: 1.9rem;
}

nav {
    background-color: var(--neutral-dark);
    display: flex;
    justify-content: center;
    gap: 10px;
}

nav a {
    color: white;
    padding: 14px 20px;
    text-decoration: none;
    font-weight: bold;
}

nav a:hover {
    background-color: var(--primary-gold);
    color: black;
    transition: 0.3s;
}

.myKopf {
    position: -webkit-sticky; /* Für Safari */
    position: sticky;
    top: 0;                /* Klebt am oberen Rand */
    z-index: 1000;         /* Stellt sicher, dass der Header über Inhalten liegt */
    width: 100%;
}

.myNav {
    position: sticky;
    top: 115px;
    z-index: 1000;
    width: 100%;
}

.myNav a.active {
    color: var(--primary-gold);
    font-weight: 600;
}

.myNav a.active:hover {
    background-color: var(--neutral-dark);
}