/* ===== DESIGN SYSTEM ===== */
:root {
    /* Farben - Verbesserte Kontraste */
    --primary: #7289da;
    --primary-hover: #5b6eae;
    --primary-dark: #4a5a8a;
    --secondary: #424549;
    --dark: #1a1a1a;
    --darker: #0f0f0f;
    --navbar: #2c2f33;
    --card: #2c2f33;
    --border: #424549;
    --text: #ffffff;
    --text-muted: #d1d5db;
    --text-secondary: #9ca3af;
    --text-dark: #ffffff;
    --success: #43b581;
    --warning: #faa61a;
    --danger: #f04747;
    --info: #7289da;
    
    /* Typography - Verbesserte Lesbarkeit */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-base: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.125rem;
    --line-height: 1.6;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    
    /* Border Radius */
    --border-radius: 0.5rem;
    --border-radius-sm: 0.25rem;
    --border-radius-lg: 0.75rem;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1);
    
    /* Transitions */
    --transition: all 0.2s ease-in-out;
    --transition-slow: all 0.3s ease-in-out;
}

/* ===== GLOBAL STYLES ===== */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    background: linear-gradient(135deg, var(--dark) 0%, var(--darker) 100%);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    justify-content: space-between;
}

main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    justify-content: flex-start;
}

/* ===== ULTIMATIVE LÖSUNG FÜR ALLE DUNKLEN SCHRIFTFARBEN ===== */
/* Höchste Spezifität für alle Elemente */
html body *,
html body *::before,
html body *::after {
    color: var(--text) !important;
}

/* Spezifische Ausnahmen für Bootstrap-Klassen */
html body *[class*="text-muted"],
html body *[class*="text-muted"] * {
    color: var(--text-muted) !important;
}

html body *[class*="text-secondary"],
html body *[class*="text-secondary"] * {
    color: var(--text-secondary) !important;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    margin-bottom: var(--spacing-md);
    color: var(--text);
    letter-spacing: -0.025em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.125rem; }

p {
    margin-bottom: var(--spacing-md);
    color: var(--text-muted);
    line-height: 1.7;
    font-weight: var(--font-weight-normal);
}

.article-content {
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 1.05rem;
    font-weight: var(--font-weight-normal);
}

/* Verbesserte Lesbarkeit für Artikelseite */
.article-content h1, .article-content h2, .article-content h3, 
.article-content h4, .article-content h5, .article-content h6 {
    color: var(--text) !important;
    font-weight: var(--font-weight-semibold);
}

.article-content strong, .article-content b {
    color: var(--text) !important;
    font-weight: var(--font-weight-semibold);
}

/* Spezifische Regeln für Artikeltitel */
.article-title, .article h1, .article h2, .article h3, 
.article h4, .article h5, .article h6 {
    color: var(--text) !important;
    font-weight: var(--font-weight-semibold);
}

/* Allgemeine Regeln für alle Titel auf der Artikelseite */
.article h1, .article h2, .article h3, .article h4, .article h5, .article h6,
.article-content h1, .article-content h2, .article-content h3,
.article-content h4, .article-content h5, .article-content h6,
.card-title, .card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
    color: var(--text) !important;
    font-weight: var(--font-weight-semibold);
}

/* Spezifische Regeln für Artikeltitel in Cards */
.card .card-title, .card h1, .card h2, .card h3, 
.card h4, .card h5, .card h6 {
    color: var(--text) !important;
    font-weight: var(--font-weight-semibold);
}

/* Spezifische Regeln für Hauptartikeltitel */
.article h1, .article h2, .article h3, .article h4, .article h5, .article h6,
.article-title, .article .title, .article .card-title,
.article .card-header h1, .article .card-header h2, .article .card-header h3,
.article .card-header h4, .article .card-header h5, .article .card-header h6 {
    color: var(--text) !important;
    font-weight: var(--font-weight-semibold);
}

/* Sehr spezifische Regeln für Artikeltitel */
body .article h1, body .article h2, body .article h3,
body .article h4, body .article h5, body .article h6 {
    color: var(--text) !important;
    font-weight: var(--font-weight-semibold);
}

/* Höchste Spezifität für Artikeltitel */
body .container .article h1, body .container .article h2, body .container .article h3,
body .container .article h4, body .container .article h5, body .container .article h6,
body .row .article h1, body .row .article h2, body .row .article h3,
body .row .article h4, body .row .article h5, body .row .article h6 {
    color: var(--text) !important;
    font-weight: var(--font-weight-semibold);
}

.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: var(--spacing-md);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-secondary);
}

