.main-container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.exercise-area {
    /* Modul-lokal kleinere Zahl-/Dropboxen: im Schritte-Modus stehen bis zu drei
       Gleichungszeilen UNTEREINANDER — mit der globalen Standardgröße (bis 180px)
       wurde der Block so hoch, dass autofit alles (inkl. der Zeilenabstände)
       uniform herunterskalierte → die Aufgaben klebten aneinander. Kleinere Boxen
       lassen den Block nativ passen, sodass die echten Abstände (math-steps gap)
       sichtbar bleiben. */
    --nb-box-size: clamp(58px, min(12vw, 13vh), 112px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* fit-content statt fixer width: 98vw — eine Gleichungszeile mit 5 Boxen
       kann auf dem Handy breiter als 98vw sein. Mit fester (oder per
       max-width gedeckelter) Breite würde sie einfach seitlich überlaufen UND
       autofit.js (misst die Breite von .main-container) sähe den wahren
       Platzbedarf nie — ein vw-Deckel ist auch unnötig, die Boxen selbst sind
       durch --nb-box-size-Clamps schon nach oben begrenzt. Mit ungedeckeltem
       fit-content wächst die Box mit dem Inhalt, autofit kann sie dann
       korrekt herunterskalieren. */
    width: fit-content;
    /* min- statt fixer Höhe: im Schritte-Modus (3 Gleichungszeilen) braucht der
       Inhalt mehr als 88vh — mit fester height liefe er über UND autofit.js
       (misst die Höhe von .main-container) sähe nur die fixen 88vh, nie den
       wahren Überlauf, und würde nie herunterskalieren. Mit min-height wächst
       die Box mit dem Inhalt, autofit kann sie dann korrekt einpassen. */
    min-height: 88vh;
    padding: 30px;
    background: white;
    border-radius: 20px;
    box-sizing: border-box;
    transition: padding 0.3s ease;
}

.exercise-area-expanded {
    padding: 80px 0 10px 0 !important;
}

.dotframe-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
}

.eye-btn {
    width: 60px;
    height: 60px;
    font-size: 2rem;
    background: #f0f0f0;
    border: 3px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 4px 0 #bbb;
}

.eye-btn:active {
    transform: translateY(3px);
    box-shadow: none;
}

.eye-btn.active {
    background: #3498db;
    border-color: #2980b9;
    color: white;
    box-shadow: 0 4px 0 #1c5980;
}

.math-steps {
    display: flex;
    flex-direction: column;
    /* Mehr Luft zwischen den untereinander stehenden Gleichungszeilen. */
    gap: clamp(18px, 4vh, 40px);
    align-items: center;
    flex-grow: 1;
    justify-content: center;
}

.math-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Bereinigte Operatoren-Klasse: Nutzt nun Variablen aus numberbox.css */
.math-op, .nb-symbol {
    font-weight: 800;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* visibility statt display:none → die Rechenzeilen reservieren ihren Platz von
   Anfang an, damit beim schrittweisen Einblenden nichts springt. Der Mode-Wechsel
   (Schritte/Split) blendet weiterhin den ganzen Container per inline-display aus,
   sodass nur die Zeilen des aktiven Modus Platz belegen. */
.step-hidden-row {
    visibility: hidden !important;
}

.step-hidden { 
    visibility: hidden; 
}

.step-divider {
    width: 100%;
    max-width: 600px;
    height: 2px;
    background: #edf2f7;
    margin: 5px 0;
}

.options-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 15px 10px;
    border-top: 2px dashed #e2e8f0;
    min-height: 120px;
    margin-top: auto;
}


.mode-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}