/* Greift NUR auf iPhones und iPads */
html.ios-device {
    font-size: 13px; /* Teste Werte zwischen 14px und 15px */
}

/* inter-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2'); 
}
/* inter-500 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/inter-v20-latin-500.woff2') format('woff2'); 
}
/* inter-600 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/inter-v20-latin-600.woff2') format('woff2'); 
}
/* inter-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/inter-v20-latin-700.woff2') format('woff2'); 
}

/* ========================================================================
   HARDCORE CHECKBOX FIX (Ganz oben einfügen)
   ======================================================================== */

/* Wir nutzen die ID (#ai-select-all) für maximale Stärke */
#ai-select-all, 
input.custom-checkbox {
    /* Setzt das native Aussehen zurück (WICHTIG) */
    -webkit-appearance: none !important;
    appearance: none !important;
    
    /* Design der Box */
    background-color: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 6px !important;
    width: 1.5rem !important;  /* Etwas größer zum Testen */
    height: 1.5rem !important;
    
    /* Positionierung */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 !important;
    position: relative;
    
    /* Killt eventuelle Tailwind-Hintergrundbilder */
    background-image: none !important;
}
/* 2. DARK MODE (Der Teil, der fehlte) */
.dark #ai-select-all, 
.dark input.custom-checkbox {
    background-color: rgba(255, 255, 255, 0.05) !important; /* Fast transparent dunkel */
    border-color: rgba(255, 255, 255, 0.2) !important;      /* Hellerer Rand */
}

/* Wenn angeklickt -> BLAU */
#ai-select-all:checked,
input.custom-checkbox:checked {
    background-color: #0ea5e9 !important; /* Helles Blau */
    border-color: #0ea5e9 !important;
}

/* Das Häkchen (wird per CSS 'reinprojiziert') */
#ai-select-all:checked::after,
input.custom-checkbox:checked::after {
    content: '✓';
    font-size: 1rem;
    font-weight: 900;
    color: white !important;
    line-height: 1;
    display: block;
}

/* Fokus-Rahmen (für Tastatur-Navigation) */
#ai-select-all:focus,
input.custom-checkbox:focus {
    outline: 2px solid #0ea5e9 !important;
    outline-offset: 2px;
}
/* ========================================================================
   GRUNDGERÜST & BODY
   ======================================================================== */

body {
    font-family: 'Inter', sans-serif;
    /* --- Übersetzt von @apply --- */
    background-color: #f1f5f9; /* bg-slate-100 */
    color: #1e293b; /* text-slate-800 */
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms; /* transition-colors duration-300 */
    overscroll-behavior-y: none;
}

.dark body {
    background-color: #0f172a; /* dark:bg-slate-900 */
    color: #cbd5e1; /* dark:text-slate-300 */
}

html, body {
    /* Verhindert Gummiband-Scrollen modern und sicher */
    overscroll-behavior-y: none;
    overscroll-behavior-x: none;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    
    /* HIER IST DER FIX FÜR ANDROID: */
    overflow: hidden; 
    
    /* Zwingt Safari, die Schriftgrößen exakt wie auf Android zu belassen */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

#app {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none; 
}

/* --- NEU: Dynamisches Padding für iPhones mit Notch/Rundungen --- */
/* Addiert zum Standard-Abstand (1rem = 16px) den Hardware-Abstand des iPhones */
.safe-padding {
    padding-top: calc(1rem + env(safe-area-inset-top));
    padding-right: calc(1rem + env(safe-area-inset-right));
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    padding-left: calc(1rem + env(safe-area-inset-left));
}

/* ========================================================================
   TEXTMARKIERUNG (APP-FEELING) GLOBAL DEAKTIVIEREN
   ======================================================================== */

/* 1. Global die Markierung verbieten */
body {
    -webkit-user-select: none; /* Für Safari / iOS */
    user-select: none;         /* Für moderne Browser */
}

/* 2. Ausnahmen definieren (Hier darf markiert & getippt werden) */
input, 
textarea, 
.ql-editor, 
[contenteditable="true"] {
    -webkit-user-select: auto !important;
    user-select: auto !important;
}
/* ========================================================================
   CUSTOM DROPDOWN (Design aus Screenshot + Dark Mode)
   ======================================================================== */

