/* In views/css/matrixfall.css */
.matrixfall-container {
    width: fit-content;    /* Passt sich dem Inhalt an */
	/*width: 100%;  Responsive Breite */
    max-width: min(1000px, 95vw); /* Optimal für Canvas */
    
    /* Layout */
    margin: 20px auto;
    text-align: center;
    
    /* Design */
    border: 3px solid #669999;
    border-radius: 10px;
    padding: clamp(10px, 3vw, 20px); /* Responsives Padding */
    background: #f9f9f9;
    box-sizing: border-box;
    
    /* Sicherheit */
    overflow: hidden; /* Verhindert Überlauf */
}

.matrixfall-title {
    color: #333;
    margin-bottom: 15px;
    font-size: clamp(1.2em, 4vw, 1.8em); /* Responsive Schriftgröße */
    font-weight: bold;
}

.matrixfall-container canvas {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    background: transparent;
}

/* Spezielle Anpassungen für sehr kleine Bildschirme */
@media (max-width: 480px) {
    .matrixfall-container {
        max-width: 98vw; /* Noch mehr Platz auf sehr kleinen Screens */
        margin: 10px auto;
        border-width: 2px;
    }
}

.matrixfall-title {
    color: #333;
    margin-bottom: 15px;
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
}

/* WICHTIG: Canvas-Selektor korrigieren */
.matrixfall-container canvas {
    display: block;
    margin: 0 auto;
    max-width: 100%; /* responsive */
    height: auto; /* responsive */
    background: transparent;
}

/* Responsive Design für Mobile */
@media (max-width: 768px) {
    .matrixfall-container {
        margin: 10px auto;
        padding: 10px;
        border-width: 2px;
    }
    
    .matrixfall-title {
        font-size: 1.2em;
        margin-bottom: 10px;
    }
}