:root {
  --brand-orange:#f37c1d;
  --bg:#fafafa;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --shadow:0 6px 20px rgba(16,24,40,0.08);
  --container:1100px;
  --header-height: 0px; /* dynamisch gesetzt via JS */
}

html[data-theme='dark'] {
  --bg:#0f0f10;
  --card:#1b1b1d;
  --text:#f5f5f7;
  --muted:#9ca3af;
  --shadow:0 6px 16px rgba(0,0,0,0.6);
}

* { box-sizing:border-box; transition: background .3s, color .3s; }
body {
  margin:0;
  font-family:"Inter",system-ui,-apple-system;
  background:var(--bg);
  color:var(--text);
}

/* Header */
header {
  position: fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  border-radius:12px;
  margin:0;
  padding:10px 16px;
  box-shadow: var(--shadow);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}
html[data-theme='dark'] header { background: rgba(27,27,29,0.9); }

/* Main Content */
main.wrap {
  max-width: var(--container);
  margin:0 auto;
  padding: calc(var(--header-height) + 28px) 28px 28px 28px;
}

/* Sections Anker-Links berücksichtigen Header-Höhe */
section[id] {
  scroll-margin-top: var(--header-height);
}

/* Footer */
footer {
  text-align:center;
  color:var(--muted);
  margin-top:40px;
  padding:20px 0;
}

/* Branding */
.brand {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.brand .logo {
  height:150px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-weight:700;
  font-size:1.2rem;
}
.brand small { font-size:.8rem; color:var(--muted); }

/* Dark Mode Switch */
.theme-switch { position: relative; display: inline-block; width: 54px; height: 28px; margin-top: 0; }
.theme-switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #f37c1d;
  border-radius: 28px; transition: background-color .3s;
}
.slider::before {
  content: ""; position: absolute;
  height: 22px; width: 22px; left: 3px; bottom: 3px;
  background-color: #fff; border-radius: 50%;
  transition: transform .3s;
}
.icon { position: absolute; top: 50%; transform: translateY(-50%); font-size: 0.85rem; transition: opacity .3s; }
.icon.sun { left: 5px; color: #fff; opacity: 1; }
.icon.moon { right: 5px; color: #fff; opacity: 0; }
input:checked + .slider { background-color: #555; }
input:checked + .slider::before { transform: translateX(26px); }
input:checked + .slider .sun { opacity: 0; }
input:checked + .slider .moon { opacity: 1; }

/* Menü Button */
.burger {
  width:30px; height:22px; position:fixed; cursor:pointer;
  display:flex; flex-direction:column; justify-content:space-between;
  top:18px; right:20px;
  z-index:999;
}
.burger span {
  height:3px; width:100%; background:var(--brand-orange);
  border-radius:2px; transition:all .3s ease;
}
html[data-theme='dark'] .burger span { background:#fff; }
.burger.active span:nth-child(1){transform:translateY(9px) rotate(45deg);}
.burger.active span:nth-child(2){opacity:0;}
.burger.active span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}

/* Overlay */
.overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
  z-index:150;
}
.overlay.show { opacity: 1; pointer-events: all; }

/* Seitenmenü */
.side-menu {
  position: fixed;
  top: 0; right: -280px;
  width: 240px; height: 100%;
  background: var(--card);
  box-shadow: -4px 0 10px rgba(0,0,0,0.1);
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: right .3s ease;
  z-index:200;
  height: 100vh;
  overflow-y: scroll;              /* Scrollbar immer aktiv */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.side-menu.open { right: 0; }

.side-menu a {
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: 1rem;
  padding: 8px 0;
}
.side-menu a.cta {
  background: var(--brand-orange); color: #fff;
  border-radius: 10px; text-align: center; padding: 10px 0;
}

/* Galerie */
#galerie { margin-top:40px; }
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px;
}
.gallery-item {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Abstand zwischen Bild und Text */
}

.gallery-item img {
  width: 100%;
  border-radius: 16px;
  box-shadow: var(--shadow);
  border: 2px solid #ffffff;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
}

.gallery-item p {
  margin: 0;
  font-size: 0.9rem;
  text-align: center;
  color: var(--text);
}

/* Lightbox Overlay */
.lightbox {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 1000;
  padding: 20px;
}

.lightbox-img {
  max-width: 90%;
  max-height: 80%;
  border-radius: 12px;
  margin-bottom: 12px;
}

.lightbox-text {
  color: #fff;
  font-size: 1rem;
  text-align: center;
}

.lightbox .close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
}

/* Registrierung Overlay */
#registration-overlay {
  display: none;
  position: fixed;
  top:0; left:0; width:100%; height:100%;
  background: rgba(234, 195, 96, 0.75);
  z-index:1000;
  justify-content:center;
  align-items:center;
  padding:20px;
}
#registration-overlay iframe {
  width: 90%;
  height: 90%;
  border: none;
  border-radius:12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
#registration-overlay .close {
  position:absolute;
  top:20px; right:30px;
  font-size:2rem;
  color:#fff;
  cursor:pointer;
}

/* Globale CTA-Buttons/Links */
a.cta, button.cta {
  display: inline-block;          /* damit Padding wirkt */
  background: var(--brand-orange);
  color: #fff;
  border-radius: 10px;
  text-align: center;
  padding: 10px 24px;             /* oben/unten 10px, links/rechts 24px */
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  border: none;                   /* entfernt die schwarze Border */
  box-shadow: var(--shadow);      /* optional: leichter Schatten wie im Menü */
  transition: background .3s ease, transform .2s ease;
}

a.cta:hover, button.cta:hover {
  background: #e66a00;            /* leicht dunkler beim Hover */
  transform: translateY(-1px);    /* kleiner Hover-Effekt */
}


/* FAQ Container für Accordions mittig */
.faq-container {
  display: flex;
  flex-direction: column;
  align-items: center;   /* Zentriert alle Accordions */
  gap: 16px;
}

/* Accordion Buttons */
.faq-question {
  background: var(--brand-orange);
  color: #fff;
  border: none;
  border-radius: 12px;
  text-align: left;       /* Text linksbündig innerhalb Button */
  padding: 14px 24px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  width: 100%;            /* Optional: volle Breite bis max-Width */
  max-width: 700px;       /* Breite begrenzen für mittige Darstellung */
  box-shadow: var(--shadow);
  transition: background 0.3s, transform 0.2s;
}

.faq-question:hover {
  background: #e66f10;
  transform: translateY(-1px);
}

/* Accordion Antworten */
.faq-answer {
  display: none;
  background: var(--card);
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.5;
  width: 100%;
  max-width: 700px;      /* gleiche Breite wie Button */
}