/* ============================================================
   Blacklight SMP — Main Stylesheet
   Design tokens inherited from uhl-it.at so both properties
   read as the work of the same studio.
   ============================================================ */

/* ---------- Self-hosted fonts (no third-party requests) ---------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/inter-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/inter-latin-ext-var.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('../fonts/material-symbols-subset.woff2') format('woff2');
}

/*
   Material Symbols render through ligatures. font-display:block is deliberate:
   with `swap` the raw ligature name ("account_balance") flashes as text before
   the font arrives, which looks broken.
*/
.icon {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 1.25em;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    vertical-align: -0.18em;
    flex-shrink: 0;
    /*
       The glyph comes from ::before rather than from ligature text in the DOM.
       Ligatures would put words like "account_balance" into the page's
       extractable text, where search engines and copy-paste would pick them up
       as content. An empty span keeps the text layer clean.
    */
}
.icon::before { display: block; }
.icon-lg { font-size: 2rem; }
.icon-xl { font-size: 3.5rem; }

/* Icon glyphs, one rule per icon in the font subset. */
.icon--account_balance::before { content: "\e84f"; }
.icon--agriculture::before { content: "\ea79"; }
.icon--auto_awesome::before { content: "\e65f"; }
.icon--bar_chart::before { content: "\e26b"; }
.icon--bedtime::before { content: "\f159"; }
.icon--block::before { content: "\f08c"; }
.icon--bolt::before { content: "\ea0b"; }
.icon--brush::before { content: "\e3ae"; }
.icon--bug_report::before { content: "\e868"; }
.icon--castle::before { content: "\eab1"; }
.icon--chair::before { content: "\efed"; }
.icon--check::before { content: "\e668"; }
.icon--cleaning_services::before { content: "\f0ff"; }
.icon--close::before { content: "\e5cd"; }
.icon--computer::before { content: "\e31e"; }
.icon--construction::before { content: "\ea3c"; }
.icon--content_copy::before { content: "\e14d"; }
.icon--contrast::before { content: "\eb37"; }
.icon--credit_card::before { content: "\e8a1"; }
.icon--cyclone::before { content: "\ebd5"; }
.icon--dark_mode::before { content: "\e51c"; }
.icon--diamond::before { content: "\ead5"; }
.icon--eco::before { content: "\ea35"; }
.icon--expand_more::before { content: "\e5cf"; }
.icon--explore::before { content: "\e87a"; }
.icon--factory::before { content: "\ebbc"; }
.icon--forum::before { content: "\e8af"; }
.icon--foundation::before { content: "\f200"; }
.icon--gavel::before { content: "\e90e"; }
.icon--group::before { content: "\ea21"; }
.icon--handyman::before { content: "\f10b"; }
.icon--healing::before { content: "\e3f3"; }
.icon--help::before { content: "\e8fd"; }
.icon--history_edu::before { content: "\ea3e"; }
.icon--holiday_village::before { content: "\e58a"; }
.icon--home::before { content: "\e9b2"; }
.icon--how_to_vote::before { content: "\e175"; }
.icon--inventory_2::before { content: "\e1a1"; }
.icon--language::before { content: "\ea07"; }
.icon--light_mode::before { content: "\e518"; }
.icon--link::before { content: "\e250"; }
.icon--local_fire_department::before { content: "\ef55"; }
.icon--location_on::before { content: "\f1db"; }
.icon--lock::before { content: "\e899"; }
.icon--lock_open::before { content: "\e898"; }
.icon--map::before { content: "\e55b"; }
.icon--menu::before { content: "\e5d2"; }
.icon--menu_book::before { content: "\ea19"; }
.icon--my_location::before { content: "\e55c"; }
.icon--nights_stay::before { content: "\f174"; }
.icon--paid::before { content: "\f041"; }
.icon--palette::before { content: "\e40a"; }
.icon--park::before { content: "\ea63"; }
.icon--payments::before { content: "\ef63"; }
.icon--play_arrow::before { content: "\e037"; }
.icon--psychology::before { content: "\ea4a"; }
.icon--public::before { content: "\e80b"; }
.icon--receipt_long::before { content: "\ef6e"; }
.icon--redeem::before { content: "\e8f6"; }
.icon--rocket_launch::before { content: "\eb9b"; }
.icon--science::before { content: "\ea4b"; }
.icon--search_off::before { content: "\ea76"; }
.icon--sell::before { content: "\f05b"; }
.icon--shield::before { content: "\e9e0"; }
.icon--shopping_cart::before { content: "\e8cc"; }
.icon--smart_toy::before { content: "\f06c"; }
.icon--sports_esports::before { content: "\ea28"; }
.icon--stairs::before { content: "\f1a9"; }
.icon--star::before { content: "\f09a"; }
.icon--swords::before { content: "\f889"; }
.icon--trending_up::before { content: "\e8e5"; }
.icon--tune::before { content: "\e429"; }
.icon--visibility::before { content: "\e8f4"; }
.icon--volcano::before { content: "\ebda"; }
.icon--water_drop::before { content: "\e798"; }
.icon--work::before { content: "\e943"; }