.breadcrumb-item.active {
    color: var(--text-muted);
    font-weight: var(--font-weight-medium);
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

/* ===== IMPROVED READABILITY ===== */
.card-body ul {
    color: var(--text-muted);
    line-height: 1.6;
    font-weight: var(--font-weight-normal);
}

.card-body li {
    margin-bottom: var(--spacing-xs);
    color: var(--text-muted);
    font-weight: var(--font-weight-normal);
}

.card-body code {
    background-color: rgba(114, 137, 218, 0.15);
    color: var(--primary);
    padding: 0.2rem 0.4rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.9em;
    font-weight: var(--font-weight-medium);
}

/* ===== NAVBAR ===== */
.navbar {
    background: linear-gradient(135deg, var(--navbar) 0%, var(--card) 100%) !important;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative !important;
    z-index: 1000 !important;
    overflow: visible !important;
}

.navbar-brand {
    font-weight: var(--font-weight-bold);
    font-size: 1.25rem;
    color: var(--text) !important;
    text-decoration: none;
}

.navbar-nav .nav-link {
    color: var(--text-muted) !important;
    font-weight: var(--font-weight-medium);
    transition: var(--transition);
    padding: var(--spacing-sm) var(--spacing-lg) !important;
    border-radius: var(--border-radius-sm);
    margin: 0 var(--spacing-xs);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--text) !important;
    background-color: rgba(114, 137, 218, 0.1);
}

.navbar-nav .nav-item {
    margin: 0 var(--spacing-xs);
}

.navbar-nav .nav-item:first-child {
    margin-left: 0;
}

.navbar-nav .nav-item:last-child {
    margin-right: 0;
}

.navbar-nav .dropdown,
.navbar-nav .nav-item.dropdown {
    position: relative !important;
    overflow: visible !important;
}

.navbar-nav {
    position: relative !important;
}

.dropdown-toggle::after {
    margin-left: 0.5em;
}

.navbar-nav .dropdown-menu,
.dropdown-menu {
    background-color: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm) 0;
    z-index: 9999 !important;
    position: absolute !important;
    transform: none !important;
    top: 100% !important;
    left: auto !important;
    right: 0 !important;
    min-width: 200px !important;
}

.navbar-nav .dropdown-menu {
    margin-top: 0;
}

.dropdown-item {
    color: var(--text-muted);
    padding: var(--spacing-sm) var(--spacing-md);
    transition: var(--transition);
    font-weight: var(--font-weight-normal);
}

.dropdown-item:hover {
    background-color: rgba(114, 137, 218, 0.1);
    color: var(--text);
}

.dropdown-divider {
    border-color: var(--border);
    margin: var(--spacing-xs) 0;
}

/* Dropdown Visibility Fixes */
.navbar-nav .dropdown-menu.show,
.dropdown-menu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

/* ===== BUTTONS ===== */
.btn {
    font-weight: var(--font-weight-medium);
    border-radius: var(--border-radius);
    transition: var(--transition);
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-dark) 100%);
    color: var(--text);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background-color: var(--secondary);
    color: var(--text);
}

.btn-secondary:hover {
    background-color: var(--border);
    color: var(--text);
}

.btn-sm {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
}

