html,body{overflow-x:hidden}
/* ============================================
   PCGamingWelt - Global Stylesheet
   Version: 1.0
   Stand: 15.02.2026

   EINE Datei fuer ALLE Styles.
   Aenderungen hier gelten global fuer alle Seiten.
   ============================================ */

/* ============================================
   1. CSS VARIABLEN
   ============================================ */
:root {
    /* Hintergruende */
    --bg-dark: #0e0e15;
    --bg-darker: #08080c;
    --bg-card: #171721;
    --bg-card-hover: #222230;

    /* Rahmen */
    --border-color: #303045;

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: #e5e7eb;
    --text-muted: #a8b0bc;
    --text-dim: #8e96a3;

    /* Akzentfarben */
    --accent-cyan: #00f0ff;
    --accent-magenta: #e040fb;
    --accent-green: #10b981;
    --accent-yellow: #fbbf24;
    --accent-red: #ef4444;
    --accent-blue: #3b82f6;
    --accent-orange: #f97316;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Extended Backgrounds */
    --bg-primary: #0d0d12;
    --bg-tertiary: #12121f;
    --bg-disabled: #37474f;
    --bg-disabled-hover: #455a64;

    /* Extended Accent Colors */
    --accent-cyan-dark: #00d4e8;
    --accent-cyan-mid: #0ea5e9;
    --accent-cyan-light: #38bdf8;
    --accent-purple: #a855f7;
    --accent-purple-light: #a78bfa;
    --accent-purple-dark: #7c3aed;
    --accent-green-light: #34d399;
    --accent-green-lighter: #6ee7b7;
    --accent-green-dark: #059669;
    --accent-red-light: #f87171;
    --accent-amber: #f59e0b;
    --accent-blue-light: #60a5fa;
    --accent-orange-light: #fb923c;
    --accent-orange-lighter: #fdba74;
    --accent-pink: #f472b6;
    --accent-teal: #00897b;
    --accent-teal-dark: #00796b;
    --accent-teal-light: #009688;

    /* Brand/Platform Colors */
    --brand-discord: #5865f2;
    --brand-youtube: #ff0000;
    --brand-twitch: #9146ff;
    --brand-kick: #53fc18;
    --brand-twitter: #1da1f2;
    --brand-instagram: #e1306c;
    --brand-facebook: #1877f2;
    --brand-trovo: #00c74e;
    --brand-unraid: #ff8800;

    /* Special */
    --color-black: #000000;

    /* Admin-specific Colors */
    --accent-terminal: #00ff88;
    --accent-amber-light: #ffc107;
    --accent-yellow-dark: #eab308;
    --accent-indigo: #6366f1;
    --accent-indigo-light: #a5b4fc;
    --accent-purple-lighter: #c4b5fd;
    --accent-red-lighter: #fca5a5;
    --accent-red-deep: #dc2626;
    --accent-green-vivid: #22c55e;
    --accent-green-deep: #16a34a;
    --accent-green-bright: #4ade80;
    --accent-cyan-vivid: #06b6d4;
    --accent-cyan-deep: #0891b2;
    --accent-cyan-bright: #22d3ee;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--accent-cyan), var(--accent-magenta));
    --gradient-primary-3: linear-gradient(135deg, var(--accent-cyan), var(--accent-magenta), var(--accent-cyan));

}

/* ============================================
   2. RESET & BASIS
   ============================================ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-dark);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--accent-cyan);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--accent-magenta);
    text-decoration: underline;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

main {
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* Header & Navigation -> siehe /css/nav/ Module */

.btn-dashboard {
    background: var(--bg-card);
    border: 1px solid var(--accent-cyan);
    color: var(--accent-cyan);
}

/* Mobile Menu -> siehe /css/nav-unified.css */

/* ============================================
   4. FOOTER
   ============================================ */
.footer {
    background: var(--bg-darker);
    border-top: 1px solid var(--border-color);
    padding: 40px 0 32px;
    margin-top: 80px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

.footer-brand h3 {
    font-size: 18px;
    font-weight: 700;
    
    
    
    
    margin-bottom: var(--spacing-sm);
}

.footer-brand p {
    color: var(--text-muted);
    font-size: 13px;
}

.footer-links h4 {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: var(--spacing-sm);
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    transition: color var(--transition-base);
}

.footer-links a:hover {
    color: var(--accent-cyan);
    text-decoration: none;
}

.footer-bottom {
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-copyright {
    color: var(--text-muted);
    font-size: 13px;
}

/* ============================================
   5. BUTTONS
   ============================================ */
.btn-cta {
    padding: 16px 32px;
    border-radius: var(--radius-lg);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    cursor: pointer;
    letter-spacing: 0.01em;
    border: none;
}

.btn-cta:hover {
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, #00f0ff, #a855f7);
    color: var(--color-black);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 240, 255, 0.3);
    color: var(--color-black);
    text-decoration: none;
}

.btn-secondary {
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    text-decoration: none;
}

/* ============================================
   6. CARDS
   ============================================ */
.admin-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 0;
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
    transition: all var(--transition-slow);
}

.admin-card:hover {
    border-color: rgba(0, 240, 255, 0.3);
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.1);
}

.card-title {
    color: var(--accent-magenta);
    font-size: 18px;
    font-weight: 600;
    padding: var(--spacing-lg) 28px;
    border-bottom: 1px solid var(--border-color);
}

.card-content {
    padding: var(--spacing-lg) 28px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ============================================
   7. STATS GRID
   ============================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
    transition: border-color var(--transition-base);
}

.stat-card:hover {
    border-color: rgba(0, 240, 255, 0.2);
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--accent-cyan);
}

.stat-label {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: var(--spacing-xs);
    text-transform: uppercase;
}

/* ============================================
   8. PAGE CONTAINERS
   ============================================ */
.page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px var(--spacing-lg);
}

.page-title {
    font-size: 48px;
    font-weight: 900;
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.page-gradient {
    background: linear-gradient(135deg, #00f0ff, #a855f7);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.page-subtitle {
    font-size: 18px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   9. HERO SECTION (Landing Page)
   ============================================ */
.hero-section {
    text-align: center;
    margin-bottom: 60px;
}

.hero-title {
    font-size: 56px;
    font-weight: 900;
    margin-bottom: var(--spacing-md);
    line-height: 1.1;
}

.hero-gradient {
    background: linear-gradient(135deg, #00f0ff, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent-cyan);
}

.hero-subtitle {
    font-size: 20px;
    color: var(--text-muted);
    margin-bottom: var(--spacing-xl);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    margin-bottom: 60px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-top: 40px;
}

/* ============================================
   10. LEGAL PAGES (Impressum, Datenschutz)
   ============================================ */
.legal-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px var(--spacing-lg);
}

.legal-title {
    font-size: 48px;
    font-weight: 900;
    margin-bottom: var(--spacing-sm);
    text-align: center;
}

.legal-gradient {
    background: linear-gradient(135deg, #00f0ff, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent-cyan);
}

.legal-date {
    text-align: center;
    color: var(--text-dim);
    font-size: 14px;
    margin-bottom: var(--spacing-2xl);
}

.legal-content {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.legal-section {
    margin-bottom: 40px;
}

.legal-subtitle {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

.legal-h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 20px 0 10px;
    color: var(--text-secondary);
}

.legal-content p {
    margin-bottom: 12px;
}

.legal-content ul {
    margin: 12px 0 12px 24px;
}

.legal-content ul li {
    margin-bottom: 6px;
}

.legal-content a {
    color: var(--accent-cyan);
    text-decoration: none;
}

.legal-content a:hover {
    text-decoration: underline;
}

.legal-info-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin: var(--spacing-md) 0;
}

/* ============================================
   11. CONTACT PAGE
   ============================================ */
.contact-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl) 28px;
    margin-bottom: var(--spacing-lg);
}

.contact-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.contact-method {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.contact-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: rgba(0, 240, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.contact-info h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.contact-info p,
.contact-info a {
    font-size: 14px;
    color: var(--text-muted);
}

.contact-info a:hover {
    color: var(--accent-cyan);
}

/* ============================================
   12. PROJECTS PAGE
   ============================================ */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.project-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    transition: all var(--transition-slow);
}

.project-card:hover {
    border-color: rgba(0, 240, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.1);
    transform: translateY(-2px);
}

.project-icon {
    font-size: 36px;
    margin-bottom: var(--spacing-md);
}

.project-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.project-desc {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
}

.project-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
}

.status-active {
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-green);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-planned {
    background: rgba(251, 191, 36, 0.15);
    color: var(--accent-yellow);
    border: 1px solid rgba(251, 191, 36, 0.3);
}

/* ============================================
   13. DASHBOARD (eingeloggt)
   ============================================ */
.dashboard-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px var(--spacing-lg);
}

.dashboard-title {
    font-size: 32px;
    font-weight: 900;
    margin-bottom: var(--spacing-sm);
}

.dashboard-subtitle {
    font-size: 16px;
    color: var(--text-muted);
    margin-bottom: var(--spacing-xl);
}

.welcome-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg) 28px;
    margin-bottom: var(--spacing-lg);
}

.welcome-text {
    color: var(--text-muted);
    line-height: 1.6;
}

.quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.quick-link {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-decoration: none;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    gap: 16px;
}

.quick-link:hover {
    border-color: var(--accent-cyan);
    text-decoration: none;
    transform: translateY(-2px);
}


.quick-link-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(0, 240, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent-cyan);
}

.quick-link-icon svg {
    width: 24px;
    height: 24px;
}

.quick-link-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.quick-link-hint {
    font-size: 13px;
    color: var(--text-muted);
}

/* ============================================
   14. AUTH PAGES (Login, Register etc.)
   ============================================ */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    background: var(--bg-dark);
}

.auth-container {
    width: 100%;
    max-width: 440px;
}

.auth-logo {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.auth-logo a {
    text-decoration: none;
}

.auth-logo .brand-logo {
    margin: 0 auto var(--spacing-md);
}

.auth-logo h2 {
    font-size: 24px;
    font-weight: 900;
    background: linear-gradient(135deg, #00f0ff, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent-cyan);
}

.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl) 28px;
}

.auth-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    text-align: center;
}

.auth-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

/* Forms */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.form-input {
    width: 100%;
    padding: 12px var(--spacing-md);
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 15px;
    transition: border-color var(--transition-base);
    outline: none;
}

.form-input:focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.1);
}

.form-input::placeholder {
    color: var(--text-dim);
}

.form-hint {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: var(--spacing-xs);
}

.form-error {
    font-size: 12px;
    color: var(--accent-red);
    margin-top: var(--spacing-xs);
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-md) 0;
}

.form-checkbox input[type="checkbox"] {
    accent-color: var(--accent-cyan);
    width: 16px;
    height: 16px;
}

.form-checkbox label {
    font-size: 14px;
    color: var(--text-muted);
}

/* Auth Buttons */
.btn-auth {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #00f0ff, #a855f7);
    color: var(--color-black);
    font-weight: 700;
    font-size: 16px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    display: block;
    text-align: center;
    text-decoration: none;
}

.btn-auth:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 240, 255, 0.3);
    text-decoration: none;
    color: var(--color-black);
}

.auth-links {
    text-align: center;
    margin-top: var(--spacing-md);
}