/* ---------- Design tokens ---------- */
:root {
    --color-bg-primary: #0a0a0f;
    --color-bg-secondary: #12121a;
    --color-bg-tertiary: #1a1a25;
    --color-bg-card: #15151f;
    --color-bg-hover: #1e1e2a;

    --color-accent-primary: #6366f1;
    --color-accent-secondary: #8b5cf6;
    --color-accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);
    --color-accent-glow: rgba(99, 102, 241, 0.3);

    --color-text-primary: #f8fafc;
    --color-text-secondary: #94a3b8;
    --color-text-muted: #64748b;
    --color-text-accent: #a5b4fc;

    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-hover: rgba(255, 255, 255, 0.15);

    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-error: #ef4444;

    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
    --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
    --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
    --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
    --text-5xl: clamp(3rem, 2rem + 5vw, 5rem);

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    --container-max: 1280px;
    --container-padding: clamp(1rem, 5vw, 2rem);

    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, .3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, .4);
    --shadow-xl: 0 25px 50px rgba(0, 0, 0, .5);
    --shadow-glow: 0 0 40px var(--color-accent-glow);

    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;

    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal: 400;
}

[data-theme="light"] {
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8fafc;
    --color-bg-tertiary: #f1f5f9;
    --color-bg-card: #ffffff;
    --color-bg-hover: #e2e8f0;

    --color-accent-primary: #4f46e5;
    --color-accent-secondary: #7c3aed;
    --color-accent-gradient: linear-gradient(135deg, #4f46e5, #7c3aed);
    --color-accent-glow: rgba(79, 70, 229, 0.2);

    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-text-muted: #64748b;
    --color-text-accent: #4f46e5;

    --color-border: rgba(0, 0, 0, .1);
    --color-border-hover: rgba(0, 0, 0, .2);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, .07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);
    --shadow-xl: 0 25px 50px rgba(0, 0, 0, .15);
}

/* High-contrast mode, reached from the accessibility toggle. */
[data-theme="contrast"] {
    --color-bg-primary: #000000;
    --color-bg-secondary: #000000;
    --color-bg-tertiary: #0d0d0d;
    --color-bg-card: #0d0d0d;
    --color-bg-hover: #1a1a1a;
    --color-accent-primary: #a5b4fc;
    --color-accent-secondary: #c4b5fd;
    --color-accent-gradient: none;
    --color-text-primary: #ffffff;
    --color-text-secondary: #e2e8f0;
    --color-text-muted: #cbd5e1;
    --color-text-accent: #c7d2fe;
    --color-border: rgba(255, 255, 255, .45);
    --color-border-hover: #ffffff;
}

/* ---------- Reset & base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--color-text-secondary);
    background: var(--color-bg-primary);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--space-md);
    color: var(--color-text-primary);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
}
h1 { font-size: var(--text-4xl); font-weight: 800; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
p  { margin: 0 0 var(--space-md); }

a {
    color: var(--color-text-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--color-accent-primary); text-decoration: underline; }

img, svg, iframe { max-width: 100%; height: auto; display: block; }
code, pre, kbd { font-family: var(--font-mono); font-size: .9em; }

:focus-visible {
    outline: 3px solid var(--color-accent-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: var(--z-modal);
    background: var(--color-accent-primary);
    color: #fff;
    padding: var(--space-sm) var(--space-md);
    border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Layout ---------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}
.section { padding-block: var(--space-4xl); }
.section--tight { padding-block: var(--space-3xl); }
.section--alt { background: var(--color-bg-secondary); }

.section-header {
    max-width: 46rem;
    margin: 0 auto var(--space-2xl);
    text-align: center;
}
.section-header p {
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
    margin: 0;
}
.section-eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-text-accent);
    margin-bottom: var(--space-sm);
}

.grid { display: grid; gap: var(--space-lg); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/*
   Grid and flex children default to min-width:auto, so a wide table or a long
   code line makes the whole column — and then the page — scroll sideways.
   Letting them shrink keeps the overflow inside the element that owns it.
*/
.grid > *,
.hero-layout > *,
.wiki-layout > * { min-width: 0; }

