/* =================================
   DESIGN SYSTEM
================================= */

:root{

/* Farben */

--primary:#2E8B7D;
--primary-dark:#256F63;
--accent:#8FD9B6;

--background:#F4FAF7;
--card:#FFFFFF;

--text:#243331;
--text-light:#6B7C78;
--hero-text-light:#E3EFEA;
--border:#E3EFEA;

/* UI */

--radius:12px;

--shadow-sm:0 4px 10px rgba(0,0,0,0.05);
--shadow:0 10px 30px rgba(0,0,0,0.06);
--shadow-lg:0 20px 45px rgba(0,0,0,0.12);

/* Abstände */

--space-xs:6px;
--space-sm:12px;
--space-md:20px;
--space-lg:40px;
--space-xl:80px;

}


/* =================================
   BASE
================================= */

body{

font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

background:var(--background);

color:var(--text);

line-height:1.6;

margin:0;

}


/* =================================
   TYPOGRAPHY
================================= */

h1,h2,h3,h4{

font-weight:700;

margin-bottom:var(--space-md);

}

h1{

font-size:2.8rem;

}

h2{

font-size:2rem;

}

h3{

font-size:1.4rem;

}

p{

color:var(--text-light);

margin-bottom:var(--space-md);

}


/* =================================
   NAVBAR
================================= */

.site-navbar{

background:white;

box-shadow:var(--shadow-sm);

padding:14px 0;

}

.navbar-brand{

font-weight:700;

color:var(--primary);

}

.nav-link{

color:var(--text);

margin-left:16px;

font-weight:500;

}

.nav-link:hover{

color:var(--primary);

}

.navbar-toggler{

border:1px solid var(--border);

}

.navbar-toggler:focus{

box-shadow:none;

}

/* Burger Icon */

.navbar-toggler-icon{

background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(36,51,49,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");

}

/* =================================
   HIGH-END HERO
================================= */

.hero{

position:relative;

height:85vh;

display:flex;
align-items:center;
justify-content:center;

text-align:center;
color:white;

overflow:hidden;

}


/* -------------------------
   SVG Hintergrund (animiert)
------------------------- */

.hero-bg{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:url("../images/Logo_Hero.svg") center/contain no-repeat;

opacity:0.38;

z-index:1;

/* wichtig für smooth movement */

will-change:transform;

}




/* -------------------------
   Gradient Overlay
------------------------- */

.hero::after{

content:"";

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

background:linear-gradient(
120deg,
rgba(46,139,125,0.92),
rgba(143,217,182,0.85)
);

z-index:2;

}


/* -------------------------
   Content Layer
------------------------- */

.hero-content{

position:relative;
z-index:3;

max-width:800px;

padding:40px;

/* Glass Effekt */

background:rgba(255,255,255,0.08);
backdrop-filter:blur(12px);

border-radius:16px;

box-shadow:0 20px 60px rgba(0,0,0,0.15);

/* Fade-In Animation */

opacity:0;
transform:translateY(40px);

animation:heroFadeIn 1.2s ease forwards;

}


/* Text */

.hero h1{

font-size:3.4rem;
font-weight:700;
margin-bottom:15px;

}

.hero p{

font-size:1.2rem;
opacity:.95;
color: var(--hero-text-light);

}


/* Button */

.hero .btn{

margin-top:20px;

}


/* -------------------------
   Fade In Animation
------------------------- */

@keyframes heroFadeIn{

to{
opacity:1;
transform:translateY(0);
}

}

/* =================================
   SECTIONS
================================= */

.section{

padding:var(--space-xl) 0;

}

.section-light{

background:white;

}

.section-title{

text-align:center;

margin-bottom:50px;

}


/* =================================
   BUTTONS
================================= */

.btn-primary{

background:var(--primary);

color:white;

border:none;

padding:12px 26px;

border-radius:30px;

font-weight:600;

box-shadow:var(--shadow-sm);

transition:.2s;

}

.btn-primary:hover{

background:var(--primary-dark);

transform:translateY(-2px);

box-shadow:var(--shadow);

}


/* =================================
   CARDS
================================= */

.card{

background:var(--card);

border:none;

border-radius:var(--radius);

box-shadow:var(--shadow);

transition:.25s;

}

.card:hover{

transform:translateY(-6px);

box-shadow:var(--shadow-lg);

}

.card-body{

padding:24px;

}

.card h5{

color:var(--primary);

margin-bottom:10px;

}


/* =================================
   EVENT LIST
================================= */

.event-item{

background:white;

padding:16px 20px;

border-radius:var(--radius);

margin-bottom:12px;

box-shadow:var(--shadow-sm);

}

.event-item strong{

color:var(--primary);

}


/* =================================
   COURSE GRID
================================= */

.courses-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

}