.auth-links a {
    font-size: 14px;
    color: var(--text-muted);
}

.auth-links a:hover {
    color: var(--accent-cyan);
}

/* Auth Alerts */
.alert {
    padding: 12px var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    font-size: 14px;
}

.alert-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--accent-red);
}

.alert-success {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: var(--accent-green);
}

.alert-warning {
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: var(--accent-yellow);
}

/* Honeypot (Anti-Spam) */
.hp-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
}

/* ============================================
   15. PREMIUM PAGE SECTIONS
   ============================================ */
.premium-hero {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.premium-badge {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.3);
    border-radius: var(--radius-full);
    color: var(--accent-cyan);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.content-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    transition: all var(--transition-slow);
}

.content-card:hover {
    border-color: rgba(0, 240, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.1);
}

/* ============================================
   16. RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    /* Navigation -> siehe /css/nav-unified.css */

    /* Hero */
    .hero-title {
        font-size: 36px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Features */
    .features-grid {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-content {
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    /* Page containers */
    .page-container,
    .dashboard-container {
        padding: 40px var(--spacing-md);
    }

    .page-title {
        font-size: 32px;
    }

    /* Legal */
    .legal-container {
        padding: 40px var(--spacing-md);
    }

    .legal-title {
        font-size: 32px;
    }

    /* Projects */
    .projects-grid {
        grid-template-columns: 1fr;
    }

    /* Contact */
    .contact-methods {
        grid-template-columns: 1fr;
    }

    /* Content/Premium */
    .content-grid {
        grid-template-columns: 1fr;
    }

    /* Quick Links */
    .quick-links {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .brand-name-svg {
        width: 150px;
        height: 22px;
    }

    .brand-logo {
        width: 40px;
        height: 40px;
        font-size: 12px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .hero-title {
    
    }
}

/* SVG GRADIENT TEXT - iOS Safari Fix */
.svg-gradient-text {
    display: inline-block;
    vertical-align: baseline;
    overflow: visible;
}
.hero-svg {
    display: block !important;
    margin: 0 auto;
    height: 56px;
    width: auto;
    max-width: 100%;
    vertical-align: baseline;
}
.page-svg {
    height: 36px;
    width: auto;
    max-width: 100%;
    vertical-align: baseline;
}
.legal-svg {
    height: 40px;
    width: auto;
    max-width: 100%;
    vertical-align: baseline;
}
.footer-svg {
    height: 18px;
    width: auto;
    vertical-align: baseline;
}
@media (max-width: 768px) {
    .hero-svg {
    display: block !important;
    margin: 0 auto; height: 32px; }
    .page-svg { height: 24px; }
    .legal-svg { height: 28px; }
}
@media (max-width: 480px) {
    .hero-svg {
    display: block !important;
    margin: 0 auto; height: 24px; }
    .page-svg { height: 20px; }
    .legal-svg { height: 24px; }
}

/* Premium Lock Overlay */
.premium-lock-overlay {
    text-align: center;
    padding: 60px 20px;
}
.premium-lock-card {
    max-width: 500px;
    margin: 0 auto;
    background: var(--bg-card, var(--bg-card));
    border: 2px solid var(--accent-cyan, var(--accent-cyan));
    border-radius: 16px;
    padding: 40px 30px;
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.1);
}
.premium-lock-icon {
    font-size: 48px;
    margin-bottom: 16px;
}
.premium-lock-title {
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(135deg, #00f0ff, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 12px;
}
.premium-lock-text {
    color: var(--text-muted, var(--text-muted));
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
}
.premium-lock-features {
    text-align: left;
    margin: 0 auto 24px;
    max-width: 300px;
}
.premium-feature {
    color: var(--text-secondary);
    padding: 6px 0;
    font-size: 14px;
}
.premium-lock-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.content-section {
    margin-top: 30px;
}
.section-title {
    text-align: center;
    font-size: 22px;
    margin-bottom: 20px;
    color: var(--text-primary);
}

/* ============================================
   17. PROFILE PAGE
   ============================================ */
.profile-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px var(--spacing-lg);
}
.profile-title {
    color: var(--accent-cyan);
    font-size: 28px;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
}
.profile-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: 20px;
    transition: border-color var(--transition-base);
}
.profile-card:hover {
    border-color: rgba(0, 240, 255, 0.3);
}

/* ============================================
   18. AUTH EXTRAS
   ============================================ */
.auth-logo-text {
    font-size: 24px;
    font-weight: 900;
    background: linear-gradient(135deg, #00f0ff, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent-cyan);
}
.form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: var(--spacing-md) 0;
}
.form-row-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--spacing-md);
}
.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 14px;
    color: var(--text-muted);
    cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
    accent-color: var(--accent-cyan);
    width: 16px;
    height: 16px;
}
.forgot-link {
    font-size: 13px;
    color: var(--text-muted);
}
.forgot-link:hover {
    color: var(--accent-cyan);
}
.auth-footer {
    text-align: center;
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    font-size: 14px;
    color: var(--text-muted);
}
.btn-row {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}
.btn {
    padding: 12px 24px;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition-base);
    display: inline-block;
    text-align: center;
    text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-success {
    background: var(--accent-green);
    color: var(--text-primary);
}
.btn-success:hover {
    background: var(--accent-green-dark);
    transform: translateY(-2px);
}
.section-hint {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: var(--spacing-md);
    padding: 12px;
    background: rgba(0, 240, 255, 0.05);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--accent-cyan);
}
.back-link {
    color: var(--text-muted);
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    transition: color var(--transition-base);
}
.back-link:hover {
    color: var(--accent-cyan);
    text-decoration: none;
}
.form-input:disabled,
.form-input[readonly] {
    background: var(--bg-card-hover);
    color: var(--text-muted);
    cursor: not-allowed;
    border-color: var(--border-color);
}

@media (max-width: 768px) {
    .profile-container { padding: var(--spacing-md); max-width: 100%; }
    .profile-title { font-size: 22px; margin-bottom: var(--spacing-md); }
    .profile-card { padding: var(--spacing-md); }
    .form-row-grid { grid-template-columns: 1fr; gap: 12px; }
    .form-input { font-size: 16px; min-height: 44px; }
    .btn { width: 100%; min-height: 48px; font-size: 15px; }
    .btn-row { flex-direction: column; }
    input[type="date"].form-input { width: 100% !important; max-width: 100% !important; -webkit-appearance: none; }
}
/* Brand Name - CSS Gradient (replaces SVG) */
.brand-name {
    font-size: 22px;
    font-weight: 900;
    background: linear-gradient(135deg, #00f0ff, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    line-height: 1.2;
}

/* Compact Footer with Tiles */
.footer-compact {
    text-align: center;
}
.footer-top-row {
    margin-bottom: 16px;
}
.footer-brand-name {
    font-size: 18px;
    font-weight: 900;
    background: linear-gradient(135deg, #00f0ff, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.footer-tagline {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 4px;
}
.footer-tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}
.footer-tile {
    padding: 6px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-muted) !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s;
}
.footer-tile:hover {
    border-color: rgba(0, 240, 255, 0.4);
    color: var(--accent-cyan) !important;
    background: rgba(0, 240, 255, 0.05);
}
.ft-ts {
    border-color: rgba(0, 240, 255, 0.3);
    color: var(--accent-cyan) !important;
}
.ft-legal {
    border-color: transparent;
    background: transparent;
}
.ft-legal:hover {
    background: rgba(0, 240, 255, 0.05);
}
.footer-copy {
    color: var(--text-dim);
    font-size: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

@media (max-width: 480px) {
    .brand-name {
        font-size: 16px;
    }
}

/* === GUIDES === */
.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-bottom:30px}
.guide-card{background:var(--bg-card,var(--bg-card));border:1px solid var(--border-color,var(--border-color));border-radius:12px;overflow:hidden;transition:transform .2s,box-shadow .2s;text-decoration:none;color:inherit;display:flex;flex-direction:column;min-width:0}
.guide-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,240,255,.15);border-color:var(--accent-cyan,var(--accent-cyan))}
.guide-card-img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background-color:var(--bg-tertiary,var(--bg-tertiary))}
.guide-card-img-placeholder{width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:48px;background-color:var(--bg-tertiary,var(--bg-tertiary))}
.guide-card-body{padding:16px;flex:1;display:flex;flex-direction:column}
.guide-card-title{font-size:1.05rem;font-weight:700;color:var(--text-primary,var(--text-secondary));margin:0 0 8px}
.guide-card-excerpt{font-size:.85rem;color:var(--text-muted,var(--text-dim));margin:0 0 12px;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.guide-card-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.guide-badge{font-size:.75rem;padding:3px 8px;border-radius:6px;font-weight:600;text-transform:uppercase}
.guide-badge-beginner{background:rgba(16,185,129,.15);color:var(--accent-green)}
.guide-badge-intermediate{background:rgba(251,191,36,.15);color:var(--accent-yellow)}
.guide-badge-advanced{background:rgba(239,68,68,.15);color:var(--accent-red)}
.guide-badge-expert{background:rgba(168,85,247,.15);color:var(--accent-purple)}
.guide-meta-time{font-size:.8rem;color:var(--text-muted,var(--text-dim))}
.guide-meta-video{font-size:.8rem;color:var(--accent-cyan)}
.guide-meta-cat{font-size:.8rem;color:var(--text-secondary,var(--text-muted))}
.guide-meta-date{font-size:.8rem;color:var(--text-muted,var(--text-dim))}
.guide-category-block{margin-bottom:40px}
.guide-empty-msg{color:var(--text-muted,var(--text-dim));text-align:center;padding:40px 0}

/* Guide Detail */
.guide-detail{max-width:900px;margin:0 auto}
.guide-back-link{display:inline-block;color:var(--accent-cyan,var(--accent-cyan));text-decoration:none;font-size:.9rem;margin-bottom:20px}
.guide-back-link:hover{text-decoration:underline}
.guide-detail-hero{width:100%;height:300px;background-size:cover;background-position:center;border-radius:12px;margin-bottom:20px}
.guide-detail-header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.guide-detail-title{font-size:1.8rem;font-weight:800;color:var(--text-primary,var(--text-secondary));margin:0 0 12px;line-height:1.2}
.guide-detail-excerpt{font-size:1rem;color:var(--text-secondary,var(--text-muted));margin:0 0 24px;font-style:normal}
.guide-video-embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:12px;margin-bottom:24px}
.guide-video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%}
.guide-detail-content{color:var(--text-secondary,var(--text-muted));line-height:1.75;font-size:1.05rem}
.guide-detail-content h2{color:var(--text-primary,var(--text-secondary));font-size:1.3rem;margin:28px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--border-color,var(--border-color))}
.guide-detail-content h3{color:var(--text-primary,var(--text-secondary));font-size:1.1rem;margin:24px 0 12px}
.guide-detail-content table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.9rem}
.guide-detail-content th,.guide-detail-content td{padding:8px 12px;border:1px solid var(--border-color,var(--border-color));text-align:left}
.guide-detail-content th{background:var(--bg-tertiary,var(--bg-tertiary));color:var(--text-primary,var(--text-secondary));font-weight:600}
.guide-detail-content code{background:rgba(0,240,255,.08);color:var(--accent-cyan);padding:2px 6px;border-radius:4px;font-size:.9rem}
.guide-detail-content ul,.guide-detail-content ol{padding-left:24px;margin:12px 0}
.guide-detail-content li{margin:6px 0}
.guide-detail-content p{margin-bottom:14px}
.guide-detail-content p:last-child{margin-bottom:0}
.guide-detail-content .tip{background:rgba(16,185,129,.08);border-left:3px solid var(--accent-green);padding:12px 16px;border-radius:0 8px 8px 0;margin:16px 0}
.guide-detail-content .warning{background:rgba(251,191,36,.08);border-left:3px solid var(--accent-yellow);padding:12px 16px;border-radius:0 8px 8px 0;margin:16px 0}
.guide-detail-footer{margin-top:30px;padding-top:16px;border-top:1px solid var(--border-color,var(--border-color));display:flex;gap:20px}
.guide-premium-teaser{text-align:center;padding:40px 0}
.guide-premium-teaser-text{color:var(--text-muted,var(--text-dim));font-size:1.1rem;margin-bottom:20px}

