/* styles.css - Kombiniert und angepasst für das neue Dark Theme Mockup */

/* --- Grundlegende Stile & Dark Theme Anpassungen --- */
html, body {
    height: 100%; 
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #0F172A; /* Tailwind slate-900 - Basis des neuen Mockups */
    color: #E2E8F0; /* Tailwind slate-200 - Basis des neuen Mockups */
    line-height: 1.6;
    overflow-x: hidden;
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
}

.font-orbitron { /* Aus neuem Mockup */
    font-family: 'Orbitron', sans-serif;
}

.main-content-wrapper { /* Aus Ihrer CSS, nützlich für Layout */
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    width: 100%;
}
/* .container wird primär durch Tailwind Klassen im HTML gehandhabt (z.B. container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8) */
/* Falls spezifische .container Stile benötigt werden, können sie hier hinzugefügt werden, aber Tailwind ist bevorzugt. */


/* --- Stile aus dem neuen Mockup (Header, Partikel, Loader etc.) --- */
/* Header & Navigation (Basis vom neuen Mockup) */
.header-nav a { /* Für Desktop-Navigationslinks im neuen Mockup */
    position: relative;
    transition: color 0.3s ease;
    padding: 0.5rem 0;
    color: #cbd5e1; /* text-slate-300 */
}
.header-nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #38BDF8; /* Tailwind sky-400 */
    transition: width 0.3s ease;
}
.header-nav a:hover, .header-nav a.active { /* .active wird per JS gesetzt */
    color: #38BDF8;
}
.header-nav a:hover::after, .header-nav a.active::after {
    width: 100%;
}

/* Stile für Ihre .header-link Klasse, angepasst */
.header-link { /* Aus Ihrer CSS, angepasst für die Links in navigation.php */
    transition: color 0.3s ease;
    color: #cbd5e1; /* Angepasst: text-slate-300 */
}
.header-link:hover {
    color: #38BDF8; /* Angepasst: text-sky-400 */
}
/* Mobile Menu Links (aus navigation.php, angepasst) */
/* Tailwind Klassen im HTML des Mockups steuern das meiste, aber wir können hier Overrides machen */
#mobileMenu a.header-link { /* Spezifischer für mobile Links, falls nötig */
    color: #E2E8F0; /* slate-200 */
}
#mobileMenu a.header-link:hover {
    background-color: #1E293B; /* slate-800 */
    color: #38BDF8; /* sky-400 */
}


/* Hero Section & Particles */
.hero-glow { /* Neuer Mockup Stil */
    text-shadow: 0 0 15px rgba(56, 189, 248, 0.5), 0 0 30px rgba(56, 189, 248, 0.3);
}
#particle-canvas { /* Neuer Mockup Stil */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; 
    opacity: 0.75; 
}

/* Allgemeine Section Title Stile */
.section-title-underline { /* Neuer Mockup Stil für konsistente Titel */
    position: relative;
    display: inline-block;
    padding-bottom: 0.5rem;
}
.section-title-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background-color: #38BDF8;
    border-radius: 2px;
}

/* Main Title Container (aus Ihrer CSS, angepasst) */
.main-title-container {
    padding: 2rem 1rem; 
    background: linear-gradient(135deg, #111827 0%, #1e293b 100%); /* Dunklere Töne, passend zum Theme */
    border-radius: 0.75rem; 
    margin-bottom: 2.5rem;
    text-align: center;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.2), 0 4px 6px -2px rgba(0,0,0,0.1);
}
.main-title-text {
    font-size: 2rem; /* Angepasst */
    font-weight: 700; 
    color: #E2E8F0; /* slate-200 */
    margin-bottom: 0.5rem;
}
.main-subtitle {
    font-size: 1.125rem; /* Angepasst */
    color: #94a3b8; /* slate-400 */
}

/* Rubrik Container (aus Ihrer CSS, angepasst) */
.rubrik-container {
    margin-bottom: 3rem;
    background-color: #1E293B; /* slate-800 */
    padding: 2rem;
    border-radius: 0.75rem; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.2), 0 2px 4px -1px rgba(0,0,0,0.15);
}
.rubrik-title {
    font-size: 1.75rem; 
    font-weight: 600; 
    color: #cbd5e1; /* slate-300 */
    margin-bottom: 1.5rem; /* Mehr Abstand */
    padding-bottom: 0.75rem; /* Mehr Abstand */
    border-bottom: 2px solid #334155; /* slate-700 */
    display: flex;
    align-items: center;
}
.rubrik-title .icon { /* Font Awesome Icons */
    margin-right: 0.75rem;
    color: #38BDF8; /* sky-400 als Standard-Icon-Farbe in Rubriken */
}


