@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700&family=Gloria+Hallelujah&family=Lato:wght@400;700&display=swap');

:root{
  --gruen:#C8F2C2;
  --rot:#F7A8A8;
  --tuerkis:#B6F2E1;
  --violett:#D8B8F8;
  --orange:#FBC9A6;
  --gelb:#F9EEA3;
  --blau:#AFCFF7;
  --rosa:#F7C4E3;
  --white: #FFFFFF;
  --schwarz: #000000;
  --max-width:1200px;
}
*{box-sizing:border-box}
body{font-family:'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, Arial; margin:0; color:var(--schwarz); background:linear-gradient(180deg,var(--white),#fff);}
h1,h2,h3{font-family:'Baloo 2', cursive;}
.subtitle{font-family:'Gloria Hallelujah', cursive; font-size:20px; color:var(--white);}
.container{max-width:var(--max-width); margin:0 auto; padding:22px;}
.header{padding:18px 0; background:linear-gradient(90deg, rgba(255,255,255,0.6), rgba(255,255,255,0)); position:sticky; top:0; z-index:40; backdrop-filter: blur(6px);}
.header .inner{
  display:flex;
  align-items:center;
  gap:24px;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 22px;
}
.logo{display:flex; align-items:center; gap:12px;}
.logo img{height:62px; width:auto; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.08);}
.nav a{margin-left:14px; text-decoration:none; color:var(--blau); font-weight:700; padding:8px 12px; border-radius:999px; transition:all .18s ease;}
.nav a:hover{transform:translateY(-3px); background:var(--violett); color:white;}
.hero{display:flex; align-items:center; gap:18px; padding:30px; border-radius:18px; background:linear-gradient(135deg, var(--white) 0%, var(--violett) 100%); color:var(--rot); margin:18px 0; box-shadow:0 12px 30px rgba(0,0,0,0.08);}
.hero .text{max-width:760px;}
.hero h1{font-family:'Baloo 2', cursive; font-size:50px; color:var(--violett); line-height:1.02;}
.hero p{margin:0 0 18px 0; font-size:18px; color:var(--violett);}
.hero-buttons{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:16px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 8px 16px; /* etwas harmonischer */
  background: var(--blau);
  color: white;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 8px 40px rgba(43,108,69,0.18);
  transition: background-color 0.25s ease, transform 0.2s ease;
}
.icon-small{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
}

.btn svg{
  width:20px;
  height:20px;
  stroke:currentColor;
  fill:none;
}

.btn:hover {
  transform: translateY(-1px);
}
.why{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px;}
.card{background:white; padding:18px; border-radius:14px; box-shadow:0 8px 26px rgba(0,0,0,0.06); text-align:center;}
.card h4{margin:8px 0 6px 0; color:var(--violett); font-family:'Gloria Hallelujah';}
.alternate{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; margin:28px 0; padding:18px;}
.alternate .img{border-radius:14px; overflow:hidden; box-shadow:0 12px 36px rgba(0,0,0,0.06);}
.alternate .img img{width:100%; display:block;}
.section-title{font-size:22px; color:var(--violett); margin-bottom:10px; font-family:'Baloo 2', cursive;}
.footer{background:linear-gradient(90deg,var(--white),var(--violett)); padding:20px; margin-top:30px; text-align:center; font-size:14px; color:var(--white); border-top-left-radius:14px; border-top-right-radius:14px;}
.kids-row{display:inline-flex; gap:55px; justify-content:center; margin-top:16px;}
.icon-box{width:84px; height:84px; background:linear-gradient(180deg,#fff,rgba(255,255,255,0.7)); border-radius:16px; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px rgba(0,0,0,0.06);}
.cta-strip{background:linear-gradient(90deg,var(--white),var(--violett)); color:var(--white); padding:18px; border-radius:12px; margin:20px 0; text-align:center;}
.team-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; margin-top:18px;}
.team-card{background:white;padding:14px;border-radius:12px;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,0.06);}
.avatar{width:120px;height:120px;border-radius:20px;overflow:hidden;margin:0 auto 10px auto;}
.gallery-main{width:100%; height:520px; border-radius:12px; overflow:hidden; box-shadow:0 12px 36px rgba(0,0,0,0.08);}
.thumbs{display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:8px;}
.thumb{width:120px; flex:0 0 auto; border-radius:10px; overflow:hidden; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,0.06);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.burger{
  margin-left:auto;
}
.nav{
  display:flex;
  align-items:center;
  margin-left:40px; /* Abstand zum Logo */
}
/* ===== Tablet & kleiner ===== */
@media (max-width:900px){
  .hero{
    flex-direction:column;
    text-align:center;
  }

  .alternate{
    grid-template-columns:1fr;
  }

  .why{
    grid-template-columns:1fr;
  }

  .gallery-main{
    height:300px;
  }

  .hero{
    margin-top:90px;
  }

  .hero h1{
    font-size:38px;
    line-height:1.1;
  }
}