@media(max-width:768px){
.guide-grid{grid-template-columns:1fr;gap:16px}
.guide-card{border-radius:10px}
.guide-card-img{aspect-ratio:16/9}
.guide-detail-title{font-size:1.3rem}
.guide-detail-hero{height:180px}
}
@media(min-width:769px) and (max-width:1024px){
.guide-grid{grid-template-columns:repeat(2,1fr);gap:16px}
}

/* Nav Small Screens -> siehe /css/nav-unified.css */

/* === GUIDE PREMIUM TEASER === */
.guide-teaser-content{position:relative;max-height:250px;overflow:hidden}
.guide-fade-overlay{position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(transparent,var(--bg-primary,var(--bg-primary)));pointer-events:none}
.guide-register-cta,.guide-premium-cta{text-align:center;padding:40px 30px;margin:30px 0;border-radius:16px;border:1px solid var(--border-color,var(--border-color))}
.guide-register-cta{background:linear-gradient(135deg,rgba(0,240,255,.05),rgba(224,64,251,.05))}
.guide-premium-cta{background:linear-gradient(135deg,rgba(251,191,36,.06),rgba(224,64,251,.06));border-color:rgba(251,191,36,.2)}
.guide-cta-icon{font-size:48px;margin-bottom:12px}
.guide-cta-title{font-size:1.4rem;font-weight:800;color:var(--text-primary,var(--text-secondary));margin:0 0 12px}
.guide-cta-text{color:var(--text-muted,var(--text-dim));font-size:.95rem;max-width:600px;margin:0 auto 20px;line-height:1.6}
.guide-cta-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.guide-cta-btn{padding:12px 28px;border-radius:10px;text-decoration:none;font-weight:700;font-size:.95rem;transition:all .2s}
.guide-cta-btn-primary{background:linear-gradient(135deg,var(--accent-cyan),var(--accent-magenta));color:var(--color-black)}
.guide-cta-btn-primary:hover{opacity:.85;transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,240,255,.3);color:var(--color-black);text-decoration:none}
.guide-cta-btn-secondary{background:var(--bg-card,var(--bg-card));color:var(--text-secondary,var(--text-muted));border:1px solid var(--border-color,var(--border-color))}
.guide-cta-btn-secondary:hover{border-color:var(--accent-cyan,var(--accent-cyan));color:var(--accent-cyan,var(--accent-cyan));text-decoration:none}
.guide-premium-features{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:24px}
.guide-pf-item{font-size:.85rem;color:var(--text-secondary,var(--text-muted));background:rgba(16,185,129,.06);padding:6px 14px;border-radius:8px;border:1px solid rgba(16,185,129,.15)}
@media(max-width:768px){
.guide-cta-buttons{flex-direction:column;align-items:center}
.guide-cta-btn{width:100%;max-width:300px;text-align:center}
.guide-premium-features{flex-direction:column;align-items:center}
}

/* === GUIDE PREMIUM HINT === */
.guide-premium-hint{display:flex;align-items:center;gap:10px;background:rgba(251,191,36,.06);border:1px solid rgba(251,191,36,.2);border-radius:10px;padding:12px 18px;margin-bottom:24px;font-size:.9rem;color:var(--text-secondary,var(--text-muted))}
.guide-premium-hint a{color:var(--accent-yellow);text-decoration:underline}
.guide-premium-hint-icon{font-size:1.2rem}
.guide-meta-premium{font-size:.7rem;color:var(--accent-yellow);font-weight:600}

/* === RESPONSIVE OVERFLOW FIX === */
.guide-card{min-width:0}
.guide-card-title{word-wrap:break-word;overflow-wrap:break-word}
.guide-detail-content{overflow-x:auto}
.guide-detail-content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.guide-detail-content pre{overflow-x:auto;max-width:100%}
.guide-detail-content img{max-width:100%;height:auto}

/* Admin Nav scrollbar styling */
/* admin-nav scrollbar (migrated to nav-unified.css)  admin/_nav.css */

/* Page Container overflow protect */
.page-container,.dashboard-container,.legal-container,.profile-container{overflow-x:hidden}

/* Guide card locked (Gast) */
.guide-card-locked{position:relative;cursor:default;text-decoration:none;color:inherit}
.guide-card-locked .guide-card-img{filter:brightness(.55)}
.guide-card-locked .guide-card-body{opacity:.65}
.guide-card-lock-overlay{position:absolute;top:10px;right:10px;width:30px;height:30px;background:rgba(0,0,0,.6);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px}

/* ============ Cross-Linking (Public) ============ */
.cross-links{display:flex;flex-direction:column;gap:8px}
.cross-link-item{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--bg-dark,var(--bg-primary));border:1px solid var(--border-color,var(--bg-card));border-radius:10px;text-decoration:none;transition:all .25s}
.cross-link-item:hover{border-color:rgba(0,240,255,0.4);box-shadow:0 2px 12px rgba(0,240,255,0.08);transform:translateX(4px)}
.cross-link-icon{font-size:22px;min-width:32px;text-align:center}
.cross-link-text{display:flex;flex-direction:column;gap:2px}
.cross-link-title{color:var(--text-primary,var(--text-secondary));font-weight:600;font-size:14px}
.cross-link-meta{color:var(--text-muted,var(--text-dim));font-size:12px}
.cross-link-guide:hover{border-color:rgba(0,240,255,0.5)}
.cross-link-download:hover{border-color:rgba(224,64,251,0.5);box-shadow:0 2px 12px rgba(224,64,251,0.08)}
.cross-link-project:hover{border-color:rgba(0,240,255,0.5)}
.cross-link-heading{color:var(--accent-cyan,var(--accent-cyan));font-size:15px;font-weight:700;margin:16px 0 10px}
.cross-link-section{margin-bottom:16px}
.guide-cross-links{margin:24px 0;padding:20px;background:rgba(0,240,255,0.02);border:1px solid var(--border-color,var(--bg-card));border-radius:12px}


/* ============================================
   Guide Premium Protection + Read Badge
   ============================================ */

/* Premium content protection - prevent casual copying */
.guide-premium-protected {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Make any accidental selection invisible */
.guide-premium-protected::selection,
.guide-premium-protected *::selection {
    background: transparent;
    color: transparent;
}
.guide-premium-protected::-moz-selection,
.guide-premium-protected *::-moz-selection {
    background: transparent;
    color: transparent;
}

/* Allow selecting code blocks within protected content */
.guide-premium-protected pre,
.guide-premium-protected code,
.guide-premium-protected .guide-code-block {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
.guide-premium-protected pre::selection,
.guide-premium-protected code::selection {
    background: rgba(0, 240, 255, 0.3);
    color: inherit;
}

/* Block printing of premium content */
@media print {
    .guide-premium-protected {
        display: none !important;
    }
    .guide-premium-protected + script {
        display: none !important;
    }
    body::after {
        content: "Premium-Inhalte k”nnen nicht gedruckt werden. Besuche pcgamingwelt.de fr den vollst„ndigen Zugang.";
        display: block;
        font-size: 18px;
        text-align: center;
        padding: 60px 20px;
        color: var(--text-dim);
    }
}

/* Guide card image wrapper for badge positioning */
.guide-card-img-wrapper {
    position: relative;
    overflow: hidden;
}

.guide-card-img-wrapper .guide-card-img,
.guide-card-img-wrapper .guide-card-img-placeholder {
    width: 100%;
}

/* "Gelesen am" badge on cover image */
.guide-read-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.8);
    color: var(--accent-cyan);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(0, 240, 255, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2;
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: 0.3px;
}


/* ================================================
   HOMEPAGE STYLES (home-* prefix)
   ================================================ */

.dashboard-container:has(.home-hero) { padding-top: 20px; }
/* Hero Section */
.home-hero {
    position: relative;
    text-align: center;
    padding-top: 0; padding-bottom: 20px;
}
.home-hero-glow {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(0,240,255,0.08) 0%, rgba(224,64,251,0.05) 40%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: homeGlowPulse 4s ease-in-out infinite;
}
@keyframes homeGlowPulse {
    0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
}
.home-hero > *:not(.home-hero-glow) { position: relative; z-index: 1; }
.home-hero-title { text-align: center; }
.home-gradient-text {
    font-size: 56px;
    font-weight: 900;
    background: linear-gradient(135deg, #00f0ff, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: homeGradientShift 3s ease infinite;
    background-size: 200% 200%;
}
@keyframes homeGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.home-hero-sub {
    text-align: center;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.home-hero-cta {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Stats Grid */
.home-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 40px;
}
.home-stat {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 20px 16px;
    text-align: center;
    transition: border-color 0.3s;
}
.home-stat:hover { border-color: rgba(0,240,255,0.3); }
.home-stat-val {
    font-size: 28px;
    font-weight: 800;
    color: var(--accent-cyan);
    margin-bottom: 4px;
}
.home-stat-lbl {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Section Headers */
.home-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    margin-top: 10px;
}
.home-section-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}
.home-section-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-cyan);
    text-decoration: none;
    transition: color 0.2s;
}
.home-section-link:hover { color: var(--accent-magenta); text-decoration: none; }

/* Guides Grid (4 Karten) */
.home-guides-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}
.home-guide-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all 0.3s ease;
    text-decoration: none;
    color: var(--text-primary);
    display: block;
}
.home-guide-card:hover {
    border-color: rgba(0,240,255,0.4);
    box-shadow: 0 8px 32px rgba(0,240,255,0.12);
    transform: translateY(-4px);
    text-decoration: none;
}
.home-guide-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}
.home-guide-img-placeholder {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-darker);
    font-size: 40px;
}
.home-guide-body { padding: 12px 16px 16px; }
.home-guide-cat {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--accent-cyan);
    letter-spacing: 0.5px;
}
.home-guide-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 6px 0 8px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-guide-meta {
    display: flex;
    gap: 8px;
    align-items: center;
}
.home-guide-diff {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}
.home-guide-diff-beginner { background: rgba(16,185,129,0.15); color: var(--accent-green); }
.home-guide-diff-intermediate { background: rgba(251,191,36,0.15); color: var(--accent-yellow); }
.home-guide-diff-advanced { background: rgba(239,68,68,0.15); color: var(--accent-red); }
.home-guide-diff-expert { background: rgba(168,85,247,0.15); color: var(--accent-purple); }
.home-guide-time {
    font-size: 11px;
    color: var(--text-dim);
}

