/* ========================
GLOBAL LAYOUT
======================== */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 🔥 BODY DARF NICHT SCROLLEN */
  font-family: 'Cinzel', serif;
  background-color: black;
  color: #e0e0e0;
}

body {
  display: flex;
  flex-direction: column;
}

/* ========================
MAIN
======================== */
main {
  flex: 1 1 auto; /* nimmt restliche Höhe */
  overflow-y: auto; /* nur Main scrollbar */
  -ms-overflow-style: none;  /* IE & Edge */
  scrollbar-width: none;     /* Firefox */
  position: relative;
}


/* Scrollbarer Inhalt */
main .content {
  position: relative;
  z-index: 2;
  height: 100%;
  overflow-y: auto; /* nur Inhalt scrollt */
  -ms-overflow-style: none;  /* IE & Edge */
  scrollbar-width: none;     /* Firefox */
  padding: 20px; /* optionaler Abstand zum Rand */
}

main::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}
/* Optional: Fix für große Bilder */
main img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ========================
HEADER
======================== */
header {
position: relative;
display: flex;
align-items: center; /* Logo & Titel auf gleicher Höhe */
justify-content: center; /* Titel mittig im Header */
background: linear-gradient(180deg, #000000 0%, black 100%);
border-bottom: 2px solid darkred;
padding: 20px 60px;
height: 160px; /* Höhe kannst du anpassen */
overflow: hidden;
flex-shrink: 0; /* verhindert schrumpfen */
}

/* Logo links, nicht zu groß */
header .logo {
position: absolute;
left: 200px;
top: 50%;
transform: translateY(-50%);
height: 100px; /* nach Bedarf anpassen */
width: auto;
z-index: 3;
}

/* Titel mittig */
header h1 {
font-family: "Cinzel", serif;
font-size: 4.4rem;
color: #fff;
text-align: center;
margin: 0;
line-height: 1.2;
text-shadow: 0 0 8px #000;
}


/* ========================
BLITZE
======================== */
header::before,
header::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 3;
mix-blend-mode: lighten;
opacity: 0;
}

header::before {
background: radial-gradient(circle at 25% 25%, rgba(170,210,255,0.8), transparent 70%);
animation: lightningLeft 12s infinite;
}

header::after {
background: radial-gradient(circle at 70% 35%, rgba(200,230,255,0.75), transparent 80%);
animation: lightningRight 20s infinite;
}

@keyframes lightningLeft {
0%,94%,100%{opacity:0;}
95%{opacity:0.9;}
95.2%{opacity:0.3;}
95.4%{opacity:1;}
95.7%{opacity:0.2;}
96%{opacity:0;}
}

@keyframes lightningRight {
0%,88%,100%{opacity:0;}
89%{opacity:0.8;}
89.3%{opacity:0.4;}
89.5%{opacity:1;}
89.8%{opacity:0.3;}
90%{opacity:0;}
}

.smoke-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Basis für alle Nebelschichten */
.smoke-layer {
  position: absolute;
  top: -150px; /* vorher -300px → Nebel rutscht nach unten */
  left: 0;    /* leicht nach rechts verschoben */
  width: 160%; /* bisschen breiter, damit Übergang verdeckt bleibt */
  height: 900px;
  background: url('image/nebel.png') repeat-x;
  background-size: contain;
  pointer-events: none;
  opacity: 0.75;
  filter: blur(6px) brightness(1.25) contrast(1.25);

 
  /* Weiche Außenkanten – Kombination aus radial + linear */
  -webkit-mask-image:
    radial-gradient(circle at center,
      black 55%,
      rgba(0,0,0,0.6) 75%,
      transparent 100%
    );
  mask-image:
    radial-gradient(circle at center,
      black 55%,
      rgba(0,0,0,0.6) 75%,
      transparent 100%
    );
}

/* Zwei Schichten pro Animation – versetzt gestartet */
.smoke1, .smoke1b {
  animation: fogDrift1 65s linear infinite;
}
.smoke1b {
  animation-delay: -32s;
  opacity: 0.35;
}

.smoke2, .smoke2b {
  animation: fogDrift2 90s linear infinite;
}
.smoke2b {
  animation-delay: -45s;
  opacity: 0.55;
}

/* Animationen */
@keyframes fogDrift1 {
  0%   { transform: translateX(0) translateY(0); }
  50%  { transform: translateX(-6%) translateY(-150px); }
  100% { transform: translateX(-12%) translateY(-300px); }
}

@keyframes fogDrift2 {
  0%   { transform: translateX(-5%) translateY(0); }
  50%  { transform: translateX(0%) translateY(-200px); }
  100% { transform: translateX(5%) translateY(-350px); }
}

.logo {
position: relative;
display: flex;
align-items: center;
}

/* Container für Logo + Effekte */
.logo-container {
position: relative;
display: inline-block;
z-index: 2;
}

.logo-title {
flex: 1;
text-align: center;
position: relative;
z-index: 2;
}

