:root {
    color-scheme: dark;

    /* ------------------------------------------------------------------
       Staerke des goldenen Schleiers im Hintergrund. EIN Wert fuer
       alles: die beiden Lichtinseln, das Rautenmuster und die
       Scanlines haengen per calc() daran.

         1.0  wie zuerst entworfen, sehr dezent
         2.2  Vorgabe
         3.5  deutlich warm
         5.0  Grenze - darueber leidet die Lesbarkeit

       Nur hier aendern, nicht unten in den Verlaeufen.
       ------------------------------------------------------------------ */
    --vx-glow: 2.2;

    --vx-black: #070809;
    --vx-black-soft: #0c0e10;
    --vx-panel: rgba(18, 20, 22, 0.94);
    --vx-panel-soft: rgba(27, 29, 31, 0.92);
    --vx-panel-hover: rgba(42, 44, 46, 0.96);

    --vx-gray-050: #f3f3f3;
    --vx-gray-100: #dedede;
    --vx-gray-300: #a9abad;
    --vx-gray-500: #74777a;
    --vx-gray-700: #34373a;
    --vx-gray-800: #222528;
    --vx-gray-900: #111315;

    --vx-red: #c41422;
    --vx-red-bright: #ef2638;
    --vx-red-dark: #700812;
    --vx-red-glow: rgba(224, 22, 42, 0.28);

    /* Leitfarbe der Oberflaeche. Hiess einmal "matrix" und war gruen -
       der Name bleibt, damit nicht jede Komponente angefasst werden
       muss. Der Ton ist derselbe, den auch das Streamer-HUD benutzt. */
    --vx-matrix: #e8b53f;
    --vx-matrix-bright: #ffe08a;
    --vx-matrix-dark: #a9761c;
    --vx-matrix-glow: rgba(232, 181, 63, 0.24);

    /* Lesbare, aber bewusst zurückhaltende Goldtöne für Seitentexte. */
    --vx-copy-green: #e8cfae;
    --vx-copy-green-strong: #f2ddb4;

    /*
     * Kompatibilitäts-Aliasse:
     * vorhandene Komponenten verwenden noch --vx-gold.
     */
    --vx-gold: var(--vx-matrix);
    --vx-gold-bright: var(--vx-matrix-bright);
    --vx-gold-dark: var(--vx-matrix-dark);
    --vx-gold-glow: var(--vx-matrix-glow);

    /* ------------------------------------------------------------------
       DIE DREI LIGEN ALS FARBE

       Gold ist die Leitfarbe des Hauses und bleibt es. Diese drei Toene
       sind kein zweites Design, sondern ein Merkmal: woran man auf
       einen Blick sieht, in welcher Liga man steht. Spielen-RA,
       Spielen-TD und Spielen-ZH sahen bis hierher gleich aus, und auf
       einer Seite mit sechs Abteilungen ist das eine Zeile zu viel, die
       man lesen muss.

       Die Toene kommen aus den Spielen und nicht aus einem Farbkreis:
       Alarmstufe Rot ist rot, Tiberian Dawn hat das Tiberium, Zero Hour
       das blaue Band seiner Oberflaeche.

       Je Liga fuenf Werte, und jeder hat seinen Grund:

         ...            der Hauptton: Rand, Linie, Fokusring
         ...-rgb        derselbe Ton als Zahlen, damit rgba() ihn mit
                        einer Deckung nehmen kann
         ...-tief       die dunkle Seite der Fase. Die Tasten des Hauses
                        haben zwei Kanten, hell oben links, dunkel unten
                        rechts - ohne den zweiten Ton waere die Fase weg
         ...-hell       die Schrift auf der Kachel
         ...-leuchten   dieselbe Schrift beim Darueberfahren

       Nachgerechnet gegen den Seitengrund: alle drei Hauptoene liegen
       ueber 5:1, die hellen deutlich darueber. Farbe ist hier das
       zweite Merkmal und nie das einzige - die Abteilung traegt ihren
       Namen weiterhin ausgeschrieben.
       ------------------------------------------------------------------ */
    --liga-ra: #ef4a3f;
    --liga-ra-rgb: 239, 74, 63;
    --liga-ra-tief: 118, 24, 20;
    --liga-ra-hell: #ffb0a6;
    --liga-ra-leuchten: #ffd6cf;

    --liga-td: #7fd14a;
    --liga-td-rgb: 127, 209, 74;
    --liga-td-tief: 56, 100, 28;
    --liga-td-hell: #c6ef96;
    --liga-td-leuchten: #e4fbcc;

    --liga-zh: #4ea3e8;
    --liga-zh-rgb: 78, 163, 232;
    --liga-zh-tief: 22, 72, 118;
    --liga-zh-hell: #a9d8f8;
    --liga-zh-leuchten: #d7edfd;

    /* Die Vorgabe ist Gold. Wer kein data-liga traegt - Nachschlagen,
       Konten, MapDev, und jede Seite, die es nie je Liga gab - sieht
       aus wie bisher. */
    --akzent: var(--vx-matrix);
    --akzent-rgb: 232, 181, 63;
    --akzent-tief: 120, 88, 24;
    --akzent-hell: var(--vx-matrix-bright);
    --akzent-leuchten: #fff3c4;

    /* Der einzige Gruenton, der bleibt - weil er etwas bedeutet und
       nicht schmueckt: Gruen steht am geaenderten, gueltigen
       Eingabefeld, Rot am ungueltigen. Waere er gold, ginge das Signal
       in der Leitfarbe unter. */
    --vx-green: #54d981;
    --vx-warning: #e8a64b;

    --vx-border: rgba(232, 181, 63, 0.30);
    --vx-border-soft: rgba(255, 255, 255, 0.08);

    --vx-shadow:
        0 18px 50px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255, 255, 255, 0.025);

    --vx-font-ui:
        "Segoe UI",
        Inter,
        Arial,
        sans-serif;

    --vx-font-mono:
        "Cascadia Mono",
        "Consolas",
        "Liberation Mono",
        monospace;
}

