/* ---------------------------
   BASE / GLOBAL
   --------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:#f7f7f7;
  color:#222;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Links & buttons */
a{color:inherit}
.btn{display:inline-block;padding:10px 18px;border-radius:10px;font-weight:600;transition:all .18s ease;text-align:center}
.btn-red{background:#850604;color:#fff;border:0}
.btn-red:hover{background:#a30a07}
.btn-outline{background:transparent;color:#850604;border:2px solid #850604}

/* ---------------------------
   HEADER — STYLES
   --------------------------- */

/* Optional: Google Font import (füge oben in styles.css ein) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.site-header {
  background: #850604;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Logo */
.logo img {
  height: 48px;
  display: block;
}

/* Navigation base (mobile first) */
.nav {
  display: none;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  width: 100%;
}

.nav a {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 8px 0;
  text-decoration: none;        /* entfernt Unterstreichung */
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease, transform .12s ease;
}

/* subtle hover/focus */
.nav a:hover,
.nav a:focus {
  color: #ffd9c7;
  border-bottom-color: rgba(255,217,199,0.12);
  transform: translateY(-1px);
  outline: none;
}

/* Desktop: horizontal centered menu */
@media (min-width: 900px) {
  .nav {
    display: flex !important;
    flex-direction: row;
    gap: 28px;
    width: auto;
    justify-content: center;
    align-items: center;
  }

  /* center nav visually between logo and right area */
  .header-inner {
    justify-content: space-between;
  }

  /* make links slightly larger on desktop */
  .nav a {
    font-size: 1rem;
    padding: 6px 4px;
  }
}

/* Burger button */
.burger {
  background: none;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  padding: 6px;
}

.burger span {
  width: 28px;
  height: 3px;
  background: #fff;
  border-radius: 3px;
  transition: transform .18s ease, opacity .18s ease;
}

/* Optional: active state for burger (toggle class .open on button) */
.burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Accessibility: focus ring for keyboard users */
.nav a:focus-visible {
  outline: 3px solid rgba(255,217,199,0.18);
  outline-offset: 4px;
  border-radius: 6px;
}

/* small screens: keep nav full width when opened */
@media (max-width: 899px) {
  .nav[style*="display: flex"] {
    display: flex !important;
    background: #850604;
    padding: 10px 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 64px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  }
}


/* ---------------------------
   INTRO
   --------------------------- */
.intro{padding:36px 16px 8px;text-align:center}
.intro-logo{width:180px;max-width:40vw}

/* ---------------------------
   COUNTDOWN
   --------------------------- */
.countdown-section{padding:18px 16px;text-align:center}
.countdown{font-weight:700;font-size:1.4rem;margin-top:8px}

/* ---------------------------
   FLYER
   --------------------------- */
.flyer-section{text-align:center;padding:18px 16px}
.flyer-img{width:92%;max-width:460px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.12);display:block;margin:0 auto}
.flyer-actions{margin-top:12px}

/* ---------------------------
   EVENT INFOS
   --------------------------- */
.event-infos{padding:28px 16px}
.event-box{max-width:560px;margin:0 auto;background:#fff;padding:22px;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,0.06);text-align:center}
.event-box p{margin:8px 0}

/* Buttons inside event */
.event-buttons{margin-top:14px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* FOOTER */
.site-footer {
  background: #7d1a06;
  color: #fff;
  padding: 40px 16px;
  margin-top: 40px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* Titel */
.site-footer h3 {
  margin-bottom: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* Sponsor Grid */
.footer-sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 16px;
  align-items: center;
  justify-items: center;
  margin-bottom: 18px;
}

/* Sponsor Card (hellere Variante) */
.sponsor-card {
  background: rgba(255, 255, 255, 0.22);
  padding: 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  transition: background 0.18s ease, transform 0.12s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.sponsor-card:hover {
  background: rgba(255, 255, 255, 0.30);
  transform: translateY(-4px);
}

/* Sponsor Image */
.sponsor-card img {
  height: 42px;
  max-width: 100%;
  object-fit: contain;
  filter: none;
}

/* Admin link + Copyright */
.admin-link {
  margin-top: 8px;
  margin-bottom: 8px;
}

.admin-link a {
  color: #ffd9c7;
  font-weight: 600;
  text-decoration: none;
}

.admin-link a:hover {
  color: #fff;
  text-decoration: underline;
}

.site-footer p {
  opacity: 0.95;
  font-size: 0.95rem;
}

/* Responsive tweaks */
@media (max-width: 420px) {
  .sponsor-card { min-height: 56px; padding: 10px; }
  .sponsor-card img { height: 36px; }
  .site-footer { padding: 28px 12px; }
}

/* ---------------------------
   RESPONSIVE TWEAKS
   --------------------------- */
@media(max-width:420px){
  .intro-logo{width:140px}
  .event-box{padding:16px}
  .sponsor-card{min-height:56px}
}
/* --- Index specific tweaks --- */

/* Entferne Unterstreichungen für alle Aktions‑Links / Buttons auf der Startseite */
.flyer-section a,
.event-buttons a,
.flyer-actions a,
.btn,
.btn-red,
.btn-outline {
  text-decoration: none;
  color: inherit;
}

/* Falls Browser standardmäßig link‑unterstreichungen erzwingt */
.flyer-section a:hover,
.event-buttons a:hover,
.btn:hover,
.btn-red:hover,
.btn-outline:hover {
  text-decoration: none;
}

/* Aufführungen zentrieren */
.event-infos h2,
.event-infos h2 * {
  text-align: center;
}

/* Optional: kleine visuelle Feinheit für die Buttons im Event‑Bereich */
.event-buttons a.btn {
  box-shadow: 0 4px 10px rgba(133,6,4,0.12);
}
/* Buttons und Aktionslinks: weiße Schrift für bessere Lesbarkeit */
.flyer-section a,
.flyer-actions a,
.event-buttons a,
.btn,
.btn-red,
.btn-outline {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Outline‑Button: weiße Umrandung statt roter, bleibt transparent */
.btn-outline {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.95);
  color: #ffffff !important;
}

/* Hoverzustände: leichte Aufhellung / Invert für bessere Rückmeldung */
.btn-red:hover {
  background: #a30a07;
  color: #fff;
}

.btn-outline:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

/* Falls Links innerhalb von Buttons trotzdem unterstrichen erscheinen */
.flyer-section a:hover,
.event-buttons a:hover {
  text-decoration: none !important;
}
/* Keep the "Unser Team" link black (robust selector) */
a[href$="unser-team.php"] {
  color: #000000 !important;
  background: transparent !important;
  font-weight: 700;
  text-decoration: none !important;
}

/* Ensure and event buttons don't override it */
.event-buttons a[href$="unser-team.php"] {
  color: #000000 !important;
}

/* Hover/focus state for accessibility */
a[href$="unser-team.php"]:hover,
a[href$="unser-team.php"]:focus {
  color: #111111 !important;
  text-decoration: none !important;
  outline: 3px solid rgba(0,0,0,0.06);
  outline-offset: 4px;
}
/* Unser Team als Button (Fallback ohne HTML-Änderung) */
a[href$="unser-team.php"] {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 10px;
  background: #850604;
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(133,6,4,0.12);
  transition: background .15s ease, transform .12s ease;
}

/* Hover / Fokus */
a[href$="unser-team.php"]:hover,
a[href$="unser-team.php"]:focus {
  background: #a30a07;
  transform: translateY(-2px);
  outline: none;
}

/* Wenn der Link im Header (nav) sitzt, sorgt diese Regel für korrekte Ausrichtung */
.header-inner a[href$="unser-team.php"] {
  margin-left: 6px;
  margin-right: 6px;
}
/* TEAM PAGE */
.page-hero {
  background: linear-gradient(180deg, rgba(133,6,4,0.06), rgba(0,0,0,0));
  padding: 36px 16px;
  text-align: center;
}

.page-hero h1 {
  font-size: 2rem;
  margin-bottom: 8px;
  color: #1b1b1b;
}

.page-hero .lead {
  color: #444;
  max-width: 760px;
  margin: 0 auto;
  font-size: 1rem;
}

/* Team Grid */
.team-grid-section { padding: 28px 16px 48px; }
.team-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

/* Team Card */
.team-card {
  background: #fff;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .12s ease, box-shadow .12s ease;
}

.team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.10);
}

/* Avatar (rund) */
.team-avatar {
  width: 110px;
  height: 110px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.03), rgba(255,255,255,0.02));
}

.team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Meta */
.team-name {
  font-size: 1.05rem;
  margin: 6px 0 4px;
  color: #111;
}

.team-role {
  font-size: 0.95rem;
  color: #850604;
  font-weight: 700;
  margin-bottom: 8px;
}

.team-bio {
  font-size: 0.92rem;
  color: #555;
  line-height: 1.35;
  max-width: 260px;
}

/* Responsive tweaks */
@media (max-width: 420px) {
  .team-avatar { width: 92px; height: 92px; }
  .team-bio { max-width: 220px; font-size: 0.9rem; }
}
/* TEAM PAGE */
.page-hero {
  background: linear-gradient(180deg, rgba(133,6,4,0.04), rgba(0,0,0,0));
  padding: 36px 16px;
  text-align: center;
}

.page-hero h1 {
  font-size: 2rem;
  margin-bottom: 8px;
  color: #111;
}

.page-hero .lead {
  color: #444;
  max-width: 760px;
  margin: 0 auto;
  font-size: 1rem;
}

/* Team Grid: Desktop 3x2, Tablet 2, Mobile 1 */
.team-grid-section { padding: 28px 16px 48px; }
.team-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
}

/* Desktop: 3 columns */
@media (min-width: 1000px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Tablet: 2 columns */
@media (min-width: 640px) and (max-width: 999px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Team Card */
.team-card {
  background: #fff;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .12s ease, box-shadow .12s ease;
}

.team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.10);
}

/* Avatar (rund) */
.team-avatar {
  width: 120px;
  height: 120px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0.03), rgba(255,255,255,0.02));
  border: 2px solid rgba(0,0,0,0.03);
}