.logo-title h1 {
font-family: 'Times New Roman', serif;
font-size: 4.0em;
font-weight: 900;
color: #ffffff;
letter-spacing: 1.5px;
text-transform: uppercase;
margin: 0;
padding-top: 10px;
display: inline-block;
text-shadow:
0 4px 8px rgba(255, 255, 255, 0.8),
0 6px 12px rgba(255, 0, 0, 0.5),
0 8px 20px rgba(255, 80, 0, 0.4),
0 2px 6px rgba(0,0,0,0.7);
animation: titleGlow 2s infinite alternate;
}

@media (max-width: 1200px) {
  .logo-title {
    gap: 0;
  }
}

@media (max-width: 1024px) {
  .logo-title h1 {
    display: none;
  }
}

 
.social-icons{
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 3;
}

.social-icons a {
    color: #fff;
    font-size: 1.6rem;
    transition: color 0.3s ease, transform 0.2s ease;
}

.social-icons a:hover {
    color: #ff0000;
    transform: scale(1.15);
}

@keyframes titleGlow {
0% {
text-shadow: 0 4px 6px rgba(255,255,255,0.7),
0 6px 10px rgba(255,0,0,0.4),
0 8px 15px rgba(255,80,0,0.3),
0 2px 6px rgba(0,0,0,0.7);
}
50% {
text-shadow: 0 4px 10px rgba(255,255,255,0.9),
0 6px 15px rgba(255,50,0,0.6),
0 8px 25px rgba(255,100,0,0.5),
0 2px 6px rgba(0,0,0,0.7);
}
100% {
text-shadow: 0 4px 8px rgba(255,255,255,0.8),
0 6px 12px rgba(255,0,0,0.5),
0 8px 20px rgba(255,80,0,0.4),
0 2px 6px rgba(0,0,0,0.7);
}
}