/* ------------------------------------------------------------------
   Der Ligaschalter

   Ein data-liga an einem Element stellt den Akzent fuer alles um, was
   darin liegt. Mehr ist nicht zu tun: die Bauteile greifen auf
   --akzent zu und nicht auf einen festen Goldwert, und eigene
   Eigenschaften gehen durch die Blazor-Isolierung hindurch - sie
   vererben wie jede andere Eigenschaft auch.

   Darum steht es hier und nicht in den einzelnen .razor.css: die
   Zuordnung Liga - Farbe gibt es einmal, und die Komponenten wissen
   nichts von Ligen.
   ------------------------------------------------------------------ */
[data-liga="ra"] {
    --akzent: var(--liga-ra);
    --akzent-rgb: var(--liga-ra-rgb);
    --akzent-tief: var(--liga-ra-tief);
    --akzent-hell: var(--liga-ra-hell);
    --akzent-leuchten: var(--liga-ra-leuchten);
}

[data-liga="td"] {
    --akzent: var(--liga-td);
    --akzent-rgb: var(--liga-td-rgb);
    --akzent-tief: var(--liga-td-tief);
    --akzent-hell: var(--liga-td-hell);
    --akzent-leuchten: var(--liga-td-leuchten);
}

[data-liga="zh"] {
    --akzent: var(--liga-zh);
    --akzent-rgb: var(--liga-zh-rgb);
    --akzent-tief: var(--liga-zh-tief);
    --akzent-hell: var(--liga-zh-hell);
    --akzent-leuchten: var(--liga-zh-leuchten);
}

html {
    min-height: 100%;
    background: var(--vx-black);
}

body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--vx-gray-100);
    font-family: var(--vx-font-ui);
    background:
        radial-gradient(
            circle at 85% 12%,
            rgba(196, 20, 34, 0.13),
            transparent 28rem
        ),
        /* Alle Deckkraftwerte haengen an --vx-glow. Damit laesst sich
           der ganze Schleier an EINER Stelle heller oder dunkler
           stellen, ohne sechs Zahlen einzeln zu suchen. Der Wert steht
           oben im :root. */
        radial-gradient(
            circle at 72% 84%,
            rgba(232, 181, 63, calc(0.30 * var(--vx-glow))),
            transparent 46rem
        ),
        radial-gradient(
            circle at 12% 26%,
            rgba(232, 181, 63, calc(0.17 * var(--vx-glow))),
            transparent 40rem
        ),
        linear-gradient(
            135deg,
            rgba(232, 181, 63, calc(0.105 * var(--vx-glow))) 25%,
            transparent 25%
        ) 0 0 / 14px 14px,
        linear-gradient(
            315deg,
            rgba(232, 181, 63, calc(0.080 * var(--vx-glow))) 25%,
            transparent 25%
        ) 0 0 / 14px 14px,
        linear-gradient(
            135deg,
            transparent 75%,
            rgba(232, 181, 63, calc(0.070 * var(--vx-glow))) 75%
        ) 0 0 / 14px 14px,
        linear-gradient(
            315deg,
            transparent 75%,
            rgba(232, 181, 63, calc(0.070 * var(--vx-glow))) 75%
        ) 0 0 / 14px 14px,
        var(--vx-black);
}

