* { margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif; transition: background 0.5s, color 0.5s;}
body { line-height:1.6; transition: background 0.5s, color 0.5s; overflow-x:hidden; min-height:100vh; display:flex; flex-direction:column; }

/* Farben */
:root {
    --accent-color: #fc800a;
    --bg-dark: #0f0f0f;
    --bg-light: #f5f5f5;
    --text-dark: #ffffff;
    --text-light: #111111;
    --text-secondary-dark: #aaa;
    --text-secondary-light: #555;
}

/* Themes */
body.dark { background: var(--bg-dark); color: var(--text-dark); }
body.light { background: var(--bg-light); color: var(--text-light); }

/* Header */
.container { 
    width:100%; 
    max-width:1200px; 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    padding:1rem; 
    position:sticky; 
    top:0; 
    z-index:999; 
    background: rgba(255,255,255,0.1); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    transition: top 0.4s, background 0.3s;
    margin: 0 auto; /* horizontal zentriert */
}
body.dark .container { background: rgba(15,15,15,0.7); }



header h1.logo { font-size:2rem; letter-spacing:2px; color: var(--accent-color); animation: glow 2s ease-in-out infinite alternate; }
nav { display:flex; flex-wrap:wrap; align-items:center; gap:0.7rem; }

/* Navbar Links */
nav a { text-decoration:none; padding:0.5rem 0.7rem; border-radius:5px; transition: all 0.3s; color: inherit; }
nav a:hover { background: var(--accent-color); color:#fff; }

/* Theme Button */
.theme-btn { margin-left:0.5rem; position: relative; z-index: 3; background:none; border:2px solid var(--accent-color); color: var(--accent-color); border-radius:50%; width:40px; height:40px; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; transition: all 0.3s; }
.theme-btn .icon { display:inline-block; transition: transform 0.3s; }

/* Circle Ripple Effekt */
#themeCircle { position: fixed; top:0; left:0; width:0; height:0; border-radius:50%; background: rgba(252,128,10,0.2); pointer-events:none; transform: translate(-50%, -50%) scale(0); transition: transform 0.6s ease; z-index:4; }

/* Hero */
.hero { position:relative; width:100%; height:100vh; display:flex; justify-content:center; align-items:center; overflow:hidden; }
#particleCanvas { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; filter: blur(2px); }
.hero-content { position:absolute; z-index:2; text-align:center; padding:1rem 2rem; border-radius:50px; backdrop-filter: blur(5px);  color:#fff; }

/* Light Mode Hero */
body.light .hero-content { color:#111; background: #fff; backdrop-filter: blur(5px); }

.hero-content h2 { font-size:3rem; margin-bottom:1rem; }
.hero-content p { font-size:1.2rem; margin-bottom:2rem; }
.hero-content button { padding:0.7rem 1.5rem; background: var(--accent-color); color:#fff; border:none; border-radius:5px; font-size:1rem; cursor:pointer; transition: transform 0.3s, box-shadow 0.3s; }
.hero-content button:hover { transform: scale(1.1); box-shadow:0 0 20px var(--accent-color); }

/* Clean Übergang Sections */
.projects, .music, .handball, .about, .contact { position: relative; z-index: 1; padding-top: 6rem; scroll-margin-top: 60px; }

/* Projekte */
.projects { padding:4rem 1rem; text-align:center;}
.projects h3 { font-size:2rem; margin-bottom:2rem; }
.project-cards { display:flex; justify-content:space-around; flex-wrap:wrap; gap:1rem; max-width:1150px; margin:auto; }
.card { background:#fff; padding:1.5rem; border-radius:10px; box-shadow:0 0 20px rgba(0,0,0,0.1); flex:1 1 250px; transition: transform 0.3s; max-width:360px; cursor:pointer; }
.card:hover { transform: translateY(-5px); }
body.dark .card { background:#1f1f1f; color:#fff; }
.project-link { color: var(--accent-color); text-decoration:none; transition: color 0.3s; }
.project-link:hover { color:#fff; background:var(--accent-color); padding:0.2rem 0.5rem; border-radius:5px; }

/* Musik */
.music { padding:4rem 0; text-align:center;}
.music h3 { font-size:2rem; margin-bottom:2rem; }

/* Handball Tabelle */
.handball { padding:4rem 1rem; text-align:center; border-radius:15px; overflow:hidden; }
.handball h3 { font-size:2rem; margin-bottom:2rem; color: inherit; }
#handball-tabelle { background:#fff; border-radius:10px; padding:1rem; max-width:75%; margin:auto; }
body.dark .handball { background: rgba(255,255,255,0.1); }
body.dark #handball-tabelle { background:#f5f5f5; color:#000; }

/* Über mich */
.about { padding:4rem 1rem; text-align:center; }
.about h3 { font-size:2rem; margin-bottom:1rem; }

/* Kontakt */
.contact { padding:4rem 1rem; text-align:center; flex:1; } /* flex:1 damit Footer immer unten bleibt */
.contact h3 { font-size:2rem; margin-bottom:1rem; }
.contact form { display:flex; flex-direction:column; gap:1rem; max-width:500px; margin:auto; }
.contact .input-group { display:flex; gap:1rem; flex-wrap:wrap; }
.contact input, .contact textarea { padding:0.7rem; border-radius:10px; border:1px solid #ccc; resize:none; box-shadow:0 2px 5px rgba(0,0,0,0.05); }
.contact button { padding:0.7rem; background: var(--accent-color); color:#fff; border:none; border-radius:10px; cursor:pointer; transition: transform 0.3s, box-shadow 0.3s; }
.contact button:hover { transform: scale(1.05); box-shadow:0 5px 15px rgba(252,128,10,0.4); }

/* Footer */
footer { text-align:center; padding:2rem 0; font-size:0.9rem; border-top:3px solid; margin-top:auto; background: rgba(255,255,255,0.05); }
body.dark footer { background: rgba(15,15,15,0.7); }

/* Keyframes */
@keyframes glow {0%{text-shadow:0 0 5px var(--accent-color);}100%{text-shadow:0 0 20px var(--accent-color);} }
@keyframes fadeIn {from{opacity:0; transform:translateY(20px);}to{opacity:1; transform:translateY(0);} }

/* Responsive */
@media(max-width:768px){
    .hero-content h2{font-size:2rem;}
    .hero-content p{font-size:1rem;}
    .project-cards{flex-direction:column; align-items:center;}
    .contact .input-group { flex-direction:column; }
}

/* Dropdown Menu */
.dropdown { position: relative; display: inline-block; }
.dropbtn { background: none; border: none; color: inherit; padding: 0.5rem 0.7rem; font-size: 1rem; cursor: pointer; border-radius: 5px; display: flex; align-items: center; gap: 0.3rem; transition: all 0.3s; }
.dropbtn:hover { background: var(--accent-color); color: #fff; }
.arrow { display: inline-block; transition: transform 0.3s; }
.arrow.rotated { transform: rotate(180deg); }
.dropdown-content { display: none; position: absolute; background-color: var(--bg-light); min-width: 160px; box-shadow: 0 8px 16px rgba(0,0,0,0.2); border-radius: 5px; z-index: 100; top: 100%; left: 0; opacity: 0; transform: translateY(-10px); transition: opacity 0.3s, transform 0.3s; }
.dropdown.open .dropdown-content,
.dropdown:hover .dropdown-content { display: block; opacity: 1; transform: translateY(0); }
@media(min-width:769px) { .dropdown:hover .dropdown-content { display: block; } }
.dropdown-content a { color: var(--text-light); padding: 12px 16px; text-decoration: none; display: block; transition: background 0.3s, color 0.3s; }
.dropdown-content a:hover { background: var(--accent-color); color: #fff; }
body.dark .dropdown-content { background-color: #1f1f1f; }
body.dark .dropdown-content a { color: #fff; }
body.dark .dropdown-content a:hover { background: var(--accent-color); color: #fff; }

/* Hamburger */
.hamburger { display: none; flex-direction: column; justify-content: space-around; width: 30px; height: 25px; background: none; border: none; cursor: pointer; padding: 0; z-index: 10; }
.hamburger span { width: 100%; height: 3px; background: var(--accent-color); border-radius: 2px; transition: all 0.3s; }
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* Mobile Navbar */
@media(max-width:768px){
    #navbar { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-light); flex-direction: column; display: none; padding: 1rem; gap: 1rem; border-top: 1px solid #ccc; }
    #navbar.open { display: flex; }
    #navbar a, .dropbtn { width: 100%; }
    body.dark #navbar { background: #1f1f1f; }
    .hamburger { display: flex; }
}




/* Cloud Upload Bereich */
.cloud-upload {
    flex: 1; /* Hauptbereich füllt den Rest */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 1rem;
    text-align: center;
}

.cloud-upload h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
}

.upload-box {
    width: 300px;
    padding: 2rem;
    border: 3px dashed var(--accent-color);
    border-radius: 20px;
    background: rgba(252,128,10,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    transition: background 0.3s, transform 0.3s;
}

.upload-box:hover {
    background: rgba(252,128,10,0.2);
    transform: scale(1.05);
}

.upload-box input[type="file"] {
    display: none;
}

.upload-box label {
    cursor: pointer;
    padding: 0.7rem 1.2rem;
    background: var(--accent-color);
    color: #fff;
    border-radius: 10px;
    font-weight: 600;
    transition: background 0.3s;
}

.upload-box label:hover {
    background: #e76b00;
}

.upload-box button {
    padding: 0.7rem 1.5rem;
    border: none;
    border-radius: 10px;
    background: var(--accent-color);
    color: #fff;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}

.upload-box button:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(252,128,10,0.4);
}

/* Footer */
footer {
    text-align: center;
    padding: 2rem 0;
    font-size: 0.9rem;
    border-top: 3px solid var(--accent-color);
    margin-top: auto;
    background: rgba(255,255,255,0.05);
}
body.dark footer {
    background: rgba(15,15,15,0.7);
}