/* style.css - Cyberpunk Edition (Fluid & Responsive Layout) */
:root {
    /* Cyberpunk Colors */
    --bg-color: #0b0c10; 
    --container-bg: #1f2833;
    --text-color: #c5c6c7;
    --neon-cyan: #66fcf1;
    --neon-pink: #ff007c;
    
    /* Vorgegebene Button-Farben (als Neon-Varianten) */
    --btn-green: #39ff14; 
    --btn-blue: #00f0ff;  
    --btn-yellow: #fcee0a; 
    
    --border-radius: 4px;
}

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    background-image: 
        linear-gradient(rgba(11, 12, 16, 0.92), rgba(11, 12, 16, 0.92)),
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(102, 252, 241, 0.03) 2px, rgba(102, 252, 241, 0.03) 4px);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Header */
.cyber-header { background-color: rgba(11, 12, 16, 0.95); border-bottom: 2px solid var(--neon-cyan); box-shadow: 0 0 10px rgba(102, 252, 241, 0.3); padding: 1rem 0; position: sticky; top: 0; z-index: 100; }
.header-container { width: 95%; max-width: 1440px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.logo a { color: #fff; text-decoration: none; font-size: 1.8rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; }
.logo span { color: var(--neon-pink); text-shadow: 0 0 8px var(--neon-pink); }
.main-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; }
.main-nav a { color: var(--text-color); text-decoration: none; font-weight: bold; text-transform: uppercase; font-size: 0.9rem; transition: color 0.3s; }
.main-nav a:hover { color: var(--neon-cyan); text-shadow: 0 0 8px var(--neon-cyan); }
.nav-logout { color: var(--btn-yellow) !important; }

/* Main Container */
.container { width: 95%; max-width: 1440px; margin: 3rem auto; padding: 2.5rem; background-color: rgba(31, 40, 51, 0.85); border: 1px solid rgba(102, 252, 241, 0.2); border-radius: var(--border-radius); box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(102, 252, 241, 0.05); flex-grow: 1; box-sizing: border-box; }

/* Landingpage & Auth */
.hero-section { text-align: center; padding: 4rem 1rem; border-bottom: 1px dashed var(--neon-pink); margin-bottom: 3rem; }
.hero-section h1 { font-size: clamp(2rem, 5vw, 4rem); border: none; padding: 0; margin-bottom: 1rem; text-shadow: 0 0 15px var(--neon-pink); }
.hero-section p { font-size: 1.2rem; max-width: 800px; margin: 0 auto 2rem auto; color: #fff; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 4rem; }
.feature-card { background: rgba(0,0,0,0.4); border-left: 3px solid var(--neon-cyan); padding: 1.5rem; transition: transform 0.3s; }
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 0 15px rgba(102, 252, 241, 0.2); }
.feature-card h3 { color: var(--neon-cyan); font-size: 1.2rem; }
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }

