/* ═══════════════════════════════════════════════════════════
   svetixoxo.github.io — dunkler-modus.css
   /assets/dunkler-modus.css
═══════════════════════════════════════════════════════════ */

[data-theme="dunkel"] {
    /* ── Basis ── */
    --hintergrund-dunkel: #15151d;
    --hintergrund-karte-dunkel: #1f1f2a;
    --tinte-dunkel: #ffc107;
    --text-dunkel: #e0e0f0;
    --gedimmt-dunkel: #9595b0;
    --linie-dunkel: #00607c;
    --weiss-dunkel: #1f1f2a;
    
    /* ── Akzentfarben ── */
    --tuerkis-dunkel: #00799b;
    --orange-dunkel: #f97e00;
    --gelb-dunkel: #ffc107;
    --lila-dunkel: #9b51e0;
    --magenta-dunkel: #d00062;
    --gruen-dunkel: #00a651;
    --rot-dunkel: #e63946;

    /* ── Schatten & Rahmen ── */
    --schatten: 4px 4px 0 var(--linie-dunkel);
    --schatten-gross: 6px 6px 0 var(--linie-dunkel);
    --schatten-klein: 2px 2px 0 var(--linie-dunkel);
    --rahmen: 2px solid var(--gelb-dunkel);
    --rahmen-gross: 3px solid var(--gelb-dunkel);
}


/* ══════════════════════════════════════════
   BODY-HINTERGRUND
══════════════════════════════════════════ */

[data-theme="dunkel"] body {
    background: #004d61;
    background-image: repeating-linear-gradient(315deg,
            transparent,
            transparent 20px,
            rgba(255, 255, 255, 0.12) 20px,
            rgba(255, 255, 255, 0.12) 21px);
    background-size: 22px 22px;
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */

[data-theme="dunkel"] .seitenfuss {
    background: var(--tinte-fest);
    color: rgba(255, 255, 255, 0.5);
    border-top-color: var(--gelb-dunkel);
}

[data-theme="dunkel"] .seitenfuss span {
    color: var(--weiss-fest);
}

[data-theme="dunkel"] .seitenfuss a {
    color: var(--weiss-fest);
}

[data-theme="dunkel"] .seitenfuss a:hover {
    color: var(--tuerkis);
}

[data-theme="dunkel"] .seitenfuss em {
    color: var(--rot);
}

/* ══════════════════════════════════════════
   TRANSITIONS
══════════════════════════════════════════ */

body,
.artikel-rahmen,
.aufmacher,
.beitragskarte,
.seitenkopf-haupt,
nav a,
.schaltflaeche,
.mobil-menu,
.seitenfuss {
    transition:
        background-color 0s ease,
        color 0s ease,
        border-color 0s ease;
}

/* ══════════════════════════════════════════
   TOGGLE-BUTTON
══════════════════════════════════════════ */

.nav-theme-toggle {
    background: var(--hintergrund-karte);
    border: none;
    box-shadow: none;
    cursor: url("/assets/cursors/hand2.png") 4 4, pointer !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "IBM Plex Mono", monospace;
    font-size: 1.5rem;
    position: relative;
}

[data-theme="dunkel"] .nav-theme-toggle {
    color: var(--gelb-dunkel);
}

.nav-theme-toggle:hover {
    background: none;
    transform: none;
    box-shadow: none;
}

.nav-theme-toggle:active {
    transform: none;
    box-shadow: none;
}

.nav-theme-toggle::before {
    content: "☾";
}

[data-theme="dunkel"] .nav-theme-toggle::before {
    content: "☀";
}

@media (max-width: 992px) {
    .nav-theme-toggle {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        z-index: 777;
        width: 48px;
        height: 48px;
        border: var(--rahmen-gross);
        box-shadow: var(--schatten-gross);
        padding: 0;
        font-size: 1.4rem;
    }

    .nav-theme-toggle:hover {
        transform: translate(-2px, -2px);
        box-shadow: var(--schatten-gross);
        background: var(--hintergrund-karte);
    }
}

/* ══════════════════════════════════════════
   POSTS
══════════════════════════════════════════ */

[data-theme="dunkel"] 
:is(.artikel-einleitung, 
    .artikel-meta-thema, 
    .artikel-rahmen-nummer,
    .artikel-meta,
    .artikel-meta span,
    .artikel-meta-thema a,
    .artikel-navigation a,
    .sticker-gelb,
    .schaltflaeche-gelb,
    .abschnitt-kopf h2) {
    color: var(--tinte-fest) !important;
}

[data-theme="dunkel"] .artikel-rahmen h3 {
    color: var(--gedimmt-dunkel) !important;
}

[data-theme="dunkel"] .erklaerung::after {
    color: var(--tinte-fest);
}

[data-theme="dunkel"]
:is(.artikel-meta-datum,
    #ueber-mich__aufmacher) {
    background: var(--gelb-dunkel);
    color: var(--tinte-fest)
}

[data-theme="dunkel"] .artikel-meta-thema a:hover {
    color: var(--tinte);
}

[data-theme="dunkel"] .kategorie-self-hosting-dienste.artikel-kopf {
    background: var(--magenta-dunkel);
}

[data-theme="dunkel"] .kategorie-netzwerk-infrastruktur.artikel-kopf {
    background: var(--orange-dunkel);
}

[data-theme="dunkel"] .kategorie-smart-home-automatisierung.artikel-kopf {
    background: var(--gruen-dunkel);
}

[data-theme="dunkel"] .kategorie-proberaum-musikmachen.artikel-kopf {
    background: var(--lila-dunkel);
}

[data-theme="dunkel"] #ueber-mich__lizenz {
    border-color: var(--weiss-dunkel);
}

/* ══════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════ */

.nav-archiv.aktiv,
.nav-archiv:hover {
    color: var(--tinte-fest);
    position: relative;
}

.nav-archiv.aktiv::before,
.nav-archiv:hover::before {
    content: "";
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 2px;
    background: var(--weiss-dunkel);
}

.nav-archiv:hover span::after {
    background: var(--tinte-fest);
}

.nav-ueber-mich {
    color: var(--tinte-fest);
}

.nav-ueber-mich:hover {
    color: var(--tinte-fest);
}


/* ══════════════════════════════════════════
   BEITRAGSKARTEN
══════════════════════════════════════════ */

[data-theme="dunkel"] .beitragskarte {
    background: var(--weiss-dunkel) !important;
}

[data-theme="dunkel"] 
:is(.startseite-kacheln .beitragskarte-zeile1,
    .startseite-kacheln .beitragskarte-zeile2) {
    color: var(--gelb-dunkel);
}

[data-theme="dunkel"] .beitragskarte-und {
    color: var(--linie-dunkel) !important;
}

[data-theme="dunkel"]
:is(.aufmacher-haupt h1,
    .artikel-rahmen h1) {
    text-shadow: 
    -1px -1px 0 var(--weiss-dunkel),  /* oben links */
     0   -1px 0 var(--weiss-dunkel),  /* oben */
     1px -1px 0 var(--weiss-dunkel),  /* oben rechts */
    -1px  0   0 var(--weiss-dunkel),  /* links */
     2px  0   0 var(--weiss-dunkel),  /* rechts */
    -1px  1px 0 var(--weiss-dunkel),  /* unten links */
     0    2px 0 var(--weiss-dunkel),  /* unten */
     2px  2px 0 var(--weiss-dunkel);  /* unten rechts */
}