/* Dezente Matrix-Scanlines. */
body::before {
    position: fixed;
    z-index: 9998;
    inset: 0;
    pointer-events: none;
    content: "";
    opacity: 0.24;
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 3px,
            rgba(232, 181, 63, calc(0.055 * var(--vx-glow))) 4px
        );
    mix-blend-mode: screen;
}

::selection {
    color: #fff;
    background: rgba(196, 20, 34, 0.78);
}

a,
.btn-link {
    color: var(--vx-gold-bright);
    text-underline-offset: 0.18rem;
}

a:hover,
.btn-link:hover {
    color: #f7ecd0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--vx-gray-050);
    font-weight: 700;
    letter-spacing: 0.035em;
}

h1 {
    position: relative;
    margin-bottom: 1.65rem;
    padding-bottom: 0.8rem;
    font-family: var(--vx-font-mono);
    font-size: clamp(1.75rem, 3vw, 2.55rem);
    text-transform: uppercase;
    text-shadow:
        0 0 18px rgba(196, 20, 34, 0.18),
        0 1px 0 #000;
}

h1::before {
    margin-right: 0.55rem;
    color: var(--vx-red-bright);
    content: "//";
}

h1::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: min(18rem, 65%);
    height: 2px;
    content: "";
    background:
        linear-gradient(
            90deg,
            var(--vx-red-bright),
            var(--vx-gold),
            transparent
        );
    box-shadow: 0 0 12px var(--vx-red-glow);
}

h2,
h3 {
    font-family: var(--vx-font-mono);
}

p,
label,
small,
.form-text,
.text-muted {
    color: var(--vx-gray-300) !important;
}

strong {
    color: var(--vx-gray-050);
}

hr {
    border-color: rgba(232, 181, 63, 0.28);
    opacity: 1;
}

.content {
    width: min(100%, 112rem);
    margin-inline: auto;
}

/* Karten und Panels */
.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.accordion-item {
    color: var(--vx-gray-100);
    border: 1px solid var(--vx-border);
    border-radius: 0.35rem;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(232, 181, 63, 0.012) 0,
            rgba(232, 181, 63, 0.012) 1px,
            transparent 1px,
            transparent 8px
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.025),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            var(--vx-panel-soft),
            var(--vx-panel)
        );
    box-shadow: var(--vx-shadow);
}

.card {
    position: relative;
    overflow: hidden;
}

.card::before {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    content: "";
    background:
        linear-gradient(
            90deg,
            var(--vx-red),
            var(--vx-gold),
            transparent 78%
        );
}

.card-header {
    color: var(--vx-gold-bright);
    border-bottom: 1px solid rgba(232, 181, 63, 0.25);
    background:
        linear-gradient(
            90deg,
            rgba(196, 20, 34, 0.17),
            rgba(232, 181, 63, 0.055)
        );
    font-family: var(--vx-font-mono);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.card-footer {
    border-top: 1px solid var(--vx-border-soft);
    background: rgba(0, 0, 0, 0.2);
}

/* Formulare */
.form-label {
    margin-bottom: 0.42rem;
    color: var(--vx-gray-100) !important;
    font-family: var(--vx-font-mono);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.form-control,
.form-select,
.input-group-text {
    min-height: 2.75rem;
    color: var(--vx-gray-050);
    border: 1px solid rgba(232, 181, 63, 0.25);
    border-radius: 0.28rem;
    background-color: rgba(5, 7, 8, 0.88);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        inset 0 0 20px rgba(0, 0, 0, 0.18);
}

.form-control:hover,
.form-select:hover {
    border-color: rgba(232, 181, 63, 0.48);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    color: #fff;
    border-color: var(--vx-red-bright);
    background-color: rgba(7, 9, 10, 0.98);
    box-shadow:
        0 0 0 0.18rem rgba(196, 20, 34, 0.18),
        0 0 18px rgba(196, 20, 34, 0.15);
}

.form-control:disabled,
.form-select:disabled,
fieldset:disabled .form-control,
fieldset:disabled .form-select {
    color: var(--vx-gray-500);
    border-color: rgba(255, 255, 255, 0.08);
    background-color: rgba(22, 24, 26, 0.74);
}

.form-control::placeholder {
    color: #666b6f;
}

.form-floating > label {
    color: var(--vx-gray-500) !important;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--vx-gold) !important;
}

.form-select {
    --bs-form-select-bg-img:
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e8b53f' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-check-input {
    border-color: rgba(232, 181, 63, 0.44);
    background-color: rgba(6, 8, 9, 0.92);
}

.form-check-input:checked {
    border-color: var(--vx-red-bright);
    background-color: var(--vx-red);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--vx-gray-050);
    transition: background-color 9999s ease-in-out 0s;
    box-shadow: 0 0 0 1000px #0a0c0d inset;
}