/* ========================
NAVBAR Desktop nicht anfassen ist perfekt
======================== */
.navbar {
  position: absolute;
  right: 3px;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  padding: 10px 20px;
  background: linear-gradient(180deg, #1a1a1a 0%, #000000 100%);
  border-top: 2px solid #990000;
  border-radius: 6px 6px 0 0;

  z-index: 50;
}

/* Menü offen → über allem */
.navbar.menu-open {
 position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background:
    radial-gradient(circle at center, rgba(120,0,0,0.35), transparent 60%),
    linear-gradient(180deg, #140000 0%, #000 100%);
  animation: menuFadeIn 0.6s ease;

  

  flex-direction: column;
  justify-content: center;
  align-items: center;

  z-index: 100000; /* ÜBER Header & Overlay */
}

@keyframes menuFadeIn {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* Navbar Links */
.navbar a {
color: #fff;
text-decoration: none;
font-family: "Cinzel", serif;
font-size: 1rem;
letter-spacing: 0.5px;
transition: color 0.3s ease, transform 0.2s ease;
}

.navbar a:hover {
color: #ff0000;
transform: scale(1.1);
}
.navbar ul {
list-style: none;
display: flex;
gap: 40px;
margin: 0;
padding: 0;
}

@media (max-width: 900px) {
  .navbar ul {
    display: none;
  }
}

.navbar ul li a {
position: relative;
display: inline-block;
color: #fff;
font-family: 'Cinzel', serif;
font-size: 1.15em;
text-decoration: none;
padding-bottom: 5px;
transition: color 0.3s;
}

.navbar ul li a::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 100%;
background-color: #ff4500;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}

.navbar ul li a:hover::after {
transform: scaleX(1);
}

.navbar ul li a:not(:hover)::after {
transform-origin: right;
transform: scaleX(0);
}

.navbar ul li a.active::after {
transform: scaleX(1);
}

@media (max-width: 1024px) {
  .navbar ul li a {
    font-size: 1.6rem;
    letter-spacing: 2px;
  }
}
/* =========================
   iPad Pro – Desktop Navbar verkleinern
========================= */
@media (max-width: 1200px) and (min-width: 901px) {

  .navbar ul {
    gap: 26px; /* vorher 40px */
  }

  .navbar ul li a {
    font-size: 1rem; /* vorher 1.15em */
    letter-spacing: 0.5px;
  }
}
/* ========================
MOTTO
======================== */
.motto {
text-align: center;
padding: 50px;
max-width: 900px;
margin: auto;
}

.motto h1 { font-family:'Times New Roman', Times, serif, cursive; font-size: 40px; color: #b30000; text-transform: uppercase; }
.motto h2 { font-size: 28px; margin-bottom: 20px; }
.motto p { font-size: 25px; line-height: 1.6; }

/* ========================
CONTENT
======================== */
.content { max-width: 900px; margin: 0 auto; padding-right: 0; text-align: center; }

/* ========================
GALERIE - OPTIMIERT
======================== */

/* Tabs oben */
.gallery-tabs {
  text-align: center;
  margin-bottom: 25px;
}

.gallery-tabs button {
  background: linear-gradient(180deg, #2b1a1a, #1a0d0d);
  border: 2px solid #7a0000;
  color: #f5f5f5;
  font-family: 'Cinzel', serif;
  letter-spacing: 1px;
  padding: 8px 20px;
  margin: 5px;
  cursor: pointer;
  box-shadow: 0 0 8px #300;
  transition: all 0.3s ease;
}

.gallery-tabs button:hover,
.gallery-tabs button.active {
  background: #7a0000;
  box-shadow: 0 0 12px #a00;
  transform: translateY(-2px);
}

/* Container für alle Galerien */
.gallery-container {
  display: block; /* sichtbar, Tab steuert die Inhalte */
  margin-top: 20px;
  text-align: center;
}

/* Einzelne Galerie */
.gallery {
display: none;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 15px;
  justify-items: center;
}

.gallery.active {
  display: grid; /* aktive Galerie anzeigen */
}

/* Einzelne Galerie-Links / Bilder */
.gallery a {
  display: block;
  width: 100%;
  max-width: 200px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery a img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  cursor: pointer;
}

.gallery a:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.6);
}

@media (max-width: 1024px) {
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

@media (max-width: 480px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}


.back-button {
    display: inline-block;
    margin-top: 30px;
    padding: 10px 20px;
    background: #8a1c1c;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-family: "Cinzel", serif;
    transition: all 0.3s ease;
    z-index: 10; /* sicherstellen, dass er über anderen Elementen liegt */
}

.back-button:hover {
    background: #b32222;
    transform: scale(1.03);
}

/* ========================
KONTAKT
======================== */
form input, form textarea {
width: 80%;
padding: 10px;
margin: 5px 0;
border: 2px solid #990000;
border-radius: 5px;
background: #1a1a1a;
color: #fff;
}

form button {
background: #990000;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
position: relative;
}

form button:hover { background: #ff0000; }

/* ========================
FOOTER + SOCIAL
======================== */
footer {
flex-shrink: 0;
margin: 0;
padding: 20px;
background-color: black;
border-top: 2px solid #990000;
text-align: center;
height: 100px; /* feste Höhe */
}

.footer-social {
width: 20%;
margin-bottom: 100px 
}

.footer-social a {
color: #fff;
font-size: 1.5em;
margin: 0 10px;
transition: color 0.3s, text-shadow 0.3s;
}

.footer-social a:hover {
color: #ff4500;
text-shadow: 0 0 8px #ff4500, 0 0 20px rgba(255,100,0,0.6);
}


.footer-links a {
    color: #b30000; /* Rot passend zur Seite */
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.footer-links a:hover {
    color: #ff0000;
    text-shadow: 0 0 6px rgba(255,0,0,0.6);
}

.footer-links .divider {
    margin: 0 8px;
    color: #666;
}

@media (max-width: 1024px) {
  .navbar {
    flex-direction: column;
    gap: 10px;
    font-size: 0.9rem;
  }
}


/* ========================
LOGO + KRAMPUS + RAUCH
======================== */
.logo-container {
position: relative;
display: inline-block;
z-index: 2;
}

/* Logo selbst */
.logo img {
width: 150px;
height: auto;
position: relative;
display: block;
z-index: 3;

/* Verstärkte Effekte für mehr Präsenz */
filter: drop-shadow(0 0 8px rgba(255,255,255,0.7))
contrast(1.35)
brightness(1.2)
saturate(1.3);

}

/* Fixiertes Hintergrundbild rechts */
main::before {
  content: '';
  position: fixed; /* WICHTIG: fixed bleibt beim scrollen stehen */
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 750px;
  height: 500px;
  background: url('image/seppl.png') no-repeat center/contain;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.4))
          contrast(1.3)
          brightness(1.1)
          saturate(1.2);
  -webkit-mask-image: 
    linear-gradient(to left, black 85%, transparent 100%),
    linear-gradient(to bottom, black 85%, transparent 100%);
  -webkit-mask-composite: destination-in;
  mask-image: 
    linear-gradient(to left, black 85%, transparent 100%),
    linear-gradient(to bottom, black 85%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

/* Fixiertes Hintergrundbild links */
main::after {
  content: '';
  position: fixed; /* WICHTIG */
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 750px;
  height: 500px;
  background: url('image/gruppe/gruppe_1.JPG') no-repeat center/cover;
  pointer-events: none;
  z-index: 0;
  filter: brightness(1.08) contrast(1.15) saturate(1.05);

  /* Maske für weiche Ecken und Seiten */
  -webkit-mask-image: 
    radial-gradient(circle at top left, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%),
    radial-gradient(circle at top right, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%),
    radial-gradient(circle at bottom left, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%),
    radial-gradient(circle at bottom right, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%),
    linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 100%),
    linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 100%),
    linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 100%);
  -webkit-mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-image: 
    radial-gradient(circle at top left, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%),
    radial-gradient(circle at top right, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%),
    radial-gradient(circle at bottom left, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%),
    radial-gradient(circle at bottom right, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%),
    linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 100%),
    linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 100%),
    linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 100%);
  mask-composite: intersect;
  mask-repeat: no-repeat;
  mask-size: cover;
}