.team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Meta */
.team-name {
  font-size: 1.05rem;
  margin: 6px 0 4px;
  color: #111;
}

.team-role {
  font-size: 0.95rem;
  color: #850604;
  font-weight: 700;
  margin-bottom: 10px;
}

/* Quote */
.team-quote {
  font-style: italic;
  color: #444;
  font-size: 0.92rem;
  margin: 8px 0 0;
  max-width: 260px;
  line-height: 1.35;
}

/* ---------------------------
   TEAM GRID RESPONSIVE (klarere Breakpoints)
   --------------------------- */
/* Mobile: 1 Spalte */
.team-grid {
  grid-template-columns: repeat(1, 1fr);
}

/* Tablet: 2 Spalten */
@media (min-width: 640px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop: 3 Spalten */
@media (min-width: 1000px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Kleine Abstände auf sehr kleinen Bildschirmen */
@media (max-width: 420px) {
  .team-grid { gap: 14px; }
  .team-card { padding: 14px; }
  .team-avatar { width: 96px; height: 96px; }
}

/* ---------------------------
   HELPERS BOX (harmonisiert mit Team Cards)
   --------------------------- */
.helpers-box {
  max-width: 1000px;
  margin: 18px auto 36px;
  background: #ffffff; /* gleiche Basis wie Team Cards */
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08); /* etwas leichter als vorher */
  text-align: left;
  border: 1px solid rgba(0,0,0,0.04);
}

/* Titel / Intro in der Helferbox */
.helpers-box h2 {
  margin: 0 0 10px;
  color: #111;
  font-size: 1.15rem;
}

.helpers-intro {
  color: #444;
  margin-bottom: 12px;
  line-height: 1.45;
}

/* Helfer Liste: dezente Kärtchen, harmonisch zu Team Cards */
.helpers-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 10px;
}