/* ===== CARDS ===== */
.card {
    background: linear-gradient(135deg, var(--card) 0%, rgba(44, 47, 51, 0.8) 100%);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    overflow: hidden;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.card-header {
    background: linear-gradient(135deg, rgba(114, 137, 218, 0.1) 0%, rgba(114, 137, 218, 0.05) 100%);
    border-bottom: 1px solid var(--border);
    padding: var(--spacing-lg);
    font-weight: var(--font-weight-semibold);
}

.card-body {
    padding: var(--spacing-lg);
}

.card-footer {
    background-color: transparent;
    border-top: 1px solid var(--border);
    padding: var(--spacing-md) var(--spacing-lg);
}

/* ===== FORMS ===== */
.form-control {
    background-color: var(--secondary);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    transition: var(--transition);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
}

.form-control:focus {
    background-color: var(--secondary);
    border-color: var(--primary);
    color: var(--text);
    box-shadow: 0 0 0 0.2rem rgba(114, 137, 218, 0.25);
    outline: none;
}

.form-control::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.form-label {
    font-weight: var(--font-weight-semibold);
    color: var(--text);
    margin-bottom: var(--spacing-sm);
}

.form-text {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    opacity: 0.9;
    font-weight: var(--font-weight-normal);
}

.help-text {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
    opacity: 0.9;
    font-weight: var(--font-weight-normal);
}

/* ===== ALERTS ===== */
.alert {
    border-radius: var(--border-radius);
    border: none;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    font-weight: var(--font-weight-medium);
}

.alert-success {
    background: linear-gradient(135deg, rgba(67, 181, 129, 0.1) 0%, rgba(67, 181, 129, 0.05) 100%);
    color: var(--success);
    border-left: 4px solid var(--success);
}

.alert-danger {
    background: linear-gradient(135deg, rgba(240, 71, 71, 0.1) 0%, rgba(240, 71, 71, 0.05) 100%);
    color: var(--danger);
    border-left: 4px solid var(--danger);
}

.alert-warning {
    background: linear-gradient(135deg, rgba(250, 166, 26, 0.1) 0%, rgba(250, 166, 26, 0.05) 100%);
    color: var(--warning);
    border-left: 4px solid var(--warning);
}

.alert-info {
    background: linear-gradient(135deg, rgba(114, 137, 218, 0.1) 0%, rgba(114, 137, 218, 0.05) 100%);
    color: var(--info);
    border-left: 4px solid var(--info);
}

/* ===== HERO SECTION ===== */
.hero-section {
    background: linear-gradient(135deg, var(--navbar) 0%, var(--dark) 100%);
    padding: var(--spacing-xxl) 0;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%237289da" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

.hero-content {
    position: relative;
    z-index: 1;
}

/* ===== ARTICLE CARDS ===== */
.article-preview {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.article-preview .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.article-preview .card-title {
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-md);
    color: var(--text);
    line-height: 1.4;
}

.article-preview .card-text {
    flex: 1;
    color: var(--text-muted);
    margin-bottom: var(--spacing-lg);
    font-weight: var(--font-weight-normal);
    line-height: 1.6;
}

.article-preview .card-img-top,
.article-thumbnail {
    height: 200px;
    object-fit: cover;
    border-bottom: 1px solid var(--border);
}

/* ===== COMMENTS ===== */
.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.comments-list {
    max-height: 400px;
    overflow-y: auto;
}

.comment-item {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border);
    transition: var(--transition);
}

.comment-item:hover {
    background-color: rgba(114, 137, 218, 0.05);
}

/* ===== VIDEO CONTAINER ===== */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--border-radius);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ===== CLIPS SECTION ===== */
.clips-section {
    background: rgba(114, 137, 218, 0.05);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.clip-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    transition: var(--transition);
}

.clip-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.clip-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.clip-header h3 {
    color: var(--text);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0;
}

/* Verbesserte Lesbarkeit für alle Clip-Texte */
.clip-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    transition: var(--transition);
}

.clip-item h1, .clip-item h2, .clip-item h3, .clip-item h4, .clip-item h5, .clip-item h6 {
    color: var(--text) !important;
    font-weight: var(--font-weight-semibold);
}

.clip-item p, .clip-item span, .clip-item div {
    color: var(--text-muted) !important;
    font-weight: var(--font-weight-normal);
}

.clip-item strong, .clip-item b {
    color: var(--text) !important;
    font-weight: var(--font-weight-semibold);
}

/* Spezifische Regeln für Text-Inhalte in Clips */
.clip-item .text-content {
    color: var(--text-muted) !important;
    font-weight: var(--font-weight-normal);
    line-height: 1.6;
}

.clip-item .text-content h1, .clip-item .text-content h2, 
.clip-item .text-content h3, .clip-item .text-content h4, 
.clip-item .text-content h5, .clip-item .text-content h6 {
    color: var(--text) !important;
    font-weight: var(--font-weight-semibold);
}

.clip-item .text-content strong, .clip-item .text-content b {
    color: var(--text) !important;
    font-weight: var(--font-weight-semibold);
}

.audio-container {
    background: rgba(114, 137, 218, 0.1);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    border-left: 4px solid var(--primary);
}

