/* RESET */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #000; color: #fff; font-family: Arial, sans-serif; overflow-x: hidden; } /* HEADER */ .header { position: fixed; width: 100%; top: 0; background: rgba(0,0,0,0.9); padding: 15px 40px; display: flex; justify-content: space-between; align-items: center; z-index: 1000; } .brand { font-family: 'Metal Mania', cursive; font-size: 28px; color: #c40000; letter-spacing: 2px; } .nav a { color: white; text-decoration: none; margin-left: 20px; } .nav a:hover { color: #ff0000; } .burger { display: none; font-size: 28px; cursor: pointer; } /* HERO */ .hero { height: 100vh; background: radial-gradient(circle at center, rgba(255,0,0,0.2), transparent 70%), url("metal-texture.jpg") center/cover no-repeat; display: flex; justify-content: center; align-items: center; text-align: center; position: relative; } /* LOGO ANIMATION */ .hero-logo { width: 420px; max-width: 80%; animation: fadeInLogo 2s ease-out forwards; opacity: 0; filter: drop-shadow(0 0 25px rgba(255,0,0,0.6)); } @keyframes fadeInLogo { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } /* ROCK HEADLINE */ .hero h1 { font-family: 'Metal Mania', cursive; font-size: 48px; margin-top: 30px; color: #ff0000; text-shadow: 0 0 20px rgba(255,0,0,0.7); } .hero p { margin-top: 10px; font-size: 18px; letter-spacing: 1px; } /* SPARK EFFECT */ .sparks { position: absolute; width: 50%; height: 50%; background-image: url("sparks.jpg"); background-size: cover; opacity: 0.3; animation: moveSparks 20s linear infinite; } @keyframes moveSparks { from { background-position: 0 0; } to { background-position: 0 1000px; } } /* FOOTER */ .footer { text-align: center; padding: 10px; background: #111; } /* RESPONSIVE */ @media (max-width: 768px) { .nav { position: absolute; top: 70px; right: 0; background: black; flex-direction: column; width: 200px; display: none; padding: 20px; } .nav.active { display: flex; } .nav a { margin: 10px 0; } .burger { display: block; } .hero h1 { font-size: 28px; } .hero-logo { width: 250px; } } /* ===== CONTENT „Über uns“ ===== */ .content-section { padding: 80px 0; background: #111; color: #eee; text-align: left; font-size: 18px; line-height: 1.7; } .content-section h1 { font-size: 32px; margin-bottom: 20px; color: #e10600; text-align: center; } .content-section p { margin-bottom: 15px; } /* Anpassung für aktive Navigation */ .nav a.active { color: #e10600; font-weight: bold; } /* RESPONSIVE */ @media (max-width: 768px) { .content-section { padding: 60px 10px; font-size: 16px; } .content-section h1 { font-size: 26px; } } /* ===== IMPRESSUM CONTENT ===== */ .content-section { padding: 80px 0; background: #111; color: #eee; font-size: 18px; line-height: 1.7; } .content-section h1 { font-size: 32px; margin-bottom: 20px; color: #e10600; text-align: center; } .content-section p { margin-bottom: 15px; } .content-section a { color: #e10600; text-decoration: none; } .content-section a:hover { text-decoration: underline; } .nav a.active { color: #e10600; font-weight: bold; } @media (max-width: 768px) { .content-section { padding: 60px 10px; font-size: 16px; } .content-section h1 { font-size: 26px; } } Kontakt – MC Kreuzpleuel
MC Kreuzpleuel
☰

Kontakt

Du hast Fragen, Anregungen oder möchtest mit uns in Kontakt treten?
Dann schreibe uns gerne eine E-Mail an:

/* ===== RESET ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background: #111; color: #eee; line-height: 1.6; } /* ===== HEADER ===== */ .header { background: #000; padding: 15px 0; position: sticky; top: 0; z-index: 1000; } .container { width: 90%; max-width: 1200px; margin: auto; } .header-inner { display: flex; justify-content: space-between; align-items: center; } .brand { font-size: 24px; font-weight: bold; color: #e10600; } .nav a { color: #fff; text-decoration: none; margin-left: 20px; font-weight: 500; } .nav a.active { border-bottom: 2px solid #e10600; } .burger { display: none; font-size: 28px; cursor: pointer; color: white; } /* ===== CONTENT ===== */ .content-section { padding: 60px 0; } .content-section h1 { text-align: center; font-size: 32px; margin-bottom: 20px; color: #e10600; } /* ===== EVENT IMAGE ===== */ .event-image { text-align: center; margin: 20px 0; } .event-image img { width: 100%; max-width: 600px; border-radius: 8px; border: 3px solid #333; } /* ===== EVENT LIST ===== */ .event-list { display: flex; flex-direction: column; gap: 25px; margin-top: 30px; } .event-card { background: #222; padding: 20px; border-radius: 8px; border-left: 5px solid #e10600; } .event-card h2 { font-size: 22px; margin-bottom: 10px; } .event-card p { font-size: 16px; } /* ===== INVITE ===== */ .invite { margin-top: 30px; text-align: center; font-weight: bold; } .invite a { color: #ff0000; text-decoration: underline; } /* ===== FOOTER ===== */ .footer { background: #000; text-align: center; padding: 20px 0; margin-top: 40px; } .footer-inner a { color: #fff; text-decoration: none; margin: 0 8px; } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { .nav { position: absolute; top: 70px; right: 0; background: #000; flex-direction: column; width: 200px; display: none; padding: 20px; } .nav.active { display: flex; } .nav a { margin: 10px 0; } .burger { display: block; } .content-section { padding: 40px 10px; } .content-section h1 { font-size: 26px; } }