.text-center { text-align: center; }
.text-muted  { color: var(--color-text-muted); }
.text-accent { color: var(--color-text-accent); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: .8rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition-fast), border-color var(--transition-fast),
                transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--color-accent-primary); color: #fff; }
.btn-primary:hover { background: var(--color-accent-secondary); color: #fff; box-shadow: var(--shadow-glow); }

.btn-secondary {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}
.btn-secondary:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-hover);
    color: var(--color-text-primary);
}

.btn-outline {
    background: transparent;
    color: var(--color-text-primary);
    border-color: var(--color-border-hover);
}
.btn-outline:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }

.btn-lg { padding: 1rem 2rem; font-size: var(--text-base); }
.btn-sm { padding: .5rem 1rem; font-size: var(--text-xs); }
.btn-block { width: 100%; }

/* ---------- Badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: var(--radius-full);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
}
.badge--accent { border-color: var(--color-accent-primary); color: var(--color-text-accent); }

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
}
@supports (backdrop-filter: blur(12px)) {
    .site-header {
        background: color-mix(in srgb, var(--color-bg-primary) 88%, transparent);
        backdrop-filter: blur(12px);
    }
}

.header-inner {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    min-height: 4.5rem;
}

/* --- brand --- */
.logo {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    font-size: var(--text-lg);
    letter-spacing: -.03em;
    color: var(--color-text-primary);
    text-decoration: none;
    flex-shrink: 0;
}
.logo:hover { text-decoration: none; color: var(--color-text-primary); }
.logo-mark {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--color-accent-primary);
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    font-size: .95rem;
    font-weight: 800;
    line-height: 1;
}
.logo-accent { color: var(--color-accent-primary); }

/* --- primary navigation --- */
.main-nav { margin-right: auto; }
.nav-list {
    display: flex;
    align-items: center;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-list a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .75rem;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-list a .icon { font-size: 1.15em; opacity: .75; }
.nav-list a:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
    text-decoration: none;
}
.nav-list a:hover .icon { opacity: 1; }
.nav-list a[aria-current="page"] {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
    font-weight: 600;
}
.nav-list a[aria-current="page"] .icon { opacity: 1; color: var(--color-accent-primary); }

.nav-mobile-cta { display: none; }

/* --- actions --- */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

/* language: icon + real select */
.lang-select {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    height: 2.25rem;
    padding: 0 .35rem 0 .55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.lang-select:hover { border-color: var(--color-border-hover); background: var(--color-bg-hover); }
.lang-select:focus-within { border-color: var(--color-accent-primary); }
.lang-select-label { display: inline-flex; align-items: center; line-height: 0; }
.lang-select-label .icon { font-size: 1.15rem; }
.lang-select-input {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    color: var(--color-text-primary);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0 1.15rem 0 .3rem;
    cursor: pointer;
    outline: none;
}
.lang-select-input option { background: var(--color-bg-card); color: var(--color-text-primary); }
.lang-select-caret {
    position: absolute;
    right: .3rem;
    font-size: 1.05rem;
    pointer-events: none;
    color: var(--color-text-muted);
}
.lang-fallback { margin-left: .35rem; font-size: var(--text-xs); }

/* theme cluster reads as one control, not three loose buttons */
.theme-group {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.25rem;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.theme-toggle .icon { font-size: 1.15rem; }
.theme-toggle + .theme-toggle { border-left: 1px solid var(--color-border); }
.theme-toggle:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.theme-toggle.active { background: var(--color-bg-hover); color: var(--color-accent-primary); }

.header-cta { padding: .55rem 1rem; }
.header-cta .icon { font-size: 1.1em; }

.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-text-primary);
}
.mobile-menu-toggle .icon-close { display: none; }
.mobile-menu-toggle[aria-expanded="true"] .icon-menu { display: none; }
.mobile-menu-toggle[aria-expanded="true"] .icon-close { display: inline-block; }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    padding-block: clamp(3rem, 9vw, 6rem);
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(60rem 30rem at 15% -10%, rgba(99, 102, 241, .16), transparent 60%),
        radial-gradient(45rem 25rem at 90% 10%, rgba(139, 92, 246, .12), transparent 60%);
}
[data-theme="contrast"] .hero::before { display: none; }
.hero .container { position: relative; z-index: 1; }