/* YouTube Section */
.home-yt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
    margin-bottom: 40px;
}
.home-yt-featured {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all 0.3s;
    text-decoration: none;
    color: var(--text-primary);
}
.home-yt-featured:hover {
    border-color: rgba(255,0,0,0.4);
    box-shadow: 0 8px 32px rgba(255,0,0,0.12);
    text-decoration: none;
}
.home-yt-featured-thumb {
    position: relative;
    flex: 1;
    min-height: 220px;
}
.home-yt-featured-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.home-yt-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 64px; height: 64px;
    background: rgba(255,0,0,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(255,0,0,0.4);
    transition: transform 0.2s;
}
.home-yt-featured:hover .home-yt-play { transform: translate(-50%,-50%) scale(1.1); }
.home-yt-play::after {
    content: '';
    width: 0; height: 0;
    border-left: 22px solid var(--text-primary);
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    margin-left: 4px;
}
.home-yt-featured-info { padding: 20px; }
.home-yt-tag {
    display: inline-block;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-weight: 600;
    background: rgba(255,0,0,0.12);
    color: var(--accent-red);
    margin-bottom: 10px;
}
.home-yt-featured-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 8px;
}
.home-yt-featured-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.home-yt-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all 0.3s;
    text-decoration: none;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
}
.home-yt-card:hover {
    border-color: rgba(255,0,0,0.3);
    transform: translateY(-2px);
    text-decoration: none;
}
.home-yt-card-thumb {
    position: relative;
    height: 140px;
}
.home-yt-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.home-yt-play-sm {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 40px; height: 40px;
    background: rgba(255,0,0,0.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-yt-play-sm::after {
    content: '';
    width: 0; height: 0;
    border-left: 14px solid var(--text-primary);
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    margin-left: 3px;
}
.home-yt-card-info { padding: 12px 16px; }
.home-yt-card-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Projects Grid */
.home-projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}
.home-project-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all 0.3s;
    text-decoration: none;
    color: var(--text-primary);
    display: block;
}
.home-project-card:hover {
    border-color: rgba(0,240,255,0.4);
    box-shadow: 0 8px 32px rgba(0,240,255,0.12);
    transform: translateY(-4px);
    text-decoration: none;
}
.home-project-img { width: 100%; height: 200px; object-fit: cover; display: block; }
.home-project-placeholder { height: 200px; display: flex; align-items: center; justify-content: center; background: var(--bg-darker); font-size: 40px; }
.home-project-body { padding: 16px 20px 20px; }
.home-project-name { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.home-project-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.home-project-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
}
.home-badge-aktiv { background: rgba(16,185,129,0.15); color: var(--accent-green); border: 1px solid rgba(16,185,129,0.3); }
.home-badge-geplant { background: rgba(251,191,36,0.15); color: var(--accent-yellow); border: 1px solid rgba(251,191,36,0.3); }

/* Feature Tiles */
.home-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}
.home-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 20px;
    transition: all 0.25s;
    text-decoration: none;
    color: var(--text-primary);
}
.home-feature:hover {
    border-color: rgba(0,240,255,0.3);
    box-shadow: 0 0 20px rgba(0,240,255,0.08);
    text-decoration: none;
    transform: translateY(-2px);
}
.home-feature-icon {
    width: 48px; height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.home-fi-bench { background: rgba(0,240,255,0.1); }
.home-fi-guide { background: rgba(224,64,251,0.1); }
.home-fi-dl { background: rgba(16,185,129,0.1); }
.home-fi-hw { background: rgba(249,115,22,0.1); }
.home-feature-info { flex: 1; }
.home-feature-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.home-feature-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* Community Cards (TS + Discord) */
.home-community-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}
.home-community-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 24px;
    transition: all 0.3s;
}
.home-ts-card:hover { border-color: rgba(0,240,255,0.3); }
.home-dc-card:hover { border-color: rgba(88,101,242,0.3); }
.home-community-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.home-community-icon { font-size: 20px; }
.home-community-name { font-size: 16px; font-weight: 700; flex: 1; }
.home-community-status {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-full);
}
.home-status-online {
    background: rgba(16,185,129,0.15);
    color: var(--accent-green);
    border: 1px solid rgba(16,185,129,0.3);
}
.home-community-body { margin-bottom: 16px; }
.home-community-detail {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
}
.home-community-detail:last-child { border-bottom: none; }
.home-community-label { color: var(--text-muted); }
.home-community-value { color: var(--text-primary); font-weight: 600; }
.home-community-btn {
    display: block;
    text-align: center;
    padding: 10px;
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}
.home-ts-btn {
    background: rgba(0,240,255,0.1);
    color: var(--accent-cyan);
    border: 1px solid rgba(0,240,255,0.3);
}
.home-ts-btn:hover { background: rgba(0,240,255,0.2); text-decoration: none; color: var(--accent-cyan); }
.home-dc-btn {
    background: rgba(88,101,242,0.1);
    color: var(--brand-discord);
    border: 1px solid rgba(88,101,242,0.3);
}
.home-dc-btn:hover { background: rgba(88,101,242,0.2); text-decoration: none; color: var(--brand-discord); }

/* About Section */
.home-about {
    position: relative;
    background: linear-gradient(135deg, rgba(0,240,255,0.04), rgba(224,64,251,0.04));
    border: 1px solid rgba(0,240,255,0.12);
    border-radius: var(--radius-xl);
    padding: 40px;
    margin-bottom: 40px;
    overflow: hidden;
}
.home-about-glow {
    position: absolute;
    top: -50px; right: -50px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(224,64,251,0.06), transparent 70%);
    pointer-events: none;
}
.home-about-content { position: relative; z-index: 1; }
.home-about-title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #00f0ff, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.home-about-text {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 24px;
    max-width: 700px;
}
.home-about-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.home-about-hl {
    text-align: center;
    padding: 16px 8px;
    background: rgba(0,0,0,0.2);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.05);
}
.home-about-hl-val {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: var(--accent-cyan);
    margin-bottom: 4px;
}
.home-about-hl-lbl {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Social Bar */
.home-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 40px;
}
.home-social-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid;
    transition: all 0.2s;
}
.home-social-pill:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.home-sp-youtube { color: var(--brand-youtube); border-color: rgba(255,0,0,0.25); background: rgba(255,0,0,0.06); }
.home-sp-youtube:hover { background: rgba(255,0,0,0.12); color: var(--brand-youtube); }
.home-sp-twitch { color: var(--brand-twitch); border-color: rgba(145,70,255,0.25); background: rgba(145,70,255,0.06); }
.home-sp-twitch:hover { background: rgba(145,70,255,0.12); color: var(--brand-twitch); }
.home-sp-kick { color: var(--brand-kick); border-color: rgba(83,252,24,0.25); background: rgba(83,252,24,0.06); }
.home-sp-kick:hover { background: rgba(83,252,24,0.12); color: var(--brand-kick); }
.home-sp-discord { color: var(--brand-discord); border-color: rgba(88,101,242,0.25); background: rgba(88,101,242,0.06); }
.home-sp-discord:hover { background: rgba(88,101,242,0.12); color: var(--brand-discord); }
.home-sp-twitter { color: var(--brand-twitter); border-color: rgba(29,161,242,0.25); background: rgba(29,161,242,0.06); }
.home-sp-twitter:hover { background: rgba(29,161,242,0.12); color: var(--brand-twitter); }
.home-sp-instagram { color: var(--brand-instagram); border-color: rgba(225,48,108,0.25); background: rgba(225,48,108,0.06); }
.home-sp-instagram:hover { background: rgba(225,48,108,0.12); color: var(--brand-instagram); }
.home-sp-all { color: var(--accent-cyan); border-color: rgba(0,240,255,0.25); background: rgba(0,240,255,0.06); }
.home-sp-all:hover { background: rgba(0,240,255,0.12); color: var(--accent-cyan); }