/* Inhalt bleibt darüber */
main > * {
  position: relative;
  z-index: 1;
}
/* ============================
   INFORMATIONEN – SEITENSTIL
============================ */

/* --- INFO SEITE GRID --- */

.info-section {
    padding: 50px;
    text-align: center;
    color: #b30000;
}

.info-section h1 {
    font-family: "Cinzel", serif;
    font-size: 3rem;
    margin-bottom: 40px;
    text-shadow: 0 0 15px #000;
}

/* GRID */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

/* BOXEN */
.info-box {
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid #3a3a3a;
    padding: 25px;
    border-radius: 15px;
    backdrop-filter: blur(4px);
    box-shadow: 0 0 15px rgba(0,0,0,0.6);
    transition: 0.3s;
}

.info-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px rgba(255, 0, 0, 0.4);
}

/* Überschriften */
.info-box h2 {
    font-family: "Cinzel", serif;
    color: #cdaa7d;
    margin-bottom: 15px;
}

/* Text */
.info-box p {
    font-size: 1rem;
    line-height: 1.5;
    color: #d0d0d0;
    margin-bottom: 20px;
}

/* BUTTON */
.info-btn {
    display: inline-block;
    padding: 10px 20px;
    background: #8a1c1c;
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    transition: 0.3s;
    font-family: "Cinzel", serif;
}

.info-btn:hover {
    background: #b32626;
}

.timeline-section {
  padding: 60px 20px;
  text-align: center;
  color: #b30000;;
  font-family: 'Cinzel', serif;
  background: transparent;
}

.timeline-section h2 {
  font-size: 2.8rem;
  margin-bottom: 40px;
  color: #cdaa7d;
}

/* ===================================
   TIMELINE CONTAINER
=================================== */
.timeline {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 40px;
  overflow: visible;
}

/* ===================================
   MITTELLINIE + FUNKEN
=================================== */
.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 6px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, #8a1c1c, #cdaa7d);
  border-radius: 3px;
  z-index: 1;
  height: 0;
  animation: drawLine 1.5s ease forwards;
}

/* Funken/Glut-Animation entlang der Mittellinie */
.timeline::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  
  background-size: 6px 20px;

}

@keyframes drawLine {
  from { height: 0; }
  to { height: 100%; }
}

@keyframes sparksUp {
  0% { background-position: 0 100%; }
  100% { background-position: 0 -20px; }
}

/* ===================================
   TIMELINE EINTRÄGE
=================================== */
.timeline-item {
  position: relative;
  width: calc(50% - 60px);
  display: flex;
  gap: 20px;
  align-items: center;
  background: rgba(20,20,20,0.75);
  padding: 18px;
  border-radius: 12px;
  border: 1px solid #2f2f2f;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  margin: 25px 0;
  z-index: 2;

  /* Intro Animation */
  opacity: 0;
  transform: translateX(var(--startX));
  animation: slideIn 0.8s ease forwards;
}

.timeline-item.left { --startX: -40px; }
.timeline-item.right { --startX: 40px; }

@keyframes slideIn {
  to { opacity: 1; transform: translateX(0); }
}

/* ===================================
   GOLDENER TIMELINE PUNKT
=================================== */
.timeline-item::before {
  content: '';
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #ffd700, #cdaa7d);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(205,170,125,0.6);
  z-index: 3;
}

.timeline-item.left { margin-left: 0; margin-right: auto; text-align: right; }
.timeline-item.left::before { right: -50px; }
.timeline-item.right { margin-left: auto; margin-right: 0; text-align: left; }
.timeline-item.right::before { left: -50px; }