/* Buttons */
.btn {
    position: relative;
    overflow: hidden;
    border-radius: 0.28rem;
    font-family: var(--vx-font-mono);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    transition:
        transform 120ms ease,
        border-color 120ms ease,
        background-color 120ms ease,
        box-shadow 120ms ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    color: #fff;
    border-color: #f02a3c;
    background:
        linear-gradient(
            180deg,
            #db2032,
            #9b0c19
        );
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.035) inset,
        0 8px 22px rgba(163, 9, 25, 0.26);
}

.btn-primary:hover,
.btn-primary:focus {
    color: #fff;
    border-color: #ff5967;
    background:
        linear-gradient(
            180deg,
            #ee2a3e,
            #b80e1f
        );
    box-shadow:
        0 0 20px rgba(224, 22, 42, 0.32);
}

.btn-secondary,
.btn-outline-secondary {
    color: var(--vx-gray-100);
    border-color: rgba(255, 255, 255, 0.16);
    background:
        linear-gradient(
            180deg,
            #35383a,
            #202224
        );
}

.btn-outline-primary {
    color: var(--vx-red-bright);
    border-color: rgba(239, 38, 56, 0.62);
}

.btn-outline-primary:hover {
    color: white;
    border-color: var(--vx-red-bright);
    background: var(--vx-red);
}

.btn-success {
    color: #fdfbf6;
    border-color: #b7994e;
    background: linear-gradient(180deg, #8b7233, #604d1e);
}

.btn-warning {
    color: #17120a;
    border-color: var(--vx-gold-bright);
    background:
        linear-gradient(
            180deg,
            #e4c36f,
            #aa7924
        );
}

.btn-danger {
    border-color: #ff4354;
    background:
        linear-gradient(
            180deg,
            #c91327,
            #780712
        );
}

/* Tabellen */
.table {
    --bs-table-color: var(--vx-gray-100);
    --bs-table-bg: rgba(12, 14, 15, 0.76);
    --bs-table-border-color: rgba(232, 181, 63, 0.15);
    --bs-table-striped-color: var(--vx-gray-100);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.025);
    --bs-table-hover-color: #fff;
    --bs-table-hover-bg: rgba(196, 20, 34, 0.1);

    overflow: hidden;
    margin-bottom: 0;
    border: 1px solid rgba(232, 181, 63, 0.19);
    border-radius: 0.32rem;
    vertical-align: middle;
    box-shadow: var(--vx-shadow);
}

.table > :not(caption) > * > * {
    padding: 0.8rem 0.85rem;
}

