/* ============================================================
   MK Web – Theme (Stahlblau, konsistent mit rcFlyDB / 3dprint)
   ============================================================ */

:root {
    --primary:        #2387cf;
    --primary-light:  #3aa0de;
    --primary-dark:   #1a6fad;
    --nav-bg-top:     #3f5164;
    --nav-bg-bot:     #2d3d4f;
    --sidebar-bg:     linear-gradient(180deg, #3f5164 0%, #2d3d4f 100%);
    --footer-bg:      #2d3d4f;
    --body-bg:        #eef3f8;
    --surface:        #ffffff;
    --text:           #1e2d3d;
    --text-muted:     #5a7080;
    --border:         #d0dce8;
    --accent-soft:    #ddeef9;
}

/* ── Body ── */
body {
    background:
        radial-gradient(ellipse at top left,  rgba(35, 135, 207, 0.10) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(63, 81, 100, 0.08) 0%, transparent 50%),
        linear-gradient(160deg, #e8f1f8 0%, #f0f5fb 50%, #eef3f8 100%);
    background-attachment: fixed;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--text);
    min-height: 100vh;
}

/* ── Navbar ── */
.navbar {
    background: linear-gradient(180deg, var(--nav-bg-top) 0%, var(--nav-bg-bot) 100%) !important;
    border-bottom: 2px solid var(--primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.navbar-brand {
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    color: #ffffff !important;
}

.navbar-brand:hover { color: #c8dff2 !important; }

.nav-link { color: #c8dff2 !important; }
.nav-link:hover,
.nav-link.active { color: #ffffff !important; }

.dropdown-menu-dark {
    background: var(--nav-bg-bot) !important;
    border: 1px solid rgba(255,255,255,0.1);
}
.dropdown-item { color: #c8dff2 !important; }
.dropdown-item:hover {
    background: var(--primary) !important;
    color: #fff !important;
}

/* ── Navbar Suche ── */
.navbar-search {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.25) !important;
    color: #fff !important;
    border-radius: 4px 0 0 4px !important;
}
.navbar-search::placeholder { color: rgba(255,255,255,0.55) !important; }
.navbar-search:focus {
    background: rgba(255,255,255,0.22) !important;
    border-color: rgba(255,255,255,0.6) !important;
    box-shadow: none !important;
    color: #fff !important;
}

/* ── Search Hero ── */
.search-hero {
    background: linear-gradient(135deg, #ddeef9 0%, #eaf4fd 100%) !important;
    border: 1px solid var(--border) !important;
}

/* ── Header Image ── */
.site-header {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
    line-height: 0;
    position: relative;
}

.site-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--primary-dark), var(--primary-light), var(--primary-dark));
}

.site-header-img {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
    object-position: center center;
    display: block;
    background: linear-gradient(160deg, #dce8f2 0%, #cddff0 100%);
}

/* ── Cards ── */
.card {
    border: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(35,135,207,0.07);
    background: linear-gradient(160deg, #ffffff 0%, #f5f9fd 100%);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.card:hover {
    box-shadow: 0 6px 20px rgba(35,135,207,0.18);
    transform: translateY(-2px);
}

/* Post Cover Image */
.post-cover {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

/* ── Badges / Kategorie ── */
.badge.bg-secondary {
    background-color: var(--primary) !important;
}

/* ── Buttons ── */
.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}
.btn-outline-primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* ── Sidebar ── */
.card-header.bg-dark {
    background: linear-gradient(135deg, var(--nav-bg-top) 0%, var(--primary) 100%) !important;
    color: #fff;
    border-bottom: 2px solid var(--primary-dark);
}

.list-group-item-action:hover {
    background-color: var(--accent-soft);
    color: var(--primary-dark);
}

.list-group-item.active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-outline-warning {
    color: var(--primary);
    border-color: var(--primary);
}
.btn-outline-warning:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* ── Post Body ── */
.post-body {
    line-height: 1.85;
    font-size: 1.05rem;
}

.post-body h2,
.post-body h3,
.post-body h4 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--nav-bg-bot);
}

.post-body img {
    max-width: 100%;
    border-radius: 6px;
    margin: 1rem 0;
}

.post-body pre {
    background: #1e2d3d;
    color: #c8dff2;
    padding: 1rem;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 0.9rem;
}

.post-body code {
    background: var(--accent-soft);
    color: var(--primary-dark);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
}

.post-body pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

.post-body blockquote {
    border-left: 4px solid var(--primary);
    padding-left: 1rem;
    color: var(--text-muted);
    font-style: italic;
}

.post-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.post-body th,
.post-body td {
    border: 1px solid var(--border);
    padding: 0.5rem 0.75rem;
}

.post-body th {
    background: var(--accent-soft);
    font-weight: 600;
    color: var(--nav-bg-bot);
}

/* ── Breadcrumb ── */
.breadcrumb-item a { color: var(--primary); text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }

/* ── Footer ── */
footer {
    background: linear-gradient(160deg, #2d3d4f 0%, #1e2d3d 100%) !important;
    border-top: 3px solid var(--primary);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.15);
}

footer a {
    text-decoration: none;
    color: #c8dff2 !important;
}

footer a:hover { color: #ffffff !important; }