@media (min-width: 700px) {
  .helpers-list { grid-template-columns: repeat(2, 1fr); }
}

.helpers-list li {
  background: #fafafa;
  color: #222;
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.03);
}

/* Mobile: Helferbox zentriert und kompakter */
@media (max-width: 520px) {
  .helpers-box {
    padding: 14px;
    margin: 14px 12px 28px;
    text-align: center;
  }
  .helpers-box h2 { text-align: center; }
  .helpers-intro { text-align: center; }
  .helpers-list li { text-align: center; }
}

/* ---------------------------
   TEAM QUOTE (dunkler, weniger "glow")
   --------------------------- */
.team-quote {
  color: #333; /* dunkler, besser lesbar */
  background: rgba(0,0,0,0.03); /* sehr dezenter Hintergrund, harmonisch zu Team Card */
  padding: 8px 12px;
  border-radius: 8px;
  display: inline-block;
  margin-top: 10px;
  font-style: italic;
  line-height: 1.35;
  max-width: 100%;
}

/* Optional: kleine Animation beim Hover (dezent) */
.team-card:hover .team-quote {
  transform: translateY(-2px);
  transition: transform .12s ease;
}
/* ---------------------------
   UNSERE GESCHICHTE – STYLE
   (angepasst an Team-Seite)
   --------------------------- */