.hero-layout {
    display: grid;
    gap: var(--space-2xl);
    align-items: center;
    grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
    .hero-layout { grid-template-columns: 1.05fr .95fr; }
}
.hero h1 { font-size: var(--text-5xl); margin-bottom: var(--space-md); }
.hero-lede {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 40rem;
}
.hero-badges { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }

/* ---------- Join card (the conversion element) ---------- */
.join-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-lg);
}
.join-card h2 { font-size: var(--text-xl); margin-bottom: var(--space-xs); }
.join-card > p { font-size: var(--text-sm); margin-bottom: var(--space-lg); }

.copy-field { margin-bottom: var(--space-lg); }
.copy-field:last-of-type { margin-bottom: 0; }
.copy-field-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
}
.copy-row { display: flex; gap: var(--space-sm); align-items: stretch; }
.copy-value {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: .7rem .9rem;
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
}
.copy-btn { flex: 0 0 auto; min-width: 6.5rem; }
.copy-btn[data-copied="true"] {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #04140a;
}

/* ---------- Status widget (fixed height — no layout shift) ---------- */
.status-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-md);
    min-height: 2.75rem;
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-lg);
    border-radius: var(--radius-md);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    font-size: var(--text-sm);
}
.status-dot {
    flex: 0 0 auto;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--color-text-muted);
}
.status-bar[data-state="online"]  .status-dot { background: var(--color-success); box-shadow: 0 0 0 4px rgba(34, 197, 94, .18); }
.status-bar[data-state="offline"] .status-dot { background: var(--color-error);   box-shadow: 0 0 0 4px rgba(239, 68, 68, .18); }
.status-bar[data-state="unknown"] .status-dot { background: var(--color-warning); box-shadow: 0 0 0 4px rgba(245, 158, 11, .18); }
.status-text { color: var(--color-text-primary); font-weight: 600; }
.status-meta { color: var(--color-text-muted); font-size: var(--text-xs); margin-left: auto; }

/* ---------- Cards ---------- */
.card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    height: 100%;
    transition: border-color var(--transition-base), transform var(--transition-base),
                box-shadow var(--transition-base);
}
a.card { text-decoration: none; }
a.card:hover {
    border-color: var(--color-accent-primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
}
.card-icon { font-size: 1.9rem; line-height: 1; margin-bottom: var(--space-md); }
.card-title { font-size: var(--text-lg); margin-bottom: var(--space-sm); color: var(--color-text-primary); }
.card p { color: var(--color-text-secondary); font-size: var(--text-sm); margin: 0; }
.card-list {
    margin: var(--space-md) 0 0;
    padding-left: 1.1rem;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}
.card-list li { margin-bottom: .35rem; }
.card-more {
    margin-top: auto;
    padding-top: var(--space-md);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-accent);
}

/* ---------- Numbered steps ---------- */
.step { position: relative; padding-left: 3.75rem; }
.step-number {
    position: absolute;
    left: 0;
    top: 0;
    font-size: var(--text-2xl);
    font-weight: 800;
    line-height: 1;
    color: var(--color-accent-primary);
    opacity: .85;
    font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: var(--space-xs); }
.step p { font-size: var(--text-sm); margin: 0; }