/* Container für das gesamte Element */
.custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
}

/* Das eigentliche Select-Element wird versteckt, aber bleibt für die Logik da */
select.neuron-select {
    display: none !important;
}

/* --- DER BUTTON (TRIGGER) --- */
.custom-select-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    border-radius: 0.75rem; /* Runde Ecken */
    transition: all 0.2s ease;
    
    /* Light Mode Farben */
    background-color: #f8fafc; /* slate-50 */
    border: 1px solid #e2e8f0; /* slate-200 */
    color: #334155;            /* slate-700 */
}

.custom-select-trigger:hover {
    background-color: #ffffff;
    border-color: #cbd5e1; /* slate-300 */
}

/* Dark Mode Farben Trigger */
.dark .custom-select-trigger {
    background-color: rgba(15, 23, 42, 0.6); /* slate-900 transparent */
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;            /* slate-200 */
}

.dark .custom-select-trigger:hover {
    background-color: rgba(15, 23, 42, 0.8);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Pfeil-Icon Animation */
.custom-select-arrow {
    transition: transform 0.3s;
    color: #94a3b8; /* slate-400 */
}
.custom-select-wrapper.open .custom-select-arrow {
    transform: rotate(180deg);
}

/* --- DAS MENÜ (OPTIONS LISTE) --- */
.custom-options {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    z-index: 100; /* Ganz weit oben */
    
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem; /* Schön rund wie im Screenshot */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

/* Dark Mode Menü */
.dark .custom-options {
    background-color: #0f172a; /* slate-900 */
    border-color: #334155;     /* slate-700 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

.custom-select-wrapper.open .custom-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* --- DIE EINZELNEN OPTIONEN --- */
.custom-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: #475569; /* slate-600 */
    transition: background 0.2s, color 0.2s;
    margin-bottom: 2px;
}

.dark .custom-option {
    color: #cbd5e1; /* slate-300 */
}

/* Hover Effekt */
.custom-option:hover {
    background-color: #f1f5f9; /* slate-100 */
    color: #1e293b;
}
.dark .custom-option:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

/* --- AUSGEWÄHLTE OPTION (Lila/Pink Style) --- */
.custom-option.selected {
    background-color: #fdf4ff; /* fuchsia-50 */
    color: #a21caf;            /* fuchsia-700 */
    font-weight: 600;
}

.dark .custom-option.selected {
    background-color: rgba(217, 70, 239, 0.15); /* fuchsia glow */
    color: #e879f9; /* fuchsia-400 */
}

/* Checkmark Icon Styling */
.option-check {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s;
    color: currentColor;
}
.custom-option.selected .option-check {
    opacity: 1;
    transform: scale(1);
}
/* ========================================================================
   RANGE SLIDER FIX (Für Opera, Chrome & Edge)
   ======================================================================== */

/* 1. Den Slider-Knopf (Thumb) erzwingen & stylen */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -6px; /* Zentriert den Knopf auf der Leiste */
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform 0.1s ease;
}

input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

/* 2. Die Leiste (Track) zurücksetzen */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: transparent; 
    border-radius: 999px;
}

/* 3. FARBEN ZUWEISEN */

/* Die Pinken/Fuchsia Slider (Standard für FSRS & Limits) */
#opt-max-new-cards::-webkit-slider-thumb,
#opt-max-reviews::-webkit-slider-thumb,
#opt-fsrs-retention::-webkit-slider-thumb {
    background: #d946ef; /* Tailwind fuchsia-500 */
}

/* Der Gelbe Slider (für SM-2 Einstellungen) */
#opt-sm2-lapse-percent::-webkit-slider-thumb {
    background: #eab308; /* Tailwind yellow-500 */
}

/* 4. Firefox Support (falls benötigt) */
input[type=range]::-moz-range-thumb {
    height: 20px; width: 20px; border-radius: 50%; border: none; cursor: pointer;
}
#opt-max-new-cards::-moz-range-thumb,
#opt-max-reviews::-moz-range-thumb,
#opt-fsrs-retention::-moz-range-thumb { background: #d946ef; }
#opt-sm2-lapse-percent::-moz-range-thumb { background: #eab308; }
/* ========================================================================
   KARTEIKARTEN-STILE (Flip-Animation)
   ======================================================================== */