/* ===================================
   DATUM
=================================== */
.timeline-item .termin-date {
  min-width: 96px;
  text-align: center;
  background: linear-gradient(180deg,#8a1c1c,#5f0f0f);
  padding: 12px;
  border-radius: 10px;
  color: #fff;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.5);
}

.timeline-item .termin-date .day { font-size: 1.8rem; font-weight: 700; }
.timeline-item .termin-date .month { font-size: 0.95rem; }

/* ===================================
   TEXT
=================================== */
.timeline-item .termin-info h3 { color: #cdaa7d; margin: 0 0 6px; }
.timeline-item .termin-info p { margin: 0; color: #d0d0d0; }

/* ===================================
   STATUS: VERGANGEN
=================================== */
.timeline-item.past { opacity: 0.35; filter: grayscale(70%); transition: opacity 0.6s ease, filter 0.6s ease; }

/* ===================================
   STATUS: HEUTE / NEXT EVENT (Glowing-Rune)
=================================== */
.timeline-item.next {
  border: 2px solid #cdaa7d;
  transform: scale(1.02);
  box-shadow: 0 10px 25px rgba(205,170,125,0.3);
  transition: all 0.5s ease;
}

.timeline-item.next::after {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  border-radius: 15px;
  border: 2px solid #ffd700;
  pointer-events: none;
  box-shadow: 
      0 0 12px #ffd700,
      0 0 24px #cdaa7d,
      0 0 36px #ff8c00,
      0 0 48px #cdaa7d;
  z-index: -1;
  animation: runeGlow 1.5s infinite alternate;
}

@keyframes runeGlow {
  0% { box-shadow: 0 0 12px #ffd700, 0 0 24px #cdaa7d, 0 0 36px #ff8c00, 0 0 48px #cdaa7d; }
  100% { box-shadow: 0 0 18px #ffd700, 0 0 36px #cdaa7d, 0 0 54px #ff8c00, 0 0 72px #cdaa7d; }
}

/* ===================================
   HOVER (normale Termine)
=================================== */
.timeline-item:not(.next):hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 0 12px rgba(201, 164, 92, 0.3);
}

/* ===================================
   RESPONSIVE timeline bleibt !
=================================== */
@media (max-width: 900px){
  .timeline::before { left: 20px; transform: none; width: 4px; }
  .timeline::after { left: 20px; transform: none; width: 4px; }
  .timeline-item,
  .timeline-item.left,
  .timeline-item.right {
    width: calc(100% - 60px);
    margin-left: 50px !important;
    margin-right: 10px !important;
    text-align: left;
  }
  .timeline-item::before { left: -35px !important; right: auto !important; }
  .timeline-item.next::after { left: 4px; top: -6px; width: calc(100% + 4px); height: calc(100% + 12px); }
}

/* ========================
INFO BOXEN LESBARER
======================== */

/* Überschriften */
.info-box h2 {
    font-size: 2rem; /* größer */
}

/* Text in den Boxen */
.info-box p {
    font-size: 1.2rem; /* größer und angenehmer */
    line-height: 1.8;  /* mehr Zeilenabstand */
    color: #e0e0e0;
}

/* Rauhnächte-Karten */
.rauhnacht-card {
    font-size: 1.1rem;      /* etwas größer */
    line-height: 1.6;       /* Zeilenabstand verbessern */
    padding: 20px;          /* mehr Innenabstand */
    border-radius: 15px;    /* sanftere Ecken */
}

/* Grid für Rauhnächte */
.rauhnaecht-cards {
    gap: 20px;              /* Abstand vergrößern */
    margin-top: 25px;
}

/* Info-Box Rahmen & Hintergrund */
.info-box {
    background: rgba(30, 30, 30, 0.85); /* dunkler, aber nicht zu hart */
    border: 1px solid #666666;        /* dezenter Rahmen */
    box-shadow: 0 0 15px rgba(0,0,0,0.5); /* softer Schatten */
}

/* Überschrift Akzent */
.info-box h2 {
    color: #cdaa7d; /* warmes Gold / Beige, elegant */
}

/* Rauhnächte-Karten */
.rauhnacht-card {
    background: rgba(30,30,30,0.85);
    border: 1px solid #666666;
    border-radius: 15px;
    box-shadow: 0 0 12px rgba(0,0,0,0.5);
    color: #e0e0e0; /* Schrift heller */
}

/* Optional Hover-Effekt */
.info-box:hover,
.rauhnacht-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px rgba(205, 170, 125, 0.4); /* goldener Glanz */
}
/* Responsive Anpassungen */
@media (max-width: 768px) {
  .rauhnaecht-cards {
    grid-template-columns: 1fr;
  }
}

/* ========================
   ÜBER UNS – TEAM-BEREICH
======================== */

.team-section {
    width: 90%;
    max-width: 1100px;
    margin: 40px auto;
    padding: 20px;
    box-sizing: border-box;
}

.team-title {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    margin: 30px 0 10px;
    text-align: center;
    color: #b30000; /* kräftiges Rot */
    text-shadow: 0 0 5px rgba(0,0,0,0.7);
}

/* Wrapper mit reservierter Höhe, damit main stabil bleibt */
.team-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 20px;
}

/* Einzelne Team-Karten */
.team-card {
    background: rgba(20, 20, 20, 0.85);
    border: 2px solid #333;
    border-radius: 10px;
    width: 260px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 0 8px rgba(0,0,0,0.6);
    transition: all 0.3s ease;
}

.team-card:hover {
    transform: scale(1.03);
    box-shadow: 0 0 15px rgba(180, 0, 0, 0.8),
                0 0 25px rgba(120, 0, 0, 0.6);
    border-color: #8b0000;
}

/* Bilder mit fester Höhe */
.team-card img {
    width: 100%;
    height: 260px; /* feste Höhe verhindert Layout-Verschiebung */
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #333;
    transition: all 0.3s ease;
}

.team-card h3 {
    margin-top: 15px;
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    color: #e8d5b5;
}

.team-card p {
    margin-top: 5px;
    font-size: 1.1rem;
    color: #c8c8c8;
}
.team-card img {
    width: 100%;
    aspect-ratio: 1/1;   /* quadratisch, Höhe automatisch passend */
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #333;
    transition: all 0.3s ease;
    display: block;
}
/* ================================
PARTNER-SEKTION
================================ */

.partner-section {
    margin-top: 60px;
    text-align: center;
}

.partner-title {
    font-family: 'Cinzel', serif;
    font-size: 2.4rem;
    color: #b30000;
    margin-bottom: 30px;
    text-shadow: 0 0 8px rgba(0,0,0,0.8);
}

.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
    padding: 20px;
}

.partner-card {
    background: rgba(20, 20, 20, 0.85);
    padding: 20px;
    border-radius: 15px;
    border: 2px solid #333;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
    text-align: center;
    transition: all 0.3s ease;
}

.partner-card:hover {
    transform: scale(1.05);
    border-color: #b30000;
    box-shadow: 0 0 18px rgba(180,0,0,0.8), 0 0 35px rgba(90,0,0,0.6);
}

.partner-card img {
    width: 100%;
    max-height: 130px;
    object-fit: contain;
    margin-bottom: 10px;
    filter: brightness(0.85);
}

.partner-card h3 {
    font-size: 1.4rem;
    color: #b30000;
    margin-bottom: 10px;
}

.partner-card p {
    color: #ccc;
    font-size: 1rem;
    line-height: 1.6;
}

.partner-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 18px;
    background: #8b0000;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.3s;
}

