/* Rauslauf (RL) Branding - Statische Farben */

.realm-rl {
    box-sizing: border-box;

    --transparent: transparent;

    /* Primary Gruppe */
    --color-primary: #000000;
    --color-primary-shade-1: #030303;
    --color-primary-shade-2: #161616;

    /* Secondary Gruppe */
    --color-secondary: #3c1010;
    --color-secondary-shade-1: #592a28;
    --color-secondary-shade-2: #774542;

    /* Contrast Gruppe */
    --color-contrast: #d2691e;
    --color-contrast-shade-1: #f58844;
    --color-contrast-shade-2: #ffa866;

    /* Status Gruppe */
    --color-success: #6ad16a;
    --color-warning: #ffa500;
    --color-error: #e14141;
    --color-info:    #5eaebc;

    /* Global */
    --color-base-bg: #f0fff0;
    --color-base-text: #2f4f4f;
    --color-base-border: #a8a8a8;
    --color-links: #d1630c;

    --font-main: 'Roboto', sans-serif;
    font-family: var(--font-main);

    /* Aus color-groups.css :root extrahiert für RL */
    --color-background: var(--color-base-bg);
    --color-text: var(--color-base-text);
    --color-border: var(--color-base-border);
    --color-input-bg: #ffffff;
    --color-input-text: var(--color-base-text);
    --color-border-light: #ffffff;
    --color-border-dark: #738073;
    --color-background-opaque: rgba(240, 255, 240, 0.4);
    --color-zebra-light: #ffffff;
    --color-zebra-dark: #dfeedf;
}

