:root{
  --gold: #ffd700; /* Leuchtendes Gold */
  --deep-red: #dc143c; /* Crimson Rot */
  --white: #ffffff;
  --bg: #f8f8ff; /* Leichter Lavender */
  --card-shadow: rgba(0,0,0,0.15);
  --max-w: 1300px;
}

*{box-sizing:border-box;font-family:'Poppins', sans-serif;}

body{
  margin:0;
  background: linear-gradient(135deg, var(--bg), #e6e6fa), repeating-linear-gradient(90deg, var(--deep-red) 0px, var(--deep-red) 20px, var(--white) 20px, var(--white) 40px);
  background-size: 100% 100%, 40px 100%;
  background-position: 0 0, 0 0;
  color:#2c2c2c;
  animation: bgFade 10s ease-in-out infinite alternate, stripesFall 5s linear infinite;
}

@keyframes bgFade {
  0% { background: linear-gradient(135deg, var(--bg), #e6e6fa), repeating-linear-gradient(90deg, var(--deep-red) 0px, var(--deep-red) 20px, var(--white) 20px, var(--white) 40px); }
  100% { background: linear-gradient(135deg, #ffe4e1, var(--bg)), repeating-linear-gradient(90deg, var(--deep-red) 0px, var(--deep-red) 20px, var(--white) 20px, var(--white) 40px); }
}

@keyframes stripesFall {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 0 0, 0 100%; }
}

/* Topbar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:25px;
  border-bottom:6px solid var(--gold);
  background: radial-gradient(circle, rgba(255,215,0,0.1), rgba(220,20,60,0.05));
  animation: topbarGlow 3s ease-in-out infinite alternate;
}
@keyframes topbarGlow {
  0% { box-shadow: 0 0 10px var(--gold); }
  100% { box-shadow: 0 0 20px var(--gold); }
}
.brand{font-weight:900;font-size:1.4rem; display:flex; gap:.7rem; align-items:center}
.gold{color:var(--gold); font-weight:900; animation: goldPulse 2s infinite;}
@keyframes goldPulse { 0%,100% { text-shadow: 0 0 5px var(--gold); } 50% { text-shadow: 0 0 15px var(--gold); } }
.topbar nav a{margin:0 12px; text-decoration:none; color: #2c2c2c; transition: all 0.4s;}
.topbar nav a:hover {color: var(--deep-red); transform: translateY(-2px);}
.topbar .auth{display:flex;gap:12px;align-items:center}
.topbar button{background:linear-gradient(45deg, var(--gold), var(--deep-red));border:2px solid var(--white);padding:10px 14px;border-radius:12px;cursor:pointer; animation: buttonBounce 1.5s infinite;}
@keyframes buttonBounce { 0%,20%,50%,80%,100% { transform: translateY(0); } 40% { transform: translateY(-5px); } 60% { transform: translateY(-3px); } }
.topbar button:hover {animation: none; transform: scale(1.1);}

/* Hero */
.hero{
  text-align:center;
  padding:80px 30px;
  border:8px solid var(--gold);
  margin:40px auto;
  max-width:var(--max-w);
  background: var(--white);
  border-radius:25px;
  box-shadow: 0 12px 40px var(--card-shadow);
  animation: heroSlide 1s ease-out;
}
@keyframes heroSlide { 0% { transform: translateY(-50px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.hero h1{color:var(--deep-red); margin:12px 0 10px; font-size: 2.8rem; animation: textGlow 3s infinite alternate;}
@keyframes textGlow { 0% { text-shadow: 0 0 10px var(--deep-red); } 100% { text-shadow: 0 0 20px var(--deep-red); } }
.hero p{opacity:.9; font-size: 1.2rem;}
.cta{display:inline-block;margin-top:18px;padding:14px 22px;border-radius:18px;background:linear-gradient(45deg, var(--deep-red), var(--gold));color:var(--white);text-decoration:none; transition: all 0.4s;}
.cta:hover {transform: rotate(2deg) scale(1.05); box-shadow: 0 5px 15px rgba(0,0,0,0.3);}

/* Container & grid */
.container{max-width:var(--max-w);margin:40px auto;padding:0 25px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:25px;margin-top:20px}
.card{
  border:5px solid var(--gold);
  padding:18px;border-radius:18px;background:var(--white);
  box-shadow: 0 10px 30px var(--card-shadow);
  min-height:150px;
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;
  transition: all 0.5s;
  animation: cardFade 0.8s ease-out;
}
@keyframes cardFade { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } }
.card:hover {transform: rotateY(5deg) translateY(-10px); box-shadow: 0 15px 50px var(--card-shadow);}
.card img{width:100%;height:130px;object-fit:cover;border-radius:12px;border:3px solid rgba(0,0,0,0.08)}
.card h3{margin:0; font-size: 1.3rem;}
.card .cat{font-size:1rem;color:rgba(0,0,0,0.75)}
.price{margin-top:auto;font-weight:900; font-size: 1.2rem; color: var(--deep-red);}

/* Modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:30px}
.modal[aria-hidden="true"]{display:none}
.modal-content{background:var(--white);padding:25px;border-radius:18px;border:6px solid var(--gold);width:380px;box-shadow:0 18px 50px var(--card-shadow); animation: modalPop 0.5s ease-out;}
@keyframes modalPop { 0% { transform: scale(0.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.modal-content label{display:block;margin:12px 0;font-size:1.1rem}
.modal-content input{width:100%;padding:12px;border-radius:12px;border:2px solid #ddd; transition: all 0.3s;}
.modal-content input:focus {border-color: var(--gold); box-shadow: 0 0 10px rgba(255,215,0,0.5);}
.msg{color:var(--deep-red);margin-top:12px; font-weight: bold;}

/* Footer */
.footer{text-align:center;padding:30px;border-top:5px dashed var(--gold); background: linear-gradient(90deg, var(--bg), var(--white));}

.car {
    position: fixed;
    bottom: 20px;
    left: -100px;
    font-size: 2rem;
    color: var(--deep-red);
    pointer-events: none;
    user-select: none;
    animation: driveAcross 8s linear infinite;
}
@keyframes driveAcross {
    0% { transform: translateX(0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(calc(100vw + 100px)) rotate(5deg); opacity: 0; }
}

.christmas-border {
    border: 5px solid var(--gold);
    border-radius: 20px;
    box-shadow: 0 0 25px rgba(255,215,0,0.8);
    background: linear-gradient(145deg, #ffffff, #ffe4e1);
    padding: 30px;
    animation: borderShine 4s infinite;
}
@keyframes borderShine { 0%,100% { box-shadow: 0 0 25px rgba(255,215,0,0.8); } 50% { box-shadow: 0 0 35px rgba(255,215,0,1); } }

.about-section {
    margin-left: 20%;
    margin-top: 50px;
    width: 70%;
    text-align: center;
    padding: 35px;
    background: linear-gradient(135deg, #fff0f5, #ffe4e1);
    border-radius: 15px;
    animation: sectionFloat 3s ease-in-out infinite alternate;
}
@keyframes sectionFloat { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } }

.about-section h2 {
    font-size: 32px;
    margin-bottom: 20px;
    color: var(--deep-red);
    text-shadow: 0 0 12px var(--gold);
    animation: titleBounce 2s infinite;
}
@keyframes titleBounce { 0%,20%,50%,80%,100% { transform: translateY(0); } 40% { transform: translateY(-5px); } 60% { transform: translateY(-3px); } }

.about-section p {
    font-size: 20px;
    margin-bottom: 25px;
    color: #8b0000;
}

.qr-code {
    width: 220px;
    height: 220px;
    border: 6px solid var(--gold);
    border-radius: 20px;
    padding: 15px;
    background: var(--white);
    box-shadow: 0 0 30px rgba(255,215,0,0.8);
    animation: qrRotate 10s linear infinite;
}
@keyframes qrRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.telegram-btn {
    display: inline-block;
    margin-top: 25px;
    background: linear-gradient(135deg, var(--gold), var(--deep-red));
    color: var(--white);
    padding: 14px 22px;
    border-radius: 15px;
    text-decoration: none;
    transition: all 0.4s;
    animation: btnPulse 1.5s infinite;
}
@keyframes btnPulse { 0%,100% { box-shadow: 0 0 10px var(--gold); } 50% { box-shadow: 0 0 20px var(--gold); } }
.telegram-btn:hover {transform: scale(1.1) rotate(-1deg);}

        .animated-logo {
            font-size: 2.4rem;
            font-family: 'Poppins', sans-serif;
            position: relative;
            width: fit-content;
            margin: 15px;
            color: transparent;
            animation: logoGlow 2s infinite alternate;
        }
        @keyframes logoGlow { 0% { text-shadow: 0 0 10px var(--deep-red); } 100% { text-shadow: 0 0 20px var(--deep-red); } }

        .animated-logo::before {
            content: "KFC";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            color: var(--deep-red);
            animation: logoType 3s steps(3) infinite;
        }
        @keyframes logoType { 0% { width: 0; } 50% { width: 100%; } 100% { width: 0; } }