/* ==========================================================================
   1. GLOBAL RESETS & SCHRIFTARTEN
   ========================================================================== */
@import url('https://googleapis.com');

:root {
    /* Eigene Farbvariablen (Passend zu Bootstrap, aber feingetunt) */
    --primary-color: #0d6efd;
    --primary-hover: #0b5ed7;
    --bg-global: #f8f9fa;
    --text-main: #212529;
    --text-muted: #6c757d;
    --border-radius-custom: 12px;
    --transition-speed: 0.25s;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg-global);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   2. MODERNE FORMULAR-OPTIMIERUNGEN
   ========================================================================== */
.form-control, .form-select {
    border-radius: var(--border-radius-custom);
    padding: 0.625rem 1rem;
    border: 1px solid #ced4da;
    background-color: #ffffff;
    transition: border-color var(--transition-speed) ease-in-out, 
                box-shadow var(--transition-speed) ease-in-out;
}

/* Weicher, moderner Fokus-Effekt statt des harten Standard-Rings */
.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15);
    outline: none;
}

/* ==========================================================================
   3. BUTTONS & INTERAKTIONEN
   ========================================================================== */
.btn {
    border-radius: var(--border-radius-custom);
    padding: 0.625rem 1.25rem;
    font-weight: 500;
    transition: all var(--transition-speed) ease;
}

/* Leichter Schwebe-Effekt für alle Buttons (Skaliert minimal nach oben) */
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.btn:active {
    transform: translateY(0);
}

/* ==========================================================================
   4. KARTEN & CONTAINER (CARDS)
   ========================================================================== */
.card {
    border: none;
    border-radius: 16px; /* Etwas runder für ein modernes "App"-Gefühl */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    background-color: #ffffff;
    transition: transform var(--transition-speed) ease, 
                box-shadow var(--transition-speed) ease;
}

/* ==========================================================================
   5. NÜTZLICHE HELFER (PROJEKTSPEZIFISCH)
   ========================================================================== */
/* Flüssige Animation für den AJAX-Spinner */
.spinner-custom {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(13, 110, 253, 0.1);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Schickes Styling für die AJAX-Live-Liste */
.list-group-item {
    border: 1px solid #edf2f7;
    margin-bottom: 8px;
    border-radius: var(--border-radius-custom) !important; /* Erzwingt Rundung pro Element */
    transition: background-color var(--transition-speed) ease;
}

.list-group-item:hover {
    background-color: #f1f5f9;
}