/* Topic Card Stile (aus Ihrer CSS, stark angepasst für Dark Theme) */
.topic-card {
    background-color: #1E293B; /* slate-800 */
    border-radius: 0.75rem; 
    padding: 1.5rem; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -1px rgba(0,0,0,0.2); 
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-left-color 0.3s ease;
    border-left-width: 4px;
    border-left-style: solid;
    /* border-left-color wird durch .topic-color-X gesetzt */
    min-height: 180px; /* Etwas reduziert */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.topic-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.25); /* Glow-Effekt passend zum Theme */
}
.topic-title {
    font-size: 1.25rem; 
    font-weight: 700; 
    /* Farbe wird durch .topic-color-X gesetzt */
    color: #E2E8F0; /* Fallback slate-200 */
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    word-break: break-word;
}
.topic-title .icon { /* Font Awesome Icons */
    margin-right: 0.75rem;
    /* Farbe wird durch .topic-color-X gesetzt */
}

/* Presentation Item Stile (aus Ihrer CSS, angepasst für Dark Theme) */
.presentation-item {
    background-color: #334155; /* slate-700 */
    border-radius: 0.5rem; 
    padding: 1rem; 
    margin-bottom: 1rem; /* Wird ggf. von Grid Gap überschrieben */
    border: 1px solid #475569; /* slate-600 */
    transition: border-color 0.3s ease;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.presentation-item:hover {
    border-color: #38BDF8; /* sky-400 */
}
.presentation-title {
    font-size: 1rem; 
    font-weight: 600; 
    color: #7dd3fc; /* sky-300 */
}
.presentation-description {
    font-size: 0.875rem; 
    color: #94a3b8; /* slate-400 */
    margin-top: 0.25rem;
    flex-grow: 1;
}
.presentation-link {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.875rem; 
    font-weight: 500; 
    color: #38BDF8; /* sky-400 */
    text-decoration: none;
}
.presentation-link:hover {
    text-decoration: underline;
    color: #7dd3fc; /* sky-300 */
}

/* Topic Farben (aus Ihrer CSS, angepasst für besseren Kontrast im Dark Theme) */
/* Die Textfarbe wird heller, die Border bleibt kräftig */
.topic-color-1 { border-left-color: #2563eb; } .topic-color-1 .topic-title .icon, .topic-color-1 .topic-title { color: #93c5fd; } /* Light Blue */
.topic-color-2 { border-left-color: #16a34a; } .topic-color-2 .topic-title .icon, .topic-color-2 .topic-title { color: #6ee7b7; } /* Light Green */
.topic-color-3 { border-left-color: #f97316; } .topic-color-3 .topic-title .icon, .topic-color-3 .topic-title { color: #fdba74; } /* Light Orange */
.topic-color-4 { border-left-color: #d20033; } .topic-color-4 .topic-title .icon, .topic-color-4 .topic-title { color: #fb7185; } /* Light Red/Pink */
.topic-color-5 { border-left-color: #8b5cf6; } .topic-color-5 .topic-title .icon, .topic-color-5 .topic-title { color: #c4b5fd; } /* Light Purple */
.topic-color-6 { border-left-color: #db2777; } .topic-color-6 .topic-title .icon, .topic-color-6 .topic-title { color: #f9a8d4; } /* Light Pink */
.topic-color-7 { border-left-color: #64748b; } .topic-color-7 .topic-title .icon, .topic-color-7 .topic-title { color: #a1a1aa; } /* Light Slate */
.topic-color-8 { border-left-color: #2563eb; } .topic-color-8 .topic-title .icon, .topic-color-8 .topic-title { color: #93c5fd; } /* Light Blue - Wiederholung für Konsistenz */


/* Spotlight Audio Section (aus Ihrer CSS, angepasst für Dark Theme) */
.spotlight-audio-section { 
    background: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 100%); /* Dunklere Violett-/Blautöne */
    padding: 1.5rem; 
    border-radius: 0.75rem; 
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.3), 0 6px 10px -5px rgba(0,0,0,0.2); 
    margin-bottom: 3rem; 
    color: #e2e8f0; /* slate-200 */
}
.spotlight-audio-section .spotlight-title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; 
    margin-bottom: 0.75rem; 
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f0f9ff; /* sky-50 */
}
.spotlight-audio-section .spotlight-subtitle {
    font-size: 1.125rem; /* text-lg */
    opacity: 0.8;
    color: #e0f2fe; /* sky-100 */
}
.spotlight-audio-inner-box {
    background-color: rgba(15, 23, 42, 0.5); /* slate-900 mit Transparenz */
    backdrop-filter: blur(8px);
    padding: 1.25rem; 
    border-radius: 0.5rem; 
    border: 1px solid rgba(56, 189, 248, 0.2); /* Subtile Border */
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.2),0 2px 4px -1px rgba(0,0,0,0.15); 
}
.spotlight-audio-inner-box h4 {
    color: #e0f2fe; /* sky-100 */
}
.spotlight-audio-inner-box p {
    color: #cbd5e1; /* slate-300 */
}
.spotlight-audio-inner-box audio { /* Stile für den Audio-Player im Spotlight */
    border-radius: 0.375rem;
}
/* Anpassung für Audio-Player Steuerelemente im Dark Theme (allgemeiner) */
audio {
    width: 100%;
    outline: none;
}
audio::-webkit-media-controls-panel { 
    background-color: #334155; /* slate-700 */
    border-radius: 0.375rem; 
}
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-timeline,
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-volume-slider,
audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-fullscreen-button,
audio::-webkit-media-controls-toggle-closed-captions-button {
    filter: invert(0.9) grayscale(1) brightness(1.3) contrast(0.9); /* Heller und weniger gesättigt */
    color: #94a3b8; /* slate-400 */
}
audio::-webkit-media-controls-timeline-container,
audio::-webkit-media-controls-volume-slider-container {
     background-color: rgba(203, 213, 225, 0.1); /* slate-300 mit Transparenz */
}


/* Modal Stile (aus Ihrer CSS, angepasst) */
.modal {
    display: none;
    position: fixed;
    z-index: 1000; /* Beibehalten vom neuen Mockup */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(15, 23, 42, 0.85); /* Dunkleres Overlay: slate-900 mit Transparenz */
    padding: 20px;
    align-items: center; 
    justify-content: center; 
}
.modal-content {
    background-color: #1E293B; /* slate-800 */
    margin: auto; 
    padding: 25px;
    border: 1px solid #334155; /* slate-700 */
    width: 90%;
    max-width: 800px; 
    position: relative;
    border-radius: 0.5rem; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.5); /* Stärkerer Schatten für Dark Theme */
    animation: fadeInModal 0.3s ease-out;
    color: #E2E8F0; /* slate-200 für Text im Modal */
}
/* Spezifische Modal-Titel Anpassung, falls nicht per Tailwind Klasse im HTML */
.modal-content h2 { 
    color: #cbd5e1; /* slate-300 */
}

.modal-close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: #94a3b8; /* slate-400 */
    line-height: 1;
    padding: 0.25rem 0.5rem;
}
.modal-close-button:hover,
.modal-close-button:focus {
    color: #e2e8f0; /* slate-200 */
}
.modal-video, .modal-iframe, .modal-image { 
    border-radius: 0.375rem; 
}
.modal-video { width: 100%; max-height: 70vh; }
.modal-iframe { width: 100%; height: 75vh; border: none; } /* Höhe von navigation.php */
.modal-image { display: block; max-width: 90vw; max-height: 90vh; margin: auto; }


/* Kommentarbereich Stile (aus Ihrer CSS, angepasst) */
.comments-section-bg { 
    margin-top: 3rem; 
    padding: 2.5rem 1.5rem; /* Padding angepasst */
    background-color: #1E293B; /* slate-800 */
    border-radius: 0.75rem; 
    box-shadow: 0 8px 15px -3px rgba(0,0,0,0.25),0 3px 5px -2px rgba(0,0,0,0.2); 
    flex-shrink: 0; 
}
.comments-title { 
    font-size: 1.875rem; 
    font-weight: 700; 
    color: #38BDF8; /* sky-400 */
    margin-bottom: 2rem; 
    text-align: center;
}
.comment-form-container {
    background-color: #0F172A; /* slate-900 */
    padding: 1.5rem; 
    border-radius: 0.5rem; 
    border: 1px solid #334155; /* slate-700 */
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25),0 1px 2px -1px rgba(0,0,0,0.2); 
    margin-bottom: 2.5rem; 
}
.comment-form-title { 
    font-size: 1.25rem; 
    font-weight: 600; 
    color: #cbd5e1; /* slate-300 */
    margin-bottom: 1.5rem; 
}
.comment-form label { /* Angepasst, da Ihre CSS .comment-form.label hatte */
    display: block;
    font-size: 0.875rem; 
    font-weight: 500; 
    color: #94a3b8; /* slate-400 */
    margin-bottom: 0.25rem; 
}
.comment-form input[type="text"], /* Spezifischer */
.comment-form input[type="email"],
.comment-form textarea {
    width: 100%;
    padding: 0.75rem 1rem; 
    border: 1px solid #475569; /* slate-600 */
    border-radius: 0.375rem; 
    background-color: #1E293B; /* slate-800 */
    color: #e2e8f0; /* slate-200 */
    box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.1); 
    transition: border-color 0.2s, box-shadow 0.2s;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: #38BDF8; /* sky-400 */
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.3); 
}
.comment-form button[type="submit"] { /* Spezifischer */
    background-color: #0ea5e9; /* sky-500 */
    color: white;
    font-weight: 600; 
    padding: 0.625rem 1.5rem; 
    border-radius: 0.375rem; 
    border: none;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1); 
    transition: background-color 0.15s ease-in-out;
}
.comment-form button[type="submit"]:hover {
    background-color: #0284c7; /* sky-600 */
}
.comments-display-area-title { 
    font-size: 1.25rem; 
    font-weight: 600; 
    color: #cbd5e1; /* slate-300 */
    margin-bottom: 1.5rem; 
}
.comment-card {
    background-color: #1E293B; /* slate-800 */
    padding: 1.25rem; 
    border-radius: 0.5rem; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
    margin-bottom: 1.5rem; 
    border-left: 4px solid #38BDF8; /* sky-400 */
    transition: box-shadow 0.2s ease-in-out;
}
.comment-card:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,0.25); 
}
.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    margin-bottom: 0.5rem; 
}
.comment-author {
    font-weight: 600; 
    font-size: 1.125rem; 
    color: #7dd3fc; /* sky-300 */
}
.comment-timestamp {
    font-size: 0.75rem; 
    color: #64748b; /* slate-500 */
    white-space: nowrap;
}
.comment-rating-display { 
    margin-bottom: 0.75rem; 
    color: #facc15; /* Tailwind amber-400 */
    font-size: 1.25rem; 
}
.comment-rating-display .rating-value {
    font-size: 0.875rem; 
    color: #94a3b8; /* slate-400 */
    margin-left: 0.25rem; 
    vertical-align: middle;
}
.comment-text {
    color: #cbd5e1; /* slate-300 */
    line-height: 1.6; 
}
.no-comments-text {
    color: #64748b; /* slate-500 */
    font-style: italic;
}