.card {
    transform-style: preserve-3d;
    transition: transform 0.6s;
}
.card.flipped {
    transform: rotateY(180deg);
}
.card-face {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.card-back {
    transform: rotateY(180deg);
}

/* ========================================================================
   QUILL EDITOR STYLES (ÜBERSETZTE VERSION)
   ======================================================================== */

.quill-editor-container .ql-toolbar { display: none; }
.quill-editor-container.focused .ql-toolbar { display: block; }

.ql-snow {
    border: 1px solid #cbd5e1; /* Übersetzt von: border-slate-300 */
    border-radius: 0.5rem;   /* Übersetzt von: rounded-lg */
}
.ql-toolbar.ql-snow {
    border-bottom: 1px solid #e2e8f0; /* Übersetzt von: border-b border-slate-200 */
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}
.ql-container.ql-snow {
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}
.quill-editor-container.focused .ql-container.ql-snow {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.ql-editor { min-height: 120px; }
.ql-editor p { margin-bottom: 0.75rem; }
.ql-editor p:last-child { margin-bottom: 0; }
.card-content p { margin-bottom: 0.2rem; }
.card-content strong { font-weight: 700; }
.card-content em { font-style: italic; }
.card-content u { text-decoration: underline; }
.card-content .ql-size-small { font-size: 0.75rem; }
.card-content .ql-size-large { font-size: 1.5rem; }
.card-content .ql-size-huge { font-size: 2.25rem; }
.card-content img { max-width: 100%; max-height: 180px; height: auto; margin: 0.5rem auto; border-radius: 0.5rem; display: block; }

/* Dark Mode Stile für Quill */
.dark .ql-snow {
    border-color: #475569; /* Übersetzt von: dark:border-slate-600 */
}
.dark .ql-toolbar.ql-snow {
    border-bottom-color: #334155; /* Übersetzt von: dark:border-slate-700 */
}
.dark .ql-toolbar {
    background-color: #1e293b; /* Übersetzt von: dark:bg-slate-800 */
}
.dark .ql-editor {
    background-color: #1e293b; /* Übersetzt von: dark:bg-slate-800 */
    color: #e2e8f0;            /* Übersetzt von: dark:text-slate-200 */
}
.dark .ql-snow .ql-stroke { stroke: #94a3b8; }
.dark .ql-snow .ql-picker-label { color: #94a3b8; }
.dark .ql-snow .ql-picker-options {
    background-color: #334155; /* Übersetzt von: dark:bg-slate-700 */
    border-color: #475569;     /* Übersetzt von: dark:border-slate-600 */
}
.dark .ql-snow .ql-picker-item {
    color: #e2e8f0; /* Übersetzt von: dark:text-slate-200 */
}
.dark .ql-snow .ql-picker-item:hover {
    background-color: #475569; /* Übersetzt von: dark:bg-slate-600 */
}

/* ========================================================================
   ANIMATIONEN
   ======================================================================== */

@keyframes fall {
  from {
    opacity: 1;
    transform: translateY(0) rotate(var(--initial-rotate, 0deg)); /* Startposition */
  }
  to {
    opacity: 0;
    transform: translateY(110vh) rotate(calc(var(--initial-rotate, 0deg) + 720deg)); /* Lässt es nach unten fallen und drehen */
  }
}

@keyframes rise {
    from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100vh); /* Lässt sie nach oben aus dem Bild steigen */
  }
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}
.animate-shake {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.animate-shake {
  animation: shake 0.5s ease-in-out;
}


.toggle-checkbox:checked {
    right: 0;
    border-color: #4A90E2;
}
.toggle-checkbox:checked + .toggle-label {
    background-color: #4A90E2;
}


.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem; /* Innenabstand */
    border-radius: 0.5rem;  /* Abgerundete Ecken */
    font-weight: 600;       /* Halbfette Schrift */
    font-size: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out; /* Sanfter Übergang für Effekte */
    border: 1px solid transparent;
    user-select: none;
    color: #ffffff; /* text-white (war in Ihrem alten .btn) */
}

/* --- Primärer Button (für wichtige Aktionen) --- */
.btn-primary {
    background-color: #4f46e5; /* Ein schönes Indigoblau */
    color: #ffffff;            /* Weißer Text */
}
.btn-primary:hover {
    background-color: #4338ca; /* Ein etwas dunkleres Blau bei Maus-Kontakt */
    transform: translateY(-2px); /* Hebt den Knopf leicht an */
}
.btn-primary:active {
    transform: translateY(0); /* Knopf geht bei Klick zurück */
}
.btn-primary:disabled {
    background-color: #a5b4fc; /* Helleres, ausgegrautes Blau */
    cursor: not-allowed;
}

/* --- Sekundärer Button --- */
.btn-secondary {
    background-color: #6b7280; /* bg-gray-500 */
    color: #ffffff;
}
.btn-secondary:hover {
    background-color: #4b5563; /* hover:bg-gray-600 */
}
.btn-secondary:active {
    transform: scale(0.95);
}

/* --- Gefahr-Button --- */
.btn-danger {
    background-color: #dc2626; /* bg-red-600 */
    color: #ffffff;
}
.btn-danger:hover {
    background-color: #b91c1c; /* hover:bg-red-700 */
}
.btn-danger:active {
    transform: scale(0.95);
}

/* --- Schwierigkeits-Button --- */
.btn-difficulty {
    width: 100%;
    padding: 0.75rem 1rem; /* px-4 py-3 (angepasst von md:) */
    font-size: 1rem;       /* text-base */
    font-weight: 600;
    border-radius: 0.5rem;
    color: #ffffff;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-md */
}
@media (min-width: 768px) { /* md: */
    .btn-difficulty {
        width: auto;
    }
}
.btn-difficulty:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* hover:shadow-lg */
}
.btn-difficulty:active {
    transform: scale(0.95);
}


/* --- Link-Button (für Aktionen wie "Erneut senden") --- */
.btn-link {
    background: none;
    border: none;
    padding: 0;
    color: #60a5fa; /* Ein helles Blau, das gut lesbar ist */
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}
.btn-link:hover {
    color: #3b82f6; /* Etwas dunkler bei Maus-Kontakt */
}
.btn-link:disabled {
    color: #9ca3af; /* Grau im deaktivierten Zustand */
    text-decoration: none;
    cursor: not-allowed;
}

/* Macht den Karteninhalt sofort unsichtbar */
.content-hidden {
  opacity: 0;
  transition: none; /* Wichtig: Keine Verzögerung beim Verstecken */
}

/* Lässt den Karteninhalt sanft erscheinen */
.content-visible {
  opacity: 1;
  transition: opacity 0.2s ease-in 0.1s; /* Kurze Verzögerung (0.1s) vor dem Einblenden (0.2s) */
}

/* ===== NEU: STILE FÜR STATISTIK-TABS (KORRIGIERT OHNE @apply) ===== */

/* Stil für einen normalen Tab-Knopf */
.stats-tab-btn {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-radius: 0.375rem;
    color: rgb(100 116 139); /* text-slate-500 */
    transition-property: color, background-color;
    transition-duration: 150ms;
}

.dark .stats-tab-btn {
    color: rgb(148 163 184); /* dark:text-slate-400 */
}

.stats-tab-btn:hover {
    background-color: rgb(241 245 249); /* hover:bg-slate-100 */
}

.dark .stats-tab-btn:hover {
    background-color: rgb(30 41 59); /* dark:hover:bg-slate-800 */
}

/* Stil für den "aktiven" Tab-Knopf */
.stats-tab-btn.is-active {
    background-color: rgb(219 234 254); /* bg-blue-100 */
    color: rgb(37 99 235); /* text-blue-700 */
}

.dark .stats-tab-btn.is-active {
    background-color: rgba(30, 58, 138, 0.5); /* dark:bg-blue-900/50 */
    color: rgb(96 165 250); /* dark:text-blue-400 */
}

/* Titel-Stil für die Karten im Dashboard */
.stat-card-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: rgb(30 41 59); /* text-slate-800 */
    margin-bottom: 1rem;
}

