/* Zusätzliche Stile für den Ceph-Rechner */

/* Sanfter Farbübergang im Hintergrund */
body {
    background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
}

/* Grundlegende Formular-Styles */
.form-control, input, select, textarea {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #2d3748 !important;
}

.form-control:focus, input:focus, select:focus, textarea:focus {
    background-color: #ffffff !important;
    border-color: #4299e1 !important;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.25) !important;
}

.form-control::placeholder, input::placeholder, select::placeholder, textarea::placeholder {
    color: #a0aec0 !important;
}

select option {
    background-color: #ffffff !important;
    color: #2d3748 !important;
}

/* Bessere Lesbarkeit für Ergebnisse */
.result-value {
    font-variant-numeric: tabular-nums;
}

/* Hover-Effekte für Karten */
.card-hover {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Light Mode Anpassungen */
@media (prefers-color-scheme: light) {
    .form-control, input, select, textarea {
        background-color: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        color: #2d3748 !important;
    }

    .form-control:focus, input:focus, select:focus, textarea:focus {
        background-color: #ffffff !important;
        border-color: #4299e1 !important;
        box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.25) !important;
    }

    .form-control::placeholder, input::placeholder, select::placeholder, textarea::placeholder {
        color: #a0aec0 !important;
    }

    select option {
        background-color: #ffffff !important;
        color: #2d3748 !important;
    }
}

/* Darkmode Anpassungen */
@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(135deg, #1a1a1a 0%, #2d3748 100%);
    }

    /* Eingabefelder im Darkmode */
    .form-control, input, select, textarea {
        background-color: #2d3748 !important;
        border: 1px solid #4a5568 !important;
        color: #e2e8f0 !important;
    }

    .form-control:focus, input:focus, select:focus, textarea:focus {
        background-color: #2d3748 !important;
        border-color: #63b3ed !important;
        box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.25) !important;
    }

    .form-control::placeholder, input::placeholder, select::placeholder, textarea::placeholder {
        color: #718096 !important;
    }

    select option {
        background-color: #2d3748 !important;
        color: #e2e8f0 !important;
    }
}

/* Responsive Anpassungen */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}