/* CTA Banner */
.home-cta {
    background: linear-gradient(135deg, rgba(0,240,255,0.06), rgba(224,64,251,0.06));
    border: 1px solid rgba(0,240,255,0.15);
    border-radius: var(--radius-xl);
    padding: 40px;
    text-align: center;
}
.home-cta-title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #00f0ff, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.home-cta-desc {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 20px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.home-cta-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Responsive */
@media(max-width: 1024px) {
    .home-guides-grid { grid-template-columns: repeat(2, 1fr); }
    .home-about-highlights { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width: 768px) {
    .home-gradient-text { font-size: 36px; }
    .home-stats { grid-template-columns: repeat(2, 1fr); }
    .home-guides-grid { grid-template-columns: 1fr; }
    .home-yt-grid { grid-template-columns: 1fr; }
    .home-yt-featured { grid-column: 1; grid-row: auto; }
    .home-features { grid-template-columns: 1fr; }
    .home-community-grid { grid-template-columns: 1fr; }
    .home-about { padding: 24px; }
    .home-about-highlights { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   MOBILE FONTS & TOUCH-TARGETS (21.02.2026)
   Aufgabe #8: Basis-Fontsize erh”hen, Touch min 44px
   ============================================ */
body {
    font-size: 16px;
}

@media (max-width: 768px) {
    body {
        font-size: 17px;
    }

    /* Touch-Targets: min 44px */
    .nav-link,
    .mobile-nav-link,
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-login,
    button,
    input[type="submit"],
    input[type="button"],
    a.footer-tile {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .mobile-nav-link {
        font-size: 16px;
        padding: 14px 20px;
    }

    /* Tabellen auf Mobile lesbarer */
    table {
        font-size: 14px;
    }
    
    td, th {
        padding: 10px 8px;
    }
}

/* Kopierschutz fr ALLE Guide-Inhalte - verst„rkt */
.guide-content-protected,
.guide-teaser-content,
.guide-premium-protected {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -khtml-user-select: none !important;
}
.guide-content-protected::selection,
.guide-content-protected *::selection,
.guide-teaser-content::selection,
.guide-teaser-content *::selection,
.guide-premium-protected::selection,
.guide-premium-protected *::selection {
    background: transparent !important;
    color: transparent !important;
}
.guide-content-protected::-moz-selection,
.guide-content-protected *::-moz-selection,
.guide-teaser-content::-moz-selection,
.guide-teaser-content *::-moz-selection,
.guide-premium-protected::-moz-selection,
.guide-premium-protected *::-moz-selection {
    background: transparent !important;
    color: transparent !important;
}
/* Code-Bl”cke drfen kopiert werden */
.guide-premium-protected pre,
.guide-premium-protected code,
.guide-premium-protected .guide-code-block,
.guide-content-protected pre,
.guide-content-protected code {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
}

/* Crosslink Search & Checkboxes */
.crosslink-search{margin-bottom:8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px 12px;color:var(--text-primary);font-size:13px;width:100%}
.crosslink-search:focus{border-color:rgba(0,240,255,.4);outline:none;box-shadow:0 0 8px rgba(0,240,255,.1)}
.crosslink-search::placeholder{color:var(--text-muted);opacity:.6}
.crosslink-checkboxes{max-height:300px;overflow-y:auto;border:1px solid var(--border-color);border-radius:8px;padding:4px}
.crosslink-checkboxes::-webkit-scrollbar{width:4px}
.crosslink-checkboxes::-webkit-scrollbar-thumb{background:rgba(0,240,255,.3);border-radius:4px}
.crosslink-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;cursor:pointer;transition:background .15s;font-size:13px;color:var(--text-secondary)}
.crosslink-item:hover{background:rgba(0,240,255,.05)}
.crosslink-item input[type="checkbox"]{accent-color:var(--accent-cyan);width:16px;height:16px;flex-shrink:0}
.crosslink-item input[type="checkbox"]:checked + *{color:var(--accent-cyan)}
/* Credentials Table */
.cred-url{font-size:12px;color:var(--accent-cyan);opacity:.7;text-decoration:none}
.cred-url:hover{opacity:1;text-decoration:underline}
.cred-username{background:rgba(255,255,255,.04);padding:2px 8px;border-radius:4px;font-size:12px;font-family:'Courier New',monospace;color:var(--accent-cyan)}
.cred-icon-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:14px;padding:2px 4px;transition:opacity .15s}
.cred-icon-btn:hover{opacity:.7}
.cred-server-badge{font-size:10px;font-weight:700;letter-spacing:.5px;padding:3px 8px;border-radius:4px;background:rgba(255,255,255,.06);color:var(--text-secondary)}
.cred-server-webserver{color:var(--accent-cyan);border:1px solid rgba(0,240,255,.2)}
.cred-server-teamspeak{color:var(--accent-purple-light);border:1px solid rgba(167,139,250,.2)}
.cred-server-trmm{color:var(--accent-amber);border:1px solid rgba(245,158,11,.2)}
.cred-server-unraid{color:var(--accent-green);border:1px solid rgba(16,185,129,.2)}
.cred-server-extern{color:var(--accent-pink);border:1px solid rgba(244,114,182,.2)}
.cred-cat-badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:4px;background:rgba(0,240,255,.08);color:var(--accent-cyan);text-transform:uppercase;letter-spacing:.3px}
.cred-info-btn{background:none;border:1px solid rgba(0,240,255,.2);cursor:pointer;font-size:14px;padding:4px 8px;border-radius:6px;transition:all .15s}
.cred-info-btn:hover{background:rgba(0,240,255,.1);border-color:rgba(0,240,255,.4)}
.cred-no-info{color:var(--text-muted);font-size:12px}
.cred-info-row td{padding:0!important;border-top:none!important}
.cred-info-content{background:rgba(0,240,255,.03);border:1px solid rgba(0,240,255,.1);border-radius:8px;padding:10px 16px;margin:4px 8px 12px;font-size:13px;color:var(--text-secondary);line-height:1.5}
.cred-info-label{font-weight:700;color:var(--accent-cyan);margin-right:4px}
.cred-actions{display:flex;gap:4px}
.cred-action-btn{background:none;border:1px solid rgba(255,255,255,.1);cursor:pointer;font-size:14px;padding:4px 8px;border-radius:6px;text-decoration:none;transition:all .15s}
.cred-action-btn:hover{background:rgba(255,255,255,.05)}
.cred-action-edit:hover{border-color:rgba(0,240,255,.3)}
.cred-action-delete:hover{border-color:rgba(239,68,68,.3)}
/* ============================================================
   CREDENTIALS PAGE
   ============================================================ */
.cred-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:20px;padding:16px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px}
.cred-filter-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:1}
.cred-filter-select{background:rgba(255,255,255,.04);border:1px solid var(--border-color);border-radius:8px;padding:8px 12px;color:var(--text-primary);font-size:13px;min-width:130px;cursor:pointer}
.cred-filter-select:focus{border-color:rgba(0,240,255,.4);outline:none}
.cred-filter-search{background:rgba(255,255,255,.04);border:1px solid var(--border-color);border-radius:8px;padding:8px 12px;color:var(--text-primary);font-size:13px;min-width:180px;flex:1;max-width:280px}
.cred-filter-search:focus{border-color:rgba(0,240,255,.4);outline:none}
.cred-filter-search::placeholder{color:var(--text-muted)}
.cred-filter-btn{background:linear-gradient(135deg,var(--accent-cyan),var(--accent-magenta));color:var(--color-black);border:none;padding:8px 18px;border-radius:8px;font-weight:700;font-size:13px;cursor:pointer;transition:all .2s}
.cred-filter-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,240,255,.3)}
.cred-filter-reset{color:var(--text-muted);font-size:12px;text-decoration:none;padding:8px 12px;border:1px solid var(--border-color);border-radius:8px;transition:all .15s}
.cred-filter-reset:hover{color:var(--accent-cyan);border-color:rgba(0,240,255,.3)}
.cred-add-btn{background:linear-gradient(135deg,var(--accent-cyan),var(--accent-magenta));color:var(--color-black);padding:10px 20px;border-radius:10px;font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap;transition:all .2s;flex-shrink:0}
.cred-add-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,240,255,.3)}
.cred-list{display:flex;flex-direction:column;gap:6px}
.cred-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:10px;transition:all .15s;overflow:hidden}
.cred-card:hover{border-color:rgba(0,240,255,.15)}
.cred-inactive{opacity:.45}
.cred-card-main{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;padding:12px 16px;align-items:center}
.cred-card-left{min-width:0}
.cred-card-name{font-weight:700;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cred-card-meta{display:flex;align-items:center;gap:8px;margin-top:2px;flex-wrap:wrap}
.cred-card-service{font-size:12px;color:var(--text-muted)}
.cred-card-url{font-size:11px;color:rgba(0,240,255,.6);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.cred-card-url:hover{color:var(--accent-cyan);text-decoration:underline}
.cred-card-center{display:flex;flex-direction:column;gap:4px;min-width:0}
.cred-card-user,.cred-card-pw{display:flex;align-items:center;gap:4px}
.cred-user-code{background:rgba(0,240,255,.06);padding:3px 8px;border-radius:4px;font-size:12px;font-family:"Courier New",monospace;color:var(--accent-cyan);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.cred-pw-mask{font-size:12px;color:var(--text-muted);font-family:"Courier New",monospace;letter-spacing:1px}
.cred-copy-btn{background:none;border:none;cursor:pointer;font-size:12px;padding:2px;opacity:.5;transition:opacity .15s;flex-shrink:0}
.cred-copy-btn:hover{opacity:1}
.cred-pw-eye{opacity:.7;font-size:13px}
.cred-pw-eye:hover{opacity:1}
.cred-card-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.cred-card-badges{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.cred-badge-server{font-size:9px;font-weight:800;letter-spacing:.5px;padding:2px 7px;border-radius:4px;background:rgba(255,255,255,.05)}
.cred-srv-webserver{color:var(--accent-cyan);border:1px solid rgba(0,240,255,.25)}
.cred-srv-teamspeak{color:var(--accent-purple-light);border:1px solid rgba(167,139,250,.25)}
.cred-srv-trmm{color:var(--accent-amber);border:1px solid rgba(245,158,11,.25)}
.cred-srv-unraid{color:var(--accent-green);border:1px solid rgba(16,185,129,.25)}
.cred-srv-extern{color:var(--accent-pink);border:1px solid rgba(244,114,182,.25)}
.cred-badge-cat{font-size:9px;font-weight:700;padding:2px 7px;border-radius:4px;background:rgba(0,240,255,.06);color:rgba(0,240,255,.7);text-transform:uppercase;letter-spacing:.3px}
.cred-card-actions{display:flex;gap:3px}
.cred-act-btn{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);cursor:pointer;font-size:12px;padding:4px 7px;border-radius:5px;text-decoration:none;transition:all .15s;line-height:1}
.cred-act-btn:hover{background:rgba(255,255,255,.06)}
.cred-act-info:hover{border-color:rgba(0,240,255,.3)}
.cred-act-edit:hover{border-color:rgba(0,240,255,.3)}
.cred-act-del:hover{border-color:rgba(239,68,68,.3)}
.cred-card-info{padding:8px 16px 12px;background:rgba(0,240,255,.02);border-top:1px solid rgba(0,240,255,.08);font-size:12px;color:var(--text-secondary);line-height:1.5}
.cred-info-tag{font-weight:700;color:var(--accent-cyan);font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin-right:6px}
.cred-empty{text-align:center;color:var(--text-muted);padding:40px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px}
.cred-encryption-info{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 16px;background:rgba(0,240,255,.02);border:1px solid rgba(0,240,255,.1);border-radius:10px}
.cred-lock-icon{font-size:18px;flex-shrink:0}
.cred-encryption-info strong{font-size:12px;color:var(--text-primary);display:block}
.cred-encryption-info span{font-size:11px;color:var(--text-muted)}
@media(max-width:900px){
.cred-card-main{grid-template-columns:1fr;gap:8px}
.cred-card-right{flex-direction:row;align-items:center;justify-content:space-between;width:100%;padding-top:6px;border-top:1px solid rgba(255,255,255,.04)}
.cred-card-badges{justify-content:flex-start}
.cred-toolbar{flex-direction:column;align-items:stretch}
.cred-add-btn{text-align:center}
.cred-filter-search{max-width:100%}
}

/* ============================================================
   GUIDE SEARCH BAR
   ============================================================ */
.guide-search-bar {
    margin-bottom: 28px;
}
.guide-search-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.guide-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.guide-search-icon {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    pointer-events: none;
}
.guide-search-input {
    width: 100%;
    padding: 14px 40px 14px 44px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 14px;
    transition: all .2s;
}
.guide-search-input:focus {
    outline: none;
    border-color: rgba(0, 240, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.08);
}
.guide-search-input::placeholder {
    color: var(--text-muted);
    font-size: 13px;
}
.guide-search-clear {
    position: absolute;
    right: 14px;
    color: var(--text-muted);
    font-size: 20px;
    text-decoration: none;
    line-height: 1;
    padding: 4px;
    transition: color .15s;
}
.guide-search-clear:hover {
    color: var(--accent-cyan);
}
.guide-filter-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.guide-cat-chip {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}
.guide-cat-chip:hover {
    background: rgba(0, 240, 255, 0.06);
    border-color: rgba(0, 240, 255, 0.2);
    color: var(--accent-cyan);
}
.guide-cat-chip.active {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.12), rgba(224, 64, 251, 0.12));
    border-color: rgba(0, 240, 255, 0.3);
    color: var(--accent-cyan);
}
.guide-search-result-info {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-muted);
    padding: 0 4px;
}
@media (max-width: 640px) {
    .guide-search-input {
        padding: 12px 36px 12px 40px;
        font-size: 13px;
    }
    .guide-cat-chip {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* Admin Filter Bar */
.admin-filter-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.filter-pill{padding:7px 16px;border-radius:20px;font-size:12px;font-weight:600;color:var(--text-secondary);background:rgba(255,255,255,.03);border:1px solid var(--border-color);text-decoration:none;transition:all .2s;white-space:nowrap}
.filter-pill:hover{background:rgba(0,240,255,.06);border-color:rgba(0,240,255,.2);color:var(--accent-cyan)}
.filter-pill.active{background:linear-gradient(135deg,rgba(0,240,255,.12),rgba(224,64,251,.12));border-color:rgba(0,240,255,.3);color:var(--accent-cyan)}
.admin-info-box{background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.15);border-radius:10px;padding:14px 18px;font-size:13px;color:var(--text-secondary);line-height:1.5}
.admin-info-box strong{color:var(--accent-yellow)}
.table-actions{white-space:nowrap}
.btn-edit{background:rgba(0,240,255,.08);color:var(--accent-cyan);border:1px solid rgba(0,240,255,.2);text-decoration:none;padding:5px 12px;border-radius:6px;font-size:12px;font-weight:600;transition:all .15s}
.btn-edit:hover{background:rgba(0,240,255,.15);border-color:rgba(0,240,255,.4)}
.btn-cta{padding:10px 20px;border-radius:10px;font-weight:700;font-size:13px;text-decoration:none;transition:all .2s;display:inline-block}
.btn-cta.btn-primary{background:linear-gradient(135deg,var(--accent-cyan),var(--accent-magenta));color:var(--color-black)}
.btn-cta.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,240,255,.3)}
.badge-info{background:rgba(0,240,255,.1);color:var(--accent-cyan)}