.partner-btn:hover {
    background: #e60000;
    box-shadow: 0 0 12px rgba(255,0,0,0.7);
}

/* ============================
   Datenschutz Seite
============================ */

.datenschutz-section {
    max-width: 900px;
    margin: 50px auto;
    padding: 20px 30px;
    background: rgba(15, 15, 15, 0.7);
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.25);
}

.datenschutz-section h1 {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 20px;
    color: #e40000;
}

.datenschutz-section h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    margin-top: 30px;
    margin-bottom: 10px;
    color: #cc0000;
}

.datenschutz-section p,
.datenschutz-section ul {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #e0e0e0;
}

.datenschutz-section ul {
    margin-left: 20px;
}

.datenschutz-section li {
    margin-bottom: 6px;
}

/* =========================
   IMPRESSUM SECTION
========================= */
.impressum-section {
    max-width: 900px;
    margin: 50px auto;
    padding: 20px 30px;
    background: rgba(15, 15, 15, 0.7);
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.25);
}

.impressum-section h1,
.impressum-section h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    text-align: left;
    margin-bottom: 20px;
    color: #e40000;
}

.impressum-section p,
.impressum-section li {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 15px;
}

.impressum-section ul {
    list-style-type: disc;
    margin-left: 20px;
}

.impressum-section a {
    color: #ff0000;
    text-decoration: none;
    transition: all 0.3s ease;
}

.impressum-section a:hover {
    text-shadow: 0 0 8px #ff0000;
}

/* =========================
   RULES SECTION
========================= */
.rules-section {
    max-width: 900px;
    margin: 40px auto;
    padding: 30px;
    background-color: rgba(13, 13, 13, 0.85);
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    color: #e0e0e0;
    font-family: 'Cinzel', serif;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.25);
}

.rules-section h1,
.rules-section h2 {
    font-family: 'Cinzel', serif;
    color: #e40000;
    margin-bottom: 15px;
}

.rules-section p,
.rules-section li {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 10px;
}

.rules-section ul {
    list-style-type: disc;
    margin-left: 25px;
}



/* ========================
ANIMATIONEN
======================== */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

/* Galerie Animation */
.gallery-container img {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.7s ease forwards;
}

.gallery-container img.visible {
  animation: fadeInUp 0.7s ease forwards;
}

/* Team Animation */
.team-member {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease forwards;
}

.team-member.visible {
  animation: fadeInUp 0.8s ease forwards;
}

/* Partner Animation */
.partner-logo {
  opacity: 0;
  transform: scale(0.95);
  animation: fadeInScale 0.8s ease forwards;
}

.partner-logo.visible {
  animation: fadeInScale 0.8s ease forwards;
}



/* ============================
OVERLAY BASIS
============================ */
.overlay-container {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: black;               /* ECHT schwarz – garantiert */
  z-index: 999999;                 /* ganz oben */
  overflow: hidden;
}

/* ============================
TOR – WRAPPER
============================ */
.gate-wrapper {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;                    /* GRÖSSERES TOR */
  max-width: 95%;
  height: 80%;                     /* Höhe proportional */
  perspective: 1800px;
  z-index: 50;                     /* über Nebel */
}

/* ============================
TOR – HÄLFTEN
============================ */
.gate {
  position: absolute;
  bottom: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;               /* kein Verzerren */
  transition: transform 2.7s ease;
  z-index: 100;                    /* höchste Ebene */
}

.gate-left  { left: 0; transform-origin: left center; }
.gate-right { right: 0; transform-origin: right center; }