/* Typografie */
h1, h2, h3 { color: #fff; text-transform: uppercase; letter-spacing: 1px; margin-top: 0; }
h2 { border-bottom: 2px solid var(--neon-pink); padding-bottom: 10px; display: inline-block; }

/* Formulare */
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--neon-cyan); text-transform: uppercase; font-size: 0.85rem; }
.form-control { width: 100%; padding: 0.85rem; background-color: rgba(11, 12, 16, 0.8); border: 1px solid #45a29e; color: #fff; border-radius: var(--border-radius); box-sizing: border-box; font-family: inherit; transition: border-color 0.3s, box-shadow 0.3s; }
.form-control:focus { outline: none; border-color: var(--neon-cyan); box-shadow: 0 0 8px rgba(102, 252, 241, 0.6); }

/* Segmented Controls */
.segmented-control { display: flex; background-color: rgba(11, 12, 16, 0.9); padding: 4px; border-radius: var(--border-radius); border: 1px solid rgba(102, 252, 241, 0.3); gap: 4px; width: 100%; box-sizing: border-box; margin-bottom: 1.5rem; flex-wrap: nowrap; }
.segmented-control input[type="radio"] { display: none; }
.segmented-control label { flex: 1; text-align: center; padding: 10px 16px; border-radius: var(--border-radius); cursor: pointer; font-weight: 700; color: #888; text-transform: uppercase; transition: all 0.3s ease; margin: 0; font-size: clamp(0.7rem, 2vw, 0.9rem); }
.segmented-control input[type="radio"]:checked + label { background-color: var(--neon-cyan); color: #000; box-shadow: 0 0 15px rgba(102, 252, 241, 0.5); }

/* Buttons */
.btn { display: inline-flex; justify-content: center; align-items: center; padding: 12px 24px; border: none; border-radius: var(--border-radius); font-size: 1rem; font-weight: 800; text-transform: uppercase; cursor: pointer; text-align: center; text-decoration: none; transition: all 0.3s ease; box-sizing: border-box; }
.btn-green { background-color: var(--btn-green); color: #000; box-shadow: 0 0 10px rgba(57, 255, 20, 0.4); }
.btn-green:hover { box-shadow: 0 0 20px rgba(57, 255, 20, 0.8); transform: translateY(-2px); }
.btn-blue { background-color: var(--btn-blue); color: #000; box-shadow: 0 0 10px rgba(0, 240, 255, 0.4); }
.btn-blue:hover { box-shadow: 0 0 20px rgba(0, 240, 255, 0.8); transform: translateY(-2px); }
.btn-yellow { background-color: var(--btn-yellow); color: #000; box-shadow: 0 0 10px rgba(252, 238, 10, 0.4); }
.btn-yellow:hover { box-shadow: 0 0 20px rgba(252, 238, 10, 0.8); transform: translateY(-2px); }

.button-group { display: flex; gap: 10px; margin-top: 1rem; flex-wrap: wrap; }
.button-group .btn { flex: 1; min-width: 200px; }

/* Public Profile Klassen */
.top-action-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 10px; }
.artist-avatar { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; border: 3px solid var(--neon-pink); box-shadow: 0 0 20px rgba(255, 0, 124, 0.4); margin: 0 auto 1.5rem auto; display: block; }
.link-pill { display: inline-block; padding: 8px 16px; border: 1px solid var(--neon-cyan); border-radius: 20px; color: var(--neon-cyan); text-decoration: none; font-size: 0.85rem; font-weight: bold; margin: 5px; transition: all 0.3s; }
.link-pill:hover { background: var(--neon-cyan); color: #000; box-shadow: 0 0 10px var(--neon-cyan); }
.embed-gdpr-box { background: rgba(0,0,0,0.6); border: 1px dashed var(--btn-yellow); padding: 2rem; text-align: center; border-radius: var(--border-radius); margin-bottom: 1.5rem; }

/* Grid Cards (Discover) */
.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 1.5rem; }
.artist-card { background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(102, 252, 241, 0.2); border-radius: var(--border-radius); padding: 1.5rem; text-align: center; transition: transform 0.3s, box-shadow 0.3s; }
.artist-card:hover { transform: translateY(-5px); box-shadow: 0 0 15px rgba(102, 252, 241, 0.3); border-color: var(--neon-cyan); }
.artist-card-img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 2px solid var(--neon-pink); margin: 0 auto 1rem auto; display: block; box-shadow: 0 0 10px rgba(255, 0, 124, 0.3); }
.artist-card h3 { color: var(--neon-pink); margin-bottom: 5px; }
.artist-card p { margin: 5px 0; font-size: 0.9rem; }
.badge { display: inline-block; padding: 3px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: bold; background-color: var(--neon-cyan); color: #000; }
.badge-live { background-color: var(--neon-pink); color: #fff; }

/* Modals */
.checkbox-group { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 1.5rem; background: rgba(0, 0, 0, 0.2); padding: 10px; border: 1px dashed var(--neon-pink); border-radius: var(--border-radius); }
.checkbox-group input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; accent-color: var(--neon-pink); flex-shrink: 0; margin-top: 2px; }
.checkbox-group label { margin-bottom: 0; color: #fff; font-size: 0.9rem; text-transform: none; }
.checkbox-group a { color: var(--neon-cyan); text-decoration: underline; }

.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(11, 12, 16, 0.9); z-index: 999; justify-content: center; align-items: center; padding: 1rem; box-sizing: border-box; }
.modal-content { background: var(--container-bg); border: 2px solid var(--neon-cyan); box-shadow: 0 0 30px rgba(102, 252, 241, 0.2); padding: 2rem; max-width: 600px; width: 100%; border-radius: var(--border-radius); color: #fff; position: relative; box-sizing: border-box; max-height: 90vh; overflow-y: auto; }
.modal-close { position: absolute; top: 10px; right: 15px; color: var(--neon-pink); font-size: 1.5rem; cursor: pointer; font-weight: bold; }

/* Footer */
.cyber-footer { background-color: #0b0c10; border-top: 1px solid #1f2833; padding: 1.5rem 0; text-align: center; font-size: 0.85rem; color: #888; margin-top: auto; }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-top: 10px; }
.footer-links a { color: var(--neon-cyan); text-decoration: none; text-transform: uppercase; }

/* Utilities */
.text-center { text-align: center; }
.mb-2 { margin-bottom: 1.5rem; }
.mt-2 { margin-top: 1.5rem; }
hr.cyber-hr { border: 0; border-top: 1px solid rgba(102, 252, 241, 0.3); margin: 2rem 0; }
.d-flex { display: flex; flex-wrap: wrap; }
.gap-2 { gap: 10px; }

/* Media Queries */
@media (max-width: 900px) { .auth-grid { grid-template-columns: 1fr; gap: 2rem; } .auth-grid > div:nth-child(2) { border-left: none; padding-left: 0; border-top: 1px dashed rgba(102, 252, 241, 0.3); padding-top: 2rem; } }
@media (max-width: 768px) { .container { width: 100%; margin: 1rem 0; padding: 1.5rem; border-radius: 0; border-left: none; border-right: none; } .header-container { flex-direction: column; gap: 10px; } .main-nav { justify-content: center; width: 100%; } .segmented-control { flex-wrap: wrap; } .hero-section { padding: 2rem 0; } }