.dark .stat-card-title {
    color: rgb(241 245 249); /* dark:text-slate-200 */
}
/* ===== ENDE DER KORREKTUR ===== */

/* --- 
   GLOBALE, ADAPTIVE SCROLL-LEISTE (HELL & DUNKEL)
   (Funktioniert in Chrome, Edge, Safari)
--- */

/* Die Leiste selbst (schmal machen) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px; /* Auch für horizontale Leisten */
}

/* --- HELLER MODUS (STANDARD) --- */

/* Die "Schiene" (Hintergrund) */
::-webkit-scrollbar-track {
  background: #f1f5f9; /* Ein sehr helles Grau (Tailwind 'slate-100') */
  border-radius: 4px;
}

/* Der "Griff" (Daumen) */
::-webkit-scrollbar-thumb {
  background: #cbd5e1; /* Ein helles Grau (Tailwind 'slate-300') */
  border-radius: 4px;
}

/* Der "Griff" beim Drüberfahren */
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8; /* Ein mittleres Grau (Tailwind 'slate-400') */
}

/* Die "Schiene" im Dark Mode */
.dark ::-webkit-scrollbar-track {
  background: #1e293b; /* Ein sehr dunkles Grau (Tailwind 'slate-800') */
}

/* Der "Griff" im Dark Mode */
.dark ::-webkit-scrollbar-thumb {
  background: #475569; /* Ein mittleres Dunkelgrau (Tailwind 'slate-600') */
}

