/* fjalla-one-regular - latin */
@font-face {font-display: swap; font-family: 'Fjalla One';font-style: normal;font-weight: 400;src: url('fonts/fjalla-one-v16-latin-regular.woff2') format('woff2'); }
section h1 {font-size: 5em;}
body {margin: 0;font-family: 'Fjalla One', Arial, sans-serif;scroll-behavior: smooth;background: #eaf959;}
header {position: sticky;top: 0;width: 100%;background: #ffffff;transition: all 0.3s ease;z-index: 1000;  border: 1px solid #888;}
.nav {display: flex;justify-content: space-between;align-items: center;padding: 0 20px;}
.logo-svg {height: 80px;width: auto;margin: 8px;transition: all ease-in-out 0.6s;}
.nav ul {list-style: none;display: flex;align-items: center;gap: 30px;padding: 20px;margin: 0;}
.nav a {text-decoration: none;color: #000;font-weight: bold;position: relative;}
.nav a.active::after {content: '';position: absolute;bottom: -5px;left: 0;width: 100%;height: 2px;background: black;}
.burger {display: none;flex-direction: column;cursor: pointer;}
.burger span {width: 25px;height: 3px;background: black;margin: 4px 0;transition: 0.3s;}

.burger.open span:nth-child(1) {transform: rotate(45deg) translate(9px, 9px);}
.burger.open span:nth-child(2) {opacity: 0;}
.burger.open span:nth-child(3) {transform: rotate(-45deg) translate(6px, -6px);}
header.scrolled {background: rgba(255, 255, 255, 0.9);backdrop-filter: blur(2px);}
header.scrolled .nav .logo .logo-svg {
 height: 70px;}


section {height: 100vh;font-size: 1rem;padding: 0 40px;}

#programm { background: rgba(255,255,255,0.6); }
#foerdermitgliedschaft { background:rgba(255,255,255,0.8); }
#newsletter { background: rgba(255,255,255,0.4); }
#kontakt { background: rgba(255,255,255,0.2); }


.section-content { display: flex; justify-content: center; align-items: center; transition: all ease-in-out 1s;}
.box {width: 100%;height: 80vh;background: rgba(255,255,255,0.6);border-radius: 4px;display: block;animation: float 3s ease-in-out;margin: 40px 20px 0 0;padding: 1% 2%;transition: all ease-in-out 1s;}

.box:nth-child(2) {animation-delay: 2s;}

@keyframes float { 0% { transform: translateY(0px); }  50% { transform: translateY(-5px); } 100% { transform: translateY(0px); }}
#msg {background: greenyellow;border: 3px solid darkgreen;transition: all ease-in-out 1s;display: inline;width:0px;height:0px;max-height:0px;}
/* Mobile */
@media (max-width: 1024px) {

section h1 {font-size: 5em;}	
.section-content { flex-direction: column; }.box { width: 98%;   height: auto; }.burger {display: flex;}.nav ul {position: absolute;top: 60px;left: 0;    width: 100%;    background: #fff;flex-direction: column; align-items: center;display: none;  }.nav ul.open {display: flex;}
}