/* RESET & BODY */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Arial,sans-serif;color:#222;background:#fff;}

/* VARIABLEN */
:root{
  --primary:#001149;
  --secondary:#f8d21e;
  --accent:#8fdde0;
  --text:#222;
  --bp-sm:768px;
  --spacing:1rem;
  --transition:.2s ease;
}

/* HEADER */
.site-header{background:var(--primary);color:var(--secondary);}
.header-inner{max-width:1200px;margin:0 auto;padding:var(--spacing);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.header-runes{display:flex;gap:var(--spacing);}
.rune{max-height:3rem;transition:transform var(--transition);} 
.rune:hover{transform:scale(1.1);}
.logo-main{max-height:5rem;transition:var(--transition);}

/* NAV */
.main-nav ul{list-style:none;display:flex;gap:var(--spacing);}
.main-nav a{color:var(--secondary);text-decoration:none;padding:.5rem 1rem;transition:color var(--transition),border-bottom var(--transition);}
.main-nav li.active a{border-bottom:2px solid var(--secondary);}
.main-nav a:hover{color:var(--accent);border-bottom:2px solid var(--accent);}

/* BURGER (versteckt Desktop) */
.mobile-menu-toggle{display:none;background:none;border:none;cursor:pointer;width:30px;height:30px;position:relative;}
.hamburger,.hamburger::before,.hamburger::after{content:'';position:absolute;width:100%;height:3px;background:var(--text);transition:var(--transition);}
.hamburger{top:50%;transform:translateY(-50%);}
.hamburger::before{top:-8px;}
.hamburger::after{top:8px;}
.mobile-menu-toggle.active .hamburger{background:transparent;}
.mobile-menu-toggle.active .hamburger::before{transform:rotate(45deg) translate(5px,5px);}
.mobile-menu-toggle.active .hamburger::after{transform:rotate(-45deg) translate(5px,-5px);}

/* RESPONSIVE */
@media(max-width:var(--bp-sm)){
  .header-runes{display:none;}
  .mobile-menu-toggle{display:block;}
  .main-nav{display:none;flex-direction:column;width:100%;background:var(--primary);position:absolute;top:100%;left:0;}
  .main-nav.active{display:flex;}
  .main-nav ul{flex-direction:column;gap:.5rem;padding:var(--spacing);}
}