.course-day{

background:white;

padding:20px;

border-radius:var(--radius);

box-shadow:var(--shadow-sm);

}

.course-day-title{

font-weight:700;

margin-bottom:15px;

border-bottom:2px solid var(--border);

padding-bottom:8px;

}

.course-list{

display:flex;

flex-direction:column;

gap:10px;

}

.course-card{

display:flex;

align-items:center;

justify-content:space-between;

background:#f7fbf9;

padding:12px 15px;

border-radius:8px;

transition:.2s;

}

.course-card:hover{

background:#e8f5f1;

transform:translateY(-2px);

}

.course-time{

font-weight:600;

color:var(--primary);

}

.course-name{

font-weight:500;

}


/* =================================
   FAQ
================================= */

.faq-layout{

display:grid;

grid-template-columns:350px 1fr;

gap:40px;

}

.faq-questions{

display:flex;

flex-direction:column;

gap:10px;

}

.faq-question{

background:white;

padding:14px 18px;

border-radius:8px;

border:1px solid var(--border);

cursor:pointer;

font-weight:500;

text-align:left;

}

.faq-question:hover{

background:#E8F5F1;

}

.faq-question.active{

background:var(--primary);

color:white;

}

.faq-answers{

background:white;

padding:30px;

border-radius:var(--radius);

box-shadow:var(--shadow);

}

.faq-answer{

display:none;

}

.faq-answer.active{

display:block;

}


/* =================================
   TEAM
================================= */

.team-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:30px;

}

.team-card{

background:white;

padding:35px;

border-radius:var(--radius);

box-shadow:var(--shadow);

transition:.25s;

}

.team-card:hover{

transform:translateY(-6px);

box-shadow:var(--shadow-lg);

}

.team-role{

font-size:13px;

text-transform:uppercase;

letter-spacing:1px;

font-weight:600;

color:var(--primary);

}

.team-name{

font-size:20px;

font-weight:700;

margin-bottom:10px;

}

.team-members{

color:var(--text-light);

}


/* =================================
   MEMBERSHIP
================================= */

.membership-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:25px;

}

.membership-card{

background:white;

padding:30px;

border-radius:var(--radius);

text-align:center;

box-shadow:var(--shadow);

transition:.25s;

}

.membership-card:hover{

transform:translateY(-6px);

box-shadow:var(--shadow-lg);

}

.membership-type{

font-weight:600;

margin-bottom:10px;

}

.membership-price{

font-size:34px;

font-weight:700;

color:var(--primary);

}


/* =================================
   GALLERY
================================= */
#galleryContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.gallery-card {
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.2s;
}

.gallery-card:hover {
    transform: scale(1.05);
}

.gallery-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.gallery-card .title {
    padding: 10px;
    text-align: center;
    font-weight: bold;
}

/* Lightbox */
#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.9);
    display: none;
    flex-wrap: wrap;
    overflow: auto;
    padding: 20px;
}

.lightbox-img {
    max-width: 300px;
    margin: 10px;
}

#closeBtn {
    position: fixed;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    cursor: pointer;
}


/* =================================
   FOOTER
================================= */

.footer{

background:white;

border-top:1px solid var(--border);

text-align:center;

padding:30px;

font-size:.9rem;

color:var(--text-light);

}


