@font-face {
	font-family: 'Marvin-Round';
	src: url('./fonts/marvin-round.eot'); /* IE 9 Compatibility Mode */
	src: url('./fonts/marvin-round.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
		url('./fonts/marvin-round.woff2') format('woff2'), /* Super Modern Browsers */
		url('./fonts/marvin-round.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
		url('./fonts/marvin-round.ttf') format('truetype'), /* Safari, Android, iOS */
		url('./fonts/marvin-round.svg#marvin-round') format('svg'); /* Chrome < 4, Legacy iOS */
}
html {
  scroll-padding-top: 60px; 
}
/* Reset und Basis Styles */
* { margin: 0; padding: 0; box-sizing: border-box; }
.ocv-font{font-family: 'Marvin-Round';}
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #1a1a1a; background: #ffffff; }
img { max-width: 100%; height: auto; }
.konfetti {background-image: url(./media/fotos/konfetti.png);}
.termin{text-align: center; font-family: 'Marvin-Round'; font-size: 2.5rem;}
.custom-line {  border: none; border-top: 3px solid #282828; /* Farbe und Dicke anpassen */ margin: 10px auto; width: 70%;}
.hidden {display: none;}

.accordion {max-width: 70%;margin: 40px auto;font-family: Marvin-Round, Arial, sans-serif;}
.accordion-item {border-radius: 12px;box-shadow: 0 2px 12px rgba(0,0,0,0.07);margin-bottom: 16px;background: #f8fafc;overflow: hidden;border: 1px solid #e5e7eb;}
.accordion-header {text-align:center; cursor: pointer;padding: 18px 24px;background: linear-gradient(90deg, #1865B0 0%, #3A86D1 100%);color: #fff;font-size: 1.15rem;font-weight: 600;display: flex;align-items: center;justify-content: space-between;transition: background 0.2s;}
.accordion-header:hover {background: linear-gradient(90deg, #14508a 0%, #2c6ca3 100%);}
.accordion-arrow {font-size: 1.3em;transition: transform 0.2s;}
.accordion-content {padding: 18px 24px; background: #fff; color: #222; display: none; animation: fadeIn 0.7s; padding-bottom: 60px;}
.accordion-item.active .accordion-content {display: block;}
.accordion-item.active .accordion-arrow {transform: rotate(90deg);}
.accordion-text {text-align: center;font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; width: 60%; margin-left: auto; margin-right: auto; font-size: 1.3em; padding-bottom: 50px;}

/* Custom highlight for OCV word */
.ocv-color { color: #19b4ea; }

/* Container */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Navigation */
.navbar {font-family: Marvin-Round; position: fixed; top: 0; left: 0; right: 0; z-index: 1000;background-color: #ffffff; backdrop-filter: blur(10px); padding: 0; }
.nav-container { display: flex; align-items: center; justify-content: space-between; height: 85px; max-width: 100%; margin: 0 auto; padding: 0 150px; background-color: #ffffff;}
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #000000; }
.logo-icon { width: 32px; height: 32px; background: linear-gradient(135deg, #1865B0, #3A86D1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 14px; }
.logo-text { font-weight: 700; font-size: 18px; }
.nav-links { display: flex; align-items: center; gap: 24px; list-style: none; color: #19b4ea;}
.nav-links a { text-decoration: none; color: #19b4ea; font-weight: 500; transition: color 0.3s ease; }
.nav-links a:hover { color: #e6361a; }
.nav-cta { background: linear-gradient(135deg, #1865B0, #3A86D1); color: white; padding: 8px 16px; border-radius: 6px; text-decoration: none; font-weight: 500; transition: transform 0.2s ease; }
.nav-cta:hover { transform: translateY(-2px); color: white; }
.mobile-menu { display: none; background: none; border: none; font-size: 24px; cursor: pointer; }

/* Hero Section */
.hero { position: relative; height: 100vh; min-height: 600px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('media/fotos/start1.jpg'); background-size: cover; background-position: center; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); }
.hero-content { position: relative; z-index: 10; text-align: center; color: white; max-width: 800px; padding: 0 20px; }
.hero h1 { font-family:Marvin-Round; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; margin-bottom: 24px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); line-height: 1.2; }
.hero-highlight { color: #fbbf24; }
.hero p { font-size: clamp(1.1rem, 2vw, 1.5rem); margin-bottom: 32px; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); }
.hero-buttons { display: flex; flex-direction: column; gap: 16px; align-items: center; }

.btn { display: inline-block; padding: 12px 32px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 16px; transition: all 0.3s ease; border: 2px solid transparent; }
.btn-primary { background-color: #19b4ea; color: white; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(24, 101, 176, 0.3); }
.btn-highlight {background-color: #e6361a; color: white;}
.btn-highlight:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(230, 53, 26, 0.418); }
.btn-outline { background: rgba(255, 255, 255, 0.1); color: white; border: 2px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); }
.btn-outline:hover { background: rgba(255, 255, 255, 0.2); color: white; }

/* Sections */
.section { padding: 80px 0; }
.section-alt { background: #f8fafc; }
.section-header { text-align: center; margin-bottom: 64px; }
.section-header h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-bottom: 16px; color: #1a1a1a; }
.section-header p { font-size: 18px; color: #6b7280; max-width: 600px; margin: 0 auto; }

.highlight { color: #0099ff; }
.highlight-secondary { color: #e6361a; }
.highlight-accent { color: #069840; }
.highlight-low {color: #00000075;}

/* Grid Layouts */
.grid { display: grid; gap: 32px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); align-items: center; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* Änderung: auto-fit zu auto-fill */
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.grid-5 {grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}


/* Cards */
.card { background: white; border-radius: 12px; padding: 32px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; border: 1px solid #e5e7eb; }
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
.card h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.card .subtitle { color: #6b7280; font-size: 14px; margin-bottom: 16px; }
.card p { color: #6b7280; line-height: 1.6; }
.card-sr { background: white; border-radius: 12px; padding: 10px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; border: 1px solid #e5e7eb; display: flex; align-items: center; align-self: center; margin: 0 auto; }
.card-sr img {display: block; object-fit: contain; margin: 0 auto; justify-items: center; width: auto;}
.card-sr:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }

#sponsoren .grid { gap: 12px; padding: 8px;}


/* Press Card (Pressemeldung) */
.press-card {background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10); border: 1px solid #e5e7eb; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; transition: box-shadow 0.3s, transform 0.3s; width: 280px;}
.press-card:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(24, 101, 176, 0.10);}
.press-card-img {width: 100%; height: 180px; object-fit: cover; border-top-left-radius: 12px; border-top-right-radius: 12px;}
.press-card-copyright {color: #858688; font-size: 0.6rem;}
.press-card-content { padding: 20px 20px 16px 20px; display: flex; flex-direction: column; flex: 1;}
.press-card-date { font-size: 14px; color: #e6361a; font-weight: 600; margin-bottom: 8px; }
.press-card-title {font-size: 18px;font-weight: 700; margin-bottom: 12px; color: #1a1a1a;}
.press-card-btn { margin-top: auto; align-self: flex-start; padding: 8px 20px; border-radius: 6px; background: #19b4ea; color: white; text-decoration: none; font-weight: 600; font-size: 15px; border: none; transition: background 0.2s, transform 0.2s; box-shadow: 0 2px 8px rgba(24,101,176,0.08); cursor: pointer;}
.press-card-btn:hover { background: #19b4ea; color: #fff; transform: translateY(-2px);}

.hna {color: red; font-size: 0.8rem;}
.on {color: #f39400;font-size: 0.8rem;}
/* Stats Cards */
.stat-card { text-align: center; background: white; border-radius: 12px; padding: 32px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); border: 2px solid transparent; transition: all 0.3s ease; }
.stat-card:hover { border-color: #1865B0; transform: translateY(-4px); }
.stat-number { font-size: 36px; font-weight: 700; color: #1865B0; margin-bottom: 8px; }
.stat-label { color: #6b7280; font-weight: 500; }

/* Image with Content */
.content-image {display: block; width: 80%; height: 500px; object-fit: cover; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); margin-top: 3rem; margin-left: auto; margin-right: auto;}
.content-image-gruppe {display: block;width: 80%; height: 500px; object-fit: cover; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); margin-bottom: 2rem; margin-left: auto; margin-right: auto;}
.content-image-grid-2 {display: block;width: 80%; height: 250px; object-fit: cover; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); margin-bottom: 2rem; margin-left: auto; margin-right: auto;}
/* Event Cards */
.event-card { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; border-left: 4px solid #1865B0; }
.event-card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.event-title { font-size: 18px; font-weight: 600; color: #1865B0; margin-bottom: 8px; }
.event-date { color: #fbbf24; font-weight: 600; margin-bottom: 12px; }
.event-description { color: #6b7280; margin-bottom: 16px; }
.btn-small { padding: 8px 16px; font-size: 14px; background: transparent; color: #1865B0; border: 1px solid #1865B0; border-radius: 6px; text-decoration: none; transition: all 0.3s ease; }
.btn-small:hover { background: #1865B0; color: white; }

/* Contact Cards */
.contact-card { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); text-align: center; }
.contact-icon { width: 48px; height: 48px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #19b4ea; color: white; }
.contact-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.contact-info { color: #6b7280; line-height: 1.6; }

/* Footer */
.footer { background: #0099ff; color: white; padding: 48px 0 24px; }
.footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 32px; margin-bottom: 32px; }
.footer-section h4 { font-size: 18px; font-weight: 600; margin-bottom: 16px; }
.footer-section ul { list-style: none; }
.footer-section ul li { margin-bottom: 8px; }
.footer-section a { color: #d1d5db; text-decoration: none; transition: color 0.3s ease;}
.footer-section a:hover { color: #1865B0; }
.social-links { display: flex; gap: 16px;}
.social-link { width: 40px; height: 40px; background: #374151; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; transition: all 0.3s ease; }
.social-link:hover { background: #1865B0; transform: translateY(-2px); transition: ease;}
.footer-bottom { border-top: 1px solid #374151; padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }

/* Animations */
@keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.fade-in { opacity: 0; transform: translateY(30px); animation: fadeIn 0.8s ease forwards; }
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }

/* Responsive Design */
@media (min-width: 640px) {
  .hero-buttons { flex-direction: row; justify-content: center; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid.grid-5 {grid-template-columns: repeat(5, minmax(0, 1fr));gap: 8px;}
}
@media (max-width: 768px) {
  .hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 120%; background-image: url('media/fotos/hintergrund.jpg'); background-size: cover; background-position: center; }
  .nav-container { padding: 0 16px; }
  .nav-links { display: none; }
  .mobile-menu { display: block; font-family: Marvin-Round;}
  .grid-2 { grid-template-columns: 1fr; gap: 48px; }
  .section { padding: 60px 0; }
  .footer-bottom { flex-direction: column; text-align: center;}
  #footer-logo{text-align: center; width:  30%;}
  .termin {font-size: 1.2rem;}
  .custom-line {width: 100%;}
  .content-image {height: 350px; width: 90%;}
  .content-image-gruppe {height: 220px; width: 100%;}
  .press-card{margin-left: auto; margin-right: auto; width: 85%}
  .accordion-text{width: 90%;}
  .accordion{max-width: 85%;}
  .grid.grid-5 {grid-template-columns: repeat(5, minmax(0, 1fr));gap: 8px;}
  .first img{width: 100px}
}
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .card { padding: 24px; }
  .hero-content { padding: 0 16px; }
}

/* Smooth Scrolling */
html { scroll-behavior: smooth; }

/* Focus States */
.btn:focus, .nav-links a:focus { outline: 2px solid #1865B0; outline-offset: 2px; }

.section-header h2 {
  display: inline-block;
  white-space: nowrap; /* Zwingt alles in eine Zeile für die Berechnung */
  max-width: 100%;
  line-height: 1.2;
  text-align: center;
  /* Keine feste font-size hier, das macht jetzt das Skript */
}

.copyright-text {
  display: block;
  width: 100%;
  text-align: center;
  color: #6b7280;       /* harmoniert mit bestehendem Grau */
  font-size: 0.85rem;   /* etwas kleinerer Text */
  line-height: 1.4;
  margin: 8px 0 0;
  padding: 4px 12px;
}