/* ===== Smartphone: Burger Menü ===== */
@media (max-width : 1774px ){

  .burger{
    display:block;
  }

  .nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:white;
    padding:16px;
    flex-direction:column;
    gap:12px;
    box-shadow:0 12px 30px rgba(0,0,0,0.12);
    z-index:50;
  }

  .nav.open{
    display:flex;
  }
}

/* ===== Mobile Burger Menü ===== */

.burger{
  display:none;
  background:none;
  border:none;
  font-size:32px;
  cursor:pointer;
  color:var(--violett);
}

@media (max-width : 1774px ){

  .burger{
    display:block;
  }

  .nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:white;
    padding:16px;
    box-shadow:0 12px 30px rgba(0,0,0,0.12);
    flex-direction:column;
    gap:12px;
    z-index:50;
  }

  .nav.open{
    display:flex;
  }
}
.btn .icon-small svg{
  stroke: #ffffff;
}
.donate-widget{
  background:white;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 12px 36px rgba(0,0,0,0.06);
}
@media (max-width:900px){
 @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700&family=Gloria+Hallelujah&family=Lato:wght@400;700&display=swap');

:root{
  --gruen:#C8F2C2;
  --rot:#F7A8A8;
  --tuerkis:#B6F2E1;
  --violett:#D8B8F8;
  --orange:#FBC9A6;
  --gelb:#F9EEA3;
  --blau:#AFCFF7;
  --rosa:#F7C4E3;
  --white: #FFFFFF;
  --schwarz: #000000;
  --max-width:1200px;
}
*{box-sizing:border-box}
body{font-family:'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, Arial; margin:0; color:var(--schwarz); background:linear-gradient(180deg,var(--white),#fff);}
h1,h2,h3{font-family:'Baloo 2', cursive;}
.subtitle{font-family:'Gloria Hallelujah', cursive; font-size:20px; color:var(--white);}
.container{max-width:var(--max-width); margin:0 auto; padding:22px;}
.header{padding:18px 0; background:linear-gradient(90deg, rgba(255,255,255,0.6), rgba(255,255,255,0)); position:sticky; top:0; z-index:40; backdrop-filter: blur(6px);}
.header .inner{
  display:flex;
  align-items:center;
  gap:24px;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 22px;
}
.logo{display:flex; align-items:center; gap:12px;}
.logo img{height:62px; width:auto; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.08);}
.nav a{margin-left:14px; text-decoration:none; color:var(--blau); font-weight:700; padding:8px 12px; border-radius:999px; transition:all .18s ease;}
.nav a:hover{transform:translateY(-3px); background:var(--violett); color:white;}
.hero{display:flex; align-items:center; gap:18px; padding:30px; border-radius:18px; background:linear-gradient(135deg, var(--white) 0%, var(--violett) 100%); color:var(--rot); margin:18px 0; box-shadow:0 12px 30px rgba(0,0,0,0.08);}
.hero .text{max-width:760px;}
.hero h1{font-family:'Baloo 2', cursive; font-size:64px; color:var(--violett); line-height:1.02;}
.hero p{margin:0 0 18px 0; font-size:18px; color:var(--violett);}
.hero-buttons{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:16px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 8px 16px; /* etwas harmonischer */
  background: var(--blau);
  color: white;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 8px 40px rgba(43,108,69,0.18);
  transition: background-color 0.25s ease, transform 0.2s ease;
}
.icon-small{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
}

.btn svg{
  width:20px;
  height:20px;
  stroke:currentColor;
  fill:none;
}

.btn:hover {
  transform: translateY(-1px);
}
.why{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px;}
.card{background:white; padding:18px; border-radius:14px; box-shadow:0 8px 26px rgba(0,0,0,0.06); text-align:center;}
.card h4{margin:8px 0 6px 0; color:var(--violett); font-family:'Gloria Hallelujah';}
.alternate{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; margin:28px 0; padding:18px;}
.alternate .img{border-radius:14px; overflow:hidden; box-shadow:0 12px 36px rgba(0,0,0,0.06);}
.alternate .img img{width:100%; display:block;}
.section-title{font-size:22px; color:var(--violett); margin-bottom:10px; font-family:'Baloo 2', cursive;}
.footer{background:linear-gradient(90deg,var(--white),var(--violett)); padding:20px; margin-top:30px; text-align:center; font-size:14px; color:var(--white); border-top-left-radius:14px; border-top-right-radius:14px;}
.kids-row{display:inline-flex; gap:55px; justify-content:center; margin-top:16px;}
.icon-box{width:84px; height:84px; background:linear-gradient(180deg,#fff,rgba(255,255,255,0.7)); border-radius:16px; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px rgba(0,0,0,0.06);}
.cta-strip{background:linear-gradient(90deg,var(--white),var(--white)); color:white; padding:18px; border-radius:12px; margin:20px 0; text-align:center;}
.team-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; margin-top:18px;}
.team-card{background:white;padding:14px;border-radius:12px;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,0.06);}
.avatar{width:120px;height:120px;border-radius:20px;overflow:hidden;margin:0 auto 10px auto;}
.gallery-main{width:100%; height:520px; border-radius:12px; overflow:hidden; box-shadow:0 12px 36px rgba(0,0,0,0.08);}
.thumbs{display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:8px;}
.thumb{width:120px; flex:0 0 auto; border-radius:10px; overflow:hidden; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,0.06);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.burger{
  margin-left:auto;
}
.nav{
  display:flex;
  align-items:center;
  margin-left:40px; /* Abstand zum Logo */
}
/* ===== Tablet & kleiner ===== */
@media (max-width:900px){
  .hero{
    flex-direction:column;
    text-align:center;
  }

  .alternate{
    grid-template-columns:1fr;
  }

  .why{
    grid-template-columns:1fr;
  }

  .gallery-main{
    height:300px;
  }

  .hero{
    margin-top:90px;
  }

  .hero h1{
    font-size:38px;
    line-height:1.1;
  }
}

/* ===== Smartphone: Burger Menü ===== */
@media (max-width : 1774px ){

  .burger{
    display:block;
  }

  .nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:white;
    padding:16px;
    flex-direction:column;
    gap:12px;
    box-shadow:0 12px 30px rgba(0,0,0,0.12);
    z-index:50;
  }

  .nav.open{
    display:flex;
  }
}

/* ===== Mobile Burger Menü ===== */

.burger{
  display:none;
  background:none;
  border:none;
  font-size:32px;
  cursor:pointer;
  color:var(--violett);
}

@media (max-width : 1774px ){

  .burger{
    display:block;
  }

  .nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:white;
    padding:16px;
    box-shadow:0 12px 30px rgba(0,0,0,0.12);
    flex-direction:column;
    gap:12px;
    z-index:50;
  }

  .nav.open{
    display:flex;
  }
}
.btn .icon-small svg{
  stroke: #ffffff;
}
.donate-widget{
  background:white;
  border-radius:14px;
  overflow:hidden;
}

.donate-widget iframe{
  width:100%;
  height:100%;
  display:block;
}

@media (max-width:900px){
  .donate-widget iframe{
    min-height:360px;
  }
}