:root {
    --port-darkest:   #2B131C; /* fast schwarzes Aubergine-Weinrot, für Code/Kontraste */
    --port-dark:       #3F1B26; /* Sidebar */
    --port-primary:    #9A5664; /* Portwein-Rot, Header & Hauptakzent */
    --port-light:      #9C4A57; /* Hover-Zustände, hellerer Weinrotton */
    --port-rose:        #C98E92; /* zarter Rosé-Ton für Text auf dunklem Grund */

    --gold-accent:      #BF9047; /* Kupfer/Gold, für Buttons & Highlights */
    --gold-light:       #D9B36C; /* helleres Gold für Hover */

    --neutral-bg:       #E4DAD1; /* warmer, mittelheller Hintergrund (kein Weiß) */
    --neutral-bg-soft:  #EFE7DF; /* etwas heller für Code-/Info-Boxen */
    --neutral-text:     #2E2225; /* warmes Dunkelbraun statt reinem Schwarz */
    --neutral-text-soft:#5A4A4D; /* für sekundären Text */
    --neutral-border:   #C9BAAF; /* dezente Trennlinien */
}

/* ---------- Grundlayout ---------- */

#body,
body {
    background-color: var(--neutral-bg);
    color: var(--neutral-text);
}

/* ---------- Header ---------- */

#header {
    background-color: var(--port-primary);
    color: var(--neutral-bg-soft);
}

#header a {
    color: var(--neutral-bg-soft);
}

/* ---------- Sidebar / Navigation ---------- */

#sidebar {
    background-color: var(--port-dark);
    color: var(--port-rose);
}

#sidebar ul.topics > li > a {
    color: var(--port-rose);
}

#sidebar ul.topics > li > a:hover,
#sidebar ul.topics > li.active > a {
    color: var(--gold-light);
}

/* ---------- Logo ---------- */

#logo {
    /* Bei Bedarf eigenes helles/dunkles Logo hinterlegen, damit es auf
       dem Weinrot-Header gut sichtbar bleibt */
}

/* ---------- Links im Fließtext ---------- */

body a {
    color: var(--port-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--gold-accent);
}

body a:hover {
    color: var(--gold-accent);
    border-bottom-color: var(--port-primary);
}

/* ---------- Buttons (Prev/Next, Edit this page, etc.) ---------- */

.button {
    background: var(--gold-accent);
    color: var(--neutral-text);
    box-shadow: 0 3px 0 var(--port-dark);
    border: none;
}

.button:hover {
    background: var(--gold-light);
}

/* ---------- Suchfeld ---------- */

.searchbox input {
    background: var(--neutral-bg-soft);
    color: var(--neutral-text);
    border: 1px solid var(--port-primary);
}

.searchbox input::placeholder {
    color: var(--neutral-text-soft);
}

/* ---------- Code-Blöcke ---------- */

pre,
code {
    background-color: var(--port-darkest);
    color: var(--neutral-bg-soft);
}

/* Inline-Code im Fließtext etwas dezenter */
p code,
li code {
    background-color: var(--neutral-bg-soft);
    color: var(--port-primary);
    border: 1px solid var(--neutral-border);
    padding: 0.1em 0.35em;
    border-radius: 3px;
}

/* ---------- Tabellen ---------- */

table th {
    background-color: var(--port-primary);
    color: var(--neutral-bg-soft);
}

table td {
    border-color: var(--neutral-border);
}

table tr:nth-child(even) {
    background-color: var(--neutral-bg-soft);
}

/* ---------- Überschriften ---------- */

h1, h2, h3, h4, h5, h6 {
    color: var(--port-dark);
}

/* ---------- Blockquotes / Hinweisboxen ---------- */

blockquote {
    background-color: var(--neutral-bg-soft);
    border-left: 4px solid var(--gold-accent);
    color: var(--neutral-text-soft);
}

/* ---------- Trennlinien ---------- */

hr {
    border-color: var(--neutral-border);
}