/* =================================
   MOBILE
================================= */

@media (max-width:768px){

.hero h1{

font-size:2.2rem;

}

.section{

padding:60px 0;

}

.faq-layout{

grid-template-columns:1fr;

}

}

/* =================================
   BOOTSTRAP THEME OVERRIDES
================================= */


/* Buttons */

.btn-primary{

background:var(--primary);
border-color:var(--primary);
color:white;

}

.btn-primary:hover,
.btn-primary:focus{

background:var(--primary-dark);
border-color:var(--primary-dark);
color:white;

}


/* Secondary Button */

.btn-secondary{

background:#e8f5f1;
border:none;
color:var(--text);

}

.btn-secondary:hover{

background:#d7efe7;

}


/* Navbar */

.navbar{

background:white;

box-shadow:var(--shadow-sm);

}

.navbar-brand{

color:var(--primary);

font-weight:700;

}

.navbar-brand:hover{

color:var(--primary-dark);

}

.nav-link{

color:var(--text);

font-weight:500;

}

.nav-link:hover{

color:var(--primary);

}


/* Cards */

.card{

border:none;

border-radius:var(--radius);

box-shadow:var(--shadow-sm);

}

.card-header{

background:white;

border-bottom:1px solid var(--border);

font-weight:600;

}


/* Tables */

.table{

border-radius:var(--radius);

overflow:hidden;

}

.table thead{

background:var(--primary);

color:white;

}

.table td{

border-color:var(--border);

}


/* Forms */

.form-control{

border-radius:8px;

border:1px solid var(--border);

padding:10px 12px;

}

.form-control:focus{

border-color:var(--primary);

box-shadow:0 0 0 3px rgba(46,139,125,0.15);

}


/* Pagination */

.page-link{

color:var(--primary);

border-radius:6px;

}

.page-item.active .page-link{

background:var(--primary);

border-color:var(--primary);

}


/* Alerts */

.alert-primary{

background:#e8f5f1;

border:none;

color:var(--primary);

}


/* Accordion */

.accordion-button{

font-weight:600;

}

.accordion-button:not(.collapsed){

background:#e8f5f1;

color:var(--primary);

}


/* Badge */

.badge.bg-primary{

background:var(--primary);

}

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 25px;
}

.sponsor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 14px;
  padding: 20px;
  text-decoration: none;
  color: #222;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: all 0.25s ease;
}

.sponsor-card img {
  max-width: 100%;
  max-height: 70px;
  object-fit: contain;
  margin-bottom: 10px;
}

.sponsor-card span {
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
}

.sponsor-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.sponsor-card.dark {
  background: #111;
}

.sponsor-card.dark span {
  color: white;
}
/* Cookie Banner fix unten */

.cookie-banner{

position:fixed;

bottom:0;
left:0;

width:100%;

background:white;

border-top:1px solid var(--border);

box-shadow:0 -10px 30px rgba(0,0,0,0.08);

padding:15px 20px;

z-index:9999;

/* Animation */

transform:translateY(100%);
transition:all .3s;

}

/* sichtbar */

.cookie-banner.show{

transform:translateY(0);

}


/* Inhalt */

.cookie-content{

max-width:1100px;
margin:auto;

display:flex;
justify-content:space-between;
align-items:center;
gap:20px;

}


/* Text */

.cookie-text{

font-size:14px;
color:var(--text-light);

}


/* Buttons */

.cookie-actions{

display:flex;
gap:10px;

}


/* Mobile */

@media(max-width:768px){

.cookie-content{

flex-direction:column;
align-items:flex-start;

}

.cookie-actions{

width:100%;
justify-content:flex-end;

}

}
.impressum-card{

background:white;

border-radius:var(--radius);

box-shadow:var(--shadow);

padding:40px;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

}


/* einzelne Blöcke */

.impressum-block h5{

color:var(--primary);

font-weight:600;

margin-bottom:10px;

}

.impressum-block p{

color:var(--text-light);

margin:0;

line-height:1.6;

}