.table thead th {
    color: var(--vx-gold-bright);
    border-bottom: 1px solid rgba(232, 181, 63, 0.44);
    background:
        linear-gradient(
            180deg,
            rgba(196, 20, 34, 0.18),
            rgba(0, 0, 0, 0.38)
        );
    font-family: var(--vx-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.table tbody tr {
    transition:
        background-color 100ms ease,
        box-shadow 100ms ease;
}

.table tbody tr:hover {
    box-shadow:
        inset 3px 0 0 var(--vx-red-bright);
}

/* Meldungen */
.alert {
    border-width: 1px;
    border-radius: 0.3rem;
    font-family: var(--vx-font-ui);
    box-shadow: var(--vx-shadow);
}

.alert-success {
    color: #e2d9c2;
    border-color: rgba(184, 156, 84, 0.5);
    background: rgba(78, 63, 24, 0.58);
}

.alert-danger {
    color: #ffbbc2;
    border-color: rgba(239, 38, 56, 0.54);
    background: rgba(104, 8, 20, 0.62);
}

.alert-warning {
    color: #f1d79e;
    border-color: rgba(201, 163, 74, 0.52);
    background: rgba(92, 64, 16, 0.5);
}

.alert-info {
    color: #c7d5de;
    border-color: rgba(145, 167, 180, 0.36);
    background: rgba(31, 48, 58, 0.64);
}

/* Navigation innerhalb von Account-Seiten */
.nav-pills {
    gap: 0.28rem;
}

.nav-pills .nav-link {
    color: var(--vx-gray-300);
    border: 1px solid transparent;
    border-radius: 0.28rem;
    font-family: var(--vx-font-mono);
    font-size: 0.78rem;
}

.nav-pills .nav-link:hover {
    color: var(--vx-gold-bright);
    border-color: rgba(232, 181, 63, 0.23);
    background: rgba(232, 181, 63, 0.07);
}

.nav-pills .nav-link.active {
    color: #fff;
    border-color: rgba(239, 38, 56, 0.45);
    background:
        linear-gradient(
            90deg,
            rgba(196, 20, 34, 0.8),
            rgba(112, 8, 18, 0.62)
        );
}

/* Sonstige Bootstrap-Komponenten */
.badge {
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-family: var(--vx-font-mono);
    letter-spacing: 0.045em;
}

.dropdown-item {
    color: var(--vx-gray-100);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #fff;
    background: rgba(196, 20, 34, 0.18);
}

.dropdown-divider {
    border-color: var(--vx-border-soft);
}

.pagination .page-link {
    color: var(--vx-gray-100);
    border-color: var(--vx-border-soft);
    background: var(--vx-panel);
}

.pagination .page-link:hover,
.pagination .active .page-link {
    color: #fff;
    border-color: var(--vx-red);
    background: var(--vx-red-dark);
}

code,
pre,
kbd {
    color: var(--vx-gold-bright);
    font-family: var(--vx-font-mono);
}

pre {
    padding: 1rem;
    border: 1px solid var(--vx-border);
    border-radius: 0.3rem;
    background: rgba(0, 0, 0, 0.56);
}

.valid.modified:not([type="checkbox"]) {
    outline: 1px solid var(--vx-green);
}

.invalid {
    outline: 1px solid var(--vx-red-bright);
}

.validation-message,
.text-danger {
    color: #ff6573 !important;
}

.blazor-error-boundary {
    padding: 1rem 1rem 1rem 3.7rem;
    color: #fff;
    border: 1px solid var(--vx-red-bright);
    border-radius: 0.3rem;
    background:
        linear-gradient(
            90deg,
            rgba(116, 6, 18, 0.94),
            rgba(38, 5, 10, 0.94)
        );
}

.blazor-error-boundary::after {
    content: "SYSTEMFEHLER";
    font-family: var(--vx-font-mono);
    letter-spacing: 0.08em;
}

/* Scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--vx-red-dark) #111315;
}

*::-webkit-scrollbar {
    width: 0.72rem;
    height: 0.72rem;
}

*::-webkit-scrollbar-track {
    background: #111315;
}

*::-webkit-scrollbar-thumb {
    border: 2px solid #111315;
    border-radius: 0.7rem;
    background:
        linear-gradient(
            180deg,
            var(--vx-red),
            var(--vx-red-dark)
        );
}

/* Gute Darstellung auf kleinen Geräten */
@media (max-width: 767.98px) {
    h1 {
        font-size: 1.55rem;
    }

    .content {
        padding-inline: 1rem !important;
    }

    .card-body {
        padding: 1rem;
    }

    .table {
        font-size: 0.84rem;
    }

    .btn {
        min-height: 2.55rem;
    }
}

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


/* ================================================================
   MATRIXARENA v16.2 – permanenter Vollbild-Matrix-Canvas
   ================================================================ */

html,
body {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    margin: 0;
    background: #020403 !important;
}

body {
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
    background: #020403 !important;
}

/* Alte Scanline- und Tapetenebenen der CSS-Basis abschalten. */
body::before,
body::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

#matrix-background {
    position: fixed !important;
    z-index: 0;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden;
    pointer-events: none;
    background: #020403;
    contain: strict;
    transform: none !important;
}

.matrix-carbon,
.matrix-seams,
#matrix-rain,
.matrix-vignette {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none !important;
}

.matrix-carbon {
    z-index: 0;

    /* Die vier Ecklichter der Platte, hinter dem Zeichenregen.
       Frueher lagen hier zwei sehr blasse Inseln (0.075) und nur oben -
       unten blieb die Platte kalt. Jetzt haengen alle vier an
       --vx-glow und sind deutlich kraeftiger. Gold ueber Kreuz, Rot
       ueber Kreuz. */
    background:
        radial-gradient(
            ellipse at 16% 8%,
            rgba(232, 181, 63, calc(0.115 * var(--vx-glow))),
            transparent 48rem
        ),
        radial-gradient(
            ellipse at 88% 90%,
            rgba(232, 181, 63, calc(0.095 * var(--vx-glow))),
            transparent 46rem
        ),
        radial-gradient(
            ellipse at 86% 14%,
            rgba(196, 20, 34, calc(0.060 * var(--vx-glow))),
            transparent 45rem
        ),
        radial-gradient(
            ellipse at 12% 88%,
            rgba(196, 20, 34, calc(0.045 * var(--vx-glow))),
            transparent 44rem
        ),
        linear-gradient(
            27deg,
            rgba(255, 255, 255, 0.021) 5%,
            transparent 5% 45%,
            rgba(0, 0, 0, 0.24) 45% 55%,
            transparent 55% 95%,
            rgba(255, 255, 255, 0.017) 95%
        ) 0 0 / 22px 22px,
        linear-gradient(
            153deg,
            rgba(0, 0, 0, 0.26) 5%,
            transparent 5% 45%,
            rgba(255, 255, 255, 0.017) 45% 55%,
            transparent 55% 95%,
            rgba(0, 0, 0, 0.23) 95%
        ) 11px 11px / 22px 22px,
        linear-gradient(
            135deg,
            #0b0a08,
            #030504 52%,
            #0b0a09
        );
    filter: contrast(1.06);
}

.matrix-seams {
    z-index: 1;
    opacity: 0.66;
    background:
        linear-gradient(
            116deg,
            transparent 0 20.8%,
            rgba(0, 0, 0, 0.88) 20.9%,
            rgba(74, 55, 8, 0.78) 21.02%,
            rgba(245, 196, 73, 0.55) 21.12%,
            rgba(84, 62, 8, 0.74) 21.22%,
            rgba(0, 0, 0, 0.9) 21.35%,
            transparent 21.48% 100%
        ),
        linear-gradient(
            116deg,
            transparent 0 72.4%,
            rgba(0, 0, 0, 0.9) 72.5%,
            rgba(104, 7, 17, 0.82) 72.62%,
            rgba(255, 48, 67, 0.52) 72.72%,
            rgba(116, 8, 19, 0.78) 72.82%,
            rgba(0, 0, 0, 0.9) 72.95%,
            transparent 73.08% 100%
        ),
        linear-gradient(
            4deg,
            transparent 0 80.8%,
            rgba(0, 0, 0, 0.86) 80.9%,
            rgba(122, 94, 22, 0.47) 81.02%,
            rgba(209, 27, 47, 0.41) 81.16%,
            rgba(0, 0, 0, 0.88) 81.29%,
            transparent 81.42% 100%
        );
    filter:
        drop-shadow(0 0 5px rgba(232, 181, 63, calc(0.13 * var(--vx-glow))))
        drop-shadow(0 0 5px rgba(239, 38, 56, calc(0.07 * var(--vx-glow))));
}

#matrix-rain {
    z-index: 2;
    display: block;
    opacity: 0.75;
    background: transparent !important;
    mix-blend-mode: screen;
    filter:
        saturate(1.2)
        contrast(1.1);
}

