/* --- GRUNDEINSTELLung FÜR KONSISTENTES LAYOUT --- */
* {
    box-sizing: border-box;
}

/* Generelles Styling */
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #121212;
    color: #ffffff;
    line-height: 1.6;
}
h1, h2 {
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.content-section {
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Hero, Galerie, Footer */
.hero { background: url('images/hintergrund.jpg') no-repeat center center/cover; height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; color: white; position: relative; }
.hero::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); }
.hero-content { position: relative; z-index: 2; background: rgba(0, 0, 0, 0.3); padding: 40px; border-radius: 10px; }
.hero h1 { font-size: 4rem; margin-bottom: 10px; }
.hero p { font-size: 1.5rem; font-weight: 300; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 40px; }
.gallery-grid img { width: 100%; height: auto; border-radius: 8px; }
footer { background-color: #1f1f1f; text-align: center; padding: 40px 20px; }
.social-links a { color: #ffffff; text-decoration: none; margin: 0 15px; font-size: 1.2rem; transition: color 0.3s ease; }
.social-links a:hover { color: #00ff99; }

/* --- BEAT STATION STYLING --- */
.beat-station-container {
    background-color: #1e1e1e;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    -webkit-user-select: none;
    user-select: none;
}

/* Globale Steuerung */
.global-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background-color: #121212;
    border-radius: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.global-controls button {
    background-color: #333;
    color: #fff;
    border: 1px solid #555;
    padding: 10px 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s;
}
.global-controls button:hover {
    background-color: #00ff99;
    color: #121212;
    border-color: #00ff99;
}
#play-button.playing { background-color: #00ff99; color: #121212; }
.bpm-slider { display: flex; align-items: center; color: #ccc; }
.bpm-slider input[type="range"] { margin-left: 10px; width: 150px; }
#bpm-value { font-weight: bold; color: #00ff99; }
#loading-message { width: 100%; text-align: center; color: #00ff99; font-weight: bold; }

/* Pattern Buttons */
.pattern-controls {
    display: flex;
    gap: 5px;
    background-color: #2a2a2a;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #444;
}
.pattern-btn {
    width: 35px;
    height: 35px;
    background-color: #444;
    color: #ccc;
    border: 1px solid #666;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}
.pattern-btn:hover { background-color: #555; }
.pattern-btn.active {
    background-color: #00ff99;
    color: #121212;
    border-color: #00ff99;
}

/* Effekt-Rack Styling */
.effects-rack {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #121212;
    border-radius: 8px;
}
.effects-rack h3 {
    margin: 0;
    font-size: 1em;
    text-transform: uppercase;
    color: #888;
    align-self: center;
}
.effect-group {
    display: flex;
    gap: 8px;
    background-color: #2a2a2a;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #444;
}
.effect-btn {
    background-color: #444;
    color: #ccc;
    border: 1px solid #666;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}
.effect-btn:hover {
    background-color: #555;
}
.effect-btn.active {
    background-color: #ffa500;
    color: #121212;
    border-color: #ffa500;
    box-shadow: 0 0 8px rgba(255, 165, 0, 0.7);
}
#clear-step-btn.active {
    background-color: #dc3545; /* Rot für den Clear-Modus */
    border-color: #dc3545;
    color: #fff;
}


/* Mixer und Grid */
.sequencer-mixer-wrapper { display: flex; gap: 10px; width: 100%; }
.mixer-controls { display: flex; flex-direction: column; gap: 2px; }
.track-mixer { height: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #2c2c2c; padding: 5px 10px; border-radius: 5px; }
.track-mixer .track-label { font-weight: bold; font-size: 0.9em; width: 100%; text-align: center; margin-bottom: 5px; color: #eee; }
.track-controls-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.track-controls-row button { font-weight: bold; width: 25px; height: 20px; border: 1px solid #555; border-radius: 3px; cursor: pointer; font-size: 0.7em; background-color: #444; color: #ccc; }
.track-controls-row button.active { background-color: #ffa500; color: #fff; }
.track-controls-row input[type="range"] { width: 80px; }
.grid-container { display: flex; flex-direction: column; flex-grow: 1; gap: 2px; }
.grid-row { display: grid; grid-template-columns: repeat(16, 1fr); gap: 2px; height: 60px; }

/* Grid Step Styling */
.step {
    background-color: #3a3a3a;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.1s;
    touch-action: manipulation;
    position: relative;
}
.step:hover { background-color: #555; }
.step:nth-child(4n + 1) { background-color: #4a4a4a; }
.step.active { background-color: #00ff99; }
.step.playing { outline: 2px solid #fff; z-index: 2; }
.step.mute { background-color: #6c757d; }
.step.gate { background-color: #6f42c1; }
.step.duck { background-color: #0d6efd; }
.step.roll { background-color: #ffc107; }
.step.dist { background-color: #dc3545; }

/* REC Button */
#rec-button { background-color: #555; color: #fff; border: 1px solid #ff4545; }
#rec-button:hover { background-color: #ff4545; color: #fff; }
#rec-button.recording { background-color: #ff4545; color: white; animation: pulse 1.5s infinite; }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 69, 69, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 69, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 69, 69, 0); }
}

/* Mobile Anpassungen */
@media (max-width: 900px) {
    .beat-station-container { max-height: 85vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px; }
    .sequencer-mixer-wrapper { overflow-x: auto; min-width: 810px; }
}

/* --- SYNTHESIZER MODAL STYLING --- */
.modal-hidden { display: none; }
.modal-visible { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.modal-content { background-color: #2c2c2c; padding: 20px 30px; border-radius: 10px; width: 90%; max-width: 500px; border: 1px solid #555; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.modal-content h3 { text-align: center; margin-top: 0; margin-bottom: 25px; color: #00ff99; }
.synth-group { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #444; }
.synth-group:last-of-type { border-bottom: none; }
.synth-group h4 { margin-top: 0; margin-bottom: 10px; color: #ccc; font-size: 1em; }
.button-group { display: flex; gap: 10px; }
.button-group button { flex-grow: 1; padding: 8px; background-color: #444; color: #ccc; border: 1px solid #666; border-radius: 4px; cursor: pointer; }
.button-group button.active { background-color: #0d6efd; color: #fff; border-color: #0d6efd; }
.slider-group { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; }
.slider-group label { width: 80px; }
.slider-group input[type="range"] { flex-grow: 1; }
#synth-note-display { font-weight: bold; color: #00ff99; width: 40px; text-align: center; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 25px; }
.modal-actions button { padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer; font-weight: bold; }
#synth-save-btn { background-color: #00ff99; color: #121212; }
#synth-cancel-btn { background-color: #444; color: #ccc; }