/* ==========================================================================
   BitMonz Website im Circuit-Stil (20.10.2026)
   Sven: "Die Landingpage ist in einem Navy-Design (alt) und nicht in unserem
   neuen Stil ... cleaner, Icons weg, an der BitOS/BitStation orientieren,
   technischer, digitaler."

   Diese Datei liegt UEBER site/site.css (wird danach geladen) und zieht die
   Seite auf die Spiel-Linie "Circuit" (css/circuit_ui.css):
     - Farben/Schrift aus den cx-Tokens, JetBrains Mono ueberall
     - angeschraegte Ecken (Chamfer) statt Rundungen, Verlaufsrahmen
     - Leiterbahnen als ruhige Flaechen-Textur, keine Dauer-Animationen
       ausser dem Lichtlauf im Rahmen beim Ueberfahren (wie .cx-btn)
     - eigene Cursor (img/cursors) wie im Spiel
   Chamfer-Technik wie im Spiel: Element ohne Hintergrund, ::before = Rahmen
   (Verlauf, geclipt), ::after = Fuellung 1px innen (geclipt). Inhalt, der bis
   an die Kante reicht (Bilder), bekommt dieselbe Form per clip-path.
   ========================================================================== */
@import url('../libs/fonts/jetbrains-mono.css');
@property --cx-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes cxSpin { to { --cx-ang: 360deg; } }

