@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   Lernkarte.com – Einheitliches Design-System ("LK Design System")
   --------------------------------------------------------------------------
   Wird als LETZTE Stylesheet-Datei geladen und legt einen zusammenhaengenden,
   modernen Look ueber die App. Ziele:
     1. Alle widerspruechlichen Token-Namen auf EINE Palette vereinheitlichen.
     2. Die modernen Komponenten (mp-*, modern-card) polieren.
     3. Die alten Bootstrap-Seiten (Gruppen-Details etc.) optisch angleichen,
        ohne sie neu schreiben zu muessen.
   Nur "Skin" (Farben/Schatten/Radius/Typo) – keine Layout-Struktur, damit
   nichts an Positionierung/Grid kaputtgeht. Bei Bedarf 1 <link> in header.php
   entfernen, um alles zurueckzusetzen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design-Tokens – eine Quelle der Wahrheit
   Alle in der Codebasis genutzten Variablennamen zeigen auf dieselben Werte,
   damit Komponenten aus verschiedenen Bauphasen konsistent aussehen.
   -------------------------------------------------------------------------- */
:root {
    /* Markenfarben */
    --lk-indigo:   #6366f1;
    --lk-violet:   #8b5cf6;
    --lk-blue:     #3b82f6;
    --lk-teal:     #2dd4bf;
    --lk-green:    #10b981;
    --lk-amber:    #f59e0b;
    --lk-red:      #ef4444;

    /* Text & Flaechen */
    --lk-text:        #1e293b;
    --lk-text-muted:  #64748b;
    --lk-bg:          #f4f5fb;
    --lk-surface:     #ffffff;
    --lk-border:      #e6e8f0;

    /* Verlaeufe */
    --lk-gradient:        linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --lk-gradient-blue:   linear-gradient(135deg, #3b82f6 0%, #2dd4bf 100%);
    --lk-gradient-danger: linear-gradient(135deg, #ef4444 0%, #f87171 100%);

    /* Radien */
    --lk-radius-lg: 22px;
    --lk-radius-md: 15px;
    --lk-radius-sm: 11px;

    /* Schatten (weich, mehrstufig) */
    --lk-shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
    --lk-shadow-md: 0 4px 16px rgba(31,38,135,.08), 0 2px 6px rgba(16,24,40,.05);
    --lk-shadow-lg: 0 16px 40px rgba(31,38,135,.12), 0 6px 14px rgba(16,24,40,.06);
    --lk-ring:      0 0 0 4px rgba(99,102,241,.18);

    --lk-transition: .18s cubic-bezier(.4,0,.2,1);

    /* ---- Aliase: aeltere/alternative Namen auf dieselbe Palette zeigen ---- */
    --primary-color: var(--lk-indigo);
    --primary:       var(--lk-indigo);
    --secondary-color: var(--lk-violet);
    --dark-color:    var(--lk-text);
    --success-color: var(--lk-green);
    --success:       var(--lk-green);
    --danger-color:  var(--lk-red);
    --text-main:     var(--lk-text);
    --text-muted:    var(--lk-text-muted);
    --gray-light:    var(--lk-bg);
    --glass-bg:      rgba(255,255,255,.9);
    --glass-border:  rgba(255,255,255,.7);
    --glass-shadow:  var(--lk-shadow-md);
    --primary-gradient:   var(--lk-gradient);
    --gradient-primary:   var(--lk-gradient);
    --secondary-gradient: var(--lk-gradient-blue);
    --danger-gradient:    var(--lk-gradient-danger);
    --border-radius:      var(--lk-radius-md);
    --border-radius-lg:   var(--lk-radius-lg);
    --border-radius-md:   var(--lk-radius-md);
    --border-radius-sm:   var(--lk-radius-sm);
    --box-shadow:         var(--lk-shadow-md);
    --transition:         var(--lk-transition);
    --transition-base:    var(--lk-transition);
}

/* --------------------------------------------------------------------------
   2. Typografie & Grundlage (Font-Import steht am Dateianfang)
   -------------------------------------------------------------------------- */
body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--lk-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, .navbar-brand { letter-spacing: -0.02em; }
h1 { font-weight: 800; }
h2, h3 { font-weight: 700; }

a { transition: color var(--lk-transition); }

/* Sichtbarer Fokus-Ring fuer Tastatur-Navigation (Barrierefreiheit) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .btn:focus-visible {
    outline: none !important;
    box-shadow: var(--lk-ring) !important;
    border-radius: var(--lk-radius-sm);
}

/* --------------------------------------------------------------------------
   3. Karten – modern-card UND Bootstrap .card auf denselben Look
   -------------------------------------------------------------------------- */
.modern-card,
.card {
    background: var(--lk-surface);
    border: 1px solid var(--lk-border);
    border-radius: var(--lk-radius-lg);
    box-shadow: var(--lk-shadow-md);
    transition: transform var(--lk-transition), box-shadow var(--lk-transition);
}
.modern-card:hover,
.card:hover {
    box-shadow: var(--lk-shadow-lg);
}
.card { overflow: hidden; }
.card-img-top { border-bottom: 1px solid var(--lk-border); }
.card-footer, .card-header { background: transparent; border-color: var(--lk-border); }

/* --------------------------------------------------------------------------
   4. Buttons – mp-btn UND Bootstrap .btn vereinheitlicht
   -------------------------------------------------------------------------- */
.mp-btn, .btn {
    border-radius: var(--lk-radius-sm);
    font-weight: 600;
    transition: transform var(--lk-transition), box-shadow var(--lk-transition), background var(--lk-transition), opacity var(--lk-transition);
    border: 1px solid transparent;
}
.mp-btn:active, .btn:active { transform: translateY(1px); }

.mp-btn-primary, .btn-primary {
    background: var(--lk-gradient) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(99,102,241,.30);
}
.mp-btn-primary:hover, .btn-primary:hover {
    box-shadow: 0 6px 20px rgba(99,102,241,.42);
    transform: translateY(-1px);
    color: #fff !important;
}

.mp-btn-success, .btn-success {
    background: var(--lk-gradient-blue) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(45,212,191,.30);
}
.mp-btn-success:hover, .btn-success:hover { transform: translateY(-1px); color:#fff !important; }

.mp-btn-danger, .btn-danger {
    background: var(--lk-gradient-danger) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(239,68,68,.28);
}
.mp-btn-danger:hover, .btn-danger:hover { transform: translateY(-1px); color:#fff !important; }

/* Outline-Buttons */
.mp-btn-outline,
.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger, .btn-outline-success {
    background: var(--lk-surface) !important;
    border: 1px solid var(--lk-border) !important;
    color: var(--lk-text) !important;
    box-shadow: var(--lk-shadow-sm);
}
.mp-btn-outline:hover,
.btn-outline-primary:hover, .btn-outline-secondary:hover {
    border-color: var(--lk-indigo) !important;
    color: var(--lk-indigo) !important;
    background: rgba(99,102,241,.05) !important;
}
.btn-outline-danger:hover { border-color: var(--lk-red) !important; color: var(--lk-red) !important; background: rgba(239,68,68,.05) !important; }

.mp-btn-sm, .btn-sm { font-size: .8rem; }

/* --------------------------------------------------------------------------
   5. Formularfelder – mp-field UND Bootstrap .form-control/.form-select
   -------------------------------------------------------------------------- */
.mp-field,
.form-control, .form-select {
    border-radius: var(--lk-radius-sm) !important;
    border: 1px solid var(--lk-border) !important;
    background: #fff !important;
    color: var(--lk-text) !important;
    transition: border-color var(--lk-transition), box-shadow var(--lk-transition) !important;
}
.mp-field:focus,
.form-control:focus, .form-select:focus {
    border-color: var(--lk-violet) !important;
    box-shadow: var(--lk-ring) !important;
    outline: none !important;
}
.mp-label {
    font-weight: 600;
    color: var(--lk-text-muted);
    font-size: .82rem;
    letter-spacing: .01em;
}

/* --------------------------------------------------------------------------
   6. Badges – mp-badge UND Bootstrap .badge
   -------------------------------------------------------------------------- */
.mp-badge {
    border-radius: 999px;
    font-weight: 600;
    font-size: .72rem;
    padding: .25rem .6rem;
}
.mp-badge.purple { background: rgba(99,102,241,.12); color: #4f46e5; }
.mp-badge.blue   { background: rgba(59,130,246,.12); color: #2563eb; }
.mp-badge.green  { background: rgba(16,185,129,.14); color: #059669; }
.mp-badge.amber  { background: rgba(245,158,11,.14); color: #b45309; }
.mp-badge.red    { background: rgba(239,68,68,.12); color: #dc2626; }

/* Bootstrap-Badges (nutzen !important) auf die Markenpalette bringen */
.badge.bg-primary   { background: var(--lk-indigo) !important; color: #fff !important; }
.badge.bg-secondary { background: var(--lk-violet) !important; color: #fff !important; }
.badge.bg-success   { background: var(--lk-green) !important; color: #fff !important; }
.badge.bg-info      { background: var(--lk-blue) !important; color: #fff !important; }
.badge.bg-warning   { background: var(--lk-amber) !important; color: #fff !important; }
.badge.bg-danger    { background: var(--lk-red) !important; color: #fff !important; }

/* --------------------------------------------------------------------------
   7. Listen-Items (mp-item) – feiner Hover
   -------------------------------------------------------------------------- */
.mp-item {
    border: 1px solid var(--lk-border);
    border-radius: var(--lk-radius-md);
    background: var(--lk-surface);
    transition: box-shadow var(--lk-transition), transform var(--lk-transition), border-color var(--lk-transition);
}
.mp-item:hover {
    box-shadow: var(--lk-shadow-md);
    border-color: rgba(99,102,241,.25);
    transform: translateY(-1px);
}
.mp-item-icon {
    border-radius: var(--lk-radius-sm);
    background: var(--lk-gradient);
    color: #fff;
}
.mp-item-icon.blue  { background: var(--lk-gradient-blue); }
.mp-item-icon.amber { background: linear-gradient(135deg,#f59e0b,#fbbf24); }
.mp-item-icon.green { background: linear-gradient(135deg,#10b981,#34d399); }
.mp-item-icon.purple{ background: var(--lk-gradient); }

/* --------------------------------------------------------------------------
   8. Banner / Alerts – mp-banner UND Bootstrap .alert
   -------------------------------------------------------------------------- */
.mp-banner, .alert {
    border-radius: var(--lk-radius-md);
    border: 1px solid transparent;
    font-size: .92rem;
}
.alert-success, .mp-banner.success { background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.25); color: #047857; }
.alert-danger,  .mp-banner.error   { background: rgba(239,68,68,.09);  border-color: rgba(239,68,68,.25);  color: #b91c1c; }
.alert-info     { background: rgba(59,130,246,.09); border-color: rgba(59,130,246,.22); color: #1d4ed8; }
.alert-warning  { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.25); color: #b45309; }

/* --------------------------------------------------------------------------
   9. Modals & Tabellen (Bootstrap-Legacy angleichen)
   -------------------------------------------------------------------------- */
.modal-content {
    border: none;
    border-radius: var(--lk-radius-lg);
    box-shadow: var(--lk-shadow-lg);
    overflow: hidden;
}
.modal-header, .modal-footer { border-color: var(--lk-border); }

.table { color: var(--lk-text); }
.table thead th {
    border-bottom: 2px solid var(--lk-border);
    color: var(--lk-text-muted);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.table tbody tr { transition: background var(--lk-transition); }
.table-hover tbody tr:hover { background: rgba(99,102,241,.04); }

/* --------------------------------------------------------------------------
   10. Empty States, Divider, Pagination – feiner Schliff
   -------------------------------------------------------------------------- */
.mp-empty-icon {
    background: var(--lk-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.mp-divider { border-color: var(--lk-border); }
.mp-pagination a, .mp-pagination span {
    border-radius: var(--lk-radius-sm);
    border: 1px solid var(--lk-border);
    transition: all var(--lk-transition);
}
.mp-pagination a:hover { border-color: var(--lk-indigo); color: var(--lk-indigo); }
.mp-pagination .active, .mp-pagination [aria-current="page"] {
    background: var(--lk-gradient);
    color: #fff;
    border-color: transparent;
}

/* --------------------------------------------------------------------------
   11. Sanfte Einblend-Animation (vorhandene .fade-in Klasse verfeinern)
   -------------------------------------------------------------------------- */
@keyframes lkFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fade-in { animation: lkFadeIn .35s ease both; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------------------------------------
   12. Dark Mode (body.dark-mode) – Token-Palette umstellen und die mit
   !important gesetzten Flaechen/Felder dunkel halten. Hoehere Spezifitaet
   (body.dark-mode .x) gewinnt gegen die hellen Default-Regeln oben.
   -------------------------------------------------------------------------- */
body.dark-mode {
    --lk-text:        #e5e7eb;
    --lk-text-muted:  #9aa3b2;
    --lk-surface:     #20232e;
    --lk-border:      #2e3240;
    --glass-bg:       #20232e;
    --glass-border:   #2e3240;
}

body.dark-mode .modern-card,
body.dark-mode .card,
body.dark-mode .mp-item,
body.dark-mode .modal-content {
    background: #20232e;
    border-color: #2e3240;
    color: #e5e7eb;
}

body.dark-mode .mp-field,
body.dark-mode .form-control,
body.dark-mode .form-select {
    background: #20232e !important;
    border-color: #2e3240 !important;
    color: #e5e7eb !important;
}

body.dark-mode .mp-btn-outline,
body.dark-mode .btn-outline-primary,
body.dark-mode .btn-outline-secondary,
body.dark-mode .btn-outline-danger,
body.dark-mode .btn-outline-success {
    background: #20232e !important;
    border-color: #2e3240 !important;
    color: #e5e7eb !important;
}

body.dark-mode .mp-label,
body.dark-mode .table thead th { color: #9aa3b2; }
body.dark-mode .table { color: #e5e7eb; }
body.dark-mode .table-hover tbody tr:hover { background: rgba(255,255,255,.04); }

/* --------------------------------------------------------------------------
   Sticky Footer
   Bei kurzen Seiten (z.B. Lern-Ansicht auf dem Handy) rutschte der Footer
   in die Bildschirmmitte. Loesung: Body als Flex-Spalte ueber die volle
   Viewport-Hoehe, der Hauptinhalt dehnt sich, der Footer bleibt immer
   buendig am unteren Rand - egal wie wenig Inhalt die Seite hat.
   -------------------------------------------------------------------------- */
html { height: 100%; }
body {
    min-height: 100vh;
    min-height: 100dvh; /* beruecksichtigt die dynamische Safari-Leiste auf iOS */
    display: flex;
    flex-direction: column;
}
main.main { flex: 1 0 auto; }
.footer { margin-top: auto; flex-shrink: 0; }