/* ═══════════════════════════════════════════
   HSS MIETKÄLTE – THEME VARIABLES V3
   Default: Light Mode
   Dark Mode: html[data-theme="dark"]
   Body: 20px (+25% vs V2)
═══════════════════════════════════════════ */

:root {
    /* ── Layout-Farben (Light) ── */
    --bg:        #F7F7F5;
    --bg-alt:    #EFEFED;
    --surface:   #FFFFFF;
    --surface-2: #EAEAE8;
    --border:    #D0D0CB;
    --muted:     #888888;
    --text-dim:  #5D5D5D;
    --text:      #3A3A3A;
    --heading:   #181818;

    /* ── Markenfarben ── */
    --red:       #CC0000;
    --red-h:     #E00000;
    --cold:      #1A6288;

    /* ── Spezial-Werte ── */
    --nav-bg:    rgba(247,247,245,0.97);
    --grid-line: rgba(0,0,0,0.07);
    --ghost-stroke: rgba(26,98,136,0.28);
    --ghost-kw:     rgba(26,98,136,0.55);
    --ind-1-bg:  linear-gradient(145deg, #D0E8F5 0%, #B8D8EE 60%, #AECDE8 100%);
    --ind-2-bg:  linear-gradient(145deg, #EDE5CC 0%, #E0D3B0 60%, #D8C8A0 100%);
    --ind-text-stroke: rgba(0,0,0,0.07);
    --ind-text-stroke-h: rgba(0,0,0,0.13);
    --ind-title: #1A1A1A;
    --ind-text:  #444444;
    --ind-link:  #1A1A1A;

    /* ── Fonts ── */
    --font-disp: 'Bebas Neue', sans-serif;
    --font-cond: 'Barlow Condensed', sans-serif;
    --font-body: 'Barlow', sans-serif;
}

/* ─── DARK MODE OVERRIDES ─── */
html[data-theme="dark"] {
    --bg:        #090909;
    --bg-alt:    #111111;
    --surface:   #181818;
    --surface-2: #222222;
    --border:    #2C2C2C;
    --muted:     #666666;
    --text-dim:  #999999;
    --text:      #D8D8D8;
    --heading:   #F4F4F4;

    --cold:      #7BB8D4;

    --nav-bg:    rgba(9,9,9,0.97);
    --grid-line: rgba(44,44,44,0.5);
    --ghost-stroke: rgba(123,184,212,0.30);
    --ghost-kw:     rgba(123,184,212,0.60);
    --ind-1-bg:  linear-gradient(145deg, #0C1820 0%, #122233 60%, #0E2840 100%);
    --ind-2-bg:  linear-gradient(145deg, #1A1608 0%, #2A230E 60%, #201B08 100%);
    --ind-text-stroke: rgba(255,255,255,0.04);
    --ind-text-stroke-h: rgba(255,255,255,0.08);
    --ind-title: #F4F4F4;
    --ind-text:  #999999;
    --ind-link:  #F4F4F4;
}

/* ─── THEME TOGGLE BUTTON ─── */
.theme-toggle {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.theme-toggle:hover {
    background: var(--surface-2);
    border-color: var(--muted);
}
.theme-toggle svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-dim);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.2s;
    flex-shrink: 0;
}
.theme-toggle:hover svg { stroke: var(--text); }

/* Sun icon – visible in dark mode, hidden in light */
.icon-sun  { display: none; }
.icon-moon { display: block; }
html[data-theme="dark"] .icon-sun  { display: block; }
html[data-theme="dark"] .icon-moon { display: none; }

/* ─── SMOOTH TRANSITION when switching themes ─── */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.15s ease !important;
}