:root{
  --bg: #ffffff;
  --text: #111;
  --accent: #2b6cb0;
  font-family: system-ui, Arial, sans-serif;
}

/* Base */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
}

/* Sticky Navigation */
.sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #850604;
  padding: 12px 0;
  z-index: 50;
}
.sticky-nav ul {
  display: flex;
  justify-content: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sticky-nav a {
  color: white;
  text-decoration: none;
  font-weight: 700;
}

/* Layout */
.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
  padding: 100px 24px 40px;
}

/* Footer */
.main-footer {
  background: #7d1a06;
  color: white;
  padding: 28px 16px;
}
.footer-inner {
  max-width: 1200px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
/* FOOTER */
.main-footer {
  background: #7d1a06;
  color: white;
  padding: 28px 16px;
}

.footer-inner {
  max-width: 1200px;
  margin: auto;
  display: flex;
  flex-direction: column;   /* WICHTIG: Text kommt unter die Logos */
  align-items: center;
  gap: 20px;
}

/* Sponsor-Reihe */
.sponsors {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 8px 6px;
  width: 100%;
}

/* Sponsor-Link */
.sponsor-link {
  display: inline-block;
  text-decoration: none;
  flex: 0 0 auto;
}

/* Sponsor-Box */
.sponsor {
  width: 110px;
  height: 64px;
  background: #ffd9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Sponsor-Logo */
.sponsor img {
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  display: block;
}

/* Hover-Effekt */
.sponsor:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

/* Footer-Text */
.footer-text {
  text-align: center;
  color: white;
  line-height: 1.3;
}



/* Footer logo */
.logo-center .logo-sponsor {
  width: 110px;
  height: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo-center .logo-sponsor img {
  width: 84%;
  height: 84%;
  object-fit: contain;
}

/* ===================== INTRO ===================== */

#intro-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(125,26,6,0.98), rgba(125,26,6,0.95));
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

body.intro-active {
  overflow: hidden;
}

/* Stage centered */
.intro-stage {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  width: 100%;
  max-width: 1400px;
  gap: 40px;
  padding: 0 40px;
}

/* Crescents */
.crescents {
  display: flex;
  gap: 36px;
  max-width: 560px;
  height: 260px;
}
.cres {
  width: 180px;
  height: 180px;
  opacity: 0;
}

/* Logo */
.center-logo {
  grid-column: 2;
  justify-self: center;
  align-self: center;
  pointer-events: none;
}
#intro-logo {
  width: 220px;
  height: 220px;
  opacity: 0;
  object-fit: contain;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,0.35));
}

/* Animations */
@keyframes cres-in-left {
  0% { opacity: 0; transform: translateX(-260%) scale(0.95); }
  55% { opacity: 1; transform: translateX(8%) scale(1.02); }
  100% { opacity: 0; transform: translateX(0) scale(1); }
}
@keyframes cres-in-right {
  0% { opacity: 0; transform: translateX(260%) scale(0.95); }
  55% { opacity: 1; transform: translateX(-8%) scale(1.02); }
  100% { opacity: 0; transform: translateX(0) scale(1); }
}
@keyframes logo-pop {
  0% { opacity: 0; transform: scale(0.72); }
  60% { opacity: 1; transform: scale(1.14); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes logo-pulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.04); }
  60% { transform: scale(0.99); }
  100% { transform: scale(1); }
}
@keyframes overlay-fade {
  0% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

/* Apply animations */
.crescents.left .cres:nth-child(1) { animation: cres-in-left 2s ease 0s both; }
.crescents.left .cres:nth-child(2) { animation: cres-in-left 2s ease 0.08s both; }
.crescents.left .cres:nth-child(3) { animation: cres-in-left 2s ease 0.16s both; }

.crescents.right .cres:nth-child(1) { animation: cres-in-right 2s ease 0.04s both; }
.crescents.right .cres:nth-child(2) { animation: cres-in-right 2s ease 0.12s both; }
.crescents.right .cres:nth-child(3) { animation: cres-in-right 2s ease 0.20s both; }

#intro-logo {
  animation:
    logo-pop 1.2s ease 0.6s both,
    logo-pulse 1.8s ease-in-out 1.9s 3 both;
}