/* Homepage Nav Dropdowns + Mobile Menu -> siehe /css/nav/ Module */


/* ===== HOMEPAGE ENHANCED DESIGN ===== */

/* Modernere CTA-Buttons */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.3px;
  position: relative;
  overflow: hidden;
}
.btn-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s;
}
.btn-cta:hover::before {
  opacity: 1;
}
.btn-cta.btn-primary {
  background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-cyan-mid) 50%, var(--accent-purple-dark) 100%);
  color: var(--text-primary);
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.25), 0 0 40px rgba(0, 212, 255, 0.08);
  border: none;
}
.btn-cta.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0, 212, 255, 0.35), 0 0 60px rgba(0, 212, 255, 0.12);
}
.btn-cta.btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  border: 1px solid rgba(0, 212, 255, 0.3);
  backdrop-filter: blur(4px);
}
.btn-cta.btn-secondary:hover {
  background: rgba(0, 212, 255, 0.1);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  transform: translateY(-3px);
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.15);
}

/* Hero Bereich: Hellerer Gradient */
.home-hero {
  position: relative;
  text-align: center;
  padding: 80px 20px 60px;
  margin-bottom: 48px;
}
.home-hero-glow {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(0, 212, 255, 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.home-gradient-text {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-cyan-light), var(--accent-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.home-hero-sub {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 600px;
  margin: 16px auto 32px;
}
.home-hero-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Stats Bar: Trkis Akzente */
.home-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 48px;
  padding: 24px;
  background: rgba(0, 212, 255, 0.03);
  border: 1px solid rgba(0, 212, 255, 0.1);
  border-radius: 16px;
}
.home-stat-val {
  font-size: 28px;
  font-weight: 800;
  color: var(--accent-cyan);
  line-height: 1;
}
.home-stat-lbl {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Section Headers */
.home-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.home-section-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-secondary);
}
.home-section-link {
  color: var(--accent-cyan);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s;
}
.home-section-link:hover {
  color: var(--accent-cyan-light);
}

/* Guide Cards: Hellere Hover */
.home-guide-card {
  background: rgba(23, 23, 33, 0.8);
  border: 1px solid rgba(0, 212, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.3s ease;
}
.home-guide-card:hover {
  border-color: rgba(0, 212, 255, 0.25);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 212, 255, 0.06);
}
.home-guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 48px;
}

/* YouTube Cards */
.home-yt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 48px;
}
.home-yt-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  background: rgba(23, 23, 33, 0.8);
  border: 1px solid rgba(255, 0, 0, 0.1);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.3s;
}
.home-yt-featured:hover {
  border-color: rgba(255, 0, 0, 0.3);
  transform: translateY(-2px);
}
.home-yt-card {
  background: rgba(23, 23, 33, 0.8);
  border: 1px solid var(--bg-card-hover);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.3s;
}
.home-yt-card:hover {
  border-color: rgba(255, 0, 0, 0.25);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .home-hero { padding: 48px 16px 36px; }
  .home-stats { gap: 20px; padding: 16px; }
  .home-stat-val { font-size: 22px; }
  .home-yt-grid { grid-template-columns: 1fr; }
  .home-yt-featured { grid-template-columns: 1fr; }
  .btn-cta { padding: 12px 24px; font-size: 14px; }
}
/* ===== END HOMEPAGE ENHANCED ===== */

/* Remote Desktop Button */
.btn-remote {
    background: linear-gradient(135deg, var(--accent-teal-dark), var(--accent-teal));
    color: var(--text-primary);
    border: none;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    margin-right: 8px;
    transition: all 0.2s;
}
.btn-remote:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--accent-teal), var(--accent-teal-light));
    box-shadow: 0 2px 8px rgba(0,150,136,0.3);
}
/* Terminal Button */
.btn-terminal, .btn-remote.btn-terminal {
    background: linear-gradient(135deg, var(--bg-disabled), var(--bg-disabled-hover)) !important;
    color: var(--text-muted) !important;
}
.btn-terminal:hover, .btn-remote.btn-terminal:hover {
    background: linear-gradient(135deg, var(--bg-disabled-hover), var(--bg-disabled-hover)) !important;
    color: var(--text-secondary) !important;
    box-shadow: 0 2px 8px rgba(69,90,100,0.4) !important;
}