.matrix-vignette {
    z-index: 3;
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.18),
            transparent 14% 86%,
            rgba(0, 0, 0, 0.2)
        ),
        /* Die Vignette lag mit 0.38 Schwarz genau auf den Ecken - also
           dort, wo die goldenen Lichter sitzen, und hat sie
           weggedunkelt. Deutlich zurueckgenommen. */
        radial-gradient(
            ellipse at center,
            transparent 40%,
            rgba(0, 0, 0, 0.07) 78%,
            rgba(0, 0, 0, 0.18) 100%
        );
}

body > .page,
body > #blazor-error-ui,
body > blazor-error-boundary {
    position: relative;
    z-index: 1;
}

/* Karten bleiben lesbar, ohne den Vollbildfluss zu verdecken. */
.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.accordion-item {
    border-color: rgba(232, 181, 63, 0.25);
    background:
        linear-gradient(
            135deg,
            rgba(232, 181, 63, 0.025),
            transparent 34%
        ),
        linear-gradient(
            315deg,
            rgba(196, 20, 34, 0.025),
            transparent 31%
        ),
        rgba(12, 11, 8, 0.88);
    backdrop-filter: blur(2px);
}

.table {
    --bs-table-bg: rgba(5, 10, 7, 0.84);
    --bs-table-striped-bg: rgba(232, 181, 63, 0.024);
    --bs-table-hover-bg: rgba(196, 20, 34, 0.085);
}