/* Öffnen */
.gate-open-left  { transform: rotateY(70deg); }
.gate-open-right { transform: rotateY(-70deg); }

/* ============================
NEBEL OHNE KÄSTCHEN
============================ */
.fog-layer {
  position: absolute;
  top: 0; left: 0;
  width: 200%;                     /* groß genug → keine Ränder */
  height: 200%;
  opacity: 0.28;
  filter: blur(10px);              /* KEINE Kästchen mehr */
  animation: fogMotion 45s linear infinite;
  pointer-events: none;
  z-index: 10;                     /* unter Tor */
  background-position: center;
  background-size: cover;          /* KEINE PNG-Kanten */
}
/*
.fog1 { background-image: url("Image/dichter-rauch.png"); }
.fog2 { background-image: url("Image/bodennebel.png"); opacity: 0.22; }
.fog3 { background-image: url("Image/nebelschwaden.png"); opacity: 0.16; }
.fog4 { background-image: url("Image/nebel.png"); opacity: 0.10; }
*/
/* Nebel Bewegung */
@keyframes fogMotion {
  0%   { transform: translate(-10%, -10%); }
  50%  { transform: translate(10%, -5%); }
  100% { transform: translate(-10%, -10%); }
}

/* Fade Out beim Öffnen (optional) */
.fog-layer.fadeOut {
  animation: fogFade 1.8s forwards;
}

@keyframes fogFade {
  0%   { opacity: 0.3; }
  100% { opacity: 0; }
}

/* ===== Kontakt Auswahl ===== */
.contact-choice {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 40px auto;
    flex-wrap: wrap;
}

.choice-card {
    background: rgba(20, 20, 20, 0.85);
    border: 2px solid #7a0000;
    padding: 20px 30px;
    width: 260px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 10px #300;
    transition: 0.3s ease;
    border-radius: 10px;
}

.choice-card i {
    font-size: 2.8rem;
    margin-bottom: 10px;
   
}

.choice-card h3 {
    font-family: 'Cinzel', serif;
    margin-top: 10px;
    color: #fff;
}

.choice-card:hover {
   
    transform: scale(1.05);
    box-shadow: 0 0 15px #a00;
}

/* Formulare */
.contact-form {
    display: none;
    margin-top: 30px;
}

.contact-form h2 {
    color: #b30000;
    margin-bottom: 20px;
}

/* Sichtbarkeit */
.hidden {
    display: none;
}

.visible {
    display: block;
}


/* X-Animation */
.menu-toggle.open span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.menu-toggle.open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.open span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* Mobile Menü */
@media (max-width: 900px) {


  .navbar ul {
    display: none;
    flex-direction: column;
    width: 100%;
    margin-top: 20px;
    gap: 18px;
  }

  .navbar.menu-open ul {
    display: flex;
  }

  .navbar {
    width: 100%;
    right: 0;
    border-radius: 0;
    justify-content: center;
  }
}

@media (max-width: 1024px) {
  main::before,
  main::after {
    display: none;
  }
}

/* iPad & kleiner: Titel ausblenden */
@media (max-width: 1024px) {
  .logo-title h1 {
    display: none;
  }
}

@media (max-width: 1024px) {
  header .logo {
    left: 50%;
    transform: translate(-50%, -50%);
    height: 80px;
  }
}

@media (max-width: 480px) {
  header {
    height: 130px;
  }

  header .logo {
    height: 65px;
  }
}

/* =========================
   MOBILE MODE – DESKTOP NAV AUS
========================= */
@media (max-width: 1024px) {

  /* Desktop-Navigation deaktivieren */
  .navbar:not(.menu-open) ul {
    display: none;
  }

}


@media (max-width: 1024px) {

  .navbar.menu-open {
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, #000 0%, #120000 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: mobileMenuFade 0.4s ease forwards;
  }

  .navbar.menu-open ul {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }

  .navbar.menu-open ul li a {
    font-size: 1.8rem;
    letter-spacing: 2px;
  }
}