/* Gradient Text Utilities - Safari-safe ohne var() */
.pcgw-gradient-text {
    background: linear-gradient(90deg, #00f0ff, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    padding-bottom: 0.1em;
}
.pcgw-gradient-number {
    background: linear-gradient(90deg, #00f0ff, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    line-height: 1.2;
}
.pcgw-gradient-text-reverse {
    background: linear-gradient(90deg, #a855f7, #00f0ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

/* ===== PCGW NEON TITLE ANIMATION (wiederverwendbar) ===== */
@property --border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes pcgwNeonRotate {
    to { --border-angle: 360deg; }
}

@keyframes pcgwNeonGlow {
    0% { box-shadow: 0 -50px 80px 20px rgba(0,212,255,0.35), 0 50px 80px 20px rgba(255,0,255,0.35); }
    12.5% { box-shadow: 160px -35px 80px 20px rgba(0,212,255,0.35), -160px 35px 80px 20px rgba(255,0,255,0.35); }
    25% { box-shadow: 220px 0 80px 20px rgba(0,212,255,0.35), -220px 0 80px 20px rgba(255,0,255,0.35); }
    37.5% { box-shadow: 160px 35px 80px 20px rgba(0,212,255,0.35), -160px -35px 80px 20px rgba(255,0,255,0.35); }
    50% { box-shadow: 0 50px 80px 20px rgba(0,212,255,0.35), 0 -50px 80px 20px rgba(255,0,255,0.35); }
    62.5% { box-shadow: -160px 35px 80px 20px rgba(0,212,255,0.35), 160px -35px 80px 20px rgba(255,0,255,0.35); }
    75% { box-shadow: -220px 0 80px 20px rgba(0,212,255,0.35), 220px 0 80px 20px rgba(255,0,255,0.35); }
    87.5% { box-shadow: -160px -35px 80px 20px rgba(0,212,255,0.35), 160px 35px 80px 20px rgba(255,0,255,0.35); }
    100% { box-shadow: 0 -50px 80px 20px rgba(0,212,255,0.35), 0 50px 80px 20px rgba(255,0,255,0.35); }
}

@keyframes pcgwNeonGlowNav {
    0% { box-shadow: 0 -12px 20px 6px rgba(0,212,255,0.15), 0 12px 20px 6px rgba(255,0,255,0.15); }
    12.5% { box-shadow: 35px -8px 20px 6px rgba(0,212,255,0.15), -35px 8px 20px 6px rgba(255,0,255,0.15); }
    25% { box-shadow: 50px 0 20px 6px rgba(0,212,255,0.15), -50px 0 20px 6px rgba(255,0,255,0.15); }
    37.5% { box-shadow: 35px 8px 20px 6px rgba(0,212,255,0.15), -35px -8px 20px 6px rgba(255,0,255,0.15); }
    50% { box-shadow: 0 12px 20px 6px rgba(0,212,255,0.15), 0 -12px 20px 6px rgba(255,0,255,0.15); }
    62.5% { box-shadow: -35px 8px 20px 6px rgba(0,212,255,0.15), 35px -8px 20px 6px rgba(255,0,255,0.15); }
    75% { box-shadow: -50px 0 20px 6px rgba(0,212,255,0.15), 50px 0 20px 6px rgba(255,0,255,0.15); }
    87.5% { box-shadow: -35px -8px 20px 6px rgba(0,212,255,0.15), 35px 8px 20px 6px rgba(255,0,255,0.15); }
    100% { box-shadow: 0 -12px 20px 6px rgba(0,212,255,0.15), 0 12px 20px 6px rgba(255,0,255,0.15); }
}

.pcgw-neon-title {
    position: relative;
    display: inline-block;
    padding: 24px 52px;
    border-radius: 20px;
    background: transparent;
}

.pcgw-neon-title::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: conic-gradient(from var(--border-angle),
        #00d4ff 0%, #00d4ff 2%, rgba(0,212,255,0.5) 3.5%, rgba(0,212,255,0.1) 5%, transparent 7%,
        transparent 30%,
        rgba(255,0,255,0.02) 32%, rgba(255,0,255,0.05) 35%, rgba(255,0,255,0.12) 38%,
        rgba(255,0,255,0.25) 41%, rgba(255,0,255,0.5) 44%, rgba(255,0,255,0.75) 47%,
        #ff00ff 50%, #ff00ff 52%, rgba(255,0,255,0.5) 53.5%, rgba(255,0,255,0.1) 55%, transparent 57%,
        transparent 80%,
        rgba(0,212,255,0.02) 82%, rgba(0,212,255,0.05) 85%, rgba(0,212,255,0.12) 88%,
        rgba(0,212,255,0.25) 91%, rgba(0,212,255,0.5) 94%, rgba(0,212,255,0.75) 97%,
        #00d4ff 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: pcgwNeonRotate 8s linear infinite;
}

.pcgw-neon-title::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    z-index: 0;
    animation: pcgwNeonGlow 8s linear infinite;
}

.pcgw-neon-title, .pcgw-neon-title:hover, .pcgw-neon-title * { text-decoration: none !important; }

.pcgw-neon-text {
    font-weight: 900;
    letter-spacing: -1px;
    background: linear-gradient(135deg, #ffffff 0%, #00f0ff 50%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 1;
    margin: 0;
    line-height: 1;
}

/* === Nav-Variante (kleiner, subtiler) === */
.pcgw-neon-title--nav {
    padding: 5px 14px;
    border-radius: 10px;
    background: transparent;
}

.pcgw-neon-title--nav::before {
    border-radius: 10px;
    padding: 1.5px;
}

.pcgw-neon-title--nav::after {
    animation-name: pcgwNeonGlowNav;
}

.pcgw-neon-title--nav .pcgw-neon-text {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

@media (max-width: 768px) {
    .pcgw-neon-title--nav {
        padding: 4px 10px;
        border-radius: 8px;
    }
    .pcgw-neon-title--nav::before {
        border-radius: 8px;
    }
    .pcgw-neon-title--nav .pcgw-neon-text {
        font-size: 1.05rem;
    }
}

/* ===== Dashboard Optimized (Batch 01) ===== */
.dash-alert{padding:16px 20px;border-radius:12px;margin-bottom:20px}
.dash-alert--danger{background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.3)}
.dash-alert-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.dash-alert-icon{font-size:22px;color:var(--accent-red)}
.dash-alert-title{font-size:17px;font-weight:600;margin:0}
.dash-alert-title--danger{color:var(--accent-red)}
.dash-alert-text{color:var(--text-muted);font-size:14px;margin:0 0 10px}
.text-danger{color:var(--accent-red)}
.dash-alert-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dash-alert-link{color:var(--text-muted);font-size:13px}
.dash-alert-link:hover{color:var(--accent-cyan)}
.btn-success{background:linear-gradient(135deg,var(--accent-green),var(--accent-green-dark));border:none;color:#fff;padding:8px 18px;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px}
.dash-info-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:24px;margin-bottom:24px}
.dash-info-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.dash-user-info{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dash-user-name{font-size:16px;font-weight:600;color:var(--text-primary)}
.dash-role-badge{font-size:12px;font-weight:600;padding:3px 10px;border-radius:6px}
.dash-role-badge--admin{background:rgba(239,68,68,0.15);color:var(--accent-red)}
.dash-role-badge--mod{background:rgba(224,64,251,0.15);color:var(--accent-magenta)}
.dash-role-badge--author{background:rgba(0,240,255,0.15);color:var(--accent-cyan)}
.dash-premium-tag{background:linear-gradient(135deg,rgba(245,158,11,0.2),rgba(245,158,11,0.1));color:var(--accent-amber);padding:4px 14px;border-radius:8px;font-size:13px;font-weight:600;border:1px solid rgba(245,158,11,0.3)}
.stat-value--success{color:var(--accent-green-light)}
.stat-value--warning{color:var(--accent-amber)}
.stat-value--premium{color:var(--accent-amber)}
.dash-premium-request{background:var(--bg-card);border:1px solid rgba(245,158,11,0.25);border-radius:16px;padding:24px;margin-bottom:24px}
.dash-premium-request-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.dash-premium-request-icon{font-size:22px}
.dash-premium-request-title{color:var(--accent-amber);font-size:17px;font-weight:600;margin:0}
.dash-premium-request-desc{color:var(--text-muted);font-size:14px;margin:0 0 14px}
.dash-premium-textarea{resize:vertical;margin-bottom:12px;font-size:13px}
.btn-premium{background:linear-gradient(135deg,var(--accent-amber),#d97706);border:none;color:#fff;padding:10px 20px;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px}
.btn-premium:hover{filter:brightness(1.1)}
.dash-premium-pending{background:rgba(251,191,36,0.08);border:1px solid rgba(251,191,36,0.25);border-radius:10px;padding:16px}
.dash-premium-pending-title{color:var(--accent-yellow);font-weight:600;margin:0 0 4px}
.dash-premium-pending-text{color:var(--text-muted);font-size:13px;margin:0}
.dash-section-title{color:var(--accent-magenta);font-size:18px;font-weight:600;margin-bottom:16px}
.quick-link-icon--purple{background:linear-gradient(135deg,var(--accent-purple),var(--accent-purple-dark))}
.quick-link-icon--cyan{background:linear-gradient(135deg,var(--accent-cyan),#0891b2)}
.quick-link-icon--red{background:linear-gradient(135deg,var(--accent-red),#b91c1c)}
.hidden-form{display:none}

/* === Related Guides (Batch 10) === */
.related-guides-wrap { margin-top: 40px; }
.related-guides-title { font-size: 22px; font-weight: 800; color: var(--text-secondary); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(0,240,255,0.15); }
.related-guides-title-text { background: linear-gradient(135deg, #00f0ff, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.related-guides-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.related-guide-card { display: block; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 16px; text-decoration: none; transition: all 0.2s ease; }
.related-guide-card:hover { border-color: rgba(0,240,255,0.3); background: rgba(255,255,255,0.05); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.related-guide-img-wrap { width: 100%; height: 140px; border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.related-guide-img { width: 100%; height: 100%; object-fit: cover; }
.related-guide-title { font-size: 14px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; line-height: 1.3; }
.related-guide-badge { display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600; border-radius: 6px; }
.related-guide-badge--beginner, .related-guide-badge--leicht { background: rgba(16,185,129,0.15); color: var(--accent-green); border: 1px solid rgba(16,185,129,0.25); }
.related-guide-badge--intermediate, .related-guide-badge--mittel { background: rgba(245,158,11,0.15); color: var(--accent-amber, #f59e0b); border: 1px solid rgba(245,158,11,0.25); }
.related-guide-badge--advanced, .related-guide-badge--expert, .related-guide-badge--schwer { background: rgba(239,68,68,0.15); color: var(--accent-red); border: 1px solid rgba(239,68,68,0.25); }
.related-guide-time { font-size: 11px; color: var(--text-dim, #64748b); margin-left: 8px; }


/* === Download Package Bar (Batch 11) === */
.dl-package-bar { display: flex; align-items: center; gap: 16px; margin-top: 20px; padding: 14px 20px; background: rgba(0,240,255,0.05); border: 1px solid rgba(0,240,255,0.2); border-radius: 12px; }
.dl-package-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; background: linear-gradient(135deg, rgba(0,240,255,0.15), rgba(124,58,237,0.1)); border: 1px solid rgba(0,240,255,0.4); border-radius: 10px; color: #00f0ff; font-weight: 700; font-size: 14px; cursor: pointer; transition: all 0.2s; }
.dl-package-btn:hover { background: linear-gradient(135deg, rgba(0,240,255,0.25), rgba(124,58,237,0.15)); box-shadow: 0 0 20px rgba(0,240,255,0.15); transform: translateY(-1px); }
.dl-select-all-label { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 13px; cursor: pointer; white-space: nowrap; }
.dl-select-all-label input[type="checkbox"] { accent-color: #00f0ff; }
.dl-check-label { position: absolute; top: 10px; right: 10px; z-index: 2; }
.dl-check-label input[type="checkbox"] { accent-color: #00f0ff; width: 18px; height: 18px; cursor: pointer; }
.dl-card { position: relative; }

/* ============================================================
   PUBLIC COMMENT SYSTEM (Batch 24)
   ============================================================ */
.pcgw-comments-section {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
}
.pcgw-comments-header {
    margin-bottom: 20px;
}
.pcgw-comments-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.pcgw-comments-count {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-muted);
}

/* Comment Form */
.pcgw-comment-form-wrap {
    margin-bottom: 24px;
}
.pcgw-comment-form-inner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.pcgw-comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
}
.pcgw-comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pcgw-comment-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-magenta));
    color: var(--bg-darker);
    font-weight: 700;
    font-size: 16px;
    border-radius: 50%;
}
.pcgw-comment-avatar-sm {
    width: 32px;
    height: 32px;
}
.pcgw-comment-avatar-sm .pcgw-comment-avatar-placeholder {
    font-size: 13px;
}
.pcgw-comment-form-body {
    flex: 1;
    min-width: 0;
}
.pcgw-comment-textarea {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    padding: 12px 14px;
    resize: vertical;
    min-height: 70px;
    transition: border-color 0.2s;
}
.pcgw-comment-textarea:focus {
    outline: none;
    border-color: var(--accent-cyan);
}
.pcgw-comment-textarea::placeholder {
    color: var(--text-dim);
}
.pcgw-reply-textarea {
    min-height: 50px;
    font-size: 13px;
    padding: 10px 12px;
}
.pcgw-comment-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    gap: 12px;
}
.pcgw-comment-hint {
    font-size: 11px;
    color: var(--text-dim);
}
.pcgw-comment-submit {
    padding: 8px 20px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
    color: var(--bg-darker);
    font-weight: 700;
    font-size: 13px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.pcgw-comment-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 240, 255, 0.25);
}
.pcgw-reply-submit {
    padding: 6px 16px;
    font-size: 12px;
}
.pcgw-comment-cancel {
    padding: 6px 16px;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.pcgw-comment-cancel:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}

/* Guest CTA */
.pcgw-comment-guest {
    text-align: center;
    padding: 24px;
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    margin-bottom: 24px;
}
.pcgw-comment-guest p {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0;
}
.pcgw-comment-guest a {
    color: var(--accent-cyan);
    font-weight: 600;
}

/* Success Alert */
.pcgw-comment-alert-success {
    padding: 12px 16px;
    background: rgba(0, 200, 83, 0.1);
    border: 1px solid rgba(0, 200, 83, 0.25);
    border-radius: 8px;
    color: var(--accent-green);
    font-size: 13px;
    margin-bottom: 16px;
}

/* Empty State */
.pcgw-comments-empty {
    text-align: center;
    padding: 32px;
    color: var(--text-dim);
    font-size: 14px;
}

/* Comment List */
.pcgw-comments-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.pcgw-comment {
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.pcgw-comment:last-child {
    border-bottom: none;
}
.pcgw-comment-main {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.pcgw-comment-body {
    flex: 1;
    min-width: 0;
}
.pcgw-comment-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.pcgw-comment-author {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-primary);
}
.pcgw-comment-badge-premium {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(224, 64, 251, 0.15);
    color: var(--accent-magenta);
    font-weight: 700;
    letter-spacing: 0.3px;
}
.pcgw-comment-badge-admin {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(0, 240, 255, 0.15);
    color: var(--accent-cyan);
    font-weight: 700;
    letter-spacing: 0.3px;
}
.pcgw-comment-date {
    font-size: 12px;
    color: var(--text-dim);
}
.pcgw-comment-text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    word-break: break-word;
}
.pcgw-comment-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.pcgw-comment-action-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.15s;
}
.pcgw-comment-action-btn:hover {
    color: var(--accent-cyan);
    background: rgba(0, 240, 255, 0.06);
}
.pcgw-comment-delete:hover {
    color: var(--accent-red);
    background: rgba(255, 77, 77, 0.06);
}
.pcgw-comment-vote-form {
    display: inline;
}
.pcgw-comment-downvotes {
    font-size: 12px;
    color: var(--text-dim);
}

/* Reply Form */
.pcgw-comment-reply-form {
    margin-top: 10px;
    padding-left: 0;
}
.pcgw-hidden {
    display: none !important;
}

/* Replies */
.pcgw-comment-replies {
    padding-left: 52px;
}
.pcgw-comment-reply {
    padding: 10px 0;
}
.pcgw-comment-reply .pcgw-comment-text {
    font-size: 13px;
}

/* Responsive */
@media (max-width: 640px) {
    .pcgw-comments-section {
        margin-top: 32px;
        padding-top: 24px;
    }
    .pcgw-comment-form-inner {
        flex-direction: column;
        gap: 8px;
    }
    .pcgw-comment-avatar {
        width: 32px;
        height: 32px;
    }
    .pcgw-comment-form-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .pcgw-comment-hint {
        text-align: center;
    }
    .pcgw-comment-submit {
        width: 100%;
        text-align: center;
    }
    .pcgw-comment-replies {
        padding-left: 24px;
    }
    .pcgw-comments-title {
        font-size: 18px;
    }
}

/* Download Bundle Premium Badge */
.dl-premium-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:linear-gradient(135deg,rgba(224,64,251,0.15),rgba(168,85,247,0.15));border:1px solid rgba(224,64,251,0.3);border-radius:5px;font-size:10px;font-weight:700;color:var(--accent-magenta);text-transform:uppercase;letter-spacing:.5px}
.dl-tag-free{background:rgba(34,197,94,0.1);border-color:rgba(34,197,94,0.3);color:var(--accent-green-vivid)}

/* Copy protection: invisible watermark spans */
.pcgw-wm{font-size:0;line-height:0;position:absolute;opacity:0;pointer-events:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}

/* === Error Pages (error-page component) === */
.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem 1rem;
}

.error-page--standalone {
    min-height: 100vh;
    flex-direction: column;
    background: var(--bg-darker);
}

.error-container {
    max-width: 480px;
    width: 100%;
    position: relative;
    z-index: 2;
}

.error-glow {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    opacity: 0.07;
    pointer-events: none;
    z-index: 0;
}

.error-glow--indigo { background: var(--accent-indigo); }
.error-glow--red { background: var(--accent-red); }
.error-glow--amber { background: var(--accent-amber-light); }
.error-glow--purple { background: var(--accent-purple); }
.error-glow--orange { background: var(--accent-orange); }
.error-code--orange { color: var(--accent-orange); }
.error-line--orange { background: var(--accent-orange); }
.error-countdown--orange { color: var(--accent-orange); }

.error-icon {
    font-size: 52px;
    margin-bottom: 16px;
}

.error-icon--pulse {
    animation: error-pulse 2s ease-in-out infinite;
}

@keyframes error-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

.error-code {
    font-size: 100px;
    font-weight: 800;
    color: var(--accent-indigo);
    line-height: 1;
    margin-bottom: 6px;
}

.error-code--red { color: var(--accent-red); }
.error-code--amber { color: var(--accent-amber-light); }
.error-code--purple { color: var(--accent-purple); }

.error-line {
    width: 50px;
    height: 3px;
    background: var(--accent-indigo);
    margin: 12px auto;
    border-radius: 2px;
}

.error-line--indigo { background: var(--accent-indigo); }
.error-line--red { background: var(--accent-red); }
.error-line--amber { background: var(--accent-amber-light); }
.error-line--purple { background: var(--accent-purple); }

.error-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.error-message {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 12px;
    padding: 0 8px;
}

.error-countdown {
    font-size: 13px;
    color: var(--accent-indigo);
    margin-bottom: 24px;
    opacity: 0.8;
}

.error-countdown span {
    font-weight: 700;
    font-size: 16px;
}

.error-countdown--red { color: var(--accent-red); }
.error-countdown--amber { color: var(--accent-amber-light); }
.error-countdown--purple { color: var(--accent-purple); }

.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.error-btn-primary {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-magenta));
    color: var(--bg-darker);
    transition: all 0.3s ease;
}

.error-btn-primary:hover {
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.4), 0 0 40px rgba(224, 64, 251, 0.2);
    transform: translateY(-2px);
}

.error-btn-secondary {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: all 0.3s ease;
}

.error-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    border-color: var(--accent-cyan);
}

.error-progress-bar {
    width: 100%;
    max-width: 300px;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    margin: 0 auto 24px;
    overflow: hidden;
}

.error-progress-fill {
    height: 100%;
    border-radius: 2px;
    width: 0%;
    transition: width 0.5s linear;
}

.error-progress-fill--purple {
    background: var(--accent-purple);
}

.error-footer {
    text-align: center;
    padding: 14px;
    color: var(--text-dim, #505060);
    font-size: 11px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    margin-top: auto;
}

.error-footer a {
    color: var(--text-dim, #505060);
    text-decoration: none;
}

/* Error page session expired alert on login */
.error-session-expired-alert {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    color: var(--accent-amber-light);
    font-size: 14px;
    text-align: center;
}

@media (max-width: 480px) {
    .error-code { font-size: 72px; }
    .error-title { font-size: 18px; }
    .error-icon { font-size: 40px; }
    .error-actions { flex-direction: column; padding: 0 16px; }
    .error-actions a { display: block; text-align: center; }
    .error-glow { width: 120px; height: 120px; opacity: 0.04; }
}

/* ============================================
   BENCHMARK TEASER (Non-logged-in view)
   ============================================ */
.benchmark-title-gradient {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-magenta));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.benchmark-hero {
    text-align: center;
    padding: 48px 16px 32px;
    position: relative;
}

.benchmark-hero-icon {
    font-size: 48px;
    margin-bottom: 16px;
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.4));
}

.benchmark-hero-title {
    font-size: clamp(28px, 6vw, 42px);
    font-weight: 900;
    background: linear-gradient(135deg, #ffffff 0%, var(--accent-cyan) 50%, var(--accent-magenta) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
    line-height: 1.2;
}

.benchmark-hero-subtitle {
    font-size: clamp(14px, 3vw, 18px);
    color: var(--text-muted);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.5;
}

.benchmark-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 32px 0;
}

.benchmark-preview-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px 16px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.benchmark-preview-card:hover {
    border-color: rgba(0, 240, 255, 0.3);
    box-shadow: 0 4px 24px rgba(0, 212, 255, 0.08);
}

.benchmark-preview-icon { font-size: 28px; margin-bottom: 8px; }

.benchmark-preview-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    background: rgba(0, 240, 255, 0.12);
    color: var(--accent-cyan);
    border: 1px solid rgba(0, 240, 255, 0.2);
    margin-bottom: 10px;
}

.benchmark-preview-badge-magenta { background: rgba(224, 64, 251, 0.12); color: var(--accent-magenta); border-color: rgba(224, 64, 251, 0.2); }
.benchmark-preview-badge-green { background: rgba(16, 185, 129, 0.12); color: var(--accent-green); border-color: rgba(16, 185, 129, 0.2); }
.benchmark-preview-badge-yellow { background: rgba(251, 191, 36, 0.12); color: var(--accent-yellow); border-color: rgba(251, 191, 36, 0.2); }

.benchmark-preview-name { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.benchmark-preview-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; margin-bottom: 14px; }

.benchmark-preview-bars { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.benchmark-preview-bar { height: 8px; background: rgba(255, 255, 255, 0.04); border-radius: 4px; overflow: hidden; }
.benchmark-preview-bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent-cyan), var(--accent-magenta)); opacity: 0.6; }
.benchmark-preview-bar-alt { background: linear-gradient(90deg, var(--accent-magenta), var(--accent-cyan)); }

.benchmark-preview-lock {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(8, 8, 12, 0.85) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 16px;
    pointer-events: none;
}
.benchmark-preview-lock-icon { font-size: 24px; opacity: 0.5; }

.benchmark-features {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 28px 24px;
    margin: 32px 0;
}
.benchmark-features-title { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 20px; text-align: center; }
.benchmark-features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.benchmark-feature-item { display: flex; gap: 12px; align-items: flex-start; }
.benchmark-feature-icon {
    font-size: 24px; flex-shrink: 0; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 240, 255, 0.06); border-radius: 8px;
}
.benchmark-feature-text strong { display: block; font-size: 14px; color: var(--text-primary); margin-bottom: 3px; }
.benchmark-feature-text span { display: block; font-size: 12px; color: var(--text-muted); line-height: 1.4; }

.benchmark-blurred-preview { position: relative; margin: 32px 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-color); }
.benchmark-blurred-table { background: var(--bg-card); padding: 0; }
.benchmark-blurred-row {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 1px;
    padding: 10px 16px; border-bottom: 1px solid var(--border-color); font-size: 13px; color: var(--text-secondary);
}
.benchmark-blurred-header { background: rgba(0, 240, 255, 0.06); color: var(--accent-cyan); font-weight: 600; font-size: 12px; }
.benchmark-blurred-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(8, 8, 12, 0.7) 40%, rgba(8, 8, 12, 0.95) 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    padding-bottom: 24px; gap: 8px;
}
.benchmark-blurred-overlay-icon { font-size: 28px; opacity: 0.6; }
.benchmark-blurred-overlay-text { font-size: 13px; color: var(--text-muted); font-weight: 500; }

