/* ===========================================
   NO-CMS · Modern Hyde / Terminal Hybrid Theme
   =========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-sidebar: #121212;
    --bg-content: #1a1a1a;
    --text-main: #e6e6e6;
    --text-muted: #a0a0a0;
    --accent: #6ee7b7;      /* Terminal-Grün */
    --link: #7dd3fc;        /* Link-Blau */
    --prompt: #ff5c5c;
    --code-bg: #111;
    --border: #2d2d2d;
}

html[data-theme="light"] {
    --bg-sidebar: #2d8f6b;  /* Klassischer Hyde-Farbakzent links */
    --bg-content: #f5f5f0;  /* Augenschonendes Paper-White rechts */
    --text-main: #1a1a1a;
    --text-muted: #555555;
    --accent: #ffffff;      /* In der Sidebar wird Weiß zum Akzent */
    --link: #0066cc;
    --prompt: #cc3333;
    --code-bg: #e8e8e3;
    --border: #ccc;
}

body {
    background: var(--bg-content);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    min-height: 100vh;
}

/* Monospace-Klassen für Terminal-Vibe */
.status, .meta, .article code, .command, .nowplaying, .counter, .postline, .footer-terminal, #themeToggle {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
}



/* ===== GRID LAYOUT (The Hyde Way) ===== */
.layout-wrapper {
    display: grid;
    grid-template-columns: 300px 1fr;
    min-height: 100vh;
}

/* ===== SIDEBAR STYLES ===== */
.sidebar {
    background: var(--bg-sidebar);
    color: #fff;
    padding: 3rem 2rem;
    border-right: 1px solid var(--border);
}

html[data-theme="light"] .sidebar {
    color: #ffffff;
}

html[data-theme="light"] .sidebar a {
    color: #ffffff;
    opacity: 0.9;
}

.sidebar-sticky {
    position: sticky;
    top: 3rem;
}

.sidebar-about h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.sidebar-about h1 a {
    color: inherit;
    text-decoration: none;
}

.sidebar-about .lead {
    font-size: 0.95rem;
    opacity: 0.7;
    margin-bottom: 2rem;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 3rem;
}

.sidebar-nav-item {
    color: var(--link);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 500;
}

.sidebar-nav-item:hover {
    text-decoration: underline;
}

#themeToggle {
    cursor: pointer;
    font-size: 0.85rem;
    background: rgba(255,255,255,0.1);
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    display: inline-block;
    transition: background 0.2s;
}

#themeToggle:hover {
    background: rgba(255,255,255,0.2);
    color: var(--accent);
}

/* ===== CONTENT BEREICH (Rechts) ===== */
.content {
    padding: 4rem;
    max-width: 740px; /* Perfekte Lesebreite für Fließtext */
}

/* Content Anpassungen für den CLI Look im Content-Bereich */
.status {
    color: var(--text-muted);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.command {
    font-size: 2.2rem;
    font-weight: bold;
    margin-bottom: 2rem;
}

.prompt { color: var(--prompt); }

/* ===== ARTIKEL / POST DETAILS ===== */
.article {
    font-size: 1.15rem;
    line-height: 1.75;
}

.article h1, .article h2, .article h3 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--text-main);
}

.article img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 2rem 0;
}

.article pre {
    background: var(--code-bg);
    padding: 1.2rem;
    overflow-x: auto;
    border-radius: 6px;
    border: 1px solid var(--border);
    margin: 1.5rem 0;
}

/* ===== GLOBALER FOOTER ===== */
.global-footer {
    grid-column: 2;
    padding: 0 4rem 4rem 4rem;
    max-width: 740px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.footer-terminal {
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.footer-credits a {
    color: var(--link);
}

/* ===== RESPONSIVE DESIGN (Mobile Fallback) ===== */
@media (max-width: 850px) {
    .layout-wrapper {
        grid-template-columns: 1fr;
    }
    
    .sidebar {
        padding: 2rem;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    
    .sidebar-sticky {
        position: static;
    }
    
    .sidebar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .content {
        padding: 2rem;
    }
    
    .global-footer {
        grid-column: 1;
        padding: 0 2rem 2rem 2rem;
    }
    
    .command {
        font-size: 1.6rem;
    }
}