:root{
  --green-dark:#2E5635;
  --green:#3D7B48;
  --bg:#F7F7F7;
  --text:#222;
}

body{
  background:var(--bg);
  color:var(--text);
}

/* Navbar */
.navbar{
  background:var(--green-dark)!important;
}

.navbar-brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.navbar-brand img{
  height:42px;
  width:auto;
}

@media (max-width:576px){
  .navbar-brand img{ height:36px; }
}

/* Buttons */
.btn-fsv{
  background:var(--green);
  border-color:var(--green);
  color:#fff;
}

.btn-fsv:hover{
  background:var(--green-dark);
  border-color:var(--green-dark);
  color:#fff;
}

/* Hero */
.hero{
  background:linear-gradient(135deg, var(--green-dark), var(--green));
  color:#fff;
  padding:72px 0;
}

.hero-badge{
  display:inline-block;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  padding:6px 12px;
  border-radius:999px;
  font-size:.95rem;
}

.hero-logo{
  max-width:140px;
  margin-bottom:16px;
}

@media (max-width:576px){
  .hero-logo{ max-width:110px; }
}

/* Section titles */
.section-title{
  margin-top:48px;
  margin-bottom:18px;
  color:var(--green-dark);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
}

/* Generic cards */
.card{
  border:0;
  border-top:4px solid var(--green);
  border-radius:16px;
}

.card .badge{
  background:rgba(61,123,72,.12);
  color:var(--green-dark);
  border:1px solid rgba(61,123,72,.25);
  font-weight:600;
}

/* Soft box */
.soft-box{
  background:#fff;
  border-left:6px solid var(--green);
  border-radius:16px;
  padding:18px;
}

/* Footer */
footer{
  margin-top:64px;
  background:var(--green-dark);
  color:#fff;
  padding:28px 0;
}

footer a{
  color:#fff;
  opacity:.9;
}

footer a:hover{
  opacity:1;
}

/* Course cards (Gymnastik & Fußball) */
.course-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  border-top:4px solid var(--green);
  height:100%;
}

.course-card img{
  width:100%;
  height:auto;
  max-height:420px;
  object-fit:contain;
  background:#f1f1f1;
  padding:6px;
  border-radius:12px;
}

.course-card .card-body{
  padding:16px;
}

.course-title{
  font-weight:700;
  color:var(--green-dark);
  margin-bottom:4px;
}

.course-meta{
  font-size:.9rem;
  color:#555;
  margin-bottom:10px;
}

.course-meta span{
  display:inline-block;
  margin-right:10px;
}

.course-meta strong{
  color:var(--green-dark);
}

.course-trainer,
.course-leader{
  font-size:.9rem;
  margin-top:6px;
  padding-top:6px;
  border-top:1px dashed #ddd;
  color:#333;
}

/* Event cards */
.event-card{
  background:#fff;
  border-radius:18px;
  border-left:6px solid var(--green);
  padding:16px 18px;
  height:100%;
}

/* Standard Event-Flyer (ganzer Flyer sichtbar) */
.event-flyer{
  width:100%;
  height:auto;
  max-height:260px;
  object-fit:contain;
  background:#f1f1f1;
  border-radius:12px;
  padding:6px;
  margin-bottom:10px;
}

.event-date{
  font-weight:700;
  color:var(--green-dark);
  font-size:1rem;
}

.event-meta{
  font-size:.9rem;
  color:#555;
  margin-bottom:6px;
}

.event-title{
  font-weight:700;
  margin-bottom:6px;
}

.event-card .btn{
  margin-top:8px;
}

/* Event modal image */
.event-modal-img{
  width:100%;
  max-height:80vh;
  object-fit:contain;
  background:#f1f1f1;
  border-radius:16px;
  padding:10px;
}

/* News cards */
.news-card{
  background:#fff;
  border-radius:18px;
  border-left:6px solid var(--green);
  padding:16px 18px;
  height:100%;
}

.news-date{
  font-size:.85rem;
  color:#666;
  margin-bottom:4px;
}

.news-title{
  font-weight:700;
  color:var(--green-dark);
  margin-bottom:6px;
}