.benchmark-cta {
    position: relative; text-align: center; padding: 48px 24px;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.05), rgba(224, 64, 251, 0.05));
    border: 1px solid rgba(0, 240, 255, 0.2); border-radius: 16px; margin: 32px 0; overflow: hidden;
}
.benchmark-cta-glow {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
}
.benchmark-cta-title { font-size: clamp(18px, 4vw, 24px); font-weight: 700; color: var(--accent-cyan); margin-bottom: 12px; position: relative; }
.benchmark-cta-desc { font-size: 14px; color: var(--text-muted); max-width: 500px; margin: 0 auto 24px; line-height: 1.6; position: relative; }
.benchmark-cta-button {
    display: inline-block; padding: 14px 36px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-magenta));
    color: var(--bg-darker); font-weight: 700; border-radius: 10px;
    text-decoration: none; font-size: 15px; transition: transform 0.2s, box-shadow 0.2s; position: relative;
}
.benchmark-cta-button:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0, 212, 255, 0.3); }
.benchmark-cta-login { margin-top: 16px; font-size: 13px; color: var(--text-muted); position: relative; }
.benchmark-cta-login-link { color: var(--accent-cyan); text-decoration: none; font-weight: 500; }
.benchmark-cta-login-link:hover { text-decoration: underline; }

@media (max-width: 600px) {
    .benchmark-preview-grid { grid-template-columns: 1fr; }
    .benchmark-features-grid { grid-template-columns: 1fr; }
    .benchmark-blurred-row { grid-template-columns: 1.5fr 1fr 1fr 1fr; font-size: 11px; padding: 8px 12px; }
    .benchmark-hero { padding: 32px 16px 24px; }
    .benchmark-cta { padding: 32px 16px; }
}

/* Premium Social-Earn Section (Dashboard + Community) - Added 12.03.2026 */
.dash-premium-earn-steps { display:flex; flex-direction:column; gap:8px; margin:16px 0; }
.dash-premium-earn-step { display:flex; align-items:center; gap:10px; padding:8px 12px; background:rgba(0,240,255,0.05); border:1px solid rgba(0,240,255,0.15); border-radius:8px; }
.dash-premium-earn-icon { font-size:18px; flex-shrink:0; }
.dash-premium-earn-text { font-size:13px; color:var(--text-secondary); }
.dash-premium-earn-info { font-size:12px; color:var(--text-muted); margin-top:8px; font-style:italic; }
.community-premium-earn-box { text-align:center; padding:40px 24px; background:linear-gradient(135deg,rgba(0,240,255,0.05),rgba(224,64,251,0.05)); border:1px dashed rgba(0,240,255,0.3); border-radius:12px; margin:24px auto; max-width:600px; }
.community-premium-earn-text { color:var(--text-muted); margin-bottom:20px; font-size:14px; }
.btn-gradient-cta { display:inline-block; padding:12px 32px; background:linear-gradient(135deg,var(--accent-cyan),var(--accent-magenta)); color:var(--bg-darker); font-weight:700; border-radius:8px; text-decoration:none; font-size:14px; }
.btn-gradient-cta:hover { opacity:0.9; transform:translateY(-1px); }