/* Star Rating Stile (aus Ihrer CSS, Farben sollten im Dark Theme gut funktionieren) */
.star-rating-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end; 
    margin-bottom: 1rem; 
}
.star-rating-input input[type="radio"].peer {
    display: none; 
}
.star-rating-input label { 
    font-size: 2.5rem; 
    color: #475569; /* slate-600 für inaktive Sterne */
    cursor: pointer;
    transition: color 0.2s ease-in-out;
    padding: 0 0.05em; 
}
.star-rating-input input[type="radio"].peer:checked ~ label,
.star-rating-input input[type="radio"].peer:hover ~ label,
.star-rating-input label:hover {
    color: #facc15; /* amber-400 */
}
.star-rating-input label:hover ~ input[type="radio"].peer ~ label {
    color: #475569; /* slate-600 */
}
/* .star-rating-input input[type="radio"].peer:checked ~ label { color: #facc15; } /* Redundant, bereits oben */


/* Statusmeldungen für Kommentare (aus Ihrer CSS, angepasst für Dark Theme) */
.status-message {
    margin-top: 1.5rem; 
    padding: 1rem; 
    border-radius: 0.375rem; 
    font-size: 0.875rem; 
    border-width: 1px;
    border-style: solid;
}
.status-success {
    background-color: #052e16; /* Dunkleres Grün: green-950 */
    border-color: #15803d; /* green-700 */
    color: #bbf7d0; /* green-200 */
}
.status-error { 
    background-color: #450a0a; /* Dunkleres Rot: red-950 */
    border-color: #b91c1c; /* red-700 */
    color: #fecaca; /* red-200 */
}
.status-validation-error {
    background-color: #422006; /* Dunkleres Gelb/Orange: amber-950 */
    border-color: #b45309; /* amber-700 */
    color: #fde68a; /* amber-200 */
}