/* ---------- Stats strip ---------- */
.stat { text-align: center; padding: var(--space-lg) var(--space-md); }
.stat-value {
    display: block;
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1.1;
}
.stat-label { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- Code snippet block ---------- */
.code-block {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.code-head {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: .6rem var(--space-md);
    background: var(--color-bg-tertiary);
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.code-dot { width: .65rem; height: .65rem; border-radius: 50%; background: var(--color-border-hover); }
.code-block pre {
    margin: 0;
    padding: var(--space-lg);
    overflow-x: auto;
    font-size: .8rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}
.c-key { color: var(--color-text-accent); }
.c-str { color: #86efac; }
.c-num { color: #fdba74; }
.c-com { color: var(--color-text-muted); font-style: italic; }
[data-theme="light"] .c-str { color: #15803d; }
[data-theme="light"] .c-num { color: #c2410c; }

/* ---------- Trailer facade (click-to-load, DSGVO-safe) ---------- */
.trailer {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
}
.trailer-btn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    background: var(--color-bg-tertiary);
    background-size: cover;
    background-position: center;
    border: 0;
    cursor: pointer;
    color: #fff;
    font: inherit;
}
.trailer-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 13, .55);
}
.trailer-play {
    position: relative;
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--color-accent-primary);
    font-size: 1.35rem;
    box-shadow: var(--shadow-glow);
    transition: transform var(--transition-fast);
}
.trailer-btn:hover .trailer-play { transform: scale(1.07); }
.trailer-note {
    position: relative;
    font-size: var(--text-xs);
    max-width: 26rem;
    text-align: center;
    color: #e2e8f0;
    padding-inline: var(--space-md);
}
.trailer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg) 0;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--text-base);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    font-size: var(--text-xl);
    color: var(--color-accent-primary);
    line-height: 1;
    flex-shrink: 0;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-body { padding-bottom: var(--space-lg); font-size: var(--text-sm); }
.faq-body p:last-child { margin-bottom: 0; }

/* ---------- Wiki ---------- */
.wiki-layout {
    display: grid;
    gap: var(--space-2xl);
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 62rem) {
    .wiki-layout { grid-template-columns: 17rem 1fr; }
}

.wiki-nav { font-size: var(--text-sm); }
@media (min-width: 62rem) {
    .wiki-nav {
        position: sticky;
        top: 5.5rem;
        max-height: calc(100dvh - 7rem);
        overflow-y: auto;
        padding-right: var(--space-sm);
        scrollbar-width: thin;
    }
}

.wiki-nav-home {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .6rem;
    margin-bottom: var(--space-sm);
    border-radius: var(--radius-md);
    font-weight: 600;
    color: var(--color-text-primary);
}
.wiki-nav-home:hover { background: var(--color-bg-hover); text-decoration: none; }
.wiki-nav-home[aria-current="page"] { background: var(--color-bg-hover); color: var(--color-text-accent); }

.wiki-nav-group { border-top: 1px solid var(--color-border); }
.wiki-nav-group summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .6rem;
    cursor: pointer;
    list-style: none;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.wiki-nav-group summary::-webkit-details-marker { display: none; }
.wiki-nav-group summary:hover { color: var(--color-text-primary); }
.wiki-nav-caret { margin-left: auto; transition: transform var(--transition-fast); }
.wiki-nav-group[open] .wiki-nav-caret { transform: rotate(180deg); }

.wiki-nav-group ul { list-style: none; margin: 0 0 var(--space-sm); padding: 0 0 0 1.85rem; }
.wiki-nav-group li { margin-bottom: .1rem; }
.wiki-nav-group a {
    display: block;
    padding: .35rem .55rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
}
.wiki-nav-group a:hover { background: var(--color-bg-hover); color: var(--color-text-primary); text-decoration: none; }
.wiki-nav-group a[aria-current="page"] {
    background: var(--color-bg-hover);
    color: var(--color-text-accent);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--color-accent-primary);
}

/* --- article body --- */
.prose { max-width: 46rem; }
.article-lede {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xl);
}
.prose h2 { margin-top: var(--space-2xl); scroll-margin-top: 6rem; }
.prose h3 { margin-top: var(--space-xl); }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li { margin-bottom: .4rem; }
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-lg);
    font-size: var(--text-sm);
}
.prose th, .prose td {
    text-align: left;
    padding: .6rem .8rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}
.prose th { color: var(--color-text-primary); font-weight: 600; white-space: nowrap; }
.prose tbody tr:hover { background: var(--color-bg-secondary); }
.table-scroll { overflow-x: auto; margin-bottom: var(--space-lg); }
.prose code {
    padding: .12em .38em;
    border-radius: var(--radius-sm);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
}