#intro-overlay.fade-out {
  animation: overlay-fade 0.4s linear forwards;
}

/* Responsive */
@media (max-width:720px) {
  .cres { width:140px; height:140px; }
  #intro-logo { width:160px; height:160px; }
  .intro-stage { padding:0 20px; gap:12px; }
  .crescents { max-width:420px; gap:18px; height:180px; }
}
@media (max-width:520px) {
  .cres { width:110px; height:110px; }
  #intro-logo { width:120px; height:120px; }
  .crescents { max-width:320px; gap:12px; height:140px; }
}
.aktuelles-container {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding: 40px 20px;
}

.beitrag {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.beitrag img {
  width: 320px;
  border-radius: 10px;
  object-fit: cover;
}

.beitrag-text {
  max-width: 600px;
}

.beitrag-text h2 {
  margin: 0;
  font-size: 1.8em;
  color: #850604;
}

.beitrag-text p {
  margin: 10px 0;
  line-height: 1.6;
}
.aktuelles-container {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding: 40px 20px;
}

.beitrag {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.beitrag img {
  width: 320px;
  border-radius: 10px;
  object-fit: cover;
}

.beitrag-text {
  max-width: 600px;
}

.beitrag-text h2 {
  margin: 0;
  font-size: 1.8em;
  color: #850604;
}

.beitrag-text p {
  margin: 10px 0;
  line-height: 1.6;
}

/* ---------------------------
   Grundlegende Reset + Typo
   --------------------------- */
:root{
  --bg:#ffffff;
  --muted:#6b6b6b;
  --accent:#0b76c2;
  --card:#fff9ea; /* creme für Team / Karten */
  --shadow: 0 10px 30px rgba(20,20,30,0.08);
  --radius:12px;
  --max-width:1100px;
  --page-padding:20px;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  background:#f6f6f7;
  color:#222;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* ---------------------------
   Page wrapper / container
   --------------------------- */
.page-wrapper{max-width:var(--max-width);margin:0 auto;padding:0 var(--page-padding);}

/* ---------------------------
   Intro Overlay (full screen)
   --------------------------- */
.intro-overlay{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.65));
  z-index:9998;
}
.intro-stage{display:flex;align-items:center;gap:28px;max-width:900px;padding:28px}
.center-logo img{width:160px;height:auto;display:block}
.crescents .cres{width:64px;height:64px;opacity:.9}

/* small helper to hide overlay when JS removes it */
.intro-overlay[aria-hidden="true"]{display:none}

/* ---------------------------
   Sticky Navigation
   --------------------------- */
.sticky-nav{
  position:fixed;top:0;left:0;right:0;background:rgba(255,255,255,0.98);
  border-bottom:1px solid rgba(20,20,30,0.04);backdrop-filter: blur(4px);
  z-index:9997;
}
.sticky-nav ul{list-style:none;margin:0;padding:12px 24px;display:flex;gap:18px;align-items:center;justify-content:center}
.sticky-nav a{color:#222;text-decoration:none;font-weight:600;padding:8px 10px;border-radius:8px}
.sticky-nav a:hover{background:rgba(11,118,194,0.06);color:var(--accent)}
.sticky-nav a.active{background:rgba(11,118,194,0.10);color:var(--accent)}
.sticky-nav ul li a.disabled{color:#999 !important;pointer-events:none;cursor:default;font-weight:700}

/* spacer so content isn't hidden under nav */
.page-wrapper > main{padding-top:18px}

/* ---------------------------
   Hero (Home)
   --------------------------- */
.home-hero{ text-align:center;padding:48px 12px 18px }
.page-title{font-size:44px;margin:0;color:#111;letter-spacing:-0.02em}
.lead{margin-top:10px;color:#333;font-size:18px;max-width:900px;margin-left:auto;margin-right:auto;font-weight:500}

/* ---------------------------
   Flyer Hero (grid)
   --------------------------- */
.flyer-hero{padding:18px 0 36px}
.flyer-inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--page-padding)}
.flyer-title{margin:0 0 12px;font-size:20px;color:#111;text-align:center}
.flyer-grid{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start}
.flyer-figure{margin:0}
.flyer-image{width:100%;height:auto;border-radius:10px;box-shadow:var(--shadow);display:block}
.flyer-side{display:flex;flex-direction:column;gap:12px;align-items:center}
.flyer-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;border:0;background:#efefef;color:#111;text-decoration:none;cursor:pointer;font-weight:700}
.btn.primary{background:var(--accent);color:#fff}
.btn.outline{background:transparent;border:1px solid rgba(11,118,194,0.12);color:var(--accent)}

/* Countdown */
.countdown{display:flex;gap:10px;justify-content:center;margin-top:8px}
.count-item{background:#111;color:#fff;padding:10px 12px;border-radius:8px;min-width:72px;text-align:center}
.count-item span{display:block;font-size:20px;font-weight:800}
.count-item small{display:block;font-size:12px;color:#ddd;margin-top:6px}
.flyer-note{font-size:14px;color:var(--muted);text-align:center;margin-top:8px}

/* ---------------------------
   CTA / Teaser sections
   --------------------------- */
.home-cta{background:linear-gradient(180deg,#fff,#fbfbfb);padding:18px;border-radius:12px;margin:18px 0;box-shadow:var(--shadow)}
.cta-inner{display:flex;gap:18px;align-items:center;justify-content:space-between;max-width:var(--max-width);margin:0 auto;padding:0 var(--page-padding)}
.cta-text{margin:0;font-size:16px;color:#222}
.cta-actions{display:flex;gap:12px}

/* teaser team */
.teaser-team{margin:22px 0;padding:18px;border-radius:12px;background:#fff;box-shadow:var(--shadow);text-align:center}
.teaser-lead{color:var(--muted);margin:8px 0 12px}

/* ---------------------------
   Sponsor row (footer area)
   --------------------------- */
.sponsor-row{padding:18px 0}
.sponsor-inner{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap}
.sponsor-inner img{height:44px;object-fit:contain;display:block;opacity:0.95}
.logo-center img{height:56px}

/* ---------------------------
   Modal (Flyer)
   --------------------------- */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);z-index:10000}
.modal-inner{position:relative;max-width:1100px;width:94%;padding:18px}
.modal-image{width:100%;height:auto;border-radius:10px;box-shadow:0 30px 60px rgba(0,0,0,0.5)}
.modal-close{position:absolute;top:-12px;right:-12px;background:#fff;border-radius:50%;border:0;padding:8px 10px;cursor:pointer;font-weight:700}

/* ---------------------------
   Footer
   --------------------------- */
.main-footer{margin-top:28px;background:transparent;padding:18px 0}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--page-padding);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.footer-text p{margin:4px 0;color:#666;font-size:14px}
.admin-link{color:rgba(0,0,0,0.6);text-decoration:none;font-size:13px}

/* ---------------------------
   Utility / Cards (Team, Sponsors, Posts)
   --------------------------- */
.card{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,0.04)}
.team-card{background:var(--card);color:#111;border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.team-avatar{width:72px;height:72px;border-radius:50%;overflow:hidden;border:2px solid rgba(0,0,0,0.06)}
.team-avatar img{width:100%;height:100%;object-fit:cover}

/* ---------------------------
   Responsive
   --------------------------- */
@media (max-width:1000px){
  .flyer-grid{grid-template-columns:1fr 320px}
}
@media (max-width:820px){
  .flyer-grid{grid-template-columns:1fr}
  .flyer-side{align-items:center}
  .cta-inner{flex-direction:column;gap:12px}
}
@media (max-width:600px){
  .page-title{font-size:32px}
  .lead{font-size:15px}
  .count-item{min-width:60px;padding:8px 10px}
  .sponsor-inner img{height:36px}
  .logo-center img{height:44px}
}

/* ---------------------------
   Accessibility helpers
   --------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}