/* Footer Stile (aus Ihrer CSS, angepasst an neues Mockup) */
/* .main-footer-bg wird durch den <footer> Tag im neuen Mockup mit Tailwind Klassen gestylt.
   Die Hintergrundfarbe ist bereits #0F172A (slate-950) oder ähnlich.
   Textfarbe ist slate-400.
*/
.main-footer-bg { /* Falls Sie diese Klasse dennoch verwenden wollen */
    text-align: center;
    padding: 2rem; 
    margin-top: auto; 
    background-color: #020617; /* slate-950 */
    color: #64748b; /* slate-500 */
    flex-shrink: 0; 
}
.main-footer-bg p {
    margin: 0;
}
.main-footer-bg .text-xs { /* Tailwind Klasse, hier zur Sicherheit */
    font-size: 0.75rem; 
    margin-top: 0.25rem; 
}
.main-footer-bg .fa-heart { /* Herz-Icon Farbe */
    color: #ef4444; /* red-500 */
}

/* --- Page Specific Styles (angepasst für Dark Theme) --- */

/* innovationssystem.php Stile */
.infographic-card-is { 
    background-color: #1E293B; /* slate-800 */
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: #cbd5e1; /* slate-300 */
}
.infographic-card-is:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0,0,0,0.3);
}
.icon-placeholder-is { /* Icons werden nun hell auf dunklem Grund sein */
    width: 50px; height: 50px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-right: 16px; flex-shrink: 0; color: #0F172A; /* slate-900 für Icon-Farbe */
}
.icon-blue-is { background-color: #60a5fa; } /* Helles Blau */
.icon-green-is { background-color: #34d399; } /* Helles Grün */
.icon-purple-is { background-color: #a78bfa; } /* Helles Lila */
.icon-orange-is { background-color: #fb923c; } /* Helles Orange */
.arrow-is { color: #64748b; /* slate-500 */ }
.connector-line-is { background-color: #475569; /* slate-600 */ }
.section-title-is { color: #60a5fa; /* Helles Blau */ }
.card-title-is { color: #e2e8f0; /* slate-200 */ }
.card-text-is { color: #94a3b8; /* slate-400 */ }
.list-item-is { color: #cbd5e1; /* slate-300 */ }
.list-item-is svg { color: #60a5fa; } /* Passende Icon-Farbe */
.demo-link-is {
    background-color: #38bdf8; /* sky-400 */
    color: #0F172A; /* slate-900 für Text auf hellem Button */
}
.demo-link-is:hover { background-color: #0ea5e9; /* sky-500 */ }

/* lebenslauf.html Stile */
.infographic-container-cv { background-color: #1E293B; /* slate-800 */ color: #e2e8f0; }
.section-title-cv { color: #60a5fa; border-bottom-color: #38bdf8; }
.section-title-cv i { color: #38bdf8; }
.tagline-cv { background-color: #334155; /* slate-700 */ color: #e0f2fe; /* sky-100 */ }
.metric-card-cv { background-color: #0F172A; /* slate-900 */ }
.metric-card-cv .value { color: #60a5fa; }
.metric-card-cv .label { color: #94a3b8; /* slate-400 */ }
.competency-item-cv, .tech-item-cv { background-color: #334155; /* slate-700 */ color: #cbd5e1; }
.competency-item-cv:hover, .tech-item-cv:hover { background-color: #475569; /* slate-600 */ }
.competency-item-cv i, .tech-item-cv i { color: #60a5fa; }
.tech-logo-placeholder-cv { color: #60a5fa; border-color: #38bdf8; }
.timeline-item-cv { border-left-color: #38bdf8; }
.timeline-dot-cv { background-color: #38bdf8; border-color: #1E293B; /* slate-800 als "white" */ }
.timeline-date-cv { color: #60a5fa; }
.timeline-title-cv { color: #e2e8f0; }
.timeline-subtitle-cv { color: #94a3b8; }
.contact-item-cv i { color: #60a5fa; }

/* lernbegleiter.php Stile */
.infographic-wrapper-lb { color: #e2e8f0; }
.main-header-lb h1 { color: #60a5fa; }
.main-header-lb .subtitle-lb { color: #94a3b8; }
.section-card-lb { background-color: #1E293B; /* slate-800 */ }
.section-title-lb { color: #60a5fa; border-bottom-color: #38bdf8; }
.section-title-lb i { color: #38bdf8; }
.feature-item-lb { background-color: #334155; /* slate-700 */ border-left-color: #38bdf8; }
.feature-item-lb h3 { color: #e2e8f0; }
.feature-item-lb h3 i { color: #38bdf8; }
.feature-item-lb p { color: #94a3b8; }
.tech-highlight-lb { background-color: #0c4a6e; /* sky-800 */ color: #e0f2fe; /* sky-100 */ }
.avatar-detail-item-lb { background-color: #1e1b4b; /* indigo-950 */ border-left-color: #a78bfa; /* light purple */ }
.avatar-detail-item-lb h4 { color: #c4b5fd; } .avatar-detail-item-lb h4 i { color: #a78bfa; }
.avatar-detail-item-lb p, .avatar-detail-item-lb ul { color: #ddd6fe; }
.avatar-detail-item-lb li::before { color: #a78bfa; }
.video-caption-lb { color: #94a3b8; }
.stage-item-lb { background-color: #334155; /* slate-700 */ border-color: #475569; /* slate-600 */ }
.stage-number-lb { 
	background-color: #38bdf8; 
	color: #0F172A; 
	font-size: 1.6rem;
    font-weight: 700;
    color: white;
    background-color: #4299e1;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.2rem;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.stage-content-lb h4 { color: #e2e8f0; }
.stage-content-lb p, .stage-content-lb ul { color: #94a3b8; }
.benefit-item-lb { background-color: #0c4a6e; /* sky-800 */ color: #e0f2fe; }
.benefit-item-lb i { color: #7dd3fc; /* sky-300 */ }
.summary-item-lb { background-color: #0c4a6e; border-left-color: #38bdf8; }
.summary-item-lb i { color: #38bdf8; }
.summary-item-lb div h4 { color: #e0f2fe; } .summary-item-lb div p { color: #cbd5e1; }
.tech-stack-item-lb { background-color: #312e81; /* indigo-900 */ }
.tech-stack-item-lb i { color: #a78bfa; } .tech-stack-item-lb span { color: #ddd6fe; }

/* lernreise.php Stile */
.hero-lr { background-color: #0284c7; /* sky-600 */ }
.section-title-lr { color: #38bdf8; }
.phase-card-lr { background-color: #1E293B; /* slate-800 */ border-left-color: #38bdf8; }
.phase-title-lr { color: #38bdf8; }
.actor-card-lr { /* Basis für alle Actor Cards */ color: #e2e8f0; }
.participant-card-lr { background-color: #422006; /* amber-950 */ border-left-color: #facc15; /* amber-400 */ }
.participant-card-lr .actor-title-lr { color: #fde68a; /* amber-200 */ } .participant-card-lr p { color: #fef3c7; /* amber-100 */ }
.stakeholder-card-lr { background-color: #064e3b; /* green-900 */ border-left-color: #34d399; /* emerald-400 */ }
.stakeholder-card-lr .actor-title-lr { color: #a7f3d0; /* emerald-200 */ } .stakeholder-card-lr p { color: #d1fae5; /* emerald-100 */ }
.system-card-lr { background-color: #374151; /* slate-700 */ border-left-color: #9ca3af; /* slate-400 */ }
.system-card-lr .actor-title-lr { color: #e5e7eb; /* slate-200 */ } .system-card-lr p { color: #d1d5db; /* slate-300 */ }
.system-interaction-lr { color: #60a5fa; /* sky-400 */ }
.highlight-engine-lr { border-color: #60a5fa; box-shadow: 0 0 12px rgba(96, 165, 250, 0.3); }
.screenshot-caption-lr { color: #94a3b8; }
.overview-image-container-lr { background-color: #1E293B; /* slate-800 */ }
.intro-text-section-lr { background-color: #1E293B; border-left-color: #facc15; /* amber-400 */ }
.intro-text-section-lr h2 { color: #60a5fa; } .intro-text-section-lr h2 .fas { color: #facc15; }
.intro-text-section-lr p { color: #cbd5e1; }

/* scorm.php Stile */
.header-scorm { background-color: #0369a1; /* sky-700 */ }
.main-title-scorm { color: #e0f2fe; /* sky-100 */ }
.section-title-scorm { color: #7dd3fc; /* sky-300 */ }
.sub-section-title-scorm { color: #e0f2fe; }
.section-intro-scorm { color: #cbd5e1; }
.stat-card-scorm { background-color: #1E293B; /* slate-800 */ color: #e0f2fe; }
.chart-title-scorm { color: #e0f2fe; }
.flow-step-scorm { background-color: #0c4a6e; /* sky-800 */ border-left-color: #38bdf8; color: #e0f2fe; padding: 1rem; }
.flow-arrow-scorm { color: #38bdf8; font-size: xx-large; text-align: center; }
.icon-style-scorm { color: #38bdf8; }
.system-component-scorm { padding: 1rem; }
.system-component-scorm-page { background-color: #0c4a6e; color: #e0f2fe; border-color: #38bdf8; padding: 1rem; }
.system-component-scorm-module { background-color: #422006; /* amber-950 */ border-color: #fcd34d; /* amber-300 */ color: #fef3c7; padding: 1rem;}
.api-arrow-scorm { color: #f87171; /* red-400 */ } .api-arrow-scorm span.text-xs { color: #9ca3af; }
.kpi-card-scorm { background-color: #0c4a6e; border-color: #38bdf8; padding: 1rem; }
.kpi-value-scorm { color: #7dd3fc; } .kpi-label-scorm { color: #e0f2fe; font-size: large;}
.segment-card-scorm { background-color: #422006; /* amber-950 */ border-left-color: #fcd34d; color: #fef3c7; padding: 1rem; }

/* skill_profiling.php Stile */
.hero-sp { background-color: #1e3a8a; /* indigo-800 */ }
.section-title-sp { color: #60a5fa; }
.sub-section-title-sp { color: #e2e8f0; }
.card-sp { background-color: #1E293B; /* slate-800 */ }
.card-title-sp { color: #e2e8f0; }
.process-step-card-sp { background-color: #1E293B; border-left-color: #2dd4bf; /* teal-400 */ }
.process-step-card-sp h4 { color: #5eead4; /* teal-300 */ }
.process-arrow-sp { color: #2dd4bf; }
.competency-type-card-sp { background-color: #0f766e; /* teal-700 */ border-color: #2dd4bf; }
.competency-type-card-sp .icon { color: #5eead4; } .competency-type-card-sp span {color: #ccfbf1;}
.scenario-card-sp { background-color: #052e16; /* green-950 */ border-left-color: #34d399; } .scenario-card-sp p {color: #d1fae5;}
.data-potential-card-sp { background-color: #422006; /* amber-950 */ border-left-color: #facc15; } .data-potential-card-sp p {color: #fef3c7;}
.segment-card-sp { background-color: #422006; border-left-color: #fcd34d; color: #fef3c7; }
/* Chart.js Anpassungen für Dark Theme (werden im JS gesetzt, aber hier als Referenz) */
/* commonChartOptionsGlobal: labels.color, ticks.color, grid.color müssen hell sein */
/* kompetenzSpinneChart: angleLines.color, grid.color, pointLabels.color, ticks.color anpassen */


/* Stile für Glossar (aus Ihrer CSS, angepasst) */
.glossar-nav {
	background-color: #1E293B; /* slate-800 */
	border-radius: 0.5rem; 
}
.glossar-nav a {
	color: #94a3b8; /* slate-400 */
}
.glossar-nav a:hover, .glossar-nav a.active {
	background-color: #38BDF8; /* sky-400 */
	color: #0F172A; /* slate-900 */
}
.glossar-section {
	border-top-color: #334155; /* slate-700 */
}
.glossar-term {
	color: #7dd3fc; /* sky-300 */
}
.glossar-definition {
	color: #cbd5e1; /* slate-300 */
	border-left-color: #38BDF8; /* sky-400 */
}
.glossar-definition strong {
	color: #e2e8f0; /* slate-200 */
}
#searchInput {
	background-color: #1E293B; /* slate-800 */
	border-color: #475569; /* slate-600 */
	color: #e2e8f0; /* slate-200 */
}
#searchInput::placeholder {
    color: #64748b; /* slate-500 */
}
.search-highlight { 
	background-color: #facc15; /* amber-400 */
	color: #422006; /* amber-950 */
    font-weight: bold;
}

/* PWA Bottom Navigation (aus Ihrer CSS, Farben passen gut zum Dark Theme) */
.bottom-nav {
    display: none; 
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #111827; /* Dunkler als Header: slate-900 */
    color: #e2e8f0; /* slate-200 */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    z-index: 100; 
}
body.pwa-standalone-mode .bottom-nav {
    display: flex; 
    justify-content: space-around;
    align-items: center;
    padding: 0.5rem 0;
}
.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #9ca3af; /* slate-400 */
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem; 
    flex-grow: 1;
    text-align: center;
}
.bottom-nav-item i {
    font-size: 1.25rem; 
    margin-bottom: 0.15rem;
}
.bottom-nav-item.active { /* Aktiver Zustand für Bottom Nav */
    color: #38BDF8; /* sky-400 */
}
.bottom-nav-item:hover {
    color: #7dd3fc; /* sky-300 */
}
body.pwa-standalone-mode main {
    padding-bottom: 70px; /* Höhe der Bottom-Nav + etwas Puffer */
}

/* Allgemeine Hilfsklassen (aus Ihrer CSS, viele davon werden durch Tailwind abgedeckt) */
/* Es ist besser, Tailwind-Klassen im HTML zu verwenden, aber hier sind sie für den Fall, dass sie direkt genutzt werden. */
.mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; } .mt-10 { margin-top: 2.5rem; } .mt-12 { margin-top: 3rem; }
/* ... weitere Hilfsklassen können hier bei Bedarf hinzugefügt werden ... */

/* Spezifische Stile für Elemente aus dem neuen Mockup, die nicht von Tailwind abgedeckt sind */
.diary-entry, .resource-item { /* Aus neuem Mockup */
    background-color: rgba(30, 41, 59, 0.85); /* slate-800 mit etwas mehr Opazität */
    border-left: 3px solid #0EA5E9; /* sky-500 */
    padding: 1.5rem;
    border-radius: 0px 8px 8px 0px;
    margin-bottom: 1.5rem;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.diary-entry:hover, .resource-item:hover {
    background-color: rgba(51, 65, 85, 0.9); /* slate-700 mit etwas mehr Opazität */
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
}
.resource-category h3 { /* Aus neuem Mockup */
    border-bottom: 2px solid #334155; /* slate-700 */
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    font-family: 'Orbitron', sans-serif; /* Konsistent mit anderen Titeln */
    color: #7dd3fc; /* sky-300 */
}
.resource-item h4 { /* Titel innerhalb eines Ressourcen-Items */
    color: #cbd5e1; /* slate-300 */
}
.resource-item p { /* Beschreibungstext eines Ressourcen-Items */
    color: #94a3b8; /* slate-400 */
}
.resource-item a { /* Links in Ressourcen-Items */
    color: #38BDF8; /* sky-400 */
}
.resource-item a:hover {
    color: #7dd3fc; /* sky-300 */
}

/* Anpassungen für Chart.js im Dark Theme (im JS-Code werden Farben gesetzt, aber CSS kann Fallbacks bieten) */
.chart-container-scorm, .chart-container-sp, .small-chart-container-sp {
    background-color: rgba(30, 41, 59, 0.5); /* slate-800 mit Transparenz als Hintergrund für Charts */
    padding: 1rem;
    border-radius: 0.5rem;
}
.glossar-nav a {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}
.glossar-nav-side a {
	padding-left: 0.1rem;
	padding-right: 0.1rem;
}
.executive-summary-item h4 {
	font-weight: bold;
    font-size: large;
}
.executive-summary-item p {
	padding: 1rem;
}
.space-y-12 {
	padding-bottom: 2rem !important;
}


/* --- Modal (Popup) Stile --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.8); /* slate-900 mit Transparenz */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* WICHTIG: Erhöht, um garantiert über allem zu liegen */
}

.modal-content {
    background-color: #1E293B; /* slate-800 */
    padding: 2rem;
    border-radius: 0.5rem;
    border: 1px solid #334155; /* slate-700 */
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.modal-close-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: #94a3b8; /* slate-400 */
    font-size: 1.5rem;
    cursor: pointer;
}
.modal-close-button:hover {
    color: #cbd5e1; /* slate-300 */
}

.modal-content h3 {
    font-family: 'Orbitron', sans-serif;
    color: #7dd3fc; /* sky-300 */
    border-bottom: 1px solid #334155;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

/* --- Stile für aufklappbare Details im Modal --- */
.modal-content details {
    border: 1px solid #334155; /* slate-700 */
    border-radius: 0.25rem;
    margin-bottom: 1rem;
}
.modal-content summary {
    cursor: pointer;
    padding: 0.5rem;
    font-weight: 600;
    color: #cbd5e1; /* slate-300 */
    background-color: #334155; /* slate-700 */
}
.modal-content summary:hover {
    background-color: #475569; /* slate-600 */
}
.modal-content details[open] summary {
    border-bottom: 1px solid #475569;
}
.modal-content details p {
    padding: 1rem;
    margin-bottom: 0;
}

/* --- Breadcrumb Stile --- */
.breadcrumb {
    margin-bottom: 0.75rem; /* 12px */
    font-size: 0.875rem; /* 14px */
    color: #94a3b8; /* slate-400 */
}

.breadcrumb-link {
    color: #94a3b8; /* slate-400 */
    cursor: pointer;
    text-decoration: none;
}

.breadcrumb-link:hover {
    color: #38bdf8; /* sky-400 */
    text-decoration: underline;
}

.breadcrumb-separator {
    margin: 0 0.5rem; /* 8px */
}
/* --- Layout-Optimierungen für Lernkarten --- */

/* 1. Header-Styling (Titel und Buttons in einer Zeile) */
.node-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem; /* Abstand zwischen Titel und Buttons */
    margin-bottom: 1rem; /* Platz, wo vorher die Buttons waren */
}

.node-title-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Abstand zwischen Nummer und Titel */
}

/* 3. Styling für die Nummerierung */
.node-number {
    font-size: 1.25rem;
    font-weight: 600;
    color: #38bdf8; /* sky-400 */
    min-width: 2rem; /* Sorgt für einheitliche Ausrichtung */
}

/* Titel-Styling anpassen, damit er nicht mehr den vollen Platz einnimmt */
.node-header h2 {
    margin-bottom: 0; /* Wichtig, da wir jetzt Flexbox für den Abstand nutzen */
}

/* Button-Gruppe Styling */
.node-buttons {
    /* flex-shrink: 0; sorgt dafür, dass die Buttons nicht schrumpfen, wenn der Titel lang ist */
    flex-shrink: 0; 
}


/* 2. Styling für den Container der Unterpunkte (bessere visuelle Gruppierung) */
.subtopics-container {
    /* Der bereits existierende Rand wird beibehalten */
    /* Zusätzlich ein leichter Hintergrund, um die Gruppe hervorzuheben */
    background-color: rgba(30, 41, 59, 0.3); /* slate-800 mit leichter Transparenz */
    border-radius: 0.5rem;
    padding-top: 0.5rem;
    padding-right: 0.5rem;
}