/* ====== Global Reset & Container ====== */
.hero-animation-container *{margin:0;padding:0;box-sizing:border-box}
.hero-animation-container{width:100%;max-width:500px;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;margin:0 auto;}
.hero-animation-container .monitor-content{flex:1;display:flex;align-items:center;justify-content:center;padding:18px}

/* ====== Code Display ====== */
.hero-animation-container .code-display{font-family:'Monaco',monospace;font-size:14px;line-height:1.6;color:#f1f5f9;opacity:0;transition:opacity .5s ease}
.hero-animation-container .code-display.show{opacity:1}
.hero-animation-container .code-line{margin:4px 0;opacity:0;transform:translateX(-20px);transition:all .3s ease;white-space:pre;font-size:15px;line-height:1.75;max-width:90vw}
.hero-animation-container .code-line.show{opacity:1;transform:translateX(0)}

/* ====== Syntax Highlight ====== */
.hero-animation-container .keyword{color:#facc15}
.hero-animation-container .tag{color:#22c55e}
.hero-animation-container .attribute{color:#3b82f6}
.hero-animation-container .string{color:#f87171}
.hero-animation-container .comment{color:#94a3b8}

/* ====== Input Field & Label ====== */
.hero-animation-container .input-section {
    margin-top: 16px;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
}
.hero-animation-container .input-container {
    background: rgba(55,65,81,0.80); /* bg-bg-card/80 */
    backdrop-filter: blur(6px);
    border: 1.5px solid #374151; /* border-border-primary */
    border-radius: 12px;
    padding: 0.5rem 1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    position: relative;
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.hero-animation-container .input-label {
    position: absolute;
    top: -12px;
    left: 20px;
    background: rgba(55,65,81,0.80);
    padding: 0 8px;
    font-size: 13px;
    color: #9ca3af; /* text-secondary */
    font-weight: 500;
    letter-spacing: .5px;
    border-radius: 6px;
}
.hero-animation-container .input-field {
    width: 100%;
    padding: 14px 18px;
    font-size: 16px;
    font-family: 'Karla', 'Poppins', 'Monaco', monospace, sans-serif;
    background: rgba(17,24,39,0.95); /* bg-bg-primary/95 */
    border: 1.5px solid #374151;
    border-radius: 8px;
    color: #e2e8f0;
    outline: none;
    transition: all .3s ease;
    box-shadow: none;
}
.hero-animation-container .input-field:focus {
    border-color: #facc15;
    box-shadow: 0 0 0 2px #facc15;
    background: rgba(17,24,39,1);
}
.hero-animation-container .typing-cursor{display:inline-block;width:1.5px;height:20px;background:#fef08a;margin-left:2px;animation:blink 1.2s ease-in-out infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* ====== Ambient Glow & Pulses ====== */
/* Status indicator entfernt - Pause/Play Button übernimmt die Position */

/* ====== Monitor Shell ====== */
.hero-animation-container .monitor-shell {
    width: 500px;
    height: 340px;
    min-height: unset;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 0 32px 0;
    padding: 0;
    position: relative;
}
.hero-animation-container .monitor-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 100%;
    height: 100%;
}
/* ====== Fadeout Animation für Content ====== */
.hero-animation-container .monitor-content.fadeout {
    animation: fadeout 0.35s cubic-bezier(.4,0,.6,1);
    opacity: 0;
}
@keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}
/* ====== Responsive Anpassungen ====== */
@media (max-width: 640px) {
    .hero-animation-container {
        width: 100%;
        height: 100vh;
        min-height: unset;
        padding: 0 0 24px 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* <-- nicht mehr space-between */
        align-items: stretch;
    }
    .hero-animation-container .monitor-shell {
        width: 100%;
        margin-bottom: 24px; /* Abstand zur Input-Box */
        box-sizing: border-box;
    }
    .hero-animation-container .input-section {
        width: 100%;
        box-sizing: border-box;
    }
    .hero-animation-container .input-container {
        width: 100%;
        box-sizing: border-box;
    }
    .hero-animation-container > * {
        width: 100%;
        box-sizing: border-box;
    }
    .hero-animation-container canvas {
        width: 100% !important;
        height: auto !important;
        display: block;
    }
    .hero-animation-container .monitor-content {
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
        width: 100%;
    }
}