/* --- on-this-page --- */
.toc {
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-2xl);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-secondary);
}
.toc h2 {
    margin: 0 0 var(--space-sm);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--color-text-muted);
}
.toc ol { margin: 0; padding-left: 1.2rem; font-size: var(--text-sm); }
.toc li { margin-bottom: .25rem; }

.breadcrumb { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-md); }
.breadcrumb a { color: var(--color-text-muted); }

.callout {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent-primary);
    background: var(--color-bg-secondary);
    font-size: var(--text-sm);
    margin-bottom: var(--space-lg);
}
.callout p:last-child { margin-bottom: 0; }

/* --- previous / next --- */
.article-nav {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: 1fr 1fr;
    margin-top: var(--space-3xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}
.article-nav a {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
}
.article-nav a:hover { border-color: var(--color-accent-primary); text-decoration: none; }
.article-nav-next { text-align: right; }
.article-nav-hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.article-nav-title { font-weight: 600; color: var(--color-text-primary); font-size: var(--text-sm); }
@media (max-width: 40rem) {
    .article-nav { grid-template-columns: 1fr; }
    .article-nav-next { text-align: left; }
}

/* --- wiki index category blocks --- */
.wiki-cat { margin-bottom: var(--space-3xl); }
.wiki-cat-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: var(--text-xl);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}
.wiki-cat-title .icon { color: var(--color-accent-primary); }

/* ---------- Footer ---------- */
.site-footer {
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    padding-block: var(--space-3xl) var(--space-xl);
    margin-top: var(--space-4xl);
}
.footer-grid {
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.footer-section h3 {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--color-text-primary);
    margin-bottom: var(--space-md);
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .5rem; }
.footer-links a { color: var(--color-text-secondary); font-size: var(--text-sm); }
.footer-tagline { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 22rem; }
.footer-badges { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-2xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-disclaimer {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-md);
    max-width: 60rem;
}

/* ---------- Cookie banner ---------- */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-fixed);
    background: var(--color-bg-card);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-xl);
    padding: var(--space-md) 0;
}
.cookie-banner[hidden] { display: none; }
.cookie-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    justify-content: space-between;
}
.cookie-text { font-size: var(--text-sm); margin: 0; max-width: 52rem; }
.cookie-actions { display: flex; gap: var(--space-sm); flex-shrink: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 68rem) {
    /* The join button lives inside the mobile sheet from here down. */
    .header-cta { display: none; }
}

@media (max-width: 61.99rem) {
    .mobile-menu-toggle { display: inline-flex; }
    .header-inner { gap: var(--space-md); }

    .main-nav {
        position: fixed;
        inset: 4.5rem 0 auto;
        z-index: var(--z-sticky);
        margin-right: 0;
        background: var(--color-bg-secondary);
        border-bottom: 1px solid var(--color-border);
        padding: var(--space-md) var(--container-padding) var(--space-lg);
        transform: translateY(-120%);
        transition: transform var(--transition-base);
        max-height: calc(100dvh - 4.5rem);
        overflow-y: auto;
    }
    .main-nav.open { transform: translateY(0); }

    .nav-list { flex-direction: column; align-items: stretch; gap: .15rem; }
    .nav-list a {
        padding: .75rem .6rem;
        font-size: var(--text-base);
        border-radius: var(--radius-md);
    }
    .nav-list a .icon { font-size: 1.3em; }

    .nav-mobile-cta {
        display: grid;
        gap: var(--space-sm);
        margin-top: var(--space-lg);
        padding-top: var(--space-lg);
        border-top: 1px solid var(--color-border);
    }

    .step { padding-left: 3rem; }
}

@media (max-width: 30rem) {
    .copy-row { flex-wrap: wrap; }
    .copy-btn { width: 100%; }
    .hero-cta .btn { width: 100%; }

    /* Brand shrinks to its mark so the controls always fit a 375px row. */
    .logo-word { display: none; }
    .header-inner { gap: var(--space-sm); }
    .header-actions { gap: .35rem; }
    .lang-select { padding-left: .4rem; }
    .lang-select-input { font-size: .7rem; padding-right: 1rem; }
    .theme-toggle { width: 1.95rem; height: 2.1rem; }
    .mobile-menu-toggle { width: 2.25rem; height: 2.25rem; }
}

@media print {
    .site-header,
    .cookie-banner,
    .trailer,
    .hero-cta,
    .mobile-menu-toggle { display: none !important; }
    body { background: #fff; color: #000; }
}