@keyframes mobileMenuFade {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* =========================
   MOBILE HEADER CLEANUP
========================= */
@media (max-width: 480px) {

  header {
    height: 110px;
    padding: 10px 15px;
  }

  /* Nebel dezenter */
  .smoke-layer {
    opacity: 0.35;
    filter: blur(10px);
  }

  /* Logo zentrieren & kleiner */
  header .logo {
    height: 70px;
    margin: 0 auto;
  }

}

@media (max-width: 480px) {
  .social-icons {
    position: static;
    margin-top: 6px;
    justify-content: center;
    gap: 14px;
  }
}

@media (max-width: 480px) {
  header .logo {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    height: 68px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .smoke-layer {
    top: -300px;
    height: 1200px;
    opacity: 0.35;
    filter: blur(14px);
  }
}


@media (max-width: 480px) {
  main::before,
  main::after {
    display: none;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  main {
   
  }
}

/* =========================
   MOBILE NAVBAR POSITION FIX
========================= */
@media (max-width: 480px) {

  .navbar {
    bottom: -28px;          /* 🔥 schiebt Navbar unter das Logo */
    padding-top: 12px;
    padding-bottom: 8px;
  }

}

@media (max-width: 480px) {
  header {
    height: 140px;   /* vorher 110–130 */
  }
}

/* =========================
   MOBILE HEADER ABSTAND FIX
========================= */
@media (max-width: 480px) {

  header {
    margin-bottom: 40px; /* Header rückt nach unten */
  }

}
/* =========================
   iPad Pro – Header & Navbar sauber
========================= */
@media (min-width: 901px) and (max-width: 1200px) {

  header {
    height: 230px;              /* mehr Luft */
    padding-bottom: 70px;       /* Platz für Navbar */
  }

  /* Navbar bewusst nach unten */
  .navbar {
    margin-top: 25px;
  }

  /* Logo bleibt sichtbar */
  header .logo {
    top: 45%;
  }
}

/* =========================================
   FINAL FIX – HEADER / NAVBAR / MOBILE
========================================= */

/* Header trennt sich sauber vom Inhalt */
header {
  margin-bottom: 40px;
}

/* Navbar nicht mehr über main legen */
.navbar {
  position: absolute;
  margin-top: -30px;
}

/* --------------------
   MOBILE (iPhone)
-------------------- */
@media (max-width: 900px) {

  /* Navbar bleibt unter Logo */
  .navbar {
    margin-top: 10px;
  }
}

/* --------------------
   iPad Pro (hoch & quer)
-------------------- */
@media (min-width: 901px) and (max-width: 1200px) {

  /* Desktop Navbar anzeigen */
  .navbar ul {
    display: flex !important;
  }

  /* Etwas Luft */
  .navbar {
    margin-top: 10px;
  }
}

/* =================================================
   MOBILE NAVBAR & HAMBURGER – FINAL STABIL
================================================= */
@media (max-width: 900px) {

  /* Desktop-Navigation aus */
  .navbar ul {
    display: none !important;
  }

  /* ---------- Hamburger ---------- */
  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: fixed;
    top: 110px;          /* dein Wunsch */
    right: 18px;

    width: 42px;
    height: 42px;
    cursor: pointer;

    z-index: 100000;
  }

  .menu-toggle span {
    width: 32px;
    height: 3px;
    margin: 5px 0;
    border-radius: 2px;

    background: linear-gradient(90deg, #b30000, #ff4d4d);
    box-shadow: 0 0 6px rgba(255,0,0,0.6);

    transition: all 0.35s ease;
  }

  /* ---------- Overlay-Menü ---------- */
  .navbar.menu-open {
    position: fixed;
    inset: 0;

    background: rgba(0,0,0,0.96);
    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 99999;
  }

  .navbar.menu-open ul {
    display: flex !important;
    flex-direction: column;
    gap: 28px;
  }

  .navbar.menu-open ul li a {
    font-size: 1.8rem;
    letter-spacing: 2px;
  }

  /* ---------- Hamburger → X ---------- */
  .menu-toggle.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .menu-toggle.open span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* ---------- X IM OVERLAY ---------- */
  .navbar.menu-open .menu-toggle {
    position: fixed;
    top: 24px;
    right: 18px; /* sicher IM Viewport */
    z-index: 100001;
  }
}

/* Extra Schutz */
@media (max-width: 480px) {
  html, body {
    width: 100%;
    overflow-x: hidden;
  }
}
@media (max-width: 480px) {
  .smoke-layer {
    top: -250px;
    height: 1400px;
  }
}

/* ================= COOKIE DESIGN ================= */

.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 0, 0, 0.95);
  border: 2px solid #8a1c1c;
  box-shadow: 0 0 20px rgba(255,0,0,0.4);
  padding: 16px 20px;
  z-index: 99999;
  color: #fff;
  font-family: 'Cinzel', serif;
  max-width: 90%;
  display: none;
}

.cookie-buttons {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.cookie-banner button {
  background: #8a1c1c;
  color: #fff;
  border: none;
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 6px;
}

.cookie-banner button:hover {
  background: #b32626;
}

/* ================= SETTINGS MODAL ================= */

.cookie-settings {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 100000;
}

.cookie-box {
  background: #140000;
  border: 2px solid #8a1c1c;
  padding: 25px;
  width: 320px;
  color: #fff;
  box-shadow: 0 0 25px rgba(255,0,0,0.4);
}

.cookie-box h2 {
  margin-top: 0;
  text-align: center;
  color: #cdaa7d;
}

.cookie-option {
  display: block;
  margin: 12px 0;
}

.cookie-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.cookie-actions button {
  background: #8a1c1c;
  border: none;
  color: #fff;
  padding: 8px 14px;
  cursor: pointer;
}

.cookie-actions .secondary {
  background: #333;
}

.cookie-settings {
  pointer-events: auto;
}

.cookie-settings * {
  pointer-events: auto;
}