.realm-rl {
    background-image: url('https://lanaversum.b-cdn.net/Shop/background/rauslaufBG.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Color Groups für Rauslauf (kopiert aus color-groups.css mit statischen Werten) */

.color-primary {
    --color-context: #000000;
    --color-text: #dedede;
    --color-border-light: #484848;
    --color-border-dark: #000000;
    --color-input-bg: #000000;
    --color-input-text: #dedede;
    --color-zebra-light: #000000;
    --color-zebra-dark: #000000;
}
.color-primary-shade-1 {
    --color-context: #030303;
    --color-text: #dedede;
    --color-border-light: #626262;
    --color-border-dark: #000000;
    --color-input-bg: #000000;
    --color-input-text: #dedede;
    --color-zebra-light: #0a0a0a;
    --color-zebra-dark: #000000;
}
.color-primary-shade-2 {
    --color-context: #161616;
    --color-text: #dedede;
    --color-border-light: #808080;
    --color-border-dark: #000000;
    --color-input-bg: #030303;
    --color-input-text: #dedede;
    --color-zebra-light: #222222;
    --color-zebra-dark: #0b0b0b;
}
.color-secondary {
    --color-context: #3c1010;
    --color-text: #dedede;
    --color-border-light: #b57e7a;
    --color-border-dark: #000000;
    --color-input-bg: #200000;
    --color-input-text: #dedede;
    --color-zebra-light: #4a1d1c;
    --color-zebra-dark: #2e0405;
}
.color-secondary-shade-1 {
    --color-context: #592a28;
    --color-text: #dedede;
    --color-border-light: #d69d98;
    --color-border-dark: #000000;
    --color-input-bg: #3c1010;
    --color-input-text: #dedede;
    --color-zebra-light: #683735;
    --color-zebra-dark: #4a1d1c;
}
.color-secondary-shade-2 {
    --color-context: #774542;
    --color-text: #dedede;
    --color-border-light: #f8bcb8;
    --color-border-dark: #060000;
    --color-input-bg: #592a28;
    --color-input-text: #dedede;
    --color-zebra-light: #865350;
    --color-zebra-dark: #683735;
}
.color-contrast {
    --color-context: #d2691e;
    --color-text: #030303;
    --color-border-light: #ffdf9c;
    --color-border-dark: #4e0000;
    --color-input-bg: #f58844;
    --color-input-text: #030303;
    --color-zebra-light: #e37932;
    --color-zebra-dark: #c15a00;
}
.color-contrast-shade-1 {
    --color-context: #f58844;
    --color-text: #030303;
    --color-border-light: #ffdf9c;
    --color-border-dark: #6e0000;
    --color-input-bg: #ffa865;
    --color-input-text: #030303;
    --color-zebra-light: #ff9855;
    --color-zebra-dark: #e47832;
}
.color-contrast-shade-2 {
    --color-context: #ffa866;
    --color-text: #030303;
    --color-border-light: #ffe8a5;
    --color-border-dark: #7b2f00;
    --color-input-bg: #ffc886;
    --color-input-text: #030303;
    --color-zebra-light: #ffb876;
    --color-zebra-dark: #ee9856;
}
.color-success {
    --color-context: #6ad16a;
    --color-text: #030303;
    --color-border-light: #b4ffb2;
    --color-border-dark: #005500;
    --color-input-bg: #8bf28a;
    --color-input-text: #030303;
    --color-zebra-light: #7ae27a;
    --color-zebra-dark: #59c15a;
}
.color-warning {
    --color-context: #ffa500;
    --color-text: #030303;
    --color-border-light: #ffea6e;
    --color-border-dark: #7a2800;
    --color-input-bg: #ffc644;
    --color-input-text: #030303;
    --color-zebra-light: #ffb52c;
    --color-zebra-dark: #ee9500;
}
.color-error {
    --color-context: #e14141;
    --color-text: #030303;
    --color-border-light: #ffc5b9;
    --color-border-dark: #540000;
    --color-input-bg: #ff645f;
    --color-input-text: #030303;
    --color-zebra-light: #f35350;
    --color-zebra-dark: #cf2e32;
}
.color-info {
    --color-context: #5eaebc;
    --color-text: #030303;
    --color-border-light: #beffff;
    --color-border-dark: #003945;
    --color-input-bg: #7ecedc;
    --color-input-text: #030303;
    --color-zebra-light: #6ebecc;
    --color-zebra-dark: #4e9eac;
}

/* Hintergrund-Klassen für Rauslauf */

.bg-transparent { background-color: transparent !important; }

.bg-primary { background-color: #000000 !important; }
.bg-primary-opaque-30 { background-color: rgba(0, 0, 0, 0.3) !important; }
.bg-primary-opaque-60 { background-color: rgba(0, 0, 0, 0.6) !important; }
.bg-primary-shade-1 { background-color: #030303 !important; }
.bg-primary-shade-1-opaque-30 { background-color: rgba(3, 3, 3, 0.3) !important; }
.bg-primary-shade-1-opaque-60 { background-color: rgba(3, 3, 3, 0.6) !important; }
.bg-primary-shade-2 { background-color: #161616 !important; }
.bg-primary-shade-2-opaque-30 { background-color: rgba(22, 22, 22, 0.3) !important; }
.bg-primary-shade-2-opaque-60 { background-color: rgba(22, 22, 22, 0.6) !important; }
.bg-secondary { background-color: #3c1010 !important; }
.bg-secondary-opaque-30 { background-color: rgba(60, 16, 16, 0.3) !important; }
.bg-secondary-opaque-60 { background-color: rgba(60, 16, 16, 0.6) !important; }
.bg-secondary-shade-1 { background-color: #592a28 !important; }
.bg-secondary-shade-1-opaque-30 { background-color: rgba(89, 42, 40, 0.3) !important; }
.bg-secondary-shade-1-opaque-60 { background-color: rgba(89, 42, 40, 0.6) !important; }
.bg-secondary-shade-2 { background-color: #774542 !important; }
.bg-secondary-shade-2-opaque-30 { background-color: rgba(119, 69, 66, 0.3) !important; }
.bg-secondary-shade-2-opaque-60 { background-color: rgba(119, 69, 66, 0.6) !important; }
.bg-contrast { background-color: #d2691e !important; }
.bg-contrast-opaque-30 { background-color: rgba(210, 105, 30, 0.3) !important; }
.bg-contrast-opaque-60 { background-color: rgba(210, 105, 30, 0.6) !important; }
.bg-contrast-shade-1 { background-color: #f58844 !important; }
.bg-contrast-shade-1-opaque-30 { background-color: rgba(245, 136, 68, 0.3) !important; }
.bg-contrast-shade-1-opaque-60 { background-color: rgba(245, 136, 68, 0.6) !important; }
.bg-contrast-shade-2 { background-color: #ffa866 !important; }
.bg-contrast-shade-2-opaque-30 { background-color: rgba(255, 168, 102, 0.3) !important; }
.bg-contrast-shade-2-opaque-60 { background-color: rgba(255, 168, 102, 0.6) !important; }