:root {
    --hero-max-width: 1600px;
    --hero-text-width: 460px;
    --hero-logo-size: clamp(42px,4vw,72px);
    --hero-nav-size: clamp(14px,.9vw,17px);
    --hero-kicker-size: clamp(13px,.8vw,16px);
    --hero-intro-size: clamp(16px,1vw,20px);
    --hero-top-space: clamp(30px,4vw,60px);

    --site-width: 1440px;
    --nav-height: 76px;
    --ease: .25s ease;
    --shadow: 0 18px 50px rgba(0,0,0,.45);


    /* ==========================================================
       GRUNDLAGEN
       ========================================================== */

    --tbf-bg: #080b0e;

    --tbf-bg-panel: #11161b;
    --tbf-bg-panel-alt: #171d23;

    --tbf-bg-row-1: #12181e;
    --tbf-bg-row-2: #181f26;


    /* ==========================================================
       HEADER / NAVIGATION
       ========================================================== */

    --bg-top: rgba(7,10,13,.88);
    --bg-top-2: rgba(6,9,12,.97);
    --bg-dropdown: #11161b;


    /* ==========================================================
       LINIEN / RAHMEN
       ========================================================== */

    --line: rgba(169,154,118,.14);
    --line-strong: rgba(169,154,118,.34);
    --line-accent: rgba(169,154,118,.24);

    --tbf-border: #343b40;
    --tbf-border-soft: #242b30;


    /* ==========================================================
       AKZENT – ALTES MESSING
       ========================================================== */

    --accent: #a99a76;
    --accent-2: rgba(169,154,118,.42);

    --tbf-gold: #a99a76;
    --tbf-gold-bright: #c7b98f;


    /* ==========================================================
       TEXT
       ========================================================== */

    --text-main: #e7e8e6;
    --text-soft: #c9cbc9;
    --text-muted: #9da3a5;
    --text-dim: #70787d;

    --tbf-text: #c9cbc9;
    --tbf-text-muted: #9da3a5;
    --tbf-text-dim: #70787d;


    /* ==========================================================
       LINKS
       ========================================================== */

    --tbf-link: #b8aa82;
    --tbf-link-hover: #d0c39a;


    /* ==========================================================
       KARTEN
       ========================================================== */

    --tbf-bg-card: #1b2228;
    --tbf-bg-card-hover: #232c33;


    /* ==========================================================
       LAYOUT
       ========================================================== */

    --tbf-gap: 30px;
    --tbf-card-padding: 40px;


    /* ==========================================================
       SCHATTEN
       ========================================================== */

    --tbf-shadow: rgba(0,0,0,.60);
}
```
```css
:root {
    --hero-max-width: 1600px;
    --hero-text-width: 460px;
    --hero-logo-size: clamp(42px,4vw,72px);
    --hero-nav-size: clamp(14px,.9vw,17px);
    --hero-kicker-size: clamp(13px,.8vw,16px);
    --hero-intro-size: clamp(16px,1vw,20px);
    --hero-top-space: clamp(30px,4vw,60px);

    --site-width: 1440px;
    --nav-height: 76px;
    --ease: .25s ease;
    --shadow: 0 18px 50px rgba(0,0,0,.45);


    /* ==========================================================
       GRUNDLAGEN
       ========================================================== */

    --tbf-bg: #080b0e;

    --tbf-bg-panel: #11161b;
    --tbf-bg-panel-alt: #171d23;

    --tbf-bg-row-1: #12181e;
    --tbf-bg-row-2: #181f26;


    /* ==========================================================
       HEADER / NAVIGATION
       ========================================================== */

    --bg-top: rgba(7,10,13,.88);
    --bg-top-2: rgba(6,9,12,.97);
    --bg-dropdown: #11161b;


    /* ==========================================================
       LINIEN / RAHMEN
       ========================================================== */

    --line: rgba(169,154,118,.14);
    --line-strong: rgba(169,154,118,.34);
    --line-accent: rgba(169,154,118,.24);

    --tbf-border: #343b40;
    --tbf-border-soft: #242b30;


    /* ==========================================================
       AKZENT – ALTES MESSING
       ========================================================== */

    --accent: #a99a76;
    --accent-2: rgba(169,154,118,.42);

    --tbf-gold: #a99a76;
    --tbf-gold-bright: #c7b98f;


    /* ==========================================================
       TEXT
       ========================================================== */

    --text-main: #e7e8e6;
    --text-soft: #c9cbc9;
    --text-muted: #9da3a5;
    --text-dim: #70787d;

    --tbf-text: #c9cbc9;
    --tbf-text-muted: #9da3a5;
    --tbf-text-dim: #70787d;


    /* ==========================================================
       LINKS
       ========================================================== */

    --tbf-link: #b8aa82;
    --tbf-link-hover: #d0c39a;


    /* ==========================================================
       KARTEN
       ========================================================== */

    --tbf-bg-card: #1b2228;
    --tbf-bg-card-hover: #232c33;


    /* ==========================================================
       LAYOUT
       ========================================================== */

    --tbf-gap: 30px;
    --tbf-card-padding: 40px;


    /* ==========================================================
       SCHATTEN
       ========================================================== */

    --tbf-shadow: rgba(0,0,0,.60);
}