.form-control,
.form-select,
.input-group-text {
    background-color: rgba(3, 8, 5, 0.9);
}

@media (max-width: 700px) {
    #matrix-rain {
        opacity: 0.64;
    }

    .matrix-seams {
        opacity: 0.52;
    }
}

@media (prefers-reduced-motion: reduce) {
    #matrix-rain {
        opacity: 0.52;
    }
}

/* ================================================================
   MATRIXARENA v16.3 – navigationsfester Canvas ohne 300x150-Zoom
   ================================================================ */

#matrix-background {
    width: 100% !important;
    height: 100% !important;
    min-width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    contain: layout paint size style;
}

/*
 * Ein von Enhanced Navigation neu eingesetzter Canvas besitzt zunächst nur
 * 300 x 150 Pixel. Er bleibt unsichtbar, bis JavaScript CSS-Größe und Backing
 * Store korrekt auf den Viewport gesetzt und den ersten Frame gezeichnet hat.
 */
#matrix-background #matrix-rain {
    visibility: hidden;
    opacity: 0 !important;
}

#matrix-background[data-matrix-ready="true"] #matrix-rain,
#matrix-background #matrix-rain[data-matrix-ready="true"] {
    visibility: visible;
    opacity: 0.78 !important;
}

/* Kopf und linke Kante werden nicht mehr durch eine starke Vignette verdeckt. */
.matrix-vignette {
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.07),
            transparent 12% 88%,
            rgba(0, 0, 0, 0.14)
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.03),
            transparent 8rem 88%,
            rgba(0, 0, 0, 0.11)
        ),
        radial-gradient(
            ellipse at center,
            transparent 42%,
            rgba(0, 0, 0, 0.08) 78%,
            rgba(0, 0, 0, 0.24) 100%
        ) !important;
}

/* ------------------------------------------------------------------
   DER HINTERGRUND AUF DEM TELEFON

   Hier lag der Grund, warum die Handyansicht schlecht aussah - und es
   war kein Layoutfehler. Die Kacheln standen richtig, der Text stand
   richtig, es war der Grund darunter.

   Der Zeichenregen hat eine feste Spaltendichte und liegt im
   Mischmodus "screen" darueber. Auf einem breiten Schirm verteilen
   sich seine Spalten auf vierzehnhundert Pixel, und hinter einer
   Textzeile stehen zwei, drei Zeichen. Auf 375 Pixeln liegen
   dieselben Spalten uebereinander: hinter JEDER Zeile stehen Zeichen,
   und "screen" hellt sie in den Text hinein auf.

   Nachgemessen am echten Telefonmass: bei 0.67 lief der Regen
   sichtbar durch den Fliesstext, und der Partnerkasten sah leer aus -
   das Logo darin war schlicht nicht mehr vom Grund zu unterscheiden.
   Bei 0.28 steht es wieder da.

   Dasselbe gilt fuer die Ecklichter: --vx-glow ist auf 48rem
   Durchmesser ausgelegt. Auf einem Telefon ist der ganze Schirm
   kleiner als ein Licht, also liegt ueberall das Maximum. Darum hier
   knapp die Haelfte.

   Am Schreibtisch aendert sich nichts. Was hier steht, gilt nur
   unterhalb von 700 Pixeln.
   ------------------------------------------------------------------ */
@media (max-width: 700px) {
    :root {
        --vx-glow: 1.1;
    }

    #matrix-background[data-matrix-ready="true"] #matrix-rain,
    #matrix-background #matrix-rain[data-matrix-ready="true"] {
        opacity: 0.28 !important;
    }

    .matrix-seams {
        opacity: 0.3;
    }
}