.clip-description {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.clip-description p {
    margin-bottom: 0;
    color: var(--text-muted);
    line-height: 1.6;
    font-weight: var(--font-weight-normal);
}

/* Verbesserte Lesbarkeit für Clip-Description */
.clip-description {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.clip-description h1, .clip-description h2, .clip-description h3, 
.clip-description h4, .clip-description h5, .clip-description h6 {
    color: var(--text) !important;
    font-weight: var(--font-weight-semibold);
}

.clip-description strong, .clip-description b {
    color: var(--text) !important;
    font-weight: var(--font-weight-semibold);
}

/* ===== INTRODUCTION ===== */
.introduction {
    border-left: 4px solid var(--primary);
    padding: 1rem;
    background: rgba(114, 137, 218, 0.05);
    border-radius: 0.375rem;
}

.introduction .lead {
    margin-bottom: 0;
    font-style: italic;
    color: var(--text) !important;
    opacity: 0.9;
    font-weight: var(--font-weight-medium);
    line-height: 1.6;
}

/* ===== ALERT LINKS ===== */
.alert-link {
    color: var(--primary) !important;
    text-decoration: underline;
    font-weight: var(--font-weight-medium);
}

.alert-link:hover {
    color: var(--primary-hover) !important;
}

/* ===== COMMENTS LIST ===== */
.comments-list p {
    color: var(--text) !important;
    opacity: 0.9;
    font-weight: var(--font-weight-normal);
    line-height: 1.6;
}

/* Verbesserte Lesbarkeit für Kommentarnamen */
.comment-item .comment-author,
.comment-item .author-name,
.comment-item .username,
.comment-item .user-name,
.comment-item strong,
.comment-item b,
.comment-item .fw-bold,
.comment-item .font-weight-bold {
    color: var(--text) !important;
    font-weight: var(--font-weight-semibold);
    opacity: 1;
}

/* Zusätzliche Regeln für Kommentarnamen */
.comment-item .name,
.comment-item .author,
.comment-item .user,
.comment-item .comment-username,
.comment-item .comment-name,
.comment-item .comment-author-name,
.comment-item .text-primary,
.comment-item .text-white {
    color: var(--text) !important;
    font-weight: var(--font-weight-semibold);
    opacity: 1;
}

/* Sehr spezifische Regeln für Kommentarnamen */
body .comment-item .comment-author,
body .comment-item .author-name,
body .comment-item .username,
body .comment-item .user-name,
body .comment-item strong,
body .comment-item b {
    color: var(--text) !important;
    font-weight: var(--font-weight-semibold);
    opacity: 1;
}

/* Spezifische Regeln für Kommentarnamen */
.comment-item h1, .comment-item h2, .comment-item h3,
.comment-item h4, .comment-item h5, .comment-item h6 {
    color: var(--text) !important;
    font-weight: var(--font-weight-semibold);
}

/* Allgemeine Regeln für Kommentare */
.comment-item {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border);
    transition: var(--transition);
}

.comment-item:hover {
    background-color: rgba(114, 137, 218, 0.05);
}

/* Kommentar-Avatar Verbesserungen */
.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* ===== TEXT MUTED VARIATIONS ===== */
.text-center.text-muted,
.text-center.text-muted p {
    color: var(--text) !important;
    opacity: 0.8;
    font-weight: var(--font-weight-normal);
}

/* ===== FOOTER ===== */
.footer {
    background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%);
    border-top: 1px solid var(--border);
    padding: var(--spacing-lg) 0;
    flex-shrink: 0;
    margin-top: auto;
    position: sticky;
    bottom: 0;
    width: 100%;
    z-index: 100;
}

.footer-content {
    text-align: center;
    color: var(--text-muted);
    font-weight: var(--font-weight-normal);
}

/* ===== UTILITIES ===== */
.flex-grow-1 {
    flex: 1;
}

/* Load More Button Abstand reduzieren */
#loadMoreContainer {
    margin-bottom: var(--spacing-md);
}

#loadMoreBtn {
    margin-bottom: 0;
}

/* Artikel-Sektion Abstand optimieren */
.container.py-5 {
    padding-bottom: var(--spacing-lg) !important;
}

/* Footer-Abstand optimieren */
#articlesContainer {
    margin-bottom: var(--spacing-sm);
}

#loadMoreContainer + * {
    margin-bottom: var(--spacing-lg);
}

.text-center {
    text-align: center;
}

/* Margin Utilities */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--spacing-xs) !important; }
.mb-2 { margin-bottom: var(--spacing-sm) !important; }
.mb-3 { margin-bottom: var(--spacing-md) !important; }
.mb-4 { margin-bottom: var(--spacing-lg) !important; }
.mb-5 { margin-bottom: var(--spacing-xl) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--spacing-xs) !important; }
.mt-2 { margin-top: var(--spacing-sm) !important; }
.mt-3 { margin-top: var(--spacing-md) !important; }
.mt-4 { margin-top: var(--spacing-lg) !important; }
.mt-5 { margin-top: var(--spacing-xl) !important; }

/* Padding Utilities */
.py-1 { padding-top: var(--spacing-xs) !important; padding-bottom: var(--spacing-xs) !important; }
.py-2 { padding-top: var(--spacing-sm) !important; padding-bottom: var(--spacing-sm) !important; }
.py-3 { padding-top: var(--spacing-md) !important; padding-bottom: var(--spacing-md) !important; }
.py-4 { padding-top: var(--spacing-lg) !important; padding-bottom: var(--spacing-lg) !important; }
.py-5 { padding-top: var(--spacing-xl) !important; padding-bottom: var(--spacing-xl) !important; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .hero-section {
        padding: var(--spacing-xl) 0;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    
    .card-body {
        padding: var(--spacing-md);
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--border-radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}