.geschichte-page {
  padding: 30px 16px 50px;
}

/* Hero wie bei Team */
.page-hero {
  background: linear-gradient(180deg, rgba(133,6,4,0.06), rgba(0,0,0,0));
  padding: 36px 16px;
  text-align: center;
}

.page-hero h1 {
  font-size: 2rem;
  margin-bottom: 8px;
  color: #1b1b1b;
}

.page-hero .lead {
  color: #444;
  max-width: 760px;
  margin: 0 auto;
  font-size: 1rem;
}

/* Hauptbereich */
.geschichte-section {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Boxen wie Team Cards */
.geschichte-card {
  background: #fff;
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  text-align: center;
}

.geschichte-card p {
  font-size: 1rem;
  line-height: 1.55;
  color: #333;
}

/* Bild */
.geschichte-image img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
  display: block;
}

/* Titel im Text */
.geschichte-question {
  font-size: 1.4rem;
  margin: 14px 0 6px;
  color: #850604;
  font-weight: 700;
}

.geschichte-title {
  font-size: 1.6rem;
  margin: 14px 0 6px;
  color: #850604;
  font-weight: 700;
}

/* Mobile */
@media (max-width: 480px) {
  .geschichte-card { padding: 18px; }
  .geschichte-card p { font-size: 0.95rem; }
  .geschichte-question,
  .geschichte-title { font-size: 1.3rem; }
}
/* ---------------------------
   SPONSOREN SEITE – FINAL FIX
   --------------------------- */

.sponsoren-page .sponsoren-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px 50px;
}

/* GRID BASIS */
.sponsoren-page .sponsoren-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 32px;
}

/* Tablet: 2 Spalten */
@media (min-width: 640px) {
  .sponsoren-page .sponsoren-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 3 oben, 3 unten */
@media (min-width: 1000px) {
  .sponsoren-page .sponsoren-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* DANKESBOX (5. Element) in die Mitte */
  .sponsoren-page .sponsor-card:nth-child(5) {
    grid-column: 2;
  }
}

/* ---------------------------
   SPONSOR CARD – Aufbau
   --------------------------- */

.sponsoren-page .sponsor-card {
  background: #fff;
  border-radius: 12px;
  padding: 32px 26px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  text-align: center;
  transition: transform .12s ease, box-shadow .12s ease;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.sponsoren-page .sponsor-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.10);
}

/* LOGO – gross und dominant */
.sponsoren-page .sponsor-logo img {
  width: 180px;
  height: 180px;
  object-fit: contain;
}

/* TITEL */
.sponsoren-page .sponsor-name {
  font-size: 1.35rem;
  margin: 0;
  color: #111;
  font-weight: 700;
}

/* BESCHREIBUNG */
.sponsoren-page .sponsor-text {
  color: #444;
  font-size: 1rem;
  line-height: 1.55;
  max-width: 90%;
}

/* BUTTON */
.sponsoren-page .sponsor-btn {
  margin-top: 4px;
  display: inline-block;
}

/* DANKESBOX – ohne Logo */
.sponsoren-page .danke-card {
  padding-top: 40px;
  padding-bottom: 40px;
}
/* ---------------------------
   KONTAKT – FORMULAR CARD
   --------------------------- */

.kontakt-section {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

.kontakt-form {
  background: #fff;
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kontakt-form label {
  font-weight: 600;
  color: #222;
  margin-bottom: -6px;
}

.kontakt-form input,
.kontakt-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color .15s ease;
}

.kontakt-form input:focus,
.kontakt-form textarea:focus {
  border-color: #850604;
  outline: none;
}

.kontakt-form button {
  margin-top: 10px;
  align-self: flex-start;
}