.news-card .btn{
  margin-top:8px;
}

/* News teaser clamp */
.news-teaser{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* News Bild in Cards (optional) */
.news-image{
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  object-position:top;
  border-radius:.5rem;
  margin-bottom:.75rem;
}

/* News Bild im Modal */
.news-modal-img{
  width:100%;
  max-height:420px;
  object-fit:contain;
  border-radius:.5rem;
}

/* ===== Chronik Timeline ===== */

.timeline{
  position:relative;
  margin:40px 0;
  padding-left:30px;
  border-left:4px solid var(--green);
}

.timeline-item{
  position:relative;
  margin-bottom:50px;
}

.timeline-year{
  position:absolute;
  left:-52px;
  top:0;
  background:var(--green);
  color:#fff;
  font-weight:800;
  padding:6px 12px;
  border-radius:999px;
  font-size:.9rem;
  white-space:nowrap;
}

.timeline-content{
  background:#fff;
  border-radius:18px;
  padding:20px;
  border-top:4px solid var(--green);
}

.timeline-content h3{
  color:var(--green-dark);
  font-weight:700;
  margin-bottom:12px;
}

/* ===== Galerie ===== */

.timeline-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
  margin-top:16px;
}

.timeline-gallery img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  border-radius:14px;
  background:#eee;
  border:1px solid #ddd;
}

/* Chronik – einheitliche Bildgrößen (für Einzelbilder) */
.chronik-img{
  width:100%;
  max-width:520px;
  height:320px;
  object-fit:cover;
  border-radius:.5rem;
  display:block;
  margin-top:1rem;
}

/* Mobile Optimierung */
@media (max-width:576px){
  .timeline{
    padding-left:20px;
  }

  .timeline-year{
    left:-42px;
    font-size:.85rem;
  }
}

/* ===== Partner / Sponsoren ===== */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.partner-card {
  padding: 1rem;
  text-align: center;
  font-weight: 600;
  background: #fff;
  border-radius: .75rem;
  color: #333;
  height: 75px;
  display: flex;
  justify-content: center;
  place-items: center;
}

.partner-card a {
  color: var(--green-dark);
  text-decoration: none;
}

.partner-card a:hover {
  text-decoration: underline;
}

/*
.partner-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:14px;
}

.partner-card{
  background:#fff;
  border-radius:16px;
  border-top:4px solid var(--green);
  padding:1rem;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.partner-card img{
  max-height:80px;
  max-width:100%;
  object-fit:contain;
  margin-bottom:.5rem;
  filter:grayscale(10%);
  opacity:.95;
}

.partner-card:hover img{
  opacity:1;
  filter:none;
}

.partner-name{
  font-size:.9rem;
  font-weight:600;
  color:#333;
  line-height:1.3;
}
*/

/* ===== Kontakt: Honeypot field ===== */
.hp-field{
  position:absolute!important;
  left:-9999px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}

/* ===== Event Card – Flyer links / Infos rechts ===== */
.event-row{
  display:flex;
  gap:1rem;
  align-items:center;
}

.event-flyer-col{
  flex:0 0 140px;
}

/* Nur im links/rechts Layout: Abstände anpassen, aber Flyer NICHT croppen */
.event-row .event-flyer{
  max-height:200px;
  height:auto;
  object-fit:contain;
  padding:4px;
  margin-bottom:0;
}

.event-info-col{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Mobile: untereinander */
@media (max-width:576px){
  .event-row{
    flex-direction:column;
    align-items:stretch;
  }

  .event-flyer-col{
    flex:0 0 auto;
    width:100%;
  }

  .event-row .event-flyer{
    max-height:240px;
  }
}

/* iOS: Modal Body muss echtes Touch-Scrolling haben */
/*
.modal { 
  -webkit-overflow-scrolling: touch; 
}

@media (max-width: 576px) {
  #eventSignupModal .modal-dialog {
    margin: 0;
    max-width: 100%;
  }
  #eventSignupModal .modal-content {
    min-height: 100vh;
    border-radius: 0;
  }
  #eventSignupModal .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
*/