/* Der "Griff" beim Drüberfahren im Dark Mode */
.dark ::-webkit-scrollbar-thumb:hover {
  background: #64748b; /* Ein helleres Dunkelgrau (Tailwind 'slate-500') */
}

[data-lucide="user"] {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

/* 1. Basis-Stil für die Listenelemente im Dashboard */
/* Wir nutzen !important, um Tailwind-Klassen (wie hover:bg-...) zu überschreiben */
#dashboard-category-list > * {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; /* Sehr weiche Bewegung */
    border: 1px solid transparent !important; /* Verhindert harte Ränder */
    transform: translateY(0); /* Startposition */
    position: relative;
    z-index: 1;
}

/* 2. Der Hover-Effekt (Maus drüber) - NUR FÜR ECHTE MAUS / DESKTOP */
@media (hover: hover) and (pointer: fine) {
    #dashboard-category-list > *:hover {
        /* BEWEGUNG: Hebt die Karte sanft um 4 Pixel an */
        transform: translateY(-4px) !important;

        /* TIEFE: Statt eines Rahmens nutzen wir einen weichen Schatten */
        box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15),
                    0 10px 12px -5px rgba(0, 0, 0, 0.1) !important;
        
        /* FARBE: Statt harter Farbe nur leicht aufhellen (wirkt edler) */
        filter: brightness(1.03) contrast(1.02); 
        
        z-index: 10; /* Bringt die schwebende Karte in den Vordergrund */
    }

    /* 3. Spezielle Schatten-Anpassung für den Dark Mode */
    .dark #dashboard-category-list > *:hover {
        box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.6), 
                    0 8px 10px -6px rgba(0, 0, 0, 0.4) !important;
        background-color: #1e293b !important; 
        border-color: #334155 !important;
    }
}

/* ========================================================================
   APPLE DOUBLE-TAP FIX (KORRIGIERT)
   ======================================================================== */
html.ios-device .lg\:opacity-0,
html.ios-device .opacity-0.group-hover\:opacity-100 {
    display: none !important;
}

/* ========================================================================
   MOBILE NAVIGATION (NEU)
   ======================================================================== */

/* Schatten nach oben für die Leiste */
.shadow-top-lg {
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05), 0 -2px 4px -1px rgba(0, 0, 0, 0.03);
}

.dark .shadow-top-lg {
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.3), 0 -2px 4px -1px rgba(0, 0, 0, 0.2);
}

/* Klick-Animation für die Icons */
.mobile-nav-item:active {
    transform: scale(0.9);
}

/* Safari Fix: Verhindert, dass Icons in Flex-Boxen kollabieren */
.lucide {
    min-width: 1.5rem;
    min-height: 1.5rem;
}

/* ========================================================================
   SAFARI FIXES (Farbe & Struktur)
   ======================================================================== */

/* 1. Die magische Farb-Korrektur */
/* Wir suchen Icons innerhalb eines Containers, der eine text-Farbe hat */
div[class*="text-"] > .safari-icon-fix {
    color: inherit !important; /* Zwingt das Icon, die Farbe vom div zu nehmen */
}

