/* ===== ALAaf Menü Style ===== */
 :root{
   --alaaf-red:#d50000;
   --alaaf-gold:#ffcc00;
   --alaaf-white:#ffffff;
   --alaaf-dark:#111111;
 }
 
 .alaaf-menu-wrap{
   position: relative;
   overflow: hidden;
   border-radius: 18px;
   border: 2px solid rgba(255,255,255,.25);
   box-shadow: 0 10px 30px rgba(0,0,0,.25);
   margin: 12px auto 18px;
   max-width: 980px;
 }
 
 .alaaf-confetti{
   position:absolute;
   inset:0;
   background:
     radial-gradient(circle at 10% 20%, rgba(255,0,0,.35) 0 6px, transparent 7px),
     radial-gradient(circle at 20% 80%, rgba(255,204,0,.35) 0 7px, transparent 8px),
     radial-gradient(circle at 35% 35%, rgba(255,255,255,.30) 0 6px, transparent 7px),
     radial-gradient(circle at 55% 60%, rgba(255,0,0,.28) 0 6px, transparent 7px),
     radial-gradient(circle at 70% 25%, rgba(255,204,0,.30) 0 7px, transparent 8px),
     radial-gradient(circle at 85% 70%, rgba(255,255,255,.28) 0 6px, transparent 7px);
   filter: blur(.2px);
   opacity: .9;
   pointer-events:none;
   animation: confettiFloat 10s linear infinite;
 }
 
 @keyframes confettiFloat{
   0%{ transform: translateY(-10px); }
   50%{ transform: translateY(8px); }
   100%{ transform: translateY(-10px); }
 }
 
 .alaaf-menu{
   position: relative;
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap: 12px;
   padding: 14px 16px;
   background: linear-gradient(135deg, rgba(213,0,0,.92), rgba(255,204,0,.72));
   color: var(--alaaf-white);
 }
 
 .alaaf-brand{
   display:flex;
   align-items:center;
   gap: 10px;
   font-weight: 900;
   letter-spacing: .5px;
   text-transform: uppercase;
   text-shadow: 0 2px 12px rgba(0,0,0,.25);
 }
 
 .alaaf-badge{
   padding: 6px 10px;
   border-radius: 999px;
   background: rgba(17,17,17,.22);
   border: 1px solid rgba(255,255,255,.22);
   font-weight: 800;
 }
 
 .alaaf-links{
   display:flex;
   flex-wrap:wrap;
   gap: 10px;
 }
 
 .alaaf-links a{
   display:inline-block;
   padding: 9px 12px;
   border-radius: 999px;
   text-decoration:none;
   font-weight: 800;
   color: var(--alaaf-dark);
   background: rgba(255,255,255,.92);
   border: 1px solid rgba(0,0,0,.08);
   box-shadow: 0 6px 14px rgba(0,0,0,.18);
   transition: transform .12s ease, filter .12s ease;
 }
 
 .alaaf-links a:hover{
   transform: translateY(-1px) scale(1.02);
   filter: brightness(1.03);
 }
 
 @media (max-width: 640px){
   .alaaf-menu{
     flex-direction: column;
     align-items: flex-start;
   }
   .alaaf-links{
     width:100%;
   }
   .alaaf-links a{
     width:100%;
     text-align:center;
   }
 }
 /* === LOGO (nur CSS, kein HTML nötig) === */
 /* Wir versuchen das Logo in die bestehende Menüleiste zu setzen.
    Falls deine Menüleiste anders heißt, sag kurz die Klasse/ID aus dem HTML,
    dann passe ich es 1:1 an. */
 
 .menu-bar, .menu, header {
   position: relative;
   padding-left: 90px;          /* Platz für Logo links */
   background-image: url("/logo.jpeg");
   background-repeat: no-repeat;
   background-position: 18px center;
   background-size: 60px auto;
 }
 
 /* Mobile */
 @media (max-width: 600px) {
   .menu-bar, .menu, header {
     padding-left: 70px;
     background-position: 14px center;
     background-size: 45px auto;
   }
 }