@media (prefers-reduced-motion: reduce) {
    #matrix-background[data-matrix-ready="true"] #matrix-rain,
    #matrix-background #matrix-rain[data-matrix-ready="true"] {
        opacity: 0.55 !important;
    }
}

/* ================================================================
   MATRIXARENA v16.4 – lesbare Seitenhinweise und Abschnittsüberschriften
   ================================================================ */

/*
 * Bootstrap versieht .text-body-secondary selbst mit !important.
 * Der gezielte Selektor verhindert, dass Einleitungstexte auf dem
 * dunklen Matrix-Hintergrund wieder in das zu dunkle Standardgrau fallen.
 */
.content .text-body-secondary,
.content > .history-intro,
.content > .settings-intro {
    color: var(--vx-copy-green) !important;
}

/* Direkte Seiteneinleitungen ohne eigene Hilfsklasse bleiben ebenfalls lesbar. */
.content > p:not(.alert) {
    color: var(--vx-copy-green) !important;
}

/* Karten- und nachgelagerte Abschnittstitel erhalten einen dezenten Grünton. */
.content .card-header,
.content > h2,
.content > h3 {
    color: var(--vx-copy-green-strong) !important;
    text-shadow: 0 0 12px rgba(232, 181, 63, 0.10);
}


/* ==================================================================
   Impressum und Datenschutzerklärung

   Beide Seiten teilen sich diesen Abschnitt. Sie stehen hier global
   und nicht als Komponentenstil, weil sonst dieselben Regeln in zwei
   .razor.css-Dateien doppelt gepflegt werden müssten.

   Lange Fließtexte brauchen andere Werte als der Rest der Anwendung:
   schmalere Zeilen, mehr Durchschuss, ruhigere Farben.
   ================================================================== */

.legal {
    max-width: 46rem;
    margin: 0 auto;
    color: rgba(217, 212, 200, 0.88);
    font-size: 0.95rem;
    line-height: 1.7;
}

.legal__header {
    margin-bottom: 2rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(232, 181, 63, 0.18);
}

.legal__eyebrow {
    display: block;
    margin-bottom: 0.35rem;
    color: #e8b53f;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.legal h1 {
    margin: 0 0 0.5rem;
    color: #fcf8ed;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: 0.04em;
}

.legal__lead {
    margin: 0;
    color: rgba(217, 212, 200, 0.62);
    font-size: 0.9rem;
}

.legal h2 {
    margin: 2.1rem 0 0.75rem;
    color: #f3d079 !important;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.legal p {
    margin: 0 0 0.95rem;
    /* Der Text nennt lange Adressen und Aktenzeichen - die sollen
       umbrechen statt die Seite breitzuziehen. */
    overflow-wrap: anywhere;
}

.legal ul {
    margin: 0 0 1.1rem;
    padding-left: 1.2rem;
}

.legal li {
    margin-bottom: 0.3rem;
}

.legal a {
    color: #f3d079;
    overflow-wrap: anywhere;
}

.legal a:hover,
.legal a:focus-visible {
    color: #ffe6a8;
}


/* ------------------------------------------------------------------
   Waehrend im Design-Studio an einem Rand gezogen wird.

   Global und nicht am Bauteil: die Klassen haengen am <body>, und
   Blazor-CSS eines Bauteils kommt dort nicht hin. designstudio.js
   setzt sie beim Druecken und nimmt sie beim Loslassen weg.

   Warum ueberhaupt: ohne das springt der Zeiger zurueck auf den
   Pfeil, sobald er den schmalen Griff verlaesst - und das tut er
   beim Ziehen sofort. Der Zeiger soll sagen, was gerade passiert,
   und nicht, wo die Maus steht. user-select verhindert, dass
   nebenbei die halbe Seite blau markiert wird.
   ------------------------------------------------------------------ */
body.studio-zieht {
    user-select: none;
}

body.studio-zieht--breite,
body.studio-zieht--breite * {
    cursor: ew-resize !important;
}

body.studio-zieht--hoehe,
body.studio-zieht--hoehe * {
    cursor: ns-resize !important;
}

/* Beim Verschieben eines Teils: kein Pfeil mehr, sondern die Hand am
   Gegenstand. Das ist der Unterschied, den man beim Ziehen fuehlt -
   ein Rand macht die Flaeche groesser, ein Teil wandert. */
body.studio-zieht--bewegt,
body.studio-zieht--bewegt * {
    cursor: grabbing !important;
}