:root {
    --cx-font: 'JetBrains Mono', 'Courier New', monospace;
    --cx-bg: #060917; --cx-bg2: #0a1130; --cx-bg3: #0d1636;
    --cx-txt: #e6eefc; --cx-muted: #93a6c9; --cx-label: #c9d5ec; --cx-line: #1c3468;
    --cx-cy: #33d6ff; --cx-cy-rgb: 51, 214, 255;
    --cx-pu: #c063ff; --cx-pu-rgb: 192, 99, 255;
    --cx-gr: #5be27a; --cx-gr-rgb: 91, 226, 122;
    --cx-bl: #5a96ff; --cx-bl-rgb: 90, 150, 255;
    --cx-gold: #ffd76a; --cx-gold-rgb: 255, 215, 106;
    --cx-bad: #ff6b6b;
    --cut: 14px;
    --hand: url('../img/cursors/hand.png') 2 0, pointer;
    --mouse: url('../img/cursors/mouse.png') 2 0, auto;

    /* alte Seiten-Tokens auf Circuit umbiegen (site.css nutzt sie ueberall) */
    --bg0: #060917; --bg1: #0a1130; --bg2: #0d1636;
    --line: #1c3468; --line2: #24427e;
    --accent: #33d6ff; --gold: #ffd76a;
    --txt: #e6eefc; --txt2: #c9d5ec; --txt3: #93a6c9;
    --ok: #5be27a; --bad: #ff6b6b;
    --cy: #33d6ff; --cy-rgb: 51, 214, 255;
    --warm: #ffd76a; --warm-soft: rgba(255, 215, 106, .14);
    --ink: #e6eefc; --ink2: #c9d5ec; --ink3: #93a6c9;
    --r: 0; --r-s: 0;

    /* Leiterbahn-Bild aus circuit_ui.css (gekuerzt auf die Ecken-Variante) */
    --cx-traces: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='760' viewBox='0 0 1000 760'%3E%3Cg fill='none' stroke-linejoin='round' stroke-linecap='round'%3E%3Cg stroke='%233f8dff' stroke-opacity='.5' stroke-width='3'%3E%3Cpolyline points='-10,61 14,37 29,22 119,22 119,-6 176,-6'/%3E%3Cpolyline points='-10,100 69,100 108,100 217,100 263,100 273,100'/%3E%3Cpolyline points='-10,72 41,72 41,52 148,52'/%3E%3Cpolyline points='60,-10 60,67 71,78 71,113'/%3E%3Cpolyline points='149,-10 128,11 142,25 142,113 162,133'/%3E%3Cpolyline points='1010,71 901,71 901,96 883,114 802,114'/%3E%3Cpolyline points='1010,33 912,33 912,53 820,53'/%3E%3Cpolyline points='1010,65 935,65 916,46 796,46 777,65 777,37'/%3E%3Cpolyline points='884,-10 884,77 884,127'/%3E%3Cpolyline points='958,-10 958,22 958,74 958,143'/%3E%3Cpolyline points='-10,687 85,687 189,687 264,687'/%3E%3Cpolyline points='-10,731 92,731 106,745 184,745 196,733 270,733'/%3E%3Cpolyline points='109,770 109,690 109,635'/%3E%3Cpolyline points='35,770 60,745 60,660 50,650 70,630'/%3E%3Cpolyline points='1010,689 934,689 923,678 823,678'/%3E%3Cpolyline points='1010,643 986,667 986,677 961,702 961,677 934,704 830,704'/%3E%3Cpolyline points='1010,733 898,733 898,714 883,699'/%3E%3Cpolyline points='894,770 894,702 894,650'/%3E%3C/g%3E%3Cg stroke='%237fd6ff' stroke-opacity='.9' stroke-width='1.2'%3E%3Cpolyline points='-10,61 14,37 29,22 119,22 119,-6 176,-6'/%3E%3Cpolyline points='-10,100 69,100 108,100 217,100 263,100 273,100'/%3E%3Cpolyline points='-10,72 41,72 41,52 148,52'/%3E%3Cpolyline points='60,-10 60,67 71,78 71,113'/%3E%3Cpolyline points='149,-10 128,11 142,25 142,113 162,133'/%3E%3Cpolyline points='1010,71 901,71 901,96 883,114 802,114'/%3E%3Cpolyline points='1010,33 912,33 912,53 820,53'/%3E%3Cpolyline points='1010,65 935,65 916,46 796,46 777,65 777,37'/%3E%3Cpolyline points='884,-10 884,77 884,127'/%3E%3Cpolyline points='958,-10 958,22 958,74 958,143'/%3E%3Cpolyline points='-10,687 85,687 189,687 264,687'/%3E%3Cpolyline points='-10,731 92,731 106,745 184,745 196,733 270,733'/%3E%3Cpolyline points='109,770 109,690 109,635'/%3E%3Cpolyline points='35,770 60,745 60,660 50,650 70,630'/%3E%3Cpolyline points='1010,689 934,689 923,678 823,678'/%3E%3Cpolyline points='1010,643 986,667 986,677 961,702 961,677 934,704 830,704'/%3E%3Cpolyline points='1010,733 898,733 898,714 883,699'/%3E%3Cpolyline points='894,770 894,702 894,650'/%3E%3C/g%3E%3C/g%3E%3Cg fill='none' stroke='%238fe3ff' stroke-width='1.4'%3E%3Ccircle cx='148' cy='52' r='4'/%3E%3Ccircle cx='71' cy='113' r='4'/%3E%3Ccircle cx='162' cy='133' r='4'/%3E%3Ccircle cx='802' cy='114' r='4'/%3E%3Ccircle cx='820' cy='53' r='4'/%3E%3Ccircle cx='777' cy='37' r='4'/%3E%3Ccircle cx='264' cy='687' r='4'/%3E%3Ccircle cx='70' cy='630' r='4'/%3E%3Ccircle cx='830' cy='704' r='4'/%3E%3Ccircle cx='823' cy='678' r='4'/%3E%3C/g%3E%3Cg fill='%233f8dff' fill-opacity='.55'%3E%3Crect x='241' y='27' width='12' height='12'/%3E%3Crect x='937' y='64' width='12' height='12'/%3E%3Crect x='103' y='629' width='12' height='12'/%3E%3Crect x='898' y='654' width='12' height='12'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Grundflaeche ─────────────────────────────────────────────────────────── */
html { cursor: var(--mouse); }
* { cursor: inherit; }
a, button, summary, label[for], select, .v2-mon, .v2-fchip, [data-setlang] { cursor: var(--hand) !important; }
input, textarea { cursor: text; }

body {
    font-family: var(--cx-font);
    color: var(--cx-txt);
    background: var(--cx-bg);
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
}
/* Ruhige Leiterbahnen am Seitenrand, fest im Bild (nicht animiert) */
body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(60% 50% at 50% -10%, rgba(var(--cx-cy-rgb), .10), transparent 70%),
        radial-gradient(50% 40% at 100% 100%, rgba(var(--cx-pu-rgb), .07), transparent 70%),
        var(--cx-traces) center / cover no-repeat;
    opacity: .5;
}
h1, h2, h3, h4 { font-family: var(--cx-font); font-weight: 800; letter-spacing: -.5px; }
::selection { background: rgba(var(--cx-cy-rgb), .35); color: #fff; }

/* Chamfer-Baustein fuer Flaechen (Karten, Kacheln, Fenster) */
.bm-card, .v2-step, .v2-tile, .v2-key, .v2-chip-mon, .v2-mon, .v2-modal-box,
.bm-lang, .v2-fchip, .v2-search, .bm-play-btn, .v2-btn, .bm-submit, .bm-nav-burger,
.v2-modal-close, .v2-show-arr {
    --bd: linear-gradient(135deg, rgba(var(--ac-rgb, var(--cx-cy-rgb)), .55), #1c3468 35%, #1c3468 65%, rgba(var(--ac-rgb, var(--cx-cy-rgb)), .35));
    --fill: linear-gradient(170deg, #0c1638, #070c22 70%);
    position: relative; isolation: isolate;
    background: none !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none;
}
.bm-card::before, .v2-step::before, .v2-tile::before, .v2-key::before, .v2-chip-mon::before, .v2-mon::before,
.v2-modal-box::before, .bm-lang::before, .v2-fchip::before, .v2-search::before, .bm-play-btn::before, .v2-btn::before,
.bm-submit::before, .bm-nav-burger::before, .v2-modal-close::before, .v2-show-arr::before,
.bm-card::after, .v2-step::after, .v2-tile::after, .v2-key::after, .v2-chip-mon::after, .v2-mon::after,
.v2-modal-box::after, .bm-lang::after, .v2-fchip::after, .bm-play-btn::after, .v2-btn::after,
.bm-submit::after, .bm-nav-burger::after, .v2-modal-close::after, .v2-show-arr::after {
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)),
                       calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.bm-card::before, .v2-step::before, .v2-tile::before, .v2-key::before, .v2-chip-mon::before, .v2-mon::before,
.v2-modal-box::before, .bm-lang::before, .v2-fchip::before, .v2-search::before, .bm-play-btn::before, .v2-btn::before,
.bm-submit::before, .bm-nav-burger::before, .v2-modal-close::before, .v2-show-arr::before {
    background: var(--bd); counter-increment: none; font-size: 0; top: 0; right: 0;
}
.bm-card::after, .v2-step::after, .v2-tile::after, .v2-key::after, .v2-chip-mon::after, .v2-mon::after,
.v2-modal-box::after, .bm-lang::after, .v2-fchip::after, .bm-play-btn::after, .v2-btn::after,
.bm-submit::after, .bm-nav-burger::after, .v2-modal-close::after, .v2-show-arr::after {
    inset: 1px; z-index: -1; background: var(--fill);
    clip-path: polygon(calc(var(--cut) - .4px) 0, calc(100% - var(--cut) + .4px) 0, 100% calc(var(--cut) - .4px), 100% calc(100% - var(--cut) + .4px),
                       calc(100% - var(--cut) + .4px) 100%, calc(var(--cut) - .4px) 100%, 0 calc(100% - var(--cut) + .4px), 0 calc(var(--cut) - .4px));
}
/* Lichtlauf im Rahmen beim Ueberfahren (wie Skill-/Item-Karten im Spiel) */
.v2-step:hover, .v2-tile:hover, .v2-chip-mon:hover, .v2-mon:hover, .bm-news-card:hover,
.v2-btn:hover, .bm-play-btn:hover, .bm-submit:hover:not(:disabled), .v2-fchip:hover {
    --bd: conic-gradient(from var(--cx-ang) at 50% 50%,
            rgba(var(--ac-rgb, var(--cx-cy-rgb)), .45) 0deg 240deg,
            color-mix(in srgb, rgb(var(--ac-rgb, var(--cx-cy-rgb))) 55%, #ffffff) 300deg,
            #ffffff 322deg, rgb(var(--ac-rgb, var(--cx-cy-rgb))) 338deg,
            rgba(var(--ac-rgb, var(--cx-cy-rgb)), .45) 360deg);
    animation: cxSpin 1.6s linear infinite;
}

/* ── Navigation: BitStation-Kopfleiste ────────────────────────────────────── */
.bm-nav {
    background: linear-gradient(180deg, rgba(6, 9, 23, .96), rgba(6, 9, 23, .88));
    border-bottom: 0; backdrop-filter: blur(8px);
    padding: 10px clamp(14px, 3vw, 28px);
}
.bm-nav::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(var(--cx-cy-rgb), .55) 20%, rgba(var(--cx-cy-rgb), .25) 50%, rgba(var(--cx-cy-rgb), .55) 80%, transparent);
}
.bm-nav-logo img { height: 36px; }
.bm-nav-links > a:not(.bm-play-btn) {
    font-size: 12.5px; font-weight: 700; letter-spacing: .4px; color: var(--cx-muted);
    padding: 9px 11px; border-radius: 0; position: relative; background: none !important;
}
.bm-nav-links > a:not(.bm-play-btn):hover { color: var(--cx-txt); }
.bm-nav-links > a:not(.bm-play-btn)::after {
    content: ""; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 2px;
    background: var(--cx-cy); box-shadow: 0 0 8px rgba(var(--cx-cy-rgb), .8);
    transform: scaleX(0); transition: transform .18s;
}
.bm-nav-links > a:not(.bm-play-btn):hover::after { transform: scaleX(.5); }
.bm-nav-links > a.active:not(.bm-play-btn) { color: #fff; }
.bm-nav-links > a.active:not(.bm-play-btn)::after { transform: scaleX(1); }

.bm-lang { --cut: 6px; padding: 3px; gap: 2px; margin: 0 8px; }
.bm-lang button {
    font-family: var(--cx-font); font-size: 11.5px; font-weight: 800; letter-spacing: .5px;
    color: var(--cx-muted); border-radius: 0; padding: 5px 9px; position: relative;
}
.bm-lang button.active {
    color: #04121c; box-shadow: none;
    background: linear-gradient(180deg, #7fe6ff, var(--cx-cy));
    clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.bm-play-btn {
    --cut: 8px;
    --bd: linear-gradient(90deg, var(--cx-cy), rgba(var(--cx-cy-rgb), .55) 30%, rgba(var(--cx-cy-rgb), .55) 70%, var(--cx-cy));
    --fill: linear-gradient(180deg, #0f5f86, #0a3f5c 60%, #083049);
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--cx-font); font-size: 12.5px; font-weight: 800; letter-spacing: .5px; color: #f6f9ff;
    padding: 10px 18px; transform: none !important;
}
.bm-nav-burger {
    --cut: 7px; width: 42px; height: 38px; padding: 0;
    display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.bm-nav-burger span { display: block; width: 18px; height: 2px; background: var(--cx-cy); box-shadow: 0 0 6px rgba(var(--cx-cy-rgb), .7); }
@media (max-width: 900px) {
    .bm-nav-burger { display: flex; }
    .bm-nav-links { background: rgba(6, 9, 23, .98) !important; border-bottom: 1px solid var(--cx-line) !important; }
    .bm-nav-links > a:not(.bm-play-btn)::after { left: 0; right: auto; width: 24px; }
}
.ico-play { width: 10px; height: 12px; flex: 0 0 auto; fill: currentColor; }

/* ── Knoepfe = .cx-btn aus dem Spiel ──────────────────────────────────────── */
.v2-btn, .bm-submit {
    --cut: 11px; --ac-rgb: var(--cx-cy-rgb);
    --bd: linear-gradient(90deg, var(--cx-cy), rgba(var(--cx-cy-rgb), .55) 30%, rgba(var(--cx-cy-rgb), .55) 70%, var(--cx-cy));
    --fill: linear-gradient(180deg, #0f5f86, #0a3f5c 60%, #083049);
    font-family: var(--cx-font); font-size: 14px; font-weight: 800; letter-spacing: .5px;
    color: #f6f9ff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
    padding: 14px 28px; gap: 10px;
    filter: drop-shadow(0 0 12px rgba(var(--ac-rgb), .28));
    transition: filter .15s, transform .1s;
}
.v2-btn:hover, .bm-submit:hover:not(:disabled) { transform: none; filter: brightness(1.1) drop-shadow(0 0 18px rgba(var(--ac-rgb), .5)); }
.v2-btn:active { transform: translateY(1px); }
.v2-btn-primary { box-shadow: none; }
.v2-btn-warm {
    --ac-rgb: var(--cx-gold-rgb);
    --bd: linear-gradient(90deg, var(--cx-gold), rgba(var(--cx-gold-rgb), .55) 30%, rgba(var(--cx-gold-rgb), .55) 70%, var(--cx-gold));
    --fill: linear-gradient(180deg, #9a7616, #67500e 60%, #4f3d0a);
    color: #fff8e0 !important; box-shadow: none;
}
.v2-btn-ghost {
    --bd: linear-gradient(90deg, rgba(var(--cx-cy-rgb), .7), #1c3468 30%, #1c3468 70%, rgba(var(--cx-cy-rgb), .7));
    --fill: linear-gradient(180deg, #0b1434, #070c22);
    color: var(--cx-label) !important; backdrop-filter: none; filter: none;
}
.v2-btn-ghost:hover { color: #fff !important; }
.v2-btn.sm { --cut: 8px; padding: 10px 18px; font-size: 12.5px; }

/* ── Kopf einer Sektion ───────────────────────────────────────────────────── */
.v2-kicker {
    font-size: 11px; font-weight: 800; letter-spacing: 2.4px; color: var(--cx-cy);
    gap: 10px; margin-bottom: 14px;
}
.v2-kicker::before {
    content: "//"; width: auto; height: auto; background: none; border-radius: 0;
    color: rgba(var(--cx-cy-rgb), .55); letter-spacing: 0;
}
.v2-head h2 { font-size: clamp(24px, 3.4vw, 36px); letter-spacing: -1px; line-height: 1.2; }
.v2-head p { color: var(--cx-muted); font-size: clamp(13.5px, 1.3vw, 15px); line-height: 1.7; }

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.v2-hero-bg {
    background:
        radial-gradient(70% 55% at 50% 30%, rgba(var(--cx-cy-rgb), .13), transparent 70%),
        radial-gradient(45% 45% at 88% 85%, rgba(var(--cx-pu-rgb), .12), transparent 70%),
        radial-gradient(45% 45% at 10% 90%, rgba(var(--cx-bl-rgb), .10), transparent 70%),
        var(--cx-bg);
}
.v2-hero-bg::after {
    content: ""; position: absolute; inset: 0;
    background: var(--cx-traces) center / cover no-repeat; opacity: .75;
}
.v2-hero-grid {
    opacity: .9;
    background-image:
        linear-gradient(rgba(var(--cx-cy-rgb), .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--cx-cy-rgb), .05) 1px, transparent 1px);
    background-size: 48px 48px;
}
.v2-hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 2;
    background: linear-gradient(90deg, transparent, rgba(var(--cx-cy-rgb), .45), transparent);
}
.v2-hero-tag {
    display: inline-flex; align-items: center; gap: 10px; margin: 0 auto 22px;
    padding: 7px 14px; font-size: 11.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--cx-label); background: rgba(10, 17, 48, .8); border: 1px solid var(--cx-line);
    clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}
.v2-hero-tag i { width: 7px; height: 7px; background: var(--cx-gr); box-shadow: 0 0 8px rgba(var(--cx-gr-rgb), .9); display: block; }
.v2-hero-logo { animation: none; margin-bottom: 18px; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .7)) drop-shadow(0 0 22px rgba(var(--cx-cy-rgb), .25)); }
.v2-hero h1 { font-size: clamp(26px, 4.4vw, 46px); letter-spacing: -1.5px; line-height: 1.15; }
.v2-hero h1 em { background: linear-gradient(100deg, var(--cx-cy), #7fb8ff 50%, var(--cx-pu)); -webkit-background-clip: text; background-clip: text; }
.v2-hero-sub { color: var(--cx-muted); font-size: clamp(14px, 1.5vw, 16.5px); line-height: 1.7; }
.v2-hero-sub::before { content: "> "; color: var(--cx-gr); }
.v2-hero-mons img { opacity: .85; }

.v2-facts { gap: 10px; margin-top: 34px; }
.v2-fact {
    font-size: 12px; font-weight: 700; letter-spacing: .4px; color: var(--cx-label);
    padding: 7px 13px; background: rgba(10, 17, 48, .7); border: 1px solid var(--cx-line);
    clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.v2-fact .dot { width: 7px; height: 7px; border-radius: 0; background: var(--cx-cy); box-shadow: 0 0 7px rgba(var(--cx-cy-rgb), .9); }

/* ── VIER SCHRITTE: Pipeline wie in der BitStation ────────────────────────── */
.v2-steps {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px;
    counter-reset: none;
}
.v2-step {
    --cut: 14px;
    --bd: linear-gradient(180deg, rgb(var(--ac-rgb)), rgba(var(--ac-rgb), .35) 45%, rgba(var(--ac-rgb), .18));
    --fill: linear-gradient(180deg, rgba(var(--ac-rgb), .16), #080d26 42%, #070b1f);
    padding: 18px 20px 20px; display: flex; flex-direction: column; min-height: 238px;
    transition: transform .18s;
}
.v2-step:hover { transform: translateY(-3px); }
.v2-step-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 26px; }
.v2-step-no {
    font-size: 11px; font-weight: 800; color: rgb(var(--ac-rgb));
    padding: 3px 7px; background: rgba(var(--ac-rgb), .14); border: 1px solid rgba(var(--ac-rgb), .45);
}
.v2-step-cmd { font-size: 11px; font-weight: 500; color: var(--cx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-step-cmd b { color: rgb(var(--ac-rgb)); font-weight: 700; }
.v2-step h3 { font-size: 17px; letter-spacing: -.4px; margin-bottom: 8px; color: #fff; }
.v2-step p { color: var(--cx-muted); font-size: 13px; line-height: 1.65; }
/* Fortschritt als Pixel-Balken wie beim Programmieren (25/50/75/100 %) */
.v2-step-bar {
    margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 10px;
    font-size: 10.5px; font-weight: 700; color: var(--cx-muted);
}
.v2-step-bar s {
    flex: 1; height: 8px; text-decoration: none; position: relative;
    background: rgba(4, 8, 24, .9); outline: 1px solid rgba(var(--ac-rgb), .3);
}
.v2-step-bar s::before {
    content: ""; position: absolute; left: 1px; top: 1px; bottom: 1px; width: calc((100% - 2px) * var(--p));
    background: repeating-linear-gradient(90deg, rgb(var(--ac-rgb)) 0 6px, transparent 6px 8px);
    box-shadow: 0 0 8px rgba(var(--ac-rgb), .45);
}
/* Verbindungsleitung zur naechsten Karte */
.v2-step:last-child .v2-step-link { display: none; }
.v2-step-link {
    position: absolute; top: 34px; right: -31px; width: 32px; height: 10px; z-index: 2; pointer-events: none;
}
.v2-step-link::before {
    content: ""; position: absolute; left: 0; right: 6px; top: 4px; height: 2px;
    background: linear-gradient(90deg, rgba(var(--ac-rgb), .9), rgba(var(--ac2-rgb), .9));
    box-shadow: 0 0 6px rgba(var(--ac-rgb), .6);
}
.v2-step-link::after {
    content: ""; position: absolute; right: 0; top: 1px; width: 8px; height: 8px;
    background: rgb(var(--ac2-rgb)); box-shadow: 0 0 8px rgba(var(--ac2-rgb), .9);
}
@media (max-width: 1000px) {
    .v2-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .v2-step-link { display: none; }
}
@media (max-width: 560px) {
    .v2-steps { grid-template-columns: 1fr; }
    .v2-step { min-height: 0; }
}

/* ── BENTO-Kacheln ────────────────────────────────────────────────────────── */
.v2-tile { --cut: 16px; transform: none !important; box-shadow: none !important; }
.v2-tile:hover { --ac-rgb: var(--cx-cy-rgb); }
.v2-tile-media {
    margin: calc(var(--pad) * -1 + 1px) calc(var(--pad) * -1 + 1px) var(--pad);
    background: #070c22;
    clip-path: polygon(calc(var(--cut) - 1px) 0, calc(100% - var(--cut) + 1px) 0, 100% calc(var(--cut) - 1px), 100% 100%, 0 100%, 0 calc(var(--cut) - 1px));
    border-bottom: 1px solid rgba(var(--cx-cy-rgb), .25);
}
.v2-tile-media::after { background: linear-gradient(180deg, transparent 55%, rgba(6, 9, 23, .75)); }
.v2-tile h3 { font-size: clamp(16px, 1.7vw, 19px); letter-spacing: -.5px; }
.v2-tile p { color: var(--cx-muted); font-size: 13.5px; line-height: 1.7; }
.v2-more > summary { font-size: 12px; letter-spacing: .6px; color: var(--cx-cy); }
.v2-more > summary::before { content: "+"; font-weight: 800; }
.v2-more[open] > summary::before { content: "-"; }
.v2-more > summary::after { display: none; }
.v2-more-body { color: var(--cx-muted); font-size: 13px; border-left: 2px solid rgba(var(--cx-cy-rgb), .35); padding-left: 12px; margin-top: 4px; }
.v2-ph { color: var(--cx-muted); background-image: repeating-linear-gradient(45deg, rgba(var(--cx-cy-rgb), .05) 0 10px, transparent 10px 20px); }
/* 20.10.: Der Chamfer-Baustein oben setzt position: relative; die Pfeile muessen aber absolut
   ueber dem Bild liegen (prev links, next rechts), sonst rutschen beide untereinander nach links. */
.v2-show-arr { --cut: 8px; position: absolute !important; width: 42px; height: 42px; backdrop-filter: none; }
.v2-show-arr::after { background: rgba(6, 9, 23, .82); }
.v2-show-dot::after { border-radius: 0; height: 4px; width: 10px; }
.v2-show-dot.on::after { width: 22px; background: var(--cx-cy); box-shadow: 0 0 8px rgba(var(--cx-cy-rgb), .8); }

/* ── BitMonz-Band ─────────────────────────────────────────────────────────── */
.v2-chip-mon { --cut: 10px; padding-bottom: 10px; overflow: visible; transform: none !important; }
.v2-chip-mon .st {
    margin: 1px 1px 0;
    clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%, 0 9px);
    border-bottom: 1px solid rgba(var(--cx-cy-rgb), .25);
}
.v2-chip-mon b { font-size: 12px; font-weight: 700; letter-spacing: .3px; color: var(--cx-label); }
.v2-chip-mon:hover b { color: #fff; }

/* ── Testkey ──────────────────────────────────────────────────────────────── */
.v2-key {
    --cut: 22px; --ac-rgb: var(--cx-gold-rgb);
    --bd: linear-gradient(135deg, rgba(var(--cx-gold-rgb), .8), #1c3468 40%, #1c3468 70%, rgba(var(--cx-gold-rgb), .45));
    --fill: radial-gradient(70% 110% at 88% 0%, rgba(var(--cx-gold-rgb), .12), transparent 60%), linear-gradient(170deg, #0c1638, #070c22 70%);
}
.v2-key h2 em { color: var(--cx-gold); }
.v2-key > div > p { color: var(--cx-muted); font-size: 14px; }
.v2-key-list li { color: var(--cx-label); font-size: 13.5px; }
.v2-key-list li::before {
    content: ""; width: 8px; height: 8px; margin-top: 6px; border-radius: 0;
    background: var(--cx-gold); box-shadow: 0 0 8px rgba(var(--cx-gold-rgb), .8);
}

/* ── Formulare wie in der BitStation ──────────────────────────────────────── */
.v2-form label, .bm-field label { font-size: 11px; letter-spacing: 1.2px; color: var(--cx-muted); }
.v2-form input, .v2-form select, .v2-form textarea,
.bm-field input, .bm-field select, .bm-field textarea, .bm-captcha input {
    border-radius: 0 !important; background: #060c22 !important;
    border: 1px solid rgba(var(--cx-cy-rgb), .25) !important;
    color: var(--cx-txt); font-family: var(--cx-font); font-size: 13.5px;
}
.v2-form input:focus, .v2-form select:focus, .v2-form textarea:focus,
.bm-field input:focus, .bm-field select:focus, .bm-field textarea:focus, .bm-captcha input:focus {
    outline: none; border-color: var(--cx-cy) !important; box-shadow: 0 0 0 1px var(--cx-cy), 0 0 14px rgba(var(--cx-cy-rgb), .25) !important;
}
.v2-form-note, .bm-form-note { color: #7286ab; font-size: 11px; }
.bm-captcha .q { font-family: var(--cx-font); border-radius: 0 !important; }

/* ── Karten: News, Server ─────────────────────────────────────────────────── */
.bm-card { --cut: 14px; }
.bm-news-card { transform: none !important; }
.bm-news-tag {
    border-radius: 0 !important; font-size: 10.5px; letter-spacing: 1px;
    background: rgba(var(--cx-cy-rgb), .12) !important; color: var(--cx-cy) !important; border: 1px solid rgba(var(--cx-cy-rgb), .4) !important;
}
.bm-news-date { color: var(--cx-gold); font-size: 11.5px; }
.bm-news-card h3 { font-size: 16px; letter-spacing: -.4px; }
.bm-news-card p { color: var(--cx-muted); font-size: 13px; }
.bm-servers { overflow: visible; }
.bm-server-row { border-color: rgba(var(--cx-cy-rgb), .12) !important; font-size: 13px; }
.bm-server-row.head { background: rgba(var(--cx-cy-rgb), .06) !important; font-size: 11px; letter-spacing: 1.2px; color: var(--cx-muted); }
.bm-status .dot { border-radius: 0; width: 8px; height: 8px; }
.bm-load-bar { border-radius: 0 !important; }
.bm-load-bar > * { border-radius: 0 !important; }

/* ── Fusszeile ────────────────────────────────────────────────────────────── */
.bm-footer { background: #050815 !important; border-top: 0 !important; position: relative; margin-top: 90px; }
.bm-footer::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--cx-cy-rgb), .5), transparent);
}
.bm-footer h4 { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--cx-cy); }
.bm-footer h4::before { content: "// "; color: rgba(var(--cx-cy-rgb), .5); }
.bm-footer a, .bm-footer p { font-size: 12.5px; color: var(--cx-muted); }
.bm-footer a:hover { color: #fff; }

/* ── Fenster (Kontakt, Pedia-Details) ─────────────────────────────────────── */
.v2-modal { background: rgba(3, 5, 14, .82); }
.v2-modal-box {
    --cut: 20px;
    --bd: linear-gradient(135deg, var(--cx-cy), #1d5fa8 30%, #24306e 60%, var(--cx-pu));
    --fill: linear-gradient(170deg, #0c1638, #070b1f 70%);
    overflow: visible; filter: drop-shadow(0 0 28px rgba(var(--cx-cy-rgb), .25)) drop-shadow(0 24px 50px rgba(0, 0, 0, .7));
}
.v2-modal-box.single, .v2-modal-box { overflow: hidden; }
.v2-modal-close {
    --cut: 7px; width: 38px; height: 38px;
    --bd: linear-gradient(90deg, #ff6b6b, rgba(255, 107, 107, .55) 30%, rgba(255, 107, 107, .55) 70%, #ff6b6b);
    --fill: linear-gradient(180deg, #8a2020, #5c1414 60%, #4a0f0f);
    color: #fff; display: flex; align-items: center; justify-content: center; transform: none !important;
    /* 20.10.: muss absolut bleiben. Der Chamfer-Baustein setzt position:relative, dann wurde der Knopf
       zur ersten Grid-Zelle der Pedia-Karte und schob Bild + Text je eine Zelle weiter (wie bei den Pfeilen). */
    position: absolute !important; top: 12px; right: 12px; z-index: 5;
}
.v2-modal-close svg { width: 14px; height: 14px; }
.v2-modal-body h2 { letter-spacing: -1px; }
.v2-modal-desc { color: var(--cx-muted); font-size: 13.5px; }
.v2-stat-bar, .v2-stat-bar i { border-radius: 0 !important; }
.v2-ele-badge, .v2-role { border-radius: 0 !important; }

/* ── Pedia ────────────────────────────────────────────────────────────────── */
.v2-fchip { --cut: 7px; padding: 8px 14px; font-family: var(--cx-font); font-size: 12px; transform: none !important; }
.v2-fchip.on { --bd: linear-gradient(90deg, var(--cx-cy), rgba(var(--cx-cy-rgb), .6)); --fill: linear-gradient(180deg, #0f5f86, #0a3f5c); color: #fff; box-shadow: none; }
.v2-fchip .dot { border-radius: 0; }
.v2-search {
    --cut: 10px; border-radius: 0 !important; background: #060c22 !important;
    border: 1px solid rgba(var(--cx-cy-rgb), .3) !important; font-family: var(--cx-font);
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.v2-search::before { display: none; }
.v2-mon { --cut: 14px; transform: none !important; box-shadow: none !important; }
.v2-mon-stage { margin: 1px 1px 0; clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px); }
.v2-mon-eles img, .v2-mon-eles i { border-radius: 0; }
.v2-mon-foot h3 { letter-spacing: -.5px; }
.v2-pedia-hero h1 em { background: linear-gradient(100deg, var(--cx-cy), var(--cx-pu)); -webkit-background-clip: text; background-clip: text; }
.v2-pedia-count b { color: var(--cx-cy); }

/* ── Rechtstexte / News-Seite ─────────────────────────────────────────────── */
.bm-legal h1, .bm-legal h2 { letter-spacing: -.8px; }
.bm-legal { font-size: 13.5px; color: var(--cx-label); }

@media (prefers-reduced-motion: reduce) {
    .v2-step:hover, .v2-tile:hover, .v2-chip-mon:hover, .v2-mon:hover, .bm-news-card:hover,
    .v2-btn:hover, .bm-play-btn:hover, .bm-submit:hover, .v2-fchip:hover { animation: none; }
}

/* Formularzeilen: Felder auf eine Linie, auch wenn ein Label umbricht */
.v2-form .row2 { align-items: end; }
/* Serverliste ohne Icon, Statusknoten wie in der BitStation */
.bm-server-name .bm-ico { display: none; }
.bm-server-name::before { content: ""; width: 8px; height: 8px; background: var(--cx-cy); box-shadow: 0 0 8px rgba(var(--cx-cy-rgb), .8); flex: 0 0 auto; }
/* Ueberschriften der Unterseiten ohne Pixel-Icon (Sven: "Icons muessen weg") */
.bm-section-head h2 .bm-ico { display: none; }
.bm-section-head h2::after { border-radius: 0 !important; background: linear-gradient(90deg, transparent, var(--cx-cy), transparent) !important; }

/* 20.10.2026: Realm-Marke statt Globus-Emoji (keine Emojis in der UI) */
.bm-server-name .rico { width: 9px; height: 9px; flex: 0 0 auto; font-size: 0; background: #33d6ff;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: 0 0 8px rgba(51, 214, 255, .8); }

/* ── 20.10. Tiefenschaerfe (Sven 20.10.: "BGs hinter den BitMonz immer blurry, Fokus aufs BitMon"): eine Weichzeichner-Ebene
   (backdrop-filter) liegt UEBER dem Hintergrundbild und UNTER dem Sprite. Nur CSS, kein Markup noetig, darum
   ueberall gleich: Login, Website (Pedia-Karten, Pedia-Fenster, Band), Spielmenue (BitMon-Portrait).
   Kinder, die scharf bleiben sollen, brauchen position (relative/absolute). */
.v2-mon-stage::before, .v2-modal-stage::before, .v2-chip-mon .st::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    -webkit-backdrop-filter: blur(2.5px) brightness(.88); backdrop-filter: blur(2.5px) brightness(.88);
}
.v2-modal-stage::before { -webkit-backdrop-filter: blur(3px) brightness(.88); backdrop-filter: blur(3px) brightness(.88); }
.v2-chip-mon .st::before { -webkit-backdrop-filter: blur(1.5px) brightness(.9); backdrop-filter: blur(1.5px) brightness(.9); }
.v2-modal-stage img.big, .v2-chip-mon .st img { position: relative; z-index: 1; }