/* ============================================================
   Theme: Modern
   Helles, cleanes Design
   ============================================================ */

:root {
    --sidebar-width: 300px;
    --sidebar-bg: #ffffff;
    --sidebar-text: #71717a;
    --sidebar-active: #428d5c;
    --sidebar-hover-bg: #f4f4f5;
    --content-max-width: 860px;
    --text-color: #27272a;
    --text-muted: #71717a;
    --link-color: #428d5c;
    --border-color: #e4e4e7;
    --bg-color: #ffffff;
    --code-bg: #fafafa;
    --accent: #428d5c;
    --accent-light: #eef6f1;
}

/* ============================================================
   Sidebar
   ============================================================ */

.sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    width: var(--sidebar-width);
}

.sidebar-header {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--border-color);
    background: rgb(243, 244, 245);
}

.sidebar-brand {
    color: var(--text-color) !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

/* Suche */
.sidebar-search {
    padding: 12px 16px;
    background: rgb(243, 244, 245);
}

.sidebar-search input {
    background: #fff !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    border-radius: 8px !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
}

.sidebar-search input::placeholder {
    color: #a1a1aa !important;
}

.sidebar-search input:focus {
    background: #fff !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(66, 141, 92, 0.1) !important;
}

.sidebar-nav {
    background: rgb(243, 244, 245);
}

/* Navigation */
.nav-list li a {
    color: var(--sidebar-text) !important;
    border-left: 2px solid transparent !important;
    border-radius: 0 6px 6px 0;
    font-size: 14px !important;
    /*padding: 7px 16px 7px 20px !important;*/
    transition: all 0.12s ease !important;
}

.nav-list li a:hover {
    color: var(--text-color) !important;
    background: var(--sidebar-hover-bg) !important;
}

.nav-list li.active > a,
.nav-list li.active > .nav-chapter > a {
    color: var(--accent) !important;
    background: none;
    /*border-left-color: var(--accent) !important;*/
    font-weight: 600 !important;
}

/* Kapitel */
.nav-chapter a {
    color: var(--text-color) !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
}

.nav-toggle {
    color: #a1a1aa !important;
}

/* Icons vor Einträgen */
.nav-depth-0 > li > a::before,
.nav-depth-1 > li > a::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgb(175, 175, 182);
    margin-right: 10px;
    vertical-align: middle;
}

.nav-depth-0 > li.active > a::before,
.nav-depth-1 > li.active > a::before {
    background: var(--accent);
}

/* ============================================================
   Mobile Header
   ============================================================ */

.mobile-header {
    background: var(--sidebar-bg) !important;
    border-bottom: 1px solid var(--border-color);
}

.mobile-header .mobile-title {
    color: var(--text-color) !important;
}

.sidebar-toggle span {
    background: var(--text-color) !important;
}

/* ============================================================
   Content
   ============================================================ */

.content {
    background: var(--bg-color);
}

.content-inner {
    max-width: var(--content-max-width);
    padding: 48px 56px 80px;
}

/* ============================================================
   Typografie
   ============================================================ */

.page-title {
    font-size: 2.2em !important;
    font-weight: 800 !important;
    letter-spacing: -0.8px !important;
    line-height: 1.2 !important;
    margin-bottom: 28px !important;
}

.page-content h2 {
    font-size: 1.4em !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    font-weight: 700;
}

.page-content h3 {
    font-size: 1.15em !important;
    margin: 1.6em 0 0.5em !important;
}

.page-content a {
    color: var(--accent) !important;
}

.page-content a:hover {
    color: #357548 !important;
}

/* Code */
.page-content code {
    background: #f4f4f5 !important;
    color: #dc2626 !important;
    border-radius: 4px !important;
    padding: 2px 7px !important;
    font-size: 0.86em !important;
}

.page-content pre {
    background: #18181b !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 18px 22px !important;
}

.page-content pre code {
    color: #e4e4e7 !important;
    background: none !important;
}

/* Tabellen */
.page-content th {
    background: #f4f4f5 !important;
    font-size: 0.85em !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.page-content tr:hover {
    background: #fafafa !important;
}

/* Blockquote */
.page-content blockquote {
    border-left: 3px solid var(--accent) !important;
    background: var(--accent-light) !important;
    color: #2d5e3c !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 12px 18px !important;
}

/* ============================================================
   Breadcrumb
   ============================================================ */

.breadcrumb {
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.breadcrumb a {
    color: var(--accent) !important;
}

/* ============================================================
   Navigation (Vor/Zurück)
   ============================================================ */

.page-nav-link {
    border-radius: 8px !important;
    border-color: var(--border-color) !important;
    transition: all 0.2s ease !important;
}

.page-nav-link:hover {
    border-color: var(--accent) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}

.page-nav-title {
    color: var(--accent) !important;
}

/* ============================================================
   Home
   ============================================================ */

.chapter-card {
    border-radius: 10px !important;
    border-color: var(--border-color) !important;
    transition: all 0.2s ease !important;
}

.chapter-card:hover {
    border-color: var(--accent) !important;
    box-shadow: 0 4px 16px rgba(66, 141, 92, 0.1) !important;
    transform: translateY(-1px);
}

/* ============================================================
   Search
   ============================================================ */

.search-result {
    border-radius: 8px !important;
}

.search-result:hover {
    border-color: var(--accent) !important;
}

.search-result h3 {
    color: var(--accent) !important;
}

/* ============================================================
   Theme Switcher Override
   ============================================================ */

.theme-switcher button.active {
    background: var(--accent) !important;
}