*{
 margin:0;
 padding:0;
 box-sizing:border-box;
}

html{
 font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 font-size:16px;
 line-height:1.6;
 scroll-behavior:smooth;
}

body{
 color:#333;
 background-color:#fff;
 min-height:100vh;
}


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


header, .header, .deutsche-event-header{
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 color:white;
 padding:1rem 0;
 position:sticky;
 top:0;
 z-index:1000;
 box-shadow:0 2px 10px rgba(0,0,0,0.1);
}

.header-content{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:0 20px;
}


.logo{
 font-size:1.8rem;
 font-weight:bold;
 color:white;
 text-decoration:none;
 display:flex;
 align-items:center;
}

.logo:hover{
 opacity:0.9;
}


nav, .nav-menu{
 display:flex;
 align-items:center;
}

nav ul, .nav-menu ul{
 display:flex;
 list-style:none;
 gap:2rem;
 margin:0;
 padding:0;
}

nav a, .nav-menu a{
 color:white;
 text-decoration:none;
 font-weight:500;
 transition:opacity 0.3s ease;
 padding:0.5rem 1rem;
 border-radius:4px;
}

nav a:hover, .nav-menu a:hover{
 background:rgba(255,255,255,0.1);
}


.menu-toggle{
 display:none;
 background:none;
 border:none;
 color:white;
 font-size:1.5rem;
 cursor:pointer;
}


.hero{
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 color:white;
 padding:4rem 0;
 text-align:center;
 min-height:500px;
 display:flex;
 align-items:center;
 justify-content:center;
}

.hero-content{
 max-width:800px;
 margin:0 auto;
 padding:0 20px;
}

.hero h1, .hero-title{
 font-size:3rem;
 margin-bottom:1.5rem;
 font-weight:bold;
 line-height:1.2;
}

.hero p, .hero-subtitle{
 font-size:1.25rem;
 margin-bottom:2rem;
 opacity:0.95;
}


.btn, button{
 display:inline-block;
 padding:12px 30px;
 background:#ff6b6b;
 color:white;
 text-decoration:none;
 border-radius:50px;
 font-weight:600;
 transition:all 0.3s ease;
 border:none;
 cursor:pointer;
 font-size:1rem;
}

.btn:hover, button:hover{
 background:#ff5252;
 transform:translateY(-2px);
 box-shadow:0 10px 20px rgba(255,107,107,0.3);
}

.btn-secondary{
 background:white;
 color:#667eea;
}

.btn-secondary:hover{
 background:#f8f9fa;
}


.search-container{
 margin:2rem 0;
 display:flex;
 gap:1rem;
 max-width:600px;
 margin:2rem auto;
}

.search-container input{
 flex:1;
 padding:12px 20px;
 border:2px solid #e0e0e0;
 border-radius:50px;
 font-size:1rem;
 outline:none;
 transition:border-color 0.3s;
}

.search-container input:focus{
 border-color:#667eea;
}

.search-container button{
 padding:12px 30px;
}


.events-grid{
 display:grid;
 grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
 gap:2rem;
 padding:2rem 0;
}

.event-card, .card{
 background:white;
 border-radius:12px;
 overflow:hidden;
 box-shadow:0 2px 10px rgba(0,0,0,0.1);
 transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover{
 transform:translateY(-5px);
 box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

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

.event-card-content{
 padding:1.5rem;
}

.event-card h3{
 font-size:1.25rem;
 margin-bottom:0.5rem;
 color:#333;
}

.event-card p{
 color:#666;
 margin-bottom:1rem;
}

.event-meta{
 display:flex;
 justify-content:space-between;
 align-items:center;
 font-size:0.9rem;
 color:#999;
}


section{
 padding:4rem 0;
}

section h2{
 font-size:2.5rem;
 text-align:center;
 margin-bottom:3rem;
 color:#333;
}


.categories{
 display:flex;
 flex-wrap:wrap;
 gap:1rem;
 justify-content:center;
 margin:2rem 0;
}

.category-tag{
 padding:8px 20px;
 background:#f0f0f0;
 border-radius:25px;
 text-decoration:none;
 color:#666;
 transition:all 0.3s ease;
}

.category-tag:hover{
 background:#667eea;
 color:white;
}


footer{
 background:#2c3e50;
 color:white;
 padding:3rem 0 1rem;
 margin-top:4rem;
}

.footer-content{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
 gap:2rem;
 margin-bottom:2rem;
}

.footer-section h3{
 margin-bottom:1rem;
 color:white;
}

.footer-section ul{
 list-style:none;
}

.footer-section a{
 color:#ecf0f1;
 text-decoration:none;
 line-height:2;
}

.footer-section a:hover{
 color:#667eea;
}

.footer-bottom{
 text-align:center;
 padding-top:2rem;
 border-top:1px solid #34495e;
 color:#95a5a6;
}


@media (max-width:768px){
 .menu-toggle{
 display:block;
}
 
 nav ul, .nav-menu ul{
 display:none;
 position:absolute;
 top:100%;
 left:0;
 right:0;
 background:#667eea;
 flex-direction:column;
 padding:1rem;
}
 
 nav ul.show, .nav-menu ul.show{
 display:flex;
}
 
 .hero h1{
 font-size:2rem;
}
 
 .hero p{
 font-size:1rem;
}
 
 .events-grid{
 grid-template-columns:1fr;
}
 
 .search-container{
 flex-direction:column;
}
 
 .header-content{
 flex-direction:column;
 gap:1rem;
}
}


.loading{
 display:inline-block;
 width:50px;
 height:50px;
 border:3px solid #f3f3f3;
 border-top:3px solid #667eea;
 border-radius:50%;
 animation:spin 1s linear infinite;
 margin:2rem auto;
}

@keyframes spin{
 0%{transform:rotate(0deg);}
 100%{transform:rotate(360deg);}
}


.text-center{text-align:center;}
.mt-1{margin-top:0.5rem;}
.mt-2{margin-top:1rem;}
.mt-3{margin-top:1.5rem;}
.mt-4{margin-top:2rem;}
.mb-1{margin-bottom:0.5rem;}
.mb-2{margin-bottom:1rem;}
.mb-3{margin-bottom:1.5rem;}
.mb-4{margin-bottom:2rem;}
.p-1{padding:0.5rem;}
.p-2{padding:1rem;}
.p-3{padding:1.5rem;}
.p-4{padding:2rem;}


a{
 display:inline-block;
 word-break:normal;
 white-space:nowrap;
}


.clearfix::after{
 content:"";
 display:table;
 clear:both;
}


.adsense-container{
 margin:2rem 0;
 text-align:center;
 min-height:100px;
 background:#f9f9f9;
 padding:1rem;
 border-radius:8px;
}