/* Grund-Stile & Fonts */
body { font-family: sans-serif; transition: background 0.3s; padding: 20px; }
.light-mode { background: #ffffff; color: #333; }
.dark-mode { background: #1a1a1a; color: #f0f0f0; }

/* Das Grid (Desktop: 6 Spalten) */
.input-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

/* Tablet: 3 Spalten */
@media (max-width: 900px) {
    .input-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Handy: 1 Spalte */
@media (max-width: 500px) {
    .input-grid { grid-template-columns: 1fr; }
}

/* Unsichtbare Tabellenstruktur für Items */
.grid-item {
    display: flex;
    flex-direction: column;
}

.grid-item input {
    padding: 8px;
    border: 1px solid #555;
    border-radius: 4px;
    background: transparent;
    color: inherit;
}

/* Ergebnis direkt unter der Eingabe */
.result-display {
    color: #3498db;
    font-weight: bold;
    font-size: 0.9em;
    min-height: 1.2em;
    margin-top: 4px;
}

/* Koordinaten-Felder über 2 Spalten im Desktop */
@media (min-width: 901px) {
    .coord-field { grid-column: span 2; }
}

/* Zentrierte Steuerung */
.control-center {
    text-align: center;
    margin: 40px 0;
}

.msek {
    margin-top: 10px;
    font-family: monospace;
}