.safari-icon-fix {
    stroke: currentColor !important; /* Nimmt die vererbte Farbe für die Linien */
    stroke-width: 2px;
    min-width: 24px;
    min-height: 24px;
}

/* Optional: Füllung leicht andeuten, wie in Chrome */
.safari-icon-fix {
    fill: currentColor;
    fill-opacity: 0.15; 
}

/* 2. Aufräumen von leeren Elementen, die Striche verursachen könnten */
#dashboard-category-list div:empty {
    display: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Darkmode Anpassung der Linie */
.dark #dashboard-category-list > div > div[style*="border-left"] {
    border-color: #334155 !important; /* slate-700 - sichtbar im Darkmode */
}

@keyframes golden-pulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 0px rgba(250, 204, 21, 0)); }
  50% { transform: scale(1.1); filter: drop-shadow(0 0 12px rgba(250, 204, 21, 0.8)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0px rgba(250, 204, 21, 0)); }
}

.animate-golden-pulse {
  animation: golden-pulse 2s infinite ease-in-out;
  color: #fbbf24 !important; /* Tailwind yellow-400 */
}
@keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.animate-bounce-slow {
    animation: bounce-slow 3s infinite ease-in-out;
}
#tutorial-tooltip {
    filter: drop-shadow(0 0 20px rgba(217, 70, 239, 0.4));
}
    *::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* 2. Versteckt Scrollbars in Firefox und alten IE/Edge-Versionen für ALLE Elemente */
    * {
        -ms-overflow-style: none !important;  /* IE and Edge */
        scrollbar-width: none !important;     /* Firefox */
    }

/* ========================================================================
   DAUER-TEXTMARKER-MODUS (NEON)
   ======================================================================== */

/* Der Button leuchtet knallig Neon-Gelb, wenn der Modus AKTIV ist */
button.ql-paint-marker.is-toggled {
    background-color: #ffff00 !important; /* Richtiges Neon-Gelb */
    border-radius: 4px !important;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Der Stift selbst wird tiefschwarz für ultimativen Kontrast */
button.ql-paint-marker.is-toggled svg {
    stroke: #000000 !important; 
}

/* Dark Mode Anpassung für den aktiven Button (knallt auch im Dunkeln) */
.dark button.ql-paint-marker.is-toggled {
    background-color: #ccff00 !important; /* Ein starkes Neon-Grün-Gelb für den Dark Mode */
    box-shadow: 0 0 8px rgba(204, 255, 0, 0.5); /* Leichter Leucht-Effekt um den Button */
}

/* Mauszeiger wird zum Text-Cursor */
.highlighter-mode-active .ql-editor {
    cursor: text;
    caret-color: #ffff00;
}
.dark .highlighter-mode-active .ql-editor {
    caret-color: #ccff00;
}

/* Das eigentliche Highlight-Styling im Text */
#flashcard .card-content span[style*="background-color"],
.ql-editor span[style*="background-color"] {
    padding: 0.1em 0.2em;
    border-radius: 4px; 
    color: #000000 !important; /* Text auf dem Marker bleibt extrem lesbar (schwarz) */
    font-weight: 600; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.2); /* Ein minimal härterer Schatten für den Neon-Look */
}

.dark #flashcard .card-content span[style*="background-color"],
.dark .ql-editor span[style*="background-color"] {
    mix-blend-mode: normal; /* "normal" statt "screen", damit die Neon-Farbe auch im Dark Mode nicht verblasst */
}


/* ========================================================================
   iOS SAFE AREA FIX FÜR DIE NAVBAR
   ======================================================================== */
.ios-safe-nav {
    /* Fallback für alte Browser oder Androids ohne Gestensteuerung */
    padding-bottom: 0px; 
    
    /* Fügt dynamisch genau so viel Padding hinzu, wie der Home-Balken groß ist */
    padding-bottom: env(safe-area-inset-bottom);
}

.safe-top-toast {
    top: calc(1.5rem + env(safe-area-inset-top)) !important;
}

/* Fix für iOS Safe Area oben (Notch / Statusleiste) bei Vollbild-Modals */
.pt-safe {
    padding-top: calc(